@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap");

/* ============================================================
   ASEER — ط¹ط³ظٹط± | Shared stylesheet
   Design tokens sourced from the approved Figma design system.
   Built with CSS logical properties so the same rules serve
   both dir="rtl" (Arabic) and dir="ltr" (English) without a
   separate stylesheet — only content + dir/lang attributes swap.
   ============================================================ */

:root{
  /* ---- Locked brand palette (do not add colors outside this set) ---- */
  --dark:   #003B2B;
  --gold:   #C89A38;
  --sage:   #EFF4EC;
  --white:  #FFFFFF;
  /* overlay-only helpers — photo scrims exclusively, never a solid UI fill */
  --wash:   #092A23;
  --grad:   #032A1E;

  /* ---- Shape system ---- */
  --r-card: 16px;
  --r-btn:  8px;
  --shadow-card: 0 8px 20px -4px rgba(3,42,30,.16);
  --shadow-btn:  0 8px 9px rgba(0,0,0,.18);

  /* ---- Type ---- */
  --font: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
  --fs-h1: 44px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12px;

  /* ---- Layout ---- */
  --container: 1240px;
  --gap-section: 96px;
  --nav-h: 84px;

  /* Card hover: lift only — same ratio as .exp-region-card (no image zoom) */
  --card-hover-lift: -4px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
/* Hover/press transitions added throughout this file (cards, buttons, chips,
   nav icons, footer links/social, tabs) are all short and transform/opacity-
   based; this turns them near-instant for anyone who has asked their OS for
   reduced motion, without deleting the hover styles themselves. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; }
}
body{
  font-family:var(--font);
  color:var(--dark);
  background:var(--white);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
h1,h2,h3{ text-wrap:balance; font-weight:800; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }

/* Directional text alignment that flips automatically with dir */
.txt-start{ text-align:start; }
.txt-end{ text-align:end; }
.txt-center{ text-align:center; }

/* ---- Layout helpers ---- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
/* Figma's own section frames (node 886:27) sit exactly 80px apart from each
   other, uniformly, every single time (Hero→Regions, Regions→Trip, Trip→Events,
   Events→Stats, Stats→FooterCTA, FooterCTA→Footer all measure precisely 80px) —
   the visual rhythm difference between sections comes from each section's own
   content height, not from a varying gap. 40px top+bottom on every section
   reproduces that real 80px gap when two sections sit back to back. */
.section{ padding-block:40px; }
.section-md{ padding-block:40px; }
.section-tight{ padding-block:40px; }
.section-flush{ padding-block:40px; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.section-head .eyebrow{ color:var(--gold); font-weight:700; font-size:var(--fs-small); letter-spacing:.04em; }
.section-head h2{ font-size:var(--fs-h2); margin-top:6px; }
.section-head p{ opacity:.65; margin-top:8px; max-width:60ch; }
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
.grid-6{ grid-template-columns:repeat(6,1fr); }
.grid-7{ grid-template-columns:repeat(7,1fr); }
.flex{ display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-8{ gap:8px;} .gap-12{ gap:12px;} .gap-16{ gap:16px;} .gap-24{ gap:24px;}

/* ============================================================
   Navbar
   ============================================================ */
.navbar{
  position:sticky; top:0; z-index:100;
  background:var(--dark);
  height:var(--nav-h);
  border-block-end:1px solid var(--gold);
}
.navbar .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
/* Real logo — verified against Figma node 886:337/929:78: a two-line wordmark
   ("ط¹ط³ظٹط±" + tracked "ASEER") plus the actual uploaded emblem asset, replacing the
   invented mountain-triangle glyph and the fabricated tagline. */
.nav-logo{ display:flex; align-items:center; gap:12px; color:var(--white); flex-shrink:0; }
.nav-logo-mark{ width:36px; height:36px; border-radius:6px; flex-shrink:0; display:block; }
.nav-logo-word{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.nav-logo-word b{ font-size:21px; font-weight:600; }
.nav-logo-word small{ display:block; font-size:9px; letter-spacing:.22em; opacity:.7; font-weight:600; margin-block-start:4px; }
.footer-logo .nav-logo-mark{ width:58px; height:58px; }
.footer-logo .nav-logo-word b{ font-size:30px; }
.footer-logo .nav-logo-word small{ font-size:11px; }
.nav-links{ display:flex; align-items:center; gap:28px; flex:1; justify-content:center; }
.nav-links a{ color:rgba(239,244,236,.8); font-size:var(--fs-small); font-weight:600; padding-block:8px; border-block-end:2px solid transparent; transition:color .15s, border-color .15s; white-space:nowrap; }
.nav-links a:hover{ color:var(--white); }
.nav-links a.active{ color:var(--white); border-block-end-color:var(--gold); }

/* Cinematic navbar over the Home hero — verified against Figma node 929:27
   (transparent, no bottom rule, 84%-opacity links).
   This used to be FULLY transparent, switched to a solid --dark background
   by JS once you scrolled past the hero (toggling a "nav-scrolled" class
   based on scroll position, then on an IntersectionObserver watching the
   hero). Both approaches depended on JS correctly detecting "have we
   scrolled past the hero" — and in the Artifact preview's hosting context
   that detection never fired (whatever the actual cause — a non-window
   scroll container, timing, etc.), so the navbar stayed fully see-through
   the entire way down the page, overlapping whatever section had scrolled
   underneath it (e.g. the Events section's month tabs) instead of ever
   turning solid.
   Fix: stop depending on JS/scroll detection entirely. A permanent frosted-
   glass background (semi-opaque --dark + blur) looks intentional and
   professional over the hero photo AND over every other section a user
   scrolls to — it never needs to "switch" state, so there is nothing left
   to fail. */
.navbar.nav-hero{
  /* Sticky (not fixed): some embedded/preview hosting contexts wrap the page in a
     scaled or transformed ancestor, which silently turns position:fixed into an
     absolutely-positioned box that scrolls away with the content. position:sticky
     uses the same mechanism as the base .navbar rule above (already proven stable
     site-wide) and stays correctly pinned in every hosting context. The negative
     bottom margin cancels the space it would otherwise reserve in the flow, so the
     hero section below is still pulled up to sit visually behind/under it. */
  position:sticky; top:0; margin-block-end:calc(-1 * var(--nav-h));
  background:rgba(0,59,43,.62);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-block-end:1px solid rgba(200,154,56,.4);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.25);
}
.navbar.nav-hero .nav-links a{ color:rgba(239,244,236,.9); }
.navbar.nav-hero .nav-links a:hover{ color:var(--white); }
.nav-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-icon-btn{
  width:40px; height:40px; border-radius:var(--r-btn);
  background:var(--sage); display:flex; align-items:center; justify-content:center;
  color:var(--dark); border:none; font-size:16px;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.nav-icon-btn:hover{ background:var(--gold); color:var(--white); transform:translateY(-2px); }
.lang-switch{
  border:1px solid rgba(239,244,236,.35); background:transparent; color:var(--sage);
  border-radius:var(--r-btn); padding:8px 14px; font-size:var(--fs-small); font-weight:700;
  transition:background-color .18s ease, border-color .18s ease;
}
.lang-switch:hover{ background:rgba(239,244,236,.1); border-color:rgba(239,244,236,.6); }
.nav-toggle{ display:none; background:none; border:none; color:var(--white); font-size:22px; }

@media (max-width:960px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  body.nav-open .nav-links{
    display:flex; position:absolute; inset-inline:0; inset-block-start:var(--nav-h);
    background:var(--dark); flex-direction:column; align-items:stretch; gap:0;
    padding:8px 24px 20px; border-block-end:1px solid var(--gold); box-shadow:var(--shadow-card);
  }
  body.nav-open .nav-links a{ padding-block:12px; border-block-end:1px solid rgba(239,244,236,.1); }
  body.nav-open .nav-links a.active{ border-block-end-color:rgba(239,244,236,.1); }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--grad) url('assets/img/footer-mountain-bg.png') center/cover no-repeat;
  color:var(--sage);
  width:100%;
}
.site-footer .overlay-wrap{ background:rgba(0,59,43,.83); }
.footer-top{ padding-block:40px; display:flex; justify-content:center; align-items:flex-start; gap:72px; }
.footer-links{ display:flex; align-items:flex-start; gap:32px; flex:0 0 auto; }
.footer-brand p{ opacity:.7; font-size:var(--fs-small); margin-block-start:14px; max-width:32ch; }
.footer-social{ display:flex; gap:10px; margin-block-start:18px; }
.footer-social a{ width:34px; height:34px; border-radius:50%; background:rgba(239,244,236,.12); display:flex; align-items:center; justify-content:center; color:var(--white); transition:background-color .15s; }
.footer-social a:hover{ background:rgba(239,244,236,.22); }
.footer-social a svg{ flex-shrink:0; }
.footer-col{ position:relative; flex:0 0 139px; width:139px; }
.footer-col:has(> h4[data-i18n="footer_experiences"])::before,
.footer-col:has(> h4[data-i18n="footer_discover"])::before{
  content:''; position:absolute; inset-block:6px; inset-inline-start:-16px; width:1px;
  background:rgba(239,244,236,.18);
}
.footer-col h4{ font-size:var(--fs-small); font-weight:700; margin-block-end:16px; opacity:.9; }
.footer-col ul li{ margin-block-end:10px; }
.footer-col a{ font-size:var(--fs-small); opacity:.7; }
.footer-col a:hover{ opacity:1; }
.footer-newsletter{ flex:0 0 267px; width:267px; max-width:267px; }
.footer-brand{ flex:0 0 221px; width:221px; }
.footer-newsletter .field{ margin-block-end:10px; }
.footer-newsletter .field input{
  height:48px; padding:0 16px; border-radius:8px; font-size:14px; line-height:1;
}
.footer-newsletter .btn{
  height:48px; padding:0 26px; border-radius:8px; font-size:14px; font-weight:700;
  line-height:1; box-shadow:none;
}
.footer-newsletter .btn:hover{ transform:none; box-shadow:none; }
.footer-bottom{ border-block-start:1px solid rgba(239,244,236,.18); padding-block:16px; display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-tiny); opacity:.6; flex-wrap:wrap; gap:8px; }
@media (max-width:960px){ .footer-top{ flex-wrap:wrap; gap:40px; } .footer-links{ flex-wrap:wrap; } .footer-col, .footer-newsletter, .footer-brand{ flex:1 1 200px; width:auto; } }
@media (max-width:600px){ .footer-top{ flex-direction:column; } .footer-links{ flex-direction:column; } .footer-col, .footer-newsletter, .footer-brand{ flex:1 1 auto; width:100%; } }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-btn); border:none; font-weight:700; font-size:var(--fs-small);
  padding:14px 26px; white-space:nowrap; transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
/* Hover lifts every button site-wide by the same 2px + a soft shadow — one
   rule instead of repeating it per variant, since .btn is the shared base
   class for all of them. :active (below, later in the cascade) still wins
   over :hover on press so the existing "pressed" feedback isn't lost when a
   mouse both hovers and clicks. */
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 18px -6px rgba(3,42,30,.28); }
.btn:active{ transform:scale(.97); box-shadow:none; }
.btn-primary{ background:var(--gold); color:var(--dark); }
.btn-primary:hover{ opacity:.92; }
.btn-secondary{ background:var(--white); color:var(--dark); border:1px solid rgba(0,59,43,.2); }
.btn-secondary:hover{ background:var(--sage); }
.btn-ghost{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.5); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-dark{ background:var(--dark); color:var(--white); }
.btn-dark:hover{ opacity:.9; }
.btn-sm{ padding:10px 18px; font-size:var(--fs-tiny); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn[disabled]:hover{ transform:none; box-shadow:none; }

/* ============================================================
   Cards
   ============================================================ */
.card{ background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card); }
.card-pad{ padding:24px; }

.media-card{ border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); position:relative; background:var(--sage); transition:transform .3s ease, box-shadow .3s ease; }
.media-card .scenic{ width:100%; aspect-ratio:4/3; }
/* Shared listing-card hover: lift only (translateY -4px), matching
   .exp-region-card — no photo zoom, so large and small cards move alike. */
.media-card:hover{ transform:translateY(-4px); box-shadow:0 18px 30px -8px rgba(3,42,30,.3); }
.media-card .scenic, .media-card > img{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.media-card:hover .scenic, .media-card:hover > img{ transform:none; }
.media-card .caption{
  position:absolute; inset-inline:0; inset-block-end:0; padding:16px;
  background:var(--dark); color:var(--white);
}
.media-card .caption h3{ font-size:16px; }
.media-card .caption p{ font-size:var(--fs-tiny); opacity:.8; margin-block-start:4px; }
.media-card .badge-count{
  position:absolute; inset-block-start:12px; inset-inline-end:12px;
  background:rgba(0,59,43,.6); color:var(--white); font-size:var(--fs-tiny); font-weight:700;
  padding:4px 10px; border-radius:999px;
}
.media-card .save-btn{
  position:absolute; inset-block-start:12px; inset-inline-start:12px;
  width:32px; height:32px; border-radius:50%; background:var(--white); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:14px;
  transition:transform .18s ease, color .18s ease;
}
.media-card .save-btn:hover{ transform:scale(1.15); color:var(--dark); }
.media-card .save-btn.active{ color:var(--dark); }

/* ============================================================
   Chips / pills
   ============================================================ */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:999px;
  background:var(--sage); color:var(--dark); font-weight:700; font-size:var(--fs-small);
  border:none; white-space:nowrap; transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.chip:hover:not(.active){ background:rgba(0,59,43,.16); transform:translateY(-1px); }
.chip.active{ background:var(--dark); color:var(--white); }
.chip.active:hover{ opacity:.9; }
.chip-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ============================================================
   Forms
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:var(--fs-small); font-weight:700; }
.field input, .field select, .field textarea{
  border-radius:var(--r-btn); border:1px solid rgba(0,59,43,.15); background:var(--white);
  padding:13px 16px; font-size:var(--fs-small); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.search-bar{
  display:flex; align-items:center; gap:10px; background:var(--white); border-radius:var(--r-btn);
  padding:14px 18px; box-shadow:var(--shadow-card); flex:1;
}
.search-bar input{ border:none; flex:1; font-size:var(--fs-small); background:transparent; }
.search-bar input:focus{ outline:none; }

/* ============================================================
   Hero patterns
   ============================================================ */
.hero{ position:relative; min-height:640px; display:flex; align-items:center; color:var(--white); overflow:hidden; }
.hero .scenic{ position:absolute; inset:0; z-index:0; }
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,42,30,.15), rgba(3,42,30,.75));
  z-index:1;
}
.hero-content{ position:relative; z-index:2; }
.hero-content .eyebrow{ display:flex; align-items:center; gap:10px; font-size:var(--fs-small); font-weight:700; opacity:.85; }
.hero-content h1{ font-size:var(--fs-h1); margin-block:16px; max-width:16ch; }
.hero-content p{ font-size:18px; opacity:.85; max-width:52ch; }
.hero-actions{ display:flex; gap:14px; margin-block-start:28px; flex-wrap:wrap; }
.hero-stats{
  position:relative; z-index:2; margin-block-start:-40px;
  background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card);
  display:flex; padding:24px; gap:0;
}
.hero-stats .stat{ flex:1; text-align:center; border-inline-end:1px solid rgba(0,59,43,.1); }
.hero-stats .stat:last-child{ border-inline-end:none; }
.hero-stats .stat b{ display:block; font-size:20px; }
.hero-stats .stat span{ font-size:var(--fs-tiny); opacity:.6; }
.page-hero{ min-height:340px; }
.breadcrumb{ font-size:var(--fs-tiny); opacity:.75; margin-block-end:8px; }
.breadcrumb a{ opacity:.85; transition:opacity .15s ease; } .breadcrumb a:hover{ opacity:1; text-decoration:underline; }

/* ============================================================
   Badges / stat pills
   ============================================================ */
.stat-pill{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:8px 16px; font-size:var(--fs-tiny);
}
.status-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:var(--fs-tiny); font-weight:700; }
.status-badge.gold{ background:rgba(200,154,56,.14); color:var(--gold); }
.status-badge.dark{ background:rgba(0,59,43,.1); color:var(--dark); }

/* ============================================================
   Language switch + skip link + misc
   ============================================================ */
.skip-link{ position:absolute; inset-block-start:-60px; inset-inline-start:12px; background:var(--gold); color:var(--dark); padding:10px 16px; border-radius:var(--r-btn); z-index:200; }
.skip-link:focus{ inset-block-start:12px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

[data-lang-en]{ font-family:'Inter', sans-serif; }

@media (max-width:960px){
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7{ grid-template-columns:repeat(2,1fr); }
  .hero{ min-height:520px; text-align:center; }
  .hero-content h1{ max-width:none; }
  .hero-stats{ flex-wrap:wrap; }
  .hero-stats .stat{ flex:1 1 40%; margin-block-end:12px; }
}
@media (max-width:600px){
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7{ grid-template-columns:1fr; }
  :root{ --fs-h1:32px; --fs-h2:24px; }
}

/* ============================================================
   Home — Real Figma design (verified via Dev Mode / node 886:27)
   ============================================================ */
.hero-real{
  position:relative; min-height:750px; display:flex; align-items:flex-start;
  /* Figma (get_design_context, node 886:34): Hero/Main Content top=190px within
     the 720px-tall hero image, at a 1440px canvas baseline — 190/1440=13.2vw. */
  padding-block-start:clamp(80px,13.2vw,190px);
  color:var(--white); overflow:hidden; background:var(--dark);
}
.hero-real .hero-real-bg{ position:absolute; inset:0; z-index:0; }
.hero-real .hero-real-bg img{ width:100%; height:100%; object-fit:cover; }
/* Shade — uniform scrim across the whole photo for text contrast (Figma: "Shade",
   full-height, node 886:31), re-derived correctly instead of the old floating
   band that only covered the middle third and read as a rendering glitch. */
.hero-real .hero-real-bg::before{
  content:''; position:absolute; inset:0; z-index:1; background:rgba(9,42,35,.3);
}
/* Mist overlay (52%→100%, node 886:30) blending straight into the Bottom Fade to
   Green (74%→100%, node 886:32). The two color-stops previously sat at the exact
   same 52% position, which is a hard, instant jump in a CSS gradient (a visible
   seam), not a fade — spread over a real transition band instead. */
.hero-real .hero-real-bg::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    transparent 0%, transparent 42%,
    rgba(239,244,236,.14) 62%, rgba(239,244,236,.1) 74%,
    var(--wash) 90%, var(--grad) 100%);
}
/* Content sits inside its own edge-hugging wrapper, not the standard 1240px
   reading-width .container — Figma's own text block (node 886:34) ends only
   ~16% of the canvas width from its trailing edge, much closer to the true
   frame edge than the shared container would ever allow on a wide viewport. */
/* margin-inline-END (not -start): in this RTL row, absorbing space on the
   inline-start (right) side would have pushed the box the wrong way — the
   previous rule silently left-aligned it instead of hugging the right edge. */
/* Figma (get_design_context, node 886:34): content box width=760px, positioned
   right:228px from the 1440px canvas edge — i.e. a real, fixed 228px gap from
   the true right edge, not the 96px cap this rule used to top out at (the
   direct cause of the "sitting flush against the edge" complaints). Modeled as
   max-width:988 (760 content + 228 gap) with the gap as inline-START padding
   only (inline-start = the right side in this RTL layout) — inline-end stays 0
   since the box's own width already bounds the text on the left. 228/1440=15.8vw. */
.hero-real-content{ position:relative; z-index:2; max-width:988px; width:100%; padding-inline-start:clamp(24px,15.8vw,228px); padding-inline-end:0; margin-inline-end:auto; }
.hero-real-content .eyebrow{ font-size:18px; font-weight:500; opacity:.8; display:block; margin-block-end:14px; }
.hero-real-content h1{ font-size:clamp(38px,5.3vw,76px); line-height:1.05; margin:0; }
.hero-real-content .hero-real-sub{ font-size:clamp(22px,2.92vw,42px); font-weight:700; display:block; margin-block-start:6px; }
.hero-real-content p{ font-size:20px; opacity:.85; max-width:52ch; margin-block-start:16px; }
.hero-real .hero-actions{ margin-block-start:26px; }
.btn-hero-white{ background:var(--white); color:var(--dark); }
.btn-hero-white:hover{ opacity:.92; }
.btn-hero-gold{ background:var(--gold); color:var(--white); }
.btn-hero-gold:hover{ opacity:.92; }

/* Feature strip — Figma's own coordinates (node 886:308, top=729) place this
   band 148px *before* the Hero section (886:28) ends at 877: it's a card that
   floats up and overlaps the hero's bottom edge, not a block stacked after the
   later sections the way the previous build had it. Reproduced here as a
   negative-margin overlap instead of guessing at a plain stacked order. */
.feature-float{ position:relative; z-index:3; margin-block-start:-64px; }
.feature-strip{ display:flex; flex-wrap:wrap; background:var(--white); }
.feature-strip .feature-item{ flex:1 1 220px; display:flex; align-items:center; gap:14px; padding:22px 20px; border-inline-end:1px solid rgba(0,59,43,.1); }
.feature-strip .feature-item:last-child{ border-inline-end:none; }
.feature-strip .feature-icon{ width:36px; height:36px; flex-shrink:0; color:var(--gold); }
.feature-strip h4{ font-size:18px; font-weight:700; }
.feature-strip p{ font-size:var(--fs-tiny); opacity:.68; margin-block-start:3px; }
@media (max-width:900px){
  .feature-strip .feature-item{ flex:1 1 45%; border-inline-end:none; border-block-end:1px solid rgba(0,59,43,.1); }
  .feature-float{ margin-block-start:-32px; }
}

/* Regions + map */
/* Track order follows DOM order (map first, cards second) — Figma's real
   proportions are Cards 796 : Map 480 ≈ 1.66 : 1. */
/* Figma (get_design_context, node 886:62): title 34px bold, subtitle 16px,
   both right-aligned, no eyebrow label. */
.regions-head{ margin-block-end:32px; text-align:start; }
.regions-head h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.2; color:var(--dark); margin:0; }
.regions-head p{ font-size:16px; opacity:.68; margin-block-start:12px; }
.regions-map-wrap{ display:grid; grid-template-columns:1fr 1.66fr; gap:28px; align-items:stretch; }
.region-card-rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.region-card{ position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:184/300; background:var(--dark); box-shadow:var(--shadow-card); transition:transform .3s ease, box-shadow .3s ease; }
.region-card:hover{ transform:translateY(-4px); box-shadow:0 18px 32px -8px rgba(3,42,30,.35); }
.region-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.region-card:hover img{ transform:none; }
.region-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,42,30,0) 45%, rgba(3,42,30,.92) 100%); }
.region-card .region-card-body{ position:absolute; inset-inline:0; inset-block-end:0; padding:14px 12px; text-align:center; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; }
.region-card .region-icon{ width:30px; height:30px; color:var(--gold); transition:transform .3s ease; }
.region-card:hover .region-icon{ transform:translateY(-3px) scale(1.08); }
.region-card h3{ color:var(--white); font-size:28px; }
.region-card p{ color:var(--white); font-size:14px; opacity:.9; }
/* Honest region guide — numbered path (same badge language as dest-day / peaks route) */
.regions-guide{
  background:var(--white);
  border:1.5px solid rgba(0,59,43,.12);
  border-radius:var(--r-card);
  box-shadow:0 8px 20px -4px rgba(3,42,30,.12);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:20px;
  min-height:100%;
  text-align:start;
}
.regions-guide__hint{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--gold);
}
.regions-guide-path{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
  flex:1;
  justify-content:space-between;
}
.regions-guide-path::before{
  content:"";
  position:absolute;
  inset-inline-start:20px;
  top:28px;
  bottom:28px;
  width:2px;
  background:rgba(200,154,56,.45);
  z-index:0;
  pointer-events:none;
}
.regions-guide-path > li{ margin:0; position:relative; z-index:1; }
.regions-guide-stop{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:12px 8px;
  border:0;
  background:transparent;
  border-radius:12px;
  cursor:pointer;
  text-align:start;
  color:inherit;
  font:inherit;
  transition:background .2s ease, transform .2s ease;
}
.regions-guide-stop:hover,
.regions-guide-stop.is-on{
  background:var(--sage);
}
.regions-guide-stop:hover{ transform:translateX(-2px); }
[dir="ltr"] .regions-guide-stop:hover{ transform:translateX(2px); }
.regions-guide-stop__num{
  width:42px;
  height:42px;
  border-radius:21px;
  background:var(--dark);
  color:var(--gold);
  font-size:20px;
  font-weight:700;
  line-height:42px;
  text-align:center;
  flex-shrink:0;
}
.regions-guide-stop.is-on .regions-guide-stop__num,
.regions-guide-stop:hover .regions-guide-stop__num{
  background:var(--gold);
  color:var(--dark);
}
.regions-guide-stop__copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.regions-guide-stop__name{
  font-size:18px;
  font-weight:700;
  color:var(--dark);
  line-height:1.3;
}
.regions-guide-stop__note{
  font-size:13px;
  line-height:1.4;
  color:rgba(0,59,43,.68);
}
@media (max-width:960px){ .regions-map-wrap{ grid-template-columns:1fr; } .region-card-rail{ grid-template-columns:repeat(2,1fr); } }

/* Trip planner */
/* Track order follows DOM order (summary first, builder canvas second) —
   Figma's real proportions are Builder 770 : Summary 445 ≈ 1.73 : 1. */
.trip-planner{ background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:36px; display:grid; grid-template-columns:1fr 1.73fr; gap:36px; }
.trip-inputs-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
/* Figma (get_screenshot, node 886:120): each chip is small and flat — 182أ—74
   at the reference width, a barely-there shadow, dark-green (not gold)
   icons. The old heavy --shadow-card + generous padding made these read as
   big/inconsistent cards instead of compact chips; nowrap+ellipsis on the
   label/value stops a longer value (e.g. "ط·ط¨ظٹط¹ط© ظˆطھط±ط§ط«") from wrapping to a
   second line and making that one chip visually taller than its siblings. */
/* justify-content was space-between: with an equal-width grid but variable-
   length values ("ط·ط¨ظٹط¹ط© ظˆطھط±ط§ط«" vs "3 ط£ظٹط§ظ…"), that stretches the icon-to-text
   gap anywhere from ~24px to ~66px depending on the text, which is exactly
   what reads as "irregular" even though the 4 cards are the same width.
   flex-start + a fixed gap keeps that one relationship constant across all
   four; any leftover width now trails at one consistent edge instead. */
.trip-input{ background:var(--white); box-shadow:0 1px 4px rgba(3,42,30,.08); border-radius:var(--r-btn); padding:12px 16px; display:flex; align-items:center; justify-content:flex-start; gap:14px; min-width:0; transition:box-shadow .2s ease, transform .2s ease; }
.trip-input:hover{ box-shadow:0 6px 16px -2px rgba(3,42,30,.16); transform:translateY(-2px); }
.trip-input:hover .trip-input-icon{ color:var(--gold); }
.trip-input .trip-input-icon{ width:28px; height:28px; color:var(--dark); flex-shrink:0; transition:color .2s ease; }
.trip-input .trip-input-label{ font-size:var(--fs-tiny); opacity:.68; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trip-input .trip-input-value{ font-size:15px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trip-input > div{ min-width:0; }
.trip-path{
  background:var(--sage);
  border-radius:var(--r-card);
  padding:20px 18px 22px;
  text-align:start;
  min-height:260px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.trip-path__hint{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--gold);
}
.trip-path__days{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  flex:1;
  position:relative;
}
.trip-path__days::before{
  content:"";
  position:absolute;
  inset-block-start:54px;
  inset-inline:18%;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(200,154,56,.55), transparent);
  pointer-events:none;
  z-index:0;
}
.trip-path__days > li{ margin:0; position:relative; z-index:1; min-width:0; }
.trip-day{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease;
}
.trip-day:hover{ transform:translateY(-4px); }
.trip-day__media{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--dark);
  box-shadow:var(--shadow-card);
}
.trip-day__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}
.trip-day:hover .trip-day__media img{ transform:none; }
.trip-day__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(9,42,35,.12);
  pointer-events:none;
}
.trip-day__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding-inline:2px;
}
.trip-day__num{
  width:28px;
  height:28px;
  border-radius:999px;
  background:var(--dark);
  color:var(--white);
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-block-end:2px;
}
.trip-day:hover .trip-day__num{ background:var(--gold); }
.trip-day__label{
  font-size:12px;
  color:rgba(0,59,43,.62);
}
.trip-day__body strong{
  font-size:16px;
  font-weight:700;
  color:var(--dark);
  line-height:1.3;
}
@media (max-width:720px){
  .trip-path__days{
    grid-template-columns:1fr;
    gap:12px;
  }
  .trip-path__days::before{ display:none; }
  .trip-day{
    flex-direction:row;
    align-items:center;
    gap:14px;
  }
  .trip-day__media{
    width:96px;
    flex:0 0 96px;
    aspect-ratio:1;
  }
}
.trip-summary{ display:flex; flex-direction:column; justify-content:center; gap:28px; }
.trip-summary h2{ font-size:clamp(26px,3.5vw,36px); font-weight:700; }
.trip-summary > p{ font-size:18px; opacity:.68; margin-block-start:10px; }
.suggested-route-card{ background:var(--white); box-shadow:var(--shadow-card); border-radius:var(--r-card); padding:20px; display:flex; align-items:center; gap:20px; transition:transform .25s ease, box-shadow .25s ease; }
/* No wrapper div wraps just the thumbnail, so the image can't be zoomed and
   clipped independently without overflowing its own rounded corners — the
   lift + deeper shadow on the whole card is the safe hover cue here. */
.suggested-route-card:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -6px rgba(3,42,30,.26); }
.suggested-route-card img{ width:104px; height:80px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.suggested-route-card h4{ font-size:18px; font-weight:700; }
.suggested-route-card p{ font-size:15px; opacity:.68; margin-block-start:6px; }
@media (max-width:960px){ .trip-planner{ grid-template-columns:1fr; } .trip-inputs-row{ grid-template-columns:repeat(2,1fr); } }

/* Summer events — Figma (get_design_context + get_metadata, node 886:175): the
   whole section is its own full-bleed, edge-to-edge (0→1440) rounded panel in
   --sage, padded 105px/40px (105/1440=7.29vw), NOT nested in .container like
   the other sections. Its three children (tabs+header group / cards rail /
   CTA button) are a centered column with 48px gaps between them — not the
   generic .section-head space-between row this used to reuse. */
/* This section has no .container/.section-md wrapper (it's full-bleed, see
   the section's own comment in index.html), so unlike every other section it
   was getting ZERO of the standard 40px section padding that keeps a Figma-
   accurate ~80px rhythm between sections (Trip Planner bottom padding + this
   margin = 80, matching get_metadata's real 80px gaps around node 886:175) —
   it was touching Trip Planner above and Stats below with no gap at all. */
.events-panel{
  background:var(--sage); border-radius:16px;
  margin-block:40px;
  padding-block:40px; padding-inline:clamp(20px,7.29vw,105px);
  display:flex; flex-direction:column; align-items:center; gap:48px;
}
.events-head-group{ display:flex; flex-direction:column; align-items:center; gap:17px; }
.events-tabs{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.events-tabs button{ width:132px; height:54px; border:none; background:rgba(0,59,43,.08); color:rgba(0,59,43,.68); font-weight:700; font-size:20px; border-radius:13px; transition:background-color .18s ease, color .18s ease, transform .18s ease; }
.events-tabs button:hover:not(.active){ background:rgba(0,59,43,.16); color:var(--dark); transform:translateY(-1px); }
.events-tabs button.active{ background:var(--gold); color:var(--white); box-shadow:0 8px 18px rgba(0,0,0,.22); }
.events-tabs button.active:hover{ opacity:.92; }
.events-header{ text-align:right; }
.events-header h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.2; color:var(--dark); margin:0; }
.events-header p{ font-size:16px; color:rgba(0,59,43,.68); margin-block-start:3px; }
.events-rail{ gap:30px; }
/* Cards are the bare Figma-exported PNGs (gradient + text already baked into
   the pixels, node 886:188 etc. — verified by opening the files directly),
   so no HTML text overlay is layered on top of them. */
.event-card{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:285/155; transition:transform .3s ease, box-shadow .3s ease; }
.event-card:hover{ transform:translateY(-4px); box-shadow:0 18px 30px -8px rgba(3,42,30,.3); }
.event-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.event-card:hover img{ transform:none; }
.events-cta{ width:220px; height:48px; font-size:15px; font-weight:500; padding:0; }

/* Home — summer events: spotlight + agenda (measured from events page map/week) */
body[data-page="home"] .events-panel.home-ev{
  align-items:stretch;
  gap:40px;
}
body[data-page="home"] .home-ev-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  width:100%;
  flex-wrap:wrap;
}
body[data-page="home"] .home-ev-titles{
  text-align:start;
  flex:1 1 240px;
}
body[data-page="home"] .home-ev-titles .section-sub{
  margin:10px 0 0;
  text-align:start;
  color:rgba(0,59,43,.68);
  font-size:16px;
}
body[data-page="home"] .home-ev-head .month-tabs{
  flex-shrink:0;
}
body[data-page="home"] .home-ev-stage{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,0.8fr);
  gap:28px;
  align-items:stretch;
}
body[data-page="home"] .home-ev-stage[hidden]{ display:none !important; }
body[data-page="home"] .home-ev-feature{
  position:relative;
  display:block;
  border-radius:var(--r-card);
  overflow:hidden;
  min-height:456px;
  box-shadow:var(--shadow-card);
  color:var(--white);
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="home"] .home-ev-feature:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
body[data-page="home"] .home-ev-feature > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="home"] .home-ev-feature:hover > img{ transform:none; }
body[data-page="home"] .home-ev-feature__wash{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,.15) 42%, rgba(3,42,30,.88) 100%),
    linear-gradient(90deg, rgba(9,42,35,.18), rgba(9,42,35,.18));
  pointer-events:none;
}
body[data-page="home"] .home-ev-feature__copy{
  position:relative;
  z-index:1;
  height:100%;
  min-height:456px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  text-align:start;
  padding:28px 30px;
  gap:8px;
}
body[data-page="home"] .home-ev-feature__tag{
  display:inline-flex;
  align-items:center;
  background:var(--gold);
  color:var(--white);
  border-radius:var(--r-btn);
  padding:6px 14px;
  font-size:12px;
  font-weight:500;
  margin-block-end:4px;
}
body[data-page="home"] .home-ev-feature__date{
  font-size:14px;
  color:rgba(255,255,255,.88);
}
body[data-page="home"] .home-ev-feature__copy h3{
  margin:0;
  font-size:clamp(26px,2.6vw,38px);
  font-weight:700;
  line-height:1.3;
  color:var(--white);
  max-width:18ch;
}
body[data-page="home"] .home-ev-feature__copy > p{
  margin:0;
  font-size:15px;
  color:rgba(255,255,255,.78);
}
body[data-page="home"] .home-ev-feature__cta{
  margin-block-start:10px;
  font-size:15px;
  font-weight:600;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .2s ease;
}
body[data-page="home"] .home-ev-feature:hover .home-ev-feature__cta{
  transform:translateX(-4px);
}
[dir="rtl"] body[data-page="home"] .home-ev-feature:hover .home-ev-feature__cta{
  transform:translateX(4px);
}
body[data-page="home"] .home-ev-agenda{
  background:var(--white);
  border-radius:var(--r-card);
  box-shadow:0 8px 10px rgba(3,42,30,.16);
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:15px 30px;
  text-align:start;
  min-height:456px;
}
body[data-page="home"] .home-ev-agenda__head{
  display:flex;
  align-items:center;
  gap:10px;
}
body[data-page="home"] .home-ev-agenda__head h3{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:var(--dark);
}
body[data-page="home"] .home-ev-agenda__list{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
body[data-page="home"] .home-ev-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 8px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  transition:background-color .2s ease, transform .2s ease;
}
body[data-page="home"] .home-ev-item:hover{
  background:var(--sage);
  transform:translateX(-2px);
}
[dir="rtl"] body[data-page="home"] .home-ev-item:hover{
  transform:translateX(2px);
}
body[data-page="home"] .home-ev-item__date{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:48px;
  text-align:center;
  font-size:12px;
  line-height:1.25;
  color:rgba(0,59,43,.68);
}
body[data-page="home"] .home-ev-item__date strong{
  font-size:13px;
  font-weight:700;
  color:var(--gold);
}
body[data-page="home"] .home-ev-item__copy{
  flex:1;
  min-width:0;
  text-align:start;
}
body[data-page="home"] .home-ev-item__copy h4{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--dark);
  line-height:1.35;
}
body[data-page="home"] .home-ev-item__copy p{
  margin:2px 0 0;
  font-size:12px;
  color:rgba(0,59,43,.68);
}
body[data-page="home"] .home-ev-item__thumb{
  position:relative;
  display:block;
  flex-shrink:0;
  width:64px;
  height:56px;
  border-radius:8px;
  overflow:hidden;
  background:var(--dark);
}
body[data-page="home"] .home-ev-item__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
body[data-page="home"] .home-ev-item:hover .home-ev-item__thumb img{
  transform:none;
}
body[data-page="home"] .home-ev-item__thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(9,42,35,.18);
  pointer-events:none;
}
body[data-page="home"] .home-ev-agenda__more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-end;
  margin-block-start:auto;
  font-size:15px;
  font-weight:500;
  color:var(--gold);
  text-decoration:none;
  transition:opacity .2s ease;
}
body[data-page="home"] .home-ev-agenda__more:hover{ opacity:.72; }
body[data-page="home"] .home-ev-agenda__more img{
  width:14px;
  height:12px;
  transition:transform .2s ease;
}
body[data-page="home"] .home-ev-agenda__more:hover img{
  transform:translateX(-3px);
}
[dir="rtl"] body[data-page="home"] .home-ev-agenda__more:hover img{
  transform:translateX(3px);
}
@media (max-width:980px){
  body[data-page="home"] .home-ev-stage{
    grid-template-columns:1fr;
  }
  body[data-page="home"] .home-ev-feature,
  body[data-page="home"] .home-ev-feature__copy,
  body[data-page="home"] .home-ev-agenda{
    min-height:0;
  }
  body[data-page="home"] .home-ev-feature{ aspect-ratio:16/10; }
  body[data-page="home"] .home-ev-feature__copy{ min-height:0; padding:22px 20px; }
  body[data-page="home"] .home-ev-feature__copy h3{ font-size:clamp(22px,5vw,30px); }
}
@media (max-width:640px){
  body[data-page="home"] .home-ev-head{
    flex-direction:column;
    align-items:stretch;
  }
  body[data-page="home"] .home-ev-head .month-tabs{
    justify-content:flex-start;
  }
  body[data-page="home"] .month-tabs button{
    width:auto;
    min-width:96px;
    height:48px;
    font-size:16px;
    padding-inline:16px;
  }
  body[data-page="home"] .home-ev-item__thumb{
    width:56px;
    height:48px;
  }
}

/* Home — region spotlight slider (4 regions, above #regions) */
body[data-page="home"] .home-spot-head{
  text-align:start;
  margin-block-end:28px;
}
body[data-page="home"] .home-spot-head .section-sub{
  margin:10px 0 0;
  text-align:start;
  color:rgba(0,59,43,.68);
  font-size:16px;
}
body[data-page="home"] .home-spot{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  background:var(--dark);
}
body[data-page="home"] .home-spot__viewport{
  position:relative;
  min-height:420px;
  aspect-ratio:1240/420;
}
body[data-page="home"] .home-spot__slide{
  position:absolute;
  inset:0;
  display:block;
  color:var(--white);
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .55s ease, visibility .55s ease;
  pointer-events:none;
}
body[data-page="home"] .home-spot__slide.is-on{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:1;
}
body[data-page="home"] .home-spot__slide > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 6s ease;
}
body[data-page="home"] .home-spot__slide.is-on > img{
  transform:scale(1.08);
}
body[data-page="home"] .home-spot__wash{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(3,42,30,.15) 0%, rgba(3,42,30,.35) 45%, rgba(3,42,30,.88) 100%),
    linear-gradient(90deg, rgba(9,42,35,.22), rgba(9,42,35,.22));
  pointer-events:none;
}
body[data-page="home"] .home-spot__copy{
  position:relative;
  z-index:2;
  height:100%;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  text-align:start;
  padding:36px clamp(20px,4vw,48px) 72px;
  gap:8px;
}
body[data-page="home"] .home-spot__tag{
  display:inline-flex;
  background:var(--gold);
  color:var(--white);
  border-radius:var(--r-btn);
  padding:6px 14px;
  font-size:12px;
  font-weight:500;
  margin-block-end:4px;
}
body[data-page="home"] .home-spot__copy h3{
  margin:0;
  font-size:clamp(28px,3.2vw,42px);
  font-weight:700;
  line-height:1.25;
  color:var(--sage);
}
body[data-page="home"] .home-spot__copy > p{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:rgba(239,244,236,.88);
  max-width:28ch;
}
body[data-page="home"] .home-spot__cta{
  margin-block-start:10px;
  font-size:15px;
  font-weight:600;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .2s ease;
}
body[data-page="home"] .home-spot__slide:hover .home-spot__cta{
  transform:translateX(-4px);
}
[dir="rtl"] body[data-page="home"] .home-spot__slide:hover .home-spot__cta{
  transform:translateX(4px);
}
body[data-page="home"] .home-spot__nav{
  position:absolute;
  z-index:3;
  inset-inline:clamp(16px,3vw,40px);
  inset-block-end:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  pointer-events:none;
}
body[data-page="home"] .home-spot__btn,
body[data-page="home"] .home-spot__dots{
  pointer-events:auto;
}
body[data-page="home"] .home-spot__btn{
  width:44px;
  height:44px;
  border:1px solid rgba(239,244,236,.35);
  border-radius:999px;
  background:rgba(0,59,43,.45);
  color:var(--white);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
body[data-page="home"] .home-spot__btn:hover{
  background:var(--gold);
  border-color:var(--gold);
  transform:none;
}
body[data-page="home"] .home-spot__dots{
  display:flex;
  align-items:center;
  gap:8px;
}
body[data-page="home"] .home-spot__dots button{
  width:10px;
  height:10px;
  padding:0;
  border:none;
  border-radius:999px;
  background:rgba(239,244,236,.4);
  cursor:pointer;
  transition:width .2s ease, background-color .2s ease;
}
body[data-page="home"] .home-spot__dots button.is-on{
  width:28px;
  background:var(--gold);
}
@media (max-width:720px){
  body[data-page="home"] .home-spot__viewport{
    min-height:340px;
    aspect-ratio:auto;
  }
  body[data-page="home"] .home-spot__copy{
    min-height:340px;
    padding:28px 20px 68px;
  }
  body[data-page="home"] .home-spot__copy h3{ font-size:clamp(24px,7vw,32px); }
}

/* Home — stats: photo band + metric cards (palette + measured tokens) */
body[data-page="home"] .section--stats{
  padding-block:40px;
}
body[data-page="home"] .home-stats{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-card);
  margin-inline:auto;
  width:min(var(--container), calc(100% - 48px));
  color:var(--white);
  box-shadow:var(--shadow-card);
}
body[data-page="home"] .home-stats__bg{
  position:absolute;
  inset:0;
  z-index:0;
}
body[data-page="home"] .home-stats__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
}
body[data-page="home"] .home-stats__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(105deg, rgba(3,42,30,.88) 0%, rgba(3,42,30,.72) 48%, rgba(9,42,35,.55) 100%),
    linear-gradient(180deg, rgba(0,59,43,.25) 0%, rgba(0,59,43,.55) 100%);
}
body[data-page="home"] .home-stats__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(220px,.9fr) minmax(0,1.4fr);
  gap:36px;
  align-items:center;
  padding-block:48px;
  padding-inline:clamp(20px,4vw,48px);
}
body[data-page="home"] .home-stats__brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:start;
  gap:14px;
}
body[data-page="home"] .home-stats__mark{
  width:43px;
  height:43px;
  color:var(--gold);
}
body[data-page="home"] .home-stats__word{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
  gap:6px;
}
body[data-page="home"] .home-stats__word b{
  font-size:28px;
  font-weight:700;
  color:var(--sage);
}
body[data-page="home"] .home-stats__word small{
  font-size:11px;
  letter-spacing:.28em;
  color:rgba(239,244,236,.72);
  font-weight:500;
}
body[data-page="home"] .home-stats__msg{
  margin:8px 0 0;
  font-size:clamp(22px,2.4vw,30px);
  font-weight:600;
  line-height:1.45;
  color:var(--white);
  max-width:16ch;
}
body[data-page="home"] .home-stats__msg::before{
  content:"";
  display:block;
  width:70px;
  height:2px;
  margin-block-end:14px;
  background:var(--gold);
  border-radius:1px;
}
body[data-page="home"] .home-stats__rail{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
body[data-page="home"] .home-stats__card{
  background:rgba(239,244,236,.1);
  border:1px solid rgba(239,244,236,.22);
  border-radius:var(--r-card);
  padding:22px 16px 20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:start;
  gap:6px;
  backdrop-filter:blur(8px);
  transition:transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
body[data-page="home"] .home-stats__card:hover{
  transform:translateY(-4px);
  background:rgba(239,244,236,.16);
  border-color:rgba(200,154,56,.55);
  box-shadow:0 14px 28px -10px rgba(0,0,0,.35);
}
body[data-page="home"] .home-stats__ico{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  margin-block-end:8px;
}
body[data-page="home"] .home-stats__ico svg{
  width:28px;
  height:28px;
}
body[data-page="home"] .home-stats__card b{
  font-size:31px;
  font-weight:700;
  line-height:1.15;
  color:var(--gold);
}
body[data-page="home"] .home-stats__card > span{
  font-size:13px;
  line-height:1.4;
  color:rgba(239,244,236,.82);
}
body[data-page="home"] .home-stats__card b + span{
  margin-block-start:4px;
  font-weight:600;
  color:var(--sage);
  font-size:14px;
}
@media (max-width:980px){
  body[data-page="home"] .home-stats__inner{
    grid-template-columns:1fr;
    gap:28px;
    padding-block:40px;
  }
  body[data-page="home"] .home-stats__msg{ max-width:none; }
  body[data-page="home"] .home-stats__rail{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:560px){
  body[data-page="home"] .home-stats__rail{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  body[data-page="home"] .home-stats__card{
    padding:18px 14px;
  }
  body[data-page="home"] .home-stats__card b{ font-size:28px; }
}

/* Stats band (legacy / Claude) */
/* Stats band — Figma's own section (node 886:226) is only 150px tall end to
   end: a single slim row, not a padded showcase block. Wrapped in .section-tight
   below instead of the default .section so it doesn't inherit the same 64px
   rhythm as every other block. */
/* Figma (get_design_context + get_metadata, node 886:226): flat white bg, no
   shadow. Padding is asymmetric — 36px only on the side the metrics rail sits
   against, 0 on the side the logo watermark sits flush to the edge (rail=
   physical left, logo=physical right in Figma's own coords, i.e. inline-end
   in this RTL doc = 36px, inline-start = 0). Three children space-between:
   pattern/logo, brand message, metrics rail (DOM order = Figma's real
   right→left reading, per the RTL rule that the first DOM child renders
   rightmost). Icons are the real 4 Figma icons (palm sprout / peaks / wave /
   3-circle cluster), hand-traced from get_screenshot since this sandbox's
   network policy blocks direct download from Figma's asset CDN — colored
   --dark (not gold), matching the real render exactly. */
.stats-band{ background:var(--white); border-radius:var(--r-card); padding-block:17px; padding-inline-start:0; padding-inline-end:36px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.stats-band .stats-rail{ display:flex; gap:0; flex-wrap:wrap; }
.stats-band .stats-item{ display:flex; align-items:center; gap:10px; padding-inline:9px; border-inline-end:1px solid rgba(0,59,43,.15); }
.stats-band .stats-item:last-child{ border-inline-end:none; }
.stats-band .stats-icon{ width:38px; height:38px; color:var(--dark); flex-shrink:0; }
.stats-band .stats-num{ font-size:31px; font-weight:500; line-height:40px; }
.stats-band .stats-label{ font-size:14px; color:rgba(0,59,43,.68); line-height:22px; margin-block-start:3px; }
.stats-band .stats-message{ font-size:26px; font-weight:500; text-align:end; line-height:38px; color:var(--dark); }
.stats-band .stats-pattern{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.stats-band .stats-pattern-mark{ width:43px; height:43px; }
.stats-band .stats-pattern-word{ display:flex; flex-direction:column; align-items:center; line-height:1; color:var(--dark); }
.stats-band .stats-pattern-word b{ font-size:23px; font-weight:500; }
.stats-band .stats-pattern-word small{ display:block; font-size:8px; letter-spacing:.23em; opacity:.7; font-weight:500; margin-block-start:4px; }

/* Footer CTA (mountain photo band) — Figma (get_design_context, node
   886:285): fixed 430px band, gradient stops/colors matched exactly (black-
   based, not the site's --wash green), content box 610px centered, exact
   text sizes, and a gold CTA button with a location-pin icon (28px) — none
   of which the old generic .btn/clamp() sizing reproduced. The right-side
   brand lockup (82px logo mark + "ط¹ط³ظٹط±"/"ASEER" wordmark + tagline) was
   previously missing entirely; it's Figma's real content (886:296), not a
   decorative addition. */
.footer-cta-band{ position:relative; border-radius:var(--r-card); overflow:hidden; width:100%; height:280px; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--white); }
.footer-cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.footer-cta-band::after{ content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.36) 54%, rgba(0,0,0,.72) 100%); z-index:1; }
.footer-cta-band-content{ position:relative; z-index:2; max-width:610px; padding:24px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.footer-cta-band-content h2{ font-size:clamp(28px,3vw,43px); font-weight:500; line-height:1.35; margin:0; }
.footer-cta-band-content p{ font-size:clamp(18px,2.1vw,30px); font-weight:500; opacity:.78; margin:0; }
.footer-cta-band-content .btn{ height:56px; padding-inline:26px; font-size:22px; font-weight:500; gap:12px; color:var(--white); }
.footer-cta-brand{ display:none; }
.footer-cta-brand-row{ display:flex; align-items:center; gap:18px; }
.footer-cta-brand-word{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; line-height:1; }
.footer-cta-brand-word b{ font-size:44px; font-weight:500; }
.footer-cta-brand-word small{ display:block; font-size:16px; letter-spacing:.2em; margin-block-start:6px; font-weight:500; }
.footer-cta-brand-mark{ width:82px; height:82px; flex-shrink:0; }
.footer-cta-brand-tagline{ font-size:25px; font-weight:500; opacity:.78; text-align:right; margin:0; }
@media (max-width:1100px){ .footer-cta-brand{ display:none; } }

/* ============================================================
   Peaks — real Figma design (page 18, node 1328:3, "ASEER / Peaks
   Desktop v2 - Redesign"), replacing the earlier generic page-hero/
   card-grid build that didn't match the actual design at all — this
   is a bespoke page, not a re-skin of the shared inner-page template.
   ============================================================ */
/* Hero — Figma (get_design_context, node 1328:4): fixed 780px full-bleed
   band, content pinned 610-1235px (not centered) with a 205px gap held
   from the right frame edge — same "hug one edge, not the middle"
   technique as Home's hero-real-content, reproduced with the same
   inline-start-padding + margin-inline-end:auto trick (inline-start =
   physical right in this RTL doc). Background photo's dark-overlay layer
   is 58% opacity with a gradient blend from transparent (left, where the
   photo reads clearly) to solid #04291f (right, behind the text) — a
   physical left→right direction, not a logical one, since the source
   photo itself isn't mirrored for RTL. */
.hero-peaks{
  position:relative; min-height:780px; display:flex; align-items:flex-start;
  padding-block:clamp(60px,14.9vw,180px) 72px;
  color:var(--white); overflow:hidden; background:var(--dark);
}
.hero-peaks-bg{ position:absolute; inset:0; z-index:0; }
.hero-peaks-bg .scenic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Photo already carries a dark wash; keep a light edge blend for copy legibility only. */
.hero-peaks-bg::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to left, rgba(4,41,31,0) 0%, rgba(4,41,31,.28) 50%, rgba(4,41,31,.62) 100%);
}
.hero-peaks-content{
  position:relative; z-index:2; max-width:830px; width:100%;
  padding-inline-start:clamp(24px,14.24vw,205px); padding-inline-end:0; margin-inline-end:auto;
  display:flex; flex-direction:column; gap:32px;
}
.hero-peaks-content .eyebrow{ font-size:18px; font-weight:600; color:var(--gold); }
.hero-peaks-content h1{ font-size:clamp(40px,5.4vw,78px); line-height:1.35; margin:0; }
.hero-peaks-headline{ font-size:clamp(26px,3.2vw,46px); font-weight:700; display:block; margin-block-start:24px; }
.hero-peaks-content p{ font-size:23px; opacity:.92; margin-block-start:24px; max-width:56ch; }
.hero-peaks .hero-actions{ margin-block-start:0; }
.hero-peaks .btn-hero-gold, .hero-peaks .btn-hero-white{ width:207px; height:56px; font-size:16px; }
@media (max-width:960px){
  .hero-peaks{ height:auto; min-height:640px; padding-block:100px 48px; }
  .hero-peaks-content{ max-width:none; padding-inline:24px; }
}

/* Shared "pill + accent line" header widget reused by Peak Destinations,
   Why Peaks, Peak Experiences and the Peaks Route header (nodes 1328:85,
   1328:141, 1328:169, 1328:197) — Figma's Route pill uses a real exported
   SVG mountain icon instead of the recurring â–³ text glyph, but the shape
   reads as the same mountain mark, so it's reproduced with the same glyph
   here for one consistent, dependency-free component (.pk-pill-shadow
   only adds the extra drop-shadow the Route variant carries). */
.pk-pill-wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.pk-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--white);
  border-radius:8px; padding:8px 16px; font-size:15px; font-weight:600;
  color:rgba(0,59,43,.68); box-shadow:0 8px 18px -4px rgba(0,0,0,.1); white-space:nowrap;
}
.pk-pill-shadow{ box-shadow:0 8px 18px 0px rgba(0,0,0,.08); }
.pk-pill-mark{ color:var(--gold); font-size:17px; font-weight:700; line-height:1; }
.pk-accent{ width:70px; height:2px; background:var(--gold); border-radius:1px; }

/* Peak Destinations — Figma node 1328:82: 7 cards, 166أ—320, full-bleed
   scenic image + bottom scrim, gold "â–³" corner mark + accent underline.
   DOM order documented at the call site (RTL-DOM-order rule). */
.pk-dest-rail{ gap:14px; }
/* Coast/desert: same card weight as peaks (~227), start-aligned with section head (RTL right) */
.pk-dest-rail--fit{
  --pk-dest-w:227px;
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:stretch;
  gap:14px;
  grid-template-columns:none !important;
}
.pk-dest-rail--fit .pk-dest-card{
  width:var(--pk-dest-w);
  max-width:100%;
  flex:0 0 var(--pk-dest-w);
}
.pk-dest-card{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:166/320; border-radius:16px; overflow:hidden; text-align:center;
  color:var(--white); box-shadow:0 8px 20px -2px rgba(0,59,43,.2);
  transition:transform .3s ease, box-shadow .3s ease;
}
.pk-dest-card:hover{ transform:translateY(-4px); box-shadow:0 18px 32px -6px rgba(3,42,30,.32); }
.pk-dest-card .scenic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.pk-dest-card:hover .scenic{ transform:none; }
.pk-dest-card::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,59,43,.88) 0%, rgba(0,59,43,0) 48%); }
.pk-dest-mark{ position:absolute; inset-block-start:12px; inset-inline-start:12px; z-index:2; color:var(--gold); font-weight:700; font-size:16px; }
.pk-dest-info{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 10px 20px; }
.pk-dest-accent{ width:28px; height:3px; border-radius:2px; background:var(--gold); }
.pk-dest-info h3{ font-size:clamp(16px,1.6vw,20px); font-weight:700; margin:0; }
.pk-dest-info p{ font-size:13px; color:rgba(255,255,255,.82); margin:0; }
@media (max-width:960px){ .pk-dest-rail{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:600px){
  .pk-dest-rail{ grid-template-columns:repeat(2,1fr) !important; }
  .pk-dest-rail--fit{
    --pk-dest-w:min(166px, calc((100% - 14px) / 2));
  }
}

/* Why the Peaks — same card shell as dest-why-card (Abha), 4-up rail */
.pk-why-rail{ gap:28px; }
.pk-why-card{
  background:var(--white);
  border:1.5px solid rgba(0,59,43,.12);
  border-radius:16px;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.12);
  padding:24px 28px 28px;
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  text-align:start;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pk-why-card:hover{
  transform:translateY(-3px);
  border-color:rgba(200,154,56,.45);
  box-shadow:0 14px 28px -6px rgba(3,42,30,.16);
}
.pk-why-card__ico{
  width:56px;
  height:56px;
  border-radius:8px;
  border:1.5px solid var(--dark);
  background:var(--sage);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.pk-why-card__ico img{
  display:block;
  width:28px;
  height:28px;
}
.pk-why-card h3{
  margin:0;
  font-size:24px;
  font-weight:700;
  color:var(--dark);
  line-height:1.35;
}
.pk-why-card p{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:rgba(0,59,43,.72);
  text-wrap:pretty;
  flex:1;
}
.pk-why-card__accent{
  display:block;
  width:28px;
  height:3px;
  border-radius:2px;
  background:var(--gold);
  margin-block-start:4px;
}

/* Peak Experiences — Figma node 1328:165 (entirely new section): 4 full-
   bleed photo cards, 268أ—300, double scrim (vertical dark gradient +
   flat wash) per Figma, white centered text, gold arrow glyph. */
.pk-exp-rail{ gap:24px; }
.pk-exp-card{
  position:relative; aspect-ratio:268/300; border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center; color:var(--white); padding:0 16px 28px;
  box-shadow:0 8px 20px 0px rgba(0,0,0,.07); transition:transform .3s ease, box-shadow .3s ease;
}
.pk-exp-card:hover{ transform:translateY(-4px); box-shadow:0 18px 30px -8px rgba(3,42,30,.3); }
.pk-exp-card .scenic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.pk-exp-card:hover .scenic{ transform:none; }
.pk-exp-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(3,42,30,.92) 0%, rgba(3,42,30,0) 45%), rgba(9,42,35,.18);
}
.pk-exp-card h3{ position:relative; z-index:2; font-size:clamp(20px,2vw,28px); font-weight:700; margin:0; }
.pk-exp-card p{ position:relative; z-index:2; font-size:15px; color:rgba(255,255,255,.78); margin:8px 0 14px; }
.pk-exp-arrow{ position:relative; z-index:2; color:var(--gold); font-size:22px; transition:transform .2s ease; }
.pk-exp-card:hover .pk-exp-arrow{ transform:translateX(-4px); }
[dir="rtl"] .pk-exp-card:hover .pk-exp-arrow{ transform:translateX(4px); }

/* Peaks Route — honest numbered visit path (not a geo map).
   Badge/connector sizes match dest-day-card (42px / gold 2px line). */
.pk-route{ background:var(--sage); padding-block:88px; }
.pk-route-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:40px; }
.pk-route-header{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; max-width:610px; text-align:start; }
.pk-route-header h2{ font-size:clamp(28px,3vw,40px); line-height:1.35; color:var(--dark); margin:0; }
.pk-route-header p{ font-size:18px; line-height:1.35; color:rgba(0,59,43,.68); margin:0; }
.pk-route-board{
  width:100%;
  background:var(--white);
  border:1.5px solid rgba(0,59,43,.12);
  border-radius:16px;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.12);
  padding:28px 32px 32px;
}
.pk-route-board__hint{
  margin:0 0 28px;
  font-size:14px;
  font-weight:600;
  color:var(--gold);
  text-align:start;
}
.pk-route-path{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:16px 12px;
  position:relative;
  width:100%;
}
.pk-route-path--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.pk-route-path--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.pk-route-path--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.pk-route-path--5{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
@media (min-width:901px){
  .pk-route-path::before{
    content:"";
    position:absolute;
    top:21px;
    inset-inline:calc(100% / 14);
    height:2px;
    background:rgba(200,154,56,.45);
    z-index:0;
    pointer-events:none;
  }
  .pk-route-path--2::before{
    inset-inline:calc(100% / 4);
  }
  .pk-route-path--3::before{
    inset-inline:calc(100% / 6);
  }
  .pk-route-path--4::before{
    inset-inline:calc(100% / 8);
  }
  .pk-route-path--5::before{
    inset-inline:calc(100% / 10);
  }
}
.pk-route-path > li{ margin:0; min-width:0; }
.pk-route-stop{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  text-decoration:none;
  color:inherit;
  min-height:100%;
  padding:4px 2px 8px;
  border-radius:12px;
  transition:transform .2s ease;
}
.pk-route-stop:hover{ transform:translateY(-3px); }
.pk-route-stop__num{
  width:42px;
  height:42px;
  border-radius:21px;
  background:var(--dark);
  color:var(--gold);
  font-size:22px;
  font-weight:700;
  line-height:42px;
  text-align:center;
  flex-shrink:0;
}
.pk-route-stop:hover .pk-route-stop__num{
  background:var(--gold);
  color:var(--dark);
}
.pk-route-stop__name{
  font-size:18px;
  font-weight:700;
  color:var(--dark);
  line-height:1.35;
}
.pk-route-stop__note{
  font-size:13px;
  line-height:1.45;
  color:rgba(0,59,43,.68);
  text-wrap:pretty;
}
@media (max-width:1100px){
  .pk-route-path{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pk-route-path::before{ display:none; }
}
@media (max-width:700px){
  .pk-route-board{ padding:24px 20px 28px; }
  .pk-route-path{
    grid-template-columns:1fr;
    gap:0;
  }
  .pk-route-stop{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    text-align:start;
    gap:12px 14px;
    padding:16px 4px;
    border-block-end:1px solid rgba(0,59,43,.08);
  }
  .pk-route-path > li:last-child .pk-route-stop{ border-block-end:none; }
  .pk-route-stop__name{ flex:1; min-width:0; }
  .pk-route-stop__note{ flex:1 1 100%; padding-inline-start:56px; }
}

/* Peaks CTA — Figma node 1328:205 (entirely new section): full-bleed
   360px band, now the real exported Figma photo (a pale, fog-washed
   boardwalk overlook) under a light sage wash matching that same look,
   so the dark-green text stays legible as Figma intends. */
.pk-cta{ position:relative; min-height:360px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--sage); }
.pk-cta-bg{ position:absolute; inset:0; z-index:0; }
.pk-cta-bg .scenic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pk-cta-bg::after{ content:''; position:absolute; inset:0; background:rgba(239,244,236,.55); }
.pk-cta-content{ position:relative; z-index:1; max-width:620px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; padding-block:64px; }
.pk-cta-content h2{ font-size:clamp(28px,3.4vw,42px); line-height:1.35; color:var(--dark); margin:0; }
.pk-cta-content p{ font-size:19px; line-height:1.35; color:rgba(0,59,43,.75); margin:0; }
.pk-cta-btn{ background:transparent; border:2px solid var(--dark); color:var(--dark); }
.pk-cta-btn:hover{ background:var(--dark); color:var(--white); }

/* Peaks listing page section shells (pragmatic; not pixel-matched) */
.pk-dest, .pk-exp{ background:var(--white); padding-block:72px 80px; }
.pk-why{ background:var(--sage); padding-block:72px 80px; }
.pk-block-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  margin-block-end:40px; text-align:start;
}
.pk-block-head h2{ font-size:clamp(28px,3vw,42px); line-height:1.35; color:var(--dark); margin:0; }
.pk-block-head > p{ font-size:18px; line-height:1.45; color:rgba(0,59,43,.68); margin:0; max-width:60ch; }

/* ============================================================
   Experiences page — Figma node 609:2 "ASEER / Experiences
   Desktop v2 - Redesign" (fileKey 5f7r5V7IvpGQjaC2X6Iumf).
   Real photos supplied by the user were exported as fully
   composited card mockups (photo + Figma's own gradient scrim +
   Arabic name/count text already baked into the pixels) rather
   than clean photo layers — confirmed by their pixel dimensions
   matching each component frame exactly and by direct inspection.
   Since this site must stay bilingual, those baked Arabic labels
   can't be the real (localized) text: every card below draws its
   own bilingual HTML text on top and adds extra scrim opacity
   (beyond Figma's own recipe) specifically over the images that
   have baked text, so the old Arabic pixels underneath read as a
   faint, illegible smudge instead of double text in English mode.
   ============================================================ */

/* Hero — Figma node 609:28. Real photo (mountain overlook lounge),
   right-aligned breadcrumb + 72px headline + 2-line subhead, no
   hero CTAs (unlike Peaks). Figma's own triple-stacked 90deg tint
   layers (.3 + .3 + .24 alpha, same color) composite to ~63% —
   reproduced here as one flat wash at that combined value. */
.hero-exp{ position:relative; min-height:592px; display:flex; align-items:center; color:var(--white); overflow:hidden; background:var(--dark); }
.hero-exp-bg{ position:absolute; inset:0; z-index:0; }
.hero-exp-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-exp-bg::after{ content:''; position:absolute; inset:0; background:rgba(0,59,43,.63); }
/* Figma: content padding-inline-start 820px / pr-110px at a 1440px
   canvas — 820/1440=56.9vw — pushing the text hard toward the
   trailing (right, in this rtl page) edge with a fixed 110px gap. */
.hero-exp-content{ position:relative; z-index:1; width:100%; padding-inline-start:clamp(24px,56.9vw,820px); padding-inline-end:clamp(24px,7.6vw,110px); display:flex; flex-direction:column; align-items:flex-end; gap:24px; text-align:right; }
.hero-exp-content .breadcrumb{ font-size:14px; opacity:.92; margin:0; }
.hero-exp-content h1{ font-size:clamp(34px,5vw,72px); line-height:1.35; margin:0; }
.hero-exp-content .hero-exp-sub{ font-size:clamp(18px,1.8vw,26px); font-weight:500; line-height:1.35; margin:0; opacity:.96; }

/* Discovery Search + Filters — Figma node 609:34. A white rounded
   card that floats up over the hero's bottom edge, same overlap
   technique as .hero-stats/.feature-float elsewhere on the site. */
.exp-discovery{
  position:relative; z-index:2; margin-block-start:-40px;
  background:var(--white); border:1px solid var(--sage); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:20px 44px; display:flex; flex-direction:column; align-items:center; gap:24px;
}
.exp-discovery-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; }
.exp-discovery-search{
  background:var(--sage); border:1px solid var(--sage); border-radius:var(--r-btn);
  display:flex; align-items:center; gap:8px; padding:12px 16px; flex:0 0 400px; width:400px; min-width:0;
  color:rgba(0,59,43,.68); font-size:14px;
}
.exp-discovery-search input{ background:transparent; border:none; flex:1; color:inherit; font-size:14px; text-align:right; }
.exp-discovery-search input::placeholder{ color:rgba(0,59,43,.68); }
.exp-discovery-search input:focus{ outline:none; }
.exp-discovery-filter-btn{
  background:var(--white); border:1px solid var(--sage); border-radius:var(--r-btn);
  padding:16px 32px; font-size:14px; font-weight:500; color:var(--dark); white-space:nowrap;
}
.exp-discovery-filter-btn:hover{ background:var(--sage); }
/* Listing filter CTA — Figma events 682:66 is gold + white. Experiences keeps the same gold action. */
body[data-page="events"][data-header="transparent"] .exp-discovery-filter-btn,
body[data-page="experiences"][data-header="transparent"] .exp-discovery-filter-btn,
body[data-page="restaurants"][data-header="transparent"] .exp-discovery-filter-btn,
body[data-page="stays"][data-header="transparent"] .exp-discovery-filter-btn{
  background:var(--gold); border-color:var(--gold); color:var(--white);
}
body[data-page="events"][data-header="transparent"] .exp-discovery-filter-btn:hover,
body[data-page="experiences"][data-header="transparent"] .exp-discovery-filter-btn:hover,
body[data-page="restaurants"][data-header="transparent"] .exp-discovery-filter-btn:hover,
body[data-page="stays"][data-header="transparent"] .exp-discovery-filter-btn:hover{
  background:var(--gold); opacity:.92;
}
.exp-discovery-chips{ display:flex; align-items:center; justify-content:flex-start; gap:12px; flex-wrap:wrap; width:100%; }
.exp-discovery-chips .chip{ padding:8px 22px; font-size:13px; }

/* Featured Experience — Figma node 609:60. Two-part row: large photo
   + a white details card. Figma places the photo physically LEFT and
   the card physically RIGHT — per this site's RTL-DOM-order rule
   (first DOM child renders rightmost) the details card comes first
   in markup, the photo second. */
.exp-featured{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.exp-featured-card{
  background:var(--white); border-radius:var(--r-card); flex:1 1 380px; min-width:0; max-width:426px;
  display:flex; flex-direction:column; align-items:stretch; gap:28px; padding:18px 14px; text-align:right;
}
.exp-featured-badge{ display:flex; align-items:center; justify-content:flex-start; gap:8px; color:var(--gold); font-weight:500; font-size:16px; width:100%; }
.exp-featured-badge .mark{ width:28px; height:28px; display:block; flex-shrink:0; }
.exp-featured-card h3{ font-size:clamp(26px,2.6vw,38px); line-height:1.35; color:var(--dark); margin:0; }
.exp-featured-meta{ display:flex; flex-direction:column; gap:8px; font-size:15px; }
.exp-featured-meta .loc{ color:rgba(0,59,43,.68); }
.exp-featured-meta .rating{ color:var(--gold); font-size:14px; }
.exp-featured-features{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; flex-wrap:nowrap; }
.exp-featured-feature{ display:flex; flex-direction:column; align-items:center; gap:8px; width:92px; }
.exp-featured-feature .ico{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--gold); }
.exp-featured-feature .ico img{ width:28px; height:28px; display:block; }
.exp-featured-feature span{ font-size:13px; text-align:center; color:rgba(0,59,43,.68); }
.exp-featured-desc{ font-size:16px; line-height:1.5; color:rgba(0,59,43,.68); margin:0; }
.exp-featured-actions{ display:flex; align-items:center; gap:18px; width:100%; }
.exp-featured-save{
  background:var(--white); border:1.5px solid var(--dark); border-radius:var(--r-btn);
  width:48px; height:44px; display:flex; align-items:center; justify-content:center;
  color:var(--dark); flex-shrink:0;
}
.exp-featured-save img{ width:20px; height:18px; display:block; max-width:none; }
.exp-featured-save:hover{ background:var(--sage); }
.exp-featured-save.is-loved{ background:var(--sage); border-color:var(--gold); }
.exp-featured-book{ flex:1; background:var(--dark); border:1px solid var(--dark); color:var(--white); text-align:center; padding:13px; border-radius:var(--r-btn); font-size:14px; font-weight:500; }
.exp-featured-book:hover{ opacity:.92; }
body[data-page="experiences"][data-header="transparent"] .exp-featured-book{
  background:var(--gold); border-color:var(--gold); color:var(--white);
}
.exp-featured-photo{ position:relative; border:1px solid var(--sage); border-radius:var(--r-card); overflow:hidden; flex:1 1 500px; min-width:0; max-width:760px; aspect-ratio:760/456; transition:transform .3s ease, box-shadow .3s ease; }
.exp-featured-photo:hover{ transform:translateY(-4px); box-shadow:0 16px 26px -6px rgba(3,42,30,.28); }
.exp-featured-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.exp-featured-photo:hover img{ transform:none; }
.exp-featured-photo::after{ content:''; position:absolute; inset:0; background:rgba(9,42,35,.18); }

/* Mood Categories — Figma node 609:93. Sage band, 6 equal photo
   cards, no baked text (plain photos) so Figma's own scrim recipe
   is used as-is. DOM order follows the RTL-DOM-order rule against
   Figma's physical x-order (طھطµظˆظٹط± was rightmost on canvas → first
   in markup … ظ…ط؛ط§ظ…ط±ط© was leftmost → last). */
.exp-mood{ background:var(--sage); padding-block:44px; }
.exp-mood-head{ text-align:start; margin-bottom:48px; }
.exp-mood-head h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.2; color:var(--dark); margin:0; }
.exp-mood-row{
  gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.exp-mood-card{
  position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:192/154;
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px 26px 30px 18px;
  color:var(--white); text-align:right; transition:transform .3s ease, box-shadow .3s ease;
}
.exp-mood-card:hover{ transform:translateY(-4px); box-shadow:0 16px 26px -6px rgba(3,42,30,.28); }
.exp-mood-card > img:not(.ico){ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.exp-mood-card:hover > img:not(.ico){ transform:none; }
.exp-mood-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 50%, rgba(3,42,30,.9) 100%), linear-gradient(90deg, rgba(9,42,35,.42), rgba(9,42,35,.42));
}
.exp-mood-card .ico{ position:relative; z-index:2; width:24px; height:24px; margin-bottom:24px; display:block; object-fit:contain; }
.exp-mood-card h3{ position:relative; z-index:2; font-size:24px; font-weight:700; margin:0; }
.exp-mood-card p{ position:relative; z-index:2; font-size:13px; margin:4px 0 0; opacity:.92; }

/* Selected Experiences — Figma node 609:139. Header (title right,
   "view all" link left — title first in DOM per the RTL-DOM-order
   rule) + 6 photo cards; images have no baked text so Figma's scrim
   is used as designed. DOM order: rightmost card (ط¬ظˆظ„ط© ط´ط±ظˆظ‚ ط§ظ„ط´ظ…ط³,
   x=1079) first … leftmost (ظ…ط³ط§ط± ط±ط¬ط§ظ„ ط£ظ„ظ…ط¹ ط§ظ„ط¬ط¨ظ„ظٹ, x=24) last. */
.exp-selected{ padding-block:24px; }
.exp-section-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.exp-section-head h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.2; color:var(--dark); margin:0; }
.exp-section-head .view-all{ font-size:14px; font-weight:500; color:var(--dark); white-space:nowrap; }
body[data-page="experiences"][data-header="transparent"] .exp-section-head .view-all{
  color:var(--gold); font-weight:700;
}
.exp-selected-row{
  gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.exp-card{
  position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:202/260;
  box-shadow:var(--shadow-card); background:var(--sage); transition:transform .3s ease, box-shadow .3s ease;
}
.exp-card:hover{ transform:translateY(-4px); box-shadow:0 18px 30px -8px rgba(3,42,30,.3); }
.exp-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.exp-card:hover img{ transform:none; }
.exp-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 50%, rgba(3,42,30,.9) 100%), linear-gradient(90deg, rgba(9,42,35,.18), rgba(9,42,35,.18));
}
.exp-card-tag{ position:absolute; z-index:2; inset-block-start:14px; inset-inline-start:14px; background:var(--dark); color:var(--white); border-radius:var(--r-btn); padding:6px 14px; font-size:12px; font-weight:500; }
body[data-page="events"][data-header="transparent"] .exp-card-tag,
body[data-page="experiences"][data-header="transparent"] .exp-card-tag,
body[data-page="restaurants"][data-header="transparent"] .exp-card-tag{ background:var(--gold); }
.exp-card-body{ position:absolute; z-index:2; inset-inline:16px; inset-block-end:46px; text-align:right; display:flex; flex-direction:column; gap:6px; }
.exp-card-body h3{ font-size:15px; font-weight:700; color:var(--white); margin:0; line-height:1.4; }
.exp-card-body span{ font-size:12px; color:rgba(255,255,255,.78); line-height:1.4; }
.exp-card-meta{ position:absolute; z-index:2; inset-inline:16px; inset-block-end:14px; display:flex; align-items:center; justify-content:flex-start; gap:8px; font-size:11px; color:rgba(255,255,255,.85); }
.exp-card-meta .heart{ width:14px; height:12px; display:block; flex-shrink:0; max-width:none; margin-inline-start:auto; }
button.heart{ background:transparent; border:0; padding:0; cursor:pointer; color:inherit; }
.exp-card-meta button.heart{ width:auto; height:auto; }
.exp-card-meta button.heart img{ position:static; width:14px; height:12px; object-fit:contain; }
.exp-save.is-loved img{ filter:drop-shadow(0 0 4px var(--gold)); }
[data-filter-item][hidden],
[data-filter-section][hidden],
[data-filter-empty][hidden]{ display:none !important; }
.exp-filter-empty{ text-align:start; color:var(--dark); font-size:16px; padding-block:24px; }

/* Start From Region or Peak — experiences: feature (start/right) + 6 grid */
.exp-region{ background:var(--sage); padding-block:34px; }
.exp-region-row{ gap:20px; }
.exp-region-card{
  position:relative; border-radius:var(--r-card); overflow:hidden;
  aspect-ratio:166/112; height:auto; background:var(--wash);
  display:flex; align-items:flex-end; padding:14px 16px; transition:transform .3s ease, box-shadow .3s ease;
}
.exp-region-card:hover{ transform:translateY(-4px); box-shadow:0 14px 24px -6px rgba(3,42,30,.3); }
.exp-region-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.85; }
.exp-region-card::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 55%, rgba(3,42,30,.85) 100%); }
.exp-region-card-content{ position:relative; z-index:2; display:flex; flex-direction:column; gap:6px; text-align:start; width:100%; color:var(--white); }
.exp-region-card-content b{ font-size:22px; font-weight:700; }
.exp-region-card-content span{ font-size:12px; }

/* Feature (start/right) + 6 small — experiences / events / restaurants / stays */
.exp-region-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);
  gap:20px;
  align-items:stretch;
  margin-block-start:28px;
}
.exp-region .exp-region-layout{ margin-block-start:0; }
.exp-region-card--feature{
  aspect-ratio:auto;
  min-height:100%;
  height:auto;
  align-self:stretch;
  padding:22px 24px;
}
.exp-region-card--feature .exp-region-card-content{ gap:8px; }
.exp-region-card--feature .exp-region-card-content b{ font-size:30px; line-height:1.2; }
.exp-region-card--feature .exp-region-card-content span{ font-size:15px; }
.exp-region-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:20px;
  min-width:0;
}

/* Ready Routes — Figma node 609:255. Header (title right, link left)
   + 3 cards, each a details+photo row. Figma: details LEFT, photo
   RIGHT → per the RTL-DOM-order rule, photo comes first in markup,
   details second. Photos have no baked text (plain), Figma's light
   wash used as designed. Row DOM order: rightmost card (ظٹظˆظ… ظپظˆظ‚
   ط§ظ„ط؛ظٹظ…, x=870) first … leftmost (ط¹ط·ظ„ط© ط¹ط§ط¦ظ„ظٹط©, x=0) last. */
.exp-routes{ padding-block:24px 48px; }
.exp-routes-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
.exp-route-card{
  background:var(--white); border-radius:var(--r-card); display:flex; align-items:center; gap:12px;
  width:100%; min-width:0; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.exp-route-card:hover{ transform:translateY(-4px); box-shadow:0 16px 26px -6px rgba(3,42,30,.28); }
.exp-route-photo{ position:relative; border-radius:var(--r-card); overflow:hidden; width:166px; height:166px; flex:0 0 166px; }
.exp-route-photo img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; opacity:.88;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.exp-route-card:hover .exp-route-photo img{ transform:none; }
.exp-route-photo::after{ content:''; position:absolute; inset:0; background:rgba(9,42,35,.18); }
.exp-route-details{ display:flex; flex-direction:column; justify-content:center; gap:12px; padding-inline:4px 8px; text-align:right; flex:1; min-width:0; }
.exp-route-details h3{ font-size:clamp(18px,1.7vw,23px); line-height:1.45; color:var(--dark); margin:0; }
.exp-route-details p{ font-size:13px; line-height:1.7; color:rgba(0,59,43,.68); margin:0; }
.exp-route-details .meta{ font-size:12px; font-weight:500; color:rgba(0,59,43,.68); margin-block-start:4px; }
/* Events calendar badge — Figma 682:278 is 88×30 gold + white. */
body[data-page="events"][data-header="transparent"] .exp-route-details .meta{
  display:inline-flex; align-items:center; justify-content:center;
  width:88px; height:30px; margin-block-start:0; padding:0;
  background:var(--gold); color:var(--white); border-radius:var(--r-btn);
}

/* Seasonal Experiences — Figma node 609:284. Sage band, right-
   aligned single-line title, 4 cards whose photos carry baked
   season text — boosted scrim to bury it, real bilingual text +
   button drawn fresh. DOM order: rightmost (ط§ظ„ط±ط¨ظٹط¹, x=977) first …
   leftmost (ط§ظ„ط´طھط§ط،, x=11) last. */
.exp-season{ background:var(--sage); padding:40px 0; }
.exp-season .container{ display:flex; flex-direction:column; align-items:stretch; gap:32px; }
.exp-season-head{ width:100%; text-align:start; }
.exp-season-head h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.2; color:var(--dark); margin:0; }
.exp-season-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; width:100%; }
.exp-season-card{
  position:relative; border-radius:var(--r-card); overflow:hidden; width:100%; min-width:0; min-height:220px;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:16px; padding:16px 20px 20px; background:var(--wash);
  transition:transform .3s ease, box-shadow .3s ease;
}
.exp-season-card:hover{ transform:translateY(-4px); box-shadow:0 16px 26px -6px rgba(3,42,30,.28); }
/* Same baked-text problem as the region cards, but worse here — the
   baked title sits near the very top of the frame, leaving almost no
   clean margin — so this needs a stronger blur and an almost-opaque
   scrim over nearly the whole card. */
.exp-season-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.82;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.exp-season-card:hover img{ transform:none; }
/* Figma 609:284: transparent to 55%, then rgba(3,42,30,.85). Photos are
   plain (no baked season titles), so the designed scrim is used as-is. */
.exp-season-card::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 55%, rgba(3,42,30,.85) 100%); }
.exp-season-body{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; text-align:start; color:var(--white); }
.exp-season-body h3{ font-size:clamp(22px,2vw,28px); font-weight:700; margin:0; line-height:1.35; }
.exp-season-body .sub{ font-size:16px; font-weight:500; margin:0; line-height:1.45; }
.exp-season-body hr{ width:100%; border:none; border-block-start:1px solid rgba(255,255,255,.3); margin:4px 0; }
.exp-season-body p{ font-size:13px; line-height:1.65; margin:0; color:rgba(239,244,236,.85); }
.exp-season-btn{ position:relative; z-index:2; background:var(--white); border:1px solid var(--sage); border-radius:var(--r-btn); padding:12px 6px; font-size:14px; font-weight:500; color:var(--dark); width:auto; min-width:150px; max-width:100%; text-align:center; white-space:nowrap; }
.exp-season-btn:hover{ background:var(--sage); }
body[data-page="experiences"][data-header="transparent"] .exp-season-btn{
  background:var(--gold); border-color:var(--gold); color:var(--white);
}
body[data-page="experiences"][data-header="transparent"] .exp-season-btn:hover{
  background:var(--gold); opacity:.92;
}

/* Plan Your Trip CTA — Figma node 609:320. In Figma this is a single
   asymmetric composition (text panel physically left, photo bleed
   physically right) rather than repeating siblings, so the RTL-DOM-
   order rule doesn't apply the way it does to card rows; centering
   the content instead (matching the already-shipped Peaks CTA
   pattern) sidesteps the ambiguity entirely. The supplied photo has
   Figma's own headline/body baked in, so the wash here is pushed
   well past Peaks' .55 to fully bury it under fresh bilingual copy. */
.exp-cta{ position:relative; min-height:340px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:var(--r-card); }
.exp-cta-bg{ position:absolute; inset:0; z-index:0; }
/* Same baked-text problem (Figma's own headline/body baked into the
   pixels) — blurred to destroy the old letterforms, under a heavier
   flat wash than the shipped Peaks CTA (.55) since there's real text
   to bury here, not just a plain photo to dim. */
.exp-cta-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Baked headline/body span most of the frame — a near-opaque flat wash
   (no blur) fully covers them while still reading as a photo backdrop at
   the edges, the same technique the site-footer's photo band already
   uses (rgba(0,59,43,.83) flat, no blur). */
.exp-cta-bg::after{ content:''; position:absolute; inset:0; background:rgba(0,59,43,.82); }
.exp-cta-content{ position:relative; z-index:1; max-width:640px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; padding-block:56px; color:var(--white); }
.exp-cta-content h2{ font-size:clamp(26px,3.2vw,36px); line-height:1.35; margin:0; }
.exp-cta-content p{ font-size:17px; line-height:1.5; margin:0; opacity:.92; }
.exp-cta-btn{ background:var(--white); border:1px solid var(--sage); color:var(--dark); padding:0 26px; height:56px; border-radius:var(--r-btn); font-size:14px; font-weight:500; display:flex; align-items:center; justify-content:center; }
.exp-cta-btn:hover{ background:var(--sage); }
/* Listing photo CTA — Figma events 682:321 is gold + white. */
body[data-page="events"][data-header="transparent"] .exp-cta-btn,
body[data-page="experiences"][data-header="transparent"] .exp-cta-btn,
body[data-page="restaurants"][data-header="transparent"] .exp-cta-btn,
body[data-page="stays"][data-header="transparent"] .exp-cta-btn,
body[data-page="contact"][data-header="transparent"] .exp-cta-btn,
body[data-page="peaks"][data-header="transparent"] .exp-cta-btn,
body[data-page="destination"][data-header="transparent"] .exp-cta-btn:not(.dest-banner__ghost){
  background:var(--gold); border-color:var(--gold); color:var(--white);
}
body[data-page="events"][data-header="transparent"] .exp-cta-btn:hover,
body[data-page="experiences"][data-header="transparent"] .exp-cta-btn:hover,
body[data-page="restaurants"][data-header="transparent"] .exp-cta-btn:hover,
body[data-page="stays"][data-header="transparent"] .exp-cta-btn:hover,
body[data-page="contact"][data-header="transparent"] .exp-cta-btn:hover,
body[data-page="peaks"][data-header="transparent"] .exp-cta-btn:hover,
body[data-page="destination"][data-header="transparent"] .exp-cta-btn:not(.dest-banner__ghost):hover{
  background:var(--gold); opacity:.92;
}

@media (max-width:960px){
  .hero-exp-content{ padding-inline-start:clamp(24px,10vw,80px); align-items:center; text-align:center; }
  .exp-discovery-bar{ flex-direction:column; }
  .exp-discovery-search{ max-width:none; width:100%; flex:1 1 auto; }
  .exp-featured{ flex-direction:column; }
  .exp-featured-photo, .exp-featured-card{ max-width:100%; width:100%; }
  .exp-mood-row, .exp-selected-row, .exp-region-row{ grid-template-columns:repeat(2,1fr); }
  .exp-region-card{ height:auto; aspect-ratio:166/112; }
  .exp-region-layout{ grid-template-columns:1fr; }
  .exp-region-card--feature{ aspect-ratio:192/154; min-height:0; }
  .exp-region-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
  }
  .exp-routes-row{ grid-template-columns:1fr; }
  .exp-route-card{ max-width:none; }
  .exp-season-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .exp-season-card{ width:100%; max-width:none; }
}
@media (max-width:600px){
  .exp-mood-row, .exp-selected-row, .exp-region-row{ grid-template-columns:1fr; }
  .exp-region-grid{ grid-template-columns:1fr; }
  .exp-featured-features{ flex-wrap:wrap; }
}
@media (max-width:700px){ .pk-route-header{ max-width:none; } .pk-cta-content{ padding-inline:24px; } }

/* ============================================================
   Compatibility — keep each page's own content/images.
   Only Claude sizes, colors, and spacing apply.
   ============================================================ */
html[data-lang="en"] body{ font-family:'Inter', system-ui, sans-serif; }
body{ text-align:start; }

.btn-gold, .btn-primary{ background:var(--gold); color:var(--dark); }
.btn-green, .btn-dark{ background:var(--dark); color:var(--white); }
.btn-white{ background:var(--white); color:var(--dark); }
.chip.is-active, .chip.active{ background:var(--dark); color:var(--white); }
/* Section titles — approved smaller size (contact / Figma 30px) + gold rule */
.section-title,
.contact-heading,
.section-head h2,
.regions-head h2,
.events-header h2,
.exp-mood-head h2,
.exp-section-head h2,
.exp-season-head h2,
.pk-block-head h2,
.pk-route-header h2,
body[data-page="events"][data-header="transparent"] .ev-map-head h2{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.2;
  color:var(--dark);
}
.section-title::after,
.contact-heading::after,
.section-head h2::after,
.regions-head h2::after,
.events-header h2::after,
.exp-mood-head h2::after,
.exp-section-head h2::after,
.exp-season-head h2::after,
.pk-block-head h2::after,
.pk-route-header h2::after,
body[data-page="events"][data-header="transparent"] .ev-map-head h2::after{
  content:"";
  display:block;
  width:70px;
  height:2px;
  margin-block-start:8px;
  background:var(--gold);
  border-radius:1px;
}
.section-title{ margin:0; }
.section-sub{ font-size:16px; color:rgba(0,59,43,.68); margin-block-start:8px; }
.section-link, .view-all{ font-size:14px; font-weight:500; color:var(--dark); }
.muted{ color:rgba(0,59,43,.68); }

/* Injected chrome aliases */
.site-header{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:var(--dark); border-block-end:1px solid var(--gold);
}
.site-header.is-hero{
  margin-block-end:calc(-1 * var(--nav-h));
  background:var(--dark);
  border-block-end:1px solid rgba(200,154,56,.4);
  transition:background-color .2s ease, border-color .2s ease, backdrop-filter .2s ease;
}
.site-header.is-hero.is-scrolled{
  background:rgba(0,59,43,.62);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.nav-shell, .nav{ height:100%; }
.nav{
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{ display:flex; align-items:center; gap:12px; color:var(--white); flex-shrink:0; }
.logo-mark, .nav-logo-mark{ width:36px; height:36px; border-radius:6px; display:block; object-fit:contain; }
.footer-logo .nav-logo-mark{ width:58px; height:58px; }
.footer-logo .nav-logo-word b{ font-size:30px; }
.footer-logo .nav-logo-word small{ font-size:11px; }
.logo-text{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.logo-ar{ font-size:21px; font-weight:600; }
.logo-en{ display:block; font-size:9px; letter-spacing:.22em; opacity:.7; font-weight:600; margin-block-start:4px; }
.nav-links{ display:flex; align-items:center; gap:28px; flex:1; justify-content:center; list-style:none; margin:0; padding:0; }
.nav-links a, .nav-links button{
  color:rgba(239,244,236,.8); font-size:var(--fs-small); font-weight:600;
  padding-block:8px; border:0; background:none; font:inherit; cursor:pointer;
  border-block-end:2px solid transparent; white-space:nowrap;
}
.nav-links a:hover, .nav-links button:hover{ color:var(--white); }
.nav-links a.is-active, .nav-links a.active{ color:var(--white); border-block-end-color:var(--gold); }
.nav-tools, .nav-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.search-btn, .account-btn, .nav-icon-btn{
  width:40px; height:40px; border-radius:var(--r-btn); background:var(--sage);
  display:flex; align-items:center; justify-content:center; color:var(--dark); border:none;
}
.search-btn:hover, .account-btn:hover{ background:var(--gold); color:var(--white); }
.menu-toggle{ display:none; background:none; border:none; color:var(--white); width:40px; height:40px; }
.menu-toggle span{ display:block; width:18px; height:2px; background:currentColor; margin:4px auto; }
.mobile-panel{ display:none; }
.search-overlay{ display:none; position:fixed; inset:0; z-index:120; background:rgba(3,42,30,.55); place-items:center; }
.search-overlay.is-open{ display:grid; }
.search-overlay form{ width:min(560px, calc(100% - 32px)); background:var(--white); border-radius:var(--r-card); padding:20px; display:flex; gap:10px; }
.search-field{ flex:1; border:1px solid rgba(0,59,43,.15); border-radius:var(--r-btn); padding:13px 16px; }
.has-mega{ position:relative; }
/* Bridge the 12px visual gap so mouseleave does not close before a click. */
.has-mega::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-start:100%;
  height:16px;
}
.mega-menu{
  display:none; position:absolute; inset-block-start:100%; inset-inline-start:50%;
  transform:translateX(50%); width:min(920px, 80vw); background:transparent; color:var(--dark);
  border-radius:var(--r-card); box-shadow:none; padding:16px 0 0; grid-template-columns:repeat(4,1fr); gap:20px; text-align:start;
  z-index:80;
}
.mega-menu::before{
  content:"";
  position:absolute;
  inset:16px 0 0 0;
  background:var(--white);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  z-index:0;
}
[dir="ltr"] .mega-menu{ transform:translateX(-50%); }
.has-mega.is-open .mega-menu{ display:grid; }
.mega-col{ position:relative; z-index:1; padding:20px 18px 24px; }
.mega-col h3{ font-size:14px; margin-bottom:8px; }
.mega-col hr{ border:0; border-block-start:1px solid rgba(0,59,43,.12); margin:8px 0 12px; }
.mega-col a{ display:block; padding:6px 0; font-size:14px; color:var(--dark); border:0; }
.mega-col a.is-active{ color:var(--gold); font-weight:700; }
.mega-col a:hover{ color:var(--gold); }
.mega-more{ color:var(--gold) !important; font-weight:700; }
@media (max-width:960px){
  .nav-links{ display:none; }
  .menu-toggle{ display:grid; place-items:center; }
  .mobile-panel.is-open{
    display:block; position:absolute; top:var(--nav-h); inset-inline:16px;
    background:var(--white); color:var(--dark); border-radius:14px; box-shadow:var(--shadow-card); padding:16px; z-index:60; text-align:start;
  }
  .mobile-panel a, .mobile-panel button{ display:block; width:100%; text-align:start; background:none; border:0; padding:12px 8px; font:inherit; cursor:pointer; }
  .mobile-mega{ display:none; padding:0 8px 8px; }
  .mobile-mega.is-open{ display:block; }
}

/* Home hero aliases */
.hero:not(.page-hero){
  position:relative; min-height:750px; display:flex; align-items:flex-start;
  padding-block-start:clamp(80px,13.2vw,190px); color:var(--white); overflow:hidden; background:var(--dark);
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero:not(.page-hero)::before{ content:''; position:absolute; inset:0; z-index:1; background:rgba(9,42,35,.3); }
.hero:not(.page-hero)::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 0%, transparent 42%, rgba(239,244,236,.14) 62%, rgba(239,244,236,.1) 74%, var(--wash) 90%, var(--grad) 100%);
}
.hero-inner, .hero-real-content{
  position:relative; z-index:2; max-width:988px; width:100%;
  padding-inline-start:clamp(24px,15.8vw,228px); padding-inline-end:0; margin-inline-end:auto; text-align:start;
}
.hero-eyebrow{ font-size:18px; font-weight:500; margin-block-end:14px; }
.hero-inner h1{ font-size:clamp(38px,5.3vw,76px); line-height:1.05; margin:0; }
.hero-sub, .hero-real-sub{ font-size:clamp(22px,2.92vw,42px); font-weight:700; display:block; margin-block-start:6px; }
.hero-inner p:not(.hero-eyebrow), .hero-real-content p:not(.eyebrow){ font-size:20px; opacity:.85; max-width:52ch; margin-block-start:16px; }
.hero .hero-actions{ margin-block-start:26px; }

/* Feature strip text block */
.feature-copy, .feature-item .flex-col{ text-align:start; }
.feature-strip h3{ font-size:18px; font-weight:700; }
.feature-float.container, .feature-float{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }

/* Regions aliases */
.regions-stage{ display:grid; grid-template-columns:1fr 1.66fr; gap:28px; align-items:start; width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.region-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.region-card img.cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.region-card .meta{
  position:absolute; inset-inline:0; inset-block-end:0; padding:14px 12px; text-align:center; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.region-card .meta svg{ width:30px; height:30px; color:var(--gold); }
.map-pin{
  position:absolute; z-index:3; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--white); background:var(--gold); padding:0; cursor:pointer; transform:translate(-50%,-50%);
}
.map-pin.is-on{ box-shadow:0 0 0 8px rgba(200,154,56,.28); }
.map-glow{ position:absolute; width:48px; height:48px; border-radius:50%; background:rgba(200,154,56,.25); pointer-events:none; transform:translate(-50%,-50%); }
.map-prompt{ position:absolute; inset-block-start:20px; inset-inline-end:20px; color:var(--white); font-weight:700; font-size:18px; text-align:end; z-index:2; display:flex; align-items:center; gap:8px; }

/* Trip planner aliases */
.planner, .trip-planner{ background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:36px; display:grid; grid-template-columns:1fr 1.73fr; gap:36px; }
.planner-inputs, .trip-inputs-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.trip-input select.trip-input-value{
  border:0; background:transparent; font-weight:500; font-size:15px; width:100%;
  text-align:start; padding:0; appearance:none; color:inherit; cursor:pointer;
}

/* Events aliases */
.month-tabs{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.month-tabs button{ width:132px; height:54px; border:none; background:rgba(0,59,43,.08); color:rgba(0,59,43,.68); font-weight:700; font-size:20px; border-radius:13px; }
.month-tabs button.is-active, .month-tabs button.active, .events-tabs button.is-active{ background:var(--gold); color:var(--white); box-shadow:0 8px 18px rgba(0,0,0,.22); }
.events-head{ display:flex; flex-direction:column; align-items:center; gap:17px; }
.event-rail{ width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.center-cta{ display:flex; justify-content:center; }
.center-cta .btn{ width:220px; height:48px; font-size:15px; font-weight:500; }

/* Stats aliases */
.stats, .stats-band{ background:var(--white); border-radius:var(--r-card); padding-block:17px; padding-inline-end:36px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; width:min(var(--container), calc(100% - 48px)); margin-inline:auto; }
.stats-brand{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.stats-msg{ font-size:26px; font-weight:500; text-align:end; line-height:38px; }
.stats .stats-rail{ display:flex; gap:0; flex-wrap:wrap; }
.stats .stat{ display:flex; align-items:center; gap:10px; padding-inline:9px; border-inline-end:1px solid rgba(0,59,43,.15); }
.stats .stat:last-child{ border-inline-end:none; }
.stats .stat b{ font-size:31px; font-weight:500; line-height:40px; display:block; }
.stats .stat span{ font-size:14px; color:rgba(0,59,43,.68); display:block; }

/* Footer CTA: keep Claude's .footer-cta-band full-bleed. A later
   max-width on the band made the centered title and the absolute
   brand lockup occupy the same space. */

.footer-wash{ background:rgba(0,59,43,.83); }
.footer-inner{ padding-block:64px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:32px; }
.newsletter h4{ font-size:var(--fs-small); font-weight:700; margin-block-end:16px; }
.newsletter p{ font-size:14px; opacity:.7; margin-block-end:14px; }
.newsletter input{
  width:100%; height:44px; border-radius:var(--r-btn); border:1px solid rgba(239,244,236,.35);
  background:rgba(239,244,236,.08); color:var(--sage); padding:0 16px; text-align:start; margin-block-end:10px;
}
.newsletter button{ width:100%; }
.socials{ display:flex; gap:10px; margin-block-start:18px; }
.socials a{ width:34px; height:34px; border-radius:50%; background:rgba(239,244,236,.12); display:flex; align-items:center; justify-content:center; color:var(--white); }
.socials a:hover{ background:var(--gold); color:var(--dark); }

/* Inner pages — Claude page-hero sizes, keep each page's photos */
.listing-hero, .page-hero, .dest-hero{
  position:relative; width:100%; min-height:340px; margin:0; color:var(--sage);
  overflow:hidden; display:flex; flex-direction:column; background:var(--dark) center / cover no-repeat;
}
.listing-hero{ min-height:480px; }
body[data-page="experiences"] .listing-hero,
.listing-hero--home{
  min-height:750px;
  display:flex;
  align-items:flex-start;
  padding-block-start:clamp(80px,13.2vw,190px);
  color:var(--white);
}
body[data-page="experiences"] .listing-hero__overlay,
.listing-hero--home .listing-hero__overlay{
  background:rgba(9,42,35,.3);
  z-index:1;
}
body[data-page="experiences"] .listing-hero::after,
.listing-hero--home::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 0%, transparent 42%, rgba(239,244,236,.14) 62%, rgba(239,244,236,.1) 74%, var(--wash) 90%, var(--grad) 100%);
}
body[data-page="experiences"] .listing-hero__copy,
.listing-hero--home .listing-hero__copy{ z-index:2; }
/* Figma 609:2: ~104px between section frames. Listing page only
   (transparent header) so experience-details is untouched. */
body[data-page="experiences"][data-header="transparent"] .section,
body[data-page="experiences"][data-header="transparent"] .exp-mood,
body[data-page="experiences"][data-header="transparent"] .exp-selected,
body[data-page="experiences"][data-header="transparent"] .exp-region,
body[data-page="experiences"][data-header="transparent"] .exp-routes,
body[data-page="experiences"][data-header="transparent"] .exp-season{
  padding-block:56px;
}
body[data-page="experiences"][data-header="transparent"] .exp-mood,
body[data-page="experiences"][data-header="transparent"] .exp-selected,
body[data-page="experiences"][data-header="transparent"] .exp-region,
body[data-page="experiences"][data-header="transparent"] .exp-routes,
body[data-page="experiences"][data-header="transparent"] .exp-season,
body[data-page="experiences"][data-header="transparent"] .exp-season + .section{
  margin-block-start:104px;
}
.dest-hero{ min-height:520px; }
.listing-hero__bg, .page-hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.listing-hero__overlay, .page-hero::after{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,42,30,.15), rgba(3,42,30,.75));
}
.page-hero::after{ content:''; }
.listing-hero__copy, .page-hero .copy{
  position:relative; z-index:1; width:100%; max-width:var(--container); margin-inline:auto;
  padding:48px 24px 32px; text-align:start;
}
.listing-hero .crumb, .page-hero .crumb, .breadcrumb{ font-size:var(--fs-tiny); opacity:.75; }
.listing-hero h1, .page-hero h1{ margin-block-start:12px; font-size:var(--fs-h1); font-weight:800; }
.listing-hero__sub, .page-hero .copy > p:not(.crumb){ margin-block-start:12px; font-size:18px; opacity:.85; max-width:52ch; }
/* Experiences hero copy: homepage title scale + Figma hero-exp sub/crumb.
   Photo, 750px height, and overlays stay. */
body[data-page="experiences"][data-header="transparent"] .listing-hero__copy,
body[data-page="events"][data-header="transparent"] .listing-hero__copy,
body[data-page="plan"][data-header="transparent"] .listing-hero__copy,
body[data-page="restaurants"][data-header="transparent"] .listing-hero__copy,
body[data-page="stays"][data-header="transparent"] .listing-hero__copy,
body[data-page="contact"][data-header="transparent"] .listing-hero__copy{
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
  text-align:start;
}
body[data-page="experiences"][data-header="transparent"] .listing-hero .crumb,
body[data-page="events"][data-header="transparent"] .listing-hero .crumb,
body[data-page="plan"][data-header="transparent"] .listing-hero .crumb,
body[data-page="restaurants"][data-header="transparent"] .listing-hero .crumb,
body[data-page="stays"][data-header="transparent"] .listing-hero .crumb,
body[data-page="contact"][data-header="transparent"] .listing-hero .crumb{
  font-size:14px;
  opacity:1;
  margin:0;
}
body[data-page="experiences"][data-header="transparent"] .listing-hero h1,
body[data-page="events"][data-header="transparent"] .listing-hero h1,
body[data-page="plan"][data-header="transparent"] .listing-hero h1,
body[data-page="restaurants"][data-header="transparent"] .listing-hero h1,
body[data-page="stays"][data-header="transparent"] .listing-hero h1,
body[data-page="contact"][data-header="transparent"] .listing-hero h1{
  margin:0;
  font-size:clamp(38px,5.3vw,76px);
  line-height:1.35;
  font-weight:800;
}
body[data-page="experiences"][data-header="transparent"] .listing-hero__sub,
body[data-page="events"][data-header="transparent"] .listing-hero__sub,
body[data-page="plan"][data-header="transparent"] .listing-hero__sub,
body[data-page="restaurants"][data-header="transparent"] .listing-hero__sub,
body[data-page="stays"][data-header="transparent"] .listing-hero__sub,
body[data-page="contact"][data-header="transparent"] .listing-hero__sub{
  margin:0;
  font-size:clamp(18px,1.8vw,26px);
  font-weight:500;
  line-height:1.45;
  opacity:.96;
}
/* Hero title + subtitle only — locked sage. Never inherit --white.
   Do not recolor crumb, eyebrow, buttons, stats, or hero description extras. */
.listing-hero h1,
.listing-hero__sub,
.page-hero h1,
.page-hero .copy > p:not(.crumb),
.dest-hero h1,
.hero-inner > h1,
.hero-sub,
.hero-real-content > h1,
.hero-real-sub,
.hero-peaks-content > h1,
.hero-peaks-headline,
.hero-exp-content > h1,
.hero-exp-sub,
.hero-content h1{
  color: var(--sage);
}
/* Hero crumb — white + gold diamond (8×8, gap 8px from stays crop).
   Scoped to photo heroes only; account and other in-page crumbs stay put. */
.listing-hero .crumb,
.page-hero .crumb,
.dest-hero .crumb,
.hero-exp-content .breadcrumb,
.hero-content .breadcrumb,
.hero-eyebrow,
.hero-real-content .eyebrow,
.hero-content .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--white);
  opacity:1;
}
.listing-hero .crumb::before,
.page-hero .crumb::before,
.dest-hero .crumb::before,
.hero-exp-content .breadcrumb::before,
.hero-content .breadcrumb::before,
.hero-eyebrow::before,
.hero-real-content .eyebrow::before,
.hero-content .eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
}
.hero-stats{
  position:relative; z-index:2; margin:-40px auto 0; width:min(var(--container), calc(100% - 48px));
  background:var(--white); color:var(--dark); border-radius:var(--r-card); box-shadow:var(--shadow-card);
  display:flex; padding:24px; gap:0;
}
.hero-stat{ flex:1; text-align:center; border-inline-end:1px solid rgba(0,59,43,.1); display:flex; align-items:center; justify-content:center; gap:8px; padding:8px; }
.hero-stat:last-child{ border-inline-end:none; }
.hero-stat strong{ display:block; font-size:20px; }
.hero-stat span{ font-size:var(--fs-tiny); opacity:.6; }
.hero-pills{ position:relative; z-index:1; display:flex; gap:12px; margin:0 auto 24px; width:min(var(--container), calc(100% - 48px)); flex-wrap:wrap; }
.hero-pills span{ color:var(--sage); font-size:15px; font-weight:700; }

.listing-filter, .exp-discovery{
  width:min(var(--container), calc(100% - 48px)); margin:-40px auto 0; position:relative; z-index:3;
  background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:20px 32px;
}
.listing-filter__row{ display:grid; grid-template-columns:minmax(220px,1.6fr) 190px 190px auto; gap:16px; align-items:end; }
.listing-filter label{ display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:700; text-align:start; }
.listing-filter input, .listing-filter select{
  height:42px; border:1px solid rgba(0,59,43,.15); background:var(--sage); border-radius:var(--r-btn); padding:0 16px; text-align:start;
}
.listing-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:16px; }
.listing-filter__btn{ height:42px; }

/* Events listing — reuse experiences sizes. Scoped so other pages stay put. */
body[data-page="events"][data-header="transparent"] .ev-discovery-field,
body[data-page="plan"][data-header="transparent"] .ev-discovery-field,
body[data-page="restaurants"][data-header="transparent"] .ev-discovery-field,
body[data-page="stays"][data-header="transparent"] .ev-discovery-field{
  display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:700; text-align:start; color:var(--dark);
}
body[data-page="events"][data-header="transparent"] .ev-discovery-field select,
body[data-page="plan"][data-header="transparent"] .ev-discovery-field select,
body[data-page="restaurants"][data-header="transparent"] .ev-discovery-field select,
body[data-page="stays"][data-header="transparent"] .ev-discovery-field select,
body[data-page="stays"][data-header="transparent"] .ev-discovery-field input{
  height:44px; width:190px; min-width:0;
  background-color:var(--sage); border:1px solid var(--sage); border-radius:var(--r-btn);
  padding-block:0; padding-inline:16px 36px;
  font-size:14px; font-weight:400; color:rgba(0,59,43,.68); text-align:start;
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23003B2B' stroke-opacity='.68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:12px 8px;
  background-position:left 16px center;
}
html[dir="ltr"] body[data-page="events"][data-header="transparent"] .ev-discovery-field select,
html[dir="ltr"] body[data-page="plan"][data-header="transparent"] .ev-discovery-field select,
html[dir="ltr"] body[data-page="restaurants"][data-header="transparent"] .ev-discovery-field select,
html[dir="ltr"] body[data-page="stays"][data-header="transparent"] .ev-discovery-field select,
html[dir="ltr"] body[data-page="stays"][data-header="transparent"] .ev-discovery-field input{
  background-position:right 16px center;
}
body[data-page="stays"][data-header="transparent"] .ev-discovery-field input{
  cursor:text;
  background-image:none;
  padding-inline:16px;
}
body[data-page="events"][data-header="transparent"] .ev-map-sec{
  background:var(--sage); padding-block:60px; margin-block-start:56px;
}
body[data-page="events"][data-header="transparent"] .exp-selected,
body[data-page="events"][data-header="transparent"] .exp-region,
body[data-page="events"][data-header="transparent"] .ev-cal-sec,
body[data-page="events"][data-header="transparent"] .section{
  padding-block:56px;
}
body[data-page="events"][data-header="transparent"] .exp-selected,
body[data-page="events"][data-header="transparent"] .exp-region,
body[data-page="events"][data-header="transparent"] .ev-cal-sec,
body[data-page="events"][data-header="transparent"] .ev-cal-sec + .section{
  margin-block-start:104px;
}
body[data-page="events"][data-header="transparent"] .exp-mood-head p,
body[data-page="events"][data-header="transparent"] .section-sub{
  text-align:start; margin-block-end:32px;
}
/* Map — Figma 682:78. Title above; week panel first in DOM (right); map 790×456. */
body[data-page="events"][data-header="transparent"] .ev-map-head{
  text-align:start; margin-block-end:48px;
}
body[data-page="events"][data-header="transparent"] .ev-map-head h2{
  margin:0;
}
body[data-page="events"][data-header="transparent"] .ev-map-head p{
  font-size:14px; color:rgba(0,59,43,.68); margin:8px 0 0;
}
body[data-page="events"][data-header="transparent"] .ev-map-row{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,0.8fr);
  gap:28px;
  align-items:stretch;
}
body[data-page="events"][data-header="transparent"] .ev-week-panel{
  grid-column:auto; grid-row:auto;
  background:var(--white); border-radius:var(--r-card);
  box-shadow:0 8px 10px rgba(3,42,30,.16);
  display:flex; flex-direction:column; gap:18px;
  padding:15px 30px; text-align:start;
  min-height:456px;
}
body[data-page="events"][data-header="transparent"] .ev-place-board{
  background:var(--white);
  border:1.5px solid rgba(0,59,43,.12);
  border-radius:var(--r-card);
  box-shadow:0 8px 20px -4px rgba(3,42,30,.12);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:20px;
  text-align:start;
  min-height:456px;
}
body[data-page="events"][data-header="transparent"] .ev-place-board__hint{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--gold);
}
body[data-page="events"][data-header="transparent"] .ev-place-path{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
  flex:1;
  justify-content:space-between;
}
body[data-page="events"][data-header="transparent"] .ev-place-path::before{
  content:"";
  position:absolute;
  inset-inline-start:20px;
  top:28px;
  bottom:28px;
  width:2px;
  background:rgba(200,154,56,.45);
  z-index:0;
  pointer-events:none;
}
body[data-page="events"][data-header="transparent"] .ev-place-path > li{
  margin:0; position:relative; z-index:1;
}
body[data-page="events"][data-header="transparent"] .ev-place-stop{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:12px 8px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  transition:background .2s ease, transform .2s ease;
}
body[data-page="events"][data-header="transparent"] .ev-place-stop:hover{
  background:var(--sage);
  transform:translateX(-2px);
}
html[dir="ltr"] body[data-page="events"][data-header="transparent"] .ev-place-stop:hover{
  transform:translateX(2px);
}
body[data-page="events"][data-header="transparent"] .ev-place-stop__num{
  width:42px;
  height:42px;
  border-radius:21px;
  background:var(--dark);
  color:var(--gold);
  font-size:20px;
  font-weight:700;
  line-height:42px;
  text-align:center;
  flex-shrink:0;
}
body[data-page="events"][data-header="transparent"] .ev-place-stop:hover .ev-place-stop__num{
  background:var(--gold);
  color:var(--dark);
}
body[data-page="events"][data-header="transparent"] .ev-place-stop__copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
body[data-page="events"][data-header="transparent"] .ev-place-stop__name{
  font-size:18px;
  font-weight:700;
  color:var(--dark);
  line-height:1.3;
}
body[data-page="events"][data-header="transparent"] .ev-place-stop__note{
  font-size:13px;
  line-height:1.4;
  color:rgba(0,59,43,.68);
}
body[data-page="events"][data-header="transparent"] .ev-week-head{
  display:flex; align-items:center; gap:10px;
}
body[data-page="events"][data-header="transparent"] .ev-week-head h3{
  flex:1; font-size:22px; line-height:34px; color:var(--dark); margin:0; text-align:start;
}
body[data-page="events"][data-header="transparent"] .ev-week-cal{
  flex-shrink:0; width:18px; height:19px;
}
body[data-page="events"][data-header="transparent"] .ev-week-list{ display:flex; flex-direction:column; gap:18px; }
/* Figma 682:93 LTR: thumb 46×44, gap 61, copy, gap 61, date. RTL DOM: date → copy → thumb. */
body[data-page="events"][data-header="transparent"] .ev-week-item{
  display:flex; align-items:center; justify-content:center; gap:61px;
  padding:8px 12px; border-radius:12px;
  transition:background-color .2s ease;
}
body[data-page="events"][data-header="transparent"] .ev-week-item:hover{
  background:var(--sage);
}
body[data-page="events"][data-header="transparent"] .ev-week-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex-shrink:0; width:40px; padding:4px 8px; text-align:center; font-size:12px; line-height:1.2; color:rgba(0,59,43,.68);
}
body[data-page="events"][data-header="transparent"] .ev-week-date strong{
  font-size:12px; font-weight:400; color:var(--gold); line-height:1.2;
}
body[data-page="events"][data-header="transparent"] .ev-week-copy{
  flex:1; min-width:0; text-align:center;
}
body[data-page="events"][data-header="transparent"] .ev-week-copy h3{
  font-size:14px; font-weight:700; color:var(--dark); margin:0;
}
body[data-page="events"][data-header="transparent"] .ev-week-copy p{
  font-size:12px; color:rgba(0,59,43,.68); margin-block-start:2px;
}
body[data-page="events"][data-header="transparent"] .ev-week-when{ display:none; }
body[data-page="events"][data-header="transparent"] .ev-week-thumb{
  position:relative; display:block; flex-shrink:0;
  width:46px; height:44px; border-radius:8px; overflow:hidden; background:var(--dark);
}
body[data-page="events"][data-header="transparent"] .ev-week-thumb img{
  width:46px; height:44px; object-fit:cover; display:block; opacity:.88;
}
body[data-page="events"][data-header="transparent"] .ev-week-thumb::after{
  content:''; position:absolute; inset:0; background:rgba(9,42,35,.18); pointer-events:none;
}
body[data-page="events"][data-header="transparent"] .ev-week-more{
  display:inline-flex; align-items:center; gap:8px;
  align-self:flex-end; margin-block-start:auto;
  font-size:15px; font-weight:400; color:var(--gold);
  cursor:pointer;
  transition:opacity .2s ease;
}
body[data-page="events"][data-header="transparent"] .ev-week-more img{
  width:14px; height:12px; flex-shrink:0;
  transition:transform .2s ease;
}
body[data-page="events"][data-header="transparent"] .ev-week-more:hover{
  opacity:.72;
}
body[data-page="events"][data-header="transparent"] .ev-week-more:hover img{
  transform:translateX(-4px);
}
body[data-page="events"][data-header="transparent"] .ev-cal-sec .exp-mood-head p{
  margin-block-end:48px;
}
body[data-page="events"][data-header="transparent"] .ev-cal-week{
  display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-block-end:48px;
}
body[data-page="events"][data-header="transparent"] .ev-cal-sec .exp-routes-row{
  display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; gap:24px;
}
body[data-page="events"][data-header="transparent"] .ev-cal-sec .exp-route-card{
  width:332px; flex:0 0 332px;
}
body[data-page="events"][data-header="transparent"] .ev-cal-day{
  width:132px; height:54px; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:none; background:rgba(0,59,43,.08); color:rgba(0,59,43,.68);
  font-weight:700; font-size:13px; border-radius:13px; text-align:center;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, transform .18s ease, opacity .18s ease;
}
body[data-page="events"][data-header="transparent"] .ev-cal-day strong{ font-size:20px; line-height:1; }
body[data-page="events"][data-header="transparent"] .ev-cal-day:hover:not(.is-active){
  background:rgba(0,59,43,.16); color:var(--dark); transform:translateY(-1px);
}
body[data-page="events"][data-header="transparent"] .ev-cal-day.is-active{
  background:var(--gold); color:var(--white);
}
body[data-page="events"][data-header="transparent"] .ev-cal-day.is-active:hover{ opacity:.9; }
@media (max-width:960px){
  body[data-page="events"][data-header="transparent"] .ev-discovery-field select,
  body[data-page="plan"][data-header="transparent"] .ev-discovery-field select{ width:100%; }
  body[data-page="events"][data-header="transparent"] .ev-map-head{ text-align:center; margin-block-end:32px; }
  body[data-page="events"][data-header="transparent"] .ev-map-row{
    grid-template-columns:1fr;
    gap:24px;
  }
  body[data-page="events"][data-header="transparent"] .ev-week-panel,
  body[data-page="events"][data-header="transparent"] .ev-place-board{
    min-height:0;
  }
  body[data-page="events"][data-header="transparent"] .ev-week-date{ display:none; }
  body[data-page="events"][data-header="transparent"] .ev-week-when{ display:inline; }
  body[data-page="events"][data-header="transparent"] .ev-week-item{
    justify-content:flex-start; gap:12px;
  }
  body[data-page="events"][data-header="transparent"] .ev-week-copy{ text-align:start; }
  body[data-page="events"][data-header="transparent"] .ev-week-thumb,
  body[data-page="events"][data-header="transparent"] .ev-week-thumb img{ width:64px; height:64px; }
  body[data-page="events"][data-header="transparent"] .ev-week-copy h3{ font-size:15px; }
  body[data-page="events"][data-header="transparent"] .ev-week-more{
    align-self:center; color:var(--dark);
  }
  body[data-page="events"][data-header="transparent"] .ev-cal-sec .exp-routes-row{
    flex-direction:column; align-items:center;
  }
  body[data-page="events"][data-header="transparent"] .ev-cal-sec .exp-route-card{
    width:min(100%,400px); flex:0 1 auto;
  }
}

/* Plan listing — sage behind text cards; filter card follows Figma 3-col + centered CTA. */
.plan-sage{
  background:var(--sage);
  padding-block:60px;
}
.plan-discovery-wrap + .plan-sage,
.plan-discovery-wrap + .plan-method{
  margin-block-start:56px;
}
body[data-page="plan"][data-header="transparent"] .plan-method.section{
  background:var(--sage); padding-block:60px;
}
body[data-page="plan"][data-header="transparent"] .plan-method .section-title{
  text-align:start; margin:0;
}
body[data-page="plan"][data-header="transparent"] .plan-method-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:60px;
  margin-block-start:48px;
}
body[data-page="plan"][data-header="transparent"] .plan-method-path{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; text-decoration:none; color:inherit;
}
body[data-page="plan"][data-header="transparent"] .plan-method-path:not(:first-child){
  border-inline-start:1px solid rgba(0,59,43,.15);
}
body[data-page="plan"][data-header="transparent"] .plan-method-path h3{
  margin:0; display:flex; align-items:center; gap:8px;
  font-size:24px; font-weight:700; line-height:1.35; color:var(--dark);
  transition:color .15s ease;
}
body[data-page="plan"][data-header="transparent"] .plan-method-path h3::before{
  content:""; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;
}
body[data-page="plan"][data-header="transparent"] .plan-method-path p{
  margin:0;
  font-size:17px; font-weight:400; line-height:1.45; color:rgba(0,59,43,.68);
}
body[data-page="plan"][data-header="transparent"] .plan-method-path:hover h3{
  color:var(--gold);
}
body[data-page="plan"][data-header="transparent"] .plan-suggested.section{
  background:var(--white); padding-block:56px; margin-block-start:104px;
}
body[data-page="plan"][data-header="transparent"] .plan-suggested .section-title{
  text-align:start; margin:0 0 24px;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-card{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,1.15fr);
  align-items:stretch; gap:0;
  min-height:456px; margin-block-start:0; padding:0; overflow:hidden;
  background:var(--white); border:1px solid var(--sage); border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-card:hover{
  box-shadow:0 18px 32px -8px rgba(3,42,30,.32);
}
body[data-page="plan"][data-header="transparent"] .plan-trip-card .copy{
  min-width:0; max-width:none;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:28px; padding:36px 32px; text-align:start; background:var(--sage);
}
body[data-page="plan"][data-header="transparent"] .plan-trip-head{
  width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-badge{
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
  margin:0; width:100%; color:var(--gold); font-weight:500; font-size:16px;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-badge .mark{
  width:28px; height:28px; display:block; flex-shrink:0;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-card .copy h3{
  width:100%; margin:0; font-size:34px; font-weight:700; line-height:1.35; color:var(--dark);
}
body[data-page="plan"][data-header="transparent"] .plan-trip-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0; font-size:15px; color:rgba(0,59,43,.68);
}
body[data-page="plan"][data-header="transparent"] .plan-trip-meta span + span::before{
  content:''; display:inline-block; width:8px; height:8px; margin-inline-end:8px;
  background:var(--gold); transform:rotate(45deg); vertical-align:middle;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-steps{
  position:relative; width:100%; display:flex; flex-direction:column; gap:16px;
  padding-inline-start:22px;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-steps::before{
  content:''; position:absolute; inset-inline-start:3px; inset-block:8px;
  width:1px; background:rgba(0,59,43,.12);
}
body[data-page="plan"][data-header="transparent"] .plan-trip-step{
  position:relative; display:flex; flex-direction:column; gap:4px;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-step::before{
  content:''; position:absolute; inset-inline-start:-22px; inset-block-start:8px;
  width:8px; height:8px; background:var(--gold); transform:rotate(45deg);
}
body[data-page="plan"][data-header="transparent"] .plan-trip-step strong{
  font-size:20px; font-weight:700; line-height:1.4; color:var(--dark);
}
body[data-page="plan"][data-header="transparent"] .plan-trip-step p{
  margin:0; font-size:17px; font-weight:400;
  line-height:1.5; color:rgba(0,59,43,.68);
}
body[data-page="plan"][data-header="transparent"] .plan-trip-card .btn-gold{
  width:300px; max-width:100%; height:58px; margin-block-start:4px;
  font-size:22px; font-weight:700; color:var(--white); gap:10px;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-card .btn-gold svg{
  width:22px; height:22px; display:block; flex-shrink:0;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-photo{
  position:relative; width:auto; height:auto; min-height:456px; overflow:hidden;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-chip{
  position:absolute; z-index:2; inset-block-start:12px; inset-inline-end:12px;
  background:var(--sage); color:var(--dark); border-radius:6px;
  font-size:11px; font-weight:700; padding:4px 10px;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-photo img{
  position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="plan"][data-header="transparent"] .plan-trip-card:hover .plan-trip-photo img{
  transform:none;
}
body[data-page="plan"][data-header="transparent"] .plan-trip-photo::after{
  content:''; position:absolute; inset:0; z-index:1; background:rgba(9,42,35,.18);
}
body[data-page="plan"][data-header="transparent"] .plan-filter-row{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:start;
}
body[data-page="plan"][data-header="transparent"] .plan-disc-group{
  display:flex; flex-direction:column; gap:8px; min-width:0; width:100%;
  align-items:center; text-align:center;
}
body[data-page="plan"][data-header="transparent"] .plan-disc-label,
body[data-page="plan"][data-header="transparent"] .plan-filter-row .ev-discovery-field{
  margin:0; font-size:13px; font-weight:700; color:var(--dark); text-align:center;
}
body[data-page="plan"][data-header="transparent"] .plan-filter-row .ev-discovery-field select,
body[data-page="plan"][data-header="transparent"] .plan-region-trigger{
  width:100%;
}
body[data-page="plan"][data-header="transparent"] .plan-region{
  position:relative; width:100%;
}
body[data-page="plan"][data-header="transparent"] .plan-region.is-enhanced select{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap;
}
body[data-page="plan"][data-header="transparent"] .plan-region-trigger{
  height:44px; min-width:0;
  background-color:var(--sage); border:1px solid var(--sage); border-radius:var(--r-btn);
  padding-block:0; padding-inline:16px 36px;
  font-size:14px; font-weight:400; color:rgba(0,59,43,.68); text-align:start;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23003B2B' stroke-opacity='.68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:12px 8px; background-position:left 16px center;
}
html[dir="ltr"] body[data-page="plan"][data-header="transparent"] .plan-region-trigger{
  background-position:right 16px center;
}
body[data-page="plan"][data-header="transparent"] .plan-region-trigger.is-chosen{
  color:var(--dark);
}
body[data-page="plan"][data-header="transparent"] .plan-region-menu{
  position:absolute; inset-inline:0; inset-block-start:calc(100% + 6px); z-index:8;
  max-height:240px; overflow:auto;
  margin:0; padding:6px 0; list-style:none;
  background:var(--white); border:1px solid var(--sage); border-radius:var(--r-btn);
  box-shadow:var(--shadow-card); text-align:start;
}
body[data-page="plan"][data-header="transparent"] .plan-region-opt{
  display:block; width:100%; border:0; background:transparent; cursor:pointer;
  padding:8px 16px; font-size:14px; font-weight:400; color:var(--dark); text-align:start;
}
body[data-page="plan"][data-header="transparent"] .plan-region-opt:hover,
body[data-page="plan"][data-header="transparent"] .plan-region-opt.is-active{
  background:var(--sage); color:var(--dark);
}
body[data-page="plan"][data-header="transparent"] .plan-chips{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; width:100%;
}
body[data-page="plan"][data-header="transparent"] .plan-chips .chip{
  height:34px; padding:0 12px; font-size:13px; border-radius:12px;
}
body[data-page="plan"][data-header="transparent"] .plan-filter-cta{
  text-align:center; margin:24px 0 0;
}
body[data-page="plan"][data-header="transparent"] .plan-filter-cta .btn-gold{
  min-width:300px; height:58px; font-size:22px; font-weight:700;
  color:var(--white); gap:10px;
}
body[data-page="plan"][data-header="transparent"] .plan-filter-cta .btn-gold img{
  width:28px; height:28px; display:block;
}
body[data-page="plan"][data-header="transparent"] .plan-suggested + .plan-sage{
  margin-block-start:104px;
}
body[data-page="plan"][data-header="transparent"] .plan-sage .section-title{
  text-align:start; margin:0;
}
body[data-page="plan"][data-header="transparent"] .plan-prefs{
  display:flex; flex-direction:column; gap:28px;
  margin-block-start:24px; padding:36px 32px;
  background:var(--white); border:1px solid var(--sage); border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}
body[data-page="plan"][data-header="transparent"] .plan-prefs-top{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block-end:28px; border-block-end:1px solid var(--sage);
}
body[data-page="plan"][data-header="transparent"] .plan-prefs-who{ text-align:start; }
body[data-page="plan"][data-header="transparent"] .plan-prefs-who h3{
  margin:0; font-size:20px; font-weight:700; line-height:1.4; color:var(--dark);
}
body[data-page="plan"][data-header="transparent"] .plan-prefs-note{
  margin:4px 0 0; font-size:15px; color:rgba(0,59,43,.68);
}
body[data-page="plan"][data-header="transparent"] .plan-stepper{
  direction:ltr; display:flex; align-items:center; justify-content:center; gap:14px;
  min-width:168px; background:var(--sage); border:1px solid rgba(0,59,43,.12);
  border-radius:var(--r-btn); padding:8px 14px;
}
body[data-page="plan"][data-header="transparent"] .plan-stepper button{
  width:32px; height:32px; border:0; background:var(--white); border-radius:8px;
  color:var(--dark); font-size:18px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, color .15s ease;
}
body[data-page="plan"][data-header="transparent"] .plan-stepper button:hover{
  background:var(--dark); color:var(--white);
}
body[data-page="plan"][data-header="transparent"] .plan-stepper span{
  font-size:34px; font-weight:700; line-height:1.35; color:var(--dark);
  min-width:36px; text-align:center;
}
body[data-page="plan"][data-header="transparent"] .plan-prefs-grid{
  display:flex; flex-direction:column; gap:24px;
}
body[data-page="plan"][data-header="transparent"] .plan-pref{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:24px;
}
body[data-page="plan"][data-header="transparent"] .plan-pref-label{
  margin:0; flex-shrink:0; font-size:18px; font-weight:700; line-height:1.35; color:var(--dark);
}
body[data-page="plan"][data-header="transparent"] .plan-prefs .plan-chips{
  justify-content:flex-end; flex-wrap:wrap; width:auto;
}
body[data-page="plan"][data-header="transparent"] .plan-save.section{
  background:var(--white); padding-block:56px;
}
body[data-page="plan"][data-header="transparent"] .plan-save-cta{
  display:flex; align-items:center; justify-content:space-between; gap:64px;
  min-height:340px; padding:56px;
  background:var(--dark); border-radius:var(--r-card); color:var(--white);
}
body[data-page="plan"][data-header="transparent"] .plan-save-text{
  flex:1 1 420px; max-width:620px; text-align:start;
}
body[data-page="plan"][data-header="transparent"] .plan-save-text h2{
  margin:0 0 6px; font-size:36px; font-weight:700; line-height:1.35; color:var(--white);
}
body[data-page="plan"][data-header="transparent"] .plan-save-text p{
  margin:0; font-size:17px; font-weight:400; line-height:1.5; color:rgba(255,255,255,.85);
}
body[data-page="plan"][data-header="transparent"] .plan-save-cta .btn-gold{
  flex-shrink:0; min-width:272px; height:56px; font-size:22px; font-weight:700;
  color:var(--white); gap:10px;
}
body[data-page="plan"][data-header="transparent"] .plan-save-cta .btn-gold svg{
  width:22px; height:22px; display:block; flex-shrink:0;
}
@media (max-width:960px){
  body[data-page="plan"][data-header="transparent"] .plan-filter-row{ grid-template-columns:1fr; }
  body[data-page="plan"][data-header="transparent"] .plan-chips{ flex-wrap:wrap; }
  body[data-page="plan"][data-header="transparent"] .plan-method-row{ grid-template-columns:1fr; gap:16px; }
  body[data-page="plan"][data-header="transparent"] .plan-method-path:not(:first-child){ border-inline-start:0; padding-inline-start:0; }
  body[data-page="plan"][data-header="transparent"] .plan-suggested.section{ margin-block-start:40px; }
  body[data-page="plan"][data-header="transparent"] .plan-trip-card{
    grid-template-columns:1fr; min-height:0;
  }
  body[data-page="plan"][data-header="transparent"] .plan-trip-card .copy{ max-width:none; }
  body[data-page="plan"][data-header="transparent"] .plan-trip-photo{
    grid-row:1; min-height:260px; height:260px;
  }
  body[data-page="plan"][data-header="transparent"] .plan-pref{ flex-wrap:wrap; }
  body[data-page="plan"][data-header="transparent"] .plan-save-cta{
    flex-direction:column; text-align:center; padding:32px 24px; gap:24px;
  }
  body[data-page="plan"][data-header="transparent"] .plan-save-text{ text-align:center; max-width:none; }
}

.place-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-block-start:32px; }
.place-card{ position:relative; background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column; }
.place-card__img, .card .thumb{ width:100%; height:190px; object-fit:cover; }
.place-card__top{ position:absolute; inset-block-start:12px; inset-inline:12px; z-index:2; display:flex; align-items:center; justify-content:space-between; }
.place-card__fav{ width:32px; height:32px; padding:7px; border-radius:50%; background:var(--white); }
.place-card__badge{ background:var(--sage); color:var(--dark); border-radius:6px; font-size:11px; font-weight:700; padding:4px 10px; }
.place-card h3{ margin:8px 24px 0; font-size:20px; }
.place-card__loc{ margin:2px 24px 0; font-size:13px; color:rgba(0,59,43,.68); display:flex; align-items:center; gap:6px; }
.place-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:10px 24px 16px; }
.place-card__rate{ color:var(--gold); font-size:12px; font-weight:700; }
.tag{ background:var(--sage); border:1px solid var(--dark); border-radius:6px; min-width:70px; height:24px; display:grid; place-items:center; font-size:10px; padding:0 6px; }

.food-exp-grid, .region-food-grid, .dish-grid{ display:grid; gap:20px; margin-block-start:28px; }
.food-exp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.region-food-grid, .dish-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.food-exp, .region-food{ position:relative; height:180px; border-radius:var(--r-card); overflow:hidden; color:#fff; box-shadow:var(--shadow-card); }
.region-food{ height:230px; }
.food-exp img, .region-food img, .dish-tile img{ width:100%; height:100%; object-fit:cover; }
.food-exp::after, .region-food::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,42,30,0) 40%, rgba(3,42,30,.9) 100%); }
.food-exp__copy, .region-food div{ position:absolute; z-index:1; inset-inline:24px; inset-block-end:20px; }
.dish-tile{ background:var(--white); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); height:226px; text-align:center; }
.dish-tile img{ height:154px; }
.listing-cta{ position:relative; height:230px; border-radius:var(--r-card); overflow:hidden; color:#fff; }
.listing-cta img{ width:100%; height:100%; object-fit:cover; }
.listing-cta::after{ content:''; position:absolute; inset:0; background:rgba(0,59,43,.82); }
.listing-cta__copy{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; }

.type-grid, .benefits, .method-grid, .mood-grid, .detail-grid, .booked-grid, .season-grid, .route-grid, .card-grid{ display:grid; gap:16px; margin-block-start:24px; }
.type-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.benefits{ grid-template-columns:repeat(4,1fr); background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:28px 20px; }
.method-grid{ grid-template-columns:repeat(3,1fr); }
.mood-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.detail-grid{ grid-template-columns:repeat(3,1fr); }
.booked-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.season-grid{ grid-template-columns:repeat(4,1fr); }
.route-grid{ grid-template-columns:repeat(3,1fr); }
.card-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.type-card, .method-card, .mood-card, .detail-box, .panel, .booked-card{ background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card); }
.type-card, .mood-card{ padding:28px 18px; text-align:center; }
.method-card, .detail-box, .card .body, .panel{ padding:24px; }
.trip-suggest, .featured-split, .events-map, .contact-layout, .split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:28px; }
.trip-suggest, .featured-split{ background:var(--white); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); }
.trip-suggest img, .featured-split img, .events-map img.map-shot{ width:100%; height:100%; min-height:360px; object-fit:cover; }
.trip-suggest .copy, .featured-split .copy{ padding:36px 32px; text-align:start; }
.week-list{ display:grid; gap:12px; }
.week-item{ display:grid; grid-template-columns:88px 1fr; gap:12px; background:var(--white); border-radius:12px; box-shadow:var(--shadow-card); overflow:hidden; align-items:center; }
.week-item img{ width:88px; height:88px; object-fit:cover; }
.calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-block-start:20px; }
.calendar-day{ background:var(--white); border-radius:12px; padding:12px 8px; text-align:center; box-shadow:var(--shadow-card); min-height:90px; }
.season-card{ background:var(--dark); color:#fff; border-radius:var(--r-card); padding:28px 20px; min-height:220px; }
.season-card a{ color:var(--gold); font-weight:700; }
.form-grid{ display:grid; gap:18px; }
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; min-height:58px; border:1px solid rgba(0,59,43,.15); border-radius:var(--r-btn); padding:0 18px; background:var(--white); text-align:start;
}
.form-grid textarea{ min-height:120px; padding-top:16px; }
.info-card{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; background:var(--white); box-shadow:var(--shadow-card); border-radius:var(--r-card); padding:16px 18px; margin-bottom:16px; text-align:start; }
.gold-ico{ color:var(--gold); font-size:22px; width:30px; text-align:center; }
.auth-wrap{ min-height:100vh; display:grid; place-items:center; padding:40px 16px; background:linear-gradient(180deg, rgba(0,59,43,.55), rgba(3,42,30,.82)), url("assets/img/hero-village-night.png") center / cover; }
.auth-card{ width:min(480px,100%); background:var(--white); border-radius:18px; padding:36px 28px; box-shadow:var(--shadow-card); text-align:start; }
.error-page{ min-height:calc(100vh - 430px); display:grid; place-items:center; padding:160px 16px 80px; text-align:center; }
.error-page .code{ margin:0; font-size:130px; color:var(--gold); line-height:1; }
.dest-desc{ max-width:70ch; font-size:18px; opacity:.85; }
.dest-block{ margin-block-start:48px; }
.dest-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-block-start:40px; }
.dest-near{ overflow:hidden; color:inherit; }
.filters{ display:flex; flex-wrap:wrap; gap:8px; }
.stat-pill{ display:inline-flex; }

@media (max-width:960px){
  .regions-stage, .planner, .footer-cta-inner, .contact-layout, .split, .featured-split, .events-map, .trip-suggest{ grid-template-columns:1fr; }
  .region-cards, .planner-inputs, .place-grid, .food-exp-grid, .event-rail{ grid-template-columns:repeat(2,1fr); }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .hero-stats{ flex-wrap:wrap; }
}
@media (max-width:600px){
  .region-cards, .planner-inputs, .place-grid, .food-exp-grid, .region-food-grid, .dish-grid, .type-grid, .mood-grid, .event-rail, .listing-filter__row{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
}

/* Restaurants / stays / contact — approved listing chrome.
   Scoped to transparent listing pages so details stay put. */
body[data-page="restaurants"][data-header="transparent"] .section-title,
body[data-page="stays"][data-header="transparent"] .section-title,
body[data-page="contact"][data-header="transparent"] .section-title{
  text-align:start;
}
body[data-page="restaurants"][data-header="transparent"] .section-sub,
body[data-page="stays"][data-header="transparent"] .section-sub,
body[data-page="contact"][data-header="transparent"] .section-sub{
  text-align:start;
}
body[data-page="restaurants"][data-header="transparent"] .section,
body[data-page="stays"][data-header="transparent"] .section,
body[data-page="contact"][data-header="transparent"] .section{
  padding-block:56px;
}
body[data-page="restaurants"][data-header="transparent"] .listing-sage,
body[data-page="stays"][data-header="transparent"] .listing-sage,
body[data-page="contact"][data-header="transparent"] .listing-sage{
  background:var(--sage);
}
body[data-page="restaurants"][data-header="transparent"] .section--white,
body[data-page="stays"][data-header="transparent"] .section--white,
body[data-page="contact"][data-header="transparent"] .section--white{
  background:var(--white);
}
body[data-page="restaurants"][data-header="transparent"] .resto-index{
  padding-block:60px;
  margin-block-start:56px;
}
body[data-page="restaurants"][data-header="transparent"] .section + .section{
  margin-block-start:104px;
}
body[data-page="restaurants"][data-header="transparent"] .resto-index-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:60px;
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
  padding-inline-start:calc(56px + 32px);
  padding-inline-end:32px;
  box-sizing:border-box;
}
body[data-page="restaurants"][data-header="transparent"] .resto-index-path{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; text-decoration:none; color:inherit;
}
body[data-page="restaurants"][data-header="transparent"] .resto-index-path:not(:first-child){
  border-inline-start:1px solid rgba(0,59,43,.15);
}
body[data-page="restaurants"][data-header="transparent"] .resto-index-path h3{
  margin:0; display:flex; align-items:center; gap:8px;
  font-size:24px; font-weight:700; line-height:1.35; color:var(--dark);
  transition:color .15s ease;
}
body[data-page="restaurants"][data-header="transparent"] .resto-index-path h3::before{
  content:""; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;
}
body[data-page="restaurants"][data-header="transparent"] .resto-index-path p{
  margin:0;
  font-size:17px; font-weight:400; line-height:1.45; color:rgba(0,59,43,.68);
}
body[data-page="restaurants"][data-header="transparent"] .resto-index-path:hover h3{
  color:var(--gold);
}
body[data-page="restaurants"][data-header="transparent"] .section-link:hover{
  color:var(--gold);
}
body[data-page="restaurants"][data-header="transparent"] .place-card{
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="restaurants"][data-header="transparent"] .place-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
body[data-page="restaurants"][data-header="transparent"] .place-card__img{
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="restaurants"][data-header="transparent"] .place-card:hover .place-card__img{
  transform:none;
}
body[data-page="restaurants"][data-header="transparent"] .place-card__foot{
  justify-content:flex-start;
  gap:8px;
}
body[data-page="restaurants"][data-header="transparent"] .place-card__rate{
  margin-inline-end:auto;
}
body[data-page="restaurants"][data-header="transparent"] .region-food{
  height:auto;
  aspect-ratio:184/300;
  color:var(--white);
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="restaurants"][data-header="transparent"] .region-food:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
body[data-page="restaurants"][data-header="transparent"] .region-food img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="restaurants"][data-header="transparent"] .region-food:hover img{
  transform:none;
}
body[data-page="restaurants"][data-header="transparent"] .region-food div{
  text-align:start;
}
body[data-page="restaurants"][data-header="transparent"] .region-food h3{
  margin:0;
  display:flex; align-items:center; gap:8px;
  font-size:28px; font-weight:700; line-height:1.35;
  color:var(--white);
}
body[data-page="restaurants"][data-header="transparent"] .region-food h3::before{
  content:"";
  width:8px; height:8px;
  background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
}
body[data-page="restaurants"][data-header="transparent"] .region-food p{
  margin:0;
  padding-inline-start:16px;
  font-size:14px; font-weight:400; line-height:1.45;
  opacity:.9;
}
body[data-page="restaurants"][data-header="transparent"] .resto-dishes{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:28px;
  margin-block-start:28px;
}
body[data-page="restaurants"][data-header="transparent"] .resto-dish-side{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
body[data-page="restaurants"][data-header="transparent"] .resto-dish{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  background:var(--sage);
  aspect-ratio:192/154;
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="restaurants"][data-header="transparent"] .resto-dish--feature{
  aspect-ratio:760/456;
}
body[data-page="restaurants"][data-header="transparent"] .resto-dish:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
body[data-page="restaurants"][data-header="transparent"] .resto-dish img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="restaurants"][data-header="transparent"] .resto-dish:hover img{
  transform:none;
}
body[data-page="restaurants"][data-header="transparent"] .resto-dish::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 50%, rgba(3,42,30,.9) 100%), linear-gradient(90deg, rgba(9,42,35,.18), rgba(9,42,35,.18));
}
body[data-page="restaurants"][data-header="transparent"] .resto-dish h3{
  position:absolute; z-index:2;
  inset-inline:16px; inset-block-end:20px;
  margin:0;
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; line-height:1.4;
  color:var(--white);
  text-align:start;
}
body[data-page="restaurants"][data-header="transparent"] .resto-dish--feature h3{
  inset-inline:24px;
  font-size:24px; line-height:1.35;
}
body[data-page="restaurants"][data-header="transparent"] .resto-dish h3::before{
  content:"";
  width:8px; height:8px;
  background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
}
body[data-page="restaurants"][data-header="transparent"] .listing-sage .exp-section-head h2{
  text-align:start;
}
body[data-page="restaurants"][data-header="transparent"] .plan-region{
  position:relative; width:190px;
}
body[data-page="restaurants"][data-header="transparent"] .plan-region.is-enhanced select{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap;
}
body[data-page="restaurants"][data-header="transparent"] .plan-region-trigger{
  width:100%; height:44px; min-width:0;
  background-color:var(--sage); border:1px solid var(--sage); border-radius:var(--r-btn);
  padding-block:0; padding-inline:16px 36px;
  font-size:14px; font-weight:400; color:rgba(0,59,43,.68); text-align:start;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23003B2B' stroke-opacity='.68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:12px 8px; background-position:left 16px center;
}
html[dir="ltr"] body[data-page="restaurants"][data-header="transparent"] .plan-region-trigger{
  background-position:right 16px center;
}
body[data-page="restaurants"][data-header="transparent"] .plan-region-trigger.is-chosen{
  color:var(--dark);
}
body[data-page="restaurants"][data-header="transparent"] .plan-region-menu{
  position:absolute; inset-inline:0; inset-block-start:calc(100% + 6px); z-index:8;
  max-height:240px; overflow:auto;
  margin:0; padding:6px 0; list-style:none;
  background:var(--white); border:1px solid var(--sage); border-radius:var(--r-btn);
  box-shadow:var(--shadow-card); text-align:start;
}
body[data-page="restaurants"][data-header="transparent"] .plan-region-opt{
  display:block; width:100%; border:0; background:transparent; cursor:pointer;
  padding:8px 16px; font-size:14px; font-weight:400; color:var(--dark); text-align:start;
}
body[data-page="restaurants"][data-header="transparent"] .plan-region-opt:hover,
body[data-page="restaurants"][data-header="transparent"] .plan-region-opt.is-active{
  background:var(--sage); color:var(--dark);
}
@media (max-width:960px){
  body[data-page="restaurants"][data-header="transparent"] .resto-index-row{
    grid-template-columns:1fr; gap:16px;
  }
  body[data-page="restaurants"][data-header="transparent"] .resto-index-path:not(:first-child){ border-inline-start:0; padding-inline-start:0; }
  body[data-page="restaurants"][data-header="transparent"] .resto-dishes{
    grid-template-columns:1fr;
  }
  body[data-page="restaurants"][data-header="transparent"] .region-food-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body[data-page="restaurants"][data-header="transparent"] .section + .section{
    margin-block-start:40px;
  }
  body[data-page="restaurants"][data-header="transparent"] .plan-region{
    width:100%;
  }
}
@media (max-width:600px){
  body[data-page="restaurants"][data-header="transparent"] .resto-dish-side{
    grid-template-columns:1fr;
  }
}
/* Hero feature pills — gold diamond before each phrase (stays pattern) */
body[data-page="experiences"][data-header="transparent"] .hero-pills,
body[data-page="events"][data-header="transparent"] .hero-pills,
body[data-page="plan"][data-header="transparent"] .hero-pills,
body[data-page="restaurants"][data-header="transparent"] .hero-pills,
body[data-page="stays"][data-header="transparent"] .hero-pills,
body[data-page="contact"][data-header="transparent"] .hero-pills{
  margin:0;
  width:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 20px;
}
body[data-page="experiences"][data-header="transparent"] .hero-pills span,
body[data-page="events"][data-header="transparent"] .hero-pills span,
body[data-page="plan"][data-header="transparent"] .hero-pills span,
body[data-page="restaurants"][data-header="transparent"] .hero-pills span,
body[data-page="stays"][data-header="transparent"] .hero-pills span,
body[data-page="contact"][data-header="transparent"] .hero-pills span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--sage);
  font-size:15px;
  font-weight:700;
  line-height:1.4;
}
body[data-page="experiences"][data-header="transparent"] .hero-pills span::before,
body[data-page="events"][data-header="transparent"] .hero-pills span::before,
body[data-page="plan"][data-header="transparent"] .hero-pills span::before,
body[data-page="restaurants"][data-header="transparent"] .hero-pills span::before,
body[data-page="stays"][data-header="transparent"] .hero-pills span::before,
body[data-page="contact"][data-header="transparent"] .hero-pills span::before{
  content:"";
  width:8px;
  height:8px;
  background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
}
/* Stays booking bar — keep one row so the white card does not balloon */
body[data-page="stays"][data-header="transparent"] .exp-discovery{
  gap:16px;
}
body[data-page="stays"][data-header="transparent"] .exp-discovery-bar{
  flex-wrap:nowrap;
  align-items:flex-end;
  gap:12px;
}
body[data-page="stays"][data-header="transparent"] .exp-discovery-search{
  flex:1 1 200px;
  width:auto;
  min-width:0;
  height:44px;
  padding-block:0;
  box-sizing:border-box;
}
body[data-page="stays"][data-header="transparent"] .ev-discovery-field{
  flex:0 1 140px;
  min-width:0;
}
body[data-page="stays"][data-header="transparent"] .exp-discovery-bar > .ev-discovery-field:first-of-type{
  flex:0 1 200px;
}
body[data-page="stays"][data-header="transparent"] .ev-discovery-field input{
  width:100%;
}
body[data-page="stays"][data-header="transparent"] .exp-discovery-filter-btn{
  flex-shrink:0;
  height:44px;
  padding:0 28px;
  box-sizing:border-box;
}
body[data-page="stays"][data-header="transparent"] .stay-index{
  padding-block:60px;
  margin-block-start:56px;
}
body[data-page="stays"][data-header="transparent"] .section + .section{
  margin-block-start:104px;
}
body[data-page="stays"][data-header="transparent"] .stay-index-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:60px;
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
  padding-inline-start:calc(56px + 32px);
  padding-inline-end:32px;
  box-sizing:border-box;
}
body[data-page="stays"][data-header="transparent"] .stay-index-path{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; text-decoration:none; color:inherit;
}
body[data-page="stays"][data-header="transparent"] .stay-index-path:not(:first-child){
  border-inline-start:1px solid rgba(0,59,43,.15);
}
/* Shared gold-masked icon for the 3-column highlight rows (stays/restaurants/plan) */
.idx-ico{
  display:block; flex-shrink:0; width:24px; height:24px; margin-block-end:4px;
  background-color:var(--gold);
  -webkit-mask-image:var(--ico); mask-image:var(--ico);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
body[data-page="stays"][data-header="transparent"] .stay-index-path h3{
  margin:0; display:flex; align-items:center; gap:8px;
  font-size:24px; font-weight:700; line-height:1.35; color:var(--dark);
  transition:color .15s ease;
}
body[data-page="stays"][data-header="transparent"] .stay-index-path h3::before{
  content:""; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;
}
body[data-page="stays"][data-header="transparent"] .stay-index-path p{
  margin:0;
  font-size:17px; font-weight:400; line-height:1.45; color:rgba(0,59,43,.68);
}
body[data-page="stays"][data-header="transparent"] .stay-index-path:hover h3{
  color:var(--gold);
}
body[data-page="stays"][data-header="transparent"] .section-link:hover{
  color:var(--gold);
}
body[data-page="stays"][data-header="transparent"] .stay-place-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
body[data-page="stays"][data-header="transparent"] .place-card{
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="stays"][data-header="transparent"] .place-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
body[data-page="stays"][data-header="transparent"] .place-card__img{
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="stays"][data-header="transparent"] .place-card:hover .place-card__img{
  transform:none;
}
body[data-page="stays"][data-header="transparent"] .place-card__foot{
  justify-content:flex-start;
  gap:8px;
}
body[data-page="stays"][data-header="transparent"] .place-card__rate{
  margin-inline-end:auto;
}
/* Stay types — feature (start/right) + 4 grid, same mosaic as regions */
body[data-page="stays"][data-header="transparent"] .stay-type-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);
  gap:20px;
  align-items:stretch;
  margin-block-start:28px;
}
body[data-page="stays"][data-header="transparent"] .stay-type-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:20px;
  min-width:0;
}
body[data-page="stays"][data-header="transparent"] .stay-type-card{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  aspect-ratio:192/154;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding:18px 16px 20px;
  color:var(--white);
  text-align:start;
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="stays"][data-header="transparent"] .stay-type-card--feature{
  aspect-ratio:auto;
  min-height:100%;
  height:auto;
  align-self:stretch;
  padding:22px 24px;
}
body[data-page="stays"][data-header="transparent"] .stay-type-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 26px -6px rgba(3,42,30,.28);
}
body[data-page="stays"][data-header="transparent"] .stay-type-card > img:not(.ico){
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="stays"][data-header="transparent"] .stay-type-card:hover > img:not(.ico){
  transform:none;
}
body[data-page="stays"][data-header="transparent"] .stay-type-card::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 42%, rgba(3,42,30,.92) 100%),
    linear-gradient(90deg, rgba(9,42,35,.28), rgba(9,42,35,.28));
}
body[data-page="stays"][data-header="transparent"] .stay-type-card .ico{
  position:relative; z-index:2;
  width:24px; height:24px; margin-block-end:14px;
  display:block; object-fit:contain;
}
body[data-page="stays"][data-header="transparent"] .stay-type-card--feature .ico{
  width:28px; height:28px; margin-block-end:18px;
}
body[data-page="stays"][data-header="transparent"] .stay-type-card h3{
  position:relative; z-index:2;
  margin:0;
  display:flex; align-items:center; gap:8px;
  font-size:clamp(15px,1.35vw,20px); font-weight:700; line-height:1.35;
  color:var(--white);
}
body[data-page="stays"][data-header="transparent"] .stay-type-card--feature h3{
  font-size:30px; line-height:1.2;
}
body[data-page="stays"][data-header="transparent"] .stay-type-card h3::before{
  content:""; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;
}
body[data-page="stays"][data-header="transparent"] .stay-type-card p{
  position:relative; z-index:2;
  margin:4px 0 0;
  padding-inline-start:16px;
  font-size:13px; font-weight:400; line-height:1.45;
  color:rgba(255,255,255,.9);
}
body[data-page="stays"][data-header="transparent"] .stay-type-card--feature p{
  font-size:15px; margin-block-start:8px;
}
body[data-page="stays"][data-header="transparent"] .stay-booked-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin-block-start:28px;
}
body[data-page="stays"][data-header="transparent"] .stay-booked-card{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  aspect-ratio:202/260;
  box-shadow:var(--shadow-card);
  background:var(--sage);
  color:var(--white);
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="stays"][data-header="transparent"] .stay-booked-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
body[data-page="stays"][data-header="transparent"] .stay-booked-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="stays"][data-header="transparent"] .stay-booked-card:hover img{
  transform:none;
}
body[data-page="stays"][data-header="transparent"] .stay-booked-card::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 50%, rgba(3,42,30,.9) 100%), linear-gradient(90deg, rgba(9,42,35,.18), rgba(9,42,35,.18));
}
body[data-page="stays"][data-header="transparent"] .stay-booked-body{
  position:absolute; z-index:2;
  inset-inline:16px; inset-block-end:20px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  text-align:start;
}
body[data-page="stays"][data-header="transparent"] .stay-booked-num{
  font-size:12px; font-weight:700; color:var(--gold);
}
body[data-page="stays"][data-header="transparent"] .stay-booked-body h3{
  margin:0; font-size:15px; font-weight:700; line-height:1.4; color:var(--white);
}
body[data-page="stays"][data-header="transparent"] .stay-booked-body p,
body[data-page="stays"][data-header="transparent"] .stay-booked-body span{
  margin:0; font-size:12px; line-height:1.4; color:rgba(255,255,255,.78);
}
body[data-page="stays"][data-header="transparent"] .stay-benefit-row{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:60px;
  padding-block:24px;
}
body[data-page="stays"][data-header="transparent"] .stay-benefit-path{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
}
body[data-page="stays"][data-header="transparent"] .stay-benefit-path:not(:first-child){
  border-inline-start:1px solid rgba(0,59,43,.15);
}
body[data-page="stays"][data-header="transparent"] .stay-benefit-path h3{
  margin:0; display:flex; align-items:center; gap:8px;
  font-size:24px; font-weight:700; line-height:1.35; color:var(--dark);
}
body[data-page="stays"][data-header="transparent"] .stay-benefit-path h3::before{
  content:""; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;
}
body[data-page="stays"][data-header="transparent"] .stay-benefit-path p{
  margin:0;
  font-size:17px; font-weight:400; line-height:1.45; color:rgba(0,59,43,.68);
}
@media (max-width:960px){
  body[data-page="stays"][data-header="transparent"] .stay-index-row,
  body[data-page="stays"][data-header="transparent"] .stay-benefit-row{
    grid-template-columns:1fr; gap:16px;
  }
  body[data-page="stays"][data-header="transparent"] .stay-index-path:not(:first-child),
  body[data-page="stays"][data-header="transparent"] .stay-benefit-path:not(:first-child){ border-inline-start:0; padding-inline-start:0; }
  body[data-page="stays"][data-header="transparent"] .stay-place-grid,
  body[data-page="stays"][data-header="transparent"] .stay-booked-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body[data-page="stays"][data-header="transparent"] .stay-type-layout{
    grid-template-columns:1fr;
  }
  body[data-page="stays"][data-header="transparent"] .stay-type-card--feature{
    aspect-ratio:192/154; min-height:0;
  }
  body[data-page="stays"][data-header="transparent"] .stay-type-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
  }
  body[data-page="stays"][data-header="transparent"] .section + .section{
    margin-block-start:40px;
  }
}
@media (max-width:600px){
  body[data-page="stays"][data-header="transparent"] .stay-place-grid,
  body[data-page="stays"][data-header="transparent"] .stay-booked-grid,
  body[data-page="stays"][data-header="transparent"] .stay-type-grid{
    grid-template-columns:1fr;
  }
}
/* Contact — Figma 859:24 / 859:61 / 859:76 (hero + footer untouched) */
body[data-page="contact"][data-header="transparent"] .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
body[data-page="contact"][data-header="transparent"] .contact-main{
  padding-block:56px;
}
body[data-page="contact"][data-header="transparent"] .contact-heading{
  margin:0;
  text-align:start;
}
body[data-page="contact"][data-header="transparent"] .contact-panel{
  display:grid;
  grid-template-columns:minmax(0,490px) minmax(0,540px);
  justify-content:space-between;
  gap:40px;
  background:var(--white);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  padding:54px 68px;
  box-sizing:border-box;
}
body[data-page="contact"][data-header="transparent"] .contact-info-col,
body[data-page="contact"][data-header="transparent"] .contact-form-col{
  display:flex; flex-direction:column; align-items:stretch; gap:34px;
  min-width:0;
}
body[data-page="contact"][data-header="transparent"] .contact-cards{
  display:flex; flex-direction:column; gap:18px; width:100%;
}
body[data-page="contact"][data-header="transparent"] .contact-card{
  display:flex; align-items:center; gap:12px;
  min-height:86px; height:86px;
  padding:14px 18px;
  background:var(--sage);
  border-radius:var(--r-card);
  box-shadow:none;
  box-sizing:border-box;
}
body[data-page="contact"][data-header="transparent"] .contact-card__icon{
  flex:0 0 30px; width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gold);
}
body[data-page="contact"][data-header="transparent"] .contact-card__main{
  flex:1 1 auto; min-width:0; text-align:start;
}
body[data-page="contact"][data-header="transparent"] .contact-card__main h3{
  margin:0; font-size:16px; font-weight:700; line-height:1.2; color:var(--dark);
}
body[data-page="contact"][data-header="transparent"] .contact-card__main p{
  margin:4px 0 0; font-size:16px; font-weight:500; line-height:1.2; color:var(--dark);
}
body[data-page="contact"][data-header="transparent"] .contact-card__note{
  flex:0 0 170px; width:170px; margin:0;
  font-size:13px; font-weight:400; line-height:1.45;
  color:rgba(0,59,43,.68); text-align:start;
}
body[data-page="contact"][data-header="transparent"] .contact-form{
  display:flex; flex-direction:column; gap:18px; width:100%;
}
body[data-page="contact"][data-header="transparent"] .contact-form input,
body[data-page="contact"][data-header="transparent"] .contact-form select,
body[data-page="contact"][data-header="transparent"] .contact-form textarea{
  width:100%; box-sizing:border-box;
  height:58px;
  padding:0 20px;
  background:var(--white);
  border:1px solid rgba(0,59,43,.15);
  border-radius:var(--r-btn);
  font-size:15px; font-weight:400; color:var(--dark); text-align:start;
}
body[data-page="contact"][data-header="transparent"] .contact-form textarea{
  height:120px; padding-block:18px; resize:vertical;
}
body[data-page="contact"][data-header="transparent"] .contact-form input::placeholder,
body[data-page="contact"][data-header="transparent"] .contact-form textarea::placeholder{
  color:rgba(0,59,43,.68);
}
body[data-page="contact"][data-header="transparent"] .contact-form select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  color:rgba(0,59,43,.68);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23003B2B' stroke-opacity='.68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:12px 8px;
  background-position:left 16px center;
  padding-inline:20px 40px;
}
html[dir="ltr"] body[data-page="contact"][data-header="transparent"] .contact-form select{
  background-position:right 16px center;
  padding-inline:40px 20px;
}
body[data-page="contact"][data-header="transparent"] .contact-form input:focus,
body[data-page="contact"][data-header="transparent"] .contact-form select:focus,
body[data-page="contact"][data-header="transparent"] .contact-form textarea:focus{
  outline:2px solid var(--gold); outline-offset:1px;
}
body[data-page="contact"][data-header="transparent"] .contact-type{
  position:relative; width:100%; display:block;
}
body[data-page="contact"][data-header="transparent"] .contact-type.is-enhanced select{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap;
}
body[data-page="contact"][data-header="transparent"] .contact-type .plan-region-trigger{
  width:100%; height:58px; min-width:0; box-sizing:border-box;
  background-color:var(--white);
  border:1px solid rgba(0,59,43,.15);
  border-radius:var(--r-btn);
  padding-block:0; padding-inline:20px 40px;
  font-size:15px; font-weight:400; color:rgba(0,59,43,.68); text-align:start;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23003B2B' stroke-opacity='.68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:12px 8px; background-position:left 16px center;
}
html[dir="ltr"] body[data-page="contact"][data-header="transparent"] .contact-type .plan-region-trigger{
  background-position:right 16px center;
  padding-inline:40px 20px;
}
body[data-page="contact"][data-header="transparent"] .contact-type .plan-region-trigger.is-chosen{
  color:var(--dark);
}
body[data-page="contact"][data-header="transparent"] .contact-type .plan-region-trigger:focus{
  outline:2px solid var(--gold); outline-offset:1px;
}
body[data-page="contact"][data-header="transparent"] .contact-type .plan-region-menu{
  position:absolute; inset-inline:0; inset-block-start:calc(100% + 6px); z-index:12;
  max-height:240px; overflow:auto;
  margin:0; padding:6px 0; list-style:none;
  background:var(--white); border:1px solid rgba(0,59,43,.15); border-radius:var(--r-btn);
  box-shadow:var(--shadow-card); text-align:start;
}
body[data-page="contact"][data-header="transparent"] .contact-type .plan-region-opt{
  display:block; width:100%; border:0; background:transparent; cursor:pointer;
  padding:12px 20px; font-size:15px; font-weight:400; color:var(--dark); text-align:start;
}
body[data-page="contact"][data-header="transparent"] .contact-type .plan-region-opt:hover,
body[data-page="contact"][data-header="transparent"] .contact-type .plan-region-opt.is-active{
  background:var(--sage); color:var(--dark);
}
body[data-page="contact"][data-header="transparent"] .contact-submit{
  width:100%; height:58px;
  border:none; border-radius:var(--r-btn);
  background:var(--gold); color:var(--dark);
  font-size:18px; font-weight:700; cursor:pointer;
  transition:opacity .16s ease;
}
body[data-page="contact"][data-header="transparent"] .contact-submit:hover{ opacity:.92; }
body[data-page="contact"][data-header="transparent"] .contact-help-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-block-start:44px;
}
body[data-page="contact"][data-header="transparent"] .contact-help-card{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  min-height:162px; padding:24px 20px 20px;
  background:var(--sage);
  border-radius:var(--r-card);
  box-shadow:none;
  text-align:center; text-decoration:none; color:inherit;
  box-sizing:border-box;
  transition:transform .2s ease, background-color .2s ease;
}
body[data-page="contact"][data-header="transparent"] .contact-help-card:hover{
  transform:translateY(-2px);
}
body[data-page="contact"][data-header="transparent"] .contact-help-card__icon{
  color:var(--gold); font-size:38px; font-weight:700; line-height:1;
}
body[data-page="contact"][data-header="transparent"] .contact-help-card h3{
  margin:0; font-size:20px; font-weight:700; line-height:1.2; color:var(--dark);
}
body[data-page="contact"][data-header="transparent"] .contact-help-card p{
  margin:0; font-size:15px; font-weight:400; line-height:1.45; color:rgba(0,59,43,.68);
}
body[data-page="contact"][data-header="transparent"] .contact-note{
  display:flex; align-items:flex-start; gap:16px;
  margin-block-start:40px;
  min-height:132px;
  padding:34px 40px;
  background:var(--sage);
  border-radius:var(--r-card);
  box-shadow:none;
  box-sizing:border-box;
}
body[data-page="contact"][data-header="transparent"] .contact-note__icon{
  flex-shrink:0; color:var(--gold); font-size:24px; line-height:1; margin-block-start:2px;
}
body[data-page="contact"][data-header="transparent"] .contact-note__copy{
  text-align:start; min-width:0;
}
body[data-page="contact"][data-header="transparent"] .contact-note__copy h3{
  margin:0; font-size:20px; font-weight:700; line-height:1.2; color:var(--dark);
}
body[data-page="contact"][data-header="transparent"] .contact-note__copy p{
  margin:8px 0 0; font-size:16px; font-weight:400; line-height:1.55; color:rgba(0,59,43,.68);
}
@media (max-width:1100px){
  body[data-page="contact"][data-header="transparent"] .contact-panel{
    grid-template-columns:1fr; padding:40px 32px; gap:48px;
  }
  body[data-page="contact"][data-header="transparent"] .contact-help-row{
    grid-template-columns:1fr; justify-content:stretch;
  }
  body[data-page="contact"][data-header="transparent"] .contact-card{
    height:auto; min-height:86px; flex-wrap:wrap;
  }
  body[data-page="contact"][data-header="transparent"] .contact-card__note{
    flex:1 1 100%; width:auto; padding-inline-start:42px;
  }
  body[data-page="contact"][data-header="transparent"] .contact-note{ padding:28px 24px; }
}

/* Account — Claude account structure, this site's rhythm + palette */
body[data-page="account"][data-header="solid"] .account-page{
  padding-block:48px 80px;
  background:var(--sage);
}
body[data-page="account"][data-header="solid"] .account-page .crumb{
  margin:0; color:rgba(0,59,43,.68); font-size:14px; text-align:start;
}
body[data-page="account"][data-header="solid"] .account-page-title{
  margin:12px 0 0;
  font-size:var(--fs-h2); font-weight:700; line-height:1.2; color:var(--dark);
  text-align:start;
}
body[data-page="account"][data-header="solid"] .account-page-title::after{
  content:""; display:block; width:70px; height:2px; margin-block-start:8px;
  background:var(--gold); border-radius:1px;
}
body[data-page="account"][data-header="solid"] .account-profile{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin-block-start:28px;
  padding:28px 32px;
  background:var(--white); border-radius:var(--r-card);
}
body[data-page="account"][data-header="solid"] .account-avatar{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--sage); color:var(--dark);
  font-size:22px; font-weight:800;
}
body[data-page="account"][data-header="solid"] .account-profile-copy{
  flex:1 1 200px; min-width:0; text-align:start;
}
body[data-page="account"][data-header="solid"] .account-profile-copy h2{
  margin:0; font-size:24px; font-weight:700; line-height:1.3; color:var(--dark);
}
body[data-page="account"][data-header="solid"] .account-profile-copy p{
  margin:4px 0 0; font-size:14px; color:rgba(0,59,43,.68);
}
body[data-page="account"][data-header="solid"] .account-logout{
  display:inline-flex; align-items:center; justify-content:center;
  margin-block-start:14px;
  font-size:14px; font-weight:700; color:var(--dark); text-decoration:none;
  padding:10px 16px; border-radius:var(--r-btn);
  border:1px solid rgba(0,59,43,.15); background:var(--white);
  transition:color .15s ease, border-color .15s ease;
}
body[data-page="account"][data-header="solid"] .account-logout:hover{
  color:var(--gold); border-color:var(--gold);
}
body[data-page="account"][data-header="solid"] .account-summary{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
  margin-block-start:24px;
}
body[data-page="account"][data-header="solid"] .account-summary-path{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:24px 22px;
  background:var(--white); border-radius:var(--r-card);
  text-decoration:none; color:inherit; text-align:start;
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="account"][data-header="solid"] .account-summary-path:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 24px -6px rgba(3,42,30,.18);
}
body[data-page="account"][data-header="solid"] .account-summary-path h3{
  margin:0; display:flex; align-items:center; gap:8px;
  font-size:20px; font-weight:700; line-height:1.35; color:var(--dark);
  transition:color .15s ease;
}
body[data-page="account"][data-header="solid"] .account-summary-path h3::before{
  content:""; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;
}
body[data-page="account"][data-header="solid"] .account-summary-path:hover h3{ color:var(--gold); }
body[data-page="account"][data-header="solid"] .account-summary-path p{
  margin:0; padding-inline-start:16px;
  font-size:15px; color:rgba(0,59,43,.68);
}
body[data-page="account"][data-header="solid"] .account-block{
  margin-block-start:40px;
  padding:32px;
  background:var(--white); border-radius:var(--r-card);
}
body[data-page="account"][data-header="solid"] .account-block .exp-section-head{
  margin-block-end:24px;
}
body[data-page="account"][data-header="solid"] .account-block .view-all:hover{ color:var(--gold); }
body[data-page="account"][data-header="solid"] .account-route-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
}
body[data-page="account"][data-header="solid"] .account-route-card{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:0;
  padding:0;
  overflow:hidden;
  background:var(--sage); border-radius:var(--r-card);
  text-decoration:none; color:inherit; text-align:start;
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="account"][data-header="solid"] .account-route-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 24px -6px rgba(3,42,30,.18);
}
body[data-page="account"][data-header="solid"] .account-route-photo{
  min-height:100%;
  overflow:hidden;
}
body[data-page="account"][data-header="solid"] .account-route-photo img{
  width:100%; height:100%; min-height:148px; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="account"][data-header="solid"] .account-route-card:hover .account-route-photo img{
  transform:none;
}
body[data-page="account"][data-header="solid"] .account-route-body{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:20px 22px;
}
body[data-page="account"][data-header="solid"] .account-route-badge{
  font-size:12px; font-weight:700; color:var(--gold); letter-spacing:.02em;
}
body[data-page="account"][data-header="solid"] .account-route-card h3{
  margin:0; font-size:18px; font-weight:700; line-height:1.35; color:var(--dark);
}
body[data-page="account"][data-header="solid"] .account-route-card p{
  margin:0; font-size:14px; line-height:1.5; color:rgba(0,59,43,.68);
}
body[data-page="account"][data-header="solid"] .account-route-meta{
  margin-block-start:4px; font-size:13px; font-weight:500; color:var(--dark);
}
body[data-page="account"][data-header="solid"] .account-booking-list{
  display:flex; flex-direction:column; gap:16px;
}
body[data-page="account"][data-header="solid"] .account-booking-card{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:14px 20px 14px 14px;
  background:var(--sage); border-radius:var(--r-card);
  transition:transform .3s ease, box-shadow .3s ease;
}
body[data-page="account"][data-header="solid"] .account-booking-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 26px -6px rgba(3,42,30,.28);
}
body[data-page="account"][data-header="solid"] .account-booking-photo{
  width:88px; height:88px; flex-shrink:0;
  border-radius:12px; overflow:hidden;
}
body[data-page="account"][data-header="solid"] .account-booking-photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="account"][data-header="solid"] .account-booking-card:hover .account-booking-photo img{
  transform:none;
}
body[data-page="account"][data-header="solid"] .account-booking-copy{
  flex:1 1 200px; text-align:start; min-width:0;
}
body[data-page="account"][data-header="solid"] .account-booking-kind{
  display:block; font-size:12px; font-weight:700; color:var(--gold);
}
body[data-page="account"][data-header="solid"] .account-booking-copy h3{
  margin:6px 0 0; font-size:18px; font-weight:700; line-height:1.35; color:var(--dark);
  transition:color .15s ease;
}
body[data-page="account"][data-header="solid"] .account-booking-card:hover .account-booking-copy h3{
  color:var(--gold);
}
body[data-page="account"][data-header="solid"] .account-booking-copy p{
  margin:4px 0 0; font-size:14px; color:rgba(0,59,43,.68);
}
body[data-page="account"][data-header="solid"] .account-booking-actions{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
body[data-page="account"][data-header="solid"] .account-status{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; padding:0 14px;
  border-radius:999px;
  background:var(--gold); color:var(--dark);
  font-size:13px; font-weight:700;
  transition:opacity .15s ease;
}
body[data-page="account"][data-header="solid"] .account-booking-card:hover .account-status{
  opacity:.92;
}
body[data-page="account"][data-header="solid"] .account-booking-actions a{
  font-size:14px; font-weight:600; color:var(--dark); text-decoration:none;
  transition:color .15s ease;
}
body[data-page="account"][data-header="solid"] .account-booking-actions a:hover,
body[data-page="account"][data-header="solid"] .account-booking-card:hover .account-booking-actions a{
  color:var(--gold);
}
body[data-page="account"][data-header="solid"] .account-support{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-block-start:40px;
  padding:32px;
  background:var(--white); border-radius:var(--r-card);
  text-align:start;
}
body[data-page="account"][data-header="solid"] .account-support p{
  margin:10px 0 0; max-width:48ch; font-size:15px; line-height:1.5; color:rgba(0,59,43,.68);
}
body[data-page="account"][data-header="solid"] .account-support .btn-gold{
  flex-shrink:0; min-width:180px; height:52px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700;
}
@media (max-width:900px){
  body[data-page="account"][data-header="solid"] .account-summary,
  body[data-page="account"][data-header="solid"] .account-route-grid{
    grid-template-columns:1fr;
  }
  body[data-page="account"][data-header="solid"] .account-route-card{
    grid-template-columns:1fr;
  }
  body[data-page="account"][data-header="solid"] .account-route-photo img{
    min-height:160px;
  }
  body[data-page="account"][data-header="solid"] .account-support{
    flex-direction:column; align-items:flex-start;
  }
  body[data-page="account"][data-header="solid"] .account-support .btn-gold{ width:100%; }
}



/* ============================================================
   Destination template (from Abha / Figma 978:2). Shared across destination pages.
   ============================================================ */
body[data-page="destination"][data-header="transparent"]{
  background:var(--white);
}
body[data-page="destination"][data-header="transparent"] .dest-hero{
  min-height:868px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  padding-block-start:clamp(100px,12vw,175px);
  padding-block-end:72px;
  color:var(--white);
}
/* Dark wash behind copy on the start side (right in RTL, left in LTR). */
body[data-page="destination"][data-header="transparent"] .dest-hero .listing-hero__overlay{
  background:linear-gradient(
    to left,
    rgba(4,41,31,.62) 0%,
    rgba(4,41,31,.55) 45%,
    rgba(4,41,31,0) 100%
  );
  z-index:1;
  opacity:1;
}
html[dir="ltr"] body[data-page="destination"][data-header="transparent"] .dest-hero .listing-hero__overlay{
  background:linear-gradient(
    to right,
    rgba(4,41,31,.62) 0%,
    rgba(4,41,31,.55) 45%,
    rgba(4,41,31,0) 100%
  );
}
body[data-page="destination"][data-header="transparent"] .dest-hero .listing-hero__bg{
  opacity:.58;
}
/* Same container rhythm as listing heroes — no floating narrow column. */
body[data-page="destination"][data-header="transparent"] .dest-hero .listing-hero__copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
  padding-block:0 24px;
  text-align:start;
}
body[data-page="destination"][data-header="transparent"] .dest-hero .crumb{
  font-size:18px;
  font-weight:600;
  margin:0 0 24px;
}
body[data-page="destination"][data-header="transparent"] .dest-hero h1{
  margin:0 0 12px;
  font-size:clamp(48px,5.4vw,78px);
  line-height:1.2;
  font-weight:800;
}
body[data-page="destination"][data-header="transparent"] .dest-hero .listing-hero__sub{
  margin:0 0 20px;
  font-size:clamp(22px,2.6vw,36px);
  font-weight:700;
  line-height:1.35;
  opacity:1;
  max-width:none;
  white-space:nowrap;
}
body[data-page="destination"][data-header="transparent"] .dest-hero__desc{
  margin:0 0 40px;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.55;
  color:var(--white);
  opacity:.92;
  max-width:38ch;
}
body[data-page="destination"][data-header="transparent"] .dest-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  margin:0;
}
body[data-page="destination"][data-header="transparent"] .dest-hero__actions .btn{
  min-width:207px;
  height:56px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:600;
  border-radius:8px;
  text-decoration:none;
  border:none;
  box-shadow:0 8px 9px rgba(0,0,0,.18);
}
body[data-page="destination"][data-header="transparent"] .dest-hero__actions .btn-gold{
  color:var(--white);
}
body[data-page="destination"][data-header="transparent"] .dest-facts{
  position:relative;
  z-index:3;
  margin:-48px auto 0;
  width:min(var(--container), calc(100% - 48px));
  background:var(--white);
  color:var(--dark);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:0;
  padding:20px 12px;
}
body[data-page="destination"][data-header="transparent"] .dest-fact{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:8px 16px;
  text-align:start;
  border-inline-end:1px solid rgba(0,59,43,.1);
}
body[data-page="destination"][data-header="transparent"] .dest-fact:last-child{
  border-inline-end:none;
}
body[data-page="destination"][data-header="transparent"] .dest-fact span{
  font-size:clamp(14px,1.2vw,18px);
  font-weight:700;
  color:var(--dark);
  line-height:1.35;
  white-space:nowrap;
}
body[data-page="destination"][data-header="transparent"] .dest-fact-ico{
  width:36px;
  height:36px;
  display:block;
  flex-shrink:0;
  margin-block-end:0;
  background-color:var(--gold);
  -webkit-mask-image:var(--ico); mask-image:var(--ico);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
body[data-page="destination"][data-header="transparent"] .dest-head{
  text-align:start;
  margin-block-end:44px;
}
body[data-page="destination"][data-header="transparent"] .dest-eyebrow{
  margin:0 0 12px;
  font-size:17px;
  font-weight:600;
  color:var(--gold);
  line-height:1.35;
}
body[data-page="destination"][data-header="transparent"] .dest-head .section-title{
  margin:0;
}
body[data-page="destination"][data-header="transparent"] .dest-lead{
  margin:8px 0 0;
  font-size:19px;
  line-height:1.45;
  color:rgba(0,59,43,.68);
  max-width:70ch;
}
body[data-page="destination"][data-header="transparent"] .dest-why,
body[data-page="destination"][data-header="transparent"] .dest-day{
  background:var(--white);
  padding-block:70px;
}
/* White band under the floating facts card so sage never peeks through */
body[data-page="destination"][data-header="transparent"] .dest-why{
  padding-block-start:56px;
}
body[data-page="destination"][data-header="transparent"] .dest-why .dest-head,
body[data-page="destination"][data-header="transparent"] .dest-day .dest-head{
  margin-block-end:32px;
}
body[data-page="destination"][data-header="transparent"] .dest-exps,
body[data-page="destination"][data-header="transparent"] .dest-near{
  background:var(--sage);
  padding-block:76px;
}
/* CTA on white (after near sage) + space before footer — same rhythm as stays */
body[data-page="destination"][data-header="transparent"] .dest-cta-sec{
  background:var(--white);
  padding-block:56px 80px;
}
body[data-page="destination"][data-header="transparent"] .dest-why__grid,
body[data-page="destination"][data-header="transparent"] .dest-day__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
body[data-page="destination"][data-header="transparent"] .dest-why-card{
  background:var(--white);
  border:1.5px solid rgba(0,59,43,.12);
  border-radius:16px;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.12);
  padding:24px 28px 28px;
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  text-align:start;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body[data-page="destination"][data-header="transparent"] .dest-why-card:hover{
  transform:translateY(-3px);
  border-color:rgba(200,154,56,.45);
  box-shadow:0 14px 28px -6px rgba(3,42,30,.16);
}
body[data-page="destination"][data-header="transparent"] .dest-why-card__ico{
  width:56px;
  height:56px;
  border-radius:8px;
  border:1.5px solid var(--dark);
  background:var(--sage);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
body[data-page="destination"][data-header="transparent"] .dest-why-card__ico img{
  display:block;
  width:28px;
  height:28px;
}
body[data-page="destination"][data-header="transparent"] .dest-why-card h3{
  margin:0;
  font-size:24px;
  font-weight:700;
  color:var(--dark);
  line-height:1.35;
}
body[data-page="destination"][data-header="transparent"] .dest-why-card p{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:rgba(0,59,43,.72);
  text-wrap:pretty;
  flex:1;
}
body[data-page="destination"][data-header="transparent"] .dest-why-card__accent{
  display:block;
  width:28px;
  height:3px;
  border-radius:2px;
  background:var(--gold);
  margin-block-start:4px;
}
body[data-page="destination"][data-header="transparent"] .dest-exps__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
body[data-page="destination"][data-header="transparent"] .dest-near__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
body[data-page="destination"][data-header="transparent"] .dest-card{
  position:relative;
  display:block;
  height:330px;
  border-radius:16px;
  overflow:hidden;
  background:var(--dark);
  box-shadow:0 8px 20px -4px rgba(0,0,0,.28);
  text-decoration:none;
  color:var(--white);
  transition:transform .25s ease, box-shadow .25s ease;
}
body[data-page="destination"][data-header="transparent"] .dest-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 28px -6px rgba(0,0,0,.32);
}
body[data-page="destination"][data-header="transparent"] .dest-card--near{
  height:260px;
}
body[data-page="destination"][data-header="transparent"] .dest-card > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
body[data-page="destination"][data-header="transparent"] .dest-card:hover > img{
  transform:none;
}
body[data-page="destination"][data-header="transparent"] .dest-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 50%, rgba(3,42,30,.9) 100%),
    linear-gradient(90deg, rgba(9,42,35,.18), rgba(9,42,35,.18));
}
body[data-page="destination"][data-header="transparent"] .dest-card__body{
  position:absolute;
  z-index:2;
  inset-inline:0;
  inset-block-end:0;
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  text-align:start;
}
body[data-page="destination"][data-header="transparent"] .dest-card--near .dest-card__body{
  padding:18px 20px;
}
body[data-page="destination"][data-header="transparent"] .dest-card__body h3{
  margin:0;
  font-size:21px;
  font-weight:700;
  line-height:1.35;
  color:var(--white);
}
body[data-page="destination"][data-header="transparent"] .dest-card--near .dest-card__body h3{
  font-size:19px;
}
body[data-page="destination"][data-header="transparent"] .dest-card__body p{
  margin:0;
  font-size:15px;
  line-height:1.35;
  color:rgba(255,255,255,.78);
}
body[data-page="destination"][data-header="transparent"] .dest-card--near .dest-card__body p{
  font-size:14px;
}
body[data-page="destination"][data-header="transparent"] .dest-card__accent{
  display:block;
  width:28px;
  height:3px;
  border-radius:2px;
  background:var(--gold);
}
body[data-page="destination"][data-header="transparent"] .dest-day__grid{
  position:relative;
}
body[data-page="destination"][data-header="transparent"] .dest-day-card{
  position:relative;
  z-index:1;
  background:var(--white);
  border:1.5px solid rgba(0,59,43,.12);
  border-radius:16px;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.12);
  padding:24px 28px 28px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  text-align:start;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body[data-page="destination"][data-header="transparent"] .dest-day-card:hover{
  transform:translateY(-3px);
  border-color:rgba(200,154,56,.45);
  box-shadow:0 14px 28px -6px rgba(3,42,30,.16);
}
/* One timeline through badge centers (1 → 2 → 3). Badges centered so the path is clean. */
@media (min-width:901px){
  body[data-page="destination"][data-header="transparent"] .dest-day__grid::before{
    content:"";
    position:absolute;
    top:45px;
    inset-inline:calc(100% / 6);
    height:2px;
    background:rgba(200,154,56,.45);
    z-index:0;
    pointer-events:none;
  }
}
body[data-page="destination"][data-header="transparent"] .dest-day-card__num{
  position:relative;
  z-index:1;
  align-self:center;
  width:42px;
  height:42px;
  border-radius:21px;
  background:var(--dark);
  color:var(--gold);
  font-size:22px;
  font-weight:700;
  line-height:42px;
  text-align:center;
  flex-shrink:0;
}
body[data-page="destination"][data-header="transparent"] .dest-day-card__when{
  margin:4px 0 0;
  font-size:16px;
  font-weight:600;
  color:var(--gold);
  line-height:1.35;
}
body[data-page="destination"][data-header="transparent"] .dest-day-card h3{
  margin:0;
  font-size:24px;
  font-weight:700;
  color:var(--dark);
  line-height:1.35;
}
body[data-page="destination"][data-header="transparent"] .dest-day-card p:not(.dest-day-card__when){
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:rgba(0,59,43,.72);
  text-wrap:pretty;
  flex:1;
}
body[data-page="destination"][data-header="transparent"] .dest-day-card__accent{
  display:block;
  width:28px;
  height:3px;
  border-radius:2px;
  background:var(--gold);
  margin-block-start:4px;
}
/* Abha CTA — reuses .exp-cta shell (stays/experiences sizes). Only dual-button row is extra. */
body[data-page="destination"][data-header="transparent"] .dest-banner__actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:center;
}
body[data-page="destination"][data-header="transparent"] .dest-banner__ghost{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  color:var(--white);
  cursor:pointer;
}
body[data-page="destination"][data-header="transparent"] .dest-banner__ghost:hover{
  background:rgba(255,255,255,.2);
  opacity:1;
}
body[data-page="destination"][data-header="transparent"] .dest-banner__ghost.is-loved{
  background:rgba(200,154,56,.28);
  border-color:var(--gold);
}
@media (max-width:1100px){
  body[data-page="destination"][data-header="transparent"] .dest-near__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body[data-page="destination"][data-header="transparent"] .dest-fact__div{
    display:none;
  }
}
@media (max-width:900px){
  body[data-page="destination"][data-header="transparent"] .dest-hero{
    min-height:640px;
    padding-block-end:48px;
  }
  body[data-page="destination"][data-header="transparent"] .dest-hero .listing-hero__sub{
    white-space:normal;
  }
  body[data-page="destination"][data-header="transparent"] .dest-hero__desc{
    max-width:none;
  }
  body[data-page="destination"][data-header="transparent"] .dest-facts{
    flex-wrap:wrap;
    margin-block-start:-32px;
    padding:16px 8px;
  }
  body[data-page="destination"][data-header="transparent"] .dest-fact{
    flex:1 1 40%;
    border-inline-end:none;
    border-block-end:1px solid rgba(0,59,43,.08);
    padding-block:14px;
  }
  body[data-page="destination"][data-header="transparent"] .dest-fact:nth-last-child(-n+2){
    border-block-end:none;
  }
  body[data-page="destination"][data-header="transparent"] .dest-why__grid,
  body[data-page="destination"][data-header="transparent"] .dest-day__grid{
    grid-template-columns:1fr;
  }
  body[data-page="destination"][data-header="transparent"] .dest-exps__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:600px){
  body[data-page="destination"][data-header="transparent"] .dest-near__grid,
  body[data-page="destination"][data-header="transparent"] .dest-exps__grid{
    grid-template-columns:1fr;
  }
  body[data-page="destination"][data-header="transparent"] .dest-hero__actions .btn,
  body[data-page="destination"][data-header="transparent"] .dest-banner__actions .exp-cta-btn{
    width:100%;
  }
  body[data-page="destination"][data-header="transparent"] .dest-fact{
    flex:1 1 100%;
    justify-content:flex-start;
    border-block-end:1px solid rgba(0,59,43,.08);
  }
  body[data-page="destination"][data-header="transparent"] .dest-fact:last-child{
    border-block-end:none;
  }
  body[data-page="destination"][data-header="transparent"] .dest-fact span{
    white-space:normal;
  }
}

/* ============================================================
   Stay Details — Figma 804:2 (node 399-775), measured sizes.
   Gallery physical LTR (thumbs left / main right) matches frame.
   ============================================================ */
.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;
}

.sd-gallery{
  background:var(--grad);
  padding-block:40px 48px;
}
.sd-gallery__inner{
  direction:ltr;
  display:grid;
  grid-template-columns:250px minmax(0,1026px);
  gap:20px;
  align-items:start;
  justify-content:center;
  max-width:1296px;
  margin-inline:auto;
}
.sd-gallery__thumbs{
  display:flex;
  flex-direction:column;
  gap:18px;
  width:250px;
}
.sd-gallery__thumb{
  display:block; width:250px; height:126px; padding:0; border:2px solid transparent;
  border-radius:8px; overflow:hidden; cursor:pointer; background:transparent;
  transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.sd-gallery__thumb:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px -6px rgba(3,42,30,.28);
}
.sd-gallery__thumb.is-active{ border-color:var(--gold); }
.sd-gallery__thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.sd-gallery__thumb:hover img{ transform:none; }
.sd-gallery__all{
  display:flex; align-items:center; justify-content:center;
  width:250px; height:36px; border-radius:8px;
  background:var(--dark); color:var(--white);
  font-size:13px; font-weight:700; text-align:center;
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
.sd-gallery__all:hover{ opacity:1; transform:translateY(-2px); background:var(--gold); color:var(--dark); }
.sd-gallery__main{
  position:relative; width:100%; height:460px;
  border-radius:16px; overflow:hidden; background:var(--dark);
}
.sd-gallery__photo{
  display:block; width:100%; height:100%; object-fit:cover;
}
.sd-gallery__controls{
  position:absolute; inset-inline:0; inset-block-end:18px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  pointer-events:none;
}
.sd-gallery__nav,
.sd-gallery__count{ pointer-events:auto; }
.sd-gallery__nav{
  width:34px; height:34px; border:none; border-radius:8px;
  background:var(--dark); color:var(--white);
  font-size:14px; font-weight:700; line-height:1; cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.sd-gallery__nav:hover{
  transform:translateY(-2px);
  background:var(--gold); color:var(--dark);
}
.sd-gallery__count{
  min-width:150px; height:32px; padding-inline:16px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:16px; background:rgba(0,59,43,.9);
  color:var(--white); font-size:12px; font-weight:700;
}

/* Overview — content start (right), booking end (left) */
.sd-overview{
  background:var(--white);
  padding-block:72px;
}
.sd-overview__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  max-width:1284px;
  padding-inline:clamp(24px,5vw,72px);
  margin-inline:auto;
}
.sd-overview__info{
  flex:1 1 780px;
  max-width:780px;
  text-align:start;
}
.sd-overview__crumb{
  margin:0; font-size:14px; font-weight:500; color:var(--gold);
}
.sd-overview__title-row{
  display:flex; align-items:flex-start; gap:16px;
  margin-block-start:28px; flex-wrap:wrap;
}
.sd-overview__info h1{
  margin:0; font-size:clamp(32px,3.2vw,46px); font-weight:800;
  line-height:1.35; color:var(--dark);
}
.sd-overview__badge{
  display:inline-flex; align-items:center; justify-content:center;
  margin-block-start:10px; min-width:56px; height:28px;
  border-radius:6px; background:transparent;
  color:var(--gold); font-size:13px; font-weight:700;
}
.sd-overview__loc,
.sd-overview__rate{
  margin:0; color:var(--gold); font-size:15px; font-weight:500;
}
.sd-overview__loc{ margin-block-start:18px; }
.sd-overview__rate{ margin-block-start:8px; }
.sd-overview__desc{
  margin:20px 0 0; max-width:540px;
  font-size:18px; line-height:26px; font-weight:500;
  color:rgba(0,59,43,.68);
}
.sd-features{
  list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:24px 40px;
}
.sd-features li{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:135px; text-align:center;
  font-size:14px; font-weight:500; color:var(--dark);
}
.sd-features img{ display:block; width:24px; height:auto; }

.sd-book{
  flex:0 0 360px; width:360px; height:420px;
  background:var(--white); border-radius:16px;
  box-shadow:var(--shadow-card);
  padding:24px 28px 20px;
  display:flex; flex-direction:column; align-items:stretch;
  text-align:start;
  transition:transform .3s ease, box-shadow .3s ease;
}
.sd-book:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 32px -8px rgba(3,42,30,.22);
}
.sd-book__from{
  margin:0; font-size:14px; font-weight:500; color:var(--dark);
}
.sd-book__price{
  margin:4px 0 0; display:flex; align-items:baseline; gap:10px;
  color:var(--dark);
}
.sd-book__price b{
  font-size:42px; font-weight:800; line-height:1.2;
}
.sd-book__price span{
  font-size:15px; font-weight:500;
}
.sd-book__field{ display:block; margin-block-start:12px; }
.sd-book__field:first-of-type{ margin-block-start:18px; }
.sd-book__field input{
  width:100%; height:52px; border:none; border-radius:8px;
  background:var(--sage); padding-inline:16px;
  font:inherit; font-size:13px; font-weight:500;
  color:rgba(0,59,43,.68); text-align:start;
}
.sd-book__cta{
  width:100%; height:58px; margin-block-start:16px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:var(--dark);
}
.sd-book__note{
  margin:12px 0 0; text-align:center;
  font-size:13px; font-weight:500; color:var(--dark);
}

.sd-sec-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-block-end:24px;
}
.sd-sec-head .section-title{ margin:0; }
.sd-sec-head .section-link{
  flex-shrink:0; color:rgba(0,59,43,.68); font-size:14px; font-weight:500;
  transition:color .2s ease;
}
.sd-sec-head .section-link:hover{ color:var(--gold); }

.sd-amenities{ background:var(--sage); padding-block:72px; }
.sd-amenity-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:20px;
}
.sd-amenity{
  background:var(--white); border-radius:16px;
  box-shadow:var(--shadow-card);
  padding:12px 17px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; font-size:13px; font-weight:500; color:var(--dark);
  transition:transform .25s ease, box-shadow .25s ease;
}
.sd-amenity:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 24px -6px rgba(3,42,30,.22);
}
.sd-amenity img{ display:block; width:22px; height:auto; }

.sd-units{
  background:var(--white);
  padding-block:72px;
}
.sd-unit-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,360px));
  gap:48px; justify-content:center;
}
.sd-unit{
  position:relative; display:block; width:100%; height:270px;
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card);
  color:var(--white);
  transition:transform .3s ease, box-shadow .3s ease;
}
.sd-unit:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
.sd-unit img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.sd-unit:hover img{ transform:none; }
.sd-unit::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 45%, rgba(3,42,30,.92) 100%),
    rgba(9,42,35,.18);
}
.sd-unit__copy{
  position:absolute; inset-inline:24px; inset-block-end:24px; z-index:1;
  display:flex; flex-direction:column; gap:5px; text-align:start;
}
.sd-unit__copy h3{ margin:0; font-size:16px; font-weight:700; line-height:23px; }
.sd-unit__copy > p{ margin:0; font-size:12px; color:rgba(255,255,255,.78); }
.sd-unit__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-block-start:8px; font-size:13px; color:rgba(255,255,255,.78);
}
.sd-unit__price{ color:var(--gold); font-weight:500; }

.sd-location{ background:var(--sage); padding-block:72px; }
.sd-location__card{
  display:flex; align-items:center; justify-content:center; gap:60px;
  padding:28px 40px; border:1px solid var(--sage); border-radius:16px;
  box-shadow:var(--shadow-card); background:var(--white);
  transition:box-shadow .3s ease;
}
.sd-location__card:hover{
  box-shadow:0 14px 28px -6px rgba(3,42,30,.2);
}
.sd-location__info{
  flex:0 0 320px; width:320px;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  text-align:start;
}
.sd-location__info .section-title{ margin:0; }
.sd-location__place{
  margin:0; font-size:15px; font-weight:500; color:rgba(0,59,43,.68);
}
.sd-location__desc{
  margin:0; font-size:15px; font-weight:500; line-height:22px; color:var(--dark);
}
.sd-location__btn{
  width:120px; height:40px; margin-block-start:4px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:500; color:var(--white);
}
.sd-location__photo{
  flex:1 1 820px; max-width:820px; height:170px;
  border-radius:16px; overflow:hidden; background:var(--sage);
  display:block;
}
.sd-location__photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.sd-location__photo:hover img{ transform:none; }

.sd-policies{
  background:var(--white);
  padding-block:72px;
}
.sd-policies .section-title{ margin:0 0 48px; }
.sd-policy-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,230px));
  gap:30px; justify-content:center;
}
.sd-policy{
  width:100%; height:150px; padding:28px 16px;
  background:var(--white); border:1px solid var(--sage); border-radius:16px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.sd-policy:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 24px -6px rgba(3,42,30,.2);
}
.sd-policy img{ display:block; width:24px; height:auto; }
.sd-policy h3{ margin:0; font-size:13px; font-weight:500; color:var(--dark); }
.sd-policy p{ margin:0; font-size:13px; font-weight:500; line-height:19px; color:rgba(0,59,43,.68); }

.sd-similar{ background:var(--sage); padding-block:72px; }
.sd-similar-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,270px));
  gap:30px; justify-content:center;
}
.sd-similar-card{
  position:relative; display:block; width:100%; height:279px;
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card);
  background:var(--dark); color:var(--white);
  transition:transform .3s ease, box-shadow .3s ease;
}
.sd-similar-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
.sd-similar-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.sd-similar-card:hover img{ transform:none; }
.sd-similar-card::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 45%, rgba(3,42,30,.92) 100%),
    rgba(9,42,35,.18);
}
.sd-similar-card__copy{
  position:absolute; inset-inline:0; inset-block-end:0; z-index:1;
  padding:12px 24px 16px; text-align:start;
}
.sd-similar-card__copy h3{ margin:0; font-size:16px; font-weight:700; line-height:23px; }
.sd-similar-card__copy > p{
  margin:8px 0 0; font-size:12px; color:rgba(255,255,255,.78);
}
.sd-similar-card__meta{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-block-start:18px; padding-block-start:4px;
  border-block-start:1px solid rgba(0,59,43,.2);
  color:var(--gold); font-size:12px; font-weight:500;
}

@media (max-width:1100px){
  .sd-gallery__inner{ grid-template-columns:1fr; max-width:720px; }
  .sd-gallery__thumbs{
    display:grid; grid-template-columns:repeat(3,1fr) auto;
    width:100%; align-items:center;
  }
  .sd-gallery__thumb{ width:100%; height:100px; }
  .sd-gallery__all{ width:auto; padding-inline:14px; }
  .sd-gallery__main{ height:360px; }
  .sd-overview__inner{ flex-direction:column; align-items:stretch; padding-inline:24px; }
  .sd-book{ width:100%; max-width:360px; margin-inline:auto; }
  .sd-amenity-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sd-unit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .sd-location__card{ flex-direction:column; gap:24px; padding:24px; }
  .sd-location__info, .sd-location__photo{ width:100%; max-width:none; flex:none; }
  .sd-policy-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sd-similar-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .sd-amenity-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sd-unit-grid{ grid-template-columns:1fr; }
  .sd-policy-grid{ grid-template-columns:1fr 1fr; }
  .sd-similar-grid{ grid-template-columns:1fr; }
  .sd-gallery__thumbs{ grid-template-columns:1fr; }
  .sd-features{ justify-content:flex-start; }
}

/* ============================================================
   Booking Checkout — Figma 1135:3 (node 1135-2), measured sizes.
   Page band sage; form white 760; summary dark 400.
   ============================================================ */
.co-hero{
  background:var(--dark);
  color:var(--white);
  min-height:170px;
  display:flex;
  align-items:center;
  padding-block:48px 40px;
}
.co-hero__inner{
  text-align:start;
  max-width:1200px;
}
.co-hero__crumb{
  margin:0;
  font-size:14px;
  font-weight:500;
  color:var(--gold);
}
.co-hero h1{
  margin:8px 0 0;
  font-size:clamp(28px,3.2vw,40px);
  font-weight:800;
  line-height:1.35;
  color:var(--white);
}

.co-page{
  background:var(--sage);
  padding-block:48px 72px;
}
.co-layout{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:40px;
  max-width:1200px;
}

.co-form{
  flex:1 1 760px;
  max-width:760px;
  background:var(--white);
  border-radius:16px;
  box-shadow:var(--shadow-card);
  padding:32px;
  text-align:start;
}
.co-form h2{
  margin:0 0 24px;
  font-size:22px;
  font-weight:800;
  color:var(--dark);
}
.co-form__rule{
  border:0;
  border-block-start:1px solid rgba(0,59,43,.1);
  margin:32px 0;
}
.co-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-block-end:20px;
  text-align:start;
}
.co-field span{
  font-size:13px;
  font-weight:500;
  color:rgba(0,59,43,.65);
}
.co-field input{
  width:100%;
  height:52px;
  border:1px solid rgba(0,59,43,.15);
  border-radius:8px;
  padding-inline:16px;
  font:inherit;
  font-size:15px;
  color:var(--dark);
  background:var(--white);
  text-align:start;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.co-field input:hover{ border-color:rgba(0,59,43,.28); }
.co-field input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,154,56,.18);
}
.co-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.co-field-row .co-field{ margin-block-end:20px; }

.co-pay{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-block-end:24px;
  direction:ltr;
}
.co-pay__opt{
  height:64px;
  border:1px solid rgba(0,59,43,.15);
  border-radius:8px;
  background:var(--white);
  color:var(--dark);
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.co-pay__opt:hover{
  transform:translateY(-2px);
  border-color:rgba(200,154,56,.45);
  box-shadow:0 8px 16px -6px rgba(3,42,30,.16);
}
.co-pay__opt.is-on{
  border:2px solid var(--gold);
  background:rgba(200,154,56,.1);
}

.co-summary{
  flex:0 0 400px;
  width:400px;
  background:var(--dark);
  color:var(--white);
  border-radius:16px;
  box-shadow:var(--shadow-card);
  padding:28px;
  text-align:start;
  position:sticky;
  top:calc(var(--nav-h) + 16px);
}
.co-summary h2{
  margin:0;
  font-size:18px;
  font-weight:800;
}
.co-summary__name{
  margin:20px 0 0;
  font-size:16px;
  font-weight:800;
}
.co-summary__place{
  margin:16px 0 0;
  font-size:13px;
  color:rgba(255,255,255,.7);
}
.co-summary__rule{
  border:0;
  border-block-start:1px solid rgba(255,255,255,.15);
  margin:20px 0;
}
.co-summary__rows{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.co-summary__rows > div{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.co-summary__rows dt{
  margin:0;
  font-size:13px;
  font-weight:400;
  color:rgba(255,255,255,.75);
}
.co-summary__rows dd{
  margin:0;
  font-size:14px;
  font-weight:500;
  color:var(--white);
  text-align:end;
}
.co-summary__total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-block-end:22px;
}
.co-summary__total span{
  font-size:15px;
  font-weight:800;
  color:rgba(255,255,255,.85);
}
.co-summary__total strong{
  font-size:22px;
  font-weight:800;
  color:var(--gold);
}
.co-summary__cta{
  width:100%;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
  color:var(--dark);
}
.co-summary__note{
  margin:16px 0 0;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.7);
}

@media (max-width:1100px){
  .co-layout{ flex-direction:column-reverse; align-items:stretch; }
  .co-summary{
    width:100%;
    max-width:none;
    flex:none;
    position:static;
  }
  .co-form{ max-width:none; }
}
@media (max-width:640px){
  .co-pay{ grid-template-columns:1fr; direction:rtl; }
  .co-field-row{ grid-template-columns:1fr; }
  .co-form{ padding:24px 20px; }
}

/* ============================================================
   Booking Confirmation — Figma 1143:3 / 1181:309, card 680×780.
   ============================================================ */
.cf-page{
  background:var(--sage);
  padding-block:68px 72px;
  min-height:calc(100vh - var(--nav-h));
}
.cf-page .container{
  display:flex;
  justify-content:center;
}
.cf-card{
  width:100%;
  max-width:680px;
  background:var(--white);
  border-radius:16px;
  box-shadow:var(--shadow-card);
  padding:56px 60px 48px;
  text-align:center;
}
.cf-card__icon{
  width:88px; height:88px; margin-inline:auto;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:40px; font-weight:800; line-height:1;
}
.cf-card__icon--ok{
  background:var(--gold);
  color:var(--dark);
}
.cf-card__icon--fail{
  background:var(--dark);
  color:var(--white);
}
.cf-card h1{
  margin:24px 0 0;
  font-size:clamp(22px,2.4vw,28px);
  font-weight:800;
  color:var(--dark);
  line-height:1.35;
}
.cf-card__sub{
  margin:12px 0 0;
  font-size:14px;
  color:rgba(0,59,43,.6);
}
.cf-card__badge{
  display:inline-flex; align-items:center; justify-content:center;
  margin-block-start:20px;
  min-width:260px; height:44px; padding-inline:16px;
  border-radius:8px; background:var(--sage);
  font-size:13px; font-weight:700; color:var(--dark);
}
.cf-card__rule{
  border:0;
  border-block-start:1px solid rgba(0,59,43,.1);
  margin:28px 0;
}
.cf-card__rows{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:start;
}
.cf-card__rows > div{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.cf-card__rows dt{
  margin:0;
  flex:0 0 220px;
  max-width:40%;
  font-size:14px;
  font-weight:400;
  color:rgba(0,59,43,.6);
}
.cf-card__rows dd{
  margin:0;
  flex:1;
  font-size:14px;
  font-weight:700;
  color:var(--dark);
  text-align:end;
}
.cf-card__total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-align:start;
  margin-block-end:28px;
}
.cf-card__total span{
  font-size:15px;
  color:rgba(0,59,43,.6);
}
.cf-card__total strong{
  font-size:24px;
  font-weight:800;
  color:var(--dark);
}
.cf-card__actions{
  display:flex;
  gap:16px;
  justify-content:center;
}
.cf-card__btn{
  flex:1 1 272px;
  max-width:272px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:700;
  color:var(--dark);
}
.cf-card__btn--ghost{
  background:var(--white);
  border:1px solid rgba(0,59,43,.25);
  color:var(--dark);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.cf-card__btn--ghost:hover{
  transform:translateY(-2px);
  background:var(--sage);
  border-color:rgba(0,59,43,.4);
}
.cf-card__help{
  margin:20px 0 0;
  font-size:13px;
  color:rgba(0,59,43,.5);
}
.cf-card__help a{
  color:var(--dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.cf-card__help a:hover{ color:var(--gold); }

@media (max-width:700px){
  .cf-card{ padding:40px 24px 36px; }
  .cf-card__actions{ flex-direction:column; align-items:stretch; }
  .cf-card__btn{ max-width:none; }
  .cf-card__rows > div{ flex-direction:column; gap:4px; }
  .cf-card__rows dt{ max-width:none; flex:none; }
  .cf-card__rows dd{ text-align:start; }
}

/* ============================================================
   Restaurant Details — Figma 835:2
   Section rhythm (after hero): white → sage → white → sage…
   ============================================================ */

/* Hero gallery — dark band like stay gallery */
.rd-hero{
  width:100%;
  background:var(--grad);
  padding:42px 54px 56px;
  box-sizing:border-box;
}
.rd-hero__stage{
  position:relative;
  width:100%;
  max-width:1332px;
  height:510px;
  margin-inline:auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 14px 32px 0 rgba(0,0,0,.13);
  background:var(--dark);
}
.rd-hero__photo{
  display:block; width:100%; height:100%; object-fit:cover;
}
.rd-hero__overlay{
  position:absolute; inset:0;
  background:rgba(0,59,43,.36);
  border-radius:12px;
  pointer-events:none;
}
.rd-hero__copy{
  position:absolute;
  inset-block-start:28px;
  inset-inline-start:36px;
  inset-inline-end:36px;
  z-index:2;
  max-width:500px;
  text-align:start;
  color:var(--white);
}
.rd-hero__copy h1{
  margin:12px 0 0;
  font-size:clamp(32px,4vw,54px);
  font-weight:800;
  line-height:1.3;
  color:var(--sage);
}
.rd-hero__sub{
  margin:8px 0 0;
  font-size:clamp(16px,1.6vw,23px);
  font-weight:700;
  line-height:1.3;
  color:var(--sage);
}
.rd-hero .crumb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:13px;
  font-weight:500;
  color:var(--white);
  opacity:1;
}
.rd-hero .crumb::before{
  content:"";
  width:8px;
  height:8px;
  background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
}
.rd-hero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-block-start:20px;
}
.rd-hero__stat{
  width:150px;
  height:72px;
  border-radius:10px;
  background:rgba(239,244,236,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}
.rd-hero__stat strong{
  font-size:18px;
  font-weight:700;
  color:var(--white);
  line-height:1.3;
}
.rd-hero__stat span{
  font-size:11px;
  font-weight:500;
  color:var(--sage);
  line-height:1.3;
}
.rd-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-block-start:28px;
}
.rd-hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  border-radius:8px;
  font-size:15px;
  font-weight:700;
  transition:transform .2s ease, opacity .2s ease, background .2s ease, color .2s ease;
}
.rd-hero__btn:hover{ transform:translateY(-2px); }
.rd-hero__btn--dark{
  width:160px;
  background:var(--dark);
  color:var(--white);
}
.rd-hero__btn--dark:hover{ background:var(--gold); color:var(--dark); }
.rd-hero__btn--light{
  width:170px;
  background:var(--sage);
  border:1px solid rgba(239,244,236,.9);
  color:var(--dark);
}
.rd-hero__btn--light:hover{ background:var(--white); }
.rd-hero__all{
  position:absolute;
  z-index:2;
  inset-block-end:70px;
  inset-inline-end:54px;
  font-size:13px;
  font-weight:700;
  color:var(--white);
  transition:color .2s ease;
}
.rd-hero__all:hover{ color:var(--gold); }
.rd-hero__controls{
  position:absolute;
  z-index:2;
  inset-inline:54px;
  inset-block-end:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.rd-hero__nav,
.rd-hero__count{ pointer-events:auto; }
.rd-hero__nav{
  width:34px; height:34px; border:1px solid rgba(239,244,236,.34);
  border-radius:8px; background:rgba(0,59,43,.86); color:var(--white);
  font-size:15px; font-weight:700; line-height:1; cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.rd-hero__nav:hover{
  transform:translateY(-2px);
  background:var(--gold); color:var(--dark);
}
.rd-hero__count{
  position:absolute;
  inset-inline-start:50%;
  transform:translateX(-50%);
  min-width:78px; height:28px; padding-inline:12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(239,244,236,.34);
  border-radius:8px; background:rgba(0,59,43,.86);
  color:var(--white); font-size:15px; font-weight:700;
}
[dir="rtl"] .rd-hero__count{ transform:translateX(50%); }
.rd-hero__thumbs{
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:wrap;
  max-width:1332px;
  margin:18px auto 0;
}
.rd-hero__thumb{
  display:block; width:182px; height:84px; padding:0;
  border:1px solid rgba(239,244,236,.75);
  border-radius:8px; overflow:hidden; cursor:pointer; background:transparent;
  transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.rd-hero__thumb:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px -6px rgba(3,42,30,.28);
}
.rd-hero__thumb.is-active{ border:2px solid var(--gold); }
.rd-hero__thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.rd-hero__thumb:hover img{ transform:none; }

/* About — white */
.rd-about{
  background:var(--white);
  padding-block:88px;
}
.rd-about__inner{
  display:flex;
  align-items:flex-start;
  gap:42px;
}
.rd-about__text{
  flex:1 1 590px;
  max-width:590px;
  text-align:start;
}
.rd-about__title{
  margin:0;
  font-size:30px;
  font-weight:700;
  color:var(--dark);
  line-height:1.4;
}
.rd-about__title::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin-block-start:10px;
  background:var(--gold);
  border-radius:2px;
}
.rd-about__text p{
  margin:16px 0 0;
  font-size:17px;
  line-height:1.4;
  color:rgba(0,59,43,.68);
}
.rd-about__feats{
  flex:1 1 558px;
  max-width:558px;
  text-align:start;
  padding-inline-start:24px;
  border-inline-start:1px solid rgba(0,59,43,.15);
}
.rd-about__feats-title{
  margin:0 0 24px;
  font-size:24px;
  font-weight:700;
  color:var(--dark);
  text-align:start;
}
.rd-feat-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 120px));
  gap:12px 20px;
  justify-content:start;
}
.rd-feat{
  width:100%;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
  padding-block:12px;
  border-radius:16px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.rd-feat:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 24px -6px rgba(3,42,30,.18);
}
.rd-feat img{ display:block; width:auto; height:auto; max-width:24px; }
.rd-feat strong{
  font-size:14px; font-weight:700; color:var(--dark); line-height:1.3;
}
.rd-feat span{
  font-size:12px; color:rgba(0,59,43,.68); line-height:1.3;
}

.rd-sec-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-block-end:24px;
}
.rd-sec-head .section-title{ margin:0; }
.rd-sec-head .section-link{
  flex-shrink:0; color:var(--gold); font-size:14px; font-weight:500;
  transition:opacity .2s ease;
}
.rd-sec-head .section-link:hover{ opacity:.8; }

/* Menu — sage */
.rd-menu{
  background:var(--sage);
  padding-block:88px;
}
.rd-menu-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,224px));
  gap:24px;
  justify-content:center;
}
.rd-dish{
  position:relative;
  width:100%;
  height:240px;
  border-radius:16px;
  overflow:hidden;
  color:var(--white);
  transition:transform .3s ease, box-shadow .3s ease;
}
.rd-dish:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
.rd-dish img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.rd-dish:hover img{ transform:none; }
.rd-dish::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 45%, rgba(3,42,30,.92) 100%),
    rgba(9,42,35,.18);
}
.rd-dish__copy{
  position:absolute; inset-inline:16px; inset-block-end:20px; z-index:1;
  text-align:center;
}
.rd-dish__copy h3{
  margin:0; font-size:15px; font-weight:500; color:var(--white); line-height:1.4;
}
.rd-dish__copy p{
  margin:6px 0 0; font-size:17px; font-weight:700; color:var(--gold); line-height:1.4;
}

/* Location + hours — white */
.rd-place{
  background:var(--white);
  padding-block:88px;
}
.rd-place__inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) 330px minmax(0,1fr);
  gap:24px 40px;
  align-items:center;
  max-width:1100px;
  margin-inline:auto;
}
.rd-place__loc,
.rd-place__hours{ text-align:start; }
.rd-place__title{
  margin:0 0 16px;
  font-size:24px;
  font-weight:700;
  color:var(--dark);
  line-height:1.4;
}
.rd-place__loc p{
  margin:0 0 12px;
  font-size:18px; line-height:1.4; color:rgba(0,59,43,.68);
}
.rd-place__maps{
  color:var(--gold);
  font-size:16px;
  font-weight:500;
  transition:opacity .2s ease;
}
.rd-place__maps:hover{ opacity:.8; }
.rd-place__photo{
  display:block; width:100%; height:168px;
  border-radius:16px; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.rd-place__photo:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 24px -6px rgba(3,42,30,.22);
}
.rd-place__photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.rd-place__photo:hover img{ transform:none; }
.rd-place__hours{
  padding-inline-start:28px;
  border-inline-start:1px solid rgba(0,59,43,.15);
}
.rd-place__hours ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.rd-place__hours li{
  display:grid;
  grid-template-columns:1fr max-content;
  column-gap:16px;
  align-items:baseline;
}
.rd-place__hours strong{
  font-size:14px; font-weight:700; color:var(--dark);
}
.rd-place__hours span{
  font-size:13px; color:rgba(0,59,43,.68); white-space:nowrap;
}

/* Booking — sage band, white card (Figma 835:148) */
.rd-book{
  background:var(--sage);
  padding-block:88px;
}
.rd-book__inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  padding:46px 24px;
  border-radius:16px;
  background:var(--white);
  box-shadow:0 8px 20px -4px rgba(3,42,30,.16);
  box-sizing:border-box;
}
.rd-book__main{
  flex:1 1 809px;
  text-align:start;
}
.rd-book__main .section-title{ margin:0 0 18px; font-size:30px; }
.rd-book__form{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 35px;
}
.rd-book__field{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  width:178px; height:52px;
  padding-inline:14px;
  border:1px solid var(--sage);
  border-radius:8px;
  background:var(--sage);
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.rd-book__field.is-open{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold);
  z-index:5;
}
.rd-book__field > span{
  font-size:11px; font-weight:700; color:var(--dark); line-height:1.4;
}
.rd-book__field select{
  width:100%; border:none; background:transparent; padding:0;
  font:inherit; font-size:12px; color:rgba(0,59,43,.68);
  text-align:start; cursor:pointer; appearance:none;
  background-image:url("assets/icons/restaurant/chevron.svg");
  background-repeat:no-repeat;
  background-position:left 0 center;
  background-size:12px auto;
  padding-inline-end:0;
  padding-inline-start:18px;
}
.rd-book__field.is-enhanced select{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap;
}
.rd-book__trigger{
  width:100%; border:0; background-color:transparent; padding:0;
  font:inherit; font-size:12px; font-weight:400; color:rgba(0,59,43,.68);
  text-align:start; cursor:pointer; line-height:1.4;
  background-image:url("assets/icons/restaurant/chevron.svg");
  background-repeat:no-repeat;
  background-position:left 0 center;
  background-size:12px auto;
  padding-inline-start:18px;
}
.rd-book__trigger.is-chosen{ color:var(--dark); font-weight:500; }
.rd-book__menu{
  position:absolute; inset-inline:0; inset-block-start:calc(100% + 6px); z-index:20;
  max-height:200px; overflow:auto;
  margin:0; padding:6px 0; list-style:none;
  background:var(--white);
  border:1px solid rgba(0,59,43,.12);
  border-radius:8px;
  box-shadow:0 14px 24px -6px rgba(3,42,30,.18);
  text-align:start;
}
.rd-book__opt{
  display:block; width:100%; border:0; background:transparent; cursor:pointer;
  padding:8px 14px; font:inherit; font-size:13px; font-weight:500;
  color:var(--dark); text-align:start; line-height:1.4;
}
.rd-book__opt:hover{
  background:var(--sage); color:var(--dark);
}
.rd-book__opt.is-active{
  background:var(--dark); color:var(--white);
}
.rd-book__cta{
  width:170px; height:52px; border:none; border-radius:8px;
  background:var(--dark); color:var(--white);
  font:inherit; font-size:15px; font-weight:700; cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.rd-book__cta:hover{
  transform:translateY(-2px);
  background:var(--gold); color:var(--dark);
}
.rd-book__contact{
  flex:0 0 300px; width:300px;
  display:flex; flex-direction:column; align-items:stretch; gap:14px;
  padding:18px 16px;
  border-radius:16px;
  background:var(--sage);
  text-align:start;
}
.rd-book__contact-title{
  margin:0;
  padding-inline:4px;
  font-size:15px;
  font-weight:700;
  color:var(--dark);
  line-height:1.3;
}
.rd-book__contact-title::after{
  content:"";
  display:block;
  width:28px;
  height:2px;
  margin-block-start:8px;
  background:var(--gold);
  border-radius:1px;
}
.rd-book__contact-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.rd-book__contact-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--white);
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rd-book__contact-row:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px -6px rgba(3,42,30,.16);
}
.rd-book__contact-icon{
  flex:0 0 32px; width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(200,154,56,.14);
  color:var(--gold);
}
.rd-book__contact-copy{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  text-align:start;
}
.rd-book__contact-copy strong{
  font-size:12px; font-weight:700; color:var(--dark); line-height:1.3;
}
.rd-book__contact-copy span{
  font-size:13px; font-weight:500; color:rgba(0,59,43,.68); line-height:1.3;
  overflow-wrap:anywhere;
}
.rd-book__contact-row:hover .rd-book__contact-copy span{ color:var(--gold); }

/* Policies — white */
.rd-policies{
  background:var(--white);
  padding-block:88px;
  text-align:start;
}
.rd-policies .section-title{ margin:0 0 24px; font-size:26px; }
.rd-policy-grid{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px 65px;
}
.rd-policy{
  width:128px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:12px 16px;
  border-radius:16px;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.rd-policy:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 24px -6px rgba(3,42,30,.18);
}
.rd-policy img{ display:block; width:auto; height:auto; max-width:24px; }
.rd-policy strong{
  font-size:12px; font-weight:700; color:var(--dark); line-height:1.4;
}
.rd-policy span{
  font-size:11px; color:rgba(0,59,43,.68); line-height:1.4;
}

/* Similar — sage */
.rd-similar{
  background:var(--sage);
  padding-block:88px;
}
.rd-similar-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,274px));
  gap:32px;
  justify-content:center;
}
.rd-similar-card{
  position:relative;
  display:block;
  width:100%;
  height:214px;
  border-radius:16px;
  overflow:hidden;
  color:var(--white);
  transition:transform .3s ease, box-shadow .3s ease;
}
.rd-similar-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
.rd-similar-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.rd-similar-card:hover img{ transform:none; }
.rd-similar-card::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 45%, rgba(3,42,30,.92) 100%),
    rgba(9,42,35,.18);
}
.rd-similar-card__copy{
  position:absolute; inset-inline:20px; inset-block-end:18px; z-index:1;
  text-align:start;
}
.rd-similar-card__copy h3{
  margin:0; font-size:15px; font-weight:700; color:var(--white); line-height:1.4;
}
.rd-similar-card__copy p{
  margin:4px 0 0; font-size:11px; color:rgba(255,255,255,.78); line-height:1.4;
}
.rd-similar-card__copy span{
  display:block; margin-block-start:8px;
  font-size:12px; font-weight:700; color:var(--gold); line-height:1.4;
}

@media (max-width:1100px){
  .rd-hero{ padding:24px 16px 32px; }
  .rd-hero__stage{ height:min(510px, 62vw); }
  .rd-hero__stat{ width:120px; height:64px; }
  .rd-about__inner{ flex-direction:column; align-items:stretch; gap:28px; }
  .rd-about__text, .rd-about__feats{ max-width:none; }
  .rd-about__feats{ border-inline-start:none; border-block-start:1px solid rgba(0,59,43,.15); padding-inline-start:0; padding-block-start:24px; }
  .rd-feat-grid{ grid-template-columns:repeat(2, minmax(0, 120px)); }
  .rd-menu-grid{ grid-template-columns:repeat(3,minmax(0,224px)); }
  .rd-place__inner{ grid-template-columns:1fr; max-width:560px; }
  .rd-place__hours{ padding-inline-start:0; border-inline-start:none; padding-block-start:8px; border-block-start:1px solid rgba(0,59,43,.12); }
  .rd-place__photo{ height:200px; }
  .rd-book__inner{ flex-direction:column; align-items:stretch; }
  .rd-book__contact{ width:auto; flex:none; }
  .rd-similar-grid{ grid-template-columns:repeat(2,minmax(0,274px)); }
}
@media (max-width:700px){
  .rd-hero__stage{ height:min(560px, 92vw); }
  .rd-hero__copy{ inset-inline:20px; inset-block-start:20px; }
  .rd-hero__all{ inset-inline-end:20px; }
  .rd-hero__controls{ inset-inline:20px; }
  .rd-hero__thumb{ width:calc(50% - 8px); height:72px; }
  .rd-menu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .rd-dish{ height:200px; }
  .rd-book__field{ width:100%; }
  .rd-book__cta{ width:100%; }
  .rd-similar-grid{ grid-template-columns:1fr; }
  .rd-similar-card{ height:200px; max-width:none; }
}

/* ============================================================
   Route Details — Figma 845:2 (node 457-2)
   Section rhythm (after hero): white → sage → white → sage
   ============================================================ */
.rt-hero{
  width:100%;
  background:var(--grad);
  padding:42px 54px 56px;
  box-sizing:border-box;
}
.rt-hero__stage{
  position:relative;
  width:100%;
  max-width:1332px;
  height:510px;
  margin-inline:auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 14px 32px 0 rgba(0,0,0,.13);
  background:var(--dark);
}
.rt-hero__photo{
  display:block; width:100%; height:100%; object-fit:cover;
}
.rt-hero__overlay{
  position:absolute; inset:0;
  background:rgba(0,59,43,.36);
  border-radius:12px;
  pointer-events:none;
}
.rt-hero__copy{
  position:absolute;
  inset-block-start:28px;
  inset-inline-start:36px;
  inset-inline-end:36px;
  z-index:2;
  max-width:560px;
  text-align:start;
  color:var(--white);
}
.rt-hero .crumb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:13px;
  font-weight:500;
  color:var(--white);
  opacity:1;
}
.rt-hero .crumb::before{
  content:"";
  width:8px;
  height:8px;
  flex-shrink:0;
  background:var(--gold);
  transform:rotate(45deg);
}
.rt-hero__copy h1{
  margin:12px 0 0;
  font-size:clamp(32px,4vw,54px);
  font-weight:800;
  line-height:1.3;
  color:var(--sage);
}
.rt-hero__sub{
  margin:8px 0 0;
  font-size:clamp(16px,1.6vw,21px);
  font-weight:700;
  line-height:1.4;
  color:var(--sage);
}
.rt-hero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-block-start:20px;
}
.rt-hero__stat{
  min-width:120px;
  height:72px;
  padding-inline:14px;
  border-radius:10px;
  background:rgba(239,244,236,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
  box-sizing:border-box;
}
.rt-hero__stat strong{
  font-size:16px;
  font-weight:700;
  color:var(--white);
  line-height:1.3;
}
.rt-hero__stat span{
  font-size:11px;
  font-weight:500;
  color:var(--sage);
  line-height:1.3;
}
.rt-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-block-start:24px;
}
.rt-hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:48px;
  padding-inline:28px;
  border:0;
  border-radius:8px;
  font:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease, background .2s ease, color .2s ease;
}
.rt-hero__btn:hover{ transform:translateY(-2px); }
.rt-hero__btn--gold{
  background:var(--gold);
  color:var(--white);
}
.rt-hero__btn--gold:hover{ filter:brightness(1.05); }
.rt-hero__btn img{ display:block; width:18px; height:16px; }
.rt-hero__all{
  position:absolute;
  z-index:2;
  inset-block-end:70px;
  inset-inline-end:54px;
  font-size:13px;
  font-weight:700;
  color:var(--white);
  transition:color .2s ease;
}
.rt-hero__all:hover{ color:var(--gold); }
.rt-hero__controls{
  position:absolute;
  z-index:2;
  inset-inline:54px;
  inset-block-end:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.rt-hero__nav,
.rt-hero__count{ pointer-events:auto; }
.rt-hero__nav{
  width:34px; height:34px; border:1px solid rgba(239,244,236,.34);
  border-radius:8px; background:rgba(0,59,43,.86); color:var(--white);
  font-size:15px; font-weight:700; line-height:1; cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.rt-hero__nav:hover{
  transform:translateY(-2px);
  background:var(--gold); color:var(--dark);
}
.rt-hero__count{
  position:absolute;
  inset-inline-start:50%;
  transform:translateX(-50%);
  min-width:78px; height:28px; padding-inline:12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(239,244,236,.34);
  border-radius:8px; background:rgba(0,59,43,.86);
  color:var(--white); font-size:15px; font-weight:700;
}
[dir="rtl"] .rt-hero__count{ transform:translateX(50%); }
.rt-hero__thumbs{
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:wrap;
  max-width:1332px;
  margin:18px auto 0;
}
.rt-hero__thumb{
  display:block; width:182px; height:84px; padding:0;
  border:1px solid rgba(239,244,236,.75);
  border-radius:8px; overflow:hidden; cursor:pointer; background:transparent;
  transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.rt-hero__thumb:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px -6px rgba(3,42,30,.28);
}
.rt-hero__thumb.is-active{ border:2px solid var(--gold); }
.rt-hero__thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.rt-hero__thumb:hover img{ transform:none; }

.rt-sec-title{
  margin:0 0 10px;
  font-size:28px; font-weight:700; color:var(--dark); line-height:1.4;
  text-align:start;
}
.rt-sec-title::after{
  content:""; display:block; width:60px; height:3px;
  margin-block-start:10px; background:var(--gold); border-radius:2px;
}
.rt-sec-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-block-end:24px;
}
.rt-sec-head .rt-sec-title{ margin:0; }
.rt-sec-head .rt-sec-title::after{ margin-block-start:8px; }
.rt-sec-head .section-link{
  flex-shrink:0; color:var(--gold); font-size:14px; font-weight:500;
}

/* Map — white after hero (restaurant rhythm); card keeps contrast via border */
.rt-map{
  background:var(--white);
  padding-block:96px 112px;
}
.rt-map__card{
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  gap:28px 36px;
  align-items:stretch;
  max-width:1252px;
  margin-inline:auto;
  padding:36px 32px;
  border-radius:16px;
  background:var(--white);
  border:1px solid rgba(0,59,43,.08);
  box-shadow:0 8px 20px -4px rgba(3,42,30,.12);
  box-sizing:border-box;
}
.rt-map__side{
  display:flex;
  flex-direction:column;
  min-width:0;
  text-align:start;
}
.rt-map__title{
  margin:0 0 22px;
  font-size:28px; font-weight:700; color:var(--dark); line-height:1.3;
  text-align:start;
}
.rt-map__title::after{
  content:""; display:block; width:60px; height:3px;
  margin-block-start:10px; background:var(--gold); border-radius:2px;
}
.rt-map__stage{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.rt-map__visual{
  position:relative;
  width:100%;
  aspect-ratio:760 / 422;
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 20% 90%, rgba(200,154,56,.08), transparent 55%),
    var(--sage);
}
.rt-map__svg{
  display:block;
  width:100%;
  height:100%;
  transform-origin:50% 50%;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.rt-map__trail{
  animation:rt-dash 18s linear infinite;
}
@keyframes rt-dash{
  to{ stroke-dashoffset:-190; }
}
.rt-map__pin{
  cursor:pointer;
  outline:none;
}
.rt-map__pin .rt-map__pin-halo{
  transition:fill-opacity .25s ease;
}
.rt-map__pin.is-active{
  filter:url(#rtPinGlow);
}
.rt-map__pin.is-active .rt-map__pin-halo{
  fill-opacity:.28;
}
.rt-map__pin:focus-visible circle:nth-of-type(2),
.rt-map__pin:hover circle:nth-of-type(2){
  stroke:#C89A38;
  stroke-width:2.5;
}
.rt-map__compass{
  position:absolute;
  z-index:2;
  inset-block-start:18px;
  inset-inline-end:18px;
  inset-inline-start:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  color:rgba(0,59,43,.55);
  font-size:12px;
  font-weight:700;
  pointer-events:none;
}
.rt-map__compass i{
  width:0; height:0;
  border-inline:5px solid transparent;
  border-block-end:9px solid var(--gold);
}
.rt-map__zoom{
  position:absolute;
  z-index:2;
  inset-block-end:16px;
  inset-inline-end:16px;
  inset-inline-start:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rt-map__zoom button{
  width:34px; height:34px;
  border:0; border-radius:8px;
  background:rgba(255,255,255,.92);
  color:var(--dark);
  font-size:18px; font-weight:700; line-height:1;
  box-shadow:0 4px 10px rgba(3,42,30,.12);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.rt-map__zoom button:hover{
  transform:translateY(-2px);
  background:var(--dark);
  color:var(--white);
}
.rt-map__preview{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-radius:12px;
  background:var(--sage);
  text-align:start;
}
.rt-map__preview img{
  display:block; width:72px; height:56px;
  border-radius:8px; object-fit:cover;
}
.rt-map__preview-copy{
  min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.rt-map__preview-kicker{
  margin:0;
  font-size:11px; font-weight:700; color:var(--gold);
}
.rt-map__preview-copy strong{
  font-size:15px; font-weight:700; color:var(--dark);
}
.rt-map__preview-copy span{
  font-size:12px; color:rgba(0,59,43,.68);
}
.rt-map__preview-link{
  flex-shrink:0;
  font-size:13px; font-weight:700; color:var(--gold);
  transition:opacity .2s ease;
}
.rt-map__preview-link:hover{ opacity:.75; }

.rt-stops{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
  flex:1;
}
.rt-stops li{
  position:relative;
  margin:0; padding:0;
}
.rt-stops li:not(:last-child)::after{
  content:"";
  position:absolute;
  inset-inline-start:23px;
  inset-block-start:46px;
  width:1px; height:calc(100% - 30px);
  background:rgba(0,59,43,.12);
  pointer-events:none;
}
.rt-stop{
  position:relative;
  z-index:1;
  width:100%;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  column-gap:12px;
  min-height:56px;
  margin:0; padding:10px 12px;
  border:0; border-radius:12px;
  background:transparent;
  cursor:pointer;
  font:inherit;
  text-align:start;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rt-stop:hover{
  background:rgba(239,244,236,.9);
  transform:translateY(-2px);
}
.rt-stop.is-active{
  background:var(--sage);
  box-shadow:inset 0 0 0 1px rgba(0,59,43,.06);
}
.rt-stops__num{
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--gold); color:var(--white);
  font-size:11px; font-weight:700;
  transition:transform .2s ease, background .2s ease;
}
.rt-stop.is-active .rt-stops__num{
  background:var(--dark);
  transform:scale(1.06);
}
.rt-stops__meta{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.rt-stops__name{
  font-size:15px; font-weight:700; color:var(--dark); text-align:start;
}
.rt-stops__hint{
  font-size:12px; color:rgba(0,59,43,.55); text-align:start;
}
.rt-stops__alt{
  font-size:13px; font-weight:700; color:var(--gold); white-space:nowrap;
}

/* Stations — sage */
.rt-stations{
  background:var(--sage);
  padding-block:96px 112px;
}
.rt-elev{
  margin-block-end:40px;
}
.rt-elev__svg{
  width:100%;
  aspect-ratio:700 / 190;
  height:auto;
  display:block;
  overflow:visible;
}
.rt-elev__pin{ cursor:pointer; }
.rt-elev__pin circle{ transition:r .2s ease; }
.rt-elev__pin:hover circle,
.rt-elev__pin:focus-visible circle{ r:9; }
.rt-elev__pin.is-active circle{ r:9; fill:var(--gold); stroke:#fff; }
.rt-elev__pin text{ transition:font-size .2s ease; }
.rt-elev__pin.is-active text,
.rt-elev__pin:hover text{ font-size:13px; }
.rt-elev__labels{
  display:flex; justify-content:space-between;
  font-size:13px; font-weight:700; color:rgba(0,59,43,.55);
  margin-block-start:4px;
}
.rt-station-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,220px));
  gap:22px;
  justify-content:center;
  margin-block-start:32px;
}
.rt-station{
  position:relative;
  width:100%; height:286px;
  border-radius:16px; overflow:hidden;
  color:var(--white);
  box-shadow:0 8px 10px rgba(3,42,30,.16);
  transition:transform .3s ease, box-shadow .3s ease;
  cursor:pointer;
}
.rt-station:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.28);
}
.rt-station img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.rt-station:hover img{ transform:none; }
.rt-station::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 45%, rgba(3,42,30,.92) 100%),
    rgba(9,42,35,.18);
}
.rt-station__badge{
  position:absolute; z-index:2;
  inset-block-start:8px; inset-inline-start:8px;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--gold); color:var(--white);
  font-size:11px; font-weight:700;
}
.rt-station__copy{
  position:absolute; inset-inline:22px; inset-block-end:20px; z-index:1;
  text-align:center;
}
.rt-station__copy h3{
  margin:0; font-size:16px; font-weight:700; color:var(--white); line-height:1.4;
}
.rt-station__copy p{
  margin:8px 0 0; font-size:12px; line-height:1.7; color:rgba(255,255,255,.78);
}
.rt-station__copy span{
  display:block; margin-block-start:14px;
  font-size:12px; color:rgba(255,255,255,.78); text-align:start;
}

/* Guidance — white band; white cards + one dark accent (Figma 845:178) */
.rt-guide{
  background:var(--white);
  padding-block:96px 112px;
}
.rt-guide__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:32px;
  justify-content:center;
  max-width:1252px;
  margin-inline:auto;
}
.rt-guide__card{
  min-height:300px;
  padding:36px 32px 32px;
  border-radius:16px;
  background:var(--white);
  border:0;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.14);
  text-align:start;
  box-sizing:border-box;
  transition:transform .3s ease, box-shadow .3s ease;
}
.rt-guide__card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 28px -8px rgba(3,42,30,.2);
}
.rt-guide__card h2{
  margin:0 0 20px;
  font-size:21px; font-weight:700; color:var(--dark); line-height:1.4;
}
.rt-guide__card h2::after{
  content:""; display:block; width:48px; height:3px;
  margin-block-start:10px; background:var(--gold); border-radius:2px;
}
.rt-guide__card--dark{
  background:var(--dark);
  color:var(--white);
  border:0;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.22);
}
.rt-guide__card--dark:hover{
  box-shadow:0 16px 28px -8px rgba(3,42,30,.32);
}
.rt-guide__card--dark h2{
  color:var(--white);
}
.rt-guide__card--dark h2::after{
  display:block;
  background:var(--gold);
}
.rt-guide__card--dark ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:16px;
}
.rt-guide__card--dark li{
  display:flex; align-items:center; gap:12px;
  font-size:14px; font-weight:500; color:var(--white); line-height:1.45;
}
.rt-guide__icon{
  flex:0 0 28px; width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(200,154,56,.2);
  color:var(--gold); font-size:13px;
}
.rt-guide__chips{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-block-end:20px;
}
.rt-guide__chips span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:112px; height:36px; padding-inline:14px;
  border-radius:8px; background:var(--sage);
  font-size:13px; font-weight:700; color:var(--dark);
}
.rt-guide__card > p{
  margin:0; font-size:15px; line-height:1.9; color:rgba(0,59,43,.68);
}
.rt-guide__checks{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.rt-guide__checks li{
  position:relative;
  padding-inline-start:34px;
  font-size:14px; color:rgba(0,59,43,.72); line-height:1.5;
}
.rt-guide__checks li::before{
  content:"✓";
  position:absolute; inset-inline-start:0; inset-block-start:0;
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--gold); color:var(--white);
  font-size:12px; font-weight:700;
}

/* Similar — sage */
.rt-similar{
  background:var(--sage);
  padding-block:96px 112px;
}
.rt-similar-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,376px));
  gap:32px;
  justify-content:center;
}
.rt-similar-card{
  position:relative;
  display:block;
  width:100%; height:238px;
  border-radius:16px; overflow:hidden;
  color:var(--white);
  transition:transform .3s ease, box-shadow .3s ease;
}
.rt-similar-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 30px -8px rgba(3,42,30,.3);
}
.rt-similar-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.rt-similar-card:hover img{ transform:none; }
.rt-similar-card::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 45%, rgba(3,42,30,.92) 100%),
    rgba(9,42,35,.18);
}
.rt-similar-card__copy{
  position:absolute; inset-inline:24px; inset-block-end:24px; z-index:1;
  text-align:center;
}
.rt-similar-card__copy h3{
  margin:0; font-size:16px; font-weight:700; color:var(--white); line-height:1.4;
}
.rt-similar-card__copy p{
  margin:12px 0 0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px;
  font-size:12px; color:rgba(255,255,255,.78);
}

@media (max-width:1100px){
  .rt-hero{ padding:24px 16px 56px; }
  .rt-hero__stage{ height:min(510px, 62vw); }
  .rt-hero__stat{ min-width:110px; height:64px; }
  .rt-map__card{ grid-template-columns:1fr; }
  .rt-map__visual{ max-width:none; }
  .rt-station-grid{ grid-template-columns:repeat(3, minmax(0,220px)); }
  .rt-guide__grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .rt-similar-grid{ grid-template-columns:repeat(2, minmax(0,376px)); }
}
@media (max-width:700px){
  .rt-hero__stage{ height:min(560px, 92vw); }
  .rt-hero__copy{ inset-inline:20px; inset-block-start:20px; }
  .rt-hero__all{ inset-inline-end:20px; }
  .rt-hero__controls{ inset-inline:20px; }
  .rt-hero__thumb{ width:calc(50% - 8px); height:72px; }
  .rt-map__preview{
    grid-template-columns:64px minmax(0,1fr);
  }
  .rt-map__preview-link{ grid-column:1 / -1; justify-self:start; }
  .rt-station-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rt-similar-grid{ grid-template-columns:1fr; }
  .rt-map, .rt-stations, .rt-guide, .rt-similar{ padding-block:64px 72px; }
}
@media (prefers-reduced-motion:reduce){
  .rt-map__trail{ animation:none; }
}

/* ============================================================
   Experience Details — Figma 854:2
   Section rhythm (after hero): white → sage → white → sage → white
   Generous padding so each band reads as its own section.
   ============================================================ */
.xd-sec-title{
  margin:0;
  font-size:26px;
  font-weight:800;
  color:var(--dark);
  text-align:start;
}
.xd-sec-title::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin-block-start:8px;
  background:var(--gold);
  border-radius:2px;
}

.xd-hero{
  position:relative;
  width:100%;
  /* White under the stage so the floating stats don't sit on a green band */
  background:var(--white);
  padding:0;
  box-sizing:border-box;
}
.xd-hero__stage{
  position:relative;
  width:100%;
  max-width:none;
  /* Match home / experiences listing heroes (750), not the shorter inset detail stages */
  min-height:750px;
  height:750px;
  margin:0;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
  background:var(--dark);
}
.xd-hero__photo{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.xd-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,42,30,.28) 0%, rgba(0,59,43,.45) 55%, rgba(3,42,30,.55) 100%);
  pointer-events:none;
}
.xd-hero__copy{
  position:absolute;
  inset-block-start:clamp(120px, 14vw, 190px);
  inset-inline-start:max(24px, calc((100% - var(--container)) / 2 + 24px));
  inset-inline-end:24px;
  z-index:2;
  max-width:640px;
  text-align:start;
}
.xd-hero .crumb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:15px;
  font-weight:500;
  color:var(--white);
}
.xd-hero .crumb::before{
  content:"";
  width:8px; height:8px;
  background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
}
.xd-hero__copy h1{
  margin:18px 0 0;
  font-size:clamp(36px,4.6vw,64px);
  font-weight:800;
  line-height:1.25;
  color:var(--sage);
}
.xd-hero__sub{
  margin:16px 0 0;
  font-size:clamp(17px,1.7vw,22px);
  font-weight:500;
  line-height:1.65;
  color:var(--sage);
  max-width:40ch;
}
.xd-hero__actions{ margin-block-start:24px; }
.xd-hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:250px;
  height:58px;
  padding:0 28px;
  border:0;
  border-radius:8px;
  background:var(--gold);
  color:var(--dark);
  font:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
}
.xd-hero__btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.xd-hero__btn.is-loved{ outline:2px solid var(--dark); }
.xd-hero__btn img{ display:block; width:18px; height:16px; }

.xd-stats-wrap{
  position:relative;
  z-index:3;
  /* Same float pattern as home .feature-float — overlap the photo, no green shelf */
  margin-block-start:-72px;
  padding-block-end:0;
}
.xd-stats{
  list-style:none;
  margin:0;
  padding:22px 12px;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:0;
  background:var(--white);
  border-radius:16px;
  box-shadow:0 10px 12px rgba(0,0,0,.1);
}
.xd-stat{
  /* Same row as home .feature-item: icon on start (right in RTL), text beside it */
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  text-align:start;
  padding:8px 16px;
  border-inline-end:1px solid rgba(0,59,43,.1);
}
.xd-stat:last-child{ border-inline-end:0; }
.xd-stat__ico,
.xd-include__badge .xd-ico,
.xd-about__feats .xd-ico,
.xd-moments__grid .xd-ico,
.xd-info__clock.xd-ico{
  flex-shrink:0;
  display:block;
  /* Exact --gold silhouette — same on stats bar + include + feats */
  background-color:var(--gold);
  -webkit-mask-image:var(--ico);
  mask-image:var(--ico);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}
.xd-stat__ico{ width:36px; height:36px; }
.xd-include__badge .xd-ico{ width:22px; height:22px; }
.xd-about__feats .xd-ico{ width:28px; height:28px; }
.xd-moments__grid .xd-ico{ width:36px; height:36px; }
.xd-info__clock.xd-ico{ width:40px; height:40px; margin-block-end:12px; }
.xd-stat > div{ min-width:0; text-align:start; }
.xd-stat strong{
  display:block;
  font-size:16px;
  font-weight:700;
  color:var(--dark);
  line-height:1.3;
}
.xd-stat span{
  display:block;
  margin-block-start:3px;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  color:rgba(0,59,43,.68);
}

.xd-about{
  background:var(--white);
  /* Extra start padding clears the floating stats card */
  padding-block:168px 120px;
}
.xd-about__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:48px;
  align-items:center;
}
.xd-about__text p{
  margin:18px 0 0;
  max-width:46ch;
  font-size:16px;
  line-height:1.9;
  color:rgba(0,59,43,.68);
  text-align:start;
}
.xd-about__feats{
  list-style:none;
  margin:32px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,140px));
  gap:16px;
}
.xd-about__feats li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  padding:12px 8px;
  border-radius:16px;
  background:var(--sage);
  transition:transform .22s ease;
}
.xd-about__feats li:hover{ transform:translateY(-3px); }
.xd-about__feats img{
  width:28px; height:28px; display:block;
}
.xd-about__feats strong{
  font-size:13px;
  font-weight:700;
  color:var(--dark);
}
.xd-about__feats span{
  font-size:10px;
  line-height:1.4;
  color:rgba(0,59,43,.68);
}
.xd-about__media{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:520 / 350;
  width:100%;
  max-width:520px;
  justify-self:end;
  box-shadow:0 8px 20px -6px rgba(3,42,30,.2);
}
.xd-about__media img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
  transition:transform .45s ease;
}
.xd-about__media:hover img{ transform:none; }

.xd-moments{
  background:var(--sage);
  padding-block:112px 120px;
}
.xd-moments .xd-sec-title{ margin-block-end:36px; }
.xd-moments__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:20px;
}
.xd-moments__grid li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  min-height:108px;
  padding:16px 12px;
  border-radius:16px;
  background:var(--white);
  box-shadow:0 6px 14px -8px rgba(3,42,30,.14);
  transition:transform .22s ease;
}
.xd-moments__grid li:hover{ transform:translateY(-3px); }
.xd-moments__grid img{
  width:36px; height:36px; display:block;
}
.xd-moments__grid strong{
  font-size:13px;
  font-weight:700;
  color:var(--dark);
}
.xd-moments__grid span{
  font-size:10px;
  color:rgba(0,59,43,.68);
}

.xd-program{
  background:var(--white);
  padding-block:112px 120px;
}
.xd-program .xd-sec-title{ margin-block-end:40px; }
.xd-timeline{
  list-style:none;
  margin:0;
  padding:18px 0 0;
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:16px;
  position:relative;
}
.xd-timeline::before{
  content:"";
  position:absolute;
  inset-inline:8%;
  inset-block-start:34px;
  height:1px;
  background:rgba(0,59,43,.15);
}
.xd-timeline li{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.xd-timeline__num{
  width:34px; height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--gold);
  color:var(--white);
  font-size:11px;
  font-weight:700;
}
.xd-timeline strong{
  font-size:14px;
  font-weight:700;
  color:var(--dark);
}
.xd-timeline time{
  font-size:12px;
  color:rgba(0,59,43,.68);
}
.xd-timeline p{
  margin:0;
  max-width:16ch;
  font-size:11px;
  line-height:1.7;
  color:rgba(0,59,43,.68);
}

.xd-info{
  background:var(--sage);
  padding-block:112px 120px;
}
.xd-info__grid{
  display:grid;
  grid-template-columns:1.15fr 1fr .95fr;
  gap:0;
  background:var(--white);
  border-radius:16px;
  box-shadow:0 8px 10px rgba(3,42,30,.16);
  overflow:hidden;
}
.xd-info__panel{
  padding:28px 32px 32px;
  border-inline-end:1px solid rgba(0,59,43,.15);
}
.xd-info__panel:last-child{ border-inline-end:0; }
.xd-info__title{
  margin:0 0 22px;
  font-size:23px;
  font-weight:800;
  color:var(--dark);
  text-align:start;
}
.xd-info__panel--best{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.xd-info__panel--best .xd-info__title{ text-align:center; }
.xd-info__clock{
  width:40px; height:40px;
  margin-block-end:12px;
}
.xd-info__panel--best p{
  margin:0;
  max-width:22ch;
  font-size:14px;
  line-height:1.9;
  color:rgba(0,59,43,.68);
}
.xd-include{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 16px;
}
.xd-include li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  font-size:13px;
  font-weight:500;
  color:var(--dark);
}
.xd-include__badge{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--sage);
  display:grid;
  place-items:center;
}
.xd-include__badge img{
  width:22px; height:22px; display:block;
}
.xd-checklist{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.xd-checklist li{
  position:relative;
  padding-inline-start:34px;
  font-size:12px;
  line-height:1.5;
  color:rgba(0,59,43,.68);
  text-align:start;
}
.xd-checklist li::before{
  content:"✓";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:0;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--gold);
  color:var(--white);
  font-size:12px;
  font-weight:700;
  display:grid;
  place-items:center;
}

.xd-similar{
  background:var(--white);
  padding-block:112px 120px;
}
.xd-similar__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-block-end:28px;
}
.xd-similar__viewport{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  gap:12px;
  align-items:center;
}
.xd-similar__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px,260px);
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-block:6px;
}
.xd-similar__track::-webkit-scrollbar{ display:none; }
.xd-similar__nav{
  width:44px; height:44px;
  border:0;
  border-radius:22px;
  background:var(--white);
  box-shadow:0 10px 12px rgba(0,0,0,.1);
  color:var(--dark);
  font-size:22px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease;
}
.xd-similar__nav:hover{ transform:translateY(-2px); }
.xd-card{
  position:relative;
  display:block;
  height:246px;
  border-radius:16px;
  overflow:hidden;
  scroll-snap-align:start;
  box-shadow:0 8px 10px rgba(3,42,30,.16);
  transition:transform .25s ease;
}
.xd-card:hover{ transform:translateY(-4px); }
.xd-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.xd-card:hover img{ transform:none; }
.xd-card::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 45%, rgba(3,42,30,.92) 100%),
    rgba(9,42,35,.18);
  pointer-events:none;
}
.xd-card__tag{
  position:absolute;
  inset-block-start:12px;
  inset-inline-start:12px;
  z-index:2;
  min-width:70px;
  height:30px;
  padding:0 10px;
  border-radius:6px;
  background:var(--gold);
  color:var(--white);
  font-size:11px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.xd-card__copy{
  position:absolute;
  inset-inline:16px;
  inset-block-end:16px;
  z-index:2;
  color:var(--white);
  text-align:start;
}
.xd-card__copy h3{
  margin:0;
  font-size:15px;
  font-weight:700;
}
.xd-card__copy p{
  margin:8px 0 0;
  font-size:11px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
}
.xd-card__copy span{
  display:block;
  margin-block-start:10px;
  font-size:11px;
  color:rgba(255,255,255,.78);
}

@media (max-width:1100px){
  .xd-hero{ padding-inline:0; }
  .xd-hero__copy{
    inset-inline:24px;
    inset-block-start:96px;
    max-width:min(580px, calc(100% - 48px));
  }
  .xd-about__inner{ grid-template-columns:1fr; }
  .xd-about__media{ max-width:640px; width:100%; justify-self:stretch; }
  .xd-moments__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .xd-timeline{ grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:28px; }
  .xd-timeline::before{ display:none; }
  .xd-info__grid{ grid-template-columns:1fr; }
  .xd-info__panel{ border-inline-end:0; border-block-end:1px solid rgba(0,59,43,.12); }
  .xd-info__panel:last-child{ border-block-end:0; }
  .xd-stats{ grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:18px; }
  .xd-stats--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .xd-stat:nth-child(3){ border-inline-end:0; }
}
@media (max-width:700px){
  .xd-hero{ padding:0; }
  .xd-hero__stage{ height:auto; min-height:560px; }
  .xd-hero__copy{ inset-inline:20px; inset-block-start:100px; }
  .xd-stats{ grid-template-columns:1fr 1fr; }
  .xd-stat{ border-inline-end:0; }
  .xd-about__feats{ grid-template-columns:1fr; max-width:220px; }
  .xd-moments__grid{ grid-template-columns:1fr 1fr; }
  .xd-timeline{ grid-template-columns:1fr; }
  .xd-similar__viewport{ grid-template-columns:1fr; }
  .xd-similar__nav{ display:none; }
  .xd-about, .xd-moments, .xd-program, .xd-info, .xd-similar, .evd-similar{ padding-block:72px 80px; }
  .xd-about{ padding-block-start:120px; }
  .evd-similar__grid{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; }
}

/* ============================================================
   Event Details — Figma 1168:2
   Reuses experience-details chrome; lessons baked in:
   full-bleed 750 hero, white under stage, row stats icons (home),
   section rhythm white → sage → white → sage
   ============================================================ */
.xd-stats--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
a.xd-hero__btn{
  text-decoration:none;
  box-sizing:border-box;
}
.evd-program{ background:var(--sage); }
.evd-info{ background:var(--white); }

.evd-similar{
  background:var(--sage);
  padding-block:112px 120px;
}
.evd-similar__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-block-end:36px;
}
.evd-similar__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,227px));
  justify-content:center;
  gap:24px;
}
.evd-region{
  position:relative;
  display:block;
  width:100%;
  height:240px;
  border-radius:16px;
  overflow:hidden;
  background:var(--dark);
  text-decoration:none;
  color:var(--white);
  box-shadow:0 8px 18px -8px rgba(3,42,30,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.evd-region:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 26px -8px rgba(3,42,30,.35);
}
.evd-region img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.evd-region:hover img{ transform:none; }
.evd-region::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(3,42,30,0) 45%, rgba(3,42,30,.9) 100%);
  pointer-events:none;
}
.evd-region__copy{
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  z-index:1;
  padding:20px 24px 26px;
  text-align:start;
}
.evd-region__copy strong{
  display:block;
  font-size:24px;
  font-weight:800;
  line-height:1.3;
}
.evd-region__copy span{
  display:block;
  margin-block-start:6px;
  font-size:14px;
  opacity:.92;
}
@media (max-width:900px){
  .evd-similar__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
  .evd-region{ height:220px; }
  .xd-stats--4{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   Search Results — Figma 1158:2 (+ empty 1181:145)
   Solid dark header band (not photo hero). Results on white.
   ============================================================ */
.sr-hero{
  background:var(--dark);
  color:var(--white);
  padding-block:40px 48px;
  text-align:center;
}
.sr-hero__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.sr-hero__crumb{
  margin:0;
  font-size:14px;
  font-weight:500;
  color:var(--gold);
}
.sr-hero h1{
  margin:6px 0 0;
  font-size:36px;
  font-weight:800;
  line-height:1.35;
  color:var(--white);
}
.sr-hero__count{
  margin:10px 0 0;
  font-size:15px;
  color:rgba(255,255,255,.7);
}
.sr-bar{
  margin-block-start:24px;
  width:min(700px, 100%);
  display:flex;
  align-items:center;
  gap:12px;
  /* RTL: first child (field) sits on the right — matches Figma */
}
.sr-bar__field{
  flex:1;
  min-width:0;
  height:53px;
  display:flex;
  align-items:center;
  gap:10px;
  padding-inline:16px;
  background:var(--sage);
  border-radius:8px;
  box-sizing:border-box;
}
.sr-bar__ico{
  flex-shrink:0;
  font-size:20px;
  line-height:1;
  color:rgba(0,59,43,.68);
}
.sr-bar__field input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  font:inherit;
  font-size:14px;
  font-weight:500;
  color:var(--dark);
  text-align:start;
  outline:none;
}
.sr-bar__filter{
  flex-shrink:0;
  width:104px;
  height:53px;
  border:0;
  border-radius:8px;
  background:var(--white);
  color:var(--dark);
  font:inherit;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
}
.sr-bar__filter:hover{ transform:translateY(-1px); filter:brightness(.98); }

.sr-chips{
  margin-block-start:20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.sr-chip{
  min-height:36px;
  padding:0 18px;
  border:0;
  border-radius:8px;
  background:var(--white);
  color:var(--dark);
  font:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.sr-chip:hover{ transform:translateY(-1px); }
/* Active on dark hero: blends with band (Figma الكل) — reads as white label */
.sr-hero .sr-chip.is-active{
  background:var(--dark);
  color:var(--white);
}
.sr-chip--light{
  background:var(--white);
  color:var(--dark);
  box-shadow:0 4px 12px -6px rgba(3,42,30,.18);
}
.sr-chip--light.is-active{
  background:var(--dark);
  color:var(--white);
}

.sr-results{
  background:var(--sage);
  padding-block:40px 72px;
}
.sr-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,280px));
  justify-content:center;
  gap:40px 32px;
}
.sr-grid[hidden],
.sr-empty[hidden],
.sr-card[hidden]{ display:none !important; }
.sr-card{
  position:relative;
  display:block;
  width:100%;
  height:320px;
  border-radius:16px;
  overflow:hidden;
  background:var(--dark);
  text-decoration:none;
  color:var(--white);
  box-shadow:0 8px 20px -4px rgba(3,42,30,.16);
  transition:transform .25s ease, box-shadow .25s ease;
}
.sr-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px -8px rgba(3,42,30,.32);
}
.sr-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.sr-card:hover img{ transform:none; }
.sr-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(3,42,30,0) 0%, rgba(3,42,30,0) 50%, rgba(3,42,30,.9) 100%),
    linear-gradient(90deg, rgba(9,42,35,.18), rgba(9,42,35,.18));
  pointer-events:none;
}
.sr-card__tag{
  position:absolute;
  z-index:2;
  inset-block-start:16px;
  inset-inline-start:16px;
  min-width:58px;
  height:30px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--gold);
  color:var(--white);
  font-size:12px;
  font-weight:500;
}
.sr-card__copy{
  position:absolute;
  z-index:2;
  inset-inline:16px;
  inset-block-end:24px;
  text-align:start;
}
.sr-card__copy h3{
  margin:0;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  color:var(--white);
}
.sr-card__copy p{
  margin:6px 0 0;
  font-size:12px;
  color:rgba(255,255,255,.8);
}

.sr-empty{
  text-align:center;
  padding-block:48px 24px;
}
.sr-empty__icon{
  width:88px;
  height:88px;
  margin-inline:auto;
  border-radius:50%;
  background:rgba(0,59,43,.06);
  display:grid;
  place-items:center;
  font-size:36px;
  color:rgba(0,59,43,.45);
}
.sr-empty h2{
  margin:32px 0 0;
  font-size:22px;
  font-weight:800;
  color:var(--dark);
}
.sr-empty > p{
  margin:12px 0 0;
  font-size:14px;
  color:rgba(0,59,43,.6);
}
.sr-empty__chips{
  margin-block-start:28px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
@media (max-width:980px){
  .sr-grid{ grid-template-columns:repeat(2, minmax(0,280px)); gap:28px 20px; }
  .sr-hero h1{ font-size:30px; }
}
@media (max-width:640px){
  .sr-bar{ flex-direction:column; align-items:stretch; }
  .sr-bar__filter{ width:100%; }
  .sr-grid{ grid-template-columns:1fr; max-width:320px; margin-inline:auto; }
  .sr-hero{ padding-block:32px 40px; }
}

/* ── Login + Sign Up — Figma 1174:2 / 1174:72 ── */
body[data-page="login"],
body[data-page="signup"]{
  margin:0;
  min-height:100vh;
  background:var(--dark);
}
.lg-page{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:64px 24px 48px;
  overflow-x:hidden;
}
body[data-page="signup"] .lg-page{
  padding-block-start:56px;
  padding-block-end:56px;
}
.lg-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.lg-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.35;
}
.lg-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,59,43,.72);
}
.lg-back{
  position:absolute;
  z-index:2;
  inset-block-start:44px;
  inset-inline-end:48px;
  color:rgba(255,255,255,.8);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:color .2s ease;
}
.lg-back:hover{ color:var(--white); }
.lg-logo{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-block:0 40px;
  text-decoration:none;
  color:var(--sage);
}
.lg-logo__mark{
  width:43px;
  height:43px;
  display:block;
  object-fit:contain;
}
.lg-logo__word{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
}
.lg-logo__ar{
  font-size:23px;
  font-weight:500;
  line-height:1.2;
}
.lg-logo__en{
  margin-block-start:2px;
  font-size:8px;
  letter-spacing:.22em;
  font-weight:500;
  opacity:.9;
}
.lg-card{
  position:relative;
  z-index:2;
  width:min(460px,100%);
  min-height:598px;
  padding:36px 40px 36px;
  background:var(--white);
  border-radius:16px;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.16);
  text-align:center;
  box-sizing:border-box;
}
.lg-card--signup{
  width:min(480px,100%);
  min-height:782px;
  padding:32px 40px 36px;
}
.lg-card h1{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  color:var(--dark);
}
.lg-card__sub{
  margin:8px 0 0;
  font-size:13px;
  font-weight:400;
  color:rgba(0,59,43,.6);
}
.lg-form{
  margin-block-start:30px;
  display:flex;
  flex-direction:column;
  gap:0;
  text-align:start;
}
.lg-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-block-end:20px;
}
.lg-field span{
  font-size:13px;
  font-weight:500;
  color:rgba(0,59,43,.65);
}
.lg-field input{
  width:100%;
  height:52px;
  padding:0 16px;
  border:1px solid rgba(0,59,43,.15);
  border-radius:8px;
  background:var(--white);
  color:var(--dark);
  font-size:15px;
  text-align:start;
  box-sizing:border-box;
}
.lg-field input[dir="ltr"]{ text-align:end; }
.lg-field input:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
}
.lg-forgot{
  display:inline-block;
  margin-block:-8px 16px;
  align-self:flex-start;
  font-size:12px;
  font-weight:500;
  color:var(--gold);
  text-decoration:none;
}
.lg-forgot:hover{ text-decoration:underline; }
.lg-check{
  display:flex;
  align-items:center;
  gap:12px;
  margin-block:4px 20px;
  text-align:start;
  cursor:pointer;
  font-size:13px;
  font-weight:400;
  color:rgba(0,59,43,.7);
  user-select:none;
}
.lg-check input{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  flex-shrink:0;
  margin:0;
  border-radius:4px;
  border:1px solid rgba(0,59,43,.2);
  background:var(--white);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.lg-check input:checked{
  background:var(--gold);
  border-color:var(--gold);
}
.lg-check input:checked::after{
  content:"✓";
  color:var(--white);
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.lg-check input:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.lg-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:54px;
  border-radius:8px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.lg-btn:hover{ transform:translateY(-1px); }
.lg-btn--gold{
  border:none;
  background:var(--gold);
  color:var(--dark);
  box-shadow:0 6px 16px -6px rgba(200,154,56,.55);
}
.lg-btn--ghost{
  border:1px solid rgba(0,59,43,.2);
  background:var(--white);
  color:var(--dark);
}
.lg-or{
  display:flex;
  align-items:center;
  gap:12px;
  margin-block:24px 16px;
  color:rgba(0,59,43,.5);
  font-size:12px;
}
.lg-or::before,
.lg-or::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(0,59,43,.12);
}
.lg-foot{
  margin:24px 0 0;
  font-size:13px;
  font-weight:500;
  color:rgba(0,59,43,.65);
}
.lg-foot a{
  color:var(--gold);
  text-decoration:none;
  font-weight:500;
}
.lg-foot a:hover{ text-decoration:underline; }
@media (max-width:640px){
  .lg-page{ padding:28px 16px 40px; }
  .lg-back{
    inset-block-start:20px;
    inset-inline-end:16px;
    font-size:13px;
  }
  .lg-logo{ margin-block-end:28px; }
  .lg-card{
    min-height:0;
    padding:28px 22px 28px;
  }
}

/* ── Account — Figma 1176:2 / 1181:2 ── */
body[data-page="account"]{ background:var(--sage); }
.ac-hero{
  background:var(--dark);
  padding-block:40px 36px;
  text-align:center;
  color:var(--white);
}
.ac-hero__crumb{
  margin:0;
  font-size:14px;
  font-weight:500;
  color:var(--gold);
}
.ac-hero h1{
  margin:6px 0 0;
  font-size:32px;
  font-weight:700;
  line-height:1.35;
  color:var(--white);
}
.ac-body{
  background:var(--sage);
  padding-block:48px 80px;
}
.ac-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:40px;
  align-items:start;
}
.ac-side{
  background:var(--white);
  border-radius:16px;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.16);
  padding:32px 0 16px;
  overflow:hidden;
}
.ac-side__profile{
  text-align:center;
  padding-inline:24px;
  padding-block-end:24px;
  border-block-end:1px solid rgba(0,59,43,.1);
}
.ac-avatar{
  width:72px;
  height:72px;
  margin-inline:auto;
  border-radius:50%;
  background:var(--dark);
  color:var(--white);
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:700;
}
.ac-side__profile h2{
  margin:16px 0 0;
  font-size:16px;
  font-weight:700;
  color:var(--dark);
}
.ac-side__profile p{
  margin:6px 0 0;
  font-size:12px;
  color:rgba(0,59,43,.6);
}
.ac-side__nav{
  display:flex;
  flex-direction:column;
  margin-block-start:12px;
}
.ac-nav-item{
  appearance:none;
  border:0;
  background:transparent;
  width:100%;
  height:48px;
  padding:0 24px;
  text-align:start;
  font:inherit;
  font-size:14px;
  font-weight:400;
  color:rgba(0,59,43,.75);
  cursor:pointer;
  position:relative;
  transition:background .2s ease, color .2s ease;
}
.ac-nav-item:hover{ background:rgba(0,59,43,.04); }
.ac-nav-item.is-active{
  background:rgba(200,154,56,.1);
  color:var(--dark);
  font-weight:700;
}
.ac-nav-item.is-active::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:3px;
  background:var(--gold);
}
.ac-logout{
  display:block;
  margin:12px 24px 8px;
  padding-block-start:16px;
  border-block-start:1px solid rgba(0,59,43,.1);
  height:auto;
  line-height:48px;
  font-size:14px;
  color:rgba(0,59,43,.75);
  text-decoration:none;
  text-align:start;
}
.ac-logout:hover{ color:var(--dark); }
.ac-panel[hidden]{ display:none !important; }
.ac-panel__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  color:var(--dark);
  text-align:start;
}
.ac-tabs{
  margin-block-start:16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.ac-tab{
  min-width:80px;
  height:36px;
  padding:0 14px;
  border:0;
  border-radius:8px;
  background:var(--white);
  color:var(--dark);
  font:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.ac-tab:hover{ transform:translateY(-1px); }
.ac-tab.is-active{
  background:var(--dark);
  color:var(--white);
}
.ac-bookings{
  margin-block-start:20px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.ac-book[hidden]{ display:none !important; }
.ac-book{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;
  gap:16px 20px;
  align-items:center;
  min-height:120px;
  padding:16px;
  background:var(--white);
  border-radius:16px;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.16);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ac-book:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px -8px rgba(3,42,30,.22);
}
.ac-book__thumb{
  width:88px;
  height:88px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
}
.ac-book__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.ac-book:hover .ac-book__thumb img{ transform:none; }
.ac-book__body{ text-align:start; min-width:0; }
.ac-book__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  height:26px;
  padding:0 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
}
.ac-book__badge--upcoming{
  background:rgba(200,154,56,.12);
  color:var(--dark);
}
.ac-book__badge--done{
  background:var(--dark);
  color:var(--white);
}
.ac-book__badge--cancelled{
  background:rgba(0,59,43,.25);
  color:var(--dark);
}
.ac-book__body h3{
  margin:8px 0 0;
  font-size:16px;
  font-weight:700;
  color:var(--dark);
}
.ac-book__body p{
  margin:6px 0 0;
  font-size:13px;
  color:rgba(0,59,43,.6);
}
.ac-book__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  text-align:end;
  padding-inline-end:8px;
}
.ac-book__meta strong{
  font-size:14px;
  font-weight:700;
  color:var(--dark);
}
.ac-book__meta a{
  font-size:12px;
  font-weight:500;
  color:var(--gold);
  text-decoration:none;
  white-space:nowrap;
}
.ac-book__meta a:hover{ text-decoration:underline; }
.ac-empty{
  margin-block-start:48px;
  text-align:center;
  padding-block:24px 40px;
}
.ac-empty[hidden]{ display:none !important; }
.ac-empty__icon{
  width:96px;
  height:96px;
  margin-inline:auto;
  border-radius:50%;
  background:rgba(0,59,43,.06);
  display:grid;
  place-items:center;
  color:rgba(0,59,43,.5);
}
.ac-empty h3{
  margin:24px 0 0;
  font-size:20px;
  font-weight:700;
  color:var(--dark);
}
.ac-empty > p{
  margin:12px 0 0;
  font-size:14px;
  color:rgba(0,59,43,.6);
  max-width:42ch;
  margin-inline:auto;
}
.ac-empty__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-block-start:24px;
  min-width:220px;
  height:52px;
  padding:0 24px;
  border-radius:8px;
  background:var(--gold);
  color:var(--dark);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease;
}
.ac-empty__btn:hover{ transform:translateY(-1px); }
.ac-overview{
  margin-block-start:24px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.ac-overview__card{
  background:var(--white);
  border-radius:16px;
  padding:24px 20px;
  text-decoration:none;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.16);
  text-align:start;
  transition:transform .2s ease;
}
.ac-overview__card:hover{ transform:translateY(-2px); }
.ac-overview__card h3{
  margin:0;
  font-size:16px;
  color:var(--dark);
}
.ac-overview__card p{
  margin:8px 0 0;
  font-size:13px;
  color:rgba(0,59,43,.6);
}
.ac-settings{
  margin-block-start:24px;
  background:var(--white);
  border-radius:16px;
  padding:8px 24px;
  box-shadow:0 8px 20px -4px rgba(3,42,30,.16);
  text-align:start;
}
.ac-settings__row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-block:18px;
  border-block-end:1px solid rgba(0,59,43,.08);
  font-size:14px;
}
.ac-settings__row span{ color:rgba(0,59,43,.65); }
.ac-settings__row strong{ color:var(--dark); font-weight:700; }
.ac-settings__note{
  margin:0;
  padding-block:18px;
  font-size:13px;
  color:rgba(0,59,43,.55);
}
@media (max-width:980px){
  .ac-layout{ grid-template-columns:1fr; }
  .ac-book{
    grid-template-columns:88px minmax(0,1fr);
  }
  .ac-book__meta{
    grid-column:1 / -1;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding-inline-end:0;
  }
  .ac-overview{ grid-template-columns:1fr; }
}

/* ── 404 — Figma 1176:140 ── */
body[data-page="error"]{ background:var(--sage); }
.err-page{
  background:var(--sage);
  min-height:calc(100vh - 430px);
  display:grid;
  place-items:center;
  padding:56px 16px 72px;
  text-align:center;
}
.err-page__code{
  margin:0;
  font-size:130px;
  font-weight:700;
  line-height:1;
  color:var(--gold);
}
.err-page h1{
  margin:12px 0 0;
  font-size:32px;
  font-weight:700;
  color:var(--dark);
}
.err-page__sub{
  margin:14px auto 0;
  max-width:48ch;
  font-size:15px;
  color:rgba(0,59,43,.6);
}
.err-search{
  margin:28px auto 0;
  width:min(560px,100%);
}
.err-search__field{
  display:flex;
  align-items:center;
  gap:10px;
  height:53px;
  padding-inline:16px;
  background:var(--white);
  border-radius:8px;
  box-sizing:border-box;
}
.err-search__ico{
  flex-shrink:0;
  font-size:20px;
  color:rgba(0,59,43,.68);
}
.err-search__field input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  font:inherit;
  font-size:14px;
  color:var(--dark);
  text-align:start;
  outline:none;
}
.err-actions{
  margin-block-start:28px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}
.err-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:200px;
  height:54px;
  border-radius:8px;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease;
}
.err-btn:hover{ transform:translateY(-1px); }
.err-btn--gold{
  background:var(--gold);
  color:var(--dark);
}
.err-btn--ghost{
  background:var(--white);
  color:var(--dark);
  border:1px solid rgba(0,59,43,.2);
}
@media (max-width:640px){
  .err-page__code{ font-size:88px; }
  .err-page h1{ font-size:26px; }
  .err-btn{ width:100%; max-width:280px; }
}

/* ---- FAQ / legal / blog content pages ---- */
.legal-wrap{
  max-width:860px;
  margin-inline:auto;
}
.legal-doc{
  background:var(--white);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  padding:clamp(24px,4vw,40px);
  text-align:start;
}
.legal-updated{
  margin:0 0 24px;
  font-size:13px;
  color:rgba(0,59,43,.55);
}
.legal-doc h2{
  margin:28px 0 10px;
  font-size:20px;
  color:var(--dark);
}
.legal-doc h2:first-of-type{ margin-block-start:0; }
.legal-doc p,
.legal-doc li{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.85;
  color:rgba(0,59,43,.78);
}
.legal-doc ul{
  margin:0 0 12px;
  padding-inline-start:1.25em;
}
.legal-doc a{ color:var(--dark); text-decoration:underline; text-underline-offset:3px; }
.legal-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-block-start:28px;
  text-align:center;
}
.legal-cta p{
  width:100%;
  margin:0 0 4px;
  font-size:15px;
  color:rgba(0,59,43,.72);
}

.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--white);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  padding:4px 18px 4px;
  text-align:start;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:16px 0;
  font-size:16px;
  font-weight:700;
  color:var(--dark);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--sage);
  color:var(--dark);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  transition:background-color .15s, transform .15s;
}
.faq-item[open] summary::after{
  content:"–";
  background:rgba(200,154,56,.22);
}
.faq-item p{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.8;
  color:rgba(0,59,43,.75);
}
.faq-item a{ color:var(--dark); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.blog-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.blog-card{
  background:var(--white);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 28px -8px rgba(3,42,30,.22);
}
.blog-card__media{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
}
.blog-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.blog-card:hover .blog-card__media img{ transform:none; }
.blog-card__body{
  padding:20px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:start;
  flex:1;
}
.blog-card__tag{
  align-self:flex-start;
  font-size:12px;
  font-weight:700;
  color:var(--gold);
  letter-spacing:.02em;
}
.blog-card__body h2{
  margin:0;
  font-size:18px;
  line-height:1.45;
}
.blog-card__body h2 a{
  color:var(--dark);
  text-decoration:none;
}
.blog-card__body h2 a:hover{ color:var(--gold); }
.blog-card__body p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:rgba(0,59,43,.72);
  flex:1;
}
.blog-card__more{
  margin-block-start:6px;
  font-size:14px;
  font-weight:700;
  color:var(--dark);
  text-decoration:none;
}
.blog-card__more:hover{ color:var(--gold); }
@media (max-width:720px){
  .blog-grid{ grid-template-columns:1fr; }
}

.pk-route-path--6{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (min-width:901px){
  .pk-route-path--6::before{
    inset-inline:calc(100% / 12);
  }
}
@media (max-width:900px){
  .pk-route-path--6{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:560px){
  .pk-route-path--6{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}