@font-face{font-family:Pretendard;src:url(/fonts/PretendardVariable.woff2) format("woff2");font-weight:45 920;font-display:swap}

/* The line's x positions. Every segment reads --xa --xb --xe --xd --xc, so all joins share the same two pixel columns.
   Media queries change only the --r* values. Without round() the same values apply unsnapped.
   xa hero and road before the turn, xb after the turn, xe out of the awarded screen, xd into the vision road, xc out of it. */
:root{
  --ink:#000;--ink2:#555;--paper:#fff;--yellow:#F7D408;--blue:#3F589C;--navy:#252E40;
  --ra:71vw;--rb:22vw;--re:82.45vw;--rd:57.25vw;--rc:62.38vw;
  --xa:var(--ra);--xb:var(--rb);--xe:var(--re);--xd:var(--rd);--xc:var(--rc);
  --m:5vw;
  --gap:44px; /* text starts this far past the line */
  --line:var(--ink);
  --v:min(1vw,15px); /* vertical rhythm: stops growing at 1500px so wide screens stay within the page height limit */
  --date:clamp(15px,1.2vw,17px);
  --vh:100vh;
  --hero-h:max(var(--vh),660px);
  --iw:max(105.5vw,calc(var(--hero-h)*1.777)); /* hero photo width: covers at any aspect */
  --aw:117vw; /* awarded screen width: the smallest that still covers the page with its gutter on --xb */
  --ah:calc(var(--aw)*.484375); /* 930 of 1920: crop height where the gutter reaches --xe */
}
@supports (height:1svh){:root{--vh:100svh}}
@supports (width:round(1vw,1px)){
  :root{--xa:round(var(--ra),1px);--xb:round(var(--rb),1px);--xe:round(var(--re),1px);--xd:round(var(--rd),1px);--xc:round(var(--rc),1px)}
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 Pretendard,system-ui,sans-serif;word-break:keep-all;overflow-wrap:break-word;overflow-x:clip;font-feature-settings:"tnum"}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
img,video,svg{display:block;max-width:none}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
h1,h2,h3,h4{font-weight:450;letter-spacing:-.022em}
h1{font-size:clamp(34px,5.6vw,104px);line-height:1.12;letter-spacing:-.034em}
h2{font-size:clamp(30px,3.6vw,60px);line-height:1.2;letter-spacing:-.028em}
h3{font-size:clamp(21px,1.9vw,30px);line-height:1.32}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
.nw{white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:30;background:#fff;color:#000;padding:10px 16px}
.skip:focus{left:8px;top:8px}
.link{text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px}
.link:hover{text-decoration-thickness:2px}
.lede{color:var(--ink2);max-width:34em;margin-top:20px}
.note{color:var(--ink2);font-size:15px}
figcaption{font-size:15px;line-height:1.5}

/* the line */
.ax{position:relative}
/* bottom:-1px runs under the next section, so a fractional section height cannot leave a grey row */
.ax::before{content:"";position:absolute;top:var(--lt,0);bottom:-1px;left:calc(var(--x) - 1px);width:2px;background:var(--line)}
.pre{--x:var(--xa)}
.post{--x:var(--xb);--lt:-1px}
.after{--x:var(--xc)}
.only-narrow,.only-phone{display:none}
/* wider than 8:5 the long path starts under the menu or off screen */
@media (min-aspect-ratio:1601/1000) and (min-width:901px){.only-wide{display:none}.only-phone{display:block}.origin{left:67.79%!important;top:51.01%!important}}
.dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--line)}

/* header */
.top{position:absolute;z-index:10;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:28px var(--m);color:#fff}
.logo img{width:clamp(170px,16vw,230px);height:auto}
.menu summary{display:none}
.menu nav{display:flex;gap:30px;font-size:15px}
.menu nav a{text-decoration:none}
.menu nav a:hover{text-decoration:underline;text-underline-offset:.3em}

/* 1. hero: plate shares geometry between photo and traced line; road exit lands on --xa */
.hero{position:relative;height:var(--hero-h);overflow:hidden;background:#1a1f14;color:#fff}
.plate{position:absolute;width:var(--iw);aspect-ratio:1672/941;left:calc(var(--xa) - .675*var(--iw));bottom:0}
.plate img,.plate svg{position:absolute;inset:0;width:100%;height:100%}
.plate img{filter:saturate(.62) brightness(.6) contrast(1.06)}
.plate svg{overflow:visible}
.plate path,.vline path,.bend path,.sweep path,.shot-line path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.plate path,.vline path,.shot-line path{stroke:#fff}
/* the last stretch of the photo's line is a plain 2px bar, so it meets the next section on the same two pixel columns */
.hero::after{content:"";position:absolute;left:calc(var(--xa) - 1px);bottom:0;width:2px;height:20px;background:#fff}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.12) 62%,rgba(0,0,0,.05)),linear-gradient(0deg,rgba(0,0,0,.5),transparent 42%)}
.origin{position:absolute;left:59.73%;top:16.37%;font-size:17px;line-height:1.4;width:0;white-space:nowrap;font-weight:500}
.origin::before{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#fff}
.origin span{position:absolute;left:62px;top:-12px}
.hero-head,.hero-foot{position:absolute;left:var(--m)}
.hero-head{bottom:clamp(120px,15vh,150px);width:min(60vw,1100px)}
.hero-desc{margin-top:24px;font-size:clamp(16px,1.25vw,20px);max-width:37em;line-height:1.6}
.hero-foot{bottom:44px;right:var(--m);display:flex;justify-content:space-between;align-items:flex-end}
.hero-cta{display:flex;align-items:center;gap:26px;font-size:16px}
.btn-white{display:inline-block;background:#fff;color:#000;text-decoration:none;padding:12px 20px;border-radius:3px;font-weight:500}
.btn-white:hover{background:#e6e6e6}
.award{position:absolute;left:calc(var(--xa) - var(--m) + 34px);right:0;bottom:24px;font-size:clamp(21px,1.9vw,34px);line-height:1.28;font-weight:500;letter-spacing:-.018em}
.award .nw{display:block}

/* 2. the road. Open before the turn; after it, titles grow toward 2026 and the text takes the full width. */
.path-head{display:grid;grid-template-columns:calc(var(--xa) - var(--m) - 56px) minmax(0,1fr);column-gap:86px;align-items:end;padding:calc(var(--v)*7) var(--m) calc(var(--v)*3)}
.path-head h2{font-size:clamp(30px,4.1vw,70px);line-height:1.16;letter-spacing:-.03em}
.path-head .lede{margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.55}
.row{position:relative;--pad:20px;--t:clamp(23px,2.3vw,36px);--c:calc(var(--t)*.66);padding-block:var(--pad)}
.row h3{font-size:var(--t);line-height:1.28;letter-spacing:-.024em}
.row .date{position:absolute;top:calc(var(--pad) + var(--c) - .62em);font-size:var(--date);line-height:1.24;font-weight:500}
.row .dot{left:calc(var(--x) - 6px);top:calc(var(--pad) + var(--c) - 6px)}
.row p{max-width:34em}
.pre .row{--pad:calc(var(--v)*1.7);padding-left:var(--m);padding-right:calc(100vw - var(--xa) + 60px)}
.pre .row p{margin-top:6px}
.pre .date{left:calc(var(--xa) + 30px)}
.post .row{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7fr);column-gap:3vw;align-items:baseline;padding-left:calc(var(--xb) + var(--gap));padding-right:var(--m)}
.post .txt{display:contents}
.post .date{right:calc(100vw - var(--xb) + 30px)}
.post .row:first-child{--t:clamp(21px,1.9vw,30px)}
.post .row.with-aside{--t:clamp(25px,2.8vw,46px)}
.row.tick{--pad:7px;--c:14px}
.post .row.tick .txt{display:block;grid-column:1/-1}
.post .row.big{display:block;--pad:calc(var(--v)*3.2);--t:clamp(30px,4.8vw,80px);padding-bottom:calc(var(--v)*2.4)}
.post .row.big .txt{display:block}
.post .row.big h3{letter-spacing:-.034em;line-height:1.1}
.post .row.big p{font-size:clamp(18px,1.55vw,25px);line-height:1.5;max-width:38em;margin-top:calc(var(--v)*1.2)}

/* the Wonderpool stop: small clip beside the line, so nothing crosses it */
.wp{--clip:min(280px,calc(100vw - var(--xa) - 50px));min-height:calc(var(--pad) + 40px + var(--clip)*.625 + 8px)}
.clip{position:absolute;z-index:1;top:calc(var(--pad) + var(--c) + 22px);left:calc(var(--xa) + 30px);width:var(--clip);height:auto;background:var(--yellow);cursor:pointer}
.row .stop{left:calc(var(--xa) - 9px);top:calc(var(--pad) + var(--c) - 9px);width:18px;height:18px;background:var(--yellow);box-shadow:0 0 0 2px var(--ink)}

/* the turn */
.bend{position:relative;height:clamp(150px,15vw,250px)}
.bend svg,.sweep svg{position:absolute;top:0;height:100%;overflow:visible}
.bend svg{left:var(--xb);width:calc(var(--xa) - var(--xb))}
.bend path,.sweep path{stroke:var(--ink)}
.decide{position:absolute;width:18px;height:18px;border-radius:50%;z-index:1;left:calc(var(--xb) - 9px);bottom:-9px;background:var(--blue)}
/* the curve only ever descends, so a top-down wipe reads as drawing; dash tricks break with non-scaling-stroke */
.js .bend svg{clip-path:inset(0 -2px 100% -2px);transition:clip-path 1.5s cubic-bezier(.5,0,.2,1)}
.js .bend .decide{opacity:0;transition:opacity .3s 1.3s}
.js .bend.on svg{clip-path:inset(0 -2px -2px -2px)}
.js .bend.on .decide{opacity:1}

/* the 2024 row hangs an official image off the page edge, cut to the screen alone */
.post .row.with-aside{--pad:calc(var(--v)*1.4);grid-template-columns:minmax(0,1fr) 31vw;align-items:start;padding-right:0}
.with-aside .txt{display:block}
.with-aside .txt p{margin-top:8px;max-width:27em}
.aside-crop{height:12vw;overflow:hidden;background:var(--navy)}
/* the flow panel of the first window, below its title bar */
.aside-crop img{width:198%;height:auto;margin:-15.3% 0 0 -9.4%}
.aside figcaption{margin-top:8px;color:var(--ink2)}

.more-wrap{padding:calc(var(--v)*1.6) var(--m) calc(var(--v)*5) calc(var(--xb) + var(--gap))}
.dir{font-size:clamp(20px,1.8vw,29px);line-height:1.42;letter-spacing:-.016em;max-width:32em}
.dir .link{white-space:nowrap}
.mores{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 4vw;margin-top:calc(var(--v)*2);align-items:start}
.more summary{cursor:pointer;list-style:none;display:inline-flex;gap:10px;align-items:baseline;padding:6px 0;font-size:clamp(18px,1.4vw,20px)}
.more summary:hover{text-decoration:underline;text-underline-offset:.24em}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+"}
.more[open] summary::after{content:"\2212"}
.more-body{padding:14px 0 12px}
.more-body p+p{margin-top:14px}
.more-body strong{font-weight:600}
.full{margin-top:16px;font-size:16px}
.full li{display:grid;grid-template-columns:5em 1fr;gap:10px;padding:5px 0}
.full time{color:var(--ink2)}

/* 3. recognition: the white line rides the gutters of the awarded screen, as it rides the road in the two photos.
   The image's own fade reaches --navy, so image and text share one plane. */
.recog{position:relative;background:var(--navy);color:#fff;--line:#fff;--x:var(--xe)}
.shot{position:relative}
.shot-crop{position:relative;height:var(--ah);overflow:hidden}
/* 626 of 1920 is where the gutter meets the top edge */
.shot-crop img{position:absolute;top:0;left:calc(var(--xb) - .32604*var(--aw));width:var(--aw);height:auto}
.shot-fade{position:absolute;left:0;right:0;bottom:-1px;height:calc(var(--ah)*.62);background:linear-gradient(0deg,var(--navy) 6%,rgba(37,46,64,.985) 64%,rgba(37,46,64,0))}
.shot-line{position:absolute;top:0;left:var(--xb);width:calc(var(--xe) - var(--xb));height:var(--ah);overflow:visible}
.shot figcaption{position:absolute;top:calc(var(--ah) + 12px);left:calc(var(--xe) + 24px);right:var(--m);color:#c9cfdb}
.recog-body{--over:calc(var(--ah)*.38);--lt:calc(var(--over) - 2px);margin-top:calc(-1*var(--over));padding:0 var(--m) calc(var(--v)*5)}
.recog-body h2{position:relative;font-size:clamp(21px,1.8vw,30px);line-height:1.3;letter-spacing:-.018em}
.wins{position:relative;display:grid;grid-template-columns:32vw 30vw;margin-top:calc(var(--v)*1.2)}
.wins li{display:grid;grid-row:span 7;grid-template-rows:subgrid;justify-items:start}
.mk{display:flex;align-items:flex-end;height:clamp(40px,5.1vw,92px);font-size:clamp(30px,5vw,88px);line-height:1;font-weight:500;letter-spacing:-.04em}
.won{font-size:clamp(17px,1.4vw,22px);font-weight:500;margin-top:6px}
.wn{font-size:clamp(21px,2.2vw,36px);line-height:1.2;letter-spacing:-.022em;margin-top:calc(var(--v)*1.3)}
.prod{margin-top:2px;font-size:16px;line-height:1.45;padding-right:2vw}
.when{font-size:var(--date);font-weight:500;margin-top:calc(var(--v)*1)}
.fact{color:#c9cfdb;font-size:15px;line-height:1.5;padding-right:2vw;margin-top:2px}
.credit{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px;margin-top:calc(var(--v)*2.4);font-size:clamp(21px,2.2vw,36px);line-height:1.25;letter-spacing:-.022em}
.client{color:#c9cfdb;font-size:16px;letter-spacing:0}
.wins .link{margin-top:10px;font-size:16px}
.recog-rest{position:relative;display:grid;grid-template-columns:32vw minmax(0,1fr);margin-top:calc(var(--v)*3.6);padding-right:calc(100vw - var(--xe) - var(--m) + 28px)}
.recog-say{font-size:16px;line-height:1.55;padding-right:4vw}
.recog-say .note{color:#c9cfdb;margin-top:8px}
.ledger li{position:relative;padding:5px 0}
.ledger h3{font-size:clamp(17px,1.3vw,20px);line-height:1.45}
.ledger p{color:#c9cfdb;font-size:15px;line-height:1.5}
.ledger .dot{left:calc(100% + 28px - 6px);top:calc(5px + .73em - 6px)}
.ledger .yr{position:absolute;left:calc(100% + 28px + 24px);top:calc(5px + .15em);font-size:var(--date);font-weight:500;line-height:1.45}

/* 4. products + applications, capped at 25% of page height. The line stands on the right; each product is a stop with its tier and link past the line. */
.products{--x:var(--xe);--sidex:calc(var(--xe) - var(--m) + 24px);padding:calc(var(--v)*6) calc(100vw - var(--xe) + 40px) 0 var(--m)}
.products>h2{font-size:clamp(28px,2.7vw,46px)}
.sub{font-size:clamp(17px,1.25vw,20px);margin-top:4px}
.tier{color:var(--ink2);font-size:15px;line-height:1.45}
.side{position:absolute;left:var(--sidex);width:calc(100vw - var(--xe) - 24px - var(--m));top:0;font-size:16px;line-height:1.5}
.side .link{display:inline-block;margin-top:6px}
.side .dot{left:calc(-24px - 6px);top:5px}
.pd-claw{position:relative;margin-top:calc(var(--v)*3);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6.4fr);column-gap:3vw;align-items:end}
.claw-head h3{font-size:clamp(34px,4.9vw,84px);line-height:1;letter-spacing:-.04em;font-weight:500}
.claw-head .sub{margin-top:10px}
.pd-claw>.side{top:1.2vw}
.claw-body{font-size:16px;line-height:1.6}
.claw-body p+p{margin-top:8px}
/* The screen ends exactly on the line, so the line runs beside it and never stops at it. The drawing sits behind, with its people clear of the screen. */
.layers{grid-column:1/-1;position:relative;margin:calc(var(--v)*2.4) 0 0 calc(-1*var(--m));width:calc(var(--xe) - 1px);height:calc((var(--xe) - 24vw)*.37875 + 6vw)}
.layers img{position:absolute;height:auto}
.l-scene{left:0;top:0;width:47vw}
.l-front{z-index:1;right:0;bottom:0;width:calc(var(--xe) - 1px - 24vw);aspect-ratio:1600/606;object-fit:cover;object-position:top}
/* type size is the hierarchy: flagship, foundation, separate app */
.pd{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6.4fr);column-gap:3vw;align-items:baseline}
.pd-sk{margin-top:calc(var(--v)*3.2)}
.pd-sk h3{font-size:clamp(26px,3.6vw,62px);line-height:1.1;letter-spacing:-.034em}
.pd-mi{margin-top:calc(var(--v)*2)}
.pd-mi h3{font-size:clamp(23px,2.3vw,38px);line-height:1.15;letter-spacing:-.028em}
.pd-say{font-size:16px;line-height:1.6}
.pd>.side{top:.3em}
/* black stops exactly on the line, so the line is the edge of the block and the links stand on the white past it */
.apps-block{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6.4fr);column-gap:3vw;align-items:start;margin:calc(var(--v)*4.4) 0 0 calc(-1*var(--m));width:calc(var(--xe) - 1px);background:#000;color:#fff;padding:calc(var(--v)*4) 40px calc(var(--v)*3.4) var(--m)}
.apps-title{font-size:clamp(26px,3.3vw,56px);line-height:1.14;letter-spacing:-.03em}
.apps li{position:relative;padding-block:calc(var(--v)*.9);font-size:16px;line-height:1.55;color:#d4d4d4}
.apps li:first-child{padding-top:0}
.apps li>p{margin-top:6px}
.apps h3{font-size:clamp(19px,1.9vw,32px);line-height:1.22;letter-spacing:-.022em;color:#fff}
.apps .side{top:calc(var(--v)*.9 + .3em);left:calc(100% + 40px + 24px);color:var(--ink)}
.apps li:first-child .side{top:.3em}
.soon{color:var(--ink2)}

/* the line swings back to reach the road ahead */
.sweep{position:relative;height:clamp(110px,11vw,190px)}
.sweep svg{left:var(--xd);width:calc(var(--xe) - var(--xd))}

/* 5. vision: natural colour, heading low on the left, the line rides the road's right edge */
.vision{position:relative;background:#000;color:#fff;--line:#fff;--viw:120vw;--vf:.50074;--vt:.27213;--band:34.45vw;--tail:6vw}
.band{position:relative;height:var(--band);overflow:hidden}
.vplate{position:absolute;width:var(--viw);aspect-ratio:1672/941;left:calc(var(--xd) - var(--vf)*var(--viw));top:calc(-1*var(--vt)*var(--viw))}
.vplate img{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1)}
.vscrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.42),transparent 54%),linear-gradient(0deg,rgba(0,0,0,.4),transparent 46%)}
.vline{position:absolute;z-index:1;top:0;left:var(--xd);width:calc(var(--xc) - var(--xd));height:calc(var(--band) + var(--tail));overflow:visible}
.band h2{position:absolute;left:var(--m);bottom:clamp(30px,4vw,58px);font-size:clamp(28px,4.4vw,80px);line-height:1.14;letter-spacing:-.034em}
.band h2 span{display:block}
/* big statement left of the line, small facts right of it */
.vision-body{--lt:calc(var(--tail) - 1px);display:grid;grid-template-columns:calc(var(--xc) - var(--m) - 66px) minmax(0,1fr);column-gap:calc(66px + var(--gap));padding:calc(var(--v)*4.4) var(--m) calc(var(--v)*6)}
.vision-lead{font-size:clamp(22px,2.3vw,38px);line-height:1.4;letter-spacing:-.018em}
.vision-sub{color:#c4c4c4;margin-top:calc(var(--v)*2);max-width:37em}
.problems li+li{margin-top:20px}
.problems h3{font-size:clamp(17px,1.3vw,20px);line-height:1.5}
.problems p{color:#c4c4c4;font-size:16px;line-height:1.6;margin-top:2px}

/* 6. people: each .pf is a 4:5 illustration above the name */
.people{padding:calc(var(--v)*5.5) var(--m) calc(var(--v)*4);--g:22px}
.lead-head{display:grid;grid-template-columns:calc(var(--xc) - var(--m) - var(--gap)) minmax(0,1fr);column-gap:calc(2*var(--gap));align-items:end}
.lead-head h2{font-size:clamp(28px,3.6vw,60px);line-height:1.14;letter-spacing:-.03em}
.lead-head .lede{margin:0;font-size:16px;line-height:1.6}
.crew{--pfw:calc((var(--xc) - var(--m) - var(--gap) - 2*var(--g))*.25);display:grid;margin-top:calc(var(--v)*3.4);align-items:baseline;grid-template-columns:calc((var(--xc) - var(--m) - var(--gap) - 2*var(--g))*.5) calc((var(--xc) - var(--m) - var(--gap) - 2*var(--g))*.25) calc((var(--xc) - var(--m) - var(--gap) - 2*var(--g))*.25) calc((100vw - var(--xc) - var(--m) - var(--gap) - var(--g))/2 + 2*var(--gap) - var(--g)) calc((100vw - var(--xc) - var(--m) - var(--gap) - var(--g))/2);column-gap:var(--g)}
.crew li:nth-child(4){margin-left:calc(2*var(--gap) - var(--g))}
.pf{aspect-ratio:4/5;margin-bottom:12px}
@media (min-width:901px){
  .crew li{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-items:baseline}
  .pf{grid-row:1;align-self:end}
  .crew h3{grid-row:2}.crew .role{grid-row:3}.crew .say{grid-row:4}
  .crew li:not(:first-child) .pf{width:var(--pfw)}
}
.pf img{width:100%;height:100%;object-fit:cover}
.crew h3{font-size:clamp(23px,2.4vw,40px);line-height:1.16;letter-spacing:-.028em}
.crew .role{font-size:16px;font-weight:500;margin-top:4px}
.crew .say{font-size:15px;line-height:1.5;color:var(--ink2);margin-top:2px}
.crew li:nth-child(1) h3{font-size:clamp(34px,4.9vw,84px);line-height:1;letter-spacing:-.04em;font-weight:500}
.crew li:nth-child(1) .role{font-size:clamp(17px,1.4vw,22px);margin-top:10px}
.crew li:nth-child(1) .say{font-size:16px}

/* 7. contact: the line comes down the right and turns left to end at the visitor's decision */
.contact{position:relative;overflow:hidden;display:grid;grid-template-columns:calc(var(--xc) - var(--m) - 66px) minmax(0,1fr);column-gap:calc(66px + var(--gap));align-items:end;padding:calc(var(--v)*5) var(--m) calc(var(--v)*7)}
.contact h2{font-size:clamp(30px,4.1vw,70px);line-height:1.16;letter-spacing:-.03em}
.contact>p{max-width:37em;color:var(--ink2)}
.end{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;width:calc(var(--xc) - var(--m) + 1px);margin-top:calc(var(--v)*3.4)}
.end::after{content:"";margin-top:-2000px;height:calc(50% + 2001px);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);border-bottom-right-radius:18px}
.btn-blue{display:block;background:var(--blue);color:#fff;text-decoration:none;font-size:clamp(20px,2.6vw,44px);line-height:1.2;letter-spacing:-.02em;padding:clamp(15px,1.5vw,26px) clamp(22px,2.2vw,38px);border-radius:3px;font-weight:500}
.btn-blue:hover{background:#34497f}

/* footer */
.foot{background:#000;color:#c4c4c4;padding:64px var(--m) 28px;font-size:15px;line-height:1.6}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-top{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr));gap:32px}
.foot-brand img{width:170px;height:auto}
.foot-brand p{margin-top:16px;color:#fff}
.foot nav a{display:block;padding:3px 0}
.foot nav p{color:#fff;margin-bottom:8px}
.offices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:56px;max-width:980px}
.country{color:#fff;margin-bottom:6px}
.entity{color:#fff}
.foot-end{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:48px;font-size:14px;color:#a8a8a8}
.foot-end span:last-child{margin-left:auto}

/* tablet: the line keeps to the left gutter after the turn; the awarded screen sends it out and back to the same column, and the second sweep goes */
@media (max-width:900px){
  :root{--iw:max(134vw,calc(var(--hero-h)*1.777));--ra:90vw;--rb:7vw;--re:7vw;--rd:7vw;--rc:13.79vw;--gap:36px;--aw:200vw;--ah:calc(var(--aw)*.33333);--v:1.5vw}
  .only-wide-pc{display:none}
  .only-narrow{display:block}
  /* seven links do not fit beside the logo below about 770px */
  .menu{position:relative}
  .menu summary{display:block;list-style:none;width:44px;height:44px;margin:-10px -10px -10px 0;position:relative;cursor:pointer}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary span,.menu summary::after{content:"";position:absolute;left:10px;right:10px;height:2px;background:#fff}
  .menu summary span{top:17px}
  .menu summary::after{top:25px}
  .menu nav{position:absolute;right:-10px;top:42px;flex-direction:column;gap:0;background:#000;padding:10px 20px;min-width:150px;font-size:16px}
  .menu nav a{padding:8px 0}
  .hero-head{width:62vw;bottom:190px}
  .hero-foot{display:block}
  h1{font-size:clamp(34px,5.8vw,56px)}
  .award{position:static;margin-top:18px;font-size:clamp(21px,3.2vw,26px)}
  .origin span{left:auto;right:30px}
  .path-head{display:block;padding-right:calc(100vw - var(--xa) + 28px)}
  .path-head .lede{margin-top:16px}
  .pre .row{padding-right:calc(100vw - var(--xa) + 28px)}
  .row .date,.pre .date,.post .date{position:static;display:block;margin-bottom:4px;font-size:16px}
  .post .row,.post .row.with-aside{display:block;padding-right:6vw}
  .post .row .txt{display:block}
  .post .row p{margin-top:6px}
  .row .dot{top:calc(var(--pad) + 4px)}
  .row .stop{top:calc(var(--pad) + 1px)}
  .wp{min-height:0;--clip:min(240px,56vw)}
  .wp .txt{margin-bottom:18px}
  .clip{position:relative;top:auto;left:auto;margin-left:calc(var(--xa) - var(--m) - var(--clip) - 26px)}
  .post .row.with-aside{padding-right:0}
  .with-aside .txt{padding-right:6vw}
  .aside{margin-top:16px}
  .aside-crop{height:44vw}
  .aside figcaption{padding-right:6vw}
  .more-wrap{padding-right:6vw}
  .mores{grid-template-columns:1fr}

  .recog{--x:var(--xb)}
  .shot-line{width:calc(var(--aw)*.125)}
  .shot-fade{height:calc(var(--ah)*.3);background:linear-gradient(0deg,var(--navy) 30%,rgba(37,46,64,0))}
  .shot figcaption{position:static;margin:10px 6vw 0 calc(var(--xb) + var(--gap))}
  .recog-body{--over:0px;margin-top:0;padding:28px 6vw 48px calc(var(--xb) + var(--gap))}
  /* the caption sits below the image, so the line must run through its height too */
  .shot::after{content:"";position:absolute;left:calc(var(--xb) - 1px);top:calc(var(--ah) - 1px);bottom:0;width:2px;background:#fff}
  .wins{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin-top:20px}
  .mk{height:clamp(40px,6vw,50px);font-size:clamp(30px,5.2vw,44px)}
  .made{margin-top:14px}
  .recog-rest{display:block;padding-right:0;margin-top:32px}
  .recog-say{padding-right:0;margin-bottom:18px}
  .ledger .dot{left:calc(-1*var(--gap) - 6px);top:calc(5px + 28px)}
  .ledger .yr{position:static;display:block;order:-1;font-size:16px}
  .ledger li{display:flex;flex-direction:column}

  .products{--x:var(--xb);padding:48px 6vw 0 calc(var(--xb) + var(--gap))}
  .side{position:relative;left:auto;top:auto;width:auto}
  .side .dot{left:calc(-1*var(--gap) - 6px);top:.5em}
  .pd-claw>.side,.pd>.side{top:auto;margin-top:10px}
  .pd-claw{display:block;margin-top:28px}
  .claw-body{margin-top:14px}
  .layers{margin:24px -6vw 0 calc(-1*var(--gap) + 1px);width:calc(100vw - var(--xb) - 1px);height:calc((100vw - var(--xb) - 1px)*.66)}
  .l-scene{left:auto;right:0;width:74%}
  .l-front{right:0;left:0;width:100%;bottom:0}
  .pd{display:block}
  .pd-sk{margin-top:36px}
  .pd-mi{margin-top:30px}
  .pd-say{margin-top:8px}
  /* black reaches the page edge and the line turns white across it */
  .apps-block{position:relative;display:block;margin:44px -6vw 0 calc(-1*(var(--xb) + var(--gap)));width:auto;padding:36px 6vw 30px calc(var(--xb) + var(--gap))}
  .apps-block::before{content:"";position:absolute;top:0;bottom:-1px;left:calc(var(--xb) - 1px);width:2px;background:#fff}
  .apps{margin-top:14px}
  .apps li{padding-block:12px}
  .apps li>p{margin-top:4px}
  .apps li:first-child{padding-top:12px}
  .apps li:first-child .side{top:auto}
  .apps .side{left:auto;top:auto;margin-top:6px;color:#fff}
  .soon{color:#c9c9c9}
  .sweep{display:none}

  /* narrow screens trace the road's left edge so the road stays on screen beside the gutter line */
  .vision{--viw:182vw;--vf:.45713;--vt:.27512;--band:51.7vw;--tail:4.55vw}
  /* covers the row where the two white lines meet on a fractional section edge */
  .vision::before{content:"";position:absolute;z-index:2;left:calc(var(--xd) - 1px);top:-1px;width:2px;height:3px;background:#fff}
  .vscrim{background:linear-gradient(0deg,#000,rgba(0,0,0,0) 40%),linear-gradient(90deg,transparent 10vw,rgba(0,0,0,.3) 30vw)}
  .band h2{left:26vw;bottom:5vw}
  .vision-body{display:block;padding:40px 6vw 64px 26vw}
  .problems{margin-top:36px}
  .people{padding:44px 6vw 40px calc(var(--xc) + var(--gap))}
  .lead-head{display:block}
  .lead-head .lede{margin-top:12px}
  .crew{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;margin-top:30px}
  .crew li:nth-child(1){grid-column:1/-1}
  .crew li:nth-child(1) .pf{width:66%}
  .crew li:nth-child(4){margin-left:0}
  .crew h3{font-size:clamp(23px,3.6vw,30px)}
  .crew li:nth-child(1) h3{font-size:clamp(32px,5.6vw,44px)}
  .contact{display:block;padding:32px 6vw 72px calc(var(--xc) + var(--gap))}
  .contact>p{margin-top:18px}
  .end{display:inline-block;position:relative;width:auto;margin-top:36px}
  .end::after{display:none}
  .end::before{content:"";position:absolute;right:100%;bottom:50%;width:calc(var(--gap) + 1px);height:2000px;margin-bottom:-1px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);border-bottom-left-radius:18px}
  .foot-top{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}

/* phone */
@media (max-width:640px){
  :root{--ra:94.8vw;--rb:5.2vw;--re:5.2vw;--rd:5.2vw;--rc:14.16vw;--m:20px;--gap:26px;--hero-h:max(var(--vh),700px);--aw:340vw;--v:2.4vw}
  body{font-size:16px}
  .only-wide{display:none}
  .only-phone{display:block}
  .top{padding:20px var(--m)}
  .logo img{width:156px}
  h1{font-size:clamp(33px,8.8vw,40px)}
  .claw-head h3,.crew li:nth-child(1) h3{font-size:30px}
  .hero-head{top:76px;bottom:auto;width:auto;right:var(--m)}
  .hero-desc{margin-top:14px;font-size:16px;line-height:1.5}
  .scrim{background:linear-gradient(180deg,rgba(0,0,0,.66),rgba(0,0,0,.56) 52%,rgba(0,0,0,.12) 66%,rgba(0,0,0,.6))}
  .origin{left:67.79%;top:51.01%}
  .origin span{left:auto;right:18px;top:-11px}
  .hero-foot{display:block;bottom:24px}
  .hero-cta{gap:18px;font-size:15px}
  .btn-white{padding:11px 16px}
  .award{margin-top:16px;font-size:21px}
  .path-head{padding-top:28px;padding-bottom:12px;padding-right:calc(100vw - var(--xa) + 20px)}
  .pre .row{--pad:14px;padding-right:calc(100vw - var(--xa) + 20px)}
  .row{--pad:10px}
  .row.tick{--pad:6px}
  .post .row.big{--pad:10px}
  .post .row{padding-right:var(--m)}
  .wp{--clip:50vw}
  .clip{margin-left:calc(var(--xa) - var(--m) - var(--clip) - 20px)}
  .bend{height:64px}
  .with-aside .txt,.aside figcaption{padding-right:var(--m)}
  .aside-crop{height:38vw}
  .with-aside .note{display:none}
  .wp .txt{margin-bottom:12px}
  .more-wrap{padding-right:var(--m);padding-bottom:24px}
  .full li{grid-template-columns:4.6em 1fr;gap:8px}

  .recog-body{padding:24px var(--m) 44px calc(var(--xb) + var(--gap))}
  .shot figcaption{margin-right:var(--m)}
  .wins{margin-top:18px;column-gap:14px}
  .mk{height:38px;font-size:32px}
  .products{padding:44px var(--m) 0 calc(var(--xb) + var(--gap))}
  /* phone: the real screen loses its sidebar so its content stays readable */
  .layers{margin-right:calc(-1*var(--m));height:auto;overflow:hidden}
  .layers img{position:relative}
  .l-scene{width:100%;right:auto}
  .l-front{width:138%;margin:-16vw 0 0 -38%}
  .apps-block{margin-right:calc(-1*var(--m));padding-right:var(--m)}
  .vision{--viw:240vw;--band:68.18vw;--tail:6vw}
  .vscrim{background:linear-gradient(0deg,#000 6%,rgba(0,0,0,0) 62%)}
  .band h2{left:calc(var(--xc) + 26px);right:var(--m);bottom:6vw;font-size:clamp(25px,7vw,30px)}
  .vision-body{padding:32px var(--m) 52px calc(var(--xc) + 26px)}
  .people{padding:40px var(--m) 36px calc(var(--xc) + 26px)}
  .crew{gap:22px 12px}
  .contact{padding:16px var(--m) 64px calc(var(--xc) + 26px)}
  .end{margin-top:26px}
  .btn-blue{padding:13px 14px;font-size:clamp(16px,4.6vw,19px)}
  .foot{padding-top:48px}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .offices{grid-template-columns:1fr}
  .foot-end span:last-child{margin-left:0;width:100%}
}