/* ============================================================================
   DevGenome — "Obsidian" design system  ·  production stylesheet
   Hand-coded, framework-free. Drop-in for every page of the site.
   Sections:  0) Self-hosted fonts  1) Tokens  2) Reset/base  3) Typography
              4) Layout  5) Buttons  6) Header/nav  7) Hero  8) (removed P9)
              9) Capabilities  10) (removed P9)  11) (removed P10)
              12) CTA band  13) Footer  14) Forms  15) Utilities
              16) Responsive  17) Reduced motion / print
              ---- page-specific additions (additive, token-based) ----
              18) Compact page header  19) Services  20) About
              21) FAQ accordion  22) Contact extras  23) Legal / prose
   ============================================================================ */

/* ---------- 0) SELF-HOSTED FONTS -------------------------------------------- */
/* Variable woff2 (latin), one file per family — covers the full weight axis.
   Replaces the third-party fonts.googleapis.com request (offline + lean). */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500 700;
  font-display:swap; src:url(/assets/fonts/space-grotesk.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url(/assets/fonts/ibm-plex-sans.woff2) format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url(/assets/fonts/jetbrains-mono.woff2) format('woff2');
}

/* ---------- 1) DESIGN TOKENS ------------------------------------------------ */
:root{
  /* Surfaces (darkest → lightest) */
  --bg:        #0a0a0b;   /* page background                       */
  --bg-deep:   #070708;   /* footer / deepest wells                */
  --bg-alt:    #0c0c0e;   /* trust strip / subtle banding          */
  --panel:     #121216;   /* cards, elevated panels                */
  --panel-2:   rgba(255,255,255,.025); /* glass / quote cards      */

  /* Text */
  --text:      #f6f7f9;   /* primary headings / high emphasis      */
  --text-2:    #aab0ba;   /* body copy                             */
  --text-3:    #8b8f98;   /* secondary / captions                  */
  --text-4:    #858a92;   /* muted footer body      (AA: 5.38:1 on --panel — Pass 7) */
  --text-5:    #7b818b;   /* faint labels/microcopy (AA: 4.77:1 on --panel — Pass 7) */

  /* Lines / borders */
  --line:      rgba(255,255,255,.06);  /* hairline section dividers */
  --line-card: rgba(255,255,255,.08);  /* card borders              */
  --line-2:    rgba(255,255,255,.12);  /* pill / strong borders     */
  --line-3:    rgba(255,255,255,.16);  /* ghost-button border       */

  /* Brand */
  --violet:     #8a2be2;
  --violet-300: #b07bff;  /* lightened violet for text-on-dark     */
  --cyan:       #00bfff;
  --cyan-300:   #3fd0ff;  /* lightened cyan for text-on-dark       */
  --cyan-200:   #7fdcff;  /* eyebrow accent                        */
  --green:      #22c55e;  /* "live"/compliance status dots         */
  --amber:      #f59e0b;  /* reserved accent (warnings/highlights) */

  /* Signature gradients */
  --grad:      linear-gradient(100deg, #8a2be2, #00bfff); /* display text / decor */
  --grad-btn:  linear-gradient(100deg, #8a2be2, #0077b3); /* button fills — white label ≥4.89:1 across the ramp (Pass 7) */
  --grad-135:  linear-gradient(135deg, #8a2be2, #00bfff); /* marks    */

  /* Type families */
  --font-display: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius */
  --r-sm: 8px;    --r-md: 10px;   --r-lg: 14px;   --r-xl: 16px;   --r-pill: 999px;

  /* Elevation */
  --shadow-card:  0 22px 50px -28px rgba(0,191,255,.40);
  --shadow-cta:   0 14px 34px -12px rgba(0,191,255,.55);
  --shadow-btn:   0 12px 30px -12px rgba(0,191,255,.55);
  --shadow-float: 0 40px 80px -40px rgba(0,0,0,.70);

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(22px, 5vw, 48px);   /* horizontal page padding   */
  --section-y: clamp(48px, 7vw, 64px);/* vertical section rhythm   */

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .25s;
}

/* ---------- 2) RESET / BASE ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:dark; } /* FB-2: native controls (select popup, scrollbars, autofill) render dark */
body{
  margin:0;
  background:var(--bg);
  color:var(--text-2);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

/* Visible keyboard focus everywhere */
:focus-visible{ outline:2px solid var(--cyan-300); outline-offset:3px; border-radius:4px; }

/* FB-1: brand selection color (UA-default blue reads unfinished on the dark theme) */
::selection{ background:rgba(0,191,255,.28); color:var(--text); }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:8px; z-index:200;
  background:var(--text); color:var(--bg); padding:10px 16px; border-radius:var(--r-sm);
  font:600 14px/1 var(--font-sans);
}
.skip-link:focus{ left:12px; }

/* ---------- 3) TYPOGRAPHY --------------------------------------------------- */
.eyebrow{
  font:700 12px/1 var(--font-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-200);
}
.h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(31px, 5.2vw, 48px); line-height:1.06; letter-spacing:-.025em;
  color:var(--text);
}
/* NOTE: h2 clamp min raised from 23px → 28px so section titles hold the 28px
   accessibility floor at the 375px baseline (and below). Only change to ref §1–17. */
.h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px, 3.6vw, 33px); line-height:1.1; letter-spacing:-.02em;
  color:var(--text);
}
.h3{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--text); }
.lead{ font-size:clamp(15px,1.6vw,17px); line-height:1.62; color:var(--text-2); }
.body{ font-size:14px; line-height:1.55; color:var(--text-3); }

/* FB-1: professionally-set rag — balanced headings, orphan-free prose (progressive) */
.h1,.h2,.h3{ text-wrap:balance; }
.lead,.prose p{ text-wrap:pretty; }

/* Gradient text — works in all modern browsers (Safari/Chrome/FF/Edge).
   NOTE: keep gradient text to ONE accent phrase per view; never body copy. */
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- 4) LAYOUT ------------------------------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--alt{ background:var(--bg-alt); border-block:1px solid var(--line); }

/* ---------- 5) BUTTONS ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px; border-radius:var(--r-md);
  font:600 16px/1 var(--font-sans); white-space:nowrap; border:1px solid transparent;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.btn--primary{ background:var(--grad-btn); color:#fff; box-shadow:var(--shadow-btn); }
.btn--primary:hover{ transform:translateY(-1px); }
.btn--ghost{ background:rgba(255,255,255,.04); color:var(--text); border-color:var(--line-3); }
.btn--ghost:hover{ border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.07); }
.btn .arrow{ font-family:var(--font-mono); color:var(--cyan-200); }
.btn--primary .arrow{ color:#fff; }
.btn--block{ width:100%; min-height:50px; font-size:16px; }
/* FB-8: tactile press (cancels hover lift; discrete, user-triggered, transform-only) */
.btn:active{ transform:translateY(0) scale(.985); }

/* ---------- 6) HEADER / NAV ------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,11,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.brand{ display:inline-flex; align-items:center; }
/* Pass 9: the text wordmark + dot mark were replaced by the client's official brandbook
   lockup (assets/logo-lockup.png — teal {h} mark + white two-line wordmark, dark-bg variant). */
.brand__logo{ height:32px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{ font:500 14px/1 var(--font-sans); padding-block:15px; color:var(--text-2); transition:color var(--dur); }
.nav__links a:hover{ color:var(--text); }
.nav__cta{ /* uses .btn .btn--primary, compact padding, 16px button floor */ min-height:40px; padding:0 18px; }

/* Hamburger */
.nav__toggle{
  display:none; width:44px; height:44px; background:none; border:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav__toggle span{ width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform var(--dur), opacity var(--dur); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.nav__drawer{
  display:none; flex-direction:column; gap:4px;
  padding:8px var(--gutter) 20px; border-bottom:1px solid var(--line);
  background:rgba(10,10,11,.97);
}
.nav__drawer a{ padding:14px 4px; font:500 16px/1 var(--font-sans); color:var(--text-2); border-bottom:1px solid var(--line); }
.nav__drawer .btn{ margin-top:14px; }
.nav__drawer.is-open{ display:flex; }

/* ---------- 7) HERO --------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(40px,7vw,60px); }
.hero__glow{ position:absolute; border-radius:50%; filter:blur(46px); pointer-events:none; z-index:0; }
.hero__glow--a{ top:34%; left:42%; width:540px; height:540px;
  background:radial-gradient(circle, rgba(138,43,226,.34), transparent 62%); animation:dgGlow 8s ease-in-out infinite; }
.hero__glow--b{ top:8%; right:8%; width:420px; height:420px;
  background:radial-gradient(circle, rgba(0,191,255,.22), transparent 62%); animation:dgGlow 10s ease-in-out infinite; }
.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.12fr .92fr; gap:44px; align-items:center; }
.hero__title{ margin-top:22px; max-width:580px; }
.hero__lead{ margin-top:20px; max-width:500px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; }
/* .hero__proof / .avatars removed (Pass 9): the hero client-proof cluster went with the
   client-names removal (client sheet 2026-07-06). */
.pill{
  display:inline-flex; align-items:center; gap:9px; padding:7px 13px;
  border:1px solid var(--line-2); border-radius:var(--r-pill); background:rgba(255,255,255,.03);
  font:700 12px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-200);
}
.dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.dot--green{ background:var(--green); }
.dot--cyan{ background:var(--cyan); animation:dgPulseB 2.6s ease-in-out infinite; }

/* Hero dashboard mock */
.dash{
  position:relative; overflow:hidden; background:var(--panel);
  border:1px solid var(--line-2); border-radius:var(--r-xl); padding:20px;
  box-shadow:var(--shadow-float); animation:dgFloat 7s ease-in-out infinite;
}
/* Scan sweep (Pass 7): the container is a static full-height overlay; the 46px
   band lives in a full-height ::before whose translateY(100%) therefore equals
   the dash height — the sweep is transform/opacity-only (no layout animation).
   Base opacity:0 → invisible whenever the animation is killed (reduced motion). */
.dash__scan{ position:absolute; inset:0; pointer-events:none; }
.dash__scan::before{ content:""; position:absolute; left:0; right:0; top:0; height:100%;
  background:linear-gradient(180deg, rgba(0,212,255,.16), transparent 46px); opacity:0;
  animation:dgScan 4.5s linear infinite; }
.dash__row{ position:relative; display:flex; align-items:center; justify-content:space-between; }
.dash__live{ display:inline-flex; align-items:center; gap:7px; font:600 12px/1 var(--font-mono); color:var(--green); }
.dash__num{ margin-top:16px; font:700 30px/1 var(--font-mono); letter-spacing:-.01em; }
.dash__sub{ margin-top:4px; font:500 12px/1 var(--font-sans); color:var(--text-3); }
.dash__bars{ display:flex; align-items:flex-end; gap:7px; height:84px; margin-top:22px; }
.dash__bars i{ flex:1; border-radius:4px 4px 0 0; background:rgba(255,255,255,.10); display:block; }
.dash__bars i.v{ background:linear-gradient(180deg,#8a2be2,#5a1f9e); }
.dash__bars i.c{ background:linear-gradient(180deg,#00bfff,#0a7fb5); }
.dash__kpis{ display:flex; gap:10px; margin-top:18px; }
.kpi{ flex:1; background:rgba(255,255,255,.03); border:1px solid var(--line-card); border-radius:var(--r-md); padding:12px; }
.kpi__label{ font:600 12px/1 var(--font-mono); color:var(--text-3); }
.kpi__val{ margin-top:6px; font:700 19px/1 var(--font-display); color:var(--text); }

/* ---------- 8) TRUST STRIP — REMOVED (Pass 9) --------------------------------
   The client-logo strip and its .logos* selectors were removed with the markup
   (client sheet 2026-07-06: client names/logos not needed). */

/* ---------- 9) CAPABILITIES ------------------------------------------------- */
.cap-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }
.cap-head p{ max-width:340px; }
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cap-card{
  background:var(--panel); border:1px solid var(--line-card); border-radius:var(--r-lg); padding:26px 24px;
  transition:transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
}
.cap-card:hover{ transform:translateY(-4px); border-color:rgba(0,191,255,.40); box-shadow:var(--shadow-card); }
.cap-card__top{ display:flex; align-items:center; justify-content:space-between; }
.cap-card__no{ font:700 12px/1 var(--font-mono); color:var(--text-5); }
.cap-card__icon{ width:36px; height:36px; border-radius:var(--r-md); display:grid; place-items:center;
  background:rgba(138,43,226,.14); border:1px solid rgba(138,43,226,.30); }
.cap-card__icon i{ width:13px; height:13px; background:var(--grad-135); display:block; }
.cap-card h3{ margin-top:18px; }
.cap-card p{ margin-top:8px; font-size:13.5px; line-height:1.55; color:#9197a1; }

/* ---------- 10) STATS + COMPLIANCE BADGES — REMOVED (Pass 9) -----------------
   The .stats, .stat-, .badges, .badge and .disclaimer selectors (and the
   --grad-band token) were removed with the stats/certification bands
   (client sheet 2026-07-06: all proof figures and certification mentions removed). */

/* ---------- 11) TESTIMONIALS — REMOVED (Pass 10) -----------------------------
   The .quote family went with the testimonials sections (Ed, 2026-07-06). Restore
   from the pass-2 reference when real, permitted client quotes arrive. */

/* ---------- 12) CTA BAND ---------------------------------------------------- */
.cta{ position:relative; overflow:hidden; background:linear-gradient(100deg,#120c20,#0a1018);
  border-top:1px solid var(--line); }
.cta__glow{ position:absolute; top:50%; left:30%; width:480px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(138,43,226,.25), transparent 65%); filter:blur(46px);
  animation:dgGlow 9s ease-in-out infinite; pointer-events:none; }
.cta__inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }

/* ---------- 13) FOOTER ------------------------------------------------------ */
.footer{ background:var(--bg-deep); border-top:1px solid var(--line); color:var(--text-2); padding-block:48px 30px; }
.footer__top{ display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between; }
.footer__about{ max-width:280px; }
.footer__about p{ margin-top:16px; font-size:13px; line-height:1.6; color:var(--text-4); }
.footer__cols{ display:flex; gap:54px; flex-wrap:wrap; }
.footer__col h4{ font:700 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-5); margin-bottom:14px; }
.footer__col a{ display:block; padding:12px 0; font:500 13px/1 var(--font-sans); color:var(--text-2); transition:color var(--dur); }
.footer__col a:hover{ color:var(--text); }
.footer__legal{ margin-top:38px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; align-items:center; }
.footer__reg{ font:400 12px/1.6 var(--font-mono); color:var(--text-5); max-width:680px; }
.footer__copy{ font:400 12px/1 var(--font-sans); color:var(--text-5); }

/* ---------- 14) FORMS (Contact page) ---------------------------------------- */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label{ font:600 13px/1 var(--font-sans); color:var(--text-2); }
.field input, .field textarea, .field select{
  width:100%; min-height:48px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--panel); border:1px solid var(--line-2); color:var(--text);
  font:400 15px/1.4 var(--font-sans); transition:border-color var(--dur);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--cyan-300); }
.field input::placeholder, .field textarea::placeholder{ color:var(--text-5); }

/* ---------- 15) UTILITIES --------------------------------------------------- */
.reveal{ opacity:0; transform:translate(var(--rx,0), 16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.mono{ font-family:var(--font-mono); }
.center{ text-align:center; }
.mt-8{ margin-top:8px; } .mt-14{ margin-top:14px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; }

/* ---------- 16) RESPONSIVE -------------------------------------------------- */
@media (max-width: 900px){
  .hero__grid{ grid-template-columns:1fr; gap:32px; }
  .hero__dash{ order:-1; }            /* show the proof card under the copy if desired: remove to keep above */
  .cap-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .nav__links, .nav > .lang, .nav .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
}
@media (max-width: 600px){
  .cap-grid{ grid-template-columns:1fr; }
  .cta__inner{ flex-direction:column; align-items:flex-start; }
  .cta__inner .btn{ width:100%; }
  .hero__actions .btn{ width:100%; }
}

/* ---------- 17) KEYFRAMES / REDUCED MOTION / PRINT -------------------------- */
@keyframes dgFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
@keyframes dgGlow{ 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:.85; transform:scale(1.12);} }
@keyframes dgPulseB{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,191,255,.45);} 50%{ box-shadow:0 0 0 7px rgba(0,191,255,0);} }
@keyframes dgScan{ 0%{ transform:translateY(-46px); opacity:0;} 10%{ opacity:1;} 90%{ opacity:1;} 100%{ transform:translateY(100%); opacity:0;} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  /* ::details-content is a pseudo-element the universal kill cannot reach —
     null the DG-23 accordion transition explicitly (own rule so browsers
     without ::details-content simply drop it). Pass 7. */
  .faq::details-content{ transition:none !important; }
}

@media print{
  .site-header, .cta, .hero__glow, .dash__scan{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* FB-5: Windows High-Contrast rescue — background-clip:text + transparent fill
   otherwise leaves the brand wordmark and hero accent phrase INVISIBLE when the
   forced palette strips background images. Own rule; inert everywhere else. */
@media (forced-colors: active){
  .grad-text{ background:none; -webkit-text-fill-color:currentColor; color:CanvasText; }
  /* Pass 9: the brand logo is a white-on-transparent image (HCM does not repaint image
     pixels) — give it a brand backplate so it stays visible on LIGHT forced palettes. */
  .brand__logo{ forced-color-adjust:none; background:#34006e; border-radius:6px;
    padding:3px 6px; box-sizing:content-box; }
}

/* ============================================================================
   PAGE-SPECIFIC ADDITIONS  (§18–23)
   Additive only. Token-based, in-system. Reference §1–17 above is untouched
   except the single .h2 clamp-min line. The "compact page header" reuses the
   hero pattern minus the dashboard column (COMPONENTS.md reuse map).
   ============================================================================ */

/* ---------- 18) COMPACT PAGE HEADER ----------------------------------------- */
.page-header{ position:relative; overflow:hidden; padding-block:clamp(48px,7vw,72px); border-bottom:1px solid var(--line); }
.page-header__glow{ position:absolute; top:-20%; left:38%; width:520px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(138,43,226,.26), transparent 62%); filter:blur(48px);
  pointer-events:none; z-index:0; animation:dgGlow 9s ease-in-out infinite; }
.page-header .container{ position:relative; z-index:1; }
.page-header__title{ margin-top:16px; max-width:760px; }
.page-header__lead{ margin-top:18px; max-width:620px; }

/* ---------- 19) SERVICES ---------------------------------------------------- */
.svc{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
  padding-block:clamp(36px,5vw,52px); border-top:1px solid var(--line); scroll-margin-top:84px; }
.svc:first-of-type{ border-top:0; }
.svc--flip .svc__media{ order:-1; }
.svc__head{ position:sticky; top:84px; }
.svc__head .cap-card__icon{ margin-bottom:18px; }
.svc__head .h2{ margin-top:4px; }
.svc__desc{ margin-top:14px; max-width:440px; }
.svc__list{ margin-top:22px; display:grid; gap:11px; }
.svc__list li{ position:relative; padding-left:24px; font-size:14.5px; line-height:1.5; color:var(--text-2); }
.svc__list li::before{ content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:2px;
  background:var(--grad-135); }
.svc__panel{ background:var(--panel); border:1px solid var(--line-card); border-radius:var(--r-xl); padding:28px; }
.svc__panel .eyebrow{ color:var(--text-5); }
.svc__panel h3{ margin-top:14px; }
.svc__panel p{ margin-top:10px; font-size:13.5px; line-height:1.6; color:#9197a1; }
.svc__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.svc__tag{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:rgba(255,255,255,.02); font:500 12px/1 var(--font-sans); color:#c7ccd4; }

/* Engagement model (numbered like cap-cards) */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; }
.proc-card{ background:var(--panel); border:1px solid var(--line-card); border-radius:var(--r-lg); padding:24px 22px; }
.proc-card__no{ font:700 12px/1 var(--font-mono); color:var(--cyan-200); }
.proc-card h3{ margin-top:16px; font-size:17px; }
.proc-card p{ margin-top:9px; font-size:13.5px; line-height:1.55; color:#9197a1; }

/* ---------- 20) ABOUT ------------------------------------------------------- */
.story{ display:grid; grid-template-columns:1.3fr .9fr; gap:40px; align-items:start; }
.story__prose p{ margin-top:18px; font-size:15.5px; line-height:1.72; color:var(--text-2); max-width:560px; }
.story__prose p:first-child{ margin-top:0; }
.facts{ background:var(--panel); border:1px solid var(--line-card); border-radius:var(--r-xl); padding:28px; }
.facts h3{ font-size:13px; font-family:var(--font-mono); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-5); }
.facts dl{ margin:18px 0 0; display:grid; gap:16px; }
.facts dt{ font:600 12px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.facts dd{ margin:6px 0 0; font:600 16px/1.3 var(--font-display); color:var(--text); }
.facts dd small{ display:block; margin-top:3px; font:400 12.5px/1.4 var(--font-sans); color:var(--text-3); }

/* ---------- 21) FAQ ACCORDION ----------------------------------------------- */
.faq-group{ margin-top:38px; }
.faq-group:first-of-type{ margin-top:0; }
.faq-group > .eyebrow{ display:block; margin-bottom:16px; }
.faq{ border:1px solid var(--line-card); border-radius:var(--r-md); background:var(--panel);
  margin-bottom:10px; overflow:hidden; }
.faq > summary{ list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center;
  justify-content:space-between; gap:18px; font:600 15.5px/1.4 var(--font-display); color:var(--text); }
.faq > summary::-webkit-details-marker{ display:none; }
.faq__mark{ flex:none; width:22px; height:22px; position:relative; }
.faq__mark::before, .faq__mark::after{ content:""; position:absolute; left:50%; top:50%; background:var(--cyan-300);
  transform:translate(-50%,-50%); transition:transform var(--dur) var(--ease); }
.faq__mark::before{ width:13px; height:2px; }
.faq__mark::after{ width:2px; height:13px; }
.faq[open] .faq__mark::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__body{ padding:0 20px 20px; }
.faq__body p{ font-size:14.5px; line-height:1.65; color:var(--text-2); max-width:680px; }
.faq:hover{ border-color:var(--line-2); }

/* ---------- 22) CONTACT EXTRAS ---------------------------------------------- */
.contact__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start; }
.contact__form{ background:var(--panel); border:1px solid var(--line-card); border-radius:var(--r-xl); padding:30px; }
.req{ color:var(--cyan-300); }
.field__error{ display:none; font:500 12.5px/1.4 var(--font-sans); color:#ff8a8a; }
.field--invalid .field__error{ display:block; }
.field--invalid input, .field--invalid textarea, .field--invalid select{ border-color:#ff8a8a; }
.form-success{ display:none; text-align:center; padding:30px 20px; }
.form-success.is-shown{ display:block; }
.form-success__mark{ width:54px; height:54px; margin:0 auto 18px; border-radius:50%;
  background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.4); display:grid; place-items:center; }
.form-success__mark::after{ content:""; width:18px; height:10px; border-left:2.5px solid var(--green);
  border-bottom:2.5px solid var(--green); transform:rotate(-45deg); margin-top:-4px; }
.form-success h3{ margin-bottom:8px; }
.form-success p{ color:var(--text-2); max-width:380px; margin:0 auto; }
.contact__panel{ background:var(--panel-2); border:1px solid var(--line-card); border-radius:var(--r-xl); padding:30px; }
.contact__list{ display:grid; gap:20px; margin-top:6px; }
.contact__item dt{ font:600 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.contact__item dd{ margin:7px 0 0; font-size:14.5px; line-height:1.5; color:var(--text); }
.contact__item dd a:hover{ color:var(--cyan-300); }
.contact__note{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }

/* ---------- 23) LEGAL / PROSE ----------------------------------------------- */
.prose{ max-width:760px; }
.prose__updated{ font:400 12.5px/1 var(--font-mono); color:var(--text-3); }
.toc{ margin:8px 0 36px; padding:22px 24px; background:var(--panel); border:1px solid var(--line-card);
  border-radius:var(--r-lg); }
.toc h2{ font:700 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-5);
  margin-bottom:14px; }
.toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; display:grid; gap:9px; }
.toc li{ counter-increment:toc; }
.toc a{ display:block; padding:11px 0; font-size:14px; color:var(--text-2); }
.toc a::before{ content:counter(toc,decimal-leading-zero) "  "; font-family:var(--font-mono); color:var(--cyan-200); }
.toc a:hover{ color:var(--text); }
.prose h2{ font-size:clamp(20px,2.4vw,23px); margin-top:42px; scroll-margin-top:84px; }
.prose h3{ margin-top:26px; }
.prose p{ margin-top:14px; font-size:15px; line-height:1.75; color:var(--text-2); }
.prose ul{ margin-top:14px; display:grid; gap:9px; }
.prose ul li{ position:relative; padding-left:22px; font-size:15px; line-height:1.7; color:var(--text-2); }
.prose ul li::before{ content:""; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:2px;
  background:var(--grad-135); }
.prose a:not(.toc a){ color:var(--cyan-300); }
.prose a:not(.toc a):hover{ text-decoration:underline; }
.legal-note{ margin-top:40px; padding:18px 20px; border:1px dashed var(--line-2); border-radius:var(--r-md);
  font:400 12.5px/1.6 var(--font-mono); color:var(--text-4); }

/* ---------- page-specific RESPONSIVE ---------------------------------------- */
@media (max-width: 900px){
  .svc{ grid-template-columns:1fr; gap:26px; }
  .svc--flip .svc__media{ order:0; }
  .svc__head{ position:static; }
  .process{ grid-template-columns:1fr 1fr; }
  .story{ grid-template-columns:1fr; gap:28px; }
  .contact__grid{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width: 600px){
  .process{ grid-template-columns:1fr; }
}

/* ============================================================================
   24) PASS 3 — MOTION & INTERACTIVITY POLISH   (additive, token-based)
   Approved subset: DG-1,2,3,4,5,6,8,10,11,14,15,16,17,18,20,21,23,24,25,26,29.
   Reuses --ease / --dur. Transform/opacity-first; the few discrete paint or
   reflow state-changes are one-shot (hover / focus / open / scrolled). EVERY
   animation & transition here is nulled by the §17 reduced-motion kill above.
   ============================================================================ */

/* DG-2 — Directional reveal on alternating service blocks. The horizontal
   offset rides the base .reveal via --rx (default 0), so the §17 kill and the
   no-JS <noscript> `.reveal{transform:none}` fallback both neutralise it. */
.svc{ --rx:-22px; }
.svc--flip{ --rx:22px; }

/* DG-4 — Header gains depth once scrolled (paint-only, one discrete toggle). */
.site-header{ transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.site-header.is-scrolled{ background:rgba(10,10,11,.94); border-bottom-color:var(--line-2); box-shadow:0 10px 30px -20px rgba(0,0,0,.85); }

/* DG-5 — Animated nav underline + current-page state (aria-current set by JS). */
.nav__links a{ position:relative; }
.nav__links a::after{
  /* bottom:9px = 6px under the text now the links carry padding-block:15px (44px targets, Pass 7). */
  content:""; position:absolute; left:0; right:0; bottom:9px; height:2px; border-radius:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"],
.nav__drawer a[aria-current="page"]{ color:var(--text); }

/* DG-6 — Mobile drawer slides + fades on open (close stays instant; the
   hamburger already animates to an X). Drawer is display:none closed → no CLS. */
.nav__drawer.is-open{ animation:dgDrawerIn var(--dur) var(--ease); }
@keyframes dgDrawerIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* DG-8 — Back-to-top button (injected by JS; absent entirely when JS is off). */
.to-top{
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:90;
  width:44px; height:44px; border-radius:var(--r-md);
  background:rgba(18,18,22,.9); border:1px solid var(--line-2); backdrop-filter:blur(8px);
  display:grid; place-items:center; color:var(--text-2);
  opacity:0; transform:translateY(10px); pointer-events:none; visibility:hidden;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
             color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             visibility 0s var(--ease) var(--dur);
}
/* visibility keeps the hidden button out of the tab order / accessibility tree;
   the 0s+delay pair hides after the fade-out and shows instantly (Pass 7). */
.to-top.is-shown{ opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
             color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             visibility 0s; }
.to-top:hover{ color:var(--text); border-color:rgba(0,191,255,.40); }
.to-top svg{ width:18px; height:18px; }

/* DG-10 — Fast, time-boxed hero entrance (home only). H1 lands first; the whole
   pill→h1→lead→CTA→proof→dash sequence completes ≤600ms so the ~5s read holds. */
.hero .pill{     animation:dgHeroIn .34s var(--ease) .04s both; }
.hero__title{    animation:dgHeroIn .34s var(--ease) .09s both; }
.hero__lead{     animation:dgHeroIn .34s var(--ease) .15s both; }
.hero__actions{  animation:dgHeroIn .34s var(--ease) .21s both; }
.hero__dash{     animation:dgHeroIn .42s var(--ease) .18s both; }
@keyframes dgHeroIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* DG-11 — Dashboard bars grow in on first paint. Decorative (parent is
   aria-hidden); animates transform:scaleY, never height → no reflow. The dash
   is a de-claimed illustrative vignette since Pass 9 (no metric/company claim). */
.dash__bars i{ transform-origin:bottom; animation:dgBarGrow .55s var(--ease) both; }
.dash__bars i:nth-child(1){ animation-delay:.34s; }
.dash__bars i:nth-child(2){ animation-delay:.40s; }
.dash__bars i:nth-child(3){ animation-delay:.46s; }
.dash__bars i:nth-child(4){ animation-delay:.52s; }
.dash__bars i:nth-child(5){ animation-delay:.58s; }
.dash__bars i:nth-child(6){ animation-delay:.64s; }
.dash__bars i:nth-child(7){ animation-delay:.70s; }
.dash__bars i:nth-child(8){ animation-delay:.76s; }
@keyframes dgBarGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* DG-14 — Icon chip reacts to the existing card hover-lift. */
.cap-card__icon{ transition:transform var(--dur) var(--ease); }
.cap-card:hover .cap-card__icon{ transform:translateY(-2px) scale(1.06); }

/* DG-15 — Soft gradient-border sheen fades in on card hover (opacity only).
   Guarded so browsers without mask-composite never show a solid overlay. */
.cap-card{ position:relative; }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)){
  .cap-card::after{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
    background:var(--grad); opacity:0; transition:opacity var(--dur) var(--ease);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  .cap-card:hover::after{ opacity:.7; }
}

/* DG-17 removed (Pass 9) — badge hover went with the certification badges. */

/* DG-18 removed (Pass 10) — quote hover went with the testimonials sections. */

/* DG-20/21 removed (Pass 9) — trust-strip hover/stagger went with the strip. */

/* DG-23 — Smooth FAQ accordion where supported; native instant snap otherwise. */
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size: allow-keywords; }
  .faq::details-content{ block-size:0; overflow:hidden; transition:block-size var(--dur) var(--ease); }
  .faq[open]::details-content{ block-size:auto; }
}

/* DG-24 — Contact field focus glow (kept ALONGSIDE the :focus-visible outline). */
.field input, .field textarea, .field select{ transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus{ box-shadow:0 0 0 3px rgba(0,191,255,.16); }

/* DG-25 — Inline validation: a single 2px nudge + a calm error fade-in. Error
   stays display:none when valid (no reserved space / no CLS); the fade uses
   @starting-style + allow-discrete where supported, and is instant elsewhere. */
.field--invalid{ animation:dgNudge .18s var(--ease); }
@keyframes dgNudge{ 0%{ transform:translateX(0); } 50%{ transform:translateX(2px); } 100%{ transform:translateX(0); } }
.field__error{ transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), display var(--dur) allow-discrete; }
.field--invalid .field__error{ opacity:1; transform:none; }
@starting-style{ .field--invalid .field__error{ opacity:0; transform:translateY(-3px); } }

/* DG-26 — Success state eases in and the check pops. */
.form-success.is-shown{ animation:dgSuccessIn .40s var(--ease) both; }
@keyframes dgSuccessIn{ from{ opacity:0; transform:scale(.96) translateY(8px); } to{ opacity:1; transform:none; } }
.form-success.is-shown .form-success__mark{ animation:dgPop .45s var(--ease) .10s both; }
@keyframes dgPop{ 0%{ transform:scale(0); } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

/* DG-29 — Legal TOC scroll-spy active state (class toggled by JS). */
.toc a.is-active{ color:var(--text); }
.toc a.is-active::before{ color:var(--cyan-300); }

/* ============================================================================
   25) PASS 4 — i18n LANGUAGE TOGGLE + FORM BACKEND HOOKS   (additive)
   EN|ES segmented control · saved-ES pre-paint guard · honeypot · form error.
   All motion here is nulled by the §17 reduced-motion kill. The control is
   hidden with JS off (each page's <noscript> adds `.lang{display:none}`), so
   no-JS visitors get the default language with no dead buttons.
   ============================================================================ */
/* Saved-ES pre-paint guard (R2): a returning ES visitor's <head> snippet adds
   .lang-loading before first paint; the body is held (visibility only — layout
   preserved, no CLS) until main.js swaps text to ES, then removes the class.
   The EN / default path is never hidden, so it pays nothing. */
html.lang-loading body{ visibility:hidden; }

/* EN|ES segmented control */
.lang{ display:inline-flex; align-items:stretch; gap:2px; flex:none;
  padding:2px; border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:rgba(255,255,255,.03); }
.lang__btn{ min-width:34px; min-height:36px; padding:0 9px; border:0; background:none;
  border-radius:var(--r-pill); font:700 12px/1 var(--font-mono); letter-spacing:.08em;
  color:var(--text-3); transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.lang__btn:hover{ color:var(--text); }
.lang__btn[aria-pressed="true"]{ color:#fff; background:var(--grad-btn); }
/* Drawer variant: inline in the mobile menu with a comfortable tap row (≥44px). */
.lang--drawer{ align-self:flex-start; margin:10px 0 2px; }
.lang--drawer .lang__btn{ min-height:36px; padding:0 15px; font-size:12px; }

/* Honeypot — off-screen (NOT display:none, so bots that skip hidden fields fill it). */
.hp-field{ position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px; height:1px; overflow:hidden; }

/* Contact form error state (shown by main.js only when a real POST fails; prod). */
.form-error{ display:none; margin-top:14px; padding:12px 14px; border-radius:var(--r-md);
  border:1px solid rgba(245,158,11,.35); background:rgba(245,158,11,.08);
  color:#f1d9a8; font:500 14px/1.5 var(--font-sans); }
.form-error.is-shown{ display:block; }

/* R1 stub: an ES-only notice on legal pages whose long draft bodies stay EN
   until counsel finalises the English. Hidden in EN, shown when ES is active. */
.lang-note-legal{ display:none; }
html.lang-es .lang-note-legal{ display:block; }

/* Language crossfade (Pass 5): the page content dissolves EN<->ES instead of
   hard-swapping. Only #main + .footer fade — the header frame and the EN|ES
   control stay crisp and responsive. Fading these as whole blocks also hides
   the natural height reflow (ES copy runs longer than EN). main.js adds
   .lang-swapping for one beat at opacity 0, swaps the text mid-fade, then
   removes it. Its reduced-motion guard skips the animation entirely (the §17
   `*{transition:none!important}` kill also nulls it → instant swap, as before). */
:root{ --lang-fade: .22s; }
#main, .footer{
  transition: opacity   var(--lang-fade) var(--ease),
              filter    var(--lang-fade) var(--ease),
              transform var(--lang-fade) var(--ease); }
html.lang-swapping #main,
html.lang-swapping .footer{
  opacity: 0;
  filter: blur(5px);
  transform: translateY(6px); }

/* ============================================================================
   26) PASS 8 — CROSS-DOCUMENT VIEW TRANSITIONS (FB-3)   (additive, CSS-only)
   Page navigation crossfades in .22s — the same motion language as the EN/ES
   swap (--lang-fade). Pure progressive enhancement: Chromium 126+/Safari 18.2+;
   everyone else keeps instant navigation. Zero JS, zero CLS, works with JS off.
   The §17 * kill cannot reach ::view-transition pseudos, so reduced motion is
   handled by the nested @view-transition{navigation:none} (house pattern from
   projects/developed). Named pins stop fixed chrome double-fading inside the
   root snapshot; each name is unique per page (drawer .lang is display:none
   whenever the header .lang is visible, and only .nav > .lang is named).
   ============================================================================ */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
}
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.22s; }
.site-header{ view-transition-name:site-header; }
.nav > .lang{ view-transition-name:lang-switch; }
.to-top{ view-transition-name:to-top; }