/* ============================================================================
   Wendy's Milk Bar · Hollywood Plaza — Supapop visual system
   Direction B (approved). Comic-book spectacle, executed premium.
   Motion = Rolling (scroll-scrubbed) + scroll-driven shake-build hero.
   ========================================================================== */

:root{
  --ink:#21336b; --coral:#f4677b; --berry:#e8324f; --sky:#79d2ec; --sky-deep:#33b4dc;
  --blush:#fbcfdb; --cream:#fff8f0; --sun:#ffc52e; --grape:#7b5ce0;
  --paper:#fff8f0; --line:#21336b;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --r:28px;
  --maxw:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;background:var(--cream);color:var(--ink);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.55;font-weight:500;
}
.disp{font-family:"Fredoka",sans-serif}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Atmosphere: halftone dots + grain ---------------------------------- */
.dots{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(var(--sky) 1.4px,transparent 1.5px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(130vw 100vh at 50% 0,#000,transparent 72%);
          mask-image:radial-gradient(130vw 100vh at 50% 0,#000,transparent 72%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply}
main{position:relative;z-index:2}

/* ---- Typography --------------------------------------------------------- */
h1,h2,h3{font-family:"Fredoka",sans-serif;line-height:.96;letter-spacing:-.01em;text-transform:uppercase}
h2{font-size:clamp(34px,6vw,78px)}
h2 .blue{color:var(--sky-deep)} h2 .pink{color:var(--coral)} h2 .grape{color:var(--grape)}
.kicker{font-family:"Fredoka";font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--berry);margin-bottom:12px}
.section-lede{font-size:clamp(16px,1.6vw,19px);font-weight:600;max-width:52ch;margin-top:16px}

/* ---- Buttons ------------------------------------------------------------ */
.btn{display:inline-block;padding:15px 30px;border-radius:100px;font-weight:800;font-size:15px;text-decoration:none;
  border:3px solid var(--ink);transition:transform .16s ease,box-shadow .16s ease;cursor:pointer;font-family:"Hanken Grotesk"}
.btn-primary{background:var(--coral);color:#fff;box-shadow:var(--shadow)}
.btn-sun{background:var(--sun);color:var(--ink);box-shadow:var(--shadow)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--berry)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-ink:hover{box-shadow:2px 2px 0 var(--berry)}
.btn:focus-visible{outline:4px solid var(--grape);outline-offset:3px}

/* ---- Nav ---------------------------------------------------------------- */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:12px 26px;background:rgba(255,248,240,.82);backdrop-filter:blur(10px);border-bottom:3px solid var(--ink)}
nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
nav .brand img{height:42px;width:auto}
.navlinks{display:flex;gap:24px;font-weight:700;font-size:14px;margin-left:auto}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:var(--coral)}
.nav-actions{display:flex;align-items:center;gap:12px}
.navcta{background:var(--sun);color:var(--ink);padding:10px 18px;border-radius:100px;font-weight:800;font-size:13px;
  text-decoration:none;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.navcta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media(max-width:980px){.navlinks{display:none}}
@media(max-width:520px){nav .brand img{height:34px}.navcta{display:none}}

/* ---- Rolling (scroll-scrubbed reveal) ----------------------------------- */
.reveal{opacity:1;will-change:opacity,transform}
.js .reveal{opacity:0}
html.reduced .reveal{opacity:1!important;transform:none!important}
/* bar fills driven by --p (0->1) */
.bar{position:relative;height:14px;border-radius:100px;background:rgba(33,51,107,.14);overflow:hidden;border:2px solid var(--ink)}
.bar > i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,1));background:var(--coral)}
.js .bar > i{--p:0}
html.reduced .bar > i{--p:1!important}

/* ---- Hero load intro (CSS keyframe, NOT Rolling) ------------------------ */
.intro{opacity:0;transform:translateY(22px);animation:introUp .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes introUp{to{opacity:1;transform:none}}
.intro[data-d="1"]{animation-delay:.06s}.intro[data-d="2"]{animation-delay:.18s}
.intro[data-d="3"]{animation-delay:.30s}.intro[data-d="4"]{animation-delay:.42s}.intro[data-d="5"]{animation-delay:.54s}
html.reduced .intro{animation:none;opacity:1;transform:none}

/* ============================================================================
   HERO — scroll-driven shake-build (the centerpiece)
   .hero is tall (scroll room); .hero-pin sticks; JS drives --build 0->1.
   ========================================================================== */
.hero{position:relative;height:200vh}
@media(max-width:880px){.hero{height:172vh}}
html.reduced .hero{height:auto}
.hero-pin{position:sticky;top:0;height:100vh;display:flex;align-items:safe center;overflow:hidden;
  padding-top:108px; /* clear the fixed nav so the Hollywood Plaza badge is never hidden */
  background:
    radial-gradient(60vw 60vw at 80% 22%,rgba(121,210,236,.55),transparent 60%),
    radial-gradient(52vw 52vw at 6% 92%,rgba(251,207,219,.8),transparent 60%),
    radial-gradient(40vw 40vw at 50% 120%,rgba(255,197,46,.4),transparent 60%)}
html.reduced .hero-pin{position:static;height:auto;padding:120px 0 60px}
.hero-inner{display:grid;grid-template-columns:1fr minmax(380px,560px);gap:40px;align-items:center;width:100%;max-width:1320px}
@media(max-width:880px){.hero-inner{grid-template-columns:1fr;gap:8px;text-align:center}}

.badge{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:800;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;border-radius:100px;margin-bottom:20px;
  text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
a.badge:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--coral)}
h1.hero-h{font-size:clamp(50px,9.4vw,128px);line-height:.84;text-transform:uppercase}
h1.hero-h .pink{color:var(--coral)} h1.hero-h .blue{color:var(--sky-deep)}
h1.hero-h .burst{display:inline-block;color:#fff;background:var(--berry);padding:2px 16px;border-radius:14px;
  transform:rotate(-3deg);box-shadow:var(--shadow);animation:pop 3.2s ease-in-out infinite}
html.reduced h1.hero-h .burst{animation:none}
@keyframes pop{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(-3deg) scale(1.035)}}
.hero-lede{font-size:clamp(16px,1.7vw,20px);font-weight:600;max-width:34ch;margin:24px 0 30px}
@media(max-width:880px){.hero-lede{margin-inline:auto}}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:880px){.cta-row{justify-content:center}}

/* Shake-build stage — Pour & Crown (tall glass fills + crowns on scroll) */
.hero-stage{position:relative;aspect-ratio:1/1.18;display:grid;place-items:center;max-width:560px;justify-self:center;width:100%}
@media(max-width:880px){.hero-stage{max-width:300px;margin-top:0}}
/* Hero backdrop — soft glow + floating sparkles, revealed once the shake is fully built */
.hero-backdrop{position:absolute;inset:0;z-index:0;opacity:0;display:grid;place-items:center;pointer-events:none}
.hero-backdrop .bd-glow{width:96%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,197,46,.5),rgba(251,207,219,.32) 45%,transparent 70%)}
.hero-backdrop .bd-sparkles{position:absolute;inset:0}
.hero-backdrop .bd-sparkles i{position:absolute;font-style:normal;color:var(--sun);font-size:20px;text-shadow:0 0 6px rgba(255,197,46,.6);animation:tw 2.6s ease-in-out infinite}
.hero-backdrop .bd-sparkles i:nth-child(1){left:12%;top:20%;animation-delay:0s}
.hero-backdrop .bd-sparkles i:nth-child(2){right:10%;top:14%;font-size:14px;color:var(--coral);animation-delay:.5s}
.hero-backdrop .bd-sparkles i:nth-child(3){left:6%;bottom:26%;font-size:16px;color:var(--sky-deep);animation-delay:1s}
.hero-backdrop .bd-sparkles i:nth-child(4){right:8%;bottom:20%;animation-delay:1.4s}
.hero-backdrop .bd-sparkles i:nth-child(5){left:22%;top:6%;font-size:12px;color:var(--coral);animation-delay:.8s}
.hero-backdrop .bd-sparkles i:nth-child(6){right:24%;bottom:8%;font-size:13px;color:var(--sky-deep);animation-delay:1.8s}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
html.reduced .hero-backdrop .bd-sparkles i{animation:none;opacity:.85}
.shake{position:relative;width:92%;height:auto;max-height:calc(100vh - 150px);overflow:visible;filter:drop-shadow(0 22px 24px rgba(33,51,107,.24))}
.shake g{will-change:transform,opacity}
/* transform anchors for the build layers */
#glass,#strawA,#strawB,#cherry,#detail,.flake,.cblob{transform-box:fill-box}
#glass,#strawA,#strawB,#cherry,#detail,.flake,.cblob{transform-origin:center}
#liquid{transform-box:fill-box;transform-origin:50% 100%}
.js #glass,.js #strawA,.js #strawB,.js #cherry,.js #detail,.js #dents,.js .flake,.js .cblob{opacity:0}
/* sits just UNDER the glass on every screen (never over the cup) */
.scrollhint{position:absolute;top:calc(100% + 8px);bottom:auto;left:50%;transform:translateX(-50%);font-weight:800;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.7;display:flex;flex-direction:column;align-items:center;gap:4px}
.scrollhint .arrow{font-size:18px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
html.reduced .scrollhint{display:none}

/* Mobile hero: pinned area shows headline + shake; lede/CTAs land just below */
.hero-mobile-intro{display:none}
@media(max-width:880px){
  .hero-pin{align-items:flex-start;padding-top:70px}
  .hero-inner{gap:2px;align-content:start}
  h1.hero-h{font-size:clamp(40px,11vw,70px)}
  .badge{font-size:10.5px;padding:6px 13px;letter-spacing:.07em;margin-bottom:14px}  /* smaller "Hollywood Plaza" sign */
  .hero-copy .hero-lede,.hero-copy .cta-row{display:none}
  /* scroll hint sits neatly just under the bottom of the glass (and is visible on load) */
  .scrollhint{bottom:auto;top:calc(100% + 6px)}
  .hero-mobile-intro{display:block;text-align:center;padding:32px 28px 48px}  /* bottom gap before the marquee */
  .hero-mobile-intro .hero-lede{display:block;margin:0 auto 22px}
  .hero-mobile-intro .cta-row{justify-content:center}
}

/* ---- Marquee ------------------------------------------------------------ */
.marquee{background:var(--ink);color:var(--sun);padding:15px 0;overflow:hidden;white-space:nowrap;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);font-family:"Fredoka";font-weight:700;
  font-size:20px;letter-spacing:.04em;position:relative;z-index:3}
.marquee .track{display:inline-block;animation:scroll 26s linear infinite}
.marquee span{padding-right:38px}
html.reduced .marquee .track{animation:none}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---- Sections ----------------------------------------------------------- */
/* vertical only — must NOT zero out .wrap's horizontal padding (mobile side gutters) */
section.block{padding-top:clamp(70px,10vw,118px);padding-bottom:clamp(70px,10vw,118px);position:relative}
.flag{display:inline-flex;align-items:center;gap:6px;background:var(--blush);color:var(--ink);border:2px dashed var(--berry);
  border-radius:100px;padding:4px 12px;font-size:11px;font-weight:800;letter-spacing:.02em}
.flag::before{content:"✱"}

/* Lineup */
.lineup-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.flavours{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
@media(max-width:880px){.flavours{grid-template-columns:1fr}}
.fcard{border-radius:var(--r);border:3px solid var(--ink);box-shadow:var(--shadow-lg);background:#fff;overflow:hidden;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.fcard:hover{transform:translate(4px,4px);box-shadow:4px 4px 0 var(--ink)}
.fcard .pic{aspect-ratio:16/10;overflow:hidden;border-bottom:3px solid var(--ink);position:relative;background:var(--blush)}
.fcard .pic img{width:100%;height:100%;object-fit:cover}
.fcard .tag{position:absolute;top:12px;right:12px;background:var(--sun);border:2px solid var(--ink);border-radius:100px;
  font-weight:800;font-size:11px;padding:4px 11px;z-index:2}
.fcard .body{padding:20px 22px 24px}
.fcard h3{font-size:23px}
.fcard p{font-size:13.5px;font-weight:600;opacity:.82;margin-top:6px}
.fcard .price{margin-top:12px;font-family:"Fredoka";font-weight:700;color:var(--berry);font-size:18px}

/* Make it MEGA */
.mega{position:relative;color:#fff;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;
  background:linear-gradient(135deg,var(--berry),var(--coral))}
.mega .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:clamp(60px,8vw,96px) 28px}
@media(max-width:880px){.mega .wrap{grid-template-columns:1fr;gap:26px}}
.mega h2{color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:4px 5px 0 rgba(33,51,107,.25)}
.mega .section-lede{color:#fff;opacity:.96}
.mega .pic{border-radius:var(--r);border:3px solid var(--ink);box-shadow:var(--shadow-lg);overflow:hidden;background:#fff;transform:rotate(-2deg)}
.mega .pic img{width:100%;height:100%;object-fit:cover}
.mega .splat{position:absolute;font-family:"Fredoka";font-weight:700;background:var(--sun);color:var(--ink);
  border:3px solid var(--ink);border-radius:100px;padding:10px 18px;box-shadow:var(--shadow);transform:rotate(8deg);
  top:92px;right:6%;z-index:3;font-size:18px}
@media(max-width:880px){.mega .splat{display:none}}

/* Menu glance */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:44px}
.mcard{border-radius:24px;border:3px solid var(--ink);background:#fff;box-shadow:var(--shadow);padding:24px}
.mcard.tint-sky{background:linear-gradient(160deg,#fff,rgba(121,210,236,.22))}
.mcard.tint-blush{background:linear-gradient(160deg,#fff,rgba(251,207,219,.4))}
.mcard.tint-sun{background:linear-gradient(160deg,#fff,rgba(255,197,46,.25))}
.mcard h3{font-size:21px;display:flex;align-items:center;gap:9px}
.mcard ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px}
.mcard li{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;
  padding-bottom:9px;border-bottom:2px dashed rgba(33,51,107,.18)}
.mcard li:last-child{border-bottom:0}
.mcard li b{font-family:"Fredoka";color:var(--berry);font-weight:600;white-space:nowrap}

/* Ice cream cakes — editorial framed (real photo + real flavour chips) */
.cakes{position:relative}
.cake-ed-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
@media(max-width:880px){.cake-ed-grid{grid-template-columns:1fr;gap:34px}}
.flavs{display:flex;gap:18px;margin:28px 0;flex-wrap:wrap}
.flav{text-align:center;font-weight:800;font-size:12px}
.flav img{width:74px;height:74px;border-radius:50%;border:3px solid var(--ink);object-fit:cover;display:block;margin:0 auto 6px;box-shadow:4px 4px 0 var(--ink)}
.cake-frame{position:relative;border-radius:26px;border:4px solid var(--ink);box-shadow:var(--shadow-lg);overflow:hidden;background:#fff}
.cake-frame img{width:100%;display:block;aspect-ratio:4/3.2;object-fit:cover}
.cf-tag{position:absolute;top:16px;left:16px;background:var(--sun);border:3px solid var(--ink);border-radius:100px;
  padding:7px 15px;font-family:"Fredoka";font-weight:700;box-shadow:4px 4px 0 var(--ink)}
.cf-cap{border-top:3px solid var(--ink);padding:12px 18px;font-weight:800;font-size:13px;display:flex;
  justify-content:space-between;gap:8px;align-items:center;background:#fff}

/* Our Story */
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:46px;align-items:center}
@media(max-width:880px){.story-grid{grid-template-columns:1fr;gap:30px}}
.story-photo{border-radius:var(--r);border:3px solid var(--ink);box-shadow:var(--shadow-lg);overflow:hidden;transform:rotate(-1.5deg)}
.story-photo img{width:100%;filter:saturate(1.05)}
.story-photo .cap{background:var(--ink);color:var(--cream);font-size:12px;font-weight:700;padding:9px 14px;display:flex;justify-content:space-between;gap:10px}
.timeline{list-style:none;display:flex;flex-direction:column;gap:0}
.timeline li{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:18px 0;border-bottom:2px dashed rgba(33,51,107,.2);align-items:start}
.timeline .yr{font-family:"Fredoka";font-weight:700;font-size:30px;color:var(--coral);line-height:1}
.timeline .what{font-weight:600;font-size:15px}
.timeline .what b{font-family:"Fredoka";font-weight:600;display:block;font-size:17px;color:var(--ink);text-transform:uppercase;margin-bottom:3px}
.statline{display:flex;gap:34px;flex-wrap:wrap;margin-top:30px}
.stat .n{font-family:"Fredoka";font-weight:700;font-size:clamp(36px,5vw,54px);color:var(--sky-deep);line-height:1}
.stat .l{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}

/* Insider */
.insider{position:relative}
.insider-card{border-radius:34px;border:3px solid var(--ink);box-shadow:var(--shadow-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--blush),#fff);display:grid;grid-template-columns:1.1fr .9fr;align-items:center}
@media(max-width:880px){.insider-card{grid-template-columns:1fr}}
.insider-copy{padding:clamp(40px,6vw,64px)}
.insider .perks{list-style:none;margin:22px 0 28px;display:flex;flex-direction:column;gap:12px}
.insider .perks li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:15px}
.insider .perks .tick{width:26px;height:26px;flex:none;border-radius:50%;background:var(--sun);border:2.5px solid var(--ink);
  display:grid;place-items:center;font-weight:900;color:var(--ink);font-size:14px}
.insider-art{background:linear-gradient(160deg,var(--sky),var(--sky-deep));padding:40px;display:grid;place-items:center;
  align-self:stretch;border-left:3px solid var(--ink)}
@media(max-width:880px){.insider-art{border-left:0;border-top:3px solid var(--ink)}}
.insider-art img{border-radius:18px;border:3px solid var(--ink);box-shadow:var(--shadow);background:#fff}

/* Find us */
.find{position:relative}
.map-card{display:grid;grid-template-columns:1.05fr .95fr;border-radius:30px;overflow:hidden;border:3px solid var(--ink);
  box-shadow:var(--shadow-lg);background:#fff;margin-top:42px}
@media(max-width:880px){.map-card{grid-template-columns:1fr}}
.map-side{position:relative;min-height:380px;background:linear-gradient(150deg,var(--blush),var(--coral))}
.map-side iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(1.05)}
.map-pin{position:absolute;top:14px;left:14px;z-index:2;background:#fff;border:2.5px solid var(--ink);border-radius:100px;
  padding:7px 14px;font-weight:800;font-size:12px;box-shadow:var(--shadow-sm)}
.info-side{padding:clamp(30px,4vw,46px)}
.info-side h3{font-size:30px}
.addr{font-weight:700;opacity:.82;margin-top:8px;font-size:15px}
.hours{margin-top:22px}
.hours .r{display:flex;justify-content:space-between;padding:11px 0;border-bottom:2px dashed rgba(33,51,107,.2);font-weight:700;font-size:14px}
.hours .r.today{color:var(--berry)}
.hours .r b{font-family:"Fredoka";font-weight:600}
.info-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.chip{background:var(--cream);border:2px solid var(--ink);border-radius:100px;padding:7px 14px;font-weight:700;font-size:12px}

/* Footer */
footer{background:var(--ink);color:var(--cream);border-top:3px solid var(--ink);padding:56px 0 30px;position:relative;z-index:3}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:24px}}
footer .logo-foot{height:54px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1)}
footer h4{font-family:"Fredoka";font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.08em;margin-bottom:12px;color:var(--sun)}
footer a{color:var(--cream);text-decoration:none;opacity:.85;font-size:14px;font-weight:600}
footer a:hover{opacity:1;color:var(--sun)}
footer ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,248,240,.18);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:12px;opacity:.7}

/* Sign-off legend (placeholder disclosure) */
.signoff{background:var(--sun);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);position:relative;z-index:3}
.signoff .wrap{padding:18px 28px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.signoff b{font-family:"Fredoka";font-weight:600;text-transform:uppercase}
.signoff span{font-weight:600;font-size:14px;max-width:70ch}