/* Zero to One: one stylesheet, three layers.
   1. Tokens and base   2. Components, desktop first   3. Breakpoints (1100px, 760px) and special viewports.
   Each property is declared once per breakpoint. */

/* ---------- Fonts (self-hosted; WOFF2 Latin subset with the original WOFF as fallback) ---------- */
@font-face{font-family:Montserrat;src:url('assets/montserrat-light.woff2') format('woff2'),url('assets/montserrat-light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/montserrat-regular.woff2') format('woff2'),url('assets/montserrat-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
/* Metric-matched local fallback keeps the swap from reflowing the display headings. */
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica');size-adjust:113%;ascent-override:85%;descent-override:22%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  /* colour */
  --bg:#080808;--fg:#f0f0ed;--accent:#3449ee;--focus:#5b6cff;
  --text-2:#aaa;          /* secondary body copy on dark */
  --text-3:#999;          /* tertiary body copy on dark */
  --muted:#8a8a8a;        /* labels on dark, >= 4.5:1 */
  --muted-light:#5f6670;  /* labels on the light section, >= 4.5:1 */
  --radar-ink:#5f6873;
  --line:#2a2a2a;--line-strong:#3a3a3a;--line-light:#cbd0d5;--line-paper:#c6c6c1;
  --paper:#f3f4f5;
  /* type */
  --font:'Montserrat','Montserrat Fallback','Century Gothic',sans-serif;
  --body:'Montserrat','Montserrat Fallback',sans-serif;
  --fs-display:clamp(41px,6.8vw,108px);
  --fs-spot:clamp(48px,7.1vw,110px);
  --fs-h1:clamp(34px,3.9vw,62px);
  --fs-h2:clamp(38px,4.8vw,75px);
  --fs-h3:clamp(23px,2.2vw,32px);
  --fs-lead:18px;--fs-body:16px;
  --label-size:12px;--label-sm:11px;--label-track:.13em;
  --tracking-display:-.035em;
  --lh-body:1.8;--lh-display:1.12;--lh-title:1.2;--lh-heading:1.35;
  /* space */
  --gutter:clamp(20px,4.4vw,56px);
  --page-pad:max(var(--gutter),(100% - 1600px)/2);
  --section-y:clamp(64px,3rem + 5.5vw,130px);
  --spot-y:clamp(60px,2.5rem + 4.2vw,96px);
  --block-gap:clamp(28px,1rem + 2.4vw,56px);
  --block-gap-lg:clamp(36px,1.5rem + 3.6vw,80px);
  --col-gap:clamp(24px,1rem + 2vw,48px);
  --row-gap:clamp(20px,1rem + .8vw,28px);
  --eyebrow-gap:clamp(24px,1rem + 1.6vw,40px);
  --split:1fr 2.25fr;
  /* background grid: six columns across the container, measured against main (cqw excludes a classic scrollbar) */
  --grid-cols:6;
  --grid-cell:min(266.6667px,(100vw - 2*var(--gutter))/var(--grid-cols));
  --grid-row:calc(var(--grid-cell)*.4494);
  --grid-x:max(var(--gutter),(100vw - 1600px)/2);
  /* radar */
  --radar-ratio:1.62;
}
@supports (width:1cqw){
  :root{--grid-cell:min(266.6667px,(100cqw - 2*var(--gutter))/var(--grid-cols));--grid-x:max(var(--gutter),(100cqw - 1600px)/2)}
  main{container-type:inline-size}
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:25px}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-body) var(--body);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:white}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.journey a:focus-visible,.journey button:focus-visible{outline-color:var(--accent)}
p,h1,h2,h3,h4{margin:0;font-weight:400}
.wrap{width:min(1600px,100% - 2*var(--gutter));margin-inline:auto}
.eyebrow{font-size:var(--label-size);letter-spacing:var(--label-track);line-height:1.6}
.skip{position:fixed;top:20px;left:20px;padding:15px;background:white;color:black;z-index:10;opacity:0;transform:translateY(-300%)}
.skip:focus{opacity:1;transform:none}

/* Display type shares one weight and tracking. */
h1,h2,.pillars h3,.one-definition p{font-weight:300;letter-spacing:var(--tracking-display)}

/* Touch targets: at least 44px tall without changing the visual rhythm. */
.wordmark,.header nav a,.text-link,.scroll-link,.back-top,.radar-toolbar button{min-height:44px;display:inline-flex;align-items:center}

/* ---------- Header ---------- */
.header{height:clamp(76px,3rem + 3.6vw,104px);display:flex;align-items:center;justify-content:space-between;gap:40px;border-bottom:1px solid #242424}
.wordmark-art{display:block;width:188px;height:auto;max-width:100%;overflow:hidden}
.header nav{display:flex;align-items:center;gap:34px;margin-left:auto;color:var(--text-2)}
.header nav a{position:relative;font-size:13px;line-height:1;padding-block:12px}
.header nav a:after{content:'';position:absolute;bottom:9px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.header nav a:is(:hover,:focus-visible,[aria-current=page]):after{transform:scaleX(1)}
.header nav a[aria-current=page]{color:#ededeb}
.header nav .nav-build{color:#ededeb;white-space:nowrap}
.nav-build span{margin-left:10px}

/* ---------- Hero (full-bleed band, content held to the container) ---------- */
.hero,.closing{width:auto;margin-inline:0;padding-inline:var(--page-pad)}
.hero-top{display:flex;justify-content:space-between;gap:20px;padding-top:clamp(16px,.5rem + 1.2vw,24px);color:#858585}
.hero-top .eyebrow,.hero-bottom>span,.footer>span,.radar-toolbar>.eyebrow,.work-path>.eyebrow{font-size:var(--label-sm)}
.hero-identity{position:relative;width:min(76%,800px);max-width:100%;min-width:0;margin:34px auto}
.hero-logo{display:block;width:100%;height:auto;max-width:100%;overflow:hidden}
.hero-main{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);align-items:start;margin:30px 0 38px}
.hero-main>*{min-width:0}
.hero h1{font:300 var(--fs-h1)/var(--lh-title) var(--font);letter-spacing:var(--tracking-display)}
.hero-copy{justify-self:end;max-width:520px}
.hero-copy>p{font-weight:300;line-height:var(--lh-body);color:var(--text-2)}
.text-link{gap:42px;font-size:14px;margin-top:19px}
.text-link>span:last-child{width:35px;height:35px;border:1px solid #6b6b6b;border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.text-link:is(:hover,:focus-visible)>span:last-child{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)}
.hero-bottom{display:flex;justify-content:space-between;align-items:center;padding-block:clamp(16px,.75rem + .6vw,23px);border-top:1px solid var(--line)}
.hero-bottom>span{letter-spacing:var(--label-track);color:#888}
.scroll-link{gap:25px;justify-content:flex-end;min-width:44px;margin-block:-10px;font-size:10px;letter-spacing:.15em;color:var(--text-3)}
.scroll-link>span:last-child{font-size:20px}

/* ---------- Background grid ---------- */
main>section{position:relative;isolation:isolate}
main>section:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;--grid-line:rgba(255,255,255,.047);
  background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid-cell) 100%,100% var(--grid-row);background-position:var(--grid-x) 0,0 0}
.journey:before{--grid-line:rgba(25,36,49,.045)}

/* ---------- Shared section layout ---------- */
.section-inner{padding-block:var(--section-y)}
.spot-inner{padding-block:var(--spot-y)}
.section-heading{display:grid;grid-template-columns:var(--split);column-gap:var(--col-gap);row-gap:var(--row-gap)}
.section-heading>.eyebrow{padding-top:13px;color:#8b8b8b}
.section-number{margin-right:12px}
.section-heading h2{font:300 var(--fs-h2)/var(--lh-display) var(--font);letter-spacing:var(--tracking-display)}
.journey-intro,.work-intro{grid-column:2;max-width:700px;font-size:var(--fs-lead);font-weight:300;line-height:var(--lh-body)}

/* ---------- 01 Approach ---------- */
.approach{background:#0e0e0e;border-top:1px solid #202020}
.intro-line{display:grid;grid-template-columns:var(--split);gap:var(--col-gap);margin:var(--block-gap) 0 var(--block-gap-lg)}
.intro-line p{max-width:700px;font-size:var(--fs-lead);font-weight:300;line-height:var(--lh-body);color:#969696}
.intro-line .construction-grid{margin-top:6px}
.pillars{border-top:1px solid var(--line-strong)}
.pillars article{display:grid;grid-template-columns:50px 1.1fr 1fr 1.05fr;align-items:start;gap:var(--col-gap);padding:38px 0;border-bottom:1px solid var(--line-strong);transition:background .4s,box-shadow .4s}
/* Hover tints the row and widens the tint with box-shadow, so the text never reflows. */
.pillars article:hover{background:#151515;box-shadow:-18px 0 0 #151515,18px 0 0 #151515}
.pillar-label{font-size:11px;color:var(--muted);padding-top:12px}
.pillar-label>span:last-child{display:none}
.pillars h3{font:300 clamp(34px,3.8vw,60px)/var(--lh-display) var(--font);letter-spacing:var(--tracking-display)}
.pillars h4{font-size:var(--fs-body);line-height:1.65;padding-top:6px}
.pillars p{font-size:var(--fs-body);font-weight:300;line-height:var(--lh-body);color:#929292;padding-top:6px}

/* ---------- Message spots (capabilities, lifecycle) ---------- */
.message-spot{background:#080808;border-block:1px solid #252525}
.product-spot{background:#0a0a0a}
.message-spot .eyebrow{color:#909090}
.message-spot h2,.closing h2{margin:var(--eyebrow-gap) 0 var(--block-gap);max-width:1100px;font:300 var(--fs-spot)/var(--lh-display) var(--font);letter-spacing:-.045em}
.capabilities h2{font-size:clamp(44px,6vw,90px)}
.lifecycle-spot h2{font-size:clamp(42px,5.5vw,82px);max-width:1000px}
.capability-kicker{display:flex;justify-content:space-between;align-items:end;gap:24px}
.capability-intro{max-width:700px;margin-bottom:var(--block-gap);font:300 var(--fs-lead)/var(--lh-body) var(--font);color:#b5b5b5}
.capability-list{border-top:1px solid var(--line-strong)}
.capability{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:var(--col-gap);padding:34px 0;border-bottom:1px solid var(--line)}
.capability h3{font:300 var(--fs-h3)/var(--lh-heading) var(--font);letter-spacing:var(--tracking-display)}
.capability>p,.capability-result p{font:300 var(--fs-body)/var(--lh-body) var(--font);color:#b3b3b3}
.capability>p{max-width:62ch}
.capability-result{border-left:1px solid var(--line-strong);padding-left:28px}
.capability-result>span{display:block;margin:3px 0 12px;font-size:var(--label-size);letter-spacing:var(--label-track);color:#8e8e8e}
.capability-result p{color:#d3d3d0}
.capability-note{max-width:780px;margin-top:26px;font:300 var(--fs-body)/var(--lh-body) var(--font);color:#a3a3a3}
.spot-foot{display:grid;grid-template-columns:var(--split);gap:var(--col-gap);align-items:end}
.spot-foot p{max-width:630px;font:300 17px/var(--lh-body) var(--font);color:var(--text-2)}

/* ---------- 02 Work with us ---------- */
.together{background:#0c0c0c}
.work-intro{color:#a5a5a5}
.work-paths{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:var(--block-gap-lg)}
.work-path{display:flex;flex-direction:column;align-items:flex-start;padding:42px;background:#efefeb;color:#141414}
.work-path>.eyebrow{color:#646464}
.work-path h3{margin:28px 0;font:300 clamp(29px,3.1vw,46px)/var(--lh-title) var(--font);letter-spacing:var(--tracking-display)}
.work-path p{max-width:62ch;margin:0 0 22px;font-size:var(--fs-body);font-weight:300;line-height:var(--lh-body);color:#3d3d3d}
.path-note{width:100%;margin-top:auto;padding-top:20px;border-top:1px solid var(--line-paper);font-size:13px;line-height:1.75;color:#60605d}
.studio-foundation{display:grid;grid-template-columns:var(--split);gap:var(--col-gap);margin-top:var(--block-gap);padding-top:28px;border-top:1px solid var(--line-strong)}
.studio-foundation h3{max-width:390px;font:300 27px/var(--lh-heading) var(--font);letter-spacing:-.025em}
.studio-foundation p{max-width:590px;font:300 var(--fs-body)/var(--lh-body) var(--font);color:var(--text-3)}

/* ---------- 03 References (light section, radar) ---------- */
.journey{background:var(--paper);color:#101113}
.journey .section-heading>.eyebrow{color:var(--muted-light)}
.journey-intro{color:#697079}
.radar-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:var(--block-gap);padding-top:20px;border-top:1px solid var(--line-light)}
.radar-toolbar>.eyebrow{color:var(--radar-ink)}
.radar-toolbar button{flex-shrink:0;white-space:nowrap;gap:10px;padding:0 0 0 16px;border:0;background:none;font-size:12px;color:#56606b}
/* Pause/play drawn in CSS so the icon is identical on every OS. */
.pause-icon{position:relative;width:15px;height:12px;font-size:0;color:currentColor}
.pause-icon:before,.pause-icon:after{content:'';position:absolute;top:0;width:2px;height:12px;background:currentColor}
.pause-icon:before{left:3px}.pause-icon:after{right:4px}
#radar-toggle[aria-pressed=true] .pause-icon:before{left:3px;width:0;height:0;background:none;border-left:10px solid currentColor;border-block:6px solid transparent}
#radar-toggle[aria-pressed=true] .pause-icon:after{display:none}

.radar-frame{--radar-pad:42px;--radar-max-h:min(78vh,860px);position:relative;width:min(100%,var(--radar-max-h)*var(--radar-ratio) + 2*var(--radar-pad));margin:24px auto 0;padding-inline:var(--radar-pad)}
.radar{position:relative;width:100%;aspect-ratio:var(--radar-ratio);isolation:isolate}
.radar canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.radar-area{position:absolute;z-index:4;padding:14px 8px;font:400 11px/1.5 var(--font);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;writing-mode:vertical-rl;color:#3f4bb0;background:var(--paper)}
.area-opportunity,.area-brand{left:0;transform:translateY(-50%) rotate(180deg)}
.area-product,.area-growth{right:0;transform:translateY(-50%)}
.area-opportunity,.area-product{top:27%}
.area-brand,.area-growth{top:73%}
.radar-center{position:absolute;top:50%;left:50%;z-index:3;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
.radar-center .radar-origin{padding:5px;font:300 clamp(12px,1.8vw,24px)/1 var(--font);letter-spacing:-.04em;white-space:nowrap;color:#68707b;background:var(--paper)}
.radar-ring-labels{position:absolute;inset:0;pointer-events:none}
.radar-ring-labels span{position:absolute;left:50%;z-index:2;transform:translateX(-50%);padding:3px 7px;font-size:10px;letter-spacing:1px;color:var(--radar-ink);background:var(--paper)}
.radar-logos{position:absolute;inset:0;z-index:2}
.radar-logo{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;isolation:isolate;cursor:default;transition:opacity .5s}
.radar-logo:before{content:'';position:absolute;inset:-4px;z-index:-1;border-radius:3px;background:var(--paper);filter:blur(5px);opacity:.9}
.reference-art{display:block;width:100%;height:100%;overflow:hidden}
.radar-corner{position:absolute;bottom:10px;font-size:11px;letter-spacing:1px;color:var(--radar-ink)}
.corner-one{left:0}.corner-two{right:0}
.one-definition{display:grid;grid-template-columns:var(--split);gap:var(--col-gap);margin-top:var(--block-gap);padding-top:32px;border-top:1px solid var(--line-light)}
.one-definition .eyebrow{padding-top:7px;color:var(--muted-light)}
.one-definition p{font:300 clamp(21px,2.25vw,34px)/1.45 var(--font);letter-spacing:var(--tracking-display)}

/* ---------- Closing and footer ---------- */
.closing{padding-block:var(--spot-y) calc(var(--spot-y)*.75);border-top:1px solid var(--line)}
.closing>.eyebrow{color:#7d7d7d}
.closing h2{font-size:var(--fs-display);letter-spacing:var(--tracking-display);max-width:none;margin-bottom:var(--block-gap-lg)}
.closing-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.closing-bottom p{font-weight:300;line-height:var(--lh-body);color:var(--text-3)}
.closing-logo{width:180px;height:auto;max-width:100%;overflow:hidden}
.footer-signature{padding-block:clamp(28px,1rem + 2.5vw,48px) clamp(14px,.5rem + 1vw,24px);border-top:1px solid var(--line);color:#cececa}
.signature-art{display:block;width:100%;height:auto;max-width:100%;overflow:hidden}
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:clamp(20px,1rem + .5vw,25px) clamp(25px,1rem + 1.2vw,36px);color:#858585}
.footer .wordmark{display:none}
.footer>span{letter-spacing:var(--label-track)}
.back-top{margin-block:-14px;font-size:12px}
.back-top span{margin-right:15px}

/* ---------- Construction grids (small logo studies) ---------- */
.construction-grid{display:block;width:168px;max-width:100%;height:auto;overflow:hidden;color:#b9b9b6;pointer-events:none}
.construction-grid path{vector-effect:non-scaling-stroke;stroke:currentColor;stroke-width:1}
.grid-base{opacity:.2}.grid-trace{opacity:.36}.grid-cross{opacity:.7}
.capability-kicker .construction-grid{width:132px}
.grid-settle{width:154px;align-self:end}
.construction-grid.is-drawn .grid-trace{animation:grid-draw 3.2s ease-in-out both}
.construction-grid.is-drawn .trace-b{animation-delay:.2s}
.construction-grid.is-drawn .trace-c{animation-delay:.55s}
.construction-grid.is-drawn .trace-d{animation-delay:.8s}
.construction-grid.is-drawn .grid-cross{animation:grid-register 3.8s ease-in-out both;transform-box:fill-box;transform-origin:center}
.construction-grid.is-drawn .cross-b{animation-delay:.3s}
.grid-build.is-drawn .trace-a,.grid-build.is-drawn .trace-c{animation-name:grid-align-x}
.grid-settle.is-drawn .trace-b,.grid-settle.is-drawn .trace-d{animation-name:grid-align-y}
@keyframes grid-draw{0%{stroke-dasharray:1;stroke-dashoffset:1;opacity:.15}70%{opacity:.8}100%{stroke-dasharray:1;stroke-dashoffset:0;opacity:.36}}
@keyframes grid-register{0%,35%{opacity:.12;transform:scale(.65)}75%{opacity:1;transform:scale(1.1)}100%{opacity:.7;transform:scale(1)}}
@keyframes grid-align-x{0%{transform:translateX(-20px);opacity:.1}70%{opacity:.7}100%{transform:translateX(0);opacity:.36}}
@keyframes grid-align-y{0%{transform:translateY(20px);opacity:.1}70%{opacity:.7}100%{transform:translateY(0);opacity:.36}}

/* ---------- Large desktop, short viewport (laptops): keep the h1 above the fold ---------- */
@media(min-width:1101px) and (max-height:850px){
  .hero-identity{width:min(62%,700px);margin-block:22px 24px}
  .hero-main{margin-block:20px 28px}
}

/* ---------- Tablet (<=1100px) ---------- */
@media(max-width:1100px){
  :root{--split:1fr 2.7fr;--radar-ratio:1.5}
  .hero-identity{width:min(86%,740px)}
  .pillars article{grid-template-columns:30px minmax(0,.8fr) 1.2fr;row-gap:8px}
  .pillar-label{grid-column:1;grid-row:1}
  .pillars h3{grid-column:2;grid-row:1/3}
  .pillars h4,.pillars p{grid-column:3}
  .capability{grid-template-columns:1fr 1.3fr 1fr}
  .capability-result{padding-left:20px}
  .construction-grid,.grid-settle{width:140px}
  .work-path{padding:30px}
  .work-paths{gap:22px}
  .spot-foot p{font-size:var(--fs-body)}
}
@media(max-width:1100px) and (min-width:761px){
  :root{--split:minmax(220px,1fr) 2.4fr}
  .section-heading>.eyebrow,.one-definition>.eyebrow{white-space:nowrap}
  .radar-frame{--radar-pad:30px}
  .radar-area{padding:8px 5px;font-size:10px;letter-spacing:.07em}
  .area-opportunity,.area-product{top:25%}
  .area-brand,.area-growth{top:75%}
}

/* ---------- Mobile (<=760px) ---------- */
@media(max-width:760px){
  :root{--split:1fr;--grid-cols:3;--radar-ratio:.9;--label-size:11px;--label-sm:10px;--fs-lead:16px}
  .hero-top .eyebrow,.hero-bottom>span,.footer>span,.radar-toolbar>.eyebrow{letter-spacing:.1em}
  /* header */
  .header{gap:18px}
  .header nav{gap:22px}
  .header nav>a:not(.nav-build,.nav-blog){display:none}
  .header nav .nav-blog{font-size:12px}
  .header nav .nav-build{font-size:12px}
  .wordmark-art{width:144px}
  /* hero */
  .hero-top .eyebrow:last-child{max-width:110px;text-align:right}
  .hero-identity{width:100%;margin:40px 0 34px}
  .hero-main{grid-template-columns:1fr;gap:20px;margin:0 0 30px}
  .hero h1{font-size:clamp(30px,7.5vw,45px)}
  .hero-copy{justify-self:start;max-width:none}
  .text-link{gap:35px;margin-top:16px;font-size:13px}
  .scroll-link>span:first-child{display:none}
  /* shared */
  .section-heading>.eyebrow{padding:0}
  .section-heading h2{font-size:clamp(31px,7.4vw,46px)}
  .journey-intro,.work-intro{grid-column:1}
  /* approach */
  .intro-line{row-gap:24px}
  .intro-line .construction-grid{width:100px;margin:0}
  .pillars article{grid-template-columns:24px 1fr;gap:10px 15px;padding-block:28px}
  .pillars article:hover{box-shadow:none}
  .pillar-label{grid-column:1;grid-row:1;padding-top:10px}
  .pillars h3{grid-column:2;grid-row:1;font-size:40px}
  .pillars h4{grid-column:2;padding-top:8px}
  .pillars p{grid-column:2;padding:0}
  /* message spots */
  .message-spot h2,.capabilities h2,.lifecycle-spot h2{font-size:clamp(35px,9vw,56px);letter-spacing:var(--tracking-display)}
  .message-spot .eyebrow{line-height:1.7}
  .capability-kicker .construction-grid{width:104px;flex-shrink:0}
  .capability{grid-template-columns:1fr;gap:18px;padding-block:28px}
  .capability h3{font-size:27px}
  .capability-result{padding:15px 0 0;border-left:0;border-top:1px solid var(--line)}
  .capability-result>span{margin:0 0 8px}
  .spot-foot{gap:26px}
  .spot-foot p{line-height:var(--lh-body)}
  .grid-settle{width:110px;order:2;justify-self:end}
  /* work with us */
  .work-paths{grid-template-columns:1fr;gap:18px}
  .work-path{padding:30px 24px}
  .work-path h3{margin-block:23px;font-size:31px}
  .work-path p{line-height:1.75}
  .path-note{font-size:12px}
  .studio-foundation{row-gap:17px;padding-top:24px}
  .studio-foundation h3{font-size:25px}
  /* references */
  .radar-toolbar{padding-top:12px}
  .radar-toolbar button{font-size:11px}
  /* Phones: the radar runs nearly edge to edge and slightly tall; the area labels sit in its corners, against the outer ring. */
  .radar-frame{--radar-pad:0px;width:auto;margin:22px calc(8px - var(--gutter)) 0;padding-block:0}
  .radar-area{max-width:40%;padding:0;font-size:10px;line-height:1.7;letter-spacing:.09em;white-space:normal;writing-mode:horizontal-tb;transform:none;background:none}
  .area-opportunity,.area-brand{left:6px}
  .area-product,.area-growth{right:6px}
  .area-opportunity,.area-product{top:2px}
  .area-brand,.area-growth{top:auto;bottom:2px}
  .area-product,.area-growth{text-align:right}
  .radar-ring-labels span{padding:2px 4px;font-size:9px}
  .radar-corner{display:none}
  .one-definition{row-gap:15px;padding-top:25px}
  .one-definition p{font-size:23px}
  /* closing and footer */
  .closing>.eyebrow{font-size:10px}
  .closing h2{font-size:clamp(32px,7.6vw,48px)}
  .closing-bottom{flex-direction:column;align-items:flex-start;gap:32px}
  .closing-bottom p{font-size:15px}
  .closing-logo{width:130px;align-self:flex-end}
  .back-top{font-size:11px}
  .back-top span{margin-right:7px}
}

/* ---------- Landscape phones: fit the hero and the radar to a short screen ---------- */
@media(max-height:500px) and (orientation:landscape){
  :root{--section-y:56px}
  .header{height:64px}
  .hero-identity{width:min(60%,520px);margin:16px auto 20px}
  .hero-main{margin-block:12px 20px}
  /* the vertical area labels need more height than a landscape phone has: use the horizontal mobile treatment */
  .radar-frame{--radar-max-h:calc(100vh - 60px);--radar-pad:0px;width:min(100%,var(--radar-max-h)*var(--radar-ratio));margin-inline:auto;padding-block:40px}
  .radar-area{max-width:46%;padding:0;font-size:10px;line-height:1.7;letter-spacing:.09em;white-space:normal;writing-mode:horizontal-tb;transform:none;background:none}
  .area-opportunity,.area-product{top:0}
  .area-brand,.area-growth{top:auto;bottom:0}
  .area-product,.area-growth{text-align:right}
  .radar-corner{display:none}
}

/* ---------- Motion preferences ---------- */
/* The radar's Pause motion button sets data-motion-paused on <html>; reduced motion does the same from the OS. */
:root[data-motion-paused] .construction-grid.is-drawn path{animation:none!important;transform:none!important;stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-progress{display:none}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .construction-grid.is-drawn path{transform:none!important;stroke-dashoffset:0!important}
}

/* ==========================================================================
   Scroll motion: cinematic (motion.js intro, cine.js scenes)
   Every hidden or moving state below is scoped to html.js-motion / html.cine / html.cine-on.
   The <head> bootstrap sets js-motion and cine only when motion is allowed; cine.js adds cine-on
   once it runs and removes it on Pause motion, print, reduced motion or any error. Scene values are
   custom properties that default to the finished layout, so without cine-on everything is at rest.
   html.cine alone only adds layout (sticky stages and their scroll length), never hides content.
   ========================================================================== */
:root{--ease:cubic-bezier(.2,.7,.1,1);--ease-mask:cubic-bezier(.16,1,.3,1);--rise:16px;--rise-sm:12px}
@media(max-width:760px){:root{--rise:10px;--rise-sm:8px}}

/* ---------- Intro (motion.js): header and hero play once on load ---------- */
html.js-motion:not(.m-ready) :is(.header,.hero){visibility:hidden}
html.js-motion .m-fade{transition:opacity 700ms var(--ease) var(--d,0ms)}
html.js-motion .header .m-fade{transition-duration:600ms}
html.js-motion .m-fade.is-pending{opacity:0}
html.js-motion [data-reveal]{transition:opacity 800ms var(--ease) var(--d,0ms),transform 800ms var(--ease) var(--d,0ms)}
html.js-motion [data-reveal].is-pending{opacity:0;transform:translate3d(0,var(--rise),0)}
html.js-motion .m-wipe-x{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease-mask) var(--d,0ms)}
html.js-motion .m-wipe-x.is-pending{clip-path:inset(0 100% 0 0)}
/* Masked type: each line rises out of its own line box. Padding and negative margin cancel out;
   a column flex box keeps the masks' negative margins from collapsing. */
html.js-motion .m-masked{display:flex;flex-direction:column}
html.js-motion .mask{display:inline-block;overflow:hidden;padding-block:.12em;margin-block:-.12em;vertical-align:top}
html.js-motion .mask.line{display:block}
html.js-motion .mask-in{display:inline-block;transition:transform var(--t,900ms) var(--ease-mask) var(--d,0ms)}
html.js-motion .mask.line>.mask-in{display:block}
html.js-motion .is-pending .mask-in{transform:translate3d(0,110%,0)}
html.js-motion :is(.m-instant,.m-instant *){transition:none!important}

/* ---------- Director: progress hairline and pinned stages ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;z-index:20;height:1px;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none;will-change:transform}
.cine-track,.cine-stage{display:contents}
/* The pin length is real content (a sticky box only travels inside its parent's content box, not its padding). */
html.cine .cine-track{display:block}
html.cine .cine-track:after{content:'';display:block;height:var(--pin,0px)}
html.cine .cine-stage{display:flow-root;position:sticky;top:var(--stage-top,0px)}
html.cine [data-scene]{--pin:0px}
@media(min-width:761px) and (min-height:600px){
  html.cine [data-scene=launch]{--pin:75vh}
  html.cine [data-scene=radar]{--pin:140vh}
}
@media(max-width:760px) and (min-height:560px){
  html.cine [data-scene=launch]{--pin:55svh}
  html.cine [data-scene=radar]{--pin:70svh}
}
@media(min-width:761px) and (min-height:700px){html.cine [data-scene=close]{--pin:70vh}}
.cine-probe{position:absolute;top:0;left:0;width:var(--grid-cell);height:0;margin-left:var(--grid-x);visibility:hidden;pointer-events:none}
html.cine main>section{z-index:1}
html.cine .journey{z-index:3}
html.cine :is(.capabilities,.lifecycle-spot,.together,.closing){overflow-x:clip}

/* ---------- Living grid: one faint current per column hairline ---------- */
.zto-current{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;--cur:rgba(255,255,255,.16)}
.journey .zto-current{--cur:rgba(25,36,49,.14)}
.zto-current i{position:absolute;top:0;left:calc(var(--grid-x) + var(--k)*var(--grid-cell));width:1px;height:18vh;background:linear-gradient(to bottom,transparent,var(--cur) 70%,transparent);transform:translate3d(0,-100%,0)}
.cine-near>.zto-current i{will-change:transform}
@media(max-width:760px){.zto-current{--cur:rgba(255,255,255,.12)}.journey .zto-current{--cur:rgba(25,36,49,.12)}.zto-current i{height:14vh}}
.reg{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;color:#fff;opacity:0;pointer-events:none}
.reg:before,.reg:after{content:'';position:absolute;background:currentColor}
.reg:before{left:50%;top:0;width:1px;height:100%}
.reg:after{top:50%;left:0;height:1px;width:100%}
.zto-signal{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(52,73,238,.16);opacity:0;pointer-events:none}

/* ---------- Hero: the lockup comes apart onto the grid while the approach slides over it ---------- */
html.cine .hero{position:sticky;top:min(0px,calc(100svh - var(--hero-h,100svh)));z-index:0;overflow-x:clip}
/* Once the approach fully covers it, the hero drops back into the flow: anchors (#top), focus and find-in-page
   reach it at its real position, and it never shows through later sections. It stays in the accessibility tree. */
html.cine .hero.is-covered{position:relative;top:auto;opacity:0}
/* Keyboard focus inside the hero: back in the flow and fully lit, so a focused link is never under the approach. */
html.cine .hero:has(:focus-visible){position:relative;top:auto;opacity:1}
html.cine-on .hero:has(:focus-visible) :is(.hero-top,.hero-main,.hero-bottom,h1,.hero-copy>*){opacity:1;transform:none}
.hero-slices,.closing-slices{position:absolute;pointer-events:none}
.hero-slices{inset:0;opacity:var(--hs,0)}
.slice,.slice-grid{position:absolute;display:block;overflow:hidden;transform-origin:50% 50%}
.slice-grid{inset:0;width:100%;height:100%}
.slice-grid path{fill:none;stroke:#9e9e9e;stroke-width:1.25}
.slice.s1{transform-origin:87.44% 50%}
.cine-near :is(.slice,.zto-signal){will-change:transform,opacity}
html.cine-on .hero-logo{opacity:var(--lo,1)}
html.cine-on .hero-identity:not(.has-slices){transform:scale(calc(1 - var(--hp,0)*.08));opacity:calc(1 - var(--hp,0)*.7)}
/* Each part dims only as the approach edge closes in on it (cine.js); a tall hero holds on its bottom row first. */
.hero-hold{display:block;pointer-events:none}
html.cine-on .hero-main{transform:translate3d(0,calc(var(--hq,0)*-4vh),0)}
html.cine-on .hero h1{opacity:calc(1 - var(--hq,0)*.65)}
html.cine-on .hero-copy>p{opacity:calc(1 - var(--hc,0)*.7)}
html.cine-on .hero-copy>.text-link{opacity:calc(1 - var(--hl,0)*.7)}
html.cine-on .hero-top{opacity:calc(1 - var(--ht,0)*.7)}
html.cine-on .hero-bottom{opacity:calc(1 - var(--hb,0)*.7)}

/* ---------- Scrubbed headings: lines rise with the scroll, once ---------- */
html.cine-on .scrub .mask-in{transform:translate3d(0,calc((1 - var(--mp,1))*110%),0);transition:none}
html.cine-on .scrub.is-settling .mask-in{transition:transform .5s var(--ease-mask)}

/* ---------- 01 Approach: a focus band reads each pillar as it crosses the middle ---------- */
.pillars{--pf:.45;--ps:-24px}
html.cine-on .pillars article{position:relative;border-bottom-color:transparent}
html.cine-on .pillars article:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line-strong);transform:scaleX(var(--v,1));transform-origin:0 50%;pointer-events:none}
html.cine-on .pillars h3{opacity:calc(var(--pf) + (1 - var(--pf))*var(--v,1));transform:translate3d(calc((1 - var(--v,1))*var(--ps)),0,0)}
html.cine-on .pillars :is(h4,p){clip-path:inset(0);transition:clip-path .7s var(--ease-mask)}
html.cine-on .pillars article:not(.is-on) :is(h4,p){clip-path:inset(0 0 100% 0)}
html.cine-on .pillars article:focus-within h3{opacity:1;transform:none}
html.cine-on .pillars article:focus-within :is(h4,p){clip-path:none}
@media(max-width:760px){.pillars{--pf:.5;--ps:-12px}}

/* ---------- Capabilities: one signal runs down the shared outcome rule and lights each row in turn ----------
   --kt title, --kb body, --ko outcome (pours out from the rule), --kr the row rule (draws outward from the signal). */
html.cine-on .capability-list{position:relative;isolation:isolate}
html.cine-on .capability{position:relative;border-bottom-color:transparent}
html.cine-on .capability:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform:scaleX(var(--kr,1));transform-origin:var(--sx,0px) 50%;pointer-events:none}
html.cine-on .capability h3{opacity:calc(.26 + .74*var(--kt,1))}
html.cine-on .capability>p{opacity:calc(.3 + .7*var(--kb,1))}
html.cine-on .capability-result{border-left-color:rgba(58,58,58,calc(.35 + .65*var(--kt,1)))}
html.cine-on .capability-result>*{opacity:calc(.12 + .88*var(--ko,1));clip-path:inset(-4px calc((1 - var(--ko,1))*100%) -4px 0)}
html.cine-on .capability-list.is-settling :is(.capability:after,h3,.capability>p,.capability-result>*){transition:opacity .5s,transform .5s var(--ease-mask),clip-path .5s var(--ease-mask)}
.cap-spine{position:absolute;top:0;width:1px;margin-left:-.5px;background:linear-gradient(to bottom,rgba(255,255,255,.05),rgba(255,255,255,.34) 85%,#6f7dff);transform-origin:50% 0;transform:scaleY(0);opacity:0;pointer-events:none}
.cap-glow{position:absolute;left:0;top:0;z-index:-1;width:min(1100px,150vw);height:340px;margin:-170px 0 0 calc(min(1100px,150vw)/-2);background:radial-gradient(closest-side,rgba(52,73,238,.13),rgba(52,73,238,.05) 45%,transparent);opacity:0;pointer-events:none}
.cap-dot{z-index:1}
.cine-near :is(.cap-spine,.cap-glow,.cap-dot){will-change:transform,opacity}
@media(max-width:760px){
  .cap-glow{width:520px;height:260px;margin:-130px 0 0 -260px;background:radial-gradient(closest-side,rgba(52,73,238,.12),transparent)}
  html.cine-on .capability-result{border-top-color:rgba(42,42,42,calc(.35 + .65*var(--kt,1)))}
  /* Phones: the signal hands each row over in turn. The title steps in from the spine, and a blue charge runs
     along the outcome rule as the outcome pours out, then cools to the plain rule once the row's rule has drawn. */
  html.cine-on .capability h3{transform:translate3d(calc((1 - var(--kt,1))*-10px),0,0)}
  html.cine-on .capability-result{background:linear-gradient(90deg,rgba(111,125,255,calc(.15*(1 - var(--kr,1)))),rgba(111,125,255,calc(1 - var(--kr,1)))) 0 0/calc(var(--ko,1)*100%) 1px no-repeat}
  html.cine-on .capability-list.is-settling .capability-result{transition:background-size .5s var(--ease-mask)}
}
/* Construction drawings next to the kicker and the lifecycle foot draw with the scroll. */
html.cine-on :is(.grid-build,.grid-settle) .grid-trace{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--gd,1))}
html.cine-on :is(.grid-build,.grid-settle) .grid-cross{opacity:calc(.7*var(--gd,1))}

/* ---------- 02 Work with us: the two cards converge, then a seam joins them ---------- */
@media(min-width:761px){
  /* The two paths come in from depth, each turned toward the middle, and settle flat side by side. */
  html.cine-on .work-paths{position:relative;--off:min(10vw,140px);perspective:1400px;perspective-origin:50% 40%}
  html.cine-on .work-path:nth-child(1){transform:translate3d(calc((1 - var(--c,1))*-1*var(--off)),calc((1 - var(--c,1))*60px),calc((1 - var(--c,1))*-260px)) rotateY(calc((1 - var(--c,1))*14deg))}
  html.cine-on .work-path:nth-child(2){transform:translate3d(calc((1 - var(--c,1))*var(--off)),calc((1 - var(--c,1))*60px),calc((1 - var(--c,1))*-260px)) rotateY(calc((1 - var(--c,1))*-14deg))}
  html.cine-on .work-path>*{opacity:clamp(0,(var(--c,1) - .15)/.85,1)}
  html.cine-on .work-paths:after{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line-strong);transform:scaleY(clamp(0,(var(--c,1) - .85)/.15,1));transform-origin:50% 0;pointer-events:none}
}
@media(min-width:761px) and (max-width:1100px){html.cine-on .work-paths{--off:min(6vw,60px)}}
@media(max-width:760px){
  html.cine-on .work-path{clip-path:inset(calc(50% - var(--c,1)*50%) 0)}
  html.cine-on .work-path>*{transform:translate3d(0,calc((1 - var(--c,1))*8px),0)}
}
/* Two threads, one team: cine.js draws them; the real rule takes over once they meet. */
.together-thread{position:absolute;inset:0;z-index:0;pointer-events:none}
.together-thread svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.together-thread path{fill:none;stroke:#565656;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.together-thread .tt-dot{opacity:0}
.tt-dot circle:first-child{fill:rgba(52,73,238,.16)}
.tt-dot circle:last-child{fill:var(--accent)}
.cine-near .tt-dot{will-change:transform,opacity}
html.cine-on .studio-foundation{position:relative;border-top-color:transparent}
html.cine-on .studio-foundation:after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line-strong);transform:scaleX(var(--f,1));transform-origin:50% 50%;pointer-events:none}

/* ---------- Lifecycle: the camera pulls back from "launch", a dot lifts off ---------- */
html.cine-on #lifecycle-spot-heading{transform:translate3d(var(--lx,0px),0,0) scale(var(--ls,1));transform-origin:var(--lox,0px) var(--loy,0px)}
html.cine-on #lifecycle-spot-heading.is-rest{transform:none}
html.cine-on .lifecycle-spot .cine-stage>.eyebrow{opacity:var(--le,1)}
.launch-trace{position:absolute;left:0;top:0;pointer-events:none}

/* ---------- Paper iris: References opens from the launch dot's exit point ----------
   While the scene runs, the top viewport of References is dark; the iris (paper) grows from its top edge. */
html.cine-on .journey{background:linear-gradient(to bottom,var(--bg) var(--ih,100vh),var(--paper) 0)}
.paper-iris{position:absolute;left:0;right:0;top:0;height:var(--ih,100vh);z-index:-2;display:none;background:var(--paper);pointer-events:none}
.iris-dot{z-index:1}

/* ---------- 03 References: the radar runs on scroll ---------- */
html.cine-on .radar-area{opacity:var(--ao,1);transition:opacity .35s}
html.cine .radar-ring-labels span.is-busy{opacity:0}
html.cine .radar-ring-labels span{transition:color .4s,opacity .4s}
html.cine .radar-ring-labels span.is-reached{color:#101113}
html.cine .radar-ring-labels span.is-live{color:#3449ee}
.cine-near .radar-logo{will-change:transform}

/* ---------- Closing: the lockup reassembles into its place ---------- */
html.cine .closing-bottom{position:relative}
.closing-slices{z-index:-1}
html.cine-on .closing-logo{opacity:var(--cl,1)}
html.cine-on .signature-art{clip-path:inset(0 calc((1 - var(--fp,1))*100%) 0 0)}
html.cine-on .signature-art.sig-done{transition:clip-path .7s cubic-bezier(.2,.7,.2,1)}
html[data-motion-paused] .signature-art.sig-done{transition:none}

/* ---------- At rest: Pause motion, print, before cine.js runs ---------- */
html:not(.cine-on) :is(.hero-slices,.closing-slices,.launch-trace,.zto-current,.paper-iris,.iris-dot,.together-thread,.cap-spine,.cap-glow,.cap-dot){display:none!important}
html:not(.cine-on) .radar-ring-labels span.is-busy{opacity:1}
/* Paused: the pinned stages lose their scroll runways (cine.js keeps the viewport in place). */
html.cine-still .cine-track:after{display:none}
html[data-motion-paused]{scroll-behavior:auto}
html[data-motion-paused] .scroll-progress{display:none}
html.js-motion[data-motion-paused] :is(.m-fade,[data-reveal],.mask-in,.m-wipe-x){transition:none!important}
html.cine-still *,html.cine-still *:before,html.cine-still *:after{transition:none!important}

/* Print / PDF: no pins, nothing hidden. */
@media print{
  html.js-motion *,html.js-motion *:before,html.js-motion *:after{transition:none!important}
  html.js-motion .is-pending,html.js-motion .is-pending .mask-in{opacity:1!important;transform:none!important;clip-path:none!important}
  html.cine .cine-track:after{display:none!important}
  html.cine .cine-stage,html.cine .hero{position:relative!important;top:auto!important}
  html.cine .hero{visibility:visible!important}
  .scroll-progress,.hero-slices,.closing-slices,.launch-trace,.zto-current,.paper-iris,.iris-dot,.together-thread,.cap-spine,.cap-glow,.cap-dot,.hero-hold{display:none!important}
}