/* ============================================================
   EVERGROVE — concept landing page
   Palette sampled directly from the reference screenshot.
   These are THE colours, in every theme. No prefers-color-scheme
   override block exists here, and none should be added.
   ============================================================ */

:root{
  --field:    #0E2719;  /* deep forest ground */
  --field-lo: #0B2617;  /* upper-left, deepest */
  --field-hi: #11291C;  /* lower, faintly lifted */
  --panel:    #316E45;  /* right panel */
  --panel-hi: #377A4E;  /* panel, high */
  --panel-lo: #2A5E3C;  /* panel, low */
  --mint:     #B2CAAA;  /* the thin outline stroke */
  --sage:     #588C76;  /* eyebrow at display size (large-text threshold) */
  --sage-sm:  #63977F;  /* same hue lifted to clear 4.5:1 at small sizes */
  --nav:      #A3BFB3;  /* nav links, captions, arrows */
  --pill:     #2B4738;  /* price pill ground */
  --cream:    #EFF8F5;  /* delivery pill */
  --wordmark: #DEE3DC;  /* vertical wordmark — NOT pure white */
  --white:    #FFFFFF;  /* headline ONLY. Nothing else on this page. */

  --shell: min(1320px, 92vw);
  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  /* spring: 0.42s perceptual, the rest is settle. transform only -
     it overshoots past 1, which clamps badly on opacity/brightness. */
  --spring: linear(0, 0.0613, 0.1976, 0.3584, 0.5143, 0.6505, 0.761, 0.8458, 0.9077, 0.9506, 0.9787, 0.9959, 1.0054, 1.0098, 1.0111, 1.0105, 1.0091, 1.0073, 1.0055, 1.004, 1.0027, 1.0018, 1.0011, 1.0006, 1);

  /* default cup colourway: Frostbrew */
  --liq-top:#C9853F; --liq-mid:#DEA25B; --liq-bot:#F2E4CE; --straw:#12331F;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--field);
  color:var(--nav);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--cream);color:var(--field);padding:.9rem 1.1rem;border-radius:8px;font-weight:700}
.skip:focus{left:1rem;top:1rem}
.sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}

.wrap{width:var(--shell);margin-inline:auto}

/* ------------------------------ the arc ------------------------------ */
.arc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arc__panel{fill:var(--panel)}
.arc--narrow{display:none}
.arc__line{stroke:var(--mint);stroke-width:1.5;opacity:.42}
.hero .arc__panel{fill:url(#panelGrad)}

/* ------------------------------- hero -------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 8% 12%, var(--field-lo) 0%, var(--field) 46%, var(--field-hi) 100%);
  overflow:hidden;
  isolation:isolate;
}
.hero::after{ /* faint organic texture, barely there */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px),
                   radial-gradient(circle at 70% 80%, #fff 0 1px, transparent 1px);
  background-size:180px 180px, 240px 240px;
}

.nav{
  position:relative;z-index:3;
  width:var(--shell);margin:0 auto;
  padding-block:clamp(1.1rem,2.4vw,2rem);
  display:flex;align-items:center;gap:clamp(1.6rem,5vw,4.4rem);
}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--cream)}
.brand__seal{width:clamp(42px,4vw,58px);height:clamp(42px,4vw,58px);flex:none;padding:6px;border-radius:12px;background:#f6f1ea;object-fit:contain}
.brand__name{font-weight:800;letter-spacing:.16em;font-size:.78rem}
.nav__links{display:flex;gap:clamp(1.1rem,3vw,2.9rem);flex-wrap:wrap}
.nav__links a{
  font-size:.83rem;font-weight:500;letter-spacing:.045em;color:var(--nav);
  padding-block:.9rem;margin-block:-.9rem;   /* 44px hit area, zero layout shift */
  transition:color .25s var(--ease);
}
.nav__links a:hover{color:var(--cream)}
.nav__pin::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.42em;border-radius:50% 50% 50% 0;transform:rotate(-45deg) translateY(-1px);border:1.6px solid currentColor}

.hero__grid{
  position:relative;z-index:2;
  flex:1;
  width:var(--shell);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  align-items:center;gap:2rem;
  padding-block:clamp(1rem,3vw,3rem) clamp(3rem,7vw,5rem);
}

.eyebrow{
  margin:0 0 clamp(.7rem,1.4vw,1.1rem);
  color:var(--sage);
  font-weight:700;letter-spacing:.13em;
  font-size:clamp(.95rem,1.5vw,1.32rem);
}
.eyebrow__dots{letter-spacing:.06em}
.eyebrow--sm{font-size:clamp(.72rem,1vw,.84rem);letter-spacing:.24em;color:var(--sage-sm)}

.headline{
  margin:0 0 clamp(1.5rem,3.2vw,2.4rem);
  color:var(--white);                 /* the ONLY pure white on the page */
  font-size:clamp(2.6rem,6.1vw,5.3rem);
  line-height:.95;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.headline__line{display:block}
.thin{font-weight:300}
.fat{font-weight:800}

/* ------------------------------ pills -------------------------------- */
.pills{display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.15rem);flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;
  border-radius:999px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.pill--price{
  flex-direction:column;justify-content:center;
  background:var(--pill);
  border:1px solid rgba(178,202,170,.22);
  padding:clamp(.55rem,1.2vw,.8rem) clamp(1.35rem,2.8vw,2.1rem);
  color:var(--cream);
}
.pill__price{font-size:clamp(1.35rem,2.7vw,2.1rem);font-weight:800;line-height:1}
.pill__sub{font-size:.6rem;font-weight:700;letter-spacing:.22em;opacity:.72;margin-top:.24rem}
.pill--deliver{
  gap:.8rem;background:var(--cream);color:var(--field);
  padding:clamp(.42rem,1vw,.6rem) clamp(1.15rem,2.4vw,1.7rem) clamp(.42rem,1vw,.6rem) clamp(.42rem,1vw,.55rem);
  font-weight:800;
}
.pill--deliver:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.pill__icon{
  width:clamp(34px,3.4vw,44px);height:clamp(34px,3.4vw,44px);flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:var(--field);color:var(--cream);
}
.pill__icon svg{width:58%;height:58%}
.pill__stack{display:flex;flex-direction:column;line-height:1.12;font-size:clamp(.72rem,1.25vw,.95rem);letter-spacing:.1em}
.pill--static{cursor:default}

/* --------------------------- thumbnail rail --------------------------- */

/* ------------------------------ hero art ------------------------------ */
.hero__art{position:relative;margin:0;display:grid;place-items:center;align-self:center}
.cup{width:clamp(210px,26vw,392px);height:auto;filter:drop-shadow(0 34px 46px rgba(0,0,0,.42))}
.cup--sm{width:clamp(160px,17vw,250px)}
.fave{
  position:absolute;left:64%;top:52%;
  width:clamp(30px,3vw,42px);height:clamp(30px,3vw,42px);
  display:grid;place-items:center;border-radius:50%;
  background:var(--cream);color:var(--panel);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.7);
}
.fave svg{width:60%;height:60%}

/* --------------------------- vertical wordmark ------------------------ */
.wordmark{
  position:absolute;right:0;bottom:clamp(2rem,7vh,5.5rem);z-index:1;
  display:flex;align-items:flex-end;gap:clamp(.1rem,.9vw,.7rem);
  pointer-events:none;
  font-weight:800;
  font-size:clamp(3.4rem,7.6vw,6.6rem);
  line-height:.86;letter-spacing:.015em;
  transform:translateX(13%);
}
.wordmark span{writing-mode:vertical-rl;transform:rotate(180deg)}
.wordmark__solid{color:var(--wordmark)}
.wordmark__ghost{
  color:transparent;
  -webkit-text-stroke:1.6px var(--mint);
  opacity:.6;
}

/* ------------------------------ arrows -------------------------------- */

/* ------------------------------ sections ------------------------------ */
.section{position:relative;padding-block:clamp(4.5rem,10vw,8.5rem)}
.h2{
  margin:0;color:var(--cream);
  font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.02em;
}
.section__head{margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.section__head--center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.lede{max-width:52ch;line-height:1.66;color:var(--nav);font-size:clamp(.95rem,1.2vw,1.06rem)}

.menu{background:linear-gradient(180deg,var(--field) 0%, var(--field-lo) 100%)}

.story{overflow:hidden}
.story__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.story__art{margin:0;display:grid;place-items:center}
.stats{display:flex;gap:clamp(1.5rem,4vw,3.2rem);margin-top:clamp(1.8rem,4vw,2.6rem);flex-wrap:wrap}
.stats dt{font-size:.63rem;letter-spacing:.22em;font-weight:600;opacity:.78;margin-bottom:.3rem}
.stats dd{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--mint);line-height:1}

.delivery{background:linear-gradient(180deg,var(--field-lo) 0%, var(--field) 100%)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(1.1rem,2.6vw,2rem)}
.steps li{border-top:1px solid rgba(178,202,170,.22);padding-top:1.4rem}
.steps__n{display:block;font-size:.7rem;letter-spacing:.24em;font-weight:700;color:var(--sage-sm);margin-bottom:.9rem}
.steps h3{margin:0 0 .55rem;color:var(--cream);font-size:1.18rem;font-weight:700}
.steps p{margin:0;font-size:.9rem;line-height:1.62;opacity:.86}

.seasonal__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(2rem,6vw,4.5rem);align-items:center}
.seasonal__copy .pills{margin-top:clamp(1.6rem,3.4vw,2.3rem)}
.seasonal__art{margin:0;display:grid;place-items:center;position:relative}
.seasonal__art::before{
  content:"";position:absolute;width:min(430px,86%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--panel) 0%, rgba(49,110,69,0) 70%);opacity:.55;
}
.seasonal__art .cup{position:relative}

/* ------------------------------- footer ------------------------------- */
.footer{position:relative;padding-top:clamp(3.5rem,7vw,5.5rem);background:var(--field-lo);border-top:1px solid rgba(178,202,170,.16);overflow:hidden}
.footer__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.footer__note{margin:1.1rem 0 0;font-size:.78rem;line-height:1.6;opacity:.78;max-width:42ch}
.footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1.6rem}
.footer__cols h3{margin:0 0 .95rem;color:var(--cream);font-size:.68rem;letter-spacing:.2em;font-weight:700}
.footer__cols a{display:block;font-size:.88rem;padding-block:.86rem;opacity:.85;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.footer__cols a:hover{opacity:1;transform:translateX(3px)}

.marquee{overflow:hidden;padding-bottom:.4rem;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:2.6rem;width:max-content;animation:slide 44s linear infinite}
.marquee__track span{
  font-size:clamp(3.6rem,11vw,9rem);font-weight:800;letter-spacing:.02em;line-height:.86;
  color:transparent;-webkit-text-stroke:1.5px var(--mint);opacity:.34;white-space:nowrap;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ------------------------------- motion ------------------------------- */
[data-anim]{opacity:0;transform:translateY(22px)}
.hero.is-ready:not(.is-swapping) [data-anim]{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.hero.is-ready [data-anim]:nth-child(1){transition-delay:.05s}
.hero.is-ready [data-anim]:nth-child(2){transition-delay:.14s}
.hero.is-ready [data-anim]:nth-child(3){transition-delay:.25s}
.hero.is-ready [data-anim]:nth-child(4){transition-delay:.36s}
.hero__art{opacity:0;transform:translateY(30px) scale(.97)}
.hero.is-ready:not(.is-swapping) .hero__art{opacity:1;transform:none;transition:opacity 1s var(--ease-out) .18s,transform 1s var(--ease-out) .18s}

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}

.is-swapping .hero__art{opacity:0;transform:translateY(16px) scale(.985);transition:opacity .28s var(--ease),transform .28s var(--ease)}
.is-swapping .headline,.is-swapping .pill--price,.is-swapping .wordmark{opacity:0;transition:opacity .22s var(--ease)}
.headline,.pill--price,.wordmark{transition:opacity .5s var(--ease-out) .06s}

/* --------------------------- responsive ------------------------------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
  .wordmark{font-size:clamp(2.6rem,6.4vw,4.4rem)}
}

/* Below 900px the arc becomes a horizontal band and the vertical wordmark
   is removed outright — it cannot coexist with the headline at this width. */
@media (max-width:900px){
    .hero{min-height:auto;padding-bottom:clamp(3rem,8vw,5rem)}
  /* the band moves to the TOP so it sits behind the art, not through the headline */
  .hero .arc{height:auto;aspect-ratio:1440/900;top:0;bottom:auto}
  .arc--wide{display:none}
  .arc--narrow{display:block}
  .arc--mirror{display:none}
  .hero__grid{grid-template-columns:1fr;gap:clamp(1rem,3vw,1.8rem);padding-block:0 clamp(2rem,5vw,3rem)}
  .hero__art{order:-1;margin-block:clamp(.5rem,2vw,1.5rem) clamp(1.5rem,5vw,2.5rem)}
  .fave{width:30px;height:30px}
      .wordmark{display:none}
    .story__grid,.seasonal__grid{grid-template-columns:1fr}
  .story__art,.seasonal__art{order:-1}
  .footer__grid{grid-template-columns:1fr}
}

@media (max-width:560px){
        .headline{font-size:clamp(2.5rem,11vw,3.4rem)}
  .story__art .cup,.seasonal__art .cup{width:clamp(180px,54vw,240px);height:auto}
}

/* ---------------------------- reduced motion --------------------------- */
@media (prefers-reduced-motion:reduce){
  /* Kill DECORATIVE motion only. A blanket transition:0 also destroys hover
     feedback, focus transitions and the sense that the carousel changed
     state - which makes the page harder to follow, not easier. Functional
     colour/opacity transitions stay, capped short. */
  html{scroll-behavior:auto}

  /* decorative: entrance, scroll reveal, marquee, the swap displacement */
  [data-anim],[data-reveal],.hero__art{opacity:1!important;transform:none!important;transition:none!important}
  .marquee__track{animation:none!important;transform:none!important}
  .is-swapping .hero__art,.is-swapping .headline,
  .is-swapping .pill--price,.is-swapping .wordmark{transform:none!important}
  .pill--deliver:hover,.footer__cols a:hover{transform:none!important}

  /* functional: state change must still read, so keep a short cross-fade */
  a,button,.pill,.flow__card,.flow__nav,.flow__dot{transition-duration:120ms!important}
}


/* ---------------------- photographic product art ----------------------
   The vector cup had one fixed viewBox, so width alone sized it. Real
   photographs have varying aspect ratios, so these size by HEIGHT — that
   is what keeps the four carousel drinks looking like one product family
   instead of four unrelated pictures. */
img.cup{
  width:auto;
  height:clamp(370px,72svh,730px);
  max-width:min(100%,565px);
  object-fit:contain;
  object-position:center bottom;
}
/* The straddle: the reference's cup crosses the arc boundary, sitting on
   both greens at once. Shifting the art left of its grid column is what
   creates that, and it is the move that makes the composition read. */
[data-cup-slot]{transform:translateX(-30%)}
.hero__art .fave{left:74%;top:46%}
@media (max-width:900px){
  .hero__art img.cup{height:clamp(250px,36svh,360px)}
  [data-cup-slot]{transform:none}
  .hero__art .fave{left:84%;top:44%}   /* perch on the cup edge, not on the drink */
}
@media (max-width:560px){
  .hero__art img.cup{height:clamp(230px,33svh,300px)}
  }

/* Touch-target floor. Padding grows the hit area; the visual composition
   is unchanged because the seal and pill keep their own dimensions. */
.brand{min-height:44px}
.pill--deliver{min-height:44px}

/* ------------------- brand story: the admission block -------------------
   Set as an aside with a mint rule so it reads as a caveat the brand is
   volunteering, not another claim. It is the paragraph that earns the rest. */
.admission{
  margin:clamp(1.8rem,4vw,2.6rem) 0 0;
  padding:clamp(.9rem,2vw,1.15rem) 0 clamp(.9rem,2vw,1.15rem) clamp(1rem,2.2vw,1.5rem);
  border-left:2px solid var(--mint);
  max-width:56ch;
}
.admission p{margin:0;font-size:clamp(.86rem,1.05vw,.94rem);line-height:1.66;color:var(--nav)}
.admission strong{color:var(--cream);font-weight:700}
.story__copy .lede strong{color:var(--cream);font-weight:600}

/* --------------------------- testimonials ------------------------------
   Shares the panel gradient and mint border used across the page's cards,
   same lift. The quote glyph reuses the -webkit-text-stroke outline from
   the vertical wordmark so it belongs to the existing visual language. */
.voices{background:linear-gradient(180deg,var(--field-lo) 0%, var(--field) 100%)}
.quote{
  position:relative;margin:0;
  border-radius:24px 24px 14px 14px;
  background:linear-gradient(175deg,var(--panel-hi) 0%, var(--panel-lo) 62%, #245134 100%);
  border:1px solid rgba(178,202,170,.16);
  padding:clamp(1.4rem,2.6vw,1.9rem);
  display:flex;flex-direction:column;gap:clamp(.75rem,1.6vw,1.05rem);
  transition:transform .45s var(--ease-out), border-color .45s var(--ease), box-shadow .45s var(--ease-out);
}
.quote:hover{transform:translateY(-6px);border-color:rgba(178,202,170,.42);box-shadow:0 26px 46px -28px rgba(0,0,0,.9)}
.quote__mark{
  /* In the flow at the head of the card, not absolutely placed in a corner:
     a corner ornament either clips against overflow or reads as a stray
     mark. Here it leads the eye into the quote and cannot clip. */
  display:block;
  font-size:clamp(2.6rem,3.4vw,3.4rem);line-height:.62;font-weight:800;
  color:transparent;-webkit-text-stroke:1.6px var(--mint);opacity:.55;
  margin-bottom:-.15em;pointer-events:none;user-select:none;
}
.quote__body{margin:0;position:relative;z-index:1}
.quote__body p{
  margin:0;color:var(--cream);
  font-size:clamp(.95rem,1.2vw,1.04rem);line-height:1.62;text-wrap:pretty;
}
.quote__by{display:flex;align-items:center;gap:.85rem;margin-top:auto;position:relative;z-index:1}
.quote__mono{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  border:1.5px solid var(--mint);color:var(--cream);
  font-size:.78rem;font-weight:800;letter-spacing:.06em;
}
.quote__who{display:flex;flex-direction:column;line-height:1.35}
.quote__who strong{color:var(--cream);font-size:.92rem;font-weight:700}
.quote__who span{font-size:.78rem;color:var(--nav);opacity:.85}

@media (max-width:560px){
  .quote__mark{font-size:2.6rem}
}

/* ===================== testimonial marquee (glass cards) =================
   Adapted from a 21st.dev liquid-glass marquee. What carries over is the
   scroll and the layered inset "glass edge". What does not is the SVG
   displacement backdrop filter, because glass refracts what is BEHIND it and this
   section is flat green, so it would distort nothing while costing a blur
   composite on twelve moving cards. The bloom below gives the translucent
   cards real tonal variation to travel across, which is what sells it. */
.voices{position:relative;overflow:hidden}
.voices__bloom{
  position:absolute;left:50%;bottom:14%;transform:translateX(-50%);
  width:min(1500px,140%);aspect-ratio:5/2;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 60% at 30% 50%, rgba(55,122,78,.55) 0%, rgba(55,122,78,0) 70%),
    radial-gradient(ellipse 45% 55% at 74% 45%, rgba(49,110,69,.42) 0%, rgba(49,110,69,0) 72%);
}
.voices .wrap,.voices__marquee{position:relative;z-index:1}

.voices__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}

.voices__pause{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:44px;padding:.55rem 1.15rem;border-radius:999px;
  border:1.4px solid rgba(163,191,179,.45);color:var(--nav);
  font-size:.78rem;font-weight:700;letter-spacing:.12em;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.voices__pause:hover{color:var(--cream);border-color:var(--mint)}
.voices__pause-ico{
  width:11px;height:12px;flex:none;
  border-left:3.5px solid currentColor;border-right:3.5px solid currentColor;
}
.voices.is-paused .voices__pause-ico{
  border:0;width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:11px solid currentColor;
}

.voices__marquee{
  --vgap:clamp(.9rem,2vw,1.5rem);
  display:flex;gap:var(--vgap);
  overflow:hidden;padding-block:.6rem;
  margin-top:clamp(2.2rem,5vw,3.6rem);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.voices__track{
  display:flex;gap:var(--vgap);flex:none;
  animation:voices-slide 64s linear infinite;
}
@keyframes voices-slide{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% - var(--vgap)))}
}
/* no focusable elements live inside the marquee, so :focus-within would
   be inert - hover and the explicit toggle are the real mechanisms */
.voices__marquee:hover .voices__track,
.voices.is-paused .voices__track{animation-play-state:paused}

/* the glass card: translucent fill + layered inset edges. No backdrop-filter. */
.voices__track .quote{
  flex:none;width:clamp(272px,25vw,344px);
  background:linear-gradient(168deg, rgba(120,178,140,.20) 0%, rgba(49,110,69,.26) 55%, rgba(20,51,31,.34) 100%);
  border:1px solid rgba(178,202,170,.30);
  box-shadow:
    inset 2px 2px .5px -2px rgba(233,245,238,.85),
    inset -2px -2px .5px -2px rgba(233,245,238,.55),
    inset 1px 1px 1px -.5px rgba(233,245,238,.45),
    inset 0 0 8px 6px rgba(178,202,170,.06),
    0 18px 40px -26px rgba(0,0,0,.85);
}
.voices__track .quote:hover{transform:none;border-color:rgba(178,202,170,.55)}

@media (max-width:560px){
  .voices__track .quote{width:min(78vw,300px)}
  .voices__marquee{mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
                   -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
}

/* Reduced motion: no scroll at all, laid out as a readable static grid.
   The duplicate track is removed rather than merely stopped. */
@media (prefers-reduced-motion:reduce){
  .voices__marquee{display:block;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .voices__track{animation:none!important;transform:none!important;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,264px),1fr));gap:var(--vgap)}
  .voices__track[aria-hidden="true"]{display:none}
  .voices__track .quote{width:auto}
  .voices__pause{display:none}
}

/* ========================== menu coverflow ============================
   Adapted from a 3D coverflow reference. Our drinks are transparent
   cutouts rather than full-bleed food photos, so each card is a panel in
   the brand greens with the cutout standing inside it - not an image
   cropped to fill. Side cards keep their name legible, because a menu you
   cannot read while navigating is not a menu. */
.menu{position:relative;overflow:hidden}
.menu__glow{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(1400px,130%);aspect-ratio:2/1;pointer-events:none;
  background:radial-gradient(ellipse 50% 55% at 50% 50%, rgba(55,122,78,.42) 0%, rgba(55,122,78,0) 70%);
}
.flow{position:relative;margin-top:clamp(2rem,5vw,3.4rem)}
.flow__stage{
  position:relative;
  height:clamp(460px,74svh,760px);
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;
}
.flow__card{
  position:absolute;
  width:clamp(236px,25vw,430px);
  height:clamp(418px,67svh,700px);
  border-radius:22px 22px 14px 14px;
  overflow:hidden;padding:0;
  background:linear-gradient(172deg,var(--panel-hi) 0%, var(--panel-lo) 58%, #1d4429 100%);
  border:1px solid rgba(178,202,170,.22);
  transform-origin:center center;
  transition:transform 750ms var(--spring),
             opacity 420ms var(--ease-out),
             filter 420ms var(--ease-out),
             box-shadow 420ms var(--ease-out),
             border-color 420ms var(--ease);
  cursor:pointer;
}
.flow__card[data-pos="0"]{transform:translateX(0) scale(1) rotateY(0deg);opacity:1;z-index:30;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95), 0 0 34px -12px rgba(178,202,170,.35);
  border-color:rgba(178,202,170,.5);cursor:default}
.flow__card[data-pos="1"]{transform:translateX(74%) scale(.86) rotateY(-28deg);opacity:.76;z-index:20;filter:brightness(.74)}
.flow__card[data-pos="-1"]{transform:translateX(-74%) scale(.86) rotateY(28deg);opacity:.76;z-index:20;filter:brightness(.74)}
.flow__card[data-pos="2"]{transform:translateX(163%) scale(.72) rotateY(-43deg);opacity:.45;z-index:10;filter:brightness(.52)}
.flow__card[data-pos="-2"]{transform:translateX(-163%) scale(.72) rotateY(43deg);opacity:.45;z-index:10;filter:brightness(.52)}
.flow__card[data-pos="far"]{transform:scale(.4);opacity:0;z-index:0;pointer-events:none}
.flow__card:not([data-pos="0"]):hover{filter:brightness(.92);border-color:rgba(178,202,170,.5)}

.flow__img{
  position:absolute;left:50%;top:5%;transform:translateX(-50%);
  height:62%;width:auto;max-width:82%;object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.45));
}
.flow__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,51,31,0) 38%, rgba(20,51,31,.86) 68%, rgba(14,39,25,.96) 100%);
}
.flow__meta{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:0 1.1rem 1.25rem;text-align:center;
}
.flow__name{color:var(--cream);font-size:clamp(1rem,1.5vw,1.35rem);font-weight:800;letter-spacing:.02em;line-height:1.15}
.flow__rule{width:30px;height:2px;border-radius:2px;background:var(--mint);opacity:.9}
/* description and price belong to the focused card only */
.flow__desc,.flow__price{opacity:0;transform:translateY(8px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.flow__card[data-pos="0"] .flow__desc,
.flow__card[data-pos="0"] .flow__price{opacity:1;transform:none}
.flow__desc{font-size:clamp(.78rem,.95vw,.9rem);line-height:1.5;color:var(--nav);max-width:26ch}
.flow__price{
  margin-top:.35rem;background:var(--pill);color:var(--cream);
  border:1px solid rgba(178,202,170,.28);border-radius:999px;
  padding:.4rem 1rem;font-weight:800;font-size:.9rem;
}

.flow__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:40;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(11,38,23,.7);border:1.4px solid rgba(178,202,170,.4);color:var(--cream);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease-out);
}
.flow__nav svg{width:22px;height:22px}
.flow__nav:hover{background:var(--cream);color:var(--field);border-color:var(--cream)}
.flow__nav--prev{left:clamp(.4rem,1.5vw,1.4rem)}
.flow__nav--next{right:clamp(.4rem,1.5vw,1.4rem)}

.flow__dots{display:flex;justify-content:center;gap:.55rem;margin-top:clamp(1.6rem,3.4vw,2.4rem)}
.flow__dot{
  height:44px;width:26px;padding:0;border:0;background:none;position:relative;
}
.flow__dot::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:8px;width:8px;border-radius:999px;background:rgba(163,191,179,.32);
  transition:width .35s var(--ease-out),background .35s var(--ease);
}
.flow__dot[aria-current="true"]::after{width:26px;background:var(--mint)}
.flow__dot:hover::after{background:var(--nav)}

@media (max-width:560px){
  .flow__card{width:min(72vw,272px);height:clamp(392px,60svh,500px)}
  .flow__nav{width:44px;height:44px}
  .flow__nav--prev{left:.25rem}
  .flow__nav--next{right:.25rem}
}

/* Reduced motion: keep the layout (it is the content), drop the travel and
   the 3D rotation, which are the parts that trigger discomfort. */
@media (prefers-reduced-motion:reduce){
  .flow__card{transition:none!important}
  .flow__card[data-pos="1"]{transform:translateX(74%) scale(.86)}
  .flow__card[data-pos="-1"]{transform:translateX(-74%) scale(.86)}
  .flow__card[data-pos="2"]{transform:translateX(163%) scale(.72)}
  .flow__card[data-pos="-2"]{transform:translateX(-163%) scale(.72)}
  .flow__desc,.flow__price{transition:none!important}
}

/* Delivery runs straight into the seasonal feature, so the default
   section padding stacked 128px against 128px with the seasonal grid's
   vertical centring adding more on top. Tighten just this junction
   rather than every section gap on the page. */
/* testimonials -> three steps: 128 against 128 was too airy, pull it in */
.voices{padding-bottom:clamp(2.6rem,6vw,4.8rem)}
.delivery{padding-top:clamp(2.6rem,6vw,4.8rem)}
/* three steps -> berry oat: previously over-tightened, give it room back */
.delivery{padding-bottom:clamp(2rem,4vw,3.4rem)}
.seasonal{padding-top:clamp(2rem,4vw,3.4rem)}
/* the cup column is much taller than the copy, so centring the grid pushed
   the eyebrow down by roughly half the difference. Align to the top and let
   the art overhang below instead. */
.seasonal__grid{align-items:start}
.seasonal__copy{padding-top:clamp(2.4rem,5vw,4rem)}
/* align the cup with the copy instead of floating it above, pull it toward
   the text, and give it more presence */
.seasonal{overflow:hidden}   /* the glow below escapes its column otherwise */
.seasonal__art{margin-top:0;justify-items:start}
.seasonal__art .cup{width:clamp(240px,28vw,400px);margin-left:calc(-1 * clamp(1rem,4vw,3.4rem))}
.seasonal__art::before{left:34%}

/* ============================ sticky header =============================
   The nav used to live inside .hero, which has overflow:hidden - sticky
   would have been trapped there. It is now a page-level header, and <main>
   is pulled up by its height so the hero art still shows THROUGH the bar
   at rest. The bar only gains a background once you have scrolled. */
:root{--navh:clamp(64px,8.4svh,86px)}

.siteheader{
  position:sticky;top:0;z-index:60;
  height:var(--navh);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.siteheader.is-stuck{
  background:rgba(11,38,23,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(178,202,170,.2);
}
main{margin-top:calc(-1 * var(--navh))}
.hero{padding-top:var(--navh)}

/* anchor jumps must clear the bar instead of hiding under it */
section[id]{scroll-margin-top:calc(var(--navh) + 14px)}

.siteheader .nav{
  width:var(--shell);margin-inline:auto;padding-block:0;
  display:flex;align-items:center;gap:clamp(1.2rem,4vw,3.4rem);
}
.siteheader .nav__links{
  display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2.2rem);
  flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  margin-inline:-.4rem;padding-inline:.4rem;
}
.siteheader .nav__links::-webkit-scrollbar{display:none}
.siteheader .nav__links a{
  position:relative;white-space:nowrap;flex:none;
  padding-block:.9rem;margin-block:-.9rem;
}
/* current-section indicator */
.siteheader .nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:.55rem;height:2px;border-radius:2px;
  background:var(--mint);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.siteheader .nav__links a[aria-current="page"]{color:var(--cream)}
.siteheader .nav__links a[aria-current="page"]::after{transform:scaleX(1)}

@media (max-width:900px){
  .siteheader .nav{gap:1rem}
  .siteheader .nav__links{gap:1.15rem}
  .brand__name{display:none}          /* seal alone keeps the row on one line */
}
@media (prefers-reduced-motion:reduce){
  .siteheader .nav__links a::after{transition:none}
}

/* ------------------------- nav conversion CTA -------------------------- */
.siteheader .nav__links{flex:1 1 auto;min-width:0}
.navcta{
  flex:none;margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.55rem 1.35rem;border-radius:999px;
  background:var(--cream);color:var(--field);
  font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s var(--ease),transform .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.navcta:hover{background:var(--mint);transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(0,0,0,.75)}

/* ------------------------------ order --------------------------------- */
.order{position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(3.4rem,7vw,5.6rem);
  background:linear-gradient(180deg,var(--field) 0%, var(--field-lo) 100%)}
.order__glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1100px,120%);aspect-ratio:2/1;pointer-events:none;
  background:radial-gradient(ellipse 50% 55% at 50% 50%, rgba(55,122,78,.4) 0%, rgba(55,122,78,0) 70%);
}
.order__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(.9rem,2vw,1.3rem)}
.order__lede{max-width:46ch;margin:0}
.order__form{
  display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(.6rem,1.6vw,1rem);width:min(100%,520px);
}
.order__input{
  flex:1 1 240px;min-height:52px;
  padding:.85rem 1.25rem;border-radius:999px;
  background:rgba(11,38,23,.6);color:var(--cream);
  border:1.4px solid rgba(178,202,170,.32);
  font:inherit;font-size:.95rem;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.order__input::placeholder{color:var(--nav);opacity:.75}
.order__input:focus{outline:none;border-color:var(--mint);background:rgba(11,38,23,.85)}
.order__input:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.order__btn{
  flex:none;min-height:52px;padding:.85rem 1.9rem;border-radius:999px;
  background:var(--cream);color:var(--field);
  font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s var(--ease),transform .25s var(--ease-out);
}
.order__btn:hover{background:var(--mint);transform:translateY(-2px)}
.order__note{
  margin:.2rem 0 0;min-height:1.4em;
  font-size:.84rem;color:var(--mint);
}
@media (max-width:560px){
  .navcta{padding:.5rem 1rem;letter-spacing:.1em}
  .order__form{width:100%}
  .order__btn{width:100%}
}

/* ---------------- divider: berry oat -> get one sent over ---------------
   A hairline that fades at both ends rather than a hard full-width rule,
   matching the arc stroke and the marquee's masked edges. */
.order::before,
.seasonal::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(var(--shell),94vw);height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,
    transparent 0%, rgba(178,202,170,.42) 16%,
    rgba(178,202,170,.42) 84%, transparent 100%);
}
/* trim the run-in a little; the seasonal grid's tall cup column was doing
   most of the spacing here, not the padding */
.seasonal{padding-bottom:clamp(2.4rem,4.8vw,4.4rem)}
.order{padding-top:clamp(2.6rem,5vw,4.4rem)}

/* the hidden SVG symbol container - was an inline style attribute, moved here
   so the CSP can forbid inline styles outright */
.svg-defs{position:absolute}

/* ---------------- mobile: centre copy in stacked sections ---------------
   Below 900px the two-column editorial sections collapse to one, and
   left-aligned copy sitting under a centred image reads as misaligned.
   Hero is deliberately excluded - its left-aligned headline against the
   arc is the composition this page is built on. */
@media (max-width:900px){
  .story__copy,.seasonal__copy{text-align:center}
  .story__copy .lede,.seasonal__copy .lede{margin-inline:auto}
  .stats{justify-content:center}
  .seasonal__copy .pills{justify-content:center}
  /* a left rule under centred text reads as a mistake; move it above */
  .admission{
    border-left:0;border-top:2px solid var(--mint);
    padding-left:0;padding-top:clamp(.9rem,3vw,1.2rem);
    margin-inline:auto;max-width:46ch;
  }
}

/* ------------------- mobile: centre the stacked hero -------------------
   On desktop the hero headline is deliberately left-aligned against the
   arc. On mobile the arc becomes a top band with the cup centred above it,
   so left-aligned copy underneath reads as misaligned. The seasonal cup
   also carried a desktop-only nudge toward its copy column, which on a
   stacked layout just pinned it to the left edge. */
@media (max-width:900px){
  .hero__copy{text-align:center}
  .hero__copy .pills{justify-content:center}
      .hero__art img.cup{height:clamp(420px,64svh,600px)}

  /* undo the desktop pull-toward-the-text */
  .seasonal__art{justify-items:center}
  .seasonal__art .cup{margin-inline:auto}   /* not margin-left:0 - that pins left */
  .story__art,.seasonal__art{justify-items:center}
}
@media (max-width:560px){
  .hero__art img.cup{height:clamp(395px,61svh,530px)}
}

/* The hero art slot was a shrink-to-fit grid item, which collapsed to 132px
   and made object-fit:contain letterbox the cup - raising `height` only grew
   empty space. Give the slot the full column and let the image size itself. */
[data-cup-slot]{width:100%;display:flex;justify-content:center}
img.cup{object-fit:contain;margin-inline:auto}