@font-face{font-family:'Zalando Sans Expanded';src:url(assets/fonts/zalando-sans-expanded.woff2) format('woff2');font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:'Zalando Sans';src:url(assets/fonts/zalando-sans.woff2) format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Martian Mono';src:url(assets/fonts/martian-mono.woff2) format('woff2');font-weight:400 500;font-stretch:112.5%;font-style:normal;font-display:swap}
:root{
  /* Two grounds from one studio: black for most of the page, cove (a white car studio) for the light bands.
     One accent, the colour of a tail-light, used flat. */
  --black:#0A0A0B;--carbon:#121315;--carbon-2:#1B1C1F;--anthracite:#2C2E32;
  --graphite:#8B8F96;--silver:#C7CACF;--white:#F3F3F1;
  --cove:#ECEDEF;--cove-2:#DDDFE2;--ink:#0E0F11;--steel:#555A61;--rule-cove:#C4C7CC;
  --heat:#C8102E;--heat-light:#E23A4E;--heat-deep:#9B0C22;
  --display:'Zalando Sans Expanded',system-ui,sans-serif;
  --sans:'Zalando Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --out:cubic-bezier(.16,1,.3,1);--sweep:cubic-bezier(.65,0,.35,1);
  --g:22px;--max:1344px;--sec:64px;
  --fs-display:clamp(3rem,1.6rem + 5.6vw,7rem);
  --fs-h2:clamp(2.25rem,1.6rem + 2.6vw,4rem);
  --fs-h3:1.5rem;
  --fs-body:clamp(1.0625rem,1.016rem + .19vw,1.1875rem);
  --fs-label:11px;
  color-scheme:dark light
}
@media (min-width:700px){:root{--g:clamp(20px,4vw,56px);--sec:112px}}

/* Ground roles: every section reads these, so a band changes ground by one class. */
body,.blk{--bg:var(--black);--fg:var(--white);--body:var(--silver);--mute:var(--graphite);--rule:var(--anthracite);--lnk:var(--white);--ico:var(--graphite)}
.cove{--bg:var(--cove);--fg:var(--ink);--body:var(--ink);--mute:var(--steel);--rule:var(--rule-cove);--lnk:var(--ink);--ico:var(--steel)}
.carbon{--bg:var(--carbon)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--black);color:var(--body);font:400 var(--fs-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.dialog-open{overflow:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.92;color:var(--fg);text-wrap:balance}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font:600 var(--fs-h3)/1.15 var(--display);color:var(--fg);text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
p{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--lnk);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;-webkit-tap-highlight-color:transparent}
a:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--heat);outline-offset:3px}
.cove :focus-visible{outline-color:var(--heat-deep)}
::selection{background:var(--heat);color:var(--white)}
html{scrollbar-color:var(--anthracite) var(--black)}
.wrap{width:min(100% - 2*var(--g),var(--max));margin-inline:auto}
.sec{padding-block:var(--sec);background:var(--bg);color:var(--body)}
.sec-h{margin-bottom:32px;max-width:14em}
.fig-l{display:block;font:400 var(--fs-label)/1.3 var(--mono);font-stretch:112.5%;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* Buttons: one filled action per view, flat heat with ink text; the rest are outlined. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 30px;border:0;border-radius:0;background:var(--heat);color:var(--white);font:500 var(--fs-body)/1.2 var(--sans);transition:background-color 150ms var(--out)}
.btn:hover,.btn:active{background:var(--heat-deep)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 26px;border:1px solid var(--rule);border-radius:0;background:transparent;color:var(--fg);font:500 var(--fs-body)/1.2 var(--sans);transition:border-color 150ms var(--out)}
.btn-line:hover{border-color:var(--silver)}
.cove .btn-line:hover{border-color:var(--ink)}
a.btn-line,a.btn-line:hover{color:var(--fg);text-decoration:none}
.link{padding:0;border:0;background:none;color:var(--lnk);font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.link:hover{color:var(--fg)}

/* Wordmark: DRIVE in the wide face, by Koko small, one baseline. */
.mark{display:inline-flex;align-items:baseline;gap:.5em;color:var(--white);text-decoration:none;line-height:1}
.mark b{font:800 1.5rem/1 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.mark span{font:500 .8125rem/1 var(--sans);letter-spacing:.02em;color:var(--silver)}
.mark:hover{color:var(--white)}
.nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;margin-top:env(safe-area-inset-top)}
.nav .link{display:inline-flex;align-items:center;min-height:44px;color:var(--white);font-size:.9375rem;text-decoration:none;border-bottom:1px solid var(--anthracite)}
.nav .link:hover{border-bottom-color:var(--heat)}

/* Hero: the copy sits in the plate's clean headroom; the car sits under it in the bottom third.
   The plate is pulled up under the copy by --lift of its own height, so they never collide. */
.hero{position:relative;overflow:hidden;background:var(--black)}
.hero-copy{position:relative;z-index:2;padding-top:20px}
.hero h1{max-width:9em}
.hero .lede{max-width:26em;margin-top:22px;color:var(--silver)}
.hero .cta{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.hero .note{margin-top:16px;color:var(--graphite)}
.plate{position:relative;z-index:1;--lift:.3;margin-top:calc(var(--ph) * var(--lift) * -1);height:var(--ph);--ph:calc(100vw * 1.25)}
.plate picture,.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.plate img{-webkit-mask-image:linear-gradient(transparent,#000 6%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 6%,#000 88%,transparent)}
.plate .ai-s{z-index:2;right:var(--g);bottom:14%}
.js .hero .plate picture{-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent 45%);mask-image:linear-gradient(90deg,#000 30%,transparent 45%);-webkit-mask-size:400% 100%;mask-size:400% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.js .hero.go .plate picture{animation:sweep 1.6s var(--sweep) .15s both}
@keyframes sweep{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}

/* Spec strip: four package facts in the mono figures, labels under each, count up on arrival. */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;padding:26px 0;border-block:1px solid var(--anthracite);margin-top:8px}
.spec li{display:flex;flex-direction:column;gap:10px}
.spec .sf{font:500 2rem/1 var(--mono);font-stretch:112.5%;font-variant-numeric:tabular-nums;color:var(--white);white-space:nowrap}
.spec .sf small{font-size:.5em;margin-left:.3em;color:var(--silver)}
.hero-after{background:var(--black);padding-bottom:var(--sec)}

/* Lineage: Queensland cars on a strip of film, ending on a camera for now. Each frame carries its
   own film base, a whole number of 24px perforations wide, so the holes line up across the joins. */
.lineage .sec-h{max-width:12em}
.strip{position:relative;overflow:hidden;--holes:10;--gap:16px;--fw:calc(var(--holes) * 24px - var(--gap));--fh:calc(var(--fw) * .7)}
.strip-track{display:flex;width:max-content;will-change:transform}
.frame{--hole:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='11'%3E%3Crect x='7' y='0' width='10' height='11' fill='%23ECEDEF'/%3E%3C/svg%3E");position:relative;flex:none;box-sizing:content-box;width:var(--fw);height:var(--fh);padding:44px calc(var(--gap) / 2);background:var(--hole) 0 13px/24px 11px repeat-x,var(--hole) 0 calc(100% - 13px)/24px 11px repeat-x,linear-gradient(var(--carbon-2),var(--carbon-2)) content-box,var(--ink)}
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.edge{position:absolute;left:calc(var(--gap) / 2 + 2px);bottom:25px;font:500 .6875rem/1 var(--mono);font-stretch:112.5%;letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--cove-2)}
.frame-now{display:grid;place-items:center;background:var(--hole) 0 13px/24px 11px repeat-x,var(--hole) 0 calc(100% - 13px)/24px 11px repeat-x,linear-gradient(var(--cove),var(--cove)) content-box,var(--ink)}
.frame-art{width:62%;--ap-ink:var(--ink);--ap-tint:var(--cove-2);--ap-accent:var(--heat-deep)}
.frame-art .ap{width:100%;height:auto}
.lineage-after{margin-top:40px}
.big{font:500 clamp(1.375rem,1.2rem + .7vw,1.875rem)/1.3 var(--sans);color:var(--ink);max-width:24em;text-wrap:balance}
:root:not(.js-run) .strip{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--steel) transparent;overscroll-behavior-x:contain}
:root:not(.js-run) .frame{scroll-snap-align:start}
.strip:focus-visible{outline:2px solid var(--heat-deep);outline-offset:4px}

/* The drawn camera (Vows' apparatus), recoloured through three variables. */
.ap{display:block;overflow:visible;color:var(--ap-ink)}
.ap .l{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ap .f{fill:var(--ap-tint)}
.ap .d{fill:currentColor}
.ap .a{fill:var(--ap-accent)}
.ap .h{fill:none;stroke:currentColor;stroke-width:.75;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.5}

/* Kobi: type only. */
.person .text{max-width:34em}
.person .text p+p{margin-top:1em}
.person [data-lede]{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.4;color:var(--white)}

/* THE ROLLING SHOT: a car drawn side on holds still while the road streaks under it. */
.roll .stage{position:relative;margin-top:8px;border-block:1px solid var(--anthracite)}
.roll svg.rs{display:block;width:100%;height:auto;overflow:hidden}
.rs .body{fill:none;stroke:var(--white);stroke-width:2;stroke-linejoin:miter;stroke-linecap:square}
.rs .thin{fill:none;stroke:var(--silver);stroke-width:1.25;stroke-linecap:square}
.rs .tail{fill:none;stroke:var(--heat);stroke-width:3;stroke-linecap:square}
.rs .rim{fill:var(--carbon);stroke:var(--white);stroke-width:2}
.rs .tyre{fill:none;stroke:var(--graphite);stroke-width:6}
.rs .spk{stroke:var(--silver);stroke-width:3;stroke-linecap:square}
.rs .disc{fill:var(--graphite);opacity:0}
.rs .spokes{opacity:1}
.rs .ground{stroke:var(--anthracite);stroke-width:1}
.rs .dash{fill:var(--graphite)}
.rs .kerb{stroke:var(--anthracite);stroke-width:2}
.ro-box{position:absolute;top:14px;right:0;display:flex;gap:28px;text-align:right}
.ro{display:flex;flex-direction:column;gap:6px}
.ro .rv{font:500 clamp(1.25rem,1rem + 1vw,2rem)/1 var(--mono);font-stretch:112.5%;font-variant-numeric:tabular-nums;color:var(--white)}
.snd-cap{margin-top:22px;max-width:34em;color:var(--silver)}

/* Shots: six line icons that draw themselves. */
.drawn{display:grid;gap:28px}
.drawn li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start}
.drawn .gi{width:56px;height:56px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.drawn .gi .hot{stroke:var(--heat-deep)}
.drawn p{margin-top:8px;max-width:30em;color:var(--ink)}
.js .draw .gi path,.js .draw .gi circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--out) var(--dl,0ms)}
.js .draw.in .gi path,.js .draw.in .gi circle{stroke-dashoffset:0}
.drawn li:nth-child(2){--dl:120ms}.drawn li:nth-child(3){--dl:240ms}.drawn li:nth-child(4){--dl:360ms}.drawn li:nth-child(5){--dl:480ms}.drawn li:nth-child(6){--dl:600ms}

/* Fantasy */
.lines li{font:500 clamp(1.25rem,1.1rem + .6vw,1.625rem)/1.3 var(--sans);color:var(--white);padding:18px 0;border-top:1px solid var(--anthracite);text-wrap:balance}
.lines li:last-child{border-bottom:1px solid var(--anthracite)}
.fantasy .after{margin-top:24px}
.fantasy .after+p{margin-top:12px}
.still{position:relative;margin-top:40px}
.still img,.gal img{width:100%;height:auto}
.ai-s{position:absolute;right:10px;bottom:8px;font-size:.875rem;line-height:1;color:var(--white);text-shadow:0 1px 6px rgb(10 10 11 / .9)}

/* Gallery: justified rows, each picture as wide as its own shape asks. */
.gal{display:flex;flex-wrap:wrap;column-gap:6px}
.gal li{margin-bottom:6px}
.gal .g{position:relative;flex:var(--a) 1 0;min-width:0}
.gal .br{display:none;flex-basis:100%;height:0;margin:0}
.gal .br-m{display:block}
.g .ai-s{right:6px;bottom:5px;font-size:.75rem}

/* WHAT ARRIVES: shoot clips scatter, sort into a timeline, a playhead walks, the outputs render. */
.edit .sec-h{margin-bottom:32px}
.story-edit{position:relative}
.ed{position:relative}
.ln{display:block;font:400 var(--fs-label)/1.3 var(--mono);font-stretch:112.5%;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.ruler{height:16px;border-bottom:1px solid var(--rule-cove);background:repeating-linear-gradient(90deg,var(--rule-cove) 0 1px,transparent 1px 12.5%) 0 100%/100% 7px no-repeat}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 0;border-bottom:1px solid var(--rule-cove)}
.row .ln{margin:0}
.trk{position:relative;height:10px}
.row.day .trk{height:44px}
.bar{position:absolute;top:0;bottom:0;left:calc(var(--l)*100%);width:calc(var(--w)*100%);background:var(--ink);transform-origin:0 50%;transition:transform 900ms var(--out)}
.js .bar{transform:scaleX(0)}
.js .bar.on{transform:none}
.clip{position:absolute;left:0;top:0;height:44px;display:flex;align-items:center;padding:0 8px;background:var(--cove-2);color:var(--ink);font:500 .75rem/1 var(--sans);white-space:nowrap;z-index:2;transition:transform 1s var(--out),background-color 400ms var(--out),color 400ms var(--out)}
.clip.cut{background:var(--ink);color:var(--white)}
.ph{position:absolute;top:16px;bottom:0;left:0;width:2px;background:var(--heat-deep);pointer-events:none;opacity:0;transition:opacity 300ms}
.ph::before{content:"";position:absolute;top:0;left:-4px;width:10px;height:9px;background:var(--heat-deep);clip-path:polygon(0 0,100% 0,50% 100%)}
.ph.on{opacity:1}
.dv{display:grid;margin-top:32px}
.dv>div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--rule-cove)}
.dv>div:last-child{border-bottom:1px solid var(--rule-cove)}
.fig{font:500 clamp(2rem,1.7rem + 1.2vw,2.75rem)/1 var(--mono);font-stretch:112.5%;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.fig small{font:400 var(--fs-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-left:.6em;color:var(--steel)}
.dv dd{line-height:1.45;color:var(--ink)}
.extras{margin-top:28px}
.extras li{padding:14px 0;border-top:1px solid var(--rule-cove);color:var(--ink)}
.extras li:last-child{border-bottom:1px solid var(--rule-cove)}

/* Packages: a three-way audience toggle over three flat cards each. */
.seg{display:flex;flex-wrap:wrap;gap:0 24px;margin-bottom:28px;border-bottom:1px solid var(--rule-cove)}
.seg button{position:relative;min-height:48px;padding:10px 0;border:0;background:none;color:var(--steel);font:500 1rem/1.2 var(--sans)}
.seg button[aria-selected="true"]{color:var(--ink)}
.seg button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--heat-deep);transform:scaleX(0);transform-origin:0 50%;transition:transform 300ms var(--out)}
.seg button[aria-selected="true"]::after{transform:none}
.seg button:hover{color:var(--ink)}
.aud-h{margin:40px 0 18px}
.js .aud-h{display:none}
.js .plans[hidden]{display:none}
.plans{display:grid;gap:20px}
.plan{display:flex;flex-direction:column;padding:26px 22px 24px;border:1px solid var(--rule-cove);color:var(--ink)}
.plan.feat{background:var(--ink);border-color:var(--ink);color:var(--white)}
.plan h3{font-size:1.375rem}
.plan.feat h3{color:var(--white)}
.amt{margin-top:10px;font:500 clamp(2.25rem,1.9rem + 1.4vw,3rem)/1 var(--mono);font-stretch:112.5%;font-variant-numeric:tabular-nums;white-space:nowrap}
.amt small{font:400 var(--fs-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-left:.6em;color:var(--steel)}
.plan.feat .amt{color:var(--white)}
.plan.feat .amt small{color:var(--graphite)}
.plan .d{margin-top:14px;padding-bottom:20px;border-bottom:1px solid var(--rule-cove)}
.plan.feat .d{border-bottom-color:var(--anthracite)}
.plan ul{display:grid;gap:12px;align-content:start;flex:1;margin:20px 0 28px;font-size:.9375rem;line-height:1.45}
.plan li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start}
.plan li.inc{display:block;color:var(--steel)}
.plan.feat li.inc{color:var(--graphite)}
.ico{flex:none;width:18px;height:18px;margin-top:.15em;fill:none;stroke:var(--ico);stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
.plan.feat .ico{stroke:var(--fg)}
.plan .btn,.plan .btn-line{width:100%}
.plan.feat .btn-line{color:var(--white);border-color:var(--anthracite)}
.pnote{margin-top:20px;font-size:.9375rem;color:var(--steel)}

/* Straight answers, steps */
.answers>div{padding:20px 0;border-top:1px solid var(--rule-cove);color:var(--ink)}
.answers>div:last-child{border-bottom:1px solid var(--rule-cove)}
.answers dt{font:600 1.1875rem/1.3 var(--display);margin-bottom:8px;color:var(--ink)}
.steps li{display:grid;grid-template-columns:3rem 1fr;padding:20px 0;border-top:1px solid var(--anthracite)}
.steps li:last-child{border-bottom:1px solid var(--anthracite)}
.steps .n{font:500 1.5rem/1.1 var(--mono);font-stretch:112.5%;color:var(--graphite)}

/* Close: the full plate returns behind the copy, headroom above the car. */
.close{position:relative;overflow:hidden;background:var(--black);padding-top:var(--sec)}
.close h2{font-size:var(--fs-display);max-width:8em}
.close-copy p{margin-top:18px;color:var(--silver)}
.close .btn{margin-top:28px;width:min(100%,340px)}
.close .note{margin-top:14px;color:var(--graphite)}
.close .plate{--lift:.34}

/* Footer (Life's foot-grid) */
.foot{background:var(--black);border-top:1px solid var(--anthracite);padding:40px 0 136px;font-size:.9375rem}
.foot-grid{display:grid;gap:16px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.foot nav a,.foot nav .link{display:inline-flex;align-items:center;min-height:44px;color:var(--white)}
.foot nav a:hover,.foot nav .link:hover{color:var(--white)}
.foot .disclose{color:var(--graphite)}

/* Sticky bar: shows once the hero button has gone, hides at the packages, the close and in the chat. */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(var(--g),env(safe-area-inset-right)) max(20px,calc(env(safe-area-inset-bottom) + 12px)) max(var(--g),env(safe-area-inset-left));background:var(--carbon);border-top:1px solid var(--anthracite);transform:translateY(110%);visibility:hidden;transition:transform 350ms var(--out),visibility 0s 350ms}
.sticky.on{transform:none;visibility:visible;transition:transform 350ms var(--out),visibility 0s}
.sticky p{font:800 1.125rem/1 var(--display);text-transform:uppercase;color:var(--white)}
.sticky .btn{min-height:48px;padding:12px 20px;font-size:.9375rem}

/* Chat */
dialog{padding:0;border:0;background:var(--carbon);color:var(--silver);max-width:100vw;max-height:100vh;max-height:100dvh}
dialog::backdrop{background:rgb(10 10 11 / .7)}
.chat{position:fixed;inset:auto 0 0;margin:0;width:100%;height:min(780px,100vh);height:min(780px,100dvh);border-top:1px solid var(--anthracite)}
.chat-shell{height:100%;display:flex;flex-direction:column}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px var(--g);border-bottom:1px solid var(--anthracite)}
.avatar{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--heat);color:var(--ink);font:800 1.25rem/1 var(--display)}
.chat-head h2{font:400 1rem/1.3 var(--sans);text-transform:none;letter-spacing:0}
.chat-head h2 .mark b{font-size:1.25rem}
.chat-head p{font-size:.8125rem;color:var(--graphite);margin-top:2px}
.icon-btn{width:44px;height:44px;margin-left:auto;display:grid;place-items:center;border:0;background:none;color:var(--white)}
.icon-btn:hover{background:var(--carbon-2)}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px var(--g);display:flex;flex-direction:column;gap:14px;scrollbar-color:var(--anthracite) transparent}
.msg{max-width:88%;font-size:1rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--white)}
.msg.kobi{align-self:flex-start}
.msg.you{align-self:flex-end;background:var(--carbon-2);padding:10px 14px}
.msg.sys{align-self:stretch;max-width:none;font-size:.875rem;color:var(--graphite);border-top:1px solid var(--anthracite);padding-top:12px}
.msg.sum{align-self:stretch;max-width:none;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:14px 0;border-block:1px solid var(--anthracite);white-space:normal}
.msg.sum dt{color:var(--graphite)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--g)}
.chips:empty{display:none}
.chips button{min-height:44px;padding:8px 14px;border:1px solid var(--anthracite);background:transparent;color:var(--white);font-size:.9375rem;transition:border-color 150ms var(--out)}
.chips button:hover{border-color:var(--heat)}
.chips button:disabled{opacity:.5;cursor:wait}
.chat-form{padding:16px var(--g) 10px}
.chat-form label{display:block;margin-bottom:8px;font-size:.8125rem;color:var(--graphite)}
.field{display:flex;border:1px solid var(--anthracite);background:var(--black)}
.field:focus-within{border-color:var(--silver)}
.field input{flex:1;min-width:0;height:52px;padding:0 14px;border:0;outline:0;background:transparent;font-size:16px;color:var(--white);caret-color:var(--heat)}
.field input::placeholder{color:var(--graphite);opacity:1}
.send{width:52px;display:grid;place-items:center;border:0;background:none;color:var(--white)}
.err{margin-top:8px;font-size:.875rem;color:#FF8A95}
.err:empty{display:none}
.chat-foot{display:flex;justify-content:flex-end;padding:8px var(--g) max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--anthracite)}
.chat-foot .link{font-size:.8125rem;color:var(--graphite);min-height:36px}
.privacy{width:min(520px,calc(100vw - 32px));padding:36px 28px 28px;border:1px solid var(--anthracite)}
.privacy h2{font-size:1.5rem;line-height:1.05;margin-bottom:16px;padding-right:40px}
.privacy p+p{margin-top:12px}
.privacy .btn-line{margin-top:24px}
.privacy .icon-btn{position:absolute;top:8px;right:8px}
.credits{width:min(680px,calc(100vw - 32px));max-height:min(86vh,860px);overflow-y:auto;overscroll-behavior:contain}
.credit-list{display:grid;margin-top:20px;font-size:.9375rem;line-height:1.45}
.credit-list li{padding:10px 0;border-top:1px solid var(--anthracite)}
.credit-list li:last-child{border-bottom:1px solid var(--anthracite)}
.credit-list span{color:var(--graphite)}

/* Motion: the opening sweep, then one word wipe for every heading. */
.wm{display:inline-block;vertical-align:top}
.js .wi{display:inline-block;clip-path:inset(0 100% 0 0);transform:translateX(-.4em);transition:clip-path 700ms var(--out),transform 700ms var(--out);transition-delay:calc(var(--i)*40ms + var(--d,0ms))}
.js .split-in .wi{clip-path:inset(0 -.1em 0 0);transform:none}
.js h1{--d:300ms}
.js .hero .follow{opacity:0;transform:translateY(14px);transition:opacity 600ms var(--out),transform 600ms var(--out)}
.js .hero.go .follow{opacity:1;transform:none}
.js .hero.go .lede{transition-delay:820ms}
.js .hero.go .cta{transition-delay:880ms}
.js .hero.go .note{transition-delay:940ms}
.js .spec{opacity:0;transition:opacity 600ms var(--out) 1000ms}
.js .hero.go~.hero-after .spec{opacity:1}
.js .draw .ico{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--out)}
.js .draw.in .ico{stroke-dashoffset:0}

@media (min-width:700px){
  .nav{height:80px}
  .hero .cta{flex-direction:row;flex-wrap:wrap}
  .plate{--ph:min(calc(100vw * .5625),1100px);--lift:.48}
  .close .plate{--lift:.42}
  .plate .ai-s{bottom:16%}
  .strip{--holes:12}
  .row{grid-template-columns:110px minmax(0,1fr);align-items:center;column-gap:16px}
  .clip{font-size:.8125rem;padding:0 10px}
  .gal{column-gap:12px}
  .gal li{margin-bottom:12px}
  .gal .br-m{display:none}
  .gal .br-t{display:block}
  .g .ai-s{right:8px;bottom:7px;font-size:.875rem}
  .drawn{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
  .drawn li{grid-template-columns:64px minmax(0,1fr);padding:24px 0;border-top:1px solid var(--rule-cove)}
  .drawn li:nth-last-child(-n+2){border-bottom:1px solid var(--rule-cove)}
  .drawn .gi{width:64px;height:64px}
  .plans{max-width:640px}
  .answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;align-items:start}
  .answers>div{border-bottom:1px solid var(--rule-cove)}
  .answers>div+div{border-top:1px solid var(--rule-cove)}
  .close .btn{width:auto}
  .foot{padding-bottom:64px}
  .foot-grid{grid-template-columns:auto 1fr;column-gap:48px;align-items:baseline}
  .foot-grid nav,.foot-grid .disclose{grid-column:2}
}
@media (min-width:900px){
  .spec{grid-template-columns:repeat(4,minmax(0,1fr));padding:30px 0}
  .spec .sf{font-size:2.25rem}
}
@media (min-width:1100px){
  .person{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:64px;align-items:start}
  .person .sec-h{margin:0}
  .roll .stage{margin-top:16px}
  .ro-box{top:22px}
  .drawn{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
  .drawn li{grid-template-columns:1fr;gap:20px;padding:32px 0 34px}
  .drawn li:nth-last-child(-n+3){border-bottom:1px solid var(--rule-cove)}
  .drawn .gi{width:72px;height:72px}
  .fantasy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"h s" "t s";column-gap:64px;align-items:start}
  .fantasy .sec-h{grid-area:h}
  .fantasy .text{grid-area:t}
  .fantasy .still{grid-area:s;margin:0}
  .gal{column-gap:14px}
  .gal li{margin-bottom:14px}
  .gal .br-t{display:none}
  .gal .br-d{display:block}
  .dv{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
  .dv>div{grid-template-columns:1fr;border-bottom:1px solid var(--rule-cove)}
  .extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .extras li{border-bottom:1px solid var(--rule-cove)}
  .plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:none;align-items:stretch}
  .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;align-items:start}
  .steps li{border-bottom:1px solid var(--anthracite)}
  .chat{inset:auto 24px 24px auto;width:420px;height:min(740px,calc(100vh - 48px));height:min(740px,calc(100dvh - 48px));border:1px solid var(--anthracite);box-shadow:0 24px 64px rgb(0 0 0 / .5)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .js .hero .plate picture{-webkit-mask-image:none;mask-image:none}
  .js .wi{clip-path:none;transform:none;transition:none}
  .js .hero .follow{opacity:1;transform:none;transition:none}
  .js .spec{opacity:1;transition:none}
  .js .draw .ico,.js .draw .gi path,.js .draw .gi circle{stroke-dashoffset:0;transition:none}
  .js .bar{transform:none;transition:none}
  .clip,.ph,.seg button::after{transition:none}
  .sticky,.sticky.on{transition:none}
}

/* Late fixes: the gallery band's own spacing, and the readouts above the stage on phones. */
.gallery{padding-bottom:var(--sec);background:var(--black)}
@media (max-width:699px){
  .ro-box{position:static;justify-content:flex-start;text-align:left;margin-bottom:12px}
}
/* Bands carry their own side inset, so nothing sits flush against a ground. */
.sec,.gallery,.close,.foot,.hero-after{padding-inline:var(--g)}
:is(.sec,.gallery,.close,.foot,.hero-after)>.wrap,.hero-after>.wrap{width:min(100%,var(--max))}
.lineage .strip{margin-inline:calc(-1 * var(--g))}
.sec{padding:64px 22px}
.gallery,.close,.foot,.hero-after{padding-left:22px;padding-right:22px}
.lineage .strip{margin-inline:-16px}
@media (min-width:700px){
  .sec{padding:112px clamp(20px,4vw,56px)}
  .gallery,.close,.foot,.hero-after{padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}
  .lineage .strip{margin-inline:calc(-1 * clamp(20px,4vw,56px))}
}

/* v2, 8 Oct 2026 (Tehbyn: red and black, red sparingly; realistic rolling shot; image icons; working timeline). */
.hero-copy,.close-copy{position:relative;z-index:2}
.rollp{margin:clamp(28px,4vw,56px) auto 0}
.rollp-frame{position:relative;overflow:hidden;aspect-ratio:3/2;max-height:88vh;background:var(--black)}
.rollp-img{position:absolute;inset:-3% -5%;width:110%;max-width:none;height:106%;object-fit:cover;object-position:50% 70%;animation:rollp-drift 16s ease-in-out infinite alternate}
@keyframes rollp-drift{from{transform:translate3d(1.5%,0,0) scale(1.01)}to{transform:translate3d(-1.5%,-.5%,0) scale(1.04)}}
.rollp-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(10 10 11 / .35),rgb(10 10 11 / 0) 22%,rgb(10 10 11 / 0) 70%,rgb(10 10 11 / .5));pointer-events:none}
.rollp-streaks{position:absolute;left:0;right:0;bottom:0;height:24%;pointer-events:none;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.rollp-streaks i{position:absolute;left:0;width:46%;height:2px;background:linear-gradient(90deg,transparent,rgb(243 243 241 / .5),transparent);filter:blur(1.2px);transform:translateX(230%);will-change:transform}
.rollp-streaks i:nth-child(1){top:12%;}
.rollp-streaks i:nth-child(2){top:26%;width:30%}
.rollp-streaks i:nth-child(3){top:38%;}
.rollp-streaks i:nth-child(4){top:50%;width:22%;height:1px;background:linear-gradient(90deg,transparent,rgb(200 16 46 / .75),transparent)}
.rollp-streaks i:nth-child(5){top:61%;}
.rollp-streaks i:nth-child(6){top:72%;width:36%}
.rollp-streaks i:nth-child(7){top:84%;}
.rollp-streaks i:nth-child(8){top:93%;width:28%}
.rollp .ro-box{top:clamp(14px,2.5vw,36px);right:clamp(16px,3vw,44px);z-index:2}
.rollp .ai-s{z-index:2}
.shots .drawn li{border-top-color:var(--anthracite)}
.shots .drawn h3{color:var(--white)}
.shots .drawn p{color:var(--silver)}
.drawn .gi-img{width:96px;height:96px;object-fit:contain;stroke:none}
.drawn li:has(.gi-img){grid-template-columns:96px minmax(0,1fr);align-items:center}
.tl{position:relative;list-style:none;margin:36px 0 8px;padding:0;height:96px}
.tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--rule-cove)}
.tl-step{position:absolute;top:0;left:calc(var(--at) * 100%);display:flex;flex-direction:column;gap:6px;padding-top:28px;white-space:nowrap}
.tl-step::before{content:"";position:absolute;top:4px;left:0;width:11px;height:11px;background:var(--ink)}
.tl-end{transform:translateX(-100%);text-align:right;align-items:flex-end}
.tl-end::before{left:auto;right:0;background:var(--heat)}
.tl-when{font:500 .8125rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.tl-what{font-weight:500;color:var(--ink)}
@media (max-width:699px){
  .rollp-frame{aspect-ratio:4/5}
  .rollp-img{object-position:42% 70%}
  .tl{height:auto;display:grid;gap:22px;padding-left:26px}
  .tl::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .tl-step{position:relative;left:auto;transform:none;text-align:left;align-items:flex-start;padding-top:0;white-space:normal}
  .tl-step::before,.tl-end::before{left:-26px;right:auto;top:3px}
  .drawn li:has(.gi-img){grid-template-columns:72px minmax(0,1fr)}
  .drawn .gi-img{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){.rollp-img{animation:none}.rollp-streaks{display:none}}