/* M40Tech site styles, 2026 design system. Hand-written, no framework, mobile-first. */
:root{
  /* Colour */
  --navy:#0a1b33; --navy-2:#0f2645; --navy-3:#1b3a63; --navy-line:rgba(255,255,255,.12);
  --blue:#0b5cab; --blue-dark:#08498a; --blue-2:#1f74d4; --sky:#8cc8ff; --cloud:#eaf3fd; --cloud-2:#d6e8fb;
  --ink:#0e1a2b; --ink-2:#253244; --muted:#4d5b6d; --line:#e2e8f0; --line-2:#cfd9e5;
  --white:#fff; --pearl:#f6f8fb; --pearl-2:#eef3f8;
  /* Type */
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Helvetica Neue",Helvetica,Arial,"Noto Sans",sans-serif;
  --font-display:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-sm:.88rem; --fs-body:1.0625rem; --fs-lead:clamp(1.08rem,1rem + .3vw,1.22rem);
  --fs-h1:clamp(2.3rem,1.5rem + 3.4vw,4.1rem); --fs-h2:clamp(1.8rem,1.3rem + 1.9vw,2.75rem); --fs-h3:1.18rem;
  /* Space */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6.5rem;
  /* Shape & depth */
  --radius-sm:10px; --radius:14px; --radius-lg:22px; --radius-xl:30px; --pill:999px;
  --shadow-sm:0 1px 2px rgba(10,27,51,.05);
  --shadow:0 1px 2px rgba(10,27,51,.04),0 12px 32px -12px rgba(10,27,51,.14);
  --shadow-lg:0 2px 4px rgba(10,27,51,.04),0 30px 60px -24px rgba(10,27,51,.28);
  --glass:rgba(255,255,255,.08); --glass-line:rgba(255,255,255,.18);
  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1); --dur-fast:180ms; --dur:240ms; --dur-reveal:520ms; --rise:16px;
  --wrap:1240px; --header:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.7;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--blue-dark)}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;color:var(--navy);margin:0 0 .55em;font-weight:650;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:var(--fs-h1);letter-spacing:-.038em;font-weight:680;line-height:1.04}
h2{font-size:var(--fs-h2);letter-spacing:-.03em}
h3{font-size:var(--fs-h3);letter-spacing:-.012em;line-height:1.3}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{padding-left:1.25em}
::selection{background:var(--cloud-2);color:var(--navy)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
@media (min-width:800px){.wrap{padding:0 2rem}}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy);padding:.75rem 1rem;z-index:100;font-weight:600;border-radius:8px;box-shadow:var(--shadow)}
.skip:focus{left:1rem;top:1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.4rem;min-height:48px;border-radius:var(--pill);font-weight:600;text-decoration:none;border:1.5px solid transparent;line-height:1.2;cursor:pointer;font-size:.98rem;font-family:inherit;letter-spacing:-.005em;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-sm{padding:.6rem 1.05rem;min-height:44px;font-size:.92rem}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 20px -8px rgba(11,92,171,.6)}
.btn-primary:hover{background:var(--blue-dark);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 12px 26px -10px rgba(11,92,171,.7)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--cloud);color:var(--navy)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn-outline{border-color:var(--line-2);color:var(--navy);background:#fff}
.btn-outline:hover{border-color:var(--navy);color:var(--navy);background:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;text-decoration:none}
.btn-arrow svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.btn-arrow:hover svg{transform:translateX(4px)}

/* Header */
.site-header{background:#fff;color:var(--ink);position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.site-header{background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px)}}
.site-header.scrolled,.site-header.mega-open{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(10,27,51,.4)}
.site-header.mega-open{background:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:var(--header);gap:1rem}
.brand{display:block;width:132px;flex:none}
.brand picture,.brand img{display:block;width:100%;height:auto}
.brand img{filter:brightness(0) saturate(100%) invert(9%) sepia(43%) saturate(2470%) hue-rotate(196deg) brightness(92%)}
.nav-toggle{display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:var(--navy);border:1px solid var(--line-2);border-radius:var(--pill);padding:.55rem .95rem;font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;min-height:44px}
.nav-toggle svg{width:18px;height:18px}
.site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1.5rem;max-height:calc(100vh - var(--header));overflow:auto;box-shadow:0 24px 40px -24px rgba(10,27,51,.3)}
.site-nav.open{display:block;animation:fadeDown var(--dur) var(--ease)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav>ul>li{border-bottom:1px solid var(--line)}
.site-nav>ul>li.nav-cta{border:0}
.site-nav a{color:var(--ink);text-decoration:none;display:block;padding:.85rem 0;font-weight:550;font-size:1.02rem}
.site-nav a:hover,.site-nav a[aria-current="page"],.site-nav a.is-section{color:var(--blue)}
.site-nav .nav-cta{margin-top:1.25rem}
.site-nav .nav-cta a{display:flex;color:#fff}
/* Services group / mega menu */
.mega-trigger{display:flex;align-items:center;justify-content:space-between}
.mega-toggle{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--navy);border-radius:var(--pill);cursor:pointer}
.mega-toggle svg{width:18px;height:18px;transition:transform var(--dur) var(--ease)}
.mega-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega-toggle:hover{background:var(--pearl)}
.mega{display:none}
.has-mega.open .mega{display:block;animation:fadeDown var(--dur) var(--ease)}
.mega-h{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .35rem}
.mega a{padding:.55rem 0}
.mega a strong{display:block;font-weight:600;color:var(--navy);font-size:.98rem}
.mega a span{display:block;font-size:.86rem;color:var(--muted);font-weight:400;line-height:1.45}
.mega a:hover strong{color:var(--blue)}
.mega-caps{padding-bottom:.75rem}
.mega-all{color:var(--blue)!important;margin-top:.25rem}
.mega-all svg{width:16px;height:16px}
.mega-feature{display:none!important}
@media (min-width:1040px){
  .nav-toggle{display:none}
  .site-nav{display:block;position:static;padding:0;background:none;border:0;max-height:none;overflow:visible;box-shadow:none}
  .site-nav>ul{display:flex;align-items:center;gap:.15rem}
  .site-nav>ul>li{border:0}
  .site-nav>ul>li>a,.mega-trigger>a{position:relative;padding:.55rem .8rem;font-size:.95rem;color:var(--ink)}
  .site-nav>ul>li>a::after,.mega-trigger>a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.2rem;height:1.5px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
  .site-nav>ul>li>a:hover::after,.mega-trigger>a:hover::after,.site-nav a[aria-current="page"]::after,.site-nav a.is-section::after{transform:scaleX(1)}
  .site-nav>ul>li>a:hover,.mega-trigger>a:hover{color:var(--navy)}
  .site-nav>ul>li>a[aria-current="page"],.mega-trigger>a[aria-current="page"],.mega-trigger>a.is-section{color:var(--blue)}
  .mega-toggle{width:28px;height:28px;margin-left:-.5rem}
  .has-mega{position:static}
  .mega{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 40px 60px -30px rgba(10,27,51,.35);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
  .has-mega.open .mega{visibility:visible;opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s;animation:none}
  html:not(.js) .has-mega:hover .mega,html:not(.js) .has-mega:focus-within .mega{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .mega-inner{max-width:var(--wrap);margin:0 auto;padding:2.25rem 2rem 2.5rem;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.95fr);gap:2.5rem}
  .mega-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 2rem}
  .mega-group:last-child{grid-column:1/-1}
  .mega-group:last-child ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem}
  .mega-h{margin-top:0}
  .mega a{padding:.55rem .75rem;margin:0 -.75rem;border-radius:var(--radius-sm);transition:background var(--dur-fast)}
  .mega a:hover{background:var(--pearl)}
  .mega-caps{border-left:1px solid var(--line);padding-left:2.5rem}
  .mega .mega-all{display:inline-flex;margin-top:.75rem}
  .mega .mega-all:hover{background:none}
  .mega-feature{display:flex!important;flex-direction:column;gap:.35rem;background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:0 0 1.5rem!important;margin:0!important;overflow:hidden;text-decoration:none}
  .mega-feature:hover{background:var(--navy-2)!important}
  .mega-feature-art{display:block;aspect-ratio:16/8;overflow:hidden;margin-bottom:.9rem}
  .mega-feature-art img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
  .mega-feature:hover .mega-feature-art img{transform:scale(1.04)}
  .mega-feature .mega-kicker,.mega-feature strong,.mega-feature .mega-feature-text,.mega-feature .mega-cta{padding:0 1.5rem}
  .mega-feature .mega-kicker{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);font-weight:700}
  .mega-feature strong{color:#fff;font-size:1.1rem}
  .mega-feature .mega-feature-text{color:#c2d3e7;font-size:.9rem}
  .mega-feature .mega-cta{display:inline-flex!important;align-items:center;gap:.4rem;color:#fff;font-weight:600;font-size:.92rem;margin-top:.5rem}
  .mega-feature .mega-cta svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
  .mega-feature:hover .mega-cta svg{transform:translateX(4px)}
  .site-nav .nav-cta{margin:0 0 0 .75rem}
  .site-nav .nav-cta a.btn{display:inline-flex;padding:.7rem 1.2rem;min-height:44px;font-size:.93rem;color:#fff}
  .site-nav .nav-cta a.btn::after{display:none}
  .site-nav .nav-cta a.btn:hover{background:var(--blue-dark);color:#fff}
}

/* Eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;color:var(--blue);margin-bottom:1rem}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.7}
.eyebrow-light{color:var(--sky)}

/* Home hero */
.hero{position:relative;overflow:hidden;isolation:isolate;background:#fff}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 80% 35%,rgba(31,116,212,.10),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(140,200,255,.16),transparent 70%)}
.hero-grid{display:grid;gap:2.5rem;align-items:center;padding-top:2.75rem;padding-bottom:3.5rem}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:3.5rem;padding-top:4.5rem;padding-bottom:6rem}}
.hero-copy{max-width:620px}
.hero .eyebrow{background:#fff;border:1px solid var(--line);padding:.4rem .85rem .4rem .7rem;border-radius:var(--pill);box-shadow:var(--shadow-sm);letter-spacing:.1em}
.hero .eyebrow::before{width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:1;box-shadow:0 0 0 4px rgba(11,92,171,.14)}
.hero h1{margin-bottom:.4em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.lead{font-size:var(--fs-lead);color:var(--muted);max-width:560px;line-height:1.65}
.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-points{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;list-style:none;padding:0;margin:2rem 0 0;color:var(--ink-2);font-size:.93rem}
.hero-points li{display:flex;align-items:center;gap:.45rem}
.hero-points svg{width:16px;height:16px;color:var(--blue);flex:none}
.hero-cred{margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.hero-cred span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2);margin-bottom:.25rem}
@media (max-width:599px){
  .hero h1{font-size:clamp(2.1rem,8.6vw,2.6rem)}
  .hero .actions{flex-direction:column}
  .hero .actions .btn{width:100%}
  .hero-points{flex-direction:column;gap:.5rem}
}
.hero-visual{position:relative}
.stage{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-xl);background:var(--navy);padding:1.25rem 1.25rem 1.25rem;box-shadow:var(--shadow-lg)}
@media (min-width:600px){.stage{padding:2rem 2rem 1.5rem}}
.stage-bg{position:absolute;inset:0;z-index:-2}
.stage-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:.7}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 50% 45%,rgba(31,116,212,.35),transparent 70%),linear-gradient(180deg,rgba(10,27,51,.2),rgba(10,27,51,.75))}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(140,200,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(140,200,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask:radial-gradient(60% 60% at 50% 45%,#000,transparent 80%);mask:radial-gradient(60% 60% at 50% 45%,#000,transparent 80%)}
.eco{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1;--tx:0px;--ty:0px}
.eco-stage{position:absolute;inset:0;transform:translate3d(var(--tx),var(--ty),0);transition:transform .6s var(--ease)}
.eco svg.eco-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eco-ring{fill:none;stroke:rgba(140,200,255,.22);stroke-width:.18}
.eco-ring-dash{fill:none;stroke:var(--sky);stroke-width:.22;stroke-dasharray:.6 2.2;opacity:.5;transform-origin:50px 50px;animation:spin 90s linear infinite}
.eco-line{stroke:rgba(140,200,255,.22);stroke-width:.25;fill:none;transition:stroke var(--dur),stroke-width var(--dur)}
.eco-line.on{stroke:var(--sky);stroke-width:.4}
.eco-flow,.arch-flow{fill:none;stroke-dasharray:1.4 10;stroke-linecap:round;opacity:0;transition:opacity var(--dur);animation:flow 2.6s linear infinite}
.eco-flow{stroke:#fff;stroke-width:.55}
.eco-flow.on{opacity:1}
@keyframes flow{to{stroke-dashoffset:-11.4}}
@keyframes spin{to{transform:rotate(360deg)}}
.is-paused .eco-flow,.is-paused .eco-ring-dash,.is-paused .eco-core::after,.is-paused .arch-flow,.is-paused .flow-dot{animation-play-state:paused}
.eco-core{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(140,200,255,.45),rgba(31,116,212,.55) 45%,rgba(11,92,171,.7) 80%);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;align-content:center;gap:.35rem;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 60px rgba(31,116,212,.55)}
.eco-core::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(140,200,255,.35);animation:pulse 3.6s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.eco-core img{width:62%;height:auto}
.eco-core span{font-size:clamp(.5rem,.42rem + .4vw,.66rem);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#e3f0ff}
.eco-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;color:#fff;width:6.8rem;text-align:center;transition:opacity var(--dur)}
.eco-ico{width:clamp(42px,2.6rem + 1vw,56px);aspect-ratio:1;border-radius:15px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;color:var(--sky);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur) var(--ease),box-shadow var(--dur)}
.eco-ico svg{width:46%;height:46%}
.eco-label{font-size:.78rem;font-weight:600;line-height:1.2;color:#e7eef7}
.eco-node.on .eco-ico,.eco-node:hover .eco-ico,.eco-node:focus-visible .eco-ico{background:#fff;border-color:#fff;color:var(--blue);transform:translateY(-3px);box-shadow:0 14px 30px -10px rgba(140,200,255,.6)}
.eco-node.on,.eco-node:hover{color:#fff}
.eco.is-active .eco-node:not(.on){opacity:.7}
.eco-node:focus-visible{outline:none}
.eco-node:focus-visible .eco-ico{outline:3px solid var(--sky);outline-offset:3px}
.eco-panel{position:relative;margin:.5rem auto 0;max-width:520px;background:rgba(255,255,255,.08);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:16px;padding:.95rem 1.1rem;display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;align-items:center;min-height:5.4rem;color:#fff}
.eco-panel strong{font-size:.96rem;color:#fff;letter-spacing:-.01em}
.eco-panel p{grid-column:1;margin:0;font-size:.86rem;color:#c9d8ea;line-height:1.5}
.eco-panel a{grid-column:2;grid-row:1/span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--blue);transition:background var(--dur),color var(--dur)}
.eco-panel a:hover{background:var(--sky);color:var(--navy)}
.eco-panel a svg{width:18px;height:18px}
.swap{animation:swapIn var(--dur) var(--ease)}
@keyframes swapIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.flow-card{position:relative;margin:1rem 0 0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:1rem 1.15rem}
@media (min-width:1180px){.flow-card{position:absolute;left:-3rem;bottom:5.5rem;width:236px;margin:0}}
.flow-k{display:flex;align-items:center;gap:.5rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:0 0 .6rem}
.flow-dot{width:7px;height:7px;border-radius:50%;background:#2fa36b;box-shadow:0 0 0 0 rgba(47,163,107,.5);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 7px rgba(47,163,107,0)}100%{box-shadow:0 0 0 0 rgba(47,163,107,0)}}
.flow-card ol{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;counter-reset:f}
.flow-card li{position:relative;display:flex;align-items:center;gap:.6rem;font-size:.86rem;font-weight:550;color:var(--muted);transition:color var(--dur)}
.flow-card li::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;transition:background var(--dur),border-color var(--dur)}
.flow-card li.done{color:var(--navy)}
.flow-card li.done::before{background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;border-color:var(--blue)}
@media (max-width:599px){.eco-node{width:4.9rem}.eco-label{font-size:.66rem}.eco-ico{border-radius:12px}.eco-core::after{inset:-10px}.eco-panel{min-height:6.4rem}}
@media (max-width:999px){.flow-card{display:none}}

/* Inner page hero */
.page-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--pearl);color:var(--ink);border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 90% at 92% 0%,rgba(31,116,212,.12),transparent 70%)}
.page-hero::after{content:"";position:absolute;z-index:-1;right:-180px;top:50%;width:620px;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 46px,rgba(11,92,171,.10) 46px 47px);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
.page-hero .wrap{padding-top:3rem;padding-bottom:3.5rem}
@media (min-width:800px){.page-hero .wrap{padding-top:4.25rem;padding-bottom:5rem}}
.page-hero h1{color:var(--navy);max-width:880px;font-size:clamp(2.1rem,1.5rem + 2.6vw,3.4rem)}
.page-hero p.lead{color:var(--muted);font-size:var(--fs-lead);max-width:760px;margin-bottom:0}
.page-hero .eyebrow-light{color:var(--blue)}
.page-hero .btn-light,.cta-band .btn-light{background:var(--blue);color:#fff;box-shadow:0 8px 20px -8px rgba(11,92,171,.6)}
.page-hero .btn-light:hover,.cta-band .btn-light:hover{background:var(--blue-dark);color:#fff}
.page-hero .btn-ghost,.cta-band .btn-ghost{border-color:var(--line-2);color:var(--navy);background:#fff}
.page-hero .btn-ghost:hover,.cta-band .btn-ghost:hover{border-color:var(--navy);color:var(--navy);background:#fff}
.page-hero .meta{color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* Breadcrumbs */
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem;padding:0;margin:0 0 1.75rem;font-size:.86rem;color:var(--muted)}
.breadcrumb li+li::before{content:"";display:inline-block;width:.38em;height:.38em;border-right:1.5px solid var(--line-2);border-top:1.5px solid var(--line-2);transform:rotate(45deg) translateY(-.1em);margin:0 .65rem 0 .35rem}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb [aria-current]{color:var(--navy);font-weight:550}

/* Sections */
.section{padding:var(--s-8) 0}
@media (min-width:800px){.section{padding:var(--s-9) 0}}
.section-soft{background:var(--pearl)}
.section-navy{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#d3e0ef}
.section-navy::before{content:"";position:absolute;inset:0;z-index:-1;background:url("../img/hero-bg-800.webp") right center/cover no-repeat;opacity:.35;-webkit-mask:linear-gradient(90deg,transparent 25%,#000 90%);mask:linear-gradient(90deg,transparent 25%,#000 90%)}
.section-navy h2,.section-navy h3{color:#fff}
.section-head{max-width:720px;margin-bottom:2.5rem}
@media (min-width:800px){.section-head{margin-bottom:3.5rem}}
.section-head h2{margin-bottom:.4em}
.section-head p{color:var(--muted);font-size:1.1rem;margin-bottom:0}
.section-navy .section-head p{color:#b9cbe0}
.section-head-center{text-align:center;margin-inline:auto}
.section-head-center .eyebrow{justify-content:center}
.section-head-split{max-width:none;display:grid;gap:1rem;align-items:end}
@media (min-width:900px){.section-head-split{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:4rem}.section-head-split>p{justify-self:end;max-width:480px}}
.section-head-split h2{margin:0}
.summary-band{position:relative;margin-top:-2rem;z-index:2}
.hero + .summary-band{margin-top:0}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem 1.6rem;box-shadow:var(--shadow-lg);margin:0;display:grid;gap:.5rem}
@media (min-width:800px){.summary{grid-template-columns:180px 1fr;gap:2rem;padding:2rem 2.4rem}}
.summary h2{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--blue);margin:.35rem 0 0;font-weight:700}
.summary p{margin:0;color:var(--ink);font-size:1.05rem}

/* Grids & cards */
.grid{display:grid;gap:1.25rem}
@media (min-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid{gap:1.5rem}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.75rem;display:flex;flex-direction:column;gap:.25rem}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted);margin:0;font-size:1rem}
.section-soft .card{border-color:#e6ecf3}
.card-soft{background:var(--pearl)}
.section-soft .card-soft{background:var(--pearl-2)}
.card-link{position:relative;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur)}
.card-link:hover{box-shadow:var(--shadow-lg);border-color:var(--cloud-2);transform:translateY(-4px)}
.card-link h3 a{text-decoration:none;color:var(--navy)}
.card-link h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card-link:focus-within{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--blue-2)}
.card-link h3 a:focus-visible{outline:none}
.card-link:has(h3 a:focus-visible){outline:3px solid var(--blue-2);outline-offset:3px}
.card-link .more{margin-top:auto;padding-top:1.25rem;font-weight:600;font-size:.95rem;color:var(--blue);display:inline-flex;gap:.4rem;align-items:center}
.more svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.card-link:hover .more svg,.card-link:focus-within .more svg{transform:translateX(4px)}
.icon{width:48px;height:48px;border-radius:13px;background:var(--cloud);color:var(--blue);display:grid;place-items:center;margin-bottom:1.1rem;flex:none;transition:background var(--dur),color var(--dur)}
.icon svg{width:24px;height:24px}
.card-link:hover .icon,.card-link:focus-within .icon{background:var(--blue);color:#fff}
.section-navy .card{background:rgba(255,255,255,.035);border-color:var(--navy-line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.section-navy .card p{color:#b9cbe0}
.num{font-weight:600;color:var(--blue);font-size:.8rem;letter-spacing:.12em;font-variant-numeric:tabular-nums;display:block}
.section-navy .num{color:var(--sky)}

/* Lists, prose */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.5}
.ticks svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--cloud);color:var(--blue);margin-top:.1rem;stroke-width:3}
.two-col{display:grid;gap:2.5rem;align-items:start}
@media (min-width:920px){.two-col{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:4.5rem}.two-col>aside.card{position:sticky;top:calc(var(--header) + 24px)}}
.two-col>aside.card{padding:2rem;box-shadow:var(--shadow);border-radius:var(--radius-lg)}
.prose{max-width:72ch}
.prose h2{margin-top:1.8em;font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem)}
.prose h3{margin-top:1.6em}
.prose p,.prose li{color:var(--ink-2)}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--blue)}
.prose img{border-radius:var(--radius);margin:1.5rem 0}
.prose table{border-collapse:collapse;width:100%;margin:1.5rem 0;font-size:.95rem;display:block;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.prose td,.prose th{border-bottom:1px solid var(--line);padding:.7rem .85rem;vertical-align:top;text-align:left}
.prose th{background:var(--pearl);color:var(--navy);font-weight:650}
.prose blockquote{margin:1.75rem 0;padding:1.25rem 1.5rem;background:var(--pearl);border-radius:var(--radius);font-size:1.08rem;color:var(--navy)}
.prose>h2:first-child,.prose>.eyebrow+h2{margin-top:0}
.prose a{font-weight:500}

/* Steps */
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:2.25rem 2rem}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 2.5rem}}
.steps li{counter-increment:step;position:relative;padding-top:1.5rem;border-top:1px solid var(--line-2)}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-display);font-size:2.6rem;font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--blue);margin-bottom:1.1rem;font-variant-numeric:tabular-nums}
.steps li::after{content:"";position:absolute;left:0;top:-1px;width:48px;height:2px;background:var(--blue);transition:width .6s var(--ease)}
.steps li:hover::after{width:100%}
.steps p{color:var(--muted);margin:0;font-size:1rem}

/* Logos & chips */
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.75rem 2.75rem;list-style:none;padding:0;margin:0}
.logo-row li{display:flex;align-items:center}
.logo-row img{max-height:88px;width:auto;transition:transform var(--dur) var(--ease)}
.logo-row li:hover img{transform:translateY(-3px)}
.logo-row li.client{flex-direction:column;justify-content:center;gap:.6rem;font-size:.8rem;font-weight:600;color:var(--muted)}
.logo-row.clients img{max-height:52px;filter:grayscale(1);opacity:.7;transition:filter var(--dur),opacity var(--dur)}
.logo-row li.client:hover img{filter:none;opacity:1}
.client-strip{padding:3.5rem 0 1rem}
.client-strip h2{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:1.75rem;font-weight:700}
.client-strip .logo-row{gap:1.5rem 3.5rem}
.creds .logo-row{gap:2rem 3rem}
.creds .logo-row img{max-height:84px}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.chips li{background:#fff;border:1px solid var(--line);border-radius:var(--pill);padding:.55rem 1.1rem;font-size:.95rem;font-weight:550;color:var(--navy)}
.section-navy .chips li{background:rgba(255,255,255,.05);border-color:var(--navy-line);color:#fff}

/* A. Challenge chooser */
.chooser{display:grid;gap:1.5rem}
@media (min-width:960px){.chooser{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:start}}
.chooser-opts{display:grid;gap:.6rem}
.chooser-opt{display:flex;gap:1rem;align-items:flex-start;text-align:left;width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;cursor:pointer;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur),transform var(--dur) var(--ease)}
.chooser-opt:hover{border-color:var(--line-2);transform:translateX(3px)}
.chooser-opt[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,92,171,.12),var(--shadow);background:#fff}
.chooser-n{font-size:.8rem;font-weight:650;letter-spacing:.1em;color:var(--blue);padding-top:.15rem;font-variant-numeric:tabular-nums}
.chooser-opt strong{display:block;color:var(--navy);font-size:1.05rem;margin-bottom:.15rem}
.chooser-opt span span{display:block;color:var(--muted);font-size:.93rem;line-height:1.5}
.chooser-out{background:var(--pearl);border-radius:var(--radius-lg);padding:1.5rem;position:relative;overflow:hidden}
@media (min-width:700px){.chooser-out{padding:2.25rem}}
.chooser-art{margin:-1.5rem -1.5rem 1.25rem;aspect-ratio:16/8;overflow:hidden}
@media (min-width:700px){.chooser-art{margin:-2.25rem -2.25rem 1.5rem}}
.chooser-art img{width:100%;height:100%;object-fit:cover}
.guide-label{display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--blue-dark);background:var(--cloud);border-radius:var(--pill);padding:.25rem .65rem;margin-bottom:.9rem}
.chooser-panel h3{font-size:1.4rem}
.chooser-panel p{color:var(--ink-2)}
.chooser-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:1.25rem 0 0}
.chooser-note{font-size:.86rem;color:var(--muted);margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--line)}
.js .chooser-panel:not([hidden]){animation:swapIn var(--dur) var(--ease)}

/* B. Architecture */
.arch-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:980px){.arch-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem}}
.arch-copy p{color:#b9cbe0;font-size:1.06rem}
.arch-detail{margin:2rem 0 1rem;padding:1.25rem 1.4rem;border-radius:var(--radius);background:rgba(255,255,255,.05);border:1px solid var(--navy-line);min-height:8.5rem}
.arch-k{font-size:.68rem!important;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sky)!important;margin:0 0 .3rem}
.arch-detail strong{display:block;color:#fff;font-size:1.2rem;margin-bottom:.25rem}
.arch-detail p:last-child{margin:0;color:#c9d8ea;font-size:.98rem}
.arch-note{font-size:.84rem!important;color:#9fb4cc!important}
.arch{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1}
.arch-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arch-ring{fill:none;stroke:rgba(140,200,255,.18);stroke-width:.2;stroke-dasharray:.5 1.5}
.arch-line{stroke:rgba(140,200,255,.25);stroke-width:.3;fill:none;transition:stroke var(--dur)}
.arch-line.on{stroke:var(--sky)}
.arch-flow{stroke:#fff;stroke-width:.6}
.arch-flow.on{opacity:1}
.arch-core{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:28%;display:grid;place-content:center;text-align:center;background:linear-gradient(160deg,rgba(140,200,255,.35),rgba(31,116,212,.25));border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 80px rgba(31,116,212,.45)}
.arch-core span{color:#fff;font-weight:650;font-size:clamp(1rem,.8rem + .8vw,1.35rem);letter-spacing:-.02em}
.arch-core small{color:#cfe2f7;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.arch-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);min-width:6.5rem;min-height:44px;padding:.6rem 1rem;border-radius:var(--pill);font:inherit;font-size:.92rem;font-weight:600;color:#e7eef7;background:rgba(10,27,51,.6);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur) var(--ease)}
.arch-node:hover{border-color:var(--sky)}
.arch-node[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff;transform:translate(-50%,-50%) scale(1.05)}
.arch-node:focus-visible{outline-color:var(--sky)}
@media (max-width:520px){.arch-node{min-width:0;padding:.5rem .8rem;font-size:.8rem}}

/* C. Solution tabs */
.tablist{display:flex;gap:.35rem;padding:.35rem;background:var(--pearl);border-radius:var(--pill);width:max-content;max-width:100%;overflow-x:auto;margin-bottom:2rem;scrollbar-width:none}
.tablist [role="tab"]{flex:none;font:inherit;font-weight:600;font-size:.95rem;color:var(--muted);background:none;border:0;border-radius:var(--pill);padding:.7rem 1.2rem;min-height:44px;cursor:pointer;transition:background var(--dur),color var(--dur),box-shadow var(--dur)}
.tablist [role="tab"]:hover{color:var(--navy)}
.tablist [role="tab"][aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:var(--shadow)}
.tabpanel:focus-visible{outline-offset:6px;border-radius:var(--radius-lg)}
.js .tabpanel:not([hidden]){animation:swapIn var(--dur) var(--ease)}
.tabpanel+.tabpanel{margin-top:2.5rem}
.js .tabpanel+.tabpanel{margin-top:0}
.sol{display:grid;gap:2rem;align-items:center}
@media (min-width:960px){.sol{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:4rem}}
.sol-art{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--pearl);aspect-ratio:4/3}
.sol-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sol-art:hover img{transform:scale(1.03)}
.sol-art-dark{background:var(--navy)}
.sim-badge{position:absolute;left:1rem;top:1rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--navy);background:rgba(255,255,255,.92);border-radius:var(--pill);padding:.35rem .7rem}
.sol-purpose span,.sol-exp span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:.3rem}
.sol-purpose{font-size:1.12rem;color:var(--navy);margin-bottom:1.5rem}
.sol-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:1.5px solid var(--line)}
.sol-steps li{position:relative;display:flex;gap:1rem;padding:.75rem 0 .75rem 1.4rem;transition:opacity var(--dur)}
.sol-steps li::before{content:"";position:absolute;left:-6px;top:1.15rem;width:10px;height:10px;border-radius:50%;background:#fff;border:1.5px solid var(--line-2);transition:background var(--dur),border-color var(--dur)}
.js .sol-steps li{opacity:.45}
.js .sol-steps li.on,.js .sol-steps li.done{opacity:1}
.sol-steps li.on::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,92,171,.15)}
.sol-steps li.done::before{background:var(--cloud-2);border-color:var(--blue)}
.sol-n{font-size:.78rem;font-weight:650;color:var(--blue);padding-top:.2rem;font-variant-numeric:tabular-nums}
.sol-steps strong{color:var(--navy)}
.sol-steps p{margin:0;color:var(--muted);font-size:.95rem}
.sol-ctrl{display:none;align-items:center;gap:1rem;margin:1.5rem 0}
.js .sol-ctrl{display:flex;flex-wrap:wrap}
.sol-count{font-size:.88rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:6.5rem;text-align:center}
.sol-exp{margin:1.5rem 0 0;font-weight:600}
.js .sol-exp{margin-top:0}

/* D. Before/after */
.ba{display:grid;gap:1.5rem}
.seg{display:inline-flex;gap:.25rem;padding:.3rem;border-radius:var(--pill);background:#fff;border:1px solid var(--line);width:max-content}
.seg button{font:inherit;font-weight:600;font-size:.95rem;min-height:44px;padding:.55rem 1.4rem;border:0;border-radius:var(--pill);background:none;color:var(--muted);cursor:pointer;transition:background var(--dur),color var(--dur)}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.ba-stage{display:grid;gap:1.25rem}
@media (min-width:900px){.ba-stage{grid-template-columns:1fr 1fr}}
.ba-pane{border-radius:var(--radius-lg);padding:1.75rem;min-height:100%;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur)}
.ba-k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0 0 1.25rem}
.ba-before{background:#fff;border:1px dashed var(--line-2)}
.ba-before .ba-k{color:var(--muted)}
.ba-before ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem}
.ba-before li{font-size:.93rem;color:var(--ink-2);background:var(--pearl);border:1px solid var(--line);border-radius:10px;padding:.6rem .85rem;transform:rotate(var(--r,0deg))}
.ba-before li:nth-child(odd){--r:-1.2deg}.ba-before li:nth-child(3n){--r:1.4deg;margin-top:.4rem}
.ba-after{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.ba-after .ba-k{color:var(--sky)}
.ba-after ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ba-after li{position:relative;padding:.55rem 0 .55rem 1.75rem;font-size:.95rem;color:#e7eef7}
.ba-after li::before{content:"";position:absolute;left:0;top:.95rem;width:10px;height:10px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(140,200,255,.18)}
.ba-after li:not(:last-child)::after{content:"";position:absolute;left:4.5px;top:1.6rem;bottom:-.4rem;width:1px;background:rgba(140,200,255,.45)}
.js .ba[data-state="before"] .ba-after,.js .ba[data-state="after"] .ba-before{opacity:.35;filter:saturate(.4);transform:scale(.985)}
@media (max-width:899px){.js .ba[data-state="before"] .ba-after,.js .ba[data-state="after"] .ba-before{display:none}}

/* Why list */
.why{display:grid;gap:2rem}
@media (min-width:960px){.why{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5rem}.why .section-head{position:sticky;top:calc(var(--header) + 2rem);align-self:start}}
.why-list{list-style:none;margin:0;padding:0;display:grid}
.why-list li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.6rem 0;border-top:1px solid var(--line)}
.why-list li:last-child{border-bottom:1px solid var(--line)}
.why-list h3{margin-bottom:.3rem}
.why-list p{margin:0;color:var(--muted)}
.why-list .num{padding-top:.3rem}

/* E. Industries */
.ind-grid{display:grid;gap:1.25rem}
@media (min-width:700px){.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.ind-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:repeat(3,auto)}.ind-feature{grid-row:1/span 3}}
.ind-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur)}
.ind-card:hover,.ind-card:focus-within{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--cloud-2)}
.ind-art{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--pearl)}
.ind-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ind-card:hover .ind-art img{transform:scale(1.04)}
.ind-body{padding:1.5rem 1.6rem 1.6rem}
.ind-body h3 a{color:var(--navy);text-decoration:none}
.ind-body h3 a::after{content:"";position:absolute;inset:0}
.ind-body p{color:var(--muted);margin:0}
.ind-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem!important}
.ind-tags span{font-size:.78rem;font-weight:600;color:var(--blue-dark);background:var(--cloud);border-radius:var(--pill);padding:.25rem .65rem}
@media (min-width:1080px){
  .ind-card:not(.ind-feature){flex-direction:row}
  .ind-card:not(.ind-feature) .ind-art{flex:0 0 42%;aspect-ratio:auto}
  .ind-card:not(.ind-feature) .ind-body{padding:1.4rem 1.5rem;align-self:center}
  .ind-feature .ind-art{aspect-ratio:auto;flex:1}
  .ind-feature .ind-body{padding:2rem 2.2rem}
  .ind-feature h3{font-size:1.5rem}
}
.ind-more{margin:2rem 0 0}

/* F. Engagement models */
.models{display:grid;gap:0;border-top:1px solid var(--line-2)}
@media (min-width:700px){.models{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.models{grid-template-columns:repeat(4,minmax(0,1fr))}}
.model{padding:1.75rem 1.5rem 1.75rem 0;border-bottom:1px solid var(--line);position:relative}
@media (min-width:700px){.model{padding:2rem 1.75rem}.model:nth-child(odd){padding-left:0}}
@media (min-width:1080px){.model{border-bottom:0;padding:2rem 1.75rem 0;border-left:1px solid var(--line)}.model:first-child{border-left:0;padding-left:0}.model:nth-child(odd){padding-left:1.75rem}.model:first-child{padding-left:0}}
.model::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:2px;background:var(--blue)}
@media (min-width:1080px){.model:not(:first-child)::before{left:1.75rem}}
.model .num{margin-bottom:1.1rem}
.model p{color:var(--muted)}
.model dl{margin:1.25rem 0 0;display:grid;gap:.15rem}
.model dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-top:.6rem}
.model dd{margin:0;color:var(--navy);font-weight:550;font-size:.96rem}
.models-note{margin:2.5rem 0 0;color:var(--muted);font-size:.95rem}

/* G. Next steps */
.next{display:grid;gap:2.5rem;align-items:start}
@media (min-width:960px){.next{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5rem}}
.next p{color:var(--muted);font-size:1.08rem}
.next-steps{list-style:none;margin:0;padding:0;counter-reset:n;display:grid;gap:1rem}
.next-steps li{counter-increment:n;position:relative;background:#fff;border-radius:var(--radius-lg);padding:1.5rem 1.6rem 1.5rem 4.5rem;box-shadow:var(--shadow)}
.next-steps li::before{content:counter(n);position:absolute;left:1.5rem;top:1.45rem;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--cloud);color:var(--blue);font-weight:700;font-size:.9rem}
.next-steps h3{margin-bottom:.25rem}
.next-steps p{margin:0;font-size:.98rem}

/* FAQ */
.faq{max-width:880px;display:grid;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;font-weight:600;font-size:1.08rem;color:var(--navy);padding:1.4rem 3rem 1.4rem 0;list-style:none;position:relative;letter-spacing:-.01em;transition:color var(--dur)}
.faq summary:hover{color:var(--blue)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:.6rem;top:50%;width:14px;height:1.5px;background:var(--blue);transition:transform var(--dur) var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq details p{color:var(--muted);margin:0 0 1.5rem;max-width:68ch}
.faq details[open] p{animation:swapIn var(--dur) var(--ease)}

/* CTA band */
.cta-band{position:relative;isolation:isolate;overflow:hidden;background:var(--pearl) url("../img/photo/cta-960.webp") right center/cover no-repeat;background-image:image-set(url("../img/photo/cta-960.webp") 1x,url("../img/photo/cta.webp") 2x);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-xl);padding:3rem 1.75rem;display:grid;gap:1.75rem;align-items:center}
.cta-band h2{color:var(--navy);margin-bottom:.4rem;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.7rem)}
.cta-band p{color:var(--muted);margin:0;max-width:560px;font-size:1.08rem}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:.75rem}
@media (min-width:880px){.cta-band{grid-template-columns:1fr auto;padding:4.5rem 4.5rem;gap:3rem}}

/* Contact */
.contact-grid{display:grid;gap:2.5rem}
@media (min-width:920px){.contact-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4rem}}
.contact-list{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.25rem}
.contact-list li{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--line)}
.contact-list svg{width:40px;height:40px;padding:10px;border-radius:12px;background:var(--cloud);color:var(--blue);flex:none}
.contact-list strong{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:650;margin-bottom:.1rem}
.contact-list a{color:var(--navy);font-weight:600;text-decoration:none}
.contact-list a:hover{color:var(--blue)}
#book{border-radius:var(--radius-lg);background:var(--pearl);border-color:#e6ecf3;padding:2rem}
form.contact{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-lg)}
@media (min-width:700px){form.contact{padding:2.5rem}}
form.contact h2{font-size:1.6rem}
.field{margin-bottom:1.15rem}
.field label{display:block;font-weight:600;font-size:.93rem;margin-bottom:.4rem;color:var(--navy)}
.field .opt{font-weight:400;color:var(--muted);font-size:.86rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;padding:.8rem .95rem;border:1px solid var(--line-2);border-radius:10px;background:#fbfcfe;color:var(--ink);min-height:48px;transition:border-color var(--dur),box-shadow var(--dur),background var(--dur)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#aebdd0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(11,92,171,.15)}
.field [aria-invalid="true"]{border-color:#c0392b}
.field textarea{min-height:160px;resize:vertical}
form.contact button[type="submit"]{width:100%;padding:1rem 1.4rem}
@media (min-width:600px){form.contact button[type="submit"]{width:auto}}
.row-2{display:grid;gap:0 1rem}
@media (min-width:600px){.row-2{grid-template-columns:1fr 1fr}}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.88rem;color:var(--muted)}
.alert{padding:1rem 1.25rem;border-radius:12px;margin-bottom:1.25rem}
.alert-error{background:#fdf0ef;border:1px solid #f0b9b3;color:#7a1c1c}
.alert-ok{background:#ecf7f0;border:1px solid #a9d9bb;color:#14532d}

/* Blog */
.post-card{overflow:hidden}
.post-img{border-radius:10px;overflow:hidden;margin-bottom:1.1rem}
.post-card img{border-radius:10px;margin-bottom:1.1rem;aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform .7s var(--ease)}
.post-img img{margin:0;border-radius:0}
.post-card:hover img{transform:scale(1.04)}
.post-card h3{font-size:1.1rem}
.posts .post-card{padding:1.1rem 1.1rem 1.5rem}
.posts .post-card>p:not(.meta){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta{font-size:.86rem;color:var(--muted);letter-spacing:.01em}
.post-hero-img{border-radius:var(--radius-lg);margin:0 0 2.5rem;width:100%;box-shadow:var(--shadow-lg)}

/* Footer */
.site-footer{background:var(--navy);color:#a9bcd3;padding:4.5rem 0 2rem;font-size:.95rem;position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(140,200,255,.4),transparent)}
.site-footer a{color:#e7eef7;text-decoration:none;transition:color var(--dur)}
.site-footer a:hover{color:var(--sky)}
.site-footer picture img{width:140px;height:auto}
.footer-grid{display:grid;gap:2.5rem}
@media (min-width:700px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:3rem}}
.site-footer h2{color:#fff;font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:1.1rem;font-weight:700}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.site-footer address{font-style:normal}
.social{display:flex;gap:.6rem;margin-top:1.5rem;list-style:none;padding:0}
.site-footer .social{display:flex}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);transition:background var(--dur),border-color var(--dur)}
.social a:hover{background:var(--blue);border-color:var(--blue)}
.social svg{width:16px;height:16px;fill:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:3.5rem;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.84rem;color:#8ea4bf}

/* Inner page hero, split with art */
.page-hero-split::after{display:none}
.ph-grid{display:grid;gap:2rem;align-items:center}
@media (min-width:960px){.ph-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4rem}}
.ph-copy h1{max-width:none}
.ph-art{margin:0;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/3;background:var(--pearl);border:1px solid var(--line);box-shadow:var(--shadow-lg);max-width:560px;width:100%;justify-self:end}
.ph-art img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ph-art:hover img{transform:scale(1.03)}
.ph-art-dark{background:var(--navy);border-color:var(--navy-3)}
@media (max-width:959px){.ph-art{aspect-ratio:16/9;justify-self:stretch;max-width:none}}
@media (max-width:599px){.ph-art{aspect-ratio:16/10;border-radius:var(--radius-lg)}.page-hero .hero-actions{flex-direction:column}.page-hero .hero-actions .btn{width:100%}}

/* Editorial plain grids (non-link feature lists) */
.grid-plain{counter-reset:gp;gap:2.25rem 2.5rem}
.grid-plain>.card{counter-increment:gp;background:none!important;border:0;border-top:1px solid var(--line-2);border-radius:0;padding:1.5rem 0 0;position:relative}
.grid-plain>.card::before{content:counter(gp,decimal-leading-zero);display:block;font-size:.8rem;font-weight:650;letter-spacing:.12em;color:var(--blue);margin-bottom:.85rem;font-variant-numeric:tabular-nums}
.grid-plain>.card::after{content:"";position:absolute;left:0;top:-1px;width:40px;height:2px;background:var(--blue)}
.grid-plain>.card .ticks{margin-top:.5rem}
.grid-2.grid-plain>.card{padding-top:1.75rem}
.card-art{margin:0 0 1rem;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--pearl)}
.card-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card.has-art:hover .card-art img{transform:scale(1.04)}
.edu-head{display:grid;gap:2rem;align-items:center;margin-bottom:3rem}
.edu-head .section-head{margin-bottom:0}
@media (min-width:960px){.edu-head{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:4rem}}
.edu-art{margin:0;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:3/2;border:1px solid var(--line);box-shadow:var(--shadow)}
.edu-art img{width:100%;height:100%;object-fit:cover}

/* Blog index: featured first post */
@media (min-width:980px){
  .blog-list:not(.filtered)>.post-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:3rem;align-content:center;padding:1.25rem}
  .blog-list:not(.filtered)>.post-card:first-child>img{grid-row:1/span 5;margin:0;height:100%;max-height:420px}
  .blog-list:not(.filtered)>.post-card:first-child h3{font-size:1.75rem;letter-spacing:-.02em}
  .blog-list:not(.filtered)>.post-card:first-child>*:not(img){padding-right:1.5rem;grid-column:2}
}

/* Article layout */
.section-article{padding-top:3rem}
.post-hero{margin:0 0 3rem;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:2/1;background:var(--pearl)}
.post-hero img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;box-shadow:none}
.article-layout{display:grid;gap:3rem;align-items:start}
@media (min-width:1080px){.article-layout{grid-template-columns:minmax(0,72ch) minmax(0,300px);justify-content:space-between;gap:4rem}}
.article-layout .prose{font-size:1.08rem;line-height:1.8}
.article-layout .prose b,.article-layout .prose strong{color:var(--navy)}
.article-layout .prose h2 b,.article-layout .prose h3 b{font-weight:inherit}
.article-aside{display:grid;gap:1.5rem}
@media (min-width:1080px){.article-aside{position:sticky;top:calc(var(--header) + 24px)}}
.aside-card{background:var(--navy);color:#c9d8ea;border-radius:var(--radius-lg);padding:1.6rem;position:relative;overflow:hidden;isolation:isolate}
.aside-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 80% at 100% 0%,rgba(31,116,212,.45),transparent 70%)}
.aside-card p{font-size:.95rem}
.aside-k{font-size:.7rem!important;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0 0 .5rem;color:var(--muted)}
.aside-card .aside-k{color:var(--sky)}
.aside-links ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.aside-links a{font-size:.95rem}
.article-back{margin:3rem 0 0}
.btn-back:hover svg{transform:translateX(-4px)}

/* Service "in practice" band */
.flow-band{display:grid;gap:2.5rem;align-items:center}
@media (min-width:980px){.flow-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4.5rem}}
.flow-copy>p{color:#b9cbe0;font-size:1.06rem;max-width:560px}
.flow-steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0}
.flow-steps li{display:grid;grid-template-columns:2.75rem 1fr;gap:.75rem;padding:1.1rem 0;border-top:1px solid var(--navy-line)}
.flow-steps li:last-child{border-bottom:1px solid var(--navy-line)}
.flow-steps h3{font-size:1.05rem;margin:0 0 .2rem}
.flow-steps p{margin:0;color:#b9cbe0;font-size:.96rem}
.flow-steps .num{padding-top:.2rem}
.flow-art{position:relative;margin:0;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/3;background:var(--pearl);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.flow-art img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.flow-art:hover img{transform:scale(1.03)}
.flow-art-dark{background:var(--navy-2);border:1px solid var(--navy-line)}

/* Timeline roadmap */
@media (min-width:1000px){
  .steps-line{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.75rem;position:relative}
  .steps-line li{padding-top:2.25rem;border-top:0}
  .steps-line::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line-2)}
  .steps-line li::after{top:0;left:0;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--blue);transition:background var(--dur)}
  .steps-line li:hover::after{width:15px;background:var(--blue)}
  .steps-line li::before{font-size:.8rem;font-weight:650;letter-spacing:.12em;margin-bottom:.75rem}
  .steps-line h3{font-size:1.02rem}
  .steps-line p{font-size:.92rem}
  .section-navy .steps-line::before{background:var(--navy-line)}
  .section-navy .steps-line li::after{background:var(--navy);border-color:var(--sky)}
}
.section-navy .steps li{border-top-color:var(--navy-line)}
.section-navy .steps li::before{color:var(--sky)}
.section-navy .steps p{color:#b9cbe0}

/* FAQ two-column */
@media (min-width:980px){.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5rem;align-items:start}.faq-wrap .section-head{position:sticky;top:calc(var(--header) + 2rem);margin:0}}

/* Blog filter */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.filter button{font:inherit;font-size:.92rem;font-weight:600;min-height:44px;padding:.55rem 1.1rem;border-radius:var(--pill);border:1px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur)}
.filter button:hover{border-color:var(--navy)}
.filter button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.post-card[hidden]{display:none}
html:not(.js) .filter{display:none}

/* Legal */
.legal{display:grid;gap:2.5rem}
@media (min-width:980px){.legal{grid-template-columns:240px minmax(0,72ch);gap:5rem}.legal-toc{position:sticky;top:calc(var(--header) + 2rem);align-self:start}}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;border-left:1px solid var(--line)}
.legal-toc a{display:block;padding:.35rem 0 .35rem 1rem;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:.92rem;transition:color var(--dur),border-color var(--dur)}
.legal-toc a:hover,.legal-toc a.on{color:var(--blue);border-left-color:var(--blue)}
@media (max-width:979px){.legal-toc{background:var(--pearl);border-radius:var(--radius);padding:1.25rem}}

/* Utilities */
.text-center{text-align:center}
.mt-2{margin-top:2rem}
.mb-0{margin-bottom:0}
address{font-style:normal}

/* Reveal (only when JS runs) */
.js .rv{opacity:0;transform:translateY(var(--rise));transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .js .rv{opacity:1;transform:none}
}
@media print{.site-header,.site-footer,.cta-band,.nav-toggle,.mega{display:none}.page-hero,.section-navy{background:#fff;color:#000}}

/* Photographic assets */
.ph-art img,.flow-art img,.sol-art img,.chooser-art img,.edu-art img{object-position:right center}
.ph-art-dark,.flow-art-dark,.sol-art-dark{background:var(--pearl);border-color:var(--line)}
.ind-art img,.card-art img{object-position:center 35%}


/* =====================================================================
   Responsive fixes (2026-10-29, v2026r3). Appended so the original rules
   stay intact; every rule here is scoped to a breakpoint or a component.
   ===================================================================== */

/* 1. Home hero: the floating "illustrative workflow" card overlapped the
      Education Cloud node and the selected-service panel on wide screens.
      Narrower card, anchored in the empty bottom-left corner of the stage. */
@media (min-width:1180px){
  .flow-card{width:188px;left:-2rem;bottom:1.5rem;padding:.75rem .9rem}
  .flow-card .flow-k{margin-bottom:.4rem}
  .flow-card ol{gap:.3rem}
  .flow-card li{font-size:.82rem}
  .hero .eco-panel{padding-left:10.5rem;min-height:6.2rem}
}
@media (min-width:1180px) and (max-width:1279px){
  .flow-card{width:170px;left:-2.25rem}
  .flow-card li{font-size:.75rem;white-space:nowrap}
  .hero .eco-panel{padding-left:9.5rem}
}

/* 2. CTA band: on narrow screens the photo sat directly behind the copy.
      A pearl-to-transparent veil keeps the text readable and the photo visible
      at the bottom/right; desktop (>=880px) is unchanged. */
@media (max-width:879px){
  .cta-band{background-position:right bottom;padding:2.25rem 1.5rem}
  .cta-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(246,248,251,.97) 0%,rgba(246,248,251,.97) 58%,rgba(246,248,251,.55) 100%)}
  .cta-band .actions{flex-direction:column;align-items:stretch}
  .cta-band .actions .btn{width:100%}
}

/* 3. Solution tabs: the pill row scrolled sideways and clipped the second
      tab label on phones. Wrap into full-width rows instead. */
@media (max-width:599px){
  .tablist{width:100%;flex-wrap:wrap;overflow:visible;border-radius:18px;gap:.3rem}
  .tablist [role="tab"]{flex:1 1 100%;text-align:center;padding:.65rem 1rem}
}

/* 4. Legibility floor on small screens: no running text below 12px.
      Letter-spaced labels keep their style, just slightly larger. */
@media (max-width:1039px){
  .eyebrow,.site-footer h2,.client-strip h2,.summary h2,.hero-cred span,
  .aside-k,.arch-k,.mega-h,.flow-k,.sim-badge,.sol-purpose span,.sol-exp span,
  .contact-list strong,.chooser-n,.sol-n,.footer-bottom{font-size:.76rem!important}
  .mega a span{font-size:.9rem}
  .eco-core span{font-size:clamp(.58rem,.42rem + .4vw,.66rem)}
  .hero-points,.chooser-opt span span,.chooser-note,.arch-note,.steps-line p,.post-card .meta{font-size:.95rem}
}
@media (max-width:599px){
  .eco-label{font-size:.72rem}
  .eco-node{width:5.2rem}
}

/* 5. Touch targets: footer and legal-TOC links were ~15px tall. Give them a
      taller hit area without changing the visual rhythm. */
@media (max-width:1039px){
  .site-footer ul:not(.social) a,.aside-links a{display:inline-block;padding:.45rem 0;margin:-.45rem 0}
  .site-footer ul:not(.social){gap:.9rem}
  .legal-toc a{padding-top:.6rem;padding-bottom:.6rem}
  .breadcrumb a{display:inline-block;padding:.3rem 0}
  .mega-toggle{width:48px;height:48px}
}
@media (hover:none){
  .site-nav a{padding:1rem 0}
}

/* 6. Long breadcrumb titles (blog posts) wrapped onto three lines on phones. */
@media (max-width:599px){
  .breadcrumb li:last-child{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* 7. Aside cards: the "Talk to an expert" button sat flush against the last
      list item because `.card p{margin:0}` cancelled the `.mt-2` spacing. */
.card p.mt-2{margin-top:1.5rem}

/* =====================================================================
   Visual refinement (2026-11-02, v2026r4). Desktop width, proportion and
   rhythm. Appended; original rules untouched. Mobile/tablet (<1280px)
   behaviour is unchanged except where noted.
   ===================================================================== */

/* 1. Content container scales with the screen instead of stopping at 1240px.
      1280-1439: 1240 (as before)  |  1440-1679: 1320  |  1680+: 1400  |  1920+: 1440 */
@media (min-width:1440px){ :root{--wrap:1320px} .wrap{padding:0 2.5rem} }
@media (min-width:1680px){ :root{--wrap:1400px} .wrap{padding:0 3rem} }
@media (min-width:1920px){ :root{--wrap:1440px} }

/* 2. Inner text blocks grow in step so headings and leads do not look pinched
      inside the wider container (line length stays within ~75 characters). */
@media (min-width:1440px){
  .section-head{max-width:780px}
  .section-head-split{max-width:none}          /* two-column heads keep their full width */
  .section-head-split>p{max-width:520px}
  .section-head p{font-size:1.14rem}
  .hero-copy{max-width:660px}
  .hero p.lead{max-width:600px}
  .page-hero h1{max-width:960px}
  .page-hero p.lead{max-width:820px}
  .faq{max-width:960px}
  .cta-band p{max-width:620px}
  .summary{grid-template-columns:200px 1fr;padding:2.25rem 2.75rem}
}
@media (min-width:1680px){
  .section-head{max-width:820px}
  .section-head-split{max-width:none}
  :root{--fs-h2:clamp(1.8rem,1.3rem + 1.9vw,3rem)}
  .section{padding:7rem 0}
}

/* 3. Card grids with seven or more tiles use four columns on wide screens, so
      the home services grid (8), the services page (7) and the 404 page (7)
      fill the width instead of leaving a lone card and a half-empty row.
      Three-card grids (related services, insights) are not affected. */
@media (min-width:1440px){
  .grid-3:not(.grid-plain):not(.blog-list):has(> :nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr))}
  .blog-list{grid-template-columns:repeat(4,minmax(0,1fr))}   /* featured + 12 posts = 3 even rows */
  .grid{gap:1.5rem 1.5rem}
  .card{padding:1.9rem}
}

/* 4. Two-column layouts breathe a little more on wide screens. */
@media (min-width:1440px){
  .two-col{gap:5.5rem}
  .arch-grid,.flow-band,.ph-grid{gap:5rem}
  .chooser{gap:3.5rem}
  .contact-grid{gap:5rem}
  .footer-grid{gap:3.5rem}
}

/* 5. Reading layouts (blog article, legal pages) are centred as a unit rather
      than hugging the left edge with an empty right third. Line length kept at 72ch. */
@media (min-width:1080px){
  .article-layout{max-width:calc(72ch + 300px + 4rem);margin-inline:auto}
  .legal{max-width:calc(240px + 72ch + 5rem);margin-inline:auto}
}
@media (min-width:1440px){
  .article-layout{grid-template-columns:minmax(0,72ch) minmax(0,320px);gap:5rem;max-width:calc(72ch + 320px + 5rem)}
  .legal{gap:6rem;max-width:calc(240px + 72ch + 6rem)}
  .post-hero{max-width:1100px;margin-inline:auto}
}

/* 6. Contact page while the form is disabled: present the notice as a proper
      panel instead of a bare paragraph floating in an empty column. */
.contact-grid > div:has(> form[hidden]) > #form-unavailable{background:var(--pearl);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.75rem 2rem;box-shadow:var(--shadow);font-size:1.05rem;line-height:1.7}
@media (min-width:920px){ .contact-grid > div:has(> form[hidden]){position:sticky;top:calc(var(--header) + 24px)} }

/* 7. Industries "other sectors" grid: text-only and photo cards share one grid,
      so align every card to the top edge and keep the photo slot a consistent 3:2. */
.ind-list{align-items:start}
.ind-list .card-art{aspect-ratio:3/2}

/* 8. Hero stage and page-hero art keep their proportions as the grid widens. */
@media (min-width:1440px){
  .eco{max-width:560px}
  .ph-art{max-width:640px;justify-self:end}
  .flow-art,.sol-art{max-width:640px;justify-self:end}
}