:root{--ink:#232323;--black:#0b0b0b;--control:#172027;--copper:#E39B65;--mist:#EBECE9;--rule:#D0D0D0;--muted:#9CA3AF;--slate:#495C68;
--sans:Figtree,"Helvetica Neue",Arial,sans-serif;--serif:Georgia,"Times New Roman",serif;--gut:clamp(16px,4vw,56px);
/* one type ladder, measured at 320: 12px floor to 180px top */
--t-label:12px;--t-small:14px;--t-body:clamp(16px,1.25vw,18px);--t-h:clamp(48px,5.4vw,84px);--t-m:clamp(44px,3.8vw,60px);--t-num:clamp(64px,10vw,160px);--t-hero:clamp(56px,11vw,180px);--t-mega:clamp(200px,19vw,300px)}
*{box-sizing:border-box}
html{scroll-padding-top:84px}
html,body{overflow-x:clip}
.page{color:#f3f3f3;font-family:var(--sans)}
.page>section:not(#s1),.page .run{background-color:var(--black)}
.page .grid{background-color:var(--mist)}
.page .control{background-color:var(--control)}
.page .pd{background-color:#fff}
a:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:4px}
.light a:focus-visible{outline-color:#000}
.rail a[hidden]{display:none}
/* brand bar */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:10px var(--gut);background:rgba(11,11,11,.94);backdrop-filter:blur(8px);color:#fff}
.bar img{height:26px;width:auto;display:block}
.where{display:none;font-size:var(--t-small);font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.rail{display:flex;gap:4px;margin-left:auto;font-size:var(--t-small)}
.rail a{color:#c9c9c9;text-decoration:none;padding:0 14px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.rail a[aria-current=true]{color:#111;background:#fff}
.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--copper);color:#232323;font-weight:700;text-decoration:none;border-radius:4px;padding:0 18px;min-height:44px;white-space:nowrap;transition:opacity .2s}
.bar .cta.away{opacity:0;pointer-events:none}
@media (max-width:760px){.rail{display:none}.bar{gap:10px}.bar img{height:22px}.where{display:block;border-left:1px solid #444;padding-left:10px}.bar .cta{flex-shrink:0;padding:0 12px}}
/* shared */
section{position:relative}
.eyebrow{font-size:var(--t-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.dark{background:var(--black);color:#f3f3f3}
.control{background:var(--control);color:#f3f3f3}
.dark .body,.control .body{color:#c4c9cd}
.h{font-weight:800;letter-spacing:-.03em;line-height:.98;margin:0 0 20px;font-size:var(--t-h);text-wrap:balance}
.h.m{font-size:var(--t-m)}
.h span{color:var(--muted)}
.light .h span{color:var(--slate)}
.body{font-size:var(--t-body);line-height:1.6;max-width:44ch;margin:0 0 24px;text-wrap:pretty}
.txt{position:relative;z-index:6}
.ph{border:1.5px dashed #5d5d5d;border-radius:4px;color:#9a9a9a;font-size:var(--t-small);display:grid;place-items:start;text-align:left;padding:16px 54% 16px 16px;height:100%;line-height:1.4}.heart .core .ph{padding:10px}
.light .ph{border-color:#8a8a8a;color:#555}
.spot{background:radial-gradient(ellipse 50% 58% at 50% 40%,#3b3b3b 0%,#1b1b1b 52%,var(--black) 82%)}
.control .spot{background:radial-gradient(ellipse 50% 58% at 50% 40%,#3a4852 0%,#1f2a31 52%,var(--control) 82%)}
.facts{list-style:none;padding:0;margin:0;border-top:1px solid #333;max-width:44ch}
.control .facts{border-color:#34414a}
.facts li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #333;font-size:var(--t-small);color:#b8bdc2}
.control .facts li{border-color:#34414a}
.facts b{color:#fff;font-weight:700;text-align:right}
.moment{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:var(--t-small);color:#fff;text-decoration:none;border:1px solid #444;border-radius:999px;padding:0 16px;margin:0 0 22px}
.moment b{font-variant-numeric:tabular-nums}
.wrap{padding:clamp(96px,11vw,170px) var(--gut)}
.numeral{font-weight:800;letter-spacing:-.06em;line-height:.85;font-size:var(--t-num);margin:0 0 18px;white-space:nowrap}
.numeral small{display:block;font-size:var(--t-small);letter-spacing:.02em;font-weight:500;color:var(--muted);margin-top:10px;white-space:normal}
.img{position:relative}
/* photographs sit above the copper line, so it runs behind the products */
.prod,.installs figure{position:relative;z-index:5}
.prod{position:absolute}
/* street: the Codex neighbour still, straight after the film */
.street{min-height:100vh;background:var(--black);display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) clamp(190px,21vw,280px)}
.street{overflow:hidden}
.scene{position:absolute;left:50%;top:50%;aspect-ratio:1440/900;transform:translate(-50%,-50%)}
.scene img,.scene .wins,.scene svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.wins i{position:absolute;background-image:url(img/street-lit.webp);background-repeat:no-repeat;animation:lamp 15s steps(1,end) infinite}
@keyframes lamp{0%,86%{opacity:1}87%,100%{opacity:0}}
.clouds{opacity:.34;mix-blend-mode:screen}
.clouds .drift{animation:drift 240s linear infinite}
@keyframes drift{to{transform:translateX(-1440px)}}
.street:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,11,.55),transparent 55%),linear-gradient(0deg,rgba(11,11,11,.8),transparent 45%);pointer-events:none}
.street .h{text-shadow:0 2px 30px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.wins i{animation:none}.clouds .drift{animation:none}}
.street .h{position:relative;z-index:2;font-size:clamp(56px,7vw,120px);max-width:13ch;margin:0}
/* grid */
.grid{background:var(--mist);color:var(--ink);padding:clamp(40px,6vw,90px) var(--gut) clamp(90px,10vw,150px)}
.grid .card{max-width:1600px;margin-left:auto;margin-right:auto;position:relative;margin-top:0;background:var(--mist);padding:clamp(28px,4vw,60px) clamp(0px,3vw,48px) 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);}
.big{font-weight:800;letter-spacing:-.06em;line-height:.8;font-size:var(--t-mega);margin:0}
.big small{font-size:.32em;letter-spacing:-.02em}
.vs{display:flex;flex-wrap:wrap;gap:12px 28px;margin:22px 0 0;border-top:1px solid var(--rule);padding-top:16px}
.vs div{font-size:var(--t-small);color:var(--slate);line-height:1.35;max-width:22ch}
.vs b{display:block;font-size:var(--t-m);line-height:1;margin-bottom:6px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.grid .body{color:#3a3a3a}
#carbon{margin:10px 0 0;min-height:236px}
.quote{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:30px;margin:10px 0 0;font-size:var(--t-m);font-weight:800;letter-spacing:-.03em;line-height:1;max-width:22ch;text-wrap:balance}
.quote cite{display:block;font-size:var(--t-label);font-style:normal;color:var(--slate);letter-spacing:0;margin-top:12px;font-weight:400}
/* the run and its copper line */
.run{position:relative}
#spine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
/* bunny */
/* split base: image left, text right */
.split{max-width:1760px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,90px);align-items:center}
.d16{padding-left:0}
.d16 .img{height:clamp(420px,60vw,800px)}
.d16 .img .ph{border-left:none;border-radius:0 4px 4px 0}
.d16 .numeral{margin-left:calc(-1 * clamp(0px,9vw,170px))}
.d5{overflow:hidden}
.d5 .ghost{position:absolute;left:-4%;top:50%;transform:translateY(-50%);font-weight:800;letter-spacing:-.07em;line-height:.8;font-size:clamp(160px,26vw,420px);color:transparent;-webkit-text-stroke:1.5px #3a3a3a;white-space:nowrap;z-index:0}
.d5 .split{grid-template-columns:minmax(0,4fr) minmax(0,5fr);position:relative}
.d5 .img{height:clamp(360px,44vw,620px)}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #333;max-width:560px}
.row3 div{padding:14px 14px 0 0;font-size:var(--t-small);color:#aab0b5;line-height:1.3}
.row3 b{display:block;color:#fff;font-size:var(--t-m);line-height:1;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.heart .img{height:clamp(400px,46vw,640px)}
.heart .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36%;height:42%;z-index:2}
.heart .core .ph{background:var(--control);place-items:start;text-align:left}
.heart .out{position:absolute;font-size:var(--t-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;z-index:2}
.charger .img{height:clamp(420px,50vw,700px)}
.charger .steps{display:grid;gap:26px}
.charger .steps div{border-top:1px solid #34414a;padding-top:18px}
.charger .steps .numeral{font-size:var(--t-num);margin:0}.charger .steps .numeral.word{font-size:var(--t-h)}
.app .img{height:clamp(480px,52vw,720px);display:grid;place-items:center}
.phone{width:clamp(210px,20vw,290px);aspect-ratio:9/19;border:1.5px solid #5b6770;border-radius:34px;padding:24px 16px;display:flex;flex-direction:column;gap:8px;background:#0e1519;position:relative;z-index:2}
.phone .l{font-size:var(--t-label);color:#98a2a9;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.phone .v{font-size:44px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1}
.phone svg{width:100%;height:auto;margin-top:auto}
.range{max-width:520px;margin:6px 0 24px}
.range .nums{display:flex;align-items:baseline;gap:.18em;font-weight:800;letter-spacing:-.04em;font-size:var(--t-h);line-height:.9;margin:0 0 14px;white-space:nowrap}
.range .nums i{font-style:normal;font-size:.3em;color:var(--muted);font-weight:500;letter-spacing:0;padding:0 .2em}
.range .track{position:relative;height:16px;background:#26323a}
.range .base{position:absolute;left:0;width:60%;top:0;bottom:0;background:#5b6770}
.range .fill{position:absolute;left:60%;width:30%;top:0;bottom:0;background:#fff}
.range .ticks{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-label);color:#98a2a9;margin-top:8px}
.pd{background:#fff;color:var(--ink)}
.pd .split,.control .split,.d5 .split{margin:0 auto}.pd .split{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.pd .img{height:clamp(380px,44vw,600px)}
.lock{display:flex;align-items:center;gap:16px;margin:0 0 30px;font-size:var(--t-label);color:var(--slate);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.lock img{height:34px;width:auto;filter:invert(1)}
.lock i{width:1px;height:30px;background:var(--rule)}
.pd .body{color:#444}
.pd ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;max-width:560px}
.pd li{border-top:1px solid var(--rule);padding:12px 0;font-size:var(--t-small)}
.end{min-height:90vh;display:grid;align-content:center;justify-items:center;text-align:center;padding:0 var(--gut)}
.end .h{max-width:13ch}
.end .cta{min-height:64px;font-size:18px;padding:0 36px;position:relative;z-index:6}
.end img{height:40px;width:auto;margin-top:70px}
@media (max-width:860px){
 .d16 .img{margin:0 calc(-1 * var(--gut));height:112vw!important}
 .d16 .img .ph{border-radius:0;border-left:none!important}
 .d16 .txt{margin-top:-.9em}
 .d16 .numeral{position:relative;z-index:6;text-shadow:0 0 30px #0b0b0b}
 .d5 .img{width:64%;margin-left:auto;height:96vw!important}
 .heart .img{height:auto!important;aspect-ratio:1;margin:0 calc(-1 * var(--gut))}
 .charger .img{order:2;margin-right:calc(-1 * var(--gut));height:70vw!important}
 .app .spot{background:none}
 .pd .img{margin:0 calc(-1 * var(--gut))}
 .grid .card,.split,.d5 .split,.pd .split{grid-template-columns:minmax(0,1fr)}
 .d16{padding-left:var(--gut)}
 .d16 .numeral{margin-left:0}
 .d16 .img .ph{border-left:1.5px dashed #5d5d5d;border-radius:4px}
 .d5 .ghost{font-size:52vw}
 .pd ul,.row3{grid-template-columns:1fr}
 .app .img{height:auto!important;padding:30px 0}
 .pd .img{order:2}
}

/* the flip: film end, straight up to the aerial, out to the street */
.street{height:440vh;margin-top:-160vh;min-height:0;display:block;padding:0;overflow:visible}
.flipstage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--black);display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) clamp(190px,21vw,280px)}
.flipstage:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,11,.55),transparent 55%),linear-gradient(0deg,rgba(11,11,11,.8),transparent 45%);pointer-events:none;opacity:var(--shade,0)}
.street:after{display:none}
.layer{position:absolute;inset:0;will-change:transform,opacity}
.layer>img{width:100%;height:100%;object-fit:cover;display:block}
.street .h{opacity:var(--head,0);transform:translateY(calc((1 - var(--head,0)) * 30px))}
/* real product photography in the studio */
.prod{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);height:74%;width:auto;max-width:86%;object-fit:contain;filter:drop-shadow(0 40px 50px rgba(0,0,0,.65))}
.img .floor{position:absolute;left:22%;right:22%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.12),transparent 70%)}
.d5 .prod{height:80%}
.charger .prod{height:62%}
/* grid: the cleanest and the dirtiest hour, in Puredrive's own photographs */
.pair{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px);margin:6px 0 10px}
.pair figure{margin:0;position:relative;overflow:hidden;border-radius:2px}
.pair img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pair figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:var(--t-small)}
.pair figcaption b{display:block;font-size:var(--t-m);font-weight:800;letter-spacing:-.03em;line-height:1}
.summary{font-size:var(--t-small);color:var(--slate);max-width:60ch;margin:14px 0 0}
/* Puredrive: two real installs */
.installs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px);align-items:start}
.installs img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.installs img:last-child{margin-top:18%}
.installs figcaption{font-size:var(--t-label);color:var(--slate);margin-top:8px}
@media (max-width:860px){.pair{grid-template-columns:1fr}.flipstage{padding-bottom:120px}}

.app-shot .prod{height:auto;width:92%;max-width:none;top:50%}
@media (max-width:860px){.app .img{height:78vw!important}}

/* the flip in full: Kling clips as scroll-played frames, and a pull-out through cloud over the whole neighbourhood */
#L-frames{width:100%;height:100%}
#L-city{overflow:hidden}
.zoom{position:absolute;inset:0;transform-origin:49.4% 46.3%;will-change:transform}
.zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zoom .inset{left:calc(49.4% - 6.94%);top:calc(46.3% - 6.94%);width:13.89%;height:13.89%;inset:auto;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 20%,transparent 92%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 20%,transparent 92%)}

/* the film hands over to the flip without a seam: same grade, and the flip fades up over the film's last frame */
.flipstage .grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0007 0,#0000 18%),linear-gradient(180deg,#0000 42%,#000a 100%),radial-gradient(120% 95% at 50% 42%,#0000 58%,#0005 100%)}
.flipstage .layer{z-index:0}
.flipstage{background:transparent}
#s1{pointer-events:none}
.hold{position:relative;z-index:2;max-width:620px;opacity:var(--head,0);transform:translateY(calc((1 - var(--head,0)) * 40px))}
.hold .h{font-size:clamp(48px,6vw,104px);margin-bottom:22px;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hold .body{color:#e6e9eb;text-shadow:0 1px 16px rgba(0,0,0,.8)}
.hold .eyebrow{color:#fff}
.flipstage{padding-bottom:clamp(90px,12vw,170px)}

/* the copper pulse: rings of light travel out from the house, visible only where the neighbourhood's copper lines run */
.pulse{position:absolute;inset:0;opacity:var(--pulse,0);mix-blend-mode:screen;filter:saturate(1.1);-webkit-mask-image:url(img/copper-mask.webp);mask-image:url(img/copper-mask.webp);-webkit-mask-size:100% 100%;mask-size:100% 100%;overflow:hidden;pointer-events:none}
.pulse i{position:absolute;left:49.4%;top:46.3%;width:12%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(227,155,101,0) 48%,rgba(246,184,135,.55) 60%,rgba(227,155,101,.4) 68%,rgba(227,155,101,0) 82%);transform:translate(-50%,-50%) scale(.1);opacity:0;animation:pulse 12s cubic-bezier(.25,.6,.35,1) infinite}
.pulse i:nth-child(2){animation-delay:4s}
.pulse i:nth-child(3){animation-delay:8s}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.1);opacity:0}12%{opacity:.9}65%{opacity:.6}100%{transform:translate(-50%,-50%) scale(11);opacity:0}}
@media (prefers-reduced-motion:reduce){.pulse{display:none}}

/* clouds the camera flies through: oversized, feathered sheets, so no edge ever shows */
.clouds3{pointer-events:none;opacity:0;overflow:hidden}
.clouds3 .sheet{position:absolute;inset:-30%;will-change:transform,opacity;-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}
.clouds3 .drifter{position:absolute;inset:0;animation:cloudsway 60s ease-in-out infinite alternate}
.clouds3 .far .drifter{animation-duration:84s;animation-direction:alternate-reverse}
.clouds3 svg{width:100%;height:100%;display:block}
@keyframes cloudsway{from{transform:translate(-4%,-1%)}to{transform:translate(4%,1%)}}
.dim{background:#0b0b0b;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.clouds3 .drifter{animation:none}}

#s1.dark{background:transparent}

/* The bunny run: a full-bleed clip played by scroll, from a speck down the street to rushing past the lens, holding on the last frame. */
.bunny{height:300vh;position:relative;padding:0}
.bstage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0b0b0b}
.brun{position:absolute;inset:0;width:100%;height:100%;display:block}
.bgrade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,11,11,.72),rgba(11,11,11,.2) 45%,transparent 70%),linear-gradient(180deg,rgba(11,11,11,.5),transparent 30%,transparent 80%,rgba(11,11,11,.9))}
.btext{position:absolute;left:0;top:0;padding:clamp(90px,8vw,130px) var(--gut) 0;max-width:min(900px,60vw);opacity:var(--btext,1);transform:translateY(calc((1 - var(--btext,1)) * 30px))}
.btext .h{font-size:clamp(56px,7vw,124px);max-width:10ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.btext .tag{font-size:var(--t-small);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0;font-weight:700}
@media (max-width:860px){.bunny{height:240vh}.btext{max-width:none}.btext .h{font-size:clamp(48px,13vw,72px)}}

/* Direction B (?bunny=b): transparent video, then a depth-mapped hold that overhangs the next section */
.bunny.bmode{height:190vh;z-index:8}
.bmode .bstage{overflow:visible;background:transparent}
.bunny.bmode{background:#0b0b0b}
.bbox{position:absolute;left:0;right:0;bottom:-18vh;aspect-ratio:1440/898;width:100%;z-index:3;pointer-events:none}
.bbox video,.bbox canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .25s linear}
.bbox canvas{opacity:0}.bbox canvas.on{opacity:1}.bbox video.off{opacity:0}
.bmode .btext{z-index:2}
@media (max-width:860px){.bbox{width:170%;left:-35%;bottom:-8vh}}