/* ============================================================
   OneSourceIT — site-wide styles (light brand system)
   Hanken Grotesk + JetBrains Mono · blue / green / slate / paper
   ============================================================ */
/* Self-hosted variable webfonts (SIL OFL). No third-party font CDN. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/HankenGrotesk-variable.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/JetBrainsMono-variable.woff2') format('woff2')}
:root{
  --paper:#EEF1F4; --paper2:#E7ECF0; --card:#FFFFFF;
  --ink:#16202E; --ink2:#37424f; --muted:#6A737F; --muted2:#9aa3ad;
  --line:#E0E5EA; --line2:#EDF0F3;
  --blue:#1E4E7E; --blue-deep:#173e64; --blue-lite:#6FA6DC;
  --green:#5FA537; --green-deep:#4d8a2b; --green-lite:#8FCE5F;
  --amber:#C9892F; --purple:#5E2A6E; --teal:#0E7079;
  --danger:#B0483C; --danger-lite:#d98a76;
  /* type scale (px) */
  --text-3xs:10px; --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-md:14px; --text-lg:16px; --text-xl:18px; --text-2xl:21px;
  /* space scale (4px grid) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:44px; --space-8:56px;
  /* amber/green status-callout theme */
  --amber-deep:#7a5414; --amber-bg:#FBF3E4; --amber-line:#ECD9B4; --green-bg:#EAF4E0;
  --slate:#222B36; --slate2:#2c3743;
  --mono:'JetBrains Mono',monospace; --sans:'Hanken Grotesk',sans-serif;
  --maxw:1180px;
  --accent:var(--blue);
  --accent-deep:color-mix(in srgb, var(--accent) 82%, #000);
  --accent-lite:color-mix(in srgb, var(--accent) 55%, #fff);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh;
}
main{flex:1 0 auto}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--space-7)}
a{color:inherit}

/* scroll progress */
.progress{position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--blue),var(--green)); z-index:200; transition:width .1s linear}
body[data-page] .progress{background:linear-gradient(90deg,var(--accent),var(--accent-deep))}

/* ---------------- NAV ---------------- */
header{position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
header nav{display:flex; align-items:center; justify-content:space-between; height:68px; max-width:var(--maxw); margin:0 auto; padding:0 var(--space-7)}
.brand{display:flex; align-items:center; gap:var(--space-3); text-decoration:none}
.logo-mark{width:30px;height:30px;flex:none;display:block} /* single canonical mark: assets/monogram.svg (header, footer, favicon) */
.wordmark{font-family:var(--sans); font-weight:800; letter-spacing:-0.03em; font-size:var(--text-2xl); line-height:1; white-space:nowrap}
.wordmark .one,.wordmark .it{color:var(--blue)} .wordmark .source{color:var(--green)} .wordmark .it{font-size:0.85em}
.navlinks{display:flex; align-items:center; gap:var(--space-6)}
.navlinks a{font-size:var(--text-md); font-weight:600; color:var(--ink2); text-decoration:none; white-space:nowrap; transition:color .15s}
.navlinks a:hover{color:var(--ink)}
/* specialty pages — first-class nav pills */
.nav-spec{display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4);
  border:1px solid var(--line); border-radius:99px; background:#fff; font-size:var(--text-sm) !important}
.nav-spec .dot{width:7px; height:7px; border-radius:50%; flex:none}
.dot-imaging{background:var(--green)} .dot-aws{background:var(--amber)} .dot-modernization{background:var(--blue)} .dot-tools{background:var(--teal)} .dot-oss{background:var(--purple)}
.nav-spec:hover{border-color:var(--blue-lite)}
.nav-spec[aria-current="page"]{border-color:var(--blue); color:var(--ink)}
@media(min-width:981px) and (max-width:1340px){
  .navlinks{gap:var(--space-4)}
  .navlinks a{font-size:var(--text-sm)}
  .nav-spec{padding:var(--space-2) var(--space-3)}
}
/* narrow-desktop band: keep the first-class items (specialty pills + CTA), drop in-page anchors */
@media(min-width:981px) and (max-width:1120px){
  .navlinks a:not(.nav-spec):not(.nav-cta){display:none}
}
.nav-cta{padding:var(--space-2) var(--space-4); background:var(--accent); color:#fff !important; border-radius:8px; font-weight:700 !important}
.nav-cta:hover{background:var(--accent-deep)}
.nav-toggle{display:none; flex-direction:column; gap:var(--space-1); background:none; border:0; cursor:pointer; padding:var(--space-2)}
.nav-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* ---------------- BUTTONS ---------------- */
.btn{display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--sans);
  font-weight:700; font-size:var(--text-lg); padding:var(--space-3) var(--space-5); border-radius:9px; text-decoration:none;
  cursor:pointer; border:1px solid transparent; transition:.18s; white-space:nowrap}
.btn .arrow{transition:transform .18s}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink2); background:#fff}

/* ---------------- SECTION SCAFFOLD ---------------- */
section{position:relative}
.section{padding:96px 0}
.band{background:var(--paper2)}
.band-top{border-top:1px solid var(--line)}
.eyebrow{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:0.16em; text-transform:uppercase; color:var(--green-deep)}
.sec-head{max-width:760px}
.sec-head h2{font-weight:800; font-size:clamp(28px,3.4vw,38px); letter-spacing:-0.03em; line-height:1.06; margin-top:var(--space-4)}
.sec-head .lede{color:var(--ink2); font-size:var(--text-xl); line-height:1.6; margin-top:var(--space-4); max-width:64ch}
.sec-head .lede b{color:var(--ink); font-weight:700}

/* ---------------- HERO ---------------- */
.hero{padding:72px 0 70px}
.hero-grid{display:grid; grid-template-columns:1.08fr 0.92fr; gap:var(--space-8); align-items:center}
.hero-pill{display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--mono); font-size:var(--text-xs);
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink2);
  border:1px solid var(--line); background:#fff; padding:var(--space-2) var(--space-3); border-radius:100px}
.hero-pill::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
.hero h1{font-weight:800; font-size:clamp(38px,5vw,60px); line-height:1.02; letter-spacing:-0.038em; margin:var(--space-5) 0 0}
.hero h1 .accent{color:var(--blue)}
.hero .subhead{font-size:var(--text-xl); line-height:1.6; color:var(--ink2); margin-top:var(--space-5); max-width:54ch}
.hero .subhead strong{color:var(--ink); font-weight:700}
.hero-actions{display:flex; gap:var(--space-3); margin-top:var(--space-6); flex-wrap:wrap}
.hero-trust{margin-top:var(--space-6); font-family:var(--mono); font-size:var(--text-xs); line-height:1.7; color:var(--muted); letter-spacing:0.01em}
.hero-trust b{color:var(--ink2); font-weight:500}

/* hero brand plate */
.hero-mark{position:relative; background:var(--slate); border-radius:18px; padding:var(--space-6); aspect-ratio:1/0.92;
  display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 30px 60px -34px rgba(20,32,46,.5)}
.hero-mark::before{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 18%, rgba(111,166,220,.10), transparent 60%)}
.brandplate{position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--space-4); text-align:center; padding:0 var(--space-5)}
.brandplate-wordmark{font-family:var(--sans); font-weight:800; letter-spacing:-0.03em; line-height:1; white-space:nowrap;
  font-size:clamp(34px,4.4vw,52px)}
.brandplate-wordmark .one,.brandplate-wordmark .it{color:var(--blue-lite)} .brandplate-wordmark .source{color:var(--green-lite)} .brandplate-wordmark .it{font-size:0.85em}
.brandplate-rule{width:54px; height:2px; border-radius:2px; background:rgba(255,255,255,.16); margin:var(--space-1) 0}
.brandplate-tag{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.brandplate-tag.dimmed{color:rgba(255,255,255,.4); letter-spacing:0.16em}

/* capability rail */
.hero-rail{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:var(--space-8);
  border:1px solid var(--line); border-radius:13px; background:#fff; overflow:hidden}
.hero-rail a{display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-5) var(--space-5); text-decoration:none; transition:background .15s}
.hero-rail a+a{border-left:1px solid var(--line2)}
.hero-rail a:hover{background:var(--paper)}
.hero-rail .number{font-family:var(--mono); font-size:var(--text-xs); color:var(--green-deep)}
.hero-rail .label{font-size:var(--text-md); font-weight:700; color:var(--ink); line-height:1.25; letter-spacing:-0.01em}

/* ---------------- PROMISE / REVERSALS ---------------- */
.promise{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-7)}
.reversal{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:var(--space-6) var(--space-6)}
.reversal .number{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:0.1em; color:var(--muted)}
.reversal .number b{color:var(--blue); font-weight:600}
.reversal h3{font-weight:800; font-size:var(--text-xl); letter-spacing:-0.02em; margin:var(--space-4) 0 var(--space-3)}
.reversal p{color:var(--ink2); font-size:var(--text-md); line-height:1.62}
.reversal p b{color:var(--ink); font-weight:700}

/* ---------------- CAPABILITIES ---------------- */
.caps{display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-7)}
.cap{display:grid; grid-template-columns:1.15fr 0.85fr; gap:0; background:var(--card);
  border:1px solid var(--line); border-radius:16px; overflow:hidden}
.cap-left{padding:var(--space-6) var(--space-6)}
.cap-index{font-family:var(--mono); font-size:var(--text-xs); color:var(--muted); display:flex; align-items:center; gap:var(--space-3); letter-spacing:0.06em}
.cap-index .tag{border:1px solid var(--line); border-radius:5px; padding:var(--space-1) var(--space-2); color:var(--ink2); font-size:var(--text-3xs); letter-spacing:0.08em; text-transform:uppercase}
.cap-left h3{font-weight:800; font-size:var(--text-2xl); letter-spacing:-0.025em; margin:var(--space-4) 0 var(--space-4); line-height:1.1}
.cap-problem{border-left:2px solid var(--line); padding-left:var(--space-4); margin-bottom:var(--space-4)}
.cap-problem .question-label{font-family:var(--mono); font-size:var(--text-3xs); letter-spacing:0.12em; color:var(--muted2)}
.cap-problem p{font-size:var(--text-md); color:var(--ink2); line-height:1.55; margin-top:var(--space-1); font-style:italic}
.cap-outcome{font-size:var(--text-lg); line-height:1.58; color:var(--ink2)}
.cap-outcome b{color:var(--ink); font-weight:700}
.cap-proof{font-size:var(--text-sm); line-height:1.58; color:var(--muted); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px dashed var(--line)}
.cap-proof b{color:var(--green-deep); font-weight:700}
.cap-more{display:inline-block; margin-left:var(--space-2); color:var(--blue); font-weight:700; text-decoration:none}
.cap-more:hover{text-decoration:underline}
.cap-offers{background:var(--paper); border-left:1px solid var(--line); padding:var(--space-6) var(--space-6); display:flex; flex-direction:column; gap:var(--space-1)}
.cap-offers .offers-heading{font-family:var(--mono); font-size:var(--text-3xs); letter-spacing:0.12em; color:var(--muted); margin-bottom:var(--space-3)}
.offer{padding:var(--space-3) 0; border-top:1px solid var(--line2)}
.offer:first-of-type{border-top:0}
.offer .name{display:block; font-weight:700; font-size:var(--text-md); color:var(--ink); letter-spacing:-0.01em}
.offer .description{display:block; font-size:var(--text-xs); color:var(--ink2); line-height:1.5; margin-top:var(--space-1)}

/* ---------------- COMPLIANCE STRIP ---------------- */
.comply{padding:var(--space-8) 0}
.comply-inner{max-width:880px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-4)}
.comply .badge{width:42px; height:42px; border-radius:11px; background:color-mix(in srgb,var(--green) 14%,#fff);
  border:1px solid color-mix(in srgb,var(--green) 30%,var(--line)); display:flex; align-items:center; justify-content:center}
.comply .badge svg{width:22px; height:22px; stroke:var(--green-deep); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.comply p{font-size:clamp(18px,2.2vw,23px); line-height:1.5; letter-spacing:-0.015em; color:var(--ink); font-weight:600; max-width:30ch}
.comply p b{color:var(--green-deep)}
.comply .subhead{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:0.06em; color:var(--muted); font-weight:400; max-width:none}

/* ---------------- PROOF ---------------- */
.proof-row{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-top:var(--space-7)}
.proof-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:var(--space-5) var(--space-5); display:flex; flex-direction:column; gap:var(--space-4)}
.proof-card .index{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:0.1em; color:var(--blue); font-weight:500}
.proof-card p{font-size:var(--text-md); line-height:1.6; color:var(--ink2)}
.proof-card p b{color:var(--ink); font-weight:700}
.proof-card .bar{height:3px; width:34px; border-radius:3px; background:var(--green); margin-top:auto}
.proof-card[data-leg="imaging"] .bar{background:var(--green-deep)}
.proof-card[data-leg="cloud"] .bar{background:var(--amber)}
.proof-card[data-leg="modernization"] .bar{background:var(--blue)}
.proof-card[data-leg="tools"] .bar{background:var(--teal)}
.proof-link{font-size:var(--text-sm); font-weight:700; color:var(--blue); text-decoration:none; margin-top:-var(--space-1)}
.proof-link:hover{text-decoration:underline}

/* ---------------- FLOW ---------------- */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:var(--space-7); counter-reset:s}
.step{padding:0 var(--space-5) var(--space-1); position:relative}
.step:first-child{padding-left:0}
.step::before{content:""; position:absolute; top:7px; left:0; right:0; height:2px; background:var(--line)}
.step:first-child::before{left:0}
.step .dot{width:15px; height:15px; border-radius:50%; background:#fff; border:2px solid var(--blue); position:relative; z-index:2; margin-bottom:var(--space-5)}
.step .number{font-family:var(--mono); font-size:var(--text-xs); color:var(--green-deep)}
.step h4{font-weight:800; font-size:var(--text-xl); letter-spacing:-0.02em; margin:var(--space-2) 0 var(--space-2)}
.step p{font-size:var(--text-md); line-height:1.58; color:var(--ink2)}

/* ---------------- FIT ---------------- */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-7)}
.fit-col{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:var(--space-6) var(--space-6)}
.fit-col.yes{border-top:3px solid var(--green)}
.fit-col.no{border-top:3px solid var(--muted2)}
.fit-col h3{display:flex; align-items:center; gap:var(--space-3); font-weight:800; font-size:var(--text-xl); letter-spacing:-0.02em; margin-bottom:var(--space-4)}
.fit-col .icon{width:26px; height:26px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center}
.fit-col.yes .icon{background:color-mix(in srgb,var(--green) 16%,#fff); color:var(--green-deep)}
.fit-col.no .icon{background:#F0F2F5; color:var(--muted)}
.fit-col .icon svg{width:15px; height:15px; fill:none; stroke-width:2.4}
.fit-col ul{list-style:none; display:flex; flex-direction:column; gap:var(--space-3)}
.fit-col li{font-size:var(--text-md); line-height:1.5; color:var(--ink2); padding-left:var(--space-4); position:relative}
.fit-col li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%}
.fit-col.yes li::before{background:var(--green)}
.fit-col.no li::before{background:var(--muted2)}

/* ---------------- CONTACT ---------------- */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--space-8); align-items:start}
.contact-copy h2{font-weight:800; font-size:clamp(28px,3.4vw,38px); letter-spacing:-0.03em; line-height:1.06; margin-top:var(--space-4)}
.contact-copy h2 .accent{color:var(--blue)}
.contact-copy p{color:var(--ink2); font-size:var(--text-lg); line-height:1.6; margin-top:var(--space-4); max-width:42ch}
.contact-direct{margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--line)}
.contact-direct .label{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:0.12em; color:var(--muted)}
.contact-direct a{display:block; font-weight:700; font-size:var(--text-xl); color:var(--blue); text-decoration:none; margin-top:var(--space-2); letter-spacing:-0.01em}

.form{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:var(--space-6) var(--space-6); box-shadow:0 24px 50px -38px rgba(20,32,46,.4)}
.field-row{margin-bottom:var(--space-4)}
.field-row.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4)}
.field-row label{display:block; font-size:var(--text-sm); font-weight:700; color:var(--ink); margin-bottom:var(--space-2)}
.required{color:var(--green-deep)}
.field{width:100%; font-family:var(--sans); font-size:var(--text-md); color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:9px; padding:var(--space-3) var(--space-3); transition:.15s}
.field:focus{outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent)}
textarea.field{min-height:104px; resize:vertical; line-height:1.5}
select.field{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236A737F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:var(--space-6)}
.field-error{display:none; font-size:var(--text-xs); color:var(--danger); margin-top:var(--space-1)}
.field-row.invalid .field-error{display:block}
.field-row.invalid .field{border-color:var(--danger-lite)}
.form-actions{display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-2)}
.form-note{font-family:var(--mono); font-size:var(--text-2xs); color:var(--muted)}
.form-success{display:none; flex-direction:column; align-items:flex-start; gap:var(--space-3); text-align:left}
.form-success.show{display:flex}
.form-body.hide{display:none}
.form-success .success-icon{width:46px; height:46px; border-radius:12px; background:color-mix(in srgb,var(--green) 16%,#fff); display:flex; align-items:center; justify-content:center}
.form-success .success-icon svg{width:24px; height:24px; stroke:var(--green-deep); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.form-success h4{font-weight:800; font-size:var(--text-xl); letter-spacing:-0.02em}
.form-success p{color:var(--ink2); font-size:var(--text-md); line-height:1.6}
.form-success p b{color:var(--ink)}

/* ---------------- FOOTER ---------------- */
footer{background:var(--slate); color:#fff; padding:var(--space-7) 0}
.foot{display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap}
.foot .wordmark .one,.foot .wordmark .it{color:#fff}.foot .wordmark .source{color:var(--green-lite)}
.foot-brand{display:flex; align-items:center; gap:var(--space-3)}
.foot-meta{text-align:right}
.foot-meta .top{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:0.06em; color:rgba(255,255,255,.85)}
.foot-meta p+p{font-size:var(--text-sm); color:rgba(255,255,255,.55); margin-top:var(--space-2)}
.foot-meta p.foot-legal{font-size:var(--text-2xs); color:rgba(255,255,255,.4); margin-top:var(--space-3)}
.foot-meta p.foot-legal a{color:rgba(255,255,255,.55)}
.foot-meta p.foot-legal a:hover{color:var(--green-lite)}
.foot-meta a{color:var(--green-lite); text-decoration:none}
.foot-nav{display:flex; flex-direction:column; gap:var(--space-2)}
.foot-nav .foot-heading{font-family:var(--mono); font-size:var(--text-3xs); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:var(--space-1)}
.foot-nav a{color:rgba(255,255,255,.82); text-decoration:none; font-size:var(--text-sm); font-weight:600}
.foot-nav a:hover{color:var(--green-lite)}
.foot-nav a[aria-current="page"]{color:var(--green-lite)}

/* ---------------- REVEAL ---------------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:var(--space-7)}
  .hero-mark{max-width:440px; aspect-ratio:1/0.7}
  .hero-rail{grid-template-columns:repeat(2,1fr)}
  .hero-rail a:nth-child(odd){border-left:0}
  .hero-rail a{border-top:1px solid var(--line2)}
  .hero-rail a:nth-child(-n+2){border-top:0}
  .proof-row{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr; gap:var(--space-6) 0}
  .contact-grid{grid-template-columns:1fr; gap:var(--space-6)}
}
@media(max-width:720px){
  .wrap{padding:0 var(--space-5)}
  header nav{padding:0 var(--space-5)}
  .section{padding:64px 0}
  .promise,.cap,.fit,.field-row.split{grid-template-columns:1fr}
  .cap-offers{border-left:0; border-top:1px solid var(--line)}
  .proof-row{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr; gap:0}
  .step{padding:var(--space-4) 0 var(--space-4) var(--space-6)}
  .step::before{top:0; bottom:0; left:7px; right:auto; width:2px; height:auto}
  .step .dot{margin-bottom:var(--space-3)}
  .foot{flex-direction:column; align-items:flex-start; gap:var(--space-5)}
  .foot-meta{text-align:left}
}

/* hamburger nav — kicks in at 980px so the fuller nav (3 pills + CTA) never overflows.
   Lives at the END of the file so it wins the cascade over the base
   .nav-toggle{display:none} and .navlinks rules above. */
@media(max-width:980px){
  .navlinks{position:fixed; inset:68px 0 auto 0; flex-direction:column; gap:0; background:var(--paper);
    border-bottom:1px solid var(--line); padding:var(--space-2) var(--space-5) var(--space-4); align-items:stretch;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.2s}
  .navlinks.open{transform:none; opacity:1; pointer-events:auto}
  .navlinks a{padding:var(--space-3) 0; border-bottom:1px solid var(--line2)}
  .nav-spec{border:0; border-bottom:1px solid var(--line2); border-radius:0; background:none; padding:var(--space-3) 0}
  .nav-cta{text-align:center; margin-top:var(--space-3); border-bottom:0 !important}
  .nav-toggle{display:flex}
}

/* ---------------- SENSITIVE-DATA NOTES & LEGAL DOC ---------------- */
.sens-note{margin:var(--space-1) 0 var(--space-4); padding:var(--space-3) var(--space-3); background:var(--amber-bg); border:1px solid var(--amber-line); border-radius:10px; font-size:.83rem; line-height:1.55; color:var(--amber-deep)}
.sens-note b{color:var(--amber-deep)}
.sens-note a{color:inherit; font-weight:600}

.legal{display:grid; grid-template-columns:minmax(220px,290px) minmax(0,1fr); gap:var(--space-6) var(--space-8); align-items:start}
.legal-head{position:sticky; top:calc(68px + var(--space-5))}
.legal-head h1{font-size:clamp(30px,4.5vw,42px); letter-spacing:-0.02em; line-height:1.1; margin:var(--space-3) 0 var(--space-4)}
.legal-head .lede{font-size:1.02rem; color:var(--ink2); line-height:1.6}
.legal-head .updated{margin-top:var(--space-5); font-family:var(--mono); font-size:var(--text-xs); color:var(--muted)}
.legal-body{max-width:72ch}
.legal-body h2{font-size:1.15rem; margin:var(--space-6) 0 var(--space-3); letter-spacing:-0.01em}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body li{color:var(--ink2); font-size:.98rem; line-height:1.65}
.legal-body p + p{margin-top:var(--space-3)}
.legal-body ul{margin:var(--space-2) 0 var(--space-2) var(--space-5)}
.legal-body li{margin:var(--space-1) 0}
.legal-body a{color:var(--accent)}
@media(max-width:820px){ .legal{grid-template-columns:1fr; gap:var(--space-4)} .legal-head{position:static} }

/* ---------------- OPEN SOURCE PAGE ---------------- */
.oss-hero{padding:84px 0 var(--space-3)}
.oss-hero h1{font-size:clamp(34px,5vw,52px); letter-spacing:-0.03em; line-height:1.06; margin:var(--space-3) 0 var(--space-4)}
.oss-hero h1 .accent{color:var(--accent)}
.oss-hero .lede{font-size:1.08rem; color:var(--ink2); max-width:64ch}
.oss-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-5)}
.oss-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:var(--space-5) var(--space-5) var(--space-4); display:flex; flex-direction:column; gap:var(--space-3)}
.oss-card h3{font-family:var(--mono); font-size:1.02rem; letter-spacing:-0.01em}
.oss-card p{color:var(--ink2); font-size:.93rem; line-height:1.6; flex:1}
.oss-status{align-self:flex-start; font-family:var(--mono); font-size:var(--text-3xs); font-weight:600; letter-spacing:.13em; text-transform:uppercase; border-radius:999px; padding:var(--space-1) var(--space-3); border:1.5px solid}
.oss-status.mature{background:color-mix(in srgb,var(--accent) 14%,#fff); border-color:var(--accent); color:var(--accent-deep)}
.oss-status.active{background:color-mix(in srgb,var(--accent) 7%,#fff); border-color:color-mix(in srgb,var(--accent) 55%,#fff); color:var(--accent)}
.oss-status.planning{background:#fff; border-color:color-mix(in srgb,var(--accent) 32%,var(--line)); color:var(--muted)}
.oss-meta{display:flex; align-items:center; gap:var(--space-3); font-family:var(--mono); font-size:var(--text-2xs); color:var(--muted); border-top:1px solid var(--line); padding-top:var(--space-3)}
.oss-meta a{color:var(--accent); font-weight:600; text-decoration:none; margin-left:auto}
.oss-meta a:hover{text-decoration:underline}
.oss-note{margin-top:var(--space-4); padding:var(--space-4) var(--space-4); background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; font-size:.92rem; line-height:1.65; color:var(--ink2); max-width:72ch}
.oss-cta-row{display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-4); flex-wrap:wrap}
.oss-small{font-size:.85rem; color:var(--muted)}
.oss-small a{color:inherit}
.oss-pipeline{position:relative; margin-top:var(--space-7)}
.oss-rail{position:relative; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; height:30px; margin-bottom:var(--space-3)}
.oss-rail::before{content:""; position:absolute; left:16.66%; right:16.66%; top:50%; transform:translateY(-50%); border-top:2px dashed color-mix(in srgb,var(--accent) 40%,var(--line))}
.oss-node{justify-self:center; width:16px; height:16px; border-radius:50%; position:relative; z-index:1; background:#fff}
.oss-node.mature{background:var(--accent); border:2px solid var(--accent)}
.oss-node.active{background:#fff; border:3px solid var(--accent)}
.oss-node.planning{background:#fff; border:2px dashed color-mix(in srgb,var(--accent) 45%,#fff)}
@media(max-width:900px){.oss-grid{grid-template-columns:1fr} .oss-rail{display:none}}

/* contact form: honeypot + inline error */
.honeypot-field{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-error{display:none; margin-top:var(--space-4); padding:var(--space-3) var(--space-4); border:1px solid var(--danger-lite); background:color-mix(in srgb,var(--danger) 8%,#fff); border-radius:8px; color:var(--danger); font-size:var(--text-sm); line-height:1.5}
.form-error.show{display:block}

/* ============================================================
   SERVICE / NICHE PAGE STYLES (merged from imaging.css)
   ============================================================ */
.service-hero{padding:76px 0 64px}
.service-hero .breadcrumb{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:.1em; color:var(--muted)}
.service-hero .breadcrumb a{color:var(--accent); text-decoration:none}
.service-hero .breadcrumb a:hover{text-decoration:underline}
.service-hero h1{font-weight:800; font-size:clamp(36px,4.6vw,56px); line-height:1.03; letter-spacing:-0.038em; margin:var(--space-5) 0 0; max-width:21ch}
.service-hero h1 .accent{color:var(--accent)}
.service-hero .subhead{font-size:var(--text-xl); line-height:1.62; color:var(--ink2); margin-top:var(--space-5); max-width:56ch}
.service-hero .subhead strong{color:var(--ink); font-weight:700}
.service-facts{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6)}
.service-facts .fact{font-family:var(--mono); font-size:var(--text-xs); letter-spacing:.04em; color:var(--ink2);
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:var(--space-2) var(--space-4)}
.service-facts .fact b{color:var(--accent); font-weight:600}

/* ---------------- LABOR ARGUMENT ---------------- */
.service-stops{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-7)}
.service-stop{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:var(--space-5) var(--space-6)}
.service-stop .kicker{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.service-stop h3{font-weight:800; font-size:var(--text-xl); letter-spacing:-0.02em; margin:var(--space-3) 0 var(--space-2); line-height:1.2}
.service-stop p{font-size:var(--text-md); line-height:1.6; color:var(--ink2)}
.service-stop .before-note{display:block; margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px dashed var(--line);
  font-size:var(--text-xs); line-height:1.5; color:var(--muted); font-style:italic}
.service-payroll{margin-top:var(--space-5); font-size:var(--text-lg); line-height:1.6; color:var(--ink2); max-width:64ch}
.service-payroll b{color:var(--ink); font-weight:700}

/* ---------------- PLAIN-TERMS STRIP ---------------- */
.service-plain-panel{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:var(--space-6) var(--space-6) var(--space-5); margin-top:var(--space-7)}
.plain{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.plain-step{position:relative; padding:var(--space-2) var(--space-5) var(--space-2) 0}
.plain-step:not(:last-child)::after{content:''; position:absolute; right:14px; top:44px; width:12px; height:12px;
  border-top:2px solid var(--line); border-right:2px solid var(--line); transform:rotate(45deg)}
.number{font-family:var(--mono); font-size:var(--text-xs); color:var(--blue); font-weight:600; margin-bottom:var(--space-3)}
.plain-step h4{font-size:var(--text-lg); font-weight:700; letter-spacing:-.01em; margin-bottom:var(--space-2); min-height:44px}
.plain-step.excluded .number{color:var(--amber-deep)}
.plain-step.excluded h4{color:var(--amber-deep)}
.plain-step p{font-size:var(--text-sm); color:var(--muted); line-height:1.45}

/* ---------------- CASE STORY ---------------- */
.service-story{display:grid; grid-template-columns:1.15fr 0.85fr; gap:var(--space-4); margin-top:var(--space-7); align-items:start}
.service-story-main{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:var(--space-6) var(--space-6)}
.service-story-main .kicker{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:.12em; color:var(--accent); text-transform:uppercase}
.service-story-main h3{font-weight:800; font-size:var(--text-2xl); letter-spacing:-0.025em; margin:var(--space-4) 0 var(--space-4); line-height:1.15}
.service-story-main p{font-size:var(--text-lg); line-height:1.66; color:var(--ink2)}
.service-story-main p + p{margin-top:var(--space-4)}
.service-story-main p b{color:var(--ink); font-weight:700}
.case-takeaway{margin-top:var(--space-5); padding:var(--space-4) var(--space-5); border-radius:12px;
  background:color-mix(in srgb,var(--accent) 9%,#fff); border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line))}
.case-takeaway p{font-size:var(--text-lg); line-height:1.55; color:var(--ink); font-weight:600}
.case-takeaway p b{color:var(--accent)}
.service-story-rail{display:flex; flex-direction:column; gap:var(--space-3)}
.story-stat{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:var(--space-4) var(--space-5)}
.story-stat .value{font-weight:800; font-size:var(--text-xl); letter-spacing:-0.02em; color:var(--ink); line-height:1.15}
.story-stat .label{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-top:var(--space-1)}

/* ---------------- REASSURANCE ---------------- */
.service-safe{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-top:var(--space-7)}
.service-safe-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:var(--space-5) var(--space-5)}
.service-safe-card .icon{width:34px; height:34px; border-radius:9px; margin-bottom:var(--space-4);
  background:color-mix(in srgb,var(--accent) 14%,#fff); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  display:flex; align-items:center; justify-content:center}
.service-safe-card .icon svg{width:17px; height:17px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.service-safe-card h3{font-weight:800; font-size:var(--text-lg); letter-spacing:-0.015em; line-height:1.25; margin-bottom:var(--space-2)}
.service-safe-card p{font-size:var(--text-sm); line-height:1.55; color:var(--ink2)}

/* ---------------- TECHNICAL DESCENT ---------------- */
.service-descent{margin-top:var(--space-7); background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.service-descent-head{display:flex; align-items:center; gap:var(--space-4); width:100%; text-align:left;
  background:none; border:0; cursor:pointer; padding:var(--space-5) var(--space-6); font-family:var(--sans)}
.service-descent-head:hover{background:var(--paper)}
.service-descent-head .title{flex:1}
.service-descent-head .title h3{font-weight:800; font-size:var(--text-xl); letter-spacing:-0.02em; color:var(--ink)}
.service-descent-head .title p{font-size:var(--text-sm); color:var(--muted); margin-top:var(--space-1)}
.service-descent-head .chevron{width:30px; height:30px; border-radius:8px; border:1px solid var(--line); flex:none;
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease; background:#fff}
.service-descent-head .chevron svg{width:14px; height:14px; stroke:var(--ink2); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.service-descent.open .service-descent-head .chevron{transform:rotate(180deg)}
.service-descent-body{display:none; border-top:1px solid var(--line); padding:var(--space-6)}
.service-descent.open .service-descent-body{display:block}
.service-descent-body .note{font-size:var(--text-md); line-height:1.6; color:var(--ink2); max-width:72ch; margin-bottom:var(--space-5)}
.service-descent-body .note b{color:var(--ink); font-weight:700}

/* technical spec list */
.service-spec{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-6); margin-top:var(--space-6)}
.service-spec li{list-style:none; font-size:var(--text-md); line-height:1.55; color:var(--ink2); padding-left:var(--space-5); position:relative}
.service-spec li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:2px; background:var(--blue-lite)}
.service-spec li b{color:var(--ink); font-weight:700}

/* ---- Mermaid diagram (locked design from the flow test) ---- */
.mermaid{font-family:var(--sans) !important; display:flex; justify-content:center}
.mermaid .nodeLabel, .mermaid .edgeLabel{font-size:var(--text-sm) !important; line-height:1.4}
.mermaid .decision .nodeLabel{font-size:var(--text-xs) !important}  /* smaller measured label -> smaller diamond */
.mermaid .cluster-label{font-size:var(--text-3xs) !important}
.mermaid .cluster-label .nodeLabel{
  display:inline-block;
  font-family:var(--mono) !important; font-size:var(--text-3xs) !important; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue) !important;
  background:#F7FAFC !important; border:1px solid #D7DEE6; border-radius:999px;
  padding:var(--space-1) var(--space-3); margin:calc(var(--space-1) * -1) calc(var(--space-3) * -1)}
.mermaid .cluster rect{fill:#F7FAFC !important; stroke:#D7DEE6 !important; rx:14px}
.mermaid foreignObject{overflow:visible}
.mermaid span.edgeLabel{background:transparent !important}
.mermaid span.edgeLabel:not(:empty){
  display:inline-block; white-space:nowrap;
  font-family:var(--mono); font-size:var(--text-3xs) !important; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink2);
  background:#fff !important; border:1px solid var(--line); border-radius:999px;
  padding:var(--space-1) var(--space-3); margin:calc(var(--space-1) * -1) calc(var(--space-3) * -1);
  box-shadow:0 1px 2px rgba(22,32,46,.06)}
.legend{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line)}
.legend-item{display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); color:var(--ink2); font-family:var(--mono)}
.swatch{width:13px; height:13px; border-radius:3px; flex:none}

/* ---------------- IMAGING TECHNICAL DETAIL: note, legend, phase panels ---------------- */
.flow-note{font-size:var(--text-md); line-height:1.6; color:var(--ink2); max-width:72ch; margin-top:var(--space-5)}
.flow-note b{color:var(--ink); font-weight:700}
.flow-legend{margin-top:var(--space-5); padding-top:0; border-top:none}
.service-descent{scroll-margin-top:calc(68px + var(--space-4))}
.service-descent + .service-descent{margin-top:var(--space-3)}

/* ---------------- CAUTIOUS QUESTIONS: two-column Q&A (off the card grid) ---------------- */
.qa{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-8); margin-top:var(--space-6)}
.qa-item{padding:var(--space-5) 0; border-top:1px solid var(--line)}
.qa-item h3{display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-lg); font-weight:800; letter-spacing:-0.015em; color:var(--ink); line-height:1.28}
.qa-item h3 svg{width:19px; height:19px; flex:none; margin-top:2px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.qa-item p{margin-top:var(--space-3); font-size:var(--text-md); line-height:1.62; color:var(--ink2)}
.qa-item p b{color:var(--ink); font-weight:700}
@media (max-width: 760px){ .qa{grid-template-columns:1fr; gap:0} }

/* ---------------- OPEN SOURCE ---------------- */
.service-oss{display:grid; grid-template-columns:1fr auto; gap:var(--space-6); align-items:center; margin-top:var(--space-7);
  background:var(--slate); border-radius:16px; padding:var(--space-6) var(--space-7); color:#fff}
.service-oss .kicker{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-lite)}
.service-oss h3{font-weight:800; font-size:var(--text-2xl); letter-spacing:-0.02em; margin:var(--space-3) 0 var(--space-3); color:#fff}
.service-oss h3 code{font-family:var(--mono); font-size:0.88em; color:var(--accent-lite)}
.service-oss p{font-size:var(--text-md); line-height:1.62; color:rgba(255,255,255,.78); max-width:58ch}
.service-oss .command{display:inline-block; font-family:var(--mono); font-size:var(--text-sm); color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:8px;
  padding:var(--space-3) var(--space-4); margin-top:var(--space-4); letter-spacing:.01em}
.service-oss .command .dollar{color:var(--accent-lite); user-select:none}
.service-oss-link{display:inline-flex; align-items:center; gap:var(--space-3); font-weight:700; font-size:var(--text-lg); color:#fff;
  text-decoration:none; border:1px solid rgba(255,255,255,.22); border-radius:9px; padding:var(--space-3) var(--space-5);
  transition:.18s; white-space:nowrap}
.service-oss-link:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4)}
.service-oss-link svg{width:18px; height:18px; fill:currentColor}

/* ---------------- OFFERS ---------------- */
.service-offers{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); margin-top:var(--space-7)}
.service-offer{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:var(--space-6) var(--space-6); display:flex; flex-direction:column}
.service-offer .kicker{font-family:var(--mono); font-size:var(--text-2xs); color:var(--accent)}
.service-offer h3{font-weight:800; font-size:var(--text-xl); letter-spacing:-0.02em; margin:var(--space-3) 0 var(--space-2); line-height:1.2}
.service-offer p{font-size:var(--text-md); line-height:1.6; color:var(--ink2)}
.service-cta{margin-top:var(--space-7); background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:var(--space-7) var(--space-7); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap}
.service-cta h3{font-weight:800; font-size:clamp(21px,2.6vw,27px); letter-spacing:-0.025em; line-height:1.15}
.service-cta h3 .accent{color:var(--blue)}
.service-cta p{font-size:var(--text-md); color:var(--ink2); margin-top:var(--space-2); max-width:52ch}

/* per-leg accent: the hero + CTA highlight matches each service's nav dot
   (cloud keeps the base blue; home and open-source stay blue too) */
body[data-page="modernization"]{--accent:var(--blue)}
body[data-page="imaging"]{--accent:var(--green-deep)}
body[data-page="cloud"]{--accent:var(--amber)}
body[data-page="tools"]{--accent:var(--teal)}
body[data-page="oss"]{--accent:var(--purple)}
/* Re-derive the light/dark accent shades at the leg scope. Defined in :root they
   would resolve var(--accent) once against the blue default and inherit frozen;
   redeclaring here recomputes them against each leg's --accent. */
body[data-page]{
  --accent-deep:color-mix(in srgb, var(--accent) 82%, #000);
  --accent-lite:color-mix(in srgb, var(--accent) 55%, #fff);
}
body[data-page] .accent{color:var(--accent)}
body[data-page] .eyebrow{color:var(--accent)}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1000px){
  .service-stops{grid-template-columns:1fr}
  .service-story{grid-template-columns:1fr}
  .service-story-rail{flex-direction:row; flex-wrap:wrap}
  .story-stat{flex:1 1 150px}
  .service-safe{grid-template-columns:1fr 1fr}
  .service-spec{grid-template-columns:1fr}
}
@media(max-width:780px){
  .plain{grid-template-columns:1fr 1fr; row-gap:var(--space-5)}
  .plain-step:nth-child(2)::after{display:none}
}
@media(max-width:720px){
  .service-safe{grid-template-columns:1fr}
  .service-offers{grid-template-columns:1fr}
  .service-oss{grid-template-columns:1fr}
  .service-descent-body{padding:var(--space-5) var(--space-4)}
  .mermaid{overflow-x:auto; justify-content:flex-start}
}

/* ============================================================
   METHOD / BEFORE-AFTER / TERMINAL (software-modernization)
   ============================================================ */
body[data-page="modernization"] .service-hero h1{max-width:24ch}

/* shared: any service hero carrying a .hero-visual becomes two-column */
.service-hero:has(.hero-visual) .wrap{display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--space-8); align-items:center}
.service-hero .hero-copy{min-width:0}
.hero-visual .sig-caption{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:var(--space-3)}
@media (max-width: 900px){
  .service-hero:has(.hero-visual) .wrap{grid-template-columns:1fr; gap:var(--space-6)}
}

/* modernization signature: the witness ring */
.witness-ring{width:100%; max-width:460px; margin:0 auto}
.witness-ring svg{width:100%; height:auto; display:block; overflow:visible}
@media (max-width: 900px){ .witness-ring{max-width:400px; margin-top:var(--space-2)} }

/* cloud signature: the governed estate (accounts, each shadowed by a mirror env) */
.estate{width:100%; max-width:400px; margin:0 auto}
.estate-frame{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:var(--space-6) var(--space-6) var(--space-5) var(--space-5)}
.estate-tab{display:inline-block; font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); background:var(--amber-bg); border:1px solid var(--amber-line); border-radius:999px; padding:var(--space-1) var(--space-3); margin-bottom:var(--space-5)}
.estate-accounts{display:grid; gap:var(--space-4)}
.estate-account{display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--line); border-radius:10px; padding:var(--space-3) var(--space-4); box-shadow:5px 5px 0 0 var(--paper2), 5px 5px 0 1px var(--line2)}
.estate-account .name{font-weight:700; font-size:var(--text-md); color:var(--ink)}
.estate-account .mirror{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:.04em; color:var(--muted)}
.estate-gate{display:flex; align-items:center; justify-content:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-6); font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.estate-gate .g-arrow{color:var(--accent)}
@media (max-width: 900px){ .estate{max-width:360px} }

/* imaging signature: a high-level process-flow band under the hero copy */
.service-hero .hero-feature{margin-top:var(--space-8)}
.hero-feature .hero-diagram-wide{width:100%; max-width:1000px; margin:0 auto}
.hero-feature .hero-diagram-wide svg{width:100%; height:auto; display:block; overflow:visible}
@media (max-width: 720px){
  .hero-feature .hero-diagram-wide{overflow-x:auto}
  .hero-feature .hero-diagram-wide svg{min-width:560px}
}

/* tools signature: the live tool, framed as a screenshot */
body[data-page="tools"] .service-hero .wrap{grid-template-columns:0.92fr 1.08fr}
.tool-window{width:100%; max-width:680px; margin:0 auto; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#E9ECEF; box-shadow:0 18px 44px -20px rgba(22,32,46,.32)}
.tool-window img{display:block; width:100%; height:auto}
@media (max-width: 900px){ body[data-page="tools"] .service-hero .wrap{grid-template-columns:1fr} .tool-window{max-width:560px} }
/* method steps */
.method-steps{display:grid; gap:0; margin-top:var(--space-7); background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.method-step{display:grid; grid-template-columns:74px 1fr; gap:var(--space-4); padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--line)}
.method-step:last-child{border-bottom:0}
.method-step .number{font-family:var(--mono); font-size:var(--text-sm); font-weight:600; color:var(--accent); padding-top:var(--space-1)}
.method-step h3{font-size:var(--text-lg); font-weight:800; letter-spacing:-0.015em; margin-bottom:var(--space-1)}
.method-step p{font-size:var(--text-md); line-height:1.6; color:var(--ink2)}
.method-step p b{color:var(--ink)}
/* anti-promises */
.method-exclusions{margin-top:var(--space-4); background:var(--card); border:1px solid var(--line); border-radius:16px; padding:var(--space-5) var(--space-6)}
.method-exclusions .heading{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:var(--space-4)}
.method-exclusions ul{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-6); padding:0}
.method-exclusions li{list-style:none; font-size:var(--text-md); line-height:1.55; color:var(--ink2); padding-left:var(--space-5); position:relative}
.method-exclusions li::before{content:"✕"; position:absolute; left:0; top:0; color:var(--danger); font-weight:700; font-size:var(--text-xs)}
.method-exclusions li b{color:var(--ink)}
/* before/after mini-list in story */
.compare{margin-top:var(--space-4); display:grid; gap:var(--space-2)}
.compare .row{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:11px; overflow:hidden}
.compare .before,.compare .after{padding:var(--space-3) var(--space-4); font-size:var(--text-sm); line-height:1.5}
.compare .before{background:var(--paper); color:var(--muted)}
.compare .after{background:color-mix(in srgb,var(--accent) 7%,#fff); color:var(--ink)}
.compare .after b{color:var(--accent)}
/* terminal capture */
.terminal{margin-top:var(--space-5); background:var(--slate); border-radius:13px; padding:var(--space-5) var(--space-5); font-family:var(--mono); font-size:var(--text-sm); line-height:1.8; color:rgba(255,255,255,.82)}
.terminal .prompt{color:var(--green-lite)}
.terminal .pass{color:var(--green-lite); font-weight:600}
.terminal .dimmed{color:rgba(255,255,255,.45)}
.terminal-caption{font-size:var(--text-xs); color:var(--muted); margin-top:var(--space-2); font-style:italic}
/* before/after architecture panels (descent) */
.arch-panel{border:1px solid var(--line); border-radius:14px; padding:var(--space-5) var(--space-5); margin-top:var(--space-4); background:var(--paper)}
.arch-panel .label{font-family:var(--mono); font-size:var(--text-2xs); letter-spacing:.13em; text-transform:uppercase; font-weight:600; margin-bottom:var(--space-4)}
.arch-panel.before .label{color:var(--danger)}
.arch-panel.after .label{color:var(--accent)}
.arch-tools{display:flex; flex-wrap:wrap; gap:var(--space-3)}
.arch-tool{background:#fff; border:1px solid var(--line); border-radius:10px; padding:var(--space-3) var(--space-4); flex:1 1 150px}
.arch-tool .title{font-size:var(--text-sm); font-weight:700; letter-spacing:-0.01em}
.arch-tool .detail{font-family:var(--mono); font-size:var(--text-3xs); color:var(--danger); margin-top:var(--space-1)}
.arch-converge{margin-top:var(--space-4); text-align:center; font-size:var(--text-sm); color:var(--muted)}
.arch-converge b{color:var(--ink)}
.arch-flow{display:flex; align-items:stretch; gap:0; flex-wrap:wrap}
.arch-node{background:#fff; border:1px solid var(--blue); border-radius:10px; padding:var(--space-3) var(--space-4); flex:1 1 140px; min-width:140px}
.arch-node .title{font-size:var(--text-sm); font-weight:700; letter-spacing:-0.01em}
.arch-node .subtitle{font-family:var(--mono); font-size:var(--text-3xs); color:var(--muted); margin-top:var(--space-1)}
.arch-arrow{display:flex; align-items:center; padding:0 var(--space-2); color:var(--blue-lite); font-weight:800; font-size:var(--text-lg)}
.arch-ring{margin-top:var(--space-4); border:1.5px dashed color-mix(in srgb,var(--accent) 55%,var(--line)); border-radius:11px; background:color-mix(in srgb,var(--accent) 7%,#fff); padding:var(--space-4) var(--space-4); font-size:var(--text-sm); line-height:1.55; color:var(--ink2)}
.arch-ring b{color:var(--accent)}
@media(max-width:720px){
  .method-step{grid-template-columns:48px 1fr; padding:var(--space-4) var(--space-4)}
  .method-exclusions ul{grid-template-columns:1fr}
  .compare .row{grid-template-columns:1fr}
  .arch-arrow{width:100%; justify-content:center; padding:var(--space-1) 0; transform:rotate(90deg)}
}

/* ============================================================
   AWS PAGE SPECIFICS (aws-cloud-infrastructure)
   ============================================================ */
/* AWS-page specifics */
.service-oss .cert-tier{font-family:var(--mono); font-size:var(--text-xs); color:rgba(255,255,255,.55); display:block; margin-top:var(--space-4); letter-spacing:.04em}

/* ============================================================
   TOOL ROSTER / SCREENSHOT (custom-internal-tools)
   ============================================================ */
/* roster grid */
.tool-roster{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-7)}
.tool-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:var(--space-5) var(--space-5); display:flex; flex-direction:column}
.tool-card .domain{font-family:var(--mono); font-size:var(--text-3xs); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600}
.tool-card h3{font-size:var(--text-xl); font-weight:800; letter-spacing:-0.015em; margin:var(--space-3) 0 var(--space-2); line-height:1.2}
.tool-card p{font-size:var(--text-sm); line-height:1.6; color:var(--ink2)}
.tool-card .lifecycle{margin-top:auto; padding-top:var(--space-4); font-family:var(--mono); font-size:var(--text-2xs); color:var(--accent); letter-spacing:.02em}
/* screenshot */
.tool-shot{margin-top:var(--space-5)}
.tool-shot figure{margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#E9ECEF}
.tool-shot img{display:block; width:100%; height:auto}
.tool-shot-caption{font-size:var(--text-xs); color:var(--muted); margin-top:var(--space-2); font-style:italic}
@media(max-width:1000px){ .tool-roster{grid-template-columns:1fr 1fr} }
@media(max-width:680px){ .tool-roster{grid-template-columns:1fr} }

/* ============================================================
   404 PAGE
   ============================================================ */
.err404 { text-align: center; max-width: 42rem; margin:0 auto; padding:2rem 0 1rem; }
.err404 .code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(4rem, 16vw, 8rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.03em; opacity: 0.18; }
.err404 h1 { margin:0.25rem 0 0.75rem; }
.err404 .lede { margin-left:auto; margin-right:auto; }
.err404 .actions { display: flex; gap:0.75rem; justify-content: center; flex-wrap: wrap; margin-top:1.75rem; }