/* Axiom Labs: the tiffin holds the centre while the page travels past it */
.food-turn{position:absolute;z-index:3;object-fit:contain;pointer-events:none;opacity:0;mix-blend-mode:screen;max-width:none;}
:root{
  --graphite:#1E1F22;
  --charcoal:#2A2B2F;
  --paper:#F3F3F0;
  --ink:#141518;
  --mist:#9A9CA3;
  --mist-on-paper:#5B5D64;
  --accent:#D0453F;--red-lift:#E4564C;
  --line-dark:rgba(243,243,240,.16);
  --line-light:rgba(20,21,24,.14);
  --display:"Archivo","Arial Black",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,Consolas,monospace;
  --display-width:125%;
  --display-weight:800;
  --body-weight:400;
  --body-strong:600;
  --mono-weight:400;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --nav-h:68px;
}
html{overflow-x:hidden;overflow-x:clip}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--graphite);color:var(--paper);font-family:var(--body);font-weight:var(--body-weight);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit}
b,strong{font-weight:var(--body-strong)}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;line-height:.96;letter-spacing:-.005em;text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;box-shadow:0 0 0 6px var(--paper)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.label{font-family:var(--mono);font-weight:var(--mono-weight);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.todo{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:none;background:#F6E2C6;color:#6B420C;padding:2px 7px;border-radius:3px;vertical-align:middle}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

.skip{position:fixed;left:16px;top:-60px;z-index:1002;display:flex;align-items:center;min-height:44px;background:var(--paper);color:var(--ink);padding:0 14px;font-family:var(--mono);font-size:12px;text-decoration:none;border-radius:2px;transition:top .3s var(--ease-out)}
.skip:focus{top:12px}

/* ---------- nav and side rail ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 clamp(18px,4vw,48px);color:var(--paper);transition:color .7s var(--ease-io)}
body[data-tone="paper"] .nav{color:var(--ink)}
.nav::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(20,21,24,.45),rgba(20,21,24,0))}
body[data-tone="paper"] .nav::before{background:linear-gradient(to bottom,rgba(243,243,240,.75),rgba(243,243,240,0))}
.brand{position:relative;display:flex;align-items:center;min-height:44px;text-decoration:none;color:inherit}
.brand svg{height:30px;width:auto}
.rail{position:fixed;right:clamp(12px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:26px;color:var(--paper);transition:color .7s var(--ease-io)}
body[data-tone="paper"] .rail{color:var(--ink)}
.rail a{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;opacity:.6;transition:opacity .3s var(--ease-out);padding:4px 0;width:44px;display:flex;align-items:center;margin-right:-13px}
.rail a:hover,.rail a[aria-current="true"]{opacity:1}
/* site.js toneRail(): ink over light, paper over dark, and a graphite chip where a link straddles both. At .85 a
   link that is not the current one still reads at 4.5:1 on the pale drawer (#DFE0DC) and where a drawer's hairline
   crosses it (.6 gave 4.3, .72 gave 3.7). The current one is underlined as well as brighter, so it is not told by
   brightness alone. */
.rail a[aria-current="true"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.rail a{opacity:.85;border-radius:2px;transition:opacity .3s var(--ease-out),color .3s var(--ease-out),background-color .3s var(--ease-out)}
.rail a[data-on="light"]{color:var(--ink)}
.rail a[data-on="dark"]{color:var(--paper)}
.rail a[data-on="mixed"]{color:var(--paper);background:rgba(30,31,34,.92);opacity:1}
@media (max-width:1099px){.rail{display:none}}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:12px 16px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:background-color .35s var(--ease-out),color .35s var(--ease-out),border-color .35s var(--ease-out);white-space:nowrap}
.btn-solid{background:var(--paper);color:var(--ink)}
.btn-solid:hover{background:#FFFFFF}
body[data-tone="paper"] .nav .btn-solid,.tone-paper .btn-solid{background:var(--ink);color:var(--paper)}
.btn-line{background:transparent;color:inherit;border-color:currentColor}
.btn-line:hover{border-color:var(--accent)}
.btn .dot{width:7px;height:7px}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- the film: a sticky stage behind a track that scrolls natively ---------- */
.hero{position:relative;background:var(--graphite)}
.stage{position:sticky;top:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;overflow:hidden;background:var(--ch-bg,var(--graphite));color:var(--paper)}
.track{position:relative;z-index:6}

/* faint blocks that drift up at a fifth of scroll speed, and five still lines */
.ghosts{position:absolute;left:0;top:0;width:100%;height:440vh;z-index:1;pointer-events:none;transform-origin:50% 50%;will-change:transform}
.ghosts b{position:absolute;display:block;background:rgba(0,0,0,.1)}
.lines{position:absolute;inset:0;z-index:1;pointer-events:none}
.lines i{position:absolute;top:0;bottom:0;width:1px;background:rgba(243,243,240,.07);transform-origin:50% 0;transform:scaleY(var(--ln,1))}
.lines i:nth-child(1){left:6.5vw}.lines i:nth-child(2){left:28.3vw}.lines i:nth-child(3){left:50vw}.lines i:nth-child(4){left:71.7vw}.lines i:nth-child(5){left:93.4vw}

/* the one-line headline that slides behind the tiffin */
.headline-track{position:absolute;left:0;right:0;top:30vh;height:40vh;z-index:2;overflow:hidden;pointer-events:none}
.headline-track span{position:absolute;left:7vw;top:0;width:86vw;font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;font-size:min(8.6vh,5.8vw);line-height:1.02;white-space:normal;letter-spacing:-.01em;will-change:transform,opacity}

/* ---------- beat one: the line, a phrase at a time on a blank screen ---------- */
.canvas{position:absolute;left:7vw;right:7vw;top:30vh;z-index:2;display:grid;transform:translateY(var(--lift,0vh));pointer-events:none}
/* Lines accumulate from top to bottom, with a cursor on the current line. */
.canvas .type{margin:0;font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;
  font-size:min(9vh,5.2vw);line-height:1.02;letter-spacing:-.02em;color:var(--paper);white-space:nowrap;
  opacity:var(--k,0);transition:color .35s var(--ease-out);will-change:opacity}
.canvas .type-row{display:block;min-height:1.16em}
.canvas .type-row.hot{color:var(--red-lift)}
.caret{display:inline-block;width:.07em;height:.74em;margin-left:.07em;background:currentColor;
  vertical-align:-.04em;opacity:var(--car,0);animation:blink 1.1s steps(1,end) 4 forwards}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){html:not(.film-forced) .caret{animation:none}}
.canvas .type-static{display:none;margin:0;font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);
  text-transform:uppercase;font-size:min(7vh,4.2vw);line-height:1.04;color:var(--paper)}
html.film-static .canvas .type,html:not(.js) .canvas .type{display:none}
html.film-static .canvas .type-static,html:not(.js) .canvas .type-static{display:block}

/* ---------- beat two: six cards of what is going wrong ---------- */
.card.pain{background:transparent;border:1px solid transparent;border-radius:3px;
  padding:clamp(9px,1vw,15px);display:grid;grid-template-rows:1fr auto;gap:clamp(6px,.8vw,12px);overflow:visible}
.card.pain .art{width:100%;height:100%;min-height:0;overflow:visible}
/* ---------- the problem animations, where one exists: the drawn icon steps aside for it ---------- */
/* Flat art cut off pure black by tools/make-film.js --clips. Twenty four frames in a row, six seconds,
   ending where it began, so a plain forward loop is seamless. */
/* Each clip runs on its own clock while it is on screen, not on the scroll: the owner wants them alive
   whether or not a hand is moving. Four seconds a cycle, and a negative delay per card so the six are
   out of phase with each other rather than marching in step. */
.clip{display:none;width:100%;height:100%;min-height:0;background-repeat:no-repeat;
  background-size:calc(var(--frames,24) * 100%) 100%;background-position:0 0;
  animation:clipreel 4s steps(var(--frames,24), jump-none) infinite;animation-play-state:paused}
.has-clip .clip{display:block}
.has-clip .icon{display:none}
:is(.intro-cards.live,.ch.lit) .has-clip .clip{animation-play-state:running}
.intro-cards .card:nth-child(1) .clip{animation-delay:-.0s}
.intro-cards .card:nth-child(2) .clip{animation-delay:-.7s}
.intro-cards .card:nth-child(3) .clip{animation-delay:-1.4s}
.intro-cards .card:nth-child(4) .clip{animation-delay:-2.1s}
.intro-cards .card:nth-child(5) .clip{animation-delay:-2.8s}
.intro-cards .card:nth-child(6) .clip{animation-delay:-3.5s}
@keyframes clipreel{from{background-position:0 0}to{background-position:100% 0}}
.card.pain .clip{height:100%}
.pain:not(.card) .clip{aspect-ratio:4/3;height:auto}

/* ---------- icons: a symbol everyone knows, drawn big, with one thing moving ---------- */
.icon{width:100%;height:100%;min-height:0;overflow:visible}
.icon .glyph{fill:var(--paper);fill-opacity:.82;stroke:none}
.icon :is(.ring,.hand,.ticks line){fill:none;stroke:var(--paper);stroke-opacity:.72;stroke-linecap:round;vector-effect:non-scaling-stroke}
.icon .ring{stroke-width:2.5}
.icon .ticks line{stroke-width:2;stroke-opacity:.45}
.icon .hand{stroke-width:3}
.icon .hand.minute{stroke:var(--accent);stroke-opacity:1}
.icon .pin{fill:var(--paper);fill-opacity:.72;stroke:none}
.icon .badge{fill:var(--accent);stroke:none}
.icon .num{font-family:var(--mono);font-size:15px;font-weight:400;fill:#fff;opacity:0}
/* one clock for the lot: the count steps, the hands run */
.icon :is(.n1,.n2,.n3){animation-duration:1.8s;animation-timing-function:steps(1,end);animation-iteration-count:infinite;animation-play-state:paused}
.icon :is(.hour,.minute){animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:paused}
:is(.intro-cards.live,.ch.lit) .icon :is(.n1,.n2,.n3,.hour,.minute){animation-play-state:running}
.icon .n1{animation-name:step1}
.icon .n2{animation-name:step2}
.icon .n3{animation-name:step3}
.icon .hour{animation-name:spin;animation-duration:7.2s;transform-origin:50px 50px;transform-box:view-box}
.icon .minute{animation-name:spin;animation-duration:1.8s;transform-origin:50px 50px;transform-box:view-box}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.icon .coin{fill:none;stroke:var(--paper);stroke-opacity:.72;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.icon .rm{font-family:var(--mono);font-size:15px;fill:var(--paper);fill-opacity:.72}
.icon .slice{fill:var(--accent);stroke:none;opacity:0}
.icon .star{fill:var(--paper);fill-opacity:.72;stroke:none}
.icon .star.last{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke}
.icon .week{fill:var(--paper);fill-opacity:.72;stroke:none}
.icon .week.out{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke;opacity:0}
.icon .room{fill:none;stroke:var(--paper);stroke-opacity:.72;stroke-width:2.5;vector-effect:non-scaling-stroke}
.icon .full circle{fill:var(--paper);fill-opacity:.72;stroke:none}
.icon .queue{fill:var(--accent);stroke:none;opacity:0}
/* one clock, 1.8s, for every card */
.icon :is(.cut1,.cut2,.last,.out1,.out2,.q1,.q2,.q3){animation-duration:1.8s;animation-iteration-count:infinite;animation-play-state:paused}
:is(.intro-cards.live,.ch.lit) .icon :is(.cut1,.cut2,.last,.out1,.out2,.q1,.q2,.q3){animation-play-state:running}
.icon :is(.cut1,.cut2){animation-name:coinaway;animation-timing-function:cubic-bezier(.3,0,.7,1)}
.icon .cut2{animation-delay:-.9s}
.icon .last{animation-name:drain;animation-timing-function:ease-out}
.icon :is(.out1,.out2){animation-name:emptyweek;animation-timing-function:ease-out}
.icon .out2{animation-delay:.25s}
.icon :is(.q1,.q2,.q3){animation-name:queue;animation-timing-function:var(--ease-out)}
.icon .q2{animation-delay:.3s}
.icon .q3{animation-delay:.6s}
@keyframes coinaway{0%,12%{opacity:1;transform:none}60%,100%{opacity:0;transform:translate(16px,-13px)}}
@keyframes drain{0%,25%{stroke-opacity:.25}55%,100%{stroke-opacity:1}}
@keyframes emptyweek{0%,20%{opacity:0}50%,100%{opacity:1}}
@keyframes queue{0%,30%{opacity:0;transform:translateX(14px)}60%,100%{opacity:1;transform:none}}
/* Loops stop by themselves (WCAG 2.2.2). A chapter's icon or clip plays for under five seconds each time the
   chapter lights, then holds its last frame: the badge on 99+, the slice gone, the star drained, the weeks
   empty, the queue waiting. Unlit, the animation is removed, so lighting the chapter again plays it again. */
.ch .pain .icon *,.ch .pain .clip{animation-iteration-count:2;animation-fill-mode:forwards}
.ch .pain .clip{animation-iteration-count:1}
.ch .pain .icon .hour{animation-iteration-count:.5}
.ch:not(.lit) .pain .icon *,.ch:not(.lit) .pain .clip{animation-name:none}

.card.pain .cap{margin:0;justify-self:start;font-family:var(--mono);font-size:clamp(8px,.72vw,10.5px);letter-spacing:.1em;text-transform:uppercase;color:var(--paper);line-height:1.3}
.card.pain .s,.pain .s{fill:none;stroke:var(--paper);stroke-opacity:.5;stroke-width:1.6;vector-effect:non-scaling-stroke}
.card.pain .hot,.pain .hot{fill:none;stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke}
.card.pain .dot,.pain .dot{fill:var(--accent);stroke:none}
.card.pain .n,.pain .n{font-family:var(--mono);font-size:10px;fill:var(--paper);opacity:0}
.card.pain .t,.pain .t{font-family:var(--mono);font-size:7px;fill:var(--mist)}
/* the loops: one clock of 1.8s, each card offset, all of it paused unless the collage is on screen */
.intro-cards .card.pain :is(.a1,.a2,.a3,.blink,.slide,.fade,.gone,.pop){animation-duration:1.8s;animation-iteration-count:infinite;animation-timing-function:steps(1,end);animation-play-state:paused}
.pain :is(.a1,.a2,.a3,.blink,.slide,.fade,.gone,.pop){animation-duration:1.8s;animation-iteration-count:infinite;animation-timing-function:steps(1,end);animation-play-state:paused}
.ch.lit .pain :is(.a1,.a2,.a3,.blink,.slide,.fade,.gone,.pop){animation-play-state:running}
.intro-cards.live .card.pain :is(.a1,.a2,.a3,.blink,.slide,.fade,.gone,.pop){animation-play-state:running}
.card.pain .a1,.pain .a1{animation-name:step1}
.card.pain .a2,.pain .a2{animation-name:step2}
.card.pain .a3,.pain .a3{animation-name:step3}
.card.pain .blink,.pain .blink{animation-name:blink;animation-timing-function:ease-in-out}
.card.pain .slide,.pain .slide{animation-name:shrink;animation-timing-function:ease-in-out;transform-origin:left center;transform-box:fill-box}
.card.pain :is(.fly1,.fly2),.pain :is(.fly1,.fly2){animation-name:fly;animation-timing-function:cubic-bezier(.3,0,.7,1);transform-box:fill-box}
.card.pain .fly2,.pain .fly2{animation-delay:-.9s}
.card.pain .fade,.pain .fade{animation-name:fadein;animation-timing-function:ease-out}
.card.pain .gone,.pain .gone{animation-name:hollow;animation-timing-function:ease-out}
.card.pain .pop,.pain .pop{animation-name:popout;animation-timing-function:ease-out}
.intro-cards .card.pain:nth-child(2) svg *{animation-delay:-.3s}
.intro-cards .card.pain:nth-child(3) svg *:not(.fly2){animation-delay:-.6s}
.intro-cards .card.pain:nth-child(4) svg *{animation-delay:-.9s}
.intro-cards .card.pain:nth-child(5) svg *{animation-delay:-1.2s}
.intro-cards .card.pain:nth-child(6) svg *{animation-delay:-1.5s}
@keyframes step1{0%,32%{opacity:1}33%,100%{opacity:0}}
@keyframes step2{0%,32%{opacity:0}33%,65%{opacity:1}66%,100%{opacity:0}}
@keyframes step3{0%,65%{opacity:0}66%,100%{opacity:1}}
@keyframes blink{0%,40%{opacity:.25}55%{opacity:1}70%,100%{opacity:.25}}
@keyframes shrink{0%,20%{transform:scaleX(1)}70%,100%{transform:scaleX(.62)}}
@keyframes fadein{0%,30%{opacity:0}60%,100%{opacity:1}}
@keyframes hollow{0%,25%{opacity:0}60%,100%{opacity:1}}
@keyframes popout{0%,45%{opacity:0;transform:translateY(-6px)}75%,100%{opacity:1;transform:none}}
@keyframes fly{0%{opacity:1;transform:none}50%,100%{opacity:0;transform:translate(34px,-26px) rotate(14deg)}}
@media (prefers-reduced-motion:reduce){html:not(.film-forced) .intro-cards.live .card.pain *{animation-play-state:paused}}
/* the gate: "My own products." sweeps across once, between the systems and the products */
.gate-track span{opacity:0}

/* card collages: into the tiffin at the start, out of it at the end */
.intro-cards,.outro-cards{position:absolute;inset:0;pointer-events:none}
.outro-cards{z-index:3}
/* the tiffin stills keep the lid in frame when a wide card crops them */
.intro-cards .card.top,.outro-cards .card:first-child{object-position:50% 12%}
.intro-cards{z-index:5}
.intro-cards .card,.outro-cards .card{position:absolute;left:0;top:0;width:10px;height:10px;object-fit:contain;opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
/* the film: a 16:9 box in the centre column. Its black backdrop is screened away, so the tiffin floats on the page colour. */
/* the six cards stretch as they are pulled in, and the middle flares as they land */
.intro-cards .card{filter:blur(calc(var(--wb,0) * 1px))}
.flash{display:none}

.see-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.55}

.chosen{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:7px;max-width:44ch}
.chosen li{display:flex;align-items:baseline;gap:10px;font-size:15.5px;line-height:1.4}
.chosen li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.9;transform:translateY(-2px)}
.chosen li.none{opacity:.6}
.chosen li.none::before{background:currentColor;opacity:.35}
.chosen .plus{order:2;margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--accent)}

/* ---------- the marketplace: eight closed drawers, one open at a time ---------- */
/* Forty seven cells shown at once is a wall, and every cell saying Concept made the label noise. The
   label now appears only when it says something other than Concept, and the columns open one at a time. */
.market-sec{--rule:rgba(20,21,24,.085);--rule-bold:rgba(20,21,24,.15)}
.market{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:40px;
  border-top:1px solid var(--rule-bold);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:28px 28px}
.market .col{border-bottom:1px solid var(--rule-bold)}
/* Motion reference: 21st.dev/@micka_design/components/accordion.
   Native details keep keyboard and no-JS behaviour; only the content has a small spring settle. */
@supports (interpolate-size:allow-keywords){
  .market .col{interpolate-size:allow-keywords}
  .market .col::details-content{height:0;overflow:clip;transition:height .48s cubic-bezier(.22,1,.36,1),content-visibility .48s allow-discrete}
  .market .col[open]::details-content{height:auto}
}
.market .col[open] .cells{animation:drawer-settle .44s both}
@keyframes drawer-settle{0%{opacity:0;transform:translateY(-8px)}65%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .market .col::details-content{transition:none}
  .market .col[open] .cells{animation:none}
}
.market .col-h{display:grid;grid-template-columns:minmax(210px,1.1fr) 2fr auto auto;align-items:baseline;gap:18px;
  padding:19px clamp(20px,5vw,86px) 19px clamp(20px,7vw,100px);cursor:pointer;list-style:none;
  transition:background .16s linear}
.market .col-h::-webkit-details-marker{display:none}
.market .col-h:hover{background:rgba(20,21,24,.035)}
.market .col-h:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;box-shadow:inset 0 0 0 5px var(--paper)}
.market .col-n{font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;
  font-size:clamp(16px,1.5vw,23px);line-height:1;letter-spacing:-.01em;color:var(--ink)}
.market .col-d{font-size:14.5px;line-height:1.4;color:var(--ink);opacity:.62}
.market .col-c{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);opacity:.5;white-space:nowrap}
.market .col-c b{font-weight:400;opacity:1}
/* the open and shut mark, drawn rather than a character so it sits on the grid */
.market .col-p{position:relative;width:14px;height:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;color:var(--accent);white-space:nowrap;text-align:right}
.market .col-p::before,.market .col-p::after{content:"";position:absolute;right:0;top:6px;width:13px;height:1.5px;
  background:var(--ink);opacity:.45;transition:transform .2s var(--ease-out)}
.market .col-p::after{transform:rotate(90deg)}
.market .col[open] .col-p::after{transform:rotate(0deg)}
.market .col-p[data-n]::before,.market .col-p[data-n]::after{display:none}
.market .col-p[data-n]{width:auto;opacity:1}
.market .col-p[data-n]::before{display:inline-block;position:static;content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px;transform:none;opacity:1}
.market .cells{margin:0;padding:0 clamp(20px,5vw,86px) 10px clamp(20px,7vw,100px);list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0 1px;background:rgba(20,21,24,.06)}
.market .cell{background:var(--paper);border-top:1px solid var(--rule-bold)}
.market .pickcell{display:grid;gap:6px;width:100%;height:100%;text-align:left;padding:15px 16px 17px;border:0;
  background:none;font:inherit;color:var(--ink);cursor:pointer;position:relative;transition:background .16s linear}
.market .pickcell:hover{background:rgba(20,21,24,.045)}
.market .pickcell:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;box-shadow:inset 0 0 0 5px var(--paper)}
.market .nm{font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;
  font-size:clamp(13px,1.02vw,15.5px);line-height:1.08;letter-spacing:-.005em;padding-right:22px}
.market .ln{font-size:13px;line-height:1.45;opacity:.72}
.market .mark{position:absolute;right:14px;top:15px;width:14px;height:14px;border:1px solid var(--rule-bold);border-radius:2px}
.market .pickcell[aria-pressed="true"]{background:var(--graphite);color:var(--paper)}
.market .pickcell[aria-pressed="true"] .nm{color:var(--paper)}
.market .pickcell[aria-pressed="true"] .ln{opacity:.9}
.market .pickcell[aria-pressed="true"] .mark{background:var(--paper);border-color:var(--paper)}
.market .pickcell[aria-pressed="true"] .mark::after{content:"";position:absolute;left:3px;top:4px;width:7px;height:4px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.market-cap{margin:22px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.market-cap .count{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.market-cap .over{opacity:0;transition:opacity .25s linear}
.market-cap .over::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
.market-note{margin:10px 0 0;font-size:15px;line-height:1.5;max-width:52ch;opacity:.8}
.market .aud{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.market-cap.full .over{opacity:1}
@media (max-width:1100px){.market .cells{grid-template-columns:repeat(2,1fr)}
  .market .col-h{grid-template-columns:1fr auto auto;gap:10px 14px}
  .market .col-d{grid-column:1/-1;order:3}}
@media (max-width:640px){.market{background-size:22px 22px}
  .market .cells{grid-template-columns:1fr;padding-left:20px;padding-right:20px}
  .market .col-h{padding-left:20px;padding-right:20px}
  .market .nm{font-size:15px}.market .ln{font-size:13.5px}}

/* ---------- the board: what else can be built, laid out on graph paper ---------- */
/* An engineer's notebook rather than a doodle: the page's own paper and ink, a ruled grid behind it,
   and every cell labelled Concept, because none of these has been built yet. */
.board-sec{--rule:rgba(20,21,24,.09);--rule-bold:rgba(20,21,24,.16)}
.board-sec .sec-head{position:relative;z-index:1}
.board{position:relative;margin-top:46px;display:grid;gap:0;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--rule-bold);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:26px 26px}
.board .col{border-right:1px solid var(--rule-bold);padding:0}
.board .col:last-child{border-right:0}
.board .col-h{margin:0;padding:16px 18px;border-bottom:1px solid var(--rule-bold);color:var(--ink);opacity:.62}
.board .cells{margin:0;padding:0;list-style:none;display:grid}
.board .cell{padding:18px;border-bottom:1px dashed var(--rule-bold)}
.board .cell:last-child{border-bottom:0}
.board .cell .tag{margin:0 0 10px;display:inline-block;border:1px solid var(--rule-bold);border-radius:2px;
  padding:3px 7px;color:var(--ink);opacity:.62}
.board .cell h4{margin:0 0 8px;font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);
  text-transform:uppercase;font-size:clamp(15px,1.28vw,20px);line-height:1.05;letter-spacing:-.005em;color:var(--ink)}
.board .cell p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink);opacity:.76}
@media (max-width:1024px){.board{grid-template-columns:repeat(2,1fr)}
  .board .col:nth-child(2n){border-right:0}
  .board .col:nth-child(-n+2){border-bottom:1px solid var(--rule-bold)}}
@media (max-width:640px){.board{grid-template-columns:1fr}
  .board .col{border-right:0;border-bottom:1px solid var(--rule-bold)}
  .board .col:last-child{border-bottom:0}
  .board .cell h4{font-size:17px}}

/* what it costs, in point form where the reading starts */
.costs{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-dark);max-width:52ch}
.costs .label{margin:0 0 12px;color:inherit;opacity:.55}
.costs ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.costs li{position:relative;padding-left:20px;font-size:16px;line-height:1.5;color:inherit;opacity:.88}
.costs li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.9}
.costs li b{font-weight:var(--body-strong)}
.costs .who-builds{margin:16px 0 0;font-size:16px;line-height:1.5;opacity:.88}
.costs .costs-more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:inherit;font:600 15px/1.4 var(--body);text-underline-offset:5px}
@media (max-width:720px){.costs li{font-size:15px}}

/* ---------- the terms, travelling behind the tiffin ---------- */
.terms{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;opacity:var(--terms,0);will-change:opacity}
.terms .band{position:absolute;left:0;right:10vw;display:flex;white-space:nowrap;will-change:transform}
.terms .band.b{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 92%,transparent 100%)}
.terms .band.a{top:15vh;justify-content:center;transform:translateX(calc(var(--tx,0) * 1vw))}
.terms .band.b{top:78vh;transform:translateX(calc(var(--tx,0) * 1%))}
.terms .band.a{font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);font-size:clamp(38px,7.2vw,108px);line-height:.92;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--paper);opacity:.52}
.terms .band.b{font-family:var(--mono);font-size:clamp(10px,1.05vw,14px);letter-spacing:.12em;
  text-transform:uppercase;color:#B4B6BC;opacity:1}
@media (max-width:720px){.terms .band{right:0}.terms .band.a{top:13vh;font-size:8.2vw;letter-spacing:-.03em}.terms .band.b{top:74vh}.terms .band.b{font-size:10px;letter-spacing:.1em}}
.film{--fw:min(44vw,92vh);position:absolute;left:50%;top:50%;z-index:4;width:var(--fw);height:calc(var(--fw) * .5625);margin:calc(var(--fw) * -.28125) 0 0 calc(var(--fw) * -.5);opacity:0;mix-blend-mode:screen;pointer-events:none;transform-origin:50% 50%;will-change:transform;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at center,#000 84%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at center,#000 84%,transparent 100%)}
.film video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
/* the poster (closed tiffin) shows as soon as it loads; the film takes over in the same box */
.stage:is(.gl-ready,.gl-poster) .film{opacity:calc(var(--gl-o,1) * var(--in-o,1));animation:glin .8s var(--ease-io) backwards}
/* an interlude: a lone dish on black, its own small clip, screened onto the page like the film */
.dish-clip{display:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 86%,transparent 100%);mask-image:radial-gradient(closest-side,#000 86%,transparent 100%)}
/* two faces: the closed dish in front, the opened dish behind, turned like a coin */
.dish-turn{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.dish-turn .face{position:absolute;inset:0;display:block;width:100%;height:100%;background:#000;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dish-turn .face.back{transform:rotateY(180deg)}
/* the dish's line: slides out from behind it and rests underneath */
.dish-line{position:absolute;left:0;top:0;z-index:3;margin:0;max-width:30ch;font-size:18px;line-height:1.4;text-align:center;text-wrap:balance;color:var(--paper);opacity:0;pointer-events:none;will-change:transform,opacity}
/* the button over the dish: hover, tap or keyboard turns it */
.dish-hit{position:fixed;left:0;top:0;z-index:5;margin:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dish-hit:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.dish-hint{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-12px);white-space:nowrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);opacity:.74;pointer-events:none;transition:opacity .5s var(--ease-out)}
.dish-hit.seen .dish-hint{opacity:0}
html.film-static .dish-hit,html:not(.js) .dish-hit,body.hero-off .dish-hit{display:none}
/* once a chapter's dish is live, its line travels with the dish, so the caption stays for screen readers only */
/* ---------- the chapter explainer: what is going wrong, above the job's name ---------- */
.pain:not(.card){position:fixed;left:7vw;top:16vh;z-index:6;width:min(330px,25vw);display:grid;grid-template-columns:clamp(84px,7vw,110px) 1fr;gap:14px;align-items:center;opacity:var(--pk,0);transform:translateY(calc((1 - var(--pk,0)) * 10px));pointer-events:none;will-change:opacity,transform}
.pain:not(.card) .art{width:100%;height:auto;aspect-ratio:100/74;overflow:visible}
.pain:not(.card) .icon.art{aspect-ratio:1/1;width:82%}
.pain-line{margin:0;font-family:var(--mono);font-size:clamp(10px,.78vw,11.5px);line-height:1.5;letter-spacing:.04em;color:rgba(243,243,240,.82);text-shadow:0 0 7px rgba(20,21,24,.6),0 0 2px rgba(20,21,24,.8)}
body.hero-off .pain:not(.card),html.film-static .pain:not(.card){display:none}
@keyframes glin{from{opacity:0}}
.grain{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* loading readout under the film */
.film-load{position:absolute;left:50%;bottom:30px;z-index:8;display:flex;align-items:center;gap:10px;margin:0;transform:translateX(-50%);white-space:nowrap;color:rgba(243,243,240,.78);transition:opacity .6s var(--ease-out)}
.film-load .ring{flex:none;width:13px;height:13px}
.ring.spin{animation:spin 1.4s linear infinite}
.stage.gl-ready .ring.spin{animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.stage:is(.gl-ready,.gl-failed) .film-load{opacity:0}

/* ingredient labels */
.parts{position:absolute;inset:0;z-index:6;pointer-events:none}
.parts .part{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:0;white-space:nowrap;will-change:transform,opacity;padding:5px 8px;border-radius:2px;background:rgba(20,21,24,.78);color:var(--paper)}
.parts .part .dot{width:6px;height:6px}

/* fixed dock: the call to action, a progress pin and the chapter name */
.dock{position:fixed;left:7vw;top:81vh;z-index:40;display:grid;gap:14px;justify-items:start;transition:opacity .5s linear,visibility 0s}
.dock .pin{position:relative;width:17.3vw;height:1px;background:rgba(243,243,240,.15);margin-top:calc(11vh - 58px)}
.dock .pin i{position:absolute;left:0;top:0;width:2vw;height:2px;margin-top:-.5px;background:var(--paper);transform:translateX(var(--pin,0))}
.dock .hud{opacity:.72}
/* The dock is the film's own call to action and the outro brings its own, so they were
   sitting one above the other from s 10.5 to 10.9. The dock now hands over on outro-cta,
   which site.js sets when the outro's button has actually revealed. Not at outro-ui, which
   starts at 10.07 and would leave four tenths of a section with no call to action at all,
   and not on a hard coded scene time, because the reveal is a dwell trigger on the copy
   block and so moves with the viewport height. */
html.film-static .dock,html:not(.js) .dock,body.hero-off .dock,body.outro-cta .dock,body.film-end .dock{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .5s linear,visibility 0s linear .5s}
/* Hidden controls also leave the tab order (visibility), and come back without a delay. */
.nav-cta{transition:opacity .4s linear,visibility 0s}
html.js:not(.film-static) body:not(.hero-off):not(.film-end) .nav-cta{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s linear,visibility 0s linear .4s}
.brand,.rail{transition:opacity .5s linear,visibility 0s,color .7s var(--ease-io)}
body.outro-ui:not(.hero-off) :is(.brand,.rail),html.js:not(.film-static) body.intro-ui:not(.hero-off) .rail{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s linear,visibility 0s linear .5s,color .7s var(--ease-io)}

/* chapters live in the track and scroll at scroll speed */
.ch{position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.ch{height:105vh}.ch0{height:var(--ch0h,760vh)}
/* interlude chapters are longer, and their copy holds while the dish opens */
.ch1,.ch3,.ch4,.ch6,.ch7{height:135vh}.ch.outro{height:350vh;justify-content:flex-start}
.ch .copy{margin-left:68.5vw;width:min(360px,24vw);display:grid;gap:14px;padding-bottom:6vh}
.ch .copy .rv-a,.ch .copy .rv-b{display:grid;gap:14px}
.js:not(.film-static) .ch .rv-a{opacity:0;transform:translateY(125px);transition:opacity .8s cubic-bezier(.455,.03,.515,.955),transform .8s cubic-bezier(.455,.03,.515,.955)}
/* The detail waits: the line and actions appear once the copy is well into view, so a skimmer reads headlines only. */
.js:not(.film-static) .ch .rv-b{opacity:0;transform:translateY(60px);transition:opacity .7s cubic-bezier(.455,.03,.515,.955),transform .7s cubic-bezier(.455,.03,.515,.955)}
.js .ch .copy.in .rv-a,.js .ch .copy.in2 .rv-b,.js .ch .copy:focus-within .rv-a,.js .ch .copy:focus-within .rv-b{opacity:1;transform:none}
.ch .dish{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ch .dish .food{opacity:.72}
.act{margin:0}
.add,.see{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(243,243,240,.35);text-underline-offset:5px;transition:text-decoration-color .3s var(--ease-out)}
.add:hover,.see:hover{text-decoration-color:currentColor}
.add .plus{position:relative;flex:none;width:9px;height:9px}
.add .plus::before,.add .plus::after{content:"";position:absolute;left:4px;top:0;width:1px;height:9px;background:currentColor}
.add .plus::after{transform:rotate(90deg)}
/* in your list: the plus becomes the red dot */
.add[aria-pressed="true"] .plus{border-radius:50%;background:var(--accent);transform:scale(.8)}
.add[aria-pressed="true"] .plus::before,.add[aria-pressed="true"] .plus::after{display:none}
.add .t-on,.add[aria-pressed="true"] .t-add{display:none}
.add[aria-pressed="true"] .t-on{display:inline}
.add[aria-pressed="true"]{text-decoration-color:transparent}
@media (pointer:coarse){.add,.see{min-height:44px}}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;padding:3px 8px;border-radius:2px;white-space:nowrap;opacity:.85}
.tag.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 4s var(--ease-io) 1}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ch .headline{font-stretch:var(--display-width);font-size:clamp(20px,1.7vw,28px);line-height:1.08}
.ch .body{font-size:15.5px;line-height:1.6;opacity:.88}
/* the new chapter shape: a hook, then the headache against the fix */
.ch .hook{opacity:.7}
.split{margin:0;display:grid;gap:4px}
.split dt{opacity:.6}
.split dt+dd{margin:0 0 10px;font-size:15.5px;line-height:1.55;opacity:.9}
.split dd:last-child{margin-bottom:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}

/* the big word: a fixed clip on the left. Words roll through it like a reel, in from above and out below. */
.ch .lede{position:fixed;left:7vw;top:calc(30vh + 30px);height:calc(59vh - 30px);width:26vw;overflow:hidden;z-index:1;pointer-events:none}
.ch .lede-in{position:absolute;left:0;right:0;top:0;display:grid;gap:14px;opacity:var(--o,0);transform:translateY(calc(var(--y,-1) * 30vh))}
/* which half of the menu you are in: changes once, at the gate */
.group{position:fixed;left:7vw;top:30vh;z-index:1;margin:0;display:grid;opacity:0;pointer-events:none;transition:opacity .5s var(--ease-out);text-shadow:0 0 7px rgba(20,21,24,.6),0 0 2px rgba(20,21,24,.8)}
@media (min-width:761px) and (max-width:1035px){.group{font-size:clamp(10px,1.04vw,11px)}}
.group > span{grid-area:1/1;white-space:nowrap;transition:opacity .45s var(--ease-out)}
.group .g-deal{opacity:0}
body.grp-on .group{opacity:.72}
body.grp-deal .group .g-sys{opacity:0}
body.grp-deal .group .g-deal{opacity:1}
body.hero-off .group{visibility:hidden}
/* in the film the group labels are read by screen readers only; the fixed .group label shows them */
.g-static{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ch .big{justify-self:start;text-transform:uppercase;font-size:clamp(23px,2.66vw,55px);line-height:.98;letter-spacing:-.01em}
/* why this dish: one wry line under the word, tying how the dish is made to what the system does */
.ch .why{max-width:min(38ch,22vw);margin:0;font-size:15px;line-height:1.45;opacity:.74;text-wrap:balance}
.ch .why-card{display:none}
body.hero-off .ch .lede{visibility:hidden}

/* opening: the resting block, then the first copy */
.intro-h1{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.eyebrow{display:flex;align-items:center;gap:10px}
.ch0 .rest{position:fixed;left:7vw;bottom:calc(19vh + 28px);width:min(420px,32vw);display:grid;gap:12px;opacity:var(--rest,1);z-index:1}
body.hero-off .ch0 .rest{visibility:hidden}
body.hero-off .ch0 .rest :is(.intro-h1,.sr){visibility:visible}
.ch0 .line{font-size:16px;line-height:1.55;opacity:.9}
.ch0 .price-line{margin:0;font-size:16px;line-height:1.55}
.ch0 .price-line b{font-weight:var(--body-strong)}
.ch0 .price-line a{display:inline-block;padding:10px 0;color:inherit;font-weight:600;text-underline-offset:5px}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:8px;line-height:1.5}
/* "What goes in": each line draws in as the dish opens (site.js sets --k per line in the film) */
.recipe-h{opacity:.72}
.recipe{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14.5px;line-height:1.45}
.recipe li{display:flex;align-items:baseline;gap:10px;opacity:calc(.2 + .8 * var(--k,1));transform:translateX(calc((1 - var(--k,1)) * 16px))}
.recipe li::before{content:"";flex:none;width:12px;height:1px;background:currentColor;opacity:.45;transform:translateY(-4px)}
.recipe li.person::before{display:none}
.recipe li.person .dot{flex:none;width:7px;height:7px;margin:0 5px 0 0;transform:translateY(-1px)}
.legend li{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:10px;opacity:.9}
.legend li span{opacity:.62}
.legend-note{opacity:.62;font-size:10.5px;line-height:1.6}
.cue{display:flex;align-items:center;gap:12px;opacity:.7}
.cue i{display:block;width:1px;height:26px;background:currentColor;opacity:.3;position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:currentColor;animation:dripline 2.4s var(--ease-io) 2;animation-delay:-.6s}
@keyframes dripline{to{top:100%}}
.film-offer{display:grid;gap:10px;justify-items:start;padding-top:14px;border-top:1px solid var(--line-dark)}
.film-offer .label{opacity:.72;max-width:44ch;line-height:1.6}
.film-offer[hidden]{display:none}

/* closing: the words hold on the left while the cards settle on the right */
.ch.outro .outro-hold{margin-top:200vh;height:150vh}
.ch.outro .outro-copy{position:sticky;top:34vh;margin-left:7vw;width:min(560px,34vw);gap:18px;padding-bottom:0}
.ch.outro .big{font-size:clamp(34px,3.8vw,72px);line-height:.95;text-transform:none}
.ch.outro .line{font-size:17px;opacity:.9}
.ch.outro .reply{opacity:.72}
@media (max-height:700px){.ch0 .cue{display:none}.ch.outro .outro-copy{top:20vh}.ch.outro .big{font-size:clamp(28px,3vw,44px)}}

/* phones and portrait tablets: word on top, tiffin in the middle, story cards scroll past */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px){
  .lines,.dock .pin{display:none}
  .dock{left:20px;top:auto;bottom:20px;grid-auto-flow:column;align-items:center;gap:14px}
  .ch .lede{top:calc(var(--nav-h) + 30px);left:20px;right:20px;width:auto;height:calc(max(47vh,356px) - var(--nav-h) - 42px)}
  .ch .lede-in{top:0;gap:8px;transform:translateY(calc(var(--y,-1) * 20vh))}
  .group{left:20px;top:calc(var(--nav-h) + 8px)}
  .ch .big{font-size:clamp(26px,7.6vw,40px)}
  .ch .why{font-size:13px;line-height:1.35;max-width:42ch}
  .dish-line{font-size:14px;max-width:80vw}
  html.js:not(.film-static) .ch .lede .why{display:none}
  html.js:not(.film-static) .ch .why-card{display:block;margin-top:-2px}
  .pain:not(.card){display:none;left:20px;right:20px;width:auto;top:calc(var(--nav-h) + 110px);grid-template-columns:1fr;gap:0}
  .pain:not(.card) :is(.art,.clip){display:none}
  .pain-line{font-size:11px}
  .ch .copy{position:fixed;left:20px;right:20px;bottom:76px;z-index:2;margin:0;width:auto;padding:18px 20px;border-radius:6px;background:var(--card-bg,#18191c);gap:10px;will-change:transform,opacity}
  body.hero-off .ch .copy{visibility:hidden}
  .ch.outro .copy.outro-copy{position:sticky;left:auto;right:auto;bottom:auto;will-change:auto}
  body.hero-off .ch.outro .copy.outro-copy{visibility:visible}
  .ch .copy .rv-a,.ch .copy .rv-b{gap:10px}
  .ch .body{font-size:14.5px}
  .recipe{font-size:13.5px;gap:4px}
  /* products are the owner's own work: their story cards turn to paper */
  html.js:not(.film-static) .ch.deal .copy{background:var(--paper);color:var(--ink)}
  html.js:not(.film-static) .ch.deal .see{text-decoration-color:rgba(20,21,24,.35)}
  .ch0{height:var(--ch0h,820vh)}
  .ch.outro{height:250vh}
  .film{--fw:112vw;top:44%}
  .film-load{top:calc(46% + 37vw);bottom:auto}
  .ch.outro .outro-hold{margin-top:120vh;height:130vh}
  .ch.outro .outro-copy{top:calc(var(--nav-h) + 12px);bottom:auto;margin:0 20px;width:auto}
  .ch.outro .big{font-size:clamp(28px,8.4vw,42px)}
  .ch0 .rest{left:20px;right:20px;width:auto;top:calc(var(--nav-h) + 12px);bottom:auto}
  .canvas{left:20px;right:20px;top:34vh}
  .canvas .type{font-size:min(5vh,5.7vw)}
  .canvas .type-static{font-size:min(5vh,6.4vw)}
  .card.pain .cap{font-size:9px}
  .headline-track{top:35vh;height:31.5vh}
  .headline-track span{font-size:min(3.6vh,6.4vw);line-height:1.1;white-space:normal;width:86vw}
  .punch-track{top:15vh;bottom:auto;height:20vh}
  .punch-track span{font-size:3.2vh;line-height:1.3;white-space:normal;width:84vw}
  .hud,.cue{display:none}
  .parts .part{font-size:10px;padding:4px 6px}
  .dock{max-width:calc(100vw - 40px)}
}
@media (max-height:560px){.parts{display:none}}

/* ---------- the still version: chapters become normal stacked sections ---------- */
html.film-static .stage,html:not(.js) .stage{display:none}
html.film-static .ch,html:not(.js) .ch{height:auto;display:grid;grid-template-columns:minmax(0,1fr);justify-content:normal;gap:18px;align-content:start;padding:clamp(72px,10vw,128px) clamp(20px,6vw,96px);background:var(--ch-bg,var(--graphite))}
html.film-static .ch :is(.lede,.lede-in,.copy,.rest,.outro-hold,.outro-copy),html:not(.js) .ch :is(.lede,.lede-in,.copy,.rest,.outro-hold,.outro-copy){position:static;transform:none;width:auto;height:auto;max-width:62ch;margin:0;padding:0;opacity:1;overflow:visible;background:none;visibility:visible}
html.film-static .ch .lede-in,html:not(.js) .ch .lede-in{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
/* 8vw on a phone: RECEPTIONIST at 40px was wider than the screen and pushed every line off the right edge */
html.film-static .ch .big,html:not(.js) .ch .big{font-size:clamp(26px,8vw,96px);overflow-wrap:break-word}
html.film-static .g-static,html:not(.js) .g-static{position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;display:block;opacity:.72}
html.film-static .group,html:not(.js) .group{display:none}
html.film-static .ch0,html:not(.js) .ch0{min-height:100svh;align-content:end;padding-top:calc(var(--nav-h) + 40vh);background:var(--graphite) url("../img/still-phone.jpg") center top/cover no-repeat;position:relative}
html.film-static .ch0::before,html:not(.js) .ch0::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(30,31,34,0) 22%,rgba(30,31,34,.92) 48%,var(--graphite) 70%)}
html.film-static .ch0 > *,html:not(.js) .ch0 > *{position:relative}
html.film-static .ch0 .rest,html:not(.js) .ch0 .rest{display:grid;gap:18px;max-width:560px}
html.film-static .intro-h1,html:not(.js) .intro-h1{position:static!important;width:auto;height:auto;overflow:visible;clip:auto;font-size:clamp(30px,6.4vw,58px);line-height:1.02}
html.film-static .ch0 .cue,html:not(.js) .ch0 .cue{display:none}
@media (min-width:1025px) and (orientation:landscape){
  html.film-static .ch0{align-content:center;padding-top:calc(var(--nav-h) + 40px);background-image:url("../img/still-wide.jpg");background-size:auto 100%;background-position:right -26vw center}
  html.film-static .ch0::before{background:linear-gradient(to right,var(--graphite) 0%,rgba(30,31,34,.82) 38%,rgba(30,31,34,0) 62%)}
  html.film-static .intro-h1{max-width:20ch}
}

/* ---------- sections below the film ---------- */
.sec{position:relative;padding:clamp(88px,12vw,160px) clamp(20px,6vw,96px)}
.tone-paper{background:var(--paper);color:var(--ink)}
.tone-charcoal{background:var(--charcoal);color:var(--paper)}
.tone-graphite{background:var(--graphite);color:var(--paper)}
.sec-head{display:grid;gap:16px;max-width:1180px;margin:0 auto clamp(40px,6vw,72px)}
.sec-head .label{opacity:.72}
.sec-head h2{font-size:clamp(32px,4.6vw,64px)}
.sec-head .intro{font-size:clamp(17px,1.3vw,20px);max-width:52ch;opacity:.86}
.inner{max-width:1180px;margin:0 auto}

/* pack your tiffin */
.pack{max-width:1180px;margin:0 auto;display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.pack{grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:"head art" "rest art";row-gap:0}
  .pack>.text:not(.text-b){grid-area:head;align-self:end}.pack>.text-b{grid-area:rest;align-self:start}.pack>.packing{grid-area:art}}
.pack .text{display:grid;gap:16px}
.pack h2{font-size:clamp(32px,4.6vw,64px)}
.pack .how{max-width:52ch;opacity:.86;font-size:clamp(17px,1.3vw,20px)}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--paper);border:1px solid var(--line-dark);border-radius:2px;padding:12px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:border-color .35s var(--ease-out),background-color .35s var(--ease-out)}
.choice i{width:10px;height:10px;border:1px solid currentColor;border-radius:2px;transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out)}
.choice:hover{border-color:var(--paper)}
.choice[aria-pressed="true"]{border-color:var(--accent);background:rgba(208,69,63,.1)}
.choice[aria-pressed="true"] i{background:var(--accent);border-color:var(--accent)}
.pack .send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.pack .picked{font-family:var(--mono);font-size:11px;letter-spacing:.06em;opacity:.7}
.mini{width:180px;margin:0 auto;color:var(--paper)}
.mini .tier{transform:translateY(-26px);opacity:0;transition:transform .7s var(--ease-out),opacity .5s var(--ease-out)}
.mini .tier.on{transform:none;opacity:1}
.mini .frame{opacity:.55}

/* proof */
.workflow-proof{isolation:isolate}
.workflow-proof::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(20,21,24,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(20,21,24,.2) 1px,transparent 1px);
  background-size:24px 24px}
.workflow-proof .proof-grid{grid-template-columns:minmax(0,1fr);gap:40px}
.workflow-proof .sec-head .intro{background:var(--paper)}
.workflow-sheet{padding:clamp(20px,3vw,36px);border:1px solid #B9BAB5;border-radius:3px;background:var(--paper);
  box-shadow:5px 6px 0 rgba(20,21,24,.06)}
.workflow-top{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px dashed #B9BAB5;padding-bottom:18px;margin-bottom:24px}
.workflow-stamp{font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;border:1px solid currentColor;padding:5px 8px;color:#55575C;transform:rotate(-3deg)}
.workflow-path{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;padding:0;margin:0}
.workflow-path li{position:relative;display:grid;align-content:start;gap:10px;border:1px solid #666970;background:var(--charcoal);color:var(--paper);padding:20px;border-radius:6px}
.workflow-path li:not(:last-child)::after{content:"→";position:absolute;left:100%;top:50%;width:36px;text-align:center;color:var(--ink);font-size:25px;transform:translateY(-50%)}
.workflow-path strong{font:600 17px/1.3 var(--body)}
.workflow-path li>span:last-child{font:15px/1.5 var(--body)}
.node-symbol{font:24px/1 var(--mono);width:42px;height:42px;display:grid;place-items:center;border:1px solid #9A9CA3;border-radius:6px;margin-bottom:8px}
.workflow-note{font:14px/1.5 var(--body);color:#55575C;margin-top:22px}
.workflow-card figcaption{background:var(--paper);padding:14px 18px;border-left:2px solid var(--ink);opacity:1}
.workflow-card figcaption .tag{display:inline-block;margin-bottom:7px;font:10px var(--mono);text-transform:uppercase}
@media(max-width:720px){
  .workflow-path{grid-template-columns:minmax(0,1fr);gap:30px}
  .workflow-path li:not(:last-child)::after{content:"↓";left:50%;top:100%;height:30px;line-height:30px;transform:translateX(-50%)}
  .workflow-top{align-items:start}.workflow-top .label{max-width:16ch}
}
.proof-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.proof-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr)}.phone-card{grid-row:span 2}}
.proof-card{margin:0;display:grid;gap:12px;align-content:start}
.proof-card figcaption{font-size:14.5px;line-height:1.55;opacity:.94}
.proof-card figcaption strong{display:block;font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;font-size:15px;margin-bottom:2px}
.proof-card figcaption .for{display:block;font:10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin:2px 0 6px}
.proof-card figcaption .inout{display:block;margin-top:6px}
.proof-card figcaption .inout b{font-weight:var(--body-strong)}
.proof-card figcaption .project-visit+.project-visit{margin-top:0}
.proof-card.built{border:1px solid var(--line-light);border-radius:6px;padding:20px;gap:10px}
.media{position:relative;border-radius:6px;overflow:hidden;background:#E6E6E1;aspect-ratio:16/10;border:1px solid var(--line-light)}
.screen-placeholder{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;padding:24px;background:repeating-linear-gradient(-45deg,#ECECE7 0 12px,#E6E6E1 12px 24px);color:var(--mist-on-paper)}
.phone{position:relative;margin:0 auto;width:min(320px,100%);aspect-ratio:9/17;border-radius:34px;background:#101113;padding:12px;box-shadow:0 30px 60px -30px rgba(20,21,24,.5)}
.phone-screen{height:100%;border-radius:24px;overflow:hidden;background:#ECE8E1;display:grid;grid-template-rows:auto 1fr}
.chat-top{background:#1F2C33;color:#E9EDEF;padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:13px}
.chat-top .avatar{width:30px;height:30px;border-radius:50%;background:#2A3942;display:grid;place-items:center;font-family:var(--mono);font-size:10px}
.chat-top small{display:block;opacity:.7;font-size:11px}
.chat{padding:14px 12px;display:grid;gap:8px;align-content:start;font-size:13px;line-height:1.42;color:#111B21}
.msg{max-width:84%;padding:7px 10px 18px;border-radius:8px;position:relative;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.msg.in{background:#FFFFFF;justify-self:start;border-top-left-radius:2px}
.msg.out{background:#D9FDD3;justify-self:end;border-top-right-radius:2px}
.msg time{position:absolute;right:8px;bottom:4px;font-size:10px;color:#667781}
.chat .day{justify-self:center;font-size:11px;background:#FFFFFF;color:#54656F;padding:3px 9px;border-radius:6px}
.chat .esc{justify-self:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#6B420C;background:#F6E2C6;padding:4px 8px;border-radius:4px}

/* how i work */
.rules{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line-dark)}
@media (min-width:900px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rules li{padding:28px 0;border-bottom:1px solid var(--line-dark);display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px}
@media (min-width:900px){.rules li:nth-child(odd){padding-right:40px}.rules li:nth-child(even){padding-left:40px;border-left:1px solid var(--line-dark)}}
.rules .dot{margin-top:.55em}
.rules strong{display:block;font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;font-size:17px;letter-spacing:.01em;margin-bottom:6px}
.rules p{opacity:.86;max-width:46ch}

/* faq */
.faq .list{max-width:920px;margin:0 auto;border-top:1px solid var(--line-light)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:16px;align-items:baseline;padding:22px 0;font-weight:var(--body-strong);font-size:clamp(17px,1.4vw,19px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";content:"+" / "";font-family:var(--mono);font-size:18px;color:var(--accent);transition:transform .35s var(--ease-out);justify-self:end}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 40px 24px 0;max-width:64ch;opacity:.88}

/* contact and footer */
.contact .inner{display:grid;gap:22px}
.contact h2{font-size:clamp(38px,6.4vw,96px);max-width:14ch}
.contact .who{font-size:18px;opacity:.86}
.who-card{display:grid;gap:34px 56px;margin:28px 0 40px;align-items:start}
.who-figure{position:relative;container-type:inline-size;margin:0 0 clamp(26px,6.6vw,44px);width:min(78%,320px)}
.who-photo{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:3px}
/* a dark fade at the foot of the photo, so the name reads where it crosses the white shirt */
.who-figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;border-radius:0 0 3px 3px;pointer-events:none;background:linear-gradient(to top,rgba(20,21,24,.9) 0%,rgba(20,21,24,.78) 20%,rgba(20,21,24,0) 100%)}
.who-name{z-index:1}
.who-name{position:absolute;left:-2px;bottom:-.62em;margin:0;font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;font-size:min(13.4cqw,64px);line-height:.92;letter-spacing:-.01em;color:var(--paper);white-space:nowrap;text-shadow:0 2px 18px rgba(20,21,24,.55)}
.who-label{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.who-lead{margin:0 0 18px;font-size:clamp(20px,2vw,26px);line-height:1.3}
.who-hats{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.who-hats li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-dark)}
.who-hats span{font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;font-size:clamp(15px,1.55vw,21px);line-height:1.15}
.who-hats small{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;text-align:right}
.who-bio{margin:18px 0 0;font-size:16px;line-height:1.55;opacity:.86;max-width:52ch}
.who-text .project-visit{margin-top:10px}
@media (min-width:900px){.who-card{grid-template-columns:minmax(280px,380px) minmax(0,1fr)}.who-figure{width:100%}}
.contact .note{font-family:var(--mono);font-size:11px;letter-spacing:.06em;opacity:.72}
.footer{padding:28px clamp(20px,6vw,96px) 40px;background:var(--graphite);color:var(--mist);border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.footer svg{height:26px;width:auto;color:var(--paper)}
.footer .footer-email{text-transform:none}

/* entrances below the film */
.js [data-reveal] .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].in .rv{opacity:1;transform:none}
[data-reveal].in .rv:nth-child(2){transition-delay:.08s}
[data-reveal].in .rv:nth-child(3){transition-delay:.16s}
[data-reveal].in .rv:nth-child(4){transition-delay:.24s}
[data-reveal].in.done .rv,[data-reveal].in.done .rv:nth-child(2),[data-reveal].in.done .rv:nth-child(3),[data-reveal].in.done .rv:nth-child(4){transition-delay:0s}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* Reduced motion is the default and stays the default. But clicking "Play the film" is an explicit
   request for motion, so the blanket does not apply once the visitor has asked. */
@media (prefers-reduced-motion: reduce){
  html:not(.film-forced) *,html:not(.film-forced) *::before,html:not(.film-forced) *::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html:not(.film-forced) [data-reveal] .rv{opacity:1;transform:none}
  html:not(.film-forced) .mini .tier{transform:none}
}

/* ---------- the six jobs and the three products, read below the film ---------- */
.job-list{max-width:1180px;margin:0 auto;padding:0;list-style:none;counter-reset:job}
.job{counter-increment:job;display:grid;gap:18px;padding:clamp(30px,3.4vw,46px) 0;border-top:1px solid var(--line-dark)}
.job:last-child{border-bottom:1px solid var(--line-dark)}
.tone-paper .job{border-color:var(--line-light)}
.job-a{display:grid;gap:12px;align-content:start}
.job-a::before{content:counter(job,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;opacity:.72}
.job-k{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.job-k .food{opacity:.72}
.job-h{font-size:clamp(21px,2.2vw,32px);line-height:1.08;letter-spacing:-.005em;text-transform:uppercase}
.job-b{display:grid;gap:14px;align-content:start}
.job .hook{font-size:clamp(17px,1.5vw,21px);line-height:1.3;opacity:.92;max-width:26ch}
.job .body{font-size:15.5px;line-height:1.6;opacity:.9;max-width:62ch;margin:0}
.job .split{max-width:58ch}
.prod-sec .job-a::before{content:none}
@media (min-width:900px){
  .job{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,88px)}
}

/* Dish stories share the protected left column; phones read the story above the film. */
.ch .blurb{margin:0;font-family:var(--body);font-size:clamp(18px,1.4vw,22px);line-height:1.5;color:var(--paper)}
.ch .chapter-audience{margin:0;font-size:10px;line-height:1.4;color:var(--mist)}
.story-swap{display:grid}
.story-swap .blurb{grid-area:1/1;font-size:clamp(20px,1.6vw,24px);line-height:1.45}
.story-label{display:block;font:10px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.story-swap .problem{color:#FFA49D;opacity:var(--problem-o,1);transform:translateY(var(--problem-y,0px));filter:blur(var(--problem-blur,0px))}
.story-swap .solution{color:var(--paper);opacity:var(--solution-o,0);transform:translateY(var(--solution-y,12px));filter:blur(var(--solution-blur,3px))}
.food-name{color:var(--paper);font-size:11px;line-height:1.5;opacity:.85}
html.js:not(.film-static) .ch[data-group="system"]{height:240vh}
html.film-static .story-swap,html:not(.js) .story-swap{display:grid;gap:22px}
html.film-static .story-swap .blurb,html:not(.js) .story-swap .blurb{grid-area:auto;opacity:1;filter:none;transform:none}
html:not(.js) .film-off,html.film-static .film-off{display:none}
html.film-static .sr-story{display:none}
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){
  .ch .blurb{font-size:17px;line-height:1.45}
  .ch .chapter-audience{font-size:9px}
  .ch .lede-in{gap:9px}
  .story-swap .blurb{font-size:18px;line-height:1.45}
  .ch .lede{height:calc(var(--story-bottom,356px) - var(--nav-h) - 42px)}
}
@media (max-width:760px) and (max-height:680px){
  .ch .lede{top:calc(var(--nav-h) + 16px);height:calc(var(--story-bottom,356px) - var(--nav-h) - 28px)}
  .ch .lede-in{gap:6px}
  .story-swap .blurb{line-height:1.35}
  .story-label{margin-bottom:4px}
}
/* On compact desktops the longer reading column needs the space above the contact button. */
@media (min-width:761px) and (max-width:1100px) and (orientation:landscape){
  .dock{top:auto;bottom:18px}
  .dock .pin,.dock .hud{display:none}
}

/* Clear category/product hierarchy and connected workflow canvases. */
.market .col-h{background:var(--charcoal);border-bottom:1px solid #64666B;color:var(--paper)}
.market .col-h:hover,.market .col[open] .col-h{background:#36383D}
.market .col-n,.market .col-d,.market .col-c,.market .col-p[data-n]{color:var(--paper);opacity:1}
.market .col-d{color:#D0D1D4}
.market .col-p::before,.market .col-p::after{background:var(--paper);opacity:1}
.market .cells{padding-top:14px;padding-bottom:18px;gap:10px;background:#DFE0DC;border-left:4px solid #777A80}
.market .cell{border:1px solid #B8BAB5;border-radius:5px;overflow:hidden}
.market .nm{font-family:var(--body);font-stretch:normal;font-weight:600;text-transform:none;font-size:18px;line-height:1.3}
.market .ln{font-size:14px;opacity:.85}
.market .mark{width:18px;height:18px;border-color:#686B70}
.workflow-proof{background:#191A1C;color:var(--paper)}
.workflow-proof::before{background-image:radial-gradient(#858991 .9px,transparent .9px);background-size:22px 22px;opacity:.4}
.workflow-proof .sec-head .intro{background:transparent}
.workflow-sheet{background:rgba(25,26,28,.7);border:1px solid #55585E;box-shadow:none;padding:24px 16px}
.workflow-top{border-color:#55585E;margin:0 8px 14px}
.workflow-stamp,.workflow-note{color:#D0D1D4}
.workflow-card figcaption{background:transparent;border-color:#777A80;color:var(--paper)}
.workflow-pan{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#777A80 #26272A;padding-bottom:8px}
.workflow-pan:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.workflow-network{display:block;width:100%;min-width:780px;font-family:var(--body)}
.workflow-pan-hint{display:none;font-size:13px;color:#D0D1D4;margin:8px}
@media(max-width:800px){.workflow-pan-hint{display:block}.workflow-sheet{padding:20px 8px}.market .cells{padding-left:28px;padding-right:18px}}

.workflow-card,.workflow-sheet,.workflow-pan{min-width:0;max-width:100%}

/* Phone-first workflows: every step fits the viewport without a sideways pan. */
.flow-mobile-first{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:10px 8px;color:var(--paper)}
.flow-step,.flow-outcome{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:#2A2B2F;border:1px solid #777A80;border-radius:12px;padding:18px 12px;min-width:0}
.flow-step>strong,.flow-outcome>strong{font:600 17px/1.35 var(--body)}
.flow-step>span:last-child{font:13px/1.4 var(--body);color:#D0D1D4}
.service-logo{display:block;object-fit:contain;width:38px;height:38px;margin-bottom:3px}
.flow-symbol{display:grid;place-items:center;width:38px;height:38px;font:26px/1 var(--body);color:#78CAB5}
.flow-step::after{content:"↓";position:absolute;top:100%;height:28px;line-height:28px;color:#BCBEC3;font-size:23px}
.flow-step::before{content:"";position:absolute;top:-5px;left:calc(50% - 5px);width:8px;height:8px;border:1px solid #96999F;border-radius:50%;background:#26272A}
.flow-trigger::before{display:none}
.flow-branches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;position:relative;padding-top:16px}
.flow-branches::before{content:"";position:absolute;top:0;left:25%;right:25%;height:16px;border:1px solid #92959B;border-bottom:0;border-radius:12px 12px 0 0}
.flow-route{font:12px/1.4 var(--mono);color:#D0D1D4}
.flow-context{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px dashed #777A80;padding-top:18px}
.flow-context-label{grid-column:1/-1;text-align:center;font:12px/1.5 var(--mono);color:#D0D1D4}
.flow-context>span:not(.flow-context-label){display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:14px;line-height:1.4}
.flow-context .flow-symbol{border:1px solid #777A80;border-radius:50%;background:#2A2B2F;width:48px;height:48px}
@media(min-width:850px){
 .flow-mobile-first{grid-template-columns:1fr 1.3fr 1fr 1fr;gap:32px;align-items:center;padding:32px 16px}
 .flow-step{min-height:142px}.flow-step::after{content:"→";top:calc(50% - 14px);left:100%;width:32px}
 .flow-step::before{top:calc(50% - 5px);left:-5px}
 .flow-branches{grid-template-columns:1fr;gap:24px;padding-top:0}
 .flow-branches::before{top:23%;bottom:23%;left:-16px;right:auto;width:16px;height:auto;border:1px solid #92959B;border-right:0;border-radius:12px 0 0 12px}
 .flow-context{grid-column:2;grid-row:2;padding-top:20px}
}

@media(max-width:849px){
 .flow-step{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:4px;text-align:left;min-height:88px;padding:14px}
 .flow-step>.service-logo,.flow-step>.flow-symbol{grid-column:1;grid-row:1/3;margin:0}
 .flow-step>strong{grid-column:2;grid-row:1;align-self:end}
 .flow-step>span:last-child{grid-column:2;grid-row:2;align-self:start}
 .flow-step::after{left:calc(50% - 7px)}
 .flow-outcome{padding:14px 8px}.flow-outcome>strong{font-size:16px}
}

/* Keep the longer contract label readable and unify small interaction timings. */
.group .g-deal{white-space:normal;max-width:29ch;line-height:1.5}
.gate-track span{font-size:clamp(22px,4vw,58px);max-width:90vw;line-height:1.15}
.market .pickcell{transition:background-color .24s ease,color .24s ease,box-shadow .24s ease}
.market .col-h{transition:background-color .24s ease}
.btn{transition:background-color .24s ease,color .24s ease,transform .24s ease,border-color .24s ease}
.btn:active{transform:translateY(1px)}
.js [data-reveal] .rv{transition-duration:.65s;transform:translateY(14px)}
.js [data-reveal].in .rv{transform:none}
@media(max-width:760px){.group .g-deal{font-size:10px;max-width:34ch}.gate-track span{font-size:25px}}

@media(max-width:760px){.group .g-deal{max-width:none;width:calc(100vw - 40px);white-space:nowrap;font-size:10px}}

/* Interactive brushed-steel packing illustration. */
.packing{width:min(100%,340px);margin:auto;text-align:center;align-self:center}
.packing-art{position:relative;padding:48px 24px 14px;filter:drop-shadow(0 16px 16px #0005)}
.packing-lid{position:absolute;top:35px;left:20px;right:20px;height:24px;border-radius:50% 50% 8px 8px;background:linear-gradient(100deg,#666,#e3e4de 28%,#878c8d 58%,#d8d9d2 80%,#64696a);border:1px solid #e1e2df;transform:translateY(-16px);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.packing-lid i{position:absolute;width:60px;height:25px;left:calc(50% - 30px);top:-22px;border:6px solid #a7aaa7;border-bottom:0;border-radius:18px 18px 0 0}
.packing-lid i::after{content:'';position:absolute;width:10px;height:10px;background:var(--accent);border-radius:50%;left:19px;top:-8px}
.packing-slots{display:grid;gap:14px;transition:gap .5s ease}
.packing-slot{min-height:68px;border:1px solid #c9ceca;border-radius:12px 12px 25px 25px;padding:12px 20px;background:linear-gradient(105deg,#6b7273 0%,#cbd0cb 17%,#929b9b 38%,#e0e3db 65%,#6b7273 100%);box-shadow:inset 0 5px 0 #f5f7f078,inset 0 -5px 6px #343b3f88,0 3px 2px #0005;cursor:pointer;position:relative;color:var(--ink);transition:filter .2s ease}
.packing-slot:hover{filter:brightness(1.1)}
.packing-slot:focus-visible{outline:3px solid var(--paper);outline-offset:4px}
.packing-ticket{display:block;padding:6px 8px;border:1px dashed #495054;border-radius:2px;background:#e4e7e1b8;font:14px/1.25 var(--body);transition:background .25s ease,transform .35s ease}
.filled .packing-ticket{background:#f3f3f0;border:1px solid #777;box-shadow:1px 2px 3px #0003;transform:rotate(-1deg);font-weight:600}
.packing-slot:nth-child(2) .packing-ticket{transform:rotate(1deg)}
.packing-clip{position:absolute;top:66px;height:176px;width:8px;background:linear-gradient(90deg,#5a6063,#dce0d9,#71797b);border-radius:3px;opacity:.35;transition:opacity .4s ease,transform .45s ease;transform:rotate(8deg)}
.packing-clip.left{left:16px}.packing-clip.right{right:16px;transform:rotate(-8deg)}
.packed .packing-slots{gap:3px}.packed .packing-lid{transform:none}.packed .packing-clip{opacity:1;transform:none}
.packing-progress{font:600 17px/1.4 var(--body);margin:20px 0 6px}
.packing-hint{font-size:13px;line-height:1.5;color:#C8CBCB;margin:0 0 10px}
.packing-change{font-size:14px;color:var(--paper);text-underline-offset:4px}
.chosen li{align-items:center;gap:12px;flex-wrap:wrap}
.chosen [data-remove]{background:none;border:1px solid #85898b;border-radius:4px;padding:8px 10px;color:var(--paper);font:13px var(--body);cursor:pointer;margin-left:auto}
.chosen .plus{font-size:12px;color:#FFA49D}
@media(max-width:760px){
 .pack{display:flex;flex-direction:column;align-items:stretch;gap:0}.pack>.text,.pack>.text-b{display:contents}
 .pack>.text>.label{order:0}.pack h2{order:1}.pack .how{order:2;margin-bottom:12px}
 .packing{order:3;margin:10px auto 24px;width:min(100%,300px)}
 .pack .chosen{order:4}.pack .send{order:5}.packing-art{padding-top:48px}
}
@media(prefers-reduced-motion:reduce){.packing *{transition:none!important;animation:none!important}}

.pack .chosen .none{display:none}

/* Refined satin steel, rolled rims and restrained paper tickets. */
.packing-art{isolation:isolate;padding-left:28px;padding-right:28px;filter:drop-shadow(0 14px 12px #0004)}
.packing-art::after{content:"";position:absolute;z-index:-1;left:14%;right:14%;bottom:0;height:22px;border-radius:50%;background:#0006;filter:blur(12px)}
.packing-slot{border-color:#c5c9c4 #636b6c #51595a;border-radius:9px 9px 28px 28px;background:linear-gradient(100deg,#555f62 0%,#9da6a5 8%,#d1d7d0 20%,#a4adab 32%,#788487 49%,#aab4b2 69%,#e0e4dd 82%,#647074 98%);box-shadow:inset 0 2px 0 #f7f9f0,inset 0 6px 3px #c5cdca88,inset 0 -3px 0 #444f52,inset 0 -8px 7px #222b3044,0 5px 7px #0004;overflow:hidden;padding:14px 18px}
.packing-slot::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#fff0 0 2px,#ffffff12 2px 3px);opacity:.55}
.packing-slot::after{content:"";position:absolute;left:7%;right:7%;bottom:6px;height:1px;background:linear-gradient(90deg,transparent,#eef2e4aa,transparent);pointer-events:none}
.packing-ticket{position:relative;z-index:1;border:1px solid #3d494b55;background:#dce2dc80;color:#273133;border-radius:3px;padding:7px 8px;font-size:13px;box-shadow:inset 0 1px 2px #0001}
.filled .packing-ticket{background:linear-gradient(120deg,#fffef5,#e9e9df);color:#242a2b;border-color:#deded2;box-shadow:0 2px 4px #0004;transform:rotate(-.7deg)}
.packing-slot:nth-child(2) .packing-ticket{transform:rotate(.6deg)}
.packing-lid{left:24px;right:24px;height:22px;top:34px;z-index:3;border-radius:50% 50% 5px 5px;border-color:#dfe5df #737f80 #586468;background:linear-gradient(100deg,#606d70,#bdc7c3 18%,#e4e8df 38%,#9ca9a8 66%,#566468);box-shadow:inset 0 3px 2px #f3f6ea77,0 4px 4px #0005}
.packing-lid::after{content:"";position:absolute;left:4%;right:4%;bottom:3px;height:1px;background:#e5eadd99}
.packing-lid i{border-color:#a2adab;box-shadow:inset 0 2px 1px #f4f5eb,0 -1px 1px #546063;width:64px;left:calc(50% - 32px)}
.packing-lid i::after{left:21px}
.packing-clip{width:7px;border:1px solid #697678;background:linear-gradient(90deg,#586568,#d0d8d0 48%,#738184);box-shadow:1px 1px 2px #0005;top:65px;height:186px;z-index:2}
.packing-clip.left{left:21px}.packing-clip.right{right:21px}
.packing-clip::after{content:"";position:absolute;bottom:22px;left:-3px;width:11px;height:23px;border:1px solid #acb6b3;border-radius:3px;background:linear-gradient(90deg,#647174,#c6ceca,#758283)}
.packing-progress{letter-spacing:-.02em}.packing-change{display:inline-flex;align-items:center;padding:0 12px;min-height:44px}
@supports(interpolate-size:allow-keywords){
 .faq details{interpolate-size:allow-keywords}
 .faq details::details-content{height:0;opacity:0;overflow:clip;transition:height .48s cubic-bezier(.22,1,.36,1),opacity .28s ease,content-visibility .48s allow-discrete}
 .faq details[open]::details-content{height:auto;opacity:1}
 .market .col::details-content{opacity:0;transition:height .48s cubic-bezier(.22,1,.36,1),opacity .28s ease,content-visibility .48s allow-discrete}
 .market .col[open]::details-content{opacity:1}
}
@media(prefers-reduced-motion:reduce){.market .col::details-content,.faq details::details-content{transition:none!important}}

/* Product presentation: an editorial frame around a quiet satin object. */
#pack-section{background:#202225;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12}
.pack{gap:clamp(32px,6vw,88px);align-items:center}
/* two rows beside the tiffin (head, then the list and send), spaced as one column was */
@media (min-width:900px){.pack{row-gap:16px}}
.pack .how{color:#CBCDCB;line-height:1.6;margin-top:22px}
.packing{width:min(100%,430px);padding:24px 24px 20px;border:1px solid #ffffff18;border-radius:18px;background:radial-gradient(ellipse at 50% 36%,#43494655,transparent 65%),linear-gradient(145deg,#303437,#24272a 65%);box-shadow:inset 0 1px 0 #ffffff09,0 24px 50px #0002}
.packing-caption{display:flex;justify-content:space-between;gap:12px;font:10px/1.5 var(--mono);letter-spacing:.09em;color:#B6BCB9;text-align:left}
.packing-caption span:last-child{text-align:right}
.packing-art{width:min(100%,290px);margin:32px auto 0;padding-bottom:18px;filter:drop-shadow(0 20px 14px #0005)}
.packing-slot{background:linear-gradient(100deg,#596467,#a4aeaa 16%,#bac3bd 26%,#8d9a98 52%,#b8c2bc 80%,#657375);border-color:#bec8c1 #637174 #4b585b;box-shadow:inset 0 2px 0 #dee4dc,inset 0 -3px 0 #3f4d50,inset 0 -8px 10px #34434940,0 4px 5px #0004}
.packing-slot::before{opacity:.22}
.packing-ticket{font-size:12px;min-height:32px;display:flex;align-items:center;justify-content:center;border:0;background:#d5dcd5c7;box-shadow:none;color:#263335;letter-spacing:.01em}
.filled .packing-ticket{border:0;background:#efeee3;box-shadow:0 1px 2px #18232255;max-width:190px;margin:auto;font-size:12px}
.packing-lid{background:linear-gradient(100deg,#6b797a,#bec8c1 32%,#a3b0aa 55%,#69797a);box-shadow:inset 0 2px 1px #dde5d977,0 3px 4px #0003}
.packing-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.packing-dots i{width:24px;height:3px;border-radius:2px;background:#6b7575;transition:background .35s ease}
.packing-dots i.filled{background:#eeeede}
.packing-progress{font-size:18px;margin-top:12px;margin-bottom:7px}
.packing-hint{font-size:12px;color:#BABFBC;max-width:27ch;margin:0 auto 8px;line-height:1.6}
.packing-change{font-size:12px;text-decoration-color:#8d9992;text-underline-offset:5px}
.pack .chosen{list-style:none;padding:0;margin:28px 0 20px;border-top:1px solid #ffffff1f}
.pack .chosen li:not(.none){display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #ffffff1f;font-size:15px}
.pack .chosen li::before{display:none}
.pack .chosen [data-remove]{border:0;text-decoration:underline;text-underline-offset:4px;color:#BFC5C1;padding:12px 4px;font-size:12px;min-height:44px}
.pack .send{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pack .send .btn{min-height:50px;border-radius:5px;padding:16px 22px}
.pack .picked{font-size:10px;line-height:1.6;color:#C3C7C3;opacity:1}
@media(max-width:760px){
 .pack{gap:0}.pack h2{font-size:clamp(30px,8vw,42px);max-width:10ch;line-height:1.02;margin-top:12px}
 .pack .how{font-size:16px;margin-top:16px;margin-bottom:20px;max-width:33ch}
 .packing{width:100%;padding:18px 12px 16px;margin:4px auto 0;border-radius:14px}
 .packing-art{width:min(100%,272px);margin-top:24px}
 .packing-caption{font-size:10px;gap:8px;letter-spacing:.04em}
 .pack .chosen{margin:20px 0 18px;width:100%}.pack .send{width:100%}.pack .send .btn{width:100%}
}

@media(max-width:760px){.pack{align-items:stretch}.pack h2{max-width:none}.pack .how{max-width:none}}

/* Compact node canvases, with a separate connection layout for phones. */
.dense-network{position:relative;height:380px;margin:20px 0 12px}
.network-node{position:absolute;left:var(--dx);top:var(--dy);transform:translate(-50%,-50%);width:90px;text-align:center}
.network-box{position:relative;display:grid;place-items:center;width:62px;height:60px;margin:0 auto 8px;background:linear-gradient(145deg,#33363b,#25282c);border:1px solid #747980;border-radius:10px;box-shadow:0 4px 10px #0002}
.network-box::before,.network-box::after{content:'';position:absolute;width:8px;height:8px;background:#282c30;border:1px solid #989da3;border-radius:50%;top:calc(50% - 4px)}
.network-box::before{left:-5px}.network-box::after{right:-5px}
.network-box .service-logo{width:30px;height:30px;margin:0}.network-box>span{font:25px/1 var(--body);color:#78CAB5}
.network-name{font:13px/1.3 var(--body);color:#EAEBE7;display:table;margin:0 auto;background:#1B1C1E;box-shadow:0 0 0 3px #1B1C1E;border-radius:2px;position:relative}
.node-1 .network-box{width:86px;border-color:#AF6C82}.node-2 .network-box,.node-3 .network-box{border-radius:50%}
.network-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.network-lines path{fill:none;stroke:#858d93;stroke-width:1.6;vector-effect:non-scaling-stroke}
.network-lines .tool-link{stroke-dasharray:5 5;stroke:#717b83}
.mobile-lines{display:none}
@media(max-width:760px){
 .dense-network{height:530px;margin:8px 0 30px}.desktop-lines{display:none}.mobile-lines{display:block}
 .network-node{left:var(--mx);top:var(--my);width:80px}.network-name{font-size:11.5px}
 .network-box{width:54px;height:52px;border-radius:8px;margin-bottom:7px}.node-1 .network-box{width:68px}
 .network-box .service-logo{width:27px;height:27px}.workflow-sheet{padding:18px 12px}
}

.network-node{transform:translate(-50%,-30px)}
@media(max-width:760px){.network-node{transform:translate(-50%,-26px)}}

.checked-network{height:430px;margin-bottom:38px}
.checked-network .network-node{width:86px}
.check-node-4 .network-box,.check-node-6 .network-box,.check-node-7 .network-box{border-color:#9FAE8E;background:#30382F}
.check-node-5 .network-box{border-color:#B6A17B}
.check-node-1 .network-box,.check-node-2 .network-box{border-radius:50%}
@media(max-width:760px){.checked-network{height:730px;margin-bottom:44px}.checked-network .network-node{width:76px}.checked-network .network-name{font-size:11.5px}}

.project-visit{display:flex;align-items:center;min-height:44px;width:fit-content;margin-top:14px;padding:0;color:var(--paper);font:600 14px/1.4 var(--body);text-underline-offset:5px}

/* Offer headline stays inside the viewport, including the full typed phrase. */
.terms .band.a{left:24px;right:24px;transform:none;font-size:clamp(18px,5.6vw,88px);letter-spacing:-.025em;line-height:1.1}
@media(max-width:760px),(orientation:portrait) and (max-width:1024px){
 .terms .band.a{left:20px;right:20px;transform:none;font-size:clamp(18px,5.6vw,52px);justify-content:center}
}
/* From 1100px the rail is shown, fixed at the right edge. The band's words never reach it (255px
   clear at 1280, 290 at 1440, 492 at 1920) but its 24px-inset box ran underneath, so the audit took
   the rail's own letters for the band's backdrop and read 1.63. Inset both sides by the rail's offset
   plus its width plus the same 24px, so the box ends before the rail and the phrase stays centred. */
@media (min-width:1100px){.terms .band.a{left:calc(clamp(12px,1.6vw,26px) + 49px);right:calc(clamp(12px,1.6vw,26px) + 49px)}}
/* The terms line runs over the kopitiam floor, and a terrazzo fleck under a mist letter took it to
   2.84:1. The kopitiam layer is meant to keep its texture away from reading text, so while the terms
   are up a soft graphite strip lies under that line. It is drawn on .terms, not on the band, so it
   fades with the terms, and the audit, which hides the band to grade what is behind it, still sees it. */
.terms::before{content:'';position:absolute;left:0;right:0;top:calc(78vh - 30px);height:84px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(30,31,34,0),rgba(30,31,34,.88) 30%,rgba(30,31,34,.88) 70%,rgba(30,31,34,0))}
@media (max-width:720px){.terms::before{top:calc(74vh - 30px)}}

/* Still kopitiam materials, beneath the film and away from reading columns. */
.kopitiam-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 58% 62%,rgba(205,175,127,.085),transparent 58%)}
.kopitiam-surface{position:absolute;inset:0;background-image:url('../img/kopitiam-terrazzo.svg'),linear-gradient(rgba(216,215,197,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(216,215,197,.045) 1px,transparent 1px);background-size:240px 240px,120px 120px,120px 120px;background-position:center center;mask-image:linear-gradient(90deg,transparent 28%,#000 48%,#000 87%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent 28%,#000 48%,#000 87%,transparent)}
.kopitiam-backdrop::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 58% 61%,transparent 25%,rgba(12,15,16,.18) 100%)}
@media(max-width:760px),(orientation:portrait) and (max-width:1024px){
 .kopitiam-backdrop{background:radial-gradient(ellipse at 50% 68%,rgba(205,175,127,.075),transparent 51%)}
 .kopitiam-surface{background-size:240px 240px,96px 96px,96px 96px;mask-image:linear-gradient(to bottom,transparent 36%,#000 56%,#000 86%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 36%,#000 56%,#000 86%,transparent 100%)}
 .kopitiam-backdrop::after{background:radial-gradient(ellipse at 50% 66%,transparent 28%,rgba(12,15,16,.15) 100%)}
}

/* Contained capsules with a restrained glass edge. */
.intro-cards .capsule{display:flex;align-items:center;gap:5cqw;padding:4cqw;border-radius:999px;container-type:inline-size;overflow:hidden;border:1px solid #ffffff55;background:linear-gradient(145deg,#ffffff1a,transparent 60%),var(--capsule-bg,#dddccf);color:#17221f;box-shadow:inset 0 2px 1px #ffffff66,0 8px 20px #0003;transform-origin:center;min-height:0}
.capsule.green{--capsule-bg:#a7cdb6}.capsule.blue{--capsule-bg:#b3c4d8}.capsule.cream{--capsule-bg:#d9d5bc}.capsule.rose{--capsule-bg:#d9b6ad}.capsule.sage{--capsule-bg:#b8c5aa}.capsule.lilac{--capsule-bg:#c4bfd4}
.capsule-icon{display:grid;place-items:center;flex-shrink:0;width:20cqw;height:20cqw;border-radius:50%;background:#ffffff66;box-shadow:inset 0 1px 2px #fff9;font:600 10cqw/1 var(--body);font-style:normal}
.capsule-icon img{width:65%;height:65%}.capsule-label{font:600 7cqw/1.15 var(--body);letter-spacing:-.02em;max-width:65%;text-transform:none}
.dish-ring{position:absolute;left:0;top:0;z-index:5;pointer-events:none;border:2px solid #F0E7D2;border-radius:50%;box-shadow:0 0 0 3px #25282044,inset 0 0 0 1px #fff4;opacity:0}
html.film-static .dish-ring{display:none}

.intro-cards .capsule{padding:0;gap:0}.capsule-icon{margin-left:5cqw}.capsule-label{margin-left:5cqw}

/* Richer enamel capsules and a live 1.7x food lens. */
.capsule.green{--capsule-bg:#40C982}.capsule.blue{--capsule-bg:#70A8F5}.capsule.cream{--capsule-bg:#EDBE59}.capsule.rose{--capsule-bg:#F18491}.capsule.sage{--capsule-bg:#8FCB66}.capsule.lilac{--capsule-bg:#B69AEE}
.intro-cards .capsule{border-color:#ffffff80;background:linear-gradient(165deg,#ffffff35 0,transparent 45%,#00000012 100%),var(--capsule-bg);color:#14201E;box-shadow:inset 0 2px 1px #ffffff80,inset 0 -2px 2px #0002,0 8px 18px #0005}
.capsule-icon{background:#14201e;color:#F3F3F0;box-shadow:inset 0 1px 1px #ffffff40,0 2px 4px #0003}
.capsule.green .capsule-icon{background:#F3F3F0}.capsule-label{font-weight:600}
.dish-ring{overflow:hidden;background:#252820;box-shadow:0 0 0 3px #25282055,0 8px 18px #0005;border:2px solid #F0E7D2}
.dish-ring canvas{display:block;width:100%;height:100%;border-radius:50%}
.dish-ring::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(135deg,#ffffff26,transparent 35%,transparent 80%,#ffffff0a);box-shadow:inset 0 1px 2px #fff7}

/* Give scroll-scrubbed food turns a full reading and rotation interval. */
html.js:not(.film-static) .ch[data-dish]{height:360vh;height:360svh;}
html.js:not(.film-static) .ch.deal[data-dish]{height:135vh;height:135svh;}
/* Graphite capsules: contrast comes from the rim and raised surface. */
.intro-cards .capsule{background:linear-gradient(155deg,#55585b 0%,#303336 45%,#222528 100%);color:#f3f3f0;border:1px solid #c4c8ca;box-shadow:inset 0 2px 1px #ffffff45,inset 0 -2px 2px #0008,0 8px 20px #0006;}
.intro-cards .capsule-icon{background:#191c1e;color:#f3f3f0;box-shadow:inset 0 1px 1px #ffffff55,0 0 0 1px #ffffff25;}
.intro-cards .capsule.green .capsule-icon{background:#f3f3f0;}
.intro-cards .capsule-label{font-weight:600;font-size:max(13px,7cqw);text-shadow:0 1px 2px #0006;}


html.js:not(.film-static) .ch.deal[data-dish]{height:300vh;height:300svh}html.film-static :is(#deal-typography,.deal-curtain){display:none!important}

/* The Hitam Putih chapters are an iframe over the whole screen at z-index 1000, which left the site's
   WhatsApp button underneath it for all three chapters: the terms, the moment someone is most likely to
   want to write. While the frame shows, the site's own nav (logo and WhatsApp) sits above it, and the
   dock, which the frame covers anyway, steps aside so there is only ever one button. deal-typography.js
   sets deal-on. */
body.deal-on .nav{z-index:1001}
html.js:not(.film-static) body.deal-on:not(.hero-off):not(.film-end) .nav-cta{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s linear,visibility 0s}
body.deal-on .dock{opacity:0;visibility:hidden;pointer-events:none}
/* The side links would sit under the frame, reachable by Tab but covered. They go while it shows, as in the opening. */
body.deal-on .rail{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- 25 Sep 2026: the phone menu, the picked bar, the outro link, a header that does not sit on text ---------- */
.menu-btn{position:relative;display:none;min-height:44px;padding:0 12px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:2px;font:11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
@media (max-width:1099px){.menu-btn{display:inline-flex;align-items:center}.nav .nav-cta{margin-left:auto}}
@media (max-width:480px){.nav{gap:10px}.brand svg{height:21px}.nav .nav-cta{padding:10px 12px}}
.site-menu{position:fixed;left:0;right:0;top:var(--nav-h);z-index:60;display:grid;max-height:calc(100svh - var(--nav-h));overflow:auto;padding:4px clamp(18px,4vw,48px) 16px;background:var(--graphite);border-bottom:1px solid var(--line-dark)}
.site-menu[hidden]{display:none}
.site-menu a{display:flex;align-items:center;min-height:52px;border-top:1px solid var(--line-dark);color:var(--paper);text-decoration:none;font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;font-size:16px;letter-spacing:.01em}
.site-menu a:first-child{border-top:0}
/* A9 (owner's yes, 25 Sep 2026): the still switch in the phone menu as well as the footer. The film shows
   "Use still version"; the still version shows "Play the film". */
.site-menu .menu-mode{display:flex;align-items:center;width:100%;min-height:52px;padding:0;border:0;border-top:1px solid var(--line-dark);background:none;color:var(--paper);font:11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:left;cursor:pointer}
.site-menu .menu-play{display:none}
html.film-static .site-menu .menu-play{display:flex}
body.hero-off .nav::before{background:rgba(30,31,34,.94)}
body.hero-off[data-tone="paper"] .nav::before{background:rgba(243,243,240,.95)}
body.hero-off .nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.12;pointer-events:none}
html{scroll-padding-top:calc(var(--nav-h) + 12px)}
main > section.sec{scroll-margin-top:calc(-1 * (var(--nav-h) + 12px))}
.outro-board{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0;color:inherit;font:600 14px/1.4 var(--body);text-underline-offset:5px}
.pick-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px clamp(18px,4vw,48px) calc(12px + env(safe-area-inset-bottom));background:var(--graphite);color:var(--paper);border-top:1px solid var(--line-dark)}
.pick-bar[hidden]{display:none}
.pick-bar-count{margin:0;font:14px/1.4 var(--body)}
.pick-bar .btn{flex:none;min-height:44px}
html.bar-on{scroll-padding-bottom:84px}
.pack-clear{margin-top:10px;min-height:44px;padding:0;background:none;border:0;color:inherit;font:14px var(--body);text-decoration:underline;text-underline-offset:5px;cursor:pointer;opacity:.85}
.pack-clear[hidden]{display:none}
/* ---------- 25 Sep 2026: the six jobs from the film, readable in one place on the board ---------- */
.six-jobs{margin:28px 0 8px;border:1px solid var(--ink);border-radius:3px;background:var(--paper);color:var(--ink)}
.six-jobs>summary{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;min-height:48px;padding:14px 18px;cursor:pointer}
.six-jobs>summary::-webkit-details-marker{display:none}
.six-jobs>summary span:first-child{font-family:var(--display);font-stretch:var(--display-width);font-weight:var(--display-weight);text-transform:uppercase;font-size:clamp(15px,1.4vw,19px)}
.six-jobs>summary span:first-child::after{content:"\00a0+";font-family:var(--mono)}
.six-jobs[open]>summary span:first-child::after{content:"\00a0\2212"}
.six-hint{font-size:14px;opacity:.75}
.six-list{list-style:none;margin:0;padding:0 18px 8px;display:grid;gap:0}
.six-job{padding:18px 0;border-top:1px solid rgba(20,21,24,.18);display:grid;gap:8px}
.six-job h3{font-size:clamp(17px,1.6vw,22px);margin:0}
.six-dish{margin:-4px 0 2px;font-size:10.5px;opacity:.75}
.six-problem,.six-solution{margin:0;font-size:16px;line-height:1.55;max-width:70ch}
.six-problem .label,.six-solution .label{display:block;margin-bottom:2px;font-size:10.5px;letter-spacing:.1em;opacity:.75}
.six-problem .label::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--accent);vertical-align:middle}
.six-pick{justify-self:start;min-height:44px;padding:0 16px;border:1px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);font:11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.six-pick .on{display:none}
.six-pick[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.six-pick[aria-pressed="true"] .on{display:inline}.six-pick[aria-pressed="true"] .off{display:none}
@media (min-width:900px){.six-list{grid-template-columns:1fr 1fr;column-gap:40px}}

/* A7, reflow at 400% zoom (a 1280x1024 screen shows 320x256). The fixed story box cannot hold a chapter in 256
   pixels, and the WhatsApp dock covered what did fit. On a screen this short the words leave their fixed box and
   scroll with the page, on a solid card, problem above solution; the film keeps playing behind them. The dock and
   the group label go; WhatsApp stays in the header menu's Contact and at the end of the page. The header turns
   solid so the words pass under it cleanly. The Hitam Putih frame is not shown here (deal-typography.js): its
   type is set for a full screen, so its three chapters read as plain cards like the rest. */
@media (max-height:340px){
  :root{--nav-h:56px}
  .nav::before,body.hero-off .nav::before{background:rgba(30,31,34,.96)}
  body[data-tone="paper"] .nav::before{background:rgba(243,243,240,.96)}
  html.js:not(.film-static) :is(.dock,.group,.pain:not(.card),.intro-cards){display:none}
  html.js:not(.film-static) .ch{justify-content:center}
  html.js:not(.film-static) .ch .lede{position:relative;top:auto;left:auto;right:auto;width:auto;height:auto;margin:0 12px;overflow:visible}
  html.js:not(.film-static) .ch .lede-in{position:relative;opacity:1;transform:none;padding:14px 16px;border-radius:6px;background:var(--card-bg,#18191c)}
  html.js:not(.film-static) .ch .story-swap{gap:14px}
  html.js:not(.film-static) .ch .story-swap .blurb{grid-area:auto;opacity:1;filter:none;transform:none;font-size:16px}
  html.js:not(.film-static) .ch0{justify-content:flex-start}
  html.js:not(.film-static) .ch0 .rest{position:relative;top:auto;left:auto;right:auto;bottom:auto;width:auto;margin:calc(var(--nav-h) + 8px) 12px 0;padding:14px 16px;border-radius:6px;background:var(--graphite);opacity:1}
}