/* ==========================================================================
   Earle Dental Clinic — earle2 redesign
   Identity kept: sea-teal, limestone shell, brass, mint.
   New signature: harbour tide rings — soft concentric calm around the Rock.
   Type: Bricolage Grotesque + Figtree + IBM Plex Mono.
   ========================================================================== */

:root{
  --ink:        #0B2B30;
  --sea:        #15555F;
  --sea-deep:   #0E3A42;
  --mint:       #7FC9B9;
  --mint-050:   #E4F1ED;
  --brass:      #B0894C;
  --brass-050:  #EFE4CF;
  --shell:      #F5F2EA;
  --paper:      #FFFFFF;
  --line:       rgba(11,43,48,.10);
  --line-dk:    rgba(255,255,255,.14);
  --ink-70:     rgba(11,43,48,.72);
  --ink-55:     rgba(11,43,48,.55);
  --paper-70:   rgba(237,242,238,.72);
  --paper-solid:#EDF2EE;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-sans:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --fs-display: clamp(3.1rem, 7vw, 5.8rem);
  --fs-h2:      clamp(2.15rem, 4.2vw, 3.6rem);
  --fs-h3:      clamp(1.2rem, 1.6vw, 1.45rem);
  --fs-lead:    clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   .875rem;
  --fs-eyebrow: .7rem;

  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --section-y: clamp(5rem, 10vw, 8.5rem);

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(11,43,48,.05), 0 1px 2px rgba(11,43,48,.04);
  --shadow-md: 0 12px 36px rgba(11,43,48,.10);
  --shadow-lg: 0 28px 70px rgba(11,43,48,.16);
  --shadow-glow: 0 0 0 1px rgba(127,201,185,.25), 0 20px 50px rgba(21,85,95,.18);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: .35s;
  --dur-2: .55s;
  --dur-3: 1s;

  --nav-h: 88px;
}

/* ------------------------------- RESET ---------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
svg{flex:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:520;
  letter-spacing:-.03em;
  line-height:1.05;
  margin:0;
}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
  border-radius:6px;
}

.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;
}

.skip-link{
  position:absolute;top:0;left:50%;transform:translate(-50%,-120%);
  z-index:500;background:var(--paper);color:var(--ink);
  padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) var(--r-sm);
  font-weight:600;text-decoration:none;
  transition:transform var(--dur-1) var(--ease);
}
.skip-link:focus{transform:translate(-50%,0)}

/* ----------------------------- PRIMITIVES ------------------------------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
section[id],main[id]{scroll-margin-top:calc(72px + 1.25rem)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:1.15rem;
  line-height:1.2;
}
.eyebrow::before{
  content:"";
  width:18px;height:18px;
  flex:0 0 18px;
  aspect-ratio:1;
  border-radius:50%;
  border:1.5px solid currentColor;
  box-shadow:inset 0 0 0 4px transparent, inset 0 0 0 5.5px currentColor;
  opacity:.85;
  box-sizing:border-box;
  align-self:center;
}
.eyebrow--light{color:var(--mint)}

.section-head{max-width:38rem;margin-bottom:clamp(2.75rem,5vw,4rem)}
.section-head h2{font-size:var(--fs-h2)}
.lead{
  font-size:var(--fs-lead);
  line-height:1.55;
  color:var(--ink-70);
  margin-top:1.25rem;
  max-width:52ch;
}

.text-mint{color:var(--mint)}
.text-sea{color:var(--sea)}

/* Scroll progress */
.progress{
  position:fixed;top:0;left:0;right:0;z-index:400;
  height:3px;pointer-events:none;
}
.progress__bar{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--mint),var(--brass));
  border-radius:0 2px 2px 0;
  transition:width .08s linear;
}

/* Reveal system */
.reveal{
  opacity:0;
  transform:translateY(18px);
  filter:blur(4px);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    filter var(--dur-2) var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
  filter:blur(0);
}
/* CTA band: one beat, no blur (blur makes the ghost/call btn look late) */
.cta-band .reveal{
  filter:none;
  transition-delay:0ms!important;
  transition-property:opacity, transform;
}
.cta-band .reveal.is-visible{filter:none}
.cta-band__actions,
.cta-band__actions .btn{
  transition-delay:0ms!important;
  filter:none !important;
}

/* ------------------------------ BUTTONS --------------------------------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-sans);font-weight:600;font-size:.95rem;
  line-height:1.2;
  padding:.95em 1.55em;
  min-height:48px;
  border:0;border-radius:var(--r-pill);
  text-decoration:none;cursor:pointer;
  overflow:hidden;
  transition:
    transform var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
  will-change:transform;
}
.btn svg{width:18px;height:18px}
.btn > *{position:relative;z-index:1}
.btn--lg{padding:1.05em 1.85em;min-height:54px;font-size:1rem}

.btn--primary{
  background:var(--sea);
  color:var(--paper-solid);
  box-shadow:0 8px 24px rgba(21,85,95,.28);
}
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg,var(--mint),#9ed9cc);
  transform:translateX(-102%);
  transition:transform var(--dur-2) var(--ease);
}
.btn--primary:hover{
  color:var(--ink);
  transform:translateY(-3px);
  box-shadow:var(--shadow-glow);
}
.btn--primary:hover::after{transform:translateX(0)}
.btn--primary:active{transform:translateY(-1px)}

.btn--ghost{
  background:rgba(255,255,255,.06);
  color:inherit;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.4);
  transform:translateY(-3px);
}

.btn--ghost-light{
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.btn--ghost-light:hover{
  border-color:rgba(21,85,95,.25);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}

.btn--brass{
  background:var(--brass);
  color:#23180a;
  box-shadow:0 8px 22px rgba(176,137,76,.28);
}
.btn--brass:hover{
  background:#9a7540;
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(176,137,76,.35);
}

/* ----------------------------- WORDMARK --------------------------------- */
.wordmark{
  display:inline-flex;align-items:center;
  text-decoration:none;
}
.wordmark__logo{
  height:50px;width:auto;
  display:block;
  transition:height var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.wordmark__logo--ink{display:none}
.nav.is-stuck .wordmark__logo{height:40px}
.nav.is-stuck .wordmark__logo--paper{display:none}
.nav.is-stuck .wordmark__logo--ink{display:block}
.footer .wordmark__logo--paper{display:block}
.footer .wordmark__logo--ink{display:none}

/* ------------------------------- NAV ------------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  color:var(--paper-solid);
  transition:
    background var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    backdrop-filter var(--dur-1) var(--ease);
}
.nav__inner{
  display:flex;align-items:center;gap:1.5rem;
  height:var(--nav-h);
  transition:height var(--dur-1) var(--ease);
}
.nav__links{display:none;margin-inline:auto;gap:2.1rem}
.nav__links a{
  position:relative;
  text-decoration:none;font-weight:550;font-size:.95rem;
  padding-block:.5rem;
  opacity:.88;
  transition:opacity var(--dur-1) var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;
  background:var(--mint);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-1) var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__actions{display:none;margin-left:auto;align-items:center;gap:1.1rem}
.nav__phone{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  text-decoration:none;
  opacity:.8;
  transition:opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav__phone:hover{opacity:1;color:var(--mint)}

.nav.is-stuck{
  background:rgba(245,242,234,.86);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.nav.is-stuck .nav__inner{height:68px}
.nav.is-stuck .nav__phone{opacity:.7}
.nav.is-stuck .nav__phone:hover{opacity:1;color:var(--sea)}

.nav__toggle{
  margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);
  cursor:pointer;color:inherit;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.nav__toggle:active{transform:scale(.96)}
.nav.is-stuck .nav__toggle{
  background:rgba(11,43,48,.06);
  border-color:var(--line);
}
.nav__toggle-bars{
  display:block;width:18px;height:12px;
  position:relative;
}
.nav__toggle-bars span{
  position:absolute;left:0;
  display:block;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform var(--dur-1) var(--ease), width var(--dur-1) var(--ease), top var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.nav__toggle-bars span:first-child{top:1px;width:18px}
.nav__toggle-bars span:last-child{top:9px;width:12px;margin-left:0}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:first-child{
  top:5.5px;width:18px;transform:rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:last-child{
  top:5.5px;width:18px;transform:rotate(-45deg);
}

/* Keep hamburger above the overlay and morph it into the close control */
@media (max-width:959px){
  .nav:has(.nav__toggle[aria-expanded="true"]){
    z-index:210;
    color:var(--paper-solid);
  }
  .nav:has(.nav__toggle[aria-expanded="true"]).is-stuck{
    background:transparent;
    box-shadow:none;
    border:0;
    color:var(--paper-solid);
  }
  .nav:has(.nav__toggle[aria-expanded="true"]) .wordmark{
    opacity:0;
    pointer-events:none;
  }
  .nav__toggle[aria-expanded="true"]{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.28);
  }
}

@media (min-width:960px){
  .nav__links{display:flex}
  .nav__actions{display:flex}
  .nav__toggle{display:none}
}

/* --------------------------- MOBILE MENU -------------------------------- */
.menu{
  position:fixed;inset:0;z-index:200;
  background:linear-gradient(165deg,var(--sea-deep) 0%,var(--ink) 100%);
  color:var(--paper-solid);
  display:flex;
  opacity:0;
  transition:opacity var(--dur-1) var(--ease);
  overflow:hidden;
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}

.menu__orb{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(2px);
}
.menu__orb--1{
  width:280px;height:280px;top:-60px;right:-40px;
  background:radial-gradient(circle,rgba(127,201,185,.22),transparent 70%);
}
.menu__orb--2{
  width:220px;height:220px;bottom:10%;left:-50px;
  background:radial-gradient(circle,rgba(176,137,76,.18),transparent 70%);
}

.menu__inner{
  margin:auto;
  width:100%;max-width:var(--maxw);
  padding:6rem var(--gutter) 3rem;
  display:flex;flex-direction:column;gap:2.5rem;
  position:relative;z-index:1;
}
.menu__links{display:flex;flex-direction:column;gap:.2rem}
.menu__links a{
  display:flex;align-items:baseline;gap:1rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.2rem,9vw,3.2rem);
  letter-spacing:-.03em;
  text-decoration:none;
  padding-block:.4rem;
  opacity:0;transform:translateY(18px);
  transition:color var(--dur-1) var(--ease);
}
.menu__links a:hover{color:var(--mint)}
.menu__idx{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--brass);
  opacity:.8;
}
.menu.is-open .menu__links a{
  animation:menuIn var(--dur-2) var(--ease) forwards;
}
.menu.is-open .menu__links a:nth-child(1){animation-delay:.08s}
.menu.is-open .menu__links a:nth-child(2){animation-delay:.14s}
.menu.is-open .menu__links a:nth-child(3){animation-delay:.2s}
.menu.is-open .menu__links a:nth-child(4){animation-delay:.26s}
@keyframes menuIn{to{opacity:1;transform:none}}

.menu__cta{align-self:flex-start}
.menu__meta{
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.06em;
  color:var(--paper-70);line-height:1.9;
}
.menu__meta a{color:var(--mint)}

/* ---------------------- SIGNATURE: ROCK CONTOURS (hero only) ----------- */
.contours{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.contours path{
  stroke:var(--brass);stroke-width:1.25;opacity:.35;
  stroke-dasharray:2600;stroke-dashoffset:2600;
}
.contours path:nth-child(odd){stroke:var(--mint);opacity:.28}
.contours.is-drawn path{animation:drawContour var(--dur-3) var(--ease) forwards}
.contours.is-drawn path:nth-child(1){animation-delay:.05s}
.contours.is-drawn path:nth-child(2){animation-delay:.15s}
.contours.is-drawn path:nth-child(3){animation-delay:.25s}
.contours.is-drawn path:nth-child(4){animation-delay:.35s}
.contours.is-drawn path:nth-child(5){animation-delay:.45s}
.contours.is-drawn path:nth-child(6){animation-delay:.55s}
.contours.is-drawn path:nth-child(7){animation-delay:.65s}
@keyframes drawContour{to{stroke-dashoffset:0}}
.contours.drift{animation:contourDrift 26s ease-in-out infinite alternate}
@keyframes contourDrift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-18px,8px,0) scale(1.02)}
}
.contours--hero{translate:0 var(--contour-shift,0px)}

/* -------------------------------- HERO ---------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + 2rem) 5.5rem;
  background:
    radial-gradient(55% 50% at 78% 18%, rgba(127,201,185,.14) 0%, transparent 60%),
    linear-gradient(165deg, var(--sea-deep) 0%, var(--ink) 55%, #071c20 100%);
  color:var(--paper-solid);
  overflow:hidden;
}

.hero__atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__glow{
  position:absolute;inset:0;
  background:radial-gradient(60% 55% at 82% 12%,rgba(127,201,185,.10) 0%,transparent 70%);
}
.hero__orb{
  position:absolute;border-radius:50%;
  filter:blur(1px);
  will-change:transform;
}
.hero__orb--a{
  width:160px;height:160px;left:6%;top:24%;
  background:radial-gradient(circle at 30% 30%, rgba(127,201,185,.28), rgba(127,201,185,0) 70%);
}
.hero__orb--b{
  width:110px;height:110px;right:22%;bottom:16%;
  background:radial-gradient(circle at 40% 40%, rgba(176,137,76,.22), rgba(176,137,76,0) 70%);
}
/* Phone: drop the orbs so rock lines + type stay readable */
@media (max-width:799px){
  .hero__orb{display:none}
}

.hero__inner{position:relative;z-index:2;width:100%}
.hero__text{max-width:44rem;position:relative}

.hero__chip,
.hero__sub,
.hero__cta,
.hero__meta{opacity:0;transform:translateY(16px)}

.hero__title{
  font-size:var(--fs-display);
  font-weight:480;
  line-height:1.02;
  max-width:12ch;
  margin-block:.6rem 1.5rem;
}
.hero__title em{
  font-style:italic;
  font-weight:450;
  color:var(--mint);
}
.hero__title .split{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}
.hero__title .split__in{
  display:block;
  transform:translateY(110%);
}

.hero__sub{
  font-size:var(--fs-lead);
  line-height:1.55;
  color:var(--paper-70);
  max-width:48ch;
}
.hero__cta{
  display:flex;flex-wrap:wrap;gap:1rem;
  margin-top:2.1rem;
}
.hero__meta{
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.08em;
  color:var(--paper-70);
  margin-top:1.6rem;
}

body.loaded .hero__title .split__in{
  transition:transform var(--dur-2) var(--ease);
  transform:none;
}
body.loaded .hero__title .split:nth-child(1) .split__in{transition-delay:.55s}
body.loaded .hero__title .split:nth-child(2) .split__in{transition-delay:.66s}
body.loaded .hero__title .split:nth-child(3) .split__in{transition-delay:.77s}

body.loaded .hero__chip,
body.loaded .hero__sub,
body.loaded .hero__cta,
body.loaded .hero__meta{
  opacity:1;transform:none;
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
body.loaded .hero__chip{transition-delay:.35s}
body.loaded .hero__sub{transition-delay:.95s}
body.loaded .hero__cta{transition-delay:1.08s}
body.loaded .hero__meta{transition-delay:1.18s}

.hero__scroll{
  position:absolute;z-index:2;
  bottom:1.75rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  transition:opacity var(--dur-2) var(--ease);
}
.hero__scroll-label{
  font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper-70);
}
.hero__scroll-track{
  width:2px;height:52px;
  background:rgba(255,255,255,.12);
  border-radius:2px;
  overflow:hidden;
}
.hero__scroll-thumb{
  display:block;width:100%;height:40%;
  background:linear-gradient(to bottom,var(--mint),var(--brass));
  border-radius:2px;
  animation:scrollThumb 1.8s var(--ease-soft) infinite;
}
@keyframes scrollThumb{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(260%)}
}
.hero__scroll.is-hidden{opacity:0;pointer-events:none}
@media (max-width:799px){.hero__scroll{display:none}}

/* ----------------------------- MARQUEE ---------------------------------- */
.marquee{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding-block:1.6rem;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:0;
}
.marquee__row{overflow:hidden}
/* Desktop keeps a single clean row */
.marquee__row--extra{display:none}

.marquee__track{
  display:flex;width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee__track--reverse{animation-name:marqueeReverse;animation-duration:48s}
.marquee__track:hover{animation-play-state:paused}
.marquee__list{
  display:flex;align-items:center;gap:2.75rem;
  padding-inline:1.5rem;
  font-size:.95rem;
  color:var(--ink);
  white-space:nowrap;
}
.marquee__list li{
  display:inline-flex;align-items:center;gap:.8rem;
}
.marquee__list svg{
  width:20px;height:20px;
  color:var(--brass);
  flex:none;
}
.marquee__list strong{font-weight:650;color:var(--ink)}
.marquee__list span{color:var(--ink-70)}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes marqueeReverse{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

/* Phone: three full-bleed stripes — same as desktop, stacked */
@media (max-width:760px){
  .marquee{
    padding:0;
    gap:0;
    background:var(--paper);
  }
  .marquee__row--extra{display:block}
  .marquee__row{
    padding-block:1.6rem;
    border-radius:0;
    border:0;
    border-bottom:1px solid rgba(11,43,48,.14);
    box-shadow:none;
    background:var(--paper);
  }
  .marquee__row:last-child{border-bottom:0}
  .marquee__track{animation-duration:30s}
  .marquee__track--reverse{animation-duration:36s}
  .marquee__list{
    gap:2.75rem;
    padding-inline:1.5rem;
    font-size:.95rem;
  }
}

/* ----------------------------- TREATMENTS ------------------------------- */
.treatments{
  background:
    radial-gradient(50% 40% at 100% 0%, rgba(127,201,185,.12), transparent 60%),
    var(--shell);
}

.treat-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.15rem;
}
@media (min-width:680px){.treat-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.treat-grid{grid-template-columns:repeat(3,1fr)}}

.treat{
  --rx:0deg; --ry:0deg;
  position:relative;
  display:flex;flex-direction:column;
  min-height:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1.9rem 1.75rem 1.85rem;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    filter var(--dur-2) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.treat.reveal{
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(18px);
}
.treat.reveal.is-visible{
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);
  transition:
    opacity var(--dur-2) var(--ease),
    transform .15s linear,
    filter var(--dur-2) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.treat__glow{
  position:absolute;inset:auto -20% -40% -20%;
  height:55%;
  background:radial-gradient(ellipse at center, rgba(127,201,185,.18), transparent 70%);
  opacity:0;
  transition:opacity var(--dur-2) var(--ease);
  pointer-events:none;
}
.treat:hover{
  border-color:rgba(127,201,185,.45);
  box-shadow:var(--shadow-md);
}
.treat:hover .treat__glow{opacity:1}

.treat__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;
  border-radius:18px;
  background:var(--mint-050);
  color:var(--sea);
  margin-bottom:1.4rem;
  transition:
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease-spring);
}
.treat:hover .treat__icon{
  background:var(--mint);
  color:var(--sea-deep);
  transform:scale(1.06) rotate(-3deg);
}

.treat__title{font-size:var(--fs-h3);margin-bottom:.55rem}
.treat__body{color:var(--ink-70);font-size:.98rem;margin-bottom:1.4rem;flex:1}
.treat__arrow{
  align-self:flex-start;
  color:var(--sea);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.treat:hover .treat__arrow{opacity:1;transform:none}

.treat--accent{
  background:linear-gradient(160deg,var(--sea-deep),var(--ink));
  color:var(--paper-solid);
  border-color:transparent;
}
.treat--accent .treat__body{color:var(--paper-70)}
.treat--accent .treat__icon{
  background:rgba(127,201,185,.16);
  color:var(--mint);
}
.treat--accent:hover .treat__icon{
  background:var(--mint);
  color:var(--sea-deep);
}
.treat__link{
  display:inline-flex;align-items:center;
  margin-top:auto;
  font-weight:600;
  font-size:.92rem;
  color:var(--mint);
  text-decoration:none;
  border-bottom:1px solid rgba(127,201,185,.35);
  transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.treat__link:hover{border-color:var(--mint);color:#a8e0d3}

/* -------------------------------- ABOUT --------------------------------- */
.about{
  background:linear-gradient(180deg,var(--sea-deep) 0%, #0a3036 100%);
  color:var(--paper-solid);
  overflow:hidden;
}

.about__inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(3rem,6vw,5rem);
}
@media (min-width:960px){
  .about__inner{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);
    align-items:start;
    column-gap:clamp(3.5rem,6vw,5.5rem);
  }
  .about__sticky{position:sticky;top:calc(68px + 2rem)}
}

.about__sticky h2{font-size:var(--fs-h2);margin-bottom:1.5rem}
.about__sticky > p{color:var(--paper-70);margin-bottom:1.1rem;max-width:48ch}

.stat-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem 1.5rem;
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line-dk);
  align-items:start;
  justify-items:center;
  text-align:center;
}
.stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  width:100%;
  max-width:14rem;
  min-width:0;
}
.stat__num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2rem,3.5vw,2.75rem);
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--mint);
  line-height:1;
  margin:0;
}
.stat__label{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-70);
  line-height:1.4;
  max-width:18ch;
  text-wrap:balance;
}
@media (max-width:520px){
  .stat-row{gap:1.25rem 1rem}
  .stat{max-width:none}
  .stat__label{font-size:.64rem;max-width:12ch;letter-spacing:.06em}
}

.about__media{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding-left:clamp(0rem,2vw,1rem);
}
.about__frame{
  margin:0;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(176,137,76,.35);
}
.about__frame img{
  width:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.about__frame:hover img{transform:scale(1.04)}
.about__frame--tall{width:92%;margin-left:auto}
.about__frame--tall img{aspect-ratio:4/5}
.about__frame--wide{
  width:78%;
  margin-top:0;
  position:relative;z-index:2;
  align-self:flex-start;
}
.about__frame--wide img{aspect-ratio:4/3}

.pullquote{
  margin:clamp(2rem,3.5vw,2.75rem) 0 0;
  padding-left:clamp(1.15rem,2.2vw,1.6rem);
  border-left:2px solid rgba(176,137,76,.9);
  max-width:46ch;
  background:none;
  border-radius:0;
  backdrop-filter:none;
}
.pullquote blockquote{
  margin:0;
  font-family:var(--font-display);
  font-weight:420;
  font-size:clamp(1.25rem,2vw,1.7rem);
  line-height:1.3;
  letter-spacing:-.02em;
}
.pullquote figcaption{
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-70);
  margin-top:1.1rem;
}

/* ---------------------------- JOURNEY ----------------------------------- */
.journey{background:var(--shell)}

.journey__pin{position:relative}
.journey__stage{position:relative}
.journey__head{
  margin-bottom:clamp(2rem,4vw,2.75rem);
}
.journey__head.section-head{max-width:38rem}
.journey__board{position:relative}

.journey__rail{
  display:none;
  position:absolute;
  left:0;right:0;top:25px;
  height:3px;
  background:rgba(176,137,76,.18);
  border-radius:var(--r-pill);
  overflow:hidden;
  z-index:0;
}
.journey__rail-fill{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--brass),var(--mint));
  border-radius:inherit;
  transition:width .25s linear;
}

.journey__steps{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  justify-items:center;
  position:relative;
  z-index:1;
}
.journey__step{
  position:relative;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:22rem;
}
.journey__node{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  border-radius:50%;
  background:var(--shell);
  border:2px solid rgba(176,137,76,.4);
  color:var(--brass);
  font-family:var(--font-mono);
  font-size:.78rem;font-weight:600;letter-spacing:.08em;
  margin-bottom:1.25rem;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease-spring),
    box-shadow var(--dur-1) var(--ease);
  position:relative;z-index:1;
}
.journey__step.is-active .journey__node,
.journey__step:hover .journey__node{
  background:var(--sea);
  border-color:var(--sea);
  color:var(--paper-solid);
  transform:scale(1.06);
  box-shadow:0 8px 22px rgba(21,85,95,.22);
}

.journey__step h3{
  font-size:var(--fs-h3);
  margin-bottom:.5rem;
}
.journey__step p{
  color:var(--ink-70);
  font-size:.97rem;
  max-width:28ch;
}

/* Desktop sticky: sit just under the stuck nav */
@media (min-width:900px){
  .journey__pin{height:240vh}
  .journey__stage{
    position:sticky;
    top:68px;
    padding:2rem 0 1.5rem;
    background:var(--shell);
  }
  .journey__rail{display:block}
  .journey__steps{
    grid-template-columns:repeat(4,1fr);
    gap:1.25rem;
    justify-items:stretch;
  }
  .journey__step{
    text-align:left;
    align-items:flex-start;
    max-width:none;
  }
}

/* -------------------------------- TEAM ---------------------------------- */
.team{
  background:
    radial-gradient(40% 35% at 0% 20%, rgba(127,201,185,.1), transparent 60%),
    var(--paper);
}

.team__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media (min-width:900px){.team__grid{grid-template-columns:repeat(3,1fr)}}

.person{
  --rx:0deg; --ry:0deg;
  background:var(--shell);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:2rem 1.6rem 1.9rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .15s linear, box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.person.reveal{
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(18px);
}
.person.reveal.is-visible{
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);
}
.person:hover{
  box-shadow:var(--shadow-md);
  border-color:rgba(21,85,95,.18);
}

.person__photo{
  --photo-size:clamp(132px,30vw,168px);
  width:var(--photo-size);
  height:var(--photo-size);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.45rem;
  background:linear-gradient(145deg,var(--sea-deep),var(--ink));
  color:var(--brass-050);
  outline:1px solid rgba(176,137,76,.35);
  outline-offset:8px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-1) var(--ease);
}
.person:hover .person__photo{
  transform:scale(1.04);
  box-shadow:var(--shadow-md);
}
.person__initials{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,4vw,2.4rem);
  font-weight:520;
  letter-spacing:-.03em;
  color:var(--brass-050);
}

.person__marks{
  --photo-size:clamp(132px,30vw,168px);
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  width:var(--photo-size);
  height:var(--photo-size);
  border-radius:50%;
  color:var(--brass);
  background:linear-gradient(145deg,var(--mint-050),var(--brass-050));
  outline:1px solid rgba(176,137,76,.35);
  outline-offset:8px;
  margin:0 auto 1.45rem;
}
.person__marks svg{width:26px;height:26px}

.person__body{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.person__name{font-size:var(--fs-h3);margin-bottom:.4rem}
.person__creds{
  font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);
  margin-bottom:.85rem;
}
.person__role{
  color:var(--ink-70);
  font-size:.97rem;
  max-width:28ch;
  margin-inline:auto;
}

/* ---------------------------- TESTIMONIALS ------------------------------ */
.quotes{
  position:relative;
  background:var(--ink);
  color:var(--paper-solid);
  overflow:hidden;
}
.quotes__glow{
  position:absolute;
  width:50%;aspect-ratio:1;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(127,201,185,.12), transparent 65%);
  pointer-events:none;
}
.quotes__head{margin-bottom:clamp(3.5rem,7vw,5.5rem);position:relative;z-index:1}
.quotes__head h2{font-size:var(--fs-h2)}

.quotes__stage{
  position:relative;z-index:1;
  max-width:52rem;
  margin-inline:auto;
  text-align:center;
  padding-inline:clamp(0px, 8vw, 5rem);
}
.quotes__mark{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(5.5rem,10vw,7.5rem);
  line-height:.75;
  color:var(--brass);
  margin-bottom:1.25rem;
  height:.55em;
}
.quotes__viewport{position:relative;display:grid;min-height:14rem}
.quote{
  margin:0;
  grid-area:1 / 1;
  opacity:0;visibility:hidden;
  transform:translateY(16px) scale(.98);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    visibility var(--dur-2);
}
.quote.is-active{
  opacity:1;visibility:visible;
  transform:none;
}
.quote blockquote{
  margin:0;
  font-family:var(--font-display);
  font-weight:420;
  font-size:clamp(1.45rem, 3vw, 2.25rem);
  line-height:1.28;
  letter-spacing:-.025em;
}
.quote figcaption{
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-70);
  margin-top:2rem;
}

.quotes__nav{
  position:absolute;
  top:42%;
  width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:var(--paper-solid);
  cursor:pointer;
  transition:background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.quotes__nav:hover{
  background:rgba(127,201,185,.18);
  border-color:rgba(127,201,185,.4);
  transform:scale(1.05);
}
.quotes__nav--prev{left:0}
.quotes__nav--next{right:0}
@media (min-width:900px){
  .quotes__stage{padding-inline:5.5rem}
  .quotes__nav--prev{left:-.25rem}
  .quotes__nav--next{right:-.25rem}
  .quotes__viewport{padding-inline:1.5rem}
}
@media (max-width:700px){
  .quotes__nav{display:none}
  .quotes__stage{padding-inline:0}
}

.quotes__dots{display:flex;justify-content:center;gap:.55rem;margin-top:2.25rem}
.dot{
  width:44px;height:44px;padding:0;
  background:transparent;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.dot::before{
  content:"";width:8px;height:8px;border-radius:var(--r-pill);
  background:var(--paper-70);opacity:.35;
  transition:opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), width var(--dur-1) var(--ease);
}
.dot:hover::before{opacity:.75}
.dot.is-active::before{
  width:28px;
  background:var(--mint);
  opacity:1;
}

/* ---------------------------- VISIT / CONTACT --------------------------- */
.visit{
  background:
    radial-gradient(45% 40% at 100% 100%, rgba(176,137,76,.08), transparent 55%),
    var(--shell);
}
.visit__inner{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,3.5rem);
}
@media (min-width:960px){
  .visit__inner{grid-template-columns:1.15fr .85fr;align-items:stretch}
}

.visit__panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(1.75rem,3vw,2.5rem);
  box-shadow:var(--shadow-sm);
}
.visit__panel .section-head{margin-bottom:2rem}
.visit__panel h2{font-size:var(--fs-h2)}

.facts{display:grid;gap:1.35rem;margin-bottom:1.75rem}
.fact{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.fact__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border-radius:14px;
  background:var(--mint-050);
  color:var(--sea);
}
.fact__body{line-height:1.55;padding-top:.35rem}
.fact__body a{
  text-decoration:none;font-weight:650;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.fact__body a:hover{border-color:var(--sea);color:var(--sea)}
.fact__meta{
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.12em;
  color:var(--ink-55);
}
.hours{display:grid;grid-template-columns:5.5rem 1fr;column-gap:1.25rem}
.hours__val{color:var(--ink-70)}

.emergency{
  background:linear-gradient(135deg,var(--brass-050), #f7efe0);
  border-radius:var(--r-lg);
  padding:1.25rem 1.35rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1.75rem;
  border:1px solid rgba(176,137,76,.22);
}
.emergency__label{
  font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-70);
  margin-bottom:.25rem;
}
.emergency__hint{font-size:.92rem;color:var(--ink);font-weight:550}

.visit__cta{display:flex;flex-wrap:wrap;gap:.9rem}

.visit__map{
  position:relative;
  display:flex;flex-direction:column;
  min-height:22rem;
}
.map__frame{
  flex:1;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid rgba(176,137,76,.35);
  box-shadow:var(--shadow-md);
  background:var(--mint-050);
  min-height:22rem;
}
.map__frame iframe{
  border:0;width:100%;height:100%;
  min-height:22rem;
  display:block;
  filter:saturate(.9) contrast(1.02);
}

/* ----------------------------- CTA BAND --------------------------------- */
.cta-band{
  position:relative;
  background:linear-gradient(145deg,var(--sea) 0%, var(--sea-deep) 55%, var(--ink) 100%);
  color:var(--paper-solid);
  padding-block:clamp(4.5rem,9vw,7rem);
  overflow:hidden;
  text-align:center;
}
.cta-band__inner{position:relative;z-index:1}
.cta-band h2{
  font-size:var(--fs-h2);
  margin-bottom:1rem;
}
.cta-band p{
  color:var(--paper-70);
  font-size:var(--fs-lead);
  max-width:36ch;
  margin:0 auto 2rem;
}
.cta-band__actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
}

/* ------------------------------- FOOTER --------------------------------- */
.footer{
  background:var(--ink);
  color:var(--paper-solid);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
}
.footer__top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
.footer__top .wordmark__logo{height:58px}
@media (max-width:760px){
  .footer__top .btn{display:none}
}
.footer__grid{
  display:grid;grid-template-columns:1fr;
  gap:2.25rem;
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
@media (min-width:620px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.footer__grid{grid-template-columns:1.4fr 1fr 1.2fr 1fr}}

.footer__h{
  font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;
  color:var(--mint);
  margin-bottom:1.1rem;
}
.footer__blurb{color:var(--paper-70);max-width:28ch;margin-bottom:1.4rem}
.footer__social{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  border:1px solid var(--line-dk);
  border-radius:var(--r-pill);
  color:var(--paper-70);
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.footer__social:hover{
  color:var(--mint);
  border-color:var(--mint);
  background:rgba(127,201,185,.08);
}

.footer__links{display:grid;gap:.65rem}
.footer__links a,
.footer__text a{
  color:var(--paper-70);text-decoration:none;
  transition:color var(--dur-1) var(--ease);
}
.footer__links a:hover,
.footer__text a:hover{color:var(--mint)}
.footer__text{color:var(--paper-70);margin-bottom:.7rem;line-height:1.7}
.footer__text--brass a{color:var(--brass)}
.footer__text--brass a:hover{color:var(--brass-050)}

.footer__bar{
  border-top:1px solid var(--line-dk);
  padding-top:1.75rem;
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;
  justify-content:space-between;align-items:center;
  color:var(--paper-70);
  font-size:var(--fs-small);
}
.footer__coords{
  font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.1em;
}

/* -------------------------------- TOAST --------------------------------- */
.toast{
  position:fixed;z-index:300;
  left:50%;bottom:1.5rem;
  transform:translate(-50%,140%);
  max-width:min(92vw,32rem);
  background:rgba(11,43,48,.94);
  color:var(--paper-solid);
  border:1px solid var(--line-dk);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-lg);
  padding:1rem 1.6rem;
  font-size:.92rem;
  text-align:center;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  opacity:0;
}
.toast[hidden]{display:none}
.toast.is-visible{transform:translate(-50%,0);opacity:1}

/* --------------------------- REDUCED MOTION ----------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none;filter:none}
  .hero__chip,.hero__sub,.hero__cta,.hero__meta{opacity:1;transform:none}
  .hero__title .split__in{transform:none}
  .hero__scroll-thumb{animation:none!important;transform:none}
  .contours path{stroke-dashoffset:0!important}
  .contours.drift{animation:none!important}
  .contours--hero{translate:none!important}
  .marquee__track{animation:none!important}
  .marquee__track--reverse{animation:none!important}
  .menu__links a{opacity:1;transform:none}
  .treat,.person{transform:none!important}
}