/* Power Plate site.
   Direction: a bright quick-service page. Full-bleed paper, wide heavy capitals, rounded
   cards in the box's blue and yellow with food spilling over their edges, and pill buttons that end in a
   round icon. Three colours only: Blue #153D80, Yellow #EFC040, Paper #F6F3EB, plus tints of them.
   Motion is flat: words rise, cards fade up, cutouts drift and turn with the scroll. Nothing tilts in depth. */
:root {
  --blue: #153d80;
  --blue-2: #0f2e63;
  --blue-3: #2a5299;
  --yellow: #efc040;
  --yellow-2: #e2ab22;
  --yellow-3: #f6d983;
  --paper: #f6f3eb;
  --paper-2: #ece6d6;
  --white: #fffdf8;
  --ink: #153d80;
  --ink-2: #33507f;
  --muted: #5d6f93;
  --line: #d8d1bf;
  --on-blue: #f6f3eb;
  --on-blue-muted: #b9c6e0;
  --display: "Geom", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "Quicksand", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(16px, 5.4vw, 76px);
  --radius: 16px;
  --header-h: 84px;
  --top-space: 84px; /* room kept above the page for the fixed header */
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; height: auto; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The page: full-bleed paper, content spans the whole width */
.page { background: var(--paper); overflow-x: clip; }

/* Heavy geometric capitals in Geom */
.wide, h2, .hero-title, .statement-text, .feature-kicker, .feature-title, .item-name, .hours-title{
  font-family: var(--display); text-transform: uppercase;
}
h2 { font-weight: 900; font-size: clamp(28px, 3.7vw, 50px); line-height: 1.04; letter-spacing: .005em; text-wrap: balance; }
h2 > span { display: block; font-weight: 800; font-size: .5em; letter-spacing: .02em; color: var(--muted); margin-top: .6em; text-transform: none; line-height: 1.2; }
h3 { font: 700 clamp(19px, 1.6vw, 23px)/1.2 var(--display); letter-spacing: -0.01em; }
.h-mid { font: 800 clamp(22px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -0.02em; }
.kicker { font: 700 12px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.sample-note { font: 400 12px/1.5 var(--body); color: var(--muted); }

/* Sections share one rhythm */
main > section { padding: 0 var(--pad); margin-top: clamp(64px, 9vw, 128px); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-bottom: clamp(28px, 3.6vw, 48px); }
.sec-head h2 { max-width: 18ch; }
.sec-lede { max-width: 52ch; color: var(--ink-2); font-size: 16.5px; display: grid; gap: 12px; }

/* ---------- Pills: label, then the icon in a circle ---------- */
.pill { --bg: var(--blue); --fg: var(--paper); --ico-bg: var(--paper); --ico-fg: var(--blue); display: inline-flex; align-items: center; gap: 14px; min-height: 50px; padding: 5px 5px 5px 24px; border-radius: 999px; background: var(--bg); color: var(--fg); border: 2px solid var(--bg); text-decoration: none; font: 700 12.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease); }
.pill-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ico-bg); color: var(--ico-fg); display: grid; place-items: center; transition: transform .35s var(--ease); }
.pill-ico svg, .notch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pill:hover { transform: translateY(-2px); }
.pill:hover .pill-ico { transform: rotate(45deg); }
.pill-yellow { --bg: var(--yellow); --fg: var(--blue); --ico-bg: var(--blue); --ico-fg: var(--yellow); }
.pill-line { --bg: transparent; --fg: var(--blue); --ico-bg: var(--blue); --ico-fg: var(--paper); border-color: var(--blue); }
.pill-line:hover { --bg: var(--blue); --fg: var(--paper); --ico-bg: var(--yellow); --ico-fg: var(--blue); }
.pill-line-paper { --bg: transparent; --fg: var(--paper); --ico-bg: var(--paper); --ico-fg: var(--blue); border-color: var(--paper); }
.pill-sm { min-height: 40px; padding-left: 16px; gap: 10px; font-size: 11px; }
.pill-sm .pill-ico { width: 30px; height: 30px; }
.pill-sm .pill-ico svg { width: 15px; height: 15px; }

/* The round arrow sitting in a notch cut from a card's corner */
.notch { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); color: var(--blue); display: grid; place-items: center; box-shadow: 0 0 0 8px var(--paper); transition: transform .35s var(--ease); z-index: 3; }
.notch-tr { top: -4px; right: -4px; }
.notch-br { bottom: -4px; right: -4px; }
a:hover > .notch { transform: rotate(45deg); }

/* ---------- Header ---------- */
.page > main { padding-top: var(--top-space); }
.page > main.legal { padding-top: calc(var(--top-space) + clamp(32px, 5vw, 64px)); }
/* Header: a plain full-width bar while the page is at the top; once it scrolls, the bar lifts into a floating
   frosted pill with a gap all round. Every change below is a transition, so it morphs rather than jumps. */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 0; pointer-events: none; transition: padding .45s var(--ease), translate .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
/* Glides up and fades out while scrolling down (app.js), glides back in on the way up; it leaves a touch
   quicker than it returns. Keyboard focus inside brings it back. */
.top.is-hidden:not(:focus-within) { translate: 0 calc(-100% - 24px); opacity: 0; transition: padding .45s var(--ease), translate .55s cubic-bezier(.55, 0, .3, 1), opacity .4s ease .1s; }
.top-inner { pointer-events: auto; height: var(--header-h); max-width: 100%; margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; border-radius: 0; background: rgba(246, 243, 235, 0); box-shadow: inset 0 0 0 1px rgba(21, 61, 128, 0), 0 12px 32px -22px rgba(21, 61, 128, 0); transition: height .45s var(--ease), max-width .45s var(--ease), padding .45s var(--ease), border-radius .45s var(--ease), background-color .45s ease, box-shadow .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease; }
.top.is-stuck { padding: 12px var(--pad) 0; }
.top.is-stuck .top-inner { --header-h: 62px; max-width: 1080px; padding: 0 8px 0 10px; border-radius: 36px; background: rgba(255, 253, 248, .86); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(21, 61, 128, .12), 0 20px 44px -22px rgba(21, 61, 128, .6); }
.brand { display: inline-flex; align-items: center; text-decoration: none; padding-right: 6px; }
.brand img { width: auto; height: 54px; transition: height .4s var(--ease), rotate .5s var(--ease); }
.brand:hover img { rotate: -3deg; }
.top.is-stuck .brand img { height: 46px; }
.brand .logo-paper { display: none; }
.home .top:not(.is-stuck) .brand .logo-ink, .foot .brand .logo-ink { display: none; }
.home .top:not(.is-stuck) .brand .logo-paper, .foot .brand .logo-paper { display: block; }
.top-nav { justify-self: center; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(21, 61, 128, .05); }
.top-nav a { font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 11px 16px; border-radius: 999px; white-space: nowrap; transition: background-color .3s ease, color .3s ease; }
.top-nav a:hover { background: rgba(21, 61, 128, .08); }
.top-nav a.is-active { background: var(--blue); color: var(--paper); }
.top-cta { grid-column: 3; min-height: 48px; }
.top-cta .pill-ico { width: 36px; height: 36px; }
@media (max-width: 1080px) { .top-nav { display: none; } }
@media (max-width: 720px) { :root { --header-h: 64px; --top-space: 64px; } .top.is-stuck { padding: 10px 12px 0; } .top.is-stuck .top-inner { --header-h: 56px; } .top-cta { display: none; } .legal-page .top-cta { display: inline-flex; min-height: 44px; } }

/* ---------- Hero: the opening screen, in the format of a product launch page ----------
   Solid blue with a little print grain; the wordmark across the top, the order button under it; the 3D box in a
   hand-drawn ring with its numbers in circles on the ring; the tagline as a three-line headline; a curved band of
   words sweeping into the paper below. */
:root {
  --smooth: cubic-bezier(.32, .72, 0, 1);
  --elastic: cubic-bezier(.34, 1.56, .64, 1);
  --elastic-soft: cubic-bezier(.3, 1.35, .6, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* The reference's two elastic curves, point for point */
    --elastic: linear(0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1);
    --elastic-soft: linear(0, .029 1.7%, .113 3.6%, .604 11.1%, .809 15%, .949 19.1%, .995 21.3%, 1.026 23.6%, 1.044 26.2%, 1.049 29.3%, 1.01 43.5%, 1 51.2%, 1);
  }
}
.hero {
  position: relative; margin-top: calc(-1 * var(--top-space)) !important; padding: calc(var(--top-space) + clamp(8px, 2vw, 28px)) 0 0 !important;
  background: var(--blue); color: var(--paper); overflow: hidden; isolation: isolate;
}
/* Print grain over the whole screen */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero-head { display: grid; justify-items: center; gap: clamp(16px, 2vw, 26px); padding: 0 var(--pad); }
.hero-mark { position: relative; z-index: 2; font: 800 clamp(38px, 11.2vw, 210px)/.9 "MuseoModerno", var(--display); letter-spacing: -.02em; text-transform: uppercase; color: var(--yellow); white-space: nowrap; text-align: center; }
.hm-l { display: inline-block; }
.hero-cta { position: relative; z-index: 3; }

.hero-body { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 0 clamp(16px, 3vw, 48px); padding: clamp(16px, 3vw, 44px) var(--pad) 0; }
.hero-visual { position: relative; width: min(100%, 720px); aspect-ratio: 1; margin-left: clamp(-24px, -1vw, 0px); }
.hero-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-ring circle { fill: none; stroke: var(--paper); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 100 0; }
.hero-canvas { position: absolute; inset: -16% -14% -10% -10%; width: 124%; height: 126%; z-index: 2; pointer-events: none; }
.hero .stage-fallback { z-index: 2; width: 86%; top: 46%; }
/* The photo is only for browsers without the 3D box: with scripts on it stays hidden from the first paint, so it
   never flashes before the box arrives. app.js or box3d.js adds .no-3d to <html> when 3D can't run. */
.is-3d .stage-fallback { display: none; }
@media (scripting: enabled) { html:not(.no-3d) .stage-fallback { visibility: hidden; } }

/* The numbers on the ring: paper circles that land with a spring and get flicked by a passing pointer */
.hero-facts { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-fact { position: absolute; width: clamp(84px, 9.6vw, 140px); aspect-ratio: 1; translate: -50% -50%; pointer-events: auto; }
.hero-fact-in { width: 100%; height: 100%; border-radius: 50%; background: var(--paper); color: var(--blue); display: grid; place-content: center; text-align: center; gap: 2px; box-shadow: 0 18px 30px -18px rgba(4, 14, 36, .7); will-change: transform; }
.hero-fact b { font: 900 clamp(24px, 2.7vw, 40px)/.9 var(--display); letter-spacing: -.02em; }
.hero-fact small { font-size: .55em; margin-left: 1px; text-transform: uppercase; }
.hero-fact-in > span { font: 700 clamp(10.5px, .95vw, 13.5px)/1.1 var(--body); letter-spacing: .02em; }

/* Handwritten note with a sketched arrow pointing at the box */
.hero-note { position: absolute; z-index: 3; left: 58%; top: 10%; translate: -50% 0; display: grid; justify-items: center; text-align: center; gap: 2px; font: 600 clamp(18px, 1.7vw, 26px)/1 "Caveat", "Segoe Print", cursive; color: var(--yellow); max-width: 9em; transform: rotate(-7deg); }
.hero-note-arrow { width: clamp(30px, 3vw, 44px); margin-left: 18%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(9deg); }

.hero-copy { position: relative; z-index: 3; display: grid; justify-items: center; text-align: center; padding-top: clamp(4px, 2.2vw, 36px); }
.hero-title { font: 800 clamp(40px, 5.7vw, 104px)/.95 "MuseoModerno", var(--display); letter-spacing: -.015em; text-transform: uppercase; color: var(--yellow); }
.hero-title .hl { display: block; }
.hero-title .hl:first-child { color: var(--paper); }
.hero-lede { margin-top: clamp(16px, 1.8vw, 26px); max-width: 26ch; font: 600 clamp(17px, 1.55vw, 23px)/1.3 var(--body); color: var(--paper); text-wrap: balance; }
.hero-underline { width: min(260px, 70%); margin-top: 6px; overflow: visible; }
.hero-underline path { fill: none; stroke: var(--yellow); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 0; }
.hero-sample { margin-top: 14px; font: 500 11.5px/1.4 var(--body); color: var(--on-blue-muted); }

/* The curved band: a yellow ribbon of the pillar words over the paper the rest of the page sits on */
.hero-band { position: relative; z-index: 4; margin: clamp(-260px, -16vw, -90px) 0 -2px; pointer-events: none; }
.hero-band svg { display: block; width: 100%; height: clamp(170px, 26vw, 400px); overflow: visible; }
.hero-band-floor { fill: var(--paper); }
.hero-band-ribbon { fill: none; stroke: var(--yellow); stroke-width: 108; }
.hero-band text { font: 900 64px/1 var(--display); letter-spacing: .01em; fill: var(--blue); dominant-baseline: central; }

/* Header over the blue opening screen: paper text until it lifts into its frosted pill */
.home .top:not(.is-stuck) .top-nav { background: rgba(246, 243, 235, .1); }
.home .top:not(.is-stuck) .top-nav a { color: var(--paper); }
.home .top:not(.is-stuck) .top-nav a:hover { background: rgba(246, 243, 235, .14); }
.home .top:not(.is-stuck) .top-cta { --bg: var(--yellow); --fg: var(--blue); --ico-bg: var(--blue); --ico-fg: var(--yellow); }

@media (max-width: 900px) {
  .hero-body { grid-template-columns: 1fr; justify-items: center; }
  .hero-visual { width: min(100%, 560px); margin: clamp(56px, 12vw, 80px) auto 0; }
  .hero-copy { order: -1; padding-top: 8px; }
  .hero-band { margin-top: -22vw; }
  .hero-band svg { height: 34vw; }
}
@media (max-width: 520px) {
  .hero-visual { width: 92%; }
  .hero-fact { width: 76px; }
}

/* The intro, after the reference: the wordmark starts in the middle of the screen and glides up; the header, the
   button, the ring, the circles, the note, the headline and the line under it all land as it arrives. The box's
   own entrance is in box3d.js, timed from the same moment. app.js adds .is-played to <body>. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .is-intro { --d: .35s; }
  .is-intro .hero-mark { transition: transform .6s var(--smooth) var(--d); }
  .is-intro .hm-l { transition: transform .9s var(--elastic-soft), opacity .3s ease; transition-delay: calc(var(--d) * .2 + var(--i) * 28ms); }
  .is-intro .top { transition: opacity .25s ease calc(var(--d) + .125s); }
  .is-intro .hero-cta { transition: transform .5s var(--smooth) calc(var(--d) + .175s), opacity .5s var(--smooth) calc(var(--d) + .175s); }
  .is-intro .hero-ring circle { transition: stroke-dasharray 1.4s cubic-bezier(.33, 1, .68, 1) calc(var(--d) + .18s), stroke-dashoffset 1.4s cubic-bezier(.33, 1, .68, 1) calc(var(--d) + .18s); }
  .is-intro .hero-fact-in { transition: transform .8s var(--elastic), opacity .2s ease; transition-delay: calc(var(--d) + .165s + (2 - var(--k)) * 48ms); }
  .is-intro .hero-note { transition: transform .45s var(--smooth) calc(var(--d) + .15s), opacity .45s var(--smooth) calc(var(--d) + .15s); }
  .is-intro .hero-note-arrow { transition: transform .45s var(--smooth) calc(var(--d) + .155s), opacity .45s ease calc(var(--d) + .155s); }
  .is-intro .hero-title .hl { transform-origin: 100% 100%; transition: transform .95s var(--elastic-soft), opacity .3s ease; transition-delay: calc(var(--d) + .145s + var(--i) * 39ms); }
  .is-intro :is(.hero-lede, .hero-sample) { transition: transform .5s var(--smooth) calc(var(--d) + .26s), opacity .5s var(--smooth) calc(var(--d) + .26s); }
  .is-intro .hero-underline path { transition: stroke-dasharray .9s ease calc(var(--d) + .45s); }

  .is-intro:not(.is-played) .hero-mark { transform: translateY(var(--mark-y, 30vh)); }
  .is-intro:not(.is-played) .hm-l { transform: translateY(70%) scale(.6); opacity: 0; }
  .is-intro:not(.is-played) .top { opacity: 0; }
  .is-intro:not(.is-played) .hero-cta { transform: translateY(60px); opacity: 0; }
  .is-intro:not(.is-played) .hero-ring circle { stroke-dasharray: 0 100; stroke-dashoffset: -50; }
  .is-intro:not(.is-played) .hero-fact-in { transform: translate(-40px, 100px) rotate(-35deg) scale(.6); opacity: 0; }
  .is-intro:not(.is-played) .hero-note { transform: translate(-25%, -65%) rotate(-18deg) scale(1.25); opacity: 0; }
  .is-intro:not(.is-played) .hero-note-arrow { transform: translate(-125%, 0) rotate(-6deg) scale(1.25); opacity: 0; }
  .is-intro:not(.is-played) .hero-title .hl { transform: translate(25%, 60%) scale(.6); opacity: 0; }
  .is-intro:not(.is-played) :is(.hero-lede, .hero-sample) { transform: translateY(40px); opacity: 0; }
  .is-intro:not(.is-played) .hero-underline path { stroke-dasharray: 0 100; }
}

/* ---------- Shared 3D box stage (the scroll section): a yellow sun disc behind, the photo until WebGL is ready ---------- */
.seq-stage { position: relative; }
.stage-disc { position: absolute; left: 50%; top: 50%; width: min(84%, 560px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, var(--yellow) 0 56%, transparent 57%); }
.stage-disc::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(239, 192, 64, .2) 0 3deg, transparent 3deg 10deg); -webkit-mask: radial-gradient(circle, transparent 42%, #000 44%, transparent 72%); mask: radial-gradient(circle, transparent 42%, #000 44%, transparent 72%); animation: disc-turn 60s linear infinite; }
@keyframes disc-turn { to { rotate: 1turn; } }
.stage-fallback { position: absolute; left: 50%; top: 50%; width: min(92%, 600px); translate: -50% -50%; rotate: -5deg; filter: drop-shadow(0 24px 26px rgba(15, 46, 99, .35)); }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Statement: one big sentence, lit word by word as you scroll ---------- */
.statement-text { font-weight: 900; font-size: clamp(17px, 2.25vw, 31px); line-height: 1.75; letter-spacing: .02em; max-width: 1100px; }
.sw { transition: color .4s ease; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .sw { color: rgba(21, 61, 128, .16); } .sw.is-lit { color: var(--blue); } }
.st-pill { display: inline-block; width: 2.9em; height: 1.35em; border-radius: 999px; overflow: hidden; vertical-align: -0.28em; margin: 0 .1em; background: var(--yellow); border: 2px solid var(--blue); }
.st-pill img { width: 100%; height: 100%; object-fit: cover; }
.st-box img { object-fit: contain; scale: 1.5; translate: 0 18%; }

/* ---------- The box, every side: a tall section whose sticky stage spins the 3D box with the scroll ----------
   Laid out flat by default (stage, four cards, title); box3d.js adds .is-live to pin the stage and drive it. */
.seq-sticky { display: grid; gap: 18px; }
.seq-stage { height: clamp(320px, 46vw, 600px); }
.seq-stage .stage-disc { width: min(78%, 74vh, 640px); }
.seq-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.seq-card { border-radius: var(--radius); padding: clamp(20px, 2vw, 28px); display: grid; gap: 8px; align-content: start; box-shadow: 0 26px 40px -28px rgba(15, 46, 99, .55); }
.seq-card-yellow { background: var(--yellow); color: var(--blue); }
.seq-card-blue { background: var(--blue); color: var(--paper); }
.seq-card-white { background: var(--white); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--line), 0 26px 40px -28px rgba(15, 46, 99, .55); }
.seq-card-kicker { font: 700 11.5px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.seq-card-blue .seq-card-kicker { color: var(--yellow); opacity: 1; }
.seq-card-title { font: 900 clamp(26px, 2.5vw, 38px)/1 var(--display); text-transform: uppercase; letter-spacing: .005em; }
.seq-card-body { font: 600 14.5px/1.45 var(--body); }
.seq-end { position: relative; display: grid; justify-items: center; gap: 22px; padding: clamp(28px, 4vw, 56px) 0 0; text-align: center; }
.seq-title { font-size: clamp(30px, 4.4vw, 68px); line-height: 1; max-width: 17ch; color: var(--blue); }
.seq-title > .sw2 { display: inline-block; font: inherit; letter-spacing: inherit; color: inherit; margin: 0; text-transform: inherit; }
.seq-food { display: none; }
@media (max-width: 900px) { .seq-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .seq-cards { grid-template-columns: 1fr; } }

.seq.is-live { height: 640vh; padding: 0; margin-top: clamp(24px, 4vw, 56px); }
.seq.is-live .seq-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: block; }
.seq.is-live .seq-stage { position: absolute; inset: 0; height: auto; }
/* The disc grows in as the box rises, and its rays turn with the scroll */
.seq.is-live .stage-disc { scale: calc(.5 + min(var(--p, 0) * 5, 1) * .5); rotate: calc(var(--p, 0) * 160deg); }
.seq.is-live .seq-cards { position: absolute; inset: 0; display: block; pointer-events: none; }
.seq.is-live .seq-card { position: absolute; top: 50%; width: min(320px, 26vw); visibility: hidden; will-change: transform; }
.seq.is-live .seq-card[data-side="left"] { left: var(--pad); }
.seq.is-live .seq-card[data-side="right"] { right: var(--pad); }
.seq.is-live .seq-end { position: absolute; left: 0; right: 0; bottom: max(40px, 8vh); padding: 0 var(--pad); pointer-events: none; }
.seq.is-live .seq-end .pill { pointer-events: auto; }
/* The closing title: each word springs up from the middle of the line, then the button and the food land */
.seq.is-live .sw2 { opacity: 0; transform: translate(calc(var(--o) * 60%), 150%) scale(0); transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 39ms), opacity .35s ease calc(var(--i) * 39ms); }
.seq.is-live .seq-end.is-on .sw2 { opacity: 1; transform: none; }
.seq.is-live .seq-end .pill { opacity: 0; translate: 0 40px; transition: opacity .4s ease, translate .8s cubic-bezier(.34, 1.56, .64, 1); }
.seq.is-live .seq-end.is-on .pill { opacity: 1; translate: 0 0; transition-delay: .35s; }
.seq.is-live .seq-food { display: block; position: absolute; width: clamp(110px, 13vw, 210px); max-width: none; filter: drop-shadow(0 18px 18px rgba(15, 46, 99, .3)); opacity: 0; transition: opacity .25s ease, transform 1s cubic-bezier(.34, 1.56, .64, 1); }
.seq-food-1 { left: 6%; bottom: 18%; transform: translate(75%, 80%) scale(.5) rotate(-140deg); }
.seq-food-2 { right: 6%; bottom: 22%; transform: translate(-50%, 90%) scale(.5) rotate(40deg); }
.seq-food-3 { left: 14%; bottom: -14%; transform: translate(50%, 75%) scale(.5) rotate(-75deg); filter: blur(2px) drop-shadow(0 18px 18px rgba(15, 46, 99, .3)) !important; }
.seq-food-4 { right: 13%; bottom: -16%; transform: translate(-50%, 50%) scale(.5) rotate(-75deg); filter: blur(3px) drop-shadow(0 18px 18px rgba(15, 46, 99, .3)) !important; }
.seq-end.is-on .seq-food { opacity: 1; }
.seq-end.is-on .seq-food-1 { transform: rotate(-12deg); transition-delay: .08s; }
.seq-end.is-on .seq-food-2 { transform: rotate(-6deg); transition-delay: .08s; }
.seq-end.is-on .seq-food-3 { transform: rotate(8deg); transition-delay: .16s; transition-duration: .25s, 1.15s; }
.seq-end.is-on .seq-food-4 { transform: rotate(-23deg); transition-delay: .16s; transition-duration: .25s, 1.15s; }
@media (max-width: 720px) {
  .seq.is-live .seq-card { left: 0 !important; right: 0 !important; margin: 0 auto; width: min(320px, 84vw); }
  .seq.is-live .seq-food { width: 28vw; }
  .seq-food-1 { left: -4%; bottom: 62%; } .seq-food-2 { right: -4%; bottom: 66%; }
}

/* ---------- Two feature cards, each with a plate turning on the scroll ---------- */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feature { position: relative; display: block; border-radius: var(--radius); min-height: clamp(220px, 21vw, 290px); padding: clamp(22px, 2.6vw, 36px); text-decoration: none; }
.feature-text { position: relative; z-index: 2; display: grid; gap: 10px; justify-items: start; max-width: 56%; }
.feature-kicker { font-weight: 900; font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .04em; }
.feature-title { font-weight: 900; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.04; letter-spacing: 0; }
.feature-meta { font: 600 13px/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }
.feature .pill { margin-top: 8px; }
.feature-blue { background: var(--blue); color: var(--paper); }
.feature-blue .feature-kicker { color: var(--yellow); }
.feature-yellow { background: var(--yellow); color: var(--blue); }
.feature-disc { position: absolute; right: -4%; top: 50%; width: 46%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; display: grid; place-items: center; }
.feature-blue .feature-disc { background: radial-gradient(circle, var(--blue-3) 0 58%, transparent 59%); }
.feature-yellow .feature-disc { background: radial-gradient(circle, var(--yellow-3) 0 58%, transparent 59%); }
.feature-disc img { width: 118%; max-width: none; filter: drop-shadow(0 18px 20px rgba(15, 46, 99, .35)); }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .feature-text { max-width: 62%; } .feature-disc { width: 52%; right: -10%; } }

/* ---------- Inside the box: the six compartments as menu cards ---------- */
.items { list-style: none; margin: 0; padding: 0 0 0 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 22px; }
.item { --dur: .45s; position: relative; min-height: 132px; padding: 18px 44px 18px 104px; background: var(--yellow); color: var(--blue); border-radius: var(--radius); display: grid; align-items: center; outline-offset: 4px; cursor: default; }
/* Listed with the reveal's fade so neither rule drops the other's transitions */
.items .item { transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity .8s var(--ease) calc(var(--d, 0) * 90ms), translate .8s var(--ease) calc(var(--d, 0) * 90ms); }
.item::before { content: ""; position: absolute; left: -18px; top: 50%; width: 104px; height: 104px; translate: 0 -50%; border-radius: 50%; background: var(--blue); clip-path: inset(0 50% 0 0); transition: background-color var(--dur) var(--ease); }
.item-disc { position: absolute; z-index: 1; left: -12px; top: 50%; width: 104px; height: 104px; translate: 0 -50%; border-radius: 50%; background: var(--paper); box-shadow: 0 8px 18px -8px rgba(15, 46, 99, .55); display: grid; place-items: center; overflow: hidden; transition: rotate .7s var(--ease), scale var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.item-disc img.is-cutout { width: 92%; }
.item-disc img.is-photo { width: 100%; height: 100%; object-fit: cover; }
/* The name and the "why" share one spot: on hover the card turns blue, the name slides out and the why slides in */
.item-text, .item-why { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease); }
.item-text { display: grid; gap: 4px; padding-left: 4px; }
.item-name { font-weight: 900; font-size: 13.5px; line-height: 1.15; letter-spacing: .02em; }
.item-portion { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.item-protein { font: 800 17px/1.1 var(--display); margin-top: 4px; }
.item-why { padding-left: 4px; font: 500 12.5px/1.4 var(--body); color: var(--paper); opacity: 0; translate: 0 14px; pointer-events: none; }
.item-ico { position: absolute; right: 12px; bottom: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: var(--yellow); display: grid; place-items: center; font: 700 10px/1 var(--body); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), rotate var(--dur) var(--ease); }
.item:is(:hover, :focus-visible, :focus-within) { background: var(--blue); box-shadow: 0 18px 30px -20px rgba(15, 46, 99, .7); }
.item:is(:hover, :focus-visible, :focus-within)::before { background: var(--yellow); }
.item:is(:hover, :focus-visible, :focus-within) .item-disc { rotate: -16deg; scale: 1.06; box-shadow: 0 14px 26px -10px rgba(4, 14, 36, .6); }
.item:is(:hover, :focus-visible, :focus-within) .item-text { opacity: 0; translate: 0 -14px; }
.item:is(:hover, :focus-visible, :focus-within) .item-why { opacity: 1; translate: 0 0; }
.item:is(:hover, :focus-visible, :focus-within) .item-ico { background: var(--yellow); color: var(--blue); rotate: 360deg; }
/* Opening times: shared hours shown once with the branches as chips, and a call block beside them */
.hours { grid-column: span 2; background: var(--white); border-radius: var(--radius); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: stretch; box-shadow: inset 0 0 0 1.5px var(--line); }
.hours-main { display: grid; gap: 10px; align-content: center; padding: 4px 0 4px 6px; }
.hours-title { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 14px; letter-spacing: .06em; color: var(--blue); }
.hours-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); color: var(--blue); display: grid; place-items: center; flex: none; }
.hours-ico svg, .hours-call-ico svg { width: 18px; height: 18px; }
.hours-group { display: grid; gap: 2px; }
.hours-group + .hours-group { padding-top: 10px; border-top: 1px dashed var(--line); }
.hours-time { font: 900 clamp(20px, 1.9vw, 26px)/1.1 var(--display); text-transform: uppercase; color: var(--blue); }
.hours-days { font: 700 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hours-branches { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hours-branches li { padding: 5px 11px; border-radius: 999px; background: var(--paper-2); font: 700 12px/1.2 var(--body); color: var(--blue); }
.hours-call { display: grid; align-content: center; justify-items: start; gap: 4px; min-width: 190px; padding: 16px 18px; border-radius: 14px; background: var(--blue); color: var(--paper); text-decoration: none; transition: background-color .25s ease; }
.hours-call:hover { background: var(--blue-2); }
.hours-call-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--yellow); color: var(--blue); display: grid; place-items: center; margin-bottom: 8px; transition: rotate .4s var(--ease); }
.hours-call:hover .hours-call-ico { rotate: -14deg; }
.hours-call-label { font: 700 11px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--on-blue-muted); }
.hours-call b { font: 900 18px/1.1 var(--display); letter-spacing: .01em; white-space: nowrap; }
@media (max-width: 620px) { .hours { grid-template-columns: 1fr; } .hours-call { min-width: 0; } }
@media (max-width: 1120px) { .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hours { grid-column: span 2; } }
@media (max-width: 620px) { .items { grid-template-columns: 1fr; } .hours { grid-column: auto; } }

/* ---------- How it's made, in the hand-drawn style of the client's posters ----------
   The two plates with handwritten notes and sketched arrows (a switch between them), the mascots with the three
   pillars as notes around them, and the long-table drawing on a yellow panel. */
.hand { font-family: "Caveat", "Segoe Print", cursive; font-weight: 600; text-transform: none; letter-spacing: 0; }
.how-head { display: grid; justify-items: center; text-align: center; gap: 14px; max-width: 820px; margin: 0 auto clamp(18px, 3vw, 40px); }
.how-kicker { font-size: clamp(22px, 2.2vw, 30px); line-height: 1; color: var(--blue); rotate: -3deg; padding: 0 10px; background: linear-gradient(transparent 58%, var(--yellow-3) 58% 92%, transparent 92%); }
.how-head h2 { max-width: none; }
.how-lede { max-width: 56ch; color: var(--ink-2); font-size: 16px; }

/* The switch: two big pills, each with the plate's name and its poster line */
.plate-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.plate-tabs button { display: grid; justify-items: start; gap: 0; padding: 10px 22px 8px; border-radius: 22px; border: 2px solid var(--blue); background: transparent; color: var(--blue); cursor: pointer; text-align: left; transition: background-color .3s ease, color .3s ease, transform .35s var(--ease); }
.plate-tabs button b { font: 900 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.plate-tabs button span { font-size: 18px; line-height: 1.1; opacity: .85; }
.plate-tabs button:hover { transform: translateY(-2px); }
.plate-tabs button[aria-selected="true"] { background: var(--blue); color: var(--paper); }
.plate-tabs button[aria-selected="true"] span { color: var(--yellow); opacity: 1; }

.plates { display: grid; }
.plate { grid-area: 1 / 1; margin: 0; }
.plate[hidden] { display: none; }
.plate-stage { position: relative; width: min(100%, 1120px); margin: 0 auto; aspect-ratio: 1000 / 620; }
.plate-photo { position: absolute; left: 50%; top: 50%; width: 54%; aspect-ratio: 1; translate: -50% -50%; }
.plate-photo img { width: 100%; height: 100%; filter: drop-shadow(0 26px 30px rgba(15, 46, 99, .28)); }
.pin { display: none; }
.plate-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.plate-arrows path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.plate-notes { list-style: none; margin: 0; padding: 0; }
.pn { position: absolute; width: 19%; display: grid; gap: 2px; }
.pn-r { width: 21%; }
.pn-n { display: none; }
.pn b { justify-self: start; width: fit-content; -webkit-box-decoration-break: clone; box-decoration-break: clone; font: 700 clamp(19px, 2vw, 28px)/1 "Caveat", "Segoe Print", cursive; color: var(--blue); padding: 0 4px; margin-left: -4px; background: linear-gradient(transparent 60%, var(--yellow-3) 60% 94%, transparent 94%); }
.pn span { font: 500 clamp(15px, 1.45vw, 20px)/1.15 "Caveat", "Segoe Print", cursive; color: var(--ink-2); }
.plate-foot { display: grid; justify-items: center; gap: 10px; margin-top: clamp(8px, 1.4vw, 18px); }
/* The brush banner under each plate, like the green stroke on the posters */
.plate-brush { font: 700 clamp(22px, 2.2vw, 30px)/1 "Caveat", "Segoe Print", cursive; color: var(--paper); padding: 14px 40px 16px; rotate: -2deg; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath fill='%23153d80' d='M14 18c40-9 98-8 150-10 70-3 146-6 222 2 9 1 12 8 6 13 6 6 8 14 2 19 6 6 4 16-6 18-58 9-120 11-182 12-62 1-124 4-184-3-10-1-14-9-8-15-6-6-8-14-2-19-6-5-5-14 2-17z'/%3E%3Cpath fill='%23153d80' opacity='.5' d='M6 30c3-2 7-1 6 2-1 4-6 4-6-2zm382 26c3-2 8 0 6 3-2 3-7 2-6-3z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.plate-per { font: 600 12.5px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* The mascots on a yellow sun, with the pillars as notes on either side */
.crew { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "g art m" "v art m"; align-items: center; gap: 12px clamp(16px, 3vw, 44px); margin-top: clamp(64px, 8vw, 120px); }
.crew-art { grid-area: art; position: relative; }
.crew-art::before { content: ""; position: absolute; left: 50%; top: 54%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--yellow); }
.crew-art img { position: relative; width: 100%; }
.crew-notes { display: contents; list-style: none; }
.crew-note { position: relative; display: grid; gap: 6px; align-content: start; }
.crew-grilled { grid-area: g; align-self: end; }
.crew-verified { grid-area: v; align-self: start; }
.crew-measured { grid-area: m; }
.crew-index { font: 600 11.5px/1 var(--body); letter-spacing: .12em; color: var(--muted); }
.crew-word { font: 900 clamp(28px, 3vw, 44px)/1 var(--display); text-transform: uppercase; color: var(--blue); }
.crew-note h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.05; color: var(--blue); }
.crew-note p { font-size: 14.5px; color: var(--ink-2); }
.crew-arrow { width: clamp(52px, 5vw, 76px); fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.crew-grilled .crew-arrow, .crew-verified .crew-arrow { justify-self: end; }
.crew-verified .crew-arrow { scale: 1 -1; }
.crew-measured .crew-arrow { scale: -1 1; order: -1; }

/* The long table: blue line drawing on a yellow panel, the story title under it */
.supper { margin: clamp(56px, 7vw, 104px) 0 0; border-radius: calc(var(--radius) + 8px); background: var(--yellow); padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 56px) clamp(28px, 3.6vw, 48px); display: grid; justify-items: center; gap: clamp(14px, 2vw, 24px); overflow: hidden; }
.supper img { width: min(100%, 1040px); }
.supper figcaption { display: grid; justify-items: center; gap: 4px; text-align: center; color: var(--blue); }
.supper figcaption b { font: 900 clamp(22px, 2.6vw, 38px)/1.05 var(--display); text-transform: uppercase; max-width: 22ch; }
.supper figcaption span { font-size: clamp(20px, 2vw, 28px); }

@media (max-width: 760px) {
  /* Phones: the plate full width with numbered pins, the notes as a numbered list under it */
  .plate-stage { aspect-ratio: auto; }
  .plate-photo { position: relative; left: auto; top: auto; translate: none; width: min(100%, 420px); margin: 0 auto; }
  .pin { display: grid; place-items: center; position: absolute; width: 24px; height: 24px; translate: -50% -50%; border-radius: 50%; background: var(--blue); color: var(--paper); font: 700 12px/1 var(--body); font-style: normal; box-shadow: 0 0 0 3px var(--paper); }
  .plate-arrows { display: none; }
  .plate-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 18px; }
  .pn, .pn-r { position: relative; left: auto !important; top: auto !important; width: auto; padding-left: 30px; }
  .pn-n { display: grid; place-items: center; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: var(--paper); font: 700 11px/1 var(--body); font-style: normal; }
  .crew { grid-template-columns: 1fr; grid-template-areas: "art" "g" "m" "v"; }
  .crew-art { width: min(100%, 460px); justify-self: center; }
  .crew-arrow { display: none; }
}

/* Motion: the plate spins in, then each arrow draws and its note lands; switching spins one plate out and the
   other in. The crew arrows draw as their note fades up. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .plate-photo img { transition: transform 1s var(--elastic-soft), opacity .4s ease; }
  .plate-arrows path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.33, 1, .68, 1); }
  .plate-arrows .sk-line { transition-delay: calc(.55s + var(--i) * 110ms); }
  .plate-arrows .sk-head { transition-duration: .2s; transition-delay: calc(1.02s + var(--i) * 110ms); }
  .pn { opacity: 0; transform: translateY(12px) rotate(-3deg); transition: opacity .45s ease, transform .7s var(--elastic-soft); transition-delay: calc(.6s + var(--i) * 110ms); }
  .plate-foot { opacity: 0; transform: translateY(16px); transition: opacity .5s ease 1.1s, transform .8s var(--elastic-soft) 1.1s; }
  .plates:not(.is-in) .plate-photo img, .plate:not(.is-on) .plate-photo img { transform: rotate(-110deg) scale(.6); opacity: 0; }
  .plate.is-off .plate-photo img { transform: rotate(120deg) scale(.7); opacity: 0; transition-duration: .5s, .35s; transition-timing-function: cubic-bezier(.55, 0, .7, .2), ease; }
  .plates.is-in .plate.is-on .plate-arrows path { stroke-dashoffset: 0; }
  .plates.is-in .plate.is-on .pn { opacity: 1; transform: none; }
  .plates.is-in .plate.is-on .plate-foot { opacity: 1; transform: none; }
  .plate.is-off .pn, .plate.is-off .plate-foot { transition-delay: 0s; transition-duration: .2s; }
  .plate.is-off .plate-arrows path { transition-delay: 0s; transition-duration: .2s; }
  .crew-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease calc(.4s + var(--d, 0) * 90ms); }
  .crew-note.is-in .crew-arrow path { stroke-dashoffset: 0; }
  .crew-art img { transition: transform 1s var(--elastic-soft); }
  .crew-art:not(.is-in) img { transform: translateY(40px) scale(.92); }
}


/* ---------- Your day, in the posters' hand ----------
   Left: the weight as a big number with a ruler, the activity levels as sticker cards with the chickens.
   Right: the answer drawn as a plate, the Power Box's share in yellow, the rest hatched, notes and arrows. */
.day-head { display: grid; justify-items: center; text-align: center; gap: 12px; max-width: 760px; margin: 0 auto clamp(26px, 3.6vw, 48px); }
.day-kicker { font-size: clamp(24px, 2.2vw, 32px); line-height: 1; color: var(--blue); rotate: -3deg; padding: 0 10px; background: linear-gradient(transparent 58%, var(--yellow-3) 58% 92%, transparent 92%); }
.day-head h2 { max-width: 20ch; }
.day-lede { max-width: 52ch; color: var(--ink-2); }
.day-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 60px); align-items: center; }

.calc { display: grid; gap: clamp(22px, 2.6vw, 32px); }
.calc-step { display: grid; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-label { display: flex; align-items: center; gap: 10px; padding: 0; font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.calc-label i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: var(--yellow); font: 900 13px/1 var(--display); font-style: normal; letter-spacing: 0; }

/* The weight: a big number between two round buttons, a drawn ruler under it */
.kg { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kg output { display: flex; align-items: baseline; gap: 6px; color: var(--blue); }
.kg output b { font: 900 clamp(56px, 6.4vw, 92px)/.9 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kg output small { font: 600 clamp(26px, 2.4vw, 34px)/1 "Caveat", "Segoe Print", cursive; }
.kg-btn { width: 54px; height: 54px; flex: none; border-radius: 50%; border: 2px solid var(--blue); background: var(--white); color: var(--blue); font: 700 28px/1 var(--body); cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .35s var(--elastic-soft); }
.kg-btn:hover { background: var(--blue); color: var(--paper); }
.kg-btn:active { transform: scale(.9); }
.ruler { --thumb: 34px; position: relative; padding-bottom: 26px; }
.ruler input { -webkit-appearance: none; appearance: none; position: relative; z-index: 2; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: grab; }
.ruler input:active { cursor: grabbing; }
.ruler input::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.ruler input::-moz-range-track { height: 44px; background: transparent; }
.ruler input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: 5px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--blue); box-shadow: 0 8px 16px -6px rgba(15, 46, 99, .6); transition: scale .25s var(--elastic-soft); }
.ruler input::-moz-range-thumb { width: var(--thumb); height: var(--thumb); box-sizing: border-box; border-radius: 50%; background: var(--yellow); border: 3px solid var(--blue); box-shadow: 0 8px 16px -6px rgba(15, 46, 99, .6); }
.ruler input:active::-webkit-slider-thumb { scale: 1.15; }
.ruler input:focus-visible { outline: none; }
.ruler input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--blue); }
.ruler input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--blue); }
/* The ruler: a hand line with a tick every 5 kg, a tall tick and number every 20, filled yellow up to the knob */
.ruler-ticks { position: absolute; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2); top: 22px; height: 2px; display: flex; justify-content: space-between; background: linear-gradient(90deg, var(--yellow) var(--fill, 35%), rgba(21, 61, 128, .25) var(--fill, 35%)); border-radius: 2px; }
.ruler-ticks i { position: relative; width: 2px; height: 10px; translate: 0 -4px; border-radius: 2px; background: rgba(21, 61, 128, .35); }
.ruler-ticks i.m { height: 18px; translate: 0 -8px; background: var(--blue); }
.ruler-ticks i.m::after { content: attr(data-kg); position: absolute; top: 26px; left: 50%; translate: -50% 0; font: 600 18px/1 "Caveat", "Segoe Print", cursive; color: var(--ink-2); }

/* Activity: sticker cards, each with its chicken in a yellow circle */
.acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.calc-step .act { position: relative; display: block; }
.act input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.act-card { display: grid; justify-items: center; text-align: center; gap: 4px; height: 100%; padding: 14px 10px 14px; border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 2px rgba(21, 61, 128, .18); color: var(--blue); transition: background-color .3s ease, box-shadow .3s ease, rotate .5s var(--elastic-soft), translate .3s var(--ease); }
.act-art { width: min(100%, 118px); aspect-ratio: 1; border-radius: 50%; margin-bottom: 6px; background: url("/assets/how/mascots.webp") var(--bx) var(--by) / var(--bs) auto no-repeat, var(--yellow-3); transition: transform .6s var(--elastic-soft); }
.act-card b { font: 800 14.5px/1.15 var(--body); }
.act-card small { font-size: 19px; line-height: 1; color: var(--ink-2); }
.act:hover .act-card { translate: 0 -3px; box-shadow: inset 0 0 0 2px var(--blue); }
.act input:checked + .act-card { background: var(--yellow); box-shadow: 0 18px 28px -18px rgba(15, 46, 99, .55); rotate: -1.5deg; }
.act:nth-child(2) input:checked + .act-card { rotate: 1.5deg; }
.act input:checked + .act-card .act-art { background-color: var(--paper); transform: scale(1.06) rotate(-4deg); }
.act input:checked + .act-card small { color: var(--blue); }
.act input:focus-visible + .act-card { outline: 3px solid var(--blue); outline-offset: 3px; }
.fine { font: 400 12px/1.5 var(--body); color: var(--muted); }

/* The answer: a drawn plate */
.answer { display: grid; justify-items: center; gap: 10px; }
.answer-stage { position: relative; width: min(100%, 600px); aspect-ratio: 560 / 460; }
.dayplate { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dp-rim { fill: var(--white); stroke: var(--blue); stroke-width: 3; }
.dp-rim-in { fill: none; stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; }
.dp-rest { stroke: var(--blue); stroke-width: 2; }
.dp-hatch { stroke: rgba(21, 61, 128, .3); stroke-width: 2.4; }
.dp-box { fill: none; stroke: var(--yellow); stroke-width: 146; stroke-dasharray: 0 100; transition: stroke-dasharray .9s var(--elastic-soft); }
.dp-middle { fill: var(--white); stroke: var(--blue); stroke-width: 2.4; }
.dp-arrows path { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: d .6s var(--elastic-soft); }
.dp-center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 2px; text-align: center; color: var(--blue); }
.dp-center b { font: 900 clamp(32px, 3.8vw, 52px)/.9 var(--display); letter-spacing: -.02em; }
.dp-center span { font-size: clamp(17px, 1.6vw, 22px); line-height: 1; }
.dn { position: absolute; display: grid; gap: 0; color: var(--blue); }
.dn .hand { font-size: clamp(19px, 1.9vw, 26px); line-height: 1; }
.dn b { font: 900 clamp(22px, 2.3vw, 32px)/1 var(--display); font-variant-numeric: tabular-nums; }
.dn-need { left: 0; top: 0; }
.dn-box { right: 0; top: 6%; text-align: right; justify-items: end; }
.dn-box b { color: var(--blue); background: linear-gradient(transparent 55%, var(--yellow) 55% 92%, transparent 92%); padding: 0 4px; }
.dn-left { left: 0; bottom: 4%; }
.day-brush { font: 700 clamp(22px, 2.2vw, 30px)/1 "Caveat", "Segoe Print", cursive; color: var(--paper); padding: 14px 40px 16px; rotate: -2deg; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath fill='%23153d80' d='M14 18c40-9 98-8 150-10 70-3 146-6 222 2 9 1 12 8 6 13 6 6 8 14 2 19 6 6 4 16-6 18-58 9-120 11-182 12-62 1-124 4-184-3-10-1-14-9-8-15-6-6-8-14-2-19-6-5-5-14 2-17z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; text-align: center; }
.day-text { max-width: 44ch; text-align: center; font-size: 14.5px; color: var(--ink-2); }

@media (max-width: 900px) {
  .day-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .acts { gap: 8px; }
  .act-card { padding: 10px 6px 12px; border-radius: 18px; }
  .act-card b { font-size: 12.5px; }
  .kg-btn { width: 46px; height: 46px; }
  .dn .hand { font-size: 16px; }
  .dn b { font-size: 19px; }
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-list { display: grid; gap: 10px; }
.faq-list details { background: var(--white); border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .25s ease, box-shadow .25s ease; }
.faq-list details[open] { background: var(--yellow); box-shadow: none; }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 16px 16px 22px; font: 700 clamp(15px, 1.3vw, 17px)/1.3 var(--body); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: var(--yellow); display: grid; place-items: center; font: 500 20px/1 var(--body); transition: rotate .35s var(--ease); }
.faq-list details[open] summary::after { rotate: 45deg; }
.faq-list details p { padding: 0 22px 20px; color: var(--ink-2); max-width: 62ch; }

/* ---------- Where to get it: one blue panel, a hand-drawn map with pins beside the words and the branches ---------- */
.find-panel { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(24px, 4vw, 60px); border-radius: calc(var(--radius) + 8px); background: var(--blue); color: var(--paper); overflow: hidden; isolation: isolate; }
.find-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* The map: paper line work on the blue, yellow pins */
.find-map { margin: 0; align-self: stretch; display: grid; place-items: center; }
.map { width: 100%; max-height: 640px; overflow: visible; }
.map path, .map circle { fill: none; stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round; }
.map-land { fill: rgba(246, 243, 235, .07) !important; stroke: none !important; }
.map-coast { stroke-width: 3; }
.map-shore { stroke-width: 1.4; opacity: .4; stroke-dasharray: 2 7; }
.map-wave { stroke-width: 2; opacity: .35; }
.map-peak { stroke-width: 2; opacity: .55; }
.map-road { stroke: var(--yellow) !important; stroke-width: 3.2; stroke-dasharray: 9 9; }
.map-road-mask { stroke: #fff !important; stroke-width: 26; }
.map-label { font: 600 22px "Caveat", "Segoe Print", cursive; fill: var(--paper); opacity: .7; }
.map-sea { opacity: .45; letter-spacing: .2em; }
.map-compass circle { stroke-width: 1.6; opacity: .6; }
.map-compass path { fill: var(--yellow); stroke: none; }
.map-compass text { font: 700 12px var(--body); fill: var(--paper); text-anchor: middle; }
.mpin { cursor: pointer; }
.pin-body { transform: scale(1.2); transition: transform .45s var(--elastic-soft); transform-origin: 0 0; }
.pin-body path { fill: var(--yellow); stroke: var(--blue-2); stroke-width: 2; }
.pin-body text { font: 900 14px var(--display); fill: var(--blue); text-anchor: middle; }
.pin-name { font: 700 24px "Caveat", "Segoe Print", cursive; fill: var(--paper); paint-order: stroke; stroke: var(--blue); stroke-width: 5px; transition: fill .3s ease; }
.mpin.is-active .pin-body { transform: scale(1.55); }
.mpin.is-active .pin-name { fill: var(--yellow); }
.mpin.is-active .pin-body path { fill: var(--paper); }

/* The words and the branch list */
.find-side { display: grid; gap: 14px; justify-items: start; }
.find-kicker { font-size: clamp(24px, 2.2vw, 32px); line-height: 1; color: var(--yellow); rotate: -3deg; }
.find-side h2 { font-size: clamp(30px, 3.8vw, 54px); color: var(--paper); max-width: 14ch; }
.find-body { display: grid; gap: 10px; color: var(--on-blue-muted); max-width: 52ch; }
.spots { list-style: none; margin: 10px 0 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.spot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 14px 14px 12px; border-radius: 16px; background: rgba(246, 243, 235, .07); box-shadow: inset 0 0 0 1.5px rgba(246, 243, 235, .14); cursor: pointer; outline-offset: 3px; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, rotate .45s var(--elastic-soft), scale .45s var(--elastic-soft); }
.spot:focus-visible { outline-color: var(--yellow); }
.spot-no { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--blue); font: 900 14px/1 var(--display); }
.spot-main { display: grid; gap: 3px; min-width: 0; }
.spot-name { font: 900 clamp(18px, 1.6vw, 22px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.spot-area { font-size: 13.5px; line-height: 1.4; color: var(--on-blue-muted); }
.spot-hours { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--body); color: var(--on-blue-muted); }
.spot svg { width: 15px; height: 15px; flex: none; }
.spot-acts { display: flex; align-items: center; gap: 8px; }
.spot-acts a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; text-decoration: none; font: 700 12.5px/1 var(--body); letter-spacing: .03em; white-space: nowrap; transition: background-color .25s ease, color .25s ease, transform .3s var(--ease); }
.spot-call { padding: 0 16px; background: var(--yellow); color: var(--blue); }
.spot-dir { width: 44px; border: 1.5px solid rgba(246, 243, 235, .5); color: var(--paper); }
.spot-dir:hover { transform: rotate(45deg); }
.spot-call:hover { transform: translateY(-2px); }
/* The branch being pointed at turns yellow, like a sticker slapped on */
.spot.is-active { background: var(--yellow); color: var(--blue); box-shadow: 0 18px 30px -20px rgba(4, 14, 36, .8); rotate: -.8deg; scale: 1.015; }
.spot.is-active .spot-area, .spot.is-active .spot-hours { color: var(--ink-2); }
.spot.is-active .spot-no { background: var(--blue); color: var(--yellow); }
.spot.is-active .spot-call { background: var(--blue); color: var(--paper); }
.spot.is-active .spot-dir { border-color: var(--blue); color: var(--blue); }
.find .order-links { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 960px) {
  .find-panel { grid-template-columns: 1fr; }
  .find-map { order: 2; }
  .map { max-height: 460px; }
}
@media (max-width: 560px) {
  .find-panel { padding: 22px 16px 26px; }
  .spot { grid-template-columns: auto minmax(0, 1fr); }
  .spot-acts { grid-column: 1 / -1; }
  .spot-call { flex: 1; }
}

/* The road draws itself down the coast and over the hills, then the pins drop in one by one */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .map-road-mask { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1) .3s; }
  .find-panel.is-in .map-road-mask { stroke-dashoffset: 0; }
  .mpin > * { opacity: 0; translate: 0 -40px; transition: opacity .3s ease, translate .8s var(--elastic); transition-delay: calc(.9s + var(--i) * 140ms); }
  .find-panel.is-in .mpin > * { opacity: 1; translate: 0 0; }
}

/* ---------- Footer: a full-width blue panel, rounded on top, with the brand, three link columns, a marquee and a bottom bar ---------- */
.foot { margin-top: clamp(64px, 8vw, 110px); padding: 0; }
.foot-panel { position: relative; overflow: hidden; background: var(--blue); color: var(--paper); border-radius: clamp(36px, 4.4vw, 60px) clamp(36px, 4.4vw, 60px) 0 0; padding: clamp(36px, 5vw, 72px) var(--pad) calc(22px + env(safe-area-inset-bottom, 0px)); }
.foot-top { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px clamp(24px, 3vw, 48px); }
.foot-brand { display: grid; gap: 14px; justify-items: start; align-content: start; }
.foot .brand img { height: 72px; }
.foot-tag { font: 900 clamp(18px, 1.7vw, 24px)/1.15 var(--display); text-transform: uppercase; color: var(--yellow); margin-top: 6px; }
.foot-about { font-size: 14.5px; color: var(--on-blue-muted); max-width: 34ch; }
.foot-brand .pill { margin-top: 6px; }
.foot-col { display: grid; gap: 12px; align-content: start; }
.foot-h { font: 700 11.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); margin-bottom: 4px; }
.foot-col a, .foot-col span { font: 600 15px/1.3 var(--body); color: var(--paper); text-decoration: none; justify-self: start; }
.foot-col a { background: linear-gradient(var(--yellow), var(--yellow)) left bottom / 0 2px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ease), color .2s ease; }
.foot-col a:hover { color: var(--yellow); background-size: 100% 2px; }
.foot-contact { display: inline-flex; align-items: center; gap: 10px; background: none !important; padding: 0 !important; }
.foot-contact svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(246, 243, 235, .1); color: var(--yellow); flex: none; transition: background-color .2s ease, color .2s ease; }
.foot-contact:hover svg { background: var(--yellow); color: var(--blue); }
.foot-social { display: flex; gap: 8px; margin-top: 4px; }
.foot-social a { width: 38px; height: 38px; padding: 0 !important; border-radius: 50%; background: rgba(246, 243, 235, .1) !important; color: var(--paper); display: grid; place-items: center; transition: background-color .2s ease, color .2s ease; }
.foot-social a:hover { background: var(--yellow) !important; color: var(--blue); }
.foot-social svg { width: 18px; height: 18px; }
/* A slow marquee of the three promises, alternating outlined and solid, with food swaying between the words */
.foot-marquee { position: relative; margin: clamp(32px, 4.4vw, 60px) calc(var(--pad) * -1) 0; padding: clamp(10px, 1.4vw, 18px) 0; border-block: 1px solid rgba(246, 243, 235, .14); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.foot-track { display: flex; align-items: center; width: max-content; animation: marquee 32s linear infinite; }
.foot-marquee:hover .foot-track { animation-play-state: paused; }
@keyframes marquee { to { translate: -50% 0; } }
.fm-word { font: 900 clamp(40px, 7vw, 112px)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(246, 243, 235, .55); padding: 0 .28em; }
.fm-word.is-solid { color: var(--yellow); -webkit-text-stroke: 0; }
.fm-food { height: clamp(48px, 7.5vw, 120px); width: auto; margin: 0 .3em; filter: drop-shadow(0 10px 14px rgba(4, 14, 36, .45)); animation: fm-sway 3.6s ease-in-out infinite alternate; }
.fm-food:nth-of-type(2n) { animation-delay: -1.8s; }
@keyframes fm-sway { from { rotate: -12deg; translate: 0 4px; } to { rotate: 12deg; translate: 0 -4px; } }
.foot-bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(246, 243, 235, .16); }
.foot-bottom p { font-size: 12.5px; color: var(--on-blue-muted); max-width: 70ch; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.foot-legal a { font: 700 11.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); text-decoration: none; }
.foot-legal a:hover { color: var(--yellow); }
/* Developer credit: the AiFirelab mascot in yellow with blue eyes; it hops when pointed at */
.foot-credit { --lp-accent: var(--blue); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--on-blue-muted); text-decoration: none; font: 600 12.5px/1 var(--body); }
.foot-credit b { font: 800 13px/1 var(--display); letter-spacing: .02em; color: var(--paper); transition: color .25s ease; }
.foot-credit-mark { flex: none; color: var(--yellow); transition: translate .35s var(--elastic-soft); animation: mascot-blink 5s steps(1) infinite; }
/* Now and then the mascot blinks: its eyes (drawn in --lp-accent) briefly take the body colour */
@property --lp-accent { syntax: "<color>"; inherits: true; initial-value: #153d80; }
@keyframes mascot-blink { 0%, 93%, 97%, 100% { --lp-accent: var(--blue); } 94%, 96% { --lp-accent: var(--yellow); } }
.foot-credit:hover b { color: var(--yellow); }
.foot-credit:hover .foot-credit-mark { translate: 0 -4px; }
.foot-up { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--blue); transition: translate .3s var(--ease), background-color .2s ease; }
.foot-up:hover { translate: 0 -4px; }
.foot-up svg { width: 20px; height: 20px; }
@media (max-width: 960px) { .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-col:last-child { grid-column: 1 / -1; } .foot-legal { margin-left: 0; } }
@media (max-width: 820px) { .foot-inner { grid-template-columns: 1fr; justify-items: center; } }

/* Legal pages */
.legal { padding: clamp(32px, 5vw, 64px) var(--pad) 40px; max-width: 860px; display: grid; gap: 16px; }
.legal h1 { font: 900 clamp(36px, 6vw, 64px)/1 var(--display); text-transform: uppercase; }
.legal h2 { font-size: clamp(20px, 2vw, 26px); margin-top: 18px; }
.legal p, .legal li { color: var(--ink-2); max-width: 65ch; }
.legal .draft { font: 500 12px/1.5 var(--body); background: var(--yellow); padding: 8px 14px; border-radius: 999px; justify-self: start; }
.legal a { color: var(--blue); }

/* Bottom bar on phones: the two actions, like the one in the header on wider screens */
.order-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; gap: 8px; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: var(--paper); box-shadow: 0 -10px 30px -18px rgba(21, 61, 128, .5); }
.order-bar .pill { flex: 1 1 0; min-width: 0; justify-content: space-between; gap: 8px; min-height: 48px; padding-left: 16px; font-size: 11px; letter-spacing: .06em; }
.order-bar .pill span { overflow: hidden; text-overflow: ellipsis; }
.order-bar .pill-ico { width: 34px; height: 34px; }
@media (max-width: 720px) {
  .order-bar { display: flex; }
  .foot-panel { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Reveal on scroll: fade and rise, staggered by --d inside a group */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; translate: 0 28px; transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
  .reveal.is-in { opacity: 1; translate: 0 0; }
}
/* Cutouts that the script moves with the scroll */
[data-speed], [data-spin] { will-change: translate, rotate; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- You scanned the box: the lab labels, redrawn ----------
   A paper label in blue ink with a torn edge, a yellow highlighter behind each % RDA, a turning "lab verified" stamp,
   and handwritten notes either side with arrows to the rows they're about. Switch the meal, and whole meal or part. */
.labels-head { display: grid; justify-items: center; text-align: center; gap: 12px; max-width: 760px; margin: 0 auto clamp(20px, 3vw, 36px); }
.labels-kicker { font-size: clamp(24px, 2.2vw, 32px); line-height: 1; color: var(--blue); rotate: -3deg; padding: 0 10px; background: linear-gradient(transparent 58%, var(--yellow-3) 58% 92%, transparent 92%); }
.labels-head h2 { max-width: 18ch; }
.labels-lede { max-width: 56ch; color: var(--ink-2); }

.labels-switch { display: grid; justify-items: center; gap: 14px; margin-bottom: clamp(26px, 4vw, 54px); }
.meal-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.meal-btn { display: inline-flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px; border-radius: 999px; border: 2px solid var(--blue); background: var(--white); color: var(--blue); cursor: pointer; text-align: left; transition: background-color .25s ease, color .25s ease, transform .35s var(--elastic-soft); }
.meal-btn img { width: 52px; height: 52px; border-radius: 50%; transition: rotate .6s var(--elastic-soft); }
.meal-btn span { display: grid; gap: 1px; }
.meal-btn b { font: 900 15px/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.meal-btn small { font-size: 18px; line-height: 1; opacity: .85; }
.meal-btn:hover { transform: translateY(-2px); }
.meal-btn[aria-pressed="true"] { background: var(--blue); color: var(--paper); }
.meal-btn[aria-pressed="true"] img { rotate: 120deg; }
.meal-btn[aria-pressed="true"] small { color: var(--yellow); opacity: 1; }
.part-pick { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: rgba(21, 61, 128, .07); box-shadow: inset 0 0 0 1.5px rgba(21, 61, 128, .14); }
.part-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--blue); font: 700 12.5px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.part-btn:hover { background: rgba(21, 61, 128, .08); }
.part-btn[aria-pressed="true"] { background: var(--yellow); }

.nl-stage { display: grid; }
.nl-wrap { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: stretch; }
.nl-wrap[hidden] { display: none; }
.nl-notes { list-style: none; margin: 0; padding: 70px 0; display: flex; flex-direction: column; justify-content: space-around; gap: 40px; }
.nl-notes-l { align-items: flex-end; text-align: right; }
.nl-notes-r { align-items: flex-start; }
.nl-note { display: grid; gap: 2px; max-width: 15em; }
.nl-note b { justify-self: inherit; width: fit-content; font: 700 clamp(22px, 2.1vw, 30px)/1 "Caveat", "Segoe Print", cursive; color: var(--blue); padding: 0 4px; background: linear-gradient(transparent 58%, var(--yellow-3) 58% 94%, transparent 94%); }
.nl-notes-l .nl-note b { justify-self: end; }
.nl-note span { font: 500 clamp(16px, 1.5vw, 20px)/1.15 "Caveat", "Segoe Print", cursive; color: var(--ink-2); }
.nl-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nl-arrows path { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* The label: paper, blue ink, rules like the lab's, a torn bottom edge */
.nl { position: relative; margin: 0; rotate: -1.5deg; filter: drop-shadow(0 26px 30px rgba(15, 46, 99, .22)); }
.nl-paper { background: var(--white); color: var(--blue); padding: 20px 24px 30px; border-radius: 6px 6px 0 0; box-shadow: inset 0 0 0 3px var(--blue); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x; }
.nl-title { font: 900 clamp(30px, 3.2vw, 44px)/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; padding-bottom: 8px; border-bottom: 8px solid var(--blue); }
.nl-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 0; border-bottom: 1.5px solid currentColor; font: 600 13px/1.3 var(--body); color: var(--ink-2); }
.nl-meta b { color: var(--blue); }
.nl-cal { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 8px 0 10px; border-bottom: 5px solid var(--blue); }
.nl-cal > span:first-child { font: 800 15px/1 var(--body); }
.nl-cal b { font: 900 clamp(34px, 3.4vw, 46px)/.9 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nl-cal small { font: 700 14px/1 var(--body); }
.nl-fatkcal { margin-left: auto; font: 600 12.5px/1 var(--body); color: var(--ink-2); }
.nl-table { width: 100%; border-collapse: collapse; font: 500 14px/1.25 var(--body); }
.nl-table thead th { padding: 6px 0; font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; }
.nl-table thead th:last-child, .nl-table td { text-align: right; }
.nl-table th[scope="row"] { font-weight: 500; text-align: left; padding: 7px 0; }
.nl-table th b { font-weight: 700; font-variant-numeric: tabular-nums; }
.nl-row > * { border-top: 1px solid rgba(21, 61, 128, .3); }
.nl-row.is-main > * { border-top: 2.5px solid var(--blue); }
.nl-row.is-main th[scope="row"] { font-weight: 800; }
.nl-row.is-sub th[scope="row"] { padding-left: 16px; }
.nl-row td { position: relative; width: 104px; }
.nl-row td b { position: relative; font: 800 13.5px/1 var(--body); font-variant-numeric: tabular-nums; }
/* The highlighter: a skewed yellow swipe behind the % RDA, longer the bigger the share */
.nl-bar { position: absolute; right: -4px; top: 50%; height: 15px; width: min(100%, calc(var(--v) * 2.6 + 18px)); translate: 0 -50%; border-radius: 3px 8px 6px 2px; background: var(--yellow); opacity: .85; transform: skewX(-12deg); transform-origin: right; }
.nl-row[data-row="protein"] th[scope="row"] { font-size: 16px; }
.nl-vits { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 0; border-top: 5px solid var(--blue); font: 600 12.5px/1.3 var(--body); color: var(--ink-2); }
.nl-ingr { padding: 9px 0 6px; border-top: 1.5px solid currentColor; font: 500 13px/1.45 var(--body); color: var(--ink-2); }
.nl-ingr b, .nl-allergens b { color: var(--blue); font-weight: 800; }
.nl-allergens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 8px; font: 500 13px/1.3 var(--body); }
.nl-allergens span { padding: 4px 10px; border-radius: 999px; background: var(--yellow-3); color: var(--blue); font-weight: 700; font-size: 12px; }
.nl-foot { padding-top: 8px; border-top: 1.5px solid currentColor; font: italic 500 11.5px/1.4 var(--body); color: var(--muted); text-align: center; }

/* The stamp, slapped on the corner, slowly turning */
.nl-stamp { position: absolute; top: -40px; right: -44px; width: clamp(96px, 9vw, 122px); rotate: -14deg; }
.nl-stamp-ring { transform-origin: 60px 60px; animation: stamp-turn 40s linear infinite; }
.nl-stamp circle { fill: rgba(239, 192, 64, .92); stroke: var(--blue); stroke-width: 2.5; }
.nl-stamp circle + circle { fill: none; stroke-width: 1.6; stroke-dasharray: 3 4; }
.nl-stamp text { font: 800 9.6px var(--display); fill: var(--blue); }
.nl-stamp-tick { fill: none; stroke: var(--blue); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes stamp-turn { to { transform: rotate(1turn); } }

@media (max-width: 900px) {
  .nl-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .nl { width: min(100%, 470px); }
  .nl-notes { padding: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 18px; text-align: center; }
  .nl-notes-l, .nl-notes-r { align-items: center; text-align: center; }
  .nl-notes-l .nl-note b { justify-self: center; }
  .nl-note b { justify-self: center; font-size: 22px; }
  .nl-note span { font-size: 16px; }
  .nl-arrows { display: none; }
  /* Phones: the stamp moves to the bottom corner, clear of the title and the notes above */
  .nl-stamp { top: auto; bottom: -30px; right: -10px; width: 78px; }
  .nl-notes-r { margin-top: 46px; }
  .nl-foot { text-align: left; padding-right: 72px; }
}
@media (max-width: 520px) {
  .nl-paper { padding: 16px 16px 26px; }
  .nl-title { font-size: 26px; }
  .nl-row td { width: 84px; }
  .meal-btn { padding-right: 14px; }
  .meal-btn img { width: 44px; height: 44px; }
  .part-btn { padding: 0 12px; font-size: 11.5px; }
}

/* A label arrives like a sheet being slapped down; its notes land after it, then the arrows draw */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .nl-wrap.is-on .nl { animation: nl-in .75s var(--elastic-soft) both; }
  .nl-wrap.is-on .nl-bar { animation: nl-swipe .7s cubic-bezier(.33, 1, .68, 1) .35s both; }
  .nl-wrap.is-on .nl-note { animation: fade-up .6s var(--elastic-soft) both; animation-delay: calc(.3s + var(--i, 0) * 90ms); }
  .nl-arrows path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nl-draw .55s cubic-bezier(.33, 1, .68, 1) .6s forwards; }
}
@keyframes nl-in { from { opacity: 0; transform: translateY(46px) rotate(5deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nl-swipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes nl-draw { to { stroke-dashoffset: 0; } }
@keyframes fade-up { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Phones: comfortable tap targets and readable small print ---------- */
@media (max-width: 720px) {
  .foot-col { gap: 2px; }
  .foot-col a, .foot-col span { padding-block: 9px; }
  .foot-contact { min-height: 44px; }
  .foot-legal a { display: inline-block; padding-block: 12px; }
  .hero-fact-in > span { font-size: 11.5px; }
  /* Phones: the note sits in the gap above the ring, clear of the circles */
  .hero-note { left: 72%; top: -15%; font-size: 17px; white-space: nowrap; }
  .hero-note-arrow { width: 26px; }
  .hero-lede { font-size: 16px; }
  .hero-sample { font-size: 12px; }
  .item-ico { font-size: 11px; }
  .pn-n { font-size: 12px; }
}