/* S-4 IT Works — homepage styles
   Source: "S-4 IT Works — Homepage & Design System" (Homepage V2).
   Fonts are self-hosted Latin subsets of Google Fonts (SIL Open Font License). */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-latin.woff2") format("woff2")}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/instrument-sans-latin.woff2") format("woff2")}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2")}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
[hidden]{display:none !important}
section[id]{scroll-margin-top:16px}


body{margin:0;background:#FFFFFF;color:#0A0B0D;font-family:'Instrument Sans','Helvetica Neue',Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#00718A}a:hover{color:#0A0B0D}
*{box-sizing:border-box}
.page{position:relative;overflow-x:clip;background:#FFFFFF}
:root{--m:80px;--gut:24px;--sp:80px}
.d{font-family:'Archivo','Helvetica Neue',sans-serif;font-stretch:108%;font-weight:600;letter-spacing:-0.022em}
.id{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;line-height:16px;letter-spacing:0.02em}
.h1{margin:0;font-size:54px;line-height:1.06;text-wrap:balance}
.h2{margin:0;font-size:42px;line-height:1.1;text-wrap:balance}
.h3{margin:0;font-size:28px;line-height:1.15;text-wrap:balance}
.lead{margin:0;font-size:19px;line-height:1.55;color:#3E3A39;text-wrap:pretty}
.body{margin:0;font-size:16px;line-height:1.6;color:#3E3A39;text-wrap:pretty}
.small{font-size:14px;line-height:1.5}
.h2x{font-size:46px;line-height:1.06}
.h3x{font-size:32px}
.eb{display:flex;align-items:center;gap:10px;font-size:16px;line-height:24px;font-weight:600;color:#3E3A39}
.eb::before{content:"";width:9px;height:9px;background:#04AED1;flex-shrink:0}
.dark .eb{color:#E8E6E2}
.dark .body,.dark .lead{color:#C9C5BF}
:focus-visible{outline:2px solid #00718A;outline-offset:3px}
.dark :focus-visible{outline-color:#04AED1}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;flex-shrink:0}
.btn-p,.btn-s,.btn-ink{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 20px;border-radius:2px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;font-family:inherit;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn-p{background:#04AED1;color:#0A0B0D;border-color:#04AED1}
.btn-p:hover{background:#0A0B0D;color:#FFFFFF;border-color:#0A0B0D}
.dark .btn-p:hover{background:#FFFFFF;color:#0A0B0D;border-color:#FFFFFF}
.btn-s{background:transparent;color:#0A0B0D;border-color:#0A0B0D}
.btn-s:hover{background:#0A0B0D;color:#FFFFFF}
.btn-ink{background:#0A0B0D;color:#FFFFFF;border-color:#0A0B0D}
.btn-ink:hover{background:#04AED1;color:#0A0B0D;border-color:#04AED1}
.tl{display:inline-flex;align-items:center;gap:8px;color:#0A0B0D;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid #0A0B0D;padding:10px 0 3px}
.tl:hover{color:#00718A;border-color:#00718A}
.dark .tl{color:#FFFFFF;border-color:#6B6661}.dark .tl:hover{color:#04AED1;border-color:#04AED1}

/* header */
.hdr{height:80px;padding:0 var(--m);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#FFFFFF;border-bottom:1px solid #E4E1DC;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#0A0B0D;min-height:44px}
.brand-t{font-family:'Baskerville WGL','Baskerville','Libre Baskerville',Georgia,serif;font-size:19px;font-weight:700;letter-spacing:0.03em;line-height:1}
.hdr-nav{display:flex;align-items:center;gap:40px}
.nav-l{color:#0A0B0D;text-decoration:none;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:6px;height:44px;border-bottom:2px solid transparent}
.nav-l:hover{color:#0A0B0D;border-bottom-color:#04AED1}
.hdr-r{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid #0A0B0D;border-radius:2px;color:#0A0B0D;text-decoration:none}

/* hero */
.hero{padding:0 var(--m);position:relative;background:#FFFFFF}
.gridlines{position:absolute;inset:0 var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);pointer-events:none}
.gridlines span{border-right:1px solid #F1EFEB}.gridlines span:first-child{border-left:1px solid #F1EFEB}
.hero-grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center;min-height:560px;padding:8px 0}
.hero-copy{grid-column:1 / span 6;display:flex;flex-direction:column;gap:26px}
.hero-art{grid-column:7 / span 6;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.hero-full{width:581px;height:543px;display:block}
.hero-compact{display:none;width:100%;max-width:400px;height:auto}
.hero-legend{display:none;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:6px;width:100%;max-width:400px}
.hero-legend span{font-size:13px;line-height:18px;color:#3E3A39}
.hero-ctas{display:flex;gap:16px;padding-top:6px}
.disc-row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);padding-bottom:32px}
.disc{display:flex;flex-direction:column;gap:8px;padding:22px 24px 0 0;min-height:44px;text-decoration:none;color:#0A0B0D;border-top:2px solid #0A0B0D;transition:border-color .15s}
.disc:hover{border-top-color:#04AED1;color:#0A0B0D}
.disc-t{display:flex;align-items:center;justify-content:space-between;font-size:21px}
.disc-a{transition:transform .15s}
.disc:hover .disc-a{transform:translateX(4px);color:#00718A}

/* svg: hero */
.h-orb{fill:none;stroke:#CFCBC5;stroke-width:1;stroke-dasharray:2 5}
.h-orbf{fill:none;stroke:#8A857F;stroke-width:1}
.h-cage{fill:none;stroke:#0A0B0D;stroke-width:1;opacity:.26}
.h-brk{stroke:#0A0B0D;stroke-width:1.2;fill:none}
.h-plane{fill:rgba(255,255,255,.86);stroke:#0A0B0D;stroke-width:1.1}
.h-grid{stroke:#E4E1DC;stroke-width:1}
.h-sl1{fill:#E9E7E3;stroke:#0A0B0D;stroke-width:1.1}
.h-sl2{fill:#D6D3CD;stroke:#0A0B0D;stroke-width:1.1}
.h-mod{fill:#3E3A39}
.h-tile{fill:#F2F1EE;stroke:#0A0B0D;stroke-width:1}
.h-link{stroke:#0A0B0D;stroke-width:1}
.h-nd{fill:#FFFFFF;stroke:#0A0B0D;stroke-width:1.2}
.h-lead{stroke:#9B9690;stroke-width:1}
.h-dot{fill:#0A0B0D}
.h-lbl{font:500 14px 'JetBrains Mono',monospace;letter-spacing:.05em;fill:#0A0B0D}
.h-lbs{font:400 14px 'JetBrains Mono',monospace;letter-spacing:.03em;fill:#5E5A57}
.h-lbn{font:500 14px 'JetBrains Mono',monospace;letter-spacing:.05em;fill:#00718A}
.h-tag{font:500 20px 'JetBrains Mono',monospace;fill:#00718A}
.h-spine{stroke:#0A0B0D;stroke-width:1.2}
.h-flow{stroke:#04AED1;stroke-width:2.5;stroke-dasharray:14 26;animation:hflow 2.4s linear infinite}
.h-core{fill:#04AED1;stroke:#0A0B0D;stroke-width:1.2}
.h-pulse{fill:none;stroke:#04AED1;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:hpulse 3s ease-out infinite}
.h-pulse.p2{animation-delay:1s}.h-pulse.p3{animation-delay:2s}
.h-run{fill:#04AED1;stroke:#0A0B0D;stroke-width:1.2;offset-path:path("M5.8,356 A230.2,132.9 0 1 0 466.2,356 A230.2,132.9 0 1 0 5.8,356");offset-distance:62%;offset-rotate:0deg;animation:hrun 18s linear infinite}
@keyframes hflow{to{stroke-dashoffset:80}}
@keyframes hpulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes hrun{from{offset-distance:0%}to{offset-distance:100%}}

/* challenge */
.chal{padding:72px var(--m);background:#F7F6F3}
.chal .h2{font-size:36px}
.chal-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:28px}
.chal-h{grid-column:1 / span 5;display:flex;flex-direction:column;gap:20px}
.chal-b{grid-column:7 / span 6;display:flex;flex-direction:column;justify-content:flex-end}
.pts{grid-column:1 / -1;margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px var(--gut)}
.pts li{border-top:1px solid #C9C5BF;padding-top:14px;display:flex;flex-direction:column;gap:4px}
.pts b{font-size:15px;font-weight:600}
.pts span{font-size:15px;line-height:1.5;color:#3E3A39}

/* capabilities */
.caps{padding:var(--sp) var(--m);background:#FFFFFF}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:16px;align-items:end;margin-bottom:40px}
.sec-head .sh-l{grid-column:1 / span 7;display:flex;flex-direction:column;gap:18px}
.sec-head .sh-r{grid-column:9 / span 4}
.nav-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.tabs{grid-column:1 / span 4;display:flex;flex-direction:column;border-bottom:1px solid #E4E1DC}
.tab{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:64px;padding:10px 16px;cursor:pointer;color:#0A0B0D;border-top:1px solid #E4E1DC;transition:background .15s}
.tab:hover{background:#F7F6F3}
.tab:hover .tab-arr{opacity:1;transform:translateX(0)}
.tab:focus-visible{outline:2px solid #00718A;outline-offset:-2px;box-shadow:inset 0 0 0 4px #FFFFFF}
.tab.on{background:#0A0B0D;color:#FFFFFF;border-top-color:#0A0B0D}
.tab.on:focus-visible{outline-color:#04AED1;box-shadow:inset 0 0 0 4px #0A0B0D}
.tab .id{color:#5E5A57}
.tab.on .id{color:#04AED1}
.tab-t{font-size:16px;font-weight:600;line-height:1.3}
.tab-d{font-size:13px;line-height:18px;color:#5E5A57;display:flex;align-items:center;gap:10px}
.tab.on .tab-d{color:#C9C5BF}
.tab-arr{opacity:0;transform:translateX(-4px);transition:all .15s}
.tab.on .tab-arr{opacity:1;transform:none;color:#04AED1}
.panel{grid-column:5 / span 8;border:1px solid #E4E1DC;padding:40px 44px;display:grid;grid-template-columns:minmax(0,1fr) 184px;column-gap:40px}
.p-main{display:flex;flex-direction:column;gap:18px}
.p-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.p-list li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4;padding:10px 0;border-bottom:1px solid #EEECE8}
.p-list li::before{content:"";width:5px;height:5px;background:#0A0B0D;flex-shrink:0}
.p-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:8px}
.locator{display:flex;flex-direction:column;gap:24px;border-left:1px solid #EEECE8;padding-left:28px}
.chip{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid #D9D6D0;border-radius:2px;font-size:14px;font-weight:500;line-height:1.3;color:#0A0B0D;cursor:pointer}
.chip:hover{border-color:#0A0B0D;background:#F7F6F3}
.chip:focus-visible{outline:2px solid #00718A;outline-offset:2px}
.chip .id{color:#00718A}
.ml-orbit{fill:none;stroke:#C9C5BF;stroke-width:1.2;stroke-dasharray:2 4}
.ml-orbit.on{stroke:#04AED1;stroke-width:4;stroke-dasharray:none}
.ml-arc{fill:none;stroke:#E4E1DC;stroke-width:12}
.ml-arc.on{stroke:#04AED1}
.ml-slab{fill:#FFFFFF;stroke:#9B9690;stroke-width:1}
.ml-slab.on{fill:#04AED1;stroke:#0A0B0D;stroke-width:2}
.acc-list{display:none;border-bottom:1px solid #E4E1DC}
.acc{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(0,1fr) 20px;align-items:center;column-gap:10px;width:100%;min-height:64px;padding:10px 0;cursor:pointer;color:#0A0B0D;border-top:1px solid #E4E1DC}
.acc:focus-visible{outline:2px solid #00718A;outline-offset:-2px}
.acc .id{color:#5E5A57}.acc.on .id{color:#00718A}
.acc-pm{transition:transform .2s}.acc.on .acc-pm{transform:rotate(45deg)}
.acc-body{display:flex;flex-direction:column;gap:16px;padding:2px 0 24px 38px}

/* connected system */
.sys{padding:var(--sp) var(--m);background:#101113;color:#F4F2EE}
.sys-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:32px;align-items:start}
.sys-art{grid-column:1 / span 7;display:flex;justify-content:center}
.sys-side{grid-column:8 / span 5;display:flex;flex-direction:column;gap:28px}
.ce-full{width:100%;max-width:680px;height:auto;display:block}
.ce-compact{display:none;width:100%;max-width:480px;height:auto}
.exp{order:1;border:1px solid #2A2B2E;background:#16171A;padding:28px;display:flex;flex-direction:column;gap:14px;min-height:300px}
.exp .id{color:#04AED1}
.dep{all:unset;box-sizing:border-box;display:grid;grid-template-columns:20px 28px minmax(0,1fr);align-items:start;column-gap:8px;min-height:44px;padding:10px 0;border-top:1px solid #2A2B2E;cursor:pointer;color:#E8E6E2;font-size:14px;line-height:1.45}
.dep:hover{color:#FFFFFF}.dep:hover .id{text-decoration:underline}
.dep:focus-visible{outline:2px solid #04AED1;outline-offset:2px}
.dep .id{color:#04AED1;padding-top:2px}
.sel{order:2;display:flex;flex-direction:column;gap:12px}
.sel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.leg{all:unset;box-sizing:border-box;display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;align-items:start;min-height:56px;padding:12px;border:1px solid #2A2B2E;cursor:pointer;color:#F4F2EE;font-size:14px;font-weight:600;line-height:1.3;transition:border-color .15s,background .15s}
.leg:hover{border-color:#6B6661}
.leg:focus-visible{outline:2px solid #04AED1;outline-offset:2px}
.leg .mk{width:14px;height:14px;margin-top:1px;border:1px solid #6B6661;display:flex;align-items:center;justify-content:center}
.leg.on{border-color:#04AED1;background:#0C2A33;box-shadow:inset 0 0 0 1px #04AED1}
.leg.on .mk{background:#04AED1;border-color:#04AED1;color:#0A0B0D}
.leg .id{display:block;color:#A6A29D;font-weight:400;padding-bottom:2px}
.reset{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid #3A3B3F;border-radius:2px;font-size:14px;font-weight:600;color:#E8E6E2;cursor:pointer;align-self:flex-start}
.reset:hover{border-color:#04AED1;color:#04AED1}
.reset:focus-visible{outline:2px solid #04AED1;outline-offset:2px}
.reset[aria-disabled="true"]{opacity:.5;cursor:default}
.ce-none{fill:none;stroke:none}
.ce-orbit{fill:none;stroke:#3A3B3F;stroke-width:1.2;transition:stroke .3s,opacity .3s}
.ce-orbit.on{stroke:#04AED1;stroke-width:4}
.ce-orbit.dim{opacity:.4;stroke-dasharray:6 8}
.ce-ticks{fill:none;stroke:#4A4B50;stroke-width:10;stroke-dasharray:1 49.96}
.ce-rl{font:500 13.5px 'JetBrains Mono',monospace;letter-spacing:.1em;fill:#A6A29D;text-anchor:middle}
.ce-rl.on{fill:#04AED1}
.ce-run{fill:#04AED1}
.ce-spin{transform-origin:380px 350px;animation:cespin 30s linear infinite}
@keyframes cespin{to{transform:rotate(360deg)}}
.ce-obs{fill:#101113;stroke:#A6A29D;stroke-width:1.2}
.ce-band{fill:none;stroke:#26282C;stroke-width:28;transition:stroke .3s,opacity .3s}
.ce-band.on{stroke:#04AED1}
.ce-band.dim{opacity:.35;stroke-dasharray:10 8}
.ce-bl{font:500 13.5px 'JetBrains Mono',monospace;letter-spacing:.1em;fill:#E8E6E2;text-anchor:middle}
.ce-bl.on{fill:#0A0B0D}
.ce-bl.dim{opacity:.5}
.ce-inner{fill:none;stroke:#2C2D31;stroke-width:1;stroke-dasharray:2 4}
.ce-slab{fill:#17181B;stroke:#4A4B50;stroke-width:1;transition:all .3s}
.ce-slab.on{fill:#0C3440;stroke:#04AED1;stroke-width:3}
.ce-slab.dim{opacity:.4;stroke-dasharray:5 5}
.ce-sl{font:500 15.5px 'Instrument Sans',sans-serif;fill:#F4F2EE}
.ce-sc{font:500 13px 'JetBrains Mono',monospace;fill:#04AED1;text-anchor:end}
.ce-conn{stroke:#4A4B50;stroke-width:1}
.ce-flow{stroke:#04AED1;stroke-width:2;stroke-dasharray:6 10;animation:ceflow 1.6s linear infinite}
@keyframes ceflow{to{stroke-dashoffset:-32}}
.ce-core{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.12em;fill:#A6A29D;text-anchor:middle}
.cc-band{fill:none;stroke:#26282C;stroke-width:40;transition:stroke .3s,opacity .3s}
.cc-band.on{stroke:#04AED1}.cc-band.dim{opacity:.35;stroke-dasharray:14 10}
.cc-code{font:600 26px 'JetBrains Mono',monospace;fill:#E8E6E2;text-anchor:middle}
.cc-code.on{fill:#0A0B0D}.cc-code.dim{opacity:.5}.cc-code.op-on{fill:#04AED1}
.cc-sl{font:500 26px 'Instrument Sans',sans-serif;fill:#F4F2EE}

/* security + AI */
.secu{padding:var(--sp) var(--m);background:#0A0B0D;color:#F4F2EE}
.s-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:40px}
.s-left{grid-column:1 / span 5;display:flex;flex-direction:column;gap:22px}
.s-right{grid-column:7 / span 6;display:flex;flex-direction:column;gap:14px}
.pga{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-bottom:1px solid #2A2B2E}
.pga li{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid #2A2B2E;font-size:15px;line-height:1.5;color:#E8E6E2}
.pga b{color:#04AED1;font-weight:600}
.matrix{width:100%;border-collapse:collapse;background:#121315;border:1px solid #2A2B2E}
.matrix th,.matrix td{height:52px;padding:0 20px;border-bottom:1px solid #1F2023;text-align:center;font-size:15px}
.matrix thead th{font-size:13px;font-weight:600;color:#E8E6E2;border-bottom:1px solid #2A2B2E}
.matrix th[scope="row"]{text-align:left;font-weight:500}
.matrix thead th:first-child{text-align:left;color:#A6A29D}
.yes{display:inline-block;width:14px;height:14px;background:#04AED1;vertical-align:middle}
.no{display:inline-block;width:14px;height:1px;background:#6B6661;vertical-align:middle}
.mx-key{display:flex;gap:24px;font-size:13px;line-height:18px;color:#A6A29D}
.mx-key span{display:flex;align-items:center;gap:8px}
.cov{display:none;margin:0;padding:0;list-style:none;flex-direction:column;border-bottom:1px solid #2A2B2E}
.cov li{padding:14px 0;border-top:1px solid #2A2B2E;display:flex;flex-direction:column;gap:4px}
.cov b{font-size:15px;color:#04AED1}.cov span{font-size:15px;line-height:1.5;color:#E8E6E2}
.ai{margin-top:56px;padding-top:44px;border-top:1px solid #2A2B2E;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:32px}
.ai-h{grid-column:1 / span 4;display:flex;flex-direction:column;gap:16px}
.ai-cols{grid-column:6 / span 7;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px var(--gut)}
.ai-cols li{display:flex;flex-direction:column;gap:8px;border-top:2px solid #FFFFFF;padding-top:16px}
.ai-cols .id{color:#04AED1}

/* why */
.why{padding:var(--sp) var(--m);background:#FFFFFF}
.why-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:16px;align-items:end;margin-bottom:48px}
.why-head .sh-l{grid-column:1 / span 8;display:flex;flex-direction:column;gap:18px}
.why-head .sh-r{grid-column:9 / span 4}
.q-row{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px var(--gut)}
.q-row li{border-top:2px solid #0A0B0D;padding-top:18px;display:flex;flex-direction:column;gap:10px}
.q-t{font-size:19px;line-height:1.25}

/* engagement */
.eng{padding:var(--sp) var(--m);background:#F7F6F3}
.track{display:block;width:100%;height:16px}
.stages{margin:28px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:24px}
.stages li{display:flex;flex-direction:column;gap:10px;padding-right:20px;position:relative}
.stages li::before{content:"";position:absolute;left:0;top:-44px;width:16px;height:16px;background:#FFFFFF;border:1.5px solid #0A0B0D;box-sizing:border-box}
.stages li:first-child::before{background:#0A0B0D}.stages li:last-child::before{background:#04AED1}
.st-mk{display:none}
.st-n{font-size:14px;font-weight:600;color:#00718A}
.loop-note{display:flex;align-items:center;gap:10px;font-size:13px;line-height:18px;color:#5E5A57;border-top:1px dashed #9B9690;padding-top:14px;margin:32px 0 0}

/* contact */
.ct{padding:var(--sp) var(--m);background:#0A0B0D;color:#F4F2EE}
.ct-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:40px}
.ct-l{grid-column:1 / span 5;display:flex;flex-direction:column;gap:22px}
.ct-r{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{background:#131417;border:1px solid #2A2B2E;padding:24px;display:flex;flex-direction:column;gap:16px}
.card-n{font-size:18px;font-weight:600;color:#FFFFFF}
.route{display:flex;align-items:center;gap:12px;min-height:44px;color:#E8E6E2;text-decoration:none;font-size:15px;border-top:1px solid #2A2B2E;padding-top:12px}
.route:hover{color:#04AED1}
.route .ic{color:#04AED1}
.office{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}

/* footer */
.ft{padding:56px var(--m) 0;background:#0A0B0D;color:#C9C5BF;border-top:1px solid #1F2023}
.ft-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:36px;padding-bottom:48px}
.ft-brand{grid-column:1 / span 4;display:flex;flex-direction:column;gap:18px}
.ft-caps{grid-column:6 / span 4}
.ft-co{grid-column:10 / span 3}
.ft-ct{grid-column:11 / span 2}
.ft-col{display:flex;flex-direction:column;gap:6px}
.ft-h{font-size:14px;font-weight:600;color:#FFFFFF;margin:0 0 6px}
.ft-l{color:#C9C5BF;text-decoration:none;font-size:14px;line-height:20px;min-height:32px;display:flex;align-items:center}
.ft-l:hover{color:#04AED1}
.ft-bot{min-height:64px;padding:16px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;border-top:1px solid #1F2023;font-size:13px;line-height:20px;color:#A6A29D}
.ft-credit{color:#C9C5BF;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#6B6661}
.ft-credit:hover{color:#04AED1;text-decoration-color:#04AED1}

/* reduced motion */
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}.h-flow,.ce-flow{stroke-dasharray:none}.h-pulse{display:none}}

/* ---------- 1024 ---------- */
@media (max-width: 1200px){
:root{--m:48px;--gut:20px;--sp:72px}
.h1{font-size:48px}.h2{font-size:36px}.h3{font-size:26px}.lead{font-size:18px}.h2x{font-size:40px}.h3x{font-size:28px}
.hdr-nav{gap:28px}
.hero-copy{grid-column:1 / span 7}
.hero-art{grid-column:8 / span 5;align-items:center}
.hero-full{display:none}.hero-compact{display:block}.hero-legend{display:grid}
.hero-grid{min-height:520px}
.chal-h{grid-column:1 / span 5}.chal-b{grid-column:7 / span 6}
.sec-head .sh-l{grid-column:1 / span 8}.sec-head .sh-r{grid-column:9 / span 4}
.tabs{grid-column:1 / span 5}.panel{grid-column:6 / span 7;grid-template-columns:1fr;padding:32px}
.locator{display:none}
.tab-d{display:none}
.sys-art{grid-column:1 / span 6}.sys-side{grid-column:7 / span 6}
.ce-full{display:none}.ce-compact{display:block}
.s-left{grid-column:1 / span 5}.s-right{grid-column:6 / span 7}
.ai-h{grid-column:1 / span 12}.ai-cols{grid-column:1 / span 12}
.why-head .sh-l{grid-column:1 / span 12}.why-head .sh-r{grid-column:1 / span 8}
.q-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.ct-l{grid-column:1 / span 5}.ct-r{grid-column:6 / span 7}
.ft-brand{grid-column:1 / span 12}.ft-caps{grid-column:1 / span 5}.ft-co{grid-column:6 / span 3}.ft-ct{grid-column:9 / span 4}
}
/* ---------- 768 ---------- */
@media (max-width: 900px){
:root{--m:32px;--gut:16px;--sp:64px}
.h1{font-size:44px}.h2{font-size:32px}.h3{font-size:24px}.h2x{font-size:38px}
.hdr{height:72px}.hdr-nav{display:none}.menu-btn{display:flex}
.gridlines{display:none}
.hero-grid{grid-template-columns:1fr;row-gap:32px;min-height:0;padding:56px 0 24px}
.hero-copy,.hero-art{grid-column:1 / -1}
.hero-art{align-items:center}
.hero-full{display:block;width:100%;max-width:560px;height:auto}
.hero-compact,.hero-legend{display:none}
.disc-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
.chal{padding:64px var(--m)}
.pts{grid-template-columns:repeat(2,minmax(0,1fr))}
.chal-h,.chal-b{grid-column:1 / -1}
.sec-head{margin-bottom:32px}.sec-head .sh-l,.sec-head .sh-r{grid-column:1 / -1}
.nav-grid{display:flex;flex-direction:column;gap:20px}
.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-bottom:none}
.tab{border:1px solid #E4E1DC;min-height:60px}
.tab.on{border-color:#0A0B0D}
.panel{padding:28px}
.sys-art,.sys-side{grid-column:1 / -1}
.ce-compact{max-width:380px}
.exp{min-height:0}
.s-left,.s-right{grid-column:1 / -1}
.ai{margin-top:48px;padding-top:40px}
.matrix th,.matrix td{height:44px}
.q-row{grid-template-columns:repeat(3,minmax(0,1fr))}

.ct-l,.ct-r{grid-column:1 / -1}
.ft-caps{grid-column:1 / span 5}.ft-co{grid-column:6 / span 3}.ft-ct{grid-column:9 / span 4}
}
/* ---------- 390 ---------- */
@media (max-width: 600px){
:root{--m:20px;--gut:12px;--sp:48px}
.h1{font-size:36px;line-height:1.08}.h2{font-size:28px;line-height:1.14}.h3{font-size:22px}.lead{font-size:17px}.h2x{font-size:32px;line-height:1.08}.h3x{font-size:24px}
.hdr{height:64px}.hdr .btn-p{display:none}
.brand-t{font-size:17px}
.hero-grid{padding:36px 0 16px;row-gap:28px}
.hero-ctas{flex-direction:column}
.hero-ctas a{height:52px;width:100%}
.hero-full{display:none}.hero-compact{display:block;max-width:300px}.hero-legend{display:none}
.disc{padding:16px 8px 0 0}.disc-t{font-size:18px}.disc .small{font-size:14px}
.disc-a{display:none}
.chal{padding:48px var(--m)}
.chal .h2{font-size:28px}
.chal-p{display:none}
.pts{grid-template-columns:1fr;gap:0;margin-top:0}
.pts span{display:none}
.pts li{padding:12px 0}
.sh-r .body{display:none}
.nav-grid{display:none}
.acc-list{display:block}
.p-list{grid-template-columns:1fr}
.p-list li{padding:8px 0}
.sys-intro{display:none}
.ce-compact{max-width:300px}
.sel{order:1}.exp{order:2;padding:20px}
.s-intro{display:none}
.matrix,.mx-key{display:none}
.cov{display:flex}
.pga li{grid-template-columns:72px minmax(0,1fr)}
.ai-h .body{display:none}
.ai-cols{grid-template-columns:1fr;gap:14px}
.ai-cols .small{display:none}
.ai-cols li{flex-direction:row;align-items:baseline;gap:12px;padding-top:12px;border-top-width:1px}
.why-head .sh-r{display:none}
.why-head{margin-bottom:28px}
.q-row{grid-template-columns:1fr;gap:20px}
.q-row li{padding-top:14px}
.q-d{display:none}
.q-row li{padding-top:12px;border-top-width:1px}
.track{display:none}
.stages{margin:0;grid-template-columns:1fr;row-gap:0}
.stages li::before{display:none}
.stages li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:16px;padding:0 0 16px}
.st-mk{display:flex;flex-direction:column;align-items:center;grid-row:span 3}
.st-mk i{width:14px;height:14px;border:1.5px solid #0A0B0D;background:#FFFFFF;margin-top:4px}
.st-mk i.first{background:#0A0B0D}.st-mk i.last{background:#04AED1}
.st-mk s{width:1px;flex-grow:1;background:#0A0B0D;margin-top:6px}
.loop-note{margin-top:8px}
.eng-intro{display:none}
.ct-r{grid-template-columns:1fr}
.ct-l .body{display:none}
.office{grid-template-columns:1fr}
.ft{padding-top:48px}
.ft-caps{display:none}.ft-co,.ft-ct{grid-column:1 / -1}
.ft-l{min-height:44px}
.ft-grid{row-gap:28px;padding-bottom:32px}
}

/* ---------- production additions: skip link, menus ---------- */
.skip{position:absolute;left:var(--m);top:-200px;z-index:200;background:#FFFFFF;padding:10px 16px}
.skip:focus{top:16px}
button.nav-l{background:none;border:0;border-bottom:2px solid transparent;padding:0;font-family:inherit;cursor:pointer}
.nav-l .ic{transition:transform .15s}
.nav-l[aria-expanded="true"]{border-bottom-color:#0A0B0D}
.nav-l[aria-expanded="true"] .ic{transform:rotate(180deg)}

/* mega-menu (desktop and tablet) */
.mm-scrim{position:fixed;inset:0;z-index:1;background:rgba(10,11,13,.55)}
.mm{position:absolute;left:0;right:0;top:100%;background:#FFFFFF;border-bottom:1px solid #E4E1DC;padding:28px var(--m) 40px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.mm-main{grid-column:1 / span 9;display:flex;flex-direction:column;gap:12px}
.mm-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mm-top > span{font-size:14px;font-weight:600;color:#3E3A39}
.mm .tl{font-size:14px}
.mm-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px}
.mm-list li{display:flex}
.mm-i{flex-grow:1;display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px;text-decoration:none;color:#0A0B0D;border:1px solid transparent;border-top-color:#E4E1DC;transition:background .15s,border-color .15s}
.mm-i:hover{background:#F7F6F3;border-color:#E4E1DC;color:#0A0B0D}
.mm-i:focus-visible{outline:2px solid #00718A;outline-offset:-2px;background:#F7F6F3}
.mm-i:hover .mm-a,.mm-i:focus-visible .mm-a{transform:translateX(4px);color:#00718A}
.mm-a{transition:transform .15s}
.mm-meta{display:flex;justify-content:space-between;align-items:center}
.mm-meta > span{display:flex;gap:10px;align-items:center;font-size:13px;color:#5E5A57}
.mm-meta .id{color:#00718A}
.mm-t{font-size:17px;font-weight:600;line-height:1.3}
.mm-d{font-size:14px;line-height:1.5;color:#5E5A57}
.mm-aside{grid-column:10 / span 3;background:#0A0B0D;color:#F4F2EE;padding:32px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.mm-aside .btn-p{justify-content:space-between;height:44px}
@media (max-width: 1200px){
.mm-main{grid-column:1 / span 8}
.mm-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.mm-aside{grid-column:9 / span 4}
}

/* mobile navigation dialog */
.mnav{position:fixed;inset:0;z-index:100;background:#FFFFFF;display:flex;flex-direction:column;overflow-y:auto}
.mnav-bar{height:64px;padding:0 var(--m);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #E4E1DC;flex-shrink:0}
.mnav .brand-t{font-size:17px}
.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #0A0B0D;border-radius:2px;color:#0A0B0D;background:#FFFFFF;cursor:pointer;padding:0}
.mnav-nav{padding:8px var(--m) 0;flex-grow:1;display:flex;flex-direction:column}
.top{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;border-bottom:1px solid #E4E1DC;font-size:20px;font-weight:600;color:#0A0B0D;cursor:pointer;text-decoration:none}
.top:hover{color:#0A0B0D}
.top:focus-visible{outline:2px solid #00718A;outline-offset:-2px}
.chev{transition:transform .2s}
.top[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mnav-caps{display:flex;flex-direction:column;padding:4px 0 12px;border-bottom:1px solid #E4E1DC}
.sub{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:8px;min-height:48px;text-decoration:none;color:#0A0B0D;font-size:15px;font-weight:500}
.sub:hover{color:#00718A}
.sub .id{color:#00718A}
.sub small{font-size:13px;color:#5E5A57;font-weight:400}
.mnav-foot{padding:16px var(--m) 20px;display:flex;flex-direction:column;gap:4px;border-top:1px solid #E4E1DC;flex-shrink:0}
.mnav-foot .btn-p{height:52px;font-size:16px}
.mnav-call{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:15px;font-weight:500;color:#0A0B0D;text-decoration:none}
body.nav-open{overflow:hidden}
@media (min-width: 901px){.mnav{display:none !important}}
@media (max-width: 900px){.mm,.mm-scrim{display:none !important}}