/* ===================================================================
   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;}
.hero-title{color:var(--bone);font-size:clamp(2.5rem,11.5vw,12rem);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 */
.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.8rem;list-style:none;}
.thread::before{content:"";position:absolute;left:.6rem;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(to bottom,var(--green),var(--pine));}
.thread li{position:relative;padding-bottom:3rem;}
.thread li::before{content:"";position:absolute;left:-2.68rem;top:.5rem;width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px var(--bone);}
.thread .year{font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--green);}
.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);}

/* ---------- 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));}}
.ig-tile{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1/1;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;}
.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;}

/* ---- 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: zig-zag flow ---- */
.lic-flow{margin-top:1.5rem;}
.lf-row{display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:center;}
.lf-copy h2{font-size:clamp(2.4rem,5.5vw,4.6rem);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:2.6rem 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:880px){
  .lf-row{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);}
  .lf-row.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
  .lf-row.flip .lf-copy{text-align:right;}
  .lf-row.flip .lf-copy p{margin-left:auto;}
  .lf-row:first-child .lf-photo{transform:translateY(1.6rem);}
}
@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. */
.brand-hero .logo-img[alt="Pioneer Woman logo"]{height:clamp(96px,11vw,128px);}

/* 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 colour. */
/* 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);}