/* ALOHA Resorts & Conventions — Global stylesheet
   Brand palette: Forest Green + Warm Gold, extracted directly from the ALOHA logo.
   All colors use CSS vars — change once, updates everywhere. */

:root{
  /* === ALOHA BRAND PALETTE — Forest Green + Gold === */
  --c-ink:       #0A3D25;   /* deep forest — nav, footer, dark sections   */
  --c-ink-2:     #0F5235;   /* medium forest — hover states on dark bg     */
  --c-brand:     #106744;   /* true logo green — accent on light sections  */
  --c-gold:      #C8963C;   /* logo sun gold — CTAs, hairlines, accents    */
  --c-gold-hi:   #DBA84A;   /* hover gold                                  */
  --c-cream:     #FAF8F3;   /* warm off-white — default page background    */
  --c-cream-2:   #F0EAE0;   /* slightly deeper cream — alternate sections  */
  --c-earth:     #5A8870;   /* mid-tone forest — captions, secondary text  */
  --c-text:      #162E1F;   /* dark body text — green-toned near-black     */
  --c-muted:     #4A6555;   /* muted green-grey — subtitles, captions      */
  --c-line:      rgba(10,61,37,.10);
  --c-line-dark: rgba(250,248,243,.15);
  --c-white:     #FFFFFF;

  /* === TYPOGRAPHY === */
  --f-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-eyebrow: "Inter", system-ui, sans-serif;
  --w-display: 400;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.28em;

  /* === SCALE === */
  --fs-hero:    clamp(48px, 7.4vw, 112px);
  --fs-h1:      clamp(36px, 4.6vw, 72px);
  --fs-h2:      clamp(28px, 3.2vw, 48px);
  --fs-h3:      clamp(22px, 2.0vw, 30px);
  --fs-lede:    clamp(17px, 1.3vw, 21px);
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-eyebrow: 11px;

  /* === LAYOUT === */
  --max:        1280px;
  --max-narrow: 880px;
  --pad-x:      clamp(20px, 4vw, 56px);
  --sec-v:      clamp(72px, 9vw, 136px);

  /* === MOTION === */
  --ease:   cubic-bezier(.2,.7,.2,1);
  --t-fast: .18s var(--ease);
  --t:      .32s var(--ease);
  --t-slow: .6s var(--ease);

  /* === SHAPE & SHADOW === */
  --radius:    12px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(10,61,37,.04), 0 8px 24px -12px rgba(10,61,37,.12);
  --shadow-md: 0 16px 40px -16px rgba(10,61,37,.24);
  --shadow-lg: 0 32px 64px -24px rgba(10,61,37,.32);
}

/* Palette variants applied by tweak system */
body[data-palette="forest"]{
  --c-ink:#1A3A2A; --c-ink-2:#244E3A; --c-gold:#C88A0A; --c-gold-hi:#E6A820;
  --c-cream:#FAF7F2; --c-cream-2:#F1ECDF; --c-earth:#8B7355; --c-text:#1F2B24; --c-muted:#5C6661;
  --c-line:rgba(26,58,42,.10); --c-line-dark:rgba(250,247,242,.16);
}
body[data-palette="midnight"]{
  --c-ink:#0F2419; --c-ink-2:#173626; --c-gold:#D4A574; --c-gold-hi:#E5BE94;
  --c-cream:#F2EDE4; --c-cream-2:#E8E0D1; --c-earth:#6B5640; --c-text:#1A2620; --c-muted:#5E6B62;
}
body[data-palette="cream"]{
  --c-ink:#FAF7F2; --c-ink-2:#F1ECDF;        /* swap — light is dominant */
  --c-gold:#C88A0A; --c-gold-hi:#A6720A;
  --c-cream:#1A3A2A; --c-cream-2:#244E3A;    /* dark accents */
  --c-earth:#8B7355; --c-text:#1F2B24; --c-muted:#5C6661;
}

/* Type variants */
body[data-type="fraunces"]{
  --f-display:"Fraunces","Cormorant Garamond",Georgia,serif;
  --w-display:400;
  --display-tracking:-0.015em;
}
body[data-type="playfair"]{
  --f-display:"Playfair Display","Cormorant Garamond",Georgia,serif;
  --w-display:500;
  --display-tracking:-0.005em;
}
body[data-type="tenor"]{
  --f-display:"Tenor Sans","Cormorant Garamond",Georgia,serif;
  --w-display:400;
  --display-tracking:0.02em;
}

/* ============ Accessibility ============ */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  background:var(--c-ink);color:var(--c-cream);
  padding:12px 24px;font-size:14px;font-weight:600;letter-spacing:.04em;
  border-radius:0 0 var(--radius) var(--radius);z-index:10000;
  text-decoration:none;
}
.skip-link:focus{
  position:fixed;left:50%;transform:translateX(-50%);
  width:auto;height:auto;overflow:visible;
  outline:3px solid var(--c-gold);outline-offset:2px;
}

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--c-text);
  background:var(--c-cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:var(--w-display);letter-spacing:var(--display-tracking);line-height:1.06;color:var(--c-ink);text-wrap:pretty}
body[data-palette="cream"] h1,
body[data-palette="cream"] h2,
body[data-palette="cream"] h3,
body[data-palette="cream"] h4{color:var(--c-cream)} /* in cream palette ink is light */
hr{border:0;border-top:1px solid var(--c-line);margin:0}

/* ============ Utilities ============ */
.container{max-width:var(--max);margin:0 auto;padding-inline:var(--pad-x)}
.narrow{max-width:var(--max-narrow);margin-inline:auto}
.eyebrow{
  font-family:var(--f-eyebrow);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase;
  color:var(--c-gold);
  display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:28px;height:1.5px;background:currentColor;display:inline-block;opacity:0.75;flex-shrink:0}
.eyebrow.no-rule::before{display:none}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--c-muted);max-width:60ch}
.section{padding-block:var(--sec-v)}
.section--tight{padding-block:clamp(56px,6vw,96px)}
.section--ink{background:var(--c-ink);color:var(--c-cream)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:var(--c-cream)}
.section--warm{background:#1A0808;color:var(--c-cream)}
.section--warm h1,.section--warm h2,.section--warm h3,.section--warm h4{color:var(--c-cream)}
.section--warm .eyebrow{color:var(--c-gold);border-color:rgba(200,150,60,.35)}
.section--slate{background:#0F1419;color:var(--c-cream)}
.section--slate h1,.section--slate h2,.section--slate h3,.section--slate h4{color:var(--c-cream)}
.section--slate .eyebrow{color:var(--c-gold);border-color:rgba(200,150,60,.3)}
.section--cream2{background:var(--c-cream-2)}
.fineprint{font-size:var(--fs-small);color:var(--c-muted);letter-spacing:.02em}
.row{display:flex;gap:24px;flex-wrap:wrap}
.center{text-align:center}
.hairline{height:1px;background:var(--c-line);border:0}
.hairline--gold{background:linear-gradient(90deg,transparent,var(--c-gold),transparent)}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;
  font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--radius);
  transition:var(--t);
  cursor:pointer;white-space:nowrap;
  border:1px solid transparent;
}
.btn--gold{background:var(--c-gold);color:var(--c-ink)}
.btn--gold:hover{background:var(--c-gold-hi);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn--ink{background:var(--c-ink);color:var(--c-cream)}
.btn--ink:hover{background:var(--c-ink-2)}
.btn--ghost{border-color:var(--c-ink);color:var(--c-ink)}
.btn--ghost:hover{background:var(--c-ink);color:var(--c-cream)}
.btn--ghost-light{border-color:var(--c-cream);color:var(--c-cream)}
.btn--ghost-light:hover{background:var(--c-cream);color:var(--c-ink)}
.btn--sm{padding:12px 20px;font-size:12px}
.btn .arr{display:inline-block;transition:transform var(--t)}
.btn:hover .arr{transform:translateX(4px)}
.btn--link{padding:0;background:none;color:var(--c-ink);border-bottom:1.5px solid var(--c-gold);padding-bottom:2px;letter-spacing:.1em;border-radius:0}
.btn--link:hover{color:var(--c-gold);border-bottom-color:var(--c-gold-hi)}

/* ============ Navigation ============ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:20px var(--pad-x);
  transition:background var(--t),color var(--t),padding var(--t),border-color var(--t),box-shadow var(--t);
  color:var(--c-cream);
  background:linear-gradient(180deg,rgba(10,61,37,.72) 0%,transparent 100%);
}
.nav.is-solid{
  background:rgba(250,248,243,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--c-line);
  color:var(--c-ink);
  padding-block:14px;
  box-shadow:0 4px 32px rgba(10,61,37,.18);
}
.nav.is-light{color:var(--c-ink)}
.nav.is-light.is-solid{background:rgba(250,248,243,.97);border-bottom:1px solid var(--c-line)}

/* Logo */
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;position:relative}
.nav-logo-img{
  height:58px;width:auto;object-fit:contain;display:block;
  opacity:1;
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.nav-logo-img:hover{opacity:1;transform:scale(1.02)}
.nav-logo-img--green{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  opacity:0;
  pointer-events:none;
}
.nav-logo:hover .nav-logo-img--green{transform:translateY(-50%) scale(1.02)}
/* On scrolled cream nav: show ALOHA brand green logo */
.nav.is-solid .nav-logo-img{
  height:52px;opacity:1;
}
.nav.is-solid .nav-logo-img--white{opacity:0;pointer-events:none}
.nav.is-solid .nav-logo-img--green{opacity:1}
.nav-logo .mark{display:none}

/* Solid (cream) nav — link colours switch to ink, hover to brand green */
.nav.is-solid .nav-links a{color:var(--c-ink);opacity:1;text-shadow:none}
.nav.is-solid .nav-links a:hover{opacity:1;color:var(--c-brand)}
.nav.is-solid .nav-links > li > a.is-active{color:var(--c-brand);border-bottom-color:var(--c-brand)}
.nav.is-solid .nav-phone{color:var(--c-ink);opacity:.78}
.nav.is-solid .nav-phone:hover{opacity:1;color:var(--c-brand)}
/* Dropdown chevron inherits ink on solid */
.nav.is-solid .has-dropdown > a::after{border-color:var(--c-ink)}

/* Desktop links */
.nav-links{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links > li{position:relative}
.nav-links a{
  font-size:12px;letter-spacing:.20em;text-transform:uppercase;
  padding:10px 0;display:inline-block;
  color:var(--c-cream);opacity:.94;
  transition:opacity var(--t-fast),color var(--t-fast);
  font-weight:500;
  text-shadow:0 1px 8px rgba(0,0,0,.32);
}
.nav-links a:hover{opacity:1;color:var(--c-gold)}
.nav-links > li > a.is-active{opacity:1;color:var(--c-gold);border-bottom:1px solid var(--c-gold)}

/* Dropdown chevron */
.has-dropdown > a::after{
  content:"";display:inline-block;
  width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  margin-left:7px;vertical-align:middle;opacity:.65;
  transition:transform var(--t-fast);
}
.has-dropdown:hover > a::after{transform:rotate(-135deg) translateY(0)}

/* Dropdown panel */
.dropdown{
  position:absolute;top:100%;left:-18px;min-width:240px;
  background:var(--c-cream);color:var(--c-ink);
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  padding:10px 0 8px;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s var(--ease);
  pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.06);
  z-index:100;
}
/* Invisible bridge — prevents gap between trigger and dropdown */
.dropdown::before{
  content:"";position:absolute;top:-16px;left:0;right:0;height:16px;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.dd-open .dropdown{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
}
.dropdown li a{
  display:flex;align-items:center;gap:10px;
  padding:9px 20px;
  letter-spacing:.03em;font-size:13px;text-transform:none;opacity:1;
  color:var(--c-text);
  transition:background var(--t-fast),color var(--t-fast);
}
.dropdown li a::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:var(--c-gold);opacity:0;
  transition:opacity var(--t-fast);flex-shrink:0;
}
.dropdown li a:hover{background:var(--c-cream-2);color:var(--c-brand)}
.dropdown li a:hover::before{opacity:1}

/* Nav actions */
.nav-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.nav-phone{font-size:12px;letter-spacing:.08em;opacity:.85}
.nav-phone:hover{opacity:1;color:var(--c-gold)}
.nav:not(.is-solid) .nav-phone{color:var(--c-cream);text-shadow:0 1px 8px rgba(0,0,0,.32)}

/* Hamburger */
.hamburger{display:none;width:42px;height:42px;flex-direction:column;gap:5px;align-items:center;justify-content:center;border-radius:var(--radius-lg);transition:background var(--t-fast)}
.hamburger:hover{background:rgba(255,255,255,.12)}
.hamburger span{width:22px;height:1.5px;background:currentColor;transition:var(--t);border-radius:2px}
body.menu-open .hamburger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .hamburger span:nth-child(2){opacity:0;transform:scaleX(0)}
body.menu-open .hamburger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width: 980px){
  .nav-links,.nav-phone{display:none}
  .hamburger{display:flex}
  .mobile-nav{
    position:fixed;inset:0;z-index:55;background:var(--c-ink);color:var(--c-cream);
    padding:100px var(--pad-x) 40px;
    transform:translateY(-100%);transition:transform var(--t);
    overflow-y:auto;
  }
  body.menu-open .mobile-nav{transform:none}
  .mobile-nav h5{font-family:var(--f-body);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-gold);margin:24px 0 12px}
  .mobile-nav a{display:block;font-family:var(--f-display);font-size:26px;padding:10px 0;color:var(--c-cream);letter-spacing:-.01em;transition:color var(--t-fast)}
  .mobile-nav a:hover{color:var(--c-gold)}
  .mobile-nav .group{border-top:1px solid var(--c-line-dark);padding-top:18px}
}
@media (min-width: 981px){.mobile-nav{display:none}}

/* ============ Ken Burns — hero background zoom ============ */
@keyframes kenBurns{
  from{transform:scale(1) translate(0,0)}
  to  {transform:scale(1.09) translate(-1%,0.5%)}
}
@media (prefers-reduced-motion:no-preference){
  .hero--cinematic .hero-media img{
    animation:kenBurns 18s ease-in-out infinite alternate;
    transform-origin:60% 48%;
    will-change:transform;
  }
}

/* ============ Hero ============ */
.hero{position:relative;color:var(--c-cream);background:var(--c-ink);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}

/* Cinematic vignette — darker at edges, lighter in centre so the image breathes */
.hero--cinematic .hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    /* bottom dark band — keeps stat bar readable */
    linear-gradient(180deg,transparent 55%,rgba(4,18,10,.92) 100%),
    /* top-left dark — nav legibility */
    linear-gradient(145deg,rgba(4,18,10,.72) 0%,transparent 55%),
    /* overall light centre wash */
    radial-gradient(ellipse 80% 60% at 60% 45%,rgba(4,18,10,.10) 0%,rgba(4,18,10,.58) 100%);
}
/* Other hero variants keep the original overlay */
.hero:not(.hero--cinematic) .hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,61,37,.55) 0%,rgba(10,45,27,.42) 38%,rgba(7,32,18,.70) 70%,rgba(4,20,10,.90) 100%)
}
.hero-media image-slot,.hero-media img{width:100%;height:100%;object-fit:cover;display:block;background:var(--c-ink)}
.hero-content{position:relative;z-index:1}

/* ============ Gold accent word + SVG underline ============ */
.h-word-accent{
  font-style:inherit;
  color:#F2C94C;
  position:relative;
  display:inline-block;
  text-shadow:
    0 0 120px rgba(242,201,76,.9),
    0 0 60px rgba(242,201,76,.65),
    0 0 24px rgba(242,201,76,.45),
    0 3px 14px rgba(0,0,0,.75);
}
.h-word-accent::after{
  content:"";
  position:absolute;
  left:-2px;right:-2px;
  bottom:-10px;
  height:14px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 14' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10 C55 3 120 3 180 9 C200 11 220 12 237 8' stroke='%23F2C94C' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% auto no-repeat;
  opacity:1;
  pointer-events:none;
}

/* ============ Rotating word ============ */
.h-rotate{
  display:inline-block;
  color:#F2C94C;
  min-width:5ch;
  text-shadow:
    0 0 120px rgba(242,201,76,.9),
    0 0 60px rgba(242,201,76,.65),
    0 0 24px rgba(242,201,76,.45),
    0 3px 14px rgba(0,0,0,.75);
  transition:opacity .36s ease, transform .36s cubic-bezier(.4,0,.2,1);
}

/* Hero variant A — Cinematic centered */
.hero--cinematic{min-height:100svh;display:grid;place-items:center;text-align:center;padding:160px var(--pad-x) 200px}
.hero--cinematic .h-eyebrow{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:32px;
  color:#fff;
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  background:rgba(0,0,0,0.42);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:11px 28px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,0.22);
  text-shadow:0 1px 8px rgba(0,0,0,.75),0 2px 4px rgba(0,0,0,.4);
}
.hero--cinematic .h-eyebrow::before,
.hero--cinematic .h-eyebrow::after{content:"";width:28px;height:1px;background:rgba(255,255,255,.5)}
.hero--cinematic h1{font-size:var(--fs-hero);max-width:14ch;margin-inline:auto;color:#fff;font-weight:var(--w-display);text-shadow:0 2px 32px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.35);text-wrap:balance;line-height:1.04}
.hero--cinematic .h-sub{margin-top:28px;font-size:var(--fs-lede);max-width:54ch;margin-inline:auto;color:rgba(250,248,243,.92);text-shadow:0 1px 6px rgba(0,0,0,.45)}
.hero--cinematic .h-cta{margin-top:44px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero--cinematic .h-stats{
  position:absolute;left:0;right:0;bottom:0;
  border-top:1px solid var(--c-line-dark);
  background:linear-gradient(180deg,transparent,rgba(6,32,18,.70));
}
.hero--cinematic .h-stats .container{
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:none;
  margin:0;
  padding-inline:0;
}
.h-stat{display:flex;flex-direction:column;gap:4px;padding:24px 32px;border-right:1px solid var(--c-line-dark)}
.h-stat:last-child{border-right:0}
@media (max-width: 640px){
  .hero--cinematic .h-stats .container{grid-template-columns:repeat(2,1fr)}
  .h-stat{padding:18px 22px}
  .h-stat:nth-child(2){border-right:0}
}
.h-stat b{font-family:var(--f-display);font-size:clamp(28px,2.6vw,40px);color:var(--c-gold);font-weight:400;line-height:1}
.h-stat span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,248,243,.72);margin-top:5px}

/* Hero variant B — Editorial split */
.hero--editorial{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:end;padding:120px 0 0}
.hero--editorial .h-media{position:relative;height:100%;min-height:80vh}
.hero--editorial .h-media image-slot,.hero--editorial .h-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero--editorial .h-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,45,27,.42),rgba(7,32,18,.72))}
.hero--editorial .h-text{padding:0 var(--pad-x) 100px;align-self:end}
.hero--editorial .h-text .eyebrow{margin-bottom:24px}
.hero--editorial h1{font-size:clamp(48px,5.8vw,96px);color:var(--c-cream);max-width:11ch}
.hero--editorial .h-sub{margin-top:28px;font-size:var(--fs-lede);color:rgba(250,248,243,.84);max-width:42ch}
.hero--editorial .h-meta{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--c-line-dark);padding-top:24px;max-width:520px}
.hero--editorial .h-meta div{display:flex;flex-direction:column;gap:4px}
.hero--editorial .h-meta b{font-family:var(--f-display);font-size:24px;color:var(--c-gold);font-weight:400}
.hero--editorial .h-meta span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(250,248,243,.72)}
.hero--editorial .h-cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
@media (max-width: 900px){.hero--editorial{grid-template-columns:1fr}.hero--editorial .h-media{min-height:50vh;order:-1}.hero--editorial .h-text{padding:48px var(--pad-x) 64px}}

/* Hero variant C — Magazine masthead */
.hero--magazine{min-height:auto;padding:140px var(--pad-x) 40px;background:var(--c-cream);color:var(--c-ink)}
.hero--magazine .h-media::after{display:none}
.hero--magazine .mast{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--c-line);padding-bottom:14px;margin-bottom:40px;gap:24px;flex-wrap:wrap}
.hero--magazine .mast .left{font-family:var(--f-display);font-size:22px;letter-spacing:.5em;text-transform:uppercase}
.hero--magazine .mast .right{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-muted);display:flex;gap:24px;flex-wrap:wrap}
.hero--magazine .kicker{font-family:var(--f-body);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--c-gold);margin-bottom:18px}
.hero--magazine h1{font-size:clamp(48px,7vw,108px);max-width:18ch;color:var(--c-ink);font-style:italic;line-height:1}
.hero--magazine h1 em{font-style:normal;color:var(--c-gold)}
.hero--magazine .h-sub{margin-top:24px;font-size:var(--fs-lede);color:var(--c-muted);max-width:58ch;column-count:2;column-gap:32px}
.hero--magazine .h-grid{
  margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.hero--magazine .h-grid image-slot,.hero--magazine .h-grid img{aspect-ratio:3/4;width:100%;object-fit:cover;display:block}
.hero--magazine .h-grid > :nth-child(2){transform:translateY(40px)}
@media (max-width: 760px){.hero--magazine .h-sub{column-count:1}.hero--magazine .h-grid{grid-template-columns:repeat(2,1fr)}.hero--magazine .h-grid > :nth-child(3){display:none}}

/* Hero A — mobile adjustments */
@media (max-width: 640px){
  .hero--cinematic{padding-top:110px;padding-bottom:160px}
  .hero--cinematic .h-cta{flex-direction:column;align-items:center}
  .hero--cinematic .h-cta .btn{width:100%;max-width:300px;justify-content:center}
}

/* Hide non-active hero variants */
body[data-hero="A"] .hero--editorial,
body[data-hero="A"] .hero--magazine,
body[data-hero="B"] .hero--cinematic,
body[data-hero="B"] .hero--magazine,
body[data-hero="C"] .hero--cinematic,
body[data-hero="C"] .hero--editorial{display:none}

/* ============ Page header (inner pages) ============ */
.pagehead{position:relative;min-height:64vh;display:grid;align-items:end;color:var(--c-cream);background:var(--c-ink);padding:160px var(--pad-x) 64px;overflow:hidden;isolation:isolate}
.pagehead-media{position:absolute;inset:0;z-index:-1}
.pagehead-media image-slot,.pagehead-media img{width:100%;height:100%;object-fit:cover;display:block}
.pagehead-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,61,37,.55),rgba(5,30,18,.90))}
.pagehead .crumb{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-gold);margin-bottom:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pagehead .crumb a{opacity:.8}
.pagehead .crumb a:hover{opacity:1;color:var(--c-cream)}
.pagehead h1{font-size:var(--fs-h1);max-width:18ch;color:var(--c-cream)}
.pagehead .ph-sub{margin-top:18px;font-size:var(--fs-lede);max-width:62ch;color:rgba(250,248,243,.88)}
.pagehead .ph-meta{margin-top:32px;display:flex;gap:32px;flex-wrap:wrap;border-top:1px solid var(--c-line-dark);padding-top:22px}
.pagehead .ph-meta div{display:flex;flex-direction:column;gap:4px;min-width:120px}
.pagehead .ph-meta b{font-family:var(--f-display);font-size:24px;color:var(--c-gold);font-weight:400}
.pagehead .ph-meta span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(250,248,243,.72)}

/* ============ Section header ============ */
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.sec-head .sh-l h2{font-size:var(--fs-h2);max-width:14ch}
.sec-head .sh-r{padding-bottom:8px}
.sec-head .sh-r p{margin:0}
@media (max-width: 820px){.sec-head{grid-template-columns:1fr;gap:24px}}

.sec-head--center{grid-template-columns:1fr;text-align:center;margin-inline:auto;max-width:760px}
.sec-head--center .eyebrow{justify-content:center;display:inline-flex}

/* ============ Footer ============ */
.footer{
  background:var(--c-ink);
  color:rgba(250,248,243,.80);
  padding:88px var(--pad-x) 0;
  border-top:3px solid var(--c-gold);
}
.footer h4{
  font-family:var(--f-body);font-size:10px;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--c-gold);margin-bottom:20px;margin-top:0;
}
.footer-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:56px;
}
.footer a{color:rgba(250,248,243,.75);font-size:14px;transition:color var(--t-fast),opacity var(--t-fast);display:inline-block;padding:4px 0;line-height:1.4}
.footer a:hover{color:var(--c-gold);opacity:1}
.footer .brand h3{display:none} /* replaced by logo img in JS */
.footer .brand img{display:block;margin-bottom:20px}
.footer .brand p{font-size:14px;max-width:32ch;color:rgba(250,248,243,.65);margin-bottom:24px;line-height:1.7}
.footer ul{display:flex;flex-direction:column;gap:2px}
.footer ul li a{padding:6px 0}
.footer .social{display:flex;gap:8px;margin-top:4px}
.footer .social a{
  width:36px;height:36px;
  border:1px solid rgba(250,248,243,.18);border-radius:var(--radius-lg);
  display:grid;place-items:center;
  font-size:11px;letter-spacing:.08em;padding:0;
  font-weight:500;
}
.footer .social a:hover{border-color:var(--c-gold);background:var(--c-gold);color:var(--c-ink)}
.footer-bottom{
  max-width:var(--max);margin:56px auto 0;
  padding:22px 0 28px;
  border-top:1px solid rgba(250,248,243,.10);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:12px;color:rgba(250,248,243,.45);
}
.footer-bottom a{font-size:12px;padding:0}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}.footer .brand{grid-column:1/-1}}
@media (max-width: 480px){.footer-grid{grid-template-columns:1fr}}

/* ============ Floating actions ============ */
.float-actions{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;flex-direction:column;gap:10px;transition:bottom var(--t)}
.intent-bar.is-active ~ .float-actions,.float-actions.bar-active{bottom:90px}
.float-btn{
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.35);
  transition:var(--t);font-size:24px;
}
.float-btn:hover{transform:translateY(-2px) scale(1.04)}
.float-btn.call{background:var(--c-gold);color:var(--c-ink)}

/* ============ Tweaks panel (Tweaks toolbar enables) ============ */
.tweaks{
  position:fixed;right:18px;top:88px;z-index:80;
  width:300px;background:var(--c-cream);color:var(--c-ink);
  border:1px solid var(--c-line);box-shadow:var(--shadow-md);
  transform:translateY(-12px) scale(.96);opacity:0;visibility:hidden;
  transition:var(--t);
  font-family:var(--f-body);
}
.tweaks.is-open{transform:none;opacity:1;visibility:visible}
.tweaks-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--c-line)}
.tweaks-head h5{margin:0;font-family:var(--f-display);font-size:20px;letter-spacing:.18em;text-transform:uppercase}
.tweaks-head button{font-size:18px;width:28px;height:28px;line-height:1}
.tweaks-body{padding:20px}
.tweaks-section{margin-bottom:20px}
.tweaks-section:last-child{margin-bottom:0}
.tweaks-label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-muted);margin-bottom:10px;display:block}
.tweaks-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tweaks-swatch{
  border:1px solid var(--c-line);padding:0;height:48px;position:relative;cursor:pointer;
  display:flex;overflow:hidden;
}
.tweaks-swatch.active{border-color:var(--c-gold);box-shadow:0 0 0 2px var(--c-gold) inset}
.tweaks-swatch i{flex:1;display:block}
.tweaks-types{display:flex;flex-direction:column;gap:6px}
.tweaks-type{
  padding:10px 14px;border:1px solid var(--c-line);text-align:left;
  display:flex;justify-content:space-between;align-items:baseline;
  transition:var(--t-fast);
}
.tweaks-type.active{border-color:var(--c-gold);background:rgba(200,150,60,.08)}
.tweaks-type .ts-name{font-family:var(--f-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted)}
.tweaks-type .ts-preview{font-family:var(--ts-f);font-size:20px;color:var(--c-ink);letter-spacing:var(--ts-tr)}

/* ============ Helpers ============ */
.aspect-43{aspect-ratio:4/3}
.aspect-32{aspect-ratio:3/2}
.aspect-34{aspect-ratio:3/4}
.aspect-169{aspect-ratio:16/9}
.gold{color:var(--c-gold)}
.italic{font-style:italic}

/* ============ Intent Bar — Contextual floating bar ============ */
.intent-bar{
  position:fixed;inset:auto var(--pad-x) 24px var(--pad-x);z-index:70;
  background:var(--c-ink);color:var(--c-cream);
  border:1px solid var(--c-line-dark);
  border-radius:100px;
  padding:8px 8px 8px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transform:translateY(120%);transition:transform var(--t);
  max-width:calc(var(--max) - 2 * var(--pad-x));margin-inline:auto;
}
.intent-bar.is-active{transform:none}
.intent-bar .i-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,248,243,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intent-bar .i-label b{color:var(--c-gold);margin-right:8px}
.intent-bar .i-actions{display:flex;align-items:center;gap:8px}
.intent-bar .btn{padding:12px 24px;border-radius:100px;font-size:12px}

@media (max-width: 640px){
  .intent-bar{inset:auto 12px 12px 12px;padding-left:18px;gap:12px}
  .intent-bar .i-label{font-size:11px}
  .intent-bar .i-label b{display:none}
  .intent-bar .btn{padding:10px 16px}
}

/* ============ About feature grid (4-col) ============ */
@media (max-width: 860px){.about-grid{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width: 480px){.about-grid{grid-template-columns:1fr!important}}

/* ============ Social proof grid ============ */
@media (max-width: 860px){.social-proof-grid{grid-template-columns:1fr!important;gap:40px!important}}
@supports (font-display: swap) {
  :root{font-display:swap}
}

/* ══════════════════════════════════════════════════
   SCROLL REVEAL — IntersectionObserver driven
   ══════════════════════════════════════════════════ */
.reveal,.reveal-up,.reveal-left,.reveal-right,.stagger-parent{
  will-change:opacity,transform;
}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transition:opacity .72s var(--ease),transform .72s var(--ease)}
  .reveal-up{opacity:0;transform:translateY(36px);transition:opacity .72s var(--ease),transform .72s var(--ease)}
  .reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .68s var(--ease),transform .68s var(--ease)}
  .reveal-right{opacity:0;transform:translateX(32px);transition:opacity .68s var(--ease),transform .68s var(--ease)}
  .reveal.is-visible,.reveal-up.is-visible,.reveal-left.is-visible,.reveal-right.is-visible{opacity:1;transform:none}
  /* stagger-parent: triggers child [data-stagger] with cascading delays via JS */
  [data-stagger]{opacity:0;transform:translateY(28px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
  [data-stagger].is-visible{opacity:1;transform:none}
}
/* Ensure content is visible for users with reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-up,.reveal-left,.reveal-right,[data-stagger]{opacity:1!important;transform:none!important}
}

/* ══════════════════════════════════════════════════
   SHIMMER — gold CTA pulse
   ══════════════════════════════════════════════════ */
@keyframes shimmer{
  0%{background-position:200% center}
  100%{background-position:-200% center}
}
.btn--gold{
  background-size:200% auto;
  background-image:linear-gradient(90deg,var(--c-gold) 0%,var(--c-gold-hi) 40%,#f0c060 50%,var(--c-gold-hi) 60%,var(--c-gold) 100%);
  animation:shimmer 3.6s linear infinite;
}
.btn--gold:hover{animation-play-state:paused}

/* ══════════════════════════════════════════════════
   SCROLL PROGRESS BAR
   ══════════════════════════════════════════════════ */
#scrollProgress{
  position:fixed;top:0;left:0;right:0;height:3px;
  background:var(--c-gold);
  transform:scaleX(0);transform-origin:left;
  z-index:200;
  transition:none;
  pointer-events:none;
}

/* ══════════════════════════════════════════════════
   3D TILT CARDS
   ══════════════════════════════════════════════════ */
[data-tilt]{perspective:700px;transform-style:preserve-3d;cursor:pointer}
[data-tilt-inner]{
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
  position:relative;overflow:hidden;
}
.tilt-shine{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  transition:background .25s ease;
  border-radius:inherit;
}

/* ══════════════════════════════════════════════════
   ENHANCED BUTTON hover lift
   ══════════════════════════════════════════════════ */
.btn{will-change:transform}
.btn--gold:hover{background-image:none;background:var(--c-gold-hi);transform:translateY(-2px) scale(1.01);box-shadow:0 8px 28px rgba(200,150,60,.38)}
.btn--ink:hover{transform:translateY(-1px)}
.btn--ghost:hover{transform:translateY(-1px)}
.btn--ghost-light:hover{transform:translateY(-1px)}

/* ══════════════════════════════════════════════════
   NAV — refined dropdown
   ══════════════════════════════════════════════════ */
.has-dropdown{position:relative}

/* ══════════════════════════════════════════════════
   GALLERY — hover overlay caption
   ══════════════════════════════════════════════════ */
.gal-item{position:relative;overflow:hidden;cursor:pointer;display:block}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);min-height:100%}
.gal-item:hover img{transform:scale(1.07)}
.gal-caption{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(4,20,10,.85) 0%,transparent 55%);
  display:flex;align-items:flex-end;padding:18px;
  opacity:0;transition:opacity .35s var(--ease);
}
.gal-item:hover .gal-caption,.gal-item.is-hovered .gal-caption{opacity:1}
.gal-caption span{color:#fff;font-size:12px;letter-spacing:.22em;text-transform:uppercase}

/* ══════════════════════════════════════════════════
   PRICING GRID responsive
   ══════════════════════════════════════════════════ */
@media (max-width:1100px){.price-grid{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:600px){.price-grid{grid-template-columns:1fr!important}}

/* ══════════════════════════════════════════════════
   PRICING CARD
   ══════════════════════════════════════════════════ */
.price-card{
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--c-cream);
  transition:box-shadow var(--t),transform var(--t),border-color var(--t);
}
.price-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--c-gold)}
.price-card-head{background:var(--c-ink);color:var(--c-cream);padding:28px 32px}
.price-card-head .pc-label{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--c-gold);margin-bottom:12px;display:block}
.price-card-head .pc-price{font-family:var(--f-display);font-size:clamp(36px,3.5vw,52px);font-weight:400;line-height:1}
.price-card-head .pc-unit{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,248,243,.65);margin-top:6px}
.price-card-body{padding:28px 32px}
.price-card-body ul{display:flex;flex-direction:column;gap:12px}
.price-card-body li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--c-muted)}
.price-card-body li::before{content:"✓";color:var(--c-gold);font-weight:700;font-size:13px;flex-shrink:0}

/* ══════════════════════════════════════════════════
   VIDEO CTA SECTION
   ══════════════════════════════════════════════════ */
.video-cta{
  position:relative;min-height:480px;display:grid;place-items:center;
  overflow:hidden;isolation:isolate;
  background:var(--c-ink);
}
.video-cta-bg{
  position:absolute;inset:0;z-index:-1;
}
.video-cta-bg img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.45)}
.video-cta-content{text-align:center;padding:80px var(--pad-x);max-width:680px}
.video-cta-content h2{color:#fff;font-size:var(--fs-h2);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.video-cta-content p{color:rgba(255,255,255,.82);font-size:var(--fs-lede);margin-top:18px;max-width:46ch;margin-inline:auto}
.play-btn{
  width:80px;height:80px;border-radius:50%;
  background:rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.6);
  display:grid;place-items:center;
  font-size:32px;
  margin:0 auto 32px;
  transition:var(--t);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.play-btn:hover{background:var(--c-gold);border-color:var(--c-gold);transform:scale(1.12)}
.play-btn svg{margin-left:4px}

/* ══════════════════════════════════════════════════
   SEASONAL EVENTS STRIP
   ══════════════════════════════════════════════════ */
.events-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.event-card{
  border-radius:var(--radius-lg);overflow:hidden;
  position:relative;aspect-ratio:3/2;background:var(--c-ink);
  text-decoration:none;display:block;
}
.event-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.event-card:hover img{transform:scale(1.06)}
.event-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,20,10,.78),rgba(4,20,10,.2));transition:var(--t)}
.event-card:hover::after{background:linear-gradient(0deg,rgba(4,20,10,.88),rgba(4,20,10,.28))}
.event-card-body{position:absolute;left:0;right:0;bottom:0;padding:24px 26px;z-index:2}
.event-card-body .ev-date{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--c-gold);margin-bottom:8px;display:block}
.event-card-body h4{font-family:var(--f-display);font-size:22px;color:#fff;margin-bottom:6px}
.event-card-body p{font-size:13px;color:rgba(255,255,255,.72);margin:0}
@media (max-width:760px){.events-strip{grid-template-columns:1fr}}