/* Giraffe Industrial Marketing, one-pager v2 */

/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hankengrotesk-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrumentserif-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibmplexmono-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --paper:#E7E4DD;
  --paper-2:#F3F1EA;
  --purple:#3E2B78;
  --purple-2:#4B2F79;
  --dark:#272047;
  --deep:#2A1C4D;
  --ink:#1D1830;
  --lilac:#D9D1EE;
  --err:#FFCDBD;

  --rule:rgba(62,43,120,.45);
  --hair:rgba(42,28,77,.08);
  --fg:var(--purple);

  --f-sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  /* grid: 94vw container, 12 columns, 3vw gutters (--vw is set from clientWidth, so scrollbars never cause overflow) */
  --vw:1vw;
  --gut:calc(var(--vw) * 3);
  --wrap:calc(var(--vw) * 94);
  --col:calc(var(--wrap) / 12);
  --u:max(var(--vw), 11px);

  --fs-h1:clamp(44px, 6.4vw, 108px);
  --fs-h2:clamp(40px, 6.6vw, 104px);
  --fs-stmt:clamp(28px, 3.44vw, 54px);
  --fs-h3:clamp(22px, 2vw, 31px);
  --fs-h3s:clamp(19px, 1.5vw, 24px);
  --fs-lead:clamp(17px, 1.35vw, 21px);
  --fs-body:clamp(16px, 1.06vw, 17px);
  --fs-label:14px;

  --ease-ui:cubic-bezier(.25,1,.5,1);
}
@media (max-width:767px){
  :root{--gut:calc(var(--vw) * 5);--wrap:calc(var(--vw) * 90)}
}
@media (min-width:1680px){
  :root{--fs-body:clamp(17px,1vw,19px);--fs-lead:clamp(21px,1.2vw,23px)}
}

/* surfaces set colours, rules and hairlines for everything inside them */
[data-surface="paper"]{--fg:var(--purple);--rule:rgba(62,43,120,.45);--hair:rgba(42,28,77,.08);--focus:var(--purple)}
[data-surface="purple"],[data-surface="dark"]{--fg:var(--paper-2);--rule:rgba(243,241,234,.45);--hair:rgba(243,241,234,.07);--focus:var(--paper-2)}
/* small phones: 13 hairlines at a 29 px pitch read as pinstripes, so they go fainter */
@media (max-width:479px){
  [data-surface="paper"]{--hair:rgba(42,28,77,.05)}
  [data-surface="purple"],[data-surface="dark"]{--hair:rgba(243,241,234,.045)}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--purple);font-family:var(--f-sans);font-size:var(--fs-body);line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
p,ul,ol,h1,h2,h3,figure{margin:0}
ul,ol{padding:0;list-style:none}
em{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.06em;letter-spacing:-.01em;line-height:1}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--purple);color:var(--paper-2)}
[data-surface="purple"] ::selection,[data-surface="dark"] ::selection{background:var(--paper-2);color:var(--purple)}

:focus{outline:none}
:focus-visible{outline:2px solid var(--focus,var(--purple));outline-offset:3px}
/* keyboard focus never lands under the fixed nav */
a[href],button,input,select,summary{scroll-margin-top:110px}

.nw{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--gut);top:12px;z-index:100;background:var(--paper-2);color:var(--ink);padding:12px 18px;border-radius:999px;text-decoration:none;font-size:16px;transform:translateY(-200%);transition:transform .2s var(--ease-ui)}
.skip:focus,.skip:focus-visible{transform:none;outline:2px solid var(--ink);outline-offset:3px}

.wrap{position:relative;z-index:3;width:var(--wrap);margin-inline:auto}
.s{position:relative}
.s[data-surface="paper"]{background:var(--paper);color:var(--purple)}

/* hairline grid: 13 lines on the 12 columns; sits above backgrounds and stripes, below content */
.grid-lines{position:absolute;top:0;bottom:0;left:var(--gut);width:calc(var(--wrap) + 1px);z-index:2;pointer-events:none;
  background:linear-gradient(to right,var(--hair) 0 1px,transparent 1px) 0 0/var(--col) 100% repeat-x}
.grid-lines--stage{--hair:rgba(42,28,77,.1)}
@media (max-width:479px){.grid-lines--stage{--hair:rgba(42,28,77,.06)}}

/* ---------- type ---------- */
.h1{font-size:var(--fs-h1);line-height:1.1;font-weight:400;letter-spacing:-.01em;text-wrap:balance}
.h2{font-size:var(--fs-h2);line-height:1.1;font-weight:400;letter-spacing:-.01em;text-wrap:balance}
.h3{font-size:var(--fs-h3);line-height:1.15;font-weight:400}
.label,.eyebrow{font-family:var(--f-mono);font-size:var(--fs-label);line-height:1.45;font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums}
.lead{font-size:var(--fs-lead);line-height:1.35}

/* SplitText masks: generous clip boxes so finished glyphs (descenders, italic swashes) are never cut */
.ch-mask,.wd-mask{padding:.12em .04em .14em;margin:-.12em -.04em -.14em}
.ln-mask{padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.ch-mask,.wd-mask,.ln-mask{overflow-x:visible!important;overflow-y:clip!important}
.split-inner{display:block}
/* flex column so the masks' negative margins add up instead of collapsing (keeps the set line-height) */
:has(> .ln-mask){display:flex;flex-direction:column}
.ln,.wd,.ch{will-change:auto}

/* ---------- loader stairs and section stairs ---------- */
.stairs{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:var(--gut) repeat(12,minmax(0,1fr)) var(--gut);pointer-events:none;user-select:none}
.stairs i{display:block;background:var(--paper);margin-right:-1px;transform-origin:50% 0}
.stairs[data-surface="dark"] i{background:var(--dark) url(img/grain-dark-160.png)}
.stairs--load{position:fixed;z-index:60;display:none}
.js.motion .stairs--load{display:grid}
.stairs--load i,.motion .stairs i{will-change:transform}
.stairs--close{visibility:hidden}
.stairs--open,.stairs--close{display:none}
.motion .stairs--open,.motion .stairs--close{display:grid}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:flex-start;justify-content:space-between;padding:clamp(16px,2vw,30px) var(--gut) 0;pointer-events:none;transition:padding .45s var(--ease-ui)}
.nav>*{pointer-events:auto}
/* the band: once the hero is passed, a quiet top bar in the colour of the section under it, with a hairline, so the logo never sits on text.
   Over full-bleed photos and the team portraits it is a soft shade instead. Flat colours only (no grain image): never a paint-heavy element. */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;opacity:0;background:var(--paper);box-shadow:inset 0 -1px 0 transparent;transition:opacity .35s linear,background-color .25s linear,box-shadow .25s linear}
.nav.has-band{padding-top:14px;padding-bottom:14px}
.nav.has-band::before{opacity:1;pointer-events:auto}
.nav[data-band="paper"]::before{background:var(--paper);box-shadow:inset 0 -1px 0 rgba(62,43,120,.16)}
.nav[data-band="purple"]::before{background:var(--purple);box-shadow:inset 0 -1px 0 rgba(243,241,234,.16)}
.nav[data-band="dark"]::before{background:var(--dark);box-shadow:inset 0 -1px 0 rgba(243,241,234,.14)}
.nav[data-band="shade"]::before{bottom:-56px;pointer-events:none;background:linear-gradient(rgba(29,24,48,.92),rgba(29,24,48,.8) 52%,rgba(29,24,48,0));box-shadow:none}
.nav__logo{position:relative;display:block;width:clamp(92px,7.9vw,124px);border-radius:2px;transition:width .45s var(--ease-ui)}
.nav.has-band .nav__logo{width:clamp(84px,6.4vw,100px)}
.logo{width:100%;height:auto;transition:opacity .25s linear}
.logo--color{position:absolute;inset:0;opacity:0}
.nav__logo[data-on="paper"] .logo--white{opacity:0}
.nav__logo[data-on="paper"] .logo--color{opacity:1}
.nav__logo{--focus:var(--paper-2)}
.nav__logo[data-on="paper"]{--focus:var(--purple)}
.nav__right{--nfg:var(--paper-2);--pbg:var(--paper-2);--pfg:var(--ink);--focus:var(--paper-2);display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
.nav__right[data-on="paper"]{--nfg:var(--ink);--pbg:var(--ink);--pfg:var(--paper-2);--focus:var(--ink)}
.nav__link{color:var(--nfg);font-size:15.5px;line-height:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;padding:12px 0;transition:color .2s linear,text-decoration-thickness .2s linear}
.nav__link:hover{text-decoration-thickness:2px}
/* a soft dark halo keeps the cream link readable over bright photo areas and portraits */
.nav:not(.has-band) .nav__right:not([data-on="paper"]) .nav__link,.nav[data-band="shade"] .nav__link{text-shadow:0 0 10px rgba(29,24,48,.85),0 0 2px rgba(29,24,48,.7)}
.nav__logo::after{content:"";position:absolute;inset:-4px -6px}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:38px;padding:.45em 1.35em .45em;border-radius:999px;border:0;text-decoration:none;font-size:15.5px;line-height:1.1;cursor:pointer;white-space:nowrap}
.pill--nav{background:var(--pbg);color:var(--pfg);transition:background-color .2s linear,color .2s linear}
.pill--nav:hover{background:var(--purple-2);color:var(--paper-2)}
.pill--light{background:var(--paper-2);color:var(--ink);transition:background-color .2s linear}
.pill--light:hover{background:var(--lilac)}

/* ---------- 02 hero (sticky, the sheet slides over it) ---------- */
.hero-stage{position:relative;height:200svh}
.hero{position:sticky;top:0;height:100svh;overflow:clip;background:var(--purple) url(img/grain-purple-160.png);color:var(--paper-2)}
.sheet{position:relative;z-index:1;margin-top:-100svh;background:var(--paper)}
@supports not (height:100svh){.hero-stage{height:200vh}.hero{height:100vh}.sheet{margin-top:-100vh}}
.hero__inner{position:absolute;inset:0;display:flex;flex-direction:column;padding:max(15svh,92px) var(--gut) 0}
.hero__machine{position:relative;z-index:1;flex:1 1 0;min-height:0;margin:0 calc(var(--col) * 2) max(5.5svh,32px);color:var(--paper-2)}
.hero__machine svg{width:100%;height:100%;overflow:visible}
.hero__machine .spark-path{stroke-width:1.7}
.hero .grid-lines{z-index:2}
.hero__text{position:relative;z-index:3;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:last baseline;padding-bottom:max(5.4svh,26px)}
.hero .h1{grid-column:1/10;grid-row:1;margin:0}
.hero--2l .h1{font-size:clamp(44px,7.3vw,118px);grid-column:1/11}
.hero__aside{grid-column:10/13;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 1.5);padding-left:calc(var(--u) * .2)}
.hero__sub{font-size:var(--fs-lead);line-height:1.32;text-wrap:pretty;color:rgba(243,241,234,.88)}
.hero__note{color:var(--lilac);text-wrap:balance}
.hero__report{display:none}
@media (min-width:992px) and (max-width:1199px){.hero__aside{padding-right:28px}}
.scroll-pill{position:absolute;z-index:4;right:max(4px,calc(var(--gut) / 2 - 11px));bottom:26px;width:22px;height:80px;border-radius:11px;background:var(--ink);color:var(--paper-2);display:grid;place-items:center;--focus:var(--paper-2)}
.scroll-pill::before{content:"";position:absolute;inset:-12px -11px}
.scroll-pill svg{width:22px;height:80px}

/* ---------- section header (rule, title on 7 columns, aside on 5 behind a rule) ---------- */
.sh{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sh__title{grid-column:1/8;padding:calc(var(--u) * 2.6) calc(var(--u) * 2) calc(var(--u) * 2.1) 0}
.sh__aside{grid-column:8/13;border-left:1px solid var(--rule);padding:calc(var(--u) * 1.75) 0 calc(var(--u) * 2.25) calc(var(--u) * 2);display:flex;flex-direction:column;gap:calc(var(--u) * 3)}
.sh__summary{margin-top:auto;font-size:var(--fs-lead);line-height:1.35;max-width:30em}
.sh--solo .sh__title{grid-column:1/11}
/* the daily-jobs H2 is the longest title: it keeps three even lines without the side padding */
#daily .sh__title{padding-right:0}

/* ---------- 03 statement ---------- */
.s-statement{padding:calc(var(--u) * 9) 0 calc(var(--u) * 10)}
.statement{font-size:var(--fs-stmt);line-height:1.25;letter-spacing:0}
.s-statement .statement{padding:calc(var(--u) * 5.5) 0 calc(var(--u) * 6.5)}
/* five parts: the lead-in on two columns, the parts on two columns each, so every rule sits on a grid line */
.parts-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.parts-head{grid-column:1/3;display:flex;flex-direction:column;gap:calc(var(--u) * 1.4);padding:calc(var(--u) * 1.6) calc(var(--u) * 1.6) calc(var(--u) * 2.4) 0}
.parts-head__lead{font-size:var(--fs-lead);line-height:1.35}
.parts{grid-column:3/13;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.part{display:flex;flex-direction:column;padding:calc(var(--u) * 1.6) calc(var(--u) * 1.6) calc(var(--u) * 2.4) calc(var(--u) * 1.4);border-left:1px solid var(--rule)}
.part__num{font-family:var(--f-mono);font-size:var(--fs-label);line-height:1;font-variant-numeric:tabular-nums}
.part__title{margin-top:calc(var(--u) * 3.2);font-size:var(--fs-h3s);line-height:1.15;font-weight:400;text-wrap:balance}
.part__text{margin-top:calc(var(--u) * .9);line-height:1.45}
.parts-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;padding-top:calc(var(--u) * 2.4)}
.parts-foot__line{grid-column:3/9;font-size:var(--fs-lead);line-height:1.35;padding-right:calc(var(--u) * 2)}
.parts-foot__entity{grid-column:10/13;font-family:var(--f-mono);font-size:var(--fs-label);line-height:1.5;color:rgba(62,43,120,.82)}

/* ---------- 04 what buyers check ---------- */
.s-checks{padding:calc(var(--u) * 9) 0 calc(var(--u) * 10)}
.checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.check{display:flex;flex-direction:column;gap:calc(var(--u) * 3.2);padding:calc(var(--u) * 1.6) calc(var(--u) * 2.2) calc(var(--u) * 2.6) calc(var(--u) * 1.4)}
.check__num{font-family:var(--f-mono);font-size:var(--fs-label);line-height:1;font-variant-numeric:tabular-nums}
.check__title{display:block;font-size:var(--fs-h3s);line-height:1.2;margin-bottom:.45em}
.compete{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-bottom:1px solid var(--rule);padding:calc(var(--u) * 2.4) 0 calc(var(--u) * 3)}
.compete__head{grid-column:1/6;padding-right:calc(var(--u) * 2)}
.compete__accent{margin-top:calc(var(--u) * 3.4);font-size:var(--fs-stmt);line-height:1.1}
.compete__accent em{font-size:1.12em}
.compete__title{margin-top:calc(var(--u) * .7);font-size:var(--fs-h3);line-height:1.15;font-weight:400}
.compete__body{grid-column:7/13;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 1.4);padding-top:calc(var(--u) * 4.6);font-size:var(--fs-lead);line-height:1.4}
.compete__body .link-arrow{margin-top:calc(var(--u) * .4)}

/* ---------- staged sections (04 photo, 08 proof): a sticky stage inside a tall section ---------- */
.s-stage{position:relative;z-index:1}
.motion .s-stage{height:300svh;margin-bottom:-25svh}
.stage{position:relative;height:100svh;min-height:560px;overflow:clip;contain:paint}
.motion .stage{position:sticky;top:0}
.stage__photo{position:absolute;left:0;right:0;top:-40%;height:140%;display:block;background:var(--deep)}
.motion .stage__photo,.motion .stage__field{will-change:transform}
/* a quiet top shade under the nav, so it keeps its contrast over the bright windows in the photo */
.s-photo .stage::after{content:"";position:absolute;left:0;right:0;top:0;height:24%;z-index:1;pointer-events:none;background:linear-gradient(rgba(29,24,48,.55),rgba(29,24,48,0))}
/* hairlines sit over the stripes and the field (spec 9.7 grid z-order) */
.stage > .grid-lines{z-index:5}
.stage__photo img{width:100%;height:100%;object-fit:cover;max-width:none}
.js:not(.motion) .stage__photo,.no-js .stage__photo{top:0;height:100%}
.stage__text{position:absolute;z-index:3;left:var(--gut);width:var(--wrap);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 var(--col);color:var(--paper-2)}
.eyebrow{color:var(--lilac);margin-bottom:calc(var(--u) * 2.4)}
.typed{font-size:var(--fs-stmt);line-height:1.25;max-width:20em;text-wrap:balance}
.typed.is-hidden{user-select:none}
.s-photo + .s{z-index:2}
/* 08 runs on a longer timeline: the figures stay readable for about a screen before the close */
.motion .s-proof__stage{height:360svh}

/* ---------- 05 board ---------- */
.s-daily{padding:calc(var(--u) * 9) 0 calc(var(--u) * 10)}
.board__label{padding:calc(var(--u) * 1.6) 0 calc(var(--u) * 1.3);border-bottom:1px solid var(--rule)}
.board__label:first-child{padding-top:calc(var(--u) * 3.5)}
.board__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.job{position:relative;display:flex;flex-direction:column;min-height:calc(var(--u) * 29);padding-bottom:calc(var(--u) * 1.75)}
.tab-slot{position:relative;overflow:clip;width:calc(var(--col) * 3)}
.tab{position:relative;background:var(--purple);color:var(--paper-2);display:flex;align-items:flex-end;min-height:calc(var(--fs-h3s) * 2.3 + var(--u) * 2.4);padding:calc(var(--u) * 1.2) calc(var(--u) * 1.4)}
.tab__title{font-size:var(--fs-h3s);line-height:1.15;font-weight:400;text-wrap:balance}
.job__num{position:absolute;top:calc(var(--u) * 1);left:calc(var(--col) * 3 + var(--u) * 1.2);font-family:var(--f-mono);font-size:var(--fs-label);font-variant-numeric:tabular-nums}
.job__icon{width:clamp(76px,8.5vw,150px);margin:calc(var(--u) * 3) 0 calc(var(--u) * 2.2) calc(var(--u) * 1.4);color:var(--purple)}
.job__icon svg{width:100%;height:auto}
.job__text{margin:0 calc(var(--u) * 2.4) 0 calc(var(--u) * 1.4);max-width:31em}
.board__more{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;padding:calc(var(--u) * 2.6) 0;border-bottom:1px solid var(--rule)}
.board__more-icon{grid-column:1/2;width:clamp(64px,5.6vw,90px);margin-left:calc(var(--u) * 1.4)}
.board__more-text{grid-column:2/9;padding-left:calc(var(--u) * 1.4)}
.board__more-text .h3{margin-bottom:.35em}
.board__more .link-arrow{grid-column:10/13;justify-self:start}
.link-arrow{display:inline-flex;align-items:center;gap:.6em;min-height:44px;font-size:var(--fs-lead);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;transition:text-decoration-thickness .2s linear}
.link-arrow::after{content:"";width:1.6em;height:1px;background:currentColor}
.link-arrow:hover{text-decoration-thickness:2px}

/* ---------- 06 services (zig-zag rows about a centre spine) ---------- */
.s-services{padding:calc(var(--u) * 4) 0 calc(var(--u) * 10)}
.svc{position:relative;padding:calc(var(--u) * 7) 0 calc(var(--u) * 2)}
.svc__spine{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--rule)}
.svc__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}
.svc__row + .svc__row{margin-top:calc(var(--u) * 13)}
.svc__row .art{grid-column:2/6;grid-row:1}
.svc__row .svc__body{grid-column:7/10;grid-row:1}
.svc__row--even .art{grid-column:8/12}
.svc__row--even .svc__body{grid-column:4/7}
.svc__body{display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--u) * 3)}
.svc__body .tab-slot{width:calc(var(--col) * 3)}
.svc__row--even .tab{justify-content:flex-end;text-align:right}
.tab--lg{min-height:calc(var(--fs-h3) * 2.3 + var(--u) * 3);padding:calc(var(--u) * 1) calc(var(--u) * 1.1) calc(var(--u) * 1.3)}
.tab--lg .tab__title{font-size:var(--fs-h3);line-height:1.1}
.tab__num{position:absolute;top:calc(var(--u) * .9);right:calc(var(--u) * 1);font-family:var(--f-mono);font-size:var(--fs-label);line-height:1;color:var(--lilac)}
.svc__row--even .tab__num{right:auto;left:calc(var(--u) * 1)}
/* room for the number, so a two-line title never runs into it */
.svc__row .tab__title{padding-right:26px}
.svc__row--even .tab__title{padding-right:0;padding-left:26px}
.svc__text{padding:0 calc(var(--u) * 1.1);max-width:30em}
.svc__row--even .svc__text{padding:0 calc(var(--u) * 1.4) 0 calc(var(--u) * .6)}

/* ---------- 07 sectors (plain rows, FAQ rhythm) ---------- */
.s-sectors{padding:calc(var(--u) * 4) 0 calc(var(--u) * 10)}
.sector{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;border-bottom:1px solid var(--rule);padding:calc(var(--u) * 2.2) 0 calc(var(--u) * 2.8)}
.sector__num{grid-column:1/2;font-family:var(--f-mono);font-size:var(--fs-label);line-height:1;padding:calc(var(--u) * .6) 0 0 calc(var(--u) * 1.4);font-variant-numeric:tabular-nums}
.sector__title{grid-column:2/6;font-size:var(--fs-h3);line-height:1.15;font-weight:400;padding-right:calc(var(--u) * 2);text-wrap:balance}
.sector__body{grid-column:6/12;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * .8);font-size:var(--fs-lead);line-height:1.45}
.sectors__more{padding:calc(var(--u) * 2.2) 0 0 calc(var(--col) * 5);font-size:var(--fs-lead);line-height:1.35}

/* plates: framed line-art boxes, opaque so hairlines stop at their edges */
.art{position:relative;overflow:clip;aspect-ratio:3/4;background:var(--paper-2);color:var(--purple)}
.art__inner{position:absolute;left:0;right:0;top:-10%;height:120%;display:flex;align-items:center;justify-content:center}
.motion .art__inner{will-change:transform}
.art__inner svg{width:100%;height:auto}
.art--dark{background:var(--purple) url(img/grain-purple-160.png);color:var(--paper-2)}

/* ---------- 07 moments and two ways ---------- */
.s-ways{padding:calc(var(--u) * 4) 0 calc(var(--u) * 12)}
.moments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.moment{display:flex;flex-direction:column;gap:calc(var(--u) * 1.6);padding:calc(var(--u) * 2.4) calc(var(--u) * 2.2) calc(var(--u) * 2.6) calc(var(--u) * 1.4)}
.moment__icon{width:clamp(56px,4.4vw,72px);color:var(--purple)}
.moment__title{display:block;font-size:var(--fs-lead);line-height:1.3;margin-bottom:.25em}
.ways{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding:calc(var(--u) * 7) 0 calc(var(--u) * 5)}
.ways__spine{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--rule)}
.way{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto 1fr;row-gap:calc(var(--u) * 3);align-content:start}
.way--left{grid-column:1/7}
.way--right{grid-column:7/13}
.way__head{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end}
.way--left .way__head .tab-slot{grid-column:4/7;grid-row:1;width:auto;margin-right:1px}
.way--left .way__kicker{grid-column:1/4;grid-row:1;justify-self:end;padding:0 calc(var(--u) * 1.2) calc(var(--u) * 1.26) 0}
.way--right .way__head .tab-slot{grid-column:1/4;grid-row:1;width:auto;margin-left:1px}
.way--right .way__kicker{grid-column:4/7;grid-row:1;padding:0 0 calc(var(--u) * 1.26) calc(var(--u) * 1.2)}
.way--left .tab{justify-content:flex-end;text-align:right}
.way--left .way__plate{grid-column:1/4}
.way--left .way__body{grid-column:4/7;padding:0 calc(var(--u) * 1.4) 0 calc(var(--u) * 1.2)}
.way--right .way__plate{grid-column:4/7;grid-row:2}
.way--right .way__body{grid-column:1/4;grid-row:2;padding:0 calc(var(--u) * 1.2) 0 calc(var(--u) * 1.1)}
.way__plate{align-self:start}
.way__body p{font-size:var(--fs-lead);line-height:1.35}
.bullets{margin-top:calc(var(--u) * 2.2);border-top:1px solid var(--rule)}
.bullets li{padding:.7em 0 .7em 1.4em;border-bottom:1px solid var(--rule);position:relative}
.bullets li::before{content:"";position:absolute;left:0;top:1.28em;width:.55em;height:1px;background:currentColor}
.ways__line{border-top:1px solid var(--rule);padding-top:calc(var(--u) * 2.4);font-size:var(--fs-lead);line-height:1.35;max-width:none;text-align:center}

/* ---------- dark zone: 08 to 10 ---------- */
.dark-zone{position:relative;z-index:1;background:var(--dark) url(img/grain-dark-160.png);color:var(--paper-2)}
.s-ways{z-index:2}
.dark-zone .s{color:var(--paper-2)}
.dark-zone .sh{border-top:0}
.s-proof{padding-top:calc(var(--u) * 9)}
.s-proof > .wrap{padding-bottom:calc(var(--u) * 0)}
.s-proof .sh{border-bottom:0}
.s-proof__stage .stage__field{position:absolute;left:0;right:0;top:-10%;height:120%;background:var(--purple) url(img/grain-purple-160.png);color:var(--paper-2)}
.stage__field svg{width:100%;height:100%;max-width:none;opacity:.6;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 18%,rgba(0,0,0,.66) 30%,rgba(0,0,0,.66) 70%,#000 82%,#000 100%);mask-image:linear-gradient(90deg,#000 0,#000 18%,rgba(0,0,0,.66) 30%,rgba(0,0,0,.66) 70%,#000 82%,#000 100%)}
.js:not(.motion) .s-proof__stage .stage__field,.no-js .s-proof__stage .stage__field{top:0;height:100%}
.stage__text--proof{padding:calc(var(--u) * 8) var(--col) calc(var(--u) * 2.4)}
.proof__more{display:flex;flex-direction:column;align-items:center;width:100%}
.mask{display:block;overflow:clip;padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.proof__body{margin-top:calc(var(--u) * 2.4);max-width:38em;font-size:var(--fs-lead);line-height:1.4;color:rgba(243,241,234,.88)}
.proof__body--bridge{margin-top:calc(var(--u) * 1.1)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:calc(var(--col) * 8);margin-top:calc(var(--u) * 3.4);border-top:1px solid rgba(243,241,234,.45);text-align:left}
.figures li{padding:calc(var(--u) * 1.4) calc(var(--u) * 1.4) 0 0}
.fig__num{display:block;font-size:clamp(30px,3.2vw,50px);line-height:1.05;letter-spacing:-.01em}
.fig__label{display:block;margin-top:.5em;font-family:var(--f-mono);font-size:var(--fs-label);line-height:1.45;color:var(--lilac);max-width:18em}
.proof__link{margin-top:calc(var(--u) * 3.4);min-height:44px}
.proof__link:focus-visible{opacity:1!important}
.s-proof__stage + *{position:relative}
.s-how{z-index:2;padding-top:calc(var(--u) * 9);background:var(--dark) url(img/grain-dark-160.png)}
.s-how .sh{border-top:1px solid var(--rule)}
.s-where{z-index:3;background:var(--dark) url(img/grain-dark-160.png)}

/* ---------- 09 rail: stacked by default (phone, no JS, reduced motion) ---------- */
.rail-wrap{position:relative}
.rail-stage{position:relative;z-index:3}
.rail-track{position:relative;width:var(--wrap);margin:0 auto;padding:calc(var(--u) * 5) 0 calc(var(--u) * 4)}
.rail-line{position:absolute;left:4px;top:calc(var(--u) * 5);bottom:calc(var(--u) * 4);width:1px;background:var(--rule)}
.rail{counter-reset:none}
.panel{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0;row-gap:calc(var(--u) * 2);padding:0 0 calc(var(--u) * 7)}
.panel__num{position:absolute;left:24px;top:-3px;font-family:var(--f-mono);font-size:var(--fs-label);line-height:1;color:var(--lilac)}
.panel__dot{position:absolute;left:1px;top:0;width:7px;height:7px;border-radius:50%;background:var(--paper-2)}
.panel .tab-slot{grid-column:1/4;margin-top:calc(var(--u) * 2.4);margin-left:calc(var(--col) * .5)}
.panel .tab-slot{width:auto}
.panel__text{grid-column:1/4;margin-left:calc(var(--col) * .5);padding:0 calc(var(--u) * 1) 0 15px;color:rgba(243,241,234,.88)}
.panel__get{margin-top:calc(var(--u) * 1.2);color:var(--paper-2)}
.panel__get strong{display:block;margin-bottom:.3em;font-family:var(--f-mono);font-size:var(--fs-label);font-weight:400;line-height:1.4;color:var(--lilac)}
.panel .art{grid-column:6/10;grid-row:1/4}
.rules{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:calc(var(--u) * 2.4) 0;margin-bottom:calc(var(--u) * 10)}
.rules__label{grid-column:1/4;grid-row:1;color:var(--lilac)}
.rules__time{grid-column:1/4;grid-row:2;margin-top:calc(var(--u) * 1.6);padding-right:calc(var(--u) * 2.4);font-size:var(--fs-lead);line-height:1.35}
.rules__list{grid-column:4/13;grid-row:1/4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--u) * 2.4);row-gap:calc(var(--u) * 1.8)}
.rules__list li{font-size:var(--fs-lead);line-height:1.35;padding-left:calc(var(--u) * 1.6);border-left:1px solid var(--rule)}

/* horizontal rail (desktop and tablet, motion on): sticky stage, the track slides under fixed hairlines */
@media (min-width:768px) and (min-height:640px){
  .motion .rail-stage{position:sticky;top:0;z-index:3;height:100svh;min-height:600px;overflow:clip;--rail-y:max(12.4svh,92px)}
  .motion .rail-track{will-change:transform}
  .motion .rail-track{position:absolute;left:var(--gut);top:0;bottom:0;width:calc(var(--col) * 39);margin:0;padding:0;z-index:3}
  .motion .rail-line{left:0;right:0;top:var(--rail-y);bottom:auto;width:auto;height:1px}
  .motion .rail{display:flex;height:100%}
  .motion .panel{display:block;flex:0 0 calc(var(--col) * 10);height:100%;padding:0}
  .motion .panel:last-child{flex-basis:calc(var(--col) * 9)}
  .motion .panel__num{left:0;top:calc(var(--rail-y) - 26px)}
  .motion .panel__dot{left:9px;top:calc(var(--rail-y) - 3px)}
  .motion .panel .tab-slot{position:absolute;left:0;top:calc(var(--rail-y) + 15px);width:calc(var(--col) * 3);margin:0}
  .motion .panel__text{position:absolute;left:0;top:auto;bottom:max(6svh,40px);width:calc(var(--col) * 3);margin:0;padding:0 calc(var(--u) * 1) 0 15px}
  .motion .panel .art{position:absolute;left:calc(var(--col) * 5);top:calc(var(--rail-y) + 15px);height:min(calc(var(--col) * 16 / 3),calc(100svh - var(--rail-y) - 64px));width:auto;aspect-ratio:3/4}
  .motion .panel .art__inner{left:-4%;right:-4%;top:0;height:100%}
  .motion .panel .art__inner svg{width:auto;height:100%}
}
/* 768 to 991: four-column tags and text, so titles stay on two lines; the plate keeps a one-column gap */
@media (min-width:768px) and (max-width:991px) and (min-height:640px){
  .motion .panel .tab-slot,.motion .panel__text{width:calc(var(--col) * 4)}
}

/* ---------- 10 network ---------- */
.net-wrap{position:relative}
.net-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u) * 2.4);padding:calc(var(--u) * 6) 0 calc(var(--u) * 9)}
@media (min-width:768px) and (min-height:640px){
  .motion .net-wrap{height:180svh}
  .motion .net-stage{position:sticky;top:0;height:100svh;padding:calc(var(--u) * 6) 0 calc(var(--u) * 3)}
}
.net{position:relative;width:min(calc(var(--col) * 10),calc((100svh - 250px) * 1040 / 492));max-width:100%}
.net svg{width:100%;height:auto;color:var(--paper-2);overflow:visible}
.net .label{font-size:var(--lab,14px)}
.net .label{paint-order:stroke;stroke:var(--dark);stroke-width:var(--lab-knock,5px);stroke-linejoin:round}
.net .spark-path{stroke-width:var(--spark-w,1.3)}
.net__legend{display:none}
.net__under{display:flex;flex-direction:column;align-items:center;gap:.6em;text-align:center;padding:0 var(--gut)}
.net__facts{color:var(--lilac)}
.net__line{font-size:var(--fs-lead);line-height:1.35;max-width:34em}
.net.is-small svg .label{display:none}
.net.is-small .net__legend{display:grid;gap:12px;margin-top:20px;text-align:left}
.net__legend p{font-size:15px;line-height:1.45;color:rgba(243,241,234,.88)}
@media (max-width:767px){.net.is-small .net__legend{padding-inline:var(--gut)}}
.net__legend .label{display:block;color:var(--lilac);font-size:14px;margin-bottom:2px;stroke:none}

/* ---------- 11 team ---------- */
.s-team{z-index:2;padding:calc(var(--u) * 9) 0 calc(var(--u) * 14)}
.team-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;padding-top:calc(var(--u) * 6)}
.team{grid-column:1/10;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.person{position:relative;padding:6px}
.person__photo{position:relative;overflow:clip;aspect-ratio:3/4;background:var(--purple)}
.person__photo img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;max-width:none}
.motion .person__photo img{will-change:transform}
.name-slot{position:absolute;left:0;bottom:calc(6px + var(--u) * 2);overflow:clip;width:max(calc(var(--col) * 2),210px)}
.name-tag{background:var(--purple);color:var(--paper-2);padding:12px 16px 13px;min-height:61px}
.name-tag__name{display:block;font-size:var(--fs-lead);line-height:1.2}
.name-tag__role{display:block;margin-top:3px;font-size:14px;line-height:1.35;color:var(--lilac)}
.team__more{grid-column:10/13;padding:0 0 calc(6px + var(--u) * 2) calc(var(--u) * 1.4);font-size:var(--fs-lead);line-height:1.35}

/* ---------- 12 FAQ ---------- */
.s-faq{padding:0 0 calc(var(--u) * 12)}
.sh__summary--small{font-size:var(--fs-body)}
.faq__row{border-bottom:1px solid var(--rule)}
.faq__row summary{display:grid;grid-template-columns:var(--col) minmax(0,1fr) 44px;align-items:center;gap:0;padding:calc(var(--u) * 1.5) 0;cursor:pointer;list-style:none;font-size:clamp(20px,1.7vw,27px);line-height:1.25;border-radius:2px}
.faq__row summary::-webkit-details-marker{display:none}
.faq__q{text-wrap:balance}
.faq__row summary:hover .faq__q{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.faq__num{font-family:var(--f-mono);font-size:var(--fs-label);padding-left:calc(var(--u) * 1.4)}
.faq__icon{position:relative;width:22px;height:22px;justify-self:end;transition:transform .4s var(--ease-ui)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor}
.faq__icon::after{transform:rotate(90deg)}
.faq__row[open] .faq__icon{transform:rotate(45deg)}
.faq__a{overflow:hidden}
.faq__a p{padding:0 0 calc(var(--u) * 2.2) var(--col);max-width:calc(var(--col) * 8);font-size:var(--fs-lead);line-height:1.45}

/* ---------- 13 report form and footer ---------- */
.s-report{min-height:100svh;padding:calc(var(--u) * 10) 0 calc(var(--u) * 7);background:var(--purple) url(img/grain-purple-160.png);color:var(--paper-2)}
.report{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:calc(var(--u) * 6)}
.report__title{grid-column:1/8;padding-right:calc(var(--u) * 2)}
.report__right{grid-column:8/13;align-self:end;display:flex;flex-direction:column;gap:calc(var(--u) * 1.8);padding-left:calc(var(--u) * 2);border-left:1px solid var(--rule)}
.report__lead{font-size:var(--fs-lead);line-height:1.35}
.report__points{color:var(--lilac)}
.form{grid-column:1/7;grid-row:2;display:grid;gap:calc(var(--u) * 1.6);padding-right:calc(var(--u) * 2)}
.report__contact{grid-column:8/13;grid-row:2;align-self:end;display:flex;flex-direction:column;gap:2px;padding-left:calc(var(--u) * 2);border-left:1px solid var(--rule);font-size:var(--fs-lead);line-height:1.35}
.report__contact a{display:inline-block;padding:8px 0;text-decoration-thickness:1px;text-underline-offset:.2em}
.report__contact .label{color:var(--lilac);padding-top:8px}
.form:focus-visible{outline-offset:12px}
.fld{display:flex;flex-direction:column}
.fld label{font-family:var(--f-mono);font-size:var(--fs-label);line-height:1.4;color:var(--lilac)}
.fld input,.fld select{width:100%;font-size:max(16px,var(--fs-lead));line-height:1.3;color:var(--paper-2);background:transparent;border:0;border-bottom:1px solid rgba(243,241,234,.5);border-radius:0;padding:10px 0 9px;min-height:46px;transition:border-color .2s linear;-webkit-appearance:none;appearance:none}
.fld select{background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F3F1EA'/%3E%3C/svg%3E") no-repeat right 4px center;padding-right:28px;cursor:pointer}
.fld select option{color:var(--ink);background:var(--paper-2)}
.fld input:focus,.fld select:focus{border-bottom-color:rgba(243,241,234,1)}
.fld input:focus-visible,.fld select:focus-visible{outline-offset:4px}
.fld input[aria-invalid="true"]{border-bottom-color:var(--err)}
.fld__hint{margin-top:6px;font-size:14px;line-height:1.4;color:var(--lilac)}
.fld__err{margin-top:6px;font-size:14px;line-height:1.4;color:var(--err)}
.fld__err:empty{display:none}
.form__actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:calc(var(--u) * 1.2)}
.pill--submit{background:var(--paper-2);color:var(--ink);min-height:48px;padding:0 1.6em;font-size:16px;transition:background-color .2s linear;overflow:clip}
.pill--submit:hover{background:var(--lilac)}
.pill__label{display:block}
.form__note{font-size:15px;line-height:1.45;color:rgba(243,241,234,.88)}
.form__note a{text-decoration-thickness:1px;text-underline-offset:.2em}
.form__mail{display:inline-block;padding:12px 0;margin:-12px 0}
.form__status{font-size:var(--fs-lead);line-height:1.35}
.form__status:empty{display:none}
.form__status a{text-underline-offset:.2em}
.form__fallback{display:none;font-size:15px;line-height:1.45}
.no-js .form__fallback,.js-fail .form__fallback{display:block}
.report__done{display:block;margin-top:.4em;font-size:var(--fs-lead);line-height:1.35}

.foot{position:relative;background:var(--purple) url(img/grain-purple-160.png);color:var(--paper-2);padding:0 0 calc(var(--u) * 3)}
.foot__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--rule);padding-top:calc(var(--u) * 3);row-gap:28px}
.foot__logo{grid-column:1/3;width:clamp(104px,8vw,132px);align-self:start;border-radius:2px}
.foot__logo img{width:100%;height:auto}
.foot__offices{grid-column:4/10;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(var(--u) * 2)}
.foot__city{display:block;font-size:var(--fs-lead);line-height:1.3;margin-bottom:.35em}
.foot__addr{display:block;font-family:var(--f-mono);font-size:14px;line-height:1.5;color:var(--lilac);max-width:20em}
.foot__contact{grid-column:10/13;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.45}
.foot__contact a{display:inline-block;padding:5px 0;text-decoration-thickness:1px;text-underline-offset:.2em;overflow-wrap:break-word}
.foot__contact li:not(:has(a)){padding:5px 0;color:var(--lilac)}
.foot__bottom{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:calc(var(--u) * 5);padding-top:calc(var(--u) * 1.6);border-top:1px solid var(--rule);font-size:14px;line-height:1.5;color:var(--lilac)}
.foot__bottom a{color:var(--paper-2);text-underline-offset:.2em}
.foot__top{white-space:nowrap;padding:10px 0}
/* 992 to 1199: offices get their own row, so the email and the Abohar address never crowd */
@media (max-width:1199px){
  .foot__offices{grid-column:1/13;order:3}
  .foot__contact{grid-column:7/13}
  .foot__logo{grid-column:1/7}
}

/* ---------- FOUC guard: hidden only while the intro is being prepared (fail-safe in the head script) ---------- */
/* the H1 is left out on purpose: it paints under the loader stairs from the first frame, so it is the early LCP element; the stairs hide it until the intro */
.motion.js-wait .hero__machine,.motion.js-wait .hero__sub,.motion.js-wait .hero__report,.motion.js-wait .hero__note,.motion.js-wait .nav,.motion.js-wait .scroll-pill{visibility:hidden}

/* ---------- tablet 768 to 991 ---------- */
@media (max-width:991px){
  .tab-slot,.svc__body .tab-slot{width:calc(var(--col) * 4)}
  .job .tab-slot{width:calc(var(--col) * 4 - 1px)}
  .job__num{left:auto;right:calc(var(--u) * 1.2);top:auto;bottom:calc(var(--u) * 1.75)}
  .svc__row .art{grid-column:1/6}
  .svc__row .svc__body{grid-column:7/12}
  .svc__row--even .art{grid-column:8/13}
  .svc__row--even .svc__body{grid-column:2/7}
  .moments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-wrap{display:block}
  .team{grid-template-columns:repeat(3,minmax(0,1fr))}
  .team__more{margin-top:calc(var(--u) * 3);padding:0 0 0 6px}
  .hero__machine{margin-inline:0}
  .hero .h1,.hero--2l .h1{grid-column:1/-1}
  .hero__aside{grid-column:1/9;grid-row:2;margin-top:20px;padding-left:0;gap:14px}
  .parts-wrap{display:block}
  .parts-head{flex-direction:row;align-items:baseline;gap:24px;padding:18px 0 16px;border-bottom:1px solid var(--rule)}
  .parts-head__label{flex:0 0 auto}
  .parts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .part:nth-child(3n+1){border-left:0;padding-left:0}
  .part:nth-child(n+4){border-top:1px solid var(--rule)}
  .parts-foot__line{grid-column:1/8}
  .parts-foot__entity{grid-column:8/13}
  .checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .check:nth-child(n+3){border-top:1px solid var(--rule)}
  .compete__head{grid-column:1/-1}
  .compete__body{grid-column:1/-1;padding-top:24px}
  .sector__title{grid-column:2/7}
  .sector__body{grid-column:7/13}
  .sectors__more{padding-left:calc(var(--col) * 6)}
  .hero__text{align-items:start}
  .ways{display:flex;flex-direction:column;gap:64px;padding-top:48px}
  .ways__spine{display:none}
  .way,.way__head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
  .way--right .way__head{flex-direction:column-reverse}
  .way .way__kicker{padding:0;justify-self:auto}
  .way .way__head .tab-slot{width:min(calc(var(--col) * 6),330px)}
  .way--left .tab{justify-content:flex-start;text-align:left}
  .way__plate{width:min(100%,320px);order:3}
  .way .way__body{padding:0;order:2;max-width:36em}
  .ways__line{text-align:left}
}

/* ---------- phone, 767 and below ---------- */
@media (max-width:767px){
  .nav{padding-top:14px;padding-bottom:10px}
  .nav.has-band{padding-top:12px;padding-bottom:10px}
  .nav__link{display:none}
  .pill{min-height:44px}
  .hero__inner{padding-top:max(14svh,84px)}
  .hero__machine{margin:0 0 28px;transform:scale(.85);transform-origin:50% 100%}
  /* 40 px floor: "for manufacturers." stays on one line down to 360 px */
  .hero .h1,.hero--2l .h1{grid-column:1/-1;font-size:clamp(40px,11vw,60px)}
  .hero__aside{grid-column:1/-1;grid-row:2;margin-top:18px;padding-left:0;gap:8px}
  .hero__sub{font-size:17px}
  .hero__text{align-items:start;padding-bottom:max(4svh,22px)}
  .hero__report{display:inline-block;margin-top:4px;padding:10px 0 6px;font-size:17px;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
  .hero__note{font-size:13px}
  .scroll-pill{display:none}

  .sh{display:block}
  .sh__title{padding:28px 0 20px}
  .sh__aside{border-left:0;border-top:1px solid var(--rule);padding:18px 0 24px;gap:14px}
  .sh__summary{margin-top:0}
  .s-statement{padding:64px 0 72px}
  .s-statement .statement{padding:32px 0 40px}
  .parts-head{display:block;padding:16px 0 18px}
  .parts-head__lead{margin-top:10px}
  .parts{display:block}
  .part{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:0;border-left:0;border-top:1px solid var(--rule);padding:18px 0 20px}
  .part:first-child{border-top:0}
  .part__num{grid-row:1/3;padding-top:.3em}
  .part__title{margin-top:0}
  .part__text{grid-column:2}
  .parts-foot{display:flex;flex-direction:column;gap:18px;padding-top:22px}
  .parts-foot__line{padding-right:0}
  .s-checks{padding-top:64px}
  .checks{grid-template-columns:1fr}
  .check{gap:14px;padding:20px 0 22px;border-top:1px solid var(--rule)}
  .check:first-child{border-top:0}
  .compete{display:block;padding:20px 0 28px}
  .compete__accent{margin-top:28px}
  .compete__head{padding-right:0}
  .compete__body{padding-top:22px;gap:16px}
  .sector{display:grid;grid-template-columns:44px minmax(0,1fr);row-gap:12px;padding:22px 0 26px}
  .sector__num{grid-column:1;padding:.45em 0 0}
  .sector__title{grid-column:2;padding-right:0}
  .sector__body{grid-column:2}
  .sectors__more{padding:22px 0 0 44px}

  .motion .s-stage{height:220svh}
  .motion .s-proof__stage{height:264svh}
  .stage__photo{top:-20%;height:120%}
  .stage__text{padding:0 4px}
  .typed{max-width:none}

  .s-daily{padding-top:64px}
  .board__row{grid-template-columns:1fr}
  .job{min-height:0;padding-bottom:28px;border-bottom:1px solid var(--rule)}
  .job:last-child{border-bottom:0}
  .job .tab-slot{width:min(calc(var(--col) * 9),300px)}
  .job__num{top:14px;bottom:auto;right:4px;left:auto}
  .job__icon{margin:28px 0 18px 18px;width:88px}
  .job__text{margin:0 18px}
  .board__more{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
  .board__more-icon,.board__more-text{margin-left:0;padding-left:0}

  .svc{padding-top:40px}
  .svc__spine{display:none}
  .svc__row,.svc__row--even{display:flex;flex-direction:column;gap:20px}
  .svc__row + .svc__row{margin-top:72px}
  .svc__row .svc__body{display:contents}
  .svc__row .tab-slot,.svc__row--even .tab-slot{order:1;width:min(calc(var(--col) * 10),330px)}
  .svc__text,.svc__row--even .svc__text{order:2;padding:0}
  .svc__row .art,.svc__row--even .art{order:3;width:min(100%,360px)}
  .svc__row--even .tab{justify-content:flex-start;text-align:left}
  .svc__row--even .tab__num{left:auto;right:calc(var(--u) * 1)}
  .svc__row--even .tab__title{padding-left:0;padding-right:26px}

  .moments{grid-template-columns:1fr 1fr}
  .moment{padding:22px 14px 24px 0}
  .ways{display:flex;flex-direction:column;gap:64px;padding-top:48px}
  .ways__spine{display:none}
  .way,.way__head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
  .way--right .way__head{flex-direction:column-reverse}
  .way .way__kicker{padding:0;justify-self:auto}
  .way .way__head .tab-slot{width:min(calc(var(--col) * 10),330px)}
  .way--left .tab{justify-content:flex-start;text-align:left}
  .way__plate{width:min(100%,320px);order:3}
  .way .way__body{padding:0;order:2}
  .ways__line{text-align:left}

  .stage__text--proof{padding:76px 0 24px;justify-content:center}
  .proof__body{font-size:16px}
  .figures{grid-template-columns:1fr;width:100%;margin-top:22px}
  .figures li{display:grid;grid-template-columns:7.2em 1fr;align-items:baseline;gap:12px;padding:10px 0 0}
  .fig__num{font-size:26px}
  .fig__label{margin-top:0}
  .proof__link{margin-top:22px}

  .rail-track{padding-left:0}
  .panel{display:flex;flex-direction:column;align-items:flex-start;padding:0 0 56px 28px}
  .panel__num{left:28px;top:-3px}
  .panel .tab-slot{margin:26px 0 0;width:min(100%,300px)}
  .panel__text{margin:0;padding:0}
  .panel .art{width:min(100%,300px)}
  .rules{display:block}
  .rules__list{display:flex;flex-direction:column;gap:16px;margin-top:16px}
  .rules__time{margin-top:22px;padding-right:0}

  .net{width:100%}
  .net-stage{padding:40px 0 64px}

  .team{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:40px}
  .name-slot{width:min(100%,220px)}
  .name-tag{padding:10px 12px}

  .faq__row summary{grid-template-columns:44px minmax(0,1fr) 36px;font-size:19px;padding:18px 0}
  .faq__num{padding-left:0}
  .faq__a p{padding:0 0 22px 44px;max-width:none;font-size:17px}

  .report{display:flex;flex-direction:column;gap:36px}
  .report__right,.report__contact{border-left:0;padding-left:0}
  .report__contact{align-self:flex-start}
  .form{padding-right:0}
  .foot__grid{display:flex;flex-direction:column}
  .foot__offices{grid-template-columns:1fr;row-gap:18px}
  .foot__bottom{flex-direction:column;gap:8px}
  .foot__contact a{padding:11px 0}
}
@media (min-width:480px) and (max-width:767px){
  .person:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:50%}
}
@media (max-width:479px){
  .team{grid-template-columns:1fr}
  .person{max-width:360px}
}

/* ---------- reduced motion: nothing slides, nothing loops (see site.js) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}
}

/* line art: 1 px strokes at any size (the files carry this rule; inlined copies share this one) */
.la-art :is(path,circle,rect,ellipse,polyline,polygon):not(.spark-path):not(.draw){vector-effect:non-scaling-stroke}
.la-03 .cell{fill:currentColor;fill-opacity:0;transition:fill-opacity .2s linear}
.la-03 .cell[fill]{fill-opacity:1}
.la-03 .cell.is-off{fill-opacity:0}
.la-03 .cell.is-lit{fill-opacity:1}
.la-12 .rung-mark{fill:currentColor;fill-opacity:0;transition:fill-opacity .2s linear}
.la-12 .rung-mark.is-lit{fill-opacity:1}
.js .la-21 .month{fill:currentColor;fill-opacity:0}
.js .la-21 .month.is-now{fill-opacity:1}
section[tabindex="-1"]:focus-visible,header[tabindex="-1"]:focus-visible{outline:none}
.faq__row.is-closing .faq__icon{transform:none}
/* without JS (or if site.js never ran) the nav cannot read the surface under it, so it stays with the purple hero */
.no-js .nav,.js-fail .nav{position:absolute}

/* ---------- short or very narrow windows (phone landscape, 200% and 400% zoom): no fixed-height boxes, no pins ---------- */
@media (max-height:560px),(max-width:359px){
  .hero-stage{height:auto}
  .hero{position:relative;height:auto;min-height:100svh;overflow:clip visible}
  .hero__inner{position:relative;inset:auto;min-height:100svh}
  .hero__machine{flex:0 0 auto;height:max(34svh,120px)}
  .sheet{margin-top:0}
  .motion .s-stage,.motion .s-proof__stage{height:auto;margin-bottom:0}
  .stage,.motion .stage{position:relative;height:auto;min-height:100svh}
  .stage__photo,.motion .stage__photo,.s-proof__stage .stage__field{top:0;height:100%}
  .stage__text{position:relative;left:auto;top:auto;bottom:auto;margin-inline:auto;padding-block:max(16svh,72px) 48px}
  .stage__text--proof{padding-block:max(16svh,72px) 48px}
  .motion .stairs--open,.motion .stairs--close{display:none}
}