/* ==========================================================================
   EMS-TRADE · site.css — the shared component layer for every page.
   FROZEN with design-tokens.css. Derived from `source/style-cards/card-5.html`
   ("Card 5 · NETWORK", rev. B). Load AFTER design-tokens.css:

     <link rel="stylesheet" href="/assets/design-tokens.css">
     <link rel="stylesheet" href="/assets/site.css">

   Naming rule: where the card has a component name, that name is kept
   (.site-hd, .site-nav, .btn, .statement, .site-sec, .sec-head, .pcat,
   .diagram-scroll, .site-foot ...). Where the card's markup was page-specific
   (.cta, .ctr, .svc, .ind, .grp, .pfig, .ibf, .preg, .rail-*, .num-*, .trust-*,
   .prod-*), this file exposes ONE generic primitive for it and this file is the
   authority for it. Anything a single page needs beyond this layer stays in
   that page's own <style> block.

   ---------------------------------------------------------------------------
   CLASS INDEX  (page authors: everything you may use, and nothing else)
   ---------------------------------------------------------------------------
   reset ......... box-sizing, body, img, link, focus ring, .skip-link
   utilities ..... .wrap / .site-wrap · .visually-hidden / .sr · .mono · .num
                   .hide-sm · .rule (–-ink, --dark)
   ranks ......... .eyebrow (alias .rk-eyebrow) · .statement (--xl --l --m)
                   .rk-lead · .rk-cap · .sec-no · .node-dot · .node-ring
   reveal ........ [data-reveal] (+ --d stagger, --rise), [data-draw], [data-rise]
   buttons ....... .btn .btn-acc .btn-ink .btn-ghost .btn-ghost-d .btn-sm
                   .btn-row
   header ........ .site-hd .site-hd-in .site-brand .site-hd-desc .site-hd-right
                   .site-reg .lockup-c
   nav ........... .site-nav .site-nav-in .site-nav-links .site-nav-cta
                   .site-menu .site-menu-panel
   status strip .. .site-status .site-status-in .site-status-r .pulse
   hero .......... .hero .hero-in .hero > .scrim
   section ....... .site-sec (.tight .dark) .sec-head .sec-head-row .meta
                   .grid-bg .grid-bg-l .grid-bg-d
   image card .... .card-grid[data-cols=2|3|4] (.card-grid--rule) · .pcat
                   .pcat-im .pcat-no .pcat-b .pcat-q .pcat-s .pcat-by
                   .tag-row (.tag-row--dark) · .tag
   figure ........ .figure (--bare --wide --dark) .figure .im .cl .ct
                   .figure-grid[data-cols=2|3]
   split ......... .split (--wide --flip) .split-bd  — columns stretch equal
   stat row ...... .stat-row > .wrap · .stat (--record --rail) .stat .k .v .n
   register ...... .register .reg-row .no .spec .who .site .arw · .data-table
   labels ........ .lgrid (--2 --3) .lrow .k .h .v   — replaces prose lists
   diagram ....... .diagram-scroll .matrix-scroll .diagram-hint .legend
                   .cov .cov-row .ticks .cov-note
                   .mx-* — the capability matrix (shapes, text ranks, key)
   capture band .. .capture .capture-in .feat .feat-im .feat-scrim
                   .capture-promise .capture-alt .inquiry-form .field
                   .field--light .form-done
   modal ......... .modal .modal-scrim .modal-dialog .modal-image-panel
                   .modal-form-panel .modal-close .modal-foot
                   — .modal-dialog is the two-column split the workflow
                   contract requires: picture left, form right.
   footer ........ .site-foot .foot-grid .foot-brand .foot-contact .foot-col
                   .foot-reg .foot-bar
   note .......... .note
   ---------------------------------------------------------------------------
   Content rules enforced by these components (source/docs/image-text-policy.md):
   a section always carries an image; a grid item always has its own image; a
   card never contains a paragraph (use .tag-row / .pcat-q / .pcat-s); a
   register is never a section on its own — pair it with .figure in a .split.
   ========================================================================== */

/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--tx-body);
  line-height:1.55;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--hair);margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px}
:target,.site-sec,.hero,.capture{scroll-margin-top:24px}

/* skip link — first focusable element on every page */
.skip-link{
  position:absolute;left:12px;top:-64px;z-index:200;
  background:var(--ink);color:#fff;border-radius:var(--r-xs);
  font-family:var(--mono);font-size:var(--cap);letter-spacing:.1em;
  text-transform:uppercase;padding:11px 15px;
  transition:top var(--t) var(--e);
}
.skip-link:focus{top:12px}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.mono{
  font-family:var(--mono);
  font-size:var(--eh);
  font-weight:400;
  line-height:1.4;
  letter-spacing:.085em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.wrap,.site-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.visually-hidden,.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.hide-sm{display:inline}
@media (max-width:980px){.hide-sm{display:none}}
.rule{border:0;border-top:1px solid var(--hair)}
.rule--ink{border-top-color:var(--ink)}
.rule--dark{border-top-color:var(--hair-dark)}
.note{
  margin-top:22px;padding:14px 16px;background:var(--ground);
  border:1px solid var(--hair);border-radius:var(--r-sm);
  display:flex;gap:12px;align-items:flex-start;
}
.note .node-dot{margin-top:6px}
.note p{font-size:13px;color:var(--muted);line-height:1.55}

/* ==========================================================================
   TYPOGRAPHIC RANKS — stated once, reused everywhere
   ========================================================================== */
.eyebrow,.rk-eyebrow{
  display:flex;align-items:center;gap:10px;color:var(--muted);
  font-family:var(--mono);font-size:var(--eh);letter-spacing:.13em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.rk-lead{
  font-size:var(--tx-lead);line-height:1.48;letter-spacing:-.012em;
  color:var(--ink-2);font-weight:400;
}
.rk-cap{
  font-family:var(--mono);font-size:var(--cap);letter-spacing:.085em;
  text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;
}
/* statement — the organisation speaking, not a feature name */
.statement{
  font-weight:500;letter-spacing:-.04em;line-height:1.03;color:var(--ink);
  text-wrap:balance;
}
.statement em{font-style:normal;color:var(--acc-ink)}
.statement--xl{font-size:var(--st-xl);letter-spacing:-.048em;line-height:1}
.statement--l{font-size:var(--st-l)}
.statement--m{font-size:var(--st-m);letter-spacing:-.034em;line-height:1.07}
/* section index — the numbered register that runs down the page */
.sec-no{
  font-family:var(--mono);font-size:var(--cap);letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc-ink);font-variant-numeric:tabular-nums;
}
/* the signature node glyph, used as a bullet everywhere */
.node-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--acc);vertical-align:middle;flex:none;
}
.node-ring{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  border:1.5px solid var(--acc);vertical-align:middle;flex:none;
}
.eyebrow .node-dot{box-shadow:0 0 0 3px rgba(0,166,166,.14)}

/* ==========================================================================
   REVEAL — transform-only and JS-independent.
   There is no opacity:0 state to get stuck in: if the script never runs or
   fails, the page is simply already in its final state. The script can only
   ever add a small upward settle. `translate` scales with font-size, so a 92px
   statement moves further than a caption — the motion reads as weight.
   Stagger: style="--d:60" (ms). Distance: --rise (em, default .55).
   ========================================================================== */
[data-reveal]{
  transform:translateY(calc(var(--rise,.55) * 1em));
  transition:transform .62s var(--e);
  transition-delay:calc(var(--d,0) * 1ms);
}
[data-reveal].in{transform:none}

/* Diagram draw-on. Same contract: the base state below is the FINISHED
   drawing. `--dash` must be longer than the path it draws (default 1000 user
   units); the base dashoffset is 0, so with JS off the stroke reads solid.
   Only html.anim — set by app.js when motion is welcome — offsets it. */
[data-draw]{stroke-dasharray:var(--dash,1000)}
[data-rise]{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  html.anim [data-draw]{
    stroke-dashoffset:var(--dash,1000);
    transition:stroke-dashoffset .9s var(--e);
    transition-delay:calc(var(--dl,0) * 1ms);
  }
  html.anim [data-reveal].in [data-draw]{stroke-dashoffset:0}
  html.anim [data-rise]{
    transform:translateY(3px);
    transition:transform .6s var(--e);
    transition-delay:calc(var(--dl,0) * 1ms);
  }
  html.anim [data-reveal].in [data-rise]{transform:none}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{transform:none;transition:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:-.01em;
  padding:11px 18px;border-radius:var(--r-sm);border:1px solid transparent;
  transition:background var(--t-fast) var(--e),border-color var(--t-fast) var(--e),
             color var(--t-fast) var(--e),transform var(--t-fast) var(--e),box-shadow var(--t-fast) var(--e);
  cursor:pointer;white-space:nowrap;
}
.btn svg{flex:none}
.btn-acc{background:var(--acc-deep);color:#fff;box-shadow:var(--sh-1)}
.btn-acc:hover{background:#006A69;transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn-acc:active{transform:translateY(0)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:var(--sh-1)}
.btn-ink:hover{background:#26262B;transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--hair-2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-ghost-d{background:transparent;color:var(--on-dark);border-color:var(--hair-dark-2)}
.btn-ghost-d:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04)}
.btn-sm{padding:8px 13px;font-size:13px}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* ==========================================================================
   HEADER — a letterhead, not a menu bar.
   Three registers held on one hairline: left the mark and the trading name;
   centre what the organisation is, in words and in marks; right the
   registration record and the single conversion action.
   ========================================================================== */
.site-hd{background:var(--surface);border-bottom:1px solid var(--hair)}
.site-hd-in{display:flex;align-items:center;gap:26px;min-height:78px;padding-top:14px;padding-bottom:14px}
.site-brand{display:flex;align-items:center;gap:13px;flex:none}
.site-brand .div{width:1px;height:34px;background:var(--hair-2)}
.site-brand .word{display:block;font-size:21px;font-weight:600;letter-spacing:-.034em;line-height:1}
.site-brand .sub{
  display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;
  color:var(--muted);margin-top:6px;text-transform:uppercase;
}
.site-hd-desc{
  min-width:0;flex:1;padding-left:26px;border-left:1px solid var(--hair);
  display:flex;flex-direction:column;gap:6px;
}
.site-hd-desc .l{
  font-size:13.5px;color:var(--ink-2);letter-spacing:-.012em;line-height:1.35;
  max-width:56ch;overflow:hidden;text-overflow:ellipsis;
}
.site-hd-desc .m{color:var(--muted-3);letter-spacing:.11em}
.site-hd-desc .m b{color:var(--ink);font-weight:500}
.site-hd-desc .m i{font-style:normal;color:var(--hair-2);padding:0 2px}
.site-hd-right{margin-left:auto;display:flex;align-items:center;gap:16px;flex:none}
.site-reg{display:flex;flex-direction:column;gap:6px;text-align:right}
.site-reg .r1{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.site-reg .r2{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acc-ink);font-variant-numeric:tabular-nums;
}
/* mark + wordmark lockup (header and footer) */
.lockup-c{display:flex;align-items:center;gap:16px}
.lockup-c .div{width:1px;height:38px;background:var(--hair-2)}
.lockup-c .word{display:block;font-size:25px;font-weight:600;letter-spacing:-.03em;line-height:1}
.lockup-c .sub{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--muted);margin-top:6px;text-transform:uppercase}
@media (max-width:1140px){
  .site-hd-desc{padding-left:20px}
  .site-hd-desc .l{max-width:38ch}
  .site-reg .r2{display:none}
}
@media (max-width:900px){
  .site-hd-desc{border-left:0;padding-left:0;display:none}
  .site-hd-in{gap:16px}
}
@media (max-width:560px){
  .site-hd-in{gap:12px;min-height:64px;padding-top:10px;padding-bottom:10px}
  .site-reg{display:none}
  .site-brand .div{display:none}
  .site-brand .word{font-size:18px}
  .site-brand svg{width:26px;height:26px}
  .site-hd-right{margin-left:auto}
}

/* ==========================================================================
   NAV RAIL — subordinate to the letterhead.
   Without JavaScript every one of the eight links stays in the rail and wraps,
   so the navigation is complete with the script blocked. When app.js has run
   (html.js), the rail collapses to the Menu toggle below 1181 px and the eight
   links move into .site-menu-panel.
   ========================================================================== */
.site-nav{background:var(--surface);border-bottom:1px solid var(--hair)}
.site-nav-in{display:flex;align-items:center;gap:20px;min-height:54px;flex-wrap:wrap}
.site-nav-links{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.site-nav-links a{
  position:relative;font-size:14px;font-weight:450;color:var(--ink-2);
  padding:7px 11px;border-radius:var(--r-xs);
  transition:color var(--t-fast) var(--e),background var(--t-fast) var(--e);
}
.site-nav-links a::after{
  content:"";position:absolute;left:11px;right:11px;bottom:5px;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--e);
}
.site-nav-links a:hover{color:var(--ink);background:var(--surface-2)}
.site-nav-links a:hover::after{transform:scaleX(1)}
.site-nav-links a[aria-current="page"]{color:var(--ink)}
.site-nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.site-nav-cta{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none}
.site-nav-cta > a{
  font-size:13.5px;font-weight:450;color:var(--muted);padding:7px 11px;
  transition:color var(--t-fast) var(--e);
}
.site-nav-cta > a:hover{color:var(--ink)}
.site-menu{
  display:none;align-items:center;gap:8px;cursor:pointer;margin-left:auto;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--hair-2);
  border-radius:var(--r-xs);padding:7px 10px;
  transition:border-color var(--t-fast) var(--e),color var(--t-fast) var(--e);
}
.site-menu:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:1180px){
  html.js .site-nav-in{flex-wrap:nowrap}
  html.js .site-nav-links{display:none}
  html.js .site-menu{display:inline-flex}
}

/* mobile panel — the eight routes as a numbered register, same letterhead
   language. Hidden in the base state; app.js opens it and keeps aria-expanded
   in step. */
.site-menu-panel{display:none;background:var(--surface);border-bottom:1px solid var(--hair)}
.site-menu-panel.is-open{display:block}
.site-menu-panel ul{border-top:1px solid var(--hair)}
.site-menu-panel li + li{border-top:1px solid var(--hair)}
.site-menu-panel a{
  display:flex;align-items:baseline;gap:14px;padding:15px 0;
  font-size:17px;font-weight:500;letter-spacing:-.028em;color:var(--ink);
}
.site-menu-panel a .no{
  font-family:var(--mono);font-size:var(--cap);letter-spacing:.13em;
  color:var(--acc-ink);font-variant-numeric:tabular-nums;
}
.site-menu-panel a[aria-current="page"]{color:var(--acc-ink)}
.site-menu-panel .panel-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:20px 0 24px;border-top:1px solid var(--hair);
}
.site-menu-panel .panel-foot .cm{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-left:auto;
}

/* ==========================================================================
   STATUS STRIP — the signature device. Optional: include it directly under
   .site-nav on pages that carry live network figures. Positioned for a page
   that has no card chrome above it, hence top:0.
   ========================================================================== */
.site-status{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--hair);
}
.site-status-in{display:flex;align-items:center;gap:10px;min-height:36px;color:var(--muted)}
.site-status-in .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-status-r{margin-left:auto;flex:none;color:var(--muted-3)}
.site-status .pulse{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;position:relative}
.site-status .pulse::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--acc);
  opacity:.5;animation:ring 2.6s var(--e) infinite;
}
@keyframes ring{0%{transform:scale(.6);opacity:.55}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media (max-width:900px){.site-status-r{display:none}}

/* ==========================================================================
   HERO — huge type, huge whitespace, one protagonist.
   The <img> is real markup with a real alt, so the section is image-led and
   the scrim keeps every text pair above 4.5:1 whatever the photograph does.
   ========================================================================== */
.hero{position:relative;min-height:clamp(520px,64vh,700px);display:flex;align-items:flex-end;overflow:hidden;background:#EDEEEF;border-bottom:1px solid var(--hair)}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero > .scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.96) 34%,rgba(255,255,255,.72) 52%,rgba(255,255,255,0) 72%),
    linear-gradient(to top,rgba(255,255,255,.55),rgba(255,255,255,0) 40%);
}
.hero-in{position:relative;z-index:2;width:100%;padding-top:118px;padding-bottom:76px}
.hero h1{
  font-size:clamp(46px,7.6vw,114px);font-weight:450;letter-spacing:-.052em;line-height:.96;
  max-width:16ch;margin:24px 0 0;
}
.hero h1 em{font-style:normal;color:var(--acc-ink)}
.hero .lead{
  margin-top:28px;max-width:56ch;font-size:var(--tx-lead);color:var(--ink-2);
  line-height:1.48;letter-spacing:-.012em;
}
.hero .btn-row{margin-top:36px}
@media (max-width:900px){
  .hero{min-height:0}
  .hero > img{object-position:64% 50%}
  .hero > .scrim{background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.97) 46%,#fff 68%)}
  .hero-in{padding-top:150px;padding-bottom:48px}
  .hero h1{font-size:clamp(36px,9.4vw,58px);max-width:14ch;margin-top:18px}
}

/* ==========================================================================
   SECTION RHYTHM — one protagonist per screen. The vertical rhythm is
   deliberately generous and asymmetrically tuned (more air above a statement
   than below it) so no band of the page ends up flat.
   ========================================================================== */
.site-sec{padding:clamp(68px,6.6vw,100px) 0 clamp(54px,4.8vw,72px);border-bottom:1px solid var(--hair)}
.site-sec.tight{padding:clamp(54px,5.4vw,80px) 0 clamp(48px,4.4vw,64px)}
.sec-head{margin-bottom:clamp(38px,4vw,58px)}
.sec-head h2{
  font-size:var(--st-l);font-weight:500;letter-spacing:-.044em;line-height:1.02;
  max-width:24ch;margin-top:22px;
}
.sec-head .lead{
  margin-top:24px;max-width:74ch;font-size:var(--tx-lead);color:var(--ink-2);
  line-height:1.5;letter-spacing:-.012em;
}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sec-head-row .meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;padding-bottom:8px;
}
.sec-head-row .meta span{border:1px solid var(--hair);border-radius:999px;padding:5px 10px;background:var(--surface);white-space:nowrap}
.sec-head--flush{margin-bottom:0}

/* dark band — two bands per page, maximum */
.site-sec.dark{background:var(--dark);color:var(--on-dark);border-bottom:1px solid #000}
.site-sec.dark .sec-head h2{color:#fff}
.site-sec.dark .statement em{color:#3FD6D6}
.site-sec.dark .sec-head .lead{color:var(--on-dark-2)}
.site-sec.dark .eyebrow{color:var(--on-dark-2)}
.site-sec.dark .eyebrow .node-dot{box-shadow:0 0 0 3px rgba(0,166,166,.22)}
.site-sec.dark .sec-head-row .meta{color:var(--on-dark-2)}
.site-sec.dark .sec-head-row .meta span{background:rgba(255,255,255,.03);border-color:var(--hair-dark)}
.site-sec.dark .sec-no{color:#00C2C2}
.site-sec.dark h2,.site-sec.dark h3,.site-sec.dark h4{color:#fff}
.site-sec.dark p{color:var(--on-dark-2)}

/* faint grid grounds — the system-diagram texture */
.grid-bg{
  background-image:
    linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
}
.grid-bg-l{
  background-image:
    linear-gradient(to right,rgba(11,11,12,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(11,11,12,.04) 1px,transparent 1px);
  background-size:48px 48px;
}
.grid-bg-d{
  background-image:
    linear-gradient(to right,rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:64px 64px;
}

/* ==========================================================================
   STAT ROW — a strip of figures that sits under a hero or opens a section.
   .stat-row            figure register on a rule (default 4 up)
   .stat-row--record    mono key/value identification strip (hero-rec)
   .stat-row--rail      borderless rail with a 31 px figure
   ========================================================================== */
.stat-row{
  background:var(--surface);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);
}
.stat-row > .wrap{
  display:grid;grid-template-columns:repeat(var(--stats,4),minmax(0,1fr));
}
.stat{
  padding:clamp(24px,2.4vw,34px) clamp(16px,1.6vw,22px) clamp(22px,2.2vw,30px);
  border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:10px;
}
.stat:first-child{border-left:0;padding-left:0}
.stat .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-3);display:flex;align-items:center;gap:7px;
}
.stat .v{
  font-size:clamp(30px,2.8vw,42px);font-weight:500;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat .v small{font-size:16px;letter-spacing:-.02em;color:var(--acc-ink);margin-left:1px}
.stat .n{font-size:12.5px;color:var(--muted);line-height:1.5}
/* rail variant — 31 px figures, no ink rule */
.stat-row--rail{border-top:0;border-bottom:1px solid var(--hair)}
.stat-row--rail .stat{padding:22px 24px}
.stat-row--rail .stat .v{font-size:31px}
.stat-row--rail .stat .v small{font-size:15px;color:var(--muted);margin-left:2px}
.stat-row--rail .stat .n{font-family:var(--mono);font-size:10px;letter-spacing:.05em;line-height:1.5}
/* record variant — the identification strip an institution prints under its name */
.stat-row--record{background:none;border-top:1px solid var(--hair-2);border-bottom:0}
.stat-row--record .stat{padding:20px 22px 0;border-left:1px solid var(--hair-2)}
.stat-row--record .stat .k{
  font-family:var(--mono);font-size:9px;letter-spacing:.13em;color:var(--muted-3);
}
.stat-row--record .stat .v{
  font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.03em;
  color:var(--ink);margin-top:8px;
}
@media (max-width:1000px){
  .stat-row > .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat:nth-child(4){border-left:0}
  .stat:nth-child(n+4){border-top:1px solid var(--hair)}
}
@media (max-width:820px){
  .stat-row > .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:18px 16px;border-top:1px solid var(--hair)}
  .stat:nth-child(1),.stat:nth-child(2){border-top:0}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat-row--record .stat{padding-top:18px}
}

/* ==========================================================================
   FIGURE — the one wrapper for every photograph on the site.
   It fixes the aspect ratio and never distorts the image: aspect-ratio on the
   frame, object-fit:cover on the image. --ar sets the ratio; .figure-grid
   lays figures out 2- or 3-up with identical geometry (policy: same ratio,
   same size, inside one grid).
   ========================================================================== */
.figure{margin:0;display:flex;flex-direction:column;min-width:0}
.figure .im{overflow:hidden;background:#EDEEEF;aspect-ratio:var(--ar,4/3);border-radius:var(--r)}
.figure .im img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .7s var(--e)}
.figure:hover .im img{transform:scale(1.02)}
.figure figcaption{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  padding:12px 0 0;margin-top:12px;border-top:1px solid var(--hair);
}
.figure .cl{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc-ink);font-variant-numeric:tabular-nums;flex:none;
}
.figure .ct{font-size:var(--tx-sm);color:var(--muted);line-height:1.5;flex:1;min-width:0}
.figure .ct b{color:var(--ink-2);font-weight:500}
.figure--bare .im{border-radius:0}
.figure--wide{grid-column:1/-1}
.figure--wide .im{aspect-ratio:var(--ar,21/9)}
.figure--dark .im{background:#15151A;border:1px solid var(--hair-dark)}
.figure--dark figcaption{border-top-color:var(--hair-dark-2)}
.figure--dark .cl{color:#3FD6D6}
.figure--dark .ct{color:var(--on-dark-2)}
.figure--dark .ct b{color:#fff}
.figure-grid{display:grid;gap:clamp(18px,2vw,28px)}
.figure-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.figure-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.figure-grid[data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .figure-grid,.figure-grid[data-cols="2"],.figure-grid[data-cols="3"]{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.figure:hover .im img{transform:none}}

/* ==========================================================================
   IMAGE CARD + CARD GRID
   One image, one name, one tag row, one record line. NO CARD CARRIES A
   PARAGRAPH (image-text policy §2.6): use .tag-row for specification,
   .pcat-q for the one fear the item removes, .pcat-s for the mechanism.
   .card-grid[data-cols="2|3|4"] — 2/3/4-up, 2-up at 1000, 1-up at 520.
   .card-grid--rule joins cards with 1 px hairlines instead of gaps.
   ========================================================================== */
.card-grid{
  display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px) clamp(14px,1.5vw,20px);
}
.card-grid[data-cols="2"]{--cols:2}
.card-grid[data-cols="3"]{--cols:3}
.card-grid[data-cols="4"]{--cols:4}
/* Breakpoints use the [data-cols] attribute-presence selector so they carry the
   same specificity as the rules above and win on source order. */
@media (max-width:1100px){.card-grid[data-cols="4"]{--cols:3}}
@media (max-width:1000px){.card-grid[data-cols]{--cols:2}}
@media (max-width:520px){.card-grid[data-cols]{--cols:1}}
.card-grid--rule{gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.card-grid--rule .pcat{border:0;border-radius:0}

.pcat{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--t) var(--e),box-shadow var(--t) var(--e);
}
.pcat:hover{border-color:var(--hair-2);box-shadow:var(--sh-2)}
.pcat-im{
  position:relative;display:block;aspect-ratio:var(--card-ar,4/3);overflow:hidden;
  background:#EDEEEF;border-bottom:1px solid var(--hair);
}
.pcat-im img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform .7s var(--e)}
.pcat:hover .pcat-im img{transform:scale(1.03)}
.pcat-no{
  position:absolute;left:0;top:0;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;font-variant-numeric:tabular-nums;
  background:rgba(17,17,20,.86);color:#E9E9EC;padding:5px 9px;border-bottom-right-radius:var(--r-xs);
}
.pcat-b{padding:15px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcat-b h3{font-size:17px;font-weight:500;letter-spacing:-.028em;line-height:1.18;color:var(--ink)}
.pcat-b h3 a{transition:color var(--t-fast) var(--e)}
.pcat:hover .pcat-b h3 a{color:var(--acc-ink)}
.pcat-q{font-size:var(--tx-sm);color:var(--ink);line-height:1.5;font-style:italic}
.pcat-s{font-size:12.5px;color:var(--muted);line-height:1.5}
.pcat-by{
  margin-top:auto;padding-top:11px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-3);line-height:1.65;
}
.pcat-by b{color:var(--muted);font-weight:400}
@media (prefers-reduced-motion:reduce){.pcat:hover .pcat-im img{transform:none}}

/* tag / chip — specification lives here, never in a sentence */
.tag-row{display:flex;flex-wrap:wrap;gap:5px}
.tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-2);background:var(--surface-2);border:1px solid var(--hair);
  border-radius:var(--r-xs);padding:4px 7px;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.tag-row--dark .tag{color:var(--on-dark-2);background:rgba(255,255,255,.05);border-color:var(--hair-dark)}

/* ==========================================================================
   SPLIT — image | text, both columns stretched to the same height.
   <div class="split"><figure class="figure">…</figure><div class="split-bd">…</div></div>
   ========================================================================== */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,3.4vw,54px);align-items:stretch}
.split--wide{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.split--narrow{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.split--flip > .figure{order:2}
.split > .figure{height:100%}
.split > .figure .im{flex:1 1 auto;aspect-ratio:auto;min-height:240px}
.split-bd{display:flex;flex-direction:column;gap:18px;min-width:0;justify-content:center}
.split--top .split-bd{justify-content:flex-start}
@media (max-width:940px){
  .split,.split--wide,.split--narrow{grid-template-columns:1fr;gap:30px}
  .split--flip > .figure{order:0}
  .split > .figure .im{aspect-ratio:var(--ar,3/2);min-height:0}
}

/* ==========================================================================
   REGISTER — a manifest you can scan in one pass (the card's .preg).
   Never a section on its own: pair it with .figure inside a .split.
   ========================================================================== */
.register{border-top:1px solid var(--hair)}
.reg-row{
  display:grid;grid-template-columns:38px minmax(0,1fr) 96px;gap:18px;
  padding:20px 0 18px;border-bottom:1px solid var(--hair);align-items:start;
}
.reg-row .no{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--acc-ink);
  font-variant-numeric:tabular-nums;padding-top:4px;
}
.reg-row h3,.reg-row h4{
  font-size:20px;font-weight:500;letter-spacing:-.03em;line-height:1.15;color:var(--ink);
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
}
.reg-row h3 a,.reg-row h4 a{transition:color var(--t-fast) var(--e)}
.reg-row:hover h3 a,.reg-row:hover h4 a{color:var(--acc-ink)}
.reg-row .arw{color:var(--hair-2);transition:transform var(--t) var(--e),color var(--t) var(--e);display:flex;flex:none}
.reg-row:hover .arw{transform:translateX(3px);color:var(--acc)}
.reg-row .spec{margin-top:9px;font-size:var(--tx-sm);line-height:1.5;color:var(--muted);max-width:56ch;letter-spacing:-.004em}
.reg-row .who{
  margin-top:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.055em;
  text-transform:uppercase;color:var(--muted-3);line-height:1.7;
}
.reg-row .who b{color:var(--ink-2);font-weight:400}
.reg-row .site{
  text-align:right;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:5px;
}
@media (max-width:940px){
  .reg-row{grid-template-columns:32px minmax(0,1fr);gap:14px}
  .reg-row .site{grid-column:2;text-align:left;padding-top:0;margin-top:2px}
}
/* real tabular data (specification tables) */
.data-table{width:100%;font-size:var(--tx-sm);table-layout:fixed}
.data-table caption{
  caption-side:top;text-align:left;font-family:var(--mono);font-size:var(--cap);
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding-bottom:12px;
}
.data-table th{
  font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted-3);text-align:left;
  padding:0 14px 10px 0;border-bottom:1px solid var(--ink);
}
.data-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--hair);color:var(--ink-2);vertical-align:top;overflow-wrap:anywhere}
.data-table th:first-child,.data-table td:first-child{padding-left:0}
.data-table .num{font-family:var(--mono);letter-spacing:.03em;text-align:right;color:var(--ink)}

/* ==========================================================================
   LABEL GRID — the replacement for prose lists (image-text policy §2.5).
   .lgrid.lgrid--2 / .lgrid--3 > .lrow ( .k key · .h name · .v short value )
   ========================================================================== */
.lgrid{display:grid;gap:0;border-top:1px solid var(--ink)}
.lgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lrow{
  display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;
  border-bottom:1px solid var(--hair);border-left:1px solid var(--hair);
}
.lgrid--3 .lrow:nth-child(3n+1){border-left:0;padding-left:0}
.lgrid--2 .lrow:nth-child(odd){border-left:0;padding-left:0}
.lrow .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc-ink);font-variant-numeric:tabular-nums;
}
.lrow .h{font-size:17px;font-weight:500;letter-spacing:-.028em;line-height:1.2;color:var(--ink)}
.lrow .v{font-size:var(--tx-sm);color:var(--muted);line-height:1.55;max-width:40ch}
.lrow .v b{color:var(--ink-2);font-weight:500}
@media (max-width:820px){
  .lgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lgrid--3 .lrow:nth-child(3n+1){border-left:1px solid var(--hair);padding-left:20px}
  .lgrid--3 .lrow:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .lgrid--2,.lgrid--3{grid-template-columns:1fr}
  .lrow{border-left:0 !important;padding-left:0}
}

/* ==========================================================================
   DIAGRAM CONTAINERS — the only two places on the site where content is
   allowed to scroll sideways. Both are deliberate: a wide system diagram on a
   dark field, and a capability matrix on a light card. The hint is shown when
   the diagram cannot fit.
   ========================================================================== */
.diagram-scroll{
  overflow-x:auto;background:var(--dark-2);border:1px solid var(--hair-dark);
  border-radius:var(--r);padding:16px 18px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.diagram-scroll::-webkit-scrollbar{height:8px}
.diagram-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}
.diagram-scroll > svg{width:100%;height:auto;min-width:var(--dgm-min,1080px)}
.diagram-scroll > svg text{
  font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.matrix-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(20px,2.2vw,30px)}
.matrix-scroll > svg{width:100%;height:auto;min-width:var(--dgm-min,820px)}
.matrix-scroll > svg text{
  font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.diagram-hint{
  display:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;
}
@media (max-width:1180px){.diagram-hint{display:block;color:var(--on-dark-2)}}
/* keys for a diagram — light ground by default, --dark on a dark band */
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;color:var(--muted);font-size:var(--tx-sm)}
.legend span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase}
.legend .sw{width:11px;height:11px;border-radius:2px;flex:none;border:1px solid var(--hair-2)}
.site-sec.dark .legend{color:var(--on-dark-2)}
.site-sec.dark .legend .sw{border-color:rgba(255,255,255,.14)}
.legend .sw.a{background:rgba(0,166,166,.18);border-color:rgba(0,166,166,.6)}
.legend .sw.b{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.2)}
.legend .sw.c{background:transparent;border:0;border-top:1.5px solid var(--acc);height:0;border-radius:0;width:16px}
.legend .sw.d{background:transparent;border:0;border-top:1.5px dashed rgba(255,255,255,.4);height:0;border-radius:0;width:16px}

/* coverage readout — a measured count, drawn as 24 ticks */
.cov{margin-top:clamp(36px,3.8vw,54px);border-top:1px solid var(--hair-dark);padding-top:8px}
.cov-row{display:flex;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid var(--hair-dark)}
.cov-row .name{width:104px;flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--on-dark);font-variant-numeric:tabular-nums}
.ticks{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;flex:1;min-width:0}
.ticks i{height:26px;border-radius:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);display:block}
.ticks i.f{background:var(--acc);border-color:var(--acc)}
.cov-row .read{width:96px;flex:none;text-align:right;font-family:var(--mono);font-size:15px;color:#3FD6D6;font-variant-numeric:tabular-nums}
.cov-row .read small{color:var(--on-dark-2);font-size:10px}
.cov-note{margin-top:18px;font-size:var(--tx-sm);color:var(--on-dark-2);max-width:86ch;line-height:1.68}
.cov-note b{color:var(--on-dark);font-weight:500}
@media (max-width:760px){
  .cov-row{flex-wrap:wrap;gap:10px}
  .cov-row .name{width:100%}
  .cov-row .read{width:auto;margin-left:auto}
}

/* ==========================================================================
   CAPTURE BAND — the dark conversion band at the foot of every page.
   .feat puts a photograph behind the band with a scrim that keeps contrast
   above 4.5:1 whatever the frame contains. Write it as
     <section class="capture feat"> <div class="feat-im">…</div>
       <div class="feat-scrim"></div> <div class="wrap capture-in">…</div>
   ========================================================================== */
.feat{position:relative;overflow:hidden}
.feat > .feat-im{position:absolute;inset:0;z-index:0}
.feat > .feat-im img{width:100%;height:100%;object-fit:cover}
.feat > .wrap,.feat > .site-wrap{position:relative;z-index:2}
.feat-scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.capture{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark);border-bottom:1px solid #000}
.capture-in{position:relative;z-index:2;padding:clamp(76px,8vw,124px) 0 clamp(68px,7vw,104px)}
.capture h2{
  font-size:var(--st-xl);font-weight:450;letter-spacing:-.052em;line-height:.98;
  color:#fff;margin-top:26px;max-width:18ch;
}
.capture h2 em{font-style:normal;color:#3FD6D6}
.capture .lead{
  margin-top:26px;max-width:64ch;color:var(--on-dark-2);font-size:var(--tx-lead);
  line-height:1.5;letter-spacing:-.012em;
}
.capture .eyebrow{color:var(--on-dark-2)}
.capture .eyebrow .node-dot{box-shadow:0 0 0 3px rgba(0,166,166,.22)}
.capture .sec-no{color:#00C2C2}
.capture .btn-row{margin-top:38px}
.capture-alt{
  margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  color:var(--on-dark-2);font-family:var(--mono);font-size:var(--cap);
  letter-spacing:.09em;text-transform:uppercase;
}
.capture-alt b{color:#3FD6D6;font-weight:400}
.capture-promise{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--hair-dark);border:1px solid var(--hair-dark);
  margin-top:clamp(38px,4vw,56px);
}
.capture-promise > div{background:var(--dark);padding:20px 22px;display:flex;gap:12px;align-items:flex-start}
.capture-promise .t{font-size:var(--tx-sm);color:var(--on-dark-2);line-height:1.55}
.capture-promise .t b{display:block;color:#fff;font-weight:500;font-size:15px;letter-spacing:-.018em;margin-bottom:4px}
@media (max-width:820px){.capture-promise{grid-template-columns:1fr}}
/* scrims — dark band (capture) and dark section, light-ground section */
.capture.feat > .feat-im img,.site-sec.dark.feat > .feat-im img{object-position:72% 50%}
.capture.feat > .feat-scrim{
  background:
    linear-gradient(88deg,rgba(17,17,20,.985) 0%,rgba(17,17,20,.96) 42%,rgba(17,17,20,.74) 60%,rgba(17,17,20,.34) 80%,rgba(17,17,20,.12) 100%),
    linear-gradient(to top,rgba(17,17,20,.66),rgba(17,17,20,0) 44%);
}
.site-sec.dark.feat > .feat-scrim{
  background:
    linear-gradient(88deg,rgba(17,17,20,.985) 0%,rgba(17,17,20,.965) 40%,rgba(17,17,20,.80) 58%,rgba(17,17,20,.42) 78%,rgba(17,17,20,.18) 100%),
    linear-gradient(to top,rgba(17,17,20,.72),rgba(17,17,20,0) 46%);
}
@media (max-width:900px){
  .capture.feat > .feat-scrim,.site-sec.dark.feat > .feat-scrim{
    background:linear-gradient(180deg,rgba(17,17,20,.86) 0%,rgba(17,17,20,.975) 42%,#111114 72%);
  }
}

/* inquiry form — works with no backend: app.js swaps in .form-done */
.inquiry-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;max-width:680px}
.field{
  flex:1;min-width:250px;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--hair-dark-2);border-radius:var(--r-sm);
  padding:0 14px;height:50px;
  transition:border-color var(--t-fast) var(--e),background var(--t-fast) var(--e);
}
.field:focus-within{border-color:var(--acc);background:rgba(0,166,166,.06);box-shadow:0 0 0 3px rgba(0,166,166,.16)}
.field input{flex:1;background:none;border:0;outline:none;color:#fff;font-family:var(--sans);font-size:14.5px;letter-spacing:-.01em;min-width:0}
.field input::placeholder{color:#8E8E97}
.field svg{color:#8E8E97;flex:none}
.inquiry-form .btn{height:50px}
.field--light{background:var(--surface);border-color:var(--hair-2)}
.field--light input{color:var(--ink)}
.field--light input::placeholder{color:var(--muted)}
.field--light svg{color:var(--muted-3)}
/* after a successful submit the form retires and the confirmation takes over */
.inquiry-form.is-sent{display:none}
.form-done{
  display:none;margin-top:32px;max-width:680px;padding:20px 22px;gap:12px;align-items:flex-start;
  border:1px solid var(--hair-dark-2);border-radius:var(--r);background:rgba(255,255,255,.04);
}
.form-done.is-sent{display:flex}
.form-done .node-dot{margin-top:6px}
.form-done .t{font-size:15px;font-weight:500;color:#fff;letter-spacing:-.018em}
.form-done p{font-size:var(--tx-sm);color:var(--on-dark-2);line-height:1.55;margin-top:5px}
.form-done--light{background:var(--surface);border-color:var(--hair-2)}
.form-done--light .t{color:var(--ink)}
.form-done--light p{color:var(--muted)}

/* ==========================================================================
   MODAL — the inquiry dialog. Markup lives in the page; app.js opens it from
   any [data-modal-open], traps focus, closes on Escape and restores focus.
   The base state is closed, so the page is complete without JavaScript.

   Workflow standard format: .modal-dialog is TWO columns — .modal-image-panel
   on the left, .modal-form-panel on the right. A single-column form filling
   the whole dialog is the shape the contract rejects.
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:140;display:none}
.modal.is-open{display:grid;place-items:center;padding:20px}
.modal-scrim{position:absolute;inset:0;background:rgba(11,11,12,.62)}
.modal-dialog{
  position:relative;z-index:2;width:100%;max-width:920px;max-height:calc(100vh - 40px);
  overflow:auto;background:var(--surface);border:1px solid var(--hair-2);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch;
}
.modal-image-panel{position:relative;min-height:360px;background:var(--surface-2)}
.modal-image-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-form-panel{padding:clamp(24px,3vw,34px);min-width:0}
.modal-dialog h2{font-size:var(--st-m);font-weight:500;letter-spacing:-.034em;line-height:1.05;margin-top:18px}
.modal-dialog .lead{margin-top:16px;font-size:var(--tx-body);color:var(--ink-2);line-height:1.6}
.modal-dialog .inquiry-form{margin-top:24px;max-width:none}
.modal-dialog .form-done{margin-top:24px;max-width:none}
.modal-close{
  position:absolute;right:12px;top:12px;z-index:3;width:36px;height:36px;
  display:grid;place-items:center;background:var(--surface);color:var(--muted);
  border:1px solid var(--hair);border-radius:var(--r-xs);
  transition:border-color var(--t-fast) var(--e),color var(--t-fast) var(--e);
}
.modal-close:hover{border-color:var(--ink);color:var(--ink)}
.modal-foot{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:10px 20px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
body.modal-open{overflow:hidden}
@media (max-width:820px){
  /* one column: the picture stacks above the form as a band */
  .modal-dialog{grid-template-columns:minmax(0,1fr);max-width:560px}
  .modal-image-panel{min-height:0;height:150px}
}
@media (prefers-reduced-motion:no-preference){
  .modal.is-open .modal-dialog{animation:modal-in var(--t) var(--e)}
  @keyframes modal-in{from{transform:translateY(10px)}to{transform:none}}
}

/* ==========================================================================
   FOOTER — the same three registers closing the page.
   ========================================================================== */
.site-foot{background:var(--surface);padding:56px 0 0;border-top:1px solid var(--hair)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(6,minmax(0,1fr));gap:30px 22px}
.foot-brand .lockup-c .word{font-size:18px}
.foot-brand .lockup-c svg{width:30px;height:30px}
.foot-brand > p{margin-top:16px;font-size:13.5px;color:var(--muted);max-width:40ch;line-height:1.6}
.foot-contact{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.foot-contact a,.foot-contact span{
  display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);
  transition:color var(--t-fast) var(--e);
}
.foot-contact a:hover{color:var(--acc-ink)}
.foot-contact svg{color:var(--muted-3);flex:none}
.foot-col h4{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-3);margin-bottom:14px;
}
.foot-col li + li{margin-top:8px}
.foot-col a{font-size:13.5px;color:var(--muted);transition:color var(--t-fast) var(--e)}
.foot-col a:hover{color:var(--ink)}
.foot-col a[aria-current="page"]{color:var(--ink)}
.foot-reg{
  margin-top:34px;padding-top:16px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:8px 34px;color:var(--muted-3);
  font-family:var(--mono);font-size:var(--cap);letter-spacing:.09em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.foot-reg span b{color:var(--muted);font-weight:400}
.foot-bar{
  margin-top:22px;border-top:1px solid var(--ink);padding:18px 0 24px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--muted-3);
  font-family:var(--mono);font-size:var(--cap);letter-spacing:.085em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.foot-bar .r{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.foot-bar a{transition:color var(--t-fast) var(--e)}
.foot-bar a:hover{color:var(--ink)}
@media (max-width:1180px){
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:680px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   NARROW VIEWPORT — one block, matching the card's own 768 px pass.
   ========================================================================== */
@media (max-width:768px){
  .site-sec{padding:52px 0}
  .site-sec.tight{padding:46px 0}
  .sec-head{margin-bottom:28px}
  .capture-in{padding:62px 0 56px}
  .foot-bar .r{margin-left:0}
  .foot-bar{font-size:10px}
}

/* ==== GLOBAL DARK-BAND + GRID FIXES (added after Phase 3) ==== */

/* Dark-band legibility.
   .statement/.eyebrow/.figure/.legend already carry dark variants; the list,
   row and table primitives did not, so any dark section built from them
   rendered near-black text on #111114 (~1.02:1). These rules apply to every
   dark section on the site. */
.site-sec.dark .lgrid { border-top-color: var(--hair-dark-2); }
.site-sec.dark .lrow { border-bottom-color: var(--hair-dark); border-left-color: var(--hair-dark); }
.site-sec.dark .lrow .k { color: #3FD6D6; }
.site-sec.dark .lrow .h { color: var(--on-dark); }
.site-sec.dark .lrow .v { color: var(--on-dark-2); }
.site-sec.dark .data-table caption { color: var(--on-dark-2); }
.site-sec.dark .data-table th { color: var(--on-dark-2); border-bottom-color: var(--hair-dark-2); }
.site-sec.dark .data-table td { color: var(--on-dark-2); border-bottom-color: var(--hair-dark); }
.site-sec.dark .data-table .num { color: var(--on-dark); }
.site-sec.dark .note { background: rgba(255, 255, 255, .03); border-color: var(--hair-dark); }
.site-sec.dark .note p { color: var(--on-dark-2); }
.site-sec.dark .lead-note { color: var(--on-dark-2); }

/* Four-up figure grid. data-cols="4" previously fell through to one column. */
.figure-grid[data-cols="4"] { --cols: 4; }
@media (max-width: 1080px) { .figure-grid[data-cols="4"] { --cols: 3; } }
@media (max-width: 820px) { .figure-grid[data-cols="4"] { --cols: 2; } }
@media (max-width: 520px) { .figure-grid[data-cols="4"] { --cols: 1; } }

/* ==== END GLOBAL DARK-BAND + GRID FIXES ==== */

/* ==== MOBILE / A11Y FIXES (Phase 5 verification) ==== */

/* Footer column headings were <h4>, which produced an h2 -> h4 skip on every
   route once the footer followed a page ending in <h2>. */
.site-foot h2 {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 12px;
}

/* The section meta row and tag rows must wrap rather than push the document
   wider than a 375px screen. */
.sec-head-row { flex-wrap: wrap; }
.sec-head-row .meta { flex-wrap: wrap; row-gap: 4px; }
.sec-head-row .meta span {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tag-row { flex-wrap: wrap; }

/* A tag chip is a label, not a fixed-width object. Several pages carry chips
   listing a whole standard set; with nowrap they measured up to 475px and
   pushed the document 118px past a 375px viewport. A chip may never be wider
   than its container, and long chips wrap inside themselves. */
.tag {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  /* 44px targets for real controls. */
  .site-nav-links a,
  .site-menu,
  .site-brand,
  .site-hd-right .btn,
  .site-menu-panel a,
  .foot-col a,
  .foot-contact a,
  .foot-bar a,
  .skip-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .foot-col li { display: flex; }
  .foot-contact a { width: 100%; }

  /* Card titles are links. Where a card makes its heading link display:block
     (so the whole title row is clickable) it stops being an inline text link
     and has to meet the 24px target itself. On small screens give it a real
     thumb-sized row instead. */
  h3 > a,
  h4 > a,
  .pcat h3 > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* WCAG 2.5.8 (24px) for links sitting in a div rather than a paragraph --
     those are not covered by the inline-text-link exemption. */
  .lead-note a,
  .v a,
  .ct a,
  .r a,
  .lp-form-note a,
  .note a,
  .src a {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media (max-width: 560px) {
  /* The header must never push the viewport wider than the screen. */
  .site-hd-in { flex-wrap: wrap; row-gap: 10px; }
  .site-hd-right { margin-left: auto; }
  .site-brand .word { font-size: 16px; }
  .site-brand svg { width: 22px; height: 22px; }
  .site-hd-right .btn-sm { padding-left: 12px; padding-right: 12px; }

  /* Legibility floor for micro-labels. Desktop keeps the frozen scale.
     !important is deliberate and scoped to this breakpoint: these label
     classes are sized by compound selectors of higher specificity
     (.stat .n, .cov .name, .sec-head .meta ...), and the floor has to win
     regardless of which page assembled them. */
  :root {
    --eh: 14px;
    --cap: 14px;
    --tx-sm: 14px;
  }
  .sub, .k, .n, .name, .meta, .pcat-by, .pcat-no, .pcat-s, .pcat-q,
  .cl, .ct, .tag, .cap, .byline, .diagram-hint, .eyebrow, .rk-cap,
  .sec-no, .cov-note, .legend, .mono, .num, .note, .lead-note,
  .dark-note, .note-dark, .t-hint, .src, .avail, .who, .site,
  .spec, .arw, .im, .no, .foot-bar, .foot-col h2, .foot-col a,
  .site-menu, .cm, .btn-sm, .site-nav-cta a, .r1, .r2,
  .foot-brand p, .foot-contact p, .btn, .btn-acc, .btn-ink,
  .btn-ghost, .btn-ghost-d,
  .legend span, .note p, .lg-code span, .nf-code span,
  .mx-legend span, .mx-axis .k,
  .lp-form-note, .lp-form-note a, .r a, p a,
  .stat-row--record .stat .v, .foot-bar span, .foot-bar .r,
  .foot-bar .r span, .site-foot .contact-row, .site-foot .legal-row,
  .lp-foot span, .lp-foot .r, .lp-foot a {
    font-size: 14px !important;
  }
  .tag { padding-top: 6px; padding-bottom: 6px; }
}

/* ==== END MOBILE / A11Y FIXES ==== */

/* ==== CHROME + TYPE REFINEMENT (client review 2) ==== */

/* ---------------------------------------------------------------------------
   TYPE. The reference sets h1-h6 at weight 300 and its hero at 200, capped
   near 48px, with slightly positive tracking. The client asked twice for
   thinner type and a smaller hero, so this goes below the reference on hero
   size and matches it on weight. Inter Tight 100/200 are now loaded, so these
   weights are real rather than synthesised.
   --------------------------------------------------------------------------- */
:root {
  --st-xl: clamp(26px, 2.5vw, 36px);
  --st-l: clamp(23px, 2.1vw, 30px);
  --st-m: clamp(19px, 1.6vw, 23px);
}

.statement { font-weight: 300; letter-spacing: .004em; line-height: 1.2; }
.statement--xl { letter-spacing: .002em; line-height: 1.18; }
.statement--m { letter-spacing: .01em; line-height: 1.26; }

/* The headline size has been round the houses: 109px was a billboard, and the
   correction to 28px over-shot — at weight 200 the strokes are thin enough that
   it read as lighter than the 19px lead beneath it, and between 900px and
   1100px the old clamp bottomed out at 20px, which really was smaller than the
   body text. This settles at 34px with a floor of 28px so the headline is
   always clearly the largest thing on the page at every width. */
.hero h1 {
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 300;
  letter-spacing: .002em;
  line-height: 1.22;
  max-width: 40ch;
  margin-top: 18px;
}
.sec-head h2 { font-weight: 300; letter-spacing: .008em; line-height: 1.24; max-width: 36ch; }
.capture h2 { font-weight: 300; letter-spacing: .002em; line-height: 1.2; max-width: 32ch; }
.modal-panel h2, .modal-dialog h2 { font-weight: 300; letter-spacing: .008em; line-height: 1.24; }

.rk-lead { font-weight: 300; letter-spacing: 0; line-height: 1.58; }
.pcat-b h3 { font-weight: 400; letter-spacing: -.008em; }
.stat .v { font-weight: 300; letter-spacing: -.025em; }
.site-brand .word { font-weight: 400; letter-spacing: .004em; }
.site-nav-links a { font-weight: 300; }

/* Page-local hero rules beat the frozen sheet on specificity, so they are
   stripped from every page by strip_local_hero_sizes() and this is the single
   authority for the headline. */
.hero h1 { font-size: clamp(34px, 3.4vw, 46px) !important; max-width: 34ch !important; }

/* /products/ is the one page whose h1 is a bare .statement outside a .hero, so
   it had no size of its own and inherited whatever the section was set to. */
h1.statement { font-size: var(--st-xl); }

@media (max-width: 900px) {
  /* !important here too, so the desktop floor above cannot win on a phone. */
  .hero h1 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.24; max-width: 30ch !important; }
  .sec-head h2 { line-height: 1.28; }
}

/* ---------------------------------------------------------------------------
   HEADER. Three columns, so the menu is centred on the BAR rather than centred
   in whatever space the brand and button happen to leave. Wider link padding,
   no hover underline, and the enquiry button now opens the inquiry dialog —
   href="/contact/" stays as the no-JS fallback, and app.js falls through to it
   on any page that carries no dialog.

   Client review 3: the two hairlines are gone. The base sheet painted one under
   .site-hd and a legacy one under .site-nav; because the rail now sits INSIDE
   the header, the second drew a short rule that started and stopped with the
   menu instead of running the width of the bar. Both are cancelled here.
   --------------------------------------------------------------------------- */
.site-hd { border-bottom: 0; }
.site-nav { border-bottom: 0; background: transparent; }
.site-hd-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  padding-top: 0;
  padding-bottom: 0;
  gap: 12px;
}
.site-brand { justify-self: start; white-space: nowrap; }
.site-nav { justify-self: center; margin-left: 0; }
.site-hd-right { justify-self: end; margin-left: 0; gap: 10px; }
/* Eight items now. The inter-item gap goes 4px -> 10px and the link padding
   16px -> 17px, so the clear space between two labels is 44px instead of 36px.
   That is the ceiling while the bar stays a centred 1fr auto 1fr grid inside
   the 1220px measure: past it the two side tracks fall below the width of the
   brand lockup / the enquiry button, the tracks stop being equal, and the menu
   drifts off the centre line. */
.site-nav-links { gap: 10px; }
.site-nav-links a { padding: 9px 17px; font-size: 14px; }
.site-nav-links a::after { display: none; }
.site-menu { margin-left: 0; }
.site-hd-desc, .site-reg { display: none !important; }
.bt-short { display: none; }
/* The eighth link plus the wider gaps consume the last of the middle track, so
   at rail widths the brand gives up its second line and keeps the wordmark
   only — a two-line strap here would also push the lockup past the bar height.
   The descriptor is still carried by the hero eyebrow and the footer lockup. */
@media (min-width: 1181px) {
  .site-brand .sub { display: none; }
}

@media (max-width: 1180px) {
  .site-hd-in { grid-template-columns: auto 1fr auto; gap: 16px; }
}
@media (max-width: 900px) {
  .site-hd-in { min-height: 64px; }
}
@media (max-width: 560px) {
  .site-hd-in { min-height: 60px; gap: 10px; }
  .site-brand { gap: 9px; }
  .site-brand .sub { display: none; }
  /* At 375px the full CTA label plus the menu button overflowed the bar. */
  .site-hd-right { gap: 6px; }
  .bt-full { display: none; }
  .bt-short { display: inline; }
  .site-hd-right .btn-sm { padding-left: 11px; padding-right: 11px; }
  .site-menu .mt { display: none; }
  .site-menu { padding-left: 11px; padding-right: 11px; }
}

/* ---------------------------------------------------------------------------
   FOOTER. Equal grid cells left every column packed against the left of its own
   track with a ragged right edge, which read as "everything pushed left".
   Flex + space-between tiles the columns across the full measure instead.
   Link count is down from 31 to 24.
   --------------------------------------------------------------------------- */
.site-foot .foot-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.site-foot .foot-brand { flex: 0 1 290px; }
.site-foot .foot-col { flex: 0 0 auto; min-width: 158px; }
.site-foot .foot-brand p { max-width: 32ch; }
.site-foot .foot-col ul { display: flex; flex-direction: column; gap: 10px; }
.site-foot .foot-col h2 { margin-bottom: 16px; }
.site-foot .foot-contact { margin-top: 20px; }
.site-foot .foot-reg { display: none; }

@media (max-width: 1100px) {
  .site-foot .foot-grid { flex-wrap: wrap; gap: 36px 40px; }
  .site-foot .foot-brand { flex: 1 1 100%; }
  .site-foot .foot-col { flex: 1 1 150px; }
}
@media (max-width: 700px) {
  .site-foot .foot-grid { gap: 30px 24px; }
  .site-foot .foot-col { flex: 1 1 40%; }
}

/* ==== END CHROME + TYPE REFINEMENT ==== */

/* ==========================================================================
   CAPABILITY MATRIX (.mx-*) — client review 3, change 5.
   Ported verbatim from the approved Card 5 preview
   (source/style-cards/card-5.html), where it drew six service lines against
   six project stages. It lives on the homepage now, inside the existing
   .matrix-scroll container — the light-ground half of the DIAGRAM CONTAINERS
   pair above, which is the one this light-palette diagram was drawn for. Only
   the fill/stroke values of the SVG shapes and the key beneath it live here;
   the geometry is in the markup.
   ========================================================================== */
.mx-t-1{fill:#0B0B0C;font-size:10px}
.mx-t-2{fill:#52525B;font-size:9.5px}
.mx-t-3{fill:#71717A;font-size:9px}
.mx-grid{fill:none;stroke:#E4E4E7;stroke-width:1}
.mx-fill{fill:#00A6A6}
.mx-sup{fill:#FFFFFF;stroke:#00A6A6;stroke-width:1.2}
.mx-sup-d{fill:#00A6A6}
.mx-none{fill:#F4F4F5;stroke:#E4E4E7;stroke-width:1}
.mx-cellbox{fill:none;stroke:transparent;stroke-width:1}
.mx-cellbox:hover{stroke:#D4D4D8}
.mx-legend{
  display:flex;flex-wrap:wrap;gap:10px 24px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);
}
.mx-legend span{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.mx-legend i{width:13px;height:13px;border-radius:3px;flex:none;display:block}
.mx-legend i.f{background:var(--acc)}
.mx-legend i.s{background:#fff;border:1.2px solid var(--acc)}
.mx-legend i.n{background:var(--surface-2);border:1px solid var(--hair)}
.mx-legend i.t{background:transparent;border:0;border-top:1.5px solid var(--acc);height:0;border-radius:0;width:16px}
.mx-nonemark{stroke:#B4B4BC;stroke-width:1.6;fill:none;stroke-linecap:round}
.mx-axis{
  display:flex;gap:10px 20px;flex-wrap:wrap;align-items:baseline;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);
}
.mx-axis .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--acc-ink);flex:none;
}
.mx-axis .d{font-size:var(--tx-sm);color:var(--muted);line-height:1.55;max-width:96ch}

/* ==== END CAPABILITY MATRIX ==== */

/* ==== NETWORK MAP (.nm-*) — client review 6 ==== */
/* The homepage's previous diagram was a 1120x196 node strip whose 24 site
   labels had no room and rendered on top of each other. This is Card 5's
   approved map: buyer, accountability layer, capability groups. It is drawn
   for a dark ground, so it belongs inside the dark network section. */
.nm-rule{fill:none;stroke:rgba(255,255,255,.10);stroke-width:1}
.nm-edge{fill:none;stroke:rgba(255,255,255,.20);stroke-width:1}
.nm-edge-acc{fill:none;stroke:var(--acc);stroke-width:1.4}
.nm-chip{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.14);stroke-width:1}
.nm-chip:hover{fill:rgba(0,166,166,.12);stroke:rgba(0,166,166,.5)}
.nm-box{fill:rgba(255,255,255,.02);stroke:rgba(255,255,255,.16);stroke-width:1}
.nm-core{fill:rgba(0,166,166,.06);stroke:rgba(0,166,166,.45);stroke-width:1}
.nm-t-1{fill:#FFFFFF;font-size:10.5px}
.nm-t-2{fill:#A1A1AA;font-size:9.5px}
.nm-t-3{fill:#8E8E97;font-size:9px}
.nm-t-acc{fill:#00A6A6;font-size:9.5px}
.nm-t-site{fill:#E7E7EA;font-size:9.5px}
.nm-t-big{fill:#FFFFFF;font-size:15px;letter-spacing:-.02em;text-transform:none;font-family:var(--sans);font-weight:600}
.nm-edge-acc{stroke-dasharray:160}
.nm-edge{stroke-dasharray:420}
.nm-lbl,.nm-chip-g{transform-box:fill-box;transform-origin:center}
html.anim .nm-edge-acc{stroke-dashoffset:160;transition:stroke-dashoffset .7s var(--e)}
html.anim .nm-edge{stroke-dashoffset:420;transition:stroke-dashoffset .9s var(--e);transition-delay:calc(var(--dl,0) * 1ms)}
html.anim .nm-lbl,html.anim .nm-chip-g{transform:translateY(3px);transition:transform .6s var(--e);transition-delay:calc(var(--dl,0) * 1ms)}
html.anim .netmap.in .nm-edge,html.anim .netmap.in .nm-edge-acc{stroke-dashoffset:0}
html.anim .netmap.in .nm-lbl,html.anim .netmap.in .nm-chip-g{transform:none}
/* ==== END NETWORK MAP ==== */

/* ==== CONTRACT BAND (.ctr-*) — client review 6 ==== */
/* Ported from the approved Card 5 preview. The card's own statement weight
   (450) predates the thinner scale, so it is set to 300 here. */
.ctr{background:var(--dark);color:var(--on-dark);border-bottom:1px solid #000;position:relative}
.ctr-in{position:relative;z-index:2;padding:clamp(72px,7.4vw,110px) 0 clamp(58px,5.6vw,84px)}
.ctr-eyebrow{color:var(--on-dark-2)}
.ctr-eyebrow .node-dot{box-shadow:0 0 0 3px rgba(0,166,166,.22)}
.ctr-state{
  margin-top:clamp(30px,3.4vw,52px);max-width:26ch;
  font-size:var(--st-xl);font-weight:300;letter-spacing:-.05em;line-height:.99;color:#fff;
  text-wrap:balance;
}
.ctr-state em{font-style:normal;color:#3FD6D6}
.ctr-lede{
  margin-top:clamp(28px,3vw,44px);max-width:70ch;
  font-size:var(--tx-lead);line-height:1.5;letter-spacing:-.012em;color:var(--on-dark-2);
}
.ctr-lede b{color:#fff;font-weight:400}
.ctr-sig{
  margin-top:clamp(44px,5vw,72px);border-top:1px solid var(--hair-dark-2);
  padding-top:22px;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;
}
.ctr-sig .c{font-family:var(--mono);font-size:var(--cap);letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-dark-2);font-variant-numeric:tabular-nums}
.ctr-sig .c b{color:#fff;font-weight:400}
.ctr-sig .c.a{color:#3FD6D6}
.ctr-sig .r{margin-left:auto;color:var(--on-dark-2)}
.ctr-sigfig{margin:0;width:74px;flex:none;align-self:center}
.ctr-sigfig img{width:74px;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--hair-dark-2);border-radius:var(--r-xs);opacity:.92}
.ctr-reg{
  margin-top:clamp(46px,5vw,80px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--hair-dark-2);border-left:1px solid var(--hair-dark);
}
.ctr-art{
  padding:clamp(24px,2.4vw,34px) clamp(20px,2vw,28px) clamp(26px,2.6vw,38px);
  border-right:1px solid var(--hair-dark);border-bottom:1px solid var(--hair-dark);
  display:flex;flex-direction:column;gap:14px;min-height:262px;
}
.ctr-art .no{
  font-family:var(--mono);font-size:var(--cap);letter-spacing:.13em;color:#3FD6D6;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:10px;
}
.ctr-art .no span{color:var(--on-dark-2)}
.ctr-art h3{
  font-size:clamp(18px,1.5vw,21px);font-weight:400;letter-spacing:-.028em;line-height:1.2;color:#fff;
  max-width:24ch;
}
.ctr-art p{font-size:var(--tx-sm);line-height:1.62;color:var(--on-dark-2);max-width:44ch}
.ctr-art .rec{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--hair-dark);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-dark-2);font-variant-numeric:tabular-nums;
}
.ctr-art .rec b{color:#3FD6D6;font-weight:400}
.ctr-reg{grid-template-columns:repeat(2,minmax(0,1fr))}
.ctr-reg{grid-template-columns:1fr}
.ctr-art{min-height:0}
.ctr-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,3.4vw,52px);align-items:end;margin-top:clamp(30px,3.2vw,48px)}
.ctr-top{grid-template-columns:1fr;gap:28px}
.ctr-fig{margin:0}
.ctr-fig .im{border:1px solid var(--hair-dark-2);border-radius:var(--r)}
.ctr-fig figcaption{border-top-color:var(--hair-dark)}
.ctr-fig .ct{color:var(--on-dark-2)}
.ctr-fig .ct b{color:#fff}
.ctr.feat .feat-im img{object-position:72% 50%}
.ctr.feat .feat-scrim{
  background:
    linear-gradient(88deg,rgba(17,17,20,.985) 0%,rgba(17,17,20,.965) 40%,rgba(17,17,20,.80) 58%,rgba(17,17,20,.42) 78%,rgba(17,17,20,.18) 100%),
    linear-gradient(to top,rgba(17,17,20,.72),rgba(17,17,20,0) 46%);
}
.ctr.feat .feat-scrim,.cta.feat .feat-scrim{background:linear-gradient(180deg,rgba(17,17,20,.86) 0%,rgba(17,17,20,.975) 42%,#111114 72%)}
.ctr-doc{display:flex;gap:14px;align-items:center;margin-top:clamp(22px,2.4vw,34px);
  padding-top:18px;border-top:1px solid var(--hair-dark-2)}
.ctr-doc .im{width:88px;flex:none;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--hair-dark-2);border-radius:var(--r-xs)}
.ctr-doc .im img{width:100%;height:100%;object-fit:cover}
.ctr-doc .cl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#3FD6D6;display:block}
.ctr-doc .ct{font-size:var(--tx-sm);color:var(--on-dark-2);line-height:1.5;display:block;margin-top:6px;max-width:60ch}
.ctr-doc .ct b{color:#fff;font-weight:400}
.ctr-top--single{display:block}
.ctr-records{
  margin-top:clamp(30px,3.2vw,48px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--hair-dark-2);border-left:1px solid var(--hair-dark);
  border-right:0;
}
.ctr-records > div:last-child{border-right:0}
.ctr-records > div{
  padding:clamp(18px,1.8vw,24px) clamp(16px,1.6vw,22px) clamp(20px,2vw,26px);
  border-right:1px solid var(--hair-dark);border-bottom:1px solid var(--hair-dark);
  display:flex;flex-direction:column;gap:9px;
}
.ctr-records .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#3FD6D6;font-variant-numeric:tabular-nums;
}
.ctr-records .v{font-size:var(--tx-sm);color:var(--on-dark-2);line-height:1.5}
.ctr-records .v b{color:#fff;font-weight:400}
.ctr-records{grid-template-columns:repeat(2,minmax(0,1fr))}
.ctr-records{grid-template-columns:1fr}
/* ==== END CONTRACT BAND ==== */