/* ============================================================================
   Golden Eagle Expedition — Vivid Color-Block
   Direction: vivid-blocks · light · base hue 118 (lime) → pop 268 (violet) →
   zest 73 (amber). Surfaces faintly tinted warm (baseHue 31) to echo the
   eagle's amber-gold mark. Display = Clash Display; text = Hanken Grotesk.
   ========================================================================= */

/* ---- self-hosted fonts -------------------------------------------------- */
@font-face{
  font-family:"Clash Display";
  src:url("vendor/fonts/clash-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Clash Display";
  src:url("vendor/fonts/clash-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("vendor/fonts/hanken-latin.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("vendor/fonts/hanken-latinext.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+0304,U+0308,U+0329,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- tokens ------------------------------------------------------------- */
:root{
  /* three saturated hues — the only colour-block fills */
  --brand:     oklch(62% 0.205 118);   /* logo-lime, block-strength    */
  --brand-700: oklch(50% 0.180 118);   /* pressed / hover-dark         */
  --pop:       oklch(60% 0.205 268);   /* base +150° → electric violet */
  --pop-ink:   oklch(45% 0.190 268);
  --zest:      oklch(80% 0.170 73);     /* base −45° → amber-gold       */
  --zest-700:  oklch(66% 0.165 64);

  --ink:       oklch(23% 0.040 118);    /* near-black, lime-tinted      */
  --ink-soft:  oklch(42% 0.030 118);
  --on-pop:    oklch(99% 0 0);          /* text on dark blocks          */
  --on-brand:  oklch(20% 0.06 118);     /* ink reads on the lime brand  */
  --on-zest:   oklch(24% 0.07 64);      /* ink on amber                 */

  /* surfaces faintly tinted warm (eagle amber, baseHue ~31) */
  --surface:   oklch(98.5% 0.012 56);
  --surface-2: oklch(95.5% 0.022 56);
  --surface-3: oklch(92.5% 0.028 56);
  --line:      oklch(88% 0.030 56);

  --radius:     26px;
  --radius-lg:  34px;
  --radius-sm:  16px;
  --radius-pill:999px;

  --shadow:    0 18px 44px -22px oklch(23% 0.06 118 / .42);
  --shadow-lg: 0 36px 70px -30px oklch(23% 0.07 118 / .50);
  --shadow-pop:0 16px 38px -18px oklch(60% 0.20 268 / .55);

  --space:     clamp(4.5rem, 3rem + 7vw, 9rem);
  --inset:     clamp(12px, 3vw, 28px);   /* panel inset from viewport edge */
  --pad:       clamp(1.4rem, 1rem + 3.4vw, 3.4rem);
  --maxw:      1280px;

  /* type scale */
  --t-display: clamp(2.55rem, 1rem + 7vw, 6.6rem);
  --t-h2:      clamp(2.05rem, 1.2rem + 3vw, 3.5rem);
  --t-h3:      clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  --t-body:    clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --t-sm:      clamp(.92rem, .88rem + .2vw, 1rem);

  --font-display:"Clash Display","Hanken Grotesk",system-ui,sans-serif;
  --font-text:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  --ease:      cubic-bezier(.2,.8,.2,1);
  --ease-back: cubic-bezier(.34,1.4,.5,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --surface:   oklch(20% 0.030 56);
    --surface-2: oklch(24% 0.034 56);
    --surface-3: oklch(28% 0.038 56);
    --line:      oklch(34% 0.030 56);
    --ink:       oklch(95% 0.020 90);
    --ink-soft:  oklch(78% 0.024 90);
    --on-brand:  oklch(16% 0.06 118);
    --brand:     oklch(66% 0.21 118);
    --pop:       oklch(64% 0.21 268);
    --zest:      oklch(82% 0.17 73);
    --shadow:    0 18px 44px -22px oklch(0% 0 0 / .65);
    --shadow-lg: 0 36px 70px -30px oklch(0% 0 0 / .72);
  }
}

/* ---- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
/* Lenis drives scrolling; native smooth would conflict. Reduced-motion → native. */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:smooth} }
body{
  font-family:var(--font-text);
  font-size:var(--t-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--pop);outline-offset:3px;border-radius:6px}
::selection{background:var(--brand);color:var(--on-brand)}

/* ---- typography helpers ------------------------------------------------- */
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.0;letter-spacing:-.02em;overflow-wrap:break-word}
.display{font-size:var(--t-display);line-height:.94;letter-spacing:-.03em}
.h2{font-size:var(--t-h2);line-height:1.02;letter-spacing:-.025em}
.h3{font-size:var(--t-h3);letter-spacing:-.015em}
p{text-wrap:pretty}
.lead{font-size:clamp(1.12rem,1.02rem + .55vw,1.42rem);line-height:1.5;color:var(--ink-soft)}
.stroke{-webkit-text-stroke:2.5px currentColor;color:transparent;-webkit-text-fill-color:transparent}

/* eyebrow / kicker pill */
.kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-text);font-weight:800;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.14em;
  padding:.5rem .95rem;border-radius:var(--radius-pill);
  background:var(--pop);color:var(--on-pop);
}
.kicker.on-amber{background:var(--zest);color:var(--on-zest)}
.kicker.on-ink{background:var(--ink);color:var(--surface)}
.kicker svg{width:1.05em;height:1.05em}

/* ---- layout primitives -------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}

/* a colour panel = giant rounded card inset from the viewport so the
   tinted surface shows as a frame around it (the signature structural move) */
.panel{
  margin-inline:var(--inset);
  border-radius:var(--radius-lg);
  padding-block:var(--space);
  position:relative;
  overflow:clip;
}
.panel + .panel{margin-top:clamp(14px,2.4vw,26px)}
.panel-brand{background:var(--brand);color:var(--on-brand)}
.panel-pop{background:var(--pop);color:var(--on-pop)}
.panel-zest{background:var(--zest);color:var(--on-zest)}
.panel-ink{background:var(--ink);color:var(--surface)}
.panel-surface{background:var(--surface-2)}
.panel-tight{padding-block:clamp(2.2rem,1.6rem+2.5vw,3.4rem)}

.section-head{max-width:760px;margin-bottom:clamp(2rem,1.4rem+2vw,3.2rem)}
.section-head .h2{margin:.7rem 0 .6rem}
.section-head p{color:var(--ink-soft);max-width:60ch}
.panel-pop .section-head p,.panel-ink .section-head p{color:oklch(99% 0 0 / .82)}
.panel-brand .section-head p{color:oklch(20% 0.06 118 / .82)}

/* ---- reveal animation --------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.06s}
[data-reveal][data-delay="2"]{transition-delay:.12s}
[data-reveal][data-delay="3"]{transition-delay:.18s}
[data-reveal][data-delay="4"]{transition-delay:.24s}
[data-reveal][data-delay="5"]{transition-delay:.30s}
[data-hero-el]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-hero-el].in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-hero-el]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ========================================================================
   DEMO BANNER (invariant)
   ===================================================================== */
.demo-banner{
  background:var(--ink);color:var(--surface);
  font-size:.85rem;line-height:1.4;font-weight:500;
  padding:.6rem 1rem;text-align:center;
}
.demo-banner b{font-weight:800;color:var(--zest)}
.demo-banner a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ========================================================================
   NAV — sticky chunky pill
   ===================================================================== */
.nav{
  position:sticky;top:0;z-index:60;
  padding:clamp(.5rem,1.4vw,.85rem) var(--inset);
}
.nav-inner{
  max-width:1320px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:oklch(98.5% 0.012 56 / .82);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
  backdrop-filter:saturate(1.4) blur(8px);
  border:1.5px solid var(--line);
  border-radius:var(--radius-pill);
  padding:.5rem .65rem .5rem 1.1rem;
  box-shadow:0 10px 30px -20px oklch(23% .06 118 / .4);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.nav.scrolled .nav-inner{box-shadow:var(--shadow);background:oklch(99% 0.012 56 / .92)}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand img{height:34px;width:auto}
.brand .bname{font-family:var(--font-display);font-weight:700;font-size:1.04rem;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.brand .bname small{display:block;font-family:var(--font-text);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.18em}
.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a{
  font-weight:600;font-size:.96rem;padding:.55rem .85rem;border-radius:var(--radius-pill);
  color:var(--ink-soft);transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--ink);background:var(--surface-3)}
.nav-cta{display:flex;align-items:center;gap:.5rem}
.nav-burger{display:none}

/* ========================================================================
   BUTTONS — chunky pills
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-text);font-weight:800;font-size:1rem;
  padding:.95rem 1.6rem;min-height:52px;
  border-radius:var(--radius-pill);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),color .22s var(--ease);
  white-space:nowrap;
}
.btn svg{width:1.15em;height:1.15em;transition:transform .22s var(--ease)}
.btn .arr{transition:transform .22s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn:hover .arr{transform:translate(3px,0)}

.btn-wa{background:var(--brand);color:var(--on-brand);box-shadow:0 14px 30px -14px oklch(62% .2 118 / .7)}
.btn-wa:hover{background:var(--brand-700);color:var(--surface);box-shadow:0 18px 38px -14px oklch(50% .18 118 / .8)}
.btn-pop{background:var(--pop);color:var(--on-pop);box-shadow:var(--shadow-pop)}
.btn-pop:hover{background:var(--pop-ink)}
.btn-ink{background:var(--ink);color:var(--surface)}
.btn-ink:hover{background:oklch(30% .05 118)}
.btn-ghost{background:transparent;border:2px solid currentColor;font-weight:700}
.btn-ghost:hover{background:currentColor}
.btn-ghost:hover span,.btn-ghost:hover svg{color:var(--surface);position:relative}
/* on-light ghost label flip */
.panel-surface .btn-ghost:hover,.hero-copy .btn-ghost:hover{color:var(--ink)}
.btn-sm{padding:.7rem 1.1rem;min-height:44px;font-size:.92rem}
.btn-block{width:100%}
.btn-white{background:var(--surface);color:var(--ink)}
.btn-white:hover{background:oklch(100% 0 0)}

/* ========================================================================
   HERO — split: left brand block + right duotone photo
   ===================================================================== */
.hero{
  margin-inline:var(--inset);
  margin-top:clamp(.4rem,1vw,1rem);
  border-radius:var(--radius-lg);
  background:var(--brand);
  color:var(--on-brand);
  overflow:clip;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  align-items:stretch;
}
.hero-copy{
  padding:clamp(2.2rem,1.6rem+4vw,5rem) clamp(1.6rem,1.2rem+3vw,4rem);
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.2rem,1rem+1vw,1.8rem);
  position:relative;z-index:2;
}
.hero h1{margin:0}
.hero .accent{color:var(--surface)}             /* "people who live here" pops white */
.hero-sub{font-size:clamp(1.08rem,1rem+.6vw,1.4rem);line-height:1.5;max-width:46ch;color:oklch(20% .06 118 / .86);font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;font-weight:700;font-size:.95rem}
.hero-meta .dot{display:inline-flex;align-items:center;gap:.45rem}
.hero-meta svg{width:1.1em;height:1.1em}

.hero-media{
  position:relative;overflow:clip;min-height:380px;
  border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);
}
.hero-media .duo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
/* sticker badge pinned to hero photo corner */
.sticker{
  position:absolute;z-index:4;
  display:grid;place-items:center;text-align:center;
  width:clamp(98px,12vw,134px);height:clamp(98px,12vw,134px);
  border-radius:var(--radius-pill);
  background:var(--zest);color:var(--on-zest);
  font-family:var(--font-display);font-weight:700;line-height:1;
  box-shadow:var(--shadow);
  transform:rotate(-8deg);
  border:4px solid var(--surface);
}
.sticker.tl{top:clamp(1rem,2.5vw,1.8rem);left:clamp(-.4rem,-.5vw,0);transform:rotate(-8deg)}
.sticker .big{font-size:clamp(1.4rem,1.1rem+1.2vw,2rem)}
.sticker .sm{font-size:.62rem;font-family:var(--font-text);font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-top:.25em}

/* duotone treatment — palette-keyed, makes any photo art-directed */
.duotone{position:relative;isolation:isolate}
.duotone>img{filter:grayscale(1) contrast(1.06) brightness(1.02)}
.duotone::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;background:var(--duo,var(--brand));opacity:.86;pointer-events:none}
.duotone::after{content:"";position:absolute;inset:0;z-index:2;mix-blend-mode:screen;background:var(--duo2,var(--zest));opacity:.16;pointer-events:none}
.duotone.duo-pop{--duo:var(--pop);--duo2:var(--zest)}
.duotone.duo-zest{--duo:var(--zest-700);--duo2:var(--brand)}
.duotone.duo-ink{--duo:var(--ink);--duo2:var(--brand)}
.duotone.duo-brand{--duo:var(--brand-700);--duo2:var(--zest)}

/* ========================================================================
   TRUST — colour band stat strip
   ===================================================================== */
.trust{display:grid;grid-template-columns:repeat(4,1fr)}
.trust .stat{
  padding:clamp(1.2rem,1rem+1.5vw,2rem) clamp(1rem,.8rem+1vw,1.8rem);
  text-align:center;position:relative;
}
.trust .stat + .stat::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1.5px;background:oklch(99% 0 0 / .28)}
.trust .n{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,1.4rem+3vw,3.8rem);line-height:1;letter-spacing:-.03em}
.trust .l{margin-top:.5rem;font-weight:700;font-size:.86rem;text-transform:uppercase;letter-spacing:.08em;opacity:.82}

/* ========================================================================
   OFFERINGS — uniform grid; each card header band rotates colour
   ===================================================================== */
.offers-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(1rem,.8rem+1vw,1.6rem);
}
.card{
  background:var(--surface);
  border-radius:var(--radius);
  overflow:clip;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow);
  border:1.5px solid var(--line);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.card-media{position:relative;aspect-ratio:3/2;overflow:clip}
.card-media>.duotone,.card-media>.duotone>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-media>.duotone>img{transition:transform .6s var(--ease)}
.card:hover .card-media>.duotone>img{transform:scale(1.06)}
/* colour header tab on the media */
.card-tab{
  position:absolute;top:0;left:0;z-index:3;
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;
  padding:.5rem .9rem;border-bottom-right-radius:var(--radius-sm);
}
.card-tab svg{width:1.05em;height:1.05em}
.card-price{
  position:absolute;bottom:.8rem;right:.8rem;z-index:3;
  display:inline-flex;align-items:baseline;gap:.45rem;
  background:var(--zest);color:var(--on-zest);
  padding:.5rem .9rem;border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:700;
  box-shadow:var(--shadow);
}
.card-price .now{font-size:1.18rem;letter-spacing:-.02em}
.card-price .was{font-family:var(--font-text);font-weight:700;font-size:.78rem;text-decoration:line-through;opacity:.62}
.card-body{padding:1.3rem 1.35rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card-meta{font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--pop-ink)}
.card h3{font-size:1.22rem;line-height:1.1}
.card-desc{color:var(--ink-soft);font-size:.98rem;line-height:1.5;flex:1}
.card-foot{display:flex;align-items:center;gap:.6rem;margin-top:.4rem}
.card-foot .btn{flex:1}
.card-link{
  flex-shrink:0;width:48px;height:48px;border-radius:var(--radius-pill);
  display:grid;place-items:center;background:var(--surface-3);color:var(--ink);
  transition:background .2s,color .2s,transform .2s var(--ease);
}
.card-link:hover{background:var(--ink);color:var(--surface);transform:translateY(-2px)}
.card-link svg{width:1.2em;height:1.2em}

/* colour rotation for card tabs (no two adjacent share a hue → handled in markup) */
.tab-brand{background:var(--brand);color:var(--on-brand)}
.tab-pop{background:var(--pop);color:var(--on-pop)}
.tab-zest{background:var(--zest);color:var(--on-zest)}
.tab-ink{background:var(--ink);color:var(--surface)}

/* ========================================================================
   MARQUEE — infinite ribbon
   ===================================================================== */
.marquee{
  background:var(--ink);color:var(--surface);
  margin-inline:var(--inset);border-radius:var(--radius-pill);
  overflow:clip;padding:.9rem 0;
}
.marquee-track{display:flex;width:max-content;gap:0;animation:marq 32s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:1.6rem;padding-inline:.8rem;font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,.9rem+.6vw,1.4rem);letter-spacing:.01em;white-space:nowrap}
.marquee-track .star{color:var(--zest);font-size:1.1em}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none;justify-content:center;width:100%}}

/* ========================================================================
   DESTINATIONS — strip of rounded duotone tiles
   ===================================================================== */
.dest-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* 6 tiles → clean 3×2 */
  gap:clamp(.8rem,.6rem+1vw,1.3rem);
}
@media (max-width: 860px){ .dest-grid{grid-template-columns:repeat(2,1fr)} }
.dest{
  position:relative;border-radius:var(--radius);overflow:clip;
  aspect-ratio:4/5;box-shadow:var(--shadow);
  border:6px solid var(--surface);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.dest .duotone,.dest .duotone>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dest .duotone>img{transition:transform .6s var(--ease)}
.dest:hover{transform:translateY(-6px) rotate(-1deg);border-color:var(--zest)}
.dest:hover .duotone>img{transform:scale(1.07)}
.dest-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1.1rem 1rem .95rem;background:linear-gradient(to top,oklch(20% .05 118 / .85),transparent)}
.dest-cap .name{font-family:var(--font-display);font-weight:700;color:var(--surface);font-size:1.16rem;line-height:1.05}
.dest-cap .sub{color:oklch(99% 0 0 / .8);font-weight:600;font-size:.82rem;margin-top:.15rem}

/* ========================================================================
   WHY — colour block w/ icon-chip cards
   ===================================================================== */
.why-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(.9rem,.7rem+1vw,1.4rem);
}
.why-card{
  background:oklch(99% 0 0 / .12);
  border:1.5px solid oklch(99% 0 0 / .22);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem 1.6rem;
  transition:transform .26s var(--ease),background .26s var(--ease);
}
.why-card:hover{transform:translateY(-5px);background:oklch(99% 0 0 / .2)}
.why-ico{
  width:54px;height:54px;border-radius:var(--radius-sm);
  display:grid;place-items:center;margin-bottom:1rem;
  background:var(--zest);color:var(--on-zest);box-shadow:var(--shadow);
}
.why-ico svg{width:1.6rem;height:1.6rem;stroke-width:2.2}
.why-card h3{font-size:1.18rem;margin-bottom:.45rem;line-height:1.12}
.why-card p{font-size:.96rem;line-height:1.5;color:oklch(99% 0 0 / .82)}
/* on the brand (lime) panel, ink text reads better */
.panel-brand .why-card p{color:oklch(20% .06 118 / .85)}
.panel-brand .why-card{background:oklch(20% .06 118 / .08);border-color:oklch(20% .06 118 / .18)}
.panel-brand .why-card:hover{background:oklch(20% .06 118 / .12)}
.panel-brand .why-ico{background:var(--ink);color:var(--zest)}

/* ========================================================================
   REVIEWS — chunky quote cards on surface
   ===================================================================== */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(1rem,.8rem+1vw,1.5rem)}
.rev{
  background:var(--surface);border-radius:var(--radius);
  padding:1.6rem 1.5rem;box-shadow:var(--shadow);border:1.5px solid var(--line);
  display:flex;flex-direction:column;gap:1rem;
  position:relative;overflow:clip;
}
.rev::before{content:"";position:absolute;top:0;left:0;width:100%;height:7px;background:var(--accent-bar,var(--pop))}
.rev:nth-child(1){--accent-bar:var(--brand)}
.rev:nth-child(2){--accent-bar:var(--pop)}
.rev:nth-child(3){--accent-bar:var(--zest)}
.rev .stars{display:flex;gap:.18rem;color:var(--zest-700)}
.rev .stars svg{width:1.25rem;height:1.25rem;fill:currentColor;stroke:none}
.rev .stars .empty{color:var(--line)}
.rev p{font-size:1.06rem;line-height:1.55;color:var(--ink);flex:1;font-weight:500}
.rev .who{font-weight:800;font-size:.85rem;color:var(--ink-soft);display:flex;align-items:center;gap:.5rem}
.rev .who::before{content:"";width:1.6rem;height:2px;background:var(--accent-bar,var(--pop))}

/* ========================================================================
   CTA BAND — full duotone photo w/ overlay lockup
   ===================================================================== */
.cta-band{
  margin-inline:var(--inset);border-radius:var(--radius-lg);overflow:clip;
  position:relative;isolation:isolate;
  min-height:clamp(380px,46vw,520px);
  display:grid;place-items:center;text-align:center;
  padding:var(--space) clamp(1.2rem,1rem+3vw,3rem);
  color:var(--surface);
}
.cta-media{position:absolute;inset:0;z-index:-2}
.cta-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);will-change:transform}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:oklch(23% .05 118 / .68);mix-blend-mode:multiply}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,oklch(62% .2 118 / .45),oklch(60% .2 268 / .35))}
.cta-inner{max-width:760px;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.cta-inner .h2{color:var(--surface)}
.cta-inner p{color:oklch(99% 0 0 / .9);font-size:clamp(1.05rem,1rem+.5vw,1.3rem);max-width:52ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ========================================================================
   CONTACT
   ===================================================================== */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.4rem,1rem+3vw,3.2rem);align-items:start}
.contact-list{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
.contact-row{
  display:flex;align-items:center;gap:1rem;
  background:oklch(99% 0 0 / .12);border:1.5px solid oklch(99% 0 0 / .2);
  border-radius:var(--radius-sm);padding:1rem 1.15rem;
  transition:background .2s,transform .2s var(--ease);
}
a.contact-row:hover{background:oklch(99% 0 0 / .2);transform:translateX(4px)}
.contact-row .ci{width:46px;height:46px;flex-shrink:0;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--zest);color:var(--on-zest)}
.contact-row .ci svg{width:1.3rem;height:1.3rem}
.contact-row .ct{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.contact-row .ct .k{font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;opacity:.78}
.contact-row .ct .v{font-weight:700;font-size:1.02rem;overflow-wrap:anywhere}
.contact-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.map-card{border-radius:var(--radius);overflow:clip;box-shadow:var(--shadow-lg);border:6px solid var(--surface);background:var(--surface-2);min-height:340px}
.map-card iframe{display:block;width:100%;height:100%;min-height:340px;border:0;filter:saturate(1.05)}

/* ========================================================================
   FOOTER
   ===================================================================== */
.footer{padding:clamp(2.4rem,2rem+2vw,3.6rem) 0 2rem;color:var(--ink-soft)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem;align-items:flex-start;margin-bottom:2rem}
.foot-brand{display:flex;align-items:center;gap:.7rem}
.foot-brand img{height:42px;width:auto}
.foot-brand .bname{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:1.4rem}
.foot-links a{font-weight:600;color:var(--ink-soft)}
.foot-links a:hover{color:var(--ink)}
.foot-bottom{border-top:1.5px solid var(--line);padding-top:1.6rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;font-size:.85rem}
.foot-bottom .disc{max-width:62ch;line-height:1.5}
.foot-bottom b{color:var(--ink)}

/* ========================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 940px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{min-height:300px;aspect-ratio:16/11;border-radius:0 0 var(--radius-lg) var(--radius-lg);border-top-right-radius:0}
  .hero-copy{order:1}
  .contact-grid{grid-template-columns:1fr}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust .stat:nth-child(3)::before,.trust .stat:nth-child(2n+1)::before{display:none}
  .trust .stat{border-top:1.5px solid oklch(99% 0 0 / .18)}
  .trust .stat:nth-child(-n+2){border-top:0}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;
    position:absolute;top:calc(100% + .5rem);left:var(--inset);right:var(--inset);
    background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);
    padding:.6rem;box-shadow:var(--shadow-lg);gap:.2rem;
  }
  .nav-links.open a{padding:.85rem 1rem;border-radius:var(--radius-sm);font-size:1.05rem}
  .nav-burger{
    display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;
    border-radius:var(--radius-pill);background:var(--ink);color:var(--surface);
  }
  .nav-burger svg{width:1.4rem;height:1.4rem}
  .nav-cta .btn{display:none}
  .nav-inner{position:relative}
}
@media (max-width: 560px){
  :root{--inset:10px;--t-display:clamp(2.3rem,1.1rem+6vw,3.2rem)}
  .hero-copy{padding-left:1.25rem;padding-right:1.25rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .cta-actions .btn,.contact-actions .btn{width:100%}
  .cta-actions,.contact-actions{flex-direction:column;align-items:stretch}
  .card-foot{flex-direction:row}
  .trust{grid-template-columns:repeat(2,1fr)}
  .sticker{display:none}
  .foot-bottom{flex-direction:column}
}
@media (max-width: 380px){
  .offers-grid,.dest-grid,.why-grid,.rev-grid{grid-template-columns:1fr}
  .brand .bname small{display:none}
}