/* AlgoSolution — design tokens & components. No build step. */
/* Tokens (WCAG AA verified pairs — see _checks/quality.js) */
:root{
  --ink:#122032;          /* deep ledger ink — hero, header, footer */
  --paper:#FBFBF9;        /* page background */
  --alt:#F0F3F1;          /* alternate section background */
  --text:#1E2A36;         /* body text on paper (14.1:1) */
  --muted:#46586A;        /* secondary text on paper (7.1:1) */
  --accent:#0E6B5C;       /* deep teal — links, actions on paper (6.2:1) */
  --accent-bright:#62D6BE;/* teal on ink (9.3:1) */
  --amber:#9A5B00;        /* eyebrow accent on paper (5.2:1) */
  --on-ink:#EDF1F4;       /* text on ink (14.5:1) */
  --on-ink-muted:#AFC0CE; /* secondary on ink (8.8:1) */
  --foot:#C4D2DC;         /* footer text on ink (10.6:1) */
  --btn-ink:#07211C;      /* text on bright accent (9.6:1) */
  --accent-soft:#3FB39B;  /* dimmed accent fill — primary CTA on ink (btn-ink 6.5:1, on ink 6.4:1) */
  --line:#D8DEE2;
  --serif:"Charter","Bitstream Charter","Sitka Text",Cambria,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --max:1120px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.65;}
img,svg{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);line-height:1.15;letter-spacing:-0.01em;margin:0 0 var(--s3);
  font-weight:600;text-wrap:balance}
h1{font-size:clamp(1.75rem,1.1rem + 2.6vw,2.75rem)}
h2{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.125rem)}
h3{font-size:1.25rem}
/* Card headings promoted h3->h2 on pages with no section-level h2 (audit F12, 2026-07-14):
   .card>h2 keeps the exact h3 metrics so the rendered output is visually unchanged. */
.card>h2{font-size:1.25rem}
p{margin:0 0 var(--s2)}
a{color:var(--accent)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
.on-ink :focus-visible{outline-color:var(--accent-bright)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s3)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:var(--s1) var(--s2);z-index:99}
.skip:focus{left:var(--s2)}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin:0 0 var(--s2);display:block}
.on-ink .eyebrow{color:var(--accent-bright)}
.lede{font-size:1.1875rem;color:var(--muted);max-width:46em}
.on-ink .lede{color:var(--on-ink-muted)}

/* Header */
.site-head{background:var(--ink);color:var(--on-ink);border-bottom:1px solid rgba(237,241,244,.12);position:sticky;top:0;z-index:1000}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:72px;flex-wrap:wrap;padding-top:var(--s1);padding-bottom:var(--s1)}
.brand{display:flex;align-items:center;gap:10px;color:var(--on-ink);text-decoration:none;
  font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:.01em}
.brand svg{flex:0 0 auto}
/* Optically center the serif wordmark against the icon (serif caps sit slightly high). */
.brand span{position:relative;top:1px}
.brand-logo{flex:0 0 auto;display:block;width:30px;height:30px;border-radius:7px}
.nav-toggle{display:none;background:none;border:1px solid rgba(237,241,244,.4);color:var(--on-ink);
  border-radius:6px;padding:8px 12px;font:inherit;font-size:.9rem;cursor:pointer}
.site-nav ul{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s2);
  margin:0;padding:0}
.site-nav a{color:var(--on-ink);text-decoration:none;font-size:.95rem;padding:var(--s1) 0;
  border-bottom:2px solid transparent;line-height:1.2;display:inline-block;vertical-align:middle}
.site-nav .sub-toggle{vertical-align:middle}
.site-nav a:hover,.site-nav a:focus-visible{border-bottom-color:var(--accent-bright)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--accent-bright)}
.site-nav a.nav-cta{border:1px solid var(--accent-bright);border-radius:6px;padding:var(--s1) var(--s2) !important;
  color:var(--accent-bright) !important;transition:background-color .18s ease,color .18s ease}
.site-nav a.nav-cta:hover,.site-nav a.nav-cta:focus-visible{background:var(--accent-bright);color:var(--ink) !important}
.site-nav a.nav-lang{color:var(--accent-bright);font-style:italic;font-size:.95rem;letter-spacing:0}
/* Language toggle sits outside the collapsible menu: end of the row on desktop, next to Menu on mobile. */
.site-nav{display:flex;align-items:center;gap:var(--s2)}
.site-nav > .nav-toggle{order:1}
.site-nav > ul{order:2}
.site-nav > .nav-lang{order:3}  /* FR sits after the Menu button at all widths */
@media (max-width:1000px){
  html.js .nav-toggle{display:inline-block}
  /* Logo + Menu stay on the top row; the nav items drop below as a full-width, left-aligned panel. */
  html.js .head-in{position:relative}
  html.js .site-nav{position:static}
  html.js .site-nav > ul{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:2px;
    background:var(--ink);border-bottom:1px solid rgba(237,241,244,.12);
    box-shadow:0 14px 30px rgba(0,0,0,.38);
    padding:var(--s2) var(--s3) var(--s3);
    max-height:calc(100vh - 72px);overflow-y:auto;z-index:900}
  html.js .site-nav.open > ul{display:flex}
}

/* Nav "Services" group — hybrid disclosure (dropdown ≥1001px, accordion ≤1000px). Selectors are
   scoped to .site-nav for specificity over the generic .site-nav ul flex rule above. */
.site-nav{position:relative}
.site-nav .has-sub{position:static}
.site-nav .sub-toggle{background:none;border:0;border-bottom:2px solid transparent;color:var(--on-ink);font:inherit;font-size:.95rem;letter-spacing:0;line-height:1.2;cursor:pointer;padding:var(--s1) 0;display:inline-block}
.site-nav .sub-toggle::after{content:"";display:inline-block;margin-left:5px;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.75}
.site-nav .sub-toggle:hover,.site-nav .sub-toggle:focus-visible{color:var(--accent-bright)}
.site-nav .sub-toggle.is-current{border-bottom-color:var(--accent-bright)}
/* Progressive enhancement: without JS the panel stays visible (all links reachable); html.js
   hides it and turns it into a dropdown/accordion. */
.site-nav .subnav{list-style:none;margin:0;padding:0}
html.js .site-nav .subnav{display:none}
.site-nav .subnav.mega{text-align:left}
.site-nav .mega-group{display:flex;flex-direction:column;gap:4px}
.site-nav .mega-group + .mega-group{margin-top:var(--s4)}
.site-nav .mega-group-h{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-muted);margin:0 0 4px;padding-bottom:5px;border-bottom:1px solid rgba(237,241,244,.16)}
.site-nav .mega-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:1px}
.site-nav .mega-list li{margin:0}
.site-nav .mega-cat{display:block;font-weight:400;font-size:.95rem;color:var(--on-ink) !important;padding:3px 0}
.site-nav .mega-cat:hover,.site-nav .mega-cat:focus-visible{color:var(--accent-bright) !important}
.site-nav .mega-cat[aria-current="page"]{color:var(--accent-bright) !important}
.site-nav .subnav.mega a{display:block;white-space:normal;border-bottom:0}
.site-nav .subnav.mega a:not(.mega-cat){font-size:.9rem;color:var(--on-ink-muted);padding:3px 0}
.site-nav .subnav.mega a:not(.mega-cat):hover,.site-nav .subnav.mega a:not(.mega-cat):focus-visible{color:var(--accent-bright);background:none}
@media (min-width:1001px){
  .site-nav .subnav.mega{display:block;width:min(88vw,300px)}
  html.js .site-nav .has-sub{position:relative}
  html.js .site-nav .subnav.mega{position:absolute;top:calc(100% + 8px);left:0;right:auto;background:var(--ink);border:1px solid rgba(237,241,244,.18);border-radius:8px;padding:var(--s3);z-index:30;box-shadow:0 10px 28px rgba(0,0,0,.35)}
  /* Reveal on the JS disclosure state (click/Enter/Space) or mouse hover — NOT :focus-within.
     :focus-within re-opened the panel the instant Escape returned focus to the Services button,
     so Escape never visually closed it. The disclosure-button pattern owns open/close via .open;
     a desktop-scoped focusout handler (js/main.js) restores the tab-away auto-close. */
  html.js .site-nav .has-sub.open>.subnav.mega,html.js .site-nav .has-sub:hover>.subnav.mega{display:grid}
}
@media (max-width:1000px){
  .site-nav .mega-group{margin-bottom:var(--s3)}
  html.js .site-nav.open .has-sub.open .subnav.mega{display:block;padding-left:var(--s3)}
}
/* A.1.2: per-category chevron drives a mobile accordion; on desktop and no-JS all links stay visible */
.site-nav .mega-cat-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.site-nav .mega-sublist{display:block;list-style:none;margin:0;padding:0}
.site-nav .mega-sublist li{margin:0}
.site-nav .mega-chev{display:none;background:none;border:0;color:var(--on-ink);cursor:pointer;padding:6px;line-height:0;flex:0 0 auto}
.site-nav .mega-chev::after{content:"";display:inline-block;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;opacity:.8;transition:transform .15s ease}
.site-nav .mega-chev[aria-expanded="true"]::after{transform:rotate(180deg)}
.site-nav .mega-chev:hover,.site-nav .mega-chev:focus-visible{color:var(--accent-bright)}
@media (max-width:1000px){
  html.js .site-nav .mega-chev{display:inline-flex;align-items:center}
  html.js .site-nav.open .mega-sublist{display:none}
  html.js .site-nav.open .mega-col.open .mega-sublist{display:block;padding:2px 0 var(--s1) var(--s3)}
}

/* Hero */
.hero{background:var(--ink);color:var(--on-ink);padding:var(--s5) 0 var(--s6)}
.hero h1{max-width:24em}
.hero .lede{margin-bottom:var(--s4)}
.cta-row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.btn{display:inline-block;border-radius:6px;padding:14px 24px;font-weight:600;font-size:1rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--sans)}
.btn-primary{background:var(--accent-bright);color:var(--btn-ink)}
.btn-primary:hover{filter:brightness(1.06)}
/* Softer primary fill for CTAs on dark surfaces, where the bright accent reads as too loud. */
.btn-primary-soft{background:var(--accent-soft)}
.btn-ghost{border-color:rgba(237,241,244,.45);color:var(--on-ink)}
.btn-ghost:hover{border-color:var(--accent-bright)}
.btn-explore{background:linear-gradient(160deg,rgba(237,241,244,.06),rgba(237,241,244,.02));
  border:1px solid rgba(98,214,190,.45);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.22);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.btn-explore:hover,.btn-explore:focus-visible{transform:translateY(-4px);border-color:var(--accent-bright);
  background:linear-gradient(160deg,rgba(98,214,190,.11),rgba(237,241,244,.03));
  box-shadow:0 12px 28px rgba(0,0,0,.45)}
.btn-explore-lb{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:#fff}
main .btn-primary-paper{background:var(--accent);color:#fff}
.hero-diff{font-family:var(--mono);font-size:.9rem;letter-spacing:.04em;color:var(--accent-bright);
  max-width:52em;margin:0 0 var(--s4)}
.dist-fig{margin:var(--s5) 0 0}
.dist-fig svg{display:block;width:100%;max-width:760px}
.dist-cap{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--on-ink-muted);
  margin-top:var(--s1)}

/* Sections */
.section{padding:var(--s6) 0}
.section.alt{background:var(--alt)}
.section.ink{background:var(--ink);color:var(--on-ink)}
.section-head{max-width:52em;margin-bottom:var(--s5)}
.grid{display:grid;gap:var(--s3)}
@media (min-width:768px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:var(--s4)}
.section.ink .card{background:rgba(237,241,244,.06);border-color:rgba(237,241,244,.16)}
.card h3,.card>h2{margin-bottom:var(--s2)}
.card ul{margin:0;padding-left:1.2em}
.card li{margin-bottom:6px}
.card .more{display:inline-block;margin-top:var(--s2);font-weight:600}
.more + .more{margin-left:var(--s3)}
.flag{border-top:4px solid var(--accent)}
.tag{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:99px;
  padding:2px 10px;margin-bottom:var(--s2)}
.card.feature{padding:var(--s5)}
.card .xlink{border-top:1px solid var(--line);margin:var(--s3) 0 0;padding-top:var(--s2);
  color:var(--muted);font-size:.95rem}
.card-icon{display:block;width:44px;height:44px;margin-bottom:var(--s2);color:var(--accent)}
.feature-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.feature-head .tag{margin:0}
.feature-head .card-icon{margin:0;width:34px;height:34px}

/* Proof */
.proof{border-left:4px solid var(--accent);background:#fff;border-radius:0 10px 10px 0;
  border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--s4)}
.proof .who{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s2)}
.stat-row{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s4)}
.stat b{display:block;font-family:var(--serif);font-size:1.75rem;color:var(--text)}
.stat span{color:var(--muted);font-size:.92rem}
.fineprint{font-size:.85rem;color:var(--muted);margin:var(--s2) 0 0}
.on-ink .fineprint{color:var(--on-ink-muted)}
/* Anchored service subsections (buyer-oriented taxonomy) */
.svc-sub{padding-top:var(--s4);margin-top:var(--s4);border-top:1px solid var(--line);scroll-margin-top:var(--s4)}
.svc-sub:first-of-type{border-top:0;margin-top:var(--s3);padding-top:0}
.svc-sub h3{margin-bottom:var(--s2)}
.svc-sub p{max-width:52em}
.svc-sub .deliverables{color:var(--muted);font-size:.95rem;margin-top:var(--s2)}
/* Homepage capability index (below hero lede) + five practice overviews */
/* Hero conversion + practice panel (A.1.3). Two columns ≥1120px (narrative | practice panel),
   single column below. Replaces the pill-style .cap-index. Tokens only — no new colors,
   shadows, gradients or fonts; motion is minimal and disabled under prefers-reduced-motion. */
.hero-copy .lede{margin-bottom:var(--s3)}
.hero-proof{margin:0 0 var(--s4);padding-left:var(--s2);border-left:3px solid var(--accent-bright);
  color:var(--on-ink);font-weight:500;font-size:1rem;line-height:1.5;max-width:36em}
.hero-practices{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4);
  background:rgba(237,241,244,.04);border:1px solid rgba(237,241,244,.14);border-radius:12px;padding:var(--s3)}
.hero-practice-group{display:flex;flex-direction:column;gap:var(--s1)}
.hero-practice-group-label{margin:0 0 2px;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.05em;color:var(--on-ink-muted)}
.hero-practice-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
.hero-practice{display:block;border:1px solid rgba(237,241,244,.16);border-radius:10px;padding:var(--s2);
  text-decoration:none;color:var(--on-ink);transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.hero-practice-title{display:block;font-weight:600;font-size:1rem;line-height:1.3;margin-bottom:4px;color:var(--on-ink)}
.hero-practice-arrow{display:inline-block;margin-left:6px;color:var(--accent-bright);transition:transform .18s ease}
.hero-practice-desc{display:block;color:var(--on-ink-muted);font-size:.9rem;line-height:1.45}
.hero-practice:hover{border-color:var(--accent-bright);background:rgba(237,241,244,.05);transform:translateY(-1px)}
.hero-practice:hover .hero-practice-arrow{transform:translateX(3px)}
.hero-practice:focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px}
.hero-badge{display:inline-block;font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.02em;
  color:var(--accent-bright);background:rgba(98,214,190,.14);border:1px solid rgba(98,214,190,.4);
  border-radius:999px;padding:1px 8px;margin-left:6px;white-space:nowrap;vertical-align:middle}
@media (min-width:1120px){
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s4);align-items:start}
  .hero-grid .hero-practices{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-practice,.hero-practice-arrow{transition:none}
  .hero-practice:hover{transform:none}
  .hero-practice:hover .hero-practice-arrow{transform:none}
}
.overview{padding-top:var(--s4);margin-top:var(--s4);border-top:1px solid var(--line);scroll-margin-top:var(--s4)}
.overview:first-of-type{border-top:0;margin-top:0;padding-top:0}
.overview h3{margin-bottom:6px}
.overview .def{color:var(--muted);max-width:48em;margin:0 0 var(--s2)}
.overview .sub-links{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);list-style:none;padding:0;margin:var(--s2) 0}
.overview .sub-links a{font-weight:600}
.overview .useful{max-width:48em;margin:var(--s2) 0}
.overview .docs{font-size:.9rem;color:var(--muted);margin-top:var(--s2)}

/* Comparison table */
.compare{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.compare caption{text-align:left;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:0 0 var(--s2)}
.compare th,.compare td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);
  vertical-align:top;font-size:.97rem}
.compare thead th{background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.compare tbody th{font-weight:600;width:22%}
.compare td.win{color:var(--accent);font-weight:600}
@media (max-width:640px){.compare th,.compare td{display:block;width:auto}
  .compare thead{position:absolute;left:-9999px}
  .compare tbody th{background:var(--alt)}}

/* Process */
.process{list-style:none;margin:0;padding:0;counter-reset:step}
.process li{position:relative;padding:0 0 var(--s4) 56px;counter-increment:step}
.process li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:.9rem;color:var(--accent);border:1px solid var(--accent);
  border-radius:6px;padding:4px 8px}
.process b{display:block;font-family:var(--serif);font-size:1.15rem;margin-bottom:4px}
.process p{color:var(--muted);max-width:44em}

/* Fit / not-fit */
.fit-grid{display:grid;gap:var(--s3)}
@media (min-width:768px){.fit-grid{grid-template-columns:1fr 1fr}}
.fit{border-radius:10px;padding:var(--s4);border:1px solid var(--line);background:#fff}
.fit.no{background:var(--alt)}
.fit h3{display:flex;gap:10px;align-items:baseline}
.fit ul{padding-left:1.2em;margin:0}
.fit li{margin-bottom:8px}

/* Credentials band */
.cred{display:flex;gap:var(--s3);flex-wrap:wrap}
.cred div{flex:1 1 220px;border-top:2px solid var(--accent-bright);padding-top:var(--s2)}
.cred b{font-family:var(--serif);font-size:1.05rem;display:block;margin-bottom:4px}
.cred span{color:var(--on-ink-muted);font-size:.95rem}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:var(--s2);
  padding:0 var(--s3)}
.faq summary{cursor:pointer;font-family:var(--serif);font-weight:600;font-size:1.1rem;
  padding:var(--s3) 0;list-style-position:outside}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:var(--s3) 0;color:var(--text)}
.faq .a p{max-width:52em}

/* CTA band */
.cta-band{background:var(--ink);color:var(--on-ink);text-align:left}
.cta-band .wrap{display:flex;gap:var(--s4);align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{margin:0;max-width:22em}

/* Forms */
form.contact{max-width:620px}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-weight:600;margin-bottom:6px}
.field .hint{color:var(--muted);font-size:.9rem;margin:4px 0 0}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;font:inherit;background:#fff;color:var(--text)}
input:focus,textarea:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:0}
.err{color:#9E2B25;font-size:.92rem;margin-top:6px;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea{border-color:#9E2B25}
.form-note{background:var(--alt);border:1px solid var(--line);border-radius:8px;padding:var(--s2) var(--s3);
  color:var(--muted);font-size:.95rem}
.form-status{display:none;border-radius:8px;padding:var(--s2) var(--s3);margin-top:var(--s3);
  border:1px solid var(--accent);color:var(--text);background:#fff}
.hp{position:absolute;left:-9999px;height:1px;width:1px;overflow:hidden}

/* Article */
.article{max-width:46em}
.article h2{margin-top:var(--s5)}
.article .meta{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s4)}
.backlink{display:inline-block;margin-top:var(--s4);font-weight:600}
.up-hub{border:1px solid var(--line);border-left:4px solid var(--accent);background:#fff;
  border-radius:0 10px 10px 0;padding:var(--s3) var(--s4);margin-top:var(--s5)}
.up-hub:first-child{margin-top:0}

/* Footer */
.site-foot{background:var(--ink);color:var(--foot);padding:var(--s4) 0 var(--s4);
  border-top:1px solid rgba(237,241,244,.12)}
.foot-grid{display:grid;gap:var(--s2)}
@media (min-width:768px){.foot-grid{grid-template-columns:1fr}}
.foot-grid > div > p:last-child{margin-bottom:0}
.foot-legal .disclaimer{margin-top:0;padding-top:0;border-top:0;max-width:none}
.site-foot h2{font-size:.8rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-ink-muted);margin-bottom:var(--s2)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:8px}
.site-foot a{color:var(--foot)}
.foot-brand{font-family:var(--serif);font-size:1.15rem;color:var(--on-ink);margin-bottom:var(--s1)}
/* Firm positioning line + compact capability row (2026-07-27). One approved description per
   language on every page — see taxonomy.md §1. The row wraps naturally and is deliberately
   understated so it does not read as a second primary navigation. */
.foot-tagline{font-size:.9rem;line-height:1.55;color:var(--on-ink-muted);max-width:60em;margin-bottom:var(--s2)}
.foot-caps{font-size:.85rem;line-height:1.9;color:var(--on-ink-muted);margin-bottom:0}
.foot-caps a{color:var(--foot);text-decoration:none;border-bottom:1px solid rgba(237,241,244,.22)}
.foot-caps a:hover,.foot-caps a:focus-visible{color:var(--on-ink);border-bottom-color:var(--accent-bright)}
.foot-caps .sep{color:rgba(98,214,190,.7);padding:0 2px}
.disclaimer{font-size:.85rem;color:var(--on-ink-muted);max-width:60em;margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid rgba(237,241,244,.12)}
.copyright{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--on-ink-muted);
  margin-top:var(--s3)}

/* Utility */
.mt-0{margin-top:0}.max-46{max-width:46em}
.mb1{margin-bottom:8px}.mt2{margin-top:16px}.mt4{margin-top:32px}.mt6{margin-top:48px}
.link-lite{color:var(--accent-bright)}
.lbl-opt{font-weight:400;color:var(--muted)}
.up-hub h2{font-size:1.35rem}
.form-note{max-width:620px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}
@media print{.site-head,.site-foot,.cta-band,.skip{display:none}body{background:#fff;color:#000}}

/* ============================================================
   Landing page (index) — dark, single-column marketing layout.
   Scoped to body.lp so no other page is affected. 2026-07-16.
   Tokens only; every text/background pair uses a WCAG-verified token. */
body.lp{background:var(--ink);color:var(--on-ink)}
.lp .section{padding:var(--s4) 0;background:transparent}
/* Delivery Process — sits right after the hero's "Teams we support". */
.lp .lp-delivery{padding-top:clamp(8px,1.2vw,14px);padding-bottom:clamp(12px,1.6vw,18px)}
.lp .lp-delivery .lifecycle-panel{margin-top:14px}
/* "Describe the problem" band — bracketed by light dividers, top and bottom. */
.lp .lp-band{margin-top:clamp(6px,1vw,12px);padding:0}
/* Dividers align with the content column (cards/text), not the full screen width. */
.lp .lp-band > .wrap::before,
.lp .lp-band > .wrap::after{content:"";display:block;height:1px;background:rgba(237,241,244,.10)}
.lp .lp-band > .wrap::before{margin-bottom:clamp(16px,2vw,24px)}
.lp .lp-band > .wrap::after{margin-top:clamp(16px,1.9vw,22px)}
.lp #capabilities{padding-bottom:20px}
@media (max-width:720px){.lp .lp-delivery{padding-top:12px}}
.lp .section .eyebrow{color:var(--on-ink-muted)}
.lp .hl{color:var(--accent-bright)}

/* Hero — the image's side padding is cropped out, so its edge IS the panel edge; the text
   left edge just matches the centered image's left edge (the centering gap). */
.lp-hero{padding:clamp(18px,1.9vw,26px) 0 0}
.lp #capabilities{padding-top:clamp(14px,2vw,22px)}
/* Heading, subtitle and diagram all align flush-left to the wrap's content edge. */
.lp-hero .lp-h1,.lp-hero .lp-sub{margin-left:0}
/* Firm descriptor — restrained mono label above the H1 (same system as the section eyebrows). */
.hero-firm-descriptor{margin:0 0 18px;max-width:100%;font-family:var(--mono);
  font-size:.75rem;font-weight:600;line-height:1.4;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-bright)}
@media (max-width:640px){.hero-firm-descriptor{margin-bottom:13px;font-size:.68rem;
  line-height:1.45;letter-spacing:.11em}}
/* Hero headline: "From data" (neutral) -> "to decisions" (accent). Each part is an atomic
   inline-block so the line breaks only at the semantic boundary, never mid-phrase. */
.lp-h1{max-width:none;font-size:clamp(2.4rem,1.1rem + 4.4vw,4rem);line-height:1.02;
  letter-spacing:-.015em;margin-bottom:clamp(12px,1.4vw,16px)}
.lp-h1 span{display:inline-block;white-space:nowrap;
  background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* one continuous white -> accent sweep, split across the two parts at a shared boundary colour
   so it also reads correctly when "to decisions" wraps to a second line */
.lp-h1 span:nth-child(1){background-image:linear-gradient(90deg,var(--on-ink),#a9e4db)}
.lp-h1 span:nth-child(2){background-image:linear-gradient(90deg,#a9e4db,var(--accent-bright))}
.lp-sub{max-width:1000px;margin:0;line-height:1.58;color:var(--on-ink-muted);
  font-size:clamp(1rem,.94rem + .3vw,1.15rem)}
.nw{white-space:nowrap}
/* emphasised service phrases in the hero statement: brighter off-white, semibold — no box/underline/glow */
.hero-service{font-weight:550;color:var(--on-ink)}
/* Audience nav (replaces the serving sentence): mono uppercase label + inline audience list. */
.hero-audience{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  max-width:1000px;margin:clamp(20px,2.4vw,28px) 0 clamp(4px,.8vw,8px)}
.hero-aud-label{margin:0;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent-bright)}
.hero-aud-list{margin:0;width:100%;font-family:var(--sans);font-weight:600;
  color:var(--on-ink);line-height:1.5;font-size:clamp(15px,14px + .35vw,18px)}
.hero-aud-list .sep{color:rgba(98,214,190,.7);font-weight:400}
/* Section intros: mono eyebrow + muted one-line description. Same label system as
   "Teams we support"; leads the capability cards and the architecture diagram in the hero. */
.section-intro{margin:0;max-width:1000px}
.section-intro__eyebrow{margin:0;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent-bright)}
.section-intro__description{margin:7px 0 0;font-family:var(--sans);font-weight:400;
  line-height:1.5;color:var(--on-ink-muted);font-size:clamp(14px,13.5px + .3vw,16px)}
/* Placement spacing — each gap set explicitly, overriding the neighbours' default margins. */
.lp-h1 + .section-intro{margin-top:clamp(16px,1.8vw,22px)}
.section-intro + .hero-cats{margin-top:clamp(12px,1.3vw,16px)}
.hero-cats + .section-intro{margin-top:clamp(32px,3.6vw,44px)}
.section-intro + picture .lp-diagram{margin-top:clamp(12px,1.3vw,16px)}
/* Delivery lifecycle: Scoped -> Built -> Deployed -> Monitored, closed by a feedback loop. */
/* Delivery lifecycle: small label above the stages, marked by a left teal rule (no box). */
.hero-lead{max-width:1000px;margin:clamp(30px,3.4vw,42px) 0 0;padding:2px 0}
.hero-lead .lc-title{margin:0 0 5px}
.hero-lead-text{margin:0;font-family:var(--sans);font-weight:600;
  font-size:clamp(16px,14.5px + .35vw,19px);line-height:1.42;color:var(--on-ink)}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.hero-chips + .hero-chips{margin-top:8px}
/* Small devices: stack the hero chips one per row. */
@media (max-width:600px){.hero-chips{flex-direction:column;align-items:flex-start}}
.hero-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:8px;
  background:rgba(237,241,244,.05);border:1px solid rgba(98,214,190,.28);
  font-family:var(--sans);font-weight:600;font-size:.92rem;line-height:1.15;
  color:#92B8D1;white-space:nowrap}
.lifecycle-panel{max-width:100%;margin:clamp(16px,1.8vw,22px) 0 9px;padding:2px 0}
/* Space between the delivery-process block and its CTA button. */
.lifecycle-panel + .cta-row{margin-top:26px}
.lc-title{margin:0 0 10px;font-family:var(--mono);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright)} /* match .hero-aud-label */
.lifecycle{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 11px;
  margin:0;padding:0;color:var(--on-ink);font-weight:600;font-size:clamp(16px,14.5px + .35vw,19px)}
.lc-step{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.lc-arrow{width:.85em;height:.85em;flex:0 0 auto;color:rgba(98,214,190,.83)}
/* Delivery process: a single horizontal row at all screen sizes. Numbers hidden; labels + right
   arrows. Wraps gracefully only if a very narrow screen can't fit the whole line. */
.lifecycle.lc-snake{display:flex;flex-wrap:nowrap;align-items:center;gap:9px 12px;max-width:100%}
/* Single row on large screens; allow it to split/wrap on small screens. */
@media (max-width:600px){.lifecycle.lc-snake{flex-wrap:wrap}}
.lc-snake .lc-step{display:inline-flex;align-items:center;white-space:nowrap;
  font-size:clamp(15px,14px + .35vw,18px)} /* match .hero-aud-list */
.lc-node{display:none}
.lc-arr{display:inline-flex;align-items:center;justify-content:center;color:rgba(98,214,190,.83)}
.lc-arr svg{width:clamp(14px,12px + .4vw,18px);height:clamp(14px,12px + .4vw,18px);display:block}
/* Delivery-pipeline diagram — embedded pre-rendered image (replaces the native category row +
   pipeline). Optimized WebP (~50 KB) at assets/algosolution_diagram.webp; source PNG kept in assets/. */
/* Capability tiles: four clickable category images spread evenly across the row; each lifts into a
   soft card on hover/focus. No section border — the tiles read as part of the hero canvas. */
.hero-cats{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;
  gap:14px;margin:clamp(28px,2.9vw,38px) 0 0}
/* Four capability tiles: 1×4 (wide) → 2×2 (≤999px) → 2×2 (mobile). Never 3+1. */
@media (max-width:999px){.hero-cats{grid-template-columns:1fr 1fr}}
/* Capability tile: "Intelligence Artificielle" — initials full size, rest 1px smaller. */
.hero-cat-lb .ia-dim{font-size:calc(1em - 1px)}
.hero-cat{box-sizing:border-box;width:auto;min-width:0;display:flex;align-items:center;gap:12px;
  border-radius:12px;padding:7px 15px;text-decoration:none;
  background:linear-gradient(160deg,rgba(237,241,244,.06),rgba(237,241,244,.02));
  border:1px solid rgba(98,214,190,.45);box-shadow:0 1px 2px rgba(0,0,0,.22);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.hero-cat:hover,.hero-cat:focus-visible{transform:translateY(-4px);border-color:rgba(98,214,190,.38);
  background:linear-gradient(160deg,rgba(98,214,190,.11),rgba(237,241,244,.03));
  box-shadow:0 12px 28px rgba(0,0,0,.42)}
.hero-cat:focus-visible{outline:3px solid var(--accent-bright);outline-offset:3px}
.hero-cat-ic{flex:0 0 auto;width:34px;height:34px;border-radius:8px;display:block}
.hero-cat-lb{font-family:var(--serif);font-weight:600;font-size:clamp(15px,13.5px + .4vw,19px);letter-spacing:-.01em;
  line-height:1.35;white-space:normal;padding-block:1px;position:relative;top:2px;color:#fff}

/* Diagram-only: rendered borderless/box-free so it floats seamlessly under the tiles. */
.lp-diagram{display:block;width:100%;max-width:1060px;height:auto;margin:clamp(30px,3.4vw,42px) auto 0;
  border:1px solid rgba(237,241,244,.06);border-radius:14px;padding:0}
/* +5%: on wide viewports the diagram grows past the text column; centered so the extra width
   spills evenly into both gutters. Gated to >=1200px so it never overflows narrower screens. */
@media (min-width:1200px){.lp-diagram{width:1113px;max-width:1113px;margin-inline:calc((100% - 1113px) / 2)}}

/* Compact composition for wide, short desktop viewports (2026-07-27).
   Landing page only (.lp / body.lp). Recovers ~65px of first-screen height by trimming accumulated
   hero spacing, easing the H1 clamp maximum ~9%, and tightening the capability tiles — so the
   Integrated Architecture section and its diagram sit inside the fold on short displays (the
   common 1200-1400 x 640-700 CSS viewport produced by 125% OS display scaling). Both width AND
   height are required, so tablets, phones and narrow split-screen windows never match. Taller
   desktops (height > 900px) keep the default spacious layout. No scaling technique is used —
   every value is a normal responsive length, so 200% zoom still reflows through the existing
   width breakpoints. Header, diagram, icons, and every font size except the H1 are untouched. */
@media (min-width:1200px) and (max-height:900px){
  .lp .lp-hero{padding-top:22px} /* small breathing room under the header, still tighter than default */
  .lp .hero-firm-descriptor{margin-bottom:12px}
  .lp .lp-h1{font-size:clamp(2.4rem,1.1rem + 4.4vw,3.65rem);margin-bottom:10px}
  .lp .lp-h1 + .section-intro{margin-top:12px}
  .lp .section-intro + .hero-cats{margin-top:11px}
  .lp .hero-cat{padding-block:5px}
  .lp .hero-cats + .section-intro{margin-top:28px}
  .lp .section-intro + picture .lp-diagram{margin-top:10px}
}

/* Mobile pipeline (.mflow) — on small screens the 2.9:1 raster renders its labels at ~5px, so
   ≤720px swaps it for a native, transparent, stacked rendition of the SAME diagram (real text,
   vector icons). Desktop keeps the raster untouched. */
.mflow{display:none}
@media (max-width:720px){
  /* Small screens load a portrait diagram-only raster via <picture> on the .lp-diagram <img>;
     the native .mflow is retained in the DOM for a11y/validation but is no longer displayed. */
  /* Capability tiles wrap to a fixed 2×2 grid (never 3+1 or 4×1); images fill each cell. */
  /* Roomier vertical rhythm between the hero sub-sections on small screens. */
  .lp-h1{margin-bottom:12px}
  .hero-lead{margin-top:32px}
  .lifecycle-panel{margin-top:24px}
  .hero-cats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
  .hero-cat{width:auto;padding:11px 12px;gap:10px}
  .hero-cat-lb{white-space:normal;font-size:.9rem;letter-spacing:0}
  .lp-diagram{margin-top:32px}
  .mflow-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0 0 var(--s1);
    font-weight:600;font-size:.9rem;color:var(--accent-bright)}
  .mflow-cat{display:inline-flex;align-items:center;gap:6px}
  .mflow-cat svg{width:16px;height:16px;flex:0 0 auto}
  .mflow-phase{display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:100%}
  .mflow-lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--on-ink-muted);padding-bottom:3px;border-bottom:1px solid rgba(98,214,190,.28)}
  .mflow-row{display:flex;align-items:flex-start;justify-content:center;gap:8px}
  .mflow-node{display:flex;flex-direction:column;align-items:center;gap:6px;width:88px;text-align:center}
  .mflow-tile{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;
    color:var(--accent-bright);background:rgba(98,214,190,.08);border:1px solid rgba(98,214,190,.3)}
  .mflow-tile svg{width:28px;height:28px}
  .mflow-node--round .mflow-tile{border-radius:50%}
  .mflow-node--end .mflow-tile{background:var(--accent-bright);border-color:var(--accent-bright);color:var(--btn-ink)}
  .mflow-cap{font-size:.85rem;line-height:1.25;color:var(--on-ink)}
  .mflow-node--end .mflow-cap{color:var(--accent-bright);font-weight:600}
  .mflow-arrow{margin-top:17px;color:var(--accent-bright)}
  .mflow-arrow svg{width:18px;height:18px;display:block}
  .mflow-down{color:var(--accent-bright);font-size:1.1rem;line-height:1}
  .mflow-foot{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:var(--s1)}
  .mflow-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.78rem;
    letter-spacing:.06em;color:var(--on-ink);border:1px solid rgba(98,214,190,.4);border-radius:99px;
    padding:5px 14px}
  .mflow-tag svg{width:15px;height:15px;color:var(--accent-bright)}
  .mflow-loop{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--on-ink-muted)}
  .mflow-loop::before{content:"\2191\00a0";color:var(--accent-bright)}
}

/* Practice cards */
.pgrid{display:grid;gap:var(--s3)}
@media (min-width:760px){.pgrid-2{grid-template-columns:1fr 1fr}}
.pcard{display:block;border:1px solid rgba(237,241,244,.16);border-radius:12px;padding:var(--s4);
  background:rgba(237,241,244,.045);text-decoration:none;color:var(--on-ink);
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.pcard:hover{border-color:var(--accent-bright);background:rgba(237,241,244,.064);transform:translateY(-2px)}
.pcard:focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px}
.pcard-kicker{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-ink-muted);margin-bottom:10px}
.pcard-title{display:block;font-family:var(--serif);font-weight:600;font-size:.97rem;
  color:var(--accent-bright);margin-bottom:var(--s1)}
.pcard-arrow{margin-left:8px;display:inline-block;transition:transform .18s ease}
.pcard:hover .pcard-arrow{transform:translateX(3px)}
.pcard-desc{display:block;color:var(--on-ink-muted);font-size:.9rem;line-height:1.5}

/* Selected work (proof) — dark variant */
.lp .proof{background:rgba(237,241,244,.05);border-color:rgba(237,241,244,.16);
  border-left-color:var(--accent-bright);color:var(--on-ink)}
.lp .proof .proof-head{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);margin-bottom:var(--s3)}
.lp .proof p{color:var(--on-ink-muted)}
.lp .proof .stat b{color:var(--on-ink)}
.lp .proof .stat span,.lp .proof .fineprint{color:var(--on-ink-muted)}

/* Engagement stepper */
/* 3-on-top / 2-row snake at all sizes: top row L→R (1,2,3), down under step 3,
   bottom row R→L (4,5,6). Constrained width on desktop so it stays a compact diagram. */
.steps{list-style:none;margin:0 0 var(--s5);padding:0;
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,3fr) minmax(0,1fr) minmax(0,3fr);
  grid-template-rows:auto auto auto;align-items:center;justify-items:center;
  gap:20px 10px;width:min(100%,760px);box-sizing:border-box}
.step{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.step-arrow{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:rgba(98,214,190,.83)}
.step-arrow svg{width:20px;height:20px;display:block}
.steps > :nth-child(1){grid-column:1;grid-row:1}
.steps > :nth-child(2){grid-column:2;grid-row:1}
.steps > :nth-child(3){grid-column:3;grid-row:1}
.steps > :nth-child(4){grid-column:4;grid-row:1}
.steps > :nth-child(5){grid-column:5;grid-row:1}
.steps > :nth-child(6){grid-column:5;grid-row:2}
.steps > :nth-child(7){grid-column:5;grid-row:3}
.steps > :nth-child(8){grid-column:4;grid-row:3}
.steps > :nth-child(9){grid-column:3;grid-row:3}
.steps > :nth-child(10){grid-column:2;grid-row:3}
.steps > :nth-child(11){grid-column:1;grid-row:3}
.sa-down svg{transform:rotate(90deg)}
.sa-left svg{transform:rotate(180deg)}
@media (max-width:720px){
  .steps{gap:18px 2px;margin-bottom:var(--s4)}
  .steps .step-num{width:36px;height:36px}
  .steps .step-lbl{font-size:.98rem;line-height:1.2}
}
/* Number badges hidden — the engagement stepper shows just the step words + arrows.
   The .step-num spans stay in the HTML (validation asserts 6), they are only visually removed. */
.step-num{display:none}
.step-lbl{font-weight:600;font-size:1.15rem;color:var(--on-ink)}
.steps-head{max-width:22em;margin-bottom:var(--s2)}
.steps-lede{color:var(--on-ink-muted);max-width:40em;margin-bottom:var(--s4)}

@media (prefers-reduced-motion:reduce){
  .pcard,.pcard-arrow{transition:none}
  .pcard:hover{transform:none}
  .pcard:hover .pcard-arrow{transform:none}
}
/* Keep the landing page printable in ink-on-white (body.lp out-specifies the generic print reset). */
@media print{body.lp{background:#fff;color:#000}.lp .hl,.pcard-title,.step-num{color:#000}.lp-h1 span,.hero-cat-lb,.btn-explore-lb{color:#000;-webkit-text-fill-color:#000;background:none}}

/* ============================================================
   Below-fold documentation area (progressive in-page navigation)
   Content lives in the HTML; the nav tree is built from the DOM by
   js/main.js. Sticky sidebar >=1100px, sticky bar + drawer below.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.doc-area{--doc-top:88px;padding:clamp(36px,4.5vw,64px) 0 clamp(20px,2.5vw,32px);
  border-top:1px solid rgba(237,241,244,.10)}
.doc-area + .section{padding-top:clamp(22px,2.6vw,34px)}
.doc-lead-eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-bright);margin:0 0 8px}
.doc-lead{max-width:60ch;margin:0 0 clamp(10px,1.4vw,18px);color:var(--on-ink-muted);
  font-size:clamp(1rem,.95rem + .3vw,1.12rem);line-height:1.55}
.doc-lead strong{color:var(--accent-bright);font-weight:400}
.doc-layout{display:block}
.doc-area{scroll-margin-top:72px}
/* Desktop: two-pane "viewer" — full-height menu beside a fixed-height pane that scrolls
   internally, so the menu is always visible while moving through the details. */
@media (min-width:1100px){
  .doc-area{padding-top:20px;padding-bottom:20px}
  /* Start the "Explore in depth" lead a row lower so it lines up under the sidebar title. */
  .doc-lead-eyebrow{margin-top:66px}
  .doc-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:32px;align-items:stretch;
    height:calc(100vh - 184px);box-sizing:border-box;
    border:1px solid rgba(237,241,244,.12);border-radius:16px;
    padding:16px 14px 16px 18px;background:rgba(237,241,244,.014)}
  .doc-nav-mount{height:100%;min-height:0}
  .doc-content{height:100%;min-height:0;overflow-y:auto;position:relative;
    padding-right:10px;padding-bottom:24px}
}

/* --- content column --- */
.doc-content{min-width:0}
/* All sections render in the viewer immediately (no single-section landing before a click). */
.doc-section{scroll-margin-top:120px;padding:clamp(26px,3.6vw,40px) 0 0}
.doc-section:first-of-type{padding-top:0}
.doc-section + .doc-section{border-top:1px solid rgba(237,241,244,.08)}
.doc-section:focus{outline:none}
.doc-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent);margin:0 0 6px}
.doc-h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem);
  line-height:1.12;letter-spacing:-.01em;margin:0 0 12px;color:var(--on-ink)}
/* Contextual deep-page link, inline at the end of a section's existing intro paragraph
   (2026-07-27). Deliberately subordinate: inherits the intro's flow, adds no block box, no
   spacing rule, and no layout change to the section. */
.doc-more{color:var(--accent-bright);font-weight:600;text-decoration:none}
.doc-more:hover,.doc-more:focus-visible{text-decoration:underline}
.doc-intro{max-width:64ch;margin:0 0 clamp(18px,2.2vw,26px);color:var(--on-ink-muted);
  font-size:clamp(.98rem,.94rem + .2vw,1.08rem);line-height:1.55}
.doc-subgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.doc-subgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.doc-subgrid{grid-template-columns:1fr 1fr 1fr}}
.doc-subcard{scroll-margin-top:120px;display:block;border:1px solid rgba(237,241,244,.09);
  border-radius:10px;background:rgba(237,241,244,.022);padding:15px 17px;text-decoration:none;color:inherit}
.doc-subcard--link{transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.doc-subcard--link:hover{border-color:var(--accent-bright);background:rgba(237,241,244,.05);transform:translateY(-2px)}
.doc-subcard--link:focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px}
.doc-h3{margin:0 0 6px;font-size:1rem;font-weight:600;color:var(--on-ink);display:flex;align-items:center;gap:6px}
.doc-arrow{color:var(--accent-bright);transition:transform .18s ease}
.doc-subcard--link:hover .doc-arrow{transform:translateX(3px)}
.doc-subdesc{margin:0;color:var(--on-ink-muted);font-size:.9rem;line-height:1.5}
.doc-subcard:target,.doc-section:target > .doc-h2{scroll-margin-top:120px}

/* --- shared nav tree (sidebar + drawer) --- */
.doc-nav-title{display:inline-block;font-family:var(--serif);font-size:1.25rem;font-weight:600;
  letter-spacing:.01em;color:var(--accent-bright);margin:0 0 18px;padding:0 0 0 12px;
  background:none;border:0;cursor:pointer;text-decoration:none}
.doc-nav-title:hover{color:#fff}
.doc-nav-title:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
/* Mobile: pin the "Explore capabilities" title under the sticky header on scroll (JS-toggled).
   Helper nodes are zero-height; the placeholder is grown by JS while pinned so nothing shifts. */
.doc-nav-sentinel,.doc-nav-title-ph{height:0}
.doc-nav-title.is-stuck{position:fixed;top:var(--doc-top,88px);left:0;right:0;z-index:900;
  display:block;box-sizing:border-box;margin:0;padding:10px var(--s3);text-align:left;
  background:var(--ink);border-bottom:1px solid rgba(237,241,244,.12)}
.doc-nav-list,.doc-nav-sublist{list-style:none;margin:0;padding:0}
.doc-nav-row{display:flex;align-items:stretch;gap:2px}
.doc-nav-link{flex:1 1 auto;min-width:0;display:block;padding:9px 8px 9px 12px;color:#fff;font-weight:400;
  text-decoration:none;font-size:.92rem;line-height:1.3;border-left:2px solid transparent;
  border-radius:0 6px 6px 0;transition:color .15s,background-color .15s,border-color .15s}
.doc-nav-link:hover{color:var(--accent-bright);background:rgba(237,241,244,.04)}
.doc-nav-item.is-active > .doc-nav-row > .doc-nav-link{color:var(--accent-bright);
  border-left-color:var(--accent-bright);font-weight:600}
.doc-nav-toggle{flex:0 0 auto;width:34px;background:none;border:0;color:var(--on-ink-muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px}
.doc-nav-toggle:hover{color:var(--on-ink);background:rgba(237,241,244,.04)}
.doc-nav-toggle svg{width:13px;height:13px;transition:transform .18s ease}
.doc-nav-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.doc-nav-toggle:focus-visible,.doc-nav-link:focus-visible,.doc-nav-sublink:focus-visible{
  outline:2px solid var(--accent-bright);outline-offset:-2px}
.doc-nav-sublist{overflow:hidden;max-height:0;transition:max-height .22s ease}
.doc-nav-item.is-open > .doc-nav-sublist{max-height:520px}
.doc-nav-sublink{display:block;padding:6px 10px 6px 24px;color:var(--on-ink-muted);opacity:.82;
  text-decoration:none;font-size:.82rem;line-height:1.3;border-left:2px solid transparent}
.doc-nav-sublink:hover{color:var(--on-ink);opacity:1}
.doc-nav-subitem.is-active > .doc-nav-sublink{color:var(--accent-bright);opacity:1;
  border-left-color:rgba(98,214,190,.5)}

/* --- sidebar (shown on all widths; a fixed scroll pane on desktop) --- */
.doc-sidebar{display:block}
@media (min-width:1100px){
  .doc-bar{display:none}
  .doc-sidebar{display:block;height:100%;overflow-y:auto;overscroll-behavior:contain;
    padding:4px 2px 8px 0}
}

/* --- mobile / tablet sticky bar --- */
.doc-bar{display:none}
@media (max-width:1099px){
  /* Small screens: show the nav items (sidebar) above the content instead of collapsing to a bar. */
  .doc-bar{display:none}
  .doc-sidebar{margin:0 0 8px}
}
.doc-bar-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-bright);display:block;margin-bottom:1px}
.doc-bar-label .dt-mobile{display:none}
@media (max-width:720px){.doc-bar-label .dt-tablet{display:none}.doc-bar-label .dt-mobile{display:inline}}
.doc-bar-current{font-size:.95rem;font-weight:600;color:var(--on-ink);display:block;line-height:1.15}
.doc-bar-chev{margin-left:auto;flex:0 0 auto;width:18px;height:18px;color:var(--on-ink-muted)}

/* --- drawer overlay (tablet + mobile) --- */
.doc-drawer{position:fixed;inset:0;z-index:1300;display:none}
.doc-drawer.is-open{display:block}
.doc-drawer-backdrop{position:absolute;inset:0;background:rgba(8,14,22,.62);opacity:0;transition:opacity .2s ease}
.doc-drawer.is-open .doc-drawer-backdrop{opacity:1}
.doc-drawer-panel{position:absolute;top:0;right:0;height:100%;width:88vw;max-width:360px;min-width:272px;
  box-sizing:border-box;
  background:var(--ink);border-left:1px solid rgba(237,241,244,.14);box-shadow:-16px 0 44px rgba(0,0,0,.5);
  padding:16px 14px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .24s ease}
.doc-drawer.is-open .doc-drawer-panel{transform:translateX(0)}
.doc-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;
  padding-left:12px}
.doc-drawer-title{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-muted)}
.doc-drawer-close{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(237,241,244,.16);border-radius:8px;color:var(--on-ink);cursor:pointer}
.doc-drawer-close svg{width:18px;height:18px}
.doc-drawer .doc-nav-title{display:none}
.doc-drawer .doc-nav-link{padding-top:11px;padding-bottom:11px}
.doc-drawer .doc-nav-toggle{width:44px}
.doc-drawer .doc-nav-sublink{padding-top:9px;padding-bottom:9px}
body.doc-drawer-open{overflow:hidden}

/* Modern thin scrollbars for the doc panes (viewer, sidebar, drawer). */
.doc-content,.doc-sidebar,.doc-drawer-panel{scrollbar-width:thin;
  scrollbar-color:rgba(237,241,244,.22) transparent}
.doc-content::-webkit-scrollbar,.doc-sidebar::-webkit-scrollbar,
.doc-drawer-panel::-webkit-scrollbar{width:10px;height:10px}
.doc-content::-webkit-scrollbar-track,.doc-sidebar::-webkit-scrollbar-track,
.doc-drawer-panel::-webkit-scrollbar-track{background:transparent}
.doc-content::-webkit-scrollbar-thumb,.doc-sidebar::-webkit-scrollbar-thumb,
.doc-drawer-panel::-webkit-scrollbar-thumb{background:rgba(237,241,244,.16);border-radius:20px;
  border:3px solid transparent;background-clip:content-box}
.doc-content::-webkit-scrollbar-thumb:hover,.doc-sidebar::-webkit-scrollbar-thumb:hover,
.doc-drawer-panel::-webkit-scrollbar-thumb:hover{background:rgba(98,214,190,.5);background-clip:content-box}

@media (prefers-reduced-motion:reduce){
  .doc-drawer-panel,.doc-drawer-backdrop,.doc-nav-toggle svg,.doc-nav-sublist,.doc-arrow,
  .doc-subcard--link{transition:none}
  html:focus-within{scroll-behavior:auto}
}
@media print{.doc-area .doc-sidebar,.doc-area .doc-bar,.doc-drawer{display:none !important}}