@charset "UTF-8";
/* ============================================================================
   VOLTCIRCUIT — design-tokens.css
   THE ONLY STYLESHEET ON THIS SITE. Do not add a second CSS file.
   Source of truth: source/docs/site-design-language.md (frozen) + facts-base.md
   Motif: TAPE & REEL FLOW — material motion on the SMT line, left to right.
   ----------------------------------------------------------------------------
   TABLE OF CONTENTS
     01 DESIGN TOKENS
     02 RESET & BASE ELEMENTS
     03 TYPOGRAPHY UTILITIES
     04 LAYOUT PRIMITIVES
     05 BUTTONS
     06 SITE HEADER / PRIMARY NAV
     07 SITE FOOTER
     08 HERO — HOME + SUBPAGE
     09 FLOW RAIL
     10 STAT BAND
     11 CARD GRID
     12 SPLIT (EQUAL-HEIGHT MEDIA / TEXT)
     13 SPEC TABLE + SPEC ROW
     14 DATA SLAB (DARK PARAMETER PANEL)
     15 CERT WALL
     16 PROCESS STEPS
     17 FAQ LIST
     18 INDUSTRY STRIP
     19 CASE CARD
     20 VERIFICATION STRIP
     21 CTA BAND
     22 INQUIRY MODAL
     23 FORM FIELDS
     24 SCROLL REVEAL
     25 RESPONSIVE
     26 REDUCED MOTION / PRINT
   ----------------------------------------------------------------------------
   COLOUR CONTRACT (measured WCAG 2.1 contrast — do not introduce new colours)
     --ink      #141A1E on --base #F2F5F7 = 16.4:1   body text, light
     --ink-2    #4A565E on --base #F2F5F7 =  6.9:1   secondary text, light
     --ink-2    #4A565E on --surface #FFFFFF = 7.5:1 secondary text on cards
     --ink-3    #8A959C on --base #F2F5F7 =  2.8:1   DECORATIVE ONLY (hairlines,
                disabled states, icon strokes). Never use it for text.
     --accent-ink #FFFFFF on --accent #007C8F = 4.9:1  button label
     --accent   #007C8F on --base #F2F5F7 = 4.48:1  approved for large text + UI
                (eyebrows, rules, icons). Pre-approved by the frozen design
                language; do not use accent for small paragraph copy.
     --accent-deep #0A5C6B on --accent-soft #E4F1F3 = 6.6:1  promise chips
     --on-dark-2   #8A959C on --dark #141A1E = 5.7:1  secondary text, dark
     --on-dark     #FFFFFF on --dark #141A1E = 17.4:1 body text, dark
   ========================================================================== */


/* ==========================================================================
   01 DESIGN TOKENS
   ========================================================================== */

:root{
  /* --- colour system ---------------------------------------------------- */
  --base:#F2F5F7;          /* anodised-aluminium cool grey — page background  */
  --surface:#FFFFFF;       /* panel / card                                    */
  --surface-2:#E9EEF1;     /* inset tint: media placeholder, ghost-button rest */
  --surface-3:#F7FAFB;     /* raised tint: table heads, quiet strips           */
  --ink:#141A1E;           /* primary text on light                           */
  --ink-2:#4A565E;         /* secondary text on light                         */
  --ink-3:#8A959C;         /* decorative strokes / disabled — NOT text        */
  --line:#D8DEE2;          /* the one hairline colour                         */
  --line-2:#C3CCD1;        /* hairline for interactive borders (inputs)       */
  --accent:#007C8F;        /* electric cyan — the only accent on this site    */
  --accent-hover:#00697A;
  --accent-ink:#FFFFFF;    /* text on accent                                  */
  --accent-soft:#E4F1F3;   /* accent tint panel                               */
  --accent-soft-line:#CADFE3;
  --accent-deep:#0A5C6B;   /* text on accent-soft                             */
  --dark:#141A1E;          /* dark panel                                      */
  --on-dark:#FFFFFF;       /* text on dark                                    */
  --on-dark-2:#8A959C;     /* secondary text on dark                          */
  --on-dark-line:rgba(255,255,255,.16);
  --scrim:rgba(20,26,30,.62);

  /* --- surface treatment ------------------------------------------------ */
  --r:4px;                                     /* the only radius tier       */
  --shadow:0 1px 3px rgba(20,26,30,.07);       /* the only shadow on the site */
  --border:1px solid var(--line);

  /* --- spacing scale (8px base) ----------------------------------------- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:40px;
  --sp-8:48px;
  --sp-9:64px;
  --sp-10:80px;
  --sp-11:96px;
  --sp-12:128px;

  /* --- section rhythm (mobile floors are enforced in §25) --------------- */
  --section-y:96px;        /* desktop 96px per design language               */
  --section-y-tight:72px;

  /* --- container / grid ------------------------------------------------- */
  --container:1280px;
  --gutter:24px;

  /* --- font families (loaded per page with a Google Fonts <link>) ------- */
  --font-display:'Barlow Semi Condensed','Archivo Narrow','Arial Narrow',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  /* --- type scale ------------------------------------------------------- */
  --fs-h1:clamp(34px,4.6vw,54px);
  --fs-h2:clamp(26px,3.2vw,40px);
  --fs-h3:clamp(19px,1.8vw,21px);
  --fs-h4:17px;
  --fs-lead:clamp(18px,1.6vw,19px);
  --fs-body:16px;
  --fs-small:15px;          /* the floor for body copy on mobile             */
  --fs-meta:14px;
  --fs-data:clamp(20px,2.2vw,28px);
  --fs-eyebrow:12px;
  --fs-mono:13px;
  --fs-hint:10px;           /* nav spec hooks — desktop only, see §06         */

  --lh-h1:1.06;
  --lh-h2:1.12;
  --lh-h3:1.25;
  --lh-lead:1.6;
  --lh-body:1.65;           /* light backgrounds — never lower               */
  --lh-body-dark:1.55;      /* dark backgrounds — never lower                */
  --lh-data:1.25;

  /* --- motion ----------------------------------------------------------- */
  --ease:cubic-bezier(.2,.6,.3,1);
  --reveal-dur:.55s;
}


/* ==========================================================================
   02 RESET & BASE ELEMENTS
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;   /* clears the sticky header */
}

body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--sp-4);
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.005em;
  color:inherit;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:0}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h3)}

p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}

ul,ol{margin:0 0 var(--sp-4);padding-inline-start:1.25em}
li{margin-bottom:var(--sp-1)}

img,svg,video{max-width:100%}
img{display:block;height:auto;border:0}
svg{display:block}

a{color:inherit;text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{color:var(--accent)}

figure{margin:0}
figcaption{
  margin-top:var(--sp-3);
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  line-height:var(--lh-body);
  color:var(--ink-2);
}

button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{cursor:pointer}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-8) 0}
strong,b{font-weight:600}
small{font-size:var(--fs-meta)}

/* One focus treatment for the whole site. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r);
}
:focus:not(:focus-visible){outline:none}

::selection{background:var(--accent);color:var(--accent-ink)}

/* The .visually-hidden utility doubles as the skip link: it becomes a real
   control the moment it takes focus. */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.visually-hidden:focus,
.visually-hidden:focus-visible{
  position:fixed;
  inset-block-start:var(--sp-3);
  inset-inline-start:var(--sp-3);
  z-index:400;
  width:auto;height:auto;
  margin:0;padding:var(--sp-3) var(--sp-5);
  clip:auto;clip-path:none;overflow:visible;
  background:var(--surface);
  border:1px solid var(--accent);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h4);
  color:var(--ink);
  text-decoration:none;
}


/* ==========================================================================
   03 TYPOGRAPHY UTILITIES
   ========================================================================== */

.eyebrow{
  display:block;
  margin:0 0 var(--sp-4);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--fs-eyebrow);
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:var(--lh-lead);
  color:var(--accent);
}

.lead{
  font-size:var(--fs-lead);
  font-weight:400;
  line-height:var(--lh-lead);
  color:var(--ink-2);
  max-width:68ch;
}

.mono{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:var(--fs-mono);
  letter-spacing:.02em;
  line-height:var(--lh-body);
}

.muted{color:var(--ink-2)}

.u-center{text-align:center}
.u-center > *{margin-inline:auto}

/* Dark surfaces: raise line-height floor to 1.55 and keep colours explicit. */
.section--dark,
.site-footer,
.data-slab{
  line-height:var(--lh-body-dark);
}
.section--dark p,
.section--dark li,
.site-footer p,
.site-footer li,
.data-slab p{
  line-height:var(--lh-body-dark);
}
.section--dark .lead,
.site-footer .lead{color:var(--on-dark-2)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4{color:var(--on-dark)}
.section--dark .eyebrow{color:var(--on-dark-2)}
.section--dark code,
.data-slab code{color:var(--on-dark)}


/* ==========================================================================
   04 LAYOUT PRIMITIVES
   Every grid child gets min-width:0 so tables/selects cannot break out.
   ========================================================================== */

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Section rhythm uses padding-block only — never the `padding: X 0 Y`
   shorthand, which would cancel .container's side padding. */
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--dark{background:var(--dark);color:var(--on-dark)}

.grid{
  display:grid;
  gap:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.grid-2{display:grid;gap:var(--sp-5);grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{display:grid;gap:var(--sp-5);grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{display:grid;gap:var(--sp-5);grid-template-columns:repeat(4,minmax(0,1fr))}

.grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *{min-width:0}

.stack{display:flex;flex-direction:column;gap:var(--sp-5)}
.stack > *{margin:0;min-width:0}

.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}


/* ==========================================================================
   05 BUTTONS — primary = accent fill, secondary = 1px border, zero shadow
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  min-width:44px;
  padding:0 var(--sp-5);
  border:1px solid transparent;
  border-radius:var(--r);
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h4);
  letter-spacing:.02em;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn svg{width:18px;height:18px;flex:none}

.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--primary:hover,
.btn--primary:focus-visible{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}

.btn--ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover,
.btn--ghost:focus-visible{background:var(--surface-2);border-color:var(--ink-3);color:var(--ink)}

.btn--light{background:var(--surface);border-color:var(--surface);color:var(--dark)}
.btn--light:hover,
.btn--light:focus-visible{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-deep)}

/* Explicit dark-surface button overrides — never rely on inheritance. */
.section--dark .btn--ghost,
.site-footer .btn--ghost,
.data-slab .btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.32);
  color:var(--on-dark);
}
.section--dark .btn--ghost:hover,
.site-footer .btn--ghost:hover,
.data-slab .btn--ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.55);
  color:var(--on-dark);
}
.section--dark .btn--primary,
.site-footer .btn--primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.btn-row .btn{flex:0 1 auto}


/* ==========================================================================
   06 SITE HEADER / PRIMARY NAV
   ========================================================================== */

.site-header{
  position:sticky;
  inset-block-start:0;
  z-index:100;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  transition:box-shadow .22s var(--ease);
}
.site-header.is-scrolled{box-shadow:var(--shadow)}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  min-height:72px;
}

.nav-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none;
  min-height:44px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.2;
  color:var(--ink);
  text-decoration:none;
}
.nav-brand:hover{color:var(--ink)}
.nav-brand svg,.nav-brand img{width:26px;height:26px;flex:none;color:var(--accent)}

.nav-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-4);
  flex:1 1 auto;
  min-width:0;
}

.nav-list{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0;
  padding:0;
  list-style:none;
  min-width:0;
}
.nav-list > li{margin:0;min-width:0}

.nav-list a{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  min-height:44px;
  min-width:44px;
  padding:6px var(--sp-2);
  border-bottom:2px solid transparent;
  font-family:var(--font-display);
  font-weight:500;
  font-size:15px;
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--ink-2);
  text-decoration:none;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.nav-list a:hover{color:var(--accent)}
.nav-list a.is-active,
.nav-list a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* Spec hook under the label. Mono is correct here: it is a data caption. */
.nav-hint{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:var(--fs-hint);
  letter-spacing:.02em;
  line-height:1.4;
  color:var(--ink-2);
}
.nav-list a.is-active .nav-hint,
.nav-list a[aria-current="page"] .nav-hint{color:var(--accent)}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  flex:none;
  width:44px;
  height:44px;
  padding:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--ink);
  box-shadow:none;
}
.nav-toggle:hover{background:var(--surface-2)}
.nav-toggle svg{width:22px;height:22px}
/* The control carries both glyphs; CSS swaps them off aria-expanded. */
.nav-toggle svg[data-icon="close"]{display:none}
.nav-toggle[aria-expanded="true"] svg[data-icon="menu"]{display:none}
.nav-toggle[aria-expanded="true"] svg[data-icon="close"]{display:block}


/* ==========================================================================
   07 SITE FOOTER
   ========================================================================== */

.site-footer{
  background:var(--dark);
  color:var(--on-dark);
  padding-block:var(--sp-11) var(--sp-6);
  font-size:var(--fs-small);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;
  gap:var(--sp-7) var(--sp-6);
}
.footer-grid > *{min-width:0}

.footer-col{min-width:0}
.footer-col h2,
.footer-col h3{
  margin:0 0 var(--sp-3);
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--on-dark);
}
.footer-col p{color:var(--on-dark-2);max-width:34ch}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0}
.footer-col a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:var(--fs-small);
  line-height:1.4;
  color:var(--on-dark-2);
  text-decoration:none;
}
.footer-col a:hover,
.footer-col a:focus-visible{color:var(--on-dark);text-decoration:underline}

.site-footer .nav-brand{color:var(--on-dark)}
.site-footer .nav-brand:hover{color:var(--on-dark)}

/* The response promise. A direct-child .mono paragraph in a footer column is
   the one place this chip treatment applies — the contact address block uses
   <address> and <a>, so it is never caught by this selector. */
.footer-col > .mono{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  min-height:44px;
  margin-top:var(--sp-4);
  padding:10px var(--sp-4);
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-line);
  border-radius:var(--r);
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--accent-deep);
}

.footer-col address{font-style:normal;color:var(--on-dark-2);line-height:var(--lh-body-dark);margin-bottom:var(--sp-2)}
.footer-col .btn{margin-bottom:var(--sp-3)}
.footer-col > a:not(.nav-brand){display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration:none}
.footer-col > a:not(.nav-brand):hover{text-decoration:underline}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3) var(--sp-5);
  margin-top:var(--sp-9);
  padding-top:var(--sp-5);
  border-top:1px solid var(--on-dark-line);
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:.06em;
  color:var(--on-dark-2);
}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:var(--sp-5);list-style:none;margin:0;padding:0}
.footer-bottom li{margin:0}
.footer-bottom p{margin:0}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark-2);text-decoration:none}
.footer-bottom a:hover{color:var(--on-dark)}


/* ==========================================================================
   08 HERO — HOME + SUBPAGE
   Text zone is always the left 45%; the subject stays right.
   ========================================================================== */

.hero{position:relative;overflow:hidden;background:var(--base)}

.hero-media{
  position:absolute;
  inset:0;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--surface-2);
}
.hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:74% 50%;
}

.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  /* 48% text zone: a slightly wider column keeps the longest hero copy to a comfortable
     number of lines without changing the layout, the overlay direction or the image side. */
  grid-template-columns:48% 1fr;
  gap:var(--sp-6);
  align-items:center;
  padding-block:var(--sp-11);
}
.hero-copy{min-width:0}
.hero-copy > p,
.hero-copy .lead{max-width:46ch}
.hero-copy h1{margin-top:var(--sp-4)}
.hero-copy h1 em{font-style:normal;color:var(--accent)}

.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-top:var(--sp-6);
  padding:0;
  list-style:none;
}
.hero-stats > li,
.hero-stats > span{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin:0;
  padding:8px var(--sp-4);
  background:rgba(255,255,255,.82);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  line-height:1.4;
  color:var(--ink-2);
}

/* --- home hero: full-bleed, 520–680px --------------------------------- */
.hero--home{min-height:clamp(520px,62vh,680px);display:flex;align-items:center}
.hero--home .hero-inner{width:100%}
.hero--home .hero-scrim{
  background:linear-gradient(90deg,
    rgba(242,245,247,.97) 0%,
    rgba(242,245,247,.90) 33%,
    rgba(242,245,247,.03) 68%);
}
.hero--home .hero-copy h1{font-size:clamp(38px,5vw,60px);line-height:var(--lh-h1)}

/* --- subpage hero: identical on all 30 pages, only copy + image change -- */
.sub-hero,
.hero--sub{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  /* min-height, not a fixed height: the text zone is only 45% of the container, so a longer h1 or
     lead needs more vertical room. A fixed height clipped the copy at the top on the pages with the
     longest hero text. Every subpage hero still shares one structure, text zone, overlay direction
     and minimum height — which is what makes the site's subpage heroes recognisably the same. */
  min-height:352px;
  background:var(--base);
  border-bottom:1px solid var(--line);
}
.sub-hero .hero-media,
.hero--sub .hero-media{aspect-ratio:3/2}
.sub-hero .hero-inner,
.hero--sub .hero-inner{width:100%;padding-block:var(--sp-8)}
.sub-hero .hero-scrim,
.hero--sub .hero-scrim{
  background:linear-gradient(90deg,
    rgba(242,245,247,.96) 0%,
    rgba(242,245,247,.86) 34%,
    rgba(242,245,247,.04) 70%);
}
/* The 45% text zone is set on .hero-inner's first grid column. This element
   must therefore fill that column — giving it a width percentage of its own
   would shrink it twice. */
.sub-hero-copy{width:100%;min-width:0}
.sub-hero-copy h1{margin-top:var(--sp-3);font-size:clamp(30px,3.6vw,46px)}
.sub-hero-copy > p,
.sub-hero-copy .lead{margin-top:var(--sp-3);max-width:46ch;color:var(--ink)}


/* ==========================================================================
   09 FLOW RAIL — the tape-and-reel motif as a left-to-right process band
   Markup per step: <span> index · <strong> name · <p> detail
   ========================================================================== */

.flow-rail{
  position:relative;
  display:flex;
  align-items:stretch;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  margin:0;
  padding:0;
  list-style:none;
}
.flow-rail::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:2px;
  background:var(--accent);
  z-index:1;
}
.flow-rail > li{min-width:0;margin:0;display:flex}

.flow-step{
  flex:1 1 0;
  min-width:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--sp-1);
  padding:var(--sp-5) var(--sp-4);
  border-inline-end:1px solid var(--line);
  min-width:0;
}
.flow-rail > li:last-child .flow-step,
.flow-step:last-child{border-inline-end:0}
.flow-step > *{margin:0}
.flow-step span{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--accent);
}
.flow-step strong{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:18px;
  line-height:var(--lh-h3);
  color:var(--ink);
}
.flow-step p{
  font-size:var(--fs-meta);
  line-height:var(--lh-body);
  color:var(--ink-2);
}


/* ==========================================================================
   10 STAT BAND — white panels, 1px frame, mono figures
   ========================================================================== */

.stat-band{
  display:grid;
  /* Three columns, not four: a six-stat band (the common case) then fills two complete rows,
     instead of leaving the second row half empty. Any band whose count is not a multiple of three
     is laid out to avoid an orphan row by its page. */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin:0;
  padding:0;
  list-style:none;
}
.stat-band > *{min-width:0;margin:0}

.stat{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:var(--sp-5);
  background:var(--surface);
  min-width:0;
}
.stat > *{margin:0}
.stat svg{width:22px;height:22px;color:var(--accent);margin-bottom:var(--sp-1)}

.stat-value{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--fs-data);
  line-height:var(--lh-data);
  letter-spacing:-.01em;
  color:var(--ink);
}
.stat-key{
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:var(--lh-lead);
  color:var(--ink-2);
}
.stat p{font-size:var(--fs-meta);color:var(--ink-2);line-height:var(--lh-body)}

.section--dark .stat-band{background:var(--on-dark-line);border-color:var(--on-dark-line)}
.section--dark .stat{background:rgba(255,255,255,.05)}
.section--dark .stat-value{color:var(--on-dark)}
.section--dark .stat-key,
.section--dark .stat p{color:var(--on-dark-2)}


/* ==========================================================================
   11 CARD GRID
   ========================================================================== */

.card-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(3,minmax(0,1fr))}
.card-grid > *{min-width:0}
/* Combination support: .card-grid.grid-2 / .card-grid.grid-4 */
.card-grid.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card > svg{width:24px;height:24px;color:var(--accent);margin:var(--sp-5) var(--sp-5) 0}

.card-media{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--surface-2);
}
.card-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.card-body{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  flex:1 1 auto;
  min-width:0;
  padding:var(--sp-5);
}
.card-body > *{margin:0}
.card-body h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.card-body p{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink-2)}

.card-kicker{
  display:block;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--fs-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:var(--lh-lead);
  color:var(--accent);
}
.card-body h3 + .card-kicker{margin-top:calc(var(--sp-1) * -1)}

.card-meta{
  margin-top:auto;
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  line-height:var(--lh-body);
  color:var(--ink-2);
}
.card-meta a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);text-decoration:none}
.card-meta a:hover{text-decoration:underline}

.section--dark .card{background:rgba(255,255,255,.05);border-color:var(--on-dark-line);box-shadow:none;color:var(--on-dark)}
.section--dark .card-body p{color:var(--on-dark-2)}
.section--dark .card-meta{border-color:var(--on-dark-line);color:var(--on-dark-2)}


/* ==========================================================================
   12 SPLIT — image and text column are always exactly the same height
   ========================================================================== */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.split > *{min-width:0}

.split-media{
  position:relative;
  aspect-ratio:3/2;
  /* width:100% makes the inline size definite, so the declared aspect-ratio
     can never drive the grid column wider than its 1fr track. */
  width:100%;
  min-height:420px;
  overflow:hidden;
  background:var(--surface-2);
}
.split-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.split-media figcaption{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  z-index:2;
  margin:0;
  padding:var(--sp-3) var(--sp-4);
  background:rgba(20,26,30,.72);
  color:var(--on-dark);
  line-height:var(--lh-body-dark);
}

.split-body{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  justify-content:center;
  min-width:0;
  padding:var(--sp-9) var(--sp-8);
}
.split-body > *{margin:0}
.split-body .lead{max-width:52ch}
.split-body .spec-row{grid-template-columns:minmax(0,1fr) minmax(0,auto)}


/* ==========================================================================
   13 SPEC TABLE + SPEC ROW
   ========================================================================== */

.table-wrap > .spec-table{min-width:640px}

.spec-table{
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  border-collapse:separate;
  border-spacing:0;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.spec-table caption{
  caption-side:top;
  padding:0 0 var(--sp-3);
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:left;
  color:var(--ink-2);
}
.spec-table th,
.spec-table td{
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  font-size:var(--fs-small);
  line-height:var(--lh-body);
  min-width:0;
}
.spec-table thead th{
  background:var(--surface-3);
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-small);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.spec-table tbody th{
  width:250px;
  background:var(--surface-3);
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h4);
  line-height:var(--lh-h3);
  color:var(--ink);
}
.spec-table tbody th small{
  display:block;
  margin-top:var(--sp-1);
  font-family:var(--font-mono);
  font-weight:400;
  font-size:var(--fs-eyebrow);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.spec-table td{color:var(--ink);word-break:break-word}
.spec-table td.mono,
.spec-table .mono{font-size:var(--fs-mono);color:var(--ink)}
.spec-table tr:last-child th,
.spec-table tr:last-child td{border-bottom:0}

/* Definition-style parameter rows, used inside .split-body or .stack */
.spec-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-4);
  align-items:baseline;
  padding-block:var(--sp-3);
  border-bottom:1px solid var(--line);
}
.spec-row:last-child{border-bottom:0}
.spec-row > *{margin:0;min-width:0}
.spec-row dt,
.spec-row > :first-child{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink-2)}
.spec-row dd,
.spec-row > :last-child{
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  line-height:var(--lh-body);
  text-align:right;
  color:var(--ink);
}

.section--dark .spec-row{border-color:var(--on-dark-line)}
.section--dark .spec-row dt,
.section--dark .spec-row > :first-child{color:var(--on-dark-2)}
.section--dark .spec-row dd,
.section--dark .spec-row > :last-child{color:var(--on-dark)}
.section--dark .spec-table{background:rgba(255,255,255,.05);border-color:var(--on-dark-line);box-shadow:none}
.section--dark .spec-table th,
.section--dark .spec-table td{border-color:var(--on-dark-line)}
.section--dark .spec-table thead th,
.section--dark .spec-table tbody th{background:rgba(255,255,255,.09);color:var(--on-dark)}
.section--dark .spec-table td,
.section--dark .spec-table tbody th small{color:var(--on-dark-2)}


/* ==========================================================================
   14 DATA SLAB — dark parameter panel (original block, from the motif)
   ========================================================================== */

.data-slab{
  background:var(--dark);
  color:var(--on-dark);
  border:1px solid var(--dark);
  border-radius:var(--r);
  padding:var(--sp-7);
  min-width:0;
}
.data-slab h3,
.data-slab h4{color:var(--on-dark);margin-bottom:var(--sp-4)}
.data-slab .eyebrow{color:var(--on-dark-2)}
.data-slab > *:last-child{margin-bottom:0}
.data-slab .lead,
.data-slab p{color:var(--on-dark-2)}

.slab-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:var(--sp-4);
  align-items:baseline;
  padding-block:var(--sp-3);
  border-bottom:1px solid var(--on-dark-line);
}
.slab-row:last-child{border-bottom:0}
.slab-row > *{margin:0;min-width:0}
.slab-row > :first-child{font-size:var(--fs-small);color:var(--on-dark-2);line-height:var(--lh-body-dark)}
.slab-row > :last-child{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  line-height:var(--lh-body-dark);
  text-align:right;
  color:var(--on-dark);
}


/* ==========================================================================
   15 CERT WALL — credential badge cards. NEVER print a certificate number.
   ========================================================================== */

.cert-wall{display:grid;gap:var(--sp-4);grid-template-columns:repeat(3,minmax(0,1fr))}
.cert-wall > *{min-width:0}

.cert-badge{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  min-width:0;
  padding:var(--sp-5);
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.cert-badge > *{margin:0}
.cert-badge svg{width:26px;height:26px;color:var(--accent);margin-bottom:var(--sp-1)}
.cert-badge strong,
.cert-badge h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  line-height:var(--lh-h3);
  color:var(--ink);
}
.cert-badge p{font-size:var(--fs-meta);line-height:var(--lh-body);color:var(--ink-2)}
.cert-badge .mono,
.cert-badge span.mono{
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:var(--lh-lead);
  color:var(--ink-2);
}
.section--dark .cert-badge{background:rgba(255,255,255,.05);border-color:var(--on-dark-line);box-shadow:none}
.section--dark .cert-badge strong,
.section--dark .cert-badge h3{color:var(--on-dark)}
.section--dark .cert-badge p,
.section--dark .cert-badge .mono{color:var(--on-dark-2)}


/* ==========================================================================
   16 PROCESS STEPS — 6 steps always render 3 columns x 2 rows
   ========================================================================== */

.process-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-4);
  counter-reset:ps;
}
.process-steps > *{min-width:0}

.step{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  min-width:0;
  padding:var(--sp-5);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  counter-increment:ps;
}
.step::before{
  content:counter(ps,decimal-leading-zero);
  display:block;
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--fs-eyebrow);
  letter-spacing:.16em;
  line-height:var(--lh-lead);
  color:var(--accent);
}
.step > *{margin:0}
.step h3,
.step strong{
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  line-height:var(--lh-h3);
  color:var(--ink);
}
.step p{font-size:var(--fs-meta);line-height:var(--lh-body);color:var(--ink-2)}
.section--dark .step{background:rgba(255,255,255,.05);border-color:var(--on-dark-line);box-shadow:none}
.section--dark .step::before{border-color:var(--on-dark-line)}


/* ==========================================================================
   17 FAQ LIST — native <details>/<summary>, mutually exclusive via
   <details name="...">. No third-party JS and no inline script required.
   Markup: <details class="faq-item"><summary class="faq-q">…</summary>
           <div class="faq-a">…</div></details>
   ========================================================================== */

.faq-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  margin:0;
  padding:0;
  list-style:none;
}

.faq-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.faq-item[open]{border-color:var(--line-2)}

.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  min-height:56px;
  padding:var(--sp-4) var(--sp-5);
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  line-height:var(--lh-h3);
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:""}
.faq-q:hover{color:var(--accent)}
.faq-q svg{
  width:20px;height:20px;flex:none;
  color:var(--accent);
  transition:transform .2s var(--ease);
}
.faq-item[open] .faq-q svg{transform:rotate(180deg)}

.faq-a{
  padding:0 var(--sp-5) var(--sp-5);
  border-top:1px solid var(--line);
  padding-top:var(--sp-4);
  color:var(--ink-2);
  font-size:var(--fs-small);
  line-height:var(--lh-body);
}
.faq-a > *:last-child{margin-bottom:0}
.faq-a .mono{color:var(--ink-2)}


/* ==========================================================================
   18 INDUSTRY STRIP
   ========================================================================== */

.industry-strip{display:grid;gap:var(--sp-4);grid-template-columns:repeat(3,minmax(0,1fr))}
.industry-strip > *{min-width:0}

.industry-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:var(--sp-2);
  min-width:0;
  min-height:280px;
  padding:var(--sp-5);
  overflow:hidden;
  background:var(--dark);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  color:var(--on-dark);
  text-decoration:none;
}
.industry-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.industry-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(20,26,30,.42) 0%,rgba(20,26,30,.90) 100%);
  pointer-events:none;
}
.industry-card > *{position:relative;z-index:2;margin:0}
.industry-card h3,
.industry-card strong{
  font-family:var(--font-display);
  font-weight:600;
  font-size:21px;
  line-height:var(--lh-h3);
  color:var(--on-dark);
}
.industry-card p{font-size:var(--fs-meta);line-height:var(--lh-body-dark);color:var(--on-dark-2)}
.industry-card .mono,
.industry-card span.mono{
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:var(--lh-lead);
  color:var(--on-dark-2);
}
.industry-card:hover{color:var(--on-dark);border-color:var(--line-2)}
.industry-card:hover h3{text-decoration:underline;text-underline-offset:3px}
.industry-card svg{width:22px;height:22px;color:var(--on-dark)}


/* ==========================================================================
   19 CASE CARD — anonymised case evidence: type + region + constraint + result
   ========================================================================== */

.case-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.case-card .card-media{aspect-ratio:3/2}

.case-body{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  flex:1 1 auto;
  min-width:0;
  padding:var(--sp-5);
}
.case-body > *{margin:0}
.case-body h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.case-body h3 + p{margin-top:calc(var(--sp-1) * -1)}
.case-body p{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink-2)}
.case-body dl{margin:0}
.case-body .spec-row{margin-top:auto}
.case-body > .mono:last-child{
  margin-top:auto;
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  color:var(--ink-2);
}
.section--dark .case-card{background:rgba(255,255,255,.05);border-color:var(--on-dark-line);box-shadow:none}
.section--dark .case-body p,
.section--dark .case-body > .mono:last-child{color:var(--on-dark-2)}


/* ==========================================================================
   20 VERIFICATION STRIP — "here is how you check this yourself"
   ========================================================================== */

.verification-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4) var(--sp-6);
  padding:var(--sp-5) var(--sp-6);
  background:var(--surface);
  border:1px solid var(--line);
  border-inline-start:3px solid var(--accent);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  min-width:0;
}
.verification-strip > *{margin:0;min-width:0}
.verification-strip h3,
.verification-strip strong{
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  line-height:var(--lh-h3);
}
.verification-strip p{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--ink-2);max-width:62ch}
.verification-strip svg{width:24px;height:24px;color:var(--accent);flex:none}


/* ==========================================================================
   21 CTA BAND — at most one per page, at the foot of the page
   ========================================================================== */

.cta-band{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border-block:1px solid var(--line);
}
.cta-band .hero-media{aspect-ratio:3/2}
.cta-band .hero-scrim{
  background:linear-gradient(90deg,
    rgba(242,245,247,.97) 0%,
    rgba(242,245,247,.90) 40%,
    rgba(242,245,247,.10) 100%);
}
.cta-band-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:var(--sp-6) var(--sp-9);
  align-items:center;
  padding-block:var(--sp-10);
  min-width:0;
}
.cta-band-inner > *{min-width:0}
.cta-band h2{margin-bottom:var(--sp-4)}
.cta-band p{color:var(--ink-2);max-width:54ch}
.cta-band .lead{max-width:56ch}

.cta-band .stack{
  padding:var(--sp-5);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  gap:var(--sp-4);
}
/* Same promise chip as the footer: a direct-child .mono paragraph. */
.cta-band .stack > .mono{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  min-height:44px;
  padding:10px var(--sp-4);
  background:var(--accent-soft);
  border:1px solid var(--accent-soft-line);
  border-radius:var(--r);
  font-size:var(--fs-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-deep);
}
.cta-band .stack > p:not(.mono){font-size:var(--fs-meta);color:var(--ink-2);line-height:var(--lh-body)}
.cta-band .stack > .btn,
.cta-band .btn{width:100%}

.section--dark .cta-band,
.cta-band.section--dark{background:var(--dark);border-color:var(--on-dark-line)}


/* ==========================================================================
   22 INQUIRY MODAL — the only conversion action on the site
   ========================================================================== */

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-5);
  background:var(--scrim);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.modal-overlay[hidden]{display:none}

.modal-dialog{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  width:100%;
  max-width:760px;
  max-height:92vh;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:0 1px 3px rgba(20,26,30,.07);
}
.modal-dialog > *{min-width:0}

.modal-image-panel{
  position:relative;
  aspect-ratio:3/2;
  /* width:100% makes the inline size definite, so the declared aspect-ratio
     can never make this panel wider than its 1fr grid column. Without it the
     panel paints over the form column (it is position:relative, so it wins
     the paint order against the static form panel). */
  width:100%;
  min-height:420px;
  overflow:hidden;
  background:var(--dark);
}
.modal-image-panel img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:56% 50%;
}
.modal-image-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(20,26,30,.55) 0%,rgba(20,26,30,.90) 100%);
}
.modal-image-text{
  position:absolute;
  z-index:2;
  inset-block-end:var(--sp-6);
  inset-inline:var(--sp-6);
  color:var(--on-dark);
}
.modal-image-text .nav-brand,
.modal-image-text strong{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.2;
  color:var(--on-dark);
}
.modal-image-text p{
  margin-top:var(--sp-3);
  font-size:var(--fs-meta);
  line-height:var(--lh-body-dark);
  color:var(--on-dark-2);
}
.modal-image-text .mono{
  display:block;
  margin-top:var(--sp-3);
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:var(--lh-body-dark);
  color:var(--on-dark-2);
}

.modal-form-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--sp-3);
  min-width:0;
  padding:var(--sp-6) var(--sp-6) var(--sp-5);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.modal-form-panel h2{
  margin:0;
  font-size:24px;
  line-height:var(--lh-h3);
}
.modal-form-panel > p{
  margin:0 0 var(--sp-1);
  font-size:var(--fs-meta);
  line-height:var(--lh-body);
  color:var(--ink-2);
}
.modal-form-panel form{display:flex;flex-direction:column;gap:var(--sp-3);margin:0}
.modal-form-panel .btn{width:100%;margin-top:var(--sp-1)}

.modal-close{
  position:absolute;
  inset-block-start:var(--sp-3);
  inset-inline-end:var(--sp-3);
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--ink);
  box-shadow:none;
}
.modal-close:hover{background:var(--surface-2);border-color:var(--line-2)}
.modal-close svg{width:20px;height:20px}

body.is-modal-open{overflow:hidden}


/* ==========================================================================
   23 FORM FIELDS
   ========================================================================== */

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.field label{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--fs-eyebrow);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:var(--lh-lead);
  color:var(--ink-2);
}
.field input,
.field select,
.field textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:44px;
  padding:11px var(--sp-3);
  background:var(--base);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  font-family:var(--font-body);
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--ink);
  box-shadow:none;
}
.field textarea{min-height:88px;resize:vertical}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-2);opacity:1}
.field input:hover,
.field select:hover,
.field textarea:hover{border-color:var(--ink-3)}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}

.field-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-3);
}
.field-row > *{min-width:0}

/* Honeypot-free, no inline JS: the submit button is the only control. */
.modal-form-panel .btn[type="submit"]{border:1px solid var(--accent)}


/* ==========================================================================
   24 SCROLL REVEAL
   .js-reveal is added to <html> by reveal.js before anything is hidden, so
   a no-JS visitor sees the full page. Reduced motion is honoured here and
   again in §26.
   ========================================================================== */

.js-reveal [data-reveal]{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity var(--reveal-dur) var(--ease),transform var(--reveal-dur) var(--ease);
  will-change:opacity,transform;
}
.js-reveal [data-reveal].is-visible{
  opacity:1;
  transform:none;
  will-change:auto;
}


/* ==========================================================================
   25 RESPONSIVE
   ========================================================================== */

/* --- 1200px: the eight-item nav no longer fits beside the spec hooks ----- */
@media (max-width:1200px){
  .nav-toggle{display:inline-flex}
  .nav-menu{
    display:none;
    position:absolute;
    inset-block-start:100%;
    inset-inline:0;
    z-index:120;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:var(--sp-4);
    max-height:calc(100vh - 72px);
    overflow-y:auto;
    padding:var(--sp-4) var(--gutter) var(--sp-6);
    background:var(--surface);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .nav-menu.is-open{display:flex}
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
  }
  .nav-list a{
    align-items:flex-start;
    min-height:56px;
    padding:var(--sp-3) 0;
    border-bottom:1px solid var(--line);
    border-inline-start:2px solid transparent;
    font-size:18px;
  }
  .nav-list a.is-active,
  .nav-list a[aria-current="page"]{
    border-bottom-color:var(--line);
    border-inline-start-color:var(--accent);
    padding-inline-start:var(--sp-3);
  }
  .nav-hint{font-size:var(--fs-eyebrow);white-space:normal;overflow:visible;text-overflow:clip}
  .nav-menu .btn{width:100%}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cta-band-inner{grid-template-columns:1fr;gap:var(--sp-6)}
}

/* --- 1024px: three- and four-up grids fall to two columns ---------------- */
@media (max-width:1024px){
  :root{
    --section-y:80px;
    --section-y-tight:64px;
  }
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-grid,.card-grid.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cert-wall,.industry-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-inner,.sub-hero .hero-inner,.hero--sub .hero-inner{padding-block:var(--sp-9)}
  .sub-hero,.hero--sub{min-height:300px}
  .split-body{padding:var(--sp-8) var(--sp-6)}
  .nav-hint{font-size:var(--fs-eyebrow)}
}

/* --- 900px --------------------------------------------------------------- */
@media (max-width:900px){
  :root{
    --section-y:64px;
    --section-y-tight:56px;
  }
  .grid-2,.grid-3,.grid-4,.grid,.card-grid,.card-grid.grid-2,.card-grid.grid-4,
  .cert-wall,.industry-strip,.process-steps,.stat-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .split-media{min-height:0}
  .split-body{padding:var(--sp-7) var(--sp-5)}
  .hero-inner{grid-template-columns:1fr;padding-block:var(--sp-8)}
  .hero-copy > p,.hero-copy .lead{max-width:60ch}
  .hero--home{min-height:520px}
  .hero--home .hero-scrim{
    background:linear-gradient(180deg,
      rgba(242,245,247,.97) 0%,
      rgba(242,245,247,.90) 52%,
      rgba(242,245,247,.55) 100%);
  }
  .hero-media img{object-position:70% 50%}
  .sub-hero,.hero--sub{height:auto;min-height:280px;padding-block:var(--sp-8)}
  .sub-hero-copy{width:62%}
  .sub-hero .hero-scrim,
  .hero--sub .hero-scrim{
    background:linear-gradient(90deg,
      rgba(242,245,247,.97) 0%,
      rgba(242,245,247,.92) 60%,
      rgba(242,245,247,.58) 100%);
  }
  .modal-dialog{grid-template-columns:1fr;max-height:92vh}
  .modal-image-panel{min-height:220px;aspect-ratio:3/2}
  .modal-image-text{inset-block-end:var(--sp-4);inset-inline:var(--sp-4)}
  .data-slab{padding:var(--sp-6) var(--sp-5)}
  .flow-rail{flex-wrap:wrap}
  .flow-step{flex:1 1 40%}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
  .footer-bottom{justify-content:flex-start}
}

/* --- 640px: everything collapses to a single column ---------------------- */
@media (max-width:640px){
  :root{
    --gutter:20px;         /* mobile side padding per the design language   */
    --section-y:56px;      /* >= 48px floor                                 */
    --section-y-tight:48px;
    --fs-h1:clamp(30px,8.4vw,38px);
    --fs-h2:clamp(24px,7vw,30px);
    --fs-h3:19px;
    --fs-data:clamp(20px,6vw,24px);
  }
  .grid,.grid-2,.grid-3,.grid-4,
  .card-grid,.card-grid.grid-2,.card-grid.grid-4,
  .cert-wall,.industry-strip,.process-steps,.stat-band,
  .split,.footer-grid,.field-row,.cta-band-inner,
  .modal-dialog{grid-template-columns:1fr}

  .flow-rail{flex-wrap:wrap}
  .flow-step{flex:1 1 100%;border-inline-end:0;border-bottom:1px solid var(--line)}
  .flow-rail > li:last-child .flow-step,
  .flow-step:last-child{border-bottom:0}

  .hero-inner,.sub-hero .hero-inner,.hero--sub .hero-inner{padding-block:var(--sp-8)}
  .sub-hero-copy{width:100%}
  .sub-hero-copy > p,.sub-hero-copy .lead{max-width:none}
  .hero-copy > p,.hero-copy .lead{max-width:none}
  .hero--home{min-height:0}
  .hero--home .hero-scrim{
    background:linear-gradient(180deg,
      rgba(242,245,247,.98) 0%,
      rgba(242,245,247,.94) 58%,
      rgba(242,245,247,.72) 100%);
  }
  .hero-stats > li,.hero-stats > span{font-size:var(--fs-meta)}

  .split-media{min-height:0;aspect-ratio:3/2}
  .split-body{padding:var(--sp-5) var(--sp-4)}
  .data-slab{padding:var(--sp-5) var(--sp-4)}
  .verification-strip{padding:var(--sp-4);border-inline-start-width:3px}
  .cta-band .stack{padding:var(--sp-4)}

  /* Stacked spec tables: label above value, no horizontal scroll needed. */
  .table-wrap > .spec-table{min-width:0}
  .spec-table tbody th{width:auto;display:block;border-bottom:0;padding-bottom:var(--sp-1)}
  .spec-table tbody td{display:block;border-bottom:1px solid var(--line);padding-top:var(--sp-1)}
  .spec-table tbody tr:last-child td{border-bottom:0}
  .spec-row,.slab-row{grid-template-columns:1fr;gap:var(--sp-1)}
  .spec-row dd,.spec-row > :last-child,
  .slab-row > :last-child{text-align:left}

  .modal-overlay{padding:0;align-items:flex-start}
  .modal-dialog{
    max-width:none;
    max-height:none;
    min-height:100%;
    border:0;
    border-radius:0;
  }
  .modal-image-panel{display:none}   /* left panel is dropped below 640px */
  .modal-form-panel{padding:var(--sp-6) var(--sp-4) var(--sp-7)}
  .modal-close{
    inset-block-start:var(--sp-2);
    inset-inline-end:var(--sp-2);
    position:fixed;
  }

  /* MOBILE TYPE FLOOR — nothing on a 640px screen renders below 15px.
     !important is deliberate: this is a hard accessibility floor, not a style
     preference. Only selectors whose base size is under 15px are listed. */
  .eyebrow,.mono,.nav-hint,.card-kicker,.card-meta,.card-meta a,
  .stat-key,.stat p,.step p,.step::before,
  .cert-badge p,.cert-badge .mono,
  .industry-card p,.industry-card .mono,
  .case-body > .mono:last-child,
  .spec-table caption,.spec-table tbody th small,
  .spec-table td.mono,.spec-table .mono,
  .spec-row > *,.slab-row > *,
  .field label,.flow-step p,.flow-step span,
  .hero-stats > li,.hero-stats > span,.split-media figcaption,
  .footer-bottom,.footer-col > .mono,
  .modal-form-panel > p,.modal-image-text p,.modal-image-text .mono,
  .cta-band .stack > .mono,.cta-band .stack > p:not(.mono){
    font-size:15px !important;
  }
  .eyebrow,.card-kicker{letter-spacing:.12em}
  .stat-key,.footer-bottom{letter-spacing:.06em}
  .step::before,.flow-step span{letter-spacing:.1em}
  .btn{min-height:48px;padding-inline:var(--sp-4)}
}


/* ==========================================================================
   26 REDUCED MOTION / PRINT
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .js-reveal [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@media print{
  .site-header,.modal-overlay,.cta-band{display:none}
  body{background:#FFFFFF;color:#141A1E}
  .section{padding-block:24px}
  a[href^="/"]::after{content:" (voltcircuit.com" attr(href) ")";font-size:12px}
}