/* TokMoore v6 · "Seen twice" — see award-v6/ART-DIRECTION.md (R15.3: the demo marks what changed; everything below multiplies one insight) */
@font-face{font-family:'Space Grotesk';src:url(fonts/space-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url(fonts/manrope-400.woff2) format('woff2');font-weight:400;font-display:swap}
/* secondary text is 78% (R15.2 used 66–68%, read as too faint) */
:root{--w:#ffffff;--k:#111111;--m:#12c98a;--k78:rgba(17,17,17,.78);--w78:rgba(255,255,255,.78);--w16:rgba(255,255,255,.16);--ease:cubic-bezier(.22,1,.36,1);--pad:64px;--d1:clamp(52px,7.8vw,118px);--d2:clamp(44px,6vw,90px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--w);color:var(--k);font:400 17px/1.55 'Manrope',system-ui,sans-serif;overflow-x:clip}
h1,h2,h3,summary,strong,b,th,button,.disc,.slate span,dt{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600}
p,li,td,em,figcaption,dd{font-weight:400}
h1,h2,h3,p,ol,ul,figure,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em,i{font-style:normal}
:focus-visible{outline:3px solid var(--k);outline-offset:4px}
.room :focus-visible,.ways :focus-visible,dialog :focus-visible{outline-color:var(--m)}
::selection{background:var(--m);color:var(--k)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:20;background:var(--k);color:var(--w);padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}
h2{font-size:var(--d2);line-height:.94;letter-spacing:-.045em}
.mint{color:var(--m)}

/* sign system — one meaning each:
   pupil = the brand looking (hero only) · ▶ in a white pill = media control (plays) · "Selected" = chosen ·
   mint outline in a film = what changed, dashed white = what it replaced · +/− = expands · mint disc/dot = book a call */
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--m);margin-right:10px;vertical-align:-1px;flex:none}
.play-i{display:inline-block;flex:none;width:11px;height:13px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);margin-right:10px}
[aria-pressed=true]>.play-i{clip-path:none;background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64%)}
/* one media control: white pill, near-black ▶ and label, near-black hairline so it holds on any film frame */
.ctl{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px 0 18px;border-radius:999px;background:var(--w);color:var(--k);border:2px solid var(--k);font:600 16px/1 'Space Grotesk',sans-serif;white-space:nowrap;transition:transform .26s var(--ease)}
.ctl:hover,button:hover>.ctl,a:hover>.ctl{transform:scale(1.04)}
.ctl-s{height:32px;padding:0 12px 0 11px;font-size:13px}.ctl-s .play-i{width:8px;height:10px;margin-right:7px}
.ctl-i{width:40px;height:40px;padding:0}.ctl-i .play-i{margin:0 0 0 3px}
.tag-c,.tag-k,.pk-s{display:inline-block;font:400 12px/1 'Manrope',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px 4px;border-radius:999px;white-space:nowrap}
.tag-c{background:var(--m);color:var(--k)}
.tag-k{border:1.5px solid currentColor;padding:4px 8px 3px}
.pm{position:relative;flex:none;width:18px;height:18px}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:7.75px;width:18px;height:2.5px;background:currentColor;transition:transform .26s var(--ease)}
.pm::after{transform:rotate(90deg)}
details[open]>summary .pm::after{transform:rotate(0)}

/* slate */
.slate{display:flex;align-items:baseline;gap:14px;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.slate span{font-size:14px;letter-spacing:0;min-width:2ch}
.slate em{margin-left:auto;letter-spacing:.1em;opacity:.78}

/* header */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:40px;height:76px;padding:0 var(--pad);background:var(--w)}
.bar-logo{display:block;flex:none}
.bar-logo .wm{width:220px;height:auto}
.bar-logo .mk{display:none;width:44px;height:44px}
.bar-nav{display:flex;gap:32px;margin-left:auto;font-size:16px}
.bar-nav a,.bar-cta{text-decoration:none}
.bar-nav a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.bar-cta{display:flex;align-items:center;font:600 15px 'Space Grotesk',sans-serif;padding:11px 18px 11px 14px;border:2.5px solid var(--k);border-radius:999px;transition:transform .26s var(--ease)}
.bar-cta:hover{transform:scale(1.04)}

/* eyes (brand only) */
.eye{position:relative;display:block;flex:none;border-radius:50%;overflow:hidden;border:solid var(--k);background:var(--k)}
.eye img{width:100%;height:100%;object-fit:cover}.eye .alt{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}.eye.flip .alt{opacity:1}
.pupil{position:absolute;width:26%;height:26%;left:37%;top:37%;border-radius:50%;background:var(--m);border:solid var(--k);border-width:clamp(2px,.04em,5px);transform:translate(calc(var(--gx,.8)*80%),calc(var(--gy,.1)*80%));transition:transform .26s var(--ease);will-change:transform}

/* 00 hero (R15.4): one large film = the human idea; the four AI versions are the eyes after "AI scales."
   Nothing else on the first screen: no slate, no location tag, no legend; proof sits just below the fold.
   R15.5 composition: two blocks, type | film. The type block is as wide as the title, so the disc's right edge
   sits under the fourth eye and its foot lines up with the film's foot. Nothing overlaps or floats. */
.hero{padding:0 var(--pad)}
.hero-stage{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:1fr auto;justify-content:space-between;column-gap:48px;padding:28px 0 72px}
.hero-title{grid-column:1;grid-row:1;align-self:end;font-size:var(--d1);line-height:.9;letter-spacing:-.045em;margin:0 0 clamp(40px,7vh,72px)}
.hl{display:flex;flex-wrap:wrap;align-items:center;column-gap:.24em;row-gap:.08em}
.hl-2{margin-top:.02em}
.hw{white-space:nowrap}
.eyes{display:flex;gap:.1em}
.hero .eye{width:.7em;height:.7em;border-width:.084em}
.hero .eye{animation:bud .9s var(--ease) both}
.hero .e1{animation-delay:.55s}.hero .e2{animation-delay:.64s}.hero .e3{animation-delay:.73s}.hero .e4{animation-delay:.82s}
@keyframes bud{from{transform:scale(0)}}
.hero-film{grid-column:2;grid-row:1/3;align-self:start;position:relative;margin:0;width:min(400px,calc((100svh - 196px) * .5625),30vw)}
.hf-frame{position:relative;width:100%;aspect-ratio:9/16;border-radius:50% 50% 28px 28px/28.125% 28.125% 28px 28px;overflow:hidden;background:var(--k)}
.hf-frame img,.hf-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-frame img{animation:settle 1.8s var(--ease) both}
.hf-frame video{opacity:0;transition:opacity .64s var(--ease)}
.hf-frame.is-playing video{opacity:1}
@keyframes settle{from{transform:scale(1.08)}}
.hero-film figcaption{position:absolute;top:100%;left:0;right:0;display:grid;gap:3px;margin-top:14px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}.hero-film figcaption span+span{color:var(--k78)}
.versions{display:none}
.hero-foot{grid-column:1;grid-row:2;display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.hero-sub{font-size:21px;line-height:1.45;max-width:30ch}
.hero-act{display:flex;align-items:center;gap:28px;margin-top:24px}
.text-link{display:inline-flex;align-items:center;gap:8px;font:600 17px 'Space Grotesk',sans-serif;text-decoration:none}
.down{display:inline-block;font-style:normal}
.disc{display:grid;place-items:center;flex:none;width:144px;height:144px;border-radius:50%;background:var(--m);color:var(--k);text-decoration:none;text-align:center;font-size:18px;line-height:1.1;letter-spacing:-.01em;transition:transform .26s var(--ease)}
.disc span{font-family:'Space Grotesk',sans-serif;font-weight:600}
.disc:hover{transform:scale(1.06) rotate(-4deg)}
.pill-cta{display:none;align-items:center;justify-content:center;background:var(--m);color:var(--k);text-decoration:none;font:600 17px 'Space Grotesk',sans-serif;border-radius:999px;padding:15px 22px 15px 18px}
.pill-cta .dot{background:var(--k);width:10px;height:10px}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:24px 0 56px;border-top:1.5px solid var(--k)}
.proof li{display:grid;align-content:start;row-gap:6px;font-size:15px;line-height:1.45}
.proof strong{font-size:22px;line-height:1.2;letter-spacing:-.015em}
.proof span{color:var(--k78)}

/* 01 screening room. R15.5: as calm as the hero. One type scale (labels 13 caps · body 17 · names 22 · titles 30),
   hairlines instead of boxes, and the secondary detail folded: lever lists are read in the card, not on every button. */
.room{background:var(--k);color:var(--w);padding:80px var(--pad) 72px}
.room h2{font-size:var(--d2)}
.room-head{display:grid;grid-template-columns:7fr 5fr;gap:0 24px;align-items:end}.room-head>.slate{grid-column:1/-1}
.room-head h2{margin-top:32px}
.brief{padding-bottom:6px}
.brief-label,.side-label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--w78)}
.brief-quote{font:600 34px/1.12 'Space Grotesk',sans-serif;letter-spacing:-.02em;margin-top:14px;max-width:18ch}

.stage{display:grid;grid-template-columns:592px minmax(0,1fr);grid-template-areas:"screens side" "screens changes" "clock changes";grid-template-rows:auto auto 1fr;column-gap:96px;margin-top:52px}
.screens{grid-area:screens;display:flex;align-items:flex-start;gap:16px}
.screen{width:276px}
.screen-cap{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;font:600 22px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.01em}
.screen-cap .tag-c,.screen-cap .tag-k{margin-left:auto;padding:0;border:0;border-radius:0;background:none;font-size:13px;letter-spacing:.14em;color:var(--w78)}
.s-ver .screen-cap .tag-c{color:var(--m)}
.frame{position:relative;aspect-ratio:9/16;border-radius:138px 138px 24px 24px;overflow:hidden;background:#111111;border:4px solid var(--w)}
.s-ver .frame{border-color:var(--m)}
.frame video{width:100%;height:100%;object-fit:cover;transition:opacity .26s var(--ease)}
.stage.loading .s-ver video{opacity:.4}
.screens-arrow{align-self:center;margin-top:42px;font:600 22px 'Space Grotesk',sans-serif;color:var(--w78)}
.ab{display:none}
/* the change, marked in the picture: mint outline on the version, dashed white on the original */
.mark{position:absolute;left:calc(var(--x,0)*100%);top:calc(var(--y,0)*100%);width:calc(var(--w,0)*100%);height:calc(var(--h,0)*100%);border-radius:14px;pointer-events:none;opacity:0;transform:scale(1.18);transition:opacity .26s var(--ease),transform .64s var(--ease)}
.mark.on{opacity:1;transform:none}
.mark.snap{transition:none}
.mark-v{border:3px solid var(--m);box-shadow:0 0 0 2px rgba(17,17,17,.55)}
.mark-o{border:2.5px dashed var(--w);box-shadow:0 0 0 2px rgba(17,17,17,.45)}
.fcap{position:absolute;left:10px;right:10px;bottom:10px;display:block;padding:10px 12px 11px;border-radius:16px;font:400 15px/1.3 'Manrope',sans-serif;color:var(--k);pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .26s var(--ease),transform .64s var(--ease)}
.fcap.on{opacity:1;transform:none}.fcap.snap{transition:none}
.fcap b{display:block;font:600 13px/1.2 'Space Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.fcap-v{background:var(--m)}.fcap-o{background:var(--w)}

.clock{grid-area:clock;display:grid;gap:16px;margin-top:28px;width:568px;align-self:start}
.clock-top{display:flex;align-items:center;gap:20px}
.play{min-width:150px}
.time{font:400 17px 'Manrope',sans-serif;color:var(--w78);font-variant-numeric:tabular-nums}
.track-v{display:grid;gap:10px}
.lane{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:12px}
.lane-n{font:600 17px 'Space Grotesk',sans-serif;color:var(--w78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane-v .lane-n{color:var(--m)}
.rail{position:relative;height:24px}
.rail::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:var(--w16)}
.fill{position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:var(--w);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.lane-v .fill{background:var(--m)}
.mk-v{position:absolute;top:0;left:calc(var(--t) * (100% - 24px));width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 'Space Grotesk',sans-serif;background:var(--m);color:var(--k);border:0;padding:0;cursor:pointer;transition:transform .26s var(--ease)}
.mk-v:hover,.mk-v.on{transform:scale(1.3)}
.secs{display:flex;justify-content:space-between;margin-left:144px;font-size:13px;color:var(--w78)}
.secs span:not(:first-child):not(:last-child){visibility:hidden}

.side{grid-area:side;align-self:start;max-width:560px}
.side-label{margin-bottom:14px}
.picker{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.picker button{position:relative;display:grid;grid-template-columns:48px 1fr;align-items:center;gap:14px;width:100%;text-align:left;padding:8px 16px 8px 8px;border:2px solid var(--w16);border-radius:999px;transition:transform .26s var(--ease)}
.picker button:hover{transform:translateX(3px)}
.picker img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--k)}
.pk-t{font-size:18px;letter-spacing:-.01em;line-height:1.2}
.pk-t b{font-size:13px;color:var(--m);margin-right:4px}
/* the lever list is folded into the card below; kept for screen readers */
.pk-t small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pk-s{display:none}
.picker [aria-pressed=true]{border-color:var(--m);background:rgba(255,255,255,.07)}
.card{margin-top:40px}
.card-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.card-head img{width:56px;height:56px;flex:none;transition:transform .26s var(--ease)}
.card.talk .card-head img{transform:scale(1.06)}
.card-title{font:600 30px/1.1 'Space Grotesk',sans-serif;letter-spacing:-.025em}
.card-title b{font-size:17px;color:var(--m);vertical-align:5px;margin-right:6px}
.card-rows{display:grid}
.card-rows>div{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:baseline;padding:14px 0;border-top:1.5px solid var(--w16)}
.card-rows dt{font:400 13px 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--w78)}
.card-rows>div:first-child dt{color:var(--m)}
.card-rows dd{font-size:17px;line-height:1.45}
.card-rows>div:first-child dd{font-size:20px;line-height:1.4}

.changes{grid-area:changes;margin-top:36px;max-width:560px;align-self:start}
.beats{display:grid;border-bottom:1.5px solid var(--w16)}
.beats button{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:16px;width:100%;text-align:left;padding:14px 0;border-top:1.5px solid var(--w16);transition:transform .26s var(--ease)}
.beats button:hover{transform:translateX(3px)}
.beats .bn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--w78);font-size:13px}
.beats .bx{font:400 17px/1.4 'Manrope',sans-serif}
.beats .bx b{display:block;font:400 13px 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--w78);margin-bottom:4px}
.beats .bt{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.beats .ctl-i{width:40px;height:40px}
.beats li.on .bn{background:var(--m);border-color:var(--m);color:var(--k)}
.beats li.on .bx b{color:var(--m)}

.room-note{margin-top:32px;font-size:15px;color:var(--w78)}
/* the deeper layer */
.deep{margin-top:28px;border-top:1.5px solid var(--w16);border-bottom:1.5px solid var(--w16)}
.deep summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;font-size:21px;letter-spacing:-.01em;cursor:pointer}
.deep summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.matrix-wrap{padding-bottom:28px}
.matrix{width:100%;border-collapse:collapse;table-layout:fixed}
.matrix .corner,.matrix tbody th{width:168px}
.matrix th,.matrix td{text-align:left;vertical-align:top;padding:13px 14px 13px 0;font-size:16px;line-height:1.4}
.matrix thead th{font-size:16px;padding-bottom:12px}
.matrix tbody tr>*{border-top:1.5px solid var(--w16)}
.matrix tbody th{font:400 13px 'Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--w78);padding-top:16px}
.matrix td.k{color:var(--w78)}
.matrix .tag-c{display:table;margin-bottom:6px}
.why-row td{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;line-height:1.25;letter-spacing:-.01em}

/* 02 work */
.work{padding:88px var(--pad) 80px}
.work-grid{display:grid;grid-template-columns:4fr 8fr;gap:24px 88px;margin-top:32px;align-items:start}
.lead{position:sticky;top:112px;max-width:420px}
.lead-btn{position:relative;display:block;width:100%;border-radius:50% 50% 24px 24px/28.125% 28.125% 24px 24px;overflow:hidden;background:var(--k)}
.lead-video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.lead-play{position:absolute;left:20px;bottom:20px}
.lead figcaption{margin-top:14px;font-size:16px}
.lead figcaption span{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--k78);margin-bottom:4px}
.work-body h2{font-size:var(--d2)}
.work-note{font-size:17px;color:var(--k78);max-width:58ch;margin-top:20px}
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:28px}
.results li{display:grid;grid-template-columns:1fr;align-content:start;padding:16px 0 20px;border-top:1.5px solid var(--k)}
.results .x{grid-column:1/-1;font:600 16px 'Space Grotesk',sans-serif;letter-spacing:-.01em;margin-bottom:8px}
.results .x b{display:inline-grid;place-items:center;width:24px;height:24px;margin:0 5px;border-radius:50%;background:var(--m);color:var(--k);font-size:17px;line-height:1;vertical-align:1px}
.results strong{font-size:clamp(40px,3.6vw,52px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.results .u{font:600 18px 'Space Grotesk',sans-serif;letter-spacing:-.01em;margin-top:4px}
.results .d{grid-column:1/-1;font-size:15px;line-height:1.45;color:var(--k78);margin-top:10px;max-width:46ch}
.reel-wrap{margin-top:32px}
.reel-label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:var(--k78)}
.reel-cue{display:none}
.reel{display:flex;gap:14px}
.reel li{flex:1 1 0;min-width:0}
.reel button{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left}
.thumb{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:50% 50% 12px 12px/28.125% 28.125% 12px 12px;overflow:hidden;background:var(--k)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .64s var(--ease)}
.thumb .ctl-i{position:absolute;left:8px;bottom:8px;width:36px;height:36px}
.reel button:hover .thumb img{transform:scale(1.06)}
.reel .cap{display:block;font-family:'Manrope',system-ui,sans-serif;font-weight:400;margin-top:10px;font-size:14px;line-height:1.35}

/* 03 how */
.how{display:grid;grid-template-columns:7fr 5fr;column-gap:24px;padding:0 var(--pad) 88px;position:relative}.how::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);border-top:1.5px solid var(--k)}
.how-head{padding-top:48px}.track{grid-column:1/-1}.how-head h2{margin-top:28px}
.track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0 24px;margin-top:48px;padding-top:34px}
.p2,.p4{grid-column:span 2}.track-scale{position:absolute;inset:0 0 auto 0;display:grid;gap:0 24px;grid-template-columns:repeat(6,1fr);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--k78)}
.bars{display:flex;gap:24px;height:20px;margin-bottom:20px}
.bars i{display:block;height:100%;border-radius:999px;background:var(--k)}
.bars .min{flex:1}
.bars .opt{flex:1;background:none;border:2.5px dashed var(--k)}
.p1 .bars .min{background:var(--m)}
/* phase glyph: frames = films; outlined = a new idea, filled = a version, mint = the winner */
.g{display:flex;align-items:flex-end;gap:5px;height:40px;margin-bottom:14px}
.g i{display:grid;place-items:center;flex:none;width:18px;height:32px;border-radius:9px 9px 3px 3px;background:var(--k);color:var(--w);font:400 9px/1 'Manrope',sans-serif;letter-spacing:.04em}
.g i.o{background:var(--w);border:2.5px solid var(--k)}
.g i.win{background:var(--m);border:2.5px solid var(--k)}
.g i.off{opacity:.22}
.g i.l{width:28px}
.g b{font-size:15px;margin:0 3px;align-self:center}
.ph-time{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--k78)}
.phase h3{font-size:28px;letter-spacing:-.025em;line-height:1.1;margin:8px 0 10px}
.phase p:last-child{font-size:16px;max-width:36ch}
.system{grid-column:2;grid-row:1;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.mix{display:flex;gap:8px;flex:none}
.mix .f{width:24px;height:42px;border-radius:12px 12px 4px 4px;border:2.5px solid var(--k)}
.mix .ver{background:var(--k)}
.sys-num{font:600 clamp(28px,3.4vw,46px)/1 'Space Grotesk',sans-serif;letter-spacing:-.035em;margin-bottom:14px}
.sys-num strong small{font-size:.6em}
.sys-num .sep{opacity:.4;margin:0 .2em}
.sys-num .sn{display:block;white-space:nowrap}.sys-num .sep{display:none}
.system-copy>p:last-child{max-width:62ch;font-size:17px}

/* 04 hire */
.hire{background:var(--m);color:var(--k);padding:80px var(--pad) 72px}
.hire-head h2{margin-top:28px;font-size:var(--d2);max-width:14ch}
.services{margin-top:32px;border-bottom:1.5px solid var(--k)}
.services li{display:grid;grid-template-columns:48px 4fr 5fr 3fr;column-gap:24px;align-items:center;padding:16px 0;border-top:1.5px solid var(--k)}
.services .n{font:600 14px 'Space Grotesk',sans-serif}
.mx{font:600 clamp(30px,3.6vw,54px)/1 'Space Grotesk',sans-serif;letter-spacing:-.045em;white-space:nowrap}
.services h3{font-size:20px;line-height:1.15;letter-spacing:-.015em;margin-bottom:3px}
.services p{font-size:16px;max-width:44ch}
.multi{display:flex;align-items:center;gap:5px;height:40px}
.multi i{display:grid;place-items:center;flex:none;width:16px;height:28px;border-radius:8px 8px 3px 3px;background:var(--k);color:var(--w);font:400 9px/1 'Manrope',sans-serif;letter-spacing:.04em}
.multi i.o{background:var(--w);border:2.5px solid var(--k)}
.multi i.l{width:24px}
.multi i.cut{width:12px;height:20px}
.multi i.w{width:auto;height:24px;padding:0 8px;border-radius:999px;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.multi i.win{background:var(--w);border:2.5px solid var(--k)}
.multi i.big{width:22px;height:38px;border-radius:11px 11px 4px 4px;background:var(--w);border:2.5px solid var(--k)}
.multi b{font-size:15px;margin:0 4px}
.ways-band{display:grid;grid-template-columns:4fr 8fr;gap:24px;align-items:start;background:var(--k);color:var(--w);padding:80px var(--pad) 88px}
.ways-title{font-size:clamp(34px,4vw,58px);line-height:.98;letter-spacing:-.04em;padding-top:4px}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ways a{position:relative;display:block;color:var(--w);text-decoration:none;padding:26px 26px 64px;border-radius:28px;border:1.5px solid rgba(255,255,255,.3);min-height:220px;transition:transform .26s var(--ease)}
.ways a:hover{border-color:var(--m);transform:translateY(-4px)}
.ways small{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--m);margin-bottom:14px}
.ways span{display:block;font:600 22px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.02em;max-width:18ch}
.ways i{position:absolute;right:26px;bottom:22px;font:600 26px 'Space Grotesk',sans-serif}

/* 05 start: the first month, as a spec sheet */
.start{display:grid;grid-template-columns:5fr 7fr;gap:24px 88px;padding:88px var(--pad) 80px}
.start-head{position:sticky;top:112px;align-self:start}.start-head h2{margin-top:28px}
.start-sub{font-size:20px;line-height:1.45;max-width:30ch;margin-top:22px}
.weeks{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:6px;margin-top:36px;max-width:440px}
.weeks li{display:grid;gap:4px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--k);font-size:15px}
.weeks li:last-child{background:var(--k);color:var(--w)}
.weeks b{font-size:13px;letter-spacing:.06em;text-transform:uppercase}.weeks span{white-space:nowrap}
.spec{border-bottom:1.5px solid var(--k)}
.spec>div{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:16px 0 18px;border-top:1.5px solid var(--k)}
.spec dt{font-size:21px;letter-spacing:-.015em;line-height:1.2}
.spec dd{font-size:18px;line-height:1.5;max-width:52ch}

/* 06 next (white closing room in the 60/28/12 mix) */
.next{display:grid;grid-template-columns:7fr 5fr;gap:24px;background:var(--w);color:var(--k);padding:72px var(--pad) 80px;border-top:1.5px solid var(--k);margin:0 var(--pad);padding-left:0;padding-right:0}
.next-host{display:flex;align-items:center;gap:22px;margin-top:28px}
.brand-face{position:relative;flex:none;width:112px;height:112px;border-radius:50%;background:var(--w);overflow:hidden;border:2.5px solid var(--k)}
.brand-face img{position:absolute;width:74%;height:auto;left:13%;top:13%}
.brand-face video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(var(--vs,1.071));transition:opacity .2s linear}
.brand-face.is-playing video{opacity:1}
.brand-face.is-playing img{opacity:0}
.say{font:600 22px 'Space Grotesk',sans-serif;letter-spacing:-.01em;position:relative;background:var(--k);color:var(--w);padding:12px 18px;border-radius:22px 22px 22px 4px}
.next h2{font-size:clamp(52px,8.6vw,128px);margin:28px 0 24px}
.next-act{display:flex;align-items:center;gap:40px}.next-sub{font-size:19px;max-width:26ch;color:var(--k78)}
.faq{align-self:end}
.faq h3{font-size:28px;letter-spacing:-.02em;margin-bottom:18px}
.faq details{border-top:1.5px solid var(--k)}
.faq details:last-child{border-bottom:1.5px solid var(--k)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-size:19px;letter-spacing:-.01em}
.faq details p{padding:0 0 22px;color:var(--k78);font-size:17px;max-width:46ch}

/* footer */
.foot{display:grid;grid-template-columns:3fr 3fr 2fr 3fr 3fr;gap:24px;align-items:center;padding:40px 0 48px;font-size:15px;border-top:1.5px solid var(--k);margin:0 var(--pad)}
.foot a{text-decoration:none}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot-nav a:hover,.foot>a:hover{text-decoration:underline;text-underline-offset:5px}

/* 404 (same chrome as the home page) */
.lost{min-height:calc(100svh - 76px - 140px);padding:96px var(--pad) 120px}
.lost h1{font-size:var(--d1);line-height:.9;letter-spacing:-.045em;margin:40px 0 28px}
.lost-sub{font-size:21px;max-width:30ch;margin-bottom:36px}
.lost .pill-cta{display:inline-flex}

/* film dialog */
dialog{border:0;padding:20px;background:var(--k);color:var(--w);max-width:min(92vw,520px);border-radius:24px}
dialog::backdrop{background:rgba(17,17,17,.88)}
dialog video{width:100%;max-height:76vh;background:var(--k)}
dialog p{margin-top:12px;font-size:15px;color:var(--w78)}
#close-film{display:flex;margin:0 0 12px auto;height:40px;font-size:15px}

/* colour mix A (R15): ?mix=a — closing room on #111, "ways in" cards on mint */
.mix-a .next{background:var(--k);color:var(--w);margin:0;padding:104px var(--pad);border-top:0}
.mix-a .next .next-sub,.mix-a .next .faq details p{color:var(--w78)}
.mix-a .next .faq details{border-color:rgba(255,255,255,.3)}
.mix-a .next .say{background:var(--w);color:var(--k)}
.mix-a .next :focus-visible{outline-color:var(--m)}
.mix-a .ways-band{background:var(--m);color:var(--k)}
.mix-a .ways-band .mint{color:var(--k)}
.mix-a .ways a{background:var(--k);border-color:var(--k)}

/* R15.4 craft: one grade for every film/still (they come from different sources), and one entrance:
   section titles and media rise in once, 900 ms, staggered 70 ms. Transform/opacity only; off with reduced motion. */
.hf-frame img,.hf-frame video,.frame video,.lead-video,.thumb img,.eye img,.vs img,.picker img{filter:saturate(.9) contrast(1.04)}
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.rv.in{opacity:1;transform:none}

/* ---------- tablet ---------- */
@media (min-width:761px) and (max-width:1180px){
  :root{--pad:40px}
  .hero-foot{grid-column:1/9;flex-direction:column;align-items:flex-start;gap:24px}.hero-film .disc{width:120px;height:120px;font-size:16px;left:-56px}
  .stage{grid-template-columns:1fr;grid-template-areas:"side" "screens" "clock" "changes";grid-template-rows:none;row-gap:0}
  .side{max-width:none;padding-top:0;margin-bottom:28px}
  .clock,.changes{width:min(600px,100%)}
  .work-grid{grid-template-columns:5fr 7fr;gap:24px 40px}.results{grid-template-columns:1fr}
  .reel{flex-wrap:wrap}.reel li{flex:0 0 calc(25% - 11px)}
  .ways-band{grid-template-columns:1fr}.ways{grid-template-columns:1fr 1fr 1fr}
  .services li{grid-template-columns:40px 1fr 1fr;row-gap:8px}.multi{grid-column:2/4}
  .start{grid-template-columns:1fr}.start-head{position:static}
}

/* ---------- mobile, designed separately ---------- */
@media (max-width:760px){
  :root{--pad:20px;--d1:clamp(40px,11.6vw,46px);--d2:clamp(36px,10vw,44px)}
  body{font-size:16px;line-height:1.5}
  html{scroll-padding-top:64px}
  .bar{height:60px;gap:16px}
  .bar-logo .wm{display:none}
  .bar-logo .mk{display:block;width:40px;height:40px}
  .bar-nav{gap:18px;font-size:15px}
  .bar-nav a:first-child,.bar-cta{display:none}
  .slate em{display:none}
  /* mobile hero (R15.5): the original film full width, cropped 4:5; the four versions sit on its foot as one row
     of eyes (half on the picture, half below), each named underneath. No narrow side column. */
  .hero-stage{display:flex;flex-direction:column;padding:20px 0 36px}
  .hero-title{line-height:.94;margin:0;align-self:auto}
  .hero .eyes{display:none}
  .hero-film{order:2;display:flex;flex-direction:column;margin-top:20px;width:100%}
  .hero-film figcaption{order:3}
  .hf-frame{width:100%;aspect-ratio:4/5;border-radius:50% 50% 20px 20px/40% 40% 20px 20px}
  .hf-frame img,.hf-frame video{object-position:50% 30%}
  .versions{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;column-gap:8px;margin-top:-38px;text-decoration:none}
  .vs{display:grid;justify-items:center;gap:6px;text-align:center}
  .vs img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:6px solid var(--k);background:var(--k)}
  .vs small{font-size:13px;line-height:1.2;white-space:nowrap}
  .vs-t{grid-column:1/-1;order:5;justify-self:start;margin-top:16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
  .hero-film figcaption{position:static;display:block;margin-top:4px;font-size:12px;letter-spacing:.1em;color:var(--k78)}
  .hero-film figcaption span{display:inline}.hero-film figcaption span+span::before{content:" · "}
  .hero-foot{order:3;flex-direction:column;align-items:stretch;gap:0;margin-top:22px}
  .hero-sub{font-size:17px;line-height:1.45;max-width:none}
  .hero-act{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;margin-top:20px;padding:0}
  .disc{display:none}
  .pill-cta{display:flex}
  .text-link{justify-content:center;font-size:16px;padding:10px 0}
  .proof{grid-template-columns:1fr;gap:14px;padding:20px 0 48px}
  .proof strong{font-size:18px}

  /* mobile room (R15.5): the picker is the hero's row of four eyes; one compare film; hairline rows, no boxes */
  .room{padding:56px var(--pad) 48px}
  .room-head{grid-template-columns:1fr;gap:20px}
  .room-head h2{margin-top:24px}
  .brief-quote{font-size:24px;margin-top:10px}
  .stage{display:flex;flex-direction:column;margin-top:28px}
  .side{display:contents}
  .side-label{margin-bottom:12px;font-size:12px}
  .side>.side-label{order:1}
  .picker{order:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:start}
  .screens{order:3;flex-direction:column;align-items:center;gap:0;margin-top:24px}
  .clock{order:4;width:100%;margin-top:16px;gap:10px}
  .card{order:5;margin-top:24px}
  .changes{order:6;width:100%;margin-top:20px}
  .picker button{grid-template-columns:1fr;justify-items:center;gap:8px;padding:0;border:0;border-radius:0;text-align:center;background:none}
  .picker [aria-pressed=true]{background:none}
  .picker button:hover{transform:none}
  .picker img{width:60px;height:60px;box-shadow:0 0 0 2px var(--w16)}
  .picker [aria-pressed=true] img{box-shadow:0 0 0 3px var(--m)}
  .pk-t{font-size:14px;line-height:1.2}.pk-t b{display:block;font-size:12px;margin:0 0 2px}
  .card-head{gap:12px;margin-bottom:12px}
  .card-head img{width:44px;height:44px}
  .card-title{font-size:22px}
  .card-rows>div{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .card-rows dt{font-size:12px}
  .card-rows dd,.card-rows>div:first-child dd{font-size:16px}
  .card-rows>div:first-child dd{font-size:17px}
  .screens-arrow{display:none}
  .ab{order:-1;display:flex;width:100%;margin-bottom:14px;border:2px solid var(--w16);border-radius:999px;padding:3px}
  .ab button{flex:1;padding:9px 10px;border-radius:999px;font-size:15px}
  .ab [aria-pressed=true]{background:var(--w);color:var(--k)}
  .screen{width:min(250px,66vw)}
  .frame{border-radius:125px 125px 20px 20px}
  .screen-cap{display:none}
  .stage[data-view=ver] .s-orig,.stage[data-view=orig] .s-ver{display:none}
  .fcap{font-size:14px;left:8px;right:8px;bottom:8px}
  .clock{width:100%}
  .clock-top{gap:14px}
  .play{min-width:0;height:42px;font-size:15px}
  .time{font-size:15px}
  .lane{grid-template-columns:104px 1fr;gap:8px}
  .lane-n{font-size:14px}
  .secs{margin-left:112px;font-size:12px}
  .beats button{grid-template-columns:28px 1fr 40px;gap:12px;padding:10px 0}
  .beats .bx{font-size:16px}
  .beats .bx b{font-size:12px}
  .room-note{margin-top:24px;font-size:14px}  .deep summary{font-size:18px;padding:18px 0}.deep{margin-top:20px}
  .matrix .corner,.matrix tbody th{width:84px}
  .matrix :is(th,td):nth-child(n+3){display:none}
  .matrix[data-sel="1"] :is(th,td):nth-child(3),.matrix[data-sel="2"] :is(th,td):nth-child(4),.matrix[data-sel="3"] :is(th,td):nth-child(5),.matrix[data-sel="4"] :is(th,td):nth-child(6){display:table-cell}
  .matrix th,.matrix td{font-size:15px;padding:11px 10px 11px 0}
  .matrix tbody th{font-size:11px;letter-spacing:.08em}
  .why-row td{font-size:15px}

  .work{padding:56px var(--pad) 48px}
  .work-grid{grid-template-columns:1fr;gap:24px;margin-top:24px}
  .lead{position:relative;top:auto;max-width:none;display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:end}
  .lead-btn{border-width:5px;border-radius:80px 80px 16px 16px}
  .lead-play{left:8px;bottom:8px;height:36px;padding:0 12px 0 11px;font-size:13px}
  .lead-play .play-i{margin-right:6px;width:8px;height:10px}
  .lead figcaption{margin:0}
  .work-body{display:contents}
  .work-body h2{order:-1}
  .work-grid{display:flex;flex-direction:column}.work-grid>*,.work-body>*{min-width:0}
  .work-note{margin-top:-8px;font-size:16px}
  .results{grid-template-columns:1fr 1fr;gap:0 16px;margin-top:0}
  .results li{grid-template-columns:1fr;padding:12px 0 14px}
  .results li:last-child{grid-column:1/-1}
  .results .x{font-size:13px;line-height:1.3;margin-bottom:6px}
  .results .x b{width:18px;height:18px;font-size:13px;margin:0 3px}
  .results strong{font-size:36px}
  .results .u{font-size:15px}
  .results .d{font-size:14px;margin-top:4px}
  .reel-wrap{margin:0 calc(-1 * var(--pad));min-width:0;width:calc(100% + 2 * var(--pad))}
  .reel-label{padding:0 var(--pad)}
  .reel{overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 var(--pad) 8px;scrollbar-width:none}
  .reel::-webkit-scrollbar{display:none}
  .reel li{flex:0 0 104px;scroll-snap-align:start}

  .how{padding:0 var(--pad) 56px}.how-head{padding-top:40px}.how-head h2{margin-top:20px}
  .track{grid-template-columns:1fr 1fr;gap:24px 16px;margin-top:28px;padding-top:0}
  .track-scale{display:none}.p2,.p4{grid-column:auto}.bars{gap:8px}
  .phase .bars{width:calc(var(--mx) / 2 * 100%)}
  .p1{--mx:1}.p2{--mx:2}.p3{--mx:1}.p4{--mx:2}
  .bars{margin-bottom:12px;height:14px}
  .g{height:34px;margin-bottom:10px}
  .phase h3{font-size:20px;margin:4px 0 6px}.phase p:last-child{font-size:15px}
  .g{gap:4px}.g i{width:14px;height:26px}.g i.l{width:22px}.ph-time{font-size:12px;letter-spacing:.1em}
  .system{flex-direction:column;align-items:flex-start;gap:16px;margin-top:32px;padding-top:28px}
  .mix{gap:6px}.mix .f{width:20px;height:36px}

  .hire{padding:56px var(--pad) 48px}.hire-head h2{margin-top:20px}
  .services{margin-top:24px}
  .services li{grid-template-columns:28px 1fr;gap:4px 10px;padding:12px 0}
  .services .n{align-self:baseline}
  .mx{font-size:30px}
  .sv{grid-column:2}.multi{display:none}
  .services p{font-size:16px}
  .ways-band{grid-template-columns:1fr;gap:20px;padding:48px var(--pad) 56px}
  .ways{grid-template-columns:1fr;gap:10px}
  .ways a{min-height:0;padding:18px 56px 18px 20px;border-radius:22px}.ways small{margin-bottom:8px}
  .ways span{font-size:19px}

  .start{grid-template-columns:1fr;gap:24px;padding:56px var(--pad) 48px}.start-head{position:static}.start-head h2{margin-top:20px}
  .start-sub{font-size:17px}
  .weeks{max-width:none;margin-top:20px}.start-sub{margin-top:14px}
  .weeks li{padding:10px 10px;font-size:14px}
  .spec>div{grid-template-columns:1fr;gap:4px;padding:14px 0 16px}
  .spec dt{font-size:18px}
  .spec dd{font-size:16px}

  .next{grid-template-columns:1fr;gap:36px;padding:56px 0 48px}.next-host{margin-top:20px}.next h2{margin:20px 0 14px}.next-sub{margin-bottom:24px}
  .mix-a .next{padding:64px var(--pad)}
  .brand-face{width:96px;height:96px}
  .say{font-size:17px}
  .next-sub{font-size:17px}
  .next .disc{display:inline-grid;width:auto;height:auto;border-radius:999px;padding:16px 26px;font-size:17px}
  .next .disc br{display:none}
  .faq details p{font-size:16px}
  .foot{grid-template-columns:1fr 1fr;gap:14px 16px;padding:24px 0 28px;font-size:14px}.foot>.bar-logo{grid-column:1/-1}
}
/* R15.5 mobile compaction: keep the air that frames a focal point, drop the air between labels and their content */
@media (max-width:760px){
  .how{display:block}
  .system{border-top:1.5px solid var(--k)}
  .next-act{flex-direction:column;align-items:flex-start;gap:20px}
  .hf-frame{aspect-ratio:5/6}
  .vs-t{margin-top:12px}
  .hero-foot{margin-top:18px}
  .proof{gap:12px}.proof li{font-size:14px;row-gap:2px}
  .card-rows>div{grid-template-columns:72px 1fr;gap:10px}
  .results li{padding:10px 0 12px}
  .spec>div{padding:12px 0 14px}
  .faq h3{font-size:24px;margin-bottom:10px}
  .faq summary{padding:15px 0;font-size:17px}
  .reel-wrap{margin-top:4px}
  /* the list of changes folds away on a phone: the caption in the film names each change as it plays,
     and the numbered markers on the timeline (32 px, real buttons here) replay it */
  .changes{display:none}
  .rail{height:32px}.rail::before{top:15px}.fill{top:14px}
  .mk-v{width:32px;height:32px;left:calc(var(--t) * (100% - 32px));font-size:14px}
  .mk-v:hover,.mk-v.on{transform:scale(1.15)}
  .lane{align-items:center}
  .work-note{font-size:15px}
  :root{--d2:clamp(34px,9.4vw,40px)}
  .room{padding:48px var(--pad) 40px}
  .work{padding:48px var(--pad) 40px}
  .how{padding-bottom:48px}.how-head{padding-top:36px}
  .hire{padding:48px var(--pad) 40px}.hire-head h2{max-width:none}
  .ways-band{padding:44px var(--pad) 48px}
  .ways span{max-width:none;font-size:18px}
  .start{padding:48px var(--pad) 40px}.spec{border-bottom:0}.spec dd{font-size:15px}
  .next{padding:48px 0 40px;gap:32px}.next-sub{max-width:none}
  .brand-face{width:80px;height:80px}
  .lead{grid-template-columns:140px 1fr}.lead-btn{border-radius:70px 70px 14px 14px}
  .reel li{flex-basis:96px}
  .mx{font-size:26px}
  .hero-stage{padding:16px 0 28px}
  .proof{padding:18px 0 40px}
  .room-head{gap:16px}.room-head h2{margin-top:20px}
  .faq summary{padding:13px 0}
  .next h2{font-size:46px}
  .card-head{margin-bottom:8px}
  .system{gap:12px;margin-top:24px;padding-top:24px}
  .track{gap:20px 16px;margin-top:24px}
  .phase p:last-child{line-height:1.45}
  .secs{display:none}
  .ab{margin-bottom:10px}
  .room-note{margin-top:20px}.deep{margin-top:16px}
}
/* R15.5b prelaunch fixes (390x844) */
@media (max-width:760px){
  /* the Book CTA is on the first screen again: film 350x380 (was 350x420), tighter gaps between hero blocks */
  .hf-frame{aspect-ratio:35/38}
  .hero-film{margin-top:14px}
  .vs-t{margin-top:10px}
  .hero-foot{margin-top:14px}
  .hero-sub{line-height:1.4}
  .hero-act{margin-top:14px}
  /* "Play with sound" fits inside the 140 px featured film */
  .lead-play{left:6px;right:6px;bottom:6px;padding:0 8px;font-size:12px;justify-content:center}
  .lead-play .play-i{margin-right:5px}
  /* the strip shows three films plus a clear peek of the fourth, and says how many there are */
  .reel-label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px}
  .reel-cue{display:inline;flex:none;color:var(--k);font-family:'Space Grotesk',sans-serif;font-weight:600}
  .reel-cue i{font-style:normal}
  .reel{scroll-padding-inline:var(--pad)}
}
/* R15.5b desktop hero: the title sits centred in the space above the foot, not pushed to its floor */
@media (min-width:761px){
  .hero-title{align-self:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .pupil{--gx:.8!important;--gy:.1!important}
}