/* ==========================================================================
   theme.css — Best Muscat design system (v2, the editorial pass).

   Loaded AFTER styles.css and BEFORE the component sheets, so it can both
   introduce the --bm-* tokens and correct the legacy ones (--brand, --border,
   --muted…) that the older CSS still reads.

   PALETTE RATIONALE
   The brand mark is a gold Islamic rosette on deep navy with a teal
   brush-lettered wordmark. Everything below is sampled from the mark itself:
   navy for structure and authority, teal for interaction, gold for merit
   (ratings, featured, awards). Neutrals are warmed very slightly so white
   surfaces sit against a sand-tinted page rather than a clinical grey one,
   which suits a curated city guide far better than a SaaS dashboard palette.

   V2 ADDS
   - Fraunces as the display face (an optical-size serif with real warmth at
     display sizes; Source Serif 4 remains the fallback).
   - Category accents, so a garage never looks like a spa.
   - The wordmark lockup (inline SVG, replaces the PNG logo).
   - Reveal / count-up hooks driven by assets/ui.js, and off entirely under
     prefers-reduced-motion. Without JS nothing is hidden: the .js class gates
     every hidden-until-seen rule.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --bm-navy-950: #071A28;
  --bm-navy-900: #0B2739;
  --bm-navy-800: #0E3049;
  --bm-navy-700: #123B5E;   /* the rosette field — primary structural colour */
  --bm-navy-600: #1B4E76;
  --bm-navy-050: #EEF3F8;

  --bm-teal-700: #0E6979;
  --bm-teal-600: #127D91;   /* interactive: links, focus. AA on white (4.6:1) */
  --bm-teal-500: #199FB6;
  --bm-teal-400: #2AA7BD;   /* the wordmark teal — decorative use only */
  --bm-teal-050: #E6F5F8;

  --bm-gold-700: #8A6A10;   /* gold that is legible as TEXT on white */
  --bm-gold-600: #B08618;
  --bm-gold-500: #C79A1E;   /* badge/fill gold */
  --bm-gold-400: #E0B838;
  --bm-gold-300: #F0D27A;
  --bm-gold-050: #FBF3DE;

  /* ---- Neutrals (warm-tinted) ------------------------------------------ */
  --bm-ink:      #141A22;   /* body text */
  --bm-ink-soft: #3D4650;   /* secondary text */
  --bm-muted:    #6B7280;   /* meta, captions */
  --bm-faint:    #9AA1A9;   /* placeholders, disabled */
  --bm-line:     #E5E1D9;   /* hairline borders */
  --bm-line-soft:#F0EDE7;
  --bm-surface:  #FFFFFF;
  --bm-surface-2:#FAF8F4;   /* page background — warm off-white */
  --bm-surface-3:#F4F1EB;   /* inset panels */

  /* ---- Semantic -------------------------------------------------------- */
  --bm-success: #17694A;
  --bm-success-bg: #E6F4EE;
  --bm-danger:  #A4262C;
  --bm-danger-bg: #FBEBEC;
  --bm-whatsapp: #25D366;
  --bm-whatsapp-ink: #075E54;

  /* ---- Category accents ----------------------------------------------- */
  /* Used by brand plates, tile scrims and eyebrows via [data-accent]. Each
     pair is a saturated tone and a pale tint of the same hue. */
  --bm-acc-navy: #123B5E;        --bm-acc-navy-soft: #E9EFF5;
  --bm-acc-teal: #127D91;        --bm-acc-teal-soft: #E3F1F4;
  --bm-acc-sea: #2E7D5B;         --bm-acc-sea-soft: #E5F2EB;
  --bm-acc-gold: #B08618;        --bm-acc-gold-soft: #F8F0DA;
  --bm-acc-terracotta: #A4552E;  --bm-acc-terracotta-soft: #F7E9E1;
  --bm-acc-plum: #6E3F6B;        --bm-acc-plum-soft: #F1E7F0;
  --bm-acc-rock: #3F3A31;        --bm-acc-rock-soft: #ECE8E1;

  /* ---- Typography ------------------------------------------------------ */
  --bm-font-display: "Fraunces", "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --bm-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bm-font-arabic: "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", "Traditional Arabic", serif;

  --bm-text-xs:   0.75rem;
  --bm-text-sm:   0.8125rem;
  --bm-text-base: 0.9375rem;
  --bm-text-md:   1rem;
  --bm-text-lg:   1.125rem;
  --bm-text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --bm-text-2xl:  clamp(1.5rem, 1.28rem + 1.0vw, 2rem);
  --bm-text-3xl:  clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  --bm-text-4xl:  clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);

  /* ---- Space scale ----------------------------------------------------- */
  --bm-1: 4px;   --bm-2: 8px;   --bm-3: 12px;  --bm-4: 16px;
  --bm-5: 20px;  --bm-6: 24px;  --bm-8: 32px;  --bm-10: 40px;
  --bm-12: 48px; --bm-16: 64px; --bm-20: 80px; --bm-24: 96px;

  /* ---- Radii ----------------------------------------------------------- */
  --bm-r-sm: 8px;  --bm-r: 12px;  --bm-r-lg: 16px;
  --bm-r-xl: 22px; --bm-r-2xl: 28px; --bm-r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --bm-shadow-xs: 0 1px 2px rgba(18, 59, 94, .06);
  --bm-shadow-sm: 0 1px 2px rgba(18, 59, 94, .06), 0 2px 6px rgba(18, 59, 94, .05);
  --bm-shadow:    0 1px 3px rgba(18, 59, 94, .07), 0 6px 16px rgba(18, 59, 94, .07);
  --bm-shadow-lg: 0 2px 6px rgba(18, 59, 94, .08), 0 16px 36px rgba(18, 59, 94, .11);
  --bm-shadow-xl: 0 4px 12px rgba(18, 59, 94, .10), 0 28px 60px rgba(18, 59, 94, .16);

  /* ---- Motion ---------------------------------------------------------- */
  --bm-ease: cubic-bezier(.2, .7, .3, 1);
  --bm-fast: .14s var(--bm-ease);
  --bm-med:  .24s var(--bm-ease);
  --bm-slow: .6s var(--bm-ease);

  /* ---- Layout ---------------------------------------------------------- */
  --bm-container: 1200px;
  --bm-container-narrow: 780px;
  --bm-pad: clamp(16px, 4vw, 32px);
  --bm-scrim: linear-gradient(180deg, rgba(11,39,57,0) 30%, rgba(11,39,57,.78) 100%);

  /* ---- Legacy token overrides ----------------------------------------- */
  --maxw: var(--bm-container);
  --brand: var(--bm-teal-600);
  --muted: var(--bm-muted);
  --border: var(--bm-line);
  --bg: var(--bm-surface-2);
  --chip: var(--bm-surface-3);
  --chip-on: var(--bm-teal-050);
  --site-header-h: 112px;
}

/* Accent resolution: any element carrying data-accent gets --bm-accent and
   --bm-accent-soft, which plates, tiles and eyebrows read. */
[data-accent="navy"]       { --bm-accent: var(--bm-acc-navy);       --bm-accent-soft: var(--bm-acc-navy-soft); }
[data-accent="teal"]       { --bm-accent: var(--bm-acc-teal);       --bm-accent-soft: var(--bm-acc-teal-soft); }
[data-accent="sea"]        { --bm-accent: var(--bm-acc-sea);        --bm-accent-soft: var(--bm-acc-sea-soft); }
[data-accent="gold"]       { --bm-accent: var(--bm-acc-gold);       --bm-accent-soft: var(--bm-acc-gold-soft); }
[data-accent="terracotta"] { --bm-accent: var(--bm-acc-terracotta); --bm-accent-soft: var(--bm-acc-terracotta-soft); }
[data-accent="plum"]       { --bm-accent: var(--bm-acc-plum);       --bm-accent-soft: var(--bm-acc-plum-soft); }
[data-accent="rock"]       { --bm-accent: var(--bm-acc-rock);       --bm-accent-soft: var(--bm-acc-rock-soft); }

/* ==========================================================================
   Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--bm-font-body);
  font-size: var(--bm-text-base);
  line-height: 1.6;
  color: var(--bm-ink);
  background: var(--bm-surface-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
}

h1, h2, h3, h4, .bm-display {
  font-family: var(--bm-font-display);
  color: var(--bm-navy-900);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  /* Fraunces' optical-size axis: let the browser pick the cut for the size. */
  font-optical-sizing: auto;
}
h1 { font-size: var(--bm-text-3xl); }
h2 { font-size: var(--bm-text-2xl); }
h3 { font-size: var(--bm-text-lg); }

p { text-wrap: pretty; }

a { color: var(--bm-teal-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bm-teal-700); }

[lang="ar"], [dir="rtl"] {
  font-family: var(--bm-font-arabic);
  line-height: 1.95;
  letter-spacing: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bm-teal-600);
  outline-offset: 2px;
  border-radius: var(--bm-r-sm);
}

::selection { background: var(--bm-gold-300); color: var(--bm-navy-900); }

img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Motion hooks (assets/ui.js)
   ========================================================================== */
/* Hidden only when JS is present to reveal it; a blocked script costs nothing. */
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(16px); }
.js [data-reveal] { transition: opacity var(--bm-slow), transform var(--bm-slow); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"]:not(.is-in) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}

/* ==========================================================================
   Wordmark
   ========================================================================== */
.bm-wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--bm-gold-500); line-height: 1;
}
.bm-mark { flex: none; overflow: visible; }
/* The petals are clipped to the outer ring, exactly as in the mark. */
.bm-mark-petals { clip-path: circle(30px at 32px 32px); }
.bm-wm-stack { display: flex; flex-direction: column; gap: 3px; }
.bm-wm-text {
  font-family: var(--bm-font-display); font-size: 1.42rem; letter-spacing: -.02em;
  white-space: nowrap; display: inline-flex; align-items: baseline;
}
.bm-wm-text em { font-style: italic; font-weight: 300; color: var(--bm-teal-600); margin-right: 1px; }
.bm-wm-text b  { font-weight: 600; color: var(--bm-navy-900); }
.bm-wm-tag {
  font-family: var(--bm-font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bm-muted);
}
.bm-wordmark--light { color: var(--bm-gold-400); }
.bm-wordmark--light .bm-wm-text em { color: var(--bm-teal-400); }
.bm-wordmark--light .bm-wm-text b  { color: #fff; }
.bm-wordmark--light .bm-wm-tag { color: rgba(255,255,255,.55); }
.bm-wordmark--tagline .bm-wm-text { font-size: 1.6rem; }

/* ==========================================================================
   Shared primitives
   ========================================================================== */

.bm-container { max-width: var(--bm-container); margin-inline: auto; padding-inline: var(--bm-pad); }

.bm-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bm-4); margin-bottom: var(--bm-6); }
.bm-sechead h2 { margin: 0 0 2px; }
.bm-sechead p { margin: 4px 0 0; color: var(--bm-muted); font-size: var(--bm-text-base); max-width: 60ch; }
.bm-sechead .bm-seclink, .bm-seclink {
  flex: none; font-weight: 600; font-size: var(--bm-text-base); text-decoration: none;
  color: var(--bm-navy-800); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--bm-fast), color var(--bm-fast);
}
.bm-seclink:hover { gap: 10px; color: var(--bm-teal-700); }

.bm-eyebrow {
  font-family: var(--bm-font-body);
  font-size: var(--bm-text-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bm-teal-600); margin: 0 0 var(--bm-2);
  display: inline-flex; align-items: center; gap: 10px;
}
/* A short gold rule in front of the eyebrow — the editorial cue used across
   the site so every section opens the same way. */
.bm-eyebrow--rule::before { content: ""; width: 22px; height: 2px; background: var(--bm-gold-500); border-radius: 2px; }
.bm-eyebrow--light { color: var(--bm-gold-300); }

/* Buttons ------------------------------------------------------------------ */
.bm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--bm-font-body); font-size: var(--bm-text-base); font-weight: 600;
  padding: 12px 22px; border-radius: var(--bm-r-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--bm-fast), border-color var(--bm-fast), box-shadow var(--bm-fast), transform var(--bm-fast), color var(--bm-fast);
}
.bm-btn:active { transform: translateY(1px); }
.bm-btn--primary { background: var(--bm-navy-700); color: #fff; box-shadow: var(--bm-shadow-sm); }
.bm-btn--primary:hover { background: var(--bm-navy-800); color: #fff; box-shadow: var(--bm-shadow); }
.bm-btn--teal { background: var(--bm-teal-600); color: #fff; box-shadow: var(--bm-shadow-sm); }
.bm-btn--teal:hover { background: var(--bm-teal-700); color: #fff; }
.bm-btn--ghost { background: var(--bm-surface); color: var(--bm-navy-700); border-color: var(--bm-line); }
.bm-btn--ghost:hover { border-color: var(--bm-navy-700); background: var(--bm-navy-050); color: var(--bm-navy-800); }
.bm-btn--gold { background: var(--bm-gold-500); color: var(--bm-navy-900); box-shadow: 0 6px 18px rgba(199,154,30,.28); }
.bm-btn--gold:hover { background: var(--bm-gold-400); color: var(--bm-navy-900); box-shadow: 0 8px 22px rgba(199,154,30,.36); }
.bm-btn--light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.bm-btn--light:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); color: #fff; }
/* Arrow that travels on hover — the one micro-motion buttons share. */
.bm-btn .bm-arrow { display: inline-block; transition: transform var(--bm-fast); }
.bm-btn:hover .bm-arrow { transform: translateX(3px); }

/* Badges ------------------------------------------------------------------- */
.bm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--bm-font-body); font-size: var(--bm-text-xs); font-weight: 700;
  letter-spacing: .01em; padding: 3px 9px; border-radius: var(--bm-r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.bm-badge--gold     { background: var(--bm-gold-050); color: var(--bm-gold-700); border-color: #EBD9A6; }
.bm-badge--verified { background: var(--bm-teal-050); color: var(--bm-teal-700); border-color: #B9E0E8; }
.bm-badge--neutral  { background: var(--bm-surface-3); color: var(--bm-ink-soft); border-color: var(--bm-line); }

/* Cards -------------------------------------------------------------------- */
.bm-card {
  background: var(--bm-surface);
  border: 1px solid var(--bm-line);
  border-radius: var(--bm-r-lg);
  box-shadow: var(--bm-shadow-xs);
}

/* Utility ------------------------------------------------------------------ */
.bm-tabular { font-variant-numeric: tabular-nums; }
.bm-visually-hidden, .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Photo credit — a footnote, set like one. Used under every licensed photo. */
.bm-credit { font-size: var(--bm-text-xs); color: var(--bm-faint); margin: 0; }
.bm-credit a { color: inherit; }
.bm-credit--light { color: rgba(255,255,255,.55); }
.bm-credit--light a { color: rgba(255,255,255,.7); }

/* ==========================================================================
   Site footer
   ========================================================================== */
.bm-footer {
  background: var(--bm-navy-950); color: rgba(255,255,255,.72);
  font-size: var(--bm-text-base); margin-top: 0;
  position: relative; isolation: isolate; overflow: hidden;
}
/* The rosette motif, very faint, anchors the brand at the foot of every page. */
.bm-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23C79A1E' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='44'/%3E%3Ccircle cx='88' cy='0' r='44'/%3E%3Ccircle cx='0' cy='88' r='44'/%3E%3Ccircle cx='88' cy='88' r='44'/%3E%3Ccircle cx='44' cy='44' r='44'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 88px; opacity: .06;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
}
.bm-footer-main {
  max-width: var(--bm-container); margin: 0 auto;
  padding: var(--bm-20) var(--bm-pad) var(--bm-12);
  display: grid; gap: var(--bm-10);
  grid-template-columns: 1.7fr repeat(3, 1fr);
}
.bm-footer-brand .bm-wordmark { margin-bottom: var(--bm-5); }
.bm-footer-brand p { color: rgba(255,255,255,.62); line-height: 1.7; max-width: 42ch; margin: 0; font-size: var(--bm-text-sm); }
.bm-footer-note {
  margin-top: var(--bm-5) !important; padding-top: var(--bm-4);
  border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.48) !important; font-size: var(--bm-text-xs) !important;
}
.bm-footer-col h3 {
  font-family: var(--bm-font-body); font-size: var(--bm-text-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bm-gold-400);
  margin: 0 0 var(--bm-4);
}
.bm-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bm-footer-col a { color: rgba(255,255,255,.74); text-decoration: none; transition: color var(--bm-fast), padding-left var(--bm-fast); }
.bm-footer-col a:hover { color: #fff; padding-left: 4px; }

.bm-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.bm-footer-legal {
  max-width: var(--bm-container); margin: 0 auto;
  padding: var(--bm-5) var(--bm-pad) var(--bm-2);
  display: flex; gap: var(--bm-5); flex-wrap: wrap; align-items: center;
  font-size: var(--bm-text-sm); color: rgba(255,255,255,.5);
}
.bm-footer-legal a { color: rgba(255,255,255,.62); text-decoration: none; }
.bm-footer-legal a:hover { color: #fff; text-decoration: underline; }
.bm-footer-legal .bm-footer-ar { margin-left: auto; font-family: var(--bm-font-arabic); font-size: .95rem; color: rgba(255,255,255,.55); }

.bm-footer-disclaimer { max-width: var(--bm-container); margin: 0 auto; padding: 0 var(--bm-pad) var(--bm-8); }
.bm-footer-disclaimer summary {
  cursor: pointer; font-size: var(--bm-text-xs); color: rgba(255,255,255,.42);
  list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
}
.bm-footer-disclaimer summary::-webkit-details-marker { display: none; }
.bm-footer-disclaimer summary::after { content: "＋"; font-size: .9em; opacity: .7; }
.bm-footer-disclaimer[open] summary::after { content: "－"; }
.bm-footer-disclaimer summary:hover { color: rgba(255,255,255,.7); }
.bm-footer-disclaimer p {
  font-size: var(--bm-text-xs); line-height: 1.7; color: rgba(255,255,255,.42);
  max-width: 90ch; margin: var(--bm-2) 0 0;
}

@media (max-width: 900px) {
  .bm-footer-main { grid-template-columns: 1fr 1fr; gap: var(--bm-8); padding-top: var(--bm-12); }
  .bm-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .bm-footer-main { grid-template-columns: 1fr; }
  .bm-footer-legal .bm-footer-ar { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Bottom banner  (.hero--bottom — "Plan your day in Muscat")
   ==========================================================================
   A photograph of the city behind a navy scrim, instead of a flat navy card:
   the same language as the homepage hero, so the site closes the way it
   opened. The image is lazy and sized for the band. */
.hero { padding: var(--bm-16) var(--bm-pad) var(--bm-10); }
.hero-card {
  max-width: var(--bm-container); margin: 0 auto;
  background: var(--bm-navy-800); color: #fff;
  border-radius: var(--bm-r-2xl);
  padding: clamp(40px, 6vw, 72px) var(--bm-6);
  box-shadow: var(--bm-shadow-lg);
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
}
.hero-card-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,39,57,.66) 0%, rgba(11,39,57,.86) 100%);
}
.hero-mark { display: block; margin: 0 auto var(--bm-4); color: var(--bm-gold-400); overflow: visible; }
.hero-mark g { clip-path: circle(30px at 32px 32px); }
.hero-title {
  font-family: var(--bm-font-display); font-size: var(--bm-text-2xl) !important;
  font-weight: 600; color: #fff; margin: 0 0 var(--bm-3) !important; letter-spacing: -.02em;
}
.hero-subtitle { font-size: var(--bm-text-md); color: rgba(255,255,255,.82); margin: 0 auto var(--bm-6); max-width: 58ch; }
.hero-try { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 0; }
.hero-try > span {
  font-size: var(--bm-text-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5); opacity: 1;
}
.hero .chip {
  display: inline-block; text-decoration: none; border-radius: var(--bm-r-pill);
  font-size: var(--bm-text-base); font-weight: 500; padding: 8px 16px;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px);
  transition: background var(--bm-fast), border-color var(--bm-fast);
}
.hero .chip:hover {
  background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45);
  color: #fff; transform: none; box-shadow: none;
}
.hero-credit { position: absolute; right: 14px; bottom: 10px; z-index: 1; }