/* ===========================================================
   AYO Wellness - mobile IV therapy, Austin TX
   Design system: arte* (Refero), adapted. See docs/ for the spec.
   =========================================================== */

:root{
  /* palette */
  --wheat-cream:#e5ddcd; --cream-2:#efe8dc; --cream-soft:#e2ded2;
  --harvest-copper:#ab5700; --copper-ink:#8a4500;
  --citron-beam:#e8e359; --citron-hi:#f2ee7a;
  --morning-glory:#7997ff; --amber-glow:#d99623;
  --forest-floor:#214534; --deep-moss:#103d26; --moss-hi:#0a2c1b;
  --olive-branch:#568037; --coral-petal:#e99686; --dot-open:#9ccb6a;
  --harvest-red:#c8102e;  /* arte* Harvest Red: drip tile c6 and the "not" marks */
  --line:rgba(171,87,0,.28); --line-soft:rgba(226,222,210,.4);

  /* fluid type */
  --t-caption:.75rem;
  --t-body:clamp(1rem,1.05vw,1.125rem);
  --t-sub:clamp(1.125rem,1.6vw,1.25rem);
  --t-h3:clamp(1.5rem,2.6vw,1.875rem);
  --t-h2:clamp(1.9rem,3.6vw,3.1rem);
  --t-h1:clamp(2.1rem,5.6vw,4.6rem);

  /* shape + rhythm */
  --r-btn:31px; --r-card:20px; --r-tag:9999px; --r-media:64px;
  --max-w:1200px; --gutter:clamp(18px,4vw,40px);
  --sect:clamp(64px,9vw,140px);

  /* motion */
  --ease:cubic-bezier(0,0,.3,1);
  --ease-soft:cubic-bezier(.25,.46,.45,.94);
  --d-fast:200ms; --d-base:400ms; --d-slow:800ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--wheat-cream);color:var(--copper-ink);
  font:400 var(--t-body)/1.45 Poppins,ui-sans-serif,system-ui,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  font-weight:500;letter-spacing:-.015em;margin:0}
h1{font-size:var(--t-h1);line-height:.86}
h2{font-size:var(--t-h2);line-height:.9}
h3{font-size:var(--t-h3);line-height:.95}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* full-bleed grid: media breaks the measure, text does not.
   Named lines instead of 100vw, which would include the scrollbar. */
.page{display:grid;
  grid-template-columns:[full-start] minmax(var(--gutter),1fr)
    [content-start] minmax(0,var(--max-w)) [content-end]
    minmax(var(--gutter),1fr) [full-end]}
.page>*{grid-column:content}
.page>.bleed{grid-column:full}

/* 75% larger than the original clamp(11px,1.05vw,13px), client-set 2026-09-28,
   with the mark spinning to its left at the height of the text itself. */
.eyebrow{display:flex;align-items:center;gap:.55em;
  font:500 clamp(19px,1.84vw,23px)/1.3 Poppins,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 16px}
.eyebrow-mark{display:block;flex:none;width:1.25em;height:1.25em;
  animation:pinwheel 14s linear infinite;will-change:transform;transform-origin:50% 50%}
.eyebrow-mark img{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){.eyebrow-mark{animation:none;transform:none}}
.lede{font-size:var(--t-sub);line-height:1.4;max-width:46ch}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:500 clamp(13px,1.1vw,15px)/1 Poppins,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;padding:19px 32px;border-radius:var(--r-btn);
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
/* Citron is reserved for the primary call/text CTA. On cream grounds the button
   is forest green with a citron label; inside the green hero it inverts. */
.btn-primary{background:var(--deep-moss);color:var(--citron-beam)}
.btn-primary:hover{background:var(--moss-hi)}
.hero-copy .btn-primary{background:var(--citron-beam);color:var(--deep-moss)}
.hero-copy .btn-primary:hover{background:var(--citron-hi)}
.btn-dark{background:var(--deep-moss);color:var(--citron-beam)}
.btn-dark:hover{background:var(--moss-hi)}
/* Secondary CTA. Cream, not citron: citron belongs to the call/text button alone
   (rule 4.2b.1), and a citron outline beside a citron fill would read as a pair of
   equals. Cream measures 7.91 on the hero ground, for both the label and the
   border, against bars of 4.5 and 3.0. Same size as the primary so the two stack
   as a deliberate pair rather than two different tiers. */
.btn-outline{background:transparent;color:var(--wheat-cream);border-color:var(--wheat-cream)}
.btn-outline:hover{background:var(--wheat-cream);color:var(--forest-floor)}
.btn-ghost-ink{background:transparent;color:var(--copper-ink);border-color:var(--harvest-copper);
  padding:12px 22px;font-size:12px;letter-spacing:.12em}
:focus-visible{outline:2px solid var(--morning-glory);outline-offset:3px}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:60;background:var(--wheat-cream);
  border-bottom:1px solid var(--line)}
/* full width rather than boxed to the 1200px measure, so the wordmark lines up
   with the hero label directly beneath it and the CTA sits on the right edge */
.nav-in{max-width:none;margin:0;padding:11px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
@media (min-width:900px){
  .nav-in{padding-left:clamp(18px,2.2vw,32px);padding-right:clamp(18px,2.2vw,32px)}
}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none}
.wordmark .mark,.mark{display:grid;place-items:center;flex:none;
  background:var(--wheat-cream);border-radius:50%}
.wordmark .mark{width:clamp(34px,3.2vw,42px);height:clamp(34px,3.2vw,42px);padding:5px}
.mark img{width:100%;height:auto}
.mark-lg{width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);padding:10px}
.wordmark b{font-family:"Bricolage Grotesque",sans-serif;font-weight:500;
  font-size:clamp(1.1rem,2vw,1.55rem);line-height:1;color:var(--deep-moss);
  letter-spacing:-.01em;white-space:nowrap}
/* the footer wordmark still sits on moss */
.foot .wordmark b{color:var(--deep-moss)}
/* On cream the citron fill would be 1.01:1 as a shape, so the nav CTA inverts to
   the deep moss fill with a citron label: 9.00:1 shape, 9.06:1 text. */
.nav-links{display:none;align-items:center;gap:clamp(14px,1.7vw,26px);margin:0 auto}
.nav-links a{font:500 clamp(12px,1.05vw,14px)/1 Poppins,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--copper-ink);text-decoration:none;white-space:nowrap;
  padding:6px 0;border-bottom:1px solid transparent;
  transition:color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.nav-links a:hover{color:var(--deep-moss);border-bottom-color:var(--deep-moss)}
@media (min-width:1040px){.nav-links{display:flex}}
.nav .btn{padding:13px 22px;font-size:clamp(12px,1.05vw,14px);white-space:nowrap;
  background:var(--deep-moss);color:var(--citron-beam)}
.nav .btn:hover{background:var(--moss-hi)}
/* the mark needs no plate on cream, the Deep Moss drop reads at 9:1 */
.nav .mark{background:transparent;padding:0;border-radius:0;
  width:clamp(30px,2.8vw,38px);height:auto}
.nav .lbl{display:none}
@media (min-width:620px){.nav .lbl{display:inline}}

/* ---------------- hero ---------------- */
/* Two columns on desktop: photograph left, every piece of copy right on solid
   forest floor. Nothing sits on the image, so the frames ship ungraded and the
   copy gets the full 7.9:1 of citron on moss. Stacks on narrow screens. */
.hero-unit{background:var(--forest-floor);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr}

.hero-media{position:relative;z-index:0;min-height:clamp(260px,42vh,420px)}
.hero-media .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 32%;opacity:0;transition:opacity var(--d-slow) var(--ease)}
.hero-media .slide.is-active{opacity:1}
/* top right: the bottom left is now the offer block, and at mobile sizes the
   detail line ran straight through the dots */
/* Bottom-right of the photo column. They sat top-right until 2026-09-28, where
   they collided with the label on mobile once it centred. */
.dots{position:absolute;z-index:4;bottom:clamp(16px,2vw,26px);right:var(--gutter);
  display:flex;gap:9px}
.dots button{width:30px;height:3px;border:0;padding:0;cursor:pointer;border-radius:2px;
  background:rgba(226,222,210,.55);transition:background-color var(--d-base) var(--ease)}
.dots button[aria-current="true"]{background:var(--wheat-cream)}

.hero-copy{position:relative;z-index:1;background:var(--forest-floor);
  display:flex;flex-direction:column}
.hero-copy>.strip{flex:0 0 auto;margin:0;padding:clamp(18px,2.2vw,26px) var(--gutter);
  border-bottom:1px solid rgba(232,227,89,.18)}
.hero-copy-in{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.hero-copy-in{width:100%;padding:clamp(28px,4vw,56px) var(--gutter)}

/* overlaid on the photograph, top-left of the image column */
.hero-label{position:absolute;top:0;left:0;z-index:3;
  padding:clamp(20px,3vw,40px) var(--gutter)}
.hero-label-row{display:flex;align-items:center;gap:clamp(8px,1vw,16px)}
/* Citron, client-set 2026-09-28, against rule 4.2b.1 (citron reserved for the
   call/text CTA) and 4.2b.2 (hero display type is cream). Worth recording that
   this does NOT change the measured contrast: citron #e8e359 and cream #e5ddcd
   have relative luminance 0.7282 and 0.7278, a 0.1% difference, and WCAG is
   luminance-only. It buys hue separation from the warm bookcase, nothing more.
   The mobile legibility numbers are in the manifest and still need a real fix. */
.hero-label h1{color:var(--citron-beam);width:max-content;max-width:100%}
/* pinwheel: spins about its own centre, no travel */
.orbit-mark{display:grid;place-items:center;flex:none;
  width:clamp(52px,5.8vw,84px);height:clamp(52px,5.8vw,84px);
  background:var(--wheat-cream);border-radius:50%;padding:7px;
  animation:pinwheel 14s linear infinite;will-change:transform;
  transform-origin:50% 50%}
.orbit-mark img{width:100%;height:auto;display:block}
@keyframes pinwheel{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .orbit-mark{animation:none;transform:none}
}
.hero-label p{margin:8px 0 0;font:500 clamp(11px,1.05vw,13px)/1 Poppins,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream-soft)}

.strip{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font:500 clamp(11px,1.02vw,13px)/1.3 Poppins,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-soft)}
.strip .dot{width:9px;height:9px;border-radius:50%;background:var(--dot-open);flex:none;
  box-shadow:0 0 0 0 rgba(156,203,106,.55);animation:pulse 2s var(--ease) infinite}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(156,203,106,.55)}
  70%{box-shadow:0 0 0 9px rgba(156,203,106,0)}100%{box-shadow:0 0 0 0 rgba(156,203,106,0)}}

.hero-copy h2{color:var(--wheat-cream);margin-bottom:14px;max-width:16ch}
.hero-copy .lede{color:var(--cream-soft)}
.band-cta{display:flex;flex-direction:column;align-items:flex-start;margin-top:clamp(20px,2.6vw,32px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.2vw,14px)}

/* Scrim. On desktop it sits at the bottom, carrying the trust chips: bare, that
   text measured 1.72:1 over the brighter frames. On mobile the chips are hidden,
   so the bottom scrim has nothing to do and the gradient is flipped to the top,
   where the centred label now sits. Same ramp, same alphas, just inverted. */
.hero-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;
  z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(16,61,38,.94),rgba(16,61,38,.72) 38%,rgba(16,61,38,0))}

/* offer sits over the photograph, bottom left.
   Headline is 4x the old 13px ribbon, the detail line 2x, both scaled down on
   narrow screens so they do not swallow the image. */

.offer-line{margin:clamp(12px,1.4vw,18px) 0 0;
  font:500 clamp(18px,2.1vw,30px)/1.15 Poppins,sans-serif;
  letter-spacing:-.005em;color:var(--wheat-cream)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{font:500 11px/1 Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-tag);padding:8px 14px}

/* After .chips deliberately: .chips sets padding:0 at the same specificity, so
   this has to come later to win. Right padding reserves the corner the carousel
   controls now sit in, so the pills wrap before they reach them. */
.hero-chips{position:absolute;z-index:3;left:0;bottom:0;margin:0;
  padding:clamp(16px,2vw,26px) clamp(122px,15vw,160px) clamp(30px,3.6vw,50px) var(--gutter);
  max-width:100%}

@media (min-width:900px){
  .hero-unit{grid-template-columns:1fr 1fr}
  .hero-media{min-height:0}
  .hero-copy-in{max-width:calc(var(--max-w)/2);padding-right:clamp(28px,3.4vw,56px)}
  .hero-label{padding-left:clamp(18px,2.2vw,32px)}
  .hero-chips{padding-left:clamp(18px,2.2vw,32px)}
  .dots{right:clamp(18px,2.2vw,32px);bottom:clamp(20px,3vw,40px)}
}
@media (max-width:899px){
  .hero-media{aspect-ratio:4/3;min-height:0}
  /* Scrim flips to the top: the chips it used to carry are hidden at this width,
     and the centred label needs the cover. The ramp is held denser for longer
     than the desktop one because "Austin, TX" sits low in it - at the desktop
     shape it measured 2.38:1 on the office frame. This is the lightest of the
     combinations tried that clears both lines on all three slides: label 6.50,
     Austin 4.96, worst case across the carousel. */
  .hero-media::after{bottom:auto;top:0;height:68%;
    background:linear-gradient(to bottom,rgba(16,61,38,.94),rgba(16,61,38,.78) 45%,rgba(16,61,38,0))}
  /* Client-set 2026-09-28, mobile only: the label centres over the photo and the
     pinwheel comes off. At this width the mark sat beside a two-line H1 and ate
     roughly a third of the available measure, which forced the headline smaller
     than it needed to be. It still spins in the footer. */
  .hero-label{left:0;right:0;padding-inline:var(--gutter);text-align:center}
  .hero-label-row{justify-content:center}
  .hero-label .orbit-mark{display:none}
  .hero-label h1{width:auto;margin-inline:auto}
  .hero-label p{text-align:center}
  /* Client-set 2026-09-28: the trust pills come off the photo on mobile. At this
     width they wrapped to three rows over the subject and pushed the CTA down.
     Every claim on them is repeated in the How it works and FAQ sections. */
  .hero-chips{display:none}
  .band-cta{width:100%}
  .cta-row{width:100%}
  .band-cta .btn-primary,.band-cta .btn-outline{width:100%}
}

/* ------ droplet collapse (desktop, JS-gated by .drop-fx on <html>) ------ */
.drop-fx .drop-stage{height:200vh;position:relative}
.drop-fx .hero-unit{position:sticky;top:0;z-index:2;will-change:clip-path}
.drop-fx #after-hero{position:relative;z-index:1;margin-top:-100vh}
.drop-fx .drop-stage::after{content:"";position:absolute;inset:0;pointer-events:none}

/* ---------------- sections ---------------- */
.sect{padding-block:var(--sect)}
.sect-dark{background:var(--forest-floor);color:var(--cream-soft)}
.sect-dark h2,.sect-dark h3{color:var(--citron-beam)}
.sect-dark .eyebrow{color:var(--citron-beam)}
.eyebrow-ink{color:var(--copper-ink)}
.h2-ink{color:var(--harvest-copper)}

/* Moved out of its own section and under the review marquee 2026-09-28, so the
   people who did the work are named right where the praise sits. */
.authority{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,38px);
  margin-top:clamp(34px,4.5vw,60px);align-items:center;
  align-items:center;max-width:var(--max-w);margin:0 auto;padding:clamp(26px,3.4vw,44px) var(--gutter)}
.authority img{width:clamp(54px,6vw,76px)}
.authority p{color:var(--cream-soft);max-width:70ch}
.authority strong{color:var(--citron-beam);font-weight:500}
@media (max-width:700px){.authority{grid-template-columns:1fr;gap:16px}}

/* Steps run down the left, the two claim lists stack on the right. The numbered
   1-2-3 was dropped 2026-09-28 for icons: read top to bottom the sequence is
   already implied, and the numerals were competing with the section heading. */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,72px);
  align-items:start;margin-top:clamp(30px,3.6vw,48px)}
.steps{display:grid;gap:clamp(24px,2.8vw,36px)}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.6vw,20px);
  align-items:start}
/* Solid disc in the step's colour with the glyph masked out of it, so the icon
   you read is the page showing through rather than a drawn shape. The title takes
   the disc's near-complement (hue gap 154-159 degrees).
   Measured on cream-2: disc 5.61 / 4.83 / 8.18, all clear of the 3:1 non-text
   bar; titles 4.21 / 10.04 / 3.80, and h3 never renders below 24px so 3:1 is the
   bar there too. The light arte* fills - orange, gold, coral, periwinkle, pickle -
   were all ruled out for discs at 1.9 to 2.2. */
.step-icon{display:block;flex:none;
  width:clamp(48px,5vw,60px);height:clamp(48px,5vw,60px);color:var(--disc)}
.step-icon svg{width:100%;height:100%;display:block}
.step-a{--disc:#4854a3;--title:var(--harvest-copper)}  /* indigo   / copper */
.step-b{--disc:var(--harvest-red);--title:var(--deep-moss)}  /* red / moss   */
.step-c{--disc:#5e335d;--title:var(--olive-branch)}    /* plum     / olive  */
.step h3{margin-bottom:8px;color:var(--title)}
.how-claims{display:grid;gap:clamp(26px,3vw,40px)}
/* Moved out of the Reviews section 2026-09-28 and given an outline here, under
   the third step. No mark: the client wants the tile to read as a credential,
   not as another piece of brand furniture. */
.credential{border:1.5px solid var(--line);border-radius:var(--r-card);
  padding:clamp(20px,2.2vw,28px);margin-top:clamp(6px,1vw,14px)}
.credential p{color:var(--copper-ink);line-height:1.5}
.credential strong{color:var(--deep-moss);font-weight:500}
@media (max-width:820px){
  .how-grid{grid-template-columns:1fr;gap:36px}
}
.tick{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:14px}
.tick li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;line-height:1.45}
.tick b{font-weight:500;font-size:18px;line-height:1.25}
.is-yes b{color:var(--deep-moss)}
/* Harvest Red, 4.83 on cream-2. Copper measured 4.21 here and failed AA, and it
   did not read as a negative either. */
.is-no b{color:var(--harvest-red)}

/* drips */
/* The pills ARE the call to action here, so they are sized and weighted like
   buttons rather than like the quiet filter chips they started as. Citron stays
   reserved for the call/text CTA, so the selected state fills with Deep Moss. */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 32px;padding:0;list-style:none}
.filters button{font:500 clamp(12px,1.15vw,13.5px)/1 Poppins,sans-serif;letter-spacing:.06em;
  color:var(--deep-moss);background:transparent;border:1.5px solid var(--deep-moss);
  border-radius:var(--r-tag);padding:13px 22px;cursor:pointer;
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),
    transform var(--d-fast) var(--ease)}
.filters button:hover{background:var(--deep-moss);color:var(--wheat-cream);transform:translateY(-1px)}
.filters button[aria-pressed="true"]{background:var(--deep-moss);color:var(--wheat-cream)}
@media (prefers-reduced-motion:reduce){.filters button:hover{transform:none}}

.drips{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;
  padding:0;margin:0;list-style:none}

/* Seven tile fills, all arte* tokens at their exact hex. Five come from the
   product-carousel frames (blue, pink, pickle, orange, red) and carry arte*'s own
   contrast pairing from those frames. The carousel's forest green was dropped
   2026-09-28: at dE 0.9 from the Deep Moss CTA fill it was effectively the same
   colour, and it flattened the call button in this section. Berry Blush #5e335d
   and Morning Glory #7997ff replaced it - two colours, not one, so no fill is
   used three times across the eight cards. The accent sets the price and fills
   the 10% off badge.

   All tile text is Wheat Cream #e5ddcd, client-set 2026-09-28. This matches what
   arte* does on its own carousel. It does not clear AA on four of the six fills at
   our 14.7px body size - pink 1.72, orange 1.77, pickle 2.02, red 4.36 - because
   arte* runs that pairing at 100px+ display, where 3:1 is the whole bar. Recorded
   in spec 4.2c as a client decision, not an oversight. The fix, if it is ever
   wanted, is to deepen those four fills, not to change the ink.

   The badge label is the exception and stays on --tile-ink-alt: it sits on the
   accent, not on the tile, and cream on citron measures 1.00 - invisible, not
   merely low. Cream is used there wherever it reads (5.24 to 6.18). */
.drip{--tile:var(--wheat-cream);--tile-ink:var(--copper-ink);--tile-accent:var(--harvest-copper);
  --tile-ink-alt:var(--wheat-cream);
  border:1px solid transparent;border-radius:var(--r-card);padding:22px;
  background:var(--tile);color:var(--tile-ink);display:flex;flex-direction:column;gap:9px;
  transition:transform var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease)}
.drip-c1{--tile:#5e335d;--tile-ink:var(--wheat-cream);--tile-accent:#d99623;--tile-ink-alt:var(--moss-hi)}
.drip-c2{--tile:#4854a3;--tile-ink:var(--wheat-cream);--tile-accent:#e79f25;--tile-ink-alt:var(--moss-hi)}
.drip-c3{--tile:#ed9285;--tile-ink:var(--wheat-cream);--tile-accent:#416129;--tile-ink-alt:var(--wheat-cream)}
.drip-c4{--tile:#9ca338;--tile-ink:var(--wheat-cream);--tile-accent:#7a3e00;--tile-ink-alt:var(--wheat-cream)}
.drip-c5{--tile:#fb8b00;--tile-ink:var(--wheat-cream);--tile-accent:#3c5299;--tile-ink-alt:var(--wheat-cream)}
.drip-c6{--tile:var(--harvest-red);--tile-ink:var(--wheat-cream);--tile-accent:#e8e359;--tile-ink-alt:var(--moss-hi)}
.drip-c7{--tile:#7997ff;--tile-ink:var(--wheat-cream);--tile-accent:#5e335d;--tile-ink-alt:var(--wheat-cream)}
.drip:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(16,61,38,.18)}
@media (prefers-reduced-motion:reduce){.drip:hover{transform:none}}
.drip[hidden]{display:none}
.drip h3{font-size:1.15rem;color:var(--tile-ink)}
.drip p{font-size:.92rem;line-height:1.45;flex:1}
.price{display:flex;align-items:baseline;gap:10px;margin-top:4px}
/* No opacity fade on the old price: any value below 1 drops it under 4.5:1 on
   the red and blue tiles. The strikethrough and the smaller size carry the
   meaning on their own. */
.price s{font-size:.9rem}
/* 24px, so WCAG treats it as large text and 3:1 is the bar - the one place the
   arte* accent pairing fits. */
.price b{font-family:"Bricolage Grotesque",sans-serif;font-weight:500;font-size:1.5rem;
  color:var(--tile-accent)}
/* The badge is filled with the same accent as the price it sits beside. Its label
   takes --tile-ink-alt, which is the inverse of the body ink on every tile: the
   accent is mid-value, so whichever end reads on the tile does not read on the
   accent. Measured label contrast 6.00 to 11.20; chip against tile 3.05 to 4.71,
   clear of the 3:1 non-text bar. */
.price em{font-style:normal;font:500 10px/1 Poppins,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;background:var(--tile-accent);color:var(--tile-ink-alt);
  padding:5px 8px;border-radius:var(--r-tag)}
/* No longer fine print: this is the offer line under the menu, so it is sized to
   be read rather than skimmed past. Deep Moss per rule 4.2b.5 - Harvest Copper
   fails AA on cream below 24px. */
.note{font:500 clamp(1.05rem,1.5vw,1.35rem)/1.4 Poppins,sans-serif;
  color:var(--deep-moss);margin-top:26px;max-width:46ch}
.menu-cta{margin:clamp(18px,2vw,26px) 0 0}

/* included */
.included{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  margin-top:40px;padding:0;list-style:none}
@media (max-width:820px){.included{grid-template-columns:1fr;gap:28px}}

/* hours */
/* Two columns: the pitch and the after-hours CTA on the left, the posted week on
   the right. No margin-top - this grid is the section's first block now. */
.hours{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);
  align-items:start}
.hours-label{font:500 12px/1.4 Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--deep-moss);margin-bottom:6px}
/* Posted hours: day left, time right, one ruled row each. Both columns are Deep
   Moss - Harvest Copper measures 4.21 on cream-2 and fails AA at this size
   (rule 4.2b.5). */
/* Stretch, not baseline: on baseline the two cells get different box tops, so
   their rules land at different heights and the row reads as broken in two. */
.hours-list{margin:0;display:grid;grid-template-columns:1fr auto}
.hours-list dt,.hours-list dd{padding:13px 0;border-top:1px solid var(--line);
  line-height:1.35}
/* Brown, client-set 2026-09-28. Copper Ink #8a4500, not Harvest Copper #ab5700:
   copper measures 4.21 on this ground and fails AA at both of these sizes, while
   copper ink reaches 5.88. Same reasoning as rule 4.2b.5. */
.hours-list dt{font:500 clamp(.95rem,1.15vw,1.05rem)/1.35 Poppins,sans-serif;
  color:var(--copper-ink)}
.hours-list dd{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:500;
  font-size:clamp(1rem,1.3vw,1.2rem);color:var(--copper-ink);text-align:right;
  white-space:nowrap}
.after-hours{font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  font-weight:500;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.15;
  color:var(--deep-moss);margin:clamp(26px,3vw,38px) 0 clamp(14px,1.6vw,20px)}
@media (max-width:820px){.hours{grid-template-columns:1fr;gap:28px}}

/* form */
.form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);
  margin-top:38px;align-items:start}
@media (max-width:880px){.form-wrap{grid-template-columns:1fr;gap:30px}}
form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font:500 11px/1 Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.field input,.field select{font:400 16px/1.3 Poppins,sans-serif;color:var(--copper-ink);
  background:var(--wheat-cream);border:1px solid var(--line);border-radius:14px;
  padding:14px 15px;width:100%;
  transition:border-color var(--d-fast) var(--ease)}
.field input:focus,.field select:focus{border-color:var(--morning-glory);outline:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#c0392b}
.err{font-size:.78rem;color:#c0392b;min-height:1em}
.consent{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:.8rem;line-height:1.5}
.consent input{width:19px;height:19px;margin-top:2px;accent-color:var(--deep-moss)}
.form-status{border-radius:var(--r-card);padding:18px;font-size:.92rem;line-height:1.5}
.form-status[data-tone="ok"]{background:var(--deep-moss);color:var(--citron-beam)}
.form-status[data-tone="bad"]{border:1px solid #c0392b;color:#c0392b}

/* faq */
.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 42px 22px 0;position:relative;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:500;
  font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--harvest-copper);border-bottom:2px solid var(--harvest-copper);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--d-base) var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 0 24px;max-width:78ch;line-height:1.55}

/* Footer: a full-viewport arte*-style closer, giant wordmark centred, everything
   else pushed to the floor.

   The ground moved from Morning Glory #7997ff to arte*'s Deep Indigo #4854a3 -
   the same blue as drip tile c2 - because the client asked for all-cream text
   here. Cream on Morning Glory measures 2.02, which fails even the 3:1 large-text
   bar, so no type size could have rescued it. On Deep Indigo cream reaches 5.06
   and clears the body bar at every size in this block. Still the one blue in the
   system, just the deeper end of it. */
.foot{background:#4854a3;color:var(--wheat-cream);
  min-height:100svh;display:flex}
.foot-in{flex:1;max-width:var(--max-w);margin:0 auto;width:100%;
  padding:clamp(44px,6vw,80px) var(--gutter) clamp(26px,3vw,40px);
  display:grid;grid-template-rows:1fr auto;gap:clamp(24px,3vw,44px);
  justify-items:center;text-align:center}
.foot-top{display:grid;justify-items:center;align-content:center;gap:clamp(18px,2.4vw,34px)}
.foot-mark{flex-direction:column;gap:clamp(18px,2.4vw,32px)}
.foot-mark .orbit-mark{width:clamp(72px,9vw,124px);height:clamp(72px,9vw,124px)}
/* Extremely large, arte*'s display-xxl register. Clamped so "AYO Wellness" stays
   on one line from 360px up without touching the gutters. */
.foot .wordmark b{color:var(--wheat-cream);
  font-size:clamp(2.1rem,11.4vw,9.5rem);line-height:.86;letter-spacing:-.02em}
.foot-bottom{display:grid;justify-items:center;gap:clamp(18px,2.4vw,30px);width:100%}
/* 44px hit targets, cream on Deep Indigo at 5.06 for the glyph - well clear of
   the 3:1 non-text bar these need. */
.foot-social{display:flex;justify-content:center;gap:12px}
.foot-social a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  color:var(--wheat-cream);border:1.5px solid rgba(229,221,205,.45);
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease)}
.foot-social a:hover{background:var(--wheat-cream);color:#4854a3;border-color:var(--wheat-cream)}
.foot-social svg{width:21px;height:21px;display:block}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2vw,30px)}
.foot-links a{font:500 clamp(12px,1.15vw,14px)/1 Poppins,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wheat-cream);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:3px;
  transition:border-color var(--d-fast) var(--ease)}
.foot-links a:hover{border-bottom-color:var(--wheat-cream)}
/* No opacity fade: cream is 5.06 here at full strength and anything less starts
   eating into the body-text bar. */
.foot small{display:block;font-size:clamp(.82rem,1vw,.92rem);line-height:1.6;max-width:70ch}
.foot a{color:var(--wheat-cream)}
.foot-end{display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,26px);justify-content:center;
  border-top:1px solid rgba(229,221,205,.32);padding-top:clamp(18px,2vw,26px);
  font-size:clamp(.8rem,.95vw,.9rem);width:100%}

/* sticky mobile bar */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:var(--cream-2);border-top:1px solid var(--line)}
.mobar .btn{flex:1;padding:16px 10px;font-size:12px}
@media (max-width:880px){
  .mobar{display:flex}
  body{padding-bottom:78px}
}

/* ---------------- reveal ---------------- */
/* Default is the VISIBLE state. JS only hides an element at the moment it
   starts observing it, so no-JS, no-IO and reduced-motion all render fully. */
[data-reveal]{opacity:1;transform:none}
.reveal-armed[data-reveal]{opacity:0;transform:translateY(24px)}
.reveal-armed[data-reveal].is-in{opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .reveal-armed[data-reveal]{opacity:1!important;transform:none!important}
  .hero .slide{transition:none}
}

/* ---------------- live Google reviews ---------------- */
.greviews{padding-block:var(--sect)}
.greviews-in{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.greviews-head{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;
  justify-content:space-between;margin-bottom:clamp(26px,3vw,40px)}
.greviews-feed{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin-top:0}
.greviews-feed .review{border-color:var(--line)}
.greviews-feed blockquote{color:var(--copper-ink)}
.greviews-feed cite{color:var(--copper-ink);opacity:.8}
.greviews-fallback{grid-column:1/-1;max-width:56ch}
.greviews-fallback h3{margin-bottom:8px}
.greviews-fallback a{color:var(--deep-moss);text-underline-offset:4px}
.authority-ink p{color:var(--copper-ink)}
.authority-ink strong{color:var(--deep-moss);font-weight:500}