:root{--void:#0b0e12;--carbon:#181a1d;--graphite:#1f2124;--slate:#303235;--fog:#5d5e61;--steel:#818284;--ash:#a3a4a5;--silver:#bababb;--bone:#dedede;--green:#00d892;--teal:#002923;--emerald:#005441;--violet:#c58aff;--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:"Inter",Helvetica,Arial,sans-serif;--shell:min(1200px,calc(100vw - 64px))}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--void)}body{margin:0;overflow-x:clip;background:var(--void);color:var(--bone);font-family:var(--sans);font-size:14px;font-weight:400;line-height:1.38;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit}img{display:block;max-width:100%}.shell{width:var(--shell);margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:12px;left:12px;z-index:100;padding:10px 14px;background:var(--green);color:var(--void);font-family:var(--mono);transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}:focus-visible{outline:1px solid var(--green);outline-offset:4px}
.site-header{position:relative;z-index:20;display:flex;min-height:80px;align-items:center;gap:32px;border-bottom:1px solid var(--slate)}.brand{display:inline-flex;width:fit-content;align-items:center;justify-self:start}.brand img{width:70px;height:auto}.desktop-nav{display:flex;margin-left:auto;align-items:center;gap:32px;color:var(--silver);font-family:var(--mono);font-size:10px;letter-spacing:.064em;text-transform:uppercase}.desktop-nav a{padding:8px 0;transition:color 160ms linear}.desktop-nav a:hover{color:var(--green)}.header-actions{display:flex;flex:none;justify-content:flex-end;gap:8px}.button{display:inline-flex;min-height:40px;width:fit-content;align-items:center;justify-content:space-between;gap:22px;padding:10px 14px;border:1px solid var(--slate);border-radius:1px;font-family:var(--mono);font-size:10px;line-height:1.6;letter-spacing:.064em;text-transform:uppercase;transition:background-color 160ms linear,border-color 160ms linear,color 160ms linear}.button-primary{border-color:var(--emerald);background:var(--teal);color:var(--green);box-shadow:inset 0 0 0 1px rgb(0 216 146 / 15%)}.button-primary:hover{border-color:var(--green);background:var(--emerald)}.button-outline{background:transparent;color:var(--silver)}.button-outline:hover{border-color:var(--ash);color:var(--bone)}.menu-button,.mobile-menu{display:none}.nav-group{position:relative}.nav-trigger{display:inline-flex;align-items:center;gap:6px}.nav-trigger svg{width:11px;height:11px;transition:transform 200ms linear}.nav-group:hover .nav-trigger svg,.nav-group:focus-within .nav-trigger svg{transform:rotate(180deg)}.nav-panel{position:absolute;z-index:50;top:100%;left:50%;padding-top:14px;visibility:hidden;opacity:0;transform:translateX(-50%);transition:opacity 160ms linear,visibility 160ms linear}.nav-group:hover .nav-panel,.nav-group:focus-within .nav-panel{visibility:visible;opacity:1}.nav-panel-inner{display:flex;min-width:196px;flex-direction:column;padding:5px;border:1px solid var(--slate);border-radius:1px;background:var(--carbon)}.nav-panel-inner a{padding:9px 11px;border-radius:1px;white-space:nowrap;transition:background-color 160ms linear,color 160ms linear}.nav-panel-inner a:hover{background:var(--graphite);color:var(--green)}
.hero{position:relative;display:grid;min-height:min(78vh,700px);align-content:center;overflow:hidden;border-right:1px solid var(--slate);border-left:1px solid var(--slate)}.hero-copy{position:relative;z-index:1;width:100%;padding:0 36px}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 22px;color:var(--steel);font-family:var(--mono);font-size:10px;line-height:1.6;letter-spacing:.064em;text-transform:uppercase}.eyebrow>span{color:var(--green)}h1,h2,h3{font-weight:400}.hero h1{max-width:19ch;margin:0;font-size:clamp(38px,5.4vw,78px);line-height:1.05;letter-spacing:-.015em}.hero-copy>p:not(.eyebrow){max-width:600px;margin:25px 0 0;color:var(--ash);font-size:14px}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:56px}.text-link{color:var(--silver);font-family:var(--mono);font-size:10px;letter-spacing:.064em;text-transform:uppercase}.text-link:hover{color:var(--green)}
.section{padding-block:128px;border-right:1px solid var(--slate);border-left:1px solid var(--slate)}.section-intro{padding:0 36px 64px}.section-intro h2{max-width:800px;margin:0;font-size:clamp(36px,4.2vw,52px);line-height:1.12;letter-spacing:-.01em}.service-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--slate);border-bottom:1px solid var(--slate)}.service-card{min-width:0;background:var(--carbon);transition:background 180ms linear}.service-card:hover{background:var(--graphite)}.service-card+.service-card{border-left:1px solid var(--slate)}.card-topline,.console-head,.console-foot{display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--slate);color:var(--steel);font-family:var(--mono);font-size:9px;letter-spacing:.064em}.card-diagram{position:relative;height:330px;overflow:hidden;border-bottom:1px solid var(--slate);background-image:radial-gradient(circle,rgb(129 130 132 / 25%) 1px,transparent 1px);background-size:16px 16px}.card-copy{min-height:240px;padding:32px 36px 42px}.card-copy h3{margin:0 0 20px;font-size:25px;line-height:1.28;letter-spacing:.02em}.card-copy p{max-width:460px;margin:0;color:var(--ash)}
.verticals{border-top:1px solid transparent;background:var(--void)}.verticals-layout{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--slate);border-bottom:1px solid var(--slate)}.verticals-copy{padding:48px 36px;border-right:1px solid var(--slate);background:var(--carbon)}.verticals-copy p{max-width:500px;margin:0 0 26px;color:var(--ash)}.verticals-copy p:last-child{margin-bottom:0}.verticals-copy .lead{color:var(--bone);font-size:20px;line-height:1.3;letter-spacing:.014em}.vertical-list{margin:0;padding:0;list-style:none}.vertical-list li{display:grid;min-height:74px;grid-template-columns:46px 1fr auto;align-items:center;padding:0 24px;border-bottom:1px solid var(--slate)}.vertical-list li:last-child{border-bottom:0}.vertical-list span{color:var(--steel);font-family:var(--mono);font-size:9px}.vertical-list b{font-size:14px;font-weight:400}
.security{background:var(--carbon)}.security-console{margin:0 36px;border:1px solid var(--slate);background:var(--void)}.console-head{color:var(--silver)}.assurance-grid{display:grid;grid-template-columns:repeat(3,1fr)}.assurance-grid article{padding:22px 20px 24px;border-right:1px solid var(--slate);border-bottom:1px solid var(--slate)}.assurance-grid article:nth-child(3n){border-right:0}.assurance-grid article:nth-child(n+4){border-bottom:0}.assurance-grid h3{margin:0 0 10px;font-size:15px;line-height:1.3;letter-spacing:.01em}.assurance-grid p{margin:0;color:var(--ash);font-size:12.5px;line-height:1.52}.console-foot{border-top:1px solid var(--slate);border-bottom:0}.console-foot span:nth-child(-n+2){color:var(--green)}
.cta-section{display:grid;min-height:430px;place-items:center;align-content:center;border:1px solid var(--slate);border-bottom:0;text-align:center;background-image:radial-gradient(circle,rgb(129 130 132 / 22%) 1px,transparent 1px);background-size:20px 20px}.cta-section .eyebrow{margin-bottom:22px}.cta-section h2{margin:0 0 36px;font-size:clamp(30px,5vw,54px);line-height:1.1}.site-footer{position:relative;overflow:hidden;border-top:1px solid var(--slate);background:var(--carbon)}.footer-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr repeat(4,1fr);gap:30px;padding-block:72px 24px}.footer-brand{align-self:start;justify-self:start}.footer-brand p{margin:18px 0 0;color:var(--steel)}.footer-column{display:flex;flex-direction:column;gap:10px}.footer-column p{margin:0 0 8px;color:var(--silver);font-family:var(--mono);font-size:9px;letter-spacing:.064em;text-transform:uppercase}.footer-column a{width:fit-content;color:var(--ash);font-size:12px}.footer-column a:hover{color:var(--green)}.footer-meta{display:flex;grid-column:1/-1;justify-content:space-between;margin-top:46px;padding-top:20px;border-top:1px solid var(--slate);color:var(--steel);font-family:var(--mono);font-size:9px;letter-spacing:.03em}
.reveal{opacity:0;transform:translateY(14px);transition:opacity 700ms cubic-bezier(.2,.7,.2,1),transform 700ms cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:translateY(0)}

@keyframes wipe-x{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes row-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes fade-in{to{opacity:1}}
@keyframes fade-out{to{opacity:0}}
@keyframes draw-path{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- Verticals - no entrance choreography. The motion lives on hover: the
   row lifts onto carbon, a green edge grows from the centre, and the numeral
   and icon take the accent. Nothing moves until the visitor moves. ---------- */
.vertical-list{position:relative}
.vertical-list li{position:relative;transition:background-color 200ms linear}
.vertical-list li::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--green);transform:scaleY(0);transition:transform 280ms cubic-bezier(.2,.7,.2,1)}
.vertical-list li:hover{background:var(--carbon)}
.vertical-list li:hover::before{transform:scaleY(1)}
.vertical-list span{transition:color 200ms linear}
.vertical-list li:hover span{color:var(--green)}
.vert-icon{justify-self:end;width:22px;height:22px;fill:none;stroke:var(--steel);stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter;transition:stroke 200ms linear}
.vertical-list li:hover .vert-icon{stroke:var(--green)}

/* --- Security console - the outline traces itself, then the cards land ---- */
.security-console{position:relative}
.console-trace{position:absolute;z-index:3;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none}
.console-trace rect{fill:none;stroke:var(--green);stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke}
.security-console.is-visible .console-trace rect{animation:draw-path 1800ms cubic-bezier(.35,0,.25,1) 100ms both,fade-out 700ms linear 1900ms both}
.assurance-grid article{opacity:0}
.security-console.is-visible .assurance-grid article{animation:rise 560ms cubic-bezier(.2,.7,.2,1) both}
.security-console.is-visible .assurance-grid article:nth-child(1){animation-delay:460ms}
.security-console.is-visible .assurance-grid article:nth-child(2){animation-delay:560ms}
.security-console.is-visible .assurance-grid article:nth-child(3){animation-delay:660ms}
.security-console.is-visible .assurance-grid article:nth-child(4){animation-delay:760ms}
.security-console.is-visible .assurance-grid article:nth-child(5){animation-delay:860ms}
.security-console.is-visible .assurance-grid article:nth-child(6){animation-delay:960ms}
.security-console .console-foot span{opacity:0}
.security-console.is-visible .console-foot span{animation:fade-in 420ms linear both}
.security-console.is-visible .console-foot span:nth-child(1){animation-delay:1240ms}
.security-console.is-visible .console-foot span:nth-child(2){animation-delay:1380ms}
.security-console.is-visible .console-foot span:nth-child(3){animation-delay:1520ms}

/* Inner pages - company, partners, legal. Same Oxide chrome as the home page. */
.page-head{padding:88px 36px 56px;border-right:1px solid var(--slate);border-left:1px solid var(--slate)}.page-head+.page-section{padding-top:48px}.page-head h1{max-width:820px;margin:0;font-size:clamp(40px,5.4vw,64px);line-height:1.06;letter-spacing:-.012em}.page-head p{max-width:640px;margin:24px 0 0;color:var(--ash);font-size:14px;line-height:1.6}.page-section{padding-block:96px;border-right:1px solid var(--slate);border-left:1px solid var(--slate)}.page-section+.page-section{border-top:1px solid var(--slate)}.page-section>h2{max-width:760px;margin:0 36px 48px;font-size:clamp(30px,3.4vw,44px);line-height:1.14;letter-spacing:-.01em}.prose{max-width:760px;margin:0 36px}.prose p{margin:0 0 20px;color:var(--ash);font-size:14px;line-height:1.72}.prose p:last-child{margin-bottom:0}.prose strong{color:var(--bone);font-weight:400}.legal{display:grid;grid-template-columns:236px 1fr;gap:56px;padding:0 36px 96px;border-right:1px solid var(--slate);border-left:1px solid var(--slate)}.legal-toc{position:sticky;top:28px;align-self:start;max-height:calc(100vh - 56px);overflow-y:auto}.legal-toc p{margin:0 0 14px;color:var(--steel);font-family:var(--mono);font-size:9px;letter-spacing:.064em;text-transform:uppercase}.legal-toc a{display:block;padding:5px 0;color:var(--steel);font-size:12px;line-height:1.45;transition:color 160ms linear}.legal-toc a:hover{color:var(--green)}.legal-doc{max-width:760px;min-width:0}.legal-doc section{padding-bottom:40px}.legal-doc section+section{padding-top:40px;border-top:1px solid var(--slate)}.legal-doc h2{display:flex;gap:14px;margin:0 0 18px;font-size:21px;line-height:1.3;letter-spacing:.01em}.legal-doc h2 span{flex:none;color:var(--green);font-family:var(--mono);font-size:11px;line-height:1.9;letter-spacing:.064em}.legal-doc p{margin:0 0 16px;color:var(--ash);font-size:14px;line-height:1.72}.legal-doc p:last-child{margin-bottom:0}.legal-doc ul{margin:0 0 16px;padding-left:18px;color:var(--ash);font-size:14px;line-height:1.72}.legal-doc li{margin-bottom:8px}.legal-doc a{color:var(--green)}.legal-doc a:hover{text-decoration:underline}.legal-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 auto 56px;padding:14px 36px;border:1px solid var(--slate);border-width:1px;color:var(--steel);font-family:var(--mono);font-size:9px;letter-spacing:.064em;text-transform:uppercase}
@media(max-width:900px){.page-head{padding:56px 20px 40px}.page-section{padding-block:64px}.page-section>h2{margin:0 20px 32px}.prose{margin-inline:20px}.legal-meta{padding-inline:20px}.legal{grid-template-columns:1fr;gap:32px;padding:0 20px 64px}.legal-toc{position:static;max-height:none;padding-bottom:24px;border-bottom:1px solid var(--slate)}.legal-toc a{display:inline-block;margin-right:18px}.hero-copy{padding:0 20px}:root{--shell:min(100%,calc(100vw - 32px))}.site-header{min-height:68px;gap:16px;justify-content:space-between}.desktop-nav,.header-secondary,.header-cta{display:none}.menu-button{display:flex;width:42px;height:38px;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--slate);border-radius:1px;background:transparent}.menu-button i{width:16px;height:1px;background:var(--bone);transition:transform 180ms linear}.menu-button[aria-expanded=true] i:first-of-type{transform:translateY(3.5px) rotate(45deg)}.menu-button[aria-expanded=true] i:last-of-type{transform:translateY(-3.5px) rotate(-45deg)}.mobile-menu{position:fixed;z-index:10;inset:68px 0 0;padding:38px 24px;background:var(--void)}.mobile-menu:not([hidden]){display:flex;flex-direction:column;justify-content:space-between}.mobile-menu nav{display:flex;flex-direction:column}.mobile-menu nav a{display:grid;min-height:66px;grid-template-columns:38px 1fr;align-items:center;border-bottom:1px solid var(--slate);font-size:20px}.mobile-menu nav span{color:var(--green);font-family:var(--mono);font-size:9px}.brand img{width:62px}.section{padding-block:60px}.section-intro{padding:0 20px 34px}.service-grid,.verticals-layout{grid-template-columns:1fr}.service-card+.service-card{border-top:1px solid var(--slate);border-left:0}.verticals-copy{padding:36px 20px;border-right:0;border-bottom:1px solid var(--slate)}.security-console{margin:0 20px}.assurance-grid{grid-template-columns:1fr 1fr}.assurance-grid article{border-right:1px solid var(--slate);border-bottom:1px solid var(--slate)}.assurance-grid article:nth-child(3n){border-right:1px solid var(--slate)}.assurance-grid article:nth-child(2n){border-right:0}.assurance-grid article:nth-child(n+4){border-bottom:1px solid var(--slate)}.assurance-grid article:nth-child(n+5){border-bottom:0}.console-foot{flex-wrap:wrap;gap:8px 20px;padding-block:12px}.footer-inner{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1;margin-bottom:24px}}
@media(max-width:560px){.page-head{padding:52px 14px 40px}.page-section>h2{margin:0 14px 26px}.prose{margin-inline:14px}.legal-meta{padding-inline:14px}.legal{padding:0 14px 52px}.hero-copy{padding:0 14px}.hero h1{font-size:clamp(39px,12vw,50px);line-height:1.06}:root{--shell:calc(100vw - 20px)}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.card-diagram{height:304px}.card-copy{min-height:0;padding:28px 20px 36px}.vertical-list li{grid-template-columns:30px 1fr auto;padding:0 14px}.vert-icon{width:19px;height:19px}.security-console{margin-inline:10px}.cta-section{min-height:370px;padding:40px 18px}.footer-inner{grid-template-columns:1fr 1fr;gap:30px 20px;padding-block:48px 20px;padding-inline:10px}.footer-brand{grid-column:1/-1;margin-bottom:2px}.footer-meta{align-items:flex-start;flex-direction:column;gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}.reveal{opacity:1;transform:none}}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.hero-media{position:absolute;inset:0;background:url(assets/hero-poster.webp) center/cover no-repeat;filter:saturate(.45) contrast(1.08)}.hero-media video{display:block;width:100%;height:100%;object-fit:cover}.hero-tint{position:absolute;inset:0;background:var(--teal);opacity:.55;mix-blend-mode:color}.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,var(--void) 2%,rgb(11 14 18 / 86%) 28%,rgb(11 14 18 / 40%) 62%,rgb(11 14 18 / 52%) 100%),linear-gradient(to bottom,var(--void) 0%,rgb(11 14 18 / 0%) 18%,rgb(11 14 18 / 0%) 72%,var(--void) 99%)}
/* Reduce Motion deliberately does NOT hide the hero video. The line drawn
   here is content vs interface: the video is the page's subject matter, the
   scroll reveals and diagram build sequences are interface motion, and only
   the second kind is suppressed. Everything else in the reduced-motion block
   above still applies. */


.ace-mark{color:var(--green);font-weight:400}

/* --- Service card panels - console surfaces in the stage-rail idiom -------- */
.panel{display:flex;height:100%;flex-direction:column;padding:18px}
.panel-head,.panel-foot{display:flex;justify-content:space-between;color:var(--steel);font-family:var(--mono);font-size:9px;letter-spacing:.05em}
.panel-head{padding-bottom:12px;border-bottom:1px solid var(--slate)}
.panel-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--slate)}
.eval-grid{display:grid;grid-template-columns:1fr 1fr;margin:12px 0;border:1px solid var(--slate)}
.eval-grid i{display:flex;min-height:44px;flex-direction:column;justify-content:center;gap:3px;padding:0 11px;border-right:1px solid var(--slate);border-bottom:1px solid var(--slate);font-style:normal}
.eval-grid i:nth-child(2n){border-right:0}
.eval-grid i:nth-child(n+3){border-bottom:0}
.eval-grid b{color:var(--ash);font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.05em}
.eval-grid em{color:var(--steel);font-family:var(--mono);font-size:8px;font-style:normal;letter-spacing:.05em}
.eval-rows{display:flex;flex-direction:column;gap:2px}
.eval-row{display:grid;min-height:34px;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:0 9px;border:1px solid transparent;opacity:0}
.eval-row .box{width:10px;height:10px;flex:none;border:1px solid var(--fog);border-radius:1px}
.eval-row span{overflow:hidden;color:var(--steel);font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-overflow:ellipsis;white-space:nowrap}
.eval-row em{padding:1px 4px;border-radius:1px;background:var(--teal);color:var(--green);font-family:var(--mono);font-size:8px;font-style:normal}
.eval-row b{color:var(--ash);font-family:var(--mono);font-size:8px;font-weight:400;letter-spacing:.05em}
.code-head{display:flex;min-height:29px;align-items:center;gap:8px;padding:0 11px;border-bottom:1px solid var(--slate);color:var(--ash);font-family:var(--mono);font-size:9px;letter-spacing:.05em}
.code-head i{width:12px;height:12px;flex:none;border:1px solid var(--slate);background:var(--graphite)}
.code{margin:0;padding:12px 11px;overflow:hidden;color:var(--steel);font-family:var(--mono);font-size:9px;line-height:2}
.code span{display:block;overflow:hidden;white-space:nowrap}
.code b{color:var(--green);font-weight:400}
.code u{color:var(--violet);text-decoration:none}
.code em{color:var(--steel);font-style:normal}
.dep-wave{height:40px;overflow:hidden;border-top:1px solid var(--slate);border-bottom:1px solid var(--slate)}
.dep-wave svg{width:200%;height:40px}
.dep-wave path{fill:none;stroke:var(--green);stroke-width:1.3;vector-effect:non-scaling-stroke}
.dep-row{display:flex;min-height:32px;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--slate);color:var(--ash);font-family:var(--mono);font-size:9px;letter-spacing:.05em;opacity:0}
.dep-row:last-child{border-bottom:0}
.chip{position:relative;display:inline-grid;padding:2px 6px;border:1px solid var(--slate);border-radius:1px;font-weight:400}
.chip span{grid-area:1/1;font-family:var(--mono);font-size:8px;letter-spacing:.05em}
.chip .idle{color:var(--steel)}
.chip .live{color:var(--green);opacity:0}
/* build sequence - runs once when the card scrolls in, then holds */
.service-card.is-visible .eval-row{animation:row-in 380ms cubic-bezier(.2,.7,.2,1) both}
.service-card.is-visible .eval-row:nth-child(1){animation-delay:260ms}
.service-card.is-visible .eval-row:nth-child(2){animation-delay:400ms}
.service-card.is-visible .eval-row:nth-child(3){animation-delay:540ms}
.service-card.is-visible .eval-row.is-pick{animation:row-in 380ms cubic-bezier(.2,.7,.2,1) 400ms both,select-row 420ms linear 900ms both}
.service-card.is-visible .eval-row.is-pick .box{animation:box-check 420ms linear 900ms both}
.service-card.is-visible .code span{animation:wipe-x 260ms steps(20,end) both}
.service-card.is-visible .code span:nth-child(1){animation-delay:200ms}
.service-card.is-visible .code span:nth-child(2){animation-delay:380ms}
.service-card.is-visible .code span:nth-child(3){animation-delay:560ms}
.service-card.is-visible .code span:nth-child(4){animation-delay:740ms}
.service-card.is-visible .code span:nth-child(5){animation-delay:920ms}
.service-card.is-visible .dep-wave svg{animation:trace 20s linear 1200ms infinite}
.service-card.is-visible .dep-row{animation:row-in 380ms cubic-bezier(.2,.7,.2,1) both}
.service-card.is-visible .dep-row:nth-child(4){animation-delay:1100ms}
.service-card.is-visible .dep-row:nth-child(5){animation-delay:1260ms}
.service-card.is-visible .dep-row:nth-child(6){animation-delay:1420ms}
.service-card.is-visible .dep-row:nth-child(4) .chip .live{animation:fade-in 300ms linear 1700ms both}
.service-card.is-visible .dep-row:nth-child(5) .chip .live{animation:fade-in 300ms linear 1880ms both}
.service-card.is-visible .dep-row:nth-child(6) .chip .live{animation:fade-in 300ms linear 2060ms both}
.service-card.is-visible .dep-row:nth-child(4) .chip .idle{animation:fade-out 300ms linear 1700ms both}
.service-card.is-visible .dep-row:nth-child(5) .chip .idle{animation:fade-out 300ms linear 1880ms both}
.service-card.is-visible .dep-row:nth-child(6) .chip .idle{animation:fade-out 300ms linear 2060ms both}
@keyframes select-row{to{border-color:var(--green);background:var(--teal)}}
@keyframes box-check{to{border-color:var(--green);background:var(--green)}}
@keyframes trace{to{transform:translateX(-50%)}}

/* --- Footer backdrop - a still from the hero reel, same treatment --------- */
.footer-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.footer-media{position:absolute;inset:0;background:url(assets/footer-still.jpg) center/cover no-repeat;filter:saturate(.45) contrast(1.08)}
.footer-tint{position:absolute;inset:0;background:var(--teal);opacity:.55;mix-blend-mode:color}
.footer-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,var(--void) 0%,rgb(11 14 18 / 76%) 24%,rgb(11 14 18 / 68%) 60%,rgb(11 14 18 / 80%) 100%)}
.brand-full{display:block;width:148px;max-width:100%}
.brand-full img{width:100%;height:auto}
@media(max-width:900px){.brand-full{width:132px}}
@media(max-width:560px){.brand-full{width:124px}}

/* --- Partners page - full-height still, same treatment as the hero video --- */
.partners-hero{position:relative;display:grid;min-height:calc(100vh - 80px);align-content:center;overflow:hidden;border-right:1px solid var(--slate);border-left:1px solid var(--slate)}
.partners-media{position:absolute;inset:0;background:url(assets/partners-bg.jpg) center bottom/cover no-repeat;filter:saturate(.4) contrast(1.05)}
.partners-hero .hero-scrim{background:linear-gradient(100deg,rgb(11 14 18 / 92%) 2%,rgb(11 14 18 / 72%) 30%,rgb(11 14 18 / 30%) 64%,rgb(11 14 18 / 44%) 100%),linear-gradient(to bottom,var(--void) 0%,rgb(11 14 18 / 0%) 16%,rgb(11 14 18 / 0%) 74%,var(--void) 99%)}
.partners-copy{position:relative;z-index:1;width:100%;padding:0 36px}
.partners-copy h1{max-width:17ch;margin:0;font-size:clamp(38px,5.4vw,78px);font-weight:400;line-height:1.05;letter-spacing:-.015em}
.partners-copy p{max-width:600px;margin:25px 0 0;color:var(--ash);font-size:14px}
.partners-copy .button{margin-top:44px}
@media(max-width:900px){.partners-copy{padding:0 20px}.partners-hero{min-height:calc(100vh - 68px)}}
@media(max-width:560px){.partners-copy{padding:0 14px}}

/* --- Case studies - an index of metric rows, each opening its own page ----
   Structure follows distyl.ai/case-studies: sector, anonymised client, two
   headline figures, and a link out. Everything else is ACE's own. ---------- */
.case-list{border-top:1px solid var(--slate)}
.case-row{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,1.55fr) auto;align-items:center;gap:34px;padding:40px 36px;border-bottom:1px solid var(--slate);background:transparent;transition:background-color 200ms linear}
.case-row:hover{background:var(--carbon)}
.case-row::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--green);transform:scaleY(0);transition:transform 260ms cubic-bezier(.2,.7,.2,1)}
.case-row{position:relative}
.case-row:hover::before,.case-row:focus-visible::before{transform:scaleY(1)}
.case-row-id{min-width:0}
.case-sector{display:block;color:var(--green);font-family:var(--mono);font-size:9px;letter-spacing:.064em;text-transform:uppercase}
.case-client{display:block;margin-top:14px;font-size:22px;font-weight:400;line-height:1.24;letter-spacing:.01em}
.case-region{display:block;margin-top:9px;color:var(--steel);font-family:var(--mono);font-size:9px;letter-spacing:.064em;text-transform:uppercase}
.case-row-metrics{display:grid;min-width:0;grid-template-columns:1fr 1fr;gap:30px}
.case-metric{min-width:0;padding-left:16px;border-left:1px solid var(--slate)}
.case-metric b{display:block;font-size:clamp(26px,2.6vw,34px);font-weight:400;line-height:1.1;letter-spacing:-.01em}
.case-metric span{display:block;margin-top:10px;color:var(--ash);font-size:12px;line-height:1.5}
.case-row-link{flex:none;color:var(--silver);font-family:var(--mono);font-size:10px;letter-spacing:.064em;text-transform:uppercase;white-space:nowrap;transition:color 160ms linear}
.case-row:hover .case-row-link{color:var(--green)}

/* --- Case study detail pages --------------------------------------------- */
.case-head .case-sector{margin-bottom:20px}
.case-back{display:inline-block;margin-bottom:34px;color:var(--steel);font-family:var(--mono);font-size:10px;letter-spacing:.064em;text-transform:uppercase;transition:color 160ms linear}
.case-back:hover{color:var(--green)}
.case-head h1{max-width:17ch}
.case-head-client{margin-top:26px;color:var(--silver);font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.case-band{padding:0 36px;border-right:1px solid var(--slate);border-left:1px solid var(--slate)}
.case-band-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--slate);background:var(--carbon)}
.case-band .case-metric{display:flex;flex-direction:column;padding:30px 22px;border-left:0;border-right:1px solid var(--slate)}
.case-band .case-metric:last-child{border-right:0}
.case-band .case-metric b{font-size:clamp(21px,2.1vw,28px)}
.case-band .case-metric span{margin-top:auto;padding-top:14px}
.case-body-sections{border-right:1px solid var(--slate);border-left:1px solid var(--slate)}
.case-block{padding-block:72px}
.case-block+.case-block{border-top:1px solid var(--slate)}
.case-block h2{margin:0 36px 30px;font-size:clamp(24px,2.6vw,32px);line-height:1.18;letter-spacing:-.005em}
.case-next{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:44px 36px;border:1px solid var(--slate);border-bottom:0}
.case-next .case-client{margin-top:12px;max-width:38ch;font-size:19px}

@media(max-width:900px){
.case-row{grid-template-columns:1fr;gap:26px;padding:32px 20px}
.case-row-metrics{gap:20px}
.case-band{padding-inline:20px}
.case-band-grid{grid-template-columns:1fr 1fr}
.case-band .case-metric{border-bottom:1px solid var(--slate)}
.case-band .case-metric:nth-child(2n){border-right:0}
.case-band .case-metric:nth-child(n+3){border-bottom:0}
.case-block{padding-block:52px}
.case-block h2{margin-inline:20px}
.case-next{flex-direction:column;align-items:flex-start;padding:34px 20px}
}
@media(max-width:560px){
.case-row{padding:28px 14px}
.case-row-metrics{grid-template-columns:1fr;gap:22px}
.case-band{padding-inline:14px}
.case-band-grid{grid-template-columns:1fr}
.case-band .case-metric{border-right:0}
.case-band .case-metric:nth-child(n+3){border-bottom:1px solid var(--slate)}
.case-band .case-metric:last-child{border-bottom:0}
.case-block h2{margin-inline:14px}
.case-next{padding-inline:14px}
}

/* --- item 4: above the mobile breakpoint the closing line never wraps.
   The text is ~20.6x its font-size wide, so the size is driven off the
   viewport and capped, and nowrap makes the guarantee explicit. ------------ */
@media(min-width:901px){.cta-section h2{font-size:min(54px,calc(4.6vw - 6px));white-space:nowrap}}

/* --- Green highlights: figures, numerals and edges -----------------------
   The signature is applied to the things a reader scans for. Numbers carry it
   on both the index and the detail pages so one metric never renders two
   different ways; section headings take the numbered-mono idiom the legal
   pages already use. */
.case-metric b{color:var(--green)}
.case-band-grid{border-top:2px solid var(--green)}
.case-back{color:var(--green)}
.case-back:hover{color:var(--bone)}
.case-next{position:relative}
.case-next::before{content:"";position:absolute;top:-1px;bottom:0;left:0;width:2px;background:var(--green)}

/* Numbered section headings. Shared by the case-study detail pages and the
   company page so the two read as one system. */
.case-block h2,.page-section>h2{display:flex;gap:16px}
.case-block h2 span,.page-section>h2 span{flex:none;color:var(--green);font-family:var(--mono);font-size:12px;line-height:2.2;letter-spacing:.064em}
.page-section>h2 span{line-height:2.6}

/* Company page: a green rule opens each block of prose. */
.page-section .prose{position:relative;padding-top:26px}
.page-section .prose::before{content:"";position:absolute;top:0;left:0;width:38px;height:2px;background:var(--green)}

/* --- 404 ------------------------------------------------------------------
   Same console chrome as the assurance panel, so a dead route still looks
   like part of the system rather than a server default. */
.notfound{display:grid;min-height:calc(100vh - 260px);align-content:center;padding:72px 36px;border-right:1px solid var(--slate);border-left:1px solid var(--slate)}
.notfound-panel{border:1px solid var(--slate);border-top:2px solid var(--green);background:var(--carbon)}
.notfound-body{padding:56px 40px 60px;background-image:radial-gradient(circle,rgb(129 130 132 / 20%) 1px,transparent 1px);background-size:20px 20px}
.notfound-code{display:block;color:var(--green);font-family:var(--mono);font-size:clamp(52px,8vw,92px);font-weight:400;line-height:1;letter-spacing:.02em}
.notfound h1{max-width:16ch;margin:30px 0 0;font-size:clamp(28px,3.6vw,44px);line-height:1.12;letter-spacing:-.01em}
.notfound p{max-width:52ch;margin:22px 0 0;color:var(--ash);font-size:14px;line-height:1.7}
.notfound-actions{display:flex;align-items:center;gap:25px;margin-top:44px}
@media(max-width:900px){.notfound{padding:52px 20px}.notfound-body{padding:40px 24px 44px}}
@media(max-width:560px){.notfound{padding:44px 14px}.notfound-body{padding:32px 18px 36px}.notfound-actions{align-items:flex-start;flex-direction:column;gap:18px}}

/* --- Mobile-only treatments ----------------------------------------------
   Deliberately scoped to the small breakpoint. On a phone the accent has to
   do more work: there is no hover to reveal it and no width to carry a
   secondary signal, so the icons and the case link take the green outright.
   Desktop keeps its hover-driven behaviour unchanged. */
@media(max-width:900px){
.vert-icon{stroke:var(--green)}
.case-row-link{color:var(--green)}
}

/* --- Mobile hero: let the video read ---------------------------------------
   The desktop scrim is a 100deg horizontal gradient because the desktop hero
   puts copy on the left and shows the footage on the right. On a 390px screen
   the copy spans the full width, so that same gradient just darkens the whole
   frame and the video reads as a grey wash.

   Replaced with a vertical scrim shaped to where the text actually sits -
   measured at 18-46% for the headline and 50-64% for the paragraph - so the
   bands above and below open up to roughly a fifth opacity and the footage is
   visible there. Darkening is spent only where it buys legibility.

   The video peaks at luma 90-101 across the whole clip, and `--ash` body copy
   needs its backdrop at or below 58 to hold 4.5:1, which is what sets the 50%
   floor through the paragraph band. */
@media(max-width:900px){
.hero-copy>p:not(.eyebrow){color:var(--silver)}
.hero-media{filter:saturate(.6) contrast(1.05)}
.hero-tint{opacity:.4}
.hero-scrim{background:linear-gradient(to bottom,rgb(11 14 18 / 55%) 0%,rgb(11 14 18 / 20%) 8%,rgb(11 14 18 / 22%) 20%,rgb(11 14 18 / 26%) 44%,rgb(11 14 18 / 46%) 52%,rgb(11 14 18 / 48%) 70%,rgb(11 14 18 / 34%) 80%,rgb(11 14 18 / 30%) 92%,rgb(11 14 18 / 62%) 100%)}
}

/* --- Articles holding state ----------------------------------------------
   Same console chrome as the assurance panel and the 404, so a section with
   nothing in it yet still reads as part of the system rather than an
   oversight. Replace this block with the index when the first piece lands. */
.articles-holding{display:grid;align-content:center;padding:64px 36px 96px;border-right:1px solid var(--slate);border-left:1px solid var(--slate)}
.holding-panel{border:1px solid var(--slate);border-top:2px solid var(--green);background:var(--carbon)}
.holding-body{padding:52px 40px 56px;background-image:radial-gradient(circle,rgb(129 130 132 / 20%) 1px,transparent 1px);background-size:20px 20px}
.holding-count{display:block;color:var(--green);font-family:var(--mono);font-size:clamp(44px,6vw,72px);font-weight:400;line-height:1;letter-spacing:.02em}
.articles-holding h2{max-width:18ch;margin:26px 0 0;font-size:clamp(26px,3.2vw,38px);font-weight:400;line-height:1.14;letter-spacing:-.01em}
.articles-holding p{max-width:56ch;margin:20px 0 0;color:var(--ash);font-size:14px;line-height:1.7}
.articles-holding .button{margin-top:38px}
@media(max-width:900px){.articles-holding{padding:44px 20px 64px}.holding-body{padding:38px 24px 42px}}
@media(max-width:560px){.articles-holding{padding:36px 14px 52px}.holding-body{padding:30px 18px 34px}}

/* Security grid stacks to one column on the narrowest screens; the 3-up and
   2-up border rules above must all be neutralised or they leave stray edges. */
@media(max-width:560px){
.assurance-grid{grid-template-columns:1fr}
.assurance-grid article{padding:15px 16px 17px}
.assurance-grid h3{margin:0 0 6px;font-size:14px}
.assurance-grid p{font-size:12px;line-height:1.45}
.assurance-grid article,
.assurance-grid article:nth-child(3n),
.assurance-grid article:nth-child(2n){border-right:0}
.assurance-grid article,
.assurance-grid article:nth-child(n+4){border-bottom:1px solid var(--slate)}
.assurance-grid article:last-child{border-bottom:0}
}

/* --- Company page bench labels -------------------------------------------
   Seb's note was that the team reads as engineers with no business people.
   The three benches only answer that if a skimming reader can see them, so
   each takes the green mono label the rest of the site uses for structure. */
.prose p.bench{margin-bottom:26px}
.prose p.bench b{display:block;margin-bottom:9px;color:var(--green);font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.064em;text-transform:uppercase}

/* The line the firm is named for. Closes Our Story and nothing follows it. */
.prose p.ace-line{margin:34px 0 0;color:var(--green);font-size:clamp(19px,2.2vw,26px);line-height:1.25;letter-spacing:-.005em}

/* --- Hero heading ---------------------------------------------------------
   Words settle in sequence on load. Deliberately a plain CSS animation with
   `both` fill and no JS gate: three separate bugs this month came from content
   held at opacity:0 waiting for a class that never arrived, and the headline is
   the last thing on the site that should be able to fail that way.
   Transform and opacity only, so layout never moves and CLS stays at 0. */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.32em);animation:word-in 700ms cubic-bezier(.2,.7,.2,1) both}
.hero h1 .w:nth-child(1){animation-delay:80ms}
.hero h1 .w:nth-child(2){animation-delay:145ms}
.hero h1 .w:nth-child(3){animation-delay:210ms}
.hero h1 .w:nth-child(4){animation-delay:275ms}
.hero h1 .w:nth-child(5){animation-delay:340ms}
.hero h1 .w:nth-child(6){animation-delay:405ms}
.hero h1 .w:nth-child(7){animation-delay:470ms}
.hero h1 .w:nth-child(8){animation-delay:535ms}
@keyframes word-in{from{opacity:0;transform:translateY(.32em)}to{opacity:1;transform:none}}

/* The copy beneath follows the last word, so the hero reads as one movement
   rather than a heading that animates over a static block. */
.hero-copy>p:not(.eyebrow){animation:rise 640ms cubic-bezier(.2,.7,.2,1) 620ms both}
.hero-actions{animation:rise 640ms cubic-bezier(.2,.7,.2,1) 760ms both}