/* ORSLON interaction layer. Sits on top of the existing design system and adds
   depth, response and motion to sections that previously read as static
   documents. Every effect degrades to the plain layout without JavaScript and
   is switched off wholesale under prefers-reduced-motion. */

:root {
  --glass-tint: #ffffff0a;
  --glass-edge: #ffffff1f;
  --glass-blur: 14px;
  --lift: cubic-bezier(.22, 1, .36, 1);
  --reveal-shift: 22px;
  --fc-color: #fd5703;
}

/* ========================================================================== */
/* Premium inner pages: Services overview, About, Team and Contact            */
/* ========================================================================== */
.inner-brand-crop {
  position:absolute; z-index:0; width:clamp(260px,35vw,620px); aspect-ratio:1;
  pointer-events:none; user-select:none; opacity:.045; filter:saturate(.6);
}
.atmosphere-host > .inner-brand-crop { position:absolute; z-index:0; }
main section[id] { scroll-margin-top:88px; }
.motion-active > .inner-brand-crop { animation:innerBrandDrift 14s ease-in-out infinite alternate; }
@keyframes innerBrandDrift { to { transform:translate3d(-18px,22px,0) rotate(7deg); } }

/* Services practice gallery: six real disciplines presented as an animated
   photographic bento rather than a catalogue of identical white cards. */
.p-services #practices {
  position:relative; isolation:isolate; overflow:hidden;
  background:radial-gradient(circle at 12% 8%,#fff7ed 0,transparent 29%),radial-gradient(circle at 90% 85%,#dcebea 0,transparent 32%),linear-gradient(135deg,#f8f7f2,#edf3f2);
}
#practices::after { content:''; position:absolute; inset:0; z-index:-1; opacity:.55; background-image:linear-gradient(#17344a0a 1px,transparent 1px),linear-gradient(90deg,#17344a0a 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,#000,transparent 82%); }
#practices .container { position:relative; z-index:1; }
#practices .sector-head { align-items:end; }
#practices .sector-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
#practices .sector-card {
  --practice-image:url('assets/context/devops-pipeline.webp'); grid-column:span 4;
  min-height:430px; justify-content:flex-end; padding:210px 26px 25px; color:#fff;
  border:1px solid #ffffff8a; border-radius:24px; background:#142a3c;
  box-shadow:0 24px 58px -35px #17344a75; transform:translateY(0) scale(.985);
  transition:transform .65s var(--ease),box-shadow .65s,border-color .65s;
}
#practices .sector-card:nth-child(2) { --practice-image:url('assets/context/security-zero-trust.webp'); }
#practices .sector-card:nth-child(3) { --practice-image:url('assets/context/observability-operations.webp'); }
#practices .sector-card:nth-child(4) { --practice-image:url('assets/context/cloud-migration.webp'); }
#practices .sector-card:nth-child(5) { --practice-image:url('assets/context/ai-agent-network.webp'); }
#practices .sector-card:nth-child(6) { --practice-image:url('assets/context/app-development.webp'); }
#practices .sector-card::before { content:''; position:absolute; inset:0; z-index:-2; opacity:1; border-radius:inherit; background-image:var(--practice-image); background-size:cover; background-position:center; transform:scale(1.04); transition:transform 1.2s var(--ease),filter .6s; }
#practices .sector-card:first-child::before { background-position:22% center; }
#practices .sector-card::after { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(180deg,#06131c08 12%,#07182532 42%,#071722f7 83%); }
#practices .sector-card:hover,#practices .sector-card:focus-visible,#practices .sector-card.is-active { transform:translateY(-9px) scale(1); border-color:#ffb77b; box-shadow:0 34px 70px -30px #102a3c9c,0 0 0 1px #fd570326; }
#practices .sector-card:hover::before,#practices .sector-card:focus-visible::before,#practices .sector-card.is-active::before { transform:scale(1.1); filter:saturate(1.08) contrast(1.02); }
#practices .sector-num { top:20px; right:20px; padding:7px 9px; color:#fff; border:1px solid #ffffff55; border-radius:99px; background:#07172566; backdrop-filter:blur(12px); }
#practices .sector-ico { position:absolute; top:150px; left:25px; width:46px; height:46px; margin:0; color:#fff; border-color:#ffffff66; background:#fd5703d9; box-shadow:0 12px 28px #0005,inset 0 1px #fff6; backdrop-filter:blur(10px); }
#practices .sector-card h3 { max-width:100%; margin:0 0 10px; color:#fff; font-size:21px; }
#practices .sector-card p { color:#dce5e9; line-height:1.65; }
#practices .sector-tags { margin-top:15px; color:#c2d3da; }
#practices .sector-more { color:#ffb27a; padding-top:18px; }
.practice-brand-crop { right:-13%; bottom:-32%; }

/* Commercial models use warm mineral glass and a stepped spotlight. */
.p-services #engagement.alt-dark {
  position:relative; isolation:isolate; overflow:hidden; color:#14273c;
  background:radial-gradient(circle at 8% 92%,#efcbbd 0,transparent 30%),radial-gradient(circle at 91% 10%,#cadbda 0,transparent 34%),linear-gradient(125deg,#f2eee7,#dde7e6);
}
#engagement.alt-dark .section-h2,#engagement.alt-dark .sector-card h3 { color:#14273c; }
#engagement.alt-dark .section-p,#engagement.alt-dark .sector-card p,#engagement.alt-dark .sector-tags { color:#516372; }
#engagement.alt-dark .section-eyebrow { color:#536775; }
#engagement.alt-dark .sector-grid { position:relative; z-index:2; gap:18px; }
#engagement.alt-dark .sector-card { min-height:330px; border:1px solid #ffffffc7; border-radius:22px; background:linear-gradient(145deg,#ffffffb5,#f1f4f1a3); box-shadow:0 24px 50px -38px #14273c82,inset 0 1px #fff; backdrop-filter:blur(18px); transform:translateY(10px) scale(.985); }
#engagement.alt-dark .sector-card:nth-child(2) { transform:translateY(-12px) scale(.985); }
#engagement.alt-dark .sector-card:hover,#engagement.alt-dark .sector-card:focus-visible,#engagement.alt-dark .sector-card.is-active { transform:translateY(-17px) scale(1.015); border-color:#fd8a4d8f; box-shadow:0 35px 65px -34px #17354b91,0 0 0 1px #fff9; }
#engagement.alt-dark .sector-card:nth-child(2).is-active,#engagement.alt-dark .sector-card:nth-child(2):hover,#engagement.alt-dark .sector-card:nth-child(2):focus-visible { transform:translateY(-25px) scale(1.015); }
#engagement.alt-dark .sector-ico { width:52px; height:52px; color:#c94c12; border-color:#edcbb8; background:linear-gradient(145deg,#fff,#f6dfd1); box-shadow:0 15px 30px -20px #b6471c; }
#engagement.alt-dark .sector-num { color:#60717d; }
#engagement.alt-dark .model-actions a { border-color:#73899470; color:#173149; }
#engagement.alt-dark .model-actions .btn-dk-primary { color:#fff; border-color:#fd5703; }
.engagement-brand-crop { right:-10%; top:-36%; opacity:.075; }

/* About hero: calm daylight leadership image with the operating seal floating
   above it. The page feels human before it explains the operating model. */
.p-about .page-hero,.p-contact .page-hero { min-height:min(780px,calc(100svh - 72px)); color:#102840; border-color:#b8c8cb; }
.p-about .page-hero { background:radial-gradient(circle at 7% 9%,#fffaf3 0,transparent 31%),linear-gradient(118deg,#f8f7f2 0 51%,#ccd9d8 51% 100%); }
.p-contact .page-hero { background:radial-gradient(circle at 6% 8%,#fff8ee 0,transparent 30%),linear-gradient(120deg,#f6f5ef 0 51%,#d8dfda 51% 100%); }
.p-about .page-hero::after,.p-contact .page-hero::after { content:''; position:absolute; inset:0; z-index:-1; opacity:.45; background-image:linear-gradient(#17344a0b 1px,transparent 1px),linear-gradient(90deg,#17344a0b 1px,transparent 1px); background-size:78px 78px; }
.p-about .page-hero-grid,.p-contact .page-hero-grid { position:relative; isolation:isolate; grid-template-columns:minmax(0,.95fr) minmax(480px,1.05fr); gap:7%; }
.p-about .page-hero-grid::before,.p-contact .page-hero-grid::before { content:''; position:absolute; z-index:-2; top:-28px; right:-28px; bottom:-28px; width:52%; border:1px solid #ffffffa8; border-radius:38px 4px 38px 38px; background-size:cover; background-position:center; box-shadow:0 45px 90px -50px #112c3d9e,inset 0 1px #fff; }
.p-about .page-hero-grid::before { background-color:#13293b; background-image:radial-gradient(circle at 68% 24%,#4e718077 0,transparent 32%),radial-gradient(circle at 18% 84%,#9a5a3c52 0,transparent 29%),linear-gradient(145deg,#0d1d2d,#203a4b); }
.p-contact .page-hero-grid::before { background-image:linear-gradient(145deg,#10263b14,#10263b47),url('assets/photography/contact-workspace.webp?v=2'); background-position:62% center; }
.p-about .page-hero-copy::before,.p-contact .page-hero-copy::before { left:-35px; top:-18px; bottom:-18px; width:calc(100% + 70px); border-color:#ffffffb8; background:linear-gradient(145deg,#ffffffb8,#ffffff62); backdrop-filter:blur(16px); transform:none; box-shadow:0 30px 80px -55px #17344a; }
.p-about .page-h1,.p-contact .page-h1 { color:#11283f; }
.p-about .page-hero .grad,.p-contact .page-hero .grad { color:#be4512; }
.p-about .page-hero .section-eyebrow,.p-contact .page-hero .section-eyebrow { color:#526a76; }
.p-about .page-sub,.p-contact .page-sub { color:#435968; }
.p-about .crumbs,.p-contact .crumbs,.p-about .crumbs a,.p-contact .crumbs a { color:#526976; }
.p-about .crumbs .here,.p-contact .crumbs .here { color:#173149; }
.p-about .hero-chip,.p-contact .hero-chip { color:#173149; border-color:#49637352; background:#ffffff85; backdrop-filter:blur(12px); }
.p-about .hero-chip:hover,.p-contact .hero-chip:hover { color:#a83c10; border-color:#fd7b3d; background:#fff; }
.p-about .about-metrics { border-color:#24415724; }
.p-about .am-num { color:#142d43; }
.p-about .am-lbl { color:#596e7b; }
.legacy-uptime-wrap { display:none !important; }
.p-about .about-ops-map { position:relative; display:flex; align-items:flex-end; width:100%; max-width:500px; min-height:440px; margin:auto; padding:0 3% 6%; filter:drop-shadow(0 28px 34px #102b3d56); }
.about-ops-map::before { content:''; position:absolute; left:10%; right:3%; bottom:4%; height:46%; border:1px solid #ffffff2e; border-radius:25px; background:linear-gradient(145deg,#112a3a10,#1027392b); backdrop-filter:blur(2px); transform:translate(10px,10px); }
.about-ops-ribbon { position:relative; z-index:2; width:100%; padding:14px; overflow:hidden; border:1px solid #ffffffa6; border-radius:20px 6px 20px 20px; background:linear-gradient(145deg,#10283de8,#1e3c4cdf); box-shadow:0 28px 55px -32px #05131ee8,inset 0 1px #ffffff24; backdrop-filter:blur(18px) saturate(1.12); }
.about-ops-ribbon::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 0 45%,#ffffff0c 50%,transparent 55%); transform:translateX(-100%); animation:aboutRibbonSheen 7s ease-in-out infinite paused; }
.motion-active .about-ops-ribbon::after { animation-play-state:running; }
.about-ops-head { display:grid; grid-template-columns:92px 1fr auto; align-items:center; gap:11px; padding-bottom:12px; border-bottom:1px solid #ffffff18; }
.about-ops-brand { display:grid; place-items:center; min-height:31px; padding:6px 9px; border-radius:9px; background:#f8faf9; box-shadow:0 8px 18px -13px #000; }
.about-ops-brand img { width:74px; height:auto; }
.about-ops-kicker { color:#c0ccd4; font:600 7px/1.2 var(--f-mono); letter-spacing:.13em; }
.about-ops-head > b { display:flex; align-items:center; gap:6px; color:#62dca0; font:700 7px/1 var(--f-mono); letter-spacing:.1em; }
.about-ops-head > b i,.about-ops-foot b i { width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; animation:aboutStatusPulse 1.8s ease-in-out infinite; }
.about-ops-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:13px 0 12px; }
.about-ops-step { position:relative; display:grid; grid-template-columns:24px 1fr; gap:7px; align-items:center; min-height:66px; margin-left:-6px; padding:10px 16px 10px 17px; color:#fff; background:linear-gradient(120deg,#ffffff17,#ffffff08); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%); }
.about-ops-step:first-child { margin-left:0; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); }
.about-ops-step:nth-child(2) { background:linear-gradient(120deg,#ff713529,#ffffff0a); }
.about-ops-step:nth-child(3) { background:linear-gradient(120deg,#ffffff12,#5ed69b17); }
.about-ops-step > i { display:grid; place-items:center; width:24px; height:24px; border:1px solid #ff986e78; border-radius:8px; color:#ff9d70; background:#ff713514; font:700 7px/1 var(--f-mono); }
.about-ops-step strong,.about-ops-step small { display:block; }
.about-ops-step strong { color:#f8fbfc; font:700 8px/1 var(--f-mono); letter-spacing:.09em; }
.about-ops-step small { margin-top:5px; color:#aebdc8; font:500 6px/1.2 var(--f-mono); }
.about-ops-foot { display:flex; align-items:center; justify-content:space-between; color:#8fa2b0; font:600 6px/1 var(--f-mono); letter-spacing:.1em; }
.about-ops-foot b { display:flex; align-items:center; gap:6px; color:#65dca2; font-weight:700; }
@keyframes aboutRibbonSheen { 0%,55% { transform:translateX(-110%); } 80%,100% { transform:translateX(110%); } }
@keyframes aboutStatusPulse { 0%,100% { opacity:.35; transform:scale(.75); } 50% { opacity:1; transform:scale(1); } }
.p-about .about-ops-map { align-items:stretch; min-height:460px; padding:0; filter:drop-shadow(0 30px 35px #07182770); }
.about-ops-map::before { display:none; }
.about-3d-stage { position:relative; width:100%; min-height:460px; overflow:hidden; border:1px solid #ffffff2c; border-radius:30px 8px 30px 30px; perspective:1100px; transform-style:preserve-3d; background:radial-gradient(circle at 50% 46%,#35566c47,transparent 38%); }
.about-3d-grid { position:absolute; inset:0; opacity:.35; background-image:linear-gradient(#b7d0d313 1px,transparent 1px),linear-gradient(90deg,#b7d0d313 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(180deg,transparent,#000 26%,#000 78%,transparent); transform:perspective(650px) rotateX(67deg) scale(1.35) translateY(35%); transform-origin:center bottom; }
.about-3d-links { position:absolute; z-index:1; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.about-3d-links path { fill:none; stroke:#89a9b65c; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.about-3d-links .about-3d-signal { stroke:#ff8552; stroke-width:2; stroke-linecap:round; stroke-dasharray:3 18; animation:aboutSignalFlow 3.4s linear infinite paused; }
.motion-active .about-3d-signal { animation-play-state:running; }
.about-3d-stack { --stack-scale:1; position:absolute; z-index:3; left:50%; top:50%; width:310px; height:280px; transform:translate(-50%,-48%) scale(var(--stack-scale)); transform-style:preserve-3d; animation:aboutStackFloat 6s ease-in-out infinite paused; }
.motion-active .about-3d-stack { animation-play-state:running; }
.about-3d-layer { --layer-y:0px; position:absolute; left:50%; top:50%; width:275px; height:142px; overflow:visible; border:1px solid #9ab1bd59; border-radius:15px; color:#d7e2e8; background:linear-gradient(145deg,#243f54e8,#112739f2); box-shadow:0 28px 45px -22px #020b12d9,inset 0 1px #ffffff27; transform:translate(-50%,calc(-50% + var(--layer-y))) rotateX(58deg) rotateZ(-32deg); transform-style:preserve-3d; }
.about-3d-layer::after { content:''; position:absolute; left:11px; right:-1px; bottom:-13px; height:13px; border-radius:0 0 9px 8px; background:linear-gradient(90deg,#091824,#18354a); transform:skewX(-38deg); transform-origin:top; box-shadow:0 10px 18px -13px #000; }
.about-3d-layer > span { position:absolute; z-index:2; left:16px; bottom:13px; color:#b7c8d1; font:700 7px/1 var(--f-mono); letter-spacing:.12em; }
.about-3d-layer > i { position:absolute; z-index:2; width:6px; height:6px; border:1px solid #82a4b7; border-radius:50%; background:#203c50; box-shadow:0 0 0 4px #9eb8c30a; }
.about-3d-layer > i:nth-of-type(1) { left:18%; top:24%; }
.about-3d-layer > i:nth-of-type(2) { right:19%; top:25%; }
.about-3d-layer > i:nth-of-type(3) { right:25%; bottom:20%; }
.about-3d-layer.layer-operate { --layer-y:55px; z-index:1; background:linear-gradient(145deg,#173448ed,#0a1d2dec); }
.about-3d-layer.layer-secure { --layer-y:14px; z-index:2; border-color:#ff9a6a52; background:linear-gradient(145deg,#29475ae8,#122b3de8); }
.about-3d-layer.layer-secure > i { border-color:#ff9b6f; background:#ff7135; box-shadow:0 0 12px #ff713575; }
.about-3d-layer.layer-design { --layer-y:-27px; z-index:3; border-color:#b9ccd584; background:linear-gradient(145deg,#3b596be8,#1b394ce8); }
.about-3d-core { position:absolute; z-index:5; left:50%; top:49%; display:grid; place-items:center; width:88px; height:72px; padding:8px; border:1px solid #fff; border-radius:14px; background:linear-gradient(145deg,#fff,#e6ecee); box-shadow:0 14px 25px -14px #000,0 0 0 6px #ffffff0c; transform:translate(-50%,-50%) translateZ(12px); }
.about-3d-core img { width:46px; height:46px; }
.about-3d-core small { margin-top:2px; color:#43586b; font:700 5px/1 var(--f-mono); letter-spacing:.1em; white-space:nowrap; }
.about-3d-scan { position:absolute; z-index:4; top:0; bottom:0; width:1px; background:linear-gradient(transparent,#ff8c5b,#fff,#ff8c5b,transparent); box-shadow:0 0 12px #ff7135; animation:aboutLayerScan 4.5s ease-in-out infinite paused; }
.motion-active .about-3d-scan { animation-play-state:running; }
.about-3d-node { position:absolute; z-index:5; display:flex; align-items:center; gap:9px; min-width:110px; padding:10px 11px; border:1px solid #ffffff32; border-radius:12px; color:#fff; background:#10273ac7; box-shadow:0 14px 28px -20px #000; backdrop-filter:blur(12px); animation:aboutNodeFloat 4.8s ease-in-out infinite paused; }
.motion-active .about-3d-node { animation-play-state:running; }
.about-3d-node > i { width:8px; height:8px; flex:0 0 auto; border:2px solid #ff9568; border-radius:3px; background:#ff71352e; transform:rotate(45deg); }
.about-3d-node b,.about-3d-node small { display:block; }
.about-3d-node b { font:700 8px/1 var(--f-mono); letter-spacing:.1em; }
.about-3d-node small { margin-top:4px; color:#97aab7; font:600 6px/1 var(--f-mono); letter-spacing:.08em; }
.node-architecture { left:3%; top:13%; }
.node-controls { right:2%; top:15%; animation-delay:-1.6s; }
.node-coverage { right:1%; bottom:15%; animation-delay:-3.2s; }
.node-coverage > i { border-radius:50%; border-color:#62dca0; background:#62dca0; box-shadow:0 0 10px #62dca0; }
.about-3d-caption { position:absolute; z-index:6; left:20px; right:20px; bottom:17px; display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid #ffffff18; color:#a7b8c3; font:600 7px/1 var(--f-mono); letter-spacing:.11em; }
.about-3d-caption b { display:flex; align-items:center; gap:6px; color:#62dda1; font-weight:700; }
.about-3d-caption b i { width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; animation:aboutStatusPulse 1.8s ease-in-out infinite; }
@keyframes aboutSignalFlow { to { stroke-dashoffset:-84; } }
@keyframes aboutStackFloat { 0%,100% { transform:translate(-50%,-48%) translateY(0) scale(var(--stack-scale)); } 50% { transform:translate(-50%,-48%) translateY(-9px) scale(var(--stack-scale)); } }
@keyframes aboutLayerScan { 0%,15% { left:10%; opacity:0; } 28% { opacity:1; } 75% { opacity:1; } 88%,100% { left:90%; opacity:0; } }
@keyframes aboutNodeFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
.about-model { position:relative; width:100%; min-height:460px; overflow:hidden; border:1px solid #ffffff4a; border-radius:30px 8px 30px 30px; color:#f8fbfc; background:radial-gradient(circle at 50% 48%,#315c6d70 0,transparent 34%),radial-gradient(circle at 8% 0,#fd6d3228 0,transparent 30%),linear-gradient(145deg,#0d2233f2,#18384af0); box-shadow:inset 0 1px #ffffff2b,0 32px 65px -45px #020a11; }
.about-model::before { content:''; position:absolute; z-index:1; inset:-35% auto -35% -24%; width:25%; pointer-events:none; background:linear-gradient(90deg,transparent,#ffffff12,transparent); transform:skewX(-17deg) translateX(-150%); animation:aboutModelLight 8s ease-in-out infinite paused; }
.motion-active .about-model::before { animation-play-state:running; }
.about-model-grid { position:absolute; inset:0; opacity:.42; background-image:linear-gradient(#b7cbd21a 1px,transparent 1px),linear-gradient(90deg,#b7cbd21a 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(180deg,#0003,#000 35%,#0008 75%,transparent); }
.about-model-head { position:absolute; z-index:8; top:18px; left:19px; right:19px; display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:14px; padding-bottom:13px; border-bottom:1px solid #ffffff1c; color:#a9bac4; font:600 7px/1 var(--f-mono); letter-spacing:.13em; }
.about-model-brand { display:grid; place-items:center; min-height:31px; padding:6px 9px; border-radius:9px; background:#f8faf9; box-shadow:0 8px 18px -13px #000; }
.about-model-brand img { width:76px; height:auto; }
.about-model-head > b { display:flex; align-items:center; gap:7px; color:#65dfa5; font-weight:700; }
.about-model-head > b i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; animation:aboutStatusPulse 1.8s ease-in-out infinite; }
.about-model-canvas { position:absolute; z-index:3; inset:66px 0 47px; }
.about-model-routes { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.model-route { vector-effect:non-scaling-stroke; }
.route-one { opacity:1; }
.about-model-routes path { fill:none; stroke:#9db4be6b; stroke-width:1; stroke-dasharray:3 5; vector-effect:non-scaling-stroke; }
.about-model-routes circle { fill:#fd7b43; filter:drop-shadow(0 0 5px #fd6c2f); }
.about-model-routes .route-two { stroke:#fd88566b; }
.about-model-routes .route-three { stroke:#65dca06b; }
.about-model-orbit { position:absolute; left:50%; top:50%; border:1px solid #c3d2d72b; border-radius:50%; transform:translate(-50%,-50%); animation:aboutModelOrbit 22s linear infinite paused; }
.motion-active .about-model-orbit { animation-play-state:running; }
.about-model-orbit::before,.about-model-orbit::after { content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:#ff8a55; box-shadow:0 0 9px #ff7135; }
.orbit-outer { width:214px; height:214px; }
.orbit-outer::before { left:20px; top:24px; }
.orbit-outer::after { right:2px; bottom:75px; background:#68dda5; box-shadow:0 0 9px #68dda5; }
.orbit-inner { width:174px; height:174px; border-style:dashed; animation-direction:reverse; animation-duration:17s; }
.orbit-inner::before { left:42px; bottom:7px; width:4px; height:4px; background:#fff; box-shadow:0 0 8px #fff; }
.orbit-inner::after { display:none; }
.about-model-core { position:absolute; z-index:5; left:50%; top:50%; display:flex; width:146px; height:146px; flex-direction:column; align-items:center; justify-content:center; border:1px solid #ffffffa8; border-radius:50%; text-align:center; background:radial-gradient(circle at 38% 28%,#35566a,#132c3d 66%); box-shadow:0 25px 55px -24px #000,inset 0 1px #ffffff3d,0 0 0 8px #ffffff0a; transform:translate(-50%,-50%); }
.about-model-mark { display:grid; place-items:center; width:35px; height:35px; margin-bottom:7px; border-radius:50%; background:#f8faf8; box-shadow:0 8px 18px -10px #000; }
.about-model-mark img { width:24px; height:24px; }
.about-model-core small { color:#7f9aaa; font:700 6px/1 var(--f-mono); letter-spacing:.15em; }
.about-model-core strong { margin-top:6px; color:#fff; font:500 21px/1.02 var(--f-display); letter-spacing:-.04em; }
.about-model-point { position:absolute; z-index:6; display:grid; grid-template-columns:42px 1fr; align-items:center; gap:10px; width:184px; min-height:72px; padding:10px 12px; border:1px solid #ffffff36; border-radius:15px; background:linear-gradient(135deg,#254558dc,#10293be8); box-shadow:0 18px 36px -23px #000,inset 0 1px #ffffff26; backdrop-filter:blur(14px); animation:aboutModelFloat 5.5s ease-in-out infinite paused; }
.motion-active .about-model-point { animation-play-state:running; }
.model-expert { left:3.5%; top:4%; }
.model-accountable { right:3%; top:4%; border-color:#ff9b7066; animation-delay:-1.8s; }
.model-ownership { left:50%; bottom:0; width:202px; border-color:#66dca052; background:linear-gradient(135deg,#244c4bdf,#112e3de8); transform:translateX(-50%); animation-name:aboutModelFloatCentered; animation-delay:-3.6s; }
.model-point-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid #ff9a7066; border-radius:12px; color:#ff9567; background:#ff713512; }
.model-ownership .model-point-icon { color:#69dfa6; border-color:#69dfa65e; background:#58d89b10; }
.model-point-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.about-model-point span:last-child { min-width:0; }
.about-model-point small,.about-model-point strong,.about-model-point em { display:block; }
.about-model-point small { margin-bottom:4px; color:#8fa6b3; font:600 6px/1 var(--f-mono); letter-spacing:.12em; }
.about-model-point strong { color:#fff; font:600 14px/1.1 var(--f-display); letter-spacing:-.02em; }
.about-model-point em { margin-top:4px; overflow:hidden; color:#aebdc6; font:500 7px/1.2 var(--f-mono); font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.about-model-foot { position:absolute; z-index:8; left:19px; right:19px; bottom:17px; display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid #ffffff1c; color:#91a7b3; font:600 6px/1 var(--f-mono); letter-spacing:.12em; }
.about-model-foot b { color:#dce6ea; font-weight:600; }
.about-model-foot b i { margin-left:5px; color:#ff8d5c; font-style:normal; }
@keyframes aboutModelLight { 0%,55% { transform:skewX(-17deg) translateX(-150%); } 82%,100% { transform:skewX(-17deg) translateX(590%); } }
@keyframes aboutModelOrbit { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes aboutModelFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes aboutModelFloatCentered { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-6px); } }
.about-hero-links { display:flex; flex-wrap:wrap; gap:9px; margin-top:25px; }
.about-hero-links a { display:inline-flex; align-items:center; justify-content:space-between; min-width:126px; padding:11px 14px; border:1px solid #29455935; border-radius:999px; color:#173149; background:#ffffff82; font:600 9px/1 var(--f-mono); letter-spacing:.06em; transition:color .25s,border-color .25s,background .25s,transform .25s; }
.about-hero-links a b { font:inherit; }
.about-hero-links a span { margin-left:16px; color:#c64b17; font-size:12px; }
.about-hero-links a:hover,.about-hero-links a:focus-visible { color:#9f3810; border-color:#e68155; background:#fff; transform:translateY(-2px); }
.about-hero-visual { position:relative; width:100%; max-width:520px; min-width:0; margin-inline:auto; padding:11px; overflow:hidden; border:1px solid #ffffffb0; border-radius:30px 8px 30px 30px; background:linear-gradient(145deg,#edf2efed,#ffffffd9); box-shadow:0 36px 75px -38px #071827bf,inset 0 1px #fff; }
.p-about .page-hero-grid::before { display:none; }
.about-hero-photo { position:relative; min-height:310px; overflow:hidden; border-radius:21px 3px 8px 8px; background:#152c3d; }
.about-hero-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#0718270a 35%,#071827a8 100%); }
.about-hero-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:53% center; transform:scale(1.01); transition:transform 1.2s var(--ease); }
.about-hero-visual:hover .about-hero-photo img { transform:scale(1.045); }
.about-photo-label { position:absolute; z-index:2; left:18px; right:18px; bottom:15px; display:flex; align-items:center; justify-content:space-between; color:#e7eff2; font:600 7px/1 var(--f-mono); letter-spacing:.13em; }
.about-photo-label > b { display:flex; align-items:center; gap:7px; color:#7ce1af; font-weight:700; }
.about-photo-label > b i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; }
.about-hero-visual figcaption { position:relative; min-height:152px; padding:24px 25px 21px 58px; color:#173149; }
.about-quote-mark { position:absolute; left:21px; top:18px; color:#fd5703; font:500 50px/.9 Georgia,serif; }
.about-hero-visual figcaption > p { max-width:390px; color:#173149; font:500 22px/1.18 var(--f-display); letter-spacing:-.035em; text-wrap:balance; }
.about-hero-visual figcaption > div { display:grid; grid-template-columns:90px 1fr; gap:14px; align-items:start; margin-top:16px; padding-top:14px; border-top:1px solid #1c3a4c1c; }
.about-hero-visual figcaption strong { color:#bc4513; font:700 7px/1.3 var(--f-mono); letter-spacing:.09em; text-transform:uppercase; }
.about-hero-visual figcaption div span { color:#5a6f7b; font:500 8px/1.45 var(--f-mono); }
.p-contact .pulse-wrap { max-width:520px; filter:drop-shadow(0 28px 35px #102a3c60); }
.p-contact .pulse-panel { background:linear-gradient(145deg,#142d40e8,#1f3f50dc); border:1px solid #ffffff66; backdrop-filter:blur(18px); }
.pulse-brand-seal { right:-58px; top:-58px; width:180px; opacity:.12; filter:grayscale(1) brightness(4); }
.motion-active .pulse-brand-seal { animation:innerLogoSpin 22s linear infinite; }
@keyframes innerLogoSpin { to { transform:rotate(360deg); } }

/* About story, pledge and principles each use a separate material palette. */
.about-story-section { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 90% 8%,#d9e7e3 0,transparent 34%),linear-gradient(135deg,#fbf8f2,#edf1ec); }
.about-story-section .story-grid { gap:8%; }
.about-story-section .story-left { padding:30px 30px 330px; border:1px solid #ffffffc5; border-radius:26px; background:#ffffff79; box-shadow:0 28px 70px -50px #16384b; backdrop-filter:blur(15px); overflow:hidden; }
.about-story-section .story-left::after { content:''; position:absolute; left:14px; right:14px; bottom:14px; height:290px; border-radius:18px; background:linear-gradient(180deg,transparent,#0c20373d),url('assets/photography/product-circuitry.webp') center/cover; box-shadow:inset 0 1px #fff8; transform:translateY(var(--object-drift,0)) scale(1.04); }
.about-story-section .mile-list { position:relative; padding-left:25px; }
.about-story-section .mile-list::before { content:''; position:absolute; top:10px; bottom:20px; left:4px; width:1px; background:linear-gradient(#fd5703,#9bb3b4); }
.about-story-section .mile { position:relative; padding:25px; margin:0 0 17px; border:1px solid #d8e0dd; border-radius:18px; background:#ffffff9c; box-shadow:0 18px 45px -40px #102a3c; transition:transform .4s,border-color .4s; }
.about-story-section .mile::before { content:''; position:absolute; left:-27px; top:36px; width:9px; height:9px; border:3px solid #f6f5ef; border-radius:50%; background:#fd5703; box-shadow:0 0 0 1px #fd5703; }
.about-story-section .mile:hover { transform:translateX(8px); border-color:#e4a47e; }
.story-brand-crop { right:-17%; bottom:-17%; }
.promise-band { min-height:560px; background:radial-gradient(circle at 19% 90%,#9d573f 0,transparent 31%),radial-gradient(circle at 88% 5%,#697d78 0,transparent 34%),linear-gradient(135deg,#29292b,#4c4541); }
.promise-band::after { content:''; position:absolute; inset:10% 6%; z-index:-1; border:1px solid #ffffff1f; border-radius:36px; background:linear-gradient(145deg,#ffffff09,#ffffff02); backdrop-filter:blur(5px); }
.promise-brand-crop { right:-11%; top:-35%; opacity:.1; filter:grayscale(1) brightness(4); }
.motion-active .promise-brand-crop { animation:innerBrandDrift 11s ease-in-out infinite alternate; }
.how-section { position:relative; overflow:hidden; background:radial-gradient(circle at 8% 100%,#e9cfc0 0,transparent 33%),linear-gradient(128deg,#f1f2ed,#dfe8e5); color:#142a3f; }
.how-section .section-h2,.how-section .pr-body h3 { color:#142a3f; }
.how-section .section-p,.how-section .pr-body p { color:#526674; }
.how-section .section-eyebrow { color:#526674; }
.how-section .grad { color:#bf4612; }
.how-section .principle-grid { gap:16px; }
.how-section .principle { position:relative; min-height:170px; padding:27px; border:1px solid #ffffffca; border-radius:18px; background:#ffffff91; box-shadow:0 20px 45px -42px #123149; backdrop-filter:blur(14px); transition:transform .4s,border-color .4s,background .4s; }
.how-section .principle:hover,.how-section .principle:focus-within { transform:translateY(-5px); border-color:#e7a379; background:#ffffffc4; }
.how-section .pr-n { color:#be4512; }
.fit-section { position:relative; background:radial-gradient(circle at 90% 10%,#e1e9e5 0,transparent 32%),linear-gradient(145deg,#faf8f2,#f0ece5); }
.fit-col { border-radius:22px; border-color:#ffffffc8; box-shadow:0 28px 65px -48px #153349; backdrop-filter:blur(15px); }
.fit-yes { background:linear-gradient(145deg,#e5f0eab8,#ffffffc4); }
.fit-no { background:linear-gradient(145deg,#f4ebe5c2,#ffffffba); }

/* Team: one natural workplace scene, with discipline cards floating above it.
   No invented names or portraits are introduced. */
.team-section { position:relative; isolation:isolate; overflow:hidden; min-height:850px; background:linear-gradient(90deg,#f3f1e8f2 0%,#e9efebbf 54%,#d7e2df82),url('assets/photography/team-meeting-room.webp') center/cover; }
.team-section::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#f5f2ea4d 0 42%,#12293be8 76% 100%); }
.team-header { max-width:980px; padding:32px; border:1px solid #ffffffc2; border-radius:25px; background:#ffffff9e; box-shadow:0 28px 70px -50px #112d40; backdrop-filter:blur(18px); }
.founder-cards { display:flex; align-items:stretch; gap:12px; margin-top:240px; }
.fc { flex:1; min-width:0; border-color:#ffffff42; border-radius:20px; color:#fff; background:linear-gradient(145deg,#18354ddd,#0c2032e8); box-shadow:0 26px 50px -35px #000; backdrop-filter:blur(18px); transition:flex .65s var(--ease),transform .5s,border-color .5s,background .5s; }
.fc:hover,.fc:focus-visible,.fc.is-active { flex:1.45; transform:translateY(-12px); border-color:var(--fc-color); background:linear-gradient(145deg,#21445de8,#0d2438ed); }
.fc-top { height:112px; background:transparent; }
.fc-top::before { opacity:.5; }
.fc-icon { color:#fff; border-color:#ffffff58; background:color-mix(in srgb,var(--fc-color) 65%,#17344a); }
.fc-body { padding:23px; }
.fc-focus { color:#c8d5dc; }
.fc-chips span { color:#dfe7eb; border-color:#ffffff2e; }
.team-brand-crop { left:-14%; bottom:-29%; opacity:.11; filter:grayscale(1) brightness(4); }

/* Contact: warm consultation stage, confident glass form and card-based FAQ. */
.contact-section { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 4% 8%,#ffe9d8 0,transparent 28%),radial-gradient(circle at 94% 88%,#cedfdc 0,transparent 31%),linear-gradient(140deg,#f8f4ed,#e8efeb); }
.contact-section .contact-grid { gap:7%; }
.contact-info-items { display:grid; gap:10px; border:0; }
.ci-item { padding:18px; border:1px solid #ffffffc4; border-radius:15px; background:#ffffff86; backdrop-filter:blur(13px); transition:transform .35s,border-color .35s; }
.ci-item:hover { transform:translateX(7px); border-color:#e5a27a; }
.contact-expect { border-color:#ffffffc7; border-radius:18px; background:#f4eee6b8; box-shadow:0 20px 45px -42px #17344a; }
.contact-form-wrap { border:1px solid #ffffffd6; border-top:1px solid #ffffff; border-radius:26px; background:linear-gradient(145deg,#ffffffdd,#f7faf7bc); box-shadow:0 40px 85px -45px #15344d8f,inset 0 1px #fff; backdrop-filter:blur(22px); }
.contact-form-wrap::after { content:'SECURE / ENGINEER-LED'; position:absolute; top:18px; right:22px; color:#657985; font:8px var(--f-mono); letter-spacing:.12em; }
.form-group input,.form-group select,.form-group textarea { border-radius:10px; background:#f7f7f3c7; }
.btn-submit { border-radius:11px; background:linear-gradient(115deg,#fd5703,#ef7b3c); box-shadow:0 15px 28px -15px #fd5703; }
.contact-brand-crop { left:-18%; bottom:-25%; }
.faq-section { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 100% 0,#dce7e4 0,transparent 36%),linear-gradient(135deg,#f8f6f0,#eef2ed); }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; counter-reset:faq; }
.faq-item,.faq-item:last-child { overflow:hidden; border:1px solid #ffffffc8; border-radius:15px; background:#ffffff87; box-shadow:0 18px 45px -42px #142f43; backdrop-filter:blur(12px); }
.faq-q { min-height:92px; padding:20px; }
.faq-a-inner { padding:0 48px 24px; }
.faq-item:has(.faq-q[aria-expanded=true]) { grid-column:span 2; border-color:#e6a17a; background:#ffffffc8; }
.faq-brand-crop { right:-18%; bottom:-36%; }

@media(max-width:1100px) {
  #practices .sector-card { grid-column:span 6; }
  .p-about .page-hero-grid,.p-contact .page-hero-grid { grid-template-columns:minmax(0,1fr) minmax(390px,.85fr); gap:4%; }
  .founder-cards { flex-wrap:wrap; }
  .fc { flex:1 1 42%; }
  .fc.is-active { flex:1 1 52%; }
}
@media(max-width:900px) {
  .p-about .page-hero-grid,.p-contact .page-hero-grid { grid-template-columns:1fr; }
  .p-about .page-hero-grid::before,.p-contact .page-hero-grid::before { top:auto; right:0; bottom:-20px; width:100%; height:46%; opacity:.72; }
  .p-about .page-hero-copy,.p-contact .page-hero-copy { max-width:720px; }
  .p-about .about-ops-map,.p-contact .pulse-wrap { margin-top:70px; }
  .about-story-section .story-left { padding-bottom:360px; }
  .team-section { min-height:auto; }
  .founder-cards { margin-top:160px; }
  .faq-grid { grid-template-columns:1fr; }
  .faq-item:has(.faq-q[aria-expanded=true]) { grid-column:auto; }
}
@media(max-width:650px) {
  #practices .sector-card { grid-column:1/-1; min-height:405px; }
  #engagement.alt-dark .sector-grid { grid-template-columns:1fr; }
  #engagement.alt-dark .sector-card,#engagement.alt-dark .sector-card:nth-child(2) { min-height:auto; transform:none; }
  #engagement.alt-dark .sector-card:hover,#engagement.alt-dark .sector-card:focus-visible,#engagement.alt-dark .sector-card.is-active,#engagement.alt-dark .sector-card:nth-child(2).is-active { transform:translateY(-5px); }
  .p-about .page-hero-copy::before,.p-contact .page-hero-copy::before { display:block; left:-14px; width:calc(100% + 28px); }
  .p-about .page-hero-grid::before,.p-contact .page-hero-grid::before { height:42%; border-radius:25px; }
  .p-about .about-ops-map { max-width:100%; min-height:330px; margin-top:35px; padding-inline:0; }
  .about-ops-flow { grid-template-columns:1fr; gap:6px; }
  .about-ops-step,.about-ops-step:first-child { min-height:48px; margin-left:0; padding:8px 12px; border-radius:9px; clip-path:none; }
  .about-ops-head { grid-template-columns:82px 1fr auto; gap:8px; }
  .about-ops-brand img { width:66px; }
  .about-3d-stage { min-height:330px; border-radius:22px 7px 22px 22px; }
  .about-3d-stack { --stack-scale:.72; }
  .about-3d-node { min-width:84px; gap:6px; padding:7px 8px; }
  .about-3d-node b { font-size:7px; }
  .about-3d-node small { font-size:5px; }
  .node-architecture { left:2%; top:8%; }
  .node-controls { right:2%; top:11%; }
  .node-coverage { right:2%; bottom:16%; }
  .about-3d-caption { left:12px; right:12px; bottom:11px; font-size:6px; }
  .about-model { min-height:410px; border-radius:22px 7px 22px 22px; }
  .about-model-head { top:11px; left:11px; right:11px; grid-template-columns:80px 1fr auto; gap:7px; }
  .about-model-kicker { display:none; }
  .about-model-head > b { justify-self:end; font-size:6px; }
  .about-model-brand img { width:66px; }
  .about-model-canvas { inset:59px 0 43px; transform:scale(.83); transform-origin:center; }
  .about-model-foot { left:11px; right:11px; bottom:10px; font-size:5px; }
  .about-hero-links { margin-top:21px; }
  .about-hero-visual { padding:8px; border-radius:22px 7px 22px 22px; }
  .about-hero-photo { min-height:260px; border-radius:15px 2px 7px 7px; }
  .about-hero-visual figcaption { min-height:0; padding:22px 18px 18px 48px; }
  .about-quote-mark { left:15px; top:18px; font-size:42px; }
  .about-hero-visual figcaption > p { font-size:20px; }
  .about-hero-visual figcaption > div { grid-template-columns:78px 1fr; gap:10px; }
  .about-story-section .story-left { padding:25px 20px 300px; }
  .about-story-section .story-left::after { height:260px; }
  .about-story-section .mile { gap:15px; padding:21px 18px; }
  .founder-cards { display:grid; grid-template-columns:1fr; margin-top:90px; }
  .fc,.fc.is-active { display:grid; grid-template-columns:82px 1fr; transform:none; }
  .fc-top { height:100%; }
  .team-header { padding:24px 20px; }
  .faq-q { min-height:76px; padding:17px; }
  .faq-a-inner { padding:0 28px 22px; }
}
@media(max-width:420px) {
  .about-model { min-height:465px; }
  .about-model-canvas { inset:56px 12px 42px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:128px 78px 78px; gap:8px; align-content:center; transform:none; }
  .about-model-routes,.about-model-orbit { display:none; }
  .about-model-core { position:relative; left:auto; top:auto; grid-column:1/-1; align-self:center; justify-self:center; width:116px; height:116px; transform:none; }
  .about-model-mark { width:30px; height:30px; margin-bottom:5px; }
  .about-model-mark img { width:20px; height:20px; }
  .about-model-core strong { font-size:17px; }
  .about-model-point,.model-expert,.model-accountable,.model-ownership { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto; min-height:78px; padding:8px; grid-template-columns:32px 1fr; gap:7px; transform:none; animation-name:aboutModelFloat; }
  .model-ownership { grid-column:1/-1; width:206px; justify-self:center; }
  .model-point-icon { width:32px; height:32px; border-radius:9px; }
  .model-point-icon svg { width:18px; height:18px; }
  .about-model-point strong { font-size:12px; }
  .about-model-point em { font-size:6px; }
  .about-model-foot span { display:none; }
  .about-model-foot { justify-content:flex-end; }
  .about-hero-links a { min-width:0; flex:1 1 130px; }
  .about-hero-photo { min-height:235px; }
  .about-photo-label { left:12px; right:12px; font-size:6px; }
  .about-hero-visual figcaption { padding-left:43px; }
  .about-hero-visual figcaption > div { grid-template-columns:1fr; gap:5px; }
}
@media(prefers-reduced-motion:reduce) {
  .inner-brand-crop,.about-ops-ribbon::after,.about-ops-head > b i,.about-ops-foot b i,.about-3d-signal,.about-3d-stack,.about-3d-scan,.about-3d-node,.about-3d-caption b i,.about-model::before,.about-model-head > b i,.about-model-orbit,.about-model-point { animation:none !important; }
  #practices .sector-card::before { transition:none; }
}

/* ── Scroll reveal ───────────────────────────────────────────────────────────
   Content is visible by default. The observer adds .rv-in; the hidden state is
   only ever applied once JS has confirmed it can reveal again, so a failed
   script or a dead observer can never leave the page blank. */
.js-enabled .rv { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); }
.js-enabled .rv-in { opacity: 1; transform: none;
  transition: opacity 700ms var(--lift) var(--rv-delay, 0ms), transform 700ms var(--lift) var(--rv-delay, 0ms); }

/* ── Glass surface ───────────────────────────────────────────────────────────
   A single shared treatment so panels read as one material across sections. */
.glass {
  position: relative; isolation: isolate;
  background: linear-gradient(140deg, #ffffff10, #ffffff04 55%, #ffffff09);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
}
/* Cursor-tracked sheen. Custom properties default to centre so an untouched
   panel still renders correctly. */
.glass::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 320ms var(--lift);
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), #ff8a4520, transparent 68%);
}
.glass.is-live::after { opacity: 1; }

/* ── Why section: a comparison people can drive ──────────────────────────────
   The four claims become real buttons that select a column of the table, so the
   argument is explored rather than read top to bottom. */
.why-points { display: grid; gap: 10px; margin-top: 30px; }
.why-point {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  width: 100%; text-align: left; padding: 16px 18px; border: 1px solid transparent;
  border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer;
  transition: background 260ms var(--lift), border-color 260ms var(--lift), transform 260ms var(--lift);
}
.why-point:hover { background: #ffffff8c; border-color: #dfe4e6; transform: translateX(4px); }
.why-point[aria-expanded="true"] { background: #fff; border-color: #e6d6c8; box-shadow: 0 10px 26px #12263e0d; }
.why-point:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.why-point > div:last-child { min-width: 0; }
.why-point strong { display: block; font-size: 14px; }
/* Collapsed by default on the interactive build; grid-rows animates height
   without measuring anything in JS. */
.js-enabled .why-body { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 420ms var(--lift), opacity 320ms var(--lift), margin 420ms var(--lift); }
.js-enabled .why-point[aria-expanded="true"] .why-body { grid-template-rows: 1fr; opacity: 1; margin-top: 7px; }
.js-enabled .why-body > p { overflow: hidden; margin: 0; }
.why-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #e3c9b4; color: var(--orange-ink); background: #fff6ef;
  transition: background 260ms var(--lift), color 260ms var(--lift), transform 260ms var(--lift); }
.why-point[aria-expanded="true"] .why-check { background: var(--orange); border-color: var(--orange); color: #fff; transform: scale(1.08); }

/* ── Why section: arrival ────────────────────────────────────────────────────
   The two columns were the last static block on the page: the heading had no
   letter reveal, and the table appeared whole. The claims now enter from the
   left and the comparison cascades row by row from the right, so the two sides
   read as converging on the same argument. */
#why-section .why-point {
  --why-shift: -26px;
}
.js-enabled #why-section .why-point.rv { opacity: 0; transform: translate3d(var(--why-shift), 0, 0); }
.js-enabled #why-section .why-point.rv-in { opacity: 1; transform: none;
  transition: opacity 640ms var(--lift) var(--rv-delay, 0ms),
              transform 760ms var(--lift) var(--rv-delay, 0ms); }

/* Rows cascade from the opposite side. The delay is set per row by script. */
.js-enabled #why-section .compare-glass tbody tr,
.js-enabled #why-section .compare-glass thead tr { --row-delay: 0ms; }
.js-enabled #why-section .compare-glass.rows-armed :is(thead, tbody) tr > * {
  opacity: 0; transform: translate3d(20px, 0, 0);
}
.js-enabled #why-section .compare-glass.rows-in :is(thead, tbody) tr > * {
  opacity: 1; transform: none;
  transition: opacity 560ms var(--lift) var(--row-delay),
              transform 680ms var(--lift) var(--row-delay);
}
/* A light passes down the table once as it settles, so the cascade resolves
   into something rather than simply stopping. */
.js-enabled #why-section .compare-glass { position: relative; }
.js-enabled #why-section .compare-glass.rows-in::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 35%, #ffb27d38 50%, transparent 65%);
  animation: why-sweep 1500ms var(--lift) 320ms both;
}
@keyframes why-sweep {
  from { transform: translateY(-100%); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}

/* The columns drift at slightly different rates while the section crosses the
   viewport — enough to feel alive, not enough to read as movement. --why-par is
   written by script and is 0 outside the section. */
.js-enabled #why-section .why-left { transform: translate3d(0, calc(var(--why-par, 0px) * -1), 0); }
.js-enabled #why-section .why-right { transform: translate3d(0, var(--why-par, 0px), 0); }

@media (prefers-reduced-motion: reduce) {
  .js-enabled #why-section .why-point.rv { opacity: 1; transform: none; }
  .js-enabled #why-section .compare-glass.rows-armed :is(thead, tbody) tr > * { opacity: 1; transform: none; }
  .js-enabled #why-section .compare-glass.rows-in::before { animation: none; display: none; }
  .js-enabled #why-section .why-left,
  .js-enabled #why-section .why-right { transform: none; }
}

/* The matching table row lights up with the selected claim. */
.compare-glass tbody tr { transition: background 300ms var(--lift); }
.compare-glass tbody tr.row-active { background: #ffffffcc; }
.compare-glass tbody tr.row-active .us { background: #0e2338; }
.compare-glass tbody tr.row-active th[scope="row"] { color: var(--orange-ink); }

/* ── Work: a living photographic outcome carousel ───────────────────────────
   The outcome cards now share one cinematic stage. The active outcome becomes
   a large editorial photograph with a readable glass veil while the other five
   remain compact, direct controls. Filtering still falls back to the plain grid. */
.case-photo {
  position: absolute; inset: -4%; z-index: -3; width: 108%; height: 108%;
  max-width: none; object-fit: cover; opacity: 0; pointer-events: none;
  transform: translate3d(0, var(--work-par, 0px), 0) scale(1.06);
  transition: opacity 520ms var(--lift), transform 1200ms var(--lift), filter 520ms var(--lift);
  filter: saturate(.84) contrast(1.04);
}
.case-card > :not(.case-photo) { position: relative; z-index: 1; }
.outcome-carousel-nav {
  display: flex; align-items: center; gap: 18px; margin-top: 18px;
  padding: 11px 15px; width: fit-content; margin-left: auto;
  border: 1px solid #cdd7d8; border-radius: 999px;
  background: linear-gradient(135deg, #fffffff0, #edf3f3bb);
  box-shadow: 0 12px 32px -24px #10294099, inset 0 1px #fff;
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
}
.outcome-carousel-nav[hidden] { display: none; }
.outcome-carousel-label { font: 9px var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: #506377; }
.outcome-carousel-dots { display: flex; gap: 7px; }
.outcome-dot {
  width: 25px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: #b9c5c9; cursor: pointer; overflow: hidden; position: relative;
  transition: width 360ms var(--lift), background 360ms var(--lift);
}
.outcome-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.outcome-dot[aria-current="true"] { width: 46px; background: #d7dee0; }
.outcome-dot[aria-current="true"]::after { animation: outcome-progress 5.2s linear both; }
.outcome-carousel-nav.is-paused .outcome-dot[aria-current="true"]::after { animation-play-state: paused; }
.outcome-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.outcome-carousel-count { min-width: 47px; font: 9px var(--f-mono); letter-spacing: .08em; color: #7a8995; }
.outcome-carousel-count b { color: var(--orange-ink); font-weight: 500; }
@keyframes outcome-progress { to { transform: scaleX(1); } }

#work { background: linear-gradient(122deg, #f5f8f8 0%, #e9f0f1 54%, #f1f3f0 100%); }
#work .sector-head { align-items: center; }
#work .sector-head > div:first-child { position: relative; padding-left: 22px; }
#work .sector-head > div:first-child::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 5px; width: 2px;
  background: linear-gradient(var(--orange), #fd57031c); border-radius: 99px;
}
#work .sector-head .section-p {
  padding: 22px 24px; border: 1px solid #ffffffd6; border-radius: 15px;
  color: #465d70; background: linear-gradient(135deg, #ffffffe6, #f0f5f4a6);
  box-shadow: 0 20px 45px -38px #102940a8, inset 0 1px #fff;
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
}
#work .solutions-filter-bar {
  width: fit-content; max-width: 100%; padding: 5px; gap: 3px; border: 1px solid #d2ddde;
  border-radius: 999px; background: #ffffffa3; box-shadow: inset 0 1px #fff;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#work .filter-tab { min-height: 39px; padding: 9px 15px; border: 0; border-radius: 999px; margin: 0; }
#work .filter-tab:hover { background: #fff; }
#work .filter-tab.active { color: #fff; background: #0d263d; box-shadow: 0 8px 20px -13px #0d263d; }
#work .filter-tab.active .filter-count { color: #ffb27c; }

.js-enabled .cases-grid:not(.is-showcase) .case-card.is-filter-result {
  grid-column: 1 / -1; min-height: 430px; padding: 42px;
  align-content: end; color: #f7fafb; border-color: #ffffff38; border-radius: 18px;
  background: #0a1b2b; box-shadow: 0 28px 70px -34px #0b213dcc;
}
.js-enabled .cases-grid:not(.is-showcase) .case-card.is-filter-result .case-body { max-width: 700px; }
.js-enabled .cases-grid:not(.is-showcase) .case-card.is-filter-result .case-photo { opacity: 1; }
.js-enabled .cases-grid:not(.is-showcase) .case-card.is-filter-result::after {
  inset: 0; z-index: -2; width: auto; height: auto; border: 0; border-radius: inherit;
  box-shadow: none; transform: none;
  background: linear-gradient(90deg, #071625f5, #0a1d2cd4 48%, #0a1d2c3d), linear-gradient(0deg,#071625db,transparent 68%);
}
.js-enabled .cases-grid:not(.is-showcase) .case-card.is-filter-result :is(.case-sector,.case-body,.cp-l) { color: #d9e4e9; }
.js-enabled .cases-grid:not(.is-showcase) .case-card.is-filter-result .case-ico { color: #ffb47f; }
.js-enabled .cases-grid:not(.is-showcase) .case-card.is-filter-result .case-tag { color: #eef4f6; border-color: #ffffff30; background: #07162580; }

/* A fixed stage lets filtered outcomes crossfade without the grid collapsing
   between categories. The outgoing image lingers gently beneath the incoming
   one, removing the flash and vertical fluctuation from the automatic cycle. */
.js-enabled .cases-grid:not(.is-showcase) {
  position: relative; display: block; height: clamp(430px,35vw,520px); overflow: hidden;
  border-radius: 18px; contain: layout paint;
}
.js-enabled .cases-grid:not(.is-showcase) .case-card,
.js-enabled .cases-grid:not(.is-showcase) .case-card[hidden] {
  display: grid !important; position: absolute; inset: 0; min-height: 100%;
  animation: none !important;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate3d(0,12px,0) scale(.992);
  transition: opacity 900ms cubic-bezier(.22,1,.36,1),
              transform 1100ms cubic-bezier(.22,1,.36,1),
              visibility 0s linear 900ms,
              border-color 420ms,box-shadow 420ms;
}
.js-enabled .cases-grid:not(.is-showcase) .case-card.is-filter-result {
  z-index: 2; opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
  transition-delay: 90ms,90ms,0s,0s,0s;
}
#work .filter-tab { transition:color 420ms var(--lift),background 520ms var(--lift),box-shadow 520ms var(--lift),transform 420ms var(--lift); }
#work .filter-tab.active { transform:translateY(-1px); }

.footer-word { display:flex; align-items:center; justify-content:center; }
.footer-word .footer-exact-wordmark { display:block; width:100%; height:auto; object-fit:contain; }

@media(max-width:600px) {
  .js-enabled .cases-grid:not(.is-showcase) { height:clamp(500px,132vw,590px); }
}

@media (min-width: 901px) {
  .js-enabled .cases-grid.is-showcase {
    grid-template-columns: minmax(0, 1.62fr) minmax(310px, .95fr);
    gap: 14px; align-items: stretch;
  }
  /* The featured card spans the full height of the rail beside it. */
  .js-enabled .is-showcase .case-card.is-feature {
    grid-column: 1; grid-row: 1 / span 5;
    min-height: 506px; padding: 46px 42px 38px;
    align-content: end; color: #f7fafb; border-color: #ffffff35;
    background: #0a1b2b; box-shadow: 0 28px 70px -34px #0b213dcc, inset 0 1px #ffffff33;
    border-radius: 18px;
  }
  .js-enabled .is-showcase .case-card.is-feature .case-photo { opacity: 1; animation: feature-photo-in 900ms var(--lift) both; }
  .js-enabled .is-showcase .case-card.is-feature::after {
    content: ''; position: absolute; inset: 0; z-index: -2; width: auto; height: auto;
    border: 0; border-radius: inherit; box-shadow: none; transform: none;
    background:
      linear-gradient(90deg, #071625f5 0%, #0a1d2cdb 43%, #0a1d2c47 78%, #0a1d2c33 100%),
      linear-gradient(0deg, #071625f0 0%, transparent 64%);
  }
  .js-enabled .is-showcase .case-card.is-feature :is(.case-sector, .case-body, .cp-l) { color: #d9e4e9; }
  .js-enabled .is-showcase .case-card.is-feature .case-ico {
    color: #ffb47f; width: 42px; height: 42px; display: grid; place-items: center;
    border: 1px solid #ffffff2e; border-radius: 12px; background: #ffffff12;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .js-enabled .is-showcase .case-card.is-feature .case-proof {
    width: fit-content; padding: 10px 15px; margin-block: 22px 18px;
    border: 1px solid #ffffff26; border-left: 2px solid var(--orange); border-radius: 10px;
    background: #07162580; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .js-enabled .is-showcase .case-card.is-feature .case-tag { color: #eef4f6; border-color: #ffffff30; background: #07162580; backdrop-filter: blur(9px); }
  .js-enabled .is-showcase .case-card:not(.is-feature) {
    grid-column: 2;
    min-height: 90px; padding: 16px 118px 16px 18px;
    gap: 0 14px;
    cursor: pointer;
    color: var(--ink); border-color: #d7dfe0; border-radius: 13px;
    background: linear-gradient(125deg, #ffffffed, #edf3f2df);
    box-shadow: 0 12px 28px -26px #102940aa, inset 0 1px #fff;
    transition: background 320ms var(--lift), border-color 320ms var(--lift),
                transform 320ms var(--lift), box-shadow 320ms var(--lift);
  }
  .js-enabled .is-showcase .case-card:not(.is-feature) .case-photo {
    inset: 0 0 0 auto; width: 112px; height: 100%; opacity: .72; transform: none;
    filter: saturate(.68) contrast(1.02);
    mask-image: linear-gradient(90deg, transparent, #000 36%);
  }
  .js-enabled .is-showcase .case-card:not(.is-feature) :is(.case-sector, .case-body, .cp-l) { color: var(--muted); }
  .js-enabled .is-showcase .case-card:not(.is-feature) .case-ico { color: var(--orange-ink); }
  /* Compact rows keep only their label and headline; the body, metric and tags
     stay in the DOM for search and no-JS but are not painted in the rail. */
  .js-enabled .is-showcase .case-card:not(.is-feature) :is(.case-body, .case-proof, .case-tags) { display: none; }
  .js-enabled .is-showcase .case-card:not(.is-feature) .case-quote { font-size: 17px; line-height: 1.28; cursor: pointer; }
  .js-enabled .is-showcase .case-card .case-quote:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
  .js-enabled .is-showcase .case-card:not(.is-feature) .case-sector { margin: 2px 0 6px; }
  /* Emphasis without displacement. Sliding the row moved it out from under the
     cursor, which made the pointer re-enter its neighbour and oscillate between
     the two. Border, shadow and background carry the state instead. */
  .js-enabled .is-showcase .case-card:not(.is-feature):hover,
  .js-enabled .is-showcase .case-card:not(.is-feature):focus-within {
    border-color: #9fb2b9;
    background: #fff;
    box-shadow: 0 18px 35px -24px #102940aa;
  }
  /* The accent bar grows instead, entirely inside the row's own box. Uses
     ::after because ::before already carries the cursor spotlight (home.css). */
  .js-enabled .is-showcase .case-card:not(.is-feature)::after {
    content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 2px; height: auto; right: auto;
    border: 0; border-radius: 0; box-shadow: none; transform-origin: center;
    background: var(--orange); transform: scaleY(0);
    transition: transform 320ms var(--lift);
  }
  .js-enabled .is-showcase .case-card:not(.is-feature):hover::after,
  .js-enabled .is-showcase .case-card:not(.is-feature):focus-within::after { transform: scaleY(1); }
  /* The feature swaps in rather than sliding, so the rail never reflows. */
  .js-enabled .is-showcase .case-card.is-feature .case-quote { max-width: 520px; font-size: clamp(30px, 2.65vw, 40px); text-wrap: balance; }
  .js-enabled .is-showcase .case-card.is-feature .case-body { max-width: 570px; font-size: 13px; line-height: 1.75; margin-top: 20px; }
  .js-enabled .is-showcase .case-card.is-feature > :not(.case-photo) { animation: feature-in 540ms var(--lift) both; }
}
@keyframes feature-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes feature-photo-in { from { opacity: .2; transform: translate3d(20px, var(--work-par, 0px), 0) scale(1.12); } to { opacity: 1; transform: translate3d(0, var(--work-par, 0px), 0) scale(1.06); } }

@media (max-width: 900px) {
  #work .sector-head > div:first-child { padding-left: 17px; }
  #work .sector-head .section-p { padding: 18px; }
  #work .solutions-filter-bar { width: 100%; flex-wrap: nowrap; overflow-x: auto; border-radius: 14px; }
  #work .filter-tab { flex: 0 0 auto; }
  .js-enabled .cases-grid.is-showcase {
    display: flex; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .js-enabled .cases-grid.is-showcase::-webkit-scrollbar { display: none; }
  .js-enabled .is-showcase .case-card {
    flex: 0 0 min(86vw, 540px); min-height: 460px; padding: 30px 24px;
    align-content: end; color: #f7fafb; border-color: #ffffff36; border-radius: 17px;
    background: #0a1b2b; scroll-snap-align: center;
    box-shadow: 0 24px 54px -34px #102940d4;
  }
  .js-enabled .is-showcase .case-card .case-photo { opacity: 1; }
  .js-enabled .is-showcase .case-card::after {
    content: ''; position: absolute; inset: 0; z-index: -2; width: auto; height: auto;
    border: 0; border-radius: inherit; box-shadow: none; transform: none;
    background: linear-gradient(0deg, #071625f6 2%, #071625b8 56%, #07162524 100%);
  }
  .js-enabled .is-showcase .case-card :is(.case-sector, .case-body, .cp-l) { color: #dbe5e9; }
  .js-enabled .is-showcase .case-card .case-tag { color: #eef4f6; border-color: #ffffff2c; background: #07162587; }
  .js-enabled .is-showcase .case-card .case-ico { color: #ffb47f; }
  .js-enabled .is-showcase .case-card.is-feature { border-color: #ff9a5a99; }
  .outcome-carousel-nav { margin-inline: auto; }
  .outcome-carousel-label { display: none; }
  .js-enabled .cases-grid:not(.is-showcase) .case-card.is-filter-result { min-height: 440px; padding: 28px 23px; }
}

/* ── Process: an illuminated journey assembled by the scroll ─────────────────*/
#work { padding-bottom: clamp(30px, 3vw, 46px); }
#process-section {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(44px, 4.5vw, 68px) 0 clamp(78px, 7vw, 112px);
  color: #172a40;
  background:
    radial-gradient(ellipse at 7% 7%, #fffaf6d9, transparent 38%),
    radial-gradient(ellipse at 91% 86%, #d79d8052, transparent 40%),
    linear-gradient(135deg, #f0e9e2 0%, #e2e1e1 52%, #ced8da 100%);
}
#process-section::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#29485b0b 1px,transparent 1px),linear-gradient(90deg,#29485b0b 1px,transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
#process-section::after {
  content: ''; position: absolute; z-index: -1; width: clamp(520px,62vw,900px); aspect-ratio: 1;
  right: clamp(-330px,-20vw,-220px); top: clamp(-170px,-10vw,-90px);
  background: url('assets/logo-mark.svg') center/contain no-repeat;
  opacity: .09; filter: saturate(.68) contrast(.94);
  clip-path: inset(0 0 16% 30%);
  transform: translate3d(0,var(--process-orbit,0px),0) rotate(9deg);
}
#process-section > .container { position: relative; z-index: 1; }
#process-section .section-eyebrow { color: #5d6d79; margin-bottom: 18px; }
#process-section .section-eyebrow::before { box-shadow: 0 0 18px #fd5703a8; }
#process-section > .container > .section-h2 {
  max-width: 860px; color: #172a40; font-size: clamp(38px,4.5vw,64px); line-height: 1.04;
  letter-spacing: -.055em; text-wrap: balance;
}
#process-section > .container > .section-h2::after {
  content: ''; display: inline-block; width: .18em; height: .18em; margin-left: .16em;
  border-radius: 50%; background: var(--orange); box-shadow: 0 0 24px #fd570399;
}
.engage-grid { grid-template-columns: minmax(0,.88fr) minmax(510px,1.12fr); gap: clamp(46px,7vw,112px); margin-top: clamp(38px,4.5vw,68px); }
.engage-left {
  top: 116px; padding: 36px; border: 1px solid #ffffffd6; border-radius: 20px;
  background: linear-gradient(145deg,#ffffffe6,#ffffff78 60%,#f5f2ef9e);
  box-shadow: 0 28px 70px -48px #24394a99, inset 0 1px #fff;
  backdrop-filter: blur(18px) saturate(1.18); -webkit-backdrop-filter: blur(18px) saturate(1.18);
}
.engage-quote { position: relative; margin: 0; padding-top: 26px; color: #1b3045; font-size: clamp(25px,2.25vw,34px); line-height: 1.38; }
.engage-quote-mark {
  position: absolute; top: -21px; left: -3px; height: auto; font-size: 78px;
  color: #ff8248; opacity: .9; text-shadow: 0 0 28px #fd570366;
}
.engage-author {
  position: relative; display: grid; grid-template-columns: 52px 1fr; min-height: 74px;
  align-items: center; gap: 14px; margin-top: 30px; padding: 11px 14px;
  border: 1px solid #ffffffd9; border-radius: 14px; background: #f7faf9c7;
  box-shadow: 0 12px 28px -24px #24394aaa, inset 0 1px #fff;
  overflow: visible;
}
.engage-author-avatar {
  width: 52px; height: 52px; position: relative; z-index: 2;
  filter: drop-shadow(0 8px 15px #334b5b38) drop-shadow(0 0 12px #ff753e3d);
}
.engage-author-text strong { color: #172a40; font-size: 11px; }
.engage-author-text > span { color: #60717e; font-size: 9px; }
.process-motion-ready .engage-author-avatar { opacity: 0; transform: translate3d(-62vw,-90px,0) rotate(-420deg) scale(.25); }
.process-motion-ready.process-in .engage-author-avatar { animation: engage-logo-arrive 1250ms var(--lift) 240ms both; }
.process-motion-ready .engage-author::before {
  content: ''; position: absolute; left: -42vw; right: calc(100% - 35px); top: 50%; height: 1px;
  opacity: 0; transform: scaleX(.2); transform-origin: right;
  background: linear-gradient(90deg,transparent,#ff7a3d8f 70%,#fff);
}
.process-motion-ready.process-in .engage-author::before { animation: engage-logo-trail 900ms ease-out 260ms both; }
@keyframes engage-logo-arrive {
  0% { opacity: 0; transform: translate3d(-62vw,-90px,0) rotate(-420deg) scale(.25); }
  68% { opacity: 1; transform: translate3d(9px,0,0) rotate(14deg) scale(1.14); }
  84% { transform: translate3d(-4px,0,0) rotate(-7deg) scale(.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes engage-logo-trail { 0% { opacity: 0; transform: scaleX(.2); } 34% { opacity: .8; } 100% { opacity: 0; transform: scaleX(1); } }
.engage-cta-link {
  width: fit-content; min-height: 48px; margin-top: 22px; padding: 0 19px;
  color: #fff; border: 1px solid #ff8d557a; border-radius: 999px;
  background: linear-gradient(135deg,#fd5703,#ec4410); box-shadow: 0 12px 26px -16px #fd5703;
  transition: transform 300ms var(--lift),box-shadow 300ms var(--lift);
}
.engage-cta-link:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -16px #fd5703; }
.engage-right { position: relative; display: grid; gap: 14px; counter-reset: stage; }
.engage-right::before {
  content: ''; position: absolute; left: 38px; top: 39px; bottom: 39px; width: 1px;
  background: #29485b29; pointer-events: none;
}
.engage-progress {
  position: absolute; z-index: 3; left: 38px; width: 2px;
  top: var(--rail-top,0px); height: var(--rail-height,0px);
  border-radius: 999px; background: linear-gradient(var(--orange),#ffad73);
  box-shadow: 0 0 16px #fd57037d; transform-origin: top;
  transform: scaleY(var(--trace,0)); transition: transform 180ms linear; pointer-events: none;
}
.engage-card {
  position: relative; min-height: 126px; margin: 0; padding: 24px 84px 24px 86px;
  border: 1px solid #ffffffd6; border-radius: 17px; overflow: hidden;
  background: linear-gradient(130deg,#ffffffe0,#ffffff78 62%,#f6f3f0a6);
  box-shadow: 0 17px 42px -34px #24394a99, inset 0 1px #fff;
  backdrop-filter: blur(15px) saturate(1.15); -webkit-backdrop-filter: blur(15px) saturate(1.15);
  transition: transform 620ms var(--lift),opacity 520ms var(--lift),filter 520ms var(--lift),border-color 320ms var(--lift),background 320ms var(--lift),box-shadow 320ms var(--lift);
}
.engage-card::before {
  content: '0' counter(stage); top: 25px; left: 20px; z-index: 4; width: 38px; height: 38px;
  color: #526675; border: 1px solid #ffffffeb; border-radius: 50%; background: #eef3f2;
  box-shadow: 0 0 0 6px #dce4e3,0 7px 17px #2b475d20; font: 9px var(--f-mono);
}
.engage-card::after,.engage-card:last-child::after {
  display: block; content: ''; position: absolute; inset: 0 auto 0 0; z-index: 2;
  width: 3px; height: auto; border: 0; background: linear-gradient(transparent,var(--orange),transparent);
  transform: scaleY(0); transform-origin: center; opacity: .85;
  transition: transform 520ms var(--lift);
}
.engage-card > .hex-icon {
  display: grid; position: absolute; right: 24px; top: 24px; opacity: .7;
  transform: rotate(-8deg) scale(.92); transition: transform 520ms var(--lift),filter 520ms var(--lift),opacity 520ms var(--lift);
}
.engage-card-badge { color: #c4450b; padding-top: 0; margin-bottom: 7px; transition: color 320ms var(--lift),letter-spacing 320ms var(--lift); }
.engage-card-title { color: #172a40; font-size: clamp(21px,1.7vw,26px); }
.engage-card p { max-width: 520px; color: #526675; font-size: 11px; line-height: 1.7; margin-top: 8px; }
.js-enabled .engage-card:not(.step-reached) { opacity: .34; filter: blur(1.5px) saturate(.7); }
.js-enabled .engage-card:nth-child(odd):not(.step-reached) { transform: translate3d(42px,20px,0) scale(.97); }
.js-enabled .engage-card:nth-child(even):not(.step-reached) { transform: translate3d(-34px,20px,0) scale(.97); }
.engage-card.step-reached { border-color: #fff; background: linear-gradient(130deg,#fffffff2,#ffffffa3 62%,#ffd7c2b5); box-shadow: 0 22px 48px -34px #24394aaa,inset 0 1px #fff; }
.engage-card.step-reached::before { color: #fff; background: var(--orange); border-color: #ffb486; box-shadow: 0 0 0 6px #e3e8e7,0 0 24px #fd57035c; }
.engage-card.step-reached::after { transform: scaleY(1); }
.engage-card.active:not(.step-reached)::before { color: #526675; border-color: #ffffffeb; background: #eef3f2; }
.engage-card.active:not(.step-reached)::after { transform: scaleY(0); }
.engage-card.step-reached > .hex-icon { opacity: 1; transform: rotate(0) scale(1.03); filter: drop-shadow(0 6px 15px #fd57034d); }
.engage-card.step-reached .engage-card-badge { color: #b83c00; letter-spacing: .16em; }
.engage-card:hover { border-color: #fff; background: linear-gradient(130deg,#fff,#ffffffb8); }

@media (max-width: 900px) {
  #work { padding-bottom: 34px; }
  #process-section { padding-top: 46px; }
  .engage-grid { grid-template-columns: 1fr; gap: 28px; }
  .engage-left { position: static; padding: 28px; }
  .engage-right { gap: 12px; }
  .engage-card { padding: 22px 72px 22px 74px; }
  .engage-right::before,.engage-progress { left: 32px; }
  .engage-card::before { left: 13px; }
  .engage-card > .hex-icon { right: 17px; top: 21px; }
}

@media (max-width: 520px) {
  #process-section::after { right: -230px; top: -45px; clip-path: inset(0 0 24% 26%); opacity: .075; }
  #process-section > .container > .section-h2 { font-size: 38px; }
  .engage-left { padding: 23px 20px; }
  .engage-quote { font-size: 25px; }
  .engage-card { min-height: 145px; padding: 23px 58px 23px 62px; }
  .engage-right::before,.engage-progress { left: 27px; }
  .engage-card::before { left: 8px; top: 24px; }
  .engage-card > .hex-icon { right: 12px; top: 23px; transform: scale(.78); }
  .engage-card-title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-enabled .is-showcase .case-card.is-feature > * { animation: none; }
  .js-enabled .is-showcase .case-card:not(.is-feature):hover { transform: none; }
  .engage-progress { transition: none; transform: scaleY(1); }
  .js-enabled .engage-card:not(.step-reached) { opacity: 1; filter: none; transform: none; }
  .process-motion-ready .engage-author-avatar { opacity: 1; transform: none; animation: none; }
  .process-motion-ready .engage-author::before { display: none; }
  .engage-card, .js-enabled .engage-card .hex-icon, .engage-card-badge { transition: none; }
}

/* ── Services: the pipeline runs on arrival ──────────────────────────────────
   `pipe-armed` is added by script and only ever hides lines once the script has
   confirmed it can also reveal them, so a failed load leaves the terminal fully
   readable. */
.js-enabled .pipe-card.pipe-armed .pipe-line { opacity: 0; transform: translateY(4px); }
.js-enabled .pipe-card.pipe-running .pipe-line {
  opacity: 1; transform: none;
  transition: opacity 300ms var(--lift) var(--line-delay, 0ms),
              transform 300ms var(--lift) var(--line-delay, 0ms);
}
.pipe-step { transition: background 320ms var(--lift), opacity 320ms var(--lift); }
.pipe-cursor { animation: pipe-blink 1.1s steps(2, start) infinite; }
@keyframes pipe-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ── About: principles collapse until asked for ──────────────────────────────*/
.pr-toggle {
  display: block; width: 100%; text-align: left; padding: 0; margin: 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.pr-toggle h3 { display: flex; align-items: flex-start; gap: 12px; }
/* A chevron drawn from a border, so it needs no extra markup or icon request. */
.pr-toggle h3::after {
  content: ''; flex: none; margin-left: auto; margin-top: .45em;
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  opacity: .5; transform: rotate(45deg); transform-origin: center;
  transition: transform 320ms var(--lift), opacity 320ms var(--lift);
}
.pr-toggle:hover h3::after { opacity: 1; }
.pr-toggle[aria-expanded="true"] h3::after { transform: rotate(-135deg); opacity: .9; }
.pr-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.js-enabled .principle.is-collapsible .pr-detail {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 420ms var(--lift), opacity 300ms var(--lift);
}
.js-enabled .principle.is-collapsible.is-open .pr-detail { grid-template-rows: 1fr; opacity: 1; }
.js-enabled .principle.is-collapsible .pr-detail > p { overflow: hidden; margin-top: 0; }
/* Collapsed rows should not hold the height of their open neighbour: let each
   grid row size to its own content instead of stretching to the tallest. */
.js-enabled .principle-grid { align-items: start; }
.js-enabled .principle.is-collapsible { align-self: start; }

@media (prefers-reduced-motion: reduce) {
  .js-enabled .pipe-card.pipe-armed .pipe-line { opacity: 1; transform: none; }
  .js-enabled .pipe-card .pipe-line { transition: none; }
  .pipe-cursor { animation: none; }
  .pr-toggle h3::after, .js-enabled .principle.is-collapsible .pr-detail { transition: none; }
}

/* ── Light-section atmosphere ────────────────────────────────────────────────
   A flat fill reads as unfinished at this scale. Each light section gets two
   very low-opacity warm pools plus a fine grain, so the surface has a direction
   to it without becoming a visible gradient. Purely decorative and behind all
   content, so it can never affect contrast of text sitting on it. */
#services-home, #work, #cta-main, #faq-pointer {
  position: relative; isolation: isolate;
}
#services-home::after, #work::after, #cta-main::after, #faq-pointer::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 48% at 88% 8%, #ffd9b83d, transparent 62%),
    radial-gradient(48% 42% at 4% 92%, #e7d3bb45, transparent 66%);
}
#work::after {
  background:
    radial-gradient(58% 52% at 88% 6%, #a8c1cc3d, transparent 68%),
    radial-gradient(48% 42% at 2% 92%, #ffd9bd3b, transparent 68%);
}
/* Grain sits above the pools but still behind content: it is what stops large
   warm areas from banding on wide gradients. */
#services-home::before, #work::before, #cta-main::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
/* Cards lift off the warmed background with a soft, warm-tinted shadow rather
   than the neutral grey one, which looked like dirt over ivory. */
.case-card { box-shadow: 0 2px 4px #a8794a12, 0 10px 26px #a8794a0e; }
.case-card:hover { box-shadow: 0 18px 38px #8b5e3418; }

/* ── Stats band: a glass plate lit by the scroll ─────────────────────────────
   The figures sit on a translucent panel rather than straight on the fill, and
   a soft light travels across it as the band passes through the viewport, so
   the strip has something arriving rather than being a flat stripe.
   --sweep is written by interactive.js: 0 as the band enters, 1 as it leaves. */
#stats-band { position: relative; isolation: isolate; overflow: hidden; --sweep: .5; }
#stats-band .stats-row {
  position: relative; z-index: 1;
  padding: 26px 30px; border-radius: 14px;
  background: linear-gradient(140deg, #ffffff14, #ffffff06 55%, #ffffff0f);
  border: 1px solid #ffffff24;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 18px 44px #00000038, inset 0 1px #ffffff2b;
}
/* The travelling light. Positioned from --sweep, so it is driven by scroll
   position rather than a timer — nothing animates while the band is off screen. */
#stats-band .stats-row::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none; overflow: hidden;
  background: radial-gradient(60% 140% at calc(var(--sweep) * 100%) 42%,
              #7fd4e024 0%, #ff8a4514 38%, transparent 72%);
}
/* A hairline that brightens where the light currently is. */
#stats-band .stats-row::after {
  content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent,
              #bfe9f0b3 calc(var(--sweep) * 100%), transparent);
}
@media (prefers-reduced-motion: reduce) {
  /* Park the light in the middle instead of tracking the scroll. */
  #stats-band { --sweep: .5 !important; }
}

/* ── Signal cards ────────────────────────────────────────────────────────────
   The hero scene already speaks in circuit traces, so these two panels carry
   the same language rather than a generic fade: a packet runs the perimeter,
   and the contents sit at different depths that respond to the pointer.
   The SVG is sized in real pixels by script, so the corner radius and the
   stroke stay true at any width. */
.signal-frame { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; border-radius: inherit; }
.signal-frame rect { fill: none; vector-effect: non-scaling-stroke; }
.signal-track { stroke: #ffffff1c; stroke-width: 1; }
/* Two packets, half a lap apart, so the card always has something in motion
   without either trace feeling hurried. */
.signal-pulse { stroke: var(--signal, #ff9d5a); stroke-width: 1.6; stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--signal-glow, #ff9d5a80));
  animation: signal-run var(--signal-speed, 7s) linear infinite; }
.signal-pulse.is-second { animation-delay: calc(var(--signal-speed, 7s) / -2); opacity: .55; }
@keyframes signal-run { to { stroke-dashoffset: var(--signal-end, -1000); } }

/* Depth: each layer answers the pointer by a different amount, so the card
   reads as having thickness rather than being a flat rectangle. */
.depth-card { --px: 0; --py: 0; }
.depth-card [data-depth] {
  transform: translate3d(calc(var(--px) * var(--depth, 0) * 1px),
                         calc(var(--py) * var(--depth, 0) * 1px), 0);
  transition: transform 420ms var(--lift);
}
.depth-card.is-live [data-depth] { transition: transform 120ms linear; }

@media (prefers-reduced-motion: reduce) {
  .signal-pulse { animation: none; opacity: 0; }
  .depth-card [data-depth] { transform: none; transition: none; }
}
@media (hover: none) {
  .depth-card [data-depth] { transform: none; }
}

/* ── Trust ticker ────────────────────────────────────────────────────────────
   Restored marquee. Only applies once the script has cloned the pills, so an
   un-cloned track never slides half of itself off screen and out of reach. */
#trust-bar { overflow: hidden; }
.js-enabled .trust-inner[data-ticker="on"] {
  width: max-content; max-width: none; flex-wrap: nowrap;
  justify-content: flex-start; gap: 0;
  animation: trust-ticker 42s linear infinite;
}
/* Pause on hover and on keyboard focus, so a reader can stop and look. */
.js-enabled .trust-inner[data-ticker="on"]:hover,
.js-enabled .trust-inner[data-ticker="on"]:focus-within { animation-play-state: paused; }
.js-enabled .trust-inner[data-ticker="on"] .trust-pill { padding-inline: 26px; white-space: nowrap; }
.js-enabled .trust-inner[data-ticker="on"] .trust-label-text { padding-right: 12px; white-space: nowrap; }
@keyframes trust-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  /* No sliding: fall back to the static row, and hide the duplicate pills so
     the list is not silently repeated for anyone reading it. */
  .js-enabled .trust-inner[data-ticker="on"] { animation: none; width: auto; flex-wrap: wrap; }
  .js-enabled .trust-inner[data-ticker="on"] .trust-pill[aria-hidden="true"] { display: none; }
}

/* ── Metric counters ─────────────────────────────────────────────────────────
   Tabular figures stop the width jitter while a number counts up. */
.stat-num, .hm-num { font-variant-numeric: tabular-nums; }

/* ── Mission: rows that respond ──────────────────────────────────────────────*/
.value-card { position: relative; padding: 18px 20px; border-radius: 10px;
  transition: background 300ms var(--lift), transform 300ms var(--lift); }
.value-card::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: var(--orange); transform: scaleY(0); transform-origin: top;
  transition: transform 420ms var(--lift); }
.value-card:hover { background: #ffffff0a; transform: translateX(5px); }
.value-card:hover::before { transform: scaleY(1); }
/* Parallax on the mission photograph; translate only, so it stays composited. */
.mission-image img { will-change: transform; }
.js-enabled .mission-image img { transform: translate3d(0, var(--par, 0px), 0); }

/* ── Buttons ─────────────────────────────────────────────────────────────────
   Shared premium behaviour: a sheen that crosses on hover and an arrow that
   moves with it. The magnetic offset is written by JS as a custom property. */
.btn-dk-primary, .btn-dk-outline, .btn-secondary, .nav-cta {
  position: relative; overflow: hidden;
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
}
.btn-dk-primary::after, .nav-cta::after, .btn-secondary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, #ffffff5c 50%, transparent 68%);
  transform: translateX(-120%); transition: transform 620ms var(--lift);
}
.btn-dk-primary:hover::after, .nav-cta:hover::after, .btn-secondary:hover::after { transform: translateX(120%); }
.btn-dk-primary svg, .btn-secondary svg { transition: transform 300ms var(--lift); }
.btn-dk-primary:hover svg, .btn-secondary:hover svg { transform: translateX(4px); }
.btn-dk-outline { transition: background 260ms var(--lift), border-color 260ms var(--lift), transform 260ms var(--lift); }
.btn-dk-outline:hover { background: #ffffff12; border-color: #ffffff5c; }
/* Focus must never be traded away for polish. */
.btn-dk-primary:focus-visible, .btn-dk-outline:focus-visible,
.btn-secondary:focus-visible, .nav-cta:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ── Reduced motion: every enhancement above collapses to a static layout ────*/
@media (prefers-reduced-motion: reduce) {
  .js-enabled .rv { opacity: 1; transform: none; }
  .js-enabled .rv-in { transition: none; }
  .why-point, .why-check, .value-card, .value-card::before,
  .compare-glass tbody tr, .glass::after { transition: none; }
  .why-point:hover, .value-card:hover { transform: none; }
  .btn-dk-primary::after, .nav-cta::after, .btn-secondary::after { display: none; }
  .btn-dk-primary, .btn-dk-outline, .btn-secondary, .nav-cta { transform: none; }
  .js-enabled .mission-image img { transform: none; }
}
/* Touch devices get the states without the pointer-only affordances. */
@media (hover: none) {
  .glass::after { display: none; }
  .why-point:hover, .value-card:hover { transform: none; }
}

/* ── DevOps: a live delivery studio ─────────────────────────────────────────
   The first detailed service is treated as its own visual chapter: editorial
   photography, an operable story carousel and a pipeline that feels attached
   to the scene rather than placed beside it. */
#devops {
  --devops-ink: #102a3d;
  --devops-soft: #4d6573;
  isolation: isolate;
  padding-block: clamp(72px, 7vw, 110px);
  background:
    radial-gradient(44% 62% at 94% 8%, #c8daddcf 0%, transparent 72%),
    radial-gradient(40% 54% at 2% 92%, #f7d7c1b8 0%, transparent 70%),
    linear-gradient(128deg, #f5f7f4 0%, #e8efee 46%, #d8e3e5 72%, #eee6df 100%);
}
#devops::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(#2844520b 1px, transparent 1px),
    linear-gradient(90deg, #2844520b 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(90deg, #000 0%, #0008 54%, transparent 92%);
}
#devops .atmosphere { opacity: .14; mix-blend-mode: multiply; }
#devops .atmosphere-image {
  object-position: 68% 50%;
  filter: saturate(.56) contrast(.88) brightness(1.08) blur(.5px);
}
#devops .atmosphere-frost::after {
  background:
    linear-gradient(90deg, #f4f7f4fb 0%, #eef3f0ed 37%, #e6edebc9 68%, #e7e4dfdf 100%),
    linear-gradient(0deg, #edf1eede, transparent 48%, #f2f4f1e6);
}
.devops-watermark {
  position: absolute !important;
  z-index: 0 !important;
  width: min(520px, 34vw);
  height: auto;
  right: -9vw;
  bottom: -16%;
  opacity: .045;
  transform: translate3d(0, var(--devops-par, 0px), 0) rotate(-14deg);
  filter: grayscale(.55) saturate(.65);
  pointer-events: none;
}
#devops .svc-full-grid {
  grid-template-columns: minmax(0, .91fr) minmax(520px, 1.09fr);
  gap: clamp(44px, 5.5vw, 88px);
  align-items: center;
}
.devops-copy { position: relative; z-index: 2; }
.devops-index {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
  color: #405c69;
  font: 600 10px/1 var(--f-mono);
  letter-spacing: .18em;
}
.devops-index::after { content: ''; width: 56px; height: 1px; background: linear-gradient(90deg, #e24e0a, transparent); }
.devops-index span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  color: #fff;
  background: #ec520d;
  box-shadow: 0 8px 22px #d74a153b, inset 0 1px #ffffff78;
}
#devops .svc-full-grid h2 {
  max-width: 660px;
  margin-bottom: 24px;
  color: var(--devops-ink);
  font-size: clamp(42px, 4.15vw, 65px);
  line-height: .99;
  letter-spacing: -.055em;
}
#devops .svc-full-grid h2 .grad { color: #c8450b; }
#devops .svc-full-grid .lead {
  position: relative;
  margin: 0;
  padding: 20px 22px 20px 25px;
  border: 1px solid #ffffffb8;
  border-radius: 0 17px 17px 0;
  color: #3e5867;
  background: linear-gradient(110deg, #ffffffb8, #ffffff70);
  box-shadow: 0 18px 38px -34px #1731418f, inset 0 1px #fff;
  backdrop-filter: blur(14px);
  font-size: 13px;
  line-height: 1.82;
}
#devops .svc-full-grid .lead::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(#fd5703, #ffb17d);
  box-shadow: 0 0 17px #fd57035c;
}
#devops .svc-feature-list {
  counter-reset: devops-feature;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 16px 0 18px;
  border: 0;
}
#devops .svc-feature-list li {
  counter-increment: devops-feature;
  min-height: 70px;
  padding: 14px 14px 14px 46px;
  border: 1px solid #ffffffad;
  border-radius: 13px;
  color: #405967;
  background: linear-gradient(130deg, #ffffffe0, #ffffff72);
  box-shadow: 0 13px 32px -29px #173449c4, inset 0 1px #fff;
  font-size: 10.5px;
  line-height: 1.55;
  transition: transform 380ms var(--lift), border-color 380ms var(--lift), box-shadow 380ms var(--lift);
  backdrop-filter: blur(12px);
}
#devops .svc-feature-list li::before {
  content: counter(devops-feature, decimal-leading-zero);
  left: 14px;
  top: 15px;
  color: #d64a0a;
  font: 700 9px/1 var(--f-mono);
  letter-spacing: -.04em;
}
#devops .svc-feature-list li:hover {
  transform: translateY(-3px);
  border-color: #ffb589;
  box-shadow: 0 18px 38px -26px #ac542c75, inset 0 1px #fff;
}
#devops .svc-tool-chips {
  position: relative;
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding-block: 3px 7px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
#devops .devops-chip-track { display: flex; width: max-content; gap: 8px; animation: devops-chip-loop 24s linear infinite; }
#devops .svc-tool-chips:hover .devops-chip-track { animation-play-state: paused; }
#devops .svc-tool-chip {
  flex: none;
  padding: 8px 11px;
  border: 1px solid #ffffffc9;
  border-radius: 999px;
  color: #314c5b;
  background: #ffffff8f;
  box-shadow: inset 0 1px #fff;
  backdrop-filter: blur(12px);
}
@keyframes devops-chip-loop { to { transform: translateX(calc(-50% - 4px)); } }

.devops-visual {
  padding: 10px;
  overflow: hidden;
  border-color: #ffffffc2;
  border-radius: 25px;
  background: linear-gradient(145deg, #ffffffb8, #e8efee8f);
  box-shadow: 0 42px 95px -38px #193b4c9c, 0 14px 34px -28px #172f3e, inset 0 1px #fff;
  backdrop-filter: blur(25px) saturate(1.15);
}
#devops .svc-visual-card:hover {
  transform: perspective(1200px) rotateX(1deg) rotateY(-1deg) translateY(-5px);
  box-shadow: 0 55px 110px -42px #173b4fa6, 0 18px 38px -30px #172f3e, inset 0 1px #fff;
}
.devops-media {
  position: relative;
  min-height: clamp(330px, 31vw, 430px);
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  background: #0c2131;
  box-shadow: inset 0 0 0 1px #ffffff25;
}
.devops-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 850ms var(--lift), visibility 850ms; }
.devops-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #06162176 0%, transparent 38%, #071925dc 100%), linear-gradient(90deg, #0719255c, transparent 58%);
}
.devops-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.055) translateX(1.2%);
  filter: saturate(.86) contrast(1.02);
  transition: transform 6.8s cubic-bezier(.2,.65,.2,1);
}
.devops-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.devops-slide.is-active img { transform: scale(1.01) translateX(0); }
.devops-slide figcaption {
  position: absolute;
  z-index: 3;
  left: 22px;
  bottom: 22px;
  display: grid;
  gap: 4px;
  max-width: min(370px, calc(100% - 150px));
  padding: 13px 16px;
  border: 1px solid #ffffff3b;
  border-radius: 13px;
  background: #071b29a8;
  box-shadow: 0 16px 38px -24px #000;
  backdrop-filter: blur(15px);
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 520ms var(--lift) 180ms, transform 520ms var(--lift) 180ms;
}
.devops-slide.is-active figcaption { opacity: 1; transform: none; }
.devops-slide figcaption strong { font: 600 16px/1.2 var(--f-display); letter-spacing: -.02em; }
.devops-slide figcaption span { color: #d8e3e7; font-size: 9px; line-height: 1.45; }
.devops-media-head {
  position: absolute;
  z-index: 4;
  top: 16px;
  left: 17px;
  right: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #eff7f7;
  font: 500 9px/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.devops-media-head > span { display: flex; align-items: center; gap: 8px; }
.devops-media-head img { width: 25px; height: 25px; padding: 3px; border-radius: 50%; background: #ffffffeb; box-shadow: 0 5px 18px #0006; }
.devops-media-head b { font-weight: 500; }
.devops-slide-count { padding: 8px 10px; border: 1px solid #ffffff39; border-radius: 999px; background: #0b1f2d73; backdrop-filter: blur(10px); }
.devops-pipeline-label {
  position: relative;
  z-index: 4;
  width: max-content;
  margin: -11px 0 0 20px;
  padding: 7px 11px;
  border: 1px solid #ffffff6b;
  border-radius: 999px;
  color: #d9e9ec;
  background: #0d293aa8;
  backdrop-filter: blur(12px);
}
#devops .pipe-card {
  position: relative;
  z-index: 3;
  margin: 8px 8px 0;
  border: 1px solid #ffffff1c;
  border-radius: 15px;
  background: linear-gradient(145deg, #081b2b, #0c2436);
  box-shadow: 0 18px 38px -28px #07141f;
}
#devops .pipe-body { min-height: 120px; }
#devops .svc-stat-grid { gap: 7px; margin: 9px 8px 0; border: 0; border-radius: 13px; background: transparent; }
#devops .svc-stat-box {
  border: 1px solid #ffffffb8;
  border-radius: 12px;
  background: linear-gradient(130deg, #ffffffe6, #ffffff8c);
  box-shadow: inset 0 1px #fff;
  transition: transform 350ms var(--lift), border-color 350ms;
}
#devops .svc-stat-box:hover { transform: translateY(-3px); border-color: #ffb58d; }
#devops .svc-stat-box .n { color: #153047; }
#devops .svc-stat-box .l { color: #5d707c; }
#devops .svc-highlight {
  margin: 9px 8px 8px;
  border: 1px solid #ffffffa6;
  border-radius: 12px;
  color: #506774;
  background: #ffffff89;
  backdrop-filter: blur(12px);
}

/* Replays whenever the chapter returns to the viewport. */
.js-enabled #devops.devops-motion-ready .devops-index,
.js-enabled #devops.devops-motion-ready .devops-copy > .lead,
.js-enabled #devops.devops-motion-ready .svc-feature-list li,
.js-enabled #devops.devops-motion-ready .svc-tool-chips,
.js-enabled #devops.devops-motion-ready .devops-visual {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}
.js-enabled #devops.devops-in .devops-index,
.js-enabled #devops.devops-in .devops-copy > .lead,
.js-enabled #devops.devops-in .svc-feature-list li,
.js-enabled #devops.devops-in .svc-tool-chips,
.js-enabled #devops.devops-in .devops-visual {
  opacity: 1;
  transform: none;
  transition: opacity 680ms var(--lift), transform 680ms var(--lift);
}
.js-enabled #devops.devops-in .devops-copy > .lead { transition-delay: 190ms; }
.js-enabled #devops.devops-in .svc-feature-list li { transition-delay: calc(250ms + var(--devops-i, 0) * 55ms); }
.js-enabled #devops.devops-in .svc-tool-chips { transition-delay: 700ms; }
.js-enabled #devops.devops-in .devops-visual { transition-delay: 110ms; }

@media (max-width: 1100px) {
  #devops .svc-full-grid { grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); gap: 38px; }
  #devops .svc-full-grid h2 { font-size: clamp(39px, 4.5vw, 54px); }
  #devops .svc-feature-list { grid-template-columns: 1fr; }
  #devops .svc-feature-list li { min-height: 0; }
}
@media (max-width: 900px) {
  #devops { padding-block: 62px; }
  #devops .svc-full-grid { grid-template-columns: 1fr; gap: 38px; }
  #devops .svc-full-grid > :last-child { width: 100%; }
  #devops .svc-feature-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .devops-watermark { width: 430px; right: -210px; bottom: 16%; }
  .devops-media { min-height: 410px; }
}
@media (max-width: 600px) {
  #devops { padding-block: 50px; }
  #devops .svc-full-grid h2 { font-size: 39px; }
  #devops .svc-full-grid .lead { padding: 17px 17px 17px 20px; }
  #devops .svc-feature-list { grid-template-columns: 1fr; }
  #devops .svc-feature-list li { padding-block: 13px; }
  .devops-visual { padding: 7px; border-radius: 20px; }
  .devops-media { min-height: 310px; border-radius: 15px; }
  .devops-slide figcaption { left: 13px; right: 13px; bottom: 13px; max-width: none; }
  .devops-media-head { top: 12px; left: 12px; right: 12px; }
  .devops-media-head b { display: none; }
  .devops-pipeline-label { margin-left: 12px; }
  #devops .pipe-card, #devops .svc-stat-grid, #devops .svc-highlight { margin-inline: 2px; }
  #devops .pipe-body { min-height: 0; padding: 15px 12px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .devops-watermark { transform: rotate(-14deg); }
  #devops .devops-chip-track { animation: none; }
  #devops .devops-chip-track [aria-hidden="true"] { display: none; }
  .devops-slide img, .devops-slide figcaption,
  .js-enabled #devops.devops-motion-ready .devops-index,
  .js-enabled #devops.devops-motion-ready .devops-copy > .lead,
  .js-enabled #devops.devops-motion-ready .svc-feature-list li,
  .js-enabled #devops.devops-motion-ready .svc-tool-chips,
  .js-enabled #devops.devops-motion-ready .devops-visual { transition: none; transform: none; opacity: 1; }
}

/* ── Detailed solutions: five different interactive chapters ────────────────*/
#security, #operations, #cloud, #ai-agents, #app-development {
  isolation: isolate;
  padding-block: clamp(78px, 8vw, 122px);
}
#security {
  color: #fff;
  background:
    radial-gradient(55% 60% at 4% 12%, #263b58 0%, transparent 68%),
    radial-gradient(42% 54% at 96% 92%, #374151 0%, transparent 72%),
    linear-gradient(128deg, #101722, #1b2635 52%, #273448);
}
#operations {
  background:
    radial-gradient(48% 55% at 94% 4%, #bed3c9d4, transparent 70%),
    radial-gradient(45% 52% at 3% 96%, #f1cfb4ba, transparent 72%),
    linear-gradient(130deg, #f5f7f1, #e3ece5 55%, #d9e5e1);
}
#cloud {
  color: #173047;
  background:
    radial-gradient(50% 62% at 3% 5%, #c5dce7d6, transparent 70%),
    radial-gradient(44% 56% at 96% 92%, #f3cdb0bf, transparent 72%),
    linear-gradient(132deg, #f5f6f2, #deeaed 48%, #eee6dc);
}
#ai-agents {
  background:
    radial-gradient(45% 58% at 93% 8%, #cfc8e6d1, transparent 72%),
    radial-gradient(48% 58% at 4% 92%, #efd2bfbd, transparent 72%),
    linear-gradient(132deg, #f8f5f3, #ece8f2 52%, #e2e6ee);
}
#app-development {
  color: #253037;
  background:
    radial-gradient(45% 58% at 4% 8%, #dfc8b9d1, transparent 72%),
    radial-gradient(48% 58% at 96% 94%, #bfdbd0c7, transparent 72%),
    linear-gradient(132deg, #f7f2ed, #eadfd7 48%, #e1ebe6);
}
#security::before, #operations::before, #cloud::before, #ai-agents::before, #app-development::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(#71808b0c 1px,transparent 1px),linear-gradient(90deg,#71808b0c 1px,transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
}
#security::before { background-image: linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px); }
#security .atmosphere { opacity: .18; mix-blend-mode: screen; }
#operations .atmosphere, #cloud .atmosphere, #ai-agents .atmosphere, #app-development .atmosphere { opacity: .11; mix-blend-mode: multiply; }
#security .atmosphere-chapter::after { background: linear-gradient(90deg,#0d1420f7 0%,#182434e3 48%,#27354ac2),linear-gradient(0deg,#0d1420eb,transparent 50%,#151f2deb); }
#operations .atmosphere-frost::after { background: linear-gradient(90deg,#f2f6f1f5,#e8efe9d5 55%,#dce8e3c9),linear-gradient(0deg,#e8eee9db,transparent,#eef3eee8); }
#cloud .atmosphere-chapter::after { background: linear-gradient(90deg,#f1f4f0ed,#e5edefcf 52%,#eee6dccc),linear-gradient(0deg,#edf0ecdf,transparent,#eff2efdf); }
#ai-agents .atmosphere-frost::after { background: linear-gradient(90deg,#f5f2f2ef,#eeeaf2d2 52%,#e4e6edc9),linear-gradient(0deg,#ece9efdd,transparent,#f2eff1e2); }
#app-development .atmosphere-chapter::after { background: linear-gradient(90deg,#f4eee9ef,#e9dfd8cf 52%,#e2eae5c9),linear-gradient(0deg,#ebe5e0db,transparent,#f0ebe7df); }

.solution-watermark {
  position: absolute !important;
  z-index: 0 !important;
  width: min(560px, 38vw);
  height: auto;
  opacity: 0;
  pointer-events: none;
  filter: grayscale(.65) saturate(.62);
  transition: opacity 900ms var(--lift), transform 1050ms var(--lift);
}
#security .solution-watermark, #cloud .solution-watermark, #app-development .solution-watermark { left: -12vw; bottom: -17%; transform: translate3d(-150px,var(--solution-par,0),0) rotate(15deg); }
#operations .solution-watermark, #ai-agents .solution-watermark { right: -12vw; top: -12%; transform: translate3d(150px,var(--solution-par,0),0) rotate(-15deg); }
#security.solution-in .solution-watermark, #cloud.solution-in .solution-watermark, #app-development.solution-in .solution-watermark { opacity: .05; transform: translate3d(0,var(--solution-par,0),0) rotate(15deg); }
#operations.solution-in .solution-watermark, #ai-agents.solution-in .solution-watermark { opacity: .045; transform: translate3d(0,var(--solution-par,0),0) rotate(-15deg); }
#security .solution-watermark { filter: brightness(0) invert(1); opacity: 0; }
#security.solution-in .solution-watermark { opacity: .055; }

#security .svc-full-grid, #operations .svc-full-grid, #cloud .svc-full-grid, #ai-agents .svc-full-grid, #app-development .svc-full-grid {
  align-items: center;
  gap: clamp(45px, 6vw, 92px);
}
#security .svc-full-grid { grid-template-columns: minmax(520px,1.08fr) minmax(0,.92fr); }
#operations .svc-full-grid { grid-template-columns: minmax(0,.84fr) minmax(540px,1.16fr); }
#cloud .svc-full-grid { grid-template-columns: minmax(540px,1.14fr) minmax(0,.86fr); }
#ai-agents .svc-full-grid { grid-template-columns: minmax(0,.9fr) minmax(530px,1.1fr); }
#app-development .svc-full-grid { grid-template-columns: minmax(540px,1.18fr) minmax(0,.82fr); }
.solution-copy { position: relative; z-index: 2; }
.solution-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 19px;
  color: #506874;
  font: 600 9px/1 var(--f-mono);
  letter-spacing: .16em;
}
.solution-index::after { content: ''; width: 48px; height: 1px; background: linear-gradient(90deg,#e45516,transparent); }
.solution-index span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  background: #ed570f;
  box-shadow: 0 9px 22px #cf4a1940,inset 0 1px #ffffff70;
}
.solution-index b { font: inherit; }
#security .solution-index { color: #d7c8cb; }
#security .solution-index span { background: #ff7133; }
#security .solution-index::after { background: linear-gradient(90deg,#ff854f,transparent); }
#security .svc-full-grid h2, #operations .svc-full-grid h2, #cloud .svc-full-grid h2, #ai-agents .svc-full-grid h2, #app-development .svc-full-grid h2 {
  margin-bottom: 24px;
  font-size: clamp(42px,4vw,62px);
  line-height: 1;
  letter-spacing: -.055em;
}
#security .svc-full-grid h2 { color: #fff; }
#security .svc-full-grid h2 .grad { color: #ff9b6f; }
#operations .svc-full-grid h2, #cloud .svc-full-grid h2, #ai-agents .svc-full-grid h2, #app-development .svc-full-grid h2 { color: #173047; }
#operations .svc-full-grid h2 .grad { color: #b34416; }
#cloud .svc-full-grid h2 .grad { color: #b84a16; }
#ai-agents .svc-full-grid h2 .grad { color: #704c8c; }
#app-development .svc-full-grid h2 .grad { color: #a44921; }
#security .svc-full-grid .lead, #operations .svc-full-grid .lead, #cloud .svc-full-grid .lead, #ai-agents .svc-full-grid .lead, #app-development .svc-full-grid .lead {
  margin: 0;
  padding: 19px 21px;
  border: 1px solid #ffffffb0;
  border-radius: 16px;
  color: #415b69;
  background: linear-gradient(130deg,#ffffffe3,#ffffff78);
  box-shadow: 0 18px 42px -35px #1836489c,inset 0 1px #fff;
  backdrop-filter: blur(15px);
  font-size: 13px;
  line-height: 1.82;
}
#security .svc-full-grid .lead { border-color: #ffffff25; color: #dfd5d7; background: linear-gradient(130deg,#ffffff12,#ffffff07); box-shadow: inset 0 1px #ffffff16; }
#security .svc-feature-list, #operations .svc-feature-list, #cloud .svc-feature-list, #ai-agents .svc-feature-list, #app-development .svc-feature-list {
  counter-reset: solution-feature;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  margin: 16px 0 18px;
  border: 0;
}
#security .svc-feature-list li, #operations .svc-feature-list li, #cloud .svc-feature-list li, #ai-agents .svc-feature-list li, #app-development .svc-feature-list li {
  counter-increment: solution-feature;
  min-height: 66px;
  padding: 13px 13px 13px 43px;
  border: 1px solid #ffffffb5;
  border-radius: 12px;
  color: #425b68;
  background: linear-gradient(130deg,#ffffffe2,#ffffff72);
  box-shadow: 0 14px 30px -29px #19384fb5,inset 0 1px #fff;
  font-size: 10px;
  line-height: 1.5;
  backdrop-filter: blur(12px);
  transition: transform 340ms var(--lift), border-color 340ms, background 340ms;
}
#security .svc-feature-list li::before, #operations .svc-feature-list li::before, #cloud .svc-feature-list li::before, #ai-agents .svc-feature-list li::before, #app-development .svc-feature-list li::before {
  content: counter(solution-feature,decimal-leading-zero);
  left: 13px;
  top: 14px;
  color: #cf4b12;
  font: 700 8px/1 var(--f-mono);
}
#security .svc-feature-list li:hover, #operations .svc-feature-list li:hover, #cloud .svc-feature-list li:hover, #ai-agents .svc-feature-list li:hover, #app-development .svc-feature-list li:hover { transform: translateY(-3px); border-color: #ffb38a; }
#security .svc-feature-list li { border-color: #ffffff20; color: #d8cdd0; background: linear-gradient(130deg,#ffffff10,#ffffff06); box-shadow: inset 0 1px #ffffff12; }
#security .svc-feature-list li::before { color: #ff9c70; }
#operations .svc-feature-list li:nth-child(3n+1) { background: linear-gradient(130deg,#f9fffbe5,#dbece28f); }
#cloud .svc-feature-list li { border-radius: 4px 16px 16px 16px; }
#ai-agents .svc-feature-list li { background: linear-gradient(130deg,#fffcffe6,#e6dff292); }
#app-development .svc-feature-list li:nth-child(even) { transform: translateY(7px); }
#app-development .svc-feature-list li:nth-child(even):hover { transform: translateY(3px); }

#security .svc-tool-chips, #operations .svc-tool-chips, #cloud .svc-tool-chips, #ai-agents .svc-tool-chips, #app-development .svc-tool-chips {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding-block: 3px 8px;
  mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.solution-chip-track { display: flex; width: max-content; gap: 8px; animation: solution-chip-loop 26s linear infinite; }
#cloud .solution-chip-track, #app-development .solution-chip-track { animation-direction: reverse; }
.svc-tool-chips:hover .solution-chip-track { animation-play-state: paused; }
#security .svc-tool-chip, #operations .svc-tool-chip, #cloud .svc-tool-chip, #ai-agents .svc-tool-chip, #app-development .svc-tool-chip {
  flex: none;
  padding: 8px 11px;
  border-radius: 999px;
  color: #334f5d;
  border: 1px solid #ffffffc2;
  background: #ffffff8c;
  backdrop-filter: blur(12px);
}
#security .svc-tool-chip { color: #f0e8e9; border-color: #ffffff2c; background: #ffffff0d; }
@keyframes solution-chip-loop { to { transform: translateX(calc(-50% - 4px)); } }

.security-visual, .operations-visual, .cloud-visual, .ai-visual, .app-visual {
  padding: 9px;
  overflow: hidden;
  border: 1px solid #ffffffb5;
  border-radius: 26px;
  background: linear-gradient(145deg,#ffffffc5,#eef2ef80);
  box-shadow: 0 44px 100px -40px #172f3f9c,0 15px 35px -30px #142b39,inset 0 1px #fff;
  backdrop-filter: blur(24px) saturate(1.12);
}
#security .security-visual { border-color: #ffffff29; background: linear-gradient(145deg,#ffffff14,#ffffff08); box-shadow: 0 45px 100px -35px #000b,inset 0 1px #ffffff18; }
.solution-media {
  position: relative;
  min-height: clamp(290px,27vw,385px);
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  background: #16262d;
  box-shadow: inset 0 0 0 1px #ffffff29;
}
.solution-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 900ms var(--lift),visibility 900ms; }
.solution-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#12171d5c,transparent 48%,#101820ad),linear-gradient(90deg,#1018204f,transparent 55%); }
.solution-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07) translateX(1%); filter: saturate(.84) contrast(1.02); transition: transform 7s cubic-bezier(.2,.65,.2,1); }
.solution-slide.is-active { z-index: 1; opacity: 1; visibility: visible; }
.solution-slide.is-active img { transform: scale(1.015) translateX(0); }
.solution-media-head {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font: 600 9px/1 var(--f-mono);
  letter-spacing: .12em;
}
.solution-media-head img { width: 28px; height: 28px; padding: 3px; border-radius: 50%; background: #fffffff0; box-shadow: 0 7px 18px #0006; }
.solution-media-head span { padding: 8px 10px; border: 1px solid #ffffff36; border-radius: 999px; background: #111c247a; backdrop-filter: blur(10px); }
.security-visual .mock-tag, .operations-visual .mock-tag { position: relative; z-index: 4; width: max-content; margin: -13px 0 0 20px; padding: 7px 11px; border: 1px solid #ffffff45; border-radius: 999px; color: #e6e4e5; background: #33272dc4; backdrop-filter: blur(12px); }
.security-visual .radar-card {
  z-index: 3;
  width: min(88%,340px);
  min-height: 196px;
  margin: -68px auto 12px;
  padding: 18px 20px 16px;
  border: 1px solid #ffffff35;
  border-radius: 22px;
  background: linear-gradient(145deg,#121c2aef,#202d40ed);
  box-shadow: 0 28px 55px -28px #000d,inset 0 1px #ffffff17;
  backdrop-filter: blur(16px);
}
.security-signal-head { width: 100%; display: flex; align-items: center; justify-content: space-between; color: #aab6c8; font: 600 8px/1 var(--f-mono); letter-spacing: .15em; }
.security-signal-head span,.security-signal-head b { display: flex; align-items: center; gap: 7px; }
.security-signal-head span i { width: 6px; height: 6px; border-radius: 50%; background: #ff6a2b; box-shadow: 0 0 0 4px #ff6a2b1d; }
.security-signal-head b { color: #62dda0; font-weight: 700; }
.security-signal-head b::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; animation: signalLive 1.8s ease-in-out infinite; }
.security-signal-body { width: 100%; display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: center; margin: 17px 0 13px; }
.security-shield-core { position: relative; display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid #ffffff1c; border-radius: 26px; background: linear-gradient(145deg,#ff6a2b20,#ffffff05); overflow: hidden; }
.security-shield-core::before,.security-shield-core::after { content: ''; position: absolute; width: 58px; height: 1px; background: linear-gradient(90deg,transparent,#ff8b58a8,transparent); }
.security-shield-core::after { transform: rotate(90deg); }
.security-shield-core svg { position: relative; z-index: 2; width: 42px; height: 48px; overflow: visible; }
.security-shield-core svg > path:first-child { fill: #ff6a2b15; stroke: #ff8552; stroke-width: 2; }
.security-shield-check { fill: none; stroke: #f7fbff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.security-shield-orbit { position: absolute; width: 62px; height: 62px; border: 1px solid #ff7b4238; border-radius: 50%; animation: signalOrbit 5s linear infinite; }
.security-shield-orbit::after { content: ''; position: absolute; top: 5px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #ff7135; box-shadow: 0 0 12px #ff7135; }
.security-signal-stream { display: grid; gap: 10px; }
.security-stream-row { display: grid; grid-template-columns: 42px 1fr 20px; gap: 8px; align-items: center; color: #97a6ba; font: 600 8px/1 var(--f-mono); letter-spacing: .08em; }
.security-stream-row > i { position: relative; height: 2px; overflow: hidden; border-radius: 3px; background: #ffffff17; }
.security-stream-row > i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 0,#ff7135 45%,#8be0b1 67%,transparent 100%); transform: translateX(-105%); animation: signalTrace 2.8s cubic-bezier(.4,0,.2,1) infinite; }
.security-stream-row:nth-child(2) > i::after { animation-delay: -.9s; }
.security-stream-row:nth-child(3) > i::after { animation-delay: -1.8s; }
.security-stream-row b { color: #67d99e; font-weight: 700; }
.security-visual .radar-label { margin-top: 1px; color: #b7c2d0; }
@keyframes signalLive { 0%,100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }
@keyframes signalOrbit { to { transform: rotate(360deg); } }
@keyframes signalTrace { 0% { transform: translateX(-105%); } 48%,100% { transform: translateX(105%); } }
.security-visual .svc-stat-box { background: #fffaf7e9; }
.operations-visual .mock-tag { color: #d8e7df; background: #17352fbd; }
.operations-visual .ops-card { position: relative; z-index: 3; margin: -68px 17px 12px; border: 1px solid #ffffff25; border-radius: 17px; background: linear-gradient(145deg,#142f2b,#1e3d36); box-shadow: 0 25px 48px -28px #0c211c; backdrop-filter: blur(12px); }
.cloud-visual .topo-card {
  position: relative;
  z-index: 3;
  width: calc(100% - 34px);
  min-height: 226px !important;
  margin: -72px auto 12px;
  padding: 17px 18px 15px;
  border: 1px solid #ffffff32;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg,#101d2bed,#1d3142f2);
  box-shadow: 0 28px 55px -30px #06111bd9,inset 0 1px #ffffff18;
  backdrop-filter: blur(16px);
}
.cloud-fabric-head { display: flex; align-items: center; justify-content: space-between; color: #aebdca; font: 600 8px/1 var(--f-mono); letter-spacing: .14em; }
.cloud-fabric-head span,.cloud-fabric-head b { display: flex; align-items: center; gap: 7px; }
.cloud-fabric-head span i { width: 6px; height: 6px; border-radius: 2px; background: #ff7135; box-shadow: 0 0 0 4px #ff71351b; transform: rotate(45deg); }
.cloud-fabric-head b { color: #65dca1; font-weight: 700; }
.cloud-fabric-head b::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.cloud-fabric-board { position: relative; display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; min-height: 138px; margin-top: 8px; }
.cloud-route-map { position: absolute; z-index: 0; inset: 8px 55px; width: calc(100% - 110px); height: calc(100% - 16px); overflow: visible; pointer-events: none; }
.cloud-route-map path { fill: none; stroke: #7893a36e; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cloud-route-map .cloud-route-flow { stroke: #ff824b; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 17; animation: cloudRouteFlow 3.6s linear infinite paused; }
.motion-active .cloud-route-flow { animation-play-state: running; }
.cloud-endpoint-stack { position: relative; z-index: 2; display: grid; gap: 8px; }
.cloud-target-stack { grid-column: 3; }
.cloud-endpoint { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 9px; border: 1px solid #7893a35c; border-radius: 9px; color: #e9f0f5; background: #22384bd9; box-shadow: 0 7px 16px -10px #000; font: 700 8px/1 var(--f-mono); letter-spacing: .06em; }
.cloud-endpoint i { width: 6px; height: 6px; flex: 0 0 auto; border: 1px solid #91adbd; border-radius: 50%; background: #3a5265; }
.cloud-source-stack .cloud-endpoint:nth-child(1) i { border-color: #ff9b55; background: #ff7135; }
.cloud-source-stack .cloud-endpoint:nth-child(2) i { border-color: #66b9ff; background: #2189df; }
.cloud-source-stack .cloud-endpoint:nth-child(3) i { border-color: #76d4c8; background: #2aa89d; }
.cloud-target-stack .cloud-endpoint i { border-color: #75dfa8; background: #48c887; box-shadow: 0 0 7px #48c8878c; }
.cloud-control-core { position: relative; z-index: 3; grid-column: 2; grid-row: 1; justify-self: center; display: grid; place-items: center; width: 116px; min-height: 74px; padding: 13px 12px 10px; overflow: hidden; border: 1px solid #ffffffd6; border-radius: 16px; background: linear-gradient(145deg,#fff,#e7edf1); box-shadow: 0 14px 30px -15px #000,0 0 0 5px #ffffff0b; }
.cloud-control-core img { position: relative; z-index: 2; width: 94px; height: auto; }
.cloud-control-core small { position: relative; z-index: 2; margin-top: 7px; color: #425468; font: 700 6px/1 var(--f-mono); letter-spacing: .17em; }
.cloud-core-pulse { position: absolute; width: 38px; height: 38px; border: 1px solid #ff713545; border-radius: 50%; animation: cloudCorePulse 2.4s ease-out infinite paused; }
.motion-active .cloud-core-pulse { animation-play-state: running; }
.cloud-fabric-status { display: flex; justify-content: center; gap: 20px; padding-top: 9px; border-top: 1px solid #ffffff13; color: #90a2b2; font: 600 7px/1 var(--f-mono); letter-spacing: .1em; }
.cloud-fabric-status span { display: flex; align-items: center; gap: 5px; }
.cloud-fabric-status i { width: 4px; height: 4px; border-radius: 50%; background: #55d596; box-shadow: 0 0 6px #55d596; }
@keyframes cloudRouteFlow { to { stroke-dashoffset: -80; } }
@keyframes cloudCorePulse { 0% { opacity: .75; transform: scale(.55); } 90%,100% { opacity: 0; transform: scale(2.5); } }
.ai-visual .ai-card { position: relative; z-index: 3; margin: -73px 17px 12px; border: 1px solid #ffffff2b; border-radius: 18px; background: linear-gradient(145deg,#302b39e8,#464052df); box-shadow: 0 26px 52px -30px #271f33; backdrop-filter: blur(14px); }
.ai-visual .ai-bubble.user { background: #ffffff12; color: #ece8f2; }
.ai-visual .ai-bubble.bot { background: #f0b8a31a; color: #fff3ed; }
.app-visual > [data-i18n-skip] { position: relative; z-index: 3; margin: -62px 16px 12px; border: 1px solid #ffffff2c; border-radius: 17px !important; box-shadow: 0 26px 52px -30px #151c20; backdrop-filter: blur(14px); transition: transform 500ms var(--lift); }
.app-visual:hover > [data-i18n-skip] { transform: translateY(-4px); }
.product-build-card { overflow: hidden; color: #fff; background: linear-gradient(145deg,#0e1b2aef,#182b3eef); font-family: var(--f-mono); }
.product-build-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 9px 14px; border-bottom: 1px solid #ffffff13; background: #ffffff05; }
.product-build-brand { display: flex; align-items: center; gap: 9px; color: #afbdca; font: 600 8px/1 var(--f-mono); letter-spacing: .13em; }
.product-brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: #f8fafb; box-shadow: 0 7px 15px -9px #000; }
.product-brand-mark img { width: 22px; height: 22px; }
.product-deploy-state { display: flex; align-items: center; gap: 6px; color: #67dca1; font: 700 7px/1 var(--f-mono); letter-spacing: .1em; }
.product-deploy-state i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: productLive 1.8s ease-in-out infinite; }
.product-build-body { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(126px,.75fr); gap: 10px; padding: 12px; }
.product-preview-panel { min-width: 0; padding: 13px; border: 1px solid #ffffffb8; border-radius: 14px; color: #17283d; background: linear-gradient(145deg,#f9fbfc,#dfe8ee); box-shadow: 0 13px 30px -22px #000; }
.product-preview-head { display: flex; align-items: center; justify-content: space-between; color: #627184; font: 700 7px/1 var(--f-mono); letter-spacing: .12em; }
.product-preview-head b { display: flex; align-items: center; gap: 5px; color: #168b53; }
.product-preview-head b::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #31ba72; }
.product-insight-card { display: grid; grid-template-columns: 38px minmax(0,1fr) 20px; gap: 10px; align-items: center; margin-top: 12px; padding: 11px; border: 1px solid #cad5de; border-radius: 11px; background: #fff; box-shadow: 0 8px 18px -15px #34485c; }
.product-insight-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #f5652c; background: #ff6c2d17; }
.product-insight-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.product-insight-card strong,.product-insight-card span { display: block; }
.product-insight-card strong { color: #17283d; font: 700 10px/1.25 var(--f-mono); }
.product-insight-card span { margin-top: 4px; color: #718094; font: 500 7px/1.3 var(--f-mono); }
.product-insight-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: #38bb77; font: 700 10px/1 sans-serif; }
.product-preview-lines { display: grid; gap: 6px; margin: 12px 3px; }
.product-preview-lines span { height: 4px; border-radius: 4px; background: #b8c6d24f; }
.product-preview-lines span:nth-child(1) { width: 88%; }
.product-preview-lines span:nth-child(2) { width: 72%; }
.product-preview-lines span:nth-child(3) { width: 51%; }
.product-platform-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.product-platform-chips span { padding: 5px 7px; border: 1px solid #bac8d4; border-radius: 999px; color: #52657a; background: #eef3f6; font: 700 6px/1 var(--f-mono); letter-spacing: .06em; }
.product-release-rail { display: flex; flex-direction: column; min-width: 0; padding: 13px 12px 11px; border: 1px solid #71879a4d; border-radius: 14px; background: #1d3043d9; }
.product-release-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #ffffff13; color: #91a3b5; font: 700 7px/1 var(--f-mono); letter-spacing: .11em; }
.product-release-head b { color: #fff; font-size: 8px; }
.product-release-steps { display: grid; gap: 8px; margin: 11px 0; }
.product-release-steps span { display: grid; grid-template-columns: 17px 1fr; gap: 7px; align-items: center; color: #a8b6c4; font: 700 7px/1 var(--f-mono); letter-spacing: .07em; }
.product-release-steps .is-done { color: #a8b6c4; }
.product-release-steps i { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #4fcc8e5e; border-radius: 6px; color: #69dda5; background: #43c48613; font: 700 8px/1 sans-serif; }
.product-release-steps .is-live { color: #fff; }
.product-release-steps .is-live i { border-radius: 50%; background: #ff713526; border-color: #ff71356b; }
.product-release-steps .is-live i::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #ff7135; box-shadow: 0 0 9px #ff7135; animation: productLive 1.8s ease-in-out infinite; }
.product-release-score { display: flex; align-items: end; justify-content: space-between; margin-top: auto; padding-top: 9px; border-top: 1px solid #ffffff13; }
.product-release-score strong { color: #fff; font: 700 15px/1 var(--f-mono); }
.product-release-score span { color: #68dca3; font: 700 6px/1.15 var(--f-mono); letter-spacing: .08em; text-align: right; }
@keyframes productLive { 0%,100% { opacity: .4; transform: scale(.78); } 50% { opacity: 1; transform: scale(1); } }
.security-visual > div[style="height:6px"],.operations-visual > div[style="height:6px"],.cloud-visual > div[style="height:6px"],.ai-visual > div[style="height:6px"],.app-visual > div[style="height:6px"] { display: none; }
.security-visual .svc-stat-grid,.operations-visual .svc-stat-grid,.cloud-visual .svc-stat-grid,.ai-visual .svc-stat-grid,.app-visual .svc-stat-grid { gap: 7px; margin: 9px 7px 0; border: 0; border-radius: 14px; background: transparent; }
.security-visual .svc-stat-box,.operations-visual .svc-stat-box,.cloud-visual .svc-stat-box,.ai-visual .svc-stat-box,.app-visual .svc-stat-box { border: 1px solid #ffffffaa; border-radius: 12px; background: linear-gradient(135deg,#ffffffe6,#ffffff8b); box-shadow: inset 0 1px #fff; transition: transform 340ms var(--lift),border-color 340ms; }
.security-visual .svc-stat-box:hover,.operations-visual .svc-stat-box:hover,.cloud-visual .svc-stat-box:hover,.ai-visual .svc-stat-box:hover,.app-visual .svc-stat-box:hover { transform: translateY(-3px); border-color: #ffb287; }
.security-visual .svc-highlight,.operations-visual .svc-highlight,.cloud-visual .svc-highlight,.ai-visual .svc-highlight,.app-visual .svc-highlight { margin: 9px 7px 7px; padding: 16px 17px; border: 1px solid #ffffffa8; border-radius: 12px; background: #ffffff8b; backdrop-filter: blur(12px); }

/* Copy and cards enter in separate directions, with capability rows following. */
.js-enabled .solution-motion-ready .solution-index,
.js-enabled .solution-motion-ready .solution-copy > .lead,
.js-enabled .solution-motion-ready .solution-copy .svc-feature-list li,
.js-enabled .solution-motion-ready .solution-copy .svc-tool-chips,
.js-enabled .solution-motion-ready .svc-visual-card { opacity: 0; }
.js-enabled .solution-motion-ready .solution-index,
.js-enabled .solution-motion-ready .solution-copy > .lead,
.js-enabled .solution-motion-ready .solution-copy .svc-feature-list li,
.js-enabled .solution-motion-ready .solution-copy .svc-tool-chips { transform: translate3d(-25px,20px,0); }
.js-enabled .solution-motion-ready .svc-visual-card { transform: translate3d(32px,24px,0) scale(.975); }
.js-enabled .solution-motion-ready .svc-full-grid.flip .svc-visual-card { transform: translate3d(-32px,24px,0) scale(.975); }
.js-enabled .solution-motion-ready.solution-in .solution-index,
.js-enabled .solution-motion-ready.solution-in .solution-copy > .lead,
.js-enabled .solution-motion-ready.solution-in .solution-copy .svc-feature-list li,
.js-enabled .solution-motion-ready.solution-in .solution-copy .svc-tool-chips,
.js-enabled .solution-motion-ready.solution-in .svc-visual-card { opacity: 1; transform: none; transition: opacity 700ms var(--lift),transform 700ms var(--lift); }
.js-enabled .solution-motion-ready.solution-in .solution-copy > .lead { transition-delay: 170ms; }
.js-enabled .solution-motion-ready.solution-in .solution-copy .svc-feature-list li { transition-delay: calc(230ms + var(--solution-i,0) * 52ms); }
.js-enabled .solution-motion-ready.solution-in .solution-copy .svc-tool-chips { transition-delay: 680ms; }
.js-enabled .solution-motion-ready.solution-in .svc-visual-card { transition-delay: 90ms; }

@media (max-width: 1100px) {
  #security .svc-full-grid,#operations .svc-full-grid,#cloud .svc-full-grid,#ai-agents .svc-full-grid,#app-development .svc-full-grid { grid-template-columns: minmax(0,.88fr) minmax(470px,1.12fr); gap: 38px; }
  #security .svc-feature-list,#operations .svc-feature-list,#cloud .svc-feature-list,#ai-agents .svc-feature-list,#app-development .svc-feature-list { grid-template-columns: 1fr; }
  #security .svc-feature-list li,#operations .svc-feature-list li,#cloud .svc-feature-list li,#ai-agents .svc-feature-list li,#app-development .svc-feature-list li { min-height: 0; }
  #security .svc-full-grid h2,#operations .svc-full-grid h2,#cloud .svc-full-grid h2,#ai-agents .svc-full-grid h2,#app-development .svc-full-grid h2 { font-size: clamp(39px,4.7vw,53px); }
}
@media (max-width: 900px) {
  #security,#operations,#cloud,#ai-agents,#app-development { padding-block: 64px; }
  #security .svc-full-grid,#operations .svc-full-grid,#cloud .svc-full-grid,#ai-agents .svc-full-grid,#app-development .svc-full-grid { grid-template-columns: 1fr; gap: 38px; }
  #security .svc-feature-list,#operations .svc-feature-list,#cloud .svc-feature-list,#ai-agents .svc-feature-list,#app-development .svc-feature-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .solution-watermark { width: 430px; }
  .solution-media { min-height: 410px; }
}
@media (max-width: 600px) {
  #security,#operations,#cloud,#ai-agents,#app-development { padding-block: 51px; }
  #security .svc-full-grid h2,#operations .svc-full-grid h2,#cloud .svc-full-grid h2,#ai-agents .svc-full-grid h2,#app-development .svc-full-grid h2 { font-size: 38px; }
  #security .svc-feature-list,#operations .svc-feature-list,#cloud .svc-feature-list,#ai-agents .svc-feature-list,#app-development .svc-feature-list { grid-template-columns: 1fr; }
  #security .svc-full-grid .lead,#operations .svc-full-grid .lead,#cloud .svc-full-grid .lead,#ai-agents .svc-full-grid .lead,#app-development .svc-full-grid .lead { padding: 17px; }
  #app-development .svc-feature-list li:nth-child(even),#app-development .svc-feature-list li:nth-child(even):hover { transform: none; }
  .security-visual,.operations-visual,.cloud-visual,.ai-visual,.app-visual { padding: 7px; border-radius: 20px; }
  .solution-media { min-height: 300px; border-radius: 15px; }
  .security-visual .radar-card { width: calc(100% - 16px); min-height: 196px; }
  .security-signal-body { grid-template-columns: 78px 1fr; gap: 12px; }
  .security-shield-core { width: 76px; height: 76px; }
  .operations-visual .ops-card,.ai-visual .ai-card { margin-inline: 8px; }
  .cloud-visual .topo-card { width: calc(100% - 16px); }
  .cloud-fabric-board { grid-template-columns: 61px 1fr 61px; }
  .cloud-route-map { inset-inline: 43px; width: calc(100% - 86px); }
  .cloud-endpoint { min-height: 30px; padding-inline: 6px; gap: 5px; font-size: 7px; }
  .cloud-control-core { width: 101px; }
  .cloud-control-core img { width: 82px; }
  .cloud-fabric-status { gap: 11px; }
  .app-visual > [data-i18n-skip] { margin-inline: 8px; overflow: hidden !important; }
  .app-visual > [data-i18n-skip] > div:last-child { grid-template-columns: 1fr !important; min-width: 0; }
  .product-build-head { padding-inline: 11px; }
  .product-build-brand { font-size: 7px; }
  .product-deploy-state { max-width: 76px; text-align: right; line-height: 1.25; }
  .product-build-body { padding: 10px; }
  .product-release-rail { min-height: 130px; }
  .product-release-steps { grid-template-columns: repeat(4,1fr); gap: 4px; }
  .product-release-steps span { grid-template-columns: 1fr; justify-items: center; gap: 5px; font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .solution-watermark { opacity: .045; transform: none !important; transition: none; }
  .solution-chip-track { animation: none; }
  .security-signal-head b::before,.security-shield-orbit,.security-stream-row > i::after,.cloud-route-flow,.cloud-core-pulse,.product-deploy-state i,.product-release-steps .is-live i::after { animation: none; }
  .security-stream-row > i::after { transform: translateX(30%); }
  .solution-chip-track [aria-hidden="true"] { display: none; }
  .solution-slide img,.solution-slide,.app-visual > [data-i18n-skip],
  .js-enabled .solution-motion-ready .solution-index,
  .js-enabled .solution-motion-ready .solution-copy > .lead,
  .js-enabled .solution-motion-ready .solution-copy .svc-feature-list li,
  .js-enabled .solution-motion-ready .solution-copy .svc-tool-chips,
  .js-enabled .solution-motion-ready .svc-visual-card { opacity: 1; transform: none; transition: none; }
}

/* ── Services landing hero: the connected service compass ───────────────────*/
.p-services .page-hero {
  min-height: min(820px,calc(100svh - 82px));
  color: #142d41;
  border-bottom: 1px solid #cbd8da;
  background:
    radial-gradient(48% 68% at 97% 5%,#b9cdd2cf 0%,transparent 72%),
    radial-gradient(42% 58% at 2% 96%,#f2ceb4bd 0%,transparent 72%),
    linear-gradient(128deg,#f8f8f4 0%,#e9f0ee 52%,#d8e4e7 100%);
}
.p-services .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg,transparent 0 48%,#ffffff4f 48.1% 48.25%,transparent 48.4%),
    linear-gradient(#35515d0b 1px,transparent 1px),
    linear-gradient(90deg,#35515d0b 1px,transparent 1px);
  background-size: auto,88px 88px,88px 88px;
  mask-image: linear-gradient(90deg,#000 0%,#000c 72%,transparent 100%);
}
.p-services .page-hero .atmosphere { opacity: .62; }
.p-services .page-hero .atmosphere-light {
  background:
    radial-gradient(40% 60% at 88% 8%,#ffffffa6,transparent 75%),
    radial-gradient(42% 54% at 8% 92%,#ffe2ce5c,transparent 72%);
}
.p-services .page-hero .atmosphere-grid { opacity: .55; background-size: 88px 88px; mask-image: linear-gradient(90deg,#000a,transparent 82%); }
.p-services .page-hero .atmosphere-lines {
  width: min(760px,54vw);
  height: min(760px,54vw);
  right: -19vw;
  top: -22%;
  border-color: #536f7b17;
  box-shadow: 0 0 0 55px #536f7b0a,0 0 0 110px #536f7b08,0 0 0 165px #536f7b06;
  transform: translate3d(0,var(--drift,0px),0);
}
.p-services .page-hero-inner { padding-top: clamp(45px,5vw,72px); padding-bottom: clamp(58px,6vw,90px); }
.p-services .page-hero-grid { grid-template-columns: minmax(0,.92fr) minmax(560px,1.08fr); gap: clamp(45px,5vw,80px); }
.p-services .page-hero-copy { position: relative; z-index: 3; padding: 20px 0; }
.p-services .page-hero-copy::before { display: none; }
.p-services .crumbs { margin-bottom: 34px; color: #5f727d; }
.p-services .crumbs .here { color: #173247; }
.p-services .crumbs a:hover { color: #b94410; }
.p-services .page-hero .section-eyebrow { margin-bottom: 20px; color: #425f6d; }
.p-services .page-hero .section-eyebrow::before { box-shadow: 0 0 17px #fd57035e; }
.p-services .page-h1 {
  max-width: 690px;
  color: #142d41;
  font-size: clamp(54px,5.1vw,76px);
  line-height: .99;
  letter-spacing: -.058em;
  text-wrap: balance;
}
.p-services .page-hero .page-h1 .grad { color: #bd4310; }
.p-services .page-sub {
  position: relative;
  max-width: 650px;
  margin-top: 27px;
  padding: 19px 21px 19px 24px;
  border: 1px solid #ffffffbf;
  border-radius: 0 16px 16px 0;
  color: #405968;
  background: linear-gradient(120deg,#ffffffcf,#ffffff76);
  box-shadow: 0 18px 40px -34px #16394e99,inset 0 1px #fff;
  backdrop-filter: blur(14px);
  font-size: 13px;
  line-height: 1.82;
}
.p-services .page-sub::before { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(#fd5703,#ffb17a); }
.p-services .hero-chips { gap: 7px; margin-top: 22px; }
.p-services .hero-chip {
  position: relative;
  overflow: hidden;
  padding: 10px 13px;
  border: 1px solid #ffffffcf;
  border-radius: 999px;
  color: #294858;
  background: #ffffff8d;
  box-shadow: 0 10px 22px -20px #163647,inset 0 1px #fff;
  backdrop-filter: blur(12px);
  transition: color 280ms,background 280ms,border-color 280ms,transform 280ms var(--lift);
}
.p-services .hero-chip::before { content: ''; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #fd5703; box-shadow: 0 0 0 4px #fd570310; }
.p-services .hero-chip:hover,.p-services .hero-chip:focus-visible { color: #fff; border-color: #d75017; background: #d75017; transform: translateY(-3px); }
.p-services .page-enter .hero-chip { animation: services-chip-in 600ms var(--lift) both; animation-delay: calc(420ms + var(--hero-chip-i,0) * 60ms); }
@keyframes services-chip-in { from { opacity: 0; transform: translateY(13px); } }

.services-hero-stage {
  --hero-px: 0px;
  --hero-py: 0px;
  position: relative;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #ffffffd1;
  border-radius: 34px 34px 34px 10px;
  background: #18303b;
  box-shadow: 0 50px 105px -42px #173b4d9e,0 18px 42px -34px #142c3a,inset 0 1px #fff;
  transform: none;
  opacity: 1;
  transition: opacity 950ms var(--lift),transform 1150ms var(--lift),box-shadow 500ms var(--lift);
}
.js-enabled .services-hero-stage { transform: perspective(1200px) translate3d(46px,28px,0) rotateY(-3deg) scale(.97); opacity: 0; }
.js-enabled .services-hero-stage.stage-in { opacity: 1; transform: perspective(1200px) translate3d(0,0,0) rotateY(0) scale(1); }
.services-hero-stage:hover { box-shadow: 0 58px 120px -42px #173b4db5,0 20px 46px -32px #142c3a,inset 0 1px #fff; }
.services-hero-photo {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  max-width: none;
  object-fit: cover;
  object-position: 69% 50%;
  transform: translate3d(var(--hero-photo-x,0px),var(--hero-photo-y,0px),0) scale(1.025);
  filter: saturate(.72) contrast(.96) brightness(.82);
  transition: transform 650ms var(--lift),filter 500ms;
}
.services-hero-stage:hover .services-hero-photo { filter: saturate(.82) contrast(.98) brightness(.84); }
.services-hero-photo-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 52% 50%,transparent 0 20%,#10232d18 39%,#0d202b8a 76%),
    linear-gradient(180deg,#10232d42,#0a1d28a6),
    linear-gradient(90deg,#0c202b82,transparent 45%,#0c202b40);
}
.services-hero-stage .orbit-wrap {
  position: absolute;
  z-index: 3;
  inset: 50% auto auto 50%;
  width: min(570px,92%);
  max-width: none;
  margin: 0;
  transform: translate3d(calc(-50% + var(--hero-px)),calc(-50% + var(--object-drift,0px) + var(--hero-py)),0);
  filter: drop-shadow(0 25px 35px #07151d6b);
  transition: transform 600ms var(--lift);
}
.services-hero-stage .orbit-wrap::before {
  inset: 7%;
  border-color: #d7e4e55c;
  background: radial-gradient(circle,#ff8b4435 0%,#122a364f 37%,#0f253250 66%,transparent 68%);
  box-shadow: inset 0 1px #ffffff55,0 0 0 1px #ffffff10,0 42px 75px -38px #000;
  backdrop-filter: blur(4px);
}
.services-hero-stage .orbit-svg { animation: services-orbit-turn 38s linear infinite; }
.services-hero-stage .orbit-ring { stroke: #e6f0f06b; stroke-width: .24; }
.services-hero-stage .orbit-ring.r2 { stroke: #ffb08470; }
.services-hero-stage .orbit-hex { fill: #ff783322; stroke: #ffb4869c; }
.services-hero-stage .ol { stroke: #ffc29a91; stroke-width: .3; }
.services-hero-stage .orbit-core {
  width: 24%;
  padding: 11px;
  border: 1px solid #ffffffc9;
  background: linear-gradient(145deg,#fff,#eee8df);
  box-shadow: 0 0 0 12px #ffffff10,0 0 0 13px #ffffff48,0 19px 42px #0008,inset 0 2px #fff;
}
.services-hero-stage .orbit-core::before {
  content: '';
  position: absolute;
  inset: -22px;
  border: 1px dashed #ffb0818a;
  border-radius: 50%;
  animation: services-core-ring 18s linear infinite reverse;
}
.services-hero-stage .orbit-core img { animation: services-logo-turn 20s linear infinite; }
.services-hero-stage .orbit-dot {
  width: 58px;
  height: 58px;
  border-color: #c6d9de8f;
  color: #eff7f7;
  background: linear-gradient(145deg,#294555d9,#102b39eb);
  box-shadow: 0 15px 30px #0007,inset 0 1px #ffffff31;
  backdrop-filter: blur(10px);
}
.services-hero-stage .orbit-label { color: #fff; text-shadow: 0 2px 10px #000; }
.services-hero-stage .orbit-node:hover .orbit-dot { color: #fff; border-color: #ffb180; background: linear-gradient(145deg,#e65a18,#a83d11); transform: translateY(-7px) rotate(-3deg); box-shadow: 0 18px 36px #0008,0 0 24px #fd57034c; }
@keyframes services-orbit-turn { to { transform: rotate(360deg); } }
@keyframes services-core-ring { to { transform: rotate(360deg); } }
@keyframes services-logo-turn { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .p-services .page-hero-grid { grid-template-columns: minmax(0,.9fr) minmax(490px,1.1fr); gap: 38px; }
  .p-services .page-h1 { font-size: clamp(49px,5.7vw,65px); }
  .services-hero-stage { min-height: 540px; }
  .services-hero-stage .orbit-wrap { width: min(510px,94%); }
}
@media (max-width: 900px) {
  .p-services .page-hero { min-height: auto; }
  .p-services .page-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .p-services .page-hero-copy { max-width: 720px; }
  .p-services .page-h1 { max-width: 760px; font-size: clamp(51px,8vw,68px); }
  .services-hero-stage { width: 100%; max-width: 720px; min-height: 620px; margin-inline: auto; }
  .services-hero-stage .orbit-wrap { width: min(580px,91%); }
}
@media (max-width: 600px) {
  .p-services .page-hero-inner { padding-top: 27px; padding-bottom: 58px; }
  .p-services .crumbs { margin-bottom: 27px; }
  .p-services .page-hero .section-eyebrow { margin-bottom: 17px; }
  .p-services .page-h1 { font-size: 42px; }
  .p-services .page-sub { padding: 17px 16px 17px 19px; font-size: 12.5px; }
  .p-services .hero-chips { flex-wrap: nowrap; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
  .p-services .hero-chip { flex: none; }
  .services-hero-stage { min-height: 450px; border-radius: 25px 25px 25px 8px; }
  .services-hero-stage .orbit-wrap { width: 420px; }
  .services-hero-stage .orbit-dot { width: 45px; height: 45px; border-radius: 12px; }
  .services-hero-stage .orbit-dot svg { width: 19px; height: 19px; }
  .services-hero-stage .orbit-label { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .services-hero-stage,.js-enabled .services-hero-stage { opacity: 1; transform: none; transition: none; }
  .services-hero-photo,.services-hero-stage .orbit-wrap { transform: none; transition: none; }
  .services-hero-stage .orbit-wrap { transform: translate(-50%,-50%); }
  .services-hero-stage .orbit-svg,.services-hero-stage .orbit-core::before,.services-hero-stage .orbit-core img,.p-services .page-enter .hero-chip { animation: none; }
}