/* ===================================================================
   EPOCA — Hearthcraft design system
   Monumental warmth · the circle · one green thread
   One stylesheet for every page. Edit tokens here, not inline.
   =================================================================== */

/* ---------- tokens ---------- */
:root{
  /* brand guide */
  --green:#378c55; --green-deep:#2a6e43; --ink:#1e1c19; --white:#fff;
  --navy:#394366; --berry:#962d4d; --coral:#d57256; --gold:#d1a231; --pine:#4d847e;
  --slate:#597399; --rose:#bd798d; --peach:#f2b194; --butter:#fde7ae; --mint:#69bcb6;
  /* hearthcraft surfaces */
  --bone:#faf7f1; --oat:#f1ebdf; --clay:#e7ddcb; --line:#ddd5c4;
  --muted:#6f695d;
  /* engine room */
  --void:#101311; --phosphor:#5fe08c;
  /* type */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Figtree',Verdana,sans-serif;
  --mono:'Fragment Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px;}
.cball :focus-visible,.cta :focus-visible,footer :focus-visible{outline-color:var(--mint);}
body{font-family:var(--sans);font-size:1.04rem;color:var(--ink);background:var(--bone);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:var(--serif);font-weight:520;line-height:.96;letter-spacing:-.025em;text-wrap:balance;}
h1 em,h2 em,h3 em,.g{font-style:italic;color:var(--green);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4.5vw,72px);}
::selection{background:var(--green);color:#fff;}

.kicker{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.15rem,1.6vw,1.45rem);letter-spacing:0;text-transform:none;color:var(--green);display:inline-block;}

.fig{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* ---------- buttons: pills & dots, never boxes ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:1.05rem 2rem;border-radius:999px;font-weight:700;font-size:.95rem;cursor:pointer;border:1.5px solid transparent;transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s;position:relative;}
.btn .o{width:8px;height:8px;border-radius:50%;background:currentColor;transition:transform .35s var(--ease);}
.btn:hover .o{transform:scale(1.7);}
.btn:hover{transform:translateY(-3px);}
.btn-green{background:var(--green);color:#fff;} .btn-green:hover{background:var(--green-deep);}
.btn-ink{background:var(--ink);color:var(--bone);} .btn-ink:hover{background:#000;}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;} .btn-ghost:hover{background:rgba(255,255,255,.14);}
.btn-line{border-color:var(--ink);color:var(--ink);} .btn-line:hover{background:var(--ink);color:var(--bone);}

/* ---------- entrance curtain ---------- */
#curtain{position:fixed;inset:0;z-index:999;background:var(--green);display:flex;align-items:center;justify-content:center;transition:transform .9s var(--ease);}
#curtain.lift{transform:translateY(-101%);}
#curtain .mark{width:86px;height:86px;border-radius:50%;background:url('epoca-circle.png') center/contain no-repeat;animation:pulse 1.2s var(--ease) infinite alternate;}
@keyframes pulse{from{transform:scale(.94);opacity:.85}to{transform:scale(1.03);opacity:1}}
.no-js #curtain{display:none;}

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.2rem 0;transition:.4s var(--ease);}
.navbar{display:flex;align-items:center;justify-content:space-between;}
.logo .circle{display:block;width:52px;height:52px;border-radius:50%;background:url('epoca-circle.png') center/contain no-repeat;transition:transform .5s var(--ease);}
.logo:hover .circle{transform:rotate(180deg);}
nav.links{display:flex;align-items:center;gap:2.1rem;}
nav.links a{font-weight:600;font-size:.93rem;color:#fff;position:relative;}
nav.links a:not(.btn)::after{content:"";position:absolute;left:50%;bottom:-8px;width:5px;height:5px;border-radius:50%;background:var(--mint);transform:translateX(-50%) scale(0);transition:transform .3s var(--ease);}
nav.links a:not(.btn):hover::after,nav.links a.active:not(.btn)::after{transform:translateX(-50%) scale(1);}
header.scrolled,body.interior header{background:rgba(250,247,241,.9);backdrop-filter:blur(16px);padding:.65rem 0;box-shadow:0 1px 0 var(--line);}
header.scrolled nav.links a,body.interior nav.links a{color:var(--ink);}
header.scrolled nav.links a:not(.btn)::after,body.interior nav.links a:not(.btn)::after{background:var(--green);}
header.scrolled nav.links a.btn,body.interior nav.links a.btn{color:#fff;}
/* The bars are only 26x16, far under the 44px minimum for a thumb. Padding grows
   the hit area and the negative margin keeps the bars visually where they were. */
.menu-btn{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;z-index:120;
  padding:14px 9px;margin:-14px -9px;-webkit-tap-highlight-color:transparent;}
.menu-btn span{width:26px;height:2px;background:#fff;transition:.3s;}
body.interior .menu-btn span,header.scrolled .menu-btn span{background:var(--ink);}
.menu-btn.open span{background:var(--ink) !important;}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-btn.open span:nth-child(2){opacity:0;}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- HOME HERO: film + monumental type ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,15,13,.86),rgba(16,15,13,.18) 55%,rgba(16,15,13,.42));}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:6vh;padding-top:16vh;}
/* The max was 12rem (192px) and it did not fit. Measured 8/7 at 1600px wide:
   the .wrap gives the headline 1296px, and line 1 ("We bring brands" + the
   logo pill) needs 7.239em, which is 1332px at 192px type. Thirty-six pixels
   over, so "brands" dropped to its own line and the designed three-line break
   became four. It only looked fine in Edge because that window was zoomed,
   which shrinks the CSS viewport and pulls the type back under the limit.
   1296 / 7.239 = 179px is the true ceiling. 10.75rem (172px) sits under it
   with about 4% to spare, which is enough to survive a font fallback or a
   small copy change. Nothing below 1495px viewport changes: the 11.5vw slope
   still governs there. If you edit line 1 of the headline, re-check this. */
.hero-title{color:var(--bone);font-size:clamp(2.5rem,11.5vw,10.75rem);line-height:.96;letter-spacing:-.035em;}
.hero-title .row{display:block;overflow:hidden;padding:0 .08em .22em;margin:0 -.08em -.22em;}
.hero-title .row>span{display:block;transform:translateY(110%);}
.hero-title .indent{padding-left:clamp(2rem,12vw,14rem);}
.hero-title .nb{white-space:nowrap;}
/* On a phone the three designed lines were wrapping into five, and the .indent
   plus the inline chips left lines 2 and 3 starting at random offsets, which read
   as broken rather than composed. Below 760px each row gets its own clean line:
   no indent, the chip drops out of the text flow so words stay together, and the
   type comes down a notch so "heart of the home." still lands on one line. */
@media(max-width:760px){
  .hero-title{font-size:clamp(2.35rem,9.2vw,3.4rem);line-height:1.02;}
  .hero-title .indent{padding-left:0;}
  .hero-title .row{padding-bottom:.16em;margin-bottom:-.16em;}
  .hero-title .chip{height:.62em;margin:0 .12em 0 .06em;}
}
.hero-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-top:3.2rem;}
.hero-sub p{max-width:44ch;color:rgba(255,255,255,.85);font-size:clamp(.98rem,1.2vw,1.15rem);}
.hero-kicker{color:var(--mint);}
.hero-kicker::before{background:var(--mint);}

/* rotating circle badge */
/* RETIRED 8/12/26. The rotating "EPOCA INTERNATIONAL, SINCE 1991" badge was
   removed from index.html on Brian's instruction in the 8/11 review: it shifted
   with viewport size and he asked to kill it. Rules kept so the decision is
   discoverable rather than mysterious. Safe to delete once nobody is looking
   for it. */
.badge-ring{position:absolute;right:clamp(20px,5vw,72px);top:16vh;z-index:3;width:132px;height:132px;pointer-events:none;}
.badge-ring svg{width:100%;height:100%;animation:spin 22s linear infinite;}
.badge-ring text{font-family:var(--mono);font-size:8px;letter-spacing:.24em;text-transform:uppercase;fill:rgba(255,255,255,.85);}
.badge-ring .core{position:absolute;inset:38px;border-radius:50%;background:url('epoca-circle.png') center/contain no-repeat;}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.badge-ring{display:none;}}

/* ---------- interior hero: giant word ---------- */
.page-hero{position:relative;padding:clamp(8rem,16vw,11rem) 0 clamp(2rem,4vw,3rem);overflow:hidden;}
.page-hero h1{font-size:clamp(3.2rem,12vw,11rem);letter-spacing:-.035em;line-height:.9;}
.page-hero .lead{margin-top:1.8rem;max-width:58ch;color:var(--muted);font-size:clamp(1.02rem,1.3vw,1.22rem);}
.page-hero .halo{position:absolute;top:-40%;right:-15%;width:70vw;aspect-ratio:1;border-radius:50%;pointer-events:none;}
@media(min-width:920px){
  .page-hero .lead{margin-left:auto;margin-top:2.2rem;text-align:left;}
}

/* ---------- monumental statement w/ inline images ---------- */
.statement{padding:clamp(4.5rem,10vw,7rem) 0;}
.statement p{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4.6vw,4.2rem);line-height:1.14;letter-spacing:-.02em;max-width:22ch;}
.statement .chip{display:inline-block;vertical-align:middle;width:clamp(92px,10vw,160px);aspect-ratio:3/2;border-radius:999px;overflow:hidden;margin:0 .18em;transform:rotate(-3deg);transition:transform .5s var(--ease);}
.statement .chip:nth-of-type(2n){transform:rotate(3deg);}
.statement .chip:hover{transform:rotate(0) scale(1.12);}
.statement .chip img{width:100%;height:100%;object-fit:cover;}

/* ---------- image portal (circle bloom) ---------- */
.portal{position:relative;overflow:hidden;border-radius:26px;}
.portal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.portal:hover img{transform:scale(1.05);}
.portal .fig{position:absolute;left:1.1rem;bottom:.95rem;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55);z-index:2;}
.portal.round{border-radius:50%;aspect-ratio:1;}
.bloom{clip-path:circle(12% at 50% 50%);}
.bloom.in{clip-path:circle(75% at 50% 50%);transition:clip-path 1.3s var(--ease);}

/* grow-on-scroll full-bleed media */
.grow-wrap{padding:6rem 0;}
.grow{width:min(100%,1600px);margin:0 auto;overflow:hidden;border-radius:30px;transform:scale(.86);transition:transform 0s;}
.grow img,.grow video,.grow{display:block;}
.grow img,.grow video{width:100%;height:clamp(340px,72vh,760px);object-fit:cover;}

/* stacked hero: monumental type on paper, the film below (legibility first) */
.hero-stack{position:relative;background:var(--bone);padding-top:clamp(7rem,14vw,10rem);overflow:hidden;}
/* texture: a soft green halo + one faint concentric-circle motif (the Epoca circle, whispered) */
.hero-stack::before{content:"";position:absolute;left:-12%;top:-18%;width:58vw;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(55,140,85,.10),transparent 62%);}
/* rings centered exactly on the badge (badge: top 9rem, right clamp(20px,5vw,72px), 132px wide → center +66px) */
.hero-stack::after{content:"";position:absolute;width:44vw;aspect-ratio:1;pointer-events:none;
  right:calc(clamp(20px,5vw,72px) + 66px - 22vw);
  top:calc(9rem + 66px - 22vw);
  background:repeating-radial-gradient(circle,rgba(55,140,85,.09) 0,rgba(55,140,85,.09) 1px,transparent 1px,transparent 76px);
  -webkit-mask-image:radial-gradient(circle,black 26%,transparent 68%);mask-image:radial-gradient(circle,black 26%,transparent 68%);}
@media(max-width:700px){.hero-stack::after{display:none;}} /* badge is hidden on mobile — hide its ripples too */
.hero-stack>.wrap{position:relative;z-index:1;}
.hero-stack .hero-title{color:var(--ink);}
.hero-stack .hero-sub p{color:var(--muted);}
.hero-stack .badge-ring{top:9rem;}
.hero-stack .badge-ring text{fill:rgba(30,28,25,.6);}
.hero-stack .grow-wrap{padding:3.5rem 0 0;}
/* The hero film is 1280x720, exactly 16:9. Sizing this box by height while its
   width tracked the viewport turned it portrait on a phone (334x435), and
   object-fit:cover then threw away 57% of the frame and magnified a vertical
   strip through the middle. Driving the box from the source's own aspect ratio
   shows the entire frame at every width, with no cropping anywhere. max-height
   keeps it from dominating a tall desktop window. */
.hero-stack .grow video{aspect-ratio:16/9;height:auto;}
/* photo pills living inside the headline */
.hero-title .chip{display:inline-block;height:.54em;aspect-ratio:2.1/1;border-radius:999px;overflow:hidden;vertical-align:middle;margin:0 .04em;transform:rotate(-2.5deg) translateY(-.04em);transition:transform .5s var(--ease);}
.hero-title .row:nth-child(2) .chip{transform:rotate(2.5deg) translateY(-.04em);}
.hero-title .chip:hover{transform:rotate(0) scale(1.15);}
.hero-title .chip img{width:100%;height:100%;object-fit:cover;}
/* the brands chip: a white pill cycling through all nine brand logos */
.hero-title .chip.chip-cycle{position:relative;background:#fff;border:1px solid var(--line);}
/* Logo cycle handoff: the outgoing logo clears out before the incoming one
   arrives. A symmetrical crossfade keeps total opacity at 1, which sounds
   right but leaves two brand wordmarks ghosted over each other for the whole
   transition. Staggering it means only one mark is ever legible. */
.hero-title .chip.chip-cycle img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;padding:16% 14%;transform:none;opacity:0;transition:opacity .2s cubic-bezier(.4,0,1,1);}
.hero-title .chip.chip-cycle img.on{opacity:1;transition:opacity .26s cubic-bezier(0,0,.2,1) .19s;}

/* ---------- THE SHELF: pinned horizontal brand walk ---------- */
.shelf{position:relative;background:var(--oat);}
.shelf-head{padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:2.5rem;}
.shelf-head h2{font-size:clamp(2.6rem,6.5vw,5.6rem);}
.shelf-viewport{overflow-x:auto;scrollbar-width:none;} /* JS switches to pinned scroll when GSAP is live */
.shelf-viewport::-webkit-scrollbar{display:none;}
.shelf-track{display:flex;gap:clamp(16px,2vw,30px);padding:0 clamp(20px,4.5vw,72px) 6rem;width:max-content;align-items:stretch;}
.shelf-card{position:relative;width:clamp(300px,34vw,460px);border-radius:26px;overflow:hidden;background:var(--ink);display:block;flex:none;}
.shelf-card .ph{aspect-ratio:4/5;overflow:hidden;}
.shelf-card .ph>div{width:100%;height:100%;background-size:cover;background-position:center;transition:transform .9s var(--ease),filter .9s var(--ease);}
.shelf-card:hover .ph>div{transform:scale(1.06);}
.shelf-card .meta{position:absolute;inset:auto 0 0 0;padding:1.5rem 1.6rem;background:linear-gradient(to top,rgba(10,10,8,.82),transparent);color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;}
.shelf-card .meta img{height:44px;width:auto;max-width:65%;object-fit:contain;
  /* white chip: a small label holding the logo in full brand color */
  background:rgba(255,255,255,.94);padding:.5rem .8rem;border-radius:12px;
  backdrop-filter:blur(4px);box-shadow:0 4px 16px rgba(10,10,8,.22);}
.shelf-card .idx{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;color:rgba(255,255,255,.85);}
.shelf-card .go{position:absolute;top:1.1rem;right:1.1rem;width:44px;height:44px;border-radius:50%;background:rgba(250,247,241,.14);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;font-size:1.1rem;transition:.35s var(--ease);}
.shelf-card:hover .go{background:var(--green);transform:rotate(45deg);}
/* mobile: normal swipe */
@media(max-width:899px){
  .shelf-viewport{overflow-x:auto;scrollbar-width:none;}
  .shelf-track{padding-bottom:4rem;}
  .shelf-card{width:min(78vw,340px);}
}

/* ---------- stats: proud numerals ---------- */
.ledger{padding:clamp(3.25rem,7vw,5rem) 0 clamp(2rem,4vw,3rem);}
.ledger-rows{border-top:1px solid var(--line);}
.ledger-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1.4rem;border-bottom:1px solid var(--line);padding:.6rem 0;}
.ledger-row .num{font-family:var(--serif);font-weight:500;font-size:clamp(3.6rem,13vw,12rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.ledger-row .lbl{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);max-width:15rem;text-align:right;line-height:1.7;}
.ledger-row:hover .num{color:var(--green);transition:color .4s;}

/* compact ledger variant (home): one row, same pride, quarter the height */
.ledger-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2rem 1.5rem;border-top:1px solid var(--line);padding-top:2.2rem;margin-top:2rem;}
.ledger-cell{border-left:1px solid var(--line);padding-left:1.4rem;}
.ledger-cell:first-child{border-left:none;padding-left:0;}
.ledger-cell .num{font-family:var(--serif);font-weight:500;font-size:clamp(2.8rem,5.5vw,5rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .4s;}
.ledger-cell:hover .num{color:var(--green);}
.ledger-cell .lbl{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-top:.6rem;line-height:1.7;max-width:15rem;}
@media(max-width:520px){.ledger-cell{border-left:none;padding-left:0;}}

/* ---------- full-bleed band ---------- */
.band{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;color:#fff;}
.band .bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center;will-change:transform;}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(16,15,13,.72),rgba(16,15,13,.15) 65%);}
.band .wrap{position:relative;z-index:2;}
.band h2{font-size:clamp(2.6rem,6.5vw,6rem);max-width:15ch;}
.band p{margin:1.5rem 0 2.4rem;max-width:46ch;color:rgba(255,255,255,.88);font-size:1.1rem;}

/* ---------- marquee bands ---------- */
.marquee-wrap{overflow:hidden;padding:1.6rem 0;background:var(--ink);}
.marquee{display:flex;gap:0;width:max-content;animation:marq 36s linear infinite;}
.marquee span{color:var(--bone);font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3vw,2.6rem);white-space:nowrap;padding-right:1.2em;}
.marquee span::after{content:"○";font-style:normal;color:var(--green);font-size:.5em;vertical-align:middle;margin-left:1.2em;}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* retailer logo wall — a full, intentional section */
.retail-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-top:3rem;}
@media(min-width:700px){.retail-wall{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(min-width:1200px){.retail-wall{grid-template-columns:repeat(6,minmax(0,1fr));}}
/* text stand-ins until real logo files land (swap for imgs when available) */
.retail-wall .wordmark{font-weight:800;font-size:clamp(.78rem,.95vw,1.05rem);letter-spacing:.01em;color:#8f897d;white-space:nowrap;text-align:center;transition:color .3s;}
.retail-wall>div:hover .wordmark{color:var(--ink);}
.retail-wall>div{background:var(--white);display:flex;align-items:center;justify-content:center;padding:2.6rem 1.2rem;min-width:0;transition:background .3s;}
.retail-wall>div:hover{background:var(--white);}
.retail-wall img{width:auto;height:auto;max-height:3rem;max-width:min(150px,100%);object-fit:contain;opacity:.78;filter:grayscale(1);transition:.35s var(--ease);}
.retail-wall>div:hover img{opacity:1;filter:none;transform:scale(1.06);}

.retailer-marquee{overflow:hidden;padding:2.8rem 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);}
.retailer-track{display:flex;align-items:center;gap:5rem;width:max-content;animation:marq 42s linear infinite;}
.retailer-track:hover{animation-play-state:paused;}
.retailer-track img{height:2.3rem;width:auto;max-width:150px;object-fit:contain;opacity:.5;filter:grayscale(1);transition:.3s;}
.retailer-track img:hover{opacity:1;filter:none;}

/* ---------- licensed feature: color takeover panels ---------- */
.spot{padding:clamp(3rem,6.5vw,4.5rem) 0;}
.spot-panel{display:grid;border-radius:30px;overflow:hidden;background:var(--white);box-shadow:0 40px 90px -50px rgba(30,28,25,.45);}
@media(min-width:900px){.spot-panel{grid-template-columns:1.2fr 1fr;min-height:560px;}.spot-panel.flip .sp-media{order:2}.spot-panel.flip .sp-body{order:1}}
.sp-media{position:relative;min-height:320px;overflow:hidden;}
.sp-media>div{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.1s var(--ease);}
.spot-panel:hover .sp-media>div{transform:scale(1.05);}
.sp-body{padding:clamp(2rem,4vw,4rem);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.2rem;}
.sp-body .logo-img{height:52px;width:auto;object-fit:contain;}
.sp-body h3{font-size:clamp(1.9rem,3.4vw,3rem);}
.sp-body p{color:var(--muted);max-width:48ch;}
.spot-panel.dark{background:#141412;color:#fff;}
.spot-panel.dark p{color:rgba(255,255,255,.78);}

/* tag chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chips span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;color:var(--muted);}
.dark .chips span,.cball .chips span{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.7);}

/* licensed roster: 5 cards resolved as a 2x3 composition (Tasty featured wide) */
.lic-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:2.6rem;}
@media(min-width:640px){.lic-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1000px){.lic-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:640px){
  .lic-grid .span2{grid-column:span 2;}
  .lic-grid .span2 .ph{aspect-ratio:8/5;}
}

/* ---------- licensing category matrix (master-licensor reach) ---------- */
.lic-matrix{margin-top:2.6rem;border-top:1px solid var(--line);}
.lic-row{display:grid;gap:.9rem 2rem;padding:1.7rem 0;border-bottom:1px solid var(--line);}
@media(min-width:900px){.lic-row{grid-template-columns:250px 1fr;align-items:baseline;}}
.lic-row h4{font-family:var(--sans);font-weight:800;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);}
.lic-row .chips span{background:var(--bone);}

/* ---------- awards wall (About): always full rows ---------- */
.award-wall{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:3rem;}
@media(min-width:600px){.award-wall{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1000px){.award-wall{grid-template-columns:repeat(3,minmax(0,1fr));}}
.award-card{background:var(--void);padding:1.8rem;border:1px solid rgba(95,224,140,.22);border-radius:18px;transition:.4s var(--ease);}
.award-card:hover{transform:translateY(-5px);border-color:rgba(95,224,140,.55);}

/* ---------- principles ledger (Crystal Ball "how it thinks") ---------- */
.prin{border-top:1px solid var(--line);margin-top:2.8rem;}
.prin-row{display:grid;gap:.4rem 2rem;padding:1.5rem 0;border-bottom:1px solid var(--line);}
@media(min-width:800px){.prin-row{grid-template-columns:280px 1fr;align-items:baseline;}}
.prin-row h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.55rem;color:var(--green);}
.prin-row p{color:var(--muted);max-width:60ch;}

/* ---------- engine room (Crystal Ball) ---------- */
.cball{background:var(--void);color:#fff;position:relative;overflow:hidden;}
.cball::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 50% at 72% 38%,rgba(95,224,140,.13),transparent 70%);}
.cball .wrap{position:relative;}
.cball .kicker{color:var(--phosphor);}
.cball h2{color:#fff;font-size:clamp(2.4rem,5.5vw,4.6rem);}
.cball .lead,.cball .duo .lead{color:rgba(255,255,255,.88);font-size:1.12rem;max-width:54ch;}
.cball p{color:rgba(255,255,255,.85);}
.cb-wordmark{height:60px;width:auto;margin-bottom:1.6rem;}
.orb-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;}
.cb-img{width:min(330px,72%);position:relative;z-index:2;filter:drop-shadow(0 22px 70px rgba(95,224,140,.35));animation:float 7s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.ring{position:absolute;border:1px dashed rgba(95,224,140,.35);border-radius:50%;animation:spin 30s linear infinite;}
.ring.r1{width:min(440px,90%);aspect-ratio:1;}
.ring.r2{width:min(560px,108%);aspect-ratio:1;animation-duration:48s;animation-direction:reverse;}
.ring .sat{position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--phosphor);box-shadow:0 0 16px rgba(95,224,140,.95);}
.cb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:3rem;}
.cb-stat{border-left:2px solid var(--phosphor);padding-left:1.1rem;}
.cb-stat .num{font-family:var(--mono);font-size:2.1rem;color:var(--phosphor);}
.cb-stat .lbl{font-size:.85rem;color:rgba(255,255,255,.65);}
.ticker-wrap{overflow:hidden;margin-top:3.4rem;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);}
.ticker{display:flex;gap:2.6rem;width:max-content;animation:marq 30s linear infinite;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:rgba(95,224,140,.85);text-transform:uppercase;}
.ticker span::before{content:"▲ ";color:var(--phosphor);}

/* ---------- editorial grid & cards ---------- */
.duo{display:grid;gap:clamp(2rem,4vw,4.5rem);align-items:center;}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr;}}
.duo .lead{color:var(--muted);font-size:1.12rem;margin:1.2rem 0 2rem;max-width:52ch;}
.duo h2{font-size:clamp(2.2rem,4.8vw,4rem);}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem;}
.gallery .portal{aspect-ratio:4/3;}
.gallery .portal.tall{aspect-ratio:3/4;grid-row:span 2;}

/* value cards */
.value-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.1rem;}
.value-card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:1.8rem;transition:.4s var(--ease);}
.value-card:hover{transform:translateY(-6px);border-color:var(--green);}
.value-card .letter{font-family:var(--serif);font-style:italic;font-size:3.2rem;color:var(--green);line-height:1;}
.value-card h3{font-family:var(--sans);font-weight:700;font-size:1.18rem;margin:1rem 0 .35rem;}
.value-card p{font-size:1.02rem;color:var(--muted);}

/* timeline */
.thread{position:relative;padding-left:2.2rem;list-style:none;}
/* Green thread removed 8/6 per marketing review. The vertical green line
   and its dots used to run down this list. Left as a plain, quieter timeline. */
.thread li{position:relative;padding-bottom:3rem;}
.thread li::before{content:"";position:absolute;left:-2.55rem;top:1.05rem;width:6px;height:6px;border-radius:50%;background:var(--line);}
.thread .year{font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--ink);}
.thread h3{font-size:1.3rem;margin:.2rem 0 .35rem;}
.thread p{color:var(--muted);max-width:56ch;}
.thread .th-img{width:180px;border-radius:18px;overflow:hidden;margin-top:1rem;box-shadow:0 24px 50px -28px rgba(30,28,25,.5);}
@media(min-width:820px){.thread li{display:grid;grid-template-columns:1fr 190px;gap:2rem;align-items:start;}.thread .th-img{margin-top:0;}}

/* quote */
.pullquote{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.28;font-weight:500;letter-spacing:-.01em;}
.pullquote .q{color:var(--green);}
.headshot{width:min(280px,72vw);border-radius:26px;overflow:hidden;background:var(--clay);}
.headshot img{aspect-ratio:4/5;object-fit:cover;object-position:top;width:100%;}

/* stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;}
.stat-card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:1.6rem;transition:.35s var(--ease);}
.stat-card:hover{transform:translateY(-4px);}
.stat-card .num{font-family:var(--serif);font-size:2.5rem;letter-spacing:-.02em;}
.stat-card .lbl{font-size:.8rem;color:var(--muted);margin-top:.35rem;line-height:1.5;}

/* ---------- brand detail ---------- */
.brand-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--ink);}
.brand-hero .bg{position:absolute;inset:-10% 0;background-size:cover;background-position:center;}
.brand-hero .bg.contain{background-size:contain;background-repeat:no-repeat;background-color:#141412;inset:8%;}
.brand-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,11,10,.88),rgba(12,11,10,.15) 60%);}
.brand-hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:5vh;}
.brand-hero h1{font-size:clamp(3.4rem,12vw,11.5rem);line-height:.88;letter-spacing:-.04em;}
.brand-hero .lead{margin-top:1.4rem;max-width:52ch;color:rgba(255,255,255,.88);font-size:1.12rem;}
/* Every brand mark we license is dark ink (Von Dutch is pure black), but the
   hero sits them on a dark scrim. Bare, six of nine fell under the 3:1 legibility
   floor and Primula was invisible at 1.08:1. The white plaque is the same device
   the brand cards already use, so the marks read and the treatment stays in family. */
.brand-hero .logo-img{height:56px;width:auto;object-fit:contain;margin-bottom:1.4rem;
  background:#fff;border-radius:14px;padding:.75rem 1.15rem;box-sizing:content-box;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.4));}
.kind-pill{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;padding:.4rem 1rem;display:inline-block;margin-bottom:1.2rem;color:#fff;}
.sig-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;counter-reset:sig;list-style:none;}
.sig-list li{counter-increment:sig;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:1.15rem 1.5rem;font-weight:600;display:flex;gap:1rem;align-items:baseline;transition:.35s var(--ease);}
.sig-list li::before{content:counter(sig,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;color:var(--green);}
.sig-list li:hover{transform:translateY(-4px) rotate(-.5deg);border-color:currentColor;}
.brand-next{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:2.6rem;}
.brand-next a{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:500;transition:.25s;}
.brand-next a:hover{color:var(--green);font-style:italic;}
.brand-next .fig{display:block;margin-bottom:.4rem;}

/* ---------- CTA: the giant cookin' line ---------- */
.cta{background:var(--ink);color:var(--bone);text-align:left;position:relative;overflow:hidden;padding:clamp(4.5rem,9vw,7rem) 0;}
.cta::before{content:"";position:absolute;right:-18%;bottom:-45%;width:60vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(55,140,85,.4),transparent 65%);}
.cta .wrap{position:relative;}
.cta .cookin{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(3rem,10vw,9rem);letter-spacing:-.03em;line-height:.95;margin:.8rem 0 1.6rem;}
.cta p{color:rgba(250,247,241,.75);max-width:50ch;margin-bottom:2.4rem;font-size:1.08rem;}
.cta .kicker{color:var(--mint);}

/* ---------- forms ---------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:30px;padding:clamp(1.8rem,3.5vw,3rem);box-shadow:0 40px 90px -55px rgba(30,28,25,.4);}
.form-grid{display:grid;gap:1.2rem;}
@media(min-width:700px){.form-grid{grid-template-columns:1fr 1fr;}.form-grid .full{grid-column:1/-1;}}
label{font-weight:700;font-size:.85rem;display:block;margin-bottom:.4rem;}
input,textarea,select{width:100%;font-family:var(--sans);font-size:1rem;padding:.95rem 1.15rem;border:1.5px solid var(--line);border-radius:16px;background:var(--bone);transition:.2s;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--green);background:#fff;}

/* ---------- footer: the big goodbye ---------- */
footer{background:var(--ink);color:var(--bone);padding:5.5rem 0 2rem;overflow:hidden;}
/* the real Epoca script wordmark, rendered in bone on the ink footer */
.foot-word{display:inline-block;transition:.5s var(--ease);}
.foot-word img{width:min(300px,46vw);height:auto;filter:invert(0.96) sepia(0.06);opacity:.4;transition:opacity .5s var(--ease),transform .5s var(--ease);}
.foot-word:hover img{opacity:1;transform:translateY(-4px);}
.foot-top{display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap;padding:3.2rem 0 2.6rem;border-bottom:1px solid rgba(250,247,241,.14);}
.foot-cols{display:flex;gap:4.5rem;flex-wrap:wrap;}
.foot-cols h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(250,247,241,.5);margin-bottom:1rem;font-weight:400;}
.foot-cols a{display:block;color:rgba(250,247,241,.85);padding:.24rem 0;font-size:.95rem;transition:.2s;}
.foot-cols a:hover{color:var(--mint);padding-left:.4rem;}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.7rem;font-size:.8rem;color:rgba(250,247,241,.5);}
/* The recall notice is a legal requirement and has to appear site-wide, which
   is why it sits in the footer on every page, matching epoca.com. The rest of
   this row is deliberately dim at 50% opacity; the recall link is not, because
   a required safety notice should never be the least legible thing on the
   page. Underlined so it reads unmistakably as a link rather than as more
   copyright small print. Do not remove or dim this without asking Legal. */
.foot-bottom a{color:rgba(250,247,241,.94);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .3s var(--ease);}
.foot-bottom a:hover,.foot-bottom a:focus-visible{color:#fff;}
.foot-recall{font-weight:600;}
@media(max-width:560px){
  /* Stacked on phones, so give it its own line and a real tap target rather
     than letting it crowd against the copyright line. */
  .foot-bottom{flex-direction:column;gap:.55rem;}
  .foot-recall{order:-1;padding:.15rem 0;}
}

/* ---------- motion primitives ---------- */
.rise{opacity:0;transform:translateY(46px);}
.rise.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease);}
.reveal-img{clip-path:inset(0 0 100% 0);}
.reveal-img.in{clip-path:inset(0 0 0% 0);transition:clip-path 1.2s var(--ease);}
.lines .row{display:block;overflow:hidden;padding:0 .08em .24em;margin:0 -.08em -.24em;}
.lines .row>span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease);}
.lines.in .row>span{transform:none;}
.lines.in .row:nth-child(2)>span{transition-delay:.09s;}
.lines.in .row:nth-child(3)>span{transition-delay:.18s;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .rise,.reveal-img,.bloom{opacity:1 !important;transform:none !important;clip-path:none !important;}
  .lines .row>span,.hero-title .row>span{transform:none !important;}
  .grow{transform:none !important;}
  #curtain{display:none !important;}
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .menu-btn{display:flex;}
  /* The header carries backdrop-filter, which makes it a containing block for
     fixed children. That meant inset:0 resolved against the 73px header instead
     of the viewport, so the open menu was a 73px sliver with six links crammed
     into it. Explicit viewport height fixes it without touching the DOM or
     losing the frosted header. dvh keeps it honest when mobile browser chrome
     slides away; the vh line above it is the fallback. */
  nav.links{position:fixed;inset:0;height:100vh;height:100dvh;overflow-y:auto;
    background:var(--bone);flex-direction:column;justify-content:center;gap:1.7rem;
    transform:translateX(102%);transition:.45s var(--ease);z-index:110;}
  nav.links.open{transform:none;}
  /* :not(.btn) matters here. A blanket padding shorthand zeroes the pill button's
     horizontal padding and its label ends up spanning the pill edge to edge. */
  nav.links a{color:var(--ink) !important;font-size:1.5rem;font-family:var(--serif);}
  nav.links a:not(.btn){padding:.35rem 0;}
  .foot-cols{gap:2.4rem;}
  .brand-hero{min-height:72vh;}
  /* footer links sat at 32px tall; give thumbs a 44px row to land on */
  .foot-cols a{padding:.62rem 0;}
  /* Nothing needed here now. The aspect-ratio rule above handles every width,
     and a 16:9 film at phone width is naturally short, which also fixes the
     earlier problem of the film eating 75% of the screen. */
}

/* ---- See what's next: 3D flip entrance ---- */
.value-row{perspective:1200px;}
.value-card{transform-style:preserve-3d;backface-visibility:hidden;}

/* ---- Seen in the wild: phone reel ---- */
.phone-wrap{display:flex;justify-content:center;}
.phone{position:relative;width:min(300px,76vw);aspect-ratio:9/18.5;border-radius:44px;background:var(--void);border:1px solid rgba(16,19,17,.25);box-shadow:0 30px 70px -30px rgba(16,19,17,.45);padding:12px;}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:34%;height:22px;border-radius:999px;background:#000;z-index:3;}
.phone-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#0c0e0c;}
.ph-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);}
.ph-slide.on{opacity:1;}
.ph-slide img,.ph-slide video{width:100%;height:100%;object-fit:cover;}
.ph-slide .ph-fill{position:absolute;inset:0;display:grid;place-items:center;padding:1.4rem;text-align:center;}
.ph-slide .ph-fill span{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:rgba(255,255,255,.9);line-height:1.3;}
.ph-tag{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.2rem 1.3rem;background:linear-gradient(to top,rgba(0,0,0,.78),transparent);z-index:2;}
.ph-tag .who{display:block;font-family:var(--sans);font-weight:700;font-size:1.02rem;color:#fff;}
.ph-tag .what{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--phosphor);margin-top:.25rem;}
.phone-dots{display:flex;gap:.45rem;justify-content:center;margin-top:1.3rem;}
.phone-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .4s;}
.phone-dots i.on{background:var(--green);}
@media(prefers-reduced-motion:reduce){.ph-slide{transition:none;}}

/* ---- In Good Company: tile wall ---- */
.ig-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;}
@media(min-width:820px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* Desktop is 3 across, two rows, not one row of six. Six across made each tile
   ~200px wide, which is too small to read a phone screenshot. Marketing review
   8/6: make them bigger. Capped at 1200px so the tiles do not become absurd on
   an ultrawide monitor; at that cap each tile is ~380x675, close to the size a
   real phone screenshot wants to be. */
@media(min-width:1180px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;max-width:1200px;margin-left:auto;margin-right:auto;}}
/* These are portrait screenshots of real posts (source ratios 0.46 to 0.58).
   A 1/1 tile with object-fit:cover was throwing away about half the height of
   each one, which is why brand names were unreadable. 9/16 matches the shape
   social posts actually are, and cuts the crop from ~50% to ~11%.
   Marketing review 8/6. Do not put this back to a square. */
.ig-tile{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:9/16;background:var(--white);border:1px solid var(--line);transition:transform .45s var(--ease);}
.ig-tile:hover{transform:translateY(-6px) rotate(-.5deg);}
.ig-fill{position:absolute;inset:0;}
.ig-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;}
.ig-name{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.1rem 1rem;background:linear-gradient(to top,rgba(16,19,17,.72),transparent);color:#fff;font-family:var(--sans);font-weight:700;font-size:.98rem;}
/* Names scale with the bigger tiles so they stay proportional, not marooned. */
@media(min-width:1180px){.ig-name{font-size:1.18rem;padding:3rem 1.5rem 1.35rem;}}

/* ---- Our Brands: big two-across wall ---- */
.brand-wall{display:grid;grid-template-columns:1fr;gap:1.8rem;margin-top:2rem;}
@media(min-width:760px){.brand-wall{grid-template-columns:repeat(2,minmax(0,1fr));}}
.brand-wall .shelf-card{width:100%;}
.brand-wall .shelf-card .ph{aspect-ratio:3/2;}
.brand-wall .shelf-card .meta img{max-height:3.4rem;}

/* ---- License in / license out ----
   Was a vertical zig-zag: you read "we license in", scrolled past a photo, and
   only then met "we license out". Marketing review 8/6: the two directions are
   a pair and should be comparable at a glance, so at desktop they sit side by
   side and the connecting line runs underneath both. Stacks on mobile, where
   side by side would just make everything too narrow to read. */
.lic-flow{margin-top:1.5rem;display:grid;gap:2.2rem;}
.lf-row{display:grid;grid-template-columns:1fr;gap:1.4rem;align-content:start;}
.lf-copy h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.03em;}
.lf-copy p{color:var(--muted);max-width:52ch;margin-top:1.1rem;}
.lf-photo{aspect-ratio:4/3;width:100%;}
.lf-mid{display:flex;align-items:center;gap:1.4rem;margin:.4rem 0 0;}
.lf-mid::before,.lf-mid::after{content:"";flex:1;height:1px;background:var(--green);opacity:.45;}
.lf-mid span{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--green);text-align:center;}
@media(min-width:900px){
  /* Photo alignment fixed 8/10. It was align-items:start with auto rows, so each
     column was only as tall as its own content and the photos landed at whatever
     height the copy above them ended. Any difference in copy length — even one
     line — visibly offset the two photos, and balancing it by word count is
     guesswork that breaks the next time anyone edits the copy.
     stretch makes both columns the full height of the taller one; 1fr on the copy
     row pushes each photo to the bottom of its column. Both photos share a width
     and a 4/3 ratio, so bottom-aligning them also top-aligns them. Even by
     construction, whatever the copy does. */
  .lic-flow{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4.5vw,4rem);align-items:stretch;}
  .lf-row{grid-template-rows:1fr auto;}
  .lf-row .lf-copy{order:1;}
  .lf-row .lf-photo{order:2;}
  .lf-row.flip .lf-copy{text-align:left;}
  .lf-row.flip .lf-copy p{margin-left:0;}
  /* the connector spans both, underneath */
  .lf-mid{grid-column:1 / -1;order:3;margin-top:1rem;}
}
@media(max-width:879px){
  .lf-row.flip .lf-photo{order:2;}
}

/* ---- Footer reorient: statement + three aligned columns, brands in two ---- */
@media(min-width:940px){
  .foot-top{display:grid;grid-template-columns:1.3fr 1.5fr 1fr 1fr;gap:2.8rem;align-items:start;}
  .foot-cols{display:contents;}
  .foot-cols>div:first-child{column-count:2;column-gap:2.2rem;}
  .foot-cols>div:first-child h4{column-span:all;}
  .foot-brand .foot-word img{width:min(240px,100%);}
}

/* ---- Brand film ---- */
.film-frame{position:relative;border-radius:26px;overflow:hidden;background:var(--ink);box-shadow:0 30px 70px -40px rgba(16,19,17,.5);}
.film-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink);}

/* ---- Brand film: YouTube facade ---- */
.film-frame.yt{position:relative;cursor:pointer;aspect-ratio:16/9;}
.film-frame.yt .yt-poster{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease),opacity .4s;}
.film-frame.yt:hover .yt-poster{transform:scale(1.03);}
.film-frame.yt .yt-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(16,19,17,.28);border:0;cursor:pointer;transition:background .35s;}
.film-frame.yt:hover .yt-play{background:rgba(16,19,17,.14);}
.film-frame.yt .yt-play span{width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:50%;background:var(--green);display:block;position:relative;box-shadow:0 12px 40px -12px rgba(0,0,0,.6);transition:transform .35s var(--ease);}
.film-frame.yt:hover .yt-play span{transform:scale(1.08);}
.film-frame.yt .yt-play span::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:.62em 0 .62em 1.02em;border-color:transparent transparent transparent #fff;font-size:clamp(15px,1.6vw,21px);}
.film-frame.yt iframe{width:100%;height:100%;border:0;display:block;}

.film-frame.yt .yt-note{position:absolute;right:1rem;bottom:1rem;z-index:2;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(16,19,17,.62);padding:.5rem .8rem;border-radius:999px;pointer-events:none;}


/* ---- Crystal Ball win cards ---- */
.win-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;}
@media(min-width:640px){.win-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1080px){.win-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.win-card{background:var(--white);border:1px solid var(--line);border-radius:26px;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.win-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px -34px rgba(16,19,17,.45);}
.win-shot{aspect-ratio:1/1;background:#fff;display:grid;place-items:center;overflow:hidden;}
.win-shot img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease);}
.win-card:hover .win-shot img{transform:scale(1.05);}
.win-card figcaption{padding:1.5rem 1.6rem 1.8rem;}
.win-lag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);border:1px solid var(--green);border-radius:999px;padding:.36rem .7rem;}
.win-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,2.2vw,1.95rem);letter-spacing:-.01em;margin-top:.85rem;}
.win-card p{color:var(--muted);font-size:1rem;margin-top:.5rem;}

.win-todo{display:grid;place-items:center;text-align:center;padding:1.4rem;width:100%;height:100%;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.7vw,1.4rem);color:var(--green);background:repeating-linear-gradient(135deg,rgba(55,140,85,.05) 0 12px,transparent 12px 24px);}

/* ---- Crystal Ball "What it does": big animated cards ---- */
.value-card{position:relative;overflow:hidden;isolation:isolate;}
.value-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--vc,var(--green));transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);}
.value-card:hover::after{transform:scaleX(1);}
.value-card:hover{border-color:var(--vc,var(--green));}
.vc-art{width:100%;aspect-ratio:1.6/1;display:grid;place-items:center;border-radius:18px;background:
   radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--vc) 12%, transparent), transparent 68%), var(--bone);
   margin-bottom:1.1rem;overflow:hidden;}
.vc-art svg{width:64%;max-width:150px;height:auto;overflow:visible;}
.value-card .letter{font-size:2.6rem;color:var(--vc,var(--green));}
.value-card h3{font-size:1.22rem;}

/* radar: rings pulse, sweep rotates, blip winks */
@keyframes radPulse{0%,100%{transform:scale(1);opacity:var(--o,.6)}50%{transform:scale(1.07);opacity:calc(var(--o,.6) * .55)}}
@keyframes radSweep{to{transform:rotate(360deg)}}
@keyframes radBlip{0%,72%,100%{opacity:0;transform:scale(.4)}80%{opacity:1;transform:scale(1)}}
.rad-ring{transform-origin:60px 60px;animation:radPulse 3.4s var(--ease) infinite;}
.rad-ring.d1{animation-delay:.35s}.rad-ring.d2{animation-delay:.7s}
.rad-sweep{transform-origin:60px 60px;animation:radSweep 3.6s linear infinite;}
.rad-blip{animation:radBlip 3.6s linear infinite;}

/* forecast: line draws, dots pop, arrow lands */
@keyframes drawIn{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes popIn{0%,55%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.fc-line,.fc-arrow{stroke-dasharray:1;stroke-dashoffset:1;animation:drawIn 2.6s var(--ease) infinite;}
.fc-arrow{animation-delay:.5s}
.fc-dot{transform-box:fill-box;transform-origin:center;animation:popIn 2.6s var(--ease) infinite;}
.fc-dot.d1{animation-delay:.18s}.fc-dot.d2{animation-delay:.42s}

/* assortment: tiles settle into the grid, winner fills */
@keyframes tileIn{0%,60%{transform:translate(var(--tx,0),var(--ty,0)) scale(.86);opacity:.25}75%,100%{transform:none;opacity:1}}
.as-box{transform-box:fill-box;transform-origin:center;animation:tileIn 3.2s var(--ease) infinite;}
.as-box.b1{--tx:8px;--ty:-8px;animation-delay:.12s}
.as-box.b2{--tx:-8px;--ty:8px;animation-delay:.24s}
.as-box.b3{--tx:8px;--ty:8px;animation-delay:.36s}

/* signals: waves broadcast outward */
@keyframes waveOut{0%{opacity:0;transform:translateY(6px) scale(.9)}25%{opacity:1}70%,100%{opacity:0;transform:translateY(-2px) scale(1.02)}}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.sig-wave{transform-box:fill-box;transform-origin:60px 88px;animation:waveOut 2.8s var(--ease) infinite;}
.sig-wave.w2{animation-delay:.28s}.sig-wave.w3{animation-delay:.56s}
.sig-dot{transform-box:fill-box;transform-origin:center;animation:dotPulse 2.8s var(--ease) infinite;}

@media(prefers-reduced-motion:reduce){
  .rad-ring,.rad-sweep,.rad-blip,.fc-line,.fc-arrow,.fc-dot,.as-box,.sig-wave,.sig-dot{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important;}
}

/* ---- Home teaser: Crystal Ball win chips ---- */
.cb-wins{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:2rem;}
.cb-wins img{width:clamp(52px,5.4vw,68px);aspect-ratio:1;border-radius:14px;background:#fff;object-fit:contain;border:1px solid rgba(255,255,255,.18);transition:transform .45s var(--ease);}
.cb-wins img:hover{transform:translateY(-5px) rotate(-2deg);}
.cb-wins span{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.4vw,1.2rem);color:var(--phosphor);margin-left:.3rem;}

/* ---- Pioneer Woman. The bouquet icon is part of the mark and never gets cropped
   off (Leah, 8/4), so the wordmark-only crop is gone. Instead each slot gets the
   lockup whose proportions suit it: the stacked lockup on the home shelf card,
   the horizontal lockup in the wide hero and the narrow inline chip. Both need
   extra height, because in a lockup the words are only a fraction of the art. ---- */
.shelf-card .meta img[src$="pioneer-woman-stacked.png"]{height:70px;max-width:42%;}
/* the lockup stacks a bouquet above the wordmark, so it needs extra height for
   the words to read at all: at 56px they would be 9px tall. */
/* Stacked lockup, so it needs more height than a horizontal wordmark, but it
   was reading as roughly twice the size of the others. Marketing review 8/6. */
.brand-hero .logo-img[alt="Pioneer Woman logo"]{height:clamp(74px,8vw,92px);}

/* Country Living stays on the white plaque like every other brand, per Leah 8/4.
   Worth knowing: its cyan measures 2.03:1 on white, under the 3:1 legibility
   floor, where it scored 8.4:1 on ink. Consistency won. The real fix is a darker
   Country Living mark from Hearst rather than a one-off plaque color. */
/* the wordmark is 11.8:1, so at a shared height it would run far wider than
   the other marks and dominate the card. Cap it tighter instead. */
.brand-wall .shelf-card .meta img[src$="pioneer-woman.png"]{height:64px;max-width:56%;}

/* ---- Award cards: product shot on white, dark card below ---- */
.award-card{display:flex;flex-direction:column;padding:0!important;overflow:hidden;}
.aw-shot{background:#fff;aspect-ratio:4/3;overflow:hidden;}
.aw-shot img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease);}
.award-card:hover .aw-shot img{transform:scale(1.06);}
.award-card .fig{padding:1.3rem 1.5rem 0;}
.award-card h3,.award-card p{padding:0 1.5rem;}
.award-card p{padding-bottom:1.5rem;}

/* ---- VERTICAL RHYTHM ------------------------------------------------------
   One responsive scale for every section, so adjacent sections stop stacking
   into blocks of air and everything shrinks properly on a phone.
   .sec      standard section
   .sec-lg   feature section that earns extra room
   .sec-top0 sits directly under the section above it (no top padding)
   .sec-sm   sits directly under a page hero (small top, normal bottom)      */
.sec{padding:clamp(3.25rem,7vw,5.5rem) 0;}
.sec-lg{padding:clamp(4rem,9vw,7rem) 0;}
.sec-top0{padding:0 0 clamp(3rem,6.5vw,5rem);}
.sec-sm{padding:clamp(1.25rem,3vw,2rem) 0 clamp(3rem,6.5vw,5rem);}
/* .sec-run: a section continuing the same background band as the one above it,
   so two same-colored sections read as one composition, not two blocks of air. */
.sec-run{padding-top:clamp(1.5rem,3.5vw,2.5rem);}

/* ==================================================================
   SITE ASSISTANT (chat widget)
   Launcher is a plain chat glyph on an ink circle (Leah 8/5: the Epoca
   mark above the glyph read as two competing marks). Ink rather than
   green so it reads as a control rather than a logo in the corner. The
   Epoca mark still identifies the panel once it is open.
   ================================================================== */
.ea-launch{
  position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);z-index:180;
  display:grid;place-items:center;
  width:58px;height:58px;border:none;cursor:pointer;
  background:var(--ink);border-radius:50%;color:var(--bone);
  box-shadow:0 10px 30px -8px rgba(10,10,8,.5);
  transition:transform .38s var(--ease),background .38s var(--ease);
}
.ea-launch:hover{transform:translateY(-3px);background:#000;}
.ea-launch svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .38s var(--ease);}
.ea-launch:hover svg{stroke:var(--mint);}
.ea-launch[aria-expanded="true"]{opacity:0;pointer-events:none;}

/* ---- panel ---- */
.ea-panel{
  position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);z-index:181;
  width:min(384px,calc(100vw - 28px));max-height:min(620px,calc(100vh - 40px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bone);border:1px solid var(--line);border-radius:26px;
  box-shadow:0 30px 70px -20px rgba(10,10,8,.45);
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.ea-panel.open{opacity:1;transform:none;pointer-events:auto;}

.ea-head{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.05rem;
  background:var(--ink);color:var(--bone);flex:none;}
.ea-head .ea-mark{width:26px;height:26px;border-radius:50%;
  background:url('epoca-circle.png') center/contain no-repeat;flex:none;}
.ea-head .ea-t{font-family:var(--serif);font-size:1.02rem;line-height:1.2;}
.ea-head .ea-s{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(250,247,241,.6);display:block;margin-top:.12rem;}
.ea-x{margin-left:auto;background:none;border:none;color:var(--bone);cursor:pointer;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;line-height:1;transition:background .25s;}
.ea-x:hover{background:rgba(250,247,241,.14);}

.ea-log{flex:1 1 auto;overflow-y:auto;padding:1.05rem;display:flex;
  flex-direction:column;gap:.7rem;-webkit-overflow-scrolling:touch;}
.ea-msg{max-width:86%;padding:.68rem .9rem;border-radius:16px;font-size:.95rem;line-height:1.5;}
.ea-msg.bot{background:var(--oat);color:var(--ink);align-self:flex-start;border-bottom-left-radius:5px;}
.ea-msg.me{background:var(--green);color:#fff;align-self:flex-end;border-bottom-right-radius:5px;}
.ea-msg a{color:var(--green-deep);text-decoration:underline;}
.ea-msg.me a{color:#fff;}
.ea-msg p+p{margin-top:.5rem;}

.ea-dots{display:flex;gap:4px;align-self:flex-start;padding:.8rem .95rem;}
.ea-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:eaBounce 1.1s infinite ease-in-out;}
.ea-dots i:nth-child(2){animation-delay:.14s}
.ea-dots i:nth-child(3){animation-delay:.28s}
@keyframes eaBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

/* quick prompts so the first message is easy */
.ea-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.05rem .2rem;}
.ea-chips button{font:inherit;font-size:.8rem;background:transparent;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:.4rem .75rem;color:var(--muted);
  transition:border-color .25s,color .25s;}
.ea-chips button:hover{border-color:var(--green);color:var(--green);}

.ea-foot{flex:none;border-top:1px solid var(--line);padding:.7rem .8rem .55rem;}
.ea-form{display:flex;gap:.5rem;align-items:flex-end;}
.ea-form textarea{
  flex:1;font:inherit;font-size:16px; /* 16px stops iOS zooming on focus */
  line-height:1.45;resize:none;border:1px solid var(--line);border-radius:14px;
  padding:.6rem .75rem;background:#fff;color:var(--ink);max-height:110px;min-height:44px;}
.ea-form textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green);}
.ea-send{flex:none;width:44px;height:44px;border:none;border-radius:50%;
  background:var(--green);color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background .25s,transform .25s;}
.ea-send:hover:not(:disabled){background:var(--green-deep);transform:translateY(-1px);}
.ea-send:disabled{opacity:.4;cursor:not-allowed;}
.ea-send svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.ea-note{font-size:.68rem;color:var(--muted);text-align:center;margin-top:.5rem;line-height:1.4;}
.ea-note a{color:var(--green);text-decoration:underline;}
.ea-ts{display:flex;justify-content:center;}

/* phone: take the whole screen, it is easier to type in */
@media(max-width:560px){
  .ea-panel{inset:0;width:100%;max-height:none;border-radius:0;border:none;
    transform:translateY(100%);}
  .ea-panel.open{transform:none;}
  .ea-head{padding-top:max(.95rem,env(safe-area-inset-top));}
  .ea-foot{padding-bottom:max(.55rem,env(safe-area-inset-bottom));}
  .ea-msg{max-width:92%;}
}

@media (prefers-reduced-motion: reduce){
  .ea-panel,.ea-launch,.ea-send{transition:none;}
  .ea-dots i{animation:none;opacity:.6;}
}

/* ==================================================================
   LEGAL PAGES
   Privacy Policy, Accessibility Statement, and the per-brand chemical
   disclosures.

   The disclosure pages exist at two URLs each, /<brand>-info/ and
   /<brand>-disclosure/, because packaging QR codes in the field point at
   both. They are real pages at both paths rather than redirects, so a code
   printed years ago resolves in one hop. Do not consolidate them.

   Priority here is legibility over art direction. Someone reading these is
   looking something up, often on a phone, sometimes because they are worried.
   ================================================================== */

.wrap-narrow{max-width:56rem;}

/* visually hidden, still read by screen readers */
.ea-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- long-form policy text ---------- */
.pol{font-size:1.02rem;line-height:1.72;color:var(--ink);}
.pol p{margin:0 0 1.05rem;max-width:70ch;}
.pol-date{font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin:1.2rem 0 2.4rem;}
.pol-h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;
  margin:2.9rem 0 .9rem;font-weight:500;}
.pol-h3{font-size:1.13rem;font-weight:700;margin:2rem 0 .7rem;}
.pol-h4{font-size:1rem;font-weight:700;margin:1.5rem 0 .55rem;color:var(--muted);}
.pol-ul{margin:0 0 1.3rem;padding-left:1.15rem;max-width:70ch;}
.pol-ul li{margin-bottom:.62rem;}
.pol a{color:var(--green);text-decoration:underline;text-underline-offset:2px;
  overflow-wrap:anywhere;}
.pol a:hover{color:var(--ink);}

/* ---------- disclosure tables ---------- */
.disc-lead{font-size:1.12rem;color:var(--muted);margin:1.3rem 0 2rem;max-width:60ch;}
/* Horizontal scroll rather than a squashed table on narrow screens. The
   authoritative-list column is unavoidably wide. */
.disc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid rgba(30,28,25,.14);border-radius:14px;background:#fff;}
.disc-table{width:100%;border-collapse:collapse;min-width:34rem;font-size:.94rem;}
.disc-table thead th{background:var(--oat);text-align:left;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
  padding:.85rem 1.1rem;border-bottom:1px solid rgba(30,28,25,.14);white-space:nowrap;}
.disc-table tbody th{text-align:left;font-weight:600;padding:1rem 1.1rem;
  vertical-align:top;width:38%;border-bottom:1px solid rgba(30,28,25,.09);}
.disc-table tbody td{padding:1rem 1.1rem;vertical-align:top;
  border-bottom:1px solid rgba(30,28,25,.09);}
.disc-table tbody tr:last-child th,.disc-table tbody tr:last-child td{border-bottom:none;}
.disc-lists{display:flex;flex-direction:column;gap:.42rem;}
.disc-lists a{color:var(--green);text-decoration:underline;text-underline-offset:2px;}
.disc-lists a:hover{color:var(--ink);}
.disc-lists span{color:var(--muted);}
.disc-note{font-size:.92rem;color:var(--muted);margin-top:1.5rem;max-width:70ch;line-height:1.65;}
.disc-note a{color:var(--green);text-decoration:underline;text-underline-offset:2px;}
.disc-back{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);text-decoration:none;}
.disc-back:hover{text-decoration:underline;}

/* ---------- disclosure index ---------- */
.disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.9rem;margin-top:2.2rem;}
.disc-card{display:flex;flex-direction:column;gap:.3rem;padding:1.35rem 1.4rem;
  background:var(--oat);border-radius:14px;text-decoration:none;color:var(--ink);
  transition:transform .35s var(--ease),background .35s var(--ease);}
.disc-card:hover{transform:translateY(-3px);background:#eae2d2;}
.disc-card span{font-family:var(--serif);font-size:1.22rem;}
.disc-card em{font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-style:normal;}

/* ---------- footer legal row ---------- */
.foot-legal{display:flex;flex-wrap:wrap;gap:.35rem 1.15rem;align-items:center;}
@media(max-width:560px){
  .foot-legal{flex-direction:column;align-items:flex-start;gap:.55rem;}
  .disc-table{font-size:.88rem;}
}

/* ---------- About page, marketing review 8/6 ---------- */
/* Hero type sat on a photo with no scrim and was hard to read. */
.band-scrim .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,18,15,.62) 0%,rgba(20,18,15,.34) 52%,rgba(20,18,15,.12) 100%);}
.band-scrim .wrap{position:relative;z-index:2;}
/* Brian's portrait read as small next to the quote. */
.headshot-lg img{max-width:none;width:100%;}
.headshot-lg{max-width:26rem;}
/* The mission is a statement, not a quotation. No quote marks, more air. */
.mission{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.3;
  font-weight:400;color:var(--ink);}
.mission em{font-style:italic;color:var(--green);}

/* Customer service: form beside the no-form routes, so someone who just wants
   the phone number does not have to scroll past a whole form to find it. */
.svc-split{display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:start;}
.svc-aside{position:sticky;top:6.5rem;}
.svc-routes{display:flex;flex-direction:column;gap:.85rem;margin-top:1.6rem;}
.svc-routes .value-card{margin:0;}
@media(max-width:900px){
  .svc-split{grid-template-columns:1fr;}
  /* On a phone the routes go FIRST, because the person who needs a human
     most urgently should not meet a form before a phone number. */
  .svc-aside{position:static;order:-1;}
}
/* The alternative to the form sits above it. Someone who does not want to fill
   in a form should not have to scroll past one to learn they do not have to. */
.form-alt{margin:0 0 1.4rem;color:var(--muted);font-size:.98rem;}
.form-alt a{color:var(--green);font-weight:700;}

/* ---------- Homepage brand grid ----------
   Replaced the two-brand "licensed spotlight" on 8/6. The owned-versus-licensed
   split was a distinction visitors do not care about and it implied a ranking,
   so all nine brands sit here on equal footing. */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
  gap:clamp(.9rem,1.6vw,1.4rem);margin-top:2.6rem;}
.bgrid-card{display:flex;flex-direction:column;background:var(--bone);border-radius:16px;
  overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.bgrid-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -22px rgba(20,18,15,.45);}
.bgrid-media{aspect-ratio:4/3;overflow:hidden;}
.bgrid-media>div{width:100%;height:100%;background-size:cover;background-position:center;
  transition:transform .8s var(--ease);}
.bgrid-card:hover .bgrid-media>div{transform:scale(1.05);}
.bgrid-body{padding:1.15rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.bgrid-logo{height:30px;width:auto;max-width:62%;object-fit:contain;object-position:left center;}
.bgrid-body p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0;}
@media(prefers-reduced-motion:reduce){
  .bgrid-card,.bgrid-media>div{transition:none;}
  .bgrid-card:hover{transform:none;}
  .bgrid-card:hover .bgrid-media>div{transform:none;}
}

/* ---- hero sound toggle ----------------------------------------------------
   Added 8/12/26. The hero autoplays muted, because browsers refuse to autoplay
   with sound; this button is the user gesture that lets audio start. Sits inside
   .grow, which is already position-relative-ish via overflow:hidden, so it is
   pinned to the video's own corner rather than the page.
   Tap target is comfortably over 44px so it passes on a phone.            */
.grow{position:relative;}
.snd-btn{
  position:absolute; right:clamp(.9rem,2vw,1.6rem); bottom:clamp(.9rem,2vw,1.6rem);
  z-index:3; display:inline-flex; align-items:center; gap:.55rem;
  min-height:46px; padding:.7rem 1.1rem;
  font-family:var(--sans); font-size:.85rem; font-weight:600; letter-spacing:.01em;
  color:#fff; background:rgba(16,19,17,.52); border:1px solid rgba(255,255,255,.28);
  border-radius:999px; cursor:pointer; backdrop-filter:blur(8px);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.snd-btn:hover{background:rgba(16,19,17,.72); border-color:rgba(255,255,255,.5);}
.snd-btn:active{transform:scale(.97);}
.snd-btn:focus-visible{outline:3px solid var(--green); outline-offset:3px;}
/* speaker glyph, drawn in CSS so there is no extra request and no icon font */
.snd-ico{position:relative; width:15px; height:15px; flex:0 0 auto;}
.snd-ico::before{content:""; position:absolute; left:0; top:3.5px;
  border-style:solid; border-width:4px 7px 4px 0; border-color:transparent #fff transparent transparent;}
/* muted state: a slash. unmuted state: two arcs. */
.snd-ico::after{content:""; position:absolute; left:9px; top:1px; width:8px; height:13px;
  border:2px solid #fff; border-left:0; border-radius:0 9px 9px 0; opacity:0;}
.snd-btn[aria-pressed="true"] .snd-ico::after{opacity:1;}
.snd-btn[aria-pressed="false"] .snd-ico::after{
  opacity:1; width:13px; height:0; border:0; border-top:2px solid #fff;
  left:5px; top:6px; transform:rotate(-45deg); border-radius:0;}
@media (prefers-reduced-motion:reduce){ .snd-btn{transition:none;} }