/* GENERATED by scripts/copy-render-kit-runtime.mjs — do not edit by hand.
 * The www.infoc.com V7 site sheet (CMS-D-221): the canonical CMS-D-054
 * kit, then forms, then slider, then the V7 skin LAST. No overrides.css,
 * no v6.css — this sheet REPLACES site.css for this site rather than
 * loading after it. */
/* Generated from the canonical CMS-D-054 stylesheet; only the remote font transport is replaced. */
@font-face{font-family:'Infoc Modern';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/infoc-modern-latin.woff2') format('woff2')}
@font-face{font-family:'Infoc Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/infoc-mono-latin.woff2') format('woff2')}
@font-face{font-family:'Infoc Mark';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/infoc-mark-latin.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/infoc-modern-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/infoc-mono-latin.woff2') format('woff2')}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/infoc-mark-latin.woff2') format('woff2')}
/* ---- absorbed from ioc-core.css (CMS-D-071) ---- */
/* ============================================================
   INFOC · Carbon-style design foundation
   Geist + 2x grid + INFOC interactive blue (#0001ff)
   Light theme (white / Gray 10). Shared across all directions.
   ============================================================ */


:root{
  /* Gray family (Carbon) */
  --ioc-white:#ffffff;
  --ioc-g10:#f4f4f4;
  --ioc-g20:#e0e0e0;
  --ioc-g30:#c6c6c6;
  --ioc-g40:#a8a8a8;
  --ioc-g50:#8d8d8d;
  --ioc-g60:#666666;
  --ioc-g70:#525252;
  --ioc-g80:#393939;
  --ioc-g90:#262626;
  --ioc-g100:#161616;

  /* Interactive — INFOC blue */
  --ioc-blue:#0001ff;--ioc-accent:#0001ff;--ioc-accent-hover:#0000c4;--ioc-accent-ink:#0001ff;
  /* CMS-D-095 ③: was #0e8a5f — 4.36:1 as text on white and 3.95:1 on the
     success tint, both AA failures. Green-70 reads 7.72:1 / 7.00:1. */
  --ioc-green:#0e6027;
  --ioc-blue-hover:#0000c4;
  --ioc-focus:#0001ff;

  /* Text */
  --ioc-text-primary:#161616;
  --ioc-text-secondary:#525252;
  --ioc-text-helper:#5c5c5c;
  --ioc-text-on-color:#ffffff;

  /* Lines */
  --ioc-border-subtle:#e0e0e0;
  --ioc-border-strong:#8d8d8d;

  /* Type */
  --ioc-sans:"Manrope", system-ui, -apple-system, sans-serif;
  --ioc-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Carbon spacing scale */
  --ioc-s1:2px;  --ioc-s2:4px;  --ioc-s3:8px;  --ioc-s4:12px; --ioc-s5:16px;
  --ioc-s6:24px; --ioc-s7:32px; --ioc-s8:40px; --ioc-s9:48px; --ioc-s10:64px;
  --ioc-s11:80px; --ioc-s12:96px; --ioc-s13:160px;

  /* Layout */
  --ioc-maxw:1584px;
  --ioc-gutter:32px;
  /* ONE placeholder colour for every form input on the site (owner direction
     2026-08-28). Placeholders were set FIVE different ways — g50, g60, g70,
     an on-brand tint and a raw rgba — and `.field input::placeholder` sat on
     g50 (#8d8d8d), which is 3.4:1 on white and FAILS WCAG AA for the hint text
     a visitor reads to know what to type.
     Built from the existing scale rather than a new literal: it lands ~#757575,
     4.8:1 on white. Lighter than the g60 the campaign forms used (5.7:1), so it
     reads as a hint and not as a filled value, while keeping real headroom over
     the 4.5:1 floor — the lightest fully safe grey is about #767676, so there
     is no room to go lighter than this and stay compliant. */
  --ioc-placeholder:color-mix(in srgb,var(--ioc-g50) 38%,var(--ioc-g60));
  --ioc-container-prose:720px;
  --ioc-container-default:1200px;
  --ioc-container-wide:1440px;

  /* Elevation — subtle, engineered depth */
  --ioc-shadow-sm:0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  --ioc-shadow-md:0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --ioc-shadow-lg:0 12px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --ioc-shadow-card:0 14px 34px -20px rgba(15,17,60,.30);
  --ioc-shadow-pop:0 24px 48px -24px rgba(10,12,60,.22);

  /* Motion */
  --ioc-dur-instant:100ms; --ioc-dur-fast:200ms; --ioc-dur-mid:250ms;
  --ioc-dur-slow:300ms; --ioc-dur-reveal:600ms;
  --ioc-ease:cubic-bezier(.2,.7,.3,1);
  --ioc-ease-out:cubic-bezier(.16,1,.3,1);
  --ioc-ease-in:cubic-bezier(.7,0,.84,0);
  --ioc-ease-inout:cubic-bezier(.65,0,.35,1);

  /* Z-index */
  --ioc-z-raised:10; --ioc-z-sticky:20; --ioc-z-dropdown:30; --ioc-z-tooltip:40;
  --ioc-z-overlay:50; --ioc-z-modal:60; --ioc-z-toast:70;
}

/* ---- P37 role layer (CMS-D-094/095) · literal-valued semantic roles ----
   Rules consume these instead of raw hex; the T16 gate ratchets the raw hex
   to zero across Wave T. Only LITERAL-valued roles may live at :root —
   an alias (a value containing var()) declared here substitutes on <html>
   and FREEZES at its code default, blind to the emitter's body.ioc-site
   overrides; aliases live in the body.ioc-site block below. Values with a
   deliberate delta from the literals they absorb (--ioc-success vs the
   #42be65 it replaces) are CMS-D-095 ③ decisions, applied at Wave T2b. */
:root{
  /* surfaces · light */
  --ioc-surface:#ffffff;
  --ioc-surface-subtle:#fbfbfb;
  --ioc-surface-cool:#f2f4f8;
  --ioc-surface-hover:#e8e8e8;
  --ioc-hover-wash:#f7faff;
  --ioc-selected-surface:#edf5ff;
  --ioc-selected-border:#c6d9ff;
  /* surfaces · inverse / brand */
  --ioc-surface-inverse-raised:#1c1c1c;
  --ioc-surface-brand:#001d6c;
  --ioc-surface-brand-deep:#001141;
  /* on-color text/border — the #fff split (CMS-D-094 ①) */
  /* T2b: the --blue-on-dark repair — four sites consumed a name declared
     NOWHERE (invalid at computed-value time; they rendered inherited
     colour) and now consume this declared role. Census-named. */
  --ioc-accent-on-inverse:#78a9ff;
  --ioc-border-on-color:#ffffff;
  /* Wave A: text on PRIMARY fills. Skin-derived by the emitter — dark's
     primary is Carbon blue-40, a light fill needing ink text (7.68:1),
     while white on it reads 2.3:1. Accent fills keep --ioc-text-on-color:
     family accents are AA-proven with white by the family spec. */
  --ioc-text-on-primary:#ffffff;
  --ioc-text-on-brand-soft:#e5e5ff;
  --ioc-text-on-brand-muted:#d0d0ff;
  --ioc-text-on-brand-deep:#d0e2ff;
  --ioc-accent-on-brand:#8c8cff;
  /* status */
  --ioc-danger:#da1e28;
  --ioc-danger-text:#a2191f;
  --ioc-danger-surface:#fff1f1;
  --ioc-danger-on-color:#ff8389;
  --ioc-success:#198038;
  --ioc-success-surface:#defbe6;
  /* family palette constants — code-owned; the [data-page-family] sources
     alias these at Wave T3 (a DIFFERENT name, so no var() self-reference) */
  --ioc-fam-academy:#6929c4;
  --ioc-fam-academy-hover:#55209c;
  --ioc-fam-talents:#1a7a52;
  --ioc-fam-talents-hover:#145f40;
  --ioc-fam-talents-ink:#146245;
  --ioc-fam-industries:#007d79;
  --ioc-fam-industries-ink:#005d5d;
  --ioc-fam-company:#4d5358;
  /* Wave C component roles — each bound to a tab field, each consumed
     below. The header surface keeps the kit's translucent-blur alpha; the
     emitter rebuilds it from a validated hex via color-mix. */
  --ioc-header-surface:rgba(255,255,255,.94);
  --ioc-header-active:#0001ff;
  --ioc-crumb:#5c5c5c;
  --ioc-crumb-current:#0001ff;
  /* residue constants (CMS-D-095 ⑤ — found, not named) */
  --ioc-magenta:#9f1853;
  --ioc-teal:#08bdba;
  --ioc-wash-pink:#fff1f7;
}
/* Aliased roles: substitution happens ON body, after the admin emitter's
   overrides cascade onto that same element, so a store change to the
   primitive flows through the role for every descendant. */
body.ioc-site{
  /* T2b freeze repair: at :root this substituted var(--ioc-blue) on <html>
     and froze — focus rings ignored the admin primary. Here it follows. */
  --ioc-shadow-focus:0 0 0 2px var(--ioc-surface,#ffffff), 0 0 0 5px var(--ioc-blue);
  --ioc-surface-sunken:var(--ioc-g10);
  --ioc-surface-inverse:var(--ioc-g100);
  --ioc-text-on-inverse-muted:var(--ioc-g30);
  /* Wave C: the footer follows the page surface (and therefore the skin)
     until its own field says otherwise. */
  --ioc-footer-surface:var(--ioc-surface);
}

body.ioc-site *{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* P36 / CMS-D-092 — the admin-governed tokens are CONSUMED here. Each carries
   the previous literal as its `var()` fallback, so a page rendered without the
   token block (anything outside the `[siteKey]` segment) is byte-identical to
   before. `--ioc-text-primary` was already a token and already inherited by
   headings, which is what makes item 6 reachable without an element-level
   heading colour rule that would break the inverse sections. */
body.ioc-site{
  /* CMS-D-093 — the `skin` field's OWN consumer. Without it the control would be
     stored, shown, and read by nothing (the CMS-D-081 dangling-store defect).
     This is what makes native controls, scrollbars and form widgets follow a
     dark site instead of staying stubbornly light against it. */
  color-scheme:var(--ioc-color-scheme,light);
  margin:0;
  font-family:var(--ioc-body-family,var(--ioc-sans));
  color:var(--ioc-text-primary);
  background:var(--ioc-white);
  font-size:var(--ioc-body-size,16px);
  line-height:var(--ioc-body-line-height,1.5);
  font-weight:var(--ioc-body-weight,400);
}
body.ioc-site a{color:inherit;text-decoration:none}
body.ioc-site img{max-width:100%;display:block}
body.ioc-site ::selection{background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
:focus-visible{outline:none;box-shadow:var(--ioc-shadow-focus)}

/* Skip link — first focusable element on every page */
.skip-link{position:absolute;left:16px;top:-48px;z-index:var(--ioc-z-toast);background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);padding:12px 20px;font-family:var(--ioc-sans);font-size:14px;font-weight:500;transition:top .15s var(--ioc-ease-out)}
.skip-link:focus-visible{top:16px;box-shadow:var(--ioc-shadow-focus)}

/* Metrics never shift layout while counting */
.statstrip .sn b,.a-stat .num,[data-countup],.tnum{font-variant-numeric:tabular-nums}

/* ---------- Type scale (Carbon productive/expressive) ---------- */
.eyebrow{
  font-family:var(--ioc-mono);
  font-size:12px;
  letter-spacing:.32px;
  text-transform:uppercase;
  color:var(--ioc-text-secondary);
  font-weight:400;
  margin:0;
}
.eyebrow .dot{color:var(--ioc-blue)}
/* P36 (CMS-D-092 phase) — `:where()` carries ZERO specificity, so this reads as
   the source's bare `h1,h2,h3,h4` (0-0-1) while keeping CMS-D-071 deviation #5's
   scoping intent. Written as `body.ioc-site h1` it scored 0-1-2 and silently
   outranked EVERY single-class block heading rule in this file; measured against
   the served design source, 8 of 41 headings on the home page rendered at 600
   instead of 700. The scope must not also be a priority. */
:where(body.ioc-site) h1,:where(body.ioc-site) h2,:where(body.ioc-site) h3,:where(body.ioc-site) h4{letter-spacing:-.01em;margin:0;line-height:1.12;font-family:var(--ioc-heading-family,inherit)}
/* Split per level so CMS-D-092's per-level weights have somewhere to land. The
   `600` fallbacks preserve the grouped rule this replaced, byte for byte, when
   no token block is present. Still 0-0-1: the scope must not be a priority. */
.display-xl{font-size:clamp(48px,6.6vw,104px);font-weight:600;line-height:.98;letter-spacing:-.03em}
.display-l{font-size:clamp(40px,4.6vw,72px);font-weight:600;line-height:1.04;letter-spacing:-.028em}
.display-m{font-size:clamp(30px,3.2vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.015em}
.heading{font-size:clamp(22px,2vw,30px);font-weight:600;line-height:1.18;letter-spacing:-.01em}
.body-l{font-size:clamp(18px,1.4vw,21px);line-height:1.55;color:var(--ioc-text-secondary);font-weight:400;letter-spacing:-.003em;text-wrap:pretty}
.display-xl,.display-l,.display-m{text-wrap:balance}
.body{font-size:16px;line-height:1.55;color:var(--ioc-text-secondary)}
.body-s{font-size:14px;line-height:1.5;color:var(--ioc-text-secondary)}
.fw300{font-weight:300}
.thin-accent{color:var(--ioc-blue)}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--ioc-maxw);margin:0 auto;padding:0 var(--ioc-gutter)}
.grid16{display:grid;grid-template-columns:repeat(16,1fr);gap:0}
.section{padding-top:112px;padding-bottom:112px}
.section-xl{padding-top:140px;padding-bottom:140px}
.rule{height:1px;background:var(--ioc-border-subtle);border:0;margin:0}
.rule-strong{height:1px;background:var(--ioc-border-strong)}

/* ---------- Buttons (Carbon) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:var(--ioc-s10);
  font-family:var(--ioc-sans);font-size:15px;font-weight:500;line-height:1.2;
  padding:16px 20px;min-width:200px;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:background .16s var(--ioc-ease), color .16s var(--ioc-ease), border-color .16s var(--ioc-ease), box-shadow .16s var(--ioc-ease);
  text-align:left;
}
.btn svg{width:18px;height:18px;flex:none;transition:transform .2s var(--ioc-ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.btn-primary:hover{background:var(--ioc-accent-hover);box-shadow:var(--ioc-shadow-card)}
.btn-primary:active{background:var(--ioc-accent-hover)}
.btn-secondary{background:var(--ioc-g80);color:var(--ioc-text-on-color,#fff)}
.btn-secondary:hover{background:var(--ioc-g70)}
.btn-tertiary{background:transparent;color:var(--ioc-accent);border-color:var(--ioc-accent)}
.btn-tertiary:hover{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.btn-ghost{background:transparent;color:var(--ioc-accent);min-width:auto;padding:8px 0;gap:var(--ioc-s5)}
.btn-ghost:hover{color:var(--ioc-accent-hover)}
.btn-on-dark{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.btn-on-dark.is-ghost{background:transparent;border-color:var(--ioc-g70,#525252);color:var(--ioc-text-on-color,#fff);min-width:200px}
.btn-on-dark.is-ghost:hover{background:var(--ioc-text-on-color,#fff);color:var(--ioc-text-primary,#161616);border-color:var(--ioc-border-on-color,#fff)}

/* inline link with arrow */
.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--ioc-link-color,var(--ioc-blue));font-size:15px;font-weight:400;font-family:var(--ioc-sans)}
.link-arrow svg{width:16px;height:16px;transition:transform .15s ease}
.link-arrow:hover svg{transform:translateX(4px)}

/* tag / chip */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ioc-mono);font-size:12px;letter-spacing:.4px;
  color:var(--ioc-text-secondary);
  border:1px solid var(--ioc-border-subtle);
  padding:6px 12px;background:var(--ioc-white);
  transition:border-color .14s var(--ioc-ease),color .14s var(--ioc-ease),background .14s var(--ioc-ease);
}
.tag:hover{border-color:var(--ioc-g40);color:var(--ioc-text-primary)}
.tag b{color:var(--ioc-blue);font-weight:500}

/* ========================================================
   GLOBAL SHARED SHELL  (INFOC V1 · matches approved reference)
   Header + mega menus + search + mobile drawer + footer +
   cookie consent + chat routing + back-to-top. Mapped to INFOC
   tokens and the locked Manrope / JetBrains Mono stack.
   Header/footer internals are scoped under .ioc-header/.ioc-footer.
   ======================================================== */

/* ---- scroll progress ---- */
.sh-progress{position:fixed;z-index:var(--ioc-z-toast);left:0;right:0;top:0;height:2px;pointer-events:none}
.sh-progress::before{content:"";display:block;width:calc(var(--sp,0) * 1%);height:100%;background:linear-gradient(90deg,var(--ioc-blue),var(--ioc-fam-talents,#1a7a52))}

/* ---- HEADER ---- */
.ioc-header{position:sticky;top:0;z-index:var(--ioc-z-sticky);background:var(--ioc-header-surface,rgba(255,255,255,.94));-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--ioc-border-subtle);transition:box-shadow .25s var(--ioc-ease)}
.ioc-header.scrolled{box-shadow:0 10px 28px -18px rgba(15,17,60,.22)}
.ioc-header .header-row{display:flex;align-items:stretch;height:72px;max-width:none;margin:0 auto;padding:0 var(--ioc-gutter)}
.ioc-header .brand{display:inline-flex;align-items:center;color:var(--ioc-text-primary);margin-right:32px}
/* INFOC Michroma wordmark lockup (static master) */
.infoc-logo{display:inline-flex;align-items:baseline;font-family:"Michroma",sans-serif;font-weight:400;letter-spacing:.11em;line-height:1;padding-bottom:.26em;-webkit-text-stroke:.063em currentColor;paint-order:stroke fill;transform:none}
.infoc-logo .g{display:inline-block}
.infoc-logo .g:first-child{margin-right:-.07em}
.infoc-logo .g:nth-child(2){margin-right:-.04em}
.infoc-logo .gc{position:relative;color:var(--ioc-blue);margin-right:-.02em}
.infoc-logo .gc::after{content:"";position:absolute;left:0;top:calc(100% + .122em);width:calc(100% - .11em);height:.14em;background:currentColor}
.ioc-header .brand .infoc-logo{font-size:23px}
@media (prefers-reduced-motion:no-preference){.ioc-header .brand .infoc-logo .gc{animation:idcHdrInk 1.5s var(--ioc-ease) .25s both}}
@keyframes idcHdrInk{0%{color:var(--ioc-text-primary)}100%{color:var(--ioc-blue)}}
.ioc-header .nav{display:flex;margin-left:auto;align-items:stretch}
.ioc-header .nav-link,.ioc-header .nav-trigger{position:relative;display:flex;align-items:center;gap:6px;padding:0 15px;border:0;background:transparent;font-family:var(--ioc-sans);font-weight:600;font-size:14px;color:var(--ioc-text-secondary);white-space:nowrap;cursor:pointer;transition:color .16s var(--ioc-ease)}
.ioc-header .nav-link::after,.ioc-header .nav-trigger::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:2px;background:var(--ioc-header-active,#0001ff);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ioc-ease)}
.ioc-header .nav-link:hover,.ioc-header .nav-trigger:hover,.ioc-header .nav-trigger[aria-expanded="true"]{color:var(--ioc-text-primary)}
.ioc-header .nav-link:hover::after,.ioc-header .nav-trigger:hover::after,.ioc-header .nav-trigger[aria-expanded="true"]::after{transform:scaleX(1)}
.ioc-header .nav-link[aria-current="page"]{color:var(--ioc-header-active,#0001ff)}
.ioc-header .nav-link[aria-current="page"]::after{transform:scaleX(1)}
.ioc-header .ico-down{width:12px;height:12px;transition:transform .2s var(--ioc-ease)}
.ioc-header .nav-trigger[aria-expanded="true"] .ico-down{transform:rotate(180deg)}
.ioc-header .nav-link,.ioc-header .nav-trigger{text-decoration:none;cursor:pointer}
.mobile-sub .mobile-overview{font-weight:600;color:var(--ioc-blue)}
.ioc-header .nav-trigger[aria-current="page"]{color:var(--ioc-header-active,#0001ff)}
.ioc-header .nav-trigger[aria-current="page"]::after{transform:scaleX(1)}
.ioc-header .header-actions{display:flex;margin-left:6px}
.ioc-header .icon-btn{width:56px;display:grid;place-items:center;border:0;border-left:1px solid var(--ioc-border-subtle);background:transparent;color:var(--ioc-text-primary);cursor:pointer;transition:background .16s var(--ioc-ease),color .16s var(--ioc-ease)}
.ioc-header .icon-btn:hover{background:var(--ioc-g10);color:var(--ioc-blue)}
.ioc-header .icon-btn .ico{width:20px;height:20px}
.ioc-header .top-cta{min-width:176px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 20px;background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);font-weight:600;font-size:13.5px;letter-spacing:-.01em;transition:background .16s var(--ioc-ease)}
.ioc-header .top-cta:hover{background:var(--ioc-blue-hover)}
.ioc-header .top-cta .ico{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.ioc-header .top-cta:hover .ico{transform:translateX(3px)}
.ioc-header .mobile-toggle{display:none}

/* ---- mega panels ---- */
.ioc-header .backdrop{position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(22,22,22,.4);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ioc-ease),visibility .2s}
.ioc-header .backdrop.show{opacity:1;visibility:visible;pointer-events:auto}
.ioc-header .mega{display:block;position:absolute;left:0;right:0;width:auto;top:100%;background:var(--ioc-surface,#fff);border-bottom:1px solid var(--ioc-border-strong);box-shadow:0 24px 48px -24px rgba(10,12,60,.25);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s var(--ioc-ease),transform .28s var(--ioc-ease),visibility .2s;max-height:calc(100vh - 72px);overflow:auto}
.ioc-header .mega.open{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:none}
.ioc-header .mega-inner{width:100%;max-width:none;margin:0 auto;padding:26px var(--ioc-gutter)}
.ioc-header .sol-layout{display:grid;grid-template-columns:minmax(13rem,3fr) minmax(26rem,6fr) minmax(13rem,3fr);gap:clamp(20px,2vw,32px);align-items:start}
.ioc-header .simple-layout{display:grid;grid-template-columns:minmax(13rem,3fr) minmax(30rem,9fr);gap:clamp(20px,2vw,32px);align-items:start}
.ioc-header .featured{display:flex;flex-direction:column;padding:18px;background:var(--ioc-selected-surface,#edf5ff)}
.ioc-header .featured>svg{width:24px;height:24px;color:var(--ioc-blue)}
.ioc-header .featured .mega-label{margin-top:14px}
.ioc-header .featured h3{margin:6px 0 8px;font-size:18px;line-height:1.12;letter-spacing:-.02em;color:var(--ioc-text-primary)}
.ioc-header .featured p{margin:0;color:var(--ioc-text-secondary);font-size:12.5px;line-height:1.5}
.ioc-header .featured>a{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--ioc-selected-border,#c6d9ff);color:var(--ioc-blue);font-weight:600;font-size:14px}
.ioc-header .featured>a .ico{width:16px;height:16px}
.ioc-header .mega-label{color:var(--ioc-blue);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ioc-header .mega-intro h2{font-size:clamp(19px,1.5vw,24px);line-height:1.08;letter-spacing:-.025em;margin:8px 0;max-width:16ch}
.ioc-header .mega-intro p{color:var(--ioc-text-secondary);line-height:1.5;font-size:13px;max-width:38ch}
.ioc-header .view-all{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--ioc-blue);font-weight:600;font-size:13px}
.ioc-header .view-all .ico{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.ioc-header .view-all:hover .ico{transform:translateX(3px)}
.ioc-header .group-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ioc-border-subtle);border-left:1px solid var(--ioc-border-subtle)}
.ioc-header .menu-group{padding:14px 16px;border-right:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-header .menu-group h3{margin:0 0 8px;color:var(--ioc-blue);font-family:var(--ioc-mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.ioc-header .menu-group a{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;padding:9px 0;border-top:1px solid var(--ioc-border-subtle);color:var(--ioc-text-primary)}
.ioc-header .menu-group a:first-of-type{border-top:0}
.ioc-header .menu-group .mg-ico{margin-top:2px}
.ioc-header .menu-group .mg-ico svg{width:18px;height:18px;color:var(--ioc-blue)}
.ioc-header .menu-group strong{display:block;font-size:13.5px;font-weight:600;transition:color .14s var(--ioc-ease)}
.ioc-header .menu-group .mg-txt>span{display:block;margin-top:3px;color:var(--ioc-text-secondary);font-size:12px;font-weight:400;line-height:1.45}
.ioc-header .menu-group a>.ico{width:15px;height:15px;margin-top:2px;color:var(--ioc-blue);flex:none;transition:transform .16s var(--ioc-ease)}
.ioc-header .menu-group a:hover>.ico{transform:translateX(3px)}
.ioc-header .menu-group a:hover strong{color:var(--ioc-blue)}
.ioc-header .simple-links{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ioc-border-subtle);border-left:1px solid var(--ioc-border-subtle)}
.ioc-header .simple-links a{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:16px;border-right:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle);color:var(--ioc-text-primary);transition:background .16s var(--ioc-ease)}
.ioc-header .simple-links a .ico{width:22px;height:22px;color:var(--ioc-blue)}
.ioc-header .simple-links [data-tile]{display:block}
.ioc-header .simple-links [data-tile] svg{width:20px;height:20px;color:var(--ioc-blue)}
.ioc-header .simple-links .mega-label{margin-bottom:2px}
.ioc-header .simple-links strong{font-size:15px;font-weight:600}
.ioc-header .simple-links span{color:var(--ioc-text-secondary);font-size:12.5px;line-height:1.45}
.ioc-header .simple-links a:hover{background:var(--ioc-g10)}
.ioc-header .simple-links a:hover strong{color:var(--ioc-blue)}

/* ---- mobile drawer ---- */
.sh-drawer{position:fixed;z-index:var(--ioc-z-modal);inset:0 0 0 auto;width:min(92vw,28rem);background:var(--ioc-surface,#fff);transform:translateX(102%);transition:transform .32s var(--ioc-ease);box-shadow:-2rem 0 5rem rgba(0,0,0,.18);display:flex;flex-direction:column}
.sh-drawer.open{transform:none}
.sh-drawer .mobile-head{height:64px;display:flex;align-items:center;justify-content:space-between;padding-left:20px;border-bottom:1px solid var(--ioc-border-subtle)}
.sh-drawer .brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.04em;color:var(--ioc-text-primary)}
.sh-drawer .brand .infoc-logo{font-size:21px}
.sh-drawer .icon-btn{width:56px;height:56px;display:grid;place-items:center;border:0;background:transparent;color:var(--ioc-text-primary);cursor:pointer}
.sh-drawer .icon-btn .ico{width:20px;height:20px}
.sh-drawer .mobile-nav{overflow:auto;flex:1}
.sh-drawer .mobile-nav>a,.sh-drawer .mobile-nav>button{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border:0;border-bottom:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);text-align:left;font-family:var(--ioc-sans);font-weight:600;font-size:15px;color:var(--ioc-text-primary);cursor:pointer}
.sh-drawer .mobile-nav .ico-down{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.sh-drawer .mobile-nav>button[aria-expanded="true"] .ico-down{transform:rotate(180deg)}
.sh-drawer .mobile-sub{display:grid;grid-template-rows:0fr;background:var(--ioc-g10);transition:grid-template-rows .25s var(--ioc-ease)}
.sh-drawer .mobile-sub.open{grid-template-rows:1fr}
.sh-drawer .mobile-sub>div{overflow:hidden}
.sh-drawer .mobile-sub a{display:block;padding:13px 28px;border-bottom:1px solid var(--ioc-border-subtle);color:var(--ioc-text-secondary);font-size:14px}
.sh-drawer .drawer-cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);font-weight:600}
.sh-drawer .drawer-cta .ico{width:16px;height:16px}

/* ---- search overlay ---- */
.sh-search{position:fixed;z-index:var(--ioc-z-overlay);inset:0;background:rgba(22,22,22,.65);display:grid;place-items:start center;padding-top:6rem;opacity:0;visibility:hidden;transition:opacity .2s var(--ioc-ease),visibility .2s}
.sh-search.show{opacity:1;visibility:visible}
.sh-search .search-panel{width:min(calc(100% - 2rem),54rem);background:var(--ioc-surface,#fff);box-shadow:0 2rem 6rem rgba(0,0,0,.25)}
.sh-search .search-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.sh-search .icon-btn{width:40px;height:40px;display:grid;place-items:center;border:0;background:transparent;color:var(--ioc-text-primary);cursor:pointer}
.sh-search .icon-btn .ico{width:18px;height:18px}
.sh-search>.search-panel>label{display:block;padding:24px 24px 6px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.sh-search .search-input{display:flex;align-items:center;gap:12px;margin:0 24px 16px;padding:0 14px;background:var(--ioc-g10);border-bottom:2px solid var(--ioc-text-primary)}
.sh-search .search-input .ico{width:18px;height:18px;color:var(--ioc-text-helper)}
.sh-search .search-input input{width:100%;height:60px;border:0;background:transparent;font-family:var(--ioc-sans);font-size:17px;outline:none;color:var(--ioc-text-primary)}
.sh-search .search-results{border-top:1px solid var(--ioc-border-subtle)}
.sh-search .search-results a{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;border-bottom:1px solid var(--ioc-border-subtle);color:var(--ioc-text-primary);font-size:14.5px}
.sh-search .search-results a .ico{width:16px;height:16px;color:var(--ioc-blue);transition:transform .2s var(--ioc-ease)}
.sh-search .search-results a:hover{background:var(--ioc-g10);color:var(--ioc-blue)}
.sh-search .search-results a:hover .ico{transform:translateX(3px)}

/* ---- FOOTER ---- */
.ioc-footer{position:relative;border-top:1px solid var(--ioc-border-subtle);background:var(--ioc-footer-surface,#fff);color:var(--ioc-text-primary)}
.ioc-footer .fwrap{max-width:var(--ioc-maxw);margin:0 auto;padding:0 var(--ioc-gutter)}
.ioc-footer .footer-cta{background:linear-gradient(115deg,var(--ioc-selected-surface,#edf5ff) 0%,var(--ioc-hover-wash,#f7faff) 58%,var(--ioc-wash-pink,#fff1f7) 150%);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-footer .footer-cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(2.5rem,5vw,5rem);align-items:start;padding-block:clamp(64px,7vw,112px)}
.ioc-footer .fcta-eyebrow{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-accent)}
.ioc-footer .footer-cta h2{max-width:11ch;font-size:clamp(40px,6vw,92px);line-height:.96;letter-spacing:-.045em;margin:14px 0 0;font-weight:800}
.ioc-footer .footer-cta h2 .em{color:var(--ioc-accent)}
.ioc-footer .footer-action{padding-left:clamp(1.5rem,3vw,3rem);border-left:1px solid var(--ioc-selected-border,#c6d9ff)}
.ioc-footer .footer-action .fa-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-accent)}
.ioc-footer .footer-action h3{font-size:clamp(22px,2.4vw,30px);line-height:1.08;letter-spacing:-.02em;margin:12px 0}
.ioc-footer .footer-action p{max-width:35rem;color:var(--ioc-text-secondary);line-height:1.6;font-size:14.5px;margin:0}
.ioc-footer .fa-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ioc-border-subtle);margin:14px 0 20px;max-width:36rem}
.ioc-footer .fa-tab{min-height:3rem;padding:0 1rem;background:var(--ioc-surface,#fff);border:0;border-right:1px solid var(--ioc-border-subtle);font:inherit;font-weight:600;font-size:13px;color:var(--ioc-text-secondary);cursor:pointer;text-align:left;transition:background .2s,color .2s}
.ioc-footer .fa-tab:last-child{border-right:0}
.ioc-footer .fa-tab[aria-selected="true"]{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.ioc-footer .fa-panel{display:none}
.ioc-footer .fa-panel.active{display:block}
.ioc-footer .footer-action-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:22px 0;background:var(--ioc-selected-border,#c6d9ff);border:1px solid var(--ioc-selected-border,#c6d9ff)}
.ioc-footer .footer-action-points span{min-height:4.25rem;padding:12px;background:rgba(255,255,255,.75);font-size:12px;line-height:1.4;color:var(--ioc-text-secondary)}
.ioc-footer .footer-action-points b{display:block;margin-bottom:4px;color:var(--ioc-accent);font-family:var(--ioc-mono);font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.ioc-footer .footer-button{display:flex;align-items:center;justify-content:space-between;width:min(100%,24rem);min-height:56px;padding:16px 18px;background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);font-weight:600;transition:background .2s var(--ioc-ease),transform .2s var(--ioc-ease)}
.ioc-footer .footer-button:hover{background:var(--ioc-accent-hover);transform:translateY(-2px)}
.ioc-footer .footer-button .ico{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.ioc-footer .footer-button:hover .ico{transform:translateX(3px)}
.ioc-footer .footer-routes{background:var(--ioc-surface,#fff);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-footer .route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-inline:1px solid var(--ioc-border-subtle)}
.ioc-footer .route{min-height:9rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:26px 28px;border-right:1px solid var(--ioc-border-subtle);color:var(--ioc-text-primary);transition:background .2s var(--ioc-ease),color .2s var(--ioc-ease)}
.ioc-footer .route:last-child{border-right:0}
.ioc-footer .route .rn{display:inline-flex;align-items:center;justify-content:center;color:var(--ioc-accent)}
.ioc-footer .route .rn svg{width:26px;height:26px;stroke-width:1.5}
.ioc-footer .route b{display:block;margin-bottom:4px;font-size:16px;letter-spacing:-.01em}
.ioc-footer .route small{display:block;color:var(--ioc-text-secondary);line-height:1.45;font-size:13px}
.ioc-footer .route .ico{width:18px;height:18px;color:var(--ioc-accent);transition:transform .2s var(--ioc-ease)}
.ioc-footer .route:hover{background:var(--ioc-g10);color:var(--ioc-accent)}
.ioc-footer .route:hover .ico{transform:translateX(3px)}
.ioc-footer .footer-main-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) minmax(0,1.75fr);gap:clamp(28px,3.2vw,56px);align-items:start;padding-block:clamp(56px,6vw,88px)}
.ioc-footer .footer-brand{padding-right:clamp(24px,3vw,48px)}
.ioc-footer .footer-menu{padding-left:0}
.ioc-footer .footer-brand .brand{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.04em;color:var(--ioc-text-primary)}
.ioc-footer .footer-brand .brand .infoc-logo{font-size:30px}
.ioc-footer .footer-brand .brand.footer-lockup{display:inline-flex;align-items:center;gap:16px}
.ioc-footer .footer-lockup .navdiv{width:1px;height:1.9em;background:var(--ioc-border-subtle);flex:none}
.ioc-footer .footer-lockup .navword{font-family:var(--ioc-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-primary);white-space:nowrap;opacity:0;transform:translateY(.4em);transition:opacity .5s var(--ioc-ease),transform .5s var(--ioc-ease)}
.ioc-footer .footer-lockup .navword.in{opacity:1;transform:none}
.ioc-footer .footer-lockup .infoc-logo.suffixing .gc::after{opacity:0;transition:opacity .3s var(--ioc-ease)}
.ioc-footer .footer-brand>p{max-width:30rem;color:var(--ioc-text-secondary);line-height:1.6;font-size:14px;margin:18px 0 0}
.ioc-footer .footer-menu-stack{display:flex;flex-direction:column;gap:28px}
.ioc-footer .footer-menu-stack nav>h3{margin-top:0}
.ioc-footer .footer-contact{display:flex;flex-direction:column;margin-top:2px}
.ioc-footer .footer-contact .fc-row{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid var(--ioc-border-subtle)}
.ioc-footer .footer-contact .fc-row:first-child{border-top:0;padding-top:0}
.ioc-footer .footer-contact .fc-k{font-size:14px;color:var(--ioc-text-secondary);font-weight:500;letter-spacing:-.01em}
.ioc-footer .footer-contact .fc-v{justify-self:end;text-align:right;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ioc-text-primary);line-height:1.35;text-decoration:none}
.ioc-footer .footer-contact a.fc-v{transition:color .16s var(--ioc-ease)}
.ioc-footer .footer-contact a.fc-v:hover{color:var(--ioc-accent)}
.ioc-footer .footer-menu h3{margin:0 0 16px;font-family:var(--ioc-mono);font-size:11px;font-weight:400;color:var(--ioc-accent);letter-spacing:.12em;text-transform:uppercase}
.ioc-footer .footer-menu a{display:flex;align-items:center;min-height:32px;padding:4px 0;color:var(--ioc-g80,#393939);line-height:1.35;font-size:14px;transition:color .16s var(--ioc-ease),transform .16s var(--ioc-ease)}
.ioc-footer .footer-menu a:hover{color:var(--ioc-accent);transform:translateX(3px)}
.ioc-footer .footer-contact-band{border-top:1px solid var(--ioc-border-subtle)}
.ioc-footer .footer-contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,56px);align-items:start;padding-block:clamp(28px,3vw,40px)}
.ioc-footer .fc-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.ioc-footer .fc-label{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-accent)}
.ioc-footer .fc-value{color:var(--ioc-text-primary);font-size:15px;font-weight:600;line-height:1.4;word-break:break-word;text-decoration:none}
.ioc-footer a.fc-value:hover{color:var(--ioc-accent)}
@media(max-width:760px){.ioc-footer .footer-contact-grid{grid-template-columns:1fr 1fr}}
.ioc-footer .legal{background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff)}
.ioc-footer .legal-row{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px;color:var(--ioc-g30,#c6c6c6);font-size:12.5px;flex-wrap:wrap}
.ioc-footer .legal-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ioc-footer .legal-links span,.ioc-footer .legal-links a,.ioc-footer .legal-button{color:var(--ioc-g30,#c6c6c6);font-size:inherit}
.ioc-footer .legal-button{border:0;background:transparent;padding:0;cursor:pointer;font-family:var(--ioc-sans)}
.ioc-footer .legal-links a:hover,.ioc-footer .legal-button:hover{color:var(--ioc-text-on-color,#fff);text-decoration:underline}
.ioc-footer .social{display:flex;gap:8px}
.ioc-footer .social a,.ioc-footer .social button{width:34px;height:34px;border:1px solid var(--ioc-g80,#393939);display:flex;align-items:center;justify-content:center;color:var(--ioc-g30,#c6c6c6);background:transparent;cursor:pointer;padding:0}
.ioc-footer .social a:hover,.ioc-footer .social button:hover{border-color:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);background:var(--ioc-accent)}
.ioc-footer .social button svg{width:16px;height:16px}
.ioc-footer .back-top{border:0;background:transparent;color:var(--ioc-text-on-color,#fff);display:flex;align-items:center;gap:8px;padding:6px;cursor:pointer;font-family:var(--ioc-sans);font-size:12.5px}
.ioc-footer .back-top .ico{width:16px;height:16px;transform:rotate(-90deg);transition:transform .2s var(--ioc-ease)}
.ioc-footer .back-top:hover .ico{transform:rotate(-90deg) translateX(3px)}

/* ---- cookie consent ---- */
/* C3 · corner card. A notice in the lower-left corner rather than a
   full-width curtain: the footer and the rest of the viewport stay
   readable, and it does not share the bottom-right with the chat
   launcher. Accept spans the card; reject sits beside preferences at
   the same size, so rejecting is still one click. */
.sh-cookie{position:fixed;z-index:var(--ioc-z-toast);left:20px;bottom:var(--lift-bottom,20px);transition:bottom .18s var(--ioc-ease);width:min(26rem,calc(100vw - 40px));background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-strong);border-top:3px solid var(--ioc-blue);box-shadow:0 1.5rem 4rem rgba(0,0,0,.18)}
.sh-cookie[hidden]{display:none}
.sh-cookie .cookie-grid{display:grid;grid-template-columns:1fr;gap:16px;padding:20px}
.sh-cookie .cookie-copy{max-width:none}
.sh-cookie .cookie-copy strong{display:block;margin-bottom:4px;font-size:15px}
.sh-cookie .cookie-copy p{margin:0;color:var(--ioc-text-secondary);font-size:13px;line-height:1.55}
.sh-cookie .cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sh-cookie .cookie-actions .primary{grid-column:1/-1;order:-1}
.sh-cookie .cookie-actions .sh-cookie-btn{display:flex;align-items:center;justify-content:center;min-height:42px;font-size:13px;text-align:center}
.sh-cookie-btn{min-height:44px;padding:10px 16px;border:1px solid var(--ioc-text-primary);background:var(--ioc-surface,#fff);font-family:var(--ioc-sans);font-weight:600;font-size:13.5px;cursor:pointer;transition:background .16s var(--ioc-ease)}
.sh-cookie-btn:hover{background:var(--ioc-g10)}
.sh-cookie-btn.primary{border-color:var(--ioc-blue);background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.sh-cookie-btn.primary:hover{background:var(--ioc-blue-hover)}
.sh-cookie-dialog{width:min(calc(100% - 2rem),44rem);padding:0;border:0;background:var(--ioc-surface,#fff);box-shadow:0 2rem 6rem rgba(0,0,0,.35)}
.sh-cookie-dialog::backdrop{background:rgba(22,22,22,.64)}
.sh-cookie-dialog .cd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding:24px;border-bottom:1px solid var(--ioc-border-subtle)}
.sh-cookie-dialog .cd-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-blue)}
.sh-cookie-dialog .cd-head h2{margin:6px 0 0;font-size:26px;line-height:1.1;letter-spacing:-.02em}
.sh-cookie-dialog .icon-btn{width:44px;height:44px;display:grid;place-items:center;border:0;background:var(--ioc-surface,#fff);cursor:pointer}
.sh-cookie-dialog .icon-btn .ico{width:18px;height:18px}
.sh-cookie-dialog .cd-body{padding:24px}
.sh-cookie-dialog .cd-body>p{color:var(--ioc-text-secondary);line-height:1.6;font-size:14px;margin:0}
.sh-cookie-dialog .cookie-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:16px 0;border-top:1px solid var(--ioc-border-subtle)}
.sh-cookie-dialog .cookie-option:first-of-type{margin-top:16px}
.sh-cookie-dialog .cookie-option strong{display:block;font-size:14.5px}
.sh-cookie-dialog .cookie-option small{display:block;margin-top:3px;color:var(--ioc-text-secondary);line-height:1.45;font-size:12.5px}
.sh-switch{position:relative;width:48px;height:26px;flex:none}
.sh-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sh-switch .ui{position:absolute;inset:0;background:var(--ioc-g50,#8d8d8d);transition:background .2s var(--ioc-ease)}
.sh-switch .ui::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--ioc-text-on-color,#fff);transition:transform .2s var(--ioc-ease)}
.sh-switch input:checked+.ui{background:var(--ioc-blue)}
.sh-switch input:checked+.ui::after{transform:translateX(22px)}
.sh-switch input:disabled+.ui{opacity:.6}
.sh-cookie-dialog .cd-actions{display:flex;justify-content:flex-end;gap:10px;padding:20px 24px;border-top:1px solid var(--ioc-border-subtle)}

/* ---- chat routing ---- */
/* --lift-bottom is written by ioc-site.js on both bottom-fixed overlays
   so each rides above whatever currently occupies the bottom of the
   viewport: the footer legal row, and for the launcher the consent
   card when they share a column. */
.sh-chat{position:fixed;z-index:var(--ioc-z-toast);right:20px;bottom:var(--lift-bottom,20px);transition:bottom .18s var(--ioc-ease)}
.sh-chat .chat-launcher{min-height:52px;display:flex;align-items:center;gap:10px;padding:12px 16px;border:0;background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);font-family:var(--ioc-sans);font-weight:600;font-size:14px;box-shadow:0 12px 30px -10px rgba(0,1,255,.5);cursor:pointer;transition:background .2s var(--ioc-ease),transform .2s var(--ioc-ease),bottom .25s var(--ioc-ease)}
.sh-chat .chat-launcher:hover{background:var(--ioc-blue-hover);transform:translateY(-2px)}
.sh-chat .chat-launcher .ico{width:18px;height:18px}
.sh-chat .chat-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(calc(100vw - 40px),23rem);background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);box-shadow:0 1.5rem 4rem rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:bottom right;transition:opacity .2s var(--ioc-ease),transform .25s var(--ioc-ease),visibility .2s}
.sh-chat .chat-panel.open{opacity:1;visibility:visible;transform:none}
.sh-chat .chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px;border-bottom:1px solid var(--ioc-border-subtle)}
.sh-chat .chat-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-blue)}
.sh-chat .chat-head h2{margin:6px 0 0;font-size:22px;line-height:1.1;letter-spacing:-.02em}
.sh-chat .icon-btn{width:40px;height:40px;display:grid;place-items:center;border:0;background:var(--ioc-surface,#fff);cursor:pointer}
.sh-chat .icon-btn .ico{width:18px;height:18px}
.sh-chat .chat-body{padding:16px}
.sh-chat .chat-body>p{margin:2px 0 12px;color:var(--ioc-text-secondary);font-size:13px;line-height:1.55}
.sh-chat .chat-route{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--ioc-border-subtle);color:var(--ioc-text-primary)}
.sh-chat .chat-route:first-of-type{border-top:0}
.sh-chat .chat-route strong{display:block;font-size:14px}
.sh-chat .chat-route small{display:block;margin-top:2px;color:var(--ioc-text-secondary);font-size:12px}
.sh-chat .chat-route .ico{width:16px;height:16px;color:var(--ioc-blue);transition:transform .2s var(--ioc-ease)}
.sh-chat .chat-route:hover{color:var(--ioc-blue)}
.sh-chat .chat-route:hover .ico{transform:translateX(3px)}
.sh-chat .chat-foot{padding:14px 16px;background:var(--ioc-g10);color:var(--ioc-text-secondary);font-size:12px;line-height:1.5}

/* ---- shell responsive ---- */
@media(max-width:1180px){
  .ioc-header .nav-link,.ioc-header .nav-trigger{padding:0 11px;font-size:13.5px}
  .ioc-header .brand{margin-right:18px}
}
@media(max-width:1000px){
  .ioc-header .nav,.ioc-header .search-open,.ioc-header .top-cta{display:none}
  .ioc-header .mobile-toggle{display:grid}
  .ioc-header .header-row{height:64px}
  .ioc-header .mega{display:none}
}
@media(max-width:900px){
  .ioc-footer .footer-cta-grid{grid-template-columns:1fr}
  .ioc-footer .footer-action{padding:32px 0 0;border-left:0;border-top:1px solid var(--ioc-selected-border,#c6d9ff)}
  .ioc-footer .route-grid{grid-template-columns:1fr;border-inline:0}
  .ioc-footer .route{border-right:0;border-top:1px solid var(--ioc-border-subtle)}
  .ioc-footer .route:first-child{border-top:0}
  .ioc-footer .footer-main-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3rem)}
  .ioc-footer .footer-brand{grid-column:1/-1;padding-right:0;padding-bottom:28px;border-right:0;border-bottom:1px solid var(--ioc-border-subtle)}
  .ioc-footer .footer-menu{padding-left:0}
}
@media(max-width:560px){
  .ioc-footer .footer-action-points{grid-template-columns:1fr}
  .ioc-footer .footer-main-grid{grid-template-columns:1fr 1fr;column-gap:24px}
  .ioc-footer .footer-menu:last-child{grid-column:1/-1}
  .ioc-footer .legal-row{flex-direction:column;align-items:flex-start}
  /* Card and chat launcher share the bottom edge; on a narrow screen
     the card spans it and the launcher sits above. */
  .sh-cookie{left:12px;right:12px;width:auto}
  .sh-chat .chat-launcher span{display:none}
  .sh-chat .chat-launcher{width:52px;justify-content:center;padding:0}
}

/* ========================================================
   PAGE SHELL — breadcrumb, hero, section heads
   ======================================================== */
.crumb{border-bottom:1px solid var(--ioc-border-subtle)}
.crumb .crumb-inner{max-width:var(--ioc-maxw);margin:0 auto;padding:14px var(--ioc-gutter);display:flex;align-items:center;gap:10px;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.3px;color:var(--ioc-text-helper)}
.crumb a{color:var(--ioc-text-helper)}
.crumb a:hover{color:var(--ioc-blue)}
.crumb .sep{color:var(--ioc-g30)}
.crumb .cur{color:var(--ioc-text-primary)}

/* refined in-hero breadcrumb: bordered back-chevron + path trail */
.ph-trail{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.ph-trail .back{width:36px;height:36px;flex:none;border:1px solid var(--ioc-border-strong);display:flex;align-items:center;justify-content:center;color:var(--ioc-text-primary);transition:background .12s,color .12s,border-color .12s}
.ph-trail .back svg{width:16px;height:16px}
.ph-trail .back:hover{background:var(--ioc-blue);border-color:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.ph-trail .path{display:flex;align-items:center;gap:9px;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.3px;text-transform:uppercase}
.ph-trail .path a{color:var(--ioc-crumb,#5c5c5c)}
.ph-trail .path a:hover{color:var(--ioc-blue)}
.ph-trail .path .sep{color:var(--ioc-g30)}
.ph-trail .path .cur{color:var(--ioc-crumb-current,#0001ff)}

.page-hero{border-bottom:1px solid var(--ioc-border-subtle)}
/* hero 07 — capability tags, single column */
.page-hero .ph-solo{padding:88px 0 80px}
.page-hero .ph-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.page-hero .ph-solo h1{max-width:18ch}
.page-hero .ph-solo .ph-lede{max-width:56ch}
.page-hero .ph-solo .ph-cta{display:flex;flex-wrap:wrap;gap:0;margin-top:36px}

/* hero — solo with side figure (uses .phf-frame) */
.page-hero .ph-solo.has-fig{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,38%,560px);column-gap:64px;align-items:center}
.ph-solo.has-fig>*{grid-column:1}
.ph-solo.has-fig .ph-fig{grid-column:2;grid-row:1/span 9;align-self:stretch;display:flex;border-left:1px solid var(--ioc-border-subtle);padding:0 0 0 48px}
.ph-solo.has-fig .ph-fig .phf-frame{flex:1;min-height:380px}
@media(max-width:980px){
  .page-hero .ph-solo.has-fig{display:block}
  .ph-solo.has-fig .ph-fig{border-left:0;padding:0;margin-top:44px}
  .ph-solo.has-fig .ph-fig .phf-frame{min-height:280px}
}

/* imagery motion — slow ken-burns on frame hover */
.phf-frame .pic img{transition:transform var(--ioc-dur-reveal) var(--ioc-ease-out)}
.phf-frame:hover .pic img{transform:scale(1.03)}

/* index — industry figures */
.indcell .indfig{margin-bottom:20px;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--ioc-border-subtle);background:var(--ioc-g10)}
.indcell .indfig img{width:100%;height:100%;object-fit:cover;transition:transform var(--ioc-dur-reveal) var(--ioc-ease-out)}
.indcell:hover .indfig img{transform:scale(1.04)}

/* hero — feature (image + focus strip) */
.page-hero.ph-feature .phf{display:grid;grid-template-columns:repeat(16,1fr);align-items:stretch}
.page-hero.ph-feature .phf-main{grid-column:1 / 9;padding:80px 48px 72px 0;display:flex;flex-direction:column;justify-content:center}
.page-hero.ph-feature .phf-main h1{max-width:16ch}
.page-hero.ph-feature .phf-main .ph-lede{max-width:50ch;margin-top:24px}
.page-hero.ph-feature .phf-main .ph-cta{display:flex;flex-wrap:wrap;gap:0;margin-top:36px}
.page-hero.ph-feature .phf-fig{grid-column:9 / 17;border-left:1px solid var(--ioc-border-subtle);padding:40px 0 40px 40px;display:flex}
.phf-frame{border:1px solid var(--ioc-border-subtle);flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:400px}
.phf-frame .cap{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--ioc-border-subtle);background:var(--ioc-g10);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-text-helper)}
.phf-frame .cap .dots{display:flex;gap:6px}
.phf-frame .cap .dots i{width:8px;height:8px;border:1px solid var(--ioc-g40);display:block}
.phf-frame .cap .dots i:first-child{background:var(--ioc-blue);border-color:var(--ioc-blue)}
.phf-frame .pic{flex:1;position:relative;background:var(--ioc-g10);min-height:320px}
.phf-frame .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* focus / tags strip */
.page-hero.ph-feature .phf-bar{display:grid;grid-template-columns:repeat(16,1fr);border-top:1px solid var(--ioc-border-strong);align-items:center}
.page-hero.ph-feature .phf-bar .bk{grid-column:1 / 4;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-text-helper);padding:22px 0}
.page-hero.ph-feature .phf-bar .bt{grid-column:4 / 17;display:flex;flex-wrap:wrap;gap:8px;padding:18px 0}
@media(max-width:980px){
  .page-hero.ph-feature .phf-main{grid-column:1/17;padding:64px 0 40px}
  .page-hero.ph-feature .phf-fig{grid-column:1/17;border-left:0;border-top:1px solid var(--ioc-border-subtle);padding:32px 0 0}
  .phf-frame{min-height:300px}
  .page-hero.ph-feature .phf-bar .bk{grid-column:1/17;padding:24px 0 0}
  .page-hero.ph-feature .phf-bar .bt{grid-column:1/17;padding:14px 0 24px}
}
.page-hero .ph-grid{display:grid;grid-template-columns:repeat(16,1fr);align-items:end}
.page-hero .ph-main{grid-column:1 / 12;padding:72px 32px 64px 0}
.page-hero .ph-side{grid-column:12 / 17;border-left:1px solid var(--ioc-border-subtle);padding:48px 0 56px 40px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:24px}
.page-hero h1{margin:22px 0 0;max-width:18ch}
.page-hero .ph-lede{margin:26px 0 0;max-width:52ch}
.page-hero .ph-side .pk{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--ioc-text-helper)}
.page-hero .ph-side .pv{font-size:17px;margin-top:6px;font-weight:500;letter-spacing:-.01em}
.page-hero .ph-side .pv b{color:var(--ioc-blue)}
@media(max-width:980px){.page-hero .ph-main{grid-column:1/17;padding-right:0}.page-hero .ph-side{grid-column:1/17;border-left:0;border-top:1px solid var(--ioc-border-subtle);padding:32px 0 0;margin-top:32px;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:40px}}

.sec-head{display:grid;grid-template-columns:repeat(16,1fr);align-items:end;padding-bottom:56px}
.sec-head .sh-l{grid-column:1 / 11}
.sec-head .sh-r{grid-column:12 / 17;display:flex;justify-content:flex-end;align-items:flex-end}
.sec-head h2{margin-top:18px;max-width:20ch}
@media(max-width:980px){.sec-head .sh-l,.sec-head .sh-r{grid-column:1/17}.sec-head .sh-r{justify-content:flex-start;margin-top:24px}}

/* ========================================================
   DATA TABLE (borrowed from Direction C)
   ======================================================== */
.dtable{border:1px solid var(--ioc-border-subtle)}
.dtable .dt-row{display:grid;align-items:center;border-bottom:1px solid var(--ioc-border-subtle);transition:background .16s var(--ioc-ease),box-shadow .16s var(--ioc-ease)}
.dtable .dt-row:last-child{border-bottom:0}
.dtable .dt-row:hover:not(.head){background:var(--ioc-g10);box-shadow:inset 3px 0 0 var(--ioc-blue)}
.dtable .dt-row:hover:not(.head) .tg svg{transform:translateX(3px)}
.dtable .tg svg{transition:transform .2s var(--ioc-ease)}
.dtable .dt-row.head{background:var(--ioc-g10);border-bottom:1px solid var(--ioc-border-strong)}
.dtable .dt-row.head>div{font-family:var(--ioc-mono);font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--ioc-text-helper);padding:12px 18px}
.dtable .dt-row>div{padding:20px 18px}
.dtable .ti{font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-blue)}
.dtable .tn{font-weight:600;font-size:16px;letter-spacing:-.005em}
.dtable .td{font-size:14px;color:var(--ioc-text-secondary);line-height:1.5}
.dtable .tt{font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-text-secondary)}
.dtable .tg{color:var(--ioc-blue);display:flex}

/* ========================================================
   CARD GRID + feature tiles
   ======================================================== */
/* Card grids — de-boxed: whitespace separates, hairlines reserved for data */
/* Card grids — de-boxed: whitespace separates, hairlines reserved for data */
.cardgrid{display:grid;gap:40px 32px}
.cardgrid.c2{grid-template-columns:repeat(2,1fr)}
.cardgrid.c3{grid-template-columns:repeat(3,1fr)}
.cardgrid.c4{grid-template-columns:repeat(4,1fr)}
.ucard{background:transparent;padding:24px 0 0;display:flex;flex-direction:column;min-height:0;position:relative;transition:color .18s var(--ioc-ease)}
.ucard::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ioc-border-subtle)}
.ucard::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--ioc-accent);transition:width .45s var(--ioc-ease)}
.ucard:hover::after{width:100%}
.ucard:hover h4,.ucard:hover h3{color:var(--ioc-accent)}
.ucard .uk{width:44px;height:44px;border:1px solid var(--ioc-accent);color:var(--ioc-accent);margin-bottom:24px;display:flex;align-items:center;justify-content:center;transition:background .18s var(--ioc-ease),color .18s var(--ioc-ease)}
.ucard .uk svg{width:24px;height:24px;display:block}
.ucard:hover .uk{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.ucard .ueyebrow{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:12px}
.ucard h3{font-size:21px;letter-spacing:-.01em;max-width:18ch}
.ucard h4{font-size:18px;letter-spacing:-.005em}
.ucard p{margin:12px 0 0;font-size:14.5px;color:var(--ioc-text-secondary);line-height:1.55}
.ucard .ulink{margin-top:auto;padding-top:24px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-blue);transition:letter-spacing .18s var(--ioc-ease)}
.ucard:hover .ulink{letter-spacing:.8px}
.ucard .tnum{font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-blue);margin-bottom:14px}
@media(max-width:980px){.cardgrid.c3,.cardgrid.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cardgrid.c2,.cardgrid.c3,.cardgrid.c4{grid-template-columns:1fr}}

/* stat strip */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ioc-border-subtle)}
.statstrip .st{padding:40px 28px;border-left:1px solid var(--ioc-border-subtle)}
.statstrip .st:first-child{border-left:0}
.statstrip .st .sn{font-size:48px;font-weight:300;letter-spacing:-.02em;line-height:1}
.statstrip .st .sn b{color:var(--ioc-blue);font-weight:600}
.statstrip .st .sl{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-text-helper);margin-top:12px}
@media(max-width:780px){.statstrip{grid-template-columns:1fr 1fr}.statstrip .st:nth-child(odd){border-left:0}}

/* ========================================================
   PROSE (About / article body)
   ======================================================== */
.prose{max-width:none}
.prose p{font-size:17px;line-height:1.65;color:var(--ioc-text-secondary);margin:0 0 22px;font-weight:300}
.prose p.lead{font-size:clamp(19px,1.6vw,23px);color:var(--ioc-text-primary);font-weight:400;line-height:1.5}
.prose h3{font-size:26px;margin:48px 0 18px;letter-spacing:-.015em}
.prose h4{font-size:18px;margin:32px 0 10px}
.prose ul{margin:0 0 22px;padding:0;list-style:none}
.prose ul li{position:relative;padding:10px 0 10px 28px;font-size:16px;color:var(--ioc-text-secondary);border-bottom:1px solid var(--ioc-border-subtle);line-height:1.5}
.prose ul li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:10px;background:var(--ioc-blue)}
.prose blockquote{margin:32px 0;padding:24px 0 24px 28px;border-left:2px solid var(--ioc-blue);font-size:clamp(20px,2vw,28px);font-weight:300;letter-spacing:-.01em;color:var(--ioc-text-primary);line-height:1.3}

/* ========================================================
   FORM (Contact) — Carbon fields
   ======================================================== */
.field{display:flex;flex-direction:column;margin-bottom:1px;background:var(--ioc-g10);border:1px solid var(--ioc-border-subtle);border-bottom:2px solid var(--ioc-g50);transition:border-color .14s var(--ioc-ease),background .14s var(--ioc-ease),box-shadow .14s var(--ioc-ease)}
.field:hover{border-bottom-color:var(--ioc-g70)}
.field:focus-within{background:var(--ioc-surface,#fff);border-color:var(--ioc-blue);box-shadow:inset 0 0 0 1px var(--ioc-blue)}
.field label{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-text-helper);padding:12px 16px 2px;transition:color .14s var(--ioc-ease)}
.field:focus-within label{color:var(--ioc-blue)}
.field input,.field select,.field textarea{font-family:var(--ioc-sans);font-size:15px;color:var(--ioc-text-primary);background:transparent;border:0;padding:6px 16px 13px;outline:none;width:100%}
.field input::placeholder,.field textarea::placeholder{color:var(--ioc-placeholder)}
.field textarea{resize:vertical;min-height:120px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.formgrid .field{border:0;border-bottom:2px solid var(--ioc-g50)}
.formgrid .field:focus-within{box-shadow:inset 0 0 0 1px var(--ioc-blue)}
.formgrid .full{grid-column:1 / -1}
@media(max-width:640px){.formgrid{grid-template-columns:1fr}}

/* ========================================================
   CTA band (shared dark)
   ======================================================== */
.cta-band{background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff)}
.cta-band .cta-grid{display:grid;grid-template-columns:repeat(16,1fr);align-items:center}
.cta-band .cta-l{grid-column:1 / 10;padding:96px 40px 96px 0}
.cta-band .cta-r{grid-column:10 / 17;border-left:1px solid var(--ioc-g80,#393939);padding:96px 0 96px 48px;display:flex;flex-direction:column;gap:1px}
.cta-band h2{color:var(--ioc-text-on-color,#fff);max-width:18ch;margin-top:20px}
.cta-band p{color:var(--ioc-g40,#a8a8a8);max-width:48ch;margin:24px 0 0;font-weight:300;font-size:18px}
.cta-band .eyebrow{color:var(--ioc-g50,#8d8d8d)}
@media(max-width:980px){.cta-band .cta-l,.cta-band .cta-r{grid-column:1/17}.cta-band .cta-r{border-left:0;border-top:1px solid var(--ioc-g80,#393939);padding:0 0 0}.cta-band .cta-l{padding-right:0}}

.section-g10{background:var(--ioc-g10)}
.img-figure{border:1px solid var(--ioc-border-subtle);background:var(--ioc-g10);overflow:hidden}
.img-figure img{width:100%;height:100%;object-fit:cover;display:block}

/* branded panel — product-screen abstraction (shared) */
.brandpanel{border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);display:flex;flex-direction:column;overflow:hidden;width:100%}
.brandpanel .bp-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ioc-border-subtle);background:var(--ioc-g10)}
.brandpanel .bp-bar .dots{display:flex;gap:6px}
.brandpanel .bp-bar .dots i{width:9px;height:9px;border:1px solid var(--ioc-g40);display:block}
.brandpanel .bp-bar .dots i:first-child{background:var(--ioc-blue);border-color:var(--ioc-blue)}
.brandpanel .bp-cap{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-text-helper)}
.brandpanel .bp-canvas{display:block}
.brandpanel .bp-canvas svg{width:100%;height:auto;display:block}

/* ========================================================
   BLOG CARD (shared) — insight tile
   ======================================================== */
.post2{background:var(--ioc-surface,#fff);display:flex;flex-direction:column;transition:background .18s var(--ioc-ease),box-shadow .18s var(--ioc-ease)}
.post2:hover{background:var(--ioc-surface,#fff);box-shadow:var(--ioc-shadow-card);position:relative;z-index:2}
.post2 .p2-thumb{aspect-ratio:16/10;border-bottom:1px solid var(--ioc-border-subtle);background:var(--ioc-g10);position:relative;overflow:hidden}
.post2 .p2-thumb .ln{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 23px,var(--ioc-border-subtle) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--ioc-border-subtle) 23px 24px)}
.post2 .p2-thumb .glyph{position:absolute;left:22px;bottom:18px;width:30px;height:30px;background:var(--ioc-blue)}
.post2 .p2-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1;gap:14px}
.post2 .p2-cat{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-blue)}
.post2 h4{font-size:18px;line-height:1.28;letter-spacing:-.01em}
.post2 .p2-meta{margin-top:auto;font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-text-helper)}
.post2:hover h4{color:var(--ioc-blue)}

/* ========================================================
   Scroll-reveal & motion: owned by ioc-motion.js (shared).
   ======================================================== */

/* Progressive disclosure — native details */
.disclose{border-top:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
.disclose summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-weight:500;font-size:15px}
.disclose summary::-webkit-details-marker{display:none}
.disclose .chev{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.disclose[open] .chev{transform:rotate(180deg)}
.disclose-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s var(--ioc-ease)}
.disclose[open] .disclose-body{grid-template-rows:1fr}
.disclose-body>*{overflow:hidden}

/* InvoiceNow — the ONLY amber on the site */
:root{--ioc-amber:#b45309;--ioc-amber-bg:#fdf6ec;--ioc-amber-line:#e8c79a}
.inv-band{background:var(--ioc-amber-bg);border-top:1px solid var(--ioc-amber-line);border-bottom:1px solid var(--ioc-amber-line)}
.inv-band .wrap{display:flex;gap:24px;align-items:baseline;padding:20px var(--ioc-gutter);flex-wrap:wrap}
.inv-band .ik{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--ioc-amber);white-space:nowrap}
.inv-band p{margin:0;font-size:15px;color:var(--ioc-text-primary);max-width:70ch}
.inv-band a{color:var(--ioc-amber);border-bottom:1px solid currentColor;font-weight:500}

::marker{color:var(--ioc-blue)}

/* service page: spec band */
.specband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ioc-border-subtle);border-top:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
@media(max-width:900px){.specband{grid-template-columns:1fr 1fr}}
.specband .sp{background:var(--ioc-white);padding:28px 24px}
.specband .sp .k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-blue);margin:0 0 10px}
.specband .sp .v{font-size:15px;color:var(--ioc-text-primary);font-weight:600;letter-spacing:-.01em;margin:0}
.specband .sp .d{font-size:13px;color:var(--ioc-text-secondary);margin:6px 0 0;line-height:1.5}

/* service page: FAQ */
.faq{border-top:1px solid var(--ioc-border-subtle)}
details.qa{border-bottom:1px solid var(--ioc-border-subtle)}
details.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:22px 0;font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ioc-text-primary)}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary .qi{font-family:var(--ioc-mono);font-size:13px;color:var(--ioc-blue);flex:none;transition:transform .2s var(--ioc-ease)}
details.qa[open] summary .qi{transform:rotate(45deg)}
details.qa .qa-a{padding:0 0 24px;max-width:70ch;color:var(--ioc-text-secondary);font-size:15px;line-height:1.65}

/* service page: related links */
.relrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
@media(max-width:760px){.relrow{grid-template-columns:1fr}}
.relrow a{background:var(--ioc-white);padding:26px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;position:relative;overflow:hidden;transition:background .18s var(--ioc-ease)}
.relrow a::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--ioc-accent);transition:width .45s var(--ioc-ease)}
.relrow a:hover::after{width:100%}
.relrow a:hover{background:var(--ioc-g10)}
.relrow a .rl{font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--ioc-text-primary)}
.relrow a .rl small{display:block;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper);margin-top:6px;font-weight:400}
.relrow a svg{width:18px;height:18px;color:var(--ioc-blue);flex:none;transition:transform .2s var(--ioc-ease)}
.relrow a:hover svg{transform:translateX(4px)}
.ioc-header{transition:box-shadow .25s var(--ioc-ease)}
.ioc-header.scrolled{box-shadow:0 10px 28px -18px rgba(15,17,60,.22)}


/* ========================================================
   Reduced motion — hard kill-switch (WCAG). Reveals render
   final; hover micro-interactions remain but are instant.
   ======================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],[data-stagger]>*{opacity:1 !important;transform:none !important}
}

/* image placeholder — line grid + glyph (interim until custom SVG) */
.pic-ph{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 23px,var(--ioc-border-subtle) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--ioc-border-subtle) 23px 24px)}
.pic-ph .glyph{position:absolute;left:22px;bottom:18px;width:30px;height:30px;background:var(--ioc-blue)}

/* ========================================================
   INFOC V1 HERO PATTERNS (standard) — home + inner
   Two-panel copy/visual, outcome overlay, home rail,
   inner-page crumbs/meta/technical-visual/capability matrix.
   ======================================================== */
.v1hero{background:linear-gradient(180deg,var(--ioc-surface,#fff) 0%,var(--ioc-surface-subtle,#fbfbfb) 100%);border-bottom:1px solid var(--ioc-border-subtle);padding:clamp(20px,3vw,36px) 0 clamp(28px,4vw,44px)}
.v1hero .hero-shell{display:grid;gap:16px}
.v1hero .hero-main{display:grid;grid-template-columns:minmax(26rem,5fr) minmax(34rem,7fr);gap:16px;align-items:stretch}
.v1hero .copy-panel,.v1hero .inner-copy{min-width:0;background:var(--ioc-g10);border:1px solid var(--ioc-border-subtle);padding:clamp(28px,3vw,52px);display:flex;flex-direction:column;justify-content:center;min-height:36rem}
.v1hero .h-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--ioc-text-primary);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.v1hero .h-eyebrow::before{content:"";width:26px;height:2px;background:var(--ioc-blue);flex:none}
.v1hero h1{margin:0;max-width:13ch;font-size:clamp(44px,5.2vw,86px);font-weight:800;line-height:.96;letter-spacing:-.045em;text-wrap:balance}
.v1hero h1 .em{color:var(--ioc-blue)}
.v1hero .h-lede{max-width:36ch;margin:22px 0 0;color:var(--ioc-text-secondary);font-size:clamp(16px,1.2vw,19px);line-height:1.6;text-wrap:pretty}
.v1hero .h-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.v1hero .h-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 22px;border:1px solid var(--ioc-blue);background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);font-weight:600;font-size:15px;transition:background .2s var(--ioc-ease),transform .2s var(--ioc-ease)}
.v1hero .h-btn svg{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.v1hero .h-btn:hover{background:var(--ioc-blue-hover);transform:translateY(-1px)}
.v1hero .h-btn:hover svg{transform:translateX(3px)}
.v1hero .h-btn.ghost{background:transparent;color:var(--ioc-text-primary);border-color:var(--ioc-border-strong)}
.v1hero .h-btn.ghost:hover{background:var(--ioc-surface,#fff);border-color:var(--ioc-text-primary)}
.v1hero .proof-list{display:flex;flex-wrap:wrap;gap:12px 22px;margin:26px 0 0;list-style:none}
.v1hero .proof-list li{display:flex;align-items:center;gap:8px;color:var(--ioc-text-secondary);font-size:14px}
.v1hero .proof-list li::before{content:"";width:8px;height:8px;background:var(--ioc-green);flex:none}
.v1hero .visual-panel,.v1hero .tech-visual{position:relative;min-width:0;border:1px solid var(--ioc-border-subtle);background:var(--ioc-g20);overflow:hidden;min-height:36rem}
.v1hero .visual-panel img,.v1hero .tech-visual img{width:100%;height:100%;object-fit:cover;display:block}
.v1hero .img-caption{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;justify-content:space-between;gap:16px;align-items:flex-end;width:calc(100% - 32px);color:var(--ioc-text-on-color,#fff);font-size:11px;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.v1hero .img-caption strong{font-weight:600}
.v1hero .img-caption span{font-family:var(--ioc-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-g20,#e0e0e0);white-space:nowrap}
.v1hero .capability-strip{position:absolute;left:16px;right:16px;bottom:60px;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 16px 40px rgba(0,0,0,.18)}
.v1hero .hcap{min-width:0;display:grid;grid-template-columns:1.8rem 1fr;gap:11px;align-items:center;padding:13px 15px;border-right:1px solid var(--ioc-border-subtle)}
.v1hero .hcap:last-child{border-right:0}
.v1hero .hcap svg{width:22px;height:22px;color:var(--ioc-blue)}
.v1hero .hcap strong{display:block;font-size:13px;letter-spacing:-.005em}
.v1hero .hcap span{display:block;margin-top:2px;color:var(--ioc-text-secondary);font-size:11.5px;line-height:1.35}
.v1hero .hcap.is-blue{background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.v1hero .hcap.is-blue svg{color:var(--ioc-text-on-color,#fff)}
.v1hero .hcap.is-blue span{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.v1hero .outcome{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:4;width:min(23rem,calc(100% - 32px));background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);box-shadow:0 16px 40px rgba(22,22,22,.18)}
.v1hero .outcome-head{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 16px;border-bottom:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.v1hero .outcome-head .live{color:var(--ioc-green);display:flex;gap:7px;align-items:center}
.v1hero .outcome-head .live::before{content:"";width:7px;height:7px;background:var(--ioc-green)}
.v1hero .route{position:relative;width:100%;display:grid;grid-template-columns:1.4rem 1fr auto;align-items:start;gap:11px;padding:14px 16px;border:0;border-bottom:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);text-align:left;cursor:pointer;font-family:var(--ioc-sans);transition:background .18s var(--ioc-ease)}
.v1hero .route:hover{background:var(--ioc-hover-wash,#f7faff)}
.v1hero .route[aria-pressed="true"]{background:var(--ioc-selected-surface,#edf5ff)}
.v1hero .route[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ioc-blue)}
.v1hero .route .rix{color:var(--ioc-blue);font-family:var(--ioc-mono);font-size:10px;padding-top:2px}
.v1hero .route strong{display:block;font-size:13.5px;line-height:1.2;color:var(--ioc-text-primary)}
.v1hero .route small{display:block;margin-top:3px;color:var(--ioc-text-secondary);font-size:12px;line-height:1.35}
.v1hero .route .rarr{width:16px;height:16px;color:var(--ioc-blue);transition:transform .18s var(--ioc-ease)}
.v1hero .route:hover .rarr{transform:translateX(2px)}
.v1hero .outcome-result{padding:16px;background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff)}
.v1hero .outcome-result span{display:block;color:var(--ioc-g40,#a8a8a8);font-family:var(--ioc-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.v1hero .outcome-result strong{display:block;margin:6px 0 4px;font-size:16px;letter-spacing:-.01em}
.v1hero .outcome-result p{margin:0;color:var(--ioc-g30,#c6c6c6);font-size:12.5px;line-height:1.45}
.v1hero .home-rail{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.v1hero .rail-card{min-width:0;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;min-height:6.5rem;padding:20px 22px;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
.v1hero .rail-card.soft{background:var(--ioc-g10)}
.v1hero a.rail-card.strong{background:var(--ioc-blue);border-color:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);transition:background .2s var(--ioc-ease)}
.v1hero a.rail-card.strong:hover{background:var(--ioc-blue-hover)}
.v1hero .rail-card .rc-n{font-size:clamp(32px,2.8vw,48px);font-weight:700;line-height:.9;letter-spacing:-.05em;color:var(--ioc-text-primary);font-variant-numeric:tabular-nums}
.v1hero .rail-card .rc-ic{width:34px;height:34px;color:var(--ioc-text-on-color,#fff)}
.v1hero .rail-copy{min-width:0}
.v1hero .rail-copy span{display:block;margin-bottom:3px;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ioc-text-helper)}
.v1hero .rail-card.strong .rail-copy span{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.v1hero .rail-copy p{margin:0;color:var(--ioc-text-secondary);font-size:13px;line-height:1.45}
.v1hero .rail-card.strong .rail-copy p{color:var(--ioc-text-on-color,#fff);font-weight:600}
/* inner-page hero extras */
.v1hero .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;color:var(--ioc-text-helper);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.04em}
.v1hero .crumbs a{color:var(--ioc-text-helper)}
.v1hero .crumbs a:hover{color:var(--ioc-blue)}
.v1hero .crumbs .sep{color:var(--ioc-g30)}
.v1hero .crumbs .cur{color:var(--ioc-blue)}
.v1hero .inner-copy h1{max-width:12ch}
.v1hero .inner-copy .h-lede{max-width:34ch}
.v1hero .inner-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.v1hero .inner-meta div{display:flex;flex-direction:column;gap:5px;min-width:10.5rem;padding:12px 14px;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
.v1hero .inner-meta small{font-family:var(--ioc-mono);color:var(--ioc-text-helper);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.v1hero .inner-meta strong{font-size:14px;letter-spacing:-.005em}
.v1hero .tech-chip{position:absolute;left:16px;top:16px;z-index:3;display:inline-flex;flex-direction:column;gap:4px;max-width:20rem;padding:12px 14px;border:1px solid rgba(224,224,224,.85);background:rgba(255,255,255,.92);box-shadow:0 10px 24px rgba(22,22,22,.08)}
.v1hero .tech-chip strong{font-size:13px;line-height:1.3}
.v1hero .tech-chip span{color:var(--ioc-text-secondary);font-family:var(--ioc-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.v1hero .cap-matrix{position:absolute;right:16px;bottom:16px;z-index:3;width:min(22rem,calc(100% - 32px));display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ioc-border-subtle);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 16px 40px rgba(22,22,22,.12)}
.v1hero .cap{padding:14px;border-right:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle);display:flex;flex-direction:column;min-height:7rem}
.v1hero .cap:nth-child(2n){border-right:0}
.v1hero .cap:nth-last-child(-n+2){border-bottom:0}
.v1hero .cap .cix{color:var(--ioc-blue);font-family:var(--ioc-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.v1hero .cap strong{margin:auto 0 3px;font-size:15px}
.v1hero .cap span:last-child{color:var(--ioc-text-secondary);font-size:12px;line-height:1.4}
@media(max-width:1100px){
  .v1hero .hero-main{grid-template-columns:1fr}
  .v1hero .copy-panel,.v1hero .inner-copy{min-height:auto}
  .v1hero .visual-panel,.v1hero .tech-visual{min-height:30rem}
  .v1hero .outcome{top:auto;bottom:16px;transform:none}
  .v1hero .home-rail{grid-template-columns:1fr}
}
@media(max-width:700px){
  .v1hero h1{font-size:clamp(40px,11vw,58px)}
  .v1hero .h-actions{display:grid}.v1hero .h-btn{width:100%}
  .v1hero .visual-panel,.v1hero .tech-visual{display:flex;flex-direction:column;overflow:visible;min-height:auto}
  .v1hero .visual-panel img,.v1hero .tech-visual img{height:20rem}
  .v1hero .outcome,.v1hero .cap-matrix{position:relative;right:auto;top:auto;bottom:auto;transform:none;width:100%;box-shadow:none}
  .v1hero .capability-strip{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:1fr;box-shadow:none}
  .v1hero .hcap{border-right:0;border-bottom:1px solid var(--ioc-border-subtle)}
  .v1hero .hcap:last-child{border-bottom:0}
  .v1hero .img-caption{position:static;width:auto;padding:12px 14px;background:var(--ioc-g100)}
  .v1hero .tech-chip{display:none}
  .v1hero .inner-meta{display:grid;grid-template-columns:1fr}
  .v1hero .cap-matrix{grid-template-columns:1fr}.v1hero .cap{border-right:0}
}

/* ========================================================
   INFOC WEB ELEMENTS (InfocBrandUI v1) — ui-* primitives
   Square, hairline, token-driven. One owner, no leakage.
   ======================================================== */
/* alerts / notices */
.ui-alert{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--ioc-border-subtle);border-left:3px solid var(--ioc-blue);background:var(--ioc-white)}
.ui-alert .ai{width:20px;height:20px;flex:none;color:var(--ioc-blue);margin-top:1px}
.ui-alert .at{font-weight:600;font-size:14.5px;letter-spacing:-.01em;margin:0 0 3px;color:var(--ioc-text-primary)}
.ui-alert .ad{margin:0;font-size:13.5px;color:var(--ioc-text-secondary);line-height:1.5}
.ui-alert.is-success{border-left-color:var(--ioc-green)}.ui-alert.is-success .ai{color:var(--ioc-green)}
.ui-alert.is-warning{border-left-color:var(--ioc-amber);background:var(--ioc-amber-bg)}.ui-alert.is-warning .ai{color:var(--ioc-amber)}
.ui-alert.is-danger{border-left-color:var(--ioc-danger,#da1e28)}.ui-alert.is-danger .ai{color:var(--ioc-danger,#da1e28)}
/* badges */
.ui-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border:1px solid var(--ioc-border-subtle);color:var(--ioc-text-secondary);background:var(--ioc-white)}
.ui-badge.solid{background:var(--ioc-blue);border-color:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.ui-badge.on{color:var(--ioc-green);border-color:var(--ioc-green)}
.ui-badge.off{color:var(--ioc-g60);border-color:var(--ioc-g40)}
.ui-badge .dot{width:7px;height:7px;background:currentColor;flex:none}
/* breadcrumbs */
.ui-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.04em;color:var(--ioc-text-helper)}
.ui-crumbs a{color:var(--ioc-text-helper)}.ui-crumbs a:hover{color:var(--ioc-blue)}
.ui-crumbs .sep{color:var(--ioc-g30)}.ui-crumbs .cur{color:var(--ioc-blue)}
/* tabs */
.ui-tabs{display:flex;border-bottom:1px solid var(--ioc-border-subtle);overflow-x:auto}
.ui-tabs button{position:relative;border:0;background:transparent;font-family:var(--ioc-sans);font-weight:600;font-size:14px;color:var(--ioc-text-secondary);padding:14px 18px;white-space:nowrap;cursor:pointer;transition:color .16s var(--ioc-ease)}
.ui-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ioc-blue);transform:scaleX(0);transition:transform .2s var(--ioc-ease)}
.ui-tabs button:hover{color:var(--ioc-text-primary)}
.ui-tabs button[aria-selected="true"]{color:var(--ioc-blue)}
.ui-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.ui-tabpanel{padding:22px 2px;font-size:15px;color:var(--ioc-text-secondary);line-height:1.6}
.ui-tabpanel[hidden]{display:none}
/* switch */
.ui-switch{position:relative;display:inline-block;width:48px;height:26px;flex:none;vertical-align:middle}
.ui-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ui-switch .track{position:absolute;inset:0;background:var(--ioc-g50);transition:background .2s var(--ioc-ease)}
.ui-switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--ioc-text-on-color,#fff);transition:transform .2s var(--ioc-ease)}
.ui-switch input:checked+.track{background:var(--ioc-blue)}
.ui-switch input:checked+.track::after{transform:translateX(22px)}
.ui-switch input:focus-visible+.track{box-shadow:var(--ioc-shadow-focus)}
.ui-switch input:disabled+.track{opacity:.5;cursor:not-allowed}
/* checkbox + radio */
.ui-opt{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ioc-text-primary);cursor:pointer;user-select:none}
.ui-opt input{position:absolute;opacity:0;width:0;height:0}
.ui-opt .mk{width:20px;height:20px;border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);flex:none;display:grid;place-items:center;transition:background .14s var(--ioc-ease),border-color .14s var(--ioc-ease)}
.ui-opt.radio .mk{border-radius:50%!important}
.ui-opt .mk svg{width:13px;height:13px;color:var(--ioc-text-on-color,#fff);opacity:0;transition:opacity .12s var(--ioc-ease)}
.ui-opt.radio .mk::after{content:"";width:9px;height:9px;border-radius:50%!important;background:var(--ioc-text-on-color,#fff);transform:scale(0);transition:transform .14s var(--ioc-ease)}
.ui-opt input:checked+.mk{background:var(--ioc-blue);border-color:var(--ioc-blue)}
.ui-opt input:checked+.mk svg{opacity:1}
.ui-opt.radio input:checked+.mk::after{transform:scale(1)}
.ui-opt input:focus-visible+.mk{box-shadow:var(--ioc-shadow-focus)}
.ui-opt input:disabled+.mk{opacity:.5}
/* select */
.ui-select{position:relative;display:inline-flex;align-items:center;min-width:220px;background:var(--ioc-g10);border-bottom:1px solid var(--ioc-border-strong)}
.ui-select select{appearance:none;-webkit-appearance:none;width:100%;border:0;background:transparent;font-family:var(--ioc-sans);font-size:15px;color:var(--ioc-text-primary);padding:12px 40px 12px 16px;outline:none;cursor:pointer}
.ui-select::after{content:"";position:absolute;right:16px;width:9px;height:9px;border-right:2px solid var(--ioc-text-primary);border-bottom:2px solid var(--ioc-text-primary);transform:rotate(45deg) translateY(-3px);pointer-events:none}
.ui-select:focus-within{box-shadow:inset 0 0 0 2px var(--ioc-blue);background:var(--ioc-surface,#fff);border-bottom-color:var(--ioc-blue)}
/* pagination */
.ui-pager{display:flex;gap:0;border:1px solid var(--ioc-border-subtle);width:max-content}
.ui-pager a,.ui-pager span{min-width:44px;height:44px;display:grid;place-items:center;font-family:var(--ioc-mono);font-size:13px;color:var(--ioc-text-secondary);border-left:1px solid var(--ioc-border-subtle);transition:background .14s var(--ioc-ease),color .14s var(--ioc-ease)}
.ui-pager a:first-child,.ui-pager span:first-child{border-left:0}
.ui-pager a:hover{background:var(--ioc-g10);color:var(--ioc-text-primary)}
.ui-pager a[aria-current="page"]{background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.ui-pager .dots{color:var(--ioc-g40)}
/* tooltip */
.ui-tip{position:relative;display:inline-flex}
.ui-tip .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff);font-size:12px;line-height:1.4;padding:8px 11px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s var(--ioc-ease),transform .16s var(--ioc-ease);z-index:var(--ioc-z-tooltip)}
.ui-tip .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ioc-g100)}
.ui-tip:hover .tip,.ui-tip:focus-within .tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* progress */
.ui-progress{height:6px;background:var(--ioc-g20);overflow:hidden}
.ui-progress .bar{height:100%;background:var(--ioc-blue);transition:width .6s var(--ioc-ease-out)}
.ui-meter{display:flex;justify-content:space-between;font-family:var(--ioc-mono);font-size:11px;color:var(--ioc-text-helper);margin-bottom:8px;letter-spacing:.04em}
/* steps */
.ui-steps{display:flex;flex-wrap:wrap;gap:0}
.ui-steps .st{display:flex;align-items:center;gap:12px;padding-right:28px}
.ui-steps .sn{width:30px;height:30px;flex:none;display:grid;place-items:center;border:1px solid var(--ioc-border-strong);font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-text-secondary)}
.ui-steps .st.done .sn{background:var(--ioc-blue);border-color:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.ui-steps .st.now .sn{border-color:var(--ioc-blue);color:var(--ioc-blue)}
.ui-steps .sl{font-size:14px;font-weight:600;letter-spacing:-.005em}
.ui-steps .st.now .sl{color:var(--ioc-blue)}
.ui-steps .st:not(:last-child)::after{content:"";width:36px;height:1px;background:var(--ioc-border-strong)}
/* avatar */
.ui-avatar{width:40px;height:40px;display:grid;place-items:center;background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);font-weight:700;font-size:14px;flex:none}
.ui-avatar.g{background:var(--ioc-g80)}
.ui-avatar-stack{display:flex}
.ui-avatar-stack .ui-avatar{box-shadow:0 0 0 2px var(--ioc-surface,#fff);margin-left:-10px}
.ui-avatar-stack .ui-avatar:first-child{margin-left:0}
/* empty state */
.ui-empty{border:1px dashed var(--ioc-border-strong);background:var(--ioc-g10);padding:40px 24px;text-align:center}
.ui-empty .ei{width:40px;height:40px;color:var(--ioc-g40);margin:0 auto 14px}
.ui-empty h4{font-size:17px;letter-spacing:-.01em;margin:0 0 6px}
.ui-empty p{margin:0 auto 18px;font-size:14px;color:var(--ioc-text-secondary);max-width:40ch;line-height:1.55}
/* dropdown menu */
.ui-menu{border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);box-shadow:var(--ioc-shadow-lg);min-width:220px;padding:6px 0}
.ui-menu a,.ui-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;border:0;background:transparent;font-family:var(--ioc-sans);font-size:14px;color:var(--ioc-text-primary);text-align:left;cursor:pointer;transition:background .12s var(--ioc-ease)}
.ui-menu a:hover,.ui-menu button:hover{background:var(--ioc-g10);color:var(--ioc-blue)}
.ui-menu .sep{height:1px;background:var(--ioc-border-subtle);margin:6px 0}
.ui-menu svg{width:16px;height:16px;color:var(--ioc-text-helper)}
/* toast */
.ui-toast{display:flex;align-items:flex-start;gap:12px;background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff);padding:14px 16px;box-shadow:var(--ioc-shadow-lg);min-width:280px;max-width:380px;border-left:3px solid var(--ioc-green)}
.ui-toast .ti{width:18px;height:18px;color:var(--ioc-green);flex:none;margin-top:1px}
.ui-toast strong{display:block;font-size:14px}
.ui-toast p{margin:2px 0 0;font-size:12.5px;color:var(--ioc-g30,#c6c6c6);line-height:1.45}
/* modal */
.ui-modal-overlay{position:fixed;inset:0;background:rgba(22,22,22,.55);display:none;place-items:center;z-index:var(--ioc-z-modal);padding:24px}
.ui-modal-overlay.open{display:grid}
.ui-modal{width:min(100%,32rem);background:var(--ioc-surface,#fff);box-shadow:0 24px 60px -20px rgba(10,12,60,.4);border-top:3px solid var(--ioc-blue)}
.ui-modal .mh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 22px 0}
.ui-modal .mh h3{font-size:20px;letter-spacing:-.015em}
.ui-modal .mx{width:36px;height:36px;border:0;background:transparent;color:var(--ioc-text-primary);cursor:pointer;display:grid;place-items:center}
.ui-modal .mx:hover{color:var(--ioc-blue)}
.ui-modal .mb{padding:14px 22px 8px;color:var(--ioc-text-secondary);font-size:14.5px;line-height:1.6}
.ui-modal .mf{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 22px}
/* data table */
.ui-table{width:100%;border-collapse:collapse;border:1px solid var(--ioc-border-subtle)}
.ui-table th,.ui-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--ioc-border-subtle);font-size:14px}
.ui-table thead th{background:var(--ioc-g10);border-bottom:1px solid var(--ioc-border-strong);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-text-helper);font-weight:400}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table tbody tr{transition:background .14s var(--ioc-ease)}
.ui-table tbody tr:hover{background:var(--ioc-g10)}
.ui-table td.num{font-family:var(--ioc-mono);font-variant-numeric:tabular-nums;text-align:right}

/* Family accent standard: Solutions=blue, Academy=purple, Talents Gateway=green,
   Industries=teal, Company=slate. --ioc-accent-ink is the AA-safe text value for
   each family (identical to the accent unless the accent is too light for body text). */
[data-page-family="Academy"]{--ioc-accent:var(--ioc-fam-academy);--ioc-accent-hover:var(--ioc-fam-academy-hover);--ioc-accent-ink:var(--ioc-fam-academy)}
[data-page-family="Talents Gateway"]{--ioc-accent:var(--ioc-fam-talents);--ioc-accent-hover:var(--ioc-fam-talents-hover);--ioc-accent-ink:var(--ioc-fam-talents-ink)}
/* Industries and Company have no page-wide accent yet: their values are scoped to
   the closing band only, so no live CTA or hero accent changes colour. */
[data-page-family="Industries"] .ioc-fam{--ioc-accent:var(--ioc-fam-industries);--ioc-accent-ink:var(--ioc-fam-industries-ink)}
[data-page-family="Company"] .ioc-fam{--ioc-accent:var(--ioc-fam-company);--ioc-accent-ink:var(--ioc-fam-company)}
.ioc-footer h3.fam-sol{color:var(--ioc-blue,#0001ff)}
.ioc-footer h3.fam-aca{color:var(--ioc-fam-academy,#6929c4)}
.ioc-footer h3.fam-tal{color:var(--ioc-fam-talents,#1a7a52)}
/* Family tint band: closing links section, driven by the family accent */
.ioc-fam{background:color-mix(in oklch,var(--ioc-accent) 10%,var(--ioc-surface));border-top:3px solid var(--ioc-accent)}
.ioc-fam .ioc-kicker{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-fam .ioc-kicker::before{background:var(--ioc-accent)}
.ioc-fam .ioc-related{background:color-mix(in oklch,var(--ioc-accent) 24%,var(--ioc-surface));border-color:color-mix(in oklch,var(--ioc-accent) 24%,var(--ioc-surface))}
.ioc-fam .ioc-related a:hover{background:color-mix(in oklch,var(--ioc-accent) 6%,var(--ioc-surface))}
.ioc-fam .ioc-related .ioc-rel-k,.ioc-fam .ioc-related .ioc-rel-go{color:var(--ioc-accent-ink,var(--ioc-accent))}

/* ---- absorbed from ioc-blocks.css (CMS-D-071) ---- */
/* ============================================================
   InfocBrandUI v1 · inner-page block library (idc namespace)
   Loaded AFTER ioc-core.css on every inner page. Implements the
   governed CMS blocks (B-01..B-24) on carbon tokens: white-first,
   square controls, blue lead, short reveal motion. No gradients,
   particles or rounded startup cards.
   ============================================================ */

/* ---- shared section scaffold ---- */
.ioc-block{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
.ioc-block.tight{padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(48px,5vw,72px)}
.ioc-block.soft{background:var(--ioc-g10)}
.ioc-block.dark{background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff)}
.ioc-block.dark .body,.ioc-block.dark p{color:var(--ioc-g30)}
.ioc-block.dark h2,.ioc-block.dark h3,.ioc-block.dark b,.ioc-block.dark strong{color:var(--ioc-text-on-color,#fff)}

/* section header: heading left, supporting note right */
.ioc-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.ioc-head>p{margin:0;color:var(--ioc-text-secondary);font-size:16px;line-height:1.55;max-width:46ch}
.ioc-block.dark .ioc-head>p{color:var(--ioc-g30)}
.ioc-kicker{display:flex;align-items:center;gap:10px;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-primary);margin:0 0 14px}
.ioc-kicker::before{content:"";width:22px;height:2px;background:var(--ioc-accent);flex:none}
.ioc-kicker.teal::before{background:var(--ioc-teal,#08bdba)}
.ioc-block.dark .ioc-kicker{color:var(--ioc-text-on-color,#fff)}
.ioc-head h2,.ioc-h2{margin:0;font-size:clamp(28px,3.2vw,46px);font-weight:700;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
@media(max-width:860px){.ioc-head{grid-template-columns:1fr;align-items:start}}

/* ---- B-02 Inner hero · Light Technical Split ---- */
.ioc-hero{background:linear-gradient(180deg,var(--ioc-surface,#fff) 0%,var(--ioc-surface-subtle,#fbfbfb) 100%);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,64px);align-items:center;padding-top:clamp(36px,4vw,60px);padding-bottom:clamp(36px,4vw,60px)}
.ioc-hero-copy{min-width:0}
.ioc-crumb{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.04em;color:var(--ioc-text-helper);margin:0 0 20px}
.ioc-crumb a{color:var(--ioc-text-helper)}
.ioc-crumb a:hover{color:var(--ioc-accent)}
.ioc-hero h1{margin:0;font-size:clamp(34px,4.4vw,64px);font-weight:800;line-height:1.0;letter-spacing:-.035em;text-wrap:balance}
.ioc-hero h1 .em{color:var(--ioc-accent)}
.ioc-hero .ioc-lede{max-width:52ch;margin:20px 0 0;color:var(--ioc-text-secondary);font-size:clamp(16px,1.15vw,18px);line-height:1.6;text-wrap:pretty}
.ioc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ioc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px;max-width:100%}
.ioc-chips-label{display:inline-flex;align-items:center;margin-right:4px;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-g60,#666666);white-space:nowrap}
.ioc-chip{position:relative;display:inline-flex;align-items:center;gap:9px;padding:10px 15px;background:var(--ioc-surface-cool,#f2f4f8);border:1px solid transparent;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-primary,#161616);text-decoration:none;white-space:nowrap;transition:background .18s var(--ioc-ease),color .18s var(--ioc-ease),border-color .18s var(--ioc-ease)}
.ioc-chip svg{flex:none;width:16px;height:16px;color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
.ioc-chip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ioc-accent);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ioc-ease)}
a.ioc-chip:hover{background:var(--ioc-surface,#fff);border-color:var(--ioc-text-primary,#161616)}
a.ioc-chip:hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.ioc-chip,.ioc-chip::after{transition:none}}
@media(max-width:640px){.ioc-chip{font-size:10.5px;padding:9px 12px}}
.ioc-hero-visual{position:relative;min-width:0;display:flex}
.ioc-hero-figure{position:relative;flex:1;border:1px solid var(--ioc-border-subtle);overflow:hidden;min-height:clamp(26rem,34vw,34rem);background:var(--ioc-g20);margin:0}
.ioc-hero-figure img{width:100%;height:100%;object-fit:cover;display:block}
.ioc-hero-figure::after{content:"";position:absolute;inset:56% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.52));pointer-events:none}
.ioc-hero-figure figcaption{position:absolute;left:16px;top:16px;right:16px;z-index:2;max-width:22rem;padding:13px 15px;border:1px solid rgba(224,224,224,.85);background:rgba(255,255,255,.94);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.ioc-hero-figure figcaption b,.ioc-hero-figure figcaption strong{display:block;font-family:var(--ioc-sans);font-size:13px;font-weight:600;line-height:1.35;color:var(--ioc-text-primary);letter-spacing:-.005em;text-transform:none}
.ioc-hero-figure figcaption span{display:block;margin-top:4px;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-matrix{position:absolute;right:16px;bottom:16px;z-index:3;width:min(23rem,calc(100% - 32px));display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle);box-shadow:0 16px 40px rgba(0,0,0,.14);backdrop-filter:blur(12px)}
.ioc-matrix>div{background:rgba(255,255,255,.96);padding:14px 16px;min-height:5.5rem;display:flex;flex-direction:column;justify-content:center}
.ioc-matrix b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ioc-text-primary);letter-spacing:-.01em}
.ioc-matrix b svg{flex:none;width:17px;height:17px;color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff));stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ioc-matrix span{display:block;margin-top:4px;font-size:12.5px;color:var(--ioc-text-secondary);line-height:1.4}
/* Auto-spotlight: one tile lit at a time, light ground */
.ioc-matrix[data-spotlight]{box-shadow:0 20px 52px rgba(0,0,0,.26)}
.ioc-matrix[data-spotlight]>div{position:relative;overflow:hidden;background:var(--ioc-surface,#fff);cursor:pointer;transition:background .4s var(--ioc-ease,cubic-bezier(.2,.8,.2,1))}
.ioc-matrix[data-spotlight]>div b{color:var(--ioc-text-helper,#5c5c5c);transition:color .32s}
.ioc-matrix[data-spotlight]>div b svg{color:var(--ioc-g40,#a8a8a8);transition:color .32s,transform .42s var(--ioc-ease,cubic-bezier(.2,.8,.2,1))}
.ioc-matrix[data-spotlight]>div span{color:var(--ioc-g60,#666666);transform:translateY(3px);transition:color .32s,transform .42s var(--ioc-ease,cubic-bezier(.2,.8,.2,1))}
.ioc-matrix[data-spotlight]>div.on{background:var(--ioc-surface,#fff)}
.ioc-matrix[data-spotlight]>div.on b{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
.ioc-matrix[data-spotlight]>div.on b svg{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff));transform:scale(1.1)}
.ioc-matrix[data-spotlight]>div.on span{color:var(--ioc-text-primary,#161616);transform:none}
.ioc-matrix[data-spotlight] .ioc-mx-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ioc-accent,#0001ff);transform:scaleX(0);transform-origin:left}
.ioc-matrix[data-spotlight]>div.on .ioc-mx-bar{animation:iocMxBar 3.4s linear forwards}
@keyframes iocMxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.ioc-matrix[data-spotlight]>div,.ioc-matrix[data-spotlight]>div b,.ioc-matrix[data-spotlight]>div b svg,.ioc-matrix[data-spotlight]>div span{transition:none}.ioc-matrix[data-spotlight]>div.on b svg{transform:none}.ioc-matrix[data-spotlight] .ioc-mx-bar{display:none}}
/* ---- Inner-page local section nav ---- */
.ioc-localnav{position:sticky;top:72px;z-index:80;background:rgba(255,255,255,.97);border-bottom:1px solid var(--ioc-border-subtle);backdrop-filter:blur(12px)}
.ioc-localnav .wrap{display:flex;overflow-x:auto;scrollbar-width:none;padding:0}
.ioc-localnav .wrap::-webkit-scrollbar{display:none}
.ioc-localnav a{display:flex;align-items:center;min-height:3.5rem;padding:0 18px;white-space:nowrap;border-right:1px solid var(--ioc-border-subtle);font-size:14px;font-weight:600;color:var(--ioc-text-secondary);transition:background .16s var(--ioc-ease),color .16s var(--ioc-ease)}
.ioc-localnav a:first-child{border-left:1px solid var(--ioc-border-subtle)}
.ioc-localnav a:hover{background:var(--ioc-g10);color:var(--ioc-accent)}
.ioc-localnav a.active,.ioc-localnav a[aria-current="true"]{color:var(--ioc-accent);box-shadow:inset 0 -3px var(--ioc-accent)}
.ioc-block[id],.ioc-hero[id]{scroll-margin-top:8rem}
@media(max-width:1000px){.ioc-localnav{top:64px}}
@media(max-width:860px){.ioc-hero .wrap{grid-template-columns:1fr;gap:28px}.ioc-hero-visual{order:2}.ioc-hero-figure{min-height:22rem}.ioc-hero-figure::after{display:none}.ioc-hero-figure figcaption{position:static;max-width:none;border:0;border-bottom:1px solid var(--ioc-border-subtle);box-shadow:none}.ioc-matrix{position:relative;right:auto;bottom:auto;width:100%;box-shadow:none;border-top:0}}

/* ---- B-06 Card grid ---- */
.ioc-cards{display:grid;gap:1px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle)}
.ioc-cards>*{box-shadow:0 0 0 1px var(--ioc-border-subtle)}
.ioc-cards.two{grid-template-columns:repeat(2,1fr)}
.ioc-cards.three{grid-template-columns:repeat(3,1fr)}
.ioc-cards.four{grid-template-columns:repeat(4,1fr)}
.ioc-card{position:relative;background:var(--ioc-surface,#fff);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;min-width:0;transition:background .18s var(--ioc-ease)}
.ioc-card:hover{background:var(--ioc-g10)}
.ioc-card .ioc-card-ix{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.08em;color:var(--ioc-accent);margin:0 0 18px}
.ioc-card .ioc-card-ix .ioc-cardicon{width:30px;height:30px;color:var(--ioc-accent);display:block}
.ioc-card .ioc-card-eyebrow{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper);margin:0 0 10px}
.ioc-card h3{margin:0 0 10px;font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.015em}
.ioc-card p{margin:0;color:var(--ioc-text-secondary);font-size:15px;line-height:1.55;flex:1}
.ioc-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.ioc-tag{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.03em;border:1px solid var(--ioc-border-subtle);color:var(--ioc-text-secondary);padding:4px 8px}
.ioc-tag.ai{border-color:var(--ioc-accent);color:var(--ioc-accent)}
.ioc-card .ioc-card-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--ioc-accent);font-weight:600;font-size:15px}
.ioc-card .ioc-card-link svg{width:16px;height:16px;transition:transform .18s var(--ioc-ease)}
.ioc-card:hover .ioc-card-link svg{transform:translateX(4px)}
.ioc-card.tap{cursor:pointer}
.ioc-card.tap::after{content:"";position:absolute;inset:0}
@media(max-width:960px){.ioc-cards.three,.ioc-cards.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ioc-cards.two,.ioc-cards.three,.ioc-cards.four{grid-template-columns:1fr}}

/* ---- Feature grid (outcomes) ---- */
.ioc-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-feature{position:relative;background:var(--ioc-surface,#fff);padding:clamp(26px,2.4vw,34px);overflow:hidden;transition:background .3s var(--ioc-ease)}
.ioc-feature::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--ioc-accent);transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ioc-ease)}
.ioc-feature:hover{background:var(--ioc-hover-wash,#f7faff)}
.ioc-feature:hover::before{transform:scaleX(1)}
.ioc-feature .ioc-fmark{width:auto;height:auto;display:block;border:0;margin-bottom:clamp(14px,1.4vw,20px);font-family:var(--ioc-mono);font-size:clamp(34px,3.4vw,46px);font-weight:400;line-height:.9;letter-spacing:-.04em;color:var(--ioc-g30,#c6c6c6);transition:color .3s var(--ioc-ease),transform .38s var(--ioc-ease);transform-origin:left center}
.ioc-feature:hover .ioc-fmark{color:var(--ioc-accent)}
.ioc-feature .ioc-fmark svg{width:30px;height:30px;display:block;color:var(--ioc-accent)}
.ioc-feature b{display:block;font-size:clamp(17px,1.35vw,20px);font-weight:700;margin-bottom:8px;letter-spacing:-.02em;line-height:1.2}
.ioc-feature p{margin:0;color:var(--ioc-text-secondary);font-size:14.5px;line-height:1.55;text-wrap:pretty}
@media(max-width:900px){.ioc-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ioc-features{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ioc-feature,.ioc-feature::before,.ioc-feature .ioc-fmark,.ioc-chip,.ioc-chip::after{transition:none}}

/* ---- B-11 Delivery lifecycle / process ---- */
.ioc-process{display:grid;grid-template-columns:repeat(6,1fr);gap:0;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);overflow:hidden}
.ioc-step{box-shadow:1px 1px 0 0 var(--ioc-border-subtle)}
.ioc-block.dark .ioc-process{background:var(--ioc-surface-inverse-raised,#1c1c1c);border-color:var(--ioc-g80);overflow:hidden}
.ioc-block.dark .ioc-step{box-shadow:1px 1px 0 0 var(--ioc-g80)}
.ioc-step{background:var(--ioc-surface,#fff);padding:clamp(20px,1.8vw,26px);display:flex;flex-direction:column;gap:10px}
.ioc-block.dark .ioc-step{background:var(--ioc-g90)}
.ioc-step .ioc-step-n{font-family:var(--ioc-mono);font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ioc-accent)}
.ioc-block.dark .ioc-step .ioc-step-n{color:var(--ioc-accent-on-inverse)}
.ioc-step b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.ioc-step p{margin:0;font-size:13px;line-height:1.5;color:var(--ioc-text-secondary)}

/* B-11 step shading: each stage a step lighter than the last, so the strip reads as one path. */
.dark .ioc-process .ioc-step:nth-child(1){background:var(--ioc-surface-inverse-raised,#1c1c1c)}
.dark .ioc-process .ioc-step:nth-child(2){background:color-mix(in srgb,var(--ioc-surface-inverse-raised) 97.8%,white)}
.dark .ioc-process .ioc-step:nth-child(3){background:var(--ioc-g90,#262626)}
.dark .ioc-process .ioc-step:nth-child(4){background:color-mix(in srgb,var(--ioc-surface-inverse-raised) 93.39%,white)}
.dark .ioc-process .ioc-step:nth-child(5){background:color-mix(in srgb,var(--ioc-surface-inverse-raised) 91.19%,white)}
.dark .ioc-process .ioc-step:nth-child(6){background:color-mix(in srgb,var(--ioc-surface-inverse-raised) 88.99%,white)}
.ioc-block:not(.dark) .ioc-step b{color:var(--ioc-text-primary)}
.ioc-block:not(.dark) .ioc-step p{color:var(--ioc-text-secondary)}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(1){background:var(--ioc-surface,#fff)}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(2){background:color-mix(in oklch,var(--ioc-accent) 2%,var(--ioc-surface))}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(3){background:color-mix(in oklch,var(--ioc-accent) 4%,var(--ioc-surface))}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(4){background:color-mix(in oklch,var(--ioc-accent) 6%,var(--ioc-surface))}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(5){background:color-mix(in oklch,var(--ioc-accent) 8%,var(--ioc-surface))}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(6){background:color-mix(in oklch,var(--ioc-accent) 10%,var(--ioc-surface))}

@media(max-width:1080px){.ioc-process{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.ioc-process{grid-template-columns:1fr}}

/* ---- B-08 Capability matrix ---- */
.ioc-cap{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-cap>div{background:var(--ioc-surface,#fff);padding:clamp(22px,2vw,30px)}
.ioc-cap h3{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.ioc-cap ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ioc-cap li{position:relative;padding-left:20px;font-size:14px;color:var(--ioc-text-secondary);line-height:1.5}
.ioc-cap li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;background:var(--ioc-accent)}
@media(max-width:720px){.ioc-cap{grid-template-columns:1fr}}

/* ---- B-05 Outcome navigator ---- */
.ioc-nav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle);margin-bottom:0}
.ioc-nav-btn{background:var(--ioc-surface,#fff);border:0;text-align:left;padding:18px 20px;cursor:pointer;display:block;transition:background .16s var(--ioc-ease)}
.ioc-nav-btn:hover{background:var(--ioc-g10)}
.ioc-nav-btn[aria-pressed="true"]{background:var(--ioc-selected-surface,#edf5ff);box-shadow:inset 3px 0 0 var(--ioc-accent)}
.ioc-nav-btn b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.ioc-nav-btn span{display:block;font-size:13px;color:var(--ioc-text-secondary);line-height:1.45}
.ioc-rec{border:1px solid var(--ioc-accent);background:var(--ioc-hover-wash,#f7faff);padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;gap:8px;justify-content:center}
.ioc-rec .ioc-rec-k{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-accent)}
.ioc-rec h3{margin:0;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.015em}
.ioc-rec p{margin:0;color:var(--ioc-text-secondary);font-size:15px;line-height:1.55}
.ioc-rec a{margin-top:8px;align-self:flex-start}
.ioc-nav-split{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:stretch}
@media(max-width:860px){.ioc-nav-split{grid-template-columns:1fr}.ioc-nav-grid{grid-template-columns:1fr}}

/* ---- B-12 CTA band ---- */
.ioc-cta{background:linear-gradient(115deg,var(--ioc-selected-surface,#edf5ff) 0%,var(--ioc-hover-wash,#f7faff) 58%,var(--ioc-wash-pink,#fff1f7) 150%);color:var(--ioc-text-primary);border-top:1px solid var(--ioc-border-subtle)}
.ioc-cta .ioc-cta-panel{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.ioc-cta .ioc-kicker{color:var(--ioc-accent)}
.ioc-cta h2{margin:0;font-size:clamp(26px,3vw,42px);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ioc-text-primary);text-wrap:balance}
.ioc-cta p{margin:16px 0 0;color:var(--ioc-text-secondary);font-size:16px;line-height:1.6;max-width:52ch}
.ioc-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:860px){.ioc-cta .ioc-cta-panel{grid-template-columns:1fr}}
.ioc-cta-panel.has-form{grid-template-columns:1fr 1fr;align-items:start}
.ioc-cta-panel.has-form>div:first-child{align-self:center}
.ioc-cta-form{position:relative;display:flex;flex-direction:column;gap:16px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);box-shadow:0 1px 2px rgba(16,22,60,.05);padding:clamp(20px,2.2vw,28px)}
.ioc-cta-form::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--ioc-accent)}
.ioc-cta-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ioc-cta-field{display:flex;flex-direction:column;gap:7px}
.ioc-cta-field>span{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-secondary)}
.ioc-cta-field input{border:1px solid var(--ioc-g30);background:var(--ioc-surface,#fff);color:var(--ioc-text-primary);font-family:var(--ioc-sans);font-size:15px;padding:12px 14px}
.ioc-cta-field input::placeholder{color:var(--ioc-placeholder)}
.ioc-cta-field input:focus{outline:0;border-color:var(--ioc-accent);box-shadow:0 0 0 3px rgba(0,1,255,.14);background:var(--ioc-surface,#fff)}
.ioc-cta-field.invalid input{border-color:var(--ioc-danger,#da1e28);box-shadow:0 0 0 3px rgba(218,30,40,.14)}
.ioc-cta-form>.btn{align-self:stretch;justify-content:space-between;min-height:52px;font-weight:700}
.ioc-cta-reassure{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0}
.ioc-cta-reassure span{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;color:var(--ioc-text-secondary)}
.ioc-cta-reassure span svg{width:16px;height:16px;flex:none;color:var(--ioc-green)}
.ioc-cta-form.is-sent .ioc-cta-reassure{display:none}
.ioc-cta-note{margin:0;font-family:var(--ioc-mono);font-size:12px;line-height:1.55;color:var(--ioc-text-secondary)}
.ioc-cta-note a{color:var(--ioc-accent);text-decoration:underline}
.ioc-cta-confirm{display:none;margin:0;font-size:16px;line-height:1.5;color:var(--ioc-text-primary)}
.ioc-cta-confirm b{display:block;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-accent);margin-bottom:8px;font-weight:400}
.ioc-cta-form.is-sent .ioc-cta-fields,.ioc-cta-form.is-sent>.btn,.ioc-cta-form.is-sent .ioc-cta-note{display:none}
.ioc-cta-form.is-sent .ioc-cta-confirm{display:block}
@media(max-width:860px){.ioc-cta-panel.has-form{grid-template-columns:1fr}.ioc-cta-fields{grid-template-columns:1fr}}

/* ---- B-16 FAQ ---- */
.ioc-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(28px,4vw,64px);align-items:start}
.ioc-faq-list{display:flex;flex-direction:column;border-top:1px solid var(--ioc-border-subtle)}
.ioc-faq-item{border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ioc-text-primary)}
.ioc-faq-item summary::-webkit-details-marker{display:none}
.ioc-faq-item summary .ioc-faq-sign{flex:none;width:22px;height:22px;position:relative;transition:transform .2s var(--ioc-ease)}
.ioc-faq-item summary .ioc-faq-sign::before,.ioc-faq-item summary .ioc-faq-sign::after{content:"";position:absolute;background:var(--ioc-accent)}
.ioc-faq-item summary .ioc-faq-sign::before{left:0;top:10px;width:22px;height:2px}
.ioc-faq-item summary .ioc-faq-sign::after{left:10px;top:0;width:2px;height:22px;transition:transform .2s var(--ioc-ease)}
.ioc-faq-item[open] summary .ioc-faq-sign::after{transform:scaleY(0)}
.ioc-faq-item p{margin:0 0 20px;color:var(--ioc-text-secondary);font-size:15px;line-height:1.6;max-width:60ch}
@media(max-width:860px){.ioc-faq{grid-template-columns:1fr;gap:24px}}

/* ---- B-17 Related pages ---- */
.ioc-related{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-related a{background:var(--ioc-surface,#fff);padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:8px;transition:background .16s var(--ioc-ease)}
.ioc-related a:hover{background:var(--ioc-g10)}
.ioc-related .ioc-rel-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-related b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.ioc-related span.d{color:var(--ioc-text-secondary);font-size:14px;line-height:1.5}
.ioc-related .ioc-rel-go{margin-top:auto;color:var(--ioc-accent);font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.ioc-related .ioc-rel-go svg{width:16px;height:16px;flex:none;transition:transform .18s var(--ioc-ease)}
.ioc-related a:hover .ioc-rel-go svg{transform:translateX(3px)}
@media(max-width:860px){.ioc-related{grid-template-columns:1fr}}

/* ---- B-09 Media split ---- */
.ioc-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.ioc-media.flip .ioc-media-fig{order:2}
.ioc-media-fig{border:1px solid var(--ioc-border-subtle);overflow:hidden;background:var(--ioc-surface,#fff)}
.ioc-media-fig img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--ioc-g20)}
.ioc-media-fig figcaption{padding:12px 14px;border-top:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-secondary);line-height:1.5}
.ioc-media ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ioc-media li{position:relative;padding-left:22px;font-size:15px;color:var(--ioc-text-secondary);line-height:1.5}
.ioc-media li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;background:var(--ioc-accent)}
@media(max-width:860px){.ioc-media{grid-template-columns:1fr;gap:24px}.ioc-media.flip .ioc-media-fig{order:0}}

/* ---- B-19 KPI / evidence strip ---- */
.ioc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-kpi{background:var(--ioc-surface,#fff);padding:clamp(22px,2.2vw,30px)}
.ioc-block.dark .ioc-kpi{background:var(--ioc-g90)}
.ioc-kpi .n{font-size:clamp(30px,3.4vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ioc-kpi .l{margin-top:10px;font-size:14px;color:var(--ioc-text-secondary);line-height:1.45}
@media(max-width:820px){.ioc-kpis{grid-template-columns:repeat(2,1fr)}}

/* ---- B-13 Search / filter directory ---- */
.ioc-dir-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.ioc-dir-search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);padding:0 14px;height:48px}
.ioc-dir-search svg{width:18px;height:18px;color:var(--ioc-text-helper);flex:none}
.ioc-dir-search input{flex:1;border:0;outline:0;font-family:var(--ioc-sans);font-size:15px;background:transparent;color:var(--ioc-text-primary)}
.ioc-filter{display:inline-flex;align-items:center;height:48px;padding:0 16px;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);font-family:var(--ioc-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ioc-text-secondary);cursor:pointer;transition:all .15s var(--ioc-ease)}
.ioc-filter[aria-pressed="true"]{border-color:var(--ioc-accent);color:var(--ioc-accent);background:var(--ioc-hover-wash,#f7faff)}
.ioc-dir{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-dir-item{background:var(--ioc-surface,#fff);padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:8px}
.ioc-dir-item[hidden]{display:none}
.ioc-dir-item .ioc-dir-meta{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-dir-item h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.ioc-dir-item p{margin:0;font-size:14px;color:var(--ioc-text-secondary);line-height:1.5}
@media(max-width:760px){.ioc-dir{grid-template-columns:1fr}}

/* ---- B-22 Role directory / B-23 cert catalog (list rows) ---- */
.ioc-rows{border:1px solid var(--ioc-border-subtle)}
.ioc-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto;gap:20px;align-items:center;padding:20px 24px;border-bottom:1px solid var(--ioc-border-subtle);transition:background .15s var(--ioc-ease)}
.ioc-row:last-child{border-bottom:0}
.ioc-row:hover{background:var(--ioc-g10)}
.ioc-row .ioc-row-t b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.ioc-row .ioc-row-t span{display:block;margin-top:3px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-row .ioc-row-d{font-size:14px;color:var(--ioc-text-secondary);line-height:1.5}
.ioc-row .ioc-row-go{color:var(--ioc-accent);font-weight:600;font-size:14px;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.ioc-row .ioc-row-go svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s var(--ioc-ease)}
.ioc-row:hover .ioc-row-go svg{transform:translateX(3px)}
@media(max-width:760px){.ioc-row{grid-template-columns:1fr;gap:8px}.ioc-row .ioc-row-go{justify-self:start}}

/* ---- B-14 Lead form ---- */
.ioc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ioc-field{display:flex;flex-direction:column;gap:8px}
.ioc-field.full{grid-column:1/-1}
.ioc-field label{font-size:13px;font-weight:600;color:var(--ioc-text-primary)}
.ioc-field label .req{color:var(--ioc-accent)}
.ioc-field input,.ioc-field select,.ioc-field textarea{border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);padding:13px 14px;font-family:var(--ioc-sans);font-size:15px;color:var(--ioc-text-primary);transition:border-color .15s var(--ioc-ease),box-shadow .15s var(--ioc-ease)}
.ioc-field input:focus,.ioc-field select:focus,.ioc-field textarea:focus{outline:0;border-color:var(--ioc-accent);box-shadow:var(--ioc-shadow-focus)}
.ioc-field textarea{min-height:120px;resize:vertical}
/* The site-standard field had NO placeholder rule, so every .ioc-form on the
   site (the thin campaign landers, the chat panel) fell to the browser default
   -- black at 50% alpha, which is exactly the "hint reads as a value" report
   the shared token exists to end. The audit that found it was per-page, which
   is why a token that covered four field classes still missed the fifth. */
.ioc-field input::placeholder,.ioc-field textarea::placeholder{color:var(--ioc-placeholder)}
/* The two search boxes carry a STORE-backed placeholder (search.placeholder,
   with a registered fallback) and had no rule either. The coverage test in
   form-placeholder-contract found them; a class that styles its input must
   style its hint. */
.ioc-search-field input::placeholder,.search-field input::placeholder{color:var(--ioc-placeholder)}
.ioc-form-note{font-size:13px;color:var(--ioc-text-helper);line-height:1.5;margin:0}
@media(max-width:620px){.ioc-form-grid{grid-template-columns:1fr}}

/* ---- B-15 Location / map ---- */
.ioc-map{display:grid;grid-template-columns:1fr 1.4fr;gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-map-info{background:var(--ioc-surface,#fff);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:14px}
.ioc-map-info h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.ioc-map-info p,.ioc-map-info a{margin:0;font-size:15px;color:var(--ioc-text-secondary);line-height:1.55}
.ioc-map-info a:hover{color:var(--ioc-accent)}
.ioc-map-frame{background:var(--ioc-g20);min-height:320px;position:relative}
.ioc-map-frame img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){.ioc-map{grid-template-columns:1fr}}

/* ---- B-24 Newsletter ---- */
.ioc-news{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;border:1px solid var(--ioc-border-subtle);background:var(--ioc-g10);padding:clamp(28px,3vw,48px)}
.ioc-news h2{margin:0;font-size:clamp(24px,2.6vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.ioc-news p{margin:12px 0 0;color:var(--ioc-text-secondary);font-size:15px;line-height:1.55}
.ioc-news form{display:flex;gap:10px;flex-wrap:wrap}
.ioc-news input{flex:1;min-width:200px;border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);padding:14px;font-family:var(--ioc-sans);font-size:15px}
.ioc-news input:focus{outline:0;border-color:var(--ioc-accent);box-shadow:var(--ioc-shadow-focus)}
@media(max-width:760px){.ioc-news{grid-template-columns:1fr}}

/* ---- B-18 Photo band ---- */
.ioc-photoband{position:relative;min-height:clamp(280px,32vw,440px);overflow:hidden;background:var(--ioc-g100)}
.ioc-photoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.ioc-photoband .wrap{position:relative;z-index:2;display:flex;align-items:center;min-height:inherit;padding-top:48px;padding-bottom:48px}
.ioc-photoband h2{color:var(--ioc-text-on-color,#fff);font-size:clamp(26px,3.4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.06;max-width:20ch;text-wrap:balance}
.ioc-photoband p{color:var(--ioc-text-on-color,#fff);opacity:.86;font-size:17px;line-height:1.6;max-width:52ch;margin-top:16px}

/* ---- B-21 Source / status note ---- */
.ioc-note{border:1px solid var(--ioc-amber-line);background:var(--ioc-amber-bg);padding:18px 22px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.ioc-note .ioc-note-k{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-amber);white-space:nowrap}
.ioc-note p{margin:0;font-size:14px;color:var(--ioc-text-primary);line-height:1.5;max-width:78ch}
.ioc-note a{color:var(--ioc-amber);text-decoration:underline}

/* ---- B-04 Persona switcher ---- */
.ioc-persona-tabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle);margin-bottom:0}
.ioc-persona-tab{flex:1;min-width:150px;background:var(--ioc-surface,#fff);border:0;padding:16px 18px;text-align:left;cursor:pointer;transition:background .15s var(--ioc-ease)}
.ioc-persona-tab:hover{background:var(--ioc-g10)}
.ioc-persona-tab[aria-selected="true"]{background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff)}
.ioc-persona-tab b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.ioc-persona-tab span{display:block;margin-top:3px;font-size:12px;color:var(--ioc-text-helper)}
.ioc-persona-tab[aria-selected="true"] span{color:var(--ioc-g40)}
.ioc-persona-panel{border:1px solid var(--ioc-border-subtle);border-top:0;padding:clamp(24px,2.6vw,36px)}
.ioc-persona-panel[hidden]{display:none}
.ioc-persona-panel p{margin:0;font-size:16px;line-height:1.6;color:var(--ioc-text-secondary);max-width:70ch}

/* reveal hooks respected by ioc-motion.js; safe default visible */
.no-js [data-reveal]{opacity:1}

/* ============================================================
   NEW TEMPLATES · article, landing, search states, block states
   ============================================================ */

/* ---- Article / guide detail ---- */
.ioc-article{padding-top:clamp(40px,4vw,64px);padding-bottom:clamp(48px,6vw,88px)}
.ioc-article .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);gap:clamp(32px,4vw,64px);align-items:start}
.ioc-arthead{border-bottom:1px solid var(--ioc-border-subtle);padding-bottom:clamp(24px,3vw,36px);margin-bottom:clamp(28px,3vw,44px)}
.ioc-arthead h1{margin:14px 0 0;font-size:clamp(30px,3.8vw,52px);font-weight:800;line-height:1.03;letter-spacing:-.03em;text-wrap:balance;max-width:20ch}
.ioc-artmeta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;align-items:center;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.03em;color:var(--ioc-text-helper)}
.ioc-artmeta .ioc-who{display:flex;align-items:center;gap:10px;font-family:var(--ioc-sans);font-size:14px;color:var(--ioc-text-primary);font-weight:600}
.ioc-artmeta .ioc-avatar{width:34px;height:34px;border-radius:50%!important;background:var(--ioc-g20);border:1px solid var(--ioc-border-subtle);flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--ioc-mono);font-size:11px;color:var(--ioc-text-helper)}
.ioc-share{display:flex;gap:8px;margin-left:auto}
.ioc-share a{width:34px;height:34px;border:1px solid var(--ioc-border-subtle);display:flex;align-items:center;justify-content:center;color:var(--ioc-text-secondary)}
.ioc-share a:hover{border-color:var(--ioc-accent);color:var(--ioc-accent)}
.ioc-share svg{width:16px;height:16px}
.ioc-prose{max-width:66ch;font-size:clamp(16px,1.15vw,18px);line-height:1.7;color:var(--ioc-text-primary)}
.ioc-prose>*+*{margin-top:1.15em}
.ioc-prose h2{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;margin-top:1.8em;line-height:1.15}
.ioc-prose h3{font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.01em;margin-top:1.5em}
.ioc-prose p{color:var(--ioc-text-secondary)}
.ioc-prose ul,.ioc-prose ol{padding-left:1.3em;color:var(--ioc-text-secondary)}
.ioc-prose li+li{margin-top:.5em}
.ioc-prose a{color:var(--ioc-accent);text-decoration:underline;text-underline-offset:2px}
.ioc-prose figure{margin:1.8em 0}
.ioc-prose figure img{width:100%;display:block;border:1px solid var(--ioc-border-subtle)}
.ioc-prose figcaption{margin-top:10px;font-size:13px;color:var(--ioc-text-helper);font-family:var(--ioc-mono)}
.ioc-callout{border-left:3px solid var(--ioc-accent);background:var(--ioc-g10);padding:20px 24px;font-size:17px;line-height:1.55;color:var(--ioc-text-primary)}
.ioc-callout .ioc-callout-k{display:block;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-accent);margin-bottom:8px}
.ioc-aside{position:sticky;top:7rem;display:flex;flex-direction:column;gap:22px;font-size:14px}
.ioc-toc b,.ioc-aside-card b{display:block;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:12px}
.ioc-toc{border-top:2px solid var(--ioc-text-primary);padding-top:16px}
.ioc-toc a{display:block;padding:6px 0;color:var(--ioc-text-secondary);line-height:1.4;border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-toc a:hover{color:var(--ioc-accent)}
.ioc-aside-card{border:1px solid var(--ioc-border-subtle);padding:20px}
.ioc-aside-card p{margin:0 0 14px;color:var(--ioc-text-secondary);line-height:1.5}
@media(max-width:900px){.ioc-article .wrap{grid-template-columns:1fr}.ioc-aside{position:static;order:2}}

/* ---- Landing: reduced shell ---- */
body.ioc-lp .ioc-header .nav,body.ioc-lp .ioc-header .search-open,body.ioc-lp .ioc-header .mobile-toggle{display:none}
body.ioc-lp .footer-routes,body.ioc-lp .footer-main{display:none}
.ioc-lp-offer{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-lp-offer>div{background:var(--ioc-surface,#fff);padding:clamp(22px,2.4vw,32px)}
.ioc-lp-offer .n{font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-accent);letter-spacing:.08em}
.ioc-lp-offer b{display:block;margin:10px 0 6px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.ioc-lp-offer p{margin:0;font-size:14px;color:var(--ioc-text-secondary);line-height:1.5}
@media(max-width:820px){.ioc-lp-offer{grid-template-columns:1fr}}
.ioc-lp-proof{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;padding:22px 0;border-top:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-lp-proof span{font-family:var(--ioc-mono);font-size:13px;color:var(--ioc-text-secondary);letter-spacing:.03em}

/* ---- Search results states ---- */
.ioc-searchbar{display:flex;align-items:center;gap:12px;border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);padding:0 16px;height:56px;max-width:640px}
.ioc-searchbar svg{width:20px;height:20px;color:var(--ioc-text-helper);flex:none}
.ioc-searchbar input{flex:1;border:0;outline:0;background:transparent;font-family:var(--ioc-sans);font-size:17px;color:var(--ioc-text-primary)}
.ioc-resultmeta{margin:20px 0 8px;font-family:var(--ioc-mono);font-size:13px;color:var(--ioc-text-helper)}
.ioc-result-list{border-top:1px solid var(--ioc-border-subtle)}
.ioc-result{display:block;padding:22px 0;border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-result .k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-result h3{margin:6px 0 4px;font-size:20px;font-weight:700;letter-spacing:-.015em}
.ioc-result h3 a:hover{color:var(--ioc-accent)}
.ioc-result p{margin:0;color:var(--ioc-text-secondary);font-size:15px;line-height:1.55;max-width:76ch}
.ioc-result .u{margin-top:8px;font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-accent)}
.ioc-empty{border:1px dashed var(--ioc-border-strong);background:var(--ioc-g10);padding:clamp(32px,4vw,56px);text-align:center}
.ioc-empty h3{margin:0 0 10px;font-size:22px;font-weight:700;letter-spacing:-.015em}
.ioc-empty p{margin:0 auto 20px;color:var(--ioc-text-secondary);font-size:15px;line-height:1.6;max-width:52ch}
.ioc-empty .ioc-empty-topics{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* ---- Block states (form / feed) ---- */
.ioc-statebanner{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border:1px solid var(--ioc-border-subtle);font-size:15px;line-height:1.5}
.ioc-statebanner .ioc-sb-ico{width:22px;height:22px;flex:none;border-radius:50%!important;display:flex;align-items:center;justify-content:center;color:var(--ioc-text-on-color,#fff);font-size:13px;font-weight:700}
.ioc-statebanner b{display:block;font-weight:700;margin-bottom:2px}
.ioc-statebanner p{margin:0;color:var(--ioc-text-secondary)}
.ioc-statebanner.ok{border-color:color-mix(in srgb,var(--ioc-success) 30%,var(--ioc-surface));background:var(--ioc-success-surface,#defbe6)}.ioc-statebanner.ok .ioc-sb-ico{background:var(--ioc-green,#0e6027)}
.ioc-statebanner.err{border-color:color-mix(in srgb,var(--ioc-danger) 30%,var(--ioc-surface));background:var(--ioc-danger-surface,#fff1f1)}.ioc-statebanner.err .ioc-sb-ico{background:var(--ioc-danger,#da1e28)}
.ioc-statebanner.info{border-color:color-mix(in srgb,var(--ioc-blue) 30%,var(--ioc-surface));background:var(--ioc-selected-surface,#edf5ff)}.ioc-statebanner.info .ioc-sb-ico{background:var(--ioc-accent)}
.ioc-field.invalid input,.ioc-field.invalid select,.ioc-field.invalid textarea{border-color:var(--ioc-danger,#da1e28);box-shadow:0 0 0 3px rgba(194,29,29,.12)}
.ioc-field .ioc-err{font-size:12px;color:var(--ioc-danger,#da1e28);font-weight:600}
.ioc-skel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-skel{background:var(--ioc-surface,#fff);padding:clamp(22px,2.2vw,30px)}
.ioc-skel span{display:block;height:12px;border-radius:2px!important;background:linear-gradient(90deg,var(--ioc-g10),var(--ioc-g20),var(--ioc-g10));background-size:200% 100%;animation:idcshimmer 1.3s infinite;margin-bottom:10px}
.ioc-skel span.s1{width:40%;height:10px}.ioc-skel span.s2{width:90%}.ioc-skel span.s3{width:70%}
@keyframes idcshimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:900px){.ioc-skel-grid{grid-template-columns:1fr}}
.ioc-btn-loading{position:relative;pointer-events:none;opacity:.75}
.ioc-spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:var(--ioc-border-on-color,#fff);border-radius:50%!important;animation:idcspin .7s linear infinite;vertical-align:-2px}
@keyframes idcspin{to{transform:rotate(360deg)}}

/* ---- Landing lead-capture split (B-14 on landing) ---- */
.ioc-lp-capture{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.ioc-lp-capture .ioc-lp-cap-copy h2{margin:0;font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.ioc-lp-capture .ioc-lp-cap-copy .lede{margin:16px 0 24px}
.ioc-lp-cap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ioc-lp-cap-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ioc-text-secondary);line-height:1.5}
.ioc-lp-cap-list li svg{width:20px;height:20px;flex:none;color:var(--ioc-accent);margin-top:1px}
.ioc-lp-cap-form{border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);padding:clamp(24px,2.6vw,36px)}
.ioc-lp-cap-form h3{margin:0 0 4px;font-size:20px;font-weight:700;letter-spacing:-.015em}
.ioc-lp-cap-form .sub{margin:0 0 20px;font-size:14px;color:var(--ioc-text-secondary)}
@media(max-width:820px){.ioc-lp-capture{grid-template-columns:1fr}}

/* ---- 404 / error page ---- */
.ioc-404{text-align:center;max-width:640px;margin:0 auto;padding:clamp(48px,8vw,96px) 0}
.ioc-404 .code{font-family:var(--ioc-mono);font-size:clamp(72px,14vw,150px);font-weight:600;line-height:.9;letter-spacing:-.03em;color:var(--ioc-accent)}
.ioc-404 h1{margin:20px 0 12px;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.025em}
.ioc-404 p{margin:0 auto 28px;color:var(--ioc-text-secondary);font-size:16px;line-height:1.6;max-width:46ch}
.ioc-404 .ioc-searchbar{margin:0 auto 28px}
.ioc-404-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* hero kicker as iconic breadcrumb: home / PAGE */
.ioc-kicker-crumb{gap:9px}
.ioc-kicker-crumb::before{display:none}
.ioc-home{display:inline-flex;align-items:center;color:var(--ioc-text-primary);padding-bottom:3px;border-bottom:2px solid var(--ioc-accent);line-height:1;transition:color .16s var(--ioc-ease)}
.ioc-home svg{width:16px;height:16px;display:block}
.ioc-home:hover{color:var(--ioc-accent)}
.ioc-kicker-crumb .ioc-sep{color:var(--ioc-text-helper);margin:0 3px}

/* ---- B-12 CTA action patterns (light band) ---- */
.ioc-cta-act{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ioc-cta-act>.btn{align-self:stretch;justify-content:space-between;min-height:52px}
.ioc-cta-note{font-size:12.5px;color:var(--ioc-text-secondary);margin:0}
.ioc-cta-slots{display:flex;flex-wrap:wrap;gap:8px}
.ioc-cta-slots span{font-family:var(--ioc-mono);font-size:12.5px;color:var(--ioc-text-primary);border:1px solid var(--ioc-g30);padding:8px 12px;transition:border-color .15s,color .15s}
.ioc-cta-aud{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.ioc-cta-aud button{flex:1 1 42%;border:1px solid var(--ioc-g30);background:var(--ioc-surface,#fff);color:var(--ioc-text-primary);padding:12px;text-align:left;cursor:pointer;font:inherit;transition:background .15s,color .15s,border-color .15s}
.ioc-cta-aud button[aria-selected=true]{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);border-color:var(--ioc-accent)}
.ioc-cta-aud b{display:block;font-size:14px}
.ioc-cta-aud small{display:block;font-size:12px;opacity:.82;margin-top:3px}
.ioc-cta-stats{display:flex;gap:26px;flex-wrap:wrap}
.ioc-cta-stats b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ioc-text-primary)}
.ioc-cta-stats span{font-size:12px;color:var(--ioc-text-secondary)}
.ioc-cta-guar{display:flex;flex-direction:column;gap:8px}
.ioc-cta-guar span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ioc-text-secondary)}
.ioc-cta-guar svg{width:15px;height:15px;color:var(--ioc-green);flex:none}

/* ---- B-14 Reassurance panel (beside the enquiry form) ---- */
.ioc-reassure{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,30px);background:var(--ioc-g10);border:1px solid var(--ioc-border-subtle)}
.ioc-rea-k{font-family:var(--ioc-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-rea-card{display:flex;gap:13px;padding:16px 18px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle)}
.ioc-rea-card svg{flex:none;width:18px;height:18px;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-rea-card b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.ioc-rea-card span{display:block;font-size:13.5px;line-height:1.5;color:var(--ioc-text-secondary)}
.ioc-rea-direct{margin-top:auto;padding-top:16px;border-top:1px solid var(--ioc-border-subtle);display:flex;flex-direction:column;gap:4px}
.ioc-rea-direct a{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14.5px;font-weight:600;color:var(--ioc-text-primary);text-decoration:none}
.ioc-rea-direct a svg{width:16px;height:16px;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-rea-direct a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}

/* ---- B-14 panel sits in the narrow first column ---- */
#enquiry .ioc-nav-split{grid-template-columns:minmax(18rem,23rem) minmax(0,1fr)}
@media(max-width:900px){#enquiry .ioc-nav-split{grid-template-columns:1fr}}
/* ---- B-15 Office: split card with map. Country tabs are ready for a second
   office: repeat .ioc-office and re-add the tablist when one exists. ---- */
.ioc-office-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.ioc-office-tabs button{padding:10px 16px;background:var(--ioc-surface-cool,#f2f4f8);border:1px solid transparent;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-primary);cursor:pointer;transition:background .18s var(--ioc-ease),color .18s var(--ioc-ease),border-color .18s var(--ioc-ease)}
.ioc-office-tabs button:hover{background:var(--ioc-surface,#fff);border-color:var(--ioc-text-primary)}
.ioc-office-tabs button[aria-selected="true"]{background:var(--ioc-accent);border-color:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.ioc-office{display:grid;grid-template-columns:minmax(19rem,26rem) 1fr;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
.ioc-office[hidden]{display:none}
.ioc-office-info{padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column}
.ioc-office-co{margin:0 0 4px;font-size:clamp(19px,1.7vw,23px);font-weight:800;letter-spacing:-.025em}
.ioc-office-reg{margin:0 0 22px;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-office-row{display:flex;gap:13px;padding:14px 0;border-top:1px solid var(--ioc-border-subtle)}
.ioc-office-row svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-office-row .k{display:block;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:3px}
.ioc-office-row a,.ioc-office-row .v{font-size:15px;line-height:1.45;font-weight:600;color:var(--ioc-text-primary);text-decoration:none}
.ioc-office-row a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-office-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:22px}
.ioc-office-acts a{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;background:var(--ioc-surface-cool,#f2f4f8);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-primary);text-decoration:none;transition:background .18s,color .18s}
.ioc-office-acts a svg{width:15px;height:15px;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-office-acts a:hover{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.ioc-office-acts a:hover svg{color:var(--ioc-text-on-color,#fff)}
.ioc-office-map{position:relative;min-height:22rem;border-left:1px solid var(--ioc-border-subtle);background:var(--ioc-g20);display:flex;align-items:center;justify-content:center}
.ioc-office-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
.ioc-office-badge{position:absolute;left:16px;top:16px;z-index:2;padding:8px 12px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-text-primary);font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.ioc-office-empty{padding:0 24px;text-align:center;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-secondary);line-height:1.6}
@media(max-width:900px){.ioc-office{grid-template-columns:1fr}.ioc-office-map{border-left:0;border-top:1px solid var(--ioc-border-subtle);min-height:16rem}}
@media(prefers-reduced-motion:reduce){.ioc-office-tabs button,.ioc-office-acts a,.ioc-rea-direct a{transition:none}}

/* ---- B-14 Route cards: tinted by the family the enquiry goes to ---- */
.ioc-cards [data-route-fam]{--rf:var(--ioc-accent);--rfi:var(--ioc-accent-ink,var(--ioc-accent));position:relative;background:color-mix(in oklch,var(--rf) 4%,var(--ioc-surface));border-top:2px solid var(--rf)!important;transition:background .2s var(--ioc-ease)}
.ioc-cards [data-route-fam="sol"]{--rf:var(--ioc-blue);--rfi:var(--ioc-blue)}
.ioc-cards [data-route-fam="aca"]{--rf:var(--ioc-fam-academy);--rfi:var(--ioc-fam-academy)}
.ioc-cards [data-route-fam="tal"]{--rf:var(--ioc-fam-talents);--rfi:var(--ioc-fam-talents-ink)}
.ioc-cards [data-route-fam="sup"]{--rf:var(--ioc-fam-company);--rfi:var(--ioc-fam-company)}
.ioc-cards [data-route-fam="com"]{--rf:var(--ioc-fam-company);--rfi:var(--ioc-fam-company)}
.ioc-cards [data-route-fam="ind"]{--rf:var(--ioc-fam-industries);--rfi:var(--ioc-fam-industries-ink)}
.ioc-cards [data-route-fam="tec"],.ioc-cards [data-route-fam="ins"]{--rf:var(--ioc-blue);--rfi:var(--ioc-blue)}
.ioc-cards [data-route-fam] .ioc-card-eyebrow{color:var(--rfi)}
.ioc-cards [data-route-fam] .ioc-cardicon,.ioc-cards [data-route-fam] .ioc-card-link{color:var(--rfi)}
.ioc-cards [data-route-fam]:hover{background:color-mix(in oklch,var(--rf) 9%,var(--ioc-surface))}
.ioc-cards [data-route-fam]:focus-visible{outline:3px solid var(--rf);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.ioc-cards [data-route-fam]{transition:none}}

/* ---- B-15b Regions served: tabs + market grid with per-market mailbox ---- */
.ioc-regions{margin-top:clamp(22px,2.4vw,32px)}
.ioc-region-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.ioc-region-tabs button{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;background:var(--ioc-surface-cool,#f2f4f8);border:1px solid transparent;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-primary);cursor:pointer;transition:background .18s var(--ioc-ease),color .18s var(--ioc-ease),border-color .18s var(--ioc-ease)}
.ioc-region-tabs button .n{font-size:10px;color:var(--ioc-text-helper)}
.ioc-region-tabs button:hover{background:var(--ioc-surface,#fff);border-color:var(--ioc-text-primary)}
.ioc-region-tabs button[aria-selected="true"]{background:var(--ioc-accent);border-color:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.ioc-region-tabs button[aria-selected="true"] .n{color:rgba(255,255,255,.78)}
.ioc-region-panel[hidden]{display:none}
.ioc-region-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px}
.ioc-region-head b{font-size:16px;font-weight:700;letter-spacing:-.015em}
.ioc-region-head span{font-size:14px;color:var(--ioc-text-secondary)}
.ioc-markets{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle)}
.ioc-markets>div{box-shadow:0 0 0 1px var(--ioc-border-subtle);background:var(--ioc-surface,#fff);padding:15px 17px}
.ioc-markets b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.ioc-markets .tag{font-style:normal;font-family:var(--ioc-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-on-color,#fff);background:var(--ioc-accent);padding:2px 6px}
.ioc-markets a{display:flex;align-items:center;gap:7px;margin-top:7px;font-family:var(--ioc-mono);font-size:11px;color:var(--ioc-text-secondary);text-decoration:none;word-break:break-all}
.ioc-markets a svg{flex:none;width:14px;height:14px;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-markets a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
@media(max-width:900px){.ioc-markets{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ioc-markets{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ioc-region-tabs button{transition:none}}

/* ---- Section header · right column lead sentence ---- */
.ioc-head .ioc-sh-lead{align-self:end}
.ioc-sh-lead p{margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--ioc-text-primary);max-width:36ch;text-wrap:pretty}
.ioc-sh-lead p b{font-weight:700}
.ioc-sh-lead .meta{display:block;margin-top:12px;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper);line-height:1.6}
.ioc-block.dark .ioc-sh-lead p{color:var(--ioc-g10,#f4f4f4)}
.ioc-block.dark .ioc-sh-lead .meta{color:var(--ioc-g40,#a8a8a8)}
@media(max-width:860px){.ioc-sh-lead p{max-width:none}}

/* Section-header route link, used inside .ioc-sh-lead */
.ioc-sh-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:.7rem;color:var(--ioc-accent,#0001ff);font-weight:600;font-size:.9rem;text-decoration:none}
.ioc-sh-link svg{width:1rem;height:1rem;transition:transform .18s ease}
.ioc-sh-link:hover svg{transform:translateX(4px)}
.dark .ioc-sh-link{color:var(--ioc-accent-on-inverse)}


/* ============================================================
   Reserved blocks, now built · B-07, B-08, B-12, B-14, B-16,
   B-18, B-19, B-20, B-23, B-24. Same contract as the rest of
   the library: white-first, square, 1px #e0e0e0, mono meta,
   family accent via var(--ioc-accent), container-clipped grids
   so a short final row never shows a divider block.
   ============================================================ */

/* ---- B-07 · Logo wall ---- */
.ioc-logowall{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);overflow:hidden}
.ioc-logowall .ioc-lw{display:flex;align-items:center;justify-content:center;min-height:112px;padding:24px 28px;box-shadow:1px 1px 0 0 var(--ioc-border-subtle);position:relative}
.ioc-logowall img{max-width:100%;max-height:40px;width:auto;height:auto;filter:grayscale(1);opacity:.62;transition:filter .18s ease,opacity .18s ease}
.ioc-logowall .ioc-lw:hover img{filter:none;opacity:1}
.ioc-logowall .ioc-lw-name{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-secondary)}
.ioc-logowall-note{margin:14px 0 0;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-block.dark .ioc-logowall{background:var(--ioc-surface-inverse-raised,#1c1c1c);border-color:var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-logowall .ioc-lw{box-shadow:1px 1px 0 0 var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-logowall img{filter:grayscale(1) invert(1);opacity:.7}
.ioc-block.dark .ioc-logowall .ioc-lw-name{color:var(--ioc-g40,#a8a8a8)}

/* ---- B-08 · Testimonial ---- */
.ioc-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);overflow:hidden}
.ioc-quote{padding:clamp(24px,3vw,36px);box-shadow:1px 1px 0 0 var(--ioc-border-subtle);display:flex;flex-direction:column;gap:20px;border-top:3px solid var(--ioc-accent)}
.ioc-quote blockquote{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.5;font-weight:600;letter-spacing:-.015em;color:var(--ioc-text-primary);text-wrap:pretty}
.ioc-quote blockquote::before{content:"";display:block}
.ioc-quote figcaption{display:flex;align-items:center;gap:14px;margin-top:auto}
.ioc-quote figcaption img{width:44px;height:44px;object-fit:cover;flex:none}
.ioc-quote .ioc-q-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.ioc-quote .ioc-q-who b{font-size:14px;font-weight:700;color:var(--ioc-text-primary)}
.ioc-quote .ioc-q-who span{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-secondary)}
.ioc-quote .ioc-q-src{font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-quote.lead{grid-column:1/-1}
.ioc-quote.lead blockquote{font-size:clamp(22px,2.6vw,34px);font-weight:700;line-height:1.24}
.ioc-block.dark .ioc-quotes{background:var(--ioc-surface-inverse-raised,#1c1c1c);border-color:var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-quote{box-shadow:1px 1px 0 0 var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-quote blockquote{color:var(--ioc-text-on-color,#fff)}
.ioc-block.dark .ioc-quote .ioc-q-who span,.ioc-block.dark .ioc-quote .ioc-q-src{color:var(--ioc-g40,#a8a8a8)}

/* ---- B-12 · Table ---- */
.ioc-tablewrap{border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);overflow-x:auto}
.ioc-tablewrap table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.ioc-tablewrap caption{text-align:left;padding:14px 18px;border-bottom:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-secondary)}
.ioc-tablewrap th{text-align:left;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--ioc-text-secondary);background:var(--ioc-g10);padding:12px 18px;border-bottom:1px solid var(--ioc-border-subtle);white-space:nowrap;position:sticky;top:0}
.ioc-tablewrap td{padding:14px 18px;border-bottom:1px solid var(--ioc-border-subtle);color:var(--ioc-text-secondary);line-height:1.55;vertical-align:top}
.ioc-tablewrap tbody tr:last-child td{border-bottom:0}
.ioc-tablewrap tbody tr:hover td{background:var(--ioc-g10)}
.ioc-tablewrap td:first-child{color:var(--ioc-text-primary);font-weight:600}
.ioc-tablewrap td.num,.ioc-tablewrap th.num{text-align:right;font-family:var(--ioc-mono);font-variant-numeric:tabular-nums}
.ioc-tablewrap .ioc-td-yes{color:var(--ioc-accent-ink,var(--ioc-accent));font-weight:700}
.ioc-tablewrap .ioc-td-no{color:var(--ioc-text-helper)}
.ioc-table-note{margin:12px 0 0;font-family:var(--ioc-mono);font-size:11px;color:var(--ioc-text-helper)}

/* ---- B-14 · Timeline ---- */
.ioc-timeline{display:grid;gap:0;border-left:2px solid var(--ioc-border-subtle);margin-left:8px}
.ioc-tl{position:relative;padding:0 0 clamp(28px,3vw,40px) clamp(24px,3vw,36px)}
.ioc-tl:last-child{padding-bottom:0}
.ioc-tl::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;background:var(--ioc-surface,#fff);border:2px solid var(--ioc-border-strong,#8d8d8d)}
.ioc-tl.done::before{background:var(--ioc-accent);border-color:var(--ioc-accent)}
.ioc-tl.now::before{background:var(--ioc-accent);border-color:var(--ioc-accent);box-shadow:0 0 0 4px color-mix(in oklch,var(--ioc-accent) 18%,var(--ioc-surface))}
.ioc-tl-when{display:block;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:6px}
.ioc-tl.now .ioc-tl-when,.ioc-tl.done .ioc-tl-when{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-tl b{display:block;font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.015em;color:var(--ioc-text-primary);margin-bottom:6px}
.ioc-tl p{margin:0;font-size:14px;line-height:1.65;color:var(--ioc-text-secondary);max-width:62ch}
.ioc-block.dark .ioc-timeline{border-left-color:var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-tl::before{background:var(--ioc-surface-inverse,#161616);border-color:var(--ioc-g60,#666666)}
.ioc-block.dark .ioc-tl p{color:var(--ioc-g30)}

/* ---- B-16 · Job listings ---- */
.ioc-jobs{display:grid;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);overflow:hidden}
.ioc-job{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:22px 24px;box-shadow:0 1px 0 0 var(--ioc-border-subtle);text-decoration:none;color:inherit;transition:background .16s ease}
.ioc-job:hover{background:var(--ioc-g10)}
.ioc-job:hover h3{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-job-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:8px}
.ioc-job-meta .ioc-job-fam{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-job h3{margin:0 0 6px;font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.015em;transition:color .16s ease}
.ioc-job p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ioc-text-secondary);max-width:70ch}
.ioc-job-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-accent-ink,var(--ioc-accent));white-space:nowrap}
.ioc-job-go svg{width:16px;height:16px;transition:transform .18s ease}
.ioc-job:hover .ioc-job-go svg{transform:translateX(4px)}
.ioc-jobs-empty{padding:32px 24px;font-size:14px;color:var(--ioc-text-secondary)}
@media(max-width:640px){.ioc-job{grid-template-columns:1fr}}

/* ---- B-18 · Code / spec ---- */
.ioc-code{border:1px solid var(--ioc-g80,#393939);background:var(--ioc-surface-inverse,#161616);overflow:hidden}
.ioc-code-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--ioc-g90,#262626);border-bottom:1px solid var(--ioc-g80,#393939);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-g40,#a8a8a8)}
.ioc-code-bar b{color:var(--ioc-text-on-color,#fff);font-weight:500;letter-spacing:.04em}
.ioc-code-bar .ioc-code-lang{margin-left:auto;color:var(--ioc-accent-on-inverse)}
.ioc-code pre{margin:0;padding:20px 18px;overflow-x:auto;font-family:var(--ioc-mono);font-size:12.5px;line-height:1.9;color:var(--ioc-g20,#e0e0e0);tab-size:2}
.ioc-code pre b{color:var(--ioc-accent-on-inverse);font-weight:500}
.ioc-code pre i{color:var(--ioc-g60,#666666);font-style:normal}
.ioc-code pre em{color:var(--ioc-success,#198038);font-style:normal}
.ioc-code-foot{padding:12px 16px;border-top:1px solid var(--ioc-g80,#393939);font-family:var(--ioc-mono);font-size:11px;color:var(--ioc-g50,#8d8d8d);line-height:1.7}

/* ---- B-19 · Comparison ---- */
.ioc-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);overflow:hidden}
.ioc-cmp{padding:clamp(22px,2.4vw,30px);box-shadow:1px 1px 0 0 var(--ioc-border-subtle);display:flex;flex-direction:column;gap:14px;border-top:3px solid var(--ioc-border-subtle)}
.ioc-cmp.pick{border-top-color:var(--ioc-accent);background:color-mix(in oklch,var(--ioc-accent) 4%,var(--ioc-surface))}
.ioc-cmp-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-cmp.pick .ioc-cmp-k{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-cmp h3{margin:0;font-size:clamp(17px,1.6vw,22px);font-weight:700;letter-spacing:-.02em}
.ioc-cmp>p{margin:0;font-size:14px;line-height:1.65;color:var(--ioc-text-secondary)}
.ioc-cmp ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--ioc-border-subtle)}
.ioc-cmp li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--ioc-border-subtle);font-size:13.5px;line-height:1.55;color:var(--ioc-text-secondary)}
.ioc-cmp li svg{width:16px;height:16px;margin-top:2px;flex:none;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-cmp li.no{color:var(--ioc-text-helper)}
.ioc-cmp li.no svg{color:var(--ioc-g40,#a8a8a8)}
.ioc-cmp .ioc-cmp-when{margin-top:auto;padding-top:6px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-primary)}

/* ---- B-20 · Banner ---- */
.ioc-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px 20px;align-items:center;padding:16px 20px;background:color-mix(in oklch,var(--ioc-accent) 6%,var(--ioc-surface));border-top:3px solid var(--ioc-accent);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-banner>svg{width:22px;height:22px;color:var(--ioc-accent-ink,var(--ioc-accent));flex:none}
.ioc-banner p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ioc-text-primary)}
.ioc-banner p b{font-weight:700}
.ioc-banner .ioc-banner-k{display:block;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-accent-ink,var(--ioc-accent));margin-bottom:4px}
.ioc-banner a.ioc-banner-go{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ioc-accent-ink,var(--ioc-accent));text-decoration:none;white-space:nowrap}
.ioc-banner a.ioc-banner-go svg{width:16px;height:16px;transition:transform .18s ease}
.ioc-banner a.ioc-banner-go:hover svg{transform:translateX(4px)}
.ioc-banner .ioc-banner-x{background:none;border:0;padding:6px;cursor:pointer;color:var(--ioc-text-secondary);line-height:0}
.ioc-banner .ioc-banner-x svg{width:16px;height:16px}
.ioc-banner .ioc-banner-x:hover{color:var(--ioc-text-primary)}
.ioc-banner.warn{background:var(--ioc-amber-bg,#fdf6ec);border-top-color:var(--ioc-amber,#b45309)}
.ioc-banner.warn>svg,.ioc-banner.warn .ioc-banner-k,.ioc-banner.warn a.ioc-banner-go{color:var(--ioc-amber,#b45309)}
@media(max-width:640px){.ioc-banner{grid-template-columns:auto minmax(0,1fr);}.ioc-banner a.ioc-banner-go{grid-column:2}}

/* ---- B-23 · Embed ---- */
.ioc-embed{border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
.ioc-embed-frame{position:relative;aspect-ratio:16/9;background:var(--ioc-surface-inverse,#161616);overflow:hidden}
.ioc-embed-frame iframe,.ioc-embed-frame video,.ioc-embed-frame img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.ioc-embed-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding:14px 18px;border-top:1px solid var(--ioc-border-subtle)}
.ioc-embed-cap b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.ioc-embed-cap span{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-embed-cap .ioc-embed-src{margin-left:auto}
.ioc-embed-consent{padding:14px 18px;border-top:1px solid var(--ioc-border-subtle);font-size:12.5px;line-height:1.7;color:var(--ioc-text-secondary)}
.ioc-embed-consent button{font:inherit;font-weight:600;color:var(--ioc-accent-ink,var(--ioc-accent));background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---- B-24 · Divider ---- */
.ioc-divider{border:0;height:1px;background:var(--ioc-border-subtle);margin:clamp(40px,6vw,80px) 0}
.ioc-divider.strong{height:2px;background:var(--ioc-text-primary)}
.ioc-divider.accent{height:3px;background:var(--ioc-accent);width:64px;margin-left:0}
.ioc-divider-label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin:clamp(40px,6vw,80px) 0}
.ioc-divider-label span{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-divider-label::after{content:"";height:1px;background:var(--ioc-border-subtle)}
.ioc-block.dark .ioc-divider{background:var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-divider-label::after{background:var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-divider-label span{color:var(--ioc-g50,#8d8d8d)}
@media(prefers-reduced-motion:reduce){.ioc-logowall img,.ioc-job,.ioc-job-go svg,.ioc-banner a.ioc-banner-go svg{transition:none}}

/* Icon sizing for link and question contracts (was missing) */
.ioc-cardlink svg{width:16px;height:16px;flex:none;transition:transform .15s var(--ioc-ease)}
.ioc-cardlink:hover svg{transform:translateX(3px)}
.ioc-faq-q svg{width:20px;height:20px;flex:none}

/* ---- absorbed from ioc-forms.css (CMS-D-071) ---- */
/* ============================================================
   INFOC Simple CTA Forms · v3.0.0 · styling
   Light only. Builds on the B-17 .ioc-field / .ioc-form-grid
   contract already in ioc-blocks.css rather than replacing it,
   so a preset-rendered form and a hand-written one look the same.
   Only the parts B-17 does not cover are defined here.
   ============================================================ */

.ioc-form{background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:22px}
/* The renderer wraps the fields, action, reassurance and consent in
   [data-form-body] so the success state can replace them in one node.
   That wrapper owns their rhythm; .ioc-form's gap does not reach them. */
.ioc-form [data-form-body]{display:flex;flex-direction:column;gap:22px}
.ioc-form-title{font-size:clamp(21px,2vw,27px);line-height:1.15;letter-spacing:-.02em;margin:0}
.ioc-form-copy{margin:-10px 0 0;color:var(--ioc-text-secondary);font-size:16px;line-height:1.55;max-width:54ch}

/* ---- ask line · sets the length of the ask before the first field ---- */
/* No separator glyph. Any divider attached to an item, whether a border
   or a pseudo-element, is placed by DOM position and cannot know where
   the flex line breaks, so it dangles on a wrapped row. Spacing alone
   separates these three at 11px uppercase mono. */
.ioc-form-ask{display:flex;flex-wrap:wrap;column-gap:26px;row-gap:8px;margin:-6px 0 0;padding:0;list-style:none}
.ioc-form-ask span{white-space:nowrap;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-text-secondary);line-height:1.2}

/* ---- reassurance · under the action, never above it.
   Named .ioc-form-sure, not .ioc-reassure: that name already belongs to
   the padded B-17 reassurance panel in ioc-blocks.css. ---- */
.ioc-form-sure{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 24px;margin:0;padding:18px 0 0;list-style:none;border-top:1px solid var(--ioc-border-subtle)}
.ioc-form-sure li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ioc-text-secondary)}
.ioc-form-sure svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--ioc-accent);fill:none;stroke:currentColor;stroke-width:2}

/* ---- error summary · focus lands here on a failed submit ---- */
.ioc-form-errors{border:1px solid var(--ioc-danger,#da1e28);border-left:3px solid var(--ioc-danger,#da1e28);background:var(--ioc-danger-surface,#fff1f1);padding:16px 20px}
.ioc-form-errors:focus{outline:2px solid var(--ioc-focus);outline-offset:2px}
.ioc-form-errors h4{margin:0 0 8px;font-size:15px;letter-spacing:-.01em}
.ioc-form-errors ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.ioc-form-errors a{color:var(--ioc-danger-text,#a2191f);font-size:14px}

/* ---- field error state ---- */
.ioc-field.is-error input,.ioc-field.is-error select,.ioc-field.is-error textarea{border-color:var(--ioc-danger,#da1e28)}
.ioc-choicegroup.is-error .ioc-choices{border-color:var(--ioc-danger,#da1e28)}
.ioc-field-error{margin:0;color:var(--ioc-danger-text,#a2191f);font-size:13px;font-family:var(--ioc-mono);letter-spacing:.01em}
.ioc-opt{color:var(--ioc-text-helper);font-weight:400;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* ---- radio group · one required state for the whole group ---- */
.ioc-choicegroup{grid-column:1/-1;border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ioc-choicegroup legend{padding:0;font-size:13px;font-weight:600;color:var(--ioc-text-primary)}
.ioc-choicegroup legend .req{color:var(--ioc-accent)}
.ioc-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-strong);overflow:hidden}
.ioc-choices:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(220px,1fr))}
.ioc-choice{background:var(--ioc-surface,#fff);box-shadow:1px 1px 0 0 var(--ioc-border-subtle);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-height:44px;transition:background var(--ioc-dur-fast) var(--ioc-ease)}
.ioc-choice:hover{background:var(--ioc-g10)}
.ioc-choice input{margin:3px 0 0;accent-color:var(--ioc-accent);width:16px;height:16px;flex:0 0 auto}
.ioc-choice b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ioc-choice small{display:block;margin-top:2px;color:var(--ioc-text-secondary);font-size:13px;line-height:1.4}
.ioc-choice:has(input:checked){background:color-mix(in oklch,var(--ioc-accent) 5%,var(--ioc-surface));box-shadow:inset 3px 0 0 0 var(--ioc-accent)}
.ioc-choice:focus-within{outline:2px solid var(--ioc-focus);outline-offset:-2px}

/* ---- collapsed secondary qualification ---- */
.ioc-more{grid-column:1/-1;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
.ioc-more>summary{cursor:pointer;padding:13px 16px;font-size:14px;font-weight:600;letter-spacing:-.01em;display:flex;gap:8px;align-items:center;min-height:44px}
.ioc-more>summary:hover{background:var(--ioc-g10)}
.ioc-more>summary:focus-visible{outline:2px solid var(--ioc-focus);outline-offset:-2px}
.ioc-more[open]>summary{border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-more .ioc-form-grid{padding:20px 16px}

/* ---- file input · limits stated before the picker opens ---- */
.ioc-filefield input[type="file"]{padding:11px 14px;font-size:14px;font-family:var(--ioc-sans)}
.ioc-filefield input[type="file"]::file-selector-button{font:inherit;font-size:12px;font-family:var(--ioc-mono);letter-spacing:.04em;text-transform:uppercase;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-text-primary);color:var(--ioc-text-primary);padding:7px 13px;margin-right:12px;cursor:pointer}
.ioc-filefield input[type="file"]::file-selector-button:hover{background:var(--ioc-text-primary);color:var(--ioc-text-on-color,#fff)}
.ioc-fhint{color:var(--ioc-text-helper);font-size:12px;font-family:var(--ioc-mono);letter-spacing:.02em}

/* ---- consent · separate, optional, unticked ---- */
.ioc-marketing{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ioc-text-secondary);line-height:1.5;cursor:pointer;min-height:44px;padding:0;margin-top:-6px}
.ioc-marketing input{margin:2px 0 0;accent-color:var(--ioc-accent);width:16px;height:16px;flex:0 0 auto}
.ioc-privacy{margin:0;font-size:12.5px;color:var(--ioc-text-helper);line-height:1.55;max-width:66ch}

/* ---- actions ---- */
.ioc-form-actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.ioc-form-actions .ioc-form-note{max-width:46ch;font-size:13.5px;line-height:1.5;color:var(--ioc-text-secondary)}
.ioc-form-actions .btn{flex:0 0 auto;padding-block:15px;font-size:15.5px}

/* ---- success · replaces the body, does not sit under it ---- */
.ioc-form-success[hidden],.ioc-form [hidden]{display:none}
.ioc-form-success{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:8px 0}
.ioc-form-success:focus{outline:2px solid var(--ioc-focus);outline-offset:4px}
.ioc-form-success h3{margin:0;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}
.ioc-form-success p{margin:0;color:var(--ioc-text-secondary);max-width:52ch}
.ioc-form-ok{width:44px;height:44px;display:grid;place-items:center;background:var(--ioc-accent);margin:0}
.ioc-form-ok svg{width:24px;height:24px;color:var(--ioc-text-on-color,#fff);fill:none}
.ioc-form-success .btn{margin-top:8px}

/* ---- honeypot ---- */
.ioc-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- compact presets · newsletter, download, event ---- */
.ioc-form.compact{gap:16px;padding:clamp(20px,2vw,28px)}
.ioc-form.compact [data-form-body]{gap:16px}
.ioc-form.compact .ioc-form-grid{grid-template-columns:1fr}
.ioc-form.compact .ioc-form-actions{justify-content:flex-start}

/* ---- on a dark band the form stays a light card ---- */
.ioc-block.dark .ioc-form,.cta-band .ioc-form{background:var(--ioc-surface,#fff);color:var(--ioc-text-primary)}
.ioc-block.dark .ioc-form-title,.cta-band .ioc-form-title{color:var(--ioc-text-primary)}
.ioc-block.dark .ioc-form p,.cta-band .ioc-form p{color:var(--ioc-text-secondary)}

@media(max-width:640px){
  .ioc-form-actions{flex-direction:column;align-items:stretch}
  .ioc-form-actions .btn{width:100%;justify-content:center;order:-1}
  .ioc-form-sure{gap:8px}
  .ioc-choices{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.ioc-choice{transition:none}}

/* arrow inside form buttons · the sprite is stroked, not filled */
.ioc-form .btn svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;transition:transform var(--ioc-dur-fast) var(--ioc-ease)}
.ioc-form .btn:hover svg{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.ioc-form .btn:hover svg{transform:none}}


/* CMS-D-071 D-9: the source set this inline on the legal row; carried as a class. */
.legal-actions{display:flex;align-items:center;gap:16px}

/* ==========================================================================
   CMS-D-071 W6 — empty-segment collapse for owned overlay item templates.
   Fixed item templates emit every optional segment; a segment whose bound
   value is empty must not paint (tags, eyebrows, notes, link stubs, glyphs).
   ========================================================================== */
.infoc-cms .ioc-tag:empty{display:none}
.infoc-cms .ioc-card-eyebrow:empty{display:none}
.infoc-cms .ioc-card-tags:not(:has(.ioc-tag:not(:empty))){display:none}
.infoc-cms .ioc-note:has(> p:empty){display:none}
.infoc-cms .ioc-sh-lead:has(> p:empty){display:none}
.infoc-cms .ioc-fmark svg:has(use[href$="#"]){display:none}
.infoc-cms .ioc-card-ix svg:has(use[href$="#"]){display:none}
.infoc-cms .ioc-card-link[href="#"]{display:none}
.infoc-cms .ioc-card[data-route-fam=""]{--rf:initial;--rfi:initial;background:var(--ioc-surface,#fff);border-top:0!important}

/* CMS-D-071 W7 — the talents role-family rowgroup styles, absorbed VERBATIM
   from the page-local <style> shared by talents/professionals.html and
   talents/employers.html (W2 skipped them as dead; the W6 fixed variants
   B-11-V07/V08 now emit this markup). */
.ioc-rowgroup{margin-bottom:28px}.ioc-rowgroup>h3{font-size:clamp(18px,1.8vw,24px);font-weight:700;letter-spacing:-.015em;margin:0 0 14px}.ioc-rowgroup>h3 span{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-helper);margin-left:10px}

/* ==========================================================================
   CMS-D-071 W11 — the home page design, absorbed VERBATIM from the six
   inline <style> blocks of docs/designs/infoc-site/index.html (the home
   design lives nowhere else). .showcase is rewritten to .showcase —
   the render wrapper carries the scope classes on the home page.
   ========================================================================== */

.infoc-logo{display:inline-flex;align-items:baseline;font-family:"Michroma",sans-serif;font-weight:400;letter-spacing:.11em;line-height:1;padding-bottom:.26em;-webkit-text-stroke:.063em currentColor;paint-order:stroke fill}.infoc-logo .g{display:inline-block}.infoc-logo .g:first-child{margin-right:-.07em}.infoc-logo .g:nth-child(2){margin-right:-.04em}.infoc-logo .gc{position:relative;color:var(--ioc--blue);margin-right:-.02em}.infoc-logo .gc::after{content:"";position:absolute;left:0;top:calc(100% + .122em);width:calc(100% - .11em);height:.14em;background:currentColor}.logo .logo-sub{margin-left:.65rem;padding-left:.65rem;border-left:1px solid var(--ioc--g20);color:var(--ioc--g70);font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;align-self:center}
.architecture-table-wrap{overflow-x:auto;border-top:1px solid var(--ioc--g20)}.architecture-table{width:100%;border-collapse:collapse;font-size:.85rem}.architecture-table th,.architecture-table td{text-align:left;padding:1rem;border-bottom:1px solid var(--ioc--g20);vertical-align:top}.architecture-table th{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc--g70)}.assessment-result{display:none}.assessment-result.active{display:block}.score-ring{width:6rem;height:6rem;border:3px solid var(--ioc--blue);border-radius:50%;display:grid;place-items:center;margin-bottom:1.5rem}.score-ring strong{font-size:1.6rem;font-weight:600;color:var(--ioc--blue)}.result-notification{margin:1.5rem 0;padding:1.25rem;background:var(--ioc--g10);border-left:4px solid var(--ioc--blue)}.result-notification strong{display:block;margin-bottom:.35rem}.result-notification p{margin:0;color:var(--ioc--g70);font-size:.85rem}

    /* Legacy --ioc--* names alias the canonical --ioc-* tokens in ioc-core.css.
   Never give one of these a literal value: two namespaces with two values is how
   the same grey ended up painted twice on one page. */
body.ioc-site{--ioc--blue:var(--ioc-blue);--ioc--g100:var(--ioc-g100);--ioc--g70:var(--ioc-g70);--ioc--g60:var(--ioc-g60);--ioc--g30:var(--ioc-g30);--ioc--g20:var(--ioc-g20);--ioc--g10:var(--ioc-g10);--ioc--white:var(--ioc-white);--ioc--black:var(--ioc-g100);--ioc--focus:var(--ioc-focus);--ioc--ease:var(--ioc-ease);--ioc--max:1440px;--ioc--gutter:clamp(1.25rem,4vw,4rem);--ioc--section:clamp(5rem,9vw,9rem)}
    *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:5rem}body{margin:0;background:var(--ioc--white);color:var(--ioc--g100);font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}::selection{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:1000;background:var(--ioc--blue);color:var(--ioc-text-on-primary,#fff);padding:.75rem 1rem}.skip-link:focus{top:1rem}:focus-visible{outline:3px solid var(--ioc--focus);outline-offset:3px}.container{width:min(100%,var(--ioc--max));margin-inline:auto;padding-inline:var(--ioc--gutter)}.eyebrow{display:flex;align-items:center;gap:.75rem;margin:0 0 1.25rem;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:600}.eyebrow:before{content:"";width:2rem;height:2px;background:var(--ioc--blue)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:400;letter-spacing:-.035em;line-height:1.02}h1{font-size:clamp(3rem,6.8vw,7.25rem)}h2{font-size:clamp(2.35rem,4.7vw,5rem)}h3{font-size:clamp(1.35rem,2.1vw,2rem)}.lede{max-width:48rem;color:var(--ioc--g70);font-size:clamp(1.08rem,1.5vw,1.35rem);line-height:1.55}.section{padding-block:var(--ioc--section);border-top:1px solid var(--ioc--g20)}.section-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr);gap:clamp(2rem,6vw,7rem);align-items:end;margin-bottom:clamp(3rem,6vw,6rem)}.section-head p{margin:0;color:var(--ioc--g70);font-size:1.05rem}.section-kicker{font-family:"JetBrains Mono",monospace;color:var(--ioc--blue);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:2.5rem;min-height:3.5rem;padding:.9rem 1rem;border:1px solid transparent;border-radius:0;background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);font-weight:600;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ioc--ease)}.btn:hover{background:var(--ioc-blue-hover,#0000c4)}.btn:active{transform:translateY(1px)}.btn .icon{width:1.25rem}.btn-secondary{background:transparent;border-color:var(--ioc--g100);color:var(--ioc--g100)}.btn-secondary:hover{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.text-link{display:inline-flex;align-items:center;gap:.6rem;color:var(--ioc-link-color,var(--ioc--blue));font-weight:600}.text-link .icon{width:1.1rem;transition:transform .2s}.text-link:hover .icon{transform:translateX(.3rem)}.tag{display:inline-flex;padding:.35rem .6rem;background:var(--ioc--g10);font-size:.75rem;letter-spacing:.04em}.icon{width:1.5rem;height:1.5rem;flex:0 0 auto}
    .site-header{position:sticky;top:0;z-index:100;height:4rem;background:rgba(255,255,255,.94);border-bottom:1px solid var(--ioc--g20);backdrop-filter:blur(14px)}.nav-wrap{height:100%;display:flex;align-items:center}.logo{display:flex;align-items:center;align-self:stretch;min-width:10rem;font-size:1.45rem;font-weight:700;letter-spacing:-.08em}.logo-mark{color:var(--ioc--blue)}.nav{display:flex;align-self:stretch;margin-left:auto}.nav-item{position:relative}.nav-trigger,.nav-link{height:100%;display:flex;align-items:center;gap:.4rem;padding:0 1rem;border:0;background:transparent;font-size:.875rem;cursor:pointer}.nav-trigger:hover,.nav-link:hover,.nav-trigger[aria-expanded="true"]{background:var(--ioc--g10)}.nav-trigger .icon{width:1rem;transition:transform .2s}.nav-trigger[aria-expanded="true"] .icon{transform:rotate(180deg)}.nav-actions{display:flex;align-self:stretch;margin-left:.5rem}.nav-actions .btn{min-height:auto;height:100%;gap:1.5rem}.menu-toggle{display:none;width:4rem;height:4rem;border:0;border-left:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff);align-items:center;justify-content:center}.menu-toggle .icon{width:1.5rem}.mega.open{display:grid;animation:menuIn .22s var(--ioc--ease)}.mega a:hover{background:var(--ioc--g10)}.mega span{color:var(--ioc--g70);font-size:.85rem}@keyframes menuIn{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}
    .hero{position:relative;overflow:hidden}.hero-grid{min-height:calc(100vh - 4rem);min-height:calc(100svh - 4rem);display:grid;grid-template-columns:minmax(0,7fr) minmax(22rem,5fr);align-items:stretch}.hero-copy{padding:clamp(4rem,9vw,8rem) var(--ioc--gutter) 3rem max(var(--ioc--gutter),calc((100vw - var(--ioc--max))/2 + var(--ioc--gutter)));display:flex;flex-direction:column;justify-content:space-between}.hero h1{max-width:65rem;margin-bottom:2rem}.hero h1 em{color:var(--ioc--blue);font-style:normal}.hero-copy-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:1.5rem;border-top:1px solid var(--ioc--g20);font-size:.78rem;color:var(--ioc--g70)}.hero-panel{position:relative;background:var(--ioc--black);color:var(--ioc-text-on-color,#fff);padding:2rem;display:flex;flex-direction:column;justify-content:space-between;min-height:38rem}.panel-label{display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ioc-g30,#c6c6c6)}.panel-label:after{content:"● LIVE";color:var(--ioc-success,#198038)}.system-map{position:relative;aspect-ratio:1/1;max-height:32rem;margin:auto;width:100%}.system-map:before,.system-map:after{content:"";position:absolute;background:var(--ioc-g80,#393939)}.system-map:before{left:50%;top:10%;bottom:10%;width:1px}.system-map:after{top:50%;left:10%;right:10%;height:1px}.map-core,.map-node{position:absolute;border:1px solid var(--ioc-g70,#525252);background:var(--ioc--black);padding:1rem}.map-core{z-index:2;left:50%;top:50%;width:9rem;height:9rem;transform:translate(-50%,-50%);background:var(--ioc--blue);border-color:var(--ioc--blue);display:flex;flex-direction:column;justify-content:space-between}.map-core span{font-weight:700;letter-spacing:-.05em}.map-core strong{font-weight:400}.map-node{width:41%;min-height:6rem}.map-node small{color:var(--ioc-g50,#8d8d8d)}.map-node strong,.map-node span{display:block}.map-node strong{margin-top:.5rem;font-weight:500}.map-node span{color:var(--ioc-g40,#a8a8a8);font-size:.75rem}.node-a{left:0;top:0}.node-b{right:0;top:0}.node-c{left:0;bottom:0}.node-d{right:0;bottom:0}
    .proof{background:var(--ioc--g10);border-top:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20)}.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}.proof-item{padding:2rem;border-left:1px solid var(--ioc--g20);min-height:10rem}.proof-item:first-child{border-left:0}.proof-item strong{display:block;font-size:clamp(2rem,4vw,3.75rem);font-weight:300;letter-spacing:-.05em;line-height:1;color:var(--ioc--blue)}.proof-item span{display:block;margin-top:1rem;color:var(--ioc--g70);font-size:.85rem;max-width:12rem}
    .solution-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ioc--g20);border-left:1px solid var(--ioc--g20)}.solution-card{position:relative;min-height:25rem;padding:2rem;border-right:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20);display:flex;flex-direction:column;overflow:hidden;transition:background .25s,color .25s}.solution-card:hover{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.solution-card:hover p{color:var(--ioc-g30,#c6c6c6)}.solution-card .icon{margin:auto 0;color:var(--ioc--blue);width:3.5rem;height:3.5rem}.solution-card h3{margin-bottom:1rem}.solution-card p{color:var(--ioc--g70);font-size:.9rem}.solution-card .card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--ioc--g20);font-size:.78rem}.solution-card .card-foot .icon{width:1.1rem;height:1.1rem;margin:0}.solution-card:hover .card-foot{border-color:var(--ioc-g70,#525252)}
    .ai-section{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.ai-section .section-head p{color:var(--ioc-g30,#c6c6c6)}.ai-layout{display:grid;grid-template-columns:minmax(16rem,1fr) minmax(0,3fr);border-top:1px solid var(--ioc-g80,#393939)}.tabs{border-right:1px solid var(--ioc-g80,#393939)}.tab{width:100%;min-height:5rem;padding:1rem 1.25rem;border:0;border-bottom:1px solid var(--ioc-g80,#393939);background:transparent;color:var(--ioc-g30,#c6c6c6);text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.tab:hover{background:var(--ioc-g90,#262626)}.tab[aria-selected="true"]{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.tab-panel{display:none;min-height:30rem;padding:clamp(2rem,5vw,5rem)}.tab-panel.active{display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;animation:panelIn .35s var(--ioc--ease)}@keyframes panelIn{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}.tab-panel h3{font-size:clamp(2rem,4vw,4rem);max-width:42rem}.tab-panel p{color:var(--ioc-g30,#c6c6c6);max-width:42rem}.cap-list{align-self:end;list-style:none;margin:0;padding:0}.cap-list li{padding:1rem 0;border-top:1px solid var(--ioc-g80,#393939);display:flex;gap:.75rem}.cap-list .icon{width:1.1rem;color:var(--ioc-success,#198038)}
    .industry-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ioc--g20);border-left:1px solid var(--ioc--g20)}.industry{min-height:19rem;padding:1.5rem;border-right:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20);display:flex;flex-direction:column;justify-content:space-between;transition:background .2s}.industry:hover{background:var(--ioc--g10)}.industry .icon{color:var(--ioc--blue);width:2rem;height:2rem}.industry p{color:var(--ioc--g70);font-size:.85rem;margin-bottom:0}.industry strong{font-size:1.25rem;font-weight:500}.industry span{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--ioc--g60)}
    .process{background:var(--ioc--g10)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);counter-reset:steps}.step{position:relative;padding:2rem 2rem 4rem 0;border-top:2px solid var(--ioc--g100);counter-increment:steps}.step:before{content:"0" counter(steps);display:block;margin-bottom:4rem;color:var(--ioc--blue);font-family:"JetBrains Mono",monospace;font-size:.75rem}.step:not(:last-child):after{content:"";position:absolute;right:0;top:-5px;width:8px;height:8px;background:var(--ioc--blue)}.step h3{font-size:1.45rem}.step p{color:var(--ioc--g70);font-size:.9rem;max-width:17rem}
    .gateways{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc--g20);border:1px solid var(--ioc--g20)}.gateway{background:var(--ioc-surface,#fff);min-height:35rem;padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:space-between;transition:background .25s,color .25s}.gateway:hover{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.gateway .gateway-top{display:flex;justify-content:space-between}.gateway .icon{width:2.5rem;height:2.5rem}.gateway h3{font-size:clamp(2.5rem,5vw,5rem);margin-bottom:1rem}.gateway p{max-width:32rem;color:var(--ioc--g70)}.gateway:hover p{color:var(--ioc-text-on-color,#fff)}.gateway .text-link{color:inherit}.gateway-index{font-family:"JetBrains Mono",monospace;font-size:.75rem}
    .case-grid{display:grid;grid-template-columns:1.2fr .8fr;min-height:38rem;border:1px solid var(--ioc--g20)}.case-visual{position:relative;background:var(--ioc-surface-brand-deep,#001141);color:var(--ioc-text-on-color,#fff);padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.case-visual:after{content:"";position:absolute;width:24rem;height:24rem;right:-8rem;bottom:-8rem;border:5rem solid var(--ioc--blue);border-radius:50%;opacity:.7}.case-visual>.carbon-icon{position:relative;z-index:1;width:clamp(5rem,12vw,11rem);height:clamp(5rem,12vw,11rem);color:var(--ioc-text-on-color,#fff)}.case-visual p{position:relative;z-index:1;max-width:24rem;color:var(--ioc-text-on-brand-deep,#d0e2ff)}.case-copy{padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:space-between}.case-copy blockquote{font-size:clamp(1.5rem,2.5vw,2.6rem);line-height:1.25;letter-spacing:-.03em;margin:0}.case-copy cite{display:block;margin-top:2rem;color:var(--ioc--g70);font-size:.85rem;font-style:normal}.outcomes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ioc--g20)}.outcomes div{padding:1rem 0}.outcomes strong{display:block;font-size:1.75rem;font-weight:400}.outcomes span{font-size:.75rem;color:var(--ioc--g70)}
    .insights{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ioc--g20)}.insight{padding:2rem 2rem 2rem 0;min-height:25rem;border-bottom:1px solid var(--ioc--g20);display:flex;flex-direction:column}.insight:not(:last-child){border-right:1px solid var(--ioc--g20);margin-right:2rem}.insight-meta{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ioc--g60);text-transform:uppercase;letter-spacing:.06em}.insight-graphic{height:8rem;margin:2rem 0;background:var(--ioc--g10);position:relative;overflow:hidden}.insight-graphic:before{content:"";position:absolute;background:var(--ioc--blue);inset:auto 0 0;height:28%}.insight:nth-child(3) .insight-graphic:before{height:100%;left:66%;background:var(--ioc--g100)}.insight h3{font-size:1.45rem}.insight .text-link{margin-top:auto}
    .faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,8vw,9rem)}.faq-list{border-top:1px solid var(--ioc--g100)}.faq-item{border-bottom:1px solid var(--ioc--g20)}.faq-q{width:100%;border:0;background:transparent;padding:1.4rem 0;display:flex;justify-content:space-between;align-items:center;text-align:left;font-weight:500;cursor:pointer}.faq-q .icon{transition:transform .25s}.faq-q[aria-expanded="true"] .icon{transform:rotate(45deg)}.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ioc--ease)}.faq-a>div{overflow:hidden}.faq-a p{max-width:42rem;color:var(--ioc--g70);padding:0 2rem 1.5rem 0;margin:0}.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
    .contact{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,9vw,10rem)}.contact h2{font-size:clamp(3rem,6vw,6.5rem)}.contact p{color:var(--ioc-text-on-brand-soft,#e5e5ff);max-width:38rem}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.field{display:flex;flex-direction:column;gap:.5rem}.field.full{grid-column:1/-1}.field label{font-size:.75rem}.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid var(--ioc-border-on-color,#fff);background:rgba(255,255,255,.1);border-radius:0;color:var(--ioc-text-on-color,#fff);padding:1rem;outline:0}.field select option{color:var(--ioc--g100)}.field textarea{min-height:8rem;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{box-shadow:inset 0 -3px var(--ioc-border-on-color,#fff);background:rgba(255,255,255,.16)}.field input::placeholder,.field textarea::placeholder{color:var(--ioc-text-on-brand-muted,#d0d0ff)}.contact-form .btn{grid-column:1/-1;background:var(--ioc-text-on-color,#fff);color:var(--ioc--blue);margin-top:.5rem}.contact-form .btn:hover{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.form-note{grid-column:1/-1;font-size:.72rem;color:var(--ioc-text-on-brand-soft,#e5e5ff)}
    footer{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff);padding-top:4rem}.footer-top{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:3rem;padding-bottom:5rem}.footer-brand .logo{height:auto}.footer-brand p{color:var(--ioc-g40,#a8a8a8);max-width:22rem;margin-top:1.5rem}.footer-col h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-g50,#8d8d8d)}.footer-col a{display:block;padding:.35rem 0;color:var(--ioc-g30,#c6c6c6);font-size:.9rem}.footer-col a:hover{color:var(--ioc-text-on-color,#fff);text-decoration:underline}.footer-bottom{display:flex;justify-content:space-between;gap:2rem;padding:1.5rem 0;border-top:1px solid var(--ioc-g80,#393939);color:var(--ioc-g50,#8d8d8d);font-size:.75rem}.footer-bottom div{display:flex;gap:1.5rem}.back-top{border:0;background:transparent;color:var(--ioc-text-on-color,#fff);display:flex;gap:.5rem;cursor:pointer}.back-top .icon{transform:rotate(-90deg);width:1rem}
    .reveal{opacity:0;transform:translateY(1.5rem);transition:opacity .7s var(--ioc--ease),transform .7s var(--ioc--ease)}.reveal.visible{opacity:1;transform:none}.stagger>*{opacity:0;transform:translateY(1rem);transition:opacity .55s var(--ioc--ease),transform .55s var(--ioc--ease)}.stagger.visible>*{opacity:1;transform:none}.stagger.visible>*:nth-child(2){transition-delay:.07s}.stagger.visible>*:nth-child(3){transition-delay:.14s}.stagger.visible>*:nth-child(4){transition-delay:.21s}.stagger.visible>*:nth-child(5){transition-delay:.28s}.stagger.visible>*:nth-child(6){transition-delay:.35s}
    /* Direction 02: editorial composition */
    .editorial{--ioc--blue:var(--ioc-blue)}.editorial h1,.editorial h2{letter-spacing:-.055em}.editorial .site-header{height:5rem}.editorial .hero-grid{grid-template-columns:1fr;min-height:auto}.editorial .hero-copy{min-height:calc(100svh - 5rem);padding-top:clamp(5rem,10vw,10rem);display:grid;grid-template-columns:minmax(0,1.7fr) minmax(19rem,.3fr);column-gap:4rem}.editorial .hero-copy>.eyebrow{grid-column:1/-1;align-self:start}.editorial .hero h1{font-size:clamp(4rem,8.6vw,9.25rem);grid-column:1/-1;align-self:center;max-width:85rem}.editorial .hero-copy-bottom{grid-column:1/-1}.editorial .hero-panel{min-height:30rem;background:var(--ioc-surface,#fff);color:var(--ioc--g100);border-top:1px solid var(--ioc--g20);padding:var(--ioc--gutter);margin-inline:auto;width:min(100%,var(--ioc--max))}.editorial .panel-label{color:var(--ioc--g70)}.editorial .editorial-visual{display:grid;grid-template-columns:.4fr 1.6fr;gap:2rem;align-items:start}.quote-mark{font-size:14rem;line-height:.6;color:var(--ioc--blue);font-family:Georgia,serif;margin:0}.manifesto{font-size:clamp(2rem,4.5vw,5rem);line-height:1.1;letter-spacing:-.045em;max-width:62rem}.manifesto-foot{grid-column:2;display:flex;gap:2rem;border-top:1px solid var(--ioc--g20);padding-top:1rem;font-family:"JetBrains Mono",monospace;font-size:.72rem}.editorial .proof{background:var(--ioc-surface,#fff)}.editorial .proof-grid{border-top:1px solid var(--ioc--g20)}.editorial .proof-item{min-height:13rem;padding-top:3rem}.editorial .solution-grid{grid-template-columns:1fr 1fr}.editorial .solution-card{min-height:30rem}.editorial .solution-card:nth-child(3n){grid-column:span 2;min-height:22rem}.editorial .gateway{min-height:42rem}
    /* Direction 03: modular control system */
    .modular{--ioc--g10:var(--ioc-g10)}.modular .hero{background:var(--ioc--g10)}.modular .hero-grid{padding:var(--ioc--gutter);gap:1rem;grid-template-columns:1.05fr .95fr;min-height:calc(100svh - 4rem)}.modular .hero-copy{background:var(--ioc-surface,#fff);padding:clamp(3rem,6vw,6rem);border:1px solid var(--ioc--g20)}.modular .hero-panel{background:var(--ioc-surface,#fff);color:var(--ioc--g100);border:1px solid var(--ioc--g20);min-height:auto}.modular .panel-label{color:var(--ioc--g70)}.modular .control-centre{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:1rem;margin:auto 0}.cc-top,.cc-main,.cc-small,.cc-wide{border:1px solid var(--ioc--g20);padding:1.5rem}.cc-top{grid-column:1/-1;display:flex;align-items:center;gap:.75rem}.cc-top strong{margin-left:auto;font-size:1.75rem;font-weight:400}.status-dot{width:.65rem;height:.65rem;background:var(--ioc-success,#198038);border-radius:50%;box-shadow:0 0 0 .3rem var(--ioc-success-surface,#defbe6)}.cc-main{grid-row:2;min-height:17rem;display:flex;flex-direction:column}.cc-main strong{font-size:4rem;font-weight:300;color:var(--ioc--blue)}.bars{display:flex;gap:.4rem;align-items:end;height:7rem;margin-top:auto}.bars i{flex:1;background:var(--ioc--blue)}.cc-small{display:flex;flex-direction:column;justify-content:space-between}.cc-small strong{font-size:3rem;font-weight:300}.cc-wide{grid-column:1/-1}.progress{height:.4rem;background:var(--ioc--g20);margin:1rem 0 .6rem}.progress i{display:block;width:80%;height:100%;background:var(--ioc--blue)}.cc-wide small{color:var(--ioc--g70)}.modular .solution-grid{gap:1rem;border:0;background:var(--ioc--g10);padding:1rem}.modular .solution-card{border:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff)}.modular .solution-card:hover{background:var(--ioc--blue)}.modular .industry-strip{gap:1rem;border:0}.modular .industry{border:1px solid var(--ioc--g20)}.modular .process-grid{gap:1rem}.modular .step{background:var(--ioc-surface,#fff);padding:2rem;border:1px solid var(--ioc--g20)}.modular .step:before{margin-bottom:6rem}.modular .step:after{display:none}.modular .case-grid{gap:1rem;border:0;background:var(--ioc--g10);padding:1rem}.modular .case-visual,.modular .case-copy{border:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff);color:var(--ioc--g100)}.modular .case-visual p{color:var(--ioc--g70)}
    @media(max-width:1024px){.nav{display:none}.nav-actions .btn-secondary{display:none}.menu-toggle{display:flex}.site-header.mobile-open{height:auto}.site-header.mobile-open .nav-wrap{height:auto;min-height:4rem;flex-wrap:wrap}.site-header.mobile-open .nav{display:flex;order:4;width:100%;margin:0;flex-direction:column;border-top:1px solid var(--ioc--g20)}.site-header.mobile-open .nav-item,.site-header.mobile-open .nav-link,.site-header.mobile-open .nav-trigger{width:100%;height:auto;min-height:3.5rem}.site-header.mobile-open .mega{position:static;width:100%;box-shadow:none;border-inline:0;grid-template-columns:1fr 1fr}.hero-grid,.modular .hero-grid{grid-template-columns:1fr;min-height:auto}.hero-copy{min-height:45rem;padding-left:var(--ioc--gutter)}.hero-panel{min-height:36rem}.editorial .hero-copy{grid-template-columns:1fr}.editorial .hero-panel{width:100%}.solution-grid{grid-template-columns:1fr 1fr}.proof-grid{grid-template-columns:1fr 1fr}.proof-item:nth-child(3){border-left:0;border-top:1px solid var(--ioc--g20)}.proof-item:nth-child(4){border-top:1px solid var(--ioc--g20)}.ai-layout{grid-template-columns:1fr}.tabs{border-right:0;display:grid;grid-template-columns:repeat(4,1fr)}.tab{font-size:.8rem;border-right:1px solid var(--ioc-g80,#393939)}.tab-panel.active{grid-template-columns:1fr}.industry-strip{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr}.step:before{margin-bottom:2rem}.footer-top{grid-template-columns:1fr 1fr}.editorial .solution-card:nth-child(3n){grid-column:auto}.editorial .solution-grid{grid-template-columns:1fr 1fr}.editorial .editorial-visual{grid-template-columns:.25fr 1.75fr}}
    @media(max-width:700px){:root{--ioc--section:4.5rem}.container{padding-inline:1.25rem}.section-head{grid-template-columns:1fr;gap:1.5rem;margin-bottom:3rem}.site-header{height:4rem}.logo{min-width:auto}.nav-actions .btn{display:none}.hero-copy{min-height:auto;padding:4.5rem 1.25rem 3rem}.hero-copy-bottom{grid-template-columns:1fr}.hero-panel{min-height:31rem;padding:1.25rem}.hero-meta{margin-top:2rem}.hero h1{font-size:clamp(2.8rem,14vw,4.75rem)}.proof-grid{grid-template-columns:1fr 1fr}.proof-item{padding:1.25rem;min-height:9rem}.solution-grid,.editorial .solution-grid{grid-template-columns:1fr}.solution-card,.editorial .solution-card{min-height:22rem}.tabs{display:flex;overflow-x:auto}.tab{min-width:11rem}.tab-panel{padding:2rem 1.25rem}.industry-strip{grid-template-columns:1fr}.industry{min-height:14rem}.process-grid{grid-template-columns:1fr}.step{padding-right:0}.step:not(:last-child):after{display:none}.gateways{grid-template-columns:1fr}.gateway{min-height:28rem}.case-grid{grid-template-columns:1fr}.case-visual{min-height:26rem}.insights{grid-template-columns:1fr}.insight:not(:last-child){border-right:0;margin-right:0}.faq-wrap{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.contact-form{grid-template-columns:1fr}.field,.field.full{grid-column:1}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column}.editorial .hero-copy{display:flex;min-height:auto}.editorial .hero h1{font-size:clamp(3.2rem,15vw,5rem)}.editorial .hero-panel{min-height:30rem}.editorial .editorial-visual{grid-template-columns:1fr}.editorial .quote-mark{font-size:8rem}.editorial .manifesto-foot{grid-column:1;flex-wrap:wrap}.modular .hero-grid{padding:1rem}.modular .hero-copy{padding:3rem 1.25rem}.control-centre{gap:.5rem}.cc-top,.cc-main,.cc-small,.cc-wide{padding:1rem}.cc-main strong{font-size:3rem}.cc-small strong{font-size:2rem}.site-header.mobile-open .mega{grid-template-columns:1fr}.mega a{min-height:6rem}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}[data-reveal],[data-stagger]>*{opacity:1;transform:none}}
    .bars .b1{height:28%}.bars .b2{height:42%}.bars .b3{height:55%}.bars .b4{height:72%}.bars .b5{height:88%}

    /* INFOC definitive Carbon showcase */
    .showcase{--ioc--green:#198038}[data-reveal],[data-stagger]>*{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(1.5rem)}.js .reveal.visible{opacity:1;transform:none}.js .stagger>*{opacity:0;transform:translateY(1rem)}.js .stagger.visible>*{opacity:1;transform:none}
    .announcement{min-height:2.5rem;background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff);font-size:.75rem}.announcement .container{min-height:2.5rem;display:flex;align-items:center;justify-content:center;gap:1rem;text-align:center}.announcement strong{font-weight:600}.announcement a{display:inline-flex;align-items:center;gap:.35rem;color:var(--ioc-accent-on-inverse,#78a9ff)}.announcement .icon{width:.9rem;height:.9rem}
    
    .showcase .site-header{top:0}.showcase .logo{letter-spacing:-.07em}.showcase .logo-sub{margin-left:.65rem;padding-left:.65rem;border-left:1px solid var(--ioc--g20);color:var(--ioc--g70);font-family:"JetBrains Mono",monospace;font-size:.62rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
    .showcase-hero{position:relative;min-height:calc(100svh - 6.5rem);border-bottom:1px solid var(--ioc--g20);overflow:hidden}.showcase-hero .container{min-height:inherit;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(28rem,.8fr);gap:clamp(3rem,7vw,8rem);align-items:center;padding-block:clamp(5rem,9vw,9rem)}.showcase-hero h1{font-size:clamp(3.75rem,7.5vw,8rem);max-width:72rem;margin-bottom:2rem}.showcase-hero h1 em{font-style:normal;color:var(--ioc--blue)}.showcase-hero .lede{max-width:45rem}.showcase-hero .hero-actions{margin:2.25rem 0}.hero-trust{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin:0;padding:1.25rem 0 0;border-top:1px solid var(--ioc--g20);list-style:none;color:var(--ioc--g70);font-size:.78rem}.hero-trust li{display:flex;align-items:center;gap:.45rem}.hero-trust .icon{width:1rem;color:var(--ioc--green)}
    .decision-console{position:relative;border:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff);box-shadow:1.5rem 1.5rem 0 var(--ioc--g10);min-height:36rem}.console-bar{height:3rem;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;border-bottom:1px solid var(--ioc--g20);font-family:"JetBrains Mono",monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.console-status{display:flex;align-items:center;gap:.5rem;color:var(--ioc--green)}.console-status:before{content:"";width:.5rem;height:.5rem;background:var(--ioc-success,#198038);border-radius:50%}.console-body{padding:1.5rem}.console-question{margin:0 0 1rem;color:var(--ioc--g70);font-size:.8rem}.console-route{width:100%;border:1px solid var(--ioc--g20);border-bottom:0;background:var(--ioc-surface,#fff);padding:1rem;display:grid;grid-template-columns:2.5rem 1fr auto;gap:1rem;align-items:center;text-align:left;cursor:pointer}.console-route:last-of-type{border-bottom:1px solid var(--ioc--g20)}.console-route:hover,.console-route[aria-pressed="true"]{position:relative;z-index:1;border-color:var(--ioc--blue);background:var(--ioc-selected-surface,#edf5ff)}.console-route[aria-pressed="true"]:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--ioc--blue)}.console-route>.carbon-icon:first-child{width:1rem;height:1rem;color:var(--ioc--blue)}.console-route strong{display:block;font-weight:500}.console-route small{color:var(--ioc--g70)}.console-route .icon{width:1.1rem}.console-result{margin-top:1.5rem;padding:1.25rem;background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.console-result-label{display:block;color:var(--ioc-g40,#a8a8a8);font-family:"JetBrains Mono",monospace;font-size:.67rem;text-transform:uppercase;letter-spacing:.08em}.console-result strong{display:block;margin:.65rem 0;font-size:1.2rem;font-weight:500}.console-result p{color:var(--ioc-g30,#c6c6c6);font-size:.8rem;margin-bottom:0}
    .logo-proof{border-bottom:1px solid var(--ioc--g20)}.logo-proof .container{display:grid;grid-template-columns:1fr repeat(4,auto);gap:2rem;align-items:center;min-height:5.5rem}.logo-proof p{margin:0;color:var(--ioc--g70);font-size:.75rem}.proof-mark{display:flex;align-items:center;gap:.55rem;padding-left:2rem;border-left:1px solid var(--ioc--g20);white-space:nowrap;font-size:.75rem;font-weight:600}.proof-mark .icon{width:1rem;color:var(--ioc--blue)}
    .persona-section{background:var(--ioc--g10)}.content-switcher{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ioc--g20);margin-bottom:1rem}.persona-tab{min-height:4rem;padding:1rem;border:0;border-right:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff);text-align:left;cursor:pointer}.persona-tab:last-child{border-right:0}.persona-tab:hover{background:var(--ioc-surface-hover,#e8e8e8)}.persona-tab[aria-selected="true"]{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.persona-panel{display:none;background:var(--ioc-surface,#fff);border:1px solid var(--ioc--g20);min-height:28rem}.persona-panel.active{display:grid;grid-template-columns:1.25fr .75fr;animation:panelIn .3s var(--ioc--ease)}.persona-copy{padding:clamp(2rem,5vw,5rem)}.persona-copy h3{font-size:clamp(2.25rem,4.2vw,4.5rem);max-width:48rem}.persona-copy p{max-width:42rem;color:var(--ioc--g70);font-size:1.05rem}.persona-outcomes{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);padding:clamp(2rem,4vw,4rem);display:flex;flex-direction:column}.persona-outcomes>span{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.persona-outcomes ul{list-style:none;padding:0;margin:auto 0 0}.persona-outcomes li{display:flex;gap:.75rem;padding:1rem 0;border-top:1px solid rgba(255,255,255,.3)}.persona-outcomes .icon{width:1.1rem}
    .journey-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ioc--g20);border-left:1px solid var(--ioc--g20)}.journey{border-right:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff)}.journey summary{list-style:none;min-height:17rem;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}.journey summary::-webkit-details-marker{display:none}.journey summary:hover{background:var(--ioc--g10)}.journey[open] summary{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.journey-top{display:flex;justify-content:space-between}.journey-top span{display:inline-flex;align-items:center;gap:.5rem;font-family:"JetBrains Mono",monospace;color:var(--ioc--blue);font-size:.72rem}.journey-top span>.carbon-icon{width:1rem;height:1rem}.journey[open] .journey-top span{display:inline-flex;align-items:center;gap:.5rem;color:var(--ioc-accent-on-inverse,#78a9ff)}.journey-top span>.carbon-icon{width:1rem;height:1rem}.journey summary h3{max-width:28rem;margin:2rem 0 0}.journey-toggle{box-sizing:border-box;width:2rem;height:2rem;padding:.375rem;border:1px solid currentColor;transition:transform .2s}.journey[open] .journey-toggle{transform:rotate(45deg)}.journey-detail{padding:2rem;border-top:1px solid var(--ioc--g20);display:grid;grid-template-columns:1fr 1fr;gap:2rem}.journey-detail p{color:var(--ioc--g70)}.journey-detail ul{margin:0;padding:0;list-style:none}.journey-detail li{padding:.65rem 0;border-top:1px solid var(--ioc--g20);display:flex;gap:.6rem;font-size:.85rem}.journey-detail .icon{width:1rem;color:var(--ioc--green)}
    .architecture{background:var(--ioc-surface,#fff)}.architecture-shell{border:1px solid var(--ioc--g20);display:grid;grid-template-columns:17rem 1fr}.process-nav{background:var(--ioc--g10);border-right:1px solid var(--ioc--g20);padding:1rem}.process-button{width:100%;min-height:3.5rem;border:0;border-bottom:1px solid var(--ioc--g20);background:transparent;padding:.75rem;text-align:left;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.process-button:hover{background:var(--ioc-surface-hover,#e8e8e8)}.process-button[aria-selected="true"]{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.architecture-view{min-width:0;padding:clamp(1.5rem,4vw,4rem)}.architecture-title{display:flex;align-items:start;justify-content:space-between;gap:2rem;margin-bottom:3rem}.architecture-title h3{font-size:clamp(2rem,4vw,4rem);margin-bottom:.75rem}.architecture-title p{max-width:42rem;color:var(--ioc--g70)}.info-button{position:relative;border:0;background:transparent;color:var(--ioc--blue);padding:.5rem;cursor:help}.info-button .icon{width:1.3rem}.info-button:focus:after,.info-button:hover:after{content:attr(data-tooltip);position:absolute;right:0;top:100%;z-index:5;width:16rem;background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff);padding:.75rem;text-align:left;font-size:.72rem;font-weight:400}.layer-map{display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch}.layer{position:relative;min-height:15rem;padding:1.25rem;border:1px solid var(--ioc--g20);border-right:0;display:flex;flex-direction:column;justify-content:space-between}.layer:last-child{border-right:1px solid var(--ioc--g20)}.layer:after{content:"";position:absolute;left:100%;top:50%;z-index:2;width:1rem;height:1px;background:var(--ioc--g100)}.layer:last-child:after{display:none}.layer>.carbon-icon{width:1.25rem;height:1.25rem;color:var(--ioc--g70)}.layer strong{font-size:1rem;font-weight:500}.layer span{color:var(--ioc--g70);font-size:.75rem}.layer.active{background:var(--ioc--blue);border-color:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.layer.active>.carbon-icon,.layer.active span{color:var(--ioc-text-on-brand-deep,#d0e2ff)}.architecture-table-wrap{margin-top:2rem;overflow-x:auto}.architecture-table{width:100%;border-collapse:collapse;font-size:.82rem}.architecture-table th,.architecture-table td{padding:1rem;text-align:left;border-bottom:1px solid var(--ioc--g20)}.architecture-table th{background:var(--ioc--g10);font-weight:600}.architecture-table td:first-child{font-weight:600}.architecture-table .tag{white-space:nowrap}
    .value-section{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.value-section .section-head p{color:var(--ioc-g30,#c6c6c6)}.value-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc-g80,#393939);border:1px solid var(--ioc-g80,#393939)}.value-card{min-height:22rem;background:var(--ioc--g100);padding:2rem;display:flex;flex-direction:column}.value-card:hover{background:var(--ioc-g90,#262626)}.value-card>.carbon-icon{width:1.25rem;height:1.25rem;color:var(--ioc-accent-on-inverse,#78a9ff)}.value-card strong{display:block;margin:auto 0 1rem;font-size:clamp(2rem,4vw,4rem);font-weight:300;letter-spacing:-.05em}.value-card p{color:var(--ioc-g30,#c6c6c6);max-width:28rem}.value-card footer{display:flex;justify-content:space-between;align-items:center;padding:1rem 0 0;border-top:1px solid var(--ioc-g70,#525252);background:transparent;font-size:.75rem}.value-card .icon{width:1rem}
    .assessment-section{background:var(--ioc--g10)}.assessment-shell{display:grid;grid-template-columns:.72fr 1.28fr;border:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff);min-height:38rem}.assessment-aside{padding:clamp(2rem,4vw,4rem);background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);display:flex;flex-direction:column}.assessment-aside h3{font-size:clamp(2rem,4vw,4rem)}.assessment-aside p{color:var(--ioc-text-on-brand-soft,#e5e5ff)}.progress-steps{list-style:none;margin:auto 0 0;padding:0}.progress-steps li{display:grid;grid-template-columns:1.5rem 1fr;gap:.75rem;padding:.8rem 0;color:var(--ioc-text-on-brand-muted,#d0d0ff)}.progress-steps li:before{content:"";width:.75rem;height:.75rem;margin-top:.35rem;border:1px solid currentColor;border-radius:50%}.progress-steps li.current{color:var(--ioc-text-on-color,#fff);font-weight:600}.progress-steps li.current:before{background:var(--ioc-text-on-color,#fff);box-shadow:inset 0 0 0 3px var(--ioc--blue)}.progress-steps li.done:before{background:var(--ioc-success,#198038);border-color:var(--ioc-success,#198038)}.assessment-main{padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column}.assessment-step{display:none;border:0;padding:0;margin:0}.assessment-step.active{display:block;animation:panelIn .25s var(--ioc--ease)}.assessment-step legend{font-size:clamp(1.65rem,3vw,2.75rem);line-height:1.15;letter-spacing:-.03em;margin-bottom:2rem}.choice{position:relative;display:flex;gap:1rem;padding:1rem;border:1px solid var(--ioc--g20);border-bottom:0;cursor:pointer}.choice:last-child{border-bottom:1px solid var(--ioc--g20)}.choice:hover{background:var(--ioc--g10)}.choice input{position:absolute;opacity:0}.radio-ui{width:1.25rem;height:1.25rem;border:1px solid var(--ioc--g100);border-radius:50%;flex:0 0 auto}.choice input:checked+.radio-ui{background:var(--ioc--blue);box-shadow:inset 0 0 0 4px var(--ioc-border-on-color,#fff);border-color:var(--ioc--blue)}.choice:has(input:focus-visible){outline:3px solid var(--ioc--focus);outline-offset:2px}.choice-text strong,.choice-text small{display:block}.choice-text strong{font-weight:500}.choice-text small{color:var(--ioc--g70);margin-top:.2rem}.assessment-actions{margin-top:auto;padding-top:2rem;display:flex;justify-content:space-between;gap:1rem}.assessment-actions .btn[disabled]{background:var(--ioc-g30,#c6c6c6);color:var(--ioc-g60,#666666);cursor:not-allowed}.assessment-result{display:none}.assessment-result.active{display:block}.score-ring{width:10rem;height:10rem;border:1.5rem solid var(--ioc--g10);border-top-color:var(--ioc--blue);border-right-color:var(--ioc--blue);border-radius:50%;display:grid;place-items:center;margin-bottom:2rem}.score-ring strong{font-size:2.4rem;font-weight:300}.result-notification{border-left:4px solid var(--ioc--blue);background:var(--ioc-selected-surface,#edf5ff);padding:1rem;margin:1.5rem 0}.result-notification strong{display:block}.result-notification p{margin:.35rem 0 0;color:var(--ioc--g70)}
    .resource-toolbar{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2rem}.search-field{position:relative;width:min(100%,28rem)}.search-field label{display:block;margin-bottom:.4rem;font-size:.75rem}.search-field input{width:100%;height:3.5rem;padding:0 3rem 0 1rem;border:0;border-bottom:1px solid var(--ioc--g100);background:var(--ioc--g10)}.search-field .icon{position:absolute;right:1rem;bottom:1rem;width:1.25rem;pointer-events:none}.filter-status{color:var(--ioc--g70);font-size:.78rem}.insight[hidden]{display:none}.empty-state{display:none;padding:3rem;background:var(--ioc--g10);text-align:center}.empty-state.visible{display:block}
    .trust-centre{background:var(--ioc-surface,#fff)}.trust-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);border:1px solid var(--ioc--g20)}.trust-intro,.trust-item{min-height:18rem;padding:2rem;border-right:1px solid var(--ioc--g20)}.trust-item:last-child{border-right:0}.trust-intro{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.trust-intro h3{font-size:2rem}.trust-intro p{color:var(--ioc-g30,#c6c6c6)}.trust-item{display:flex;flex-direction:column}.trust-item .icon{color:var(--ioc--blue);width:2rem;height:2rem}.trust-item strong{margin:auto 0 .75rem;font-size:1.2rem;font-weight:500}.trust-item p{color:var(--ioc--g70);font-size:.82rem;margin:0}
    .sticky-conversion{position:fixed;z-index:90;left:50%;bottom:1rem;transform:translate(-50%,calc(100% + 2rem));width:min(calc(100% - 2rem),58rem);background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff);border:1px solid var(--ioc-g70,#525252);box-shadow:0 1rem 3rem rgba(0,0,0,.25);display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.75rem .75rem .75rem 1.25rem;transition:transform .35s var(--ioc--ease)}.sticky-conversion.visible{transform:translate(-50%,0)}.sticky-conversion p{margin:0;font-size:.82rem}.sticky-conversion .btn{min-height:2.75rem;padding:.65rem .9rem;gap:1rem}.sticky-close{border:0;background:transparent;color:var(--ioc-text-on-color,#fff);padding:.5rem;cursor:pointer}.sticky-close .icon{width:1rem}
    .carbon-dialog{width:min(calc(100% - 2rem),52rem);max-height:90vh;padding:0;border:0;background:var(--ioc-surface,#fff);color:var(--ioc--g100);box-shadow:0 2rem 6rem rgba(0,0,0,.35)}.carbon-dialog::backdrop{background:rgba(0,0,0,.65)}.dialog-head{display:flex;align-items:start;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--ioc--g20)}.dialog-head h2{font-size:2rem;margin:0}.dialog-close{width:3rem;height:3rem;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}.dialog-body{padding:clamp(1.5rem,4vw,3rem)}.dialog-body>p{color:var(--ioc--g70)}.dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.dialog-grid .field.full{grid-column:1/-1}.dialog-grid .field input,.dialog-grid .field select,.dialog-grid .field textarea{background:var(--ioc--g10);color:var(--ioc--g100);border-bottom:1px solid var(--ioc--g100)}.dialog-grid .field input::placeholder,.dialog-grid .field textarea::placeholder{color:var(--ioc--g70)}.checkbox{display:flex;gap:.75rem;align-items:start;font-size:.75rem;color:var(--ioc--g70)}.checkbox input{margin-top:.2rem;width:1rem;height:1rem}.dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:2rem}
    .showcase .contact{position:relative;overflow:hidden}.showcase .contact:after{content:"INFOC";position:absolute;right:-1rem;bottom:-3rem;color:rgba(255,255,255,.09);font-size:20vw;font-weight:700;letter-spacing:-.1em;line-height:.7;pointer-events:none}.showcase .contact-grid{position:relative;z-index:1}
    @media(max-width:1100px){.showcase-hero .container{grid-template-columns:1fr}.decision-console{max-width:46rem}.logo-proof .container{grid-template-columns:1fr 1fr}.logo-proof p{grid-column:1/-1;padding-top:1.25rem}.proof-mark{padding:0 0 1.25rem;border-left:0}.architecture-shell{grid-template-columns:1fr}.process-nav{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--ioc--g20)}.process-button{min-width:10rem}.layer-map{grid-template-columns:repeat(3,1fr)}.layer:nth-child(3){border-right:1px solid var(--ioc--g20)}.layer:nth-child(n+4){border-top:0}.assessment-shell{grid-template-columns:1fr}.progress-steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2rem}.trust-grid{grid-template-columns:1fr 1fr}.trust-intro,.trust-item{border-bottom:1px solid var(--ioc--g20)}}
    @media(max-width:700px){.announcement .container{padding-block:.55rem}.announcement strong{display:none}.showcase .logo-sub{display:none}.showcase-hero .container{padding-block:4rem;gap:3rem}.showcase-hero h1{font-size:clamp(3rem,14vw,5rem)}.decision-console{min-height:auto;box-shadow:.75rem .75rem 0 var(--ioc--g10)}.console-route{grid-template-columns:2rem 1fr}.console-route .icon{display:none}.logo-proof .container{grid-template-columns:1fr 1fr;gap:0}.logo-proof p{padding:1.25rem 0}.proof-mark{min-height:4rem;padding:0;border-top:1px solid var(--ioc--g20);font-size:.68rem}.content-switcher{grid-template-columns:1fr 1fr}.persona-tab:nth-child(2){border-right:0}.persona-tab:nth-child(-n+2){border-bottom:1px solid var(--ioc--g20)}.persona-panel.active{grid-template-columns:1fr}.persona-outcomes{min-height:19rem}.journey-grid{grid-template-columns:1fr}.journey summary{min-height:14rem}.journey-detail{grid-template-columns:1fr}.architecture-title{flex-direction:column}.layer-map{grid-template-columns:1fr}.layer,.layer:nth-child(3){min-height:9rem;border-right:1px solid var(--ioc--g20);border-top:0}.layer:first-child{border-top:1px solid var(--ioc--g20)}.layer:after{display:none}.value-grid{grid-template-columns:1fr}.value-card{min-height:18rem}.progress-steps{grid-template-columns:1fr 1fr}.assessment-main{min-height:34rem}.resource-toolbar{align-items:stretch;flex-direction:column}.trust-grid{grid-template-columns:1fr}.trust-intro,.trust-item{min-height:14rem;border-right:0}.sticky-conversion p{display:none}.sticky-conversion{width:auto;right:1rem;left:1rem;transform:translateY(calc(100% + 2rem))}.sticky-conversion.visible{transform:none}.dialog-grid{grid-template-columns:1fr}.dialog-grid .field.full{grid-column:1}.dialog-actions{flex-direction:column-reverse}.dialog-actions .btn{width:100%}}

    /* INFOC corporate typography system: IBM Plex hierarchy */
    :root{--ioc--font-sans:"Manrope","Helvetica Neue",Arial,sans-serif;--ioc--font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;--ioc--measure:68ch}
    .showcase{font-family:var(--ioc--font-sans);font-weight:400;line-height:1.6;text-rendering:optimizeLegibility;font-kerning:normal;font-synthesis:none;font-feature-settings:"kern" 1,"liga" 1,"calt" 1}
    .showcase :is(h1,h2,h3,h4,h5){margin-top:0;font-family:var(--ioc--font-sans);text-wrap:balance}
    /* P36 — `div.showcase` scores 0-1-2, the specificity these rules had in the
       source, where the scope class sat on the BODY element. (The selector is
       not spelled out here: the W11 spec asserts the absorbed sheet no longer
       contains that string, and a comment counts.) The absorption flattened
       them to a bare
       `.showcase h*` (0-1-1), which lost to the `body.ioc-site` generic above and
       tied with every block rule; the comment two blocks up still reads
       "`.showcase` is rewritten to `.showcase`", the fingerprint of the
       find/replace that ate its own subject. `div` is not decoration: the scope
       class rides a wrapper DIV here rather than <body>, and restoring the
       element part is what restores the source's cascade. Verified against the
       served source: all 41 headings match. */
    div.showcase h1{font-size:clamp(3.6rem,7vw,7.5rem);font-weight:var(--ioc-h1-weight,700);line-height:.96;letter-spacing:-.055em}
    div.showcase h2{font-size:clamp(2.35rem,4.7vw,5rem);font-weight:var(--ioc-h2-weight,700);line-height:1.03;letter-spacing:-.045em}
    div.showcase h3{font-size:clamp(1.4rem,2.2vw,2.2rem);font-weight:var(--ioc-h3-weight,600);line-height:1.14;letter-spacing:-.025em}
    div.showcase h4{font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:var(--ioc-h4-weight,600);line-height:1.25;letter-spacing:-.015em}
    div.showcase h5{font-size:.875rem;font-weight:600;line-height:1.35;letter-spacing:.045em;text-transform:uppercase}
    .showcase p{line-height:1.65;text-wrap:pretty}
    .showcase .lede{max-width:60ch;font-size:clamp(1.125rem,1.55vw,1.375rem);font-weight:400;line-height:1.58;letter-spacing:-.008em}
    .showcase .section-head>p{max-width:52ch;font-size:1.0625rem;line-height:1.65}
    .showcase :is(.eyebrow,.section-kicker,.panel-label,.num,.value-index,.gateway-index,.insight-meta,.layer small,.architecture-table th){font-family:var(--ioc--font-mono)}
    .showcase :is(strong,b){font-weight:600}
    .showcase .showcase-hero h1{max-width:13ch}
    .showcase .showcase-hero h1 em{font-weight:700}
    .showcase .solution-card h3{font-size:clamp(1.5rem,2.1vw,2rem);font-weight:600;line-height:1.18}
    .showcase .insight h3,.showcase .step h3{font-size:1.45rem;font-weight:600;line-height:1.18}
    .showcase .gateway h3{font-size:clamp(2.5rem,5vw,5rem);font-weight:600}
    .showcase .persona-copy h3{font-size:clamp(2.25rem,4.2vw,4.5rem);font-weight:600}
    .showcase .tab-panel h3,.showcase .architecture-title h3{font-size:clamp(2rem,4vw,4rem);font-weight:600}
    .showcase .assessment-aside h3{font-size:clamp(2rem,4vw,4rem);font-weight:600}
    .showcase .layer h4{margin:1rem 0 .45rem;font-size:1rem;line-height:1.25}
    .showcase .industry h3{margin:.55rem 0 .75rem;font-size:1.25rem;line-height:1.2}
    .showcase .trust-intro h2{font-size:2rem;line-height:1.1;letter-spacing:-.03em}
    .showcase .trust-item h3{margin:auto 0 .75rem;font-size:1.2rem;line-height:1.2}
    .showcase .footer-col h3{margin-bottom:1rem;color:var(--ioc-g40,#a8a8a8);font-size:.75rem;line-height:1.35;letter-spacing:.1em;text-transform:uppercase}
    .showcase .footer-col h5{margin-bottom:1rem;color:var(--ioc-g40,#a8a8a8)}
    .showcase .dialog-head h2{font-size:2rem;line-height:1.1}
    /* P36 — must track the `div.showcase` restoration above: left at 0-1-1 these
   responsive sizes would LOSE to the 0-1-2 base rules and mobile headings would
   silently keep their desktop clamp. */
@media(max-width:700px){div.showcase h1{font-size:clamp(3rem,14vw,5rem)}div.showcase h2{font-size:clamp(2.2rem,10vw,3.6rem)}div.showcase .showcase-hero h1{max-width:11ch}}

    /* Review refinement layer: homepage only */
    .review-index{--ioc--max:1360px;--ioc--gutter:clamp(1.25rem,3.4vw,3.5rem);--ioc--section:clamp(4.75rem,7.2vw,7.5rem);--ioc--g30:var(--ioc-g30);--ioc--nav-offset:7rem}
    .review-index section[id]{scroll-margin-top:var(--ioc--nav-offset)}
    .review-index .announcement{background:var(--ioc-surface-brand-deep,#001141)}
    .review-index .announcement a{font-weight:600}
    .review-index .site-header{box-shadow:0 1px 0 rgba(0,0,0,.04)}
    .review-index .nav-actions .btn{min-width:10.5rem;background:var(--ioc--blue)}
    .review-index .nav-actions .btn:hover{background:var(--ioc-blue-hover,#0000c4)}
    .review-index .showcase-hero{min-height:auto;background:linear-gradient(180deg,var(--ioc-surface,#fff) 0%,var(--ioc-surface,#fff) 78%,var(--ioc-surface-subtle,#fbfbfb) 100%)}
    .review-index .showcase-hero .container{grid-template-columns:minmax(0,1.08fr) minmax(26rem,.92fr);gap:clamp(3rem,6vw,6.5rem);padding-block:clamp(5.25rem,8vw,7.75rem)}
    .review-index .showcase-hero h1{max-width:11ch;font-size:clamp(3.8rem,7vw,7.25rem)}
    .review-index .showcase-hero .lede{max-width:58ch}
    .review-index .hero-note{max-width:42rem;margin:0 0 .75rem;color:var(--ioc--g100);font-size:.86rem;font-weight:600}
    .review-index .decision-console{min-height:32rem;box-shadow:1rem 1rem 0 var(--ioc--g10)}
    .review-index .console-body{padding:1.25rem}
    .review-index .console-route{padding:.9rem 1rem;transition:background .18s,border-color .18s,transform .18s var(--ioc--ease)}
    .review-index .console-route:hover{transform:translateX(.2rem)}
    .review-index .console-result{margin-top:1.25rem}
    .review-index .logo-proof .container{min-height:4.75rem}
    .review-index .page-nav{position:sticky;top:4rem;z-index:85;background:rgba(255,255,255,.96);border-bottom:1px solid var(--ioc--g20);backdrop-filter:blur(14px)}
    .review-index .page-nav-inner{display:flex;overflow-x:auto;scrollbar-width:none}
    .review-index .page-nav-inner::-webkit-scrollbar{display:none}
    .review-index .page-nav a{position:relative;display:flex;align-items:center;min-height:3.25rem;padding:0 1rem;white-space:nowrap;color:var(--ioc--g70);font-size:.78rem;font-weight:600}
    .review-index .page-nav a:hover{background:var(--ioc--g10);color:var(--ioc--g100)}
    .review-index .page-nav a.active{color:var(--ioc--blue)}
    .review-index .page-nav a.active:after{content:"";position:absolute;left:1rem;right:1rem;bottom:0;height:3px;background:var(--ioc--blue)}
    .review-index .proof-item{min-height:8.75rem;padding:1.5rem 2rem}
    .review-index .proof-item strong{font-size:clamp(2rem,3.4vw,3.25rem)}
    .review-index .section-head{gap:clamp(2rem,5vw,5.5rem);margin-bottom:clamp(2.75rem,5vw,4.75rem)}
    .review-index .persona-panel{min-height:24rem}
    .review-index .persona-copy{padding:clamp(2rem,4vw,4rem)}
    .review-index .persona-outcomes{padding:clamp(2rem,3.5vw,3.5rem)}
    .review-index .journey summary{min-height:13.5rem;padding:1.75rem}
    .review-index .journey-detail{padding:1.75rem}
    .review-index .solution-card{min-height:21.5rem;padding:1.75rem;transition:background .22s,color .22s,transform .22s var(--ioc--ease),box-shadow .22s}
    .review-index .solution-card .icon{width:3rem;height:3rem;margin:2.75rem 0 2rem}
    .review-index .solution-card:hover{background:var(--ioc-surface-brand,#001d6c);transform:translateY(-3px);box-shadow:0 1rem 2.5rem rgba(0,29,108,.14)}
    .review-index .architecture-view{padding:clamp(1.5rem,3.5vw,3.5rem)}
    .review-index .architecture-title{margin-bottom:2.25rem}
    .review-index .layer{min-height:12.5rem}
    .review-index .tab-panel{min-height:25rem;padding:clamp(2rem,4vw,4rem)}
    .review-index .industry{min-height:15.5rem}
    .review-index .step{padding-bottom:2.5rem}
    .review-index .step:before{margin-bottom:2.75rem}
    .review-index .gateway{min-height:28rem;padding:clamp(2rem,4vw,4rem)}
    .review-index .gateway h3{font-size:clamp(2.2rem,4.25vw,4rem)}
    .review-index .gateway:hover{background:var(--ioc-surface-brand,#001d6c)}
    .review-index .gateway.talent:hover{background:var(--ioc-magenta,#9f1853)}
    .review-index .value-card{min-height:18rem}
    .review-index .case-grid{min-height:30rem}
    .review-index .case-visual,.review-index .case-copy{padding:clamp(2rem,4vw,4rem)}
    .review-index .insight{min-height:21rem}
    .review-index .assessment-shell{min-height:34rem}
    .review-index .assessment-main{padding:clamp(2rem,4vw,4rem)}
    .review-index .result-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
    .review-index .result-actions .btn{margin:0}
    .review-index .trust-intro,.review-index .trust-item{min-height:15.5rem}
    .review-index .proof-trust{margin-top:clamp(2.25rem,4vw,3.5rem)}
    .review-index .proof-trust .trust-grid{grid-template-columns:repeat(4,1fr)}
    .review-index .proof-marks{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ioc--g20);border-top:0;background:var(--ioc-surface,#fff)}
    .review-index .proof-marks .proof-mark{display:flex;align-items:center;gap:.55rem;margin:0;padding:1.1rem 1.25rem;border-right:1px solid var(--ioc--g20);font-size:.85rem;font-weight:600;color:var(--ioc--g100)}
    .review-index .proof-marks .proof-mark:last-child{border-right:0}
    .review-index .proof-marks .carbon-icon{color:var(--ioc--blue)}
    .review-index .industry{display:flex;flex-direction:column;gap:.75rem;color:inherit;text-decoration:none;transition:background .2s,transform .2s}
    .review-index .industry:hover{background:var(--ioc--g10)}
    .review-index .industry .industry-cta{margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--ioc--blue);font-weight:600;font-size:.85rem}
    .review-index .industry .industry-cta .carbon-icon{transition:transform .18s var(--ioc--ease)}
    .review-index .industry:hover .industry-cta .carbon-icon{transform:translateX(.2rem)}
    .review-index .ca-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ioc--g20);margin-bottom:1.25rem;max-width:46rem}
    .review-index .ca-tab{min-height:3.6rem;padding:0 1.35rem;background:var(--ioc-surface,#fff);border:0;border-right:1px solid var(--ioc--g20);font:inherit;font-weight:600;color:var(--ioc--g70);cursor:pointer;text-align:left;transition:background .2s,color .2s}
    .review-index .ca-tab:last-child{border-right:0}
    .review-index .ca-tab[aria-selected="true"]{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}
    .review-index .ca-panel{display:none}
    .review-index .ca-panel.active{display:block;animation:panelIn .25s var(--ioc--ease)}
    .review-index #assessment{padding-bottom:clamp(2.5rem,4vw,3.5rem)}
    .review-index #proof{padding-block:var(--ioc--section)}
    .review-index .v1hero .wrap{max-width:none;width:100%;padding-inline:clamp(1.25rem,3.4vw,3.5rem)}
    .review-index .sec-num{position:absolute;top:.85rem;left:clamp(1.25rem,3.4vw,3.5rem);z-index:6;font-family:var(--ioc--font-mono,ui-monospace,monospace);font-size:.72rem;font-weight:600;letter-spacing:.14em;color:inherit;opacity:.32;pointer-events:none}
    .ioc-footer .footer-cta-grid.gs-full{padding-block:clamp(2.75rem,4vw,4.25rem)}
    .review-index .architecture-shell{box-shadow:0 1px 0 var(--ioc--g20)}
    .review-index .architecture-view .layer{transition:background .2s var(--ioc--ease),transform .2s var(--ioc--ease)}
    .review-index .architecture-view .layer:not(.active):hover{background:var(--ioc--g10);transform:translateY(-2px)}
    .review-index .architecture-table tbody tr{transition:background .18s}
    .review-index .architecture-table tbody tr:hover{background:var(--ioc--g10)}
    .review-index .process-button{transition:background .18s,color .18s}
    .ioc-footer .footer-cta-grid.gs-full{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(2rem,4vw,4rem);align-items:start;max-width:none}
    .ioc-footer .footer-cta-grid.gs-full .footer-action{border-left:1px solid var(--ioc-selected-border,#c6d9ff);padding-left:clamp(1.5rem,3vw,3rem)}
    .ioc-footer #get-started .assessment-shell,.ioc-footer #get-started .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
    .ioc-footer #get-started .contact h2{font-size:clamp(1.75rem,2.8vw,2.75rem)}
    .ioc-footer #get-started .ca-tabs{margin:0 0 1.25rem;max-width:36rem}
    .review-index .assessment-aside p{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
    .review-index #get-started .contact,.review-index #get-started .contact p,.review-index #get-started .contact label,.review-index #get-started .contact .hero-meta span{color:var(--ioc-text-on-color,#fff)}
    .review-index .contact{background:var(--ioc-surface-brand,#001d6c)}
    .review-index .contact-form .btn{color:var(--ioc-surface-brand,#001d6c)}
    .review-index .contact-form .btn:hover{color:var(--ioc-text-on-color,#fff)}
    .review-index .sticky-conversion{bottom:max(1rem,env(safe-area-inset-bottom));padding:.65rem .65rem .65rem 1rem}
    .review-index .reveal{transform:translateY(.85rem);transition-duration:.55s}
    .review-index .stagger>*{transform:translateY(.6rem);transition-duration:.48s}
    .review-index .toast{position:fixed;right:1rem;bottom:1rem;z-index:300;max-width:24rem;padding:1rem 1.25rem;background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff);border-left:4px solid var(--ioc-success,#198038);box-shadow:0 1rem 3rem rgba(0,0,0,.2)}
    .review-index .toast.visible{display:block}
    @media(hover:hover){.review-index .btn:hover .icon{transform:translateX(.2rem)}.review-index .btn .icon{transition:transform .18s var(--ioc--ease)}}
    @media(max-width:1180px){.review-index .nav-link[href="#insights"]{display:none}.review-index .showcase-hero .container{grid-template-columns:1fr}.review-index .decision-console{max-width:48rem}}
    @media(max-width:700px){.review-index{--ioc--section:4.1rem;--ioc--nav-offset:7rem}.review-index .showcase-hero .container{padding-block:3.75rem}.review-index .showcase-hero h1{font-size:clamp(3rem,14vw,4.75rem)}.review-index .hero-actions .btn{width:100%}.review-index .hero-note{margin-top:.25rem}.review-index .page-nav{top:4rem}.review-index .page-nav a{min-height:3rem;padding:0 .8rem}.review-index .proof-item{padding:1.1rem;min-height:8rem}.review-index .solution-card{min-height:19rem}.review-index .solution-card .icon{margin:2.25rem 0 1.5rem}.review-index .gateway{min-height:23rem}.review-index .sticky-conversion{gap:.5rem}.review-index .result-actions{flex-direction:column}.review-index .result-actions .btn{width:100%}}


    /* Real photography system: selected commercial-use Pexels photography, not AI-generated */
    .review-index .media-frame{position:relative;margin:0;overflow:hidden;background:var(--ioc-g20,#e0e0e0);border:1px solid var(--ioc--g20)}
    .review-index .media-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);transition:transform .8s var(--ioc--ease),filter .35s ease}
    .review-index .media-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(15,15,16,.72) 100%)}
    .review-index .media-frame figcaption{position:absolute;z-index:2;left:1.25rem;right:1.25rem;bottom:1rem;display:flex;align-items:end;justify-content:space-between;gap:1rem;color:var(--ioc-text-on-color,#fff)}
    .review-index .media-frame figcaption span{display:block;max-width:34rem;font-size:.82rem;font-weight:600;line-height:1.4}
    .review-index .media-frame figcaption small{color:var(--ioc-g30,#c6c6c6);font-family:var(--ioc--font-mono);font-size:.62rem;letter-spacing:.04em;text-align:right}
    @media(hover:hover){.review-index .media-frame:hover img{transform:scale(1.018);filter:saturate(1) contrast(1.03)}}

    .review-index .hero-visual{align-self:stretch;display:grid;grid-template-rows:minmax(16rem,1fr) auto;background:var(--ioc-surface,#fff);border:1px solid var(--ioc--g20);box-shadow:1rem 1rem 0 var(--ioc--g10)}
    .review-index .hero-photo{min-height:18rem;border:0;border-bottom:1px solid var(--ioc--g20)}
    .review-index .hero-photo img{object-position:center 38%}
    .review-index .hero-visual .decision-console{min-height:0;border:0;box-shadow:none}
    .review-index .hero-visual .console-bar{background:var(--ioc-surface,#fff)}

    .review-index .section-photo{aspect-ratio:16/5.4;margin:0 0 1.5rem}
    .review-index .section-photo img{object-position:center}
    .review-index .section-photo--operations img{object-position:center 53%}
    .review-index .section-photo--industry img{object-position:center 48%}
    .review-index .section-photo--dark{border-color:var(--ioc-g80,#393939);background:var(--ioc-g90,#262626)}
    .review-index .section-photo--dark:after{background:linear-gradient(180deg,rgba(22,22,22,.05) 35%,rgba(22,22,22,.86) 100%)}
    .review-index .ai-section .section-photo{margin-bottom:1px}

    .review-index .gateway{padding:0;overflow:hidden}
    .review-index .gateway-photo{flex:0 0 auto;aspect-ratio:16/7.2;border:0;border-bottom:1px solid var(--ioc--g20)}
    .review-index .gateway-photo:after{background:linear-gradient(180deg,transparent 55%,rgba(15,15,16,.62) 100%)}
    .review-index .gateway-photo img{object-position:center}
    .review-index .gateway:first-child .gateway-photo img{object-position:center 44%}
    .review-index .gateway.talent .gateway-photo img{object-position:center 40%}
    .review-index .gateway-content{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;padding:clamp(2rem,4vw,4rem)}
    .review-index .gateway:hover .gateway-photo img{transform:scale(1.025)}
    .review-index .gateway:hover .gateway-photo:after{background:linear-gradient(180deg,rgba(0,1,255,.1),rgba(0,29,108,.78))}
    .review-index .gateway.talent:hover .gateway-photo:after{background:linear-gradient(180deg,rgba(255,0,119,.08),rgba(159,24,83,.8))}
    body.review-index .gateway h3{font-size:clamp(1.7rem,2.4vw,2.5rem);line-height:1.12}
    .review-index .gateway{min-height:auto}
    .review-index .gateway-photo{aspect-ratio:16/6}
    .review-index .gateway-content{gap:1.5rem;padding:clamp(1.75rem,3vw,2.75rem)}

    .review-index .photo-sources{padding:1rem 0;border-top:1px solid var(--ioc-g80,#393939);color:var(--ioc-g50,#8d8d8d);font-size:.68rem;line-height:1.55}
    .review-index .photo-sources a{color:var(--ioc-g30,#c6c6c6);text-decoration:underline;text-underline-offset:2px}

    @media(max-width:1100px){
      .review-index .hero-visual{max-width:48rem}
      .review-index .section-photo{aspect-ratio:16/7}
    }
    @media(max-width:700px){
      .review-index .hero-visual{grid-template-rows:15rem auto;box-shadow:.65rem .65rem 0 var(--ioc--g10)}
      .review-index .hero-photo{min-height:15rem}
      .review-index .media-frame figcaption{left:1rem;right:1rem;bottom:.8rem;align-items:start;flex-direction:column;gap:.25rem}
      .review-index .media-frame figcaption small{text-align:left}
      .review-index .section-photo{aspect-ratio:4/3;margin-bottom:1rem}
      .review-index .gateway-photo{aspect-ratio:16/9}
      .review-index .gateway-content{padding:2rem 1.25rem}
    }

  .carbon-icon{display:block;width:1.5rem;height:1.5rem;flex:0 0 auto;fill:currentColor}

/* ===== HOME · harmonized to inner-page (idc) standard ===== */
.showcase .container{width:min(100%,1584px);padding-inline:clamp(20px,4vw,32px)}
.showcase .section{padding-block:clamp(64px,8vw,112px)}
#constraints{background:var(--ioc--g10)}
#constraints .vh-cgrid{background:var(--ioc--white)}
#constraints .vh-c:hover{background:var(--ioc-surface-hover,#e8e8e8)}
#delivery{background:var(--ioc--g10)}
#delivery .vh-steps{background:var(--ioc--white);border:1px solid var(--ioc--g20);padding:2rem}
#delivery .vh-step{padding:1.5rem;margin:0 -2rem;transition:background .2s}
#delivery .vh-step:first-child{padding-top:1.5rem}
#delivery .vh-step:hover{background:var(--ioc-surface-hover,#e8e8e8)}
#delivery .vh-dgrid{align-items:stretch}
#delivery .vh-out{background:var(--ioc-g80,#393939);border-color:var(--ioc-g80,#393939);align-content:stretch;height:100%}
#delivery .vh-out div{background:var(--ioc--g100)}
#delivery .vh-out svg{color:var(--ioc-accent-on-brand,#8c8cff)}
#delivery .vh-out strong{color:var(--ioc-text-on-color,#fff)}
#delivery .vh-out span{color:var(--ioc-g30,#c6c6c6)}
#delivery .vh-out div:hover{background:var(--ioc-g90,#262626)}
.showcase .section-head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);margin-bottom:clamp(32px,4vw,56px)}
.showcase .section-head>div>h2,.showcase .section-head h2{font-size:clamp(28px,3.2vw,46px);font-weight:700;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.showcase .section-head p{font-size:16px;line-height:1.55;max-width:46ch}
.showcase .section-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;color:var(--ioc--g100)}
.showcase .section-kicker::before{content:"";width:22px;height:2px;background:var(--ioc--blue);flex:none}
.showcase .ai-section .section-kicker,.showcase .value-section .section-kicker{color:var(--ioc-text-on-color,#fff)}
/* tame oversized module headings to the restrained idc scale */
.showcase .persona-copy h3{font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.showcase .persona-copy p{font-size:16px}
.showcase .architecture-title h3{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.showcase .assessment-aside h3{font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.15}
.showcase .assessment-step legend{font-size:clamp(18px,2vw,24px);font-weight:600;line-height:1.2}
.showcase .value-card strong{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em}
.showcase .contact h2{font-size:clamp(28px,3.2vw,46px);font-weight:700;line-height:1.06;letter-spacing:-.025em}
.showcase .trust-intro h2{font-size:clamp(24px,2.8vw,38px);font-weight:700;letter-spacing:-.02em}
@media(max-width:860px){.showcase .section-head{grid-template-columns:1fr;align-items:start}}



/* ---- Get-started CTA polish (home #assessment + footer #get-started) ---- */
.review-index .ca-tabs{max-width:46rem;border-color:var(--ioc--g20);box-shadow:0 1px 0 var(--ioc--g20)}
.review-index .ca-tab{position:relative;letter-spacing:-.01em;transition:background .2s var(--ioc--ease),color .2s var(--ioc--ease)}
.review-index .ca-tab:hover:not([aria-selected="true"]){background:var(--ioc--g10);color:var(--ioc--g100)}
.review-index .ca-tab[aria-selected="true"]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--ioc--g100)}
/* Aside */
.review-index .assessment-aside{position:relative;background:linear-gradient(160deg,var(--ioc--blue) 0%,var(--ioc-blue-hover,#0000c4) 100%);overflow:hidden}
.review-index .assessment-aside>div:first-child{position:relative;z-index:1}
.review-index .assessment-aside .carbon-icon{width:2.25rem;height:2.25rem;padding:.5rem;background:rgba(255,255,255,.14);margin-bottom:1.25rem}
.review-index .assessment-aside p{max-width:34ch}
.review-index .progress-steps{counter-reset:astep;position:relative;z-index:1}
.review-index .progress-steps li{align-items:center;transition:color .2s}
.review-index .assessment-trust{position:relative;z-index:1;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.22);display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--ioc-text-on-brand-soft,#e5e5ff);line-height:1.4}
.review-index .assessment-trust .carbon-icon{width:1.15rem;height:1.15rem;flex:0 0 auto;margin:0;padding:0;background:none;color:var(--ioc-text-on-color,#fff)}
/* Choices as confident cards */
.review-index .assessment-step legend{font-weight:600;text-wrap:balance}
.review-index .choice{gap:1.15rem;padding:1.15rem 1.25rem;align-items:center;transition:background .16s var(--ioc--ease),border-color .16s var(--ioc--ease),box-shadow .16s var(--ioc--ease)}
.review-index .choice+.choice{margin-top:-1px}
.review-index .choice:hover{background:var(--ioc--g10);border-color:var(--ioc--g60);z-index:1}
.review-index .choice:has(input:checked){background:var(--ioc-selected-surface,#edf5ff);border-color:var(--ioc--blue);box-shadow:inset 3px 0 0 var(--ioc--blue);z-index:2}
.review-index .choice:has(input:checked) .choice-text strong{font-weight:700}
.review-index .radio-ui{width:1.35rem;height:1.35rem;border-color:var(--ioc--g60);transition:border-color .16s,background .16s,box-shadow .16s}
.review-index .choice-text small{line-height:1.4}
/* Actions: confident primary */
.review-index .assessment-actions{align-items:center}
.review-index .assessment-next{min-width:12rem;gap:1.25rem;background:var(--ioc--blue)}
.review-index .assessment-next:not([disabled]):hover{background:var(--ioc-blue-hover,#0000c4)}
.review-index .assessment-back{min-width:8rem}
.review-index .assessment-progress-note{margin-right:auto;font-family:var(--ioc--font-mono,ui-monospace,monospace);font-size:.72rem;letter-spacing:.1em;color:var(--ioc--g60);text-transform:uppercase}
/* Result */
.review-index .assessment-result.active{display:flex;flex-direction:column}
.review-index .score-ring{transition:transform .4s var(--ioc--ease)}
/* Contact form: clearer focus + confidence */
.review-index #get-started .contact-form .field input,.review-index #get-started .contact-form .field select,.review-index #get-started .contact-form .field textarea,.review-index #ca-contact .field input,.review-index #ca-contact .field select,.review-index #ca-contact .field textarea{border-bottom-width:1px;border-bottom-color:rgba(255,255,255,.55);transition:border-color .18s,background .18s}
.review-index #ca-contact .field label,.review-index #get-started .contact-form .field label{font-family:var(--ioc--font-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem;opacity:.9}
.review-index #ca-contact .field input:focus,.review-index #ca-contact .field select:focus,.review-index #ca-contact .field textarea:focus,.review-index #get-started .contact-form .field input:focus,.review-index #get-started .contact-form .field select:focus,.review-index #get-started .contact-form .field textarea:focus{border-bottom-color:var(--ioc-border-on-color,#fff);background:rgba(255,255,255,.18)}
.review-index #ca-contact .field input::placeholder,.review-index #ca-contact .field textarea::placeholder{color:rgba(255,255,255,.6)}
.review-index .contact-form .btn{margin-top:.5rem}
.review-index .form-reassure{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-top:.35rem;font-size:.75rem;color:var(--ioc-text-on-brand-soft,#e5e5ff)}
.review-index .form-reassure span{display:inline-flex;align-items:center;gap:.4rem}
.review-index .form-reassure .carbon-icon{width:1rem;height:1rem;color:var(--ioc-text-on-color,#fff)}
@media(max-width:700px){.review-index .assessment-next{min-width:0;flex:1}.review-index .assessment-actions{flex-wrap:wrap}.review-index .assessment-progress-note{width:100%;order:-1;margin:0 0 .5rem}}


.section-head .ioc-sh-lead p{margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--ioc--g100);max-width:36ch;text-wrap:pretty}
.section-head .ioc-sh-lead p b{font-weight:700}
.section-head .ioc-sh-lead .meta{display:block;margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc--g60);line-height:1.6}
.section-head .vh-sh-aside{gap:.9rem}
.section.dark .section-head .ioc-sh-lead p{color:var(--ioc-g10,#f4f4f4)}
.section.dark .section-head .ioc-sh-lead .meta{color:var(--ioc-g40,#a8a8a8)}
@media(max-width:860px){.section-head .ioc-sh-lead p{max-width:none}}


.review-index .v1hero{background:linear-gradient(100deg,var(--ioc-surface-subtle,#fbfbfb) 0%,var(--ioc-surface-subtle,#fbfbfb) 45%,var(--ioc-surface-cool,#f2f4f8) 100%);border-bottom:1px solid var(--ioc--g20)}
.v1hero .hero-main{grid-template-columns:minmax(24rem,42fr) minmax(34rem,58fr);gap:clamp(24px,3vw,56px)}
.v1hero .copy-panel{background:transparent;border:0;padding:clamp(24px,3vw,48px) 0 clamp(24px,3vw,48px) clamp(4px,2.5vw,40px);min-height:0;justify-content:center}
.v1hero .h-lede{max-width:40ch}
.v1hero .h-actions .h-btn{white-space:nowrap}
.v1hero .hero-visual-col{display:flex;flex-direction:column;gap:22px;min-width:0;padding-block:clamp(16px,2.2vw,32px)}
.v1hero .hero-slides{position:relative;margin:0;aspect-ratio:16/7.6;min-height:15rem;overflow:hidden;background:var(--ioc--g20)}
.v1hero .hs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ioc--ease)}
.v1hero .hs-img.is-on{opacity:1}
.v1hero .hs-dots{position:absolute;right:14px;bottom:12px;z-index:3;display:flex;gap:7px}
.v1hero .hs-dots button{width:10px;height:10px;padding:0;border:0;background:rgba(255,255,255,.78);cursor:pointer}
.v1hero .hs-dots button.on{background:var(--ioc--blue)}
.v1hero .hero-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(14.5rem,19.5rem);gap:22px;align-items:stretch}
.v1hero .hero-lower .outcome{position:static;transform:none;width:auto;box-shadow:none;border:1px solid var(--ioc--g20);display:flex;flex-direction:column}
.v1hero .hero-lower .outcome-result{margin-top:auto}
.v1hero .foundation-card{display:flex;flex-direction:column;min-width:0;padding:22px;background:var(--ioc-surface-inverse,#161616);color:var(--ioc-text-on-color,#fff)}
.v1hero .fc-kicker{font-family:var(--ioc--font-mono,"JetBrains Mono",monospace);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-g40,#a8a8a8)}
.v1hero .fc-body{margin:auto 0;padding-block:1.4rem}
.v1hero .fc-body>svg{width:30px;height:30px;margin-bottom:14px;color:var(--ioc-text-on-color,#fff)}
.v1hero .fc-title{margin:0 0 10px;font-size:clamp(20px,1.6vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.12;color:var(--ioc-text-on-color,#fff)}
.v1hero .fc-sub{margin:0;color:var(--ioc-g30,#c6c6c6);font-size:14px;line-height:1.5}
.v1hero .fc-link{display:inline-flex;align-items:center;gap:10px;margin-top:auto;color:var(--ioc-text-on-color,#fff);font-weight:600;font-size:14px}
.v1hero .fc-link svg{width:16px;height:16px;fill:currentColor;transition:transform .18s var(--ioc--ease)}
.v1hero .fc-link:hover svg{transform:translateX(3px)}
@media(max-width:1040px){.v1hero .hero-main{grid-template-columns:1fr;gap:0}.v1hero .hero-visual-col{padding-block:0 clamp(16px,2.2vw,32px)}}
@media(max-width:1024px){.v1hero .copy-panel{padding-left:0}.v1hero .hero-lower{grid-template-columns:1fr}.v1hero .foundation-card{min-height:11rem}.v1hero .fc-body{padding-block:1rem}}


.vh-ribbon{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2.5rem,5vw,4rem);font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ioc--g70)}
.vh-ribbon span{border:1px solid var(--ioc--g20);padding:.5rem .85rem}
.vh-agrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ioc--g20);border-left:1px solid var(--ioc--g20)}
.vh-acard{padding:2rem;border-right:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20);display:flex;flex-direction:column;gap:.55rem;min-height:16rem}
.vh-acard>svg{width:2rem;height:2rem;color:var(--ioc--blue);margin-bottom:.85rem}
.vh-acard .kx{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc--blue)}
.vh-acard h3{font-size:1.18rem;font-weight:500;margin:0;letter-spacing:-.01em}
.vh-acard p{color:var(--ioc--g70);font-size:.88rem;margin:0;line-height:1.5}
.vh-cgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ioc--g20);border-left:1px solid var(--ioc--g20)}
.vh-c{position:relative;padding:2rem;border-right:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20);display:flex;flex-direction:column;min-height:23rem;transition:background .2s}
.vh-c:hover{background:var(--ioc--g10)}
.vh-c .num{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.06em;color:var(--ioc--g60)}
.vh-c>svg{width:2.25rem;height:2.25rem;color:var(--ioc--blue);margin:1.25rem 0}
.vh-c h3{font-size:1.3rem;font-weight:500;margin:0 0 .6rem;letter-spacing:-.01em}
.vh-c p{color:var(--ioc--g70);font-size:.9rem;margin:0 0 1.5rem;line-height:1.5}
.vh-c a{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;color:var(--ioc--blue);font-weight:600;font-size:.85rem}
.vh-c a svg{width:1rem;height:1rem}
.vh-pf{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;align-items:center;justify-content:space-between;padding-top:1.5rem;border-top:1px solid var(--ioc--g20)}
.vh-pf p{color:var(--ioc--g70);max-width:52ch;margin:0;font-size:.9rem}
.vh-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.vh-chips a{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--ioc--g20);padding:.45rem .85rem;font-size:.78rem;color:var(--ioc--g70);transition:background .15s var(--ioc--ease),border-color .15s,color .15s,transform .15s}
.vh-chips a svg{width:.85rem;height:.85rem;opacity:.45;transition:transform .15s,opacity .15s}
.vh-chips a:hover{background:var(--ioc--blue);border-color:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);transform:translateY(-1px)}
.vh-chips a:hover svg{opacity:1;transform:translateX(2px)}

.vh-ind{display:block;border-top:1px solid var(--ioc--g20);padding-top:1.5rem}


.vh-dgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.vh-steps{display:flex;flex-direction:column}
.vh-step{display:flex;gap:1.25rem;padding:1.5rem 0;border-top:1px solid var(--ioc--g20)}
.vh-step:first-child{border-top:0;padding-top:0}
.vh-step .si{width:2.75rem;height:2.75rem;flex:none;border:1px solid var(--ioc--g20);display:flex;align-items:center;justify-content:center;color:var(--ioc--blue)}
.vh-step .si svg{width:1.35rem;height:1.35rem}
.vh-step h3{font-size:1.12rem;font-weight:500;margin:0 0 .35rem}
.vh-step p{color:var(--ioc--g70);font-size:.9rem;margin:0;line-height:1.5}
.vh-out{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc--g20);border:1px solid var(--ioc--g20)}
.vh-out div{background:var(--ioc-surface,#fff);padding:1.5rem;min-height:9.5rem;display:flex;flex-direction:column;gap:.3rem}
.vh-out svg{width:1.6rem;height:1.6rem;color:var(--ioc--blue);margin-bottom:.4rem}
.vh-out strong{font-weight:500;font-size:.96rem}
.vh-out span{color:var(--ioc--g60);font-size:.78rem;line-height:1.45}
.vh-cap{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc--g20);border:1px solid var(--ioc--g20)}
.vh-capcard{background:var(--ioc-surface,#fff);display:flex;flex-direction:column}
.vh-capcard .cm{aspect-ratio:16/9;overflow:hidden;background:var(--ioc--g10)}
.vh-capcard .cm img{width:100%;height:100%;object-fit:cover}
.vh-capcard .cb{padding:2rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.vh-capcard .kx{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc--blue)}
.vh-capcard h3{font-size:1.55rem;font-weight:400;letter-spacing:-.02em;margin:0}
.vh-capcard p{color:var(--ioc--g70);font-size:.92rem;margin:0;line-height:1.55}
.vh-capcard a{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;color:var(--ioc--blue);font-weight:600;font-size:.85rem;padding-top:.5rem}
.vh-capcard a svg{width:1rem;height:1rem}
.vh-cpanel{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);padding:clamp(1.75rem,3.5vw,3rem)}
.vh-cpanel .eyebrow{color:var(--ioc-text-on-color,#fff);margin-bottom:.7rem}
.vh-cpanel .eyebrow:before{background:var(--ioc-text-on-color,#fff)}
.vh2-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.25rem 2rem;align-items:start;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.vh-cpanel .vh2-intro h2{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:400;letter-spacing:-.025em;margin:0;color:var(--ioc-text-on-color,#fff);max-width:22ch}
.vh2-sub{color:var(--ioc-text-on-brand-soft,#e5e5ff);font-size:.92rem;line-height:1.5;margin:.6rem 0 0;max-width:58ch}
.vh2-trust{display:inline-flex;align-items:center;gap:.5rem;margin:1rem 0 0;font-size:.78rem;color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.vh2-trust svg{width:1rem;height:1rem;color:var(--ioc-text-on-color,#fff);flex:none}
.vh-modetabs{display:flex;border:1px solid rgba(255,255,255,.55);align-self:start}
.vh-modetabs button{padding:.62rem 1.15rem;border:0;background:transparent;color:var(--ioc-text-on-color,#fff);font-weight:600;font-size:.82rem;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.vh-modetabs button[aria-selected="true"]{background:var(--ioc-text-on-color,#fff);color:var(--ioc--blue)}
.vh2-form{background:var(--ioc-surface,#fff);color:var(--ioc--g100);padding:clamp(1.5rem,2.6vw,2.35rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1.35rem 1.25rem;align-items:start}
#conversion-form [hidden]{display:none!important}
.vh2-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.vh2-full{grid-column:1/-1}
.vh2-field label{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ioc--g70)}
.vh2-field .req{color:var(--ioc--blue)}
.vh2-field input,.vh2-field select,.vh2-field textarea{width:100%;background:var(--ioc-surface,#fff);border:1px solid var(--ioc--g30);padding:.7rem .8rem;color:var(--ioc--g100);font-size:.95rem;font-family:inherit;outline:0;border-radius:0;transition:border-color .15s,box-shadow .15s}
.vh2-field textarea{resize:vertical;min-height:4rem;line-height:1.5}
.vh2-field input:hover,.vh2-field select:hover,.vh2-field textarea:hover{border-color:var(--ioc--g60)}
.vh2-field input:focus,.vh2-field select:focus,.vh2-field textarea:focus{border-color:var(--ioc--blue);box-shadow:0 0 0 3px rgba(0,1,255,.14)}
.vh2-field input::placeholder,.vh2-field textarea::placeholder{color:var(--ioc-placeholder)}
.vh2-field.err input,.vh2-field.err select,.vh2-field.err textarea{border-color:var(--ioc-danger,#da1e28);box-shadow:0 0 0 3px rgba(218,30,40,.12)}
.vh2-err{font-size:.72rem;color:var(--ioc-danger,#da1e28)}
.vh2-err:empty{display:none}
.vh2-q{grid-column:1/-1;border:0;padding:0;margin:0;min-width:0}
.vh2-q legend{font-family:"JetBrains Mono",monospace;font-size:.67rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ioc--g70);margin-bottom:.55rem;padding:0}
.vh-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.vh-choices label{position:relative;display:flex;align-items:center;gap:.6rem;justify-content:flex-start;text-align:left;padding:.7rem .8rem;border:1px solid var(--ioc--g30);font-size:.82rem;line-height:1.25;color:var(--ioc--g70);cursor:pointer;transition:transform .15s var(--ioc--ease),background .15s,border-color .15s,color .15s}
.vh-choices label::before{content:"";width:22px;height:7px;flex:none;background:linear-gradient(90deg,var(--ioc--blue) var(--lvl,33%),var(--ioc--g20) 0)}
.vh-choices label:nth-child(1){--lvl:33%}
.vh-choices label:nth-child(2){--lvl:66%}
.vh-choices label:nth-child(3){--lvl:100%}
.vh-choices label:hover{border-color:var(--ioc--blue);color:var(--ioc--g100);transform:translateY(-1px)}
.vh-choices label:has(input:checked){background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);border-color:var(--ioc--blue);font-weight:600}
.vh-choices label:has(input:checked)::before{background:linear-gradient(90deg,var(--ioc-text-on-color,#fff) var(--lvl,33%),rgba(255,255,255,.35) 0)}
.vh-choices input{position:absolute;opacity:0;width:0;height:0}
.vh2-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-top:.25rem;padding-top:1.35rem;border-top:1px solid var(--ioc--g20)}
.vh-consent{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--ioc--g70);margin:0;cursor:pointer}
.vh-consent input{width:1.1rem;height:1.1rem;flex:none;accent-color:var(--ioc--blue)}
.vh2-submit{display:inline-flex;align-items:center;gap:1.5rem;background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);border:0;padding:.85rem 1.5rem;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .15s}
.vh2-submit:hover{background:var(--ioc-blue-hover,#0000c4)}
.vh2-submit svg{width:1.1rem;height:1.1rem}
.vh2-submit[disabled]{opacity:.65;cursor:default}
.vh-status{grid-column:1/-1;font-size:.85rem;padding:.75rem .9rem;background:var(--ioc--g10);border-left:3px solid var(--ioc--blue);color:var(--ioc--g100);line-height:1.5}
.vh-status:empty{display:none}
.vh-status.ok{background:var(--ioc-success-surface,#defbe6);border-left-color:var(--ioc-green,#0e6027)}
.vh-status.bad{background:var(--ioc-danger-surface,#fff1f1);border-left-color:var(--ioc-danger,#da1e28)}
.vh-status strong{font-weight:600}
.vh2-note{grid-column:1/-1;font-size:.72rem;color:var(--ioc--g60)}
@media(max-width:820px){.vh2-head{grid-template-columns:1fr}.vh2-form{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vh2-form,.vh-choices{grid-template-columns:1fr}.vh-modetabs{width:100%}.vh-modetabs button{flex:1;text-align:center}.vh2-foot{flex-direction:column;align-items:stretch}.vh2-submit{justify-content:center}}
@media(max-width:1024px){.vh-agrid,.vh-cgrid{grid-template-columns:1fr 1fr}.vh-dgrid{grid-template-columns:1fr}.vh-cap{grid-template-columns:1fr}}
@media(max-width:700px){.vh-agrid,.vh-cgrid{grid-template-columns:1fr}.vh-out{grid-template-columns:1fr}.vh-modetabs{flex-direction:column}}

/* B-03 · layered stack (from Platform section options v2, option A) */
.pa{background:var(--ioc-g100);background-image:radial-gradient(120% 90% at 10% 0%,rgba(0,1,255,.32) 0%,rgba(0,1,255,0) 58%);color:var(--ioc-text-on-color,#fff);padding:clamp(1.75rem,3.5vw,3rem);border:1px solid var(--ioc-g80,#393939)}
.pa-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem)}
.pa-stack{display:flex;flex-direction:column;gap:6px}
.pa-row{position:relative;display:grid;grid-template-columns:40px 1fr auto;gap:1rem;align-items:center;padding:.85rem 1.1rem;border:1px solid var(--ioc-g80,#393939);background:rgba(255,255,255,.035);text-decoration:none;color:var(--ioc-text-on-color,#fff);transition:border-color .2s,background .2s,transform .2s}
.pa-row:hover{border-color:var(--ioc-accent-on-brand,#8c8cff);background:rgba(140,140,255,.10);transform:translateX(4px)}
.pa-row.core{border-color:color-mix(in oklch,var(--ioc-blue) 62%,var(--ioc-border-on-color));background:linear-gradient(90deg,rgba(0,1,255,.5),rgba(0,1,255,.1))}
.pa-row .ic{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--ioc-g70,#525252)}
.pa-row.core .ic{border-color:rgba(255,255,255,.55)}
.pa-row .ic svg{width:20px;height:20px;color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.pa-row .k{display:block;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-g40,#a8a8a8)}
.pa-row strong{display:block;font-size:1.05rem;font-weight:500;letter-spacing:-.01em;margin:2px 0 3px}
.pa-row .d{display:block;font-size:.82rem;line-height:1.45;color:var(--ioc-g30,#c6c6c6);max-width:46ch}
.pa-row.core .d,.pa-row.core .k{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
.pa-row .go{display:flex;align-items:center;gap:.5rem;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-g40,#a8a8a8);white-space:nowrap;transition:color .2s}
.pa-row:hover .go{color:var(--ioc-accent-on-brand,#8c8cff)}
.pa-row.core .go{color:var(--ioc-text-on-color,#fff)}
.pa-row:hover .ic{border-color:var(--ioc-accent-on-brand,#8c8cff)}
.pa-row:hover .ic svg{color:var(--ioc-accent-on-brand,#8c8cff)}
.pa-row .go svg{width:14px;height:14px;transition:transform .2s}
.pa-row:hover .go svg{transform:translateX(3px)}
.pa-side{display:flex;flex-direction:column;gap:1rem}
.pa-fig{position:relative;overflow:hidden;border:1px solid var(--ioc-g80,#393939);aspect-ratio:16/10;margin:0}
.pa-fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.pa-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,1,255,.4),rgba(22,22,22,.86))}
.pa-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;z-index:1}
.pa-fig figcaption b{display:block;font-size:1rem;font-weight:600}
.pa-fig figcaption span{font-family:var(--ioc-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.pa-rule{border:1px solid var(--ioc-g80,#393939);padding:1rem 1.1rem;background:rgba(255,255,255,.03)}
.pa-rule p{margin:0;font-size:.88rem;line-height:1.6;color:var(--ioc-g30,#c6c6c6)}
.pa-rule p b{color:var(--ioc-text-on-color,#fff);font-weight:600}
.pa-rule .k{margin:0 0 .5rem;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.pa-links{display:grid;border:1px solid var(--ioc-g80,#393939);margin-top:auto}
.pa-links a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.1rem;color:var(--ioc-text-on-color,#fff);text-decoration:none;border-bottom:1px solid var(--ioc-g80,#393939);font-size:.92rem;transition:background .18s,padding-left .18s}
.pa-links a:last-child{border-bottom:0}
.pa-links a:hover{background:rgba(0,1,255,.22);padding-left:1.45rem}
.pa-links svg{width:16px;height:16px}
@media(max-width:900px){.pa-grid{grid-template-columns:1fr}}
/* industry strip · option D */
.vh-dtabs{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--ioc-g20);border-top:0;margin-top:0}
.vh-dtabs button{flex:1 1 auto;appearance:none;background:var(--ioc-surface,#fff);border:0;box-shadow:1px 0 0 0 var(--ioc-g20);padding:.95rem 1.1rem;font:inherit;font-size:.85rem;font-weight:500;color:var(--ioc-g70);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;transition:background .15s,color .15s}
.vh-dtabs button svg{width:17px;height:17px;opacity:.55}
.vh-dtabs button:hover{background:var(--ioc-g10);color:var(--ioc-text-primary)}
.vh-dtabs button[aria-selected="true"]{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);box-shadow:1px 0 0 0 var(--ioc-accent)}
.vh-dtabs button[aria-selected="true"] svg{opacity:1}
.vh-dpanel{border:1px solid var(--ioc-g20);border-top:0;padding:1.6rem 1.5rem;display:grid;grid-template-columns:1fr auto;gap:1.5rem 2rem;align-items:center;background:var(--ioc-g10)}
.vh-dpanel p{margin:0;font-size:1.05rem;line-height:1.5;letter-spacing:-.01em;max-width:56ch}
.vh-dpanel .m{display:block;font-family:var(--ioc-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-g60);margin-top:.6rem}
.vh-dpanel a{display:inline-flex;align-items:center;gap:.5rem;background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);text-decoration:none;padding:.75rem 1.15rem;font-size:.85rem;font-weight:500;white-space:nowrap;min-height:44px;box-sizing:border-box}
.vh-dpanel a svg{width:16px;height:16px}
.vh-dpanel a:hover{background:var(--ioc-accent-hover)}
@media(max-width:700px){.vh-dtabs{flex-direction:column}.vh-dpanel{grid-template-columns:1fr}}
/* --- section hover + explore links --- */
.vh-acard>svg,.vh-c>svg{transition:transform .18s var(--ioc--ease)}
.vh-acard{transition:background .18s var(--ioc--ease)}
.vh-acard:hover{background:var(--ioc--g10)}
.vh-acard:hover>svg{transform:translateY(-3px)}
.vh-c a svg{transition:transform .18s var(--ioc--ease)}
.vh-c:hover a svg{transform:translateX(4px)}
.vh-c:hover>svg{transform:translateY(-3px)}
.vh-capcard .cm img{transition:transform .45s var(--ioc--ease)}
.vh-capcard:hover .cm img{transform:scale(1.05)}
.vh-capcard a svg{transition:transform .18s var(--ioc--ease)}
.vh-capcard:hover a svg{transform:translateX(4px)}
.vh-out div{transition:background .18s var(--ioc--ease)}
.vh-out div:hover{background:var(--ioc--g10)}
.vh-out svg{transition:transform .18s var(--ioc--ease)}
.vh-out div:hover svg{transform:scale(1.1)}
.vh-step .si{transition:background .18s var(--ioc--ease),color .18s,border-color .18s}
.vh-step:hover .si{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);border-color:var(--ioc--blue)}
.vh-chips a{transition:border-color .15s,color .15s,transform .15s}
.vh-chips a:hover{transform:translateY(-1px)}
.vh-sh-aside{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.vh-sh-aside>p{margin:0}
.vh-seclink{display:inline-flex;align-items:center;gap:.5rem;color:var(--ioc--blue);font-weight:600;font-size:.9rem}
.vh-seclink svg{width:1rem;height:1rem;transition:transform .18s var(--ioc--ease)}
.vh-seclink:hover svg{transform:translateX(4px)}
.vh-capcard{transition:background .2s var(--ioc--ease)}
.vh-capcard:first-child:hover{background:var(--ioc-fam-academy,#6929c4)}
.vh-capcard:last-child:hover{background:var(--ioc-fam-talents,#1a7a52)}
.vh-capcard:hover .kx,.vh-capcard:hover h3,.vh-capcard:hover p,.vh-capcard:hover a{color:var(--ioc-text-on-color,#fff)}
/* --- home footer-cta hosts the get-started form --- */
.ioc-footer .footer-cta .vh2-sub{color:var(--ioc-text-secondary,#525252);font-size:.95rem;line-height:1.55;margin:1.1rem 0 0;max-width:46ch}
.ioc-footer .footer-cta .vh2-trust{display:inline-flex;align-items:center;gap:.5rem;margin:1.1rem 0 0;font-size:.8rem;color:var(--ioc-text-secondary,#525252)}
.ioc-footer .footer-cta .vh2-trust svg{width:1rem;height:1rem;flex:none;color:var(--ioc-blue,#0001ff)}
.ioc-footer .footer-action .vh-modetabs{display:flex;border:1px solid var(--ioc-border-strong,#8d8d8d);margin:0 0 18px;width:max-content;max-width:100%}
.ioc-footer .footer-action .vh-modetabs button{padding:.62rem 1.15rem;border:0;background:var(--ioc-surface,#fff);color:var(--ioc-text-secondary,#525252);font-weight:600;font-size:.82rem;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.ioc-footer .footer-action .vh-modetabs button[aria-selected="true"]{background:var(--ioc-blue,#0001ff);color:var(--ioc-text-on-primary,#fff)}
.ioc-footer .footer-action .vh2-form{border:1px solid var(--ioc-border-subtle,#e0e0e0)}


.home-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--ioc--g100,#161616);color:var(--ioc-text-on-color,#fff);transform:translateY(100%);transition:transform .35s cubic-bezier(.2,0,0,1)}
.home-cta-bar.in{transform:none}
.hcb-wrap{width:min(100%,1440px);margin:0 auto;padding:16px clamp(1.25rem,4vw,4rem);display:flex;align-items:center;gap:20px}
.hcb-wrap p{margin:0;font-size:15px;flex:1;color:var(--ioc-g20,#e0e0e0);text-wrap:pretty}
.hcb-wrap p strong{color:var(--ioc-text-on-color,#fff);font-weight:700}
.hcb-btn{display:inline-flex;align-items:center;gap:14px;background:var(--ioc--blue,#0001ff);color:var(--ioc-text-on-color,#fff);font-weight:600;font-size:15px;padding:12px 20px;white-space:nowrap;transition:background .15s}
.hcb-btn:hover{background:var(--ioc-blue-hover,#0000c4)}
.hcb-btn svg{width:18px;height:18px}
.hcb-close{background:transparent;border:0;color:var(--ioc-g40,#a8a8a8);font-size:26px;line-height:1;cursor:pointer;padding:2px 6px}
.hcb-close:hover{color:var(--ioc-text-on-color,#fff)}
@media(max-width:760px){.hcb-wrap{flex-wrap:wrap;gap:12px}.hcb-wrap p{flex:1 1 100%}.hcb-btn{flex:1}}


/* CMS-D-071 · lead-capture failure state — a lead that was not stored must
   read as a failure, not a confirmation. */
.ioc-cta-confirm.is-error{color:var(--ioc-danger,#da1e28)}
.ioc-cta-panel .ioc-cta-confirm.is-error{color:var(--ioc-danger-on-color,#ff8389)}
.ioc-cta-confirm.is-error a{color:inherit;text-decoration:underline}

/* ==========================================================================
   P36 / CMS-D-092 — the per-level heading weights, DELIBERATELY LAST.
   Still 0-0-1, so every block rule (0-1-1) and the showcase system (0-1-2)
   continue to outrank them exactly as they do in the design source. Position
   is the whole point: an absorbed legacy reset further up this file declares
   a bare `h1,h2,h3{font-weight:400}` at the SAME 0-0-1, and at equal
   specificity the later rule wins. Declared beside the other generic rules
   these lost to it, and six header headings rendered at 400 — measured, after
   it happened, which is the only reason this comment exists.
   ========================================================================== */
:where(body.ioc-site) h1{font-weight:var(--ioc-h1-weight,600)}
:where(body.ioc-site) h2{font-weight:var(--ioc-h2-weight,600)}
:where(body.ioc-site) h3{font-weight:var(--ioc-h3-weight,600)}
:where(body.ioc-site) h4{font-weight:var(--ioc-h4-weight,600)}

/* GENERATED by scripts/copy-render-kit-runtime.mjs — do not edit by hand.
 * Corrections that cannot live in the byte-frozen CMS-D-054 stylesheet.
 * Loaded AFTER it; see the note in that script for why each rule exists. */

/* 1 · Re-assert component anchor colours over `body.ioc-site a{color:inherit}`
 *     (0,1,2), which outranks every one-class component rule. Derived. */
body.ioc-site body.ioc-site{color:var(--ioc-text-primary)}
body.ioc-site body.ioc-site a{color:inherit}
body.ioc-site body.ioc-site ::selection{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .skip-link{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .eyebrow{color:var(--ioc-text-secondary)}
body.ioc-site .eyebrow .dot{color:var(--ioc-blue)}
body.ioc-site .body-l{color:var(--ioc-text-secondary)}
body.ioc-site .body{color:var(--ioc-text-secondary)}
body.ioc-site .body-s{color:var(--ioc-text-secondary)}
body.ioc-site .thin-accent{color:var(--ioc-blue)}
body.ioc-site .btn-primary{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-secondary{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-tertiary{color:var(--ioc-accent)}
body.ioc-site .btn-tertiary:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-ghost{color:var(--ioc-accent)}
body.ioc-site .btn-ghost:hover{color:var(--ioc-accent-hover)}
body.ioc-site .btn-on-dark{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-on-dark.is-ghost{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-on-dark.is-ghost:hover{color:var(--ioc-text-primary,#161616)}
body.ioc-site .link-arrow{color:var(--ioc-link-color,var(--ioc-blue))}
body.ioc-site .tag{color:var(--ioc-text-secondary)}
body.ioc-site .tag:hover{color:var(--ioc-text-primary)}
body.ioc-site .tag b{color:var(--ioc-blue)}
body.ioc-site .ioc-header .brand{color:var(--ioc-text-primary)}
body.ioc-site .infoc-logo .gc{color:var(--ioc-blue)}
body.ioc-site .ioc-header .nav-link{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .nav-trigger{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .nav-link:hover{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .nav-trigger:hover{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .nav-trigger[aria-expanded="true"]{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .nav-link[aria-current="page"]{color:var(--ioc-header-active,#0001ff)}
body.ioc-site .mobile-sub .mobile-overview{color:var(--ioc-blue)}
body.ioc-site .ioc-header .nav-trigger[aria-current="page"]{color:var(--ioc-header-active,#0001ff)}
body.ioc-site .ioc-header .icon-btn{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .icon-btn:hover{color:var(--ioc-blue)}
body.ioc-site .ioc-header .top-cta{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-header .featured>svg{color:var(--ioc-blue)}
body.ioc-site .ioc-header .featured h3{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .featured p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .featured>a{color:var(--ioc-blue)}
body.ioc-site .ioc-header .mega-label{color:var(--ioc-blue)}
body.ioc-site .ioc-header .mega-intro p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .view-all{color:var(--ioc-blue)}
body.ioc-site .ioc-header .menu-group h3{color:var(--ioc-blue)}
body.ioc-site .ioc-header .menu-group a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .menu-group .mg-ico svg{color:var(--ioc-blue)}
body.ioc-site .ioc-header .menu-group .mg-txt>span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .menu-group a>.ico{color:var(--ioc-blue)}
body.ioc-site .ioc-header .menu-group a:hover strong{color:var(--ioc-blue)}
body.ioc-site .ioc-header .simple-links a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .simple-links a .ico{color:var(--ioc-blue)}
body.ioc-site .ioc-header .simple-links [data-tile] svg{color:var(--ioc-blue)}
body.ioc-site .ioc-header .simple-links span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .simple-links a:hover strong{color:var(--ioc-blue)}
body.ioc-site .sh-drawer .brand{color:var(--ioc-text-primary)}
body.ioc-site .sh-drawer .icon-btn{color:var(--ioc-text-primary)}
body.ioc-site .sh-drawer .mobile-nav>a{color:var(--ioc-text-primary)}
body.ioc-site .sh-drawer .mobile-nav>button{color:var(--ioc-text-primary)}
body.ioc-site .sh-drawer .mobile-sub a{color:var(--ioc-text-secondary)}
body.ioc-site .sh-drawer .drawer-cta{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .sh-search .search-head{color:var(--ioc-text-helper)}
body.ioc-site .sh-search .icon-btn{color:var(--ioc-text-primary)}
body.ioc-site .sh-search .search-input .ico{color:var(--ioc-text-helper)}
body.ioc-site .sh-search .search-input input{color:var(--ioc-text-primary)}
body.ioc-site .sh-search .search-results a{color:var(--ioc-text-primary)}
body.ioc-site .sh-search .search-results a .ico{color:var(--ioc-blue)}
body.ioc-site .sh-search .search-results a:hover{color:var(--ioc-blue)}
body.ioc-site .ioc-footer{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer .fcta-eyebrow{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-cta h2 .em{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-action .fa-k{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-action p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .fa-tab{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .fa-tab[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .footer-action-points span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .footer-action-points b{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-button{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer .route .rn{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .route small{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .route .ico{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .route:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-brand .brand{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer .footer-lockup .navword{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer .footer-brand>p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .footer-contact .fc-k{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .footer-contact .fc-v{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer .footer-contact a.fc-v:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-menu h3{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-menu a{color:var(--ioc-g80,#393939)}
body.ioc-site .ioc-footer .footer-menu a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .fc-label{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .fc-value{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer a.fc-value:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .legal{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .legal-row{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .legal-links span{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .legal-links a{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .legal-button{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .legal-links a:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .legal-button:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .social a{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .social button{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .social a:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .social button:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .back-top{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .sh-cookie .cookie-copy p{color:var(--ioc-text-secondary)}
body.ioc-site .sh-cookie-btn.primary{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .sh-cookie-dialog .cd-k{color:var(--ioc-blue)}
body.ioc-site .sh-cookie-dialog .cd-body>p{color:var(--ioc-text-secondary)}
body.ioc-site .sh-cookie-dialog .cookie-option small{color:var(--ioc-text-secondary)}
body.ioc-site .sh-chat .chat-launcher{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .sh-chat .chat-k{color:var(--ioc-blue)}
body.ioc-site .sh-chat .chat-body>p{color:var(--ioc-text-secondary)}
body.ioc-site .sh-chat .chat-route{color:var(--ioc-text-primary)}
body.ioc-site .sh-chat .chat-route small{color:var(--ioc-text-secondary)}
body.ioc-site .sh-chat .chat-route .ico{color:var(--ioc-blue)}
body.ioc-site .sh-chat .chat-route:hover{color:var(--ioc-blue)}
body.ioc-site .sh-chat .chat-foot{color:var(--ioc-text-secondary)}
body.ioc-site .crumb .crumb-inner{color:var(--ioc-text-helper)}
body.ioc-site .crumb a{color:var(--ioc-text-helper)}
body.ioc-site .crumb a:hover{color:var(--ioc-blue)}
body.ioc-site .crumb .sep{color:var(--ioc-g30)}
body.ioc-site .crumb .cur{color:var(--ioc-text-primary)}
body.ioc-site .ph-trail .back{color:var(--ioc-text-primary)}
body.ioc-site .ph-trail .back:hover{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ph-trail .path a{color:var(--ioc-crumb,#5c5c5c)}
body.ioc-site .ph-trail .path a:hover{color:var(--ioc-blue)}
body.ioc-site .ph-trail .path .sep{color:var(--ioc-g30)}
body.ioc-site .ph-trail .path .cur{color:var(--ioc-crumb-current,#0001ff)}
body.ioc-site .phf-frame .cap{color:var(--ioc-text-helper)}
body.ioc-site .page-hero.ph-feature .phf-bar .bk{color:var(--ioc-text-helper)}
body.ioc-site .page-hero .ph-side .pk{color:var(--ioc-text-helper)}
body.ioc-site .page-hero .ph-side .pv b{color:var(--ioc-blue)}
body.ioc-site .dtable .dt-row.head>div{color:var(--ioc-text-helper)}
body.ioc-site .dtable .ti{color:var(--ioc-blue)}
body.ioc-site .dtable .td{color:var(--ioc-text-secondary)}
body.ioc-site .dtable .tt{color:var(--ioc-text-secondary)}
body.ioc-site .dtable .tg{color:var(--ioc-blue)}
body.ioc-site .ucard:hover h4{color:var(--ioc-accent)}
body.ioc-site .ucard:hover h3{color:var(--ioc-accent)}
body.ioc-site .ucard .uk{color:var(--ioc-accent)}
body.ioc-site .ucard:hover .uk{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ucard .ueyebrow{color:var(--ioc-text-helper)}
body.ioc-site .ucard p{color:var(--ioc-text-secondary)}
body.ioc-site .ucard .ulink{color:var(--ioc-blue)}
body.ioc-site .ucard .tnum{color:var(--ioc-blue)}
body.ioc-site .statstrip .st .sn b{color:var(--ioc-blue)}
body.ioc-site .statstrip .st .sl{color:var(--ioc-text-helper)}
body.ioc-site .prose p{color:var(--ioc-text-secondary)}
body.ioc-site .prose p.lead{color:var(--ioc-text-primary)}
body.ioc-site .prose ul li{color:var(--ioc-text-secondary)}
body.ioc-site .prose blockquote{color:var(--ioc-text-primary)}
body.ioc-site .field label{color:var(--ioc-text-helper)}
body.ioc-site .field:focus-within label{color:var(--ioc-blue)}
body.ioc-site .field input{color:var(--ioc-text-primary)}
body.ioc-site .field select{color:var(--ioc-text-primary)}
body.ioc-site .field textarea{color:var(--ioc-text-primary)}
body.ioc-site .field input::placeholder{color:var(--ioc-placeholder)}
body.ioc-site .field textarea::placeholder{color:var(--ioc-placeholder)}
body.ioc-site .cta-band{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .cta-band h2{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .cta-band p{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .cta-band .eyebrow{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .brandpanel .bp-cap{color:var(--ioc-text-helper)}
body.ioc-site .post2 .p2-cat{color:var(--ioc-blue)}
body.ioc-site .post2 .p2-meta{color:var(--ioc-text-helper)}
body.ioc-site .post2:hover h4{color:var(--ioc-blue)}
body.ioc-site .inv-band .ik{color:var(--ioc-amber)}
body.ioc-site .inv-band p{color:var(--ioc-text-primary)}
body.ioc-site .inv-band a{color:var(--ioc-amber)}
body.ioc-site .specband .sp .k{color:var(--ioc-blue)}
body.ioc-site .specband .sp .v{color:var(--ioc-text-primary)}
body.ioc-site .specband .sp .d{color:var(--ioc-text-secondary)}
body.ioc-site details.qa summary{color:var(--ioc-text-primary)}
body.ioc-site details.qa summary .qi{color:var(--ioc-blue)}
body.ioc-site details.qa .qa-a{color:var(--ioc-text-secondary)}
body.ioc-site .relrow a .rl{color:var(--ioc-text-primary)}
body.ioc-site .relrow a .rl small{color:var(--ioc-text-helper)}
body.ioc-site .relrow a svg{color:var(--ioc-blue)}
body.ioc-site .v1hero .h-eyebrow{color:var(--ioc-text-primary)}
body.ioc-site .v1hero h1 .em{color:var(--ioc-blue)}
body.ioc-site .v1hero .h-lede{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .h-btn{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .v1hero .h-btn.ghost{color:var(--ioc-text-primary)}
body.ioc-site .v1hero .proof-list li{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .img-caption{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .img-caption span{color:var(--ioc-g20,#e0e0e0)}
body.ioc-site .v1hero .hcap svg{color:var(--ioc-blue)}
body.ioc-site .v1hero .hcap span{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .hcap.is-blue{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .v1hero .hcap.is-blue svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .hcap.is-blue span{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .v1hero .outcome-head{color:var(--ioc-text-helper)}
body.ioc-site .v1hero .outcome-head .live{color:var(--ioc-green)}
body.ioc-site .v1hero .route .rix{color:var(--ioc-blue)}
body.ioc-site .v1hero .route strong{color:var(--ioc-text-primary)}
body.ioc-site .v1hero .route small{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .route .rarr{color:var(--ioc-blue)}
body.ioc-site .v1hero .outcome-result{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .outcome-result span{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .v1hero .outcome-result p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .v1hero a.rail-card.strong{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .v1hero .rail-card .rc-n{color:var(--ioc-text-primary)}
body.ioc-site .v1hero .rail-card .rc-ic{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .rail-copy span{color:var(--ioc-text-helper)}
body.ioc-site .v1hero .rail-card.strong .rail-copy span{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .v1hero .rail-copy p{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .rail-card.strong .rail-copy p{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .crumbs{color:var(--ioc-text-helper)}
body.ioc-site .v1hero .crumbs a{color:var(--ioc-text-helper)}
body.ioc-site .v1hero .crumbs a:hover{color:var(--ioc-blue)}
body.ioc-site .v1hero .crumbs .sep{color:var(--ioc-g30)}
body.ioc-site .v1hero .crumbs .cur{color:var(--ioc-blue)}
body.ioc-site .v1hero .inner-meta small{color:var(--ioc-text-helper)}
body.ioc-site .v1hero .tech-chip span{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .cap .cix{color:var(--ioc-blue)}
body.ioc-site .v1hero .cap span:last-child{color:var(--ioc-text-secondary)}
body.ioc-site .ui-alert .ai{color:var(--ioc-blue)}
body.ioc-site .ui-alert .at{color:var(--ioc-text-primary)}
body.ioc-site .ui-alert .ad{color:var(--ioc-text-secondary)}
body.ioc-site .ui-alert.is-success .ai{color:var(--ioc-green)}
body.ioc-site .ui-alert.is-warning .ai{color:var(--ioc-amber)}
body.ioc-site .ui-alert.is-danger .ai{color:var(--ioc-danger,#da1e28)}
body.ioc-site .ui-badge{color:var(--ioc-text-secondary)}
body.ioc-site .ui-badge.solid{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ui-badge.on{color:var(--ioc-green)}
body.ioc-site .ui-badge.off{color:var(--ioc-g60)}
body.ioc-site .ui-crumbs{color:var(--ioc-text-helper)}
body.ioc-site .ui-crumbs a{color:var(--ioc-text-helper)}
body.ioc-site .ui-crumbs a:hover{color:var(--ioc-blue)}
body.ioc-site .ui-crumbs .sep{color:var(--ioc-g30)}
body.ioc-site .ui-crumbs .cur{color:var(--ioc-blue)}
body.ioc-site .ui-tabs button{color:var(--ioc-text-secondary)}
body.ioc-site .ui-tabs button:hover{color:var(--ioc-text-primary)}
body.ioc-site .ui-tabs button[aria-selected="true"]{color:var(--ioc-blue)}
body.ioc-site .ui-tabpanel{color:var(--ioc-text-secondary)}
body.ioc-site .ui-opt{color:var(--ioc-text-primary)}
body.ioc-site .ui-opt .mk svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ui-select select{color:var(--ioc-text-primary)}
body.ioc-site .ui-pager a{color:var(--ioc-text-secondary)}
body.ioc-site .ui-pager span{color:var(--ioc-text-secondary)}
body.ioc-site .ui-pager a:hover{color:var(--ioc-text-primary)}
body.ioc-site .ui-pager a[aria-current="page"]{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ui-pager .dots{color:var(--ioc-g40)}
body.ioc-site .ui-tip .tip{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ui-meter{color:var(--ioc-text-helper)}
body.ioc-site .ui-steps .sn{color:var(--ioc-text-secondary)}
body.ioc-site .ui-steps .st.done .sn{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ui-steps .st.now .sn{color:var(--ioc-blue)}
body.ioc-site .ui-steps .st.now .sl{color:var(--ioc-blue)}
body.ioc-site .ui-avatar{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ui-empty .ei{color:var(--ioc-g40)}
body.ioc-site .ui-empty p{color:var(--ioc-text-secondary)}
body.ioc-site .ui-menu a{color:var(--ioc-text-primary)}
body.ioc-site .ui-menu button{color:var(--ioc-text-primary)}
body.ioc-site .ui-menu a:hover{color:var(--ioc-blue)}
body.ioc-site .ui-menu button:hover{color:var(--ioc-blue)}
body.ioc-site .ui-menu svg{color:var(--ioc-text-helper)}
body.ioc-site .ui-toast{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ui-toast .ti{color:var(--ioc-green)}
body.ioc-site .ui-toast p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ui-modal .mx{color:var(--ioc-text-primary)}
body.ioc-site .ui-modal .mx:hover{color:var(--ioc-blue)}
body.ioc-site .ui-modal .mb{color:var(--ioc-text-secondary)}
body.ioc-site .ui-table thead th{color:var(--ioc-text-helper)}
body.ioc-site .ioc-footer h3.fam-sol{color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-footer h3.fam-aca{color:var(--ioc-fam-academy,#6929c4)}
body.ioc-site .ioc-footer h3.fam-tal{color:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-fam .ioc-kicker{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-fam .ioc-related .ioc-rel-k{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-fam .ioc-related .ioc-rel-go{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-block.dark{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark .body{color:var(--ioc-g30)}
body.ioc-site .ioc-block.dark p{color:var(--ioc-g30)}
body.ioc-site .ioc-block.dark h2{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark h3{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark b{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark strong{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-head>p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-block.dark .ioc-head>p{color:var(--ioc-g30)}
body.ioc-site .ioc-kicker{color:var(--ioc-text-primary)}
body.ioc-site .ioc-block.dark .ioc-kicker{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-crumb{color:var(--ioc-text-helper)}
body.ioc-site .ioc-crumb a{color:var(--ioc-text-helper)}
body.ioc-site .ioc-crumb a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-hero h1 .em{color:var(--ioc-accent)}
body.ioc-site .ioc-hero .ioc-lede{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-chips-label{color:var(--ioc-g60,#666666)}
body.ioc-site .ioc-chip{color:var(--ioc-text-primary,#161616)}
body.ioc-site .ioc-chip svg{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
body.ioc-site .ioc-hero-figure figcaption b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-hero-figure figcaption strong{color:var(--ioc-text-primary)}
body.ioc-site .ioc-hero-figure figcaption span{color:var(--ioc-text-helper)}
body.ioc-site .ioc-matrix b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-matrix b svg{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
body.ioc-site .ioc-matrix span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-matrix[data-spotlight]>div b{color:var(--ioc-text-helper,#5c5c5c)}
body.ioc-site .ioc-matrix[data-spotlight]>div b svg{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-matrix[data-spotlight]>div span{color:var(--ioc-g60,#666666)}
body.ioc-site .ioc-matrix[data-spotlight]>div.on b{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
body.ioc-site .ioc-matrix[data-spotlight]>div.on b svg{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
body.ioc-site .ioc-matrix[data-spotlight]>div.on span{color:var(--ioc-text-primary,#161616)}
body.ioc-site .ioc-localnav a{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-localnav a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-localnav a.active{color:var(--ioc-accent)}
body.ioc-site .ioc-localnav a[aria-current="true"]{color:var(--ioc-accent)}
body.ioc-site .ioc-card .ioc-card-ix{color:var(--ioc-accent)}
body.ioc-site .ioc-card .ioc-card-ix .ioc-cardicon{color:var(--ioc-accent)}
body.ioc-site .ioc-card .ioc-card-eyebrow{color:var(--ioc-text-helper)}
body.ioc-site .ioc-card p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tag{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tag.ai{color:var(--ioc-accent)}
body.ioc-site .ioc-card .ioc-card-link{color:var(--ioc-accent)}
body.ioc-site .ioc-feature .ioc-fmark{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-feature:hover .ioc-fmark{color:var(--ioc-accent)}
body.ioc-site .ioc-feature .ioc-fmark svg{color:var(--ioc-accent)}
body.ioc-site .ioc-feature p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-step .ioc-step-n{color:var(--ioc-accent)}
body.ioc-site .ioc-block.dark .ioc-step .ioc-step-n{color:var(--ioc-accent-on-inverse)}
body.ioc-site .ioc-step p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-block:not(.dark) .ioc-step b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-block:not(.dark) .ioc-step p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cap li{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-nav-btn span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-rec .ioc-rec-k{color:var(--ioc-accent)}
body.ioc-site .ioc-rec p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta .ioc-kicker{color:var(--ioc-accent)}
body.ioc-site .ioc-cta h2{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-field>span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-field input{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-field input::placeholder{color:var(--ioc-placeholder)}
body.ioc-site .ioc-cta-reassure span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-reassure span svg{color:var(--ioc-green)}
body.ioc-site .ioc-cta-note{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-note a{color:var(--ioc-accent)}
body.ioc-site .ioc-cta-confirm{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-confirm b{color:var(--ioc-accent)}
body.ioc-site .ioc-faq-item summary{color:var(--ioc-text-primary)}
body.ioc-site .ioc-faq-item p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-related .ioc-rel-k{color:var(--ioc-text-helper)}
body.ioc-site .ioc-related span.d{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-related .ioc-rel-go{color:var(--ioc-accent)}
body.ioc-site .ioc-media-fig figcaption{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-media li{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-kpi .l{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-dir-search svg{color:var(--ioc-text-helper)}
body.ioc-site .ioc-dir-search input{color:var(--ioc-text-primary)}
body.ioc-site .ioc-filter{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-filter[aria-pressed="true"]{color:var(--ioc-accent)}
body.ioc-site .ioc-dir-item .ioc-dir-meta{color:var(--ioc-text-helper)}
body.ioc-site .ioc-dir-item p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-row .ioc-row-t span{color:var(--ioc-text-helper)}
body.ioc-site .ioc-row .ioc-row-d{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-row .ioc-row-go{color:var(--ioc-accent)}
body.ioc-site .ioc-field label{color:var(--ioc-text-primary)}
body.ioc-site .ioc-field label .req{color:var(--ioc-accent)}
body.ioc-site .ioc-field input{color:var(--ioc-text-primary)}
body.ioc-site .ioc-field select{color:var(--ioc-text-primary)}
body.ioc-site .ioc-field textarea{color:var(--ioc-text-primary)}
body.ioc-site .ioc-field input::placeholder{color:var(--ioc-placeholder)}
body.ioc-site .ioc-field textarea::placeholder{color:var(--ioc-placeholder)}
body.ioc-site .ioc-search-field input::placeholder{color:var(--ioc-placeholder)}
body.ioc-site .search-field input::placeholder{color:var(--ioc-placeholder)}
body.ioc-site .ioc-form-note{color:var(--ioc-text-helper)}
body.ioc-site .ioc-map-info p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-map-info a{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-map-info a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-news p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-photoband h2{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-photoband p{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-note .ioc-note-k{color:var(--ioc-amber)}
body.ioc-site .ioc-note p{color:var(--ioc-text-primary)}
body.ioc-site .ioc-note a{color:var(--ioc-amber)}
body.ioc-site .ioc-persona-tab[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-persona-tab span{color:var(--ioc-text-helper)}
body.ioc-site .ioc-persona-tab[aria-selected="true"] span{color:var(--ioc-g40)}
body.ioc-site .ioc-persona-panel p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-artmeta{color:var(--ioc-text-helper)}
body.ioc-site .ioc-artmeta .ioc-who{color:var(--ioc-text-primary)}
body.ioc-site .ioc-artmeta .ioc-avatar{color:var(--ioc-text-helper)}
body.ioc-site .ioc-share a{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-share a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-prose{color:var(--ioc-text-primary)}
body.ioc-site .ioc-prose p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-prose ul{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-prose ol{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-prose a{color:var(--ioc-accent)}
body.ioc-site .ioc-prose figcaption{color:var(--ioc-text-helper)}
body.ioc-site .ioc-callout{color:var(--ioc-text-primary)}
body.ioc-site .ioc-callout .ioc-callout-k{color:var(--ioc-accent)}
body.ioc-site .ioc-toc b{color:var(--ioc-text-helper)}
body.ioc-site .ioc-aside-card b{color:var(--ioc-text-helper)}
body.ioc-site .ioc-toc a{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-toc a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-aside-card p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-lp-offer .n{color:var(--ioc-accent)}
body.ioc-site .ioc-lp-offer p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-lp-proof span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-searchbar svg{color:var(--ioc-text-helper)}
body.ioc-site .ioc-searchbar input{color:var(--ioc-text-primary)}
body.ioc-site .ioc-resultmeta{color:var(--ioc-text-helper)}
body.ioc-site .ioc-result .k{color:var(--ioc-text-helper)}
body.ioc-site .ioc-result h3 a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-result p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-result .u{color:var(--ioc-accent)}
body.ioc-site .ioc-empty p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-statebanner .ioc-sb-ico{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-statebanner p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-field .ioc-err{color:var(--ioc-danger,#da1e28)}
body.ioc-site .ioc-lp-cap-list li{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-lp-cap-list li svg{color:var(--ioc-accent)}
body.ioc-site .ioc-lp-cap-form .sub{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-404 .code{color:var(--ioc-accent)}
body.ioc-site .ioc-404 p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-home{color:var(--ioc-text-primary)}
body.ioc-site .ioc-home:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-kicker-crumb .ioc-sep{color:var(--ioc-text-helper)}
body.ioc-site .ioc-cta-slots span{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-aud button{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-aud button[aria-selected=true]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-cta-stats b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-stats span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-guar span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-guar svg{color:var(--ioc-green)}
body.ioc-site .ioc-rea-k{color:var(--ioc-text-helper)}
body.ioc-site .ioc-rea-card svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-rea-card span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-rea-direct a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-rea-direct a svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-rea-direct a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-office-tabs button{color:var(--ioc-text-primary)}
body.ioc-site .ioc-office-tabs button[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-office-reg{color:var(--ioc-text-helper)}
body.ioc-site .ioc-office-row svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-office-row .k{color:var(--ioc-text-helper)}
body.ioc-site .ioc-office-row a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-office-row .v{color:var(--ioc-text-primary)}
body.ioc-site .ioc-office-row a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-office-acts a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-office-acts a svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-office-acts a:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-office-acts a:hover svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-office-empty{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cards [data-route-fam] .ioc-card-eyebrow{color:var(--rfi)}
body.ioc-site .ioc-cards [data-route-fam] .ioc-cardicon{color:var(--rfi)}
body.ioc-site .ioc-cards [data-route-fam] .ioc-card-link{color:var(--rfi)}
body.ioc-site .ioc-region-tabs button{color:var(--ioc-text-primary)}
body.ioc-site .ioc-region-tabs button .n{color:var(--ioc-text-helper)}
body.ioc-site .ioc-region-tabs button[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-region-tabs button[aria-selected="true"] .n{color:rgba(255,255,255,.78)}
body.ioc-site .ioc-region-head span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-markets .tag{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-markets a{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-markets a svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-markets a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-sh-lead p{color:var(--ioc-text-primary)}
body.ioc-site .ioc-sh-lead .meta{color:var(--ioc-text-helper)}
body.ioc-site .ioc-block.dark .ioc-sh-lead p{color:var(--ioc-g10,#f4f4f4)}
body.ioc-site .ioc-block.dark .ioc-sh-lead .meta{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-sh-link{color:var(--ioc-accent,#0001ff)}
body.ioc-site .dark .ioc-sh-link{color:var(--ioc-accent-on-inverse)}
body.ioc-site .ioc-logowall .ioc-lw-name{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-logowall-note{color:var(--ioc-text-helper)}
body.ioc-site .ioc-block.dark .ioc-logowall .ioc-lw-name{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-quote blockquote{color:var(--ioc-text-primary)}
body.ioc-site .ioc-quote .ioc-q-who b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-quote .ioc-q-who span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-quote .ioc-q-src{color:var(--ioc-text-helper)}
body.ioc-site .ioc-block.dark .ioc-quote blockquote{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark .ioc-quote .ioc-q-who span{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-block.dark .ioc-quote .ioc-q-src{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-tablewrap caption{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tablewrap th{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tablewrap td{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tablewrap td:first-child{color:var(--ioc-text-primary)}
body.ioc-site .ioc-tablewrap .ioc-td-yes{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tablewrap .ioc-td-no{color:var(--ioc-text-helper)}
body.ioc-site .ioc-table-note{color:var(--ioc-text-helper)}
body.ioc-site .ioc-tl-when{color:var(--ioc-text-helper)}
body.ioc-site .ioc-tl.now .ioc-tl-when{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tl.done .ioc-tl-when{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tl b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-tl p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-block.dark .ioc-tl p{color:var(--ioc-g30)}
body.ioc-site .ioc-job{color:inherit}
body.ioc-site .ioc-job:hover h3{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-job-meta{color:var(--ioc-text-helper)}
body.ioc-site .ioc-job-meta .ioc-job-fam{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-job p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-job-go{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-jobs-empty{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-code-bar{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-code-bar b{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-code-bar .ioc-code-lang{color:var(--ioc-accent-on-inverse)}
body.ioc-site .ioc-code pre{color:var(--ioc-g20,#e0e0e0)}
body.ioc-site .ioc-code pre b{color:var(--ioc-accent-on-inverse)}
body.ioc-site .ioc-code pre i{color:var(--ioc-g60,#666666)}
body.ioc-site .ioc-code pre em{color:var(--ioc-success,#198038)}
body.ioc-site .ioc-code-foot{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .ioc-cmp-k{color:var(--ioc-text-helper)}
body.ioc-site .ioc-cmp.pick .ioc-cmp-k{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-cmp>p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cmp li{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cmp li svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-cmp li.no{color:var(--ioc-text-helper)}
body.ioc-site .ioc-cmp li.no svg{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-cmp .ioc-cmp-when{color:var(--ioc-text-primary)}
body.ioc-site .ioc-banner>svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-banner p{color:var(--ioc-text-primary)}
body.ioc-site .ioc-banner .ioc-banner-k{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-banner a.ioc-banner-go{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-banner .ioc-banner-x{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-banner .ioc-banner-x:hover{color:var(--ioc-text-primary)}
body.ioc-site .ioc-banner.warn>svg{color:var(--ioc-amber,#b45309)}
body.ioc-site .ioc-banner.warn .ioc-banner-k{color:var(--ioc-amber,#b45309)}
body.ioc-site .ioc-banner.warn a.ioc-banner-go{color:var(--ioc-amber,#b45309)}
body.ioc-site .ioc-embed-cap span{color:var(--ioc-text-helper)}
body.ioc-site .ioc-embed-consent{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-embed-consent button{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-divider-label span{color:var(--ioc-text-helper)}
body.ioc-site .ioc-block.dark .ioc-divider-label span{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .ioc-form-copy{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-form-ask span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-form-sure li{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-form-sure svg{color:var(--ioc-accent)}
body.ioc-site .ioc-form-errors a{color:var(--ioc-danger-text,#a2191f)}
body.ioc-site .ioc-field-error{color:var(--ioc-danger-text,#a2191f)}
body.ioc-site .ioc-opt{color:var(--ioc-text-helper)}
body.ioc-site .ioc-choicegroup legend{color:var(--ioc-text-primary)}
body.ioc-site .ioc-choicegroup legend .req{color:var(--ioc-accent)}
body.ioc-site .ioc-choice small{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-filefield input[type="file"]::file-selector-button{color:var(--ioc-text-primary)}
body.ioc-site .ioc-filefield input[type="file"]::file-selector-button:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-fhint{color:var(--ioc-text-helper)}
body.ioc-site .ioc-marketing{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-privacy{color:var(--ioc-text-helper)}
body.ioc-site .ioc-form-actions .ioc-form-note{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-form-success p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-form-ok svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark .ioc-form{color:var(--ioc-text-primary)}
body.ioc-site .cta-band .ioc-form{color:var(--ioc-text-primary)}
body.ioc-site .ioc-block.dark .ioc-form-title{color:var(--ioc-text-primary)}
body.ioc-site .cta-band .ioc-form-title{color:var(--ioc-text-primary)}
body.ioc-site .ioc-block.dark .ioc-form p{color:var(--ioc-text-secondary)}
body.ioc-site .cta-band .ioc-form p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-rowgroup>h3 span{color:var(--ioc-text-helper)}
body.ioc-site .infoc-logo .gc{color:var(--ioc--blue)}
body.ioc-site .logo .logo-sub{color:var(--ioc--g70)}
body.ioc-site .architecture-table th{color:var(--ioc--g70)}
body.ioc-site .score-ring strong{color:var(--ioc--blue)}
body.ioc-site .result-notification p{color:var(--ioc--g70)}
body.ioc-site .lede{color:var(--ioc--g70)}
body.ioc-site .section-head p{color:var(--ioc--g70)}
body.ioc-site .section-kicker{color:var(--ioc--blue)}
body.ioc-site .btn{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-secondary{color:var(--ioc--g100)}
body.ioc-site .btn-secondary:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .text-link{color:var(--ioc-link-color,var(--ioc--blue))}
body.ioc-site .logo-mark{color:var(--ioc--blue)}
body.ioc-site .mega span{color:var(--ioc--g70)}
body.ioc-site .hero h1 em{color:var(--ioc--blue)}
body.ioc-site .hero-meta{color:var(--ioc--g70)}
body.ioc-site .hero-panel{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .panel-label{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .panel-label:after{color:var(--ioc-success,#198038)}
body.ioc-site .map-node small{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .map-node span{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .proof-item strong{color:var(--ioc--blue)}
body.ioc-site .proof-item span{color:var(--ioc--g70)}
body.ioc-site .solution-card:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .solution-card:hover p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .solution-card .icon{color:var(--ioc--blue)}
body.ioc-site .solution-card p{color:var(--ioc--g70)}
body.ioc-site .ai-section{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ai-section .section-head p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .tab{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .tab[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .tab-panel p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .cap-list .icon{color:var(--ioc-success,#198038)}
body.ioc-site .industry .icon{color:var(--ioc--blue)}
body.ioc-site .industry p{color:var(--ioc--g70)}
body.ioc-site .industry span{color:var(--ioc--g60)}
body.ioc-site .step:before{color:var(--ioc--blue)}
body.ioc-site .step p{color:var(--ioc--g70)}
body.ioc-site .gateway:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .gateway p{color:var(--ioc--g70)}
body.ioc-site .gateway:hover p{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .gateway .text-link{color:inherit}
body.ioc-site .case-visual{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .case-visual>.carbon-icon{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .case-visual p{color:var(--ioc-text-on-brand-deep,#d0e2ff)}
body.ioc-site .case-copy cite{color:var(--ioc--g70)}
body.ioc-site .outcomes span{color:var(--ioc--g70)}
body.ioc-site .insight-meta{color:var(--ioc--g60)}
body.ioc-site .faq-a p{color:var(--ioc--g70)}
body.ioc-site .contact{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .contact p{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .field input{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .field select{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .field textarea{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .field select option{color:var(--ioc--g100)}
body.ioc-site .field input::placeholder{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .field textarea::placeholder{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .contact-form .btn{color:var(--ioc--blue)}
body.ioc-site .contact-form .btn:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .form-note{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .footer-brand p{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .footer-col h3{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .footer-col a{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .footer-col a:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .footer-bottom{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .back-top{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .editorial .hero-panel{color:var(--ioc--g100)}
body.ioc-site .editorial .panel-label{color:var(--ioc--g70)}
body.ioc-site .quote-mark{color:var(--ioc--blue)}
body.ioc-site .modular .hero-panel{color:var(--ioc--g100)}
body.ioc-site .modular .panel-label{color:var(--ioc--g70)}
body.ioc-site .cc-main strong{color:var(--ioc--blue)}
body.ioc-site .cc-wide small{color:var(--ioc--g70)}
body.ioc-site .modular .case-visual{color:var(--ioc--g100)}
body.ioc-site .modular .case-copy{color:var(--ioc--g100)}
body.ioc-site .modular .case-visual p{color:var(--ioc--g70)}
body.ioc-site .announcement{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .announcement a{color:var(--ioc-accent-on-inverse,#78a9ff)}
body.ioc-site .showcase .logo-sub{color:var(--ioc--g70)}
body.ioc-site .showcase-hero h1 em{color:var(--ioc--blue)}
body.ioc-site .hero-trust{color:var(--ioc--g70)}
body.ioc-site .hero-trust .icon{color:var(--ioc--green)}
body.ioc-site .console-status{color:var(--ioc--green)}
body.ioc-site .console-question{color:var(--ioc--g70)}
body.ioc-site .console-route>.carbon-icon:first-child{color:var(--ioc--blue)}
body.ioc-site .console-route small{color:var(--ioc--g70)}
body.ioc-site .console-result{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .console-result-label{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .console-result p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .logo-proof p{color:var(--ioc--g70)}
body.ioc-site .proof-mark .icon{color:var(--ioc--blue)}
body.ioc-site .persona-tab[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .persona-copy p{color:var(--ioc--g70)}
body.ioc-site .persona-outcomes{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .journey[open] summary{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .journey-top span{color:var(--ioc--blue)}
body.ioc-site .journey[open] .journey-top span{color:var(--ioc-accent-on-inverse,#78a9ff)}
body.ioc-site .journey-detail p{color:var(--ioc--g70)}
body.ioc-site .journey-detail .icon{color:var(--ioc--green)}
body.ioc-site .process-button[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .architecture-title p{color:var(--ioc--g70)}
body.ioc-site .info-button{color:var(--ioc--blue)}
body.ioc-site .info-button:focus:after{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .info-button:hover:after{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .layer>.carbon-icon{color:var(--ioc--g70)}
body.ioc-site .layer span{color:var(--ioc--g70)}
body.ioc-site .layer.active{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .layer.active>.carbon-icon{color:var(--ioc-text-on-brand-deep,#d0e2ff)}
body.ioc-site .layer.active span{color:var(--ioc-text-on-brand-deep,#d0e2ff)}
body.ioc-site .value-section{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .value-section .section-head p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .value-card>.carbon-icon{color:var(--ioc-accent-on-inverse,#78a9ff)}
body.ioc-site .value-card p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .assessment-aside{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .assessment-aside p{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .progress-steps li{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .progress-steps li.current{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .choice-text small{color:var(--ioc--g70)}
body.ioc-site .assessment-actions .btn[disabled]{color:var(--ioc-g60,#666666)}
body.ioc-site .filter-status{color:var(--ioc--g70)}
body.ioc-site .trust-intro{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .trust-intro p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .trust-item .icon{color:var(--ioc--blue)}
body.ioc-site .trust-item p{color:var(--ioc--g70)}
body.ioc-site .sticky-conversion{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .sticky-close{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .carbon-dialog{color:var(--ioc--g100)}
body.ioc-site .dialog-body>p{color:var(--ioc--g70)}
body.ioc-site .dialog-grid .field input{color:var(--ioc--g100)}
body.ioc-site .dialog-grid .field select{color:var(--ioc--g100)}
body.ioc-site .dialog-grid .field textarea{color:var(--ioc--g100)}
body.ioc-site .dialog-grid .field input::placeholder{color:var(--ioc--g70)}
body.ioc-site .dialog-grid .field textarea::placeholder{color:var(--ioc--g70)}
body.ioc-site .checkbox{color:var(--ioc--g70)}
body.ioc-site .showcase .contact:after{color:rgba(255,255,255,.09)}
body.ioc-site .showcase .footer-col h3{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .showcase .footer-col h5{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .review-index .hero-note{color:var(--ioc--g100)}
body.ioc-site .review-index .page-nav a{color:var(--ioc--g70)}
body.ioc-site .review-index .page-nav a:hover{color:var(--ioc--g100)}
body.ioc-site .review-index .page-nav a.active{color:var(--ioc--blue)}
body.ioc-site .review-index .proof-marks .proof-mark{color:var(--ioc--g100)}
body.ioc-site .review-index .proof-marks .carbon-icon{color:var(--ioc--blue)}
body.ioc-site .review-index .industry{color:inherit}
body.ioc-site .review-index .industry .industry-cta{color:var(--ioc--blue)}
body.ioc-site .review-index .ca-tab{color:var(--ioc--g70)}
body.ioc-site .review-index .ca-tab[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .sec-num{color:inherit}
body.ioc-site .review-index .assessment-aside p{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .review-index #get-started .contact{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index #get-started .contact p{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index #get-started .contact label{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index #get-started .contact .hero-meta span{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .contact-form .btn{color:var(--ioc-surface-brand,#001d6c)}
body.ioc-site .review-index .contact-form .btn:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .toast{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .media-frame figcaption{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .media-frame figcaption small{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .review-index .photo-sources{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .review-index .photo-sources a{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site #delivery .vh-out svg{color:var(--ioc-accent-on-brand,#8c8cff)}
body.ioc-site #delivery .vh-out strong{color:var(--ioc-text-on-color,#fff)}
body.ioc-site #delivery .vh-out span{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .showcase .section-kicker{color:var(--ioc--g100)}
body.ioc-site .showcase .ai-section .section-kicker{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .showcase .value-section .section-kicker{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .ca-tab:hover:not([aria-selected="true"]){color:var(--ioc--g100)}
body.ioc-site .review-index .assessment-trust{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .review-index .assessment-trust .carbon-icon{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .assessment-progress-note{color:var(--ioc--g60)}
body.ioc-site .review-index #ca-contact .field input::placeholder{color:rgba(255,255,255,.6)}
body.ioc-site .review-index #ca-contact .field textarea::placeholder{color:rgba(255,255,255,.6)}
body.ioc-site .review-index .form-reassure{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .review-index .form-reassure .carbon-icon{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .section-head .ioc-sh-lead p{color:var(--ioc--g100)}
body.ioc-site .section-head .ioc-sh-lead .meta{color:var(--ioc--g60)}
body.ioc-site .section.dark .section-head .ioc-sh-lead p{color:var(--ioc-g10,#f4f4f4)}
body.ioc-site .section.dark .section-head .ioc-sh-lead .meta{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .v1hero .foundation-card{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .fc-kicker{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .v1hero .fc-body>svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .fc-title{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .fc-sub{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .v1hero .fc-link{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-ribbon{color:var(--ioc--g70)}
body.ioc-site .vh-acard>svg{color:var(--ioc--blue)}
body.ioc-site .vh-acard .kx{color:var(--ioc--blue)}
body.ioc-site .vh-acard p{color:var(--ioc--g70)}
body.ioc-site .vh-c .num{color:var(--ioc--g60)}
body.ioc-site .vh-c>svg{color:var(--ioc--blue)}
body.ioc-site .vh-c p{color:var(--ioc--g70)}
body.ioc-site .vh-c a{color:var(--ioc--blue)}
body.ioc-site .vh-pf p{color:var(--ioc--g70)}
body.ioc-site .vh-chips a{color:var(--ioc--g70)}
body.ioc-site .vh-chips a:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-step .si{color:var(--ioc--blue)}
body.ioc-site .vh-step p{color:var(--ioc--g70)}
body.ioc-site .vh-out svg{color:var(--ioc--blue)}
body.ioc-site .vh-out span{color:var(--ioc--g60)}
body.ioc-site .vh-capcard .kx{color:var(--ioc--blue)}
body.ioc-site .vh-capcard p{color:var(--ioc--g70)}
body.ioc-site .vh-capcard a{color:var(--ioc--blue)}
body.ioc-site .vh-cpanel{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-cpanel .eyebrow{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-cpanel .vh2-intro h2{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh2-sub{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .vh2-trust{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .vh2-trust svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-modetabs button{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-modetabs button[aria-selected="true"]{color:var(--ioc--blue)}
body.ioc-site .vh2-form{color:var(--ioc--g100)}
body.ioc-site .vh2-field label{color:var(--ioc--g70)}
body.ioc-site .vh2-field .req{color:var(--ioc--blue)}
body.ioc-site .vh2-field input{color:var(--ioc--g100)}
body.ioc-site .vh2-field select{color:var(--ioc--g100)}
body.ioc-site .vh2-field textarea{color:var(--ioc--g100)}
body.ioc-site .vh2-field input::placeholder{color:var(--ioc-placeholder)}
body.ioc-site .vh2-field textarea::placeholder{color:var(--ioc-placeholder)}
body.ioc-site .vh2-err{color:var(--ioc-danger,#da1e28)}
body.ioc-site .vh2-q legend{color:var(--ioc--g70)}
body.ioc-site .vh-choices label{color:var(--ioc--g70)}
body.ioc-site .vh-choices label:hover{color:var(--ioc--g100)}
body.ioc-site .vh-choices label:has(input:checked){color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-consent{color:var(--ioc--g70)}
body.ioc-site .vh2-submit{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-status{color:var(--ioc--g100)}
body.ioc-site .vh2-note{color:var(--ioc--g60)}
body.ioc-site .pa{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .pa-row{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .pa-row .ic svg{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .pa-row .k{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .pa-row .d{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .pa-row.core .d{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .pa-row.core .k{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .pa-row .go{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .pa-row:hover .go{color:var(--ioc-accent-on-brand,#8c8cff)}
body.ioc-site .pa-row.core .go{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .pa-row:hover .ic svg{color:var(--ioc-accent-on-brand,#8c8cff)}
body.ioc-site .pa-fig figcaption span{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .pa-rule p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .pa-rule p b{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .pa-rule .k{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .pa-links a{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-dtabs button{color:var(--ioc-g70)}
body.ioc-site .vh-dtabs button:hover{color:var(--ioc-text-primary)}
body.ioc-site .vh-dtabs button[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-dpanel .m{color:var(--ioc-g60)}
body.ioc-site .vh-dpanel a{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-step:hover .si{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-seclink{color:var(--ioc--blue)}
body.ioc-site .vh-capcard:hover .kx{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-capcard:hover h3{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-capcard:hover p{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-capcard:hover a{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .footer-cta .vh2-sub{color:var(--ioc-text-secondary,#525252)}
body.ioc-site .ioc-footer .footer-cta .vh2-trust{color:var(--ioc-text-secondary,#525252)}
body.ioc-site .ioc-footer .footer-cta .vh2-trust svg{color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-footer .footer-action .vh-modetabs button{color:var(--ioc-text-secondary,#525252)}
body.ioc-site .ioc-footer .footer-action .vh-modetabs button[aria-selected="true"]{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .home-cta-bar{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .hcb-wrap p{color:var(--ioc-g20,#e0e0e0)}
body.ioc-site .hcb-wrap p strong{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .hcb-btn{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .hcb-close{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .hcb-close:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-cta-confirm.is-error{color:var(--ioc-danger,#da1e28)}
body.ioc-site .ioc-cta-panel .ioc-cta-confirm.is-error{color:var(--ioc-danger-on-color,#ff8389)}
body.ioc-site .ioc-cta-confirm.is-error a{color:inherit}

/* 2 · The admin tap-target reset `button{min-width:40px;min-height:40px}` is
 *     unscoped, and min-* beats width/height REGARDLESS of specificity — so a
 *     component that declares an explicit size cannot shrink below 40px. That
 *     inflated the hero slide dots (declared 10x10, rendered 40x40) and the
 *     footer social/chat marks (declared 34x34, rendered 40x40). Reset only
 *     where the site declares an explicit size; every other button keeps the
 *     40px accessible target. */
body.ioc-site .v1hero .hs-dots button{min-width:0;min-height:0}
body.ioc-site .ioc-footer .social a,
body.ioc-site .ioc-footer .social button{min-width:0;min-height:0}

/* 3 · The footer social marks render as <span role="img"> because no profile
 *     URLs exist in the CMS and inventing them would be drift. The kit styles
 *     the row as `.social a, .social button` only, so the spans missed the
 *     34x34 bordered box entirely and sat as bare glyphs beside the boxed chat
 *     button. Give the span the same box; it stays a non-link. */
body.ioc-site .ioc-footer .social span[role='img']{
  width:34px;height:34px;border:1px solid #393939;display:flex;
  align-items:center;justify-content:center;color:#c6c6c6;background:transparent;
}
body.ioc-site .ioc-footer .social span[role='img'] svg{width:16px;height:16px}

/* INFOC forms — the multi-step pager (CMS-D-084 P5, owner decision B-1).
 *
 * A SEPARATE, OWNED sheet. `infoc-cms.css` is sha256-pinned by
 * `scripts/v5-ui-gate.mjs` (P15-PUBLIC-BOUNDARY) and must not be hand-edited, and
 * appending to the GENERATED `infoc-site-overrides.css` would be overwritten on
 * the next build. B-1 chose option (c) — a dedicated sheet — and verified none of
 * the selectors below collide with the frozen one.
 *
 * It is deliberately SMALL. Every field, label, error and button inside a step is
 * already styled by the frozen sheet's generic selectors; this adds only what a
 * pager needs and nothing a single-step form pays for.
 *
 * Design rules (CMS-D-066): radius 0, 1px hairlines, house blue #0001ff, no
 * shadows-as-structure.
 *
 * P37 T4 (CMS-D-094/095): tokenised. The role layer lives in the PUBLIC kit's
 * own :root/body.ioc-site since Wave T1 — the old "the public site does not
 * load the admin token layer" rationale is no longer true. Every var() here
 * CARRIES A FALLBACK on purpose: this is a separate file, and a page that
 * ever loaded it without the kit sheet must render the house values, not
 * transparent (CMS-D-078). `#0001ff` maps to --ioc-blue, NEVER --ioc-accent —
 * accent is variant-overridden and a form pager must not family-shift.
 */

/* The step itself. A real <fieldset>, so the legend names the step for a screen
   reader and `hidden` on a later step is what the engine's own `visible()`
   already understands. */
.ioc-form .ioc-step {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0; /* fieldset defaults to min-content; this lets the grid shrink */
}

.ioc-form .ioc-step > legend {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  padding: 0;
  margin: 0 0 10px;
}

/* Progress. One line, a hairline rule, and a bar that fills — no percentages
   shouted at the visitor, because the step count is already in the label. */
.ioc-form .ioc-form-progress {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  /* was #6f6f6f — the progress label is helper text on a light card, and
     helper's role value is #5c5c5c (ΔE 7.8, an approved §5 normalisation) */
  color: var(--ioc-text-helper, #5c5c5c);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ioc-border-subtle, #e0e0e0);
}

.ioc-form .ioc-form-progress__bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ioc-blue, #0001ff);
  transition: width 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ioc-form .ioc-form-progress__bar {
    transition: none;
  }
}

/* Back / Continue. Sits above the action row so the submit stays the last thing
   before the reassurance line on the final step. */
.ioc-form .ioc-form-steps {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}

.ioc-form .ioc-form-steps [hidden] {
  display: none;
}

/* The step LIST marker classes B-1 reserved. Used by the builder's preview and by
   any future step-list affordance; declared here so the two never diverge. */
.ioc-form-step--current {
  font-weight: 600;
  color: var(--ioc-text-primary, #161616);
}

.ioc-form-step--complete {
  color: var(--ioc-blue, #0001ff);
}

/* The success panel's REFERENCE and REPLY-BY lines (2026-09-04).
   The forms runtime injects both as <p class="ioc-form-ref"> after a
   successful submit, and until now that class had ZERO rules in any of the
   five concat parts, so a reference identifier rendered in Manrope at the
   same 16px as the sentence above it -- the one string a person may need to
   read back to us, set as prose.
   THREE THINGS HERE ARE LOAD-BEARING.
   (1) `p.ioc-form-ref` and not `.ioc-form-ref`: the generated correction
   layer emits `body.ioc-site .ioc-form-success p{color:...}` at (0,2,2), so
   a (0,2,1) rule loses on the element count before source order is ever
   consulted. `color` is deliberately NOT set here for the same reason -- it
   could not beat the dark-band rule at (0,4,2), and the inherited secondary
   grey is already correct.
   (2) `align-self:stretch`: the success panel is `align-items:flex-start`,
   so without it the divider spans only the text width, not the panel.
   (3) The adjacent-sibling rule: the runtime injects the class TWICE, so a
   plain `border-top` would paint a double divider between two meta lines.
   This lives in forms.css rather than the infoc.com skin on purpose -- it is
   in all three site concats, so infoc.ai and infoc.one get it too, and the
   win is by specificity rather than sheet order, which makes the placement
   safe either way. */
.ioc-form-success p.ioc-form-ref {
  align-self: stretch;
  border-top: 1px solid var(--ioc-border-subtle, #e0e0e0);
  padding-top: var(--ioc-s4, 12px);
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.ioc-form-success p.ioc-form-ref + p.ioc-form-ref {
  border-top: 0;
  padding-top: 0;
}

/* The form summary is a section heading under the page title. */
.ioc-form-errors h2{margin:0 0 8px;font-size:15px;letter-spacing:-.01em}

/* ============================================================
   INFOC ONE CMS — slider sheet (CMS-D-100 ④). OWNED, not vendored.

   `infoc-cms.css` is a SHA-pinned artifact referenced in eleven places and is
   NOT touched by this programme. This is a separate owned sheet, exactly as
   `infoc-forms.css` is, copied to apps/one/public by
   copy-render-kit-runtime.mjs (prebuild + predev) and linked from the frontend
   layout.

   LITERAL-HEX CEILING IS ZERO. Every colour is `var(--role, #fallback)` — the
   var()-fallback pattern is the end state (CMS-D-078), and it is what makes the
   appearance ratchet monotonic. The mock's ~200 literal hexes and its invented
   family accents (#a04a00, #00635f, #0f62fe) are VOID; the palette that exists
   is --ioc-fam-* in infoc-cms.css:123-129.

   ALIASES DECLARE ON body.ioc-site, NEVER :root. An alias (a value containing
   var()) declared at :root substitutes on <html> and freezes at its code
   default, blind to the emitter's body.ioc-site overrides — CMS-D-095, live
   instance --ioc-shadow-focus.

   MOTION IS DECLARATIVE. Every duration and easing comes from the custom
   properties `renderSliderMarkup` inlined on the mount, resolved server-side by
   `resolveMotion`. The runtime only toggles data-state; it never sets a
   duration, so JS and CSS cannot disagree about timing.
   ============================================================ */

/* Slider roles. Aliases (they contain var()), so they belong on body.ioc-site.
   Each names the base role it draws from, and carries the literal fallback that
   role resolves to today. */
body.ioc-site {
  --ioc-sl-accent: var(--ioc-accent, #0001ff);
  --ioc-sl-accent-hover: var(--ioc-accent-hover, #0000c4);
  --ioc-sl-surface: var(--ioc-surface, #ffffff);
  --ioc-sl-surface-cool: var(--ioc-surface-cool, #f2f4f8);
  --ioc-sl-text: var(--ioc-text-primary, #161616);
  --ioc-sl-text-2: var(--ioc-text-secondary, #525252);
  --ioc-sl-border: var(--ioc-border-subtle, #e0e0e0);
  --ioc-sl-on-color: var(--ioc-text-on-color, #ffffff);
  --ioc-sl-on-inverse-muted: var(--ioc-text-on-inverse-muted, #c6c6c6);
  --ioc-sl-surface-dark: var(--ioc-surface-inverse-raised, #1c1c1c);
  --ioc-sl-border-on-color: var(--ioc-border-on-color, #ffffff);
}

/* Family accents. The document's `family` picks one; where a page already
   declares [data-page-family] the slider inherits that instead. */
.ioc-sl[data-family='academy'] {
  --ioc-sl-accent: var(--ioc-fam-academy, #6929c4);
  --ioc-sl-accent-hover: var(--ioc-fam-academy-hover, #55209c);
}
.ioc-sl[data-family='talents'] {
  --ioc-sl-accent: var(--ioc-fam-talents, #1a7a52);
  --ioc-sl-accent-hover: var(--ioc-fam-talents-hover, #145f40);
}
.ioc-sl[data-family='industries'] {
  --ioc-sl-accent: var(--ioc-fam-industries, #007d79);
  --ioc-sl-accent-hover: var(--ioc-fam-industries-ink, #005d5d);
}

/* ── mount + stage ───────────────────────────────────────────────────────── */

.ioc-sl {
  position: relative;
  overflow: hidden;
  background: var(--ioc-sl-surface, #ffffff);
  /* Horizontal swipe is ours; a vertical drag must still scroll the page. */
  touch-action: pan-y;

  /* TIMELINE DEFAULTS — the same values as TL_DEFAULTS in layouts.ts.
     `renderSliderMarkup` inlines the document's resolved values on this
     element, and an inline style beats a class selector, so these are the
     floor rather than the norm.

     Declaring them here is not redundancy. It buys three things:
       1. The appearance gate can see them. A var() consumed but declared
          nowhere is invalid at computed-value time (T16 ②c), and the gate is
          right to refuse it — the inline style is not something it can read.
       2. The runtime reads --hold and --depth through getComputedStyle. With
          no declaration and no inline style it would get an empty string and
          fall back to a magic number in JS instead of the shared source.
       3. If a strict nonce-based CSP ever blocks the inline style attribute
          (deployment plan §J1), the slider degrades to correct default motion
          rather than to no motion at all. */
  --enter: 620ms;
  --exit: 420ms;
  --kd: 1;
  --line-dur: 780ms;
  --line-lead: 180ms;
  --lift-dur: 640ms;
  --lift-lead: 260ms;
  --unveil-dur: 900ms;
  --unveil-lead: 200ms;
  --data-lead: 420ms;
  --hold: 6200ms;
  --depth: 12px;
  --ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  /* Per-item stagger index; the markup sets a real one on each staggered
     child, so this is only the floor for an item that carries none. */
  --i: 0;
}

.ioc-sl-stage {
  position: relative;
  display: grid;
  /* Every slide occupies the same cell, so the stage height is the tallest
     slide and nothing reflows when the active one changes. */
  grid-template-areas: 'slide';
  min-height: 34rem;
}

.ioc-sl-slide {
  grid-area: slide;
  position: relative;
  display: grid;
  gap: 3rem;
  align-items: center;
  padding: 4.75rem 4rem 6rem;
  color: var(--ioc-sl-text, #161616);
  background: var(--ioc-sl-surface, #ffffff);
}

.ioc-sl-slide[hidden] {
  display: none;
}

.ioc-sl-slide--dark {
  color: var(--ioc-sl-on-color, #ffffff);
  background: var(--ioc-sl-surface-dark, #1c1c1c);
}

.ioc-sl-slide--dark .ioc-sl-sub,
.ioc-sl-slide--dark .ioc-sl-stat-l {
  color: var(--ioc-sl-on-inverse-muted, #c6c6c6);
}

/* ── typography ──────────────────────────────────────────────────────────── */

.ioc-sl-kicker {
  margin: 0 0 1.125rem;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ioc-sl-accent, #0001ff);
}

.ioc-sl-headline {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.ioc-sl-sub {
  margin: 0 0 1.5rem;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ioc-sl-text-2, #525252);
}

.ioc-sl-quote {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--ioc-sl-accent, #0001ff);
  font-size: 1.1875rem;
  line-height: 1.5;
  font-weight: 500;
  max-width: 40rem;
}

/* ── CTAs ────────────────────────────────────────────────────────────────── */

.ioc-sl-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.ioc-sl-cta {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 1.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  /* Radius 0 everywhere (CMS-D-066). */
  border-radius: 0;
  transition: background 0.16s ease-out, color 0.16s ease-out;
}

.ioc-sl-cta--primary {
  background: var(--ioc-sl-accent, #0001ff);
  color: var(--ioc-sl-on-color, #ffffff);
}
.ioc-sl-cta--primary:hover {
  background: var(--ioc-sl-accent-hover, #0000c4);
}

.ioc-sl-cta--secondary {
  border: 1px solid currentColor;
  color: inherit;
}

.ioc-sl-cta:focus-visible,
.ioc-sl-dot:focus-visible {
  outline: 2px solid var(--ioc-sl-accent, #0001ff);
  outline-offset: 2px;
}

.ioc-sl-slide--dark .ioc-sl-cta:focus-visible,
.ioc-sl-slide--dark .ioc-sl-dot:focus-visible {
  outline-color: var(--ioc-sl-border-on-color, #ffffff);
}

/* ── stats ───────────────────────────────────────────────────────────────── */

.ioc-sl-stats {
  display: flex;
  gap: 2rem;
}

.ioc-sl-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ioc-sl-stat-v {
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ioc-sl-accent, #0001ff);
}

.ioc-sl-stat-l {
  font-size: 0.8125rem;
  color: var(--ioc-sl-text-2, #525252);
}

/* ── layout: 01-split ────────────────────────────────────────────────────── */

.ioc-sl-slide[data-layout='01-split'] {
  grid-template-columns: 1fr 1.02fr;
}

.ioc-sl-figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--ioc-sl-border, #e0e0e0);
}

.ioc-sl-figure img,
.ioc-sl-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── layout: 03-media ────────────────────────────────────────────────────── */

.ioc-sl-slide[data-layout='03-media'] {
  padding: 0;
  grid-template-columns: 1fr;
}

.ioc-sl-bleed {
  position: absolute;
  inset: 0;
}

.ioc-sl-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* A left-weighted scrim so overlay text keeps AA contrast over any image. */
  background: linear-gradient(
    90deg,
    var(--ioc-sl-surface-dark, #1c1c1c) 0%,
    transparent 68%
  );
  opacity: 0.86;
}

.ioc-sl-overlay {
  position: relative;
  max-width: 44rem;
  padding: 4.75rem 4rem 6rem;
}

/* ── nav dots ────────────────────────────────────────────────────────────── */

.ioc-sl-nav {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 4rem 1.25rem;
  background: var(--ioc-sl-surface-cool, #f2f4f8);
  overflow-x: auto;
}

.ioc-sl-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6875rem;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  color: var(--ioc-sl-text-2, #525252);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.16s ease-out, color 0.16s ease-out;
}

.ioc-sl-dot:hover {
  border-color: var(--ioc-sl-border, #e0e0e0);
}

.ioc-sl-dot[aria-current='true'] {
  background: var(--ioc-sl-accent, #0001ff);
  color: var(--ioc-sl-on-color, #ffffff);
}

.ioc-sl-dot-name {
  /* Inherits the site body family — a slider never re-declares one. */
  font-size: 0.75rem;
}

/* ── entrance choreography ───────────────────────────────────────────────
   Durations and easing come from the custom properties resolveMotion inlined
   on the mount. `--kd` is the unitless stagger multiplier; `--i` is the item
   index the markup sets on each staggered child. */

.ioc-sl-slide[data-state='active'] [data-anim] {
  animation-duration: var(--lift-dur, 640ms);
  animation-timing-function: var(--ease-in, cubic-bezier(0.22, 1, 0.36, 1));
  animation-fill-mode: both;
}

.ioc-sl-slide[data-state='active'] [data-anim='lift'] {
  animation-name: iocSlLift;
  animation-delay: calc(var(--lift-lead, 260ms) * var(--kd, 1));
}

.ioc-sl-slide[data-state='active'] [data-anim='line'] {
  animation-name: iocSlLine;
  animation-duration: var(--line-dur, 780ms);
  animation-delay: calc(var(--line-lead, 180ms) * var(--kd, 1));
}

.ioc-sl-slide[data-state='active'] [data-anim='unveil'] {
  animation-name: iocSlUnveil;
  animation-duration: var(--unveil-dur, 900ms);
  animation-delay: calc(var(--unveil-lead, 200ms) * var(--kd, 1));
}

.ioc-sl-slide[data-state='active'] [data-anim='pop'] {
  animation-name: iocSlPop;
  animation-delay: calc((var(--data-lead, 420ms) + (var(--i, 0) * 60ms)) * var(--kd, 1));
}

@keyframes iocSlLift {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes iocSlLine {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes iocSlUnveil {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes iocSlPop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── slide transitions ───────────────────────────────────────────────────
   One rule per fx the register can emit (`FX` in layouts.ts). The entering
   slide animates over --enter; the leaving one over --exit. */

.ioc-sl-slide[data-state='active'] {
  animation-duration: var(--enter, 620ms);
  animation-timing-function: var(--ease-in, cubic-bezier(0.22, 1, 0.36, 1));
  animation-fill-mode: both;
}

.ioc-sl-slide[data-state='leaving'] {
  animation-duration: var(--exit, 420ms);
  animation-timing-function: var(--ease-in, cubic-bezier(0.22, 1, 0.36, 1));
  animation-fill-mode: both;
  /* The leaving slide must not swallow clicks meant for the entering one. */
  pointer-events: none;
}

.ioc-sl-slide[data-fx='shutter'][data-state='active'] {
  animation-name: iocSlShutterIn;
}
.ioc-sl-slide[data-fx='shutter'][data-state='leaving'] {
  animation-name: iocSlShutterOut;
}

.ioc-sl-slide[data-fx='rise'][data-state='active'] {
  animation-name: iocSlRiseIn;
}
.ioc-sl-slide[data-fx='rise'][data-state='leaving'] {
  animation-name: iocSlFadeOut;
}

.ioc-sl-slide[data-fx='split'][data-state='active'] {
  animation-name: iocSlSplitIn;
}
.ioc-sl-slide[data-fx='split'][data-state='leaving'] {
  animation-name: iocSlFadeOut;
}

.ioc-sl-slide[data-fx='fade'][data-state='active'] {
  animation-name: iocSlFadeIn;
}
.ioc-sl-slide[data-fx='fade'][data-state='leaving'] {
  animation-name: iocSlFadeOut;
}

.ioc-sl-slide[data-fx='zoom'][data-state='active'] {
  animation-name: iocSlZoomIn;
}
.ioc-sl-slide[data-fx='zoom'][data-state='leaving'] {
  animation-name: iocSlZoomOut;
}

@keyframes iocSlShutterIn {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes iocSlShutterOut {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes iocSlRiseIn {
  from {
    opacity: 0;
    transform: translateY(4%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes iocSlSplitIn {
  from {
    clip-path: inset(50% 0 50% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes iocSlFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes iocSlFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes iocSlZoomIn {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes iocSlZoomOut {
  from {
    opacity: 1;
    transform: scale(0.98);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .ioc-sl-slide {
    padding: 3rem 1.5rem 4rem;
  }
  .ioc-sl-slide[data-layout='01-split'] {
    grid-template-columns: 1fr;
  }
  .ioc-sl-overlay {
    padding: 3rem 1.5rem 4rem;
  }
  .ioc-sl-nav {
    padding: 0.75rem 1.5rem 1rem;
  }
  .ioc-sl-stage {
    min-height: 28rem;
  }
}

@media (max-width: 30rem) {
  .ioc-sl-stats {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  .ioc-sl-dot-name {
    display: none;
  }
}

/* ── reduced motion ──────────────────────────────────────────────────────
   Not a softening — a kill. Every entrance, transition and ambient drift is
   removed, and the runtime independently disables autoplay and parallax. The
   preference is honoured in three layers because it is easy to claim and hard
   to notice broken. */

@media (prefers-reduced-motion: reduce) {
  .ioc-sl *,
  .ioc-sl-slide,
  .ioc-sl-slide [data-anim] {
    animation: none !important;
    transition: none !important;
  }
  .ioc-sl [data-ambient='drift'] {
    transform: none !important;
  }
}

/* ── layouts 02, 04-15 ───────────────────────────────────────────────────
   One block per layout, in register order. Every colour is a var() with its
   token's literal as the fallback; the ceiling is 0 and the gate enforces it. */

/* 02-statement — centred, four-up stats */
.ioc-sl-slide[data-layout='02-statement'] {
  justify-items: center;
  text-align: center;
}
.ioc-sl-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60rem;
}
.ioc-sl-stats--quad {
  gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* 04-showcase — media + composed preview */
.ioc-sl-slide[data-layout='04-showcase'] {
  grid-template-columns: 0.9fr 1.1fr;
}
.ioc-sl-figure--wide {
  aspect-ratio: 16 / 10;
}

/* 05-convert — copy + governed form mount */
.ioc-sl-slide[data-layout='05-convert'] {
  grid-template-columns: 1fr 0.92fr;
}
.ioc-sl-bullets {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.ioc-sl-bullet {
  padding-left: 1.25rem;
  border-left: 2px solid var(--ioc-sl-accent, #0001ff);
  font-size: 0.9375rem;
}
.ioc-sl-col--form {
  padding: 1.5rem;
  background: var(--ioc-sl-surface, #ffffff);
  border: 1px solid var(--ioc-sl-border, #e0e0e0);
  border-top: 3px solid var(--ioc-sl-accent, #0001ff);
}

/* 06-features — capability grid */
.ioc-sl-slide[data-layout='06-features'] {
  grid-template-columns: 0.86fr 1.14fr;
}
.ioc-sl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--ioc-sl-border, #e0e0e0);
  border: 1px solid var(--ioc-sl-border, #e0e0e0);
}
.ioc-sl-card {
  padding: 1.125rem;
  background: var(--ioc-sl-surface, #ffffff);
}
.ioc-sl-card-n {
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--ioc-sl-accent, #0001ff);
}
.ioc-sl-card-t {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
}
.ioc-sl-card-b {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ioc-sl-text-2, #525252);
}

/* 07-results — KPI evidence */
.ioc-sl-slide[data-layout='07-results'] {
  grid-template-columns: 0.82fr 1.18fr;
}
.ioc-sl-stats--kpi {
  flex-wrap: wrap;
  gap: 2rem 3rem;
  margin-bottom: 1.5rem;
}

/* Composed decoration — deterministic bars, never authored data. */
.ioc-sl-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 7.5rem;
}
.ioc-sl-bar {
  flex: 1;
  /* The markup sets a real per-bar height inline; this is the floor for a bar
     that carries none, and it is what lets the gate see the property declared
     (T16 ②c) rather than consumed out of nowhere. */
  --h: 50%;
  height: var(--h, 50%);
  background: var(--ioc-sl-accent, #0001ff);
  opacity: 0.7;
}
.ioc-sl-slide--dark .ioc-sl-bar {
  background: var(--ioc-sl-on-color, #ffffff);
  opacity: 0.5;
}

/* 08-story — case study */
.ioc-sl-slide[data-layout='08-story'] {
  grid-template-columns: 0.8fr 1.2fr;
}
.ioc-sl-attrib {
  margin: 0 0 1.5rem;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ioc-sl-text-2, #525252);
}

/* 09-journey — process timeline */
.ioc-sl-slide[data-layout='09-journey'] {
  grid-template-columns: 1fr;
  align-content: center;
}
.ioc-sl-head {
  max-width: 46rem;
}
.ioc-sl-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
  margin: 0 0 2rem;
  padding: 1.5rem 0 0;
  list-style: none;
  border-top: 2px solid var(--ioc-sl-accent, #0001ff);
}
.ioc-sl-step {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.ioc-sl-step-n {
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--ioc-sl-accent, #0001ff);
}
.ioc-sl-step-t {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* 10-collection + 15-careers — adapter-resolved query mounts. Empty until the
   host adapter fills them: an empty region is honest, invented rows are not. */
.ioc-sl-slide[data-layout='10-collection'],
.ioc-sl-slide[data-layout='15-careers'] {
  grid-template-columns: 0.9fr 1.1fr;
}
.ioc-sl-collection,
.ioc-sl-roles {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  min-height: 12rem;
  background: var(--ioc-sl-border, #e0e0e0);
}

/* 11-compare — before / after */
.ioc-sl-slide[data-layout='11-compare'] {
  grid-template-columns: 1fr;
  align-content: center;
}
.ioc-sl-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.ioc-sl-panel {
  margin: 0;
  border: 1px solid var(--ioc-sl-border, #e0e0e0);
}
.ioc-sl-panel img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ioc-sl-panel-l {
  padding: 0.625rem 0.875rem;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ioc-sl-panel--after .ioc-sl-panel-l {
  background: var(--ioc-sl-accent, #0001ff);
  color: var(--ioc-sl-on-color, #ffffff);
}
.ioc-sl-stats--delta {
  gap: 2.5rem;
}

/* 12-video */
.ioc-sl-slide[data-layout='12-video'] {
  padding: 0;
  grid-template-columns: 1fr;
  align-items: end;
}
.ioc-sl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ioc-sl-duration {
  margin: 0 0 1rem;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* 13-proof-wall */
.ioc-sl-slide[data-layout='13-proof-wall'] {
  justify-items: center;
  text-align: center;
}
.ioc-sl-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 2rem;
  align-items: center;
  margin: 0 0 2rem;
  width: 100%;
  max-width: 56rem;
}
.ioc-sl-logo img {
  max-width: 100%;
  height: 1.75rem;
  object-fit: contain;
  /* Mono-tone by contract (the register says mono-tone SVG wordmarks); the
     filter guarantees it even if an editor uploads a colour mark. */
  filter: grayscale(1);
  opacity: 0.75;
}

/* 14-announce */
.ioc-sl-slide[data-layout='14-announce'] {
  grid-template-columns: 1.15fr 0.85fr;
}
.ioc-sl-venue {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--ioc-sl-on-inverse-muted, #c6c6c6);
}
.ioc-sl-when {
  display: block;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ioc-sl-accent, #0001ff);
}

/* 15-careers mosaic */
.ioc-sl-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.ioc-sl-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

/* ── inert-preview note (LOCKED CMS-D-106) ───────────────────────────────────
   The runtime mints this when a preview form is submitted; the copy is the
   decision's exact sentence, so it must read as a deliberate answer, not an
   unstyled default paragraph. */
.ioc-form-inert {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ioc-sl-border, #e0e0e0);
  border-left: 3px solid var(--ioc-sl-accent);
  color: var(--ioc-sl-text-2);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ── responsive, layouts 02-15 ───────────────────────────────────────────── */

@media (max-width: 60rem) {
  .ioc-sl-slide[data-layout='02-statement'],
  .ioc-sl-slide[data-layout='04-showcase'],
  .ioc-sl-slide[data-layout='05-convert'],
  .ioc-sl-slide[data-layout='06-features'],
  .ioc-sl-slide[data-layout='07-results'],
  .ioc-sl-slide[data-layout='08-story'],
  .ioc-sl-slide[data-layout='10-collection'],
  .ioc-sl-slide[data-layout='14-announce'],
  .ioc-sl-slide[data-layout='15-careers'] {
    grid-template-columns: 1fr;
  }
  .ioc-sl-compare {
    grid-template-columns: 1fr;
  }
  .ioc-sl-stats--quad {
    gap: 1.5rem;
  }
}

/* INFOC V6 delta sheet (CMS-D-118 — Wave 3b, WIRING-PLAN.md §3).
 *
 * A SEPARATE, OWNED sheet, third on the `infoc-forms.css`/`infoc-slider.css`
 * precedent — see those files' own headers for why a dedicated sheet exists
 * instead of hand-editing `infoc-cms.css`, which is sha256-pinned
 * (CMS-D-054, P15-PUBLIC-BOUNDARY) and MUST NOT be touched here.
 *
 * WHAT THIS FILE IS FOR. Wave 3 authored 17 new render-kit variants in the
 * kit's EXISTING class vocabulary (SOT 7.1.0 — inheriting the kit's classes,
 * not de-inlining the V6 comps). Most of what they emit already has CSS; this
 * sheet supplies the rest — the classes four task reports named as having
 * ZERO rules anywhere (`.ioc-cta-band`, the whole `.ioc-tabs` surface, the
 * B-11 card-media band, the B-11 row-list layout) plus the one genuinely new
 * domain: Data & AI, the sixth family the V6 pack uses (131 uses) that the
 * pack's own token table never names.
 *
 * TOKEN RULE (T16 ① — literal-hex ceiling ZERO). A hex is allowed ONLY as a
 * custom-property DECLARATION value (`--ioc-on-inverse-blue:#33b1ff`) or inside a
 * `var(--x,#hex)` fallback whose hex value-equals `--x`'s base declaration
 * (T16 ⑨). Every colour this sheet CONSUMES is `var(--ioc-…)`. The token
 * block below is the exact `MINT` list in
 * `apps/one/scripts/v6-extraction/token-map.mjs`, values and roles verbatim.
 *
 * SPECIFICITY RULE. The frozen sheet's `body.ioc-site a{color:inherit;
 * text-decoration:none}` sits at (0,1,2) and beats any single-class
 * component rule — the exact defect `infoc-site-overrides.css` exists to
 * correct for the CANONICAL sheet. Every selector below is prefixed
 * `body.ioc-site` so it clears that bar too, and so an alias-valued custom
 * property (one whose value contains `var(--ioc-…)`) is never declared at
 * `:root`/`html` (T16 ⑦ — it would freeze at its code default and never see
 * the Appearance emitter's `body.ioc-site` overrides).
 *
 * RADIUS is ZERO everywhere (CMS-D-066 r4); the V6 comps carry no
 * `border-radius` at all, so there is nothing to reconcile.
 *
 * SPACING. DESIGN.md's documented scale is 4·8·12·16·24·32·48. The V6 comps
 * are off it (SOT 7.0.0 ⑤) — this sheet uses the scale where a value is
 * genuinely free (gaps, small paddings) and accepts the rest as measured
 * debt: `apps/one/gate/spacing-ratchet.json`'s `v6CssOffScaleCeiling` is a
 * DEDICATED, separate, shrink-only ceiling for exactly this file, because
 * T17's three scan roots (apps/one/src, packages/ui/src,
 * packages/render-sharp/src) never reach `packages/render-kit/assets` — see
 * `scripts/spacing-gate.mjs`'s own SCAN-SCOPE RULING for why that root is
 * excluded (a second ratchet has no business opining on the CMS-D-054
 * render-kit contract) and why this file gets its own ceiling instead of
 * silently going unmeasured (SOT 7.0.0 ⑤: "the debt is MEASURED", not
 * hidden by scan-root selection).
 */

/* ============================================================
   A · Tokens — CMS-D-118 ③/WIRING.md §3.4, the deferred W1 vocabulary.
   A token lands HERE ONLY WITH ITS CONSUMER, never before it — that is
   exactly why the wider MINT list in
   `apps/one/scripts/v6-extraction/token-map.mjs` was deferred out of Wave 1
   in the first place (an emitted/declared token nothing consumes is the
   CMS-D-081 dangling-store defect in token form, and T16 ②b now scans this
   sheet for exactly that — see the `sheets` note in
   `scripts/appearance-gate.mjs`). Every token below is consumed by a rule
   in this same file; token-map.mjs's remaining MINT entries
   (`--ioc-fam-solutions-tint`/`-mid`, `--ioc-fam-support-tint`/`-mid`,
   `--ioc-fam-talents-tint`/`-mid`, `--ioc-on-inverse-purple`,
   `--ioc-on-inverse-green`, `--ioc-warning`/`-deep`/`-tint`) are NOT
   declared here — no required-CSS item from the four Wave-3 task reports
   names a concrete consumer for them, and re-declaring them without one
   would reproduce the Wave 1 problem one wave later (task-5-report.md,
   fix round 1). They stay in token-map.mjs, unclaimed, for whichever later
   task's required-CSS actually needs one.
   ============================================================ */
body.ioc-site{
  /* RETIRED by CMS-D-168: `--ioc-fam-data` / `-tint` / `-mid`. They were the
     sixth family, minted here because the V6 pack used #7a3ffc 131 times and
     its own token table never declared it. `dat` now resolves to house blue,
     so all three lost their last consumer and a declared colour token with no
     `var()` consumer is the T16 (2)b orphan the gate refuses. The pack's usage
     is unchanged history; the SITE simply stopped painting it. */

  /* On-inverse blue. The pack sets this over #000000 bands, where the base
     family accents (incl. house blue) fail contrast (token-map.mjs) — the
     general-purpose step (31 uses, incl. the wordmark C on ink). Consumed
     in §H for the dark CTA band's kicker rule and in §I for the tabs' ink
     answer panel. */
  --ioc-on-inverse-blue:#33b1ff;

  /* On-inverse green + purple — minted 2026-08-17 WITH their first consumer
     (§S: the hero figure's ink caption tag, family-scoped), per this
     section's own landing rule. Values are token-map.mjs's measured pack
     steps (green 3 uses "Talents text on ink", purple 5 uses "Data & AI
     text on ink" — the pack also paints Academy tags with it, e.g.
     Talents.dc.html:222's green ↔ Academy's purple sibling). */
  --ioc-on-inverse-green:#3fdba0;
  --ioc-on-inverse-purple:#be95ff;

  /* The platform cross-section's six strata grounds (§T, Home-standalone
     2026-08-17 revision): stratum one is house blue; two→six step down
     through the revision's own near-blacks. Minted WITH their consumer. */
  /* ONE ground for layers two→six (§T2). It was five tokens (#1c1c22 ·
     #17171c · #131317 · #101013 · #0c0c0f), transcribed from the 2026-08-17
     revision as a descending six-step scale. §T2 retires four and keeps this
     value, the middle step: MEASURED, the scale separated adjacent bands by
     1.053 / 1.027 / 1.016 / 1.027 : 1 and all five steps together by 1.129:1
     — under one JND, so it rendered as a single slab and bought less
     separation than the 1px hairline that replaces it. Retired WITH their
     consumer, the way they were minted. */
  --ioc-stratum:#17171c;

  /* Muted text on the INK BAND (`--ioc-g100`), the step this sheet used to
     spell as the kit's fixed `--ioc-g30`. The value here is that same #c6c6c6
     — this declaration is the code-owned default for a page rendered without
     the Appearance token block; the emitter
     (`packages/standard/src/site/typography.ts`) overrides it per skin at
     `body.ioc-site`, which is what makes it survive the `dark` skin, where
     `ink` is #f4f4f4 and #c6c6c6 on it is 1.55:1. NOT
     `--ioc-text-on-inverse-muted`: that name is already bound to the FIXED
     `--ioc-surface-inverse-raised` (#1c1c1c) ground by infoc-slider.css, and
     per-skin values that fix this band would break that one. Consumed in §H
     (dark CTA band lead) and §I (current tab's secondary line). */
  --ioc-text-on-ink-muted:#c6c6c6;
}

/* ============================================================
   B · Data & AI route-family colour (B-11's per-card accent).
   `.ioc-cards [data-route-fam]` already ships the whole mechanism —
   border-top, eyebrow/cardicon/card-link tint, hover, focus-visible,
   reduced-motion (infoc-cms.css:1648-1661) — for codes
   sol/aca/tal/sup/com/ind/tec/ins. "dat" is the one genuinely new code
   (task-1-report.md, fix round 1); this follows that shape exactly and
   adds nothing else — the shared descendant rules pick "dat" up for free.
   ============================================================ */
/* CMS-D-168 - `dat` FOLDS INTO HOUSE BLUE. Owner-directed 2026-08-20. Data &
   AI is a SERVICE AREA, not a destination with its own gateway, and its
   #7a3ffc sat 40 degrees from Academy's #6929c4 - two purples on one page
   read as an accident rather than a system. The key stays in the register
   and resolves explicitly to blue rather than being deleted: CMS-D-130 warns
   that an UNKNOWN key silently paints the page accent and "looks
   deliberate", so an explicit mapping is the difference between a decision
   and a fall-through nobody can audit. 6 live cards. */
body.ioc-site .ioc-cards [data-route-fam="dat"]{--rf:var(--ioc-blue);--rfi:var(--ioc-blue)}

/* ============================================================
   C · Data page-family accent (Section A: "[data-page-family=\"Data\"] —
   missing, so Data pages get no family accent"). Mirrors the Academy/
   Talents Gateway PAGE-WIDE pattern (infoc-cms.css:1111-1112) rather than
   the lesser .ioc-fam-scoped Industries/Company one — task-2-report.md's
   flagged gap is the HERO's `.ioc-hero h1 .em{color:var(--ioc-accent)}`,
   which lives outside .ioc-fam, so the page-wide form is the one that
   actually closes the gap.
   ============================================================ */
/* --ioc-accent-hover deliberately NOT overridden here (fix round 1): Academy/
   Talents each override it with a DEDICATED darker-hover token
   (--ioc-fam-academy-hover/--ioc-fam-talents-hover) token-map.mjs does not
   mint one for Data, and setting it to the same value as --ioc-accent would
   make the hover state visually identical to rest — worse than the
   inherited house default (--ioc-accent-hover:#0000c4, infoc-cms.css:25),
   which Data pages now fall through to. */
/* .ioc-fam already computes its background from --ioc-accent via
   color-mix() (infoc-cms.css:1121) — this refines the Data closing band to
   the pack's own authored tint/rule steps instead of the generic algorithmic
   mix, the same two-tone "tinted panel + rule" shape token-map.mjs's role
   text describes for every family's tint/mid pair. */

/* ============================================================
   D · B-11-V17 card media band + description (task-1-report.md required
   CSS: .ioc-card-media, .ioc-card-body, .ioc-card-d). The whole card is an
   <a class="ioc-card" data-route-fam="…">; .ioc-card already ships
   display:flex/flex-direction:column and its hover/anchor-reset (kit
   body.ioc-site a{color:inherit;text-decoration:none} already handles the
   link), so this only adds the media band and re-flows the body padding
   that .ioc-card normally carries on its own root element.
   ============================================================ */
/* `:not(:empty)` — B-11-V21 renders the band element on EVERY card and lets
   an unfilled slot collapse (rule ⑥ below); a text card whose empty band
   still zeroed the padding would lose its whole inset. V17 bands are always
   filled, so this narrowing changes nothing for them. */
body.ioc-site .ioc-card:has(.ioc-card-media:not(:empty)){padding:0}
body.ioc-site .ioc-card-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ioc-g20)}
body.ioc-site .ioc-card-media img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);display:block;transition:transform .3s var(--ioc-ease)}
body.ioc-site a.ioc-card:hover .ioc-card-media img{transform:scale(1.04)}
/* A destination-less cell in a full-anchor card grid must not read or act as
   a link: the template always emits the <a>, and an empty store href renders
   `#` — the BC "Why" grid seeds six such cells, which the comp
   (SolutionBusinessCentral.dc.html §why) draws as plain DIVs. Same family as
   `.ioc-card-link[href="#"]{display:none}`: the element stays for the grid,
   the interaction goes (no pointer cursor, no dead scroll-to-top click). */
body.ioc-site a.ioc-card[href="#"]{pointer-events:none;cursor:default}
body.ioc-site .ioc-card-body{padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;flex:1;min-width:0}
/* Sizing only — colour deliberately omitted so the kit's existing
   `.ioc-cards [data-route-fam] .ioc-cardicon{color:var(--rfi)}`
   (infoc-cms.css:1658) keeps driving the per-family tint; a colour here
   would out-specificity that rule (one more element selector on an
   otherwise-tied class count) and repaint every family the same. */
body.ioc-site .ioc-card-body .ioc-cardicon{width:26px;height:26px;display:block;margin-bottom:16px}
body.ioc-site .ioc-card-body strong{display:block;font-size:clamp(17px,1.4vw,20px);font-weight:700;letter-spacing:-.015em;margin-bottom:8px;color:var(--ioc-text-primary)}
body.ioc-site .ioc-card-d{display:block;margin:0;color:var(--ioc-text-secondary);font-size:14.5px;line-height:1.55;flex:1}
body.ioc-site a.ioc-card .ioc-card-body .ioc-card-link{margin-top:16px}

/* ============================================================
   E · B-11-V17 header link (task-1-report.md: .ioc-head-link — the
   top-right "All solutions" style link that replaces .ioc-sh-lead in this
   one variant). .ioc-head is already a 2-column grid, align-items:end
   (infoc-cms.css:1146) — the link is the 2nd grid child, so it already
   lands bottom-right; this only styles the link itself.
   ============================================================ */
body.ioc-site .ioc-head-link{justify-self:end;align-self:end;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ioc-accent-ink,var(--ioc-accent));white-space:nowrap}
body.ioc-site .ioc-head-link svg{width:16px;height:16px;transition:transform .18s var(--ioc-ease)}
body.ioc-site .ioc-head-link:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-head-link:hover svg{transform:translateX(4px)}
body.ioc-site .ioc-head-link:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:2px}

/* ============================================================
   F · B-11-V16 row-list layout (task-1-report.md required CSS:
   .ioc-cards.is-rows, .ioc-cards.is-rows .ioc-card, .ioc-card-code).
   layout_01's ONLY sanctioned value is " is-rows" (fix round 1 — grid_01
   stays column-count-only). Item order in the markup is eyebrow (group
   label) → title+code → body → link, which is also the left-to-right
   reading order this row layout wants.
   ============================================================ */
body.ioc-site .ioc-cards.is-rows{display:flex;flex-direction:column}
body.ioc-site .ioc-cards.is-rows .ioc-card{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:24px;row-gap:4px;padding:24px}
body.ioc-site .ioc-cards.is-rows .ioc-card-eyebrow{flex:0 0 11rem;margin:0}
body.ioc-site .ioc-cards.is-rows .ioc-card h3{flex:1 1 18rem;margin:0;display:flex;align-items:baseline;gap:12px;font-size:17px}
body.ioc-site .ioc-cards.is-rows .ioc-card p{flex:2 1 22rem;margin:0}
body.ioc-site .ioc-cards.is-rows .ioc-card-link{flex:0 0 auto;margin:0}
body.ioc-site .ioc-card-code{display:inline-block;margin-left:8px;font-family:var(--ioc-mono);font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--ioc-text-helper);border:1px solid var(--ioc-border-subtle);padding:4px 8px}
@media(max-width:760px){
  body.ioc-site .ioc-cards.is-rows .ioc-card{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   G · B-13 step-icon sizing (task-3-report.md required CSS: .ioc-step-n
   svg — "an unsized svg in a flex row expands to fill", WIRING.md §5.3).
   B-13-V07/V08's item template already carries explicit width="17"
   height="17" HTML attributes as a belt-and-braces guard; this is the
   matching CSS rule so the sizing holds even where the HTML attribute
   would be overridden by a future generic `svg{width:…}` rule. Colour is
   inherited (currentColor from .ioc-step-n's own
   color:var(--ioc-accent)/var(--ioc-accent-on-inverse), already set by the
   kit) — no new declaration needed.
   ============================================================ */
body.ioc-site .ioc-step-n svg{width:17px;height:17px;flex:none;display:inline-block;vertical-align:middle;margin-left:8px}

/* ============================================================
   H · B-06 closing CTA band (task-3-report.md required CSS: .ioc-cta-band
   and its tone_01 modifiers, .ioc-cta-copy, .ioc-cta-lead — zero rules
   anywhere before this sheet). Not the R5 head shape: kicker+H2+lead are
   one stacked block on the left, actions on the right, no meta line
   (task-3-report.md).
   ============================================================ */
body.ioc-site .ioc-cta-band{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px);background:var(--ioc-surface,#fff);border-top:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
body.ioc-site .ioc-cta-copy{min-width:0;max-width:44rem}
body.ioc-site .ioc-cta-lead{margin:12px 0 0;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:var(--ioc-text-secondary);max-width:52ch}
body.ioc-site .ioc-cta-lead b{font-weight:700;color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-band .ioc-actions{flex:none;margin-top:0}
/* tone_01 modifiers — the same three suffixes .ioc-block already supports
   (infoc-cms.css:1138-1143), reproduced here because .ioc-cta-band is not
   .ioc-block and inherits none of it. */
body.ioc-site .ioc-cta-band.tight{padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(48px,5vw,72px)}
body.ioc-site .ioc-cta-band.soft{background:var(--ioc-g10)}
/* THE `dark` MODIFIER NAMES A TOKEN, NOT A BRIGHTNESS. Its ground is
   `--ioc-g100`, which is the skin's `ink` FIELD — and on the `dark` skin that
   value is #f4f4f4, a LIGHT band. So the four rules below used to pair
   fixed-white `--ioc-text-on-color` (1.10:1) and fixed-grey `--ioc-g30`
   (1.55:1) with it: near-invisible text on a selectable skin, latent only
   because the site ships `v6`. They now read the two INVERTING roles —
   `--ioc-text-on-primary` (the emitter's #161616-on-dark / #ffffff-otherwise
   step, the same substitution HOME-FIX-PLAN F31 made for the current tab in
   §I) and `--ioc-text-on-ink-muted` (§A, minted here because the perfect name
   `--ioc-text-on-inverse-muted` is already bound to the slider's FIXED
   #1c1c1c ground). Measured on all four skins, strong / muted:
   light 18.10 / 10.59 · dark 16.45 / 7.10 · high-contrast 21.00 / 12.29 ·
   v6 21.00 / 12.29 — where before, dark read 1.10 / 1.55.
   T16 ⑥ CANNOT SEE THIS: it resolves both tokens to #ffffff/#c6c6c6 from the
   stylesheet, because that is what the stylesheet statically says. The net is
   `packages/standard/tests/site-skin-contract.spec.ts`, which carries both the
   per-skin value pairs AND a rule-level assertion that these four selectors
   name a skin-aware role — so a revert of the line below fails a test that
   names it, which is the mutation proof this fix was accepted on. */
body.ioc-site .ioc-cta-band.dark{background:var(--ioc-g100);color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-cta-band.dark .ioc-cta-lead{color:var(--ioc-text-on-ink-muted,#c6c6c6)}
body.ioc-site .ioc-cta-band.dark .ioc-cta-lead b{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-cta-band.dark .ioc-kicker{color:var(--ioc-text-on-primary,#fff)}
/* --ioc-accent (house blue) fails contrast on #000000 — the exact case the
   on-inverse ladder exists for (token-map.mjs). The kicker's leading rule
   is decorative (an empty ::before bar), not text, but the same ink-band
   substitution keeps every accent-coloured mark on this band legible. */
body.ioc-site .ioc-cta-band.dark .ioc-kicker::before{background:var(--ioc-on-inverse-blue)}
@media(max-width:700px){
  body.ioc-site .ioc-cta-band .wrap{flex-direction:column;align-items:flex-start}
  body.ioc-site .ioc-cta-copy{max-width:none}
}

/* ============================================================
   I · B-10 tab surface (task-4-report.md required CSS — the whole class
   list, zero rules anywhere before this sheet). Two layouts share the
   .ioc-tabs-tab/.ioc-tabs-tags/.ioc-tabs-list vocabulary:
     V09 "grid-strip"  — .ioc-tabs-list (4-col grid) → .ioc-tabs-body
                         (answer panel + links aside, 2-col).
     V10 "sidebar"     — .ioc-tabs.sidebar → .ioc-tabs-list (vertical) +
                         .ioc-tabs-panel (role detail + stage timeline).
   Fix report I2 (final whole-branch review): this WAS role="tab" +
   aria-selected="true|false" on .ioc-tabs-tab and role="tablist"/
   "tabpanel" on the surrounding wrappers — a false ARIA widget, because no
   tab-swap JS is authored anywhere in this repo (infoc-runtime.js:320 bails
   the moment panels.length !== tabs.length, which V09's 4-tab/1-panel and
   V10's 6-tab/1-panel both trip), so 4/6 focusable buttons were announced
   as a working tablist that did nothing on activation (WCAG 4.1.2/2.1.1).
   The ONLY state that was ever real is which button renders as visually
   "current" in the static default markup, so that is now a plain
   presentational class (`.is-active`, first button only, never toggled) —
   honest static content, no impersonated widget, and the visual design is
   unchanged. If real tab-swap JS is ever authored, it must toggle the
   ARIA attributes it (re)introduces, not just this class.

   CMS-D-118 / HOME-FIX-PLAN F9-F11: real tab-swap now exists for the Home
   surface — B-10-V20 emits `data-tabs` + one `[role="tabpanel"]` per
   `[role="tab"]`, which is exactly the shape `enhanceTabs` refuses to bail
   on, so the runtime drives `aria-selected`, roving `tabIndex` and
   `panel.hidden` on click and on ArrowRight/Left/Up/Down/Home/End. That
   makes I2's premise ("no tab-swap JS is authored anywhere") false for V20
   and only V20. So each active-tab rule below now carries a SECOND
   selector, `[aria-selected="true"]` — the attribute the runtime actually
   toggles — at the same specificity as its `.is-active` twin. The
   `.is-active` half is NOT deleted: V07 (/talents) and V10 (/academy) are
   still static and still carry that class, and dropping it would silently
   un-highlight their current tab. Read the pair as "current tab", however
   the variant states it. `.ioc-tabs-body[hidden]` is the matching trap:
   `hidden` is a UA `display:none`, so the author `display:grid` on that
   class OUTRANKS it and all four panels would paint at once.

   HOME-FIX-PLAN F31 — THE TWO GROUNDS WERE EXACTLY INVERTED. Home.dc.html
   paints the CURRENT tab INK (`fill.style.background = '#000000'` +
   `inset 0 -4px 0 #0001ff`, :573-575) and the answer panel HOUSE BLUE
   (`data-grid="answer" … background:#0001ff;color:#ffffff`, :278). This
   sheet had them the other way round: blue tab, `--ioc-g100` panel.

   THE SWAP IS APPLIED TO `[aria-selected="true"]` ONLY, and the `.is-active`
   half deliberately KEEPS the blue fill. That is not an oversight, it is the
   scope F31 asks for ("Home only"), enforced by the manifest rather than by a
   page selector: `aria-selected` appears in exactly ONE B-10 template,
   B-10-V20 (Home). V09 (unused by any page) and V10 (/academy) carry only
   `.is-active`, and /academy's own comp (Academy.dc.html:695) paints its
   selected sidebar tab `#ffffff` — neither blue nor ink — so re-pointing
   `.is-active` at ink here would invent a third treatment for a page no
   Tier-3 fix covers. Read the pair as "current tab, however the variant
   states it"; read the DIVERGENCE as "two variants, two comps".

   Every colour below resolves to a token whose contrast pair is declared in
   `scripts/appearance-gate.mjs` T16 ⑥ — the ink-ground marks reuse the
   `--ioc-text-on-color`/`--ioc-g30` on `--ioc-g100` rows, the blue-ground
   marks reuse the `--ioc-text-on-color`/`--ioc-text-on-brand-soft`/
   `--ioc-text-on-brand-muted` on `--ioc-blue` rows, and the two genuinely
   new pairings (`--ioc-g10` on blue, `--ioc-blue` on the white CTA fill) are
   ADDED to that table in the same commit. `--ioc-on-inverse-blue` moves OFF
   the answer kicker because it is a 4.08:1 pair on house blue: it was chosen
   for an INK ground and does not survive the swap.

   ONE TOKEN CHOICE IS NOT THE OBVIOUS ONE, and it was decided by a failing
   test rather than by taste. The white marks on the CURRENT tab, and the
   knocked-out CTA fill inside the blue panel, read `--ioc-text-on-primary`,
   not the `--ioc-text-on-color` the rest of this sheet uses for white-on-fill.
   `--ioc-text-on-color` is a FIXED `#ffffff` kit constant; T16 ⑥ resolves both
   to `#ffffff` from the stylesheet and cannot tell them apart. The skins can:
   `--ioc-g100` is the skin's `ink`, and on the `dark` skin ink is #f4f4f4 —
   so fixed white on it is 1.10:1, and the primary-on-white CTA is 2.35:1.
   `--ioc-text-on-primary` is the emitter's INVERTING step (#161616 on dark,
   #ffffff otherwise), which clears AA on all four skins (15.9 / 21 / 21 / 21
   for the tab; 7.68 / 8.59 / 8.59 / 12.6 for the CTA). Both failures were
   found by adding the pairs to `packages/standard/tests/site-skin-contract.
   spec.ts` BEFORE the rules were considered finished — the same file, and the
   same mechanism, that caught the black-on-black footer at F15.
   THE ONE F31 LEFT OPEN IS NOW CLOSED. F31 reported that the muted line on the
   current tab kept `--ioc-g30`, skin-blind in exactly the same way (1.55:1 on
   `dark`), because it was the ink-band convention §H shipped and
   re-vocabularising §H was another fix's surface. That fix is the one directly
   above: §H now routes the ink band through `--ioc-text-on-primary` and the new
   `--ioc-text-on-ink-muted`, and the two `[aria-selected="true"]` muted runs
   below follow it. Neither is a redesign — on the three non-dark skins the
   emitted value is #c6c6c6, byte-identical to the `--ioc-g30` it replaces.
   ============================================================ */

/* -- shared tab-button/tag vocabulary, both layouts -- */
body.ioc-site .ioc-tabs-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(20px,2vw,26px);background:var(--ioc-surface,#fff);border:0;margin:0;text-align:left;font-family:var(--ioc-sans);cursor:pointer;transition:background .18s var(--ioc-ease)}
body.ioc-site .ioc-tabs-tab:hover{background:var(--ioc-g10)}
body.ioc-site .ioc-tabs-tab:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:-3px}
/* .is-active — V09/V10's static "current" tab, blue fill, UNCHANGED. */
body.ioc-site .ioc-tabs-tab.is-active{background:var(--ioc-accent)}
/* [aria-selected="true"] — B-10-V20 (Home) only. Ink fill + the comp's 4px
   house-blue seat rule (Home.dc.html:574 `inset 0 -4px 0 #0001ff`). */
body.ioc-site .ioc-tabs-tab[aria-selected="true"]{background:var(--ioc-g100);box-shadow:inset 0 -4px 0 var(--ioc-blue)}
body.ioc-site .ioc-tabs-tab-ic{width:24px;height:24px;flex:none;color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tabs-tab.is-active .ioc-tabs-tab-ic{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-tabs-tab[aria-selected="true"] .ioc-tabs-tab-ic{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-tabs-tab strong{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-tabs-tab.is-active strong{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-tabs-tab[aria-selected="true"] strong{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-tabs-tab>span{font-size:13px;line-height:1.45;color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tabs-tab.is-active>span{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
/* On the ink fill the on-BRAND step is the wrong ladder; the comp writes
   `rgba(255,255,255,.78)` over #000000 (Home.dc.html:577), which composites to
   #c7c7c7 — `--ioc-g30` (#c6c6c6) to within one step. The token spelled here is
   `--ioc-text-on-ink-muted`, whose non-dark value IS that #c6c6c6, so the comp
   is still what renders; what changes is the `dark` skin, where the ink fill is
   #f4f4f4 and the fixed grey read 1.55:1. Same substitution as §H's lead. */
body.ioc-site .ioc-tabs-tab[aria-selected="true"]>span{color:var(--ioc-text-on-ink-muted,#c6c6c6)}
body.ioc-site .ioc-tabs-cue{margin-top:4px;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tabs-tab.is-active .ioc-tabs-cue{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
/* Home.dc.html:579 — the cue goes flat #ffffff on the current tab. */
body.ioc-site .ioc-tabs-tab[aria-selected="true"] .ioc-tabs-cue{color:var(--ioc-text-on-primary,#fff)}

body.ioc-site .ioc-tabs-tags{display:flex;flex-wrap:wrap;gap:8px}
body.ioc-site .ioc-tabs-tags i{font-style:normal;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border:1px solid var(--ioc-border-subtle);color:var(--ioc-text-secondary)}

body.ioc-site .ioc-tabs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:4px}
body.ioc-site .ioc-tabs-actions-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ioc-text-primary)}
body.ioc-site .ioc-tabs-actions-link svg{width:15px;height:15px;color:var(--ioc-accent-ink,var(--ioc-accent));transition:transform .18s var(--ioc-ease)}
body.ioc-site .ioc-tabs-actions-link:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tabs-actions-link:hover svg{transform:translateX(4px)}
body.ioc-site .ioc-tabs-actions-link:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:2px}

/* -- V09 grid-strip layout -- */
body.ioc-site .ioc-tabs-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-tabs-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,20rem);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle);border-top:0}
/* B-10-V20 renders one .ioc-tabs-body PER tab and the runtime hides the three
   that are not current. `hidden` is only a UA `display:none`, so the author
   rule above wins on specificity and every panel would paint — this is the
   rule that makes `hidden` mean hidden again. */
body.ioc-site .ioc-tabs-body[hidden]{display:none}

/* The answer panel. HOUSE BLUE since F31 (Home.dc.html:278) — see the section
   header for why, and for why every mark below moved onto an on-BRAND step. */
body.ioc-site .ioc-tabs-answer{position:relative;background:var(--ioc-blue);color:var(--ioc-text-on-color,#fff);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:16px;overflow:hidden}
/* comp: #ffffff at opacity .8 over #0001ff = #ccccff. --ioc-on-inverse-blue
   (#a3adff), which this rule used to carry, is 4.08:1 here — an ink-ground
   token on a blue ground. --ioc-text-on-brand-muted (#d0d0ff) is the step the
   ladder actually provides for this pairing, and T16 ⑥ already pins it. */
body.ioc-site .ioc-tabs-answer-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .ioc-tabs-answer h3{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.015em;color:var(--ioc-text-on-color,#fff)}
/* comp: #ffffff at opacity .92 = #ebebff; --ioc-text-on-brand-soft is the step. */
body.ioc-site .ioc-tabs-answer p{margin:0;color:var(--ioc-text-on-brand-soft,#e5e5ff);font-size:14.5px;line-height:1.6}
/* comp chip: border rgba(255,255,255,.22), the SAME alpha rule §L already uses
   for the hero panel's on-blue underline. --ioc-g70 was an ink-ground border
   and reads as mud on blue. */
body.ioc-site .ioc-tabs-answer .ioc-tabs-tags i{border-color:rgba(255,255,255,.22);color:var(--ioc-g10)}
/* THE CASCADE TRAP THIS SECTION EXISTS TO AVOID: `.btn-primary` is house blue
   on white (infoc-cms.css:245), so leaving it alone paints a blue button on a
   blue panel — invisible. The comp inverts it (Home.dc.html:283:
   `background:#ffffff;color:#0001ff`, hover `#0000c4`). The harvested
   `body.ioc-site .btn-primary{color:…}` in the generated correction layer is
   (0,2,1); this is (0,3,1) and wins. */
body.ioc-site .ioc-tabs-answer .btn-primary{align-self:flex-start;background:var(--ioc-text-on-primary,#fff);color:var(--ioc-blue)}
body.ioc-site .ioc-tabs-answer .btn-primary:hover{background:var(--ioc-text-on-primary,#fff);color:var(--ioc-blue-hover);box-shadow:none}
body.ioc-site .ioc-tabs-answer-fig{position:relative;margin-top:auto;min-height:9rem;background:var(--ioc-g90);overflow:hidden}
body.ioc-site .ioc-tabs-answer-fig img{width:100%;height:100%;object-fit:cover;display:block}

/* -- F31, second half: the two-column answer panel (B-10-V20 only) --
   Home.dc.html:278-288 is `display:grid;grid-template-columns:1.15fr .85fr`
   with the copy in a padded left cell and the image as the right cell at
   `min-height:320px`. The copy needed a wrapper the template did not have, so
   B-10-V20's `templateHtml` gained `<div class="ioc-tabs-answer-body">` around
   the kicker→CTA run in this same commit; `.ioc-tabs-answer-fig` is now its
   SIBLING, not the last flex child.
   `:has(>.ioc-tabs-answer-body)` keys the grid off that wrapper instead of the
   class itself so B-10-V09 — which shares `.ioc-tabs-answer` and is bound to
   no page today — keeps the single-column flex layout it was authored for
   rather than silently breaking the day someone picks it in admin.
   `grid-template-columns`/`min-height` are not spacing properties (T17 §N
   ruling), so 1.15fr/.85fr and 320px stay verbatim; the comp's
   `padding:36px 34px 38px` snaps to the 4/8/12/16/24/32/48 scale as 32px on
   all four sides, and `min-height:66px` on the h3 (which the comp sets so the
   panel does not jump between symptoms) is likewise not a spacing property. */
body.ioc-site .ioc-tabs-answer:has(>.ioc-tabs-answer-body){display:grid;grid-template-columns:1.15fr .85fr;padding:0;gap:0}
body.ioc-site .ioc-tabs-answer-body{min-width:0;padding:32px;display:flex;flex-direction:column;gap:16px}
body.ioc-site .ioc-tabs-answer-body h3{font-size:29px;line-height:1.12;letter-spacing:-.03em;min-height:66px}
body.ioc-site .ioc-tabs-answer-body p{flex:1}
body.ioc-site .ioc-tabs-answer:has(>.ioc-tabs-answer-body)>.ioc-tabs-answer-fig{margin-top:0;min-height:320px}

body.ioc-site .ioc-tabs-links{background:var(--ioc-surface,#fff);padding:clamp(24px,2.4vw,30px);display:flex;flex-direction:column}
body.ioc-site .ioc-tabs-links-k{font-family:var(--ioc-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:8px}
body.ioc-site .ioc-tabs-links a{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:14.5px;font-weight:600;color:var(--ioc-text-primary);border-top:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-tabs-links a:first-of-type{border-top:0}
body.ioc-site .ioc-tabs-links a svg{width:15px;height:15px;flex:none;color:var(--ioc-accent-ink,var(--ioc-accent));transition:transform .18s var(--ioc-ease)}
body.ioc-site .ioc-tabs-links a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tabs-links a:hover svg{transform:translateX(4px)}
body.ioc-site .ioc-tabs-links a:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:2px}

@media(max-width:900px){
  body.ioc-site .ioc-tabs-body{grid-template-columns:1fr}
  /* Home.dc.html:53 collapses `router` and `answer` together (at its own
     1080px outlier — D4 keeps the repo's breakpoints, so this rides the 900px
     the router already uses in this sheet rather than adding a third value). */
  body.ioc-site .ioc-tabs-answer:has(>.ioc-tabs-answer-body){grid-template-columns:1fr}
}
@media(max-width:760px){
  body.ioc-site .ioc-tabs-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  body.ioc-site .ioc-tabs-list{grid-template-columns:1fr}
}

/* -- V10 sidebar layout (additive — .ioc-tabs.sidebar, hardcoded literally
   per fixedInterior, matching the B-17-V08 "class=\"ioc-block soft\""
   precedent, not a bound attr) -- */
body.ioc-site .ioc-tabs.sidebar{display:grid;grid-template-columns:minmax(14rem,18rem) minmax(0,1fr);border:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-list{display:flex;flex-direction:column;grid-template-columns:none;gap:0;background:transparent;border:0;border-right:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab{flex-direction:row;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab:last-child{border-bottom:0}
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab>span{font-size:14.5px;font-weight:600;color:inherit}
/* SPLIT, because the two halves of this pair sit on DIFFERENT grounds and only
   one of them is skin-safe with fixed white. `.is-active` is the accent fill
   (:312) — white is the family-accent convention there. `[aria-selected="true"]`
   is the INK fill (:315), where fixed white is the 1.10:1 `dark`-skin failure §H
   documents; it takes the inverting role like every other ink-ground mark in
   this section. Doubly latent today (no B-10 sidebar template emits
   `aria-selected` — only B-10-V20 does, and that is the grid-strip layout), so
   this is the pattern being closed rather than a rendering being repaired. */
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab.is-active>span{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab[aria-selected="true"]>span{color:var(--ioc-text-on-primary,#fff)}

body.ioc-site .ioc-tabs-panel{padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:16px}
body.ioc-site .ioc-tabs-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
body.ioc-site .ioc-tabs-panel-head h3{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.015em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-tabs-panel>p{margin:0;color:var(--ioc-text-secondary);font-size:14.5px;line-height:1.6}

body.ioc-site .ioc-tabs-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
body.ioc-site .ioc-tabs-stage{display:flex;flex-direction:column;gap:8px}
body.ioc-site .ioc-tabs-stage-bar{display:block;height:3px;background:var(--ioc-border-subtle);position:relative;overflow:hidden}
body.ioc-site .ioc-tabs-stage-bar::after{content:"";position:absolute;inset:0 auto 0 0;background:var(--ioc-accent)}
/* data-fill is a CLOSED set (25%/50%/75%/100% — the only values
   B-10-V10's defaultContent ever populates); attr() as a length value has
   no reliable cross-browser support, so this is four explicit rules
   against the exact known values rather than a live attr() read. */
body.ioc-site .ioc-tabs-stage-bar[data-fill="25%"]::after{width:25%}
body.ioc-site .ioc-tabs-stage-bar[data-fill="50%"]::after{width:50%}
body.ioc-site .ioc-tabs-stage-bar[data-fill="75%"]::after{width:75%}
body.ioc-site .ioc-tabs-stage-bar[data-fill="100%"]::after{width:100%}
body.ioc-site .ioc-tabs-stage-k{font-family:var(--ioc-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper)}
body.ioc-site .ioc-tabs-stage strong{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-tabs-stage>span{font-size:13px;line-height:1.5;color:var(--ioc-text-secondary)}

@media(max-width:900px){
  /* `minmax(0,1fr)`, NOT a bare `1fr` — the §Y trap, third instance. A `1fr`
     track's automatic minimum size is `auto` (its content's min-content), not
     zero (CSS Grid §7.2.3), so the single collapsed track grows to whatever
     the tab strip's widest tab demands. Measured on /academy at a 320px
     viewport: this track computed 331.031px inside a 256px content box and
     set documentElement.scrollWidth to 364 — the page's largest single
     contributor to a real two-directional scroll. `minmax(0,1fr)` drops the
     track to 254px. Nothing else changes: the two sizes differ ONLY when
     content exceeds the track, which is exactly the failing case. */
  body.ioc-site .ioc-tabs.sidebar{grid-template-columns:minmax(0,1fr)}
  body.ioc-site .ioc-tabs.sidebar .ioc-tabs-list{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--ioc-border-subtle)}
  body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab{border-bottom:0;flex:1 1 12rem}
}
@media(max-width:760px){
  body.ioc-site .ioc-tabs-stages{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   K · B-05-V09 full-bleed duo (CMS-D-118 V6 duo — Academy/Talents full-bleed
   two-panel band, Home.dc.html #capability). No existing B-05 variant renders
   a duo — `.ioc-media` (infoc-cms.css:1367) is a padded copy+image split, the
   wrong shape for two colour-filled linked panels edge to edge. Full-bleed:
   `.ioc-duo` carries no `.wrap` gutter, so the two panels sit flush against
   each other and against the band's own max-width.

   Family colour reuses the EXISTING data-route-fam mechanism
   (infoc-cms.css:1649-1661's --rf custom property) rather than inventing a
   new one (`.is-academy`-style classes) or baking a hex — both rejected in
   review on this branch. `.ioc-cards [data-route-fam]` only sets --rf inside
   `.ioc-cards`, so this is a second consumer of the SAME codes/tokens for the
   `.ioc-duo` context — same shape as §B's "dat" addition, just a new
   context rather than a new code. Unlike the border-tint use, a full-bleed
   panel needs a TEXT colour paired with the fill: every code below resolves
   to a --rf dark/saturated enough for white (--ioc-text-on-color) at
   ≥4.5:1 — verified via the five new T16 ⑥ pairs (appearance-gate.mjs).
   ============================================================ */
body.ioc-site .ioc-duo-band{border-top:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-duo{max-width:var(--ioc-maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr}
body.ioc-site .ioc-duo [data-route-fam]{--rf:var(--ioc-accent)}
body.ioc-site .ioc-duo [data-route-fam="sol"]{--rf:var(--ioc-blue)}
body.ioc-site .ioc-duo [data-route-fam="aca"]{--rf:var(--ioc-fam-academy)}
body.ioc-site .ioc-duo [data-route-fam="tal"]{--rf:var(--ioc-fam-talents)}
body.ioc-site .ioc-duo [data-route-fam="sup"]{--rf:var(--ioc-fam-company)}
body.ioc-site .ioc-duo [data-route-fam="com"]{--rf:var(--ioc-fam-company)}
body.ioc-site .ioc-duo [data-route-fam="ind"]{--rf:var(--ioc-fam-industries)}
body.ioc-site .ioc-duo [data-route-fam="tec"],
body.ioc-site .ioc-duo [data-route-fam="ins"]{--rf:var(--ioc-blue)}
body.ioc-site .ioc-duo [data-route-fam="dat"]{--rf:var(--ioc-blue)}
body.ioc-site .ioc-duo-panel{display:flex;flex-direction:column;background:var(--rf);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-duo-media{position:relative;display:block;height:200px;overflow:hidden;background:var(--ioc-g20)}
body.ioc-site .ioc-duo-media img{width:100%;height:100%;object-fit:cover;display:block}
body.ioc-site .ioc-duo-body{display:flex;flex-direction:column;gap:12px;padding:32px 32px 48px}
body.ioc-site .ioc-duo-k{font-family:var(--ioc-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
body.ioc-site .ioc-duo-body strong{font-size:clamp(24px,2.4vw,30px);line-height:1.12;font-weight:800;letter-spacing:-.03em;max-width:20ch}
body.ioc-site .ioc-duo-d{font-size:15.5px;line-height:1.6;opacity:.92;max-width:48ch}
body.ioc-site .ioc-duo-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin-top:8px}
body.ioc-site .ioc-duo-link svg{width:15px;height:15px;transition:transform .18s var(--ioc-ease)}
body.ioc-site .ioc-duo-panel:hover .ioc-duo-link svg{transform:translateX(4px)}
body.ioc-site .ioc-duo-panel:focus-visible{outline:3px solid var(--ioc-text-on-color,#fff);outline-offset:-3px}
/* Stack to one column below the same breakpoint §Y already uses for the
   sibling `.ioc-media` split (infoc-cms.css:1375) — `minmax(0,1fr)`, not a
   bare `1fr`, per §Y's own overflow lesson (a bare 1fr track's automatic
   minimum is its content's max-content width, not zero). */
@media(max-width:860px){
  body.ioc-site .ioc-duo{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  body.ioc-site .ioc-duo-link svg{transition:none}
}

/* ============================================================
   J · Header utility bar (apps/one/src/one/site-shell/Header.tsx#UtilityBar,
   fix report I5 / HOME-FIX-PLAN F16). The colour rule was moved here first
   (round 1) for the reason below; round 2 moves the LAYOUT rules here too,
   because `apps/(frontend)/globals.css` never actually shipped them — that
   file is compiled by Next's Tailwind v4/Turbopack pipeline, and a live diff
   of the served `/_next/static/chunks/*.css` against the source proved the
   file's LAST plain rule block is silently dropped from the compiled output
   (every earlier rule, including the one immediately above it in source,
   survives). This sheet is linked directly as a static asset
   (`apps/one/src/app/(frontend)/layout.tsx`) and Turbopack never touches it,
   so it cannot suffer the same drop. Colour was moved here originally
   because #000000 in globals.css ignored the site's skin (V6's own ink,
   frozen even after switching to a skin whose ink differs, breaking
   CMS-D-118 ②'s lossless-switch promise); the fallback is --ioc-g100's own
   base declaration (infoc-cms.css:22), per T16 ⑨. Every gap/padding value
   below is on the documented scale (4 · 8 · 12 · 16 · 24 · 32 · 48); the
   band's own 36px height is the comp's own measurement (Home.dc.html:74-83).
   The comp's 20px gaps are NOT on that scale and the DESIGN.md-scale ceiling
   (v6CssOffScaleCeiling) is shrink-only (CLAUDE.md "Optimised dev loop" /
   T17) — these round to the nearest scale step, 24px, rather than add to it.
   ============================================================ */
body.ioc-site .ioc-utility-bar{height:36px;max-width:1360px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:24px;color:var(--ioc-g100,#161616)}
body.ioc-site .ioc-utility-locale{font-family:var(--ioc-mono);font-size:10.5px;font-weight:400;letter-spacing:.13em}
body.ioc-site .ioc-utility-links{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:12.5px;font-weight:500}

/* ============================================================
   L · Footer ink (HOME-FIX-PLAN F15). Home.dc.html:358's footer is
   `background:#000000;color:#ffffff` in full — route cards, brand column,
   menu links, contact rows and the legal band all read white. The kit's own
   `.ioc-footer{background:var(--ioc-footer-surface,#fff);
   color:var(--ioc-text-primary)}` (infoc-cms.css:406) has NO on-colour text
   pair for that surface (see typography.ts's own comment on
   `SKIN_COMPONENT_PRESETS.v6.footer`) — flipping the surface token to black
   alone renders black text on black. `--ioc-footer-text` is that pair's other
   half: emitted by the typography emitter per skin (inert everywhere except
   v6, which is now white — `packages/standard/tests/site-skin-contract.spec.ts`
   proves the pairing, not this sheet, because the kit's OWN `--ioc-footer-surface`
   declaration statically resolves to white regardless of the active skin — see
   that file's header for why a skin-dependent pair cannot be proven here).
   Deliberately UNDECLARED as a CSS custom property in this file: declaring a
   literal default here would collide with the kit's frozen `--ioc-footer-surface`
   default (white) under T16 ⑥'s static, skin-blind resolution and read as a
   false failure (white-on-white) for a pairing that only exists at runtime.
   Every consumer below therefore falls back to a literal, safe-on-white value
   so a totally failed runtime emitter (which also reverts
   --ioc-footer-surface to its own white default) still renders legible ink
   text — never a token-only fallback chain that could resolve to nothing.

   Children that read a DIFFERENT token than `.ioc-footer`'s own `color`
   (`.footer-routes`, `.route`, `.footer-menu a`, `.footer-brand>p`,
   `.footer-contact .fc-k`/`.fc-v`, `.legal-row` spans/links) are re-pointed
   individually — the kit's cascade never lets the root's colour reach them
   by inheritance, since each declares its own `color`.

   EVERY selector below carries `.ioc-footer` explicitly, not just
   `body.ioc-site`, even though `.route`/`.footer-menu a`/etc. are unique
   class names that would otherwise resolve fine on their own. That is not
   defensive redundancy: `scripts/copy-render-kit-runtime.mjs` HARVESTS every
   colour rule in the frozen kit that carries a class (its own header: "every
   colour rule that carries at least one class/id, prefixed with
   body.ioc-site") into `apps/one/public/infoc-site-overrides.css`, and the
   kit's own footer rules ALL start `.ioc-footer …` — so the harvested copy is
   `body.ioc-site .ioc-footer .route{color:var(--ioc-text-primary)}` at
   (0,3,1), not `body.ioc-site .route{…}` at (0,2,1). A round-1 version of
   this section used the shorter form and every colour it set was silently
   outranked by the harvest — verified live: computed colours matched the
   OLD kit values, not these, until `.ioc-footer` was added to match the
   harvested specificity exactly. At equal specificity this sheet still wins
   on source order (loaded after infoc-site-overrides.css), so exact parity
   is enough; it does not need to exceed it.
   ============================================================ */
body.ioc-site .ioc-footer{color:var(--ioc-footer-text,#000000)}
body.ioc-site .footer-routes{background:transparent}
body.ioc-site .ioc-footer .route,
body.ioc-site .ioc-footer .route .rn,
body.ioc-site .ioc-footer .route .ico,
body.ioc-site .ioc-footer .route small{color:var(--ioc-footer-text,#fff)}
body.ioc-site .route{border-color:rgba(255,255,255,.22)}
body.ioc-site .route-grid{border-color:rgba(255,255,255,.22)}
body.ioc-site .ioc-footer .route:hover{background:var(--ioc-blue,#0001ff);color:var(--ioc-footer-text,#fff)}
/* Route band geometry — the comp (Home.dc.html:360-366) puts the 32px gutter
   on the BAND and gives the grid itself NO inline padding and NO outer frame:
   cards run flush to the wrap's edges, hairlines exist only BETWEEN cards,
   and the hover fill reaches the band's full cell. The kit instead makes the
   grid the `.fwrap` (padding:0 var(--ioc-gutter), infoc-cms.css:407) and
   frames it with `border-inline` (:431), so every card sat one gutter INSIDE
   the frame and `.route:hover`'s paint stopped a gutter short of it on both
   flanks — the defect measured live 2026-08-17. The gutter moves to
   `.footer-routes` (comp's own band padding) and the grid sheds the inset and
   the frame; the kit's existing between-card `border-right` (+ `:last-child`
   0, recoloured .22 above) already renders the comp's internal hairlines, so
   the comp's literal `gap:1px` technique is NOT copied — `gap` is a T17
   spacing property, 1px is off-scale, and `v6CssOffScaleCeiling` stands at
   27/27 with no headroom. Borders are not spacing (§N); rendered result is
   identical. Kit selectors are (0,2,0); these (0,3,0) win outright, mobile
   block (infoc-cms.css:567) included, whose border-inline:0 becomes moot. */
body.ioc-site .ioc-footer .footer-routes{padding:0 var(--ioc-gutter)}
body.ioc-site .ioc-footer .route-grid{padding:0;border-inline:0}
body.ioc-site .ioc-footer .footer-menu a,
body.ioc-site .ioc-footer .footer-brand>p,
body.ioc-site .ioc-footer .footer-contact .fc-k,
body.ioc-site .ioc-footer .footer-contact .fc-v{color:var(--ioc-footer-text,#fff)}
/* Uniform column-heading colour: the kit's base `.footer-menu h3` reads
   --ioc-accent (blue). Footer.tsx no longer emits ANY per-column family
   class (HOME-FIX-PLAN F15 "Also fix" removed `COLUMN_ACCENTS` at the
   source — Home.dc.html:382/390 is one flat white for all five headings),
   so this is the only rule left contesting the base kit colour. */
body.ioc-site .ioc-footer .footer-menu h3{color:var(--ioc-footer-text,#fff)}
/* Menu-link HOVER (owner report 2026-08-19, from a screenshot of the live
   footer). The block above re-pointed every footer COLOUR rule at
   `--ioc-footer-text`; the kit's `:hover` (infoc-cms.css:463) was the one it
   missed, so hover still resolved `--ioc-accent` — PAGE accent, which knows
   nothing about how dark this band is. On the V6 skin that is #0001ff on a
   #000000 footer: 2.45:1, i.e. hovering a link made it 8.6x HARDER to read
   than not hovering it. `--ioc-footer-link-hover` is the footer's own accent
   role, paired per-skin with `--ioc-footer-surface` (light 8.58 · dark 6.32 ·
   high-contrast 7.58 · v6 9.98), because no fixed colour serves all four:
   light's and high-contrast's footers are WHITE and every on-ink blue reads
   ~2.1:1 on them. NO FALLBACK on purpose — an unset token makes the
   declaration invalid at computed-value time and the link inherits
   `.ioc-footer`'s `--ioc-footer-text`, the pair already proven AA on every
   skin, so this rule cannot fail to a bad colour. `transform:translateX(3px)`
   is left to the kit rule; only the colour is contested here. */
body.ioc-site .ioc-footer .footer-menu a:hover{color:var(--ioc-footer-link-hover)}
body.ioc-site .ioc-footer .legal-links span,
body.ioc-site .ioc-footer .legal-links a,
body.ioc-site .ioc-footer .legal-button{color:var(--ioc-footer-text,#fff)}
body.ioc-site .back-top{border:1px solid rgba(255,255,255,.22);height:32px;padding:0 12px}
/* Wordmark: 30px kit default -> the comp's 19px footer size, and the C's
   fill moves off house blue (unreadable on ink) to the on-inverse blue step
   (token-map.mjs's general-purpose ink-band role, already declared in §A and
   already contrast-proven at T16 ⑥ line "on-inverse blue kicker text on
   ink"). `.gc` has no `.ioc-footer`-scoped harvest entry (the kit's own
   `.infoc-logo .gc{color:var(--ioc-blue)}` rule is unscoped, so the harvest
   re-emits it at `body.ioc-site .infoc-logo .gc` — (0,3,0), already below
   this selector's (0,4,0)), so it did not need the same treatment. */
body.ioc-site .footer-brand .brand .infoc-logo{font-size:19px}
body.ioc-site .footer-brand .infoc-logo .gc{color:var(--ioc-on-inverse-blue,#33b1ff)}

/* ============================================================
   N · Shell chrome geometry — header row, mega panels, footer grid and
   contact rows (HOME-FIX-PLAN F39 + F40, both ⚠ EVERY PAGE).

   §L above already landed the footer's INK (F15) and, with it, two of F39's
   five sub-defects — the wordmark is already 19px on --ioc-on-inverse-blue.
   What is left here is GEOMETRY, plus the header, which F15 never touched.

   SPACING. Every gap/padding/margin below is on DESIGN.md's documented scale
   (4 · 8 · 12 · 16 · 24 · 32 · 48) — this section adds ZERO to
   `v6CssOffScaleCeiling`, which is at its ceiling of 2 with no headroom. The
   comps' own values are off it, so each rounds to the nearest step with ties
   rounding up, exactly as §J did with the utility bar's 20px gaps and §M with
   its band paddings:
     · header row gap        14px -> 16px (tie, rounds up)
     · nav link padding   8px 11px -> 8px 12px
     · mega-inner padding 34px 32px 38px -> 32px (both 34 and 38 are nearer 32
       than 48; the comp's vertical asymmetry is the cost of the scale)
   Values that are NOT spacing properties keep the comp's exact number, because
   the gate measures gap/padding/margin only and rounding them would be loss
   for nothing: the 64px contact-key COLUMN (grid-template-columns), the 64px
   row height, the 1360px measure, the 40px/36px/20px control sizes.

   SPECIFICITY. `scripts/copy-render-kit-runtime.mjs` harvests every kit COLOUR
   rule that carries a class into `infoc-site-overrides.css` prefixed
   `body.ioc-site`, so a kit rule reappears one class higher — see §L's header
   for the full mechanism and the white-on-white it cost once. Each colour rule
   below therefore carries the kit selector's own full chain plus
   `body.ioc-site`, matching the harvest exactly and winning on source order
   (this sheet loads last — verified in the browser: the loaded order is
   infoc-cms.css, infoc-site-overrides.css, infoc-forms.css, infoc-slider.css,
   infoc-v6.css). Geometry rules are not harvested and need no such care.
   ============================================================ */

/* --- F40 · header surface. The comp's header is flat and opaque
   (`Home.dc.html:73` `background:#fff`, no filter anywhere in any of the 23
   comps); the kit paints `var(--ioc-header-surface)` under a
   `saturate(140%) blur(14px)` backdrop and the Appearance emitter used to hand
   it a 94%-alpha color-mix, so page content read through the sticky bar. The
   ALPHA half is fixed at its source (`packages/standard/src/site/typography.ts`
   now emits `t.header.background` verbatim); this is the BLUR half. They are
   one decision: a backdrop-filter behind an opaque surface renders nothing, so
   leaving it would have been dead paint on every scroll of every page. Not
   restated as a `background` here — doing that would freeze the header on
   whatever colour this sheet named and break the skin's own choice. --- */
body.ioc-site .ioc-header{-webkit-backdrop-filter:none;backdrop-filter:none}

/* --- F40 · header row geometry. Comp (`Home.dc.html:85`): 64px tall, capped
   at 1360px, `align-items:center`, gap 14px, and — the part that moves the
   most pixels — the wordmark, the nav and the actions are laid out
   `flex:none` / `flex:1 1 auto` / `margin-left:auto`. The kit instead gives
   `.nav{margin-left:auto}` (infoc-cms.css:302) with `.brand{margin-right:32px}`,
   which pushes the whole nav to the right edge and opens a measured 168px void
   between the wordmark and "Solutions" that the comp does not have. `.nav`
   growing from the left closes it without moving the actions. The row also
   stops being `align-items:stretch`, which is what made every child 72px tall;
   the two controls that relied on that (`.icon-btn`, `.top-cta`) get the
   comp's own explicit sizes below. Padding is left alone deliberately: the kit
   already reads `var(--ioc-gutter)`, which IS 32px (infoc-cms.css:53) and is
   the comp's value, so restating it would only cost the responsive behaviour.
   --- */
/* --- NAV ON THE TRUE PAGE AXIS (owner ruling 2026-08-18). The row was a flex
   line with `.nav{flex:1 1 auto}`, so the nav TRACK grew to fill everything
   between the wordmark and the actions while its links stayed packed at the
   track's left edge. Measured live at 1440: row 1360 wide spanning x=40..1400
   (true centre x=720), nav track 983 wide (184..1166), but the six links
   spanning only 630 (184..814) — an optical centre of x=499, a full 221px
   left of the axis.

   WHY A GRID AND NOT `justify-content:center` ON THE NAV. Centring inside the
   existing track is one line, and it is measurably NOT centred: the two side
   items are unequal (brand 96, actions 186), so the track they leave behind is
   not symmetric about the row's axis. Centring within it lands the menu at
   x=675 — still 45px left, and it drifts further every time the wordmark or
   the CTA label changes width. `1fr auto 1fr` makes the side tracks EQUAL by
   construction, so the centre cannot drift: the axis is a property of the
   grid, not a coincidence of the current copy.

   IT FITS, arithmetic not hope: the side tracks compute (1360 − 32 gaps − 630
   nav) / 2 = 349 each, against a 96px brand and 186px actions.

   SAFE AT EVERY WIDTH. The row has exactly THREE element children at all
   breakpoints — checked, because a fourth would spill into an implicit second
   row: the mobile toggle is a child of `.header-actions`, not of the row.

   THE COLUMNS ARE PLACED EXPLICITLY, and that is not belt-and-braces — the
   mobile case is BROKEN without it. Below 1041 the §J collapse sets
   `.nav{display:none}`, which does not merely empty the middle track: it stops
   the nav being a grid item at all. Auto-placement then puts `.header-actions`
   into the FIRST FREE track, which is the middle one, and the actions land
   mid-row with column 3 empty. Measured at 900 before this fix: actions' right
   edge at x=468 against a row right edge of 900. Naming each item's column
   pins brand/nav/actions to 1/2/3 whether or not the nav is present.

   The mega panels do not move: `.mega` is `position:absolute` with `left:0;
   right:0` against the sticky header, so it is full-bleed and independent of
   where the nav sits.

   T17: no spacing value changes — `gap:16px` is the existing declaration,
   carried over. `grid-template-columns` and `justify-self` are not spacing
   properties (§N). --- */
body.ioc-site .ioc-header .header-row{display:grid;grid-template-columns:1fr auto 1fr;height:64px;max-width:1360px;align-items:center;gap:16px}
body.ioc-site .ioc-header .brand{margin-right:0;grid-column:1;justify-self:start}
/* CMS-D-126 ② — owner-directed wordmark upsize over the comp's 17px: the
   ruling asked for "20% bigger" (20.4px); 20px is the recorded value — the
   round step, −2% off the literal ask and visually identical to it. */
body.ioc-site .ioc-header .brand .infoc-logo{font-size:20px}
/* `flex:1 1 auto` is what made the track swallow the free space; in the grid the
   nav sits in the `auto` track at its own content width. `min-width:0` stays —
   it is what lets that track shrink rather than push the row wide when the menu
   grows. `margin-left:auto` comes OFF the actions for the same reason: an auto
   margin in a grid area would re-introduce the asymmetry the grid just removed. */
body.ioc-site .ioc-header .nav{margin-left:0;align-items:center;grid-column:2;justify-self:center;min-width:0}
body.ioc-site .ioc-header .header-actions{margin-left:0;grid-column:3;justify-self:end;align-items:center;gap:8px}
/* The nav's own inter-link gap is the ONE comp value not carried across:
   `Home.dc.html:89` sets `gap:1px`, whose nearest scale step (4px) would be a
   visible four-fold widening. The kit declares no gap at all, so the links
   stay flush — 0 is the closer of the two available answers and, unlike 1px,
   costs nothing against a ceiling that has no headroom. */

/* --- F40 · nav links. Comp: weight 500, `#000000`, `padding:8px 11px`, and an
   `inset 0 -3px 0 #0001ff` box-shadow on the trigger whose panel is OPEN
   (`Home.dc.html:634` — `n.rule` is 'none' for every other item). The kit
   renders 600 / `--ioc-text-secondary` / `0 15px` over a full 72px row, and
   draws its marker as a 2px `::after` bar that also scales in on plain hover.
   The hover WASH is already right and is deliberately untouched — it comes
   from `.nav-link:hover{background:var(--ioc--g10)}` in the kit's admin half
   (infoc-cms.css:2014, and yes that token really is spelled with a double
   dash; it is aliased at :2012). Only the blue text tint was missing.
   `aria-current` keeps the marker as well as `aria-expanded`: the comp has no
   current-page state in its header at all, and silently deleting wayfinding
   that already ships is not something this fix was asked to do. --- */
/* `height:auto` is load-bearing, not tidying: the admin half's
   `.nav-trigger,.nav-link{height:100%}` (infoc-cms.css:2014) re-inflated every
   link to the full row even after the row itself came down to 64px, which
   would have left the comp's `inset 0 -3px 0` marker drawn at the row's bottom
   edge instead of the link's. */
body.ioc-site .ioc-header .nav-link,
body.ioc-site .ioc-header .nav-trigger{height:auto;padding:8px 12px;font-weight:500;color:var(--ioc-text-primary,#161616)}
body.ioc-site .ioc-header .nav-link::after,
body.ioc-site .ioc-header .nav-trigger::after{content:none}
body.ioc-site .ioc-header .nav-link:hover,
body.ioc-site .ioc-header .nav-trigger:hover,
body.ioc-site .ioc-header .nav-trigger[aria-expanded="true"]{color:var(--ioc-header-active,#0001ff)}
body.ioc-site .ioc-header .nav-link[aria-current="page"],
body.ioc-site .ioc-header .nav-trigger[aria-current="page"],
body.ioc-site .ioc-header .nav-trigger[aria-expanded="true"]{box-shadow:inset 0 -3px 0 var(--ioc-header-active,#0001ff)}

/* --- F40 · header controls. Comp: a 36x36 search affordance with no divider
   rule, then a 40px CTA that HUGS its label (`padding:0 16px`, `gap:8px`).
   The kit's CTA is a 176px-wide `space-between` slab that inherited the row's
   72px height, so the arrow sat pinned to the far edge. `.icon-btn`'s
   `border-left` goes with the stretch: an 8px-gapped 36px button cannot carry
   a full-height divider. Scoped to `.ioc-header` so the drawer's and the
   search overlay's own `.icon-btn`s are untouched. --- */
body.ioc-site .ioc-header .icon-btn{width:36px;height:36px;border-left:0}
body.ioc-site .ioc-header .top-cta{min-width:0;height:40px;padding:0 16px;gap:8px;justify-content:center;font-size:14px}

/* --- F40 · mega panels. `.mega-inner` was full-bleed (`max-width:none`) at
   `26px 32px`; the comp caps it at the same 1360px as the header row and pads
   `34px 32px 38px` (`Home.dc.html:96`). The flat panels' tile grid is the
   comp's `data-cols="2"` — `repeat(2,1fr)`, i.e. 2x2 — against the kit's
   `repeat(4,1fr)` 1x4 (infoc-cms.css:358; the earlier report blamed
   `.simple-layout` at :332, which is the panel's OUTER two-column split and is
   correct as it stands). The kit's hairline border grid on that container is
   kept rather than the comp's `gap:2px`: 2px is off-scale, and a 1px rule is
   the house convention anyway (CMS-D-066 r4).
   `.ioc-localnav{top:64px}` follows the row height down from 72px — §X below
   already does exactly this inside the drawer breakpoint, for the same
   reason; it is now true at every width. --- */
body.ioc-site .ioc-header .mega-inner{max-width:1360px;padding:32px}
body.ioc-site .ioc-header .simple-links{grid-template-columns:repeat(2,1fr)}
body.ioc-site .ioc-localnav{top:64px}

/* --- F40 · mega text treatment. The comp's grouped panel is one flat
   `#000000`: the group heading (`Home.dc.html:135`) and the tile title
   (:137) both. Live, the heading reads house blue from
   `.ioc-header .menu-group h3` (infoc-cms.css:341), and the title reads
   `rgb(82,82,82)` — INHERITED, not set: nothing matches `strong` at all, but
   its `.mg-txt` parent is caught by the admin half's `.mega span`
   (infoc-cms.css:2014) resolving `--ioc--g70` to `#525252`. Setting `strong`
   itself is the surgical fix; at (0,4,1) it clears both the kit rule and its
   harvested twin. Content in these panels is already verbatim-correct — this
   is treatment only. --- */
body.ioc-site .ioc-header .menu-group h3,
body.ioc-site .ioc-header .menu-group .mg-txt strong{color:var(--ioc-text-primary,#161616)}

/* --- F40 · featured aside. Comp (`Home.dc.html:154`): `padding:24px` and a
   `border-left:2px solid #0001ff`, opening straight on its eyebrow. The kit
   pads 18px, draws no rule, and `Header.tsx` used to put a 24px cube glyph
   above the eyebrow — removed at the source in the same change, which is why
   `.mega-label`'s 14px top offset (infoc-cms.css:335, spacing FOR that icon)
   is zeroed here rather than left dangling. Background is untouched: the
   Appearance emitter already resolves `--ioc-selected-surface` to the comp's
   `#f9fafb` (verified computed). --- */
body.ioc-site .ioc-header .featured{padding:24px;border-left:2px solid var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-header .featured .mega-label{margin-top:0}

/* --- F39 · footer grid, revised by owner direction 2026-08-17: FIVE cells —
   brand, three menu cells, contact. F39 had matched `Home.dc.html:379`'s six
   (`1.3fr repeat(4,1fr) 1.05fr`); the owner judged that congested and directed
   the Academy column back UNDER Talents Gateway in one `.footer-menu-stack`
   cell (`Footer.tsx` re-stacks them, Talents Gateway first). The five tracks
   are SYMMETRIC — 1.3fr bookends over three 1fr menus — because both ends
   carry dense content: the brand blurb left, the 64px-keyed contact rows
   right. The comp's 1.05fr contact track wrapped `solutions@infoc.com`
   mid-word at laptop widths (~215px track vs the ~230px the row needs);
   1.3fr clears it. Gap stays the comp's 32px. `minmax(0,…)` is kept on
   every track — the kit's own convention, and without it a long unbroken
   link string can push a track past its share. --- */
body.ioc-site .ioc-footer .footer-main-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:32px}

/* --- F39 · contact rows. The comp's key column is a FIXED 64px
   (`Home.dc.html:393`), so all four labels start and end on the same two
   verticals. The kit sizes it `auto`, which measured 52.86 / 34.31 / 41.45 /
   53.09px — four different widths, no alignment. The values are the comp's
   13px at .85 opacity, ranged LEFT beside their label, against the kit's
   15px/700 pushed hard right. `.fc-v` is now an `<a>` on all four rows
   (Country and Address gained the comp's destination in `Footer.tsx`), so the
   hover restores full opacity the way the comp's `style-hover` does.
   `overflow-wrap:anywhere` is NOT cosmetic and was found by measurement, not
   by reading: a fixed 64px key inside the narrower SIX-cell contact track
   (1.05fr, against the five-cell layout's 1.75fr) leaves ~52px beside it
   between 1041px and the kit's own 2-column footer breakpoint, and
   `solutions@infoc.com` is one unbreakable 124px string — it pushed the
   document 39px wider than the viewport at 1040px until this landed. The kit
   already breaks its other contact value the same way
   (`.fc-value{word-break:break-word}`, infoc-cms.css:467). --- */
body.ioc-site .ioc-footer .footer-contact .fc-row{grid-template-columns:64px minmax(0,1fr)}
body.ioc-site .ioc-footer .footer-contact .fc-k{font-size:13px}
body.ioc-site .ioc-footer .footer-contact .fc-v{justify-self:start;text-align:left;font-size:13px;font-weight:400;opacity:.85;overflow-wrap:anywhere}
/* Contact-row HOVER (owner report 2026-08-24, from a screenshot of the live
   footer). The SAME defect the menu-link rule above was written for, in the
   half it did not cover: this rule contested only `opacity`, so the COLOUR
   still fell through to the kit's `.footer-contact a.fc-v:hover`
   (infoc-cms.css:460) and resolved `--ioc-accent` -- page accent, which knows
   nothing about how dark this band is. On the V6 skin that is #0001ff on
   #000000: 2.45:1, the same 8.6x-harder-to-read result, on all four rows
   (Country, Email, Phone, Address -- every one is an `<a class="fc-v">`).
   Same token and the same deliberate NO FALLBACK as the menu rule: an unset
   `--ioc-footer-link-hover` makes the declaration invalid at computed-value
   time and the link inherits `.ioc-footer`'s `--ioc-footer-text`, the pair
   already proven AA on every skin, so this cannot fail to a bad colour. */
body.ioc-site .ioc-footer .footer-contact a.fc-v:hover{opacity:1;color:var(--ioc-footer-link-hover)}

/* --- F39 · footer wordmark base letters. §L above already carries the two
   halves this fix was written for (19px, and the C on --ioc-on-inverse-blue),
   but the FOUR OTHER LETTERS were still painting `--ioc-text-primary` from
   `.ioc-footer .footer-brand .brand` (infoc-cms.css:445) — i.e. #000000 on the
   ink ground §L had just created. Invisible, and found by looking at a
   rendered screenshot rather than at a computed style, because "black" and
   "absent" read identically in a style panel. The C's own `.gc` rule was the
   only part §L re-pointed, which is why the mark rendered as a lone blue C.
   Same (0,4,0) parity-with-the-harvest rule the rest of §L follows; white on
   ink is the pair `site-skin-contract.spec.ts` already proves, so this adds no
   new colour to T16 ⑥. --- */
body.ioc-site .ioc-footer .footer-brand .brand{color:var(--ioc-footer-text,#fff)}

/* --- F39 · route-card icons. Comp (`Home.dc.html:364`): a 40x40 span framed
   with a `rgba(255,255,255,.22)` hairline holding a 20px icon; the kit renders
   a bare 26px glyph with no frame. The three glyphs themselves changed in
   `Footer.tsx` (calendar/clipboard/speech -> the comp's clock/checkmark/people).
   The translucent hairline is written as a literal rgba, NOT a token, on
   purpose: §L above already ships this exact value three times
   (`.route`, `.route-grid`, `.back-top`) because the token vocabulary has no
   on-ink hairline role, and minting one here would tokenise a quarter of the
   footer's hairlines while §L kept the rest as literals — a worse state than
   either. T16 ① counts hex only, so this costs nothing against the literal
   ceiling either way. Hover needs no rule: §L already turns the whole card
   `--ioc-blue` and the frame is `currentColor`-independent. --- */
body.ioc-site .ioc-footer .route .rn{width:40px;height:40px;border:1px solid rgba(255,255,255,.22)}
body.ioc-site .ioc-footer .route .rn svg{width:20px;height:20px}

/* ============================================================
   X · Mobile drawer breakpoint. All 23 V6 comps (`*.dc.html`) declare
   `@media(max-width:1040px)` for the mobile nav uniformly; the shipped kit
   sheet's own breakpoint is `max-width:1000px` (infoc-cms.css:558-563,
   :1211) — 40px narrower, byte-frozen (CMS-D-054) and not editable here. A
   visitor between 1001-1040px therefore saw the DESKTOP mega-nav row where
   the design specifies the drawer trigger: `.mobile-toggle` stayed
   `display:none` (its unconditional default, infoc-cms.css:323) and `.nav`/
   `.search-open`/`.top-cta` stayed visible.

   This widens the SAME declarations — same properties, same values, same
   selectors — into the 1001-1040px gap. `body.ioc-site` is not a specificity
   workaround here (nothing below competes with a `:has()` clause the way Y's
   fix did): it exists only so this sheet's own consistency rule (every
   selector prefixed) holds, and it costs nothing since these rules do not
   set `color`.
   ============================================================ */
@media(max-width:1040px){
  body.ioc-site .ioc-header .nav,
  body.ioc-site .ioc-header .search-open,
  body.ioc-site .ioc-header .top-cta{display:none}
  body.ioc-site .ioc-header .mobile-toggle{display:grid}
  body.ioc-site .ioc-header .header-row{height:64px}
  body.ioc-site .ioc-header .mega{display:none}
  body.ioc-site .ioc-localnav{top:64px}
}

/* ============================================================
   P · Form field treatment + the Home enquiry band (HOME-FIX-PLAN F41, plus
   the enquiry `<figure>` sizing the plan never assigned to any fix — F33 was
   typed CONTENT+WIRING with no STYLE half, and the figure's geometry is
   inseparable from the column proportions F41 does own).

   SCOPE, DECIDED PER RULE AGAINST THE 23 COMPS RATHER THAN ASSUMED. F41 is
   headed "form rules site-wide", which is true of some of it and false of the
   rest; each block below states which, and what was counted:

   ① FIELDS — site-wide. 53 of the 55 `<input type=text|email>` in the pack
      are `height:48px; border:0; border-bottom:1px solid …; background:#f9fafb`
      (48 with an `#e0e0e0` rule and `padding:0 14px`, 5 — Home's — with
      `#8d8d8d` and `0 16px`). Underline-only is the pack's field, not Home's.
      `#8d8d8d` IS `--ioc-border-strong`; `#f9fafb` IS `--ioc-g10` under the v6
      skin (`site-skin-contract.spec.ts:211`), so no token is minted.
   ② SUBMIT — site-wide. 18 of the 20 comp submit buttons are `height:48px`.
      Live measures 56 because `div.showcase .btn` carries `min-height:3.5rem`
      (infoc-cms.css:2013), so the height needs the min-height reset with it.
   ③ FORM BOX, RADIO CARDS, BAND GROUND, COLUMN SPLIT, FIGURE — Home only.
      Counted, not assumed: the bordered radio card (`border:1px solid #e0e0e0`
      + `gap:10px`) appears in 3 comp markups, ALL of them Home's; another page
      draws its 4 radios on a flat `#f9fafb` with no border at all. 15 of the
      17 `#contact` sections in the pack are `background:#ffffff` — only Home's
      is `#f9fafb`. And the `.9fr 1.1fr` split and `padding:30px 30px 28px` box
      each appear exactly once, in Home. A site-wide rule for any of these
      would repaint 15+ pages away from their own comps.

   THE HOME SCOPE HOOK is `[data-block-instance^="p-home-"][data-variant-id=
   "B-17-V10"]` — this page's instance of this variant, both attributes emitted
   on the section by the block mapper. It is a page scope with no page selector
   and no `content.json` edit, which matters because `tone:"soft"` (the field
   that would otherwise carry the band ground) lives in content and this task
   does not own that file. `.ioc-block` is deliberately NOT part of any
   selector here: section rhythm and measure are a different fix's surface.

   The obvious hook, `[data-form-id="home-router"]`, was tried first and is
   WRONG — measured, not guessed. Before `bindInfocForms` runs, the section
   really does read `data-form-id="home-router"`; after it runs, that same
   attribute reads the bound DOCUMENT'S ID (`data-form-id="2"`), and the only
   node still carrying the preset name is the `<form>` itself. So a sheet
   written against it silently styles everything INSIDE the form (the radio
   cards did land) and nothing above it (the band, the split, the box and the
   figure did not) — which reads as a specificity bug and is really one
   attribute meaning two different things at two different times.

   T17: every padding/margin/gap below is on the 4/8/12/16/24/32/48 scale.
   The comp's off-scale values snap with ties rounding UP, the CMS-D-117
   convention — `30px 30px 28px` -> `32px`, `margin:0 0 20px` -> `24px`,
   `gap:56px` -> `48px`. The ONE exception is the radio grid's `gap:10px`,
   which rounds DOWN to 8px for a reason stated at that rule. `height`,
   `min-height`, `max-width` and `grid-template-columns` are not spacing
   properties (§N), so 48px/170px/380px/186px/.9fr/1.1fr stay verbatim.
   ============================================================ */

/* ① fields — GEOMETRY ONLY. The underline treatment that used to live here
   (`border:0;border-bottom:1px;background:var(--ioc-g10)`) and its matching
   `border-bottom-color` focus swap are DELETED, because they had not painted
   anything for a long time: section AD below declares the boxed treatment at
   the SAME (0,2,2) specificity and simply comes later in the file, so it won
   on source order alone. The comment claiming "underline-only, site-wide"
   went with them — it was the most misleading line in this sheet, describing
   a treatment no visitor has ever seen.
   The two rules that follow are the ONLY source of the 48px control height
   and its 16px inline padding anywhere in the concat. They stay. */
body.ioc-site .ioc-field input,
body.ioc-site .ioc-field select{height:48px;padding:0 16px}
body.ioc-site .ioc-field textarea{padding:12px 16px}

/* ② submit — 48px. `height` alone loses to `div.showcase .btn`'s min-height. */
body.ioc-site .ioc-form-actions .btn{height:48px;min-height:48px;padding-block:12px}

/* ③a Home enquiry band ground + column split (Home.dc.html:324-325). The comp
   gives the FORM the wider column; the kit's `.ioc-nav-split` 1.3fr/1fr gives
   it to the copy, which is the inversion F41 measured at 768.688/591.312.

   THE GROUND IS WHITE, NOT THE COMP'S `#f9fafb` — owner ruling 2026-08-17,
   overriding this block's own ③ scope note. The comp value was faithful and
   WRONG IN CONTEXT: the section immediately above it on the live page is the
   B-10-V21 capability-gap band, authored `tone:"soft"` in content.json, which
   resolves to the SAME `--ioc-g10`. Measured live, both sections computed
   `rgb(249,250,251)`, so the page's last two bands fused into one continuous
   grey slab with the section boundary invisible — a defect the comp could not
   show, because the comp renders one page section at a time.

   White is also the pack's own majority: ③ above counts 15 of the 17 `#contact`
   sections at `background:#ffffff` and Home as the lone `#f9fafb`. So this
   moves Home ONTO the pack's dominant treatment rather than away from it.

   SUPERSEDED — owner ruling 2026-08-21 reverses 2026-08-17: the band reads
   its ground from the STORE again (`tone:"soft"` on the home block →
   `.ioc-block.soft` → `--ioc-g10` = the comp's #f9fafb). Both of the white
   ruling's reasons have since dissolved: the form renders inside its own
   white card now (`form.ioc-form`, the concurrent session's forms pass), so
   `.ioc-field`'s `--ioc-g10` fill sits on white card, never grey-on-grey;
   and F35's Home-scoped `.ioc-block.soft{border-top}` hairline now draws
   the boundary the 08-17 measurement found missing, so two adjacent soft
   bands no longer fuse into one slab (measured again on this reversal —
   the seam is the hairline, exactly the comp's own #contact border-top).
   No pin replaces it: the store decides the ground (CMS-D-081). */
/* ③a-ii STANDARDISED ONTO EVERY ENQUIRY BAND (owner ruling 2026-08-22,
   CMS-D-176). ③a and ③d/③e below were authored for Home and scoped
   `[data-block-instance^="p-home-"]`, so the SIXTEEN B-17-V09 inner-page
   bands and `/solutions` — which carries Home's OWN variant, B-17-V10 —
   kept the kit base and every defect ③ was written to remove. Measured at
   1440 on 2026-08-22: all seventeen computed `723.469px 556.516px` with a
   16px gutter, i.e. the copy column WIDER than the form on a band whose
   only job is the form, the exact inversion ③a records F41 measuring.

   THE SELECTOR CHANGE IS `^="p-home-"` -> BARE ATTRIBUTE PRESENCE, which
   keeps the specificity at (0,4,x) — byte-identical weight to what shipped.
   Dropping the instance term entirely would have computed (0,3,2) on the
   `h2` rule and LOST to `body.ioc-site .infoc-cms:has(.ioc-hero-v6)
   .ioc-head h2` (:1851, also (0,3,2), later in source), silently reverting
   Home's own 40px/800 heading on every page carrying a v6 hero. Two
   attribute terms cost nothing and remove that whole class of surprise.

   B-17-V07 (`/contact`, `#enquiry`) is DELIBERATELY EXCLUDED: its split is
   368/912 — already form-wider — and it is governed by `#enquiry
   .ioc-nav-split` (infoc-cms.css:1618, an ID at (1,1,0)) which no rule here
   would reach anyway. Its rail measured 306px inside a 368px column, bounded
   by the column rather than ragged. Nothing there is broken; it is named so
   the omission reads as a decision, not an oversight. */
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-nav-split,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-nav-split{grid-template-columns:.9fr 1.1fr;gap:48px}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-form{padding:32px}

/* ③b the enquiry figure — the gap the plan never assigned. `.ioc-media-fig img`
   (infoc-cms.css:1370) hands every B-05/B-17 figure `aspect-ratio:5/4`, which
   in a 760px column renders 758x606 against the comp's 380x170. The kit sheet
   is byte-pinned (C1), so both dimensions are re-stated here instead. A
   definite width AND height already suppress `aspect-ratio` per spec;
   `aspect-ratio:auto` is written anyway so the intent survives a future edit
   that makes one of them `auto` again. The comp's figure carries no frame. */
  /* CMS-D-176 widens this to every B-17-V10 instance and NOT to V09. The
   figure is a V10 slot: of the eighteen bands this section now governs,
   exactly two carry a `.ioc-media-fig` (Home and `/solutions`) and they are
   precisely the two V10 placements — so the variant IS the predicate, no
   `:has()` needed. `/solutions` measured 723x579 before this rule: the 5/4
   base crop against a 723px column, 6.5x the pixel area of Home's 380x170
   and the largest element in a band whose subject is the form. */
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-media-fig{max-width:380px;margin:0 0 24px;border:0}
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-media-fig img{aspect-ratio:auto;height:170px;object-fit:cover}

/* ③d the copy column header — the renderer reuses `.ioc-head`, which is the
   R5 SECTION header: two end-aligned tracks, heading beside lede
   (infoc-cms.css:1146), a full-width-band pattern. Inside this split's .9fr
   column (~526px at 1440) those two tracks compute ~277px + ~185px, so the
   heading rags one word per line with the lede floating beside it — measured
   live 2026-08-17 before this rule. The comp lays this column out STACKED
   (Home.dc.html:326-329): kicker, then a 40px/800/-.038em heading capped at
   20ch, then the lede below at 50ch, flowing into the ③b figure. One track
   restores that; the base `.ioc-head` bottom margin stands in for the lede's
   own trailing margin.
   T17: `margin:0 0 16px` snaps the comp's `0 0 14px` (tie, rounds UP per
   CMS-D-117); 24px snaps the lede's 26px DOWN (nearest step, 2 away against
   6); `max-width`/`font-size`/`letter-spacing` are not spacing properties
   (§N), so 20ch/50ch/40px/-.038em stay verbatim. */
  /* CMS-D-176: the same reasoning holds on all eighteen bands, and the
   measurement is the same one ③d already records — inside a split column
   the R5 two-track header puts the lede BESIDE the heading and bottom-aligns
   it. Measured 2026-08-22 on the seventeen unscoped bands: `.ioc-head`
   computed `399.516px 266.359px` with `align-items:end`, so the lede began
   at x=529 in a 723px column and its baseline sat on the h2's — reading as
   a stranded fragment in the gutter rather than as the heading's lede. The
   R5 pattern is correct for a FULL-WIDTH band header (WIRING.md §5.3) and
   wrong inside a split column; that is a placement rule, not a Home rule. */
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-head,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:0;margin-bottom:24px}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-head h2,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-head h2{margin:0 0 16px;font-size:40px;font-weight:800;letter-spacing:-.038em;max-width:20ch}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-sh-lead,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-sh-lead{max-width:50ch}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-sh-lead p,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-sh-lead p{margin:0}

/* ③e the contact rail + the form card — the band's two remaining comp gaps
   (design-review 2026-08-21, Home.dc.html §Enquiry: the pitch column's
   contact list at :276-281, the form card at :283). LEFT: the comp runs one
   380px rail below the lede — the ③b figure and the phone/email list share
   a width, each row 15px/700 ink on its own hairline (border-top on the
   list, border-bottom per row), 17px accent icons. The kit base
   `.ioc-rea-direct` (infoc-cms.css:1612-1615) is the compact 14.5px/600
   variant sized for the B-17-V09 solution bands and left this rail
   unbounded — measured 561px at 1440 against the figure's 380, the ragged
   right edge the owner flagged. RIGHT: the comp draws the form as a white
   bordered card (30px padding); the mount ships chrome-less, so the fields
   float directly on the band ground. Scoped to the home instance — the 16
   B-17-V09 placements keep the base treatment.
   T17: `16px 0` snaps the comp's `15px 2px` row padding (15 ties UP per
   CMS-D-117, 2 snaps to 0); 32px snaps the card's 30px UP; gap 12 is the
   comp's own step; font-size/icon width are §N non-spacing, verbatim. */
  /* CMS-D-176 carries the boxed rail to all eighteen bands. ③e's own text
   above already names the defect as GENERAL, not Home's — it says the kit
   base "is the compact 14.5px/600 variant sized for the B-17-V09 solution
   bands and left this rail unbounded ... the ragged right edge the owner
   flagged". It then fixed Home only. Measured 2026-08-22 on the other
   seventeen: 723px of hairline over roughly 245px of text.

   WHY 380px WHERE THERE IS NO FIGURE (owner ruling 2026-08-22). On Home the
   380 is DERIVED — it matches the figure directly above it. The sixteen V09
   bands carry no figure, so nothing there derives it and the number would
   otherwise be invention (§8 rule 1). The ruling makes 380 the house rail
   width outright: one component, one size, every page. That is a stated
   decision, not a measurement, and it is recorded as one. */
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-rea-direct,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-rea-direct{max-width:380px;margin-top:0;padding-top:0;gap:0;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-rea-direct a,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-rea-direct a{padding:16px;gap:12px;border-bottom:1px solid var(--ioc-border-subtle);font-size:15px;font-weight:700}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-rea-direct a:last-child,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-rea-direct a:last-child{border-bottom:0}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-rea-direct a svg,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-rea-direct a svg{width:17px;height:17px}
/* The FINDING-001 mount card is RETIRED (owner, 2026-08-21): the rendered
   `form.ioc-form` inside the mount now carries its own identical card
   (1px hairline, 32px inset), so the mount rule drew a second nested
   frame around it — the mount stays chrome-less and the form IS the box. */

/* ③f the CONTACT RAIL becomes a COMPLETE BOX (owner ruling 2026-08-21,
   superseding the comp's open-rule treatment — the same authority lane as
   §W/§X): ③e above closes into the `.ioc-matrix` joined-box idiom — outer
   hairline, surface ground, one internal divider, the last row closed by
   the frame.
   The hero credentials strip took the same box for one commit (42548b5),
   the owner rejected it the same day, and the V08-chips conversion landed
   once the concurrent session's wave committed: B-01-V20 renders
   chipsLabel + four fixed-binding chips now (gen-hero-chips.mjs), and the
   ioc-hero-v6-cred-* rules retired with the strip. */

/* ③c route radios — separately framed cards on the comp's TRACK WIDTH, not on
   its literal `repeat(3,1fr)` (Home.dc.html:340).
   The kit draws this group as one joined table (outer border + `gap:0` +
   `box-shadow` hairlines); the comp draws separate cards, so the outer frame
   and the shadow hairlines come off in the same breath as the gap goes on —
   a gap under the kit's treatment would leave four stray offset hairlines.

   WHY A TRACK MINIMUM RATHER THAN A COLUMN COUNT. D1 (comp 3 routes vs the
   preset's 4) is an open human ruling, so the count is not the sheet's to
   state. 186px IS the comp's own card width, arithmetic not invention: its
   form column is 1.1/2.0 of (1280 - 64 padding - 56 gap) = 638px, less its
   60px box padding = 578px, less two 10px gaps, over three cards = 186px. So
   `repeat(auto-fit,minmax(186px,1fr))` reproduces the comp EXACTLY — a single
   row of three — the moment D1 resolves to three, and today's four fall to
   3 + 1 rather than being crushed.

   THE ALTERNATIVE WAS MEASURED AND REJECTED, not assumed. `grid-auto-flow:
   column` does give one row for any count, and it was tried first: with the
   rendered FOUR in the live 576px form column it yields 138px cards whose text
   column is 82px against a 76px label and an 85px longest description word, so
   the cards either overflowed onto their neighbours (scrollWidth 134 against
   clientWidth 100 at a 1040px viewport) or, with `overflow-wrap:anywhere`,
   shattered words mid-character ("Consultin/g", "professional/s"). A layout
   that breaks words is not "one row", it is the two-row defect wearing a
   disguise. Screenshotted at 1440 before the change was reverted.

   T17 NOTE — THE GAP ROUNDS DOWN, against the tie convention. The comp's 10px
   is equidistant between 8 and 12 and CMS-D-117 breaks ties upward, which
   would be 12px. It is 8px here because the choice is not cosmetic: three
   186px tracks plus two gaps must fit 576px, so a 12px gap (582px) collapses
   the comp's three-across to two and an 8px gap (568px) does not. The scale
   decides which values are legal; the layout decides which legal value.

   Stacks at the same 620px the kit already stacks `.ioc-form-grid` at
   (infoc-cms.css:1423), so both halves of the form reflow together. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choices{grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:8px;border:0;background:transparent;overflow:visible}
/* --- CMS-D-124 ③ · FOUR routes, so defer to the kit's own four-option rule.
   The 186px track above is derived from "the comp's three-across", and D1 has
   now ruled the route set stays at FOUR (`consulting/academy/talents/support`):
   the register governs fields, and `support` is a real destination the comp's
   3-radio markup would silently drop. Four 186px tracks cannot fit the 576px
   form column, so auto-fit lays out 3 + 1 — no overflow (measured 0px at
   1440/1280/1024/768/390), but an orphan on a second row.

   The frozen kit already answers this exactly, and it is answered by CONTENT
   COUNT rather than by breakpoint: `.ioc-choices:has(>:nth-child(4):last-child)`
   → `repeat(2,minmax(220px,1fr))` (infoc-cms.css:1904), i.e. a balanced 2x2.
   That rule is live at 1024 today and is only lost above it because the
   attribute-scoped selector above outranks it. This restores it at the same
   specificity instead of re-deriving a track width — the layout follows the
   number of routes, so if D1 is ever revisited the grid follows without a
   second edit.

   `minmax(0,1fr)` not the kit's `minmax(220px,1fr)`: the same overflow lesson
   §Y records — a floor wider than half the container reintroduces the spill
   this whole block exists to prevent. Two tracks in 576px measure 284px each,
   comfortably above the 220px the kit was protecting. No new spacing value:
   the 8px gap above is unchanged and `grid-template-columns` is not a spacing
   property (§N). --- */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choices:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* The base tile rule that sat here was a byte-for-byte duplicate of section
   AD's, kept only because AD did not exist when this variant was written.
   Deleted: AD now carries border, box-shadow and padding for every tile on
   the site, and the kit already supplies `gap:12px` (infoc-cms.css:1927).
   The `>span` rule below and the container grid above have NO site-wide
   equivalent and stay. */
/* `.ioc-choice` is a flex row whose text block is an ordinary flex item, so its
   automatic minimum size is min-content and it REFUSES to shrink. Measured, not
   assumed: at a 1040px viewport the card's clientWidth was 100 and its
   scrollWidth 134 — the label and its `small` were spilling 34px across the
   neighbouring card, which the kit's joined-table `overflow:hidden` used to
   clip and separate cards no longer can. `min-width:0` restores wrapping. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choice>span{min-width:0;overflow-wrap:break-word}
/* The hover and checked rules that sat here are deleted, and this is a fix,
   not a tidy-up. They hard-coded `--ioc-blue` where section AD uses
   `--ioc-accent` (CMS-D-133), so the home enquiry form was the one form on
   the site that would NOT shift with a family scope. They also disagreed
   with AD on the checked language itself: 5% ground and no inset ring here
   against AD's 8% and a 1px ring everywhere else, at a specificity AD could
   not reach. One tile, one selected state, one token. */

/* --- ③e SIMPLIFY + BOLD, owner ruling 2026-08-17 · VISUAL ONLY ---
   Same Home hook, same field set. The owner chose the visual-only reading
   explicitly over two structural ones, so NOTHING here removes a field, a
   route or a line of copy: the `home-router` preset, `forms.json` and
   `content.json` are untouched and no re-seed is implied.

   WHAT WAS ACTUALLY WRONG, measured live at 1440 before these rules:
   ① the form spoke at ONE WEIGHT. Field labels, the fieldset legend and the
      route titles all computed 13-15px at weight 600, so nothing led. A form
      with no strongest element makes the reader parse it linearly.
   ② the field underline was `--ioc-border-strong` (#8d8d8d) — a mid grey that,
      under ③a's old grey band, sat on grey fill and read as almost nothing.
   ③ the submit was a 48px shrink-to-fit button floating mid-column, weaker
      than the four bordered route cards directly above it.

   Two levels, not one: labels/legend lead at 700, the route SUB-lines drop to
   `--ioc-g70`. That is the simplification — it is a hierarchy, where before
   there was a flat field of near-equal weights. Nothing is hidden.

   T17: no padding, margin or gap is introduced or changed anywhere in this
   block. `font-size`, `font-weight`, `height`, `min-height`, `width` and
   `border-width` are not spacing properties (§N), so every value here is
   outside the scale's remit by construction rather than by rounding. */

/* ③e-i labels lead — 14/700 ink, against the route titles' 16/700. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-field>label,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choicegroup>legend{font-size:14px;font-weight:700;color:var(--ioc-text-primary)}

/* ③e-ii route title up, route sub-line back — the one pair that carries the
   hierarchy. `small` keeps its size; only its colour recedes.

   `.ioc-choicegroup:not(.ioc-consent)` NAMES WHICH CHOICE GROUP THIS MEANS, and
   that qualifier is a bug fix, not tidying (owner-reported 2026-08-19). Home's
   form has TWO choice groups — the four ROUTE cards this rule was written for,
   and the single PDPA consent tick — and an unqualified `.ioc-choice b` swallowed
   both, so the agree line rendered at 16px against §T's 12.5px small print. It
   outranked §T (0,4,1 against 0,3,1), and being scoped to `p-home-` as well as
   the variant it hit exactly one surface in the site: /solutions runs the SAME
   B-17-V10 and was always correct, which is why nothing else ever looked wrong.
   Measured after the fix at 41 consent ticks over 28 routes, all 12.5px.
   Fixed HERE rather than by raising §T's specificity, because §T is the consent
   contract and a block rule that has to be out-shouted by it is a rule that
   never said what it meant. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choicegroup:not(.ioc-consent) .ioc-choice b{font-size:16px;font-weight:700}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choice small{color:var(--ioc-g70)}

/* ③e-iii the field rule — 2px ink, replacing ① site-wide's 1px #8d8d8d. The
   fill stays `--ioc-g10`: against ③a's new white ground it finally reads, so
   removing it would undo the contrast the ground change just bought. Focus
   still swaps the COLOUR only (the ① focus rule), so the 2px weight survives
   focus and the state change stays a hue change, not a jump in thickness. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-field input,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-field select,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-field textarea{border-bottom:2px solid var(--ioc-text-primary)}

/* ③e-iv the submit becomes the form's terminal element: full column width,
   56px, 700. It must out-weigh the four route cards above it, which it did
   not at 48px/600 shrink-to-fit. `min-height` is restated for the same
   `div.showcase .btn` reason ② states — `height` alone loses to it. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-form-actions .btn{width:100%;height:56px;min-height:56px;font-size:16px;font-weight:700}

/* ============================================================
   Marketplace quote form — compacted (owner ruling 2026-08-26).

   SCOPED TO ONE PAGE ON PURPOSE. The owner was offered the same treatment
   site-wide across all ~17 form mounts and chose this form only, so every
   selector below carries `[data-block-instance^="p-marketplace-"]`. That is
   the same page-scoping `p-home-` uses forty lines above, and it means no
   other form on the site moves.

   THE FORM IS THE PAGE'S LAST STEP and it ran 942px on production — a visitor
   who has just read 26 plan tiles then meets a full screen of chrome before
   the field they came to fill. This takes back roughly a quarter of that
   height without removing a single field or shortening a label.

   T17: only `gap` is a spacing property here, and both values (4px, 12px) are
   on the DESIGN.md scale. `height`, `min-height` and `font-size` are not
   spacing properties (§N) — the `p-home-` block above states the same, and
   the gate's infoc-v6.css ceiling is unmoved at 27.
   ============================================================ */

/* ① The controls. 48 → 40px is the single biggest line here: it is paid once
   per ROW, and the form has six of them. The 16px horizontal padding stays —
   shrinking a control's height and its inset together is what makes a compact
   form feel cramped rather than tidy. */
body.ioc-site [data-block-instance^="p-marketplace-"] .ioc-field input,
body.ioc-site [data-block-instance^="p-marketplace-"] .ioc-field select{height:40px}
body.ioc-site [data-block-instance^="p-marketplace-"] .ioc-field textarea{min-height:88px}

/* ② The two gaps. `.ioc-field`'s 8px is the label→control gap and reads as
   slack at 13px/600; the grid's 16px is the row gap. */
body.ioc-site [data-block-instance^="p-marketplace-"] .ioc-field{gap:4px}
body.ioc-site [data-block-instance^="p-marketplace-"] .ioc-form-grid{gap:12px}

/* ③ THE ROW THE DOCUMENT ALWAYS MEANT TO PAIR.
   `markup.ts` emits `<div class="ioc-field full">` for EVERY select
   (markup.ts:438, hard-coded), so `billing_term` takes a whole row on its own
   while `renewal_date` sits half-empty beside nothing. The form DOCUMENT says
   both are `width: 50` — it always intended them side by side — but that
   field is never read: `width` appears exactly once in markup.ts, on a
   progress bar. So the store is inert and the layout is decided by TYPE.

   Named to `billing_term` rather than applied to every `.full:has(select)`,
   because `licences_today` is the form's opening question and SHOULD keep its
   own row. This pairs the two optional licensing questions and removes one
   row; it does not re-flow the rest of the form.

   The proper fix is to make `markup.ts` honour the document's `width` — that
   closes a real CMS-D-081 dangling store — but it is a global markup change
   affecting all 17 mounts, which is exactly the scope the owner declined. */
body.ioc-site [data-block-instance^="p-marketplace-"] .ioc-field.full:has(select[name="billing_term"]){grid-column:auto}

/* ④ Control text. 16px is kept BELOW 768px and reduced only above it: iOS
   Safari zooms the viewport whenever a focused input is under 16px, so a
   smaller font here would shrink the form on desktop and hijack the page on
   every iPhone that taps a field. Desktop-only is the whole point. */
@media(min-width:768px){
  body.ioc-site [data-block-instance^="p-marketplace-"] .ioc-field input,
  body.ioc-site [data-block-instance^="p-marketplace-"] .ioc-field select,
  body.ioc-site [data-block-instance^="p-marketplace-"] .ioc-field textarea{font-size:14px}
}

@media(max-width:860px){
  /* The kit collapses `.ioc-nav-split` here (infoc-cms.css:1306) with a bare
     `.ioc-nav-split`; the override above is (0,3,1) and would otherwise hold
     the two columns open past the breakpoint.

     `minmax(0,1fr)` rather than the kit's bare `1fr` — the §Y trap again (see
     the tabs rule at §"V10 sidebar" for the mechanism). This selector is
     (0,3,1) and therefore outranks the general `.ioc-nav-split` repair below,
     so leaving it a bare `1fr` would have re-armed the defect on the home
     enquiry band alone while every other page was fixed. */
    /* CMS-D-176 widened the override above from Home's instance to both
     enquiry variants, so this guard widens with it IN THE SAME BREATH. It
     is not optional bookkeeping: the override is (0,4,1) and the general
     repair below is (0,2,1), so a V09 band left out of this list would hold
     TWO columns open at 320px on sixteen inner pages — the WCAG 2.2 SC
     1.4.10 failure the repair below exists to prevent, re-armed on more
     pages than it ever affected. */
  body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-nav-split,
  body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-nav-split{grid-template-columns:minmax(0,1fr)}
}

/* --- `.ioc-nav-split` REFLOW REPAIR (WCAG 2.2 SC 1.4.10), owner ruling
   2026-08-17. The kit's own mobile collapse (infoc-cms.css:1306) is a bare
   `1fr`, and the kit sheet is byte-pinned (C1), so the repair is stated here.

   Measured on /academy at 320px: the collapsed track computed 292.609px
   inside a 256px content box, carrying `.ioc-head` and everything under it
   out with it. With this and the tabs rule, that page's
   documentElement.scrollWidth goes 364 -> 320 and the reachable
   window.scrollX goes 5 -> 0.

   SCOPED TO THE COLLAPSE, deliberately. The kit sheet carries ~20 of these
   bare `1fr` mobile collapses and they are all the same latent trap, but only
   the two repaired here were MEASURED to overflow. A blanket rewrite of all
   twenty would be a change of the same size as the audit that has not been
   done — and `minmax(0,1fr)` fixes the TRACK, not a child that cannot shrink,
   so it is not a guaranteed win everywhere it is applied. The rest stay
   latent and named, not silently swept. §Y repaired a third instance
   (`.footer-cta-grid`) the same way and for the same reason. */
@media(max-width:860px){
  body.ioc-site .ioc-nav-split{grid-template-columns:minmax(0,1fr)}
}

/* --- HERO CTA LABEL, the last 320px contributor (same ruling). Not a grid
   trap this time and worth stating plainly, because the button LOOKS fine:
   `.ioc-actions .btn` measured 256px wide — correctly constrained — while its
   own scrollWidth was 293. The content was spilling past the button's edge,
   which is why the element that surfaced in the overflow scan was the 18px
   arrow `<svg>` sitting at x=307.6 on a page 320 wide, not the button.

   CAUSE: `white-space:nowrap` plus `justify-content:space-between` and a 40px
   gap. On /solutions the label is "Request a roadmap discussion" — 28
   characters that cannot wrap, so at 320 the text alone claims ~195px and the
   gap and glyph have nowhere to go. Trimming the gap does NOT fix it: 40 -> 8
   still leaves ~261px against a 256px button. The label has to be allowed to
   wrap.

   460px, not 320px: the failure is a function of LABEL LENGTH, not of the
   WCAG target width, and a long CTA runs out of room well before 320. Above
   it every one of these buttons still fits on one line, so the nowrap pill
   the design intends is untouched where it works.

   T17: `gap:16px` is a scale step. */
@media(max-width:460px){
  body.ioc-site .ioc-actions .btn{white-space:normal;gap:16px}
}
@media(max-width:620px){
  body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choices{grid-template-columns:1fr}
  /* This bare `.ioc-choices` rule HAS NEVER APPLIED since CMS-D-124 added the
     `:has(>:nth-child(4):last-child)` 2x2 above it. `:has()` takes the
     specificity of its most specific argument, so that selector scores
     (0,3,1)+(0,2,0) and outranks this one — a media query does not add
     specificity, so narrowing the viewport changed nothing.

     Measured at a 390px viewport before this line: the grid stayed
     `126px 126px`, each card's text span computed 64px wide, and all four
     route titles shattered mid-word — "Consult/ing", "Academ/y",
     "Gatewa/y", "custom/er". This is exactly the failure §③c's own comment
     describes and rejects ("a layout that breaks words is not 'one row', it
     is the two-row defect wearing a disguise"); it simply reappeared one
     breakpoint lower when the 2x2 rule was introduced to solve the orphan
     at 1440.

     Matching the specificity rather than raising it: same selector, so
     source order decides, and this block is last. */
  body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choices:has(>:nth-child(4):last-child){grid-template-columns:1fr}
}

/* ============================================================
   Y · 320px reflow (WCAG 2.2 SC 1.4.10) — the home-band footer CTA
   (`.footer-cta`/`.footer-action`, the embedded governed enquiry form)
   overflowed horizontally on every page below ~460px, measured at
   documentElement.scrollWidth 524px against a 320px viewport.

   ROOT CAUSE, confirmed live (not guessed): infoc-cms.css:565's
   `@media(max-width:900px){.ioc-footer .footer-cta-grid{grid-template-
   columns:1fr}}` is a BARE `1fr` track. A `1fr` track's automatic minimum
   size is `auto` (its content's max-content width), not zero — CSS Grid
   §7.2.3 — so the track grows to fit `.footer-action`'s embedded
   `<form class="ioc-form">` (442px of non-wrapping radio/field content)
   instead of shrinking to the 305px column the grid actually has. That
   sheet is sha256-pinned (CMS-D-054) and cannot be edited; `minmax(0,1fr)`
   is the standard, non-destructive correction (same track proportions,
   real zero minimum) and belongs here, on the same selector, at the same
   breakpoint, so it simply wins the cascade by SOURCE ORDER (this sheet
   loads last) without touching specificity or fighting the frozen rule.
   ============================================================ */
@media(max-width:900px){
  body.ioc-site .ioc-footer .footer-cta-grid{grid-template-columns:minmax(0,1fr)}
}

/* A THIRD flavour of the same class, this one flexbox not grid: `.ioc-field`
   is `display:flex;flex-direction:column` (infoc-cms.css:1415), whose
   default `align-items:stretch` should size a `<select>` child to the
   field's own width — except flex items ALSO default to `min-width:auto`,
   which for a `<select>` means its intrinsic minimum is its LONGEST option's
   rendered width, not zero. `route_detail` ("Solution area") carries
   "Cloud, modern work and security" as an option; on the contact-router
   preset this alone pushed the B-17 form (and the whole page) past a 320px
   viewport even after the grid-track fixes above — confirmed by bisection
   (hiding just this one `<select>` was what dropped scrollWidth back to the
   viewport width). `min-width:0` is the standard release valve for exactly
   this default; the closed control still shows the selected option (native
   `<select>` truncates rather than wraps), and its own popup is unaffected. */
body.ioc-site .ioc-field select{min-width:0}

/* A FOURTH: `#enquiry .ioc-nav-split` (infoc-cms.css:1618 — the enquiry
   section's aside+form split, `minmax(18rem,23rem) minmax(0,1fr)`) collapses
   at infoc-cms.css:1619 (`@media(max-width:900px)`) to a bare
   `grid-template-columns:1fr` — the same missing-`minmax(0,…)` shape as the
   footer-cta-grid fix above, just on a different selector. Confirmed live on
   Contact (`#enquiry`): `.ioc-nav-split` computed a single 326px track while
   its own box was only 241px wide, so the form column (needing 324px for
   its fields) never actually got the page's width, and the excess bled out
   as page-level horizontal scroll. `body.ioc-site` clears the frozen rule's
   `#enquiry .ioc-nav-split` (1,1,0) unambiguously (1,2,0). */
@media(max-width:900px){
  body.ioc-site #enquiry .ioc-nav-split{grid-template-columns:minmax(0,1fr)}
}

/* A FIFTH, and — walked exhaustively down this one pathway (the B-17
   enquiry form's own box, `.ioc-nav-split` > the form column >
   `.ioc-form-grid` > the field row itself) — the last one on it: once
   `.ioc-nav-split` correctly stopped over-growing, its form column was left
   with genuinely less room (191px) than `.ioc-form-grid` still claimed
   (276px), for the identical reason again — infoc-cms.css:1414's
   `grid-template-columns:1fr 1fr` collapses at infoc-cms.css:1423
   (`@media(max-width:620px)`) to a bare `1fr`. This is the same class found
   four times above; `grep -c "grid-template-columns:1fr}" infoc-cms.css`
   returns far more hits sitewide, most on blocks with no unbreakable
   content wide enough to ever trigger the auto-minimum default — the B-17
   enquiry form (this file's own `<select>` and 4-choice radio grid) is what
   surfaces it in practice, which is why the fix stops at the boundary of
   that one form rather than pre-emptively rewriting every occurrence. */
@media(max-width:620px){
  body.ioc-site .ioc-form-grid{grid-template-columns:minmax(0,1fr)}
}

/* SECOND layer of the same overflow, exposed only once the grid track above
   stops force-growing: the "journey" field (`one/convert-form`'s 4-option
   route picker, seeded on the home band) is a `.ioc-choicegroup full` >
   `.ioc-choices` radio grid. infoc-cms.css:1904's
   `.ioc-choices:has(>:nth-child(4):last-child){grid-template-columns:
   repeat(2,minmax(220px,1fr))}` sits OUTSIDE any media query — and, measured
   directly (a first attempt at overriding it with a bare `.ioc-choices`
   selector here was silently outranked), its TRUE specificity is (0,3,0):
   `:has()`'s own specificity is that of the most specific complex selector
   in its argument, and `> :nth-child(4):last-child` carries TWO
   pseudo-classes, not one. That beats the frozen sheet's OWN intended mobile
   collapse, `@media(max-width:640px){.ioc-choices{grid-template-columns:
   1fr}}` at infoc-cms.css:1965 — (0,1,0) — at every viewport: a 4-option
   group never actually collapses to one column. Two 220px-minimum tracks
   (440px) is what does not fit a 320px viewport. This repeats the frozen
   rule's own `:has()` clause so the case matches exactly, prefixed with
   `body.ioc-site` for headroom rather than a bare specificity tie — (0,4,0)
   unambiguously outranks (0,3,0), so this wins on ITS OWN weight, not merely
   on being declared later. */
@media(max-width:640px){
  body.ioc-site .ioc-choices:has(>:nth-child(4):last-child){grid-template-columns:1fr}
}

/* THIRD instance of the SAME bare-`1fr` class, found by re-walking the site
   at 320px after the two fixes above (business-applications, ~30px
   overflow — not the footer, so outside the reported defect's own
   description, but the identical mechanism). infoc-cms.css:1367's
   `.ioc-media{grid-template-columns:1fr 1fr}` collapses to a bare
   `1fr` at infoc-cms.css:1375 (`@media(max-width:860px)`), which is the
   B-11 image/copy band (`.ioc-media-fig` + a copy column) used on multiple
   solution pages — same automatic-minimum defect, same fix. */
@media(max-width:860px){
  body.ioc-site .ioc-media{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   L · B-01-V20 V6 Home hero (HOME-FIX-PLAN F1/F2/F3/F21/F22/F23/F24).
   Deliberately ALL-NEW classes (`ioc-hero-v6-*`), not `.ioc-hero`/`.btn`/
   `.btn-tertiary` — B-01-V08 (the variant this replaces on Home) inherited
   two cascade collisions from those shared classes (F2: `div.showcase h1`
   at 0-1-2 beating `.ioc-hero h1` at 0-1-1; F3: a later same-specificity
   `.btn`/`.btn-tertiary` block winning). A fresh, unshared class tree has
   nothing to collide with — styled once, correctly, here — rather than
   re-fighting a cascade this variant does not use.
   ============================================================ */
body.ioc-site .ioc-hero-v6{background:var(--ioc-surface,#fff)}
/* CMS-D-126 ① — owner-directed right-bleed deviation from Home.dc.html's
   1280-centered hero. The comp caps the hero at 1280 under a 1360 header, so
   ≥1440 viewports show dead gutters both sides and the rotator's landscape
   stills cover-crop hard in a ~545px window. Ruling: the copy column sits on
   the page's alignment spine (track 1 resolves to the same inset the
   sections' `.wrap` gets — (100% − 1360)/2 + 32 since §O's 2026-08-21 spine
   ruling; originally the comp's 1280 grid), and the visual panel takes the
   rest of the row to the viewport edge. The geometry lives in
   grid-template-columns DELIBERATELY: the T17 v6
   scan grades px inside spacing properties (and hard-fails nested math
   there), while grid-template-columns is outside its scope by its own ruling
   (scripts/spacing-gate.mjs — "not spacing"). 668px is the comp's own copy
   track (1216 × 1.1 ÷ 2); calc(50% − 20px) is what makes track 1 solve to
   the grid inset at every width — 20 = 668 − 648. max-width:1920 stops the
   panel going panoramic on ultra-wide monitors: an uncapped window passes
   2.6:1 and starts cropping MORE (top/bottom), defeating the ruling's point. */
body.ioc-site .ioc-hero-v6-wrap{max-width:1920px;margin:0 auto;display:grid;grid-template-columns:minmax(32px,1fr) minmax(0,668px) minmax(0,calc(50% - 20px));gap:0;align-items:stretch}
body.ioc-site .ioc-hero-v6-copy{grid-column:2;padding:clamp(48px,7vw,72px) 48px clamp(48px,7vw,72px) 0}

body.ioc-site .ioc-hero-v6-kicker{margin:0 0 16px;font-family:var(--ioc-mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ioc-blue)}
body.ioc-site .ioc-hero-v6-h1{margin:0 0 24px;font-size:clamp(34px,4.4vw,62px);line-height:1.02;font-weight:800;letter-spacing:-.045em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-hero-v6-accent{color:var(--ioc-blue)}
body.ioc-site .ioc-hero-v6-lede{margin:0 0 32px;font-size:clamp(16px,1.15vw,18.5px);line-height:1.6;max-width:54ch;color:var(--ioc-text-primary)}

body.ioc-site .ioc-hero-v6-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
body.ioc-site .ioc-hero-v6-cta-primary{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 24px;background:var(--ioc-blue);color:var(--ioc-text-on-color,#fff);font-size:16px;font-weight:700;white-space:nowrap}
body.ioc-site .ioc-hero-v6-cta-primary:hover{background:var(--ioc-blue-hover)}
body.ioc-site .ioc-hero-v6-cta-primary:focus-visible{outline:2px solid var(--ioc-blue);outline-offset:2px}
body.ioc-site .ioc-hero-v6-cta-secondary{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 8px;background:transparent;color:var(--ioc-text-primary);font-size:16px;font-weight:600;white-space:nowrap}
body.ioc-site .ioc-hero-v6-cta-secondary:hover{color:var(--ioc-blue)}
body.ioc-site .ioc-hero-v6-cta-secondary:focus-visible{outline:2px solid var(--ioc-blue);outline-offset:2px}
body.ioc-site .ioc-hero-v6-cta-primary svg,
body.ioc-site .ioc-hero-v6-cta-secondary svg{width:15px;height:15px;flex:none}

/* The credentials strip retired 2026-08-21 (owner-directed): B-01-V20's
   platform line renders as the V08 chips row now (kit .ioc-chips,
   infoc-cms.css:1167-1172) — gen-hero-chips.mjs swapped the template and
   the ioc-hero-v6-cred-* vocabulary left with it. The chips need only one
   scoped guard: a chip whose label slot is empty never renders (the kit
   guards tags this way at :1983-1985; the fixed-count bindings make an
   empty fourth slot reachable from admin). */
body.ioc-site [data-variant-id="B-01-V20"] .ioc-chip:has(> span:empty){display:none}

/* -- right column: the rotator panel -- */
body.ioc-site .ioc-hero-v6-visual{grid-column:3;background:var(--ioc-blue);color:var(--ioc-text-on-color,#fff);display:flex;flex-direction:column;position:relative}
body.ioc-site .ioc-hero-v6-slide-img{position:relative;display:block;flex:1;min-height:300px;background-color:var(--ioc-g100)}
body.ioc-site .ioc-hero-v6-slide-img .infoc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The slide dissolve (HeroSlider-standalone.html §2a: `transition:opacity
   1200ms linear`). Layers already stack — the host is `position:relative` and
   every layer is `inset:0` — so the ramp is all that was missing; the rotor
   used to swap one <img>'s src, which is a cut, not a dissolve.

   OPAQUE IS THE DEFAULT AND `is-under` IS THE EXCEPTION, deliberately: the
   server renders exactly one bare <img> for slide 1, so if the transparent
   state were the default that image would be invisible until the runtime
   loaded — a blank hero for anyone on a slow or failed script. The class only
   ever lands on a layer the runtime itself created or is retiring. */
body.ioc-site .ioc-hero-v6-slide-img .infoc-media{opacity:1;transition:opacity 1200ms linear}
body.ioc-site .ioc-hero-v6-slide-img .infoc-media.is-under{opacity:0}
/* The comp stops the rotation under reduced motion (the runtime never starts
   the timer). Manual dot presses still swap, so flatten the ramp too — an
   instant change is the honest behaviour there, not a 1.2s fade. */
@media(prefers-reduced-motion:reduce){
  body.ioc-site .ioc-hero-v6-slide-img .infoc-media{transition-duration:.001ms}
}
body.ioc-site .ioc-hero-v6-slide-body{padding:24px clamp(28px,4vw,40px) 32px}
body.ioc-site .ioc-hero-v6-slide-k{margin:0 0 8px;font-family:var(--ioc-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
body.ioc-site .ioc-hero-v6-slide-t{display:block;font-size:23px;line-height:1.16;font-weight:800;letter-spacing:-.025em;min-height:48px}
body.ioc-site .ioc-hero-v6-slide-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:16px}
body.ioc-site .ioc-hero-v6-slide-link{display:inline-flex;align-items:center;font-size:14.5px;font-weight:700;color:var(--ioc-text-on-color,#fff);white-space:nowrap;border-bottom:2px solid rgba(255,255,255,.22);padding-bottom:4px}
body.ioc-site .ioc-hero-v6-slide-link:hover{border-color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-hero-v6-slide-link:focus-visible{outline:2px solid var(--ioc-text-on-color,#fff);outline-offset:2px}

body.ioc-site .ioc-hero-v6-slide-controls{display:flex;gap:12px;align-items:center}
body.ioc-site .ioc-hero-v6-pause{width:26px;height:26px;border:0;padding:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-hero-v6-pause svg{width:14px;height:14px}
body.ioc-site .ioc-hero-v6-pause:focus-visible{outline:2px solid var(--ioc-text-on-color,#fff);outline-offset:2px}
body.ioc-site .ioc-hero-v6-dots{display:flex;gap:8px;align-items:center}
body.ioc-site .ioc-hero-v6-dot{width:24px;height:24px;border:0;padding:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
body.ioc-site .ioc-hero-v6-dot:focus-visible{outline:2px solid var(--ioc-text-on-color,#fff);outline-offset:2px}
body.ioc-site .ioc-hero-v6-dot [data-dot-mark]{display:block;width:10px;height:10px;background:rgba(255,255,255,.55);transition:width .18s var(--ioc-ease),background-color .18s var(--ioc-ease)}
body.ioc-site .ioc-hero-v6-dot.is-active [data-dot-mark]{width:20px;background:var(--ioc-text-on-color,#fff)}

@media(max-width:1040px){
  /* CMS-D-126 ① — below the collapse the bleed is retired and the comp's
     original single-column geometry returns byte-for-byte: symmetric 32px
     gutters via wrap padding (the desktop gutter moved into track 1, which
     no longer exists here) and auto placement. Mobile is NOT deviated. */
  body.ioc-site .ioc-hero-v6-wrap{grid-template-columns:1fr;padding:0 32px}
  body.ioc-site .ioc-hero-v6-copy{grid-column:auto;padding:clamp(32px,8vw,48px) 0}
  body.ioc-site .ioc-hero-v6-visual{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  body.ioc-site .ioc-hero-v6-dot [data-dot-mark]{transition:none}
}

/* ============================================================
   M · B-03-V20 V6 Platform band (HOME-FIX-PLAN F6/F7/F8/F25/F26/F27 —
   Home.dc.html:232-256). The band's GROUND needs no rule here: the variant's
   root is `ioc-block[[attr:tone_01]]`, so the stored `tone:"dark"` resolves
   through the kit's own `.ioc-block.dark` (infoc-cms.css:1141 -> --ioc-g100,
   which the Appearance typography block sets to the comp's exact #000000).
   That is the whole of F6 — one live binding, no colour declared here.

   Text colour is likewise inherited, not restated: `.ioc-block.dark`'s
   companion rules already paint the kicker (:1152), h2/strong (:1143) and
   paragraphs (:1142) for an ink band. What this section owns is (a) geometry,
   (b) the two places the inherited dark-band colour would be WRONG because
   the rows sit on their own white ground, and (c) two size overrides that
   have to out-specify rules the kit sets for other contexts:

     - `div.showcase h2` (infoc-cms.css:2075, 0-1-2) is 4.7vw = 67.68px at a
       1440 viewport and beats `.ioc-head h2` (:1153, 0-1-1) ON SPECIFICITY,
       not source order — the F2 mechanism. `body.ioc-site .ioc-plat-head h2`
       is 0-2-2 and wins, restoring the comp's 40px.
     - `.ioc-block.dark p` (:1142) is --ioc-g30; the comp's lead is white at
       .85 opacity.
     - the row title sits on `--ioc-surface`, where the inherited
       `.ioc-block.dark strong` white would be invisible.

   BOTH of those last two need MORE specificity than the kit rule alone
   suggests, and a first pass got it wrong in exactly the way §L records:
   `scripts/copy-render-kit-runtime.mjs` HARVESTS every kit colour rule that
   carries a class into `apps/one/public/infoc-site-overrides.css` with a
   `body.ioc-site` prefix, so `.ioc-block.dark strong` (0-2-1) ships a second
   time as `body.ioc-site .ioc-block.dark strong` (0-3-1) — and 0-2-2 loses to
   it. Verified live before the fix: the row titles computed
   rgb(255,255,255) on a rgb(255,255,255) ground, and the lead computed
   rgb(198,198,198). The selectors below are 0-3-2 and 0-4-0 against the
   harvest's 0-3-1. Grade any NEW colour rule in this section against the
   HARVESTED copy, never against the kit source.

   SPACING. The comp's own values are 56px (column gap), 18px (row gap),
   20px (row side padding) and 10/22px head margins — none of them on
   DESIGN.md's scale (4 · 8 · 12 · 16 · 24 · 32 · 48), and
   `v6CssOffScaleCeiling` is shrink-only AND ALREADY SATURATED at 2. Each
   rounds to the nearest scale step (48 · 16 · 24 · 12 · 24), exactly as §J
   did with the utility bar's 20px gaps. The section's own 84/92px vertical
   rhythm is deliberately NOT set here: `.ioc-block` already supplies it, and
   HOME-FIX-PLAN F34 changes that rhythm for every page at once.

   No `.pa`, `.pa-side`, `.pa-fig`, `.pa-rule`, `.pa-links`, `.vh-dtabs` or
   `.vh-dpanel` rule exists or is needed — B-03-V12's fabricated aside and
   relocated industry switcher (F26/F27) have no counterpart in this variant.
   ============================================================ */
body.ioc-site .ioc-plat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
body.ioc-site .ioc-plat-head .ioc-kicker{font-size:11.5px;letter-spacing:.16em;opacity:.7;margin:0 0 12px}
/* The comp's Platform kicker is a bare <p> — no 22px accent dash (:1150). */
body.ioc-site .ioc-plat-head .ioc-kicker::before{display:none}
body.ioc-site .ioc-plat-head h2{margin:0 0 16px;font-size:40px;line-height:1.06;font-weight:800;letter-spacing:-.035em;text-wrap:initial}
/* --- CMS-D-124 ② · the LIVE instance of the ink-ground skin-blindness §H
   closed. These three rules sit on `.ioc-block.dark` (= `--ioc-g100`) and read
   `--ioc-text-on-color`, which is a FIXED `#ffffff` the emitter never inverts.
   On the `dark` skin `--ioc-g100` resolves LIGHT, so white-on-light measured
   1.10:1 — and unlike `.ioc-cta-band.dark`, which no seeded page uses, THIS
   band renders on the home page today.

   `--ioc-text-on-primary` is the emitter's inverting step (`#161616` on dark,
   `#ffffff` otherwise), so the shipped `v6` skin is byte-unchanged and only the
   dark skin moves. The lead keeps its own `opacity:.85` rather than taking
   `--ioc-text-on-ink-muted`: that role is ALREADY the muted step, and stacking
   the two would land the lead under AA on dark. Same reasoning for the link's
   2px underline and the focus ring — the ring is a non-text UI indicator, so it
   is 1.4.11 at 3:1, which the fixed white also failed. --- */
body.ioc-site .ioc-plat .ioc-plat-head .ioc-plat-lead{margin:0 0 24px;font-size:15.5px;line-height:1.65;max-width:44ch;color:var(--ioc-text-on-primary,#fff);opacity:.85}
body.ioc-site .ioc-plat-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ioc-text-on-primary,#fff);border-bottom:2px solid var(--ioc-text-on-primary,#fff);padding-bottom:4px;transition:opacity .18s var(--ioc-ease)}
body.ioc-site .ioc-plat-link svg{width:15px;height:15px}
body.ioc-site .ioc-plat-link:hover{opacity:.8}
body.ioc-site .ioc-plat-link:focus-visible{outline:2px solid var(--ioc-text-on-primary,#fff);outline-offset:4px}
body.ioc-site .ioc-plat-layers{display:flex;flex-direction:column;gap:8px}
body.ioc-site .ioc-plat .ioc-plat-layer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--ioc-surface,#fff);color:var(--ioc-text-primary);padding:16px 24px;transition:background-color .11s var(--ioc-ease),transform .2s var(--ioc-ease)}
body.ioc-site .ioc-plat-layer:hover{background:var(--ioc-g10);transform:translateX(4px)}
body.ioc-site .ioc-plat-layer:focus-visible{outline:3px solid var(--ioc-blue,#0001ff);outline-offset:2px}
body.ioc-site .ioc-plat .ioc-plat-layer strong{display:block;font-size:17px;font-weight:700;letter-spacing:-.018em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-d{display:block;font-size:13.5px;line-height:1.55;color:var(--ioc-text-secondary)}
body.ioc-site .ioc-plat-layer-ic{width:24px;height:24px;color:var(--ioc-blue,#0001ff);flex:none}
body.ioc-site .ioc-plat-layer-go{width:16px;height:16px;color:var(--ioc-blue,#0001ff);flex:none}
/* Stack to one column at the same breakpoint §K uses for the sibling duo;
   `minmax(0,1fr)`, not a bare `1fr`, per §Y's overflow lesson. */
@media(max-width:860px){
  body.ioc-site .ioc-plat{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   O · Page rhythm, site measure, kickers, hero residue and the outcome-card
   frame (HOME-FIX-PLAN F34 · F35 · F36 · F37 · F38, plus the mega-panel
   DESCRIPTIONS F40 named only for its headings and tile titles). Most of
   this section is ⚠ EVERY PAGE.

   MEASURE — the D3 ruling, re-derived from the pack, then UNIFIED by owner
   ruling (2026-08-21). HOME-FIX-PLAN F34/D3 states "the comp caps content
   at 1280px". Measured, that is true of HOME and of nothing else:
   `max-width:1280px` occurs SIX times in the whole handover pack and ALL
   SIX are in `Home.dc.html` (:168 hero, :207 outcomes, :233 platform, :259
   starting point, :301 capability duo, :325 enquiry). `max-width:1360px`
   occurs 297 times across all 23 comps, including every content section of
   the other 22 pages AND Home's own shell (:85 header row, :96 mega inner,
   :100 drawer, :360 footer). So the site measure went to the pack's 1360
   and Home first KEPT its comp's 1280 through a `:has(.ioc-hero-v6)` wrap
   carve-out — comp-faithful, but it put every Home band 40px inboard of
   Home's own header and footer. The owner ruled that mismatch a defect
   (2026-08-21, the same call as the route-grid ruling of 2026-08-20 in
   the footer route band §X): ONE alignment spine site-wide — content left edge
   (100% − 1360)/2 + 32px, i.e. the 50vw−648 constant — so the carve-out is
   DELETED and the three Home rules that restated the 1280 grid as a pixel
   constant (§L's hero track math, the hero revision's copy padding, §T's
   platform rows) moved to 648 in the same change. Home now deviates from
   Home.dc.html's section widths BY RULING, exactly as CMS-D-126 ① already
   deviates its hero. Both numbers are `max-width`, which T17 does not
   grade (§N's rule).

   `--ioc-maxw` is the kit's own site-measure token (infoc-cms.css:52,
   1584px), read by `.wrap` (:226), `.ioc-footer .fwrap` (:407) and
   `.crumb .crumb-inner` (:590). Re-pointing the TOKEN moves all three at
   once, and it is what closes the footer, which §N could not: §N set the
   header row and `.mega-inner` to 1360 with explicit `max-width`
   declarations, leaving the footer 224px WIDER than the header above it.
   This is deliberately NOT in §A: §A is the register of tokens this sheet
   MINTS (with their consumers, per T16 ②b), and this mints nothing — it
   overrides a token the frozen kit already declares and already consumes.

   SPACING — read this before adding a value. `v6CssOffScaleCeiling` is at
   its ceiling of 2 with ZERO headroom and is SHRINK-ONLY, and DESIGN.md's
   scale (4 · 8 · 12 · 16 · 24 · 32 · 48) has no step above 48px. Every
   value below that the gate grades is on the scale — the comp's 36px head
   margin rounds to 32px and its 10px kicker margin to 12px, exactly as §J,
   §M and §N rounded theirs.
   THE SECTION RHYTHM CANNOT BE ROUNDED, and this is stated plainly rather
   than hidden. The comps' section padding runs 76-100px (Home's Outcomes
   and Platform are `84px 32px 92px`, Home.dc.html:206/232); the nearest —
   and only — scale step is 48px, which would cut the vertical rhythm of
   every band on every page by ~45% against 23 comps that all specify
   76-100. So the rhythm keeps the kit's OWN `clamp()` idiom for this exact
   property (`.ioc-block`, infoc-cms.css:1138 `clamp(64px,8vw,112px)`),
   retuned so the desktop maximum is the comp's: 6vw resolves to 86.4px at
   1440 and clamps to 84, 6.4vw to 92.16 and clamps to 92. A responsive
   declaration is the right form here independently of the gate — the comps
   are fixed-width 1440 designs and a frozen 84px would be worse code — but
   note that T17's V6 scan matches only a BARE `Npx` token
   (`CSS_PX_RE = /^(-?\d+(?:\.\d+)?)px$/`), so nothing inside a `clamp()`
   is counted, here or in §D's `padding:clamp(22px,2.2vw,30px)`. That is a
   DETECTOR GAP, not a licence: it is reported with this change, because the
   real finding is that the scale tops out at 48px and therefore cannot
   express section-scale rhythm at all.

   SPECIFICITY. `scripts/copy-render-kit-runtime.mjs` harvests every kit
   `color:` declaration that carries a class into `infoc-site-overrides.css`
   prefixed `body.ioc-site`, so a kit colour rule reappears one class higher
   — see §L's header for the white-on-white that cost. Every colour rule
   below is graded against the HARVESTED copy: `.ioc-kicker` (harvest :288,
   0-2-0) is met at parity and won on source order; `.mg-txt>span` (harvest
   of infoc-cms.css:354, 0-4-1) likewise; the two rules that must stay
   UNBEATEN — `body.ioc-site .ioc-block.dark .ioc-kicker` (harvest :289,
   0-4-1) and `body.ioc-site .ioc-fam .ioc-kicker` (:276, 0-3-1) — are
   deliberately left above this section's 0-2-1 kicker rule so ink bands
   keep their white kicker and family closing bands keep their accent.
   ============================================================ */

/* --- F34 · site measure. 1584 -> the pack's 1360 — every page, Home
   included (owner ruling 2026-08-21; the 1280 carve-out is retired, see
   MEASURE above). --- */
body.ioc-site{--ioc-maxw:1360px}

/* --- F34 · section rhythm. `.ioc-block.tight` is RESTATED at a specificity
   that clears this section's own rule (0-3-1 over 0-2-1): the kit declares
   it at `.ioc-block.tight` (0-2-0), which the rhythm rule above would
   otherwise have silently swallowed, inflating every tight band from 72px
   to 92px. The restated values are the kit's own — a no-op that protects
   existing behaviour, not a new choice. --- */
body.ioc-site .ioc-block{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(48px,6.4vw,92px)}
body.ioc-site .ioc-block.tight{padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(48px,5vw,72px)}

/* --- F34 · section head. Comp `Home.dc.html:208`: `margin-bottom:36px`
   against the kit's `clamp(32px,4vw,56px)` (56px at 1440). 36 rounds to the
   scale's 32. --- */
body.ioc-site .ioc-head{margin-bottom:32px}

/* --- F35 · the Outcomes hairline. The BAND colour is not set here and must
   not be: `content.json` `pages[home].blocks[1].tone` is now `"soft"`, and
   `.ioc-block.soft` (infoc-cms.css:1140) resolves `--ioc-g10`, which the
   Appearance typography block sets to the comp's exact `#f9fafb`. One
   stored field, no CSS.
   The comp's `border-top:1px solid #e0e0e0` (Home.dc.html:206) is NOT
   generalised to `.ioc-block.soft`, and that is measured, not cautious: of
   the 21 soft BAND sections in the pack, 19 carry a `border-BOTTOM` and
   only 2 a border-top. A site-wide `.ioc-block.soft{border-top}` would put
   a rule on 22 pages whose comps ask for the opposite edge. Scoped to the
   V6-hero page for the same reason, and by the same hook, as the measure
   above; Home has exactly one soft band. --- */
body.ioc-site .infoc-cms:has(.ioc-hero-v6) .ioc-block.soft{border-top:1px solid var(--ioc-border-subtle,#e0e0e0)}

/* --- F2 (REOPENED) · the section `h2`. F2 was recorded complete when its
   HERO half landed, but F2 names TWO victims of one cascade: the hero `h1`
   AND the section `h2`. `div.showcase h2` (infoc-cms.css:2075, 0-1-2) beats
   `.ioc-head h2` (:1153, 0-1-1) ON SPECIFICITY, so the `h2` still measured
   67.68px on Home after the hero was fixed. Only the `h1` had been verified.

   F2's prescribed remedy — `.ioc-head h2{font-size:40px}` site-wide — is
   ALSO wrong, in exactly the way the D3 measure was wrong: 40px is a HOME
   value. Counted across the pack, section `h2` is `36px` 82 times in 17
   files and `40px` only 5 times, in `Home.dc.html` and `Search.dc.html`
   alone. So the two treatments are split the same way the measure is, on
   the same `:has(.ioc-hero-v6)` hook, and both are the comps' verbatim
   declarations rather than a rounded compromise:
     site  — `font-size:36px;line-height:1.1;font-weight:700;
              letter-spacing:-.035em;max-width:26ch` (Solutions/Academy et al)
     Home  — `font-size:40px;line-height:1.06;font-weight:800;
              letter-spacing:-.035em;max-width:24ch` (Home.dc.html:207)
   `font-size`, `line-height`, `font-weight` and `max-width` are none of them
   spacing properties, so T17 does not grade these and the comps' exact
   values survive intact.

   Specificity: the site rule is 0-2-2 and the Home rule 0-4-2 (`:has()`
   takes its most specific argument), both above `div.showcase h2`'s 0-1-2.
   `.showcase` is scheduled for deletion once the last showcase-era
   dependency goes, and these rules are deliberately independent of it. --- */
body.ioc-site .ioc-head h2{font-size:36px;line-height:1.1;font-weight:700;letter-spacing:-.035em;max-width:26ch}
body.ioc-site .infoc-cms:has(.ioc-hero-v6) .ioc-head h2{font-size:40px;line-height:1.06;font-weight:800;max-width:24ch}

/* --- F36 · kickers. Comp (`Home.dc.html:210`): JetBrains Mono 11.5px,
   weight 500, `.16em`, `#0001ff`, `margin:0 0 10px`, and NO pseudo-element.
   The kit renders `--ioc-text-primary` (`#000000` under the V6 skin) at
   12px/.12em/400 plus a 22px blue `::before` dash (infoc-cms.css:1149-1150).
   `infoc-site-overrides.css:288` was NOT the cause — it is the generated
   harvest of the kit's own rule and restates the same value, so deleting it
   would have changed nothing.
   Two shapes exist in the pack: this one (11.5/500/.16em, 4 uses, Home's
   own) and 11.5px/600/.14em (79 uses, every other page's section kicker).
   The pair differ by one weight step and .02em; colour and size — the two
   that move the eye — are identical, so Home's, as F36 names it, is used
   and the divergence is reported rather than silently averaged.
   `content:none` rather than `display:none`: it removes the box outright,
   so the parent's `gap:10px` has nothing to space. --- */
body.ioc-site .ioc-kicker{font-size:11.5px;letter-spacing:.16em;font-weight:500;color:var(--ioc-blue,#0001ff);margin:0 0 12px}
body.ioc-site .ioc-kicker::before{content:none}

/* --- F37 · hero residue. B-01-V20 and §L already landed every other half of
   F37 (flat `--ioc-surface` ground with no bottom border, `1.1fr .9fr` /
   `gap:0` / `align-items:stretch` at 1280, the standfirst on
   `--ioc-text-primary` at `54ch` with a 32px foot). TWO things survived.
   (1) The standfirst SIZE: §L's `clamp(16px,1.15vw,18.5px)` never reaches
   its own maximum — 1.15vw is 16.56px at a 1440 viewport, so the comp's
   18.5px (Home.dc.html:172) rendered as 16.56px and the clamp's third term
   was dead. 1.3vw is 18.72px at 1440 and clamps to 18.5 exactly. Corrected
   here rather than in §L only because a sibling task owns that anchor this
   hour; it belongs in §L and should be folded back.
   (2) The wordmark entrance. `idcHdrInk` (infoc-cms.css:300-301) fades the
   C from `--ioc-text-primary` to `--ioc-blue` over 1.5s on EVERY page load.
   No comp animates the wordmark — all 23 paint the C `#0001ff` from first
   paint — and it is the header's own mark, so a page's first second showed
   a mark that was not the brand's. Only the animation is dropped; the kit's
   `.infoc-logo .gc{color:var(--ioc-blue)}` (:297) then applies from paint,
   which is the comp. --- */
body.ioc-site .ioc-hero-v6-lede{font-size:clamp(16px,1.3vw,18.5px)}
body.ioc-site .ioc-header .brand .infoc-logo .gc{animation:none}

/* --- F38 · outcome-card frame. Comp (`Home.dc.html:217`): a WHITE card,
   `border-top:3px solid {o.c}`, hovering to `#f9fafb`. The kit paints a 4%
   accent tint under a 2px rule and marks the rule `!important`
   (infoc-cms.css:1649), which is why 3px is unreachable without matching
   the flag — this selector is 0-3-1 against that rule's 0-2-0, and carries
   `!important` for the same reason. The tint is NOT harvested (the harvest
   copies `color:` only), so only the kit's own declaration is contested.
   `--rf` is set on the same element by the kit's per-family rules and is
   read here unchanged, so each card keeps its own family colour.
   The hover follows to `--ioc-g10`, the token the V6 skin resolves to the
   comp's `#f9fafb` and the same one the kit's own `.ioc-card:hover`
   (:1221) already uses — with the resting tint gone, a 9% accent mix on
   hover would have been a bigger jump than the comp's wash, in the wrong
   colour. The comp's `box-shadow:inset 0 0 0 1px #0001ff` hover ring is
   deliberately not added: F38 does not name it and CMS-D-066 r4 refuses
   shadows as structure.
   The CTA line is the comp's 14px/700 against the kit's 15px/600; its
   COLOUR is untouched so `[data-route-fam] .ioc-card-link{color:var(--rfi)}`
   (harvest, 0-4-1) keeps driving the per-family tint. --- */
body.ioc-site .ioc-cards [data-route-fam]{background:var(--ioc-surface,#ffffff);border-top:3px solid var(--rf)!important}
body.ioc-site .ioc-cards [data-route-fam]:hover{background:var(--ioc-g10,#f4f4f4)}
body.ioc-site .ioc-card .ioc-card-link{font-size:14px;font-weight:700}

/* --- F40 residue · mega-panel DESCRIPTIONS. §N closed the group headings
   and the tile titles, which is all F40 named; the four description
   surfaces underneath them still read `--ioc-text-secondary` (`#525252`)
   where all 23 comps set `#000000` (Home.dc.html:137 tile desc, :131 intro
   copy, :158 featured copy, :147 flat-panel tile desc).
   The cause is NOT the `.mega span` rule at infoc-cms.css:2014 that the
   handover note points at — that rule is outranked here. Three of the four
   are the kit's OWN header rules (:354, :342, :337), each of which the
   harvest re-emits one class higher, so each selector below carries the
   kit's full chain plus `body.ioc-site` and wins on source order.
   The flat-panel description is targeted as `a>span:last-child`, NOT
   `.simple-links span`: the latter also matches the tile's icon wrapper
   (`span[data-tile]`) and `.simple-links .mega-label` (:363), whose blue is
   the comp's and must survive. --- */
body.ioc-site .ioc-header .menu-group .mg-txt>span,
body.ioc-site .ioc-header .simple-links a>span:last-child,
body.ioc-site .ioc-header .mega-intro p,
body.ioc-site .ioc-header .featured p{color:var(--ioc-text-primary,#161616)}

/* ============================================================
   R · Comp grid gaps — Home outcomes (B-11-V17) and symptom router
   (B-10-V20). Owner-reported 2026-08-17: both sections render the kit's
   hairline-divider treatment (container border + `gap:1px` shared lines)
   where the comp separates the cells with REAL space — Home.dc.html:215
   `gap:16px` on the outcome grid, :267 `gap:12px;margin-bottom:16px` on
   the symptom tablist, :278 `gap:16px` on the router split — with each
   cell carrying its OWN `border:1px solid #e0e0e0` (:217 card, :269 tab,
   :289 aside; the blue answer panel is borderless). This is also WIRING.md
   §5.3's own rule — container-as-divider is banned — so the hairline look
   was drift, not a choice. Scoped by variant id (the §⑤/§⑥ precedent):
   both variants render ONLY on Home today (measured in the seed), and a
   future placement elsewhere should carry the same comp look with it.
   The card's 3px family top rule (F38, `!important`) outranks the border
   shorthand here, so each card keeps its family colour; `--ioc-g10` is
   the token the V6 skin resolves to the comp's `#f9fafb` aside ground.
   16 · 12 are DESIGN.md-scale steps — T17's v6 ceiling is unmoved.
   ONE VALUE LEFT THIS BLOCK LATER: the router split's own `gap` moved to
   §AG, because it must EQUAL the tablist's for the two rows to share one
   column grid, and the comp gives them different numbers (:267 12px on the
   tablist, :278 16px on the split). Nothing else here changed.
   ============================================================ */
body.ioc-site [data-variant-id="B-11-V17"] .ioc-cards{gap:16px;background:transparent;border:0}
body.ioc-site [data-variant-id="B-11-V17"] .ioc-cards .ioc-card{border:1px solid var(--ioc-border-subtle)}
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-list{gap:12px;background:transparent;border:0;margin-bottom:16px}
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-tab{border:1px solid var(--ioc-border-subtle)}
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-body{background:transparent;border:0}
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-links{border:1px solid var(--ioc-border-subtle);background:var(--ioc-g10,#f4f4f4)}

/* ============================================================
   S · Hero visual card — the ONE standard (owner ruling, 2026-08-17;
   RECORDED as CMS-D-161 ①). The kit shipped the hero aside as a SPOTLIGHT
   composition: a translucent caption card floating top-left over the
   photo, the 2×2 fact matrix floating bottom-right with shadow +
   backdrop blur, cells dimmed to grey and cycled by the runtime (one
   `.on` cell at a time, accent text + a 3.4s animated bar). Every V6
   comp draws the SAME aside as a calm stacked card instead — photo,
   then an ink caption band (strong title left · mono uppercase tag
   right in the family's on-inverse step, e.g. Contact.dc.html:247-258,
   Talents.dc.html:220-231) — and the owner ruled the comp anatomy the
   site-wide standard. The comps disagree with EACH OTHER about cell
   typography (Contact: mono tag above a strong value; Talents: strong
   title above muted prose); the standard keeps the seeds' one shared
   semantic — prominent `value` line first (accent icon), muted `label`
   line under it — which is Talents' comp exactly and Contact's comp
   with the two lines transposed. No seed changes; presentation only.
   The runtime's spotlight rotation still runs (no JS change) — these
   rules simply render `.on` identical to its siblings, and the bar is
   gone, so the cycle is invisible. The hairline matrix container is the
   COMP'S OWN drawing for this compact fact grid (both pages, `gap:1px`)
   — §5.3's container-as-divider ban governs page sections, not this
   card, and mock fidelity (CMS-D-122) wins here.
   ============================================================ */
body.ioc-site .ioc-hero-visual{display:block}
body.ioc-site .ioc-hero-figure{min-height:0;border:0;overflow:visible;background:transparent}
body.ioc-site .ioc-hero-figure img{height:clamp(200px,18vw,260px)}
body.ioc-site .ioc-hero-figure::after{display:none}
body.ioc-site .ioc-hero-figure figcaption{position:static;max-width:none;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;border:0;box-shadow:none;background:var(--ioc-g100,#161616)}
body.ioc-site .ioc-hero-figure figcaption b,
body.ioc-site .ioc-hero-figure figcaption strong{margin:0;font-size:14.5px;font-weight:600;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-hero-figure figcaption span{margin:0;font-size:10px;color:var(--ioc-on-inverse-blue)}
body.ioc-site [data-page-family="Talents Gateway"] .ioc-hero-figure figcaption span{color:var(--ioc-on-inverse-green)}
body.ioc-site [data-page-family="Academy"] .ioc-hero-figure figcaption span,
body.ioc-site .ioc-matrix{position:static;width:auto;box-shadow:none;backdrop-filter:none}
/* Cell inset snapped to the scale (16), not transcribed: the comps disagree
   with each other here (Contact 18/18/20 · Talents 15/16), so there is no
   single mock value to be faithful to and the scale is the tiebreak. Same
   for the band's 13px → 12px above. T17's v6 ceiling stays at 27. */
body.ioc-site .ioc-matrix>div{background:var(--ioc-surface,#fff);min-height:0;padding:16px;justify-content:flex-start}
body.ioc-site .ioc-matrix b{font-size:14px;font-weight:600}
body.ioc-site .ioc-matrix span{font-size:12.5px;line-height:1.55}
/* Utility-bar contact (same revision): phone + email beside the locale,
   store facts rendered by Header.tsx's UtilityBar. Lives here, not
   globals.css — see that file's note on Turbopack dropping trailing rules.
   Anatomy is the comp's own: a soft vertical hairline before the cluster
   (inset shadow, the bar is ink), carbon glyphs in on-inverse blue, white
   12.5px/600 links hovering to the same blue. The comp's 18/20px steps are
   snapped to 16 (DESIGN.md scale; T17).
   The BAR ITSELF goes ink in this revision (`background:#000000;
   color:#ffffff`, Home-standalone) where §J's bar was a transparent strip on
   the white header — full-bleed via the same padding-inline escape §T's
   strata use (1360/2 − 32 = 648), tokens not literals so a skin's own ink
   carries through (the §J colour rationale, unchanged).
   50%, NOT 50vw (spine ruling 2026-08-21): the bar spans its containing
   block edge to edge, so a percentage resolves against the scrollbar-LESS
   client width — where the wrap-centred wordmark actually sits — while
   `50vw` counts the classic scrollbar (§AI) and parked the bar's content
   half a scrollbar (measured 7.5px) right of the spine. §T's strata cannot
   take this spelling: they escape with 50%−50vw margins, so their 50vw
   padding is what cancels the overhang; the bar has no such margin. */
body.ioc-site .ioc-utility-bar{max-width:none;margin:0;padding-inline:max(32px,calc(50% - 648px));background:var(--ioc-g100,#161616);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-utility-contact{display:inline-flex;align-items:center;gap:16px;margin-left:16px;padding-left:16px;box-shadow:inset 1px 0 0 rgba(255,255,255,.28)}
body.ioc-site .ioc-utility-contact a{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ioc-text-on-color,#fff);text-decoration:none}
body.ioc-site .ioc-utility-contact a:hover{color:var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-utility-contact svg{width:14px;height:14px;flex:none;color:var(--ioc-on-inverse-blue)}

/* --- UTILITY BAR REFLOW (WCAG 2.2 SC 1.4.10), owner ruling 2026-08-17 ---
   The bar was a NON-WRAPPING flex row at a fixed `height:36px` with no
   responsive rule of any kind — the §J/1040px collapse hides `.nav`,
   `.search-open` and `.top-cta` but never touched this bar. Its content width
   is constant (text + 32px padding either side), so it needed 586px at EVERY
   viewport and simply spilled below that.

   MEASURED, not inferred, at a 390px viewport before this rule:
   `documentElement.scrollWidth` 567 against `clientWidth` 390, no `overflow-x`
   guard on `html` or `body`, and scrolling right actually moved the page —
   `window.scrollX` reached 177. A real two-directional scroll on every page of
   the site, not a phantom from an off-canvas panel: `.sh-drawer` is
   `position:fixed` and its 756px right edge contributes nothing to the
   document's scrollable area, which is why scrollWidth was 567 (the bar) and
   not 756 (the drawer). This is the same SC 1.4.10 failure class §Y records,
   at a different element.

   WHY WRAP RATHER THAN HIDE. Hiding `.ioc-utility-links` is the cheaper fix
   and matches how the nav already collapses, but it COSTS A DESTINATION, and
   that was established by comparing hrefs rather than link text — the text
   comparison says all three are duplicated in the mobile drawer and is WRONG:
     Support         -> /contact#enquiry        drawer has /contact only
     Academy courses -> /academy/certifications drawer has /academy only
     Insights        -> /insights               genuinely duplicated
   So `/academy/certifications` has NO other mobile header route, and hiding
   the cluster would silently strand it. Wrapping keeps every link and both
   contact details visible and tappable at every width. The cost is 37px of
   sticky-header height on mobile (101 -> 138, measured), which the owner
   accepted against losing a destination.

   NO BREAKPOINT IS INVENTED. `flex-wrap:wrap` PERMITS wrapping, it does not
   force it: above 586px the row still fits on one line and renders exactly as
   before, so this needs no media query and there is no magic number to drift.
   `height:36px` becomes `min-height:36px` for the same reason — a fixed height
   would clip the second line, while the minimum preserves the comp's 36px band
   wherever the content still fits it. Desktop is unchanged by construction,
   not by assertion (verified: computed height 36px at 1440).

   T17: `row-gap:8px` and `padding-block:8px` are both scale steps. The column
   `gap:24px` and `padding-inline` are inherited from the rules above,
   untouched. `min-height` is not a spacing property (§N). */
body.ioc-site .ioc-utility-bar{flex-wrap:wrap;height:auto;min-height:36px;row-gap:8px;padding-block:8px}

/* THE WRAPPED STATE NEEDS ITS OWN ALIGNMENT, and this is the one place a
   breakpoint is unavoidable: CSS cannot select "an item that starts a flex
   line", and both rules below are wrong precisely when the row is intact.
     · `.ioc-utility-contact` (line 1808) carries a leading hairline + 16px
       inset marking it as a CONTINUATION of the locale beside it. On its own
       line that is a rule against nothing and a stray indent.
     · `.ioc-utility-links` (line 617) carries `margin-left:auto` to push the
       cluster to the bar's right edge. On its own line the auto margin still
       resolves, so the line floats right while the two above it sit left.
   Together they rendered three lines each starting at a different x — 32px,
   48px, 112px, measured at 390.

   `:first-child` was tried and is WRONG: the contact cluster is never the
   first CHILD (the locale is), only ever the first item on a line, so the
   selector matched nothing and the raggedness survived it.

   744px IS MEASURED, NOT CHOSEN. Bisected against the live bar: 744 -> 62px
   (wrapped), 748 -> 36px (one line). So this block is bounded exactly at the
   wrap and can never fire while the row is intact. It is font-metric
   dependent by nature — re-bisect the same way if the type ever changes; the
   failure mode is cosmetic (a hairline in the wrong place across a few px of
   viewport), never an overflow. The file's own 860/620 steps were rejected
   for this: 860 is above the wrap point and would strip the divider and the
   right-alignment from a bar still rendering as one line. */
@media(max-width:744px){
  body.ioc-site .ioc-utility-contact{margin-left:0;padding-left:0;box-shadow:none}
  body.ioc-site .ioc-utility-links{margin-left:0}
}

/* The revision's hero split is a TRUE half-and-half: two equal columns over
   the full viewport, the copy padded in to the measure's left edge (same
   50vw−648 constant as §T — the 1360 site spine, §O's 2026-08-21 ruling;
   both were 50vw−608/kit-wrap-1280 before Home joined the site measure) and
   the visual bleeding flush to the viewport's right edge. §L's 1920-cap +
   calc(50%−20px) visual column left a right-hand gutter and an off-centre
   seam. Guarded above §L's own 1040px collapse, which is untouched.
   The wrap takes §T's 100vw + 50%−50vw escape (spine ruling 2026-08-21):
   without it the copy's `50vw` padding counts the classic scrollbar (§AI)
   and sat half a scrollbar (measured 7.5px) right of the spine; with it the
   two vw errors cancel exactly as §AI proved for the strata, the seam stays
   on the client centre-line, and the visual column's overhang is clipped by
   §AI's own html+body rule. Percentage padding is NOT the alternative here
   the way it is for the utility bar: the copy is a grid item, so a % would
   resolve against its half-width grid area, not the page. */
@media(min-width:1041px){
  body.ioc-site .ioc-hero-v6-wrap{max-width:none;width:100vw;margin:0 0 0 calc(50% - 50vw);grid-template-columns:1fr 1fr}
  body.ioc-site .ioc-hero-v6-copy{grid-column:1;padding-left:max(32px,calc(50vw - 648px));padding-right:48px}
  body.ioc-site .ioc-hero-v6-visual{grid-column:2}
}

/* The spotlight's dim/accent states, rendered settled: every cell equal. */
body.ioc-site .ioc-matrix[data-spotlight]>div,
body.ioc-site .ioc-matrix[data-spotlight]>div.on{background:var(--ioc-surface,#fff);cursor:default}
body.ioc-site .ioc-matrix[data-spotlight]>div b,
body.ioc-site .ioc-matrix[data-spotlight]>div.on b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-matrix[data-spotlight]>div b svg,
body.ioc-site .ioc-matrix[data-spotlight]>div.on b svg{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff));transform:none}
body.ioc-site .ioc-matrix[data-spotlight]>div span,
body.ioc-site .ioc-matrix[data-spotlight]>div.on span{color:var(--ioc-text-secondary);transform:none}
body.ioc-site .ioc-matrix .ioc-mx-bar{display:none}

/* ============================================================
   T · Platform cross-section bands (Home-standalone.html revision,
   2026-08-17; RECORDED as CMS-D-161 ②, and its six-step
   near-black scale SUPERSEDED by CMS-D-158 — see §T2). The revision redraws the
   B-03-V20 platform band as six FULL-BLEED horizontal strata on #000:
   the first (Business Central) a 112px house-blue band, the rest 92px
   bands stepping down through near-blacks (#1c1c22 → #0c0c0f), each row
   an icon · title/desc grid with an on-inverse-blue arrow. §M's boxed
   white rows are superseded for this variant. The per-layer "LAYER ONE ·
   THE TRANSACTION CORE" eyebrows and the closing "THE CORE IS THE TOP
   STRATUM" mono line are NOT reproduced here: they are store words and
   B-03-V20's item contract carries no eyebrow/note slot — that is the
   deferred template-contract half of this revision, recorded in the
   wiring report, never hand-baked into CSS (T10 would rightly fail a
   stylesheet minting visitor copy). Full-bleed via the standard
   50%−50vw escape since the layer list renders inside the section wrap.
   Grounds are literal near-blacks from the revision (not tokens): they
   are this band's own six-step scale, used nowhere else.
   ============================================================ */
/* `.ioc-plat-layer` IS the anchor: it becomes the full-bleed band itself,
   its content held to the 1360px measure by padding-inline (1360/2 − 32
   = 648). The list escapes the section wrap with the 50%−50vw trick. */
body.ioc-site .ioc-plat{display:block}
body.ioc-site .ioc-plat-layers{display:block;width:100vw;margin-left:calc(50% - 50vw)}
/* Three-part selector on purpose: §M's own `body.ioc-site .ioc-plat
   .ioc-plat-layer` (:1399) is (0,3,1) and would otherwise keep its white
   16/24 row treatment under this band. The 648 centres the row content on
   the section's real measure: the 1360 site spine (1360/2 − 32 — §O's
   2026-08-21 ruling; was 608 against the retired 1280 kit wrap). */
/* The comp's row is FOUR columns (icon · kicker/title · desc · arrow) but the
   item template nests kicker+title+desc in one `.ioc-plat-layer-copy` span —
   `display:contents` promotes its children into the row grid so the desc takes
   its own middle column and the arrow reaches the measure's right edge. */
body.ioc-site .ioc-plat .ioc-plat-layer{display:grid;grid-template-columns:56px minmax(0,.8fr) minmax(0,1.4fr) auto;grid-template-rows:auto auto;column-gap:24px;row-gap:4px;align-content:center;align-items:center;min-height:96px;padding-block:16px;padding-inline:max(32px,calc(50vw - 648px));border:0;background:var(--ioc-stratum,#17171c);color:var(--ioc-text-on-color,#fff);transition:background .18s var(--ioc-ease)}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-copy{display:contents}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-ic{grid-column:1;grid-row:1/3}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-k{grid-column:2;grid-row:1;align-self:end;margin:0}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-copy>strong{grid-column:2;grid-row:2;align-self:start}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-d{grid-column:3;grid-row:1/3}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-go{grid-column:4;grid-row:1/3;justify-self:end}
/* Layers two→six take the base rule's single `--ioc-stratum`; only the core
   declares a ground of its own. See §T2 for why the other four went. */
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1){background:var(--ioc-blue,#0001ff);min-height:160px}
body.ioc-site .ioc-plat-layer:hover{filter:brightness(1.45)}
/* The core's hover is the accent's OWN hover step, not a brightness filter:
   brightening #0001ff washes it toward lavender, and the token pair already
   exists (it is also the comp's own `hov[0]`). */
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1):hover{background:var(--ioc-accent-hover,#0000c4);filter:none}
body.ioc-site .ioc-plat-layer-ic{width:26px;height:26px;color:var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-ic{color:var(--ioc-text-on-color,#fff);width:34px;height:34px}
body.ioc-site .ioc-plat-layers .ioc-plat-layer .ioc-plat-layer-copy,
body.ioc-site .ioc-plat-layers .ioc-plat-layer .ioc-plat-layer-copy strong,
body.ioc-site .ioc-plat-layers .ioc-plat-layer strong{font-size:19px;font-weight:700;letter-spacing:-.022em;line-height:1.2;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-plat-layers .ioc-plat-layer .ioc-plat-layer-d{font-size:14.5px;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--ioc-text-on-color,#fff);opacity:.82}
body.ioc-site .ioc-plat-layer-go{width:17px;height:17px;color:var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-go{color:var(--ioc-text-on-color,#fff)}
/* The per-layer eyebrow + closing mono line (contract extension, same
   revision): mono ordinal kickers in on-inverse blue, white on the blue
   stratum; the tail at 55% white, the revision's own value. */
body.ioc-site .ioc-plat-layer-k{display:block;font-family:var(--ioc-mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;color:var(--ioc-on-inverse-blue);margin-bottom:4px}
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-k{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-plat-note{display:block;margin:0;padding:24px 0 0;font-family:var(--ioc-mono);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--ioc-text-on-color,#fff);opacity:.55}
body.ioc-site .ioc-plat-note:empty{display:none}
@media(max-width:860px){body.ioc-site .ioc-plat .ioc-plat-layer{grid-template-columns:40px minmax(0,1fr) auto}body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-d{display:none}body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-go{grid-column:3}}
@media(prefers-reduced-motion:reduce){body.ioc-site .ioc-plat-layer{transition:none}}

/* ============================================================
   T2 · Platform cross-section, hierarchy pass (2026-08-19, CMS-D-158).

   §T transcribed the 2026-08-17 revision faithfully, six-step near-black
   scale included. MEASURED, that scale does not survive a screen: adjacent
   strata sat at 1.053 / 1.027 / 1.016 / 1.027 : 1 and all five steps together
   at 1.129:1 — under one JND. Layers two→six rendered as ONE slab, so the
   revision spent its entire tonal budget on the distinction that carries no
   argument (layer three against layer four) and none on the one that does.
   The core was set in the SAME 19px as its five subordinates while the stored
   lead says "Nothing replaces it" — the grammar of first-among-equals under
   copy that claims the opposite.

   TWO DEPARTURES FROM THE COMP, recorded as departures rather than folded in
   quietly, because CMS-D-122 holds that mock fidelity outranks house habit
   and these overrule a delivered comp on its own ground:
   ① the five near-blacks collapse to one `--ioc-stratum`, separated by the
     1px hairline CMS-D-066 rule 4 already prescribes. rgba white, not a hex —
     the §U idiom, and T16 ① scans hex literals. The dependency order the lead
     claims is now carried by the stored LAYER TWO…SIX ordinals, which already
     render, instead of by a gradient nobody can see.
   ② the core becomes categorically different rather than incrementally
     taller: 160px against 96px (was 112 against 92, a 1.22x step that reads
     as "slightly bigger"), 26px title against 19px, full-opacity 16px
     description, 34px icon.

   T17. Every spacing value here is on the 4/8/12/16/24/32/48 scale, and the
   design work is deliberately carried by `height`, `font-size`,
   `border-width` and `grid-template-columns` — NONE of which appear in
   CSS_SPACING_PROPS (scripts/spacing-gate.mjs:810). `v6CssOffScaleCeiling`
   does not move. The comp's own off-scale head metrics snap on the usual
   convention, ties UP: 40px column gap -> 48, 34px head tail -> 32.

   THE SECTION KICKER'S ACCENT — shipped, but NOT as the comp's literal.
   The head sits on `.ioc-block.dark` (= `--ioc-g100`), which INVERTS per
   skin, so the comp's fixed `#a3adff` measures 2.10:1 against the light
   ground the `dark` skin resolves — the exact skin-blindness CMS-D-124 ②
   closed for these same three rules. CMS-D-158 therefore shipped the kicker
   grey and named the fix as owed; CMS-D-163 built it: `--ioc-accent-on-ink`,
   a per-skin emitter role on the `footer.linkHover` precedent (CMS-D-153),
   `#a3adff` on the three dark-band skins and house blue on `dark`. The
   kicker now reads the ROLE, so it is the comp's colour everywhere the comp's
   ground exists and a legible one where it does not. The BAND-INTERNAL
   `#a3adff` (icons, arrows, ordinals) still needs no such care — those sit
   on the fixed near-black strata, which no skin inverts.
   ============================================================ */
/* The head is the comp's baseline-aligned row again: copy left, CTA hard
   right, sitting on the lead's last baseline (Home-standalone `#platform`:
   `display:flex;gap:40px;align-items:flex-end;justify-content:space-between`).
   §M expressed this as `.ioc-plat`'s own two-column grid; §T switched
   `.ioc-plat` to `display:block` so `.ioc-plat-layers` could take the
   full-bleed escape, which silently dropped the head composition AND the
   48px gap with it — that is why the CTA's 2px underline had been sitting
   flush against the blue band. Rebuilt one level down, on `.ioc-plat-head`,
   so `.ioc-plat` stays `display:block` and the bands keep their escape. The
   template is unchanged: the four children auto-place down column 1 and only
   the link is placed explicitly. */
body.ioc-site .ioc-plat .ioc-plat-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:48px}
body.ioc-site .ioc-plat .ioc-plat-head .ioc-kicker{grid-column:1;opacity:1;color:var(--ioc-accent-on-ink)}
/* `text-wrap:balance` is NOT decoration and it overrides §M's
   `text-wrap:initial` on purpose. The 22ch cap forces this headline to two
   lines, and the stored string "The architecture in cross-section" offers a
   break opportunity at its own hyphen — so the greedy default broke it as
   "The architecture in cross-" / "section", a 26/7 rag splitting the compound
   word. Balance picks the 19/13 break after "in". The cap stays the comp's;
   only the break point moves. */
body.ioc-site .ioc-plat .ioc-plat-head h2{grid-column:1;max-width:22ch;text-wrap:balance}
body.ioc-site .ioc-plat .ioc-plat-head .ioc-plat-lead{grid-column:1;max-width:52ch;margin:0}
body.ioc-site .ioc-plat .ioc-plat-head .ioc-plat-link{grid-column:2;grid-row:3;justify-self:end;align-self:end}
/* `margin-top` only — `.ioc-plat-layers` carries the full-bleed
   `margin-left:calc(50% - 50vw)` and a shorthand here would erase it. */
body.ioc-site .ioc-plat .ioc-plat-layers{margin-top:32px}
/* Hairlines BETWEEN THE FIVE, never between the core and layer two: the
   blue-to-near-black edge is already a hard boundary and a line across it
   would only weaken the one separation that was already working. The double
   sibling combinator lands the border on children 3..6, i.e. the 2|3, 3|4,
   4|5 and 5|6 seams. */
body.ioc-site .ioc-plat-layers>.ioc-plat-layer+.ioc-plat-layer+.ioc-plat-layer{border-top:1px solid rgba(255,255,255,.10)}
/* The core's type step. Out-specifies the shared band rules by the
   `:nth-child(1)` alone, and every property is ungraded by T17. */
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-copy>strong{font-size:26px;letter-spacing:-.028em}
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-d{font-size:16px;opacity:1}
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-k{font-size:10.5px}
@media(max-width:860px){
  /* One column, CTA back under the copy on its own row. */
  body.ioc-site .ioc-plat .ioc-plat-head{grid-template-columns:minmax(0,1fr)}
  body.ioc-site .ioc-plat .ioc-plat-head .ioc-plat-link{grid-column:1;grid-row:auto;justify-self:start;margin-top:24px}
  /* 160px is a poster height on a phone; the core keeps its lead over the
     five (128 against 96) without eating the fold. */
  body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1){min-height:128px}
  body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-copy>strong{font-size:22px}
}

/* ============================================================
   U · Home-standalone hero rework (2026-08-17 revision; RECORDED as
   CMS-D-161 ③, with §T's). Four coordinated pieces:
   ① the left column's credentials grid becomes the single
     "Microsoft platform" strip (the seed now carries ONE matrix entry);
   ② the visual panel goes house-blue → INK, image on top, caption band
     below a soft hairline — the revision's composition; slide count and
     copy are store data (five slides seeded);
   ③ the dots become the revision's bar-marks (active = 20×10 bar);
   ④ the route RAIL under the hero is a B-11-V21 block seeded with four
     eyebrow+title cards (two static, two family links) restyled here to
     the revision's ink strip — scoped by home instance + variant, the
     §⑤/§⑥ precedent. Its store-required section header is hidden: the
     revision's rail has none, and the heading exists only because every
     card block carries one. rgba() whites are the revision's own soft
     hairlines on ink (T16 ① scans hex literals; these are alpha steps of
     white, not brand colours).
   ============================================================ */
/* (credentials restyle retired with the strip — see the chips note above) */
body.ioc-site .ioc-hero-v6-visual{background:var(--ioc-g100,#161616);display:flex;flex-direction:column}
body.ioc-site .ioc-hero-v6-slide-img{display:block;flex:1;min-height:318px;background-size:cover;background-position:50% 50%}
/* Owner direction 2026-08-17: the caption band under the slide image sits on
   the accent blue (the panel above it stays ink for the photo ground). */
body.ioc-site .ioc-hero-v6-slide-body{border-top:1px solid rgba(255,255,255,.28);padding:24px 32px;background:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-hero-v6-slide-k{color:var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-hero-v6-slide-t{font-size:23px;line-height:1.16;font-weight:800;letter-spacing:-.025em;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-hero-v6-dot [data-dot-mark]{display:block;width:10px;height:10px;background:rgba(255,255,255,.55);border-radius:0;transition:width .18s var(--ioc-ease),background .18s var(--ioc-ease)}
body.ioc-site .ioc-hero-v6-dot[aria-current="true"] [data-dot-mark]{width:20px;background:var(--ioc-text-on-color,#fff)}

/* ============================================================
   HERO SLIDER — the delivered comp, HeroSlider-standalone.html §2a
   (owner ruling 2026-08-18: "the design only from HeroSlider-standalone").

   THIS SUPERSEDES THE 2026-08-17 OWNER DIRECTION DIRECTLY ABOVE — the blue
   caption band. That ruling is one day old and was followed correctly; it is
   replaced here by a later ruling from the same owner against a comp that did
   not exist when it was made. Recorded rather than quietly deleted so the
   blue band reads as superseded, not as a mistake. RECORDED as CMS-D-161 ④.

   THE COMP'S CAPTION IS AN OVERLAY, NOT A BAND. It sits ON the photograph:
   `position:absolute; left:0; bottom:0; max-width:80%; background:#000000`,
   closed by a 3px accent underline (`box-shadow:inset 0 -3px 0 {accent}`).
   The band treatment spanned the full panel width below the image; this is a
   plate over the lower-left corner of it, which is why the media panel also
   takes the comp's `min-height:460px` — the caption no longer adds height of
   its own, so the panel has to carry it.

   EVERY SLIDE HAS ITS OWN ACCENT, and all four are already tokens — no colour
   is minted here, which is what CMS-D-066 requires:
     #a3adff  --ioc-on-inverse-blue      (singapore-skyline)
     #78a9ff  --ioc-accent-on-inverse    (manufacturing-automation)
     #be95ff  --ioc-on-inverse-purple    (data-center)
     #6fdc8c  --ioc-on-inverse-green     (managed-support)
   The runtime stamps `data-slide-accent` with the slide index modulo four and
   the mapping lives HERE, in the sheet, because colour is code-owned
   (CMS-D-081: editors pick blocks and copy, never colours). The deck carries
   five slides against the comp's four, so the palette cycles rather than
   running out — and the un-stamped server render falls back to accent 0, so
   the first paint is correct before any script runs.

   T17 — the comp's caption metrics are off-scale and snap per CMS-D-117, ties
   UP: padding `20px 24px 22px` -> `24px` (20 is an exact tie 16/24; 22 is 2
   from 24 against 6 from 16), kicker `margin-bottom:8px` -> `8px` (tie), title
   `margin-bottom:10px` -> `12px` (tie), link `gap:9px` -> `8px` (1 away
   against 3). `font-size`, `letter-spacing`, `line-height`, `max-width` and
   `min-height` are not spacing properties (§N), so 10px/21px/13.5px/.16em/
   -.026em/1.14/80%/460px stay verbatim.

   THE CONTROLS ARE OURS AND THEY STAY. The comp ships no pause and no dots —
   it is a motion study, not an accessible component, and WCAG 2.2.2 requires a
   mechanism to stop content that auto-updates. Since the comp has no placement
   for them to be faithful to, they stay on the caption plate, where black
   under white is legible by construction and an arbitrary photograph is not.
   ============================================================ */
/* ACCENT FOLLOWS THE SLIDE'S FAMILY, NOT ITS POSITION (owner direction
   2026-08-20). The four-tint positional cycle dressed whatever slide sat at
   index 2 in Academy purple and index 3 in Talents green — with the seeded
   five-slide deck that meant "INFOC ACADEMY" wore green, "TALENTS GATEWAY"
   wore blue, and a Solutions slide wore purple. The runtime now stamps
   `data-slide-fam` for slides routed to a page-wide-accent family
   (`route-path.ts` PAGE_FAMILY_BY_PREFIX, CMS-D-132: talents + academy, no
   others) and `data-slide-accent` (mod 2) for the house-blue majority — the
   two attrs are mutually exclusive, so no cascade race. The purple and green
   tints are family identity (footer route band `--rt`, B-10-V21) and are no
   longer reachable by position. */
body.ioc-site .ioc-hero-v6-visual{--ioc-slide-accent:var(--ioc-on-inverse-blue);position:relative;min-height:460px}
body.ioc-site .ioc-hero-v6-visual[data-slide-accent="1"]{--ioc-slide-accent:var(--ioc-accent-on-inverse)}
body.ioc-site .ioc-hero-v6-visual[data-slide-fam="academy"]{--ioc-slide-accent:var(--ioc-on-inverse-purple)}
body.ioc-site .ioc-hero-v6-visual[data-slide-fam="talents"]{--ioc-slide-accent:var(--ioc-on-inverse-green)}
/* The photo fills the panel; the caption is lifted out of the flex flow. */
body.ioc-site .ioc-hero-v6-slide-img{flex:1;min-height:460px}
/* CMS-D-200 (owner, 2026-08-29): after reviewing full-width and translucent
   treatments live and on localhost (CMS-D-199: full width at 90%, then 70%, a
   white look-test, then fit-to-text at 90%), the owner ruled the band back to
   the comp's own treatment: FIT TO TEXT (left:0, width:auto capped at 80%) on
   SOLID ink -- no translucency. This line is again verbatim HeroSlider-standalone
   except that history: CMS-D-199 stands reverted by CMS-D-200, both in docs/SOT.md. */
body.ioc-site .ioc-hero-v6-slide-body{position:absolute;left:0;bottom:0;max-width:80%;width:auto;border-top:0;padding:24px;background:var(--ioc-g100,#161616);box-shadow:inset 0 -3px 0 var(--ioc-slide-accent)}
body.ioc-site .ioc-hero-v6-slide-k{display:block;margin:0 0 8px;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.16em;color:var(--ioc-slide-accent);opacity:1}
body.ioc-site .ioc-hero-v6-slide-t{display:block;margin:0 0 12px;font-size:21px;font-weight:800;letter-spacing:-.026em;line-height:1.14;min-height:0;color:var(--ioc-text-on-color,#fff)}
/* The foot row keeps BOTH the link and the controls, on the plate. Moving the
   controls out to the panel's top-right was tried first and is impossible in
   CSS alone: they are nested INSIDE the caption, so once the caption became
   `position:absolute` it also became their containing block and `top/right`
   resolved against the plate — measured as a direct overlap of the link.
   Reaching the panel would mean re-parenting them in the variant template.
   Keeping them on the plate is better anyway: the comp ships no controls at
   all, so there is no placement to be faithful to, and black plate under white
   controls is legible by construction where a photograph is not. */
body.ioc-site .ioc-hero-v6-slide-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px}
body.ioc-site .ioc-hero-v6-slide-link{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--ioc-slide-accent);border-bottom:0;padding-bottom:0}
body.ioc-site .ioc-hero-v6-slide-link:hover{color:var(--ioc-text-on-color,#fff);border-bottom:0}
body.ioc-site .ioc-hero-v6-slide-link:focus-visible{outline:2px solid var(--ioc-slide-accent);outline-offset:2px}
body.ioc-site .ioc-hero-v6-slide-controls{position:static;gap:12px}
/* ④ the rail */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-head,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-block-head,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] h2,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-kicker{display:none}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"].ioc-block,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-block{padding-block:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-cards{gap:0;background:var(--ioc-g100,#161616);border:0;border-top:1px solid rgba(255,255,255,.22)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card{background:transparent;border:0;box-shadow:inset -1px 0 0 rgba(255,255,255,.22);padding:24px;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;align-items:center;justify-content:start;gap:8px;grid-column:auto}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card:last-child{box-shadow:none}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-media{display:none}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-eyebrow{font-family:var(--ioc-mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;color:var(--ioc-on-inverse-blue);margin:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="tal"] .ioc-card-eyebrow{color:var(--ioc-on-inverse-green)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="aca"] .ioc-card-eyebrow{color:var(--ioc-on-inverse-purple)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card h3,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card strong,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-link{font-size:16px;font-weight:700;letter-spacing:-.018em;line-height:1.25;color:var(--ioc-text-on-color,#fff);margin:0}
/* The comp's cell anatomy: glyph inline BEFORE the kicker, the arrow inline
   AFTER the title, one tight two-row rhythm. The card has NO body wrapper —
   children sit directly on the article — so the grid lives on the card:
   row 1 = the `.ioc-card-ix` icon + eyebrow, row 2 = title + arrow. A cell
   with no destination renders its link as `href="#"` (the template always
   emits the element); the comp draws no arrow there, so it is hidden. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card p:not(.ioc-card-eyebrow):not(.ioc-card-ix),
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-tags{display:none}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-ix{display:block;grid-column:1;grid-row:1;margin:0;line-height:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-cardicon{width:15px;height:15px;margin:0;color:var(--ioc-on-inverse-blue)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="tal"] .ioc-cardicon{color:var(--ioc-on-inverse-green)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="aca"] .ioc-cardicon{color:var(--ioc-on-inverse-purple)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-eyebrow{grid-column:2/4;grid-row:1;margin:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card h3{grid-column:1/3;grid-row:2;margin:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-link{grid-column:3;grid-row:2;display:inline-flex;align-items:center;margin:0;padding:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-link[href="#"]{display:none}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-link svg{width:15px;height:15px;color:var(--ioc-text-on-color,#fff)}
/* The revision's rail has no family top rules — the kickers carry the colour.
   F38's 3px is !important, so this must match the flag. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam]{border-top:0!important;background:transparent}
/* The rail's two family cells are ROUTES, not copy — §V's footer route strip
   (same revision, same ink-cell anatomy) gives the treatment: the WHOLE cell
   hovers to accent blue. The template's only anchor is the 15px arrow
   (.ioc-card-link), so it stretches over the card to make the whole cell the
   hit area; the family kicker/glyph flip white on the blue ground like the
   strip's uniform white. Static cells (no route-fam value) keep still. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card{position:relative}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card .ioc-card-link:not([href="#"])::after{content:"";position:absolute;inset:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="tal"]:hover,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="aca"]:hover{background:var(--ioc-blue,#0001ff)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="tal"]:hover .ioc-card-eyebrow,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="aca"]:hover .ioc-card-eyebrow,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="tal"]:hover .ioc-cardicon,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="aca"]:hover .ioc-cardicon{color:var(--ioc-text-on-color,#fff)}
/* (the credential slots 2-3 mask retired with the strip — chips note in §D) */
@media(max-width:860px){body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-cards{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   V · Footer route strip (Home-standalone revision). The comp draws the
   three action cells on the measure as an ink grid with 1px white-22
   hairline gaps; each cell: a 40px bordered icon box · flex-grown text
   (15/600 title over 12.5 sub) · an 18px arrow flush at the cell's right;
   the WHOLE cell hovers to accent blue. The kit's light treatment (grey
   hover, accent icons, side borders) is superseded for the ink footer.
   The comp's 22/26/28px insets snap to 24 (DESIGN.md scale; T17).
   ============================================================ */
/* The strip sits FLUSH at the footer's top in the revision — the ink footer's
   64px head-room moves below the strip so the menu columns keep their air. */
body.ioc-site .ioc-footer{padding-top:0}
body.ioc-site .ioc-footer .footer-routes{border-bottom:1px solid rgba(255,255,255,.22)}
body.ioc-site .ioc-footer .footer-main{padding-top:48px}
/* The 48px above IS the head-room — but the kit grid's own
   `padding-block:clamp(56px,6vw,88px)` (infoc-cms.css:441) survived underneath
   it, so the columns sat 136px below the strip against the comp's 56
   (Home.dc.html:373). Zeroed here; the comp's closing anatomy — 36px, a
   container-width hairline, then the legal row (:375) — snaps to the scale as
   32px (this section's own precedent; T17). The hairline is currentColor at
   the strip hairline's 22% because it sits on the SKIN-SWAPPED band, where a
   white literal disappears on the white-footer skins, and the token vocabulary
   has no footer-hairline role (see §N's `.back-top` note). */
body.ioc-site .ioc-footer .footer-main-grid{padding-block:0 32px;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
/* The comp's legal band is the footer's own ground (Home.dc.html:358 — one
   surface, the hairline above is the only separator). The kit's fixed
   `--ioc-g100` band also stranded §L's re-pointed ink: `--ioc-footer-text` is
   BLACK on the white-footer skins, on a band that stayed #161616. Transparent
   means the band reads the footer-surface/footer-text pair the skin contract
   already proves — and the two controls the kit tuned to the always-ink band
   (`.back-top` on `--ioc-text-on-color`, `.social` on `--ioc-g30`/`--ioc-g80`)
   move onto the same pair for the same reason. */
body.ioc-site .ioc-footer .legal{background:transparent}
body.ioc-site .ioc-footer .back-top{color:var(--ioc-footer-text,#fff);border-color:color-mix(in srgb,currentColor 22%,transparent)}
body.ioc-site .ioc-footer .social a,
body.ioc-site .ioc-footer .social button{color:var(--ioc-footer-text,#fff);border-color:color-mix(in srgb,currentColor 22%,transparent)}
/* No width cap here: the element is `.fwrap.route-grid`, so the kit's fwrap
   already holds it to `--ioc-maxw`, and §X below re-declares the geometry on
   the site measure anyway. The literal 1280px this rule once carried was the
   retired Home grid (§O's 2026-08-21 spine ruling) and was already dead under
   §X's later same-specificity override. */
body.ioc-site .ioc-footer .route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:0}
body.ioc-site .ioc-footer .route{min-height:0;display:flex;align-items:center;gap:16px;padding:24px;border:0;box-shadow:inset -1px 0 0 rgba(255,255,255,.22);background:var(--ioc-g100,#161616);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route:last-child{box-shadow:none}
body.ioc-site .ioc-footer .route>span:not(.rn){flex:1;min-width:0}
body.ioc-site .ioc-footer .route .rn{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route .rn svg{width:20px;height:20px}
body.ioc-site .ioc-footer .route b{font-size:15px;font-weight:600;margin-bottom:4px;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route small{font-size:12.5px;line-height:1.5;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route .ico{flex:none;width:18px;height:18px;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route:hover{background:var(--ioc-blue,#0001ff);color:var(--ioc-text-on-color,#fff)}
@media(max-width:860px){body.ioc-site .ioc-footer .route-grid{grid-template-columns:1fr}}

/* ============================================================
   W · Capability-gap role router (B-10-V21, CapabilityGap-standalone
   2026-08-17). Four role tabs over train-vs-hire card pairs — Academy
   purple vs Talents green via data-route-fam and the family tokens. The
   comp's inset ring/top-bar shadows become real borders (CMS-D-066 r4),
   its 7/10/11/14/22/26/30px steps snap to the DESIGN.md scale, and
   `[hidden]{display:none}` is restated because the panel is a grid (the
   B-10-V20 lesson). Selection is enhanceTabs' — no CSS radio hack.
   ============================================================ */
body.ioc-site .ioc-capgap-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
body.ioc-site .ioc-capgap-tab{display:flex;align-items:center;gap:12px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);padding:16px;font-size:15px;font-weight:700;letter-spacing:-.016em;color:var(--ioc-text-primary);cursor:pointer;text-align:left}
body.ioc-site .ioc-capgap-tab-ic{width:18px;height:18px;flex:none}
body.ioc-site .ioc-capgap-tab[aria-selected="true"]{background:var(--ioc-g100,#161616);border-color:var(--ioc-g100,#161616);color:var(--ioc-text-on-color,#fff)}
/* The comp hovers an unselected tab with an inset accent ring
   (`[data-roles] label:hover > span{box-shadow:inset 0 0 0 1px #0001ff}`);
   rings became real borders here (CMS-D-066 r4), so the border carries it. */
body.ioc-site .ioc-capgap-tab:not([aria-selected="true"]):hover{border-color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-capgap-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.ioc-site .ioc-capgap-panel[hidden]{display:none}
body.ioc-site .ioc-capgap-card{display:flex;flex-direction:column;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);border-top:4px solid var(--ioc-accent,#0001ff)}
body.ioc-site .ioc-capgap-card[data-route-fam="aca"]{border-top-color:var(--ioc-fam-academy,#6929c4)}
body.ioc-site .ioc-capgap-card[data-route-fam="tal"]{border-top-color:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-capgap-media{display:block;height:150px;overflow:hidden;background-color:var(--ioc-g20,#e0e0e0);background-size:cover;background-position:50% 40%}
body.ioc-site .ioc-capgap-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
body.ioc-site .ioc-capgap-card[data-route-fam="aca"] .ioc-capgap-media{background-color:var(--ioc-fam-academy,#6929c4)}
body.ioc-site .ioc-capgap-card[data-route-fam="tal"] .ioc-capgap-media{background-color:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-capgap-body{display:flex;flex-direction:column;flex:1;padding:24px;min-width:0}
body.ioc-site .ioc-capgap-krow{display:flex;align-items:center;gap:8px;margin-bottom:16px}
body.ioc-site .ioc-capgap-glyph{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;background:var(--ioc-fam-academy,#6929c4);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-capgap-card[data-route-fam="tal"] .ioc-capgap-glyph{background:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-capgap-glyph svg{width:16px;height:16px}
body.ioc-site .ioc-capgap-k{font-family:var(--ioc-mono);font-size:10px;font-weight:500;letter-spacing:.15em;color:var(--ioc-fam-academy,#6929c4)}
body.ioc-site .ioc-capgap-card[data-route-fam="tal"] .ioc-capgap-k{color:var(--ioc-fam-talents-ink,var(--ioc-fam-talents,#1a7a52))}
body.ioc-site .ioc-capgap-card strong{display:block;font-size:22px;line-height:1.16;font-weight:800;letter-spacing:-.028em;margin-bottom:8px}
body.ioc-site .ioc-capgap-d{display:block;font-size:14.5px;line-height:1.55;margin-bottom:16px;color:var(--ioc-text-primary)}
body.ioc-site .ioc-capgap-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
body.ioc-site .ioc-capgap-tags i{display:inline-flex;align-items:center;height:28px;padding:0 8px;background:var(--ioc-g10,#f4f4f4);border:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-style:normal;font-size:10.5px;letter-spacing:.05em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-capgap-tags i:empty{display:none}
body.ioc-site .ioc-capgap-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;height:48px;padding:0 16px;min-width:230px;align-self:flex-start;background:var(--ioc-fam-academy,#6929c4);color:var(--ioc-text-on-color,#fff);font-size:14.5px;font-weight:600}
body.ioc-site .ioc-capgap-card[data-route-fam="tal"] .ioc-capgap-cta{background:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-capgap-cta:hover{filter:brightness(1.12)}
body.ioc-site .ioc-capgap-cta svg{width:16px;height:16px;flex:none}
@media(max-width:860px){body.ioc-site .ioc-capgap-tabs{grid-template-columns:repeat(2,1fr)}body.ioc-site .ioc-capgap-panel{grid-template-columns:1fr}}

/* ============================================================
   Z · Motion floor. Every transition/transform this sheet adds gets the
   same reduced-motion treatment the kit applies to its own (e.g.
   infoc-cms.css:1174, :1251, :1684).
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  body.ioc-site .ioc-card-media img,
  body.ioc-site .ioc-head-link svg,
  body.ioc-site .ioc-tabs-tab,
  body.ioc-site .ioc-tabs-links a svg,
  body.ioc-site .ioc-tabs-actions-link svg,
  body.ioc-site .ioc-plat-link,
  body.ioc-site .ioc-plat-layer{
    transition:none;
  }
}

/* ⑤ methodology illustrations in the four solution-body figures (V6_IMAGES
   illustration library, 2026-08-16). The library's methodology diagrams are
   16:9 left-to-right FLOWS — the base `.ioc-media-fig img` 5/4 cover-crop
   amputates ~30% of their width, so exactly these four instances render at
   the diagram's own ratio. Scoped by page prefix + variant (the ③b enquiry
   precedent), never by row index, so a reseed that shifts rows cannot
   detach them. Photos everywhere else keep the 5/4 book. */
body.ioc-site [data-block-instance^="p-solutions-business-applications-"][data-variant-id="B-05-V04"] .ioc-media-fig img,
body.ioc-site [data-block-instance^="p-solutions-cloud-modern-work-security-"][data-variant-id="B-05-V08"] .ioc-media-fig img,
body.ioc-site [data-block-instance^="p-solutions-data-ai-"][data-variant-id="B-05-V08"] .ioc-media-fig img,
body.ioc-site [data-block-instance^="p-solutions-managed-services-"][data-variant-id="B-05-V08"] .ioc-media-fig img{
  aspect-ratio:16/9;
}

/* ⑥ B-11-V21 grid-fill tile (owner direction, 2026-08-16). A 3-column card
   grid whose count is not a multiple of three left bordered BLANK cells on
   14 pages; the fix is a trailing card carrying only a media band
   (routeFam `fill`), spanning from its own cell to the grid's last line.
   The band element exists on every V21 card, so an unfilled one must
   collapse — and the fill card's text elements (empty h3/p/link, the
   admin-label title never renders) are hidden wholesale. `min-height`
   keeps the tile from collapsing when it is the row's only auto-height
   child; the img cover + focal vars come from rule D above. */
body.ioc-site .ioc-card .ioc-card-media:empty{display:none}
/* `span 2`, not `auto / -1` — a definite end line with an auto start resolves
   to span 1 ENDING at -1 (the tile lands in the last column and the blank
   moves to the middle; measured before this fix). Every V21 placement today
   is a 4-card grid, so the remainder is exactly 2 at three columns — and at
   the ≤960px two-column collapse the same span makes a full-width banner row.
   At the ≤620px single-column collapse a span of 2 would mint an implicit
   second column, so it resets to auto there. */
body.ioc-site .ioc-cards .ioc-card[data-route-fam="fill"]{padding:0;grid-column:span 2}
body.ioc-site .ioc-cards .ioc-card[data-route-fam="fill"] > :not(.ioc-card-media){display:none}
body.ioc-site .ioc-cards .ioc-card[data-route-fam="fill"] .ioc-card-media{height:100%;min-height:240px;aspect-ratio:auto}
@media(max-width:620px){body.ioc-site .ioc-cards .ioc-card[data-route-fam="fill"]{grid-column:auto;min-height:200px}}

/* ⑦ B-21-V05 office map — the CMS-D-032 click-to-load facade.
   The map used to be an unconditional OpenStreetMap embed frame baked into the
   variant's templateHtml: no cookie, but four requests left the browser on
   every /contact load and each disclosed the visitor's IP to a third party
   before any consent choice existed. (The host is deliberately not spelled as a
   URL in this comment — T19 grades loader positions by pattern, and a comment
   that reads like one is a finding nobody can act on.) The frame is now mounted
   by the SAME facade YouTube and Vimeo use (`.consent-box` + `[data-infoc-consent]`,
   `KitRuntimeAdapters.client.tsx`), which the kit sheet styles for the admin
   preview only (`infoc-admin-preview.css:267`) — the public sheet has no
   `.consent-box` rule at all, so the panel's presentation lives here.
   CMS-D-078 both ways: the office card, the badge and the map panel render
   whether or not anyone ever presses the button; only the third-party request
   is withheld. The frozen kit already owns everything AFTER the press —
   `.ioc-office-map iframe{position:absolute;inset:0;width:100%;height:100%}`
   (infoc-cms.css:1642) — so nothing here describes the loaded state, and the
   mounted frame fills the panel exactly as the baked one did.
   Focus is the kit's own `:focus-visible{box-shadow:var(--ioc-shadow-focus)}`
   (infoc-cms.css:184); no focus rule is restated here.
   Spacing is on DESIGN.md's scale (24 · 12 · 16), so T17's v6 ceiling is
   unmoved; every colour is a `var(--ioc-…)` the frozen sheet declares, so
   T16 ① sees no new literal. */
/* Owner direction 2026-08-17: the unloaded facade must not be a bare grey
   void. A code-owned map-sketch ground — fine token-grid "streets" on the
   soft surface with the office marked by an accent square over a hairline
   ring — so the panel reads as a map at rest. NOTHING is fetched: the real
   tiles still load only on the visitor's press (CMS-D-032). */
body.ioc-site .ioc-office-map:has(.consent-box){background:var(--ioc-g10,#f4f4f4);background-image:linear-gradient(var(--ioc-g20,#e0e0e0) 1px,transparent 1px),linear-gradient(90deg,var(--ioc-g20,#e0e0e0) 1px,transparent 1px),linear-gradient(45deg,transparent 48%,var(--ioc-g20,#e0e0e0) 48%,var(--ioc-g20,#e0e0e0) calc(48% + 1px),transparent calc(48% + 1px));background-size:48px 48px,48px 48px,192px 192px}
body.ioc-site .ioc-office-map:has(.consent-box)::after{content:"";position:absolute;left:50%;top:30%;width:12px;height:12px;transform:translateX(-50%);background:var(--ioc-blue,#0001ff);box-shadow:0 0 0 4px var(--ioc-surface,#fff),0 0 0 5px var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-office-map .consent-box{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;background:transparent}
body.ioc-site .ioc-office-map .ioc-office-load{position:relative;background:var(--ioc-surface,#fff)}
body.ioc-site .ioc-office-map .ioc-office-load{max-width:34ch;padding:12px 16px;font-family:var(--ioc-sans);font-size:14px;font-weight:600;line-height:1.4;color:var(--ioc-text-primary);background:var(--ioc-surface);border:1px solid var(--ioc-text-primary);cursor:pointer;transition:background .18s var(--ioc-ease),color .18s var(--ioc-ease),border-color .18s var(--ioc-ease)}
body.ioc-site .ioc-office-map .ioc-office-load:hover{background:var(--ioc-accent);border-color:var(--ioc-accent);color:var(--ioc-text-on-color)}
@media(prefers-reduced-motion:reduce){body.ioc-site .ioc-office-map .ioc-office-load{transition:none}}

/* ============================================================
   Q · Page-wide-family all-accent enforcement (owner rulings, 2026-08-17;
   decision entries OWED): Talents Gateway pages are ALL-GREEN and Academy
   pages are ALL-PURPLE. The family-accent standard
   (infoc-cms.css:1108-1112) routes --ioc-accent to each page-wide family's
   colour on [data-page-family="Talents Gateway"/"Academy"], but two
   defects kept surfaces on those routes painting house blue over it:
   ① this sheet's own §O kicker re-pin (`body.ioc-site .ioc-kicker`,
     :1508) spells `--ioc-blue` directly, so the family override never
     reaches any kicker;
   ② the absorbed legacy `.btn` (infoc-cms.css:2013,
     `background:var(--ioc--blue)`) FOLLOWS the canonical
     `.btn-primary`/`.btn-tertiary`/`.btn-on-dark` treatments (:245-256)
     at equal (0,1,0) specificity, so source order makes EVERY site button
     solid blue and the canonical accent treatments never paint — which is
     also why `.btn-tertiary` renders as a second primary instead of the
     outline the comps draw (Talents.dc.html hero secondary:
     `box-shadow:inset 0 0 0 1px #0001ff` on transparent). That clobber is
     a SITE-WIDE cascade defect; per the no-silent-scope rule it was
     corrected here ONLY inside the family scope the owner ruled on. The
     site-wide half is now closed by §AP below (CMS-D-2xx②); these rules
     stay byte-identical and keep outranking §AP on the family routes.
   The comps themselves keep kickers and the secondary CTA blue on these
   pages — the owner ruled that the two page-wide families carry their
   family accent on ALL page accents, so that residue is deliberately not
   reproduced. Global chrome (header/nav, cookie notice, chat launcher,
   skip-link, wordmark, the sh-progress blue→green ramp) stays house blue:
   shared by every route, it is not a page accent. The footer CTA band
   joins the scope via Footer.tsx carrying data-page-family on talents and
   academy routes (same commit) — it renders outside KitPageBody's wrapper
   and never inherited the family accent at all.
   Every value resolves through --ioc-accent/-hover/-ink, so the
   Appearance skin's family values (talents #0e6027, academy purple on the
   V6 skin) govern and every other page is pixel-identical. Industries/
   Company stay out on purpose: infoc-cms.css:1113 scopes them to the
   closing band only, and widening THAT is its own decision.
   ============================================================ */
body.ioc-site [data-page-family="Talents Gateway"] .ioc-kicker,
body.ioc-site [data-page-family="Academy"] .ioc-kicker{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site [data-page-family="Talents Gateway"] .btn-primary,
body.ioc-site [data-page-family="Academy"] .btn-primary{background:var(--ioc-accent)}
body.ioc-site [data-page-family="Talents Gateway"] .btn-primary:hover,
body.ioc-site [data-page-family="Talents Gateway"] .btn-primary:active,
body.ioc-site [data-page-family="Academy"] .btn-primary:hover,
body.ioc-site [data-page-family="Academy"] .btn-primary:active{background:var(--ioc-accent-hover)}
body.ioc-site [data-page-family="Talents Gateway"] .btn-tertiary,
body.ioc-site [data-page-family="Academy"] .btn-tertiary{background:transparent;color:var(--ioc-accent-ink,var(--ioc-accent));border-color:var(--ioc-accent)}
body.ioc-site [data-page-family="Talents Gateway"] .btn-tertiary:hover,
body.ioc-site [data-page-family="Academy"] .btn-tertiary:hover{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
body.ioc-site [data-page-family="Talents Gateway"] .btn-on-dark,
body.ioc-site [data-page-family="Academy"] .btn-on-dark{background:var(--ioc-accent)}
body.ioc-site [data-page-family="Talents Gateway"] .btn-on-dark:hover,
body.ioc-site [data-page-family="Academy"] .btn-on-dark:hover{background:var(--ioc-accent-hover)}

/* ============================================================
   AP · SITE-WIDE legacy-.btn counter (CMS-D-2xx② — supersedes only the
   site-wide residue §Q's comment left flagged; §Q's rules above stay
   byte-identical and, at (0,3,1), still outrank this layer on the two
   family routes, so talents/academy render exactly as before).
   The absorbed legacy `.btn` (infoc-cms.css:2035 — §Q's ":2013" cite is
   stale line drift) follows the canonical `.btn-primary`/`.btn-tertiary`/
   `.btn-on-dark` treatments (:245-267) at equal (0,1,0) specificity, so
   source order painted EVERY site button solid house-blue and
   `.btn-tertiary` rendered as a second primary on every route outside
   the family scopes. These rules re-assert the canonical accent
   treatments at (0,2,1): they beat the clobber AND the generated
   correction layer (equal specificity — this sheet loads LAST in the
   site.css concat, copy-render-kit-runtime.mjs), and LOSE to every
   scoped treatment already ruled: §Q, the blue band (:4438-4441 below),
   the 404 column (§AK/§Z), the knocked-out answer-panel CTA (:450).
   Every value routes through --ioc-accent/-hover/-ink (default #0001ff,
   infoc-cms.css:25), so primary/on-dark are pixel-identical on default
   pages while tertiary returns to the comps' outline, and Appearance
   skins' accent finally reaches buttons. The property set mirrors §Q
   EXACTLY (no hover box-shadow, no metric restores): adding either
   would also change family-route rendering, which this entry forbids.
   Bare `.btn` (global chrome stays house blue per §Q's ruling),
   `.btn-secondary` and `.btn-ghost` stay with the clobber — no live
   accent consumer; a template adopting one later must extend this
   section AND packages/standard/tests/btn-cascade-contract.spec.ts in
   the same commit.
   ============================================================ */
body.ioc-site .btn-primary{background:var(--ioc-accent)}
body.ioc-site .btn-primary:hover,
body.ioc-site .btn-primary:active{background:var(--ioc-accent-hover)}
body.ioc-site .btn-tertiary{background:transparent;color:var(--ioc-accent-ink,var(--ioc-accent));border-color:var(--ioc-accent)}
body.ioc-site .btn-tertiary:hover{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-on-dark{background:var(--ioc-accent)}
body.ioc-site .btn-on-dark:hover{background:var(--ioc-accent-hover)}
/* The kit's latent ghost-on-dark contract (infoc-cms.css:266-267) must
   survive the two rules above: without these, (0,2,1)/(0,3,1) would
   repaint a transparent variant solid. Kit bytes, re-asserted. */
body.ioc-site .btn-on-dark.is-ghost{background:transparent}
body.ioc-site .btn-on-dark.is-ghost:hover{background:var(--ioc-text-on-color,#fff)}
/* tone_01 on B-06 is a free publisher-reachable string (maxLength 8),
   so `.ioc-cta-band.dark` can carry a tertiary today. On ink it takes
   the blue band's translucent treatment (:4440-4441 pattern) through
   the INVERTING role — the site-skin contract's dark-band net
   (site-skin-contract.spec.ts) requires --ioc-text-on-primary here,
   never the fixed --ioc-text-on-color. */
body.ioc-site .ioc-cta-band.dark .btn-tertiary{color:var(--ioc-text-on-primary,#fff);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ioc-text-on-primary,#fff) 60%,transparent)}
body.ioc-site .ioc-cta-band.dark .btn-tertiary:hover{background:color-mix(in oklch,var(--ioc-text-on-primary,#fff) 12%,transparent);color:var(--ioc-text-on-primary,#fff)}

/* ============================================================
   T · PDPA consent tick — the comp's small print (owner ruling,
   2026-08-17; recorded 2026-08-19 as CMS-D-145). Every V6 comp draws the agree row as
   quiet small print directly above the button (Contact.dc.html:327:
   18px box, 12.5px/1.55 label in text-secondary, no card chrome) — the
   engine draws it through the generic checkbox branch, which the frozen
   kit styles as a boxed bold choice card (infoc-cms.css:1903-1910).
   Both renderers now add `ioc-consent` to that one fieldset (markup.ts +
   infoc-runtime.js, same commit) and this strips the card back to the
   comp's print. The DOM is unchanged — [data-required-group] validation
   and the error summary still hold — so this layer is presentation only.
   Spacing stays on the 4px scale (T17): the comp's 10px gap renders as
   12px; the input keeps the kit's own 3px optical offset. The checkbox
   is width/height (not snapped), and 12.5px is a font size, not spacing.
   ============================================================ */
body.ioc-site .ioc-consent .ioc-choices{display:block;border:0;background:transparent;overflow:visible}
body.ioc-site .ioc-consent .ioc-choice{padding:0;background:transparent;box-shadow:none;min-height:0;gap:12px}
body.ioc-site .ioc-consent .ioc-choice:hover{background:transparent}
/* A TICKED consent row must not shout (owner ruling 2026-08-25). This rule
   already dropped the fill and the shadow, but not the two properties the
   checked state actually paints: measured, a ticked consent row resolved
   `border-color:rgb(0,1,255)` and `color:rgb(0,1,255)` — the whole
   acknowledgement turned house blue and became the second-loudest element in
   the panel, louder than the question above it and competing with the submit.

   Ticking a consent box is the EXPECTED state, not an achievement, so it gets
   no accent. The checkbox itself keeps the accent: that is the confirmation
   signal, and it is the one part a visitor looks at to check they ticked it.
   Scoped positively on `.ioc-consent`, which is what keeps it clear of
   `consent-print-contract.spec.ts` — that spec governs `font-size`/
   `font-weight` on `.ioc-choice b`, and neither is touched here.

   `.ioc-choices` is in the selector to WIN, not for tidiness. The rule that
   paints the accent is `body.ioc-site .ioc-choices .ioc-choice:has(input:
   checked)` — identical specificity (0,3,2) and later in the concatenated
   sheet, so a same-weight rule here silently loses on source order. Measured
   before the extra class: `border-color` still resolved `rgb(0,1,255)` with
   this rule live and matching. Naming the intermediate class takes it to
   (0,4,2) and settles it by weight instead of by position, which is the only
   form that survives the sheet being re-concatenated in a different order. */
body.ioc-site .ioc-consent .ioc-choices .ioc-choice:has(input:checked){background:transparent;box-shadow:none;border-color:var(--ioc-border-subtle)}
body.ioc-site .ioc-consent .ioc-choices .ioc-choice:has(input:checked) b{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-consent .ioc-choice input{width:18px;height:18px}
body.ioc-site .ioc-consent .ioc-choice b{font-size:12.5px;font-weight:400;letter-spacing:0;line-height:1.55;color:var(--ioc-text-secondary)}

/* ============================================================
   W · Talk-to-INFOC topic chips (TalkToInfoc-standalone.html, owner
   revision 2026-08-17). The comp's "what is this about?" row is a wrap of
   toggle CHIPS, not the `.ioc-choices` card grid the radio groups use:
   each chip is a bordered pill that fills with accent blue when picked,
   its own checkbox visually hidden (the chip IS the control). `.ioc-multi`
   is the key both renderers emit (markup.ts + infoc-runtime.js). Steps are
   4/8/12/16 — DESIGN.md scale, so T17's ceiling is unmoved.
   ============================================================ */
body.ioc-site .ioc-multi .ioc-choices{display:flex;flex-wrap:wrap;gap:8px;border:0;background:transparent;overflow:visible;padding:0}
/* `position:relative` is LOAD-BEARING, not cosmetic. The input below is
   `position:absolute;inset:0;width:100%;height:100%`, so without a positioned
   ancestor it resolves against the INITIAL CONTAINING BLOCK and every hidden
   checkbox becomes a full-viewport invisible overlay — measured at 1440×1050.
   Ten of them stacked over the page meant every click anywhere landed on the
   topmost one, so exactly one chip (the last) could ever be selected and the
   rest of the page under them was unclickable. */
body.ioc-site .ioc-multi .ioc-choice{position:relative;flex:0 0 auto;min-height:0;padding:8px 12px;gap:0;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);box-shadow:none;cursor:pointer}
/* The checkbox is hidden but still FOCUSABLE and still hit-tested — `opacity:0`
   inside the chip, never `display:none` (which would drop it from the tab order
   and from `form.elements`, taking the group validator with it). No negative
   margin: the classic clip-rect recipe's `margin:-1px` is an off-scale value
   T17 counts, and inset:0 inside the positioned chip does the same job. */
body.ioc-site .ioc-multi .ioc-choice input{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer;border:0;appearance:none}
body.ioc-site .ioc-multi .ioc-choice b{font-size:13px;font-weight:500;letter-spacing:-.008em;line-height:1.4;color:var(--ioc-text-primary)}
body.ioc-site .ioc-multi .ioc-choice:hover{border-color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-multi .ioc-choice:has(input:checked){background:var(--ioc-blue,#0001ff);border-color:var(--ioc-blue,#0001ff);box-shadow:none}
body.ioc-site .ioc-multi .ioc-choice:has(input:checked) b{color:var(--ioc-text-on-color,#fff)}
/* Keyboard reachability survives the hidden input: the chip carries the ring. */
body.ioc-site .ioc-multi .ioc-choice:has(input:focus-visible){outline:2px solid var(--ioc-blue,#0001ff);outline-offset:2px}
/* The authored helper line sits between legend and chips (both renderers). */
body.ioc-site .ioc-multi .ioc-fhint{margin:4px 0 12px}
body.ioc-site .ioc-field .ioc-fhint{margin:4px 0 8px}

/* ============================================================
   X · Subscription plan cards (B-11-V22, Marketplace-standalone.html,
   owner-delivered 2026-08-17). The comp's catalogue card: a mono unit
   label over the SKU name, the audience line, then a checked entitlement
   list. Its 5/7/12/14/20px steps snap to the DESIGN.md scale (T17), and
   its `box-shadow:inset 0 0 0 1px #e0e0e0` ring becomes a real 1px border
   (CMS-D-066 r4). An unfilled entitlement collapses so a shorter plan
   renders without a blank row — the `<span>` wrapper exists for exactly
   that test, since the check glyph would otherwise keep the row alive.
   ============================================================ */
body.ioc-site .ioc-card.ioc-plan{display:flex;flex-direction:column;padding:24px;gap:0}
body.ioc-site .ioc-card.ioc-plan .ioc-card-eyebrow{font-family:var(--ioc-mono);font-size:9.5px;font-weight:500;letter-spacing:.13em;color:var(--ioc-text-secondary);margin:0 0 12px}
body.ioc-site .ioc-card.ioc-plan h3{font-size:18px;font-weight:800;letter-spacing:-.022em;line-height:1.2;margin:0 0 4px}
body.ioc-site .ioc-card.ioc-plan>p:not(.ioc-card-eyebrow){font-size:13.5px;line-height:1.5;color:var(--ioc-text-secondary);margin:0 0 16px}
body.ioc-site .ioc-plan-inc{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
body.ioc-site .ioc-plan-inc li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;color:var(--ioc-text-primary)}
/* The comp nudges the glyph down 2px to sit on the first line's optical
   centre; 2 is off the DESIGN.md scale (T17), so the same alignment comes
   from matching the glyph box to the line box instead — `height:1.45em` IS
   the li's line-height, so the 14px mark centres itself and a wrapping
   entitlement still aligns to its first line. */
body.ioc-site .ioc-plan-inc li svg{width:14px;height:1.45em;flex:none;color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-plan-inc li:has(span:empty){display:none}

/* ============================================================
   X · Marketplace catalogue: tile identity, tile action, filter toolbar
   (CMS-D-184 MKT-03/04/05).

   Every spacing value is on the DESIGN.md scale (4/8/12/16/24/32/48) because
   T17 measures the RENDERED value and is not fooled by respelling it.

   THE `[hidden]` RULES ARE LOAD-BEARING, not defensive noise. The UA
   stylesheet's `[hidden]{display:none}` loses to ANY author rule, and
   `.ioc-card.ioc-plan` sets `display:flex` right above. Without these, the
   island would set `hidden` on a filtered-out tile and the tile would stay
   on screen — the filter would silently do nothing.
   ============================================================ */

/* The mount ships `hidden` and carries only data attributes; the island fills
   it and clears `hidden`. Styling it directly (rather than a separate built
   element) is what lets the island add no node to the page, so the
   `data-infoc-ready` guard stays a correct idempotence check. */
body.ioc-site .ioc-mktbar{padding:0 0 24px;border-bottom:1px solid var(--ioc-border-subtle);margin:0 0 32px}
body.ioc-site .ioc-mktbar-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
body.ioc-site .ioc-mktbar-search{display:flex;align-items:center;gap:8px;flex:1 1 280px;min-width:0;border:1px solid var(--ioc-border-subtle);padding:0 12px}
body.ioc-site .ioc-mktbar-search svg{width:16px;height:16px;flex:none;color:var(--ioc-text-secondary)}
body.ioc-site .ioc-mktbar-input{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;font-size:13px;color:var(--ioc-text-primary);padding:12px 0}
body.ioc-site .ioc-mktbar-chips{display:flex;flex-wrap:wrap;gap:8px}
/* Not `.btn`: the legacy `.btn` rule in infoc-cms.css paints every button
   house-blue and would swallow the unselected chip state whole. */
body.ioc-site .ioc-mktchip{border:1px solid var(--ioc-border-subtle);border-radius:0;background:none;font:inherit;font-size:12px;color:var(--ioc-text-secondary);padding:8px 12px;cursor:pointer}
body.ioc-site .ioc-mktchip:hover{border-color:var(--ioc-blue,#0001ff);color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-mktchip.is-on{background:var(--ioc-blue,#0001ff);border-color:var(--ioc-blue,#0001ff);color:var(--ioc-text-on-color,#fff)}
/* Its own row rather than the end of the control row. Pinned right with
   `margin-left:auto` it ended flush against the container edge with no
   breathing room at 1440, and was the first thing to be squeezed at every
   width below it. A result count reads fine under the controls. */
body.ioc-site .ioc-mktbar-count{flex:0 0 100%;margin:4px 0 0;font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-text-secondary)}
body.ioc-site .ioc-mktbar-empty{margin:16px 0 0;font-size:13px;color:var(--ioc-text-secondary)}

/* Filtered-out tiles, grids and headings. See the note above — each overrides
   an author `display`, which is why they are specific rather than bare
   `[hidden]`. The head/grid pair exists because the section holding the
   toolbar hides its CONTENTS rather than itself. */
body.ioc-site .ioc-cards .ioc-card[hidden]{display:none}
body.ioc-site section.ioc-block[hidden]{display:none}
body.ioc-site .page-layout-cell[hidden]{display:none}
body.ioc-site .ioc-block .ioc-head[hidden]{display:none}
body.ioc-site .ioc-block .ioc-cards[hidden]{display:none}

/* Tile identity. */
body.ioc-site .ioc-card.ioc-plan .ioc-card-ix{margin:0 0 12px;line-height:0}
body.ioc-site .ioc-card.ioc-plan .ioc-cardicon{width:24px;height:24px;display:block;color:var(--ioc-blue,#0001ff)}
/* An unset icon resolves to `href="…svg#"`, which paints NOTHING while still
   occupying its box — the exact defect CMS-D-184 ① repaired on this page.
   `infoc-cms.css` already carries this rule for `.infoc-cms`; the site side
   had none, so the collapse is declared here too. */
body.ioc-site .ioc-card-ix svg:has(use[href$="#"]){display:none}

/* Tile action. `margin-top:auto` pins it to the card foot so a row of plans
   with uneven entitlement counts still lines its actions up.

   THE RULE IS EDGE TO EDGE, which takes negative margins. The anchor sits
   INSIDE the card's 24px padding, so its `border-top` stopped 24px short at
   both flanks and read as an underline under the link rather than a divider
   across the card. Pulling the box out by the padding and putting the same
   value back as padding keeps the TEXT where it was and lets only the rule
   travel. Both numbers are the card's own padding — if that changes, these
   change with it.

   `margin-top:auto` alone gave NO space above the rule on a full card: auto
   distributes free space, and a card with four entitlements has none, so the
   divider landed hard against the last row. The 24px above it comes from
   `.ioc-plan-inc`'s margin instead — a floor that does not depend on how much
   room is left over. Flex margins do not collapse, so the two compose. */
body.ioc-site .ioc-plan-cta{display:inline-flex;align-items:center;gap:8px;margin:auto -24px 0;padding:16px 24px 0;border-top:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-blue,#0001ff);text-decoration:none}
body.ioc-site .ioc-plan-cta svg{width:16px;height:16px;flex:none}
body.ioc-site .ioc-plan-cta:hover{text-decoration:underline}
body.ioc-site .ioc-plan-cta.is-off{display:none}

/* ---- Separated plan tiles (owner ruling 2026-08-26) ----
   The kit's `.ioc-cards` is a STITCHED grid: `gap:1px` over a container border,
   with border-less cards, so the gap IS the hairline between them. The
   catalogue wants discrete boxes instead, so the three moves have to happen
   together — a gap without a per-card border would leave the tiles edgeless,
   and a per-card border without dropping the container's would draw a box
   around the whole grid.

   Scoped to the variant, NOT to `.ioc-cards`: that class is the site's card
   grid everywhere, and THE DIFFERENCE two sections below is deliberately still
   stitched (same owner, same day). */
body.ioc-site [data-variant-id="B-11-V22"] .ioc-cards{gap:16px;background:transparent;border:0}
body.ioc-site [data-variant-id="B-11-V22"] .ioc-card.ioc-plan{border:1px solid var(--ioc-border-subtle)}
body.ioc-site [data-variant-id="B-11-V22"] .ioc-plan-inc{margin-bottom:24px}


/* ============================================================
   X · Footer route band (FooterRouteBand.html, owner ruling 2026-08-18).
   Round 2, against the comp side by side — round 1 shipped four departures
   the comp did not ask for, each fixed below and each named so the next
   reader knows it was measured, not guessed.

   ① FULL BLEED. The comp labels itself "FULL WIDTH · SITS ABOVE THE FOOTER
      LINK GRID", and its cells run edge to edge so the four foot rules meet
      and cross the whole band. Round 1 left the kit's `padding:0 gutter` on
      `.footer-routes`, so the rules stopped a gutter short at both flanks and
      read as a broken line. The band sheds the inset; each CELL carries its
      own padding instead, which is where the comp puts it.
   ② THE TINTS ARE THE COMP'S. Round 1 read the solid family colours at
      2.45:1 on the ink ground, correctly refused them, and then over-corrected
      to plain white — losing the colour coding the band exists for. The comp
      already solved this: on ink it uses LIGHT tints (#a3adff #78a9ff #6fdc8c
      #be95ff), which clear AA comfortably. DESIGN.md forbids inventing a hex
      "not in the mock or tokens" — these ARE the mock's, so they are
      transcription, the same standing CMS-D-122 gives off-scale spacing.
   ③ THE GLYPHS. One 14px sprite icon per kicker, from the owned sheet:
      dashboard · store · people · education. Round 1 dropped them and called
      a four-icon vocabulary a separate decision; the comp had already chosen
      it, and the sprite already carries all four.
   ④ THE DIVIDER + THE OUTLINED SECOND ACTION. Each secondary cell rules off
      its action from its copy, and the comp's "All solutions" is an OUTLINED
      button beside the filled one, not an underlined text link.

   Motion is a 120ms colour/background transition only — no transform, no
   decorative motion (DESIGN.md anti-patterns).

   MARKETPLACE gets its own accent here rather than borrowing the house blue,
   which made two of four rules identical. It is declared as a token with a
   truthful fallback (T16 ⑨), site-scoped in this sheet. Promoting it into the
   per-site skin contract, with its own AA pairs in site-skin-contract.spec.ts,
   is the follow-up that decision owns.
   ============================================================ */
body.ioc-site{--ioc-fam-marketplace:#0043ce}
body.ioc-site .ioc-footer .footer-routes{padding:0}
/* BOXED, not bled (owner ruling 2026-08-18): the four cells sit inside the
   site container like every other band on the page. Round 2 pushed them edge
   to edge, which made the band the widest thing on the site and cost it the
   card reading the comp has. Only `.route-rule` below is full width. */
/* THE BOX IS THE SITE MEASURE (owner direction 2026-08-20). The literal
   1280px predated `--ioc-maxw:1360px` and left the band 40px inset from the
   header/footer containers on each side — the one band on the page that did
   not line up with the wordmarks. Same fix on `.route-rule` below, which
   mirrors this geometry by contract. */
body.ioc-site .ioc-footer .route-grid{max-width:var(--ioc-maxw,1360px);margin:0 auto;padding:0 var(--ioc-gutter);grid-template-columns:2fr 1fr 1fr 1fr;align-items:stretch;border:0}
body.ioc-site .ioc-footer .route{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px;border-right:1px solid rgba(255,255,255,.14);box-shadow:none;transition:background 120ms linear,color 120ms linear}
body.ioc-site .ioc-footer .route:last-child{border-right:0;box-shadow:none}
/* The outer cells' own 24px inset was the second half of the misalignment:
   the first cell's text sat 24px right of the wordmarks, the last cell's
   action 24px short of the contact column's right edge. The EDGE padding goes
   to zero so the band's first and last content columns sit exactly on the
   container content edge; interior insets and the hairline dividers keep the
   card reading. Positional (:first/:last-child), not `.route-primary` — the
   store picks which cell is primary, the grid track does not move. Desktop
   only: below 900px the cells stack and every cell needs its full inset. */
@media (min-width:901px){
  body.ioc-site .ioc-footer .route:first-child{padding-left:0}
  body.ioc-site .ioc-footer .route:last-child{padding-right:0}
}
/* Each family names its rule colour AND its on-ink tint. The rule is a graphic
   element so it wears the solid colour; the words wear the tint. */
/* CMS-D-164 — `--rt` NAMES ITS TOKEN NOW, and that is the whole point of this
   edit rather than a tidy-up. These four were the on-ink steps spelled as bare
   literals, so the Appearance controls added in the same commit would have
   moved the footer's column headings and left this band behind: one green in
   the Talents column, a different green in the Talents route cell, on the same
   black band. Marketplace keeps `#78a9ff` because it has no on-ink field —
   `--ioc-accent-on-inverse` is a different, fixed role. */
body.ioc-site .ioc-footer .route[data-fam="solutions"]{--rf:var(--ioc-accent,#0001ff);--rt:var(--ioc-on-inverse-blue,#33b1ff)}
body.ioc-site .ioc-footer .route[data-fam="marketplace"]{--rf:var(--ioc-fam-marketplace,#0043ce);--rt:#78a9ff}
body.ioc-site .ioc-footer .route[data-fam="talents"]{--rf:var(--ioc-fam-talents,#1a7a52);--rt:var(--ioc-on-inverse-green,#3fdba0)}
body.ioc-site .ioc-footer .route[data-fam="academy"]{--rf:var(--ioc-fam-academy,#6929c4);--rt:var(--ioc-on-inverse-purple,#be95ff)}
body.ioc-site .ioc-footer .route .rk{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:var(--rt,#33b1ff);font-family:var(--ioc-mono)}
body.ioc-site .ioc-footer .route .rk svg{width:14px;height:14px;flex:none}
body.ioc-site .ioc-footer .route b{font-size:16px;font-weight:800;letter-spacing:-.016em;line-height:1.2;color:var(--ioc-footer-text,#fff)}
body.ioc-site .ioc-footer .route small{font-size:12px;line-height:1.5;color:var(--ioc-footer-text,#fff);opacity:.8}
/* The action sits at the cell's foot, ruled off from the copy, so four cells of
   different copy lengths still line their actions up. */
body.ioc-site .ioc-footer .route .route-go{margin-top:auto;align-self:stretch;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:700;color:var(--rt,#a3adff)}
body.ioc-site .ioc-footer .route .route-go svg{width:16px;height:16px;flex:none}
/* Whole-cell hover: the cell IS the target (the B-10-V21 treatment). */
/* HOVER IS THE LINE (owner ruling 2026-08-18). The cell used to flood with the
   family colour, which meant every word had to restate itself in white and the
   band shouted on every pass of the mouse. The reward is now the rule beneath
   the cell; the cell itself only lifts. Because the ground barely moves, the
   tints keep the contrast they were measured at — nothing has to change colour
   to stay readable. */
body.ioc-site .ioc-footer a.route:hover{background:rgba(255,255,255,.04)}
body.ioc-site .ioc-footer .route-primary:hover{background:rgba(255,255,255,.04)}
body.ioc-site .ioc-footer a.route:focus-visible{outline:2px solid var(--rt,#a3adff);outline-offset:-4px}
/* THE PRIMARY CELL — one filled action, one outlined, the promise beneath. */
body.ioc-site .ioc-footer .route-primary{cursor:default;padding:24px 32px 24px 24px}
body.ioc-site .ioc-footer .route-primary b{font-size:24px;letter-spacing:-.02em;line-height:1.2}
body.ioc-site .ioc-footer .route-actions{margin-top:auto;display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
body.ioc-site .ioc-footer .route-cta{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;background:var(--ioc-accent,#0001ff);color:var(--ioc-text-on-color,#fff);font-size:14px;font-weight:700;transition:background 120ms linear}
body.ioc-site .ioc-footer .route-cta:hover{background:var(--ioc-accent-hover,#0000c4)}
body.ioc-site .ioc-footer .route-cta svg{width:16px;height:16px;flex:none}
body.ioc-site .ioc-footer .route-alt{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid rgba(255,255,255,.28);color:var(--ioc-footer-text,#fff);font-size:14px;font-weight:700;text-decoration:none;transition:border-color 120ms linear,background 120ms linear}
body.ioc-site .ioc-footer .route-alt:hover{border-color:var(--ioc-footer-text,#fff);background:rgba(255,255,255,.08)}
body.ioc-site .ioc-footer .route-assurance{font-size:12px;line-height:1.5;color:var(--ioc-footer-text,#fff);opacity:.7}
@media (max-width:900px){
  body.ioc-site .ioc-footer .route-grid{grid-template-columns:1fr}
  body.ioc-site .ioc-footer .route{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
}

/* ============================================================
   Y · Talk-desk CTA band (B-17-V11, TalkToInfoc-standalone.html,
   owner-delivered). The comp's single campaign block: the pitch and its
   two rails on the left, the form card on the right, one decision on the
   screen. Steps are the DESIGN.md scale (T17); the comp's inset rings are
   real 1px borders (CMS-D-066 r4) and the accent is house blue.
   ============================================================ */
/* THE BAND OPENS HIGHER THAN A CONTENT SECTION DOES. The comp's copy column
   starts 52px under its shell; inheriting `.ioc-block`'s site-wide 84px put
   148px of white between the header and the kicker on a page whose only job
   is the first screen. 48px is the scale step nearest the comp (T17). */
body.ioc-site .ioc-talkdesk{padding-top:48px;padding-bottom:48px}
body.ioc-site .ioc-talkdesk .ioc-td-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:start}
/* The comp's 40px holds from ~950px up; below that it runs to five lines on a
   phone, so the step is fluid rather than fixed. Bounds are TYPE, not spacing —
   T17 grades spacing declarations only. */
body.ioc-site .ioc-talkdesk .ioc-td-copy h2{font-size:clamp(30px,4.2vw,40px);line-height:1.05;font-weight:800;letter-spacing:-.04em;margin:12px 0 16px;max-width:21ch;text-wrap:pretty}
body.ioc-site .ioc-talkdesk .ioc-lede{font-size:16px;line-height:1.55;max-width:48ch;margin:0 0 24px}
/* THE CALL CARD — the comp's `box-shadow:0 0 0 2px #000` ring, drawn as a real
   2px border on the same terms B-17-V10's cards already set (CMS-D-066 r4:
   borders, never shadows-as-structure). It is an offer, not a divider. */
body.ioc-site .ioc-talkdesk .ioc-td-call{border:2px solid var(--ioc-g100,#161616);background:var(--ioc-surface,#fff);padding:16px 24px;margin:0 0 24px}
body.ioc-site .ioc-talkdesk .ioc-td-rk{display:flex;align-items:center;gap:8px;font-family:var(--ioc-mono);font-size:10.5px;font-weight:500;letter-spacing:.17em;color:var(--ioc-blue,#0001ff);margin:0 0 8px}
/* The live dot. Green because it states that the line is answered now. */
body.ioc-site .ioc-talkdesk .ioc-td-dot{display:block;width:8px;height:8px;flex:none;background:var(--ioc-success,#198038)}
body.ioc-site .ioc-talkdesk .ioc-td-tel{display:inline-flex;align-items:center;gap:8px;font-size:24px;font-weight:800;letter-spacing:-.028em;color:var(--ioc-text-primary);line-height:1.15}
body.ioc-site .ioc-talkdesk .ioc-td-tel svg{width:20px;height:20px;flex:none;color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-talkdesk .ioc-td-tel:hover{color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-talkdesk .ioc-td-hours{font-size:14px;line-height:1.55;color:var(--ioc-text-secondary);margin:8px 0 0}
body.ioc-site .ioc-talkdesk .ioc-td-hours a{color:var(--ioc-blue,#0001ff)}
/* THE PLATFORM PANEL — this page's ONE dark band (WIRING.md §5.3). */
body.ioc-site .ioc-talkdesk .ioc-td-panel{background:var(--ioc-g100,#161616);color:var(--ioc-text-on-color,#fff);padding:24px;margin:0 0 24px}
body.ioc-site .ioc-talkdesk .ioc-td-pk{font-family:var(--ioc-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--ioc-on-inverse-blue,#33b1ff);margin:0 0 16px}
/* Two columns, hairline-separated. The dividers are BORDERS, not a `gap:1px`:
   a 1px gap is off DESIGN.md's scale and would raise T17's v6 ceiling for a
   line that a border draws identically. */
body.ioc-site .ioc-talkdesk .ioc-td-chips{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;padding:0;list-style:none}
body.ioc-site .ioc-talkdesk .ioc-td-chip{display:flex;align-items:center;gap:12px;padding:12px;font-size:13px;font-weight:600;letter-spacing:-.012em;color:var(--ioc-text-on-color,#fff);border-top:1px solid rgba(255,255,255,.22)}
body.ioc-site .ioc-talkdesk .ioc-td-chip:nth-child(odd){border-right:1px solid rgba(255,255,255,.22)}
body.ioc-site .ioc-talkdesk .ioc-td-chip:nth-child(-n+2){border-top:0}
body.ioc-site .ioc-talkdesk .ioc-td-chip svg{width:16px;height:16px;flex:none;color:var(--ioc-on-inverse-blue,#33b1ff)}
body.ioc-site .ioc-talkdesk .ioc-td-chip:empty,body.ioc-site .ioc-talkdesk .ioc-td-chip:has(span:empty){display:none}
/* THE PROMISES — the page's only risk-reversal copy, and the reason the left
   column reaches the form's foot instead of stopping 358px above it. An empty
   slot hides, so an unseeded site renders a shorter column, never a bare tick. */
body.ioc-site .ioc-talkdesk .ioc-td-promises{display:flex;flex-direction:column;gap:12px;margin:0;padding-top:24px;list-style:none;border-top:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-talkdesk .ioc-td-promise{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.5;color:var(--ioc-text-primary)}
body.ioc-site .ioc-talkdesk .ioc-td-promise svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-talkdesk .ioc-td-promise:has(span:empty){display:none}
body.ioc-site .ioc-talkdesk .ioc-td-promises:not(:has(.ioc-td-promise:not(:has(span:empty)))){display:none}
/* THE FORM IS ONE PANEL, NOT TWO. The mount used to carry its own border and
   32px of padding around `.ioc-form`, which carries a border and 36px of its
   own — two rings with nothing between them but 68px of air. The mount is now
   bare and the form itself is the comp's 2px-ringed card, with its title
   bleeding to the edges as the comp's ink header bar. */
body.ioc-site .ioc-talkdesk .ioc-td-form .ioc-form{border:2px solid var(--ioc-g100,#161616);padding:0 24px 24px;gap:24px}
body.ioc-site .ioc-talkdesk .ioc-td-form .ioc-form-title{margin:0 -24px;background:var(--ioc-g100,#161616);color:var(--ioc-text-on-color,#fff);padding:16px 24px;font-size:14px;font-weight:700;letter-spacing:-.012em}
@media(max-width:900px){
  /* minmax(0,1fr), NOT 1fr: a bare `1fr` floors at the column's MIN-CONTENT,
     and the form's inputs make that wider than a 390px viewport — the page
     scrolled 5px sideways. */
  body.ioc-site .ioc-talkdesk .ioc-td-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  body.ioc-site .ioc-talkdesk .ioc-td-chips{grid-template-columns:1fr}
  body.ioc-site .ioc-talkdesk .ioc-td-chip:nth-child(odd){border-right:0}
  body.ioc-site .ioc-talkdesk .ioc-td-chip:nth-child(2){border-top:1px solid rgba(255,255,255,.22)}
}

/* THE RULE STRIP — the ONE full-width element. It mirrors the grid's own
   2fr 1fr 1fr 1fr, so each segment is its route's share of the PAGE and the
   outer two bleed past the container the cells stop at.
   BLUE IS THE DEFINED FALLBACK (owner ruling): a family whose accent token is
   missing, and any family this stylesheet has no rule for, resolves to the
   house accent rather than to nothing — a segment that renders transparent
   would read as a gap in the rule, which is worse than the wrong blue. */
/* ALIGNED TO THE SECTION, not to the page (owner ruling 2026-08-18). The strip
   used to grid its four segments across the VIEWPORT while the cells were boxed
   to the container — so every segment was wider than its cell and shifted right
   of it, and hovering Talents lit a line that started mid-cell and ran past
   Academy. It now carries the SAME geometry as `.route-grid` — same max-width,
   same auto margins, same gutter, same 2fr 1fr 1fr 1fr — so each segment is
   exactly its own cell wide and sits directly beneath it. The two must be
   changed together: they are one measurement expressed twice, because the rule
   is a sibling of the grid rather than a child of the cell. */
body.ioc-site .ioc-footer .route-rule{display:grid;max-width:var(--ioc-maxw,1360px);margin:0 auto;padding:0 var(--ioc-gutter);grid-template-columns:2fr 1fr 1fr 1fr;height:3px}
body.ioc-site .ioc-footer .route-rule span{background:var(--ioc-accent,#0001ff);opacity:0;transition:opacity 140ms linear}
/* `:has()` because the rule is a SIBLING of the grid, not a child of the cell:
   the line must span the page while the cells stay boxed, so the two cannot be
   nested. Keyboard parity is deliberate — `:focus-visible` reveals the same
   segment, so the affordance is not mouse-only. */
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="solutions"]:hover) .route-rule span[data-fam="solutions"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="solutions"]:focus-visible) .route-rule span[data-fam="solutions"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="marketplace"]:hover) .route-rule span[data-fam="marketplace"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="marketplace"]:focus-visible) .route-rule span[data-fam="marketplace"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="talents"]:hover) .route-rule span[data-fam="talents"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="talents"]:focus-visible) .route-rule span[data-fam="talents"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="academy"]:hover) .route-rule span[data-fam="academy"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="academy"]:focus-visible) .route-rule span[data-fam="academy"]{opacity:1}
body.ioc-site .ioc-footer .route-rule span[data-fam="solutions"]{background:var(--ioc-accent,#0001ff)}
body.ioc-site .ioc-footer .route-rule span[data-fam="marketplace"]{background:var(--ioc-fam-marketplace,#0043ce)}
body.ioc-site .ioc-footer .route-rule span[data-fam="talents"]{background:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-footer .route-rule span[data-fam="academy"]{background:var(--ioc-fam-academy,#6929c4)}
@media (max-width:900px){
  body.ioc-site .ioc-footer .route-rule{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   AA · Route-family CARD contract — the register closes, and the
   hand-off band becomes ONE variant (owner ruling 2026-08-18,
   CMS-D-130). Extends CMS-D-128 ① from page-wide family accents to the
   per-CARD family the same palette already implies.

   THE DEFECT THIS CLOSES. The card family mechanism has shipped since
   CMS-D-071 W6 (`infoc-cms.css:1648-1661` — top rule, 4% tint, tinted
   eyebrow/icon/link, hover, focus ring) and `routeFam` has been an
   admin field on every B-11 card since (`blocks/one/data-cards.ts:50`).
   Measured across the 23 seeded pages: 205 B-11 cards, 13 carrying a
   family, ELEVEN of those rendering one. Meanwhile the footer draws the
   same three or four routes in full colour on every one of those pages.
   The page contradicted itself about whether a route has identity —
   coloured at the foot, grey in the body. Nothing here is a new design;
   it is the design that was already built, finally reaching the cards.

   (1) ONE KEY JOINS THE REGISTER, AND IT IS NOT A NEW HEX.
       `sec` took `--ioc-fam-security #9f1853` when this section landed.
       SUPERSEDED by CMS-D-168: `sec` now resolves to house blue and that
       token is retired, because the reason it was held back in the first
       place (a token with no consumer) returned the moment the fold
       removed its only rule. The paragraph is kept because the rest of
       this section's argument still stands. Meanwhile the
       seed has been authoring `sec` on two cards the whole time (/home
       "Secure the platform", /solutions "Cloud, Modern Work &
       Security"); with no rule to match, `--rf` fell through to the page
       accent and both read as generic blue. Silent rather than broken,
       which is exactly why it survived a year of review.
       It measures 7.70:1 on the card ground. The closed set and its AA
       pairs are pinned by `route-family-contract.spec.ts`, so a new key
       cannot be typed into the seed without a rule to render it — the
       failure mode that produced `sec` in the first place.

       `mkt` IS DELIBERATELY NOT ADDED, and that is the same reasoning
       running the other way. `--ioc-fam-marketplace #0043ce` exists at
       section X and is reachable only from `.ioc-footer`, so a card
       cannot paint a Marketplace route — and section X's own comment
       names closing that as the follow-up it owes. But NO CARD IN THE
       SEED LINKS TO `/marketplace`: not one of the 205. A
       `[data-route-fam="mkt"]` rule would therefore be markup that no
       document can produce, which is precisely the dangling defect that
       held `sec` back — and adding the key while inventing a Marketplace
       hand-off card to justify it would break SOT 8 rule 1. The key
       lands when a real card routes there and its copy is authored.

   (2) THE HAND-OFF BAND IS B-11-V20, AND ONLY B-11-V20.
       Five bands across the site route the visitor to Solutions /
       Academy / Talents / Technologies, drawn on FOUR different
       variants. Two sat on V05, whose item contract has no `fam` key and
       no `data-route-fam` in its template, so those two could not carry
       a family however the content was authored — a content fix would
       have bounced off them forever. V20 is V05's item shape with the
       family attribute added and the trailing note dropped (neither band
       used it), so the swap is lossless and the content keys are
       identical. WIRING.md 5.3's "one class contract per block type",
       applied to a moment that had four.

   (3) THE ICON PLATE IS SCOPED TO V20, NOT GLOBAL.
       The footer route cell frames its glyph in a bordered box; that is
       the band's most recognisable move, and it is what makes the body
       band and the footer band read as one family of object rather than
       two designs that happen to share a palette. It is applied HERE
       ONLY: V17/V18/V21 ship their own measured icon treatments (the
       home V21 rules at 15px, section above) and a global plate would
       silently restyle every one of them. Hairline, radius 0, family
       colour — CMS-D-066 r4. It is deliberately a SQUARE: an icon in a
       coloured circle is the house style of every template on the
       internet, and radius 0 is a locked rule besides.
   ============================================================ */
/* CMS-D-168 - `sec` FOLDS INTO HOUSE BLUE, same ruling and same reasoning as
   `dat` above. Security is a service area too. `--ioc-fam-security` is
   RETIRED with it: this sheet was its only declaration and this rule its
   only consumer, so leaving it declared would be the T16 (2)b orphan the
   gate refuses. 3 live cards. */
body.ioc-site .ioc-cards [data-route-fam="sec"]{--rf:var(--ioc-blue);--rfi:var(--ioc-blue)}

/* An empty icon slot must not leave its margin behind. `.ioc-card-ix`
   carries `margin:0 0 18px` (infoc-cms.css:1222) and the kit hides only
   the SVG when the sprite id is blank (:1989), so a card authored with
   no icon paid 18px of lead for a glyph it never drew. Hide the WRAPPER,
   and only when its sole child is that blank-href svg, so the monogram
   variants (V12/V18) that put TEXT in the same paragraph are untouched.
   Specificity is deliberate: this lands at (0,4,2) against the plate
   rule below at (0,4,1), so an icon-less V20 card draws no empty box. */
body.ioc-site .ioc-card .ioc-card-ix:has(> svg:only-child > use[href$="#"]){display:none}

/* (3) the plate. */
body.ioc-site [data-variant-id="B-11-V20"] .ioc-card .ioc-card-ix{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 0 16px;border:1px solid color-mix(in oklch,var(--rf) 34%,var(--ioc-surface,#fff))}
body.ioc-site [data-variant-id="B-11-V20"] .ioc-card .ioc-card-ix .ioc-cardicon{width:20px;height:20px;color:var(--rfi)}
body.ioc-site [data-variant-id="B-11-V20"] .ioc-card:hover .ioc-card-ix{border-color:var(--rf)}

/* ============================================================
   AB · An empty icon slot must not reserve its lead (owner report
   2026-08-18, /talents "Evidence model" and the four bands like it).

   `.ioc-feature .ioc-fmark` (infoc-cms.css:1244) carries
   `margin-bottom:clamp(14px,1.4vw,20px)`, and the kit hides only the SVG
   when the sprite id is blank (`:1988`). The wrapper therefore stayed in
   flow at height ZERO with its full bottom margin — measured on /talents:
   `h:0, margin-bottom:20px` — so every feature card authored without an
   icon paid 20px of lead, on top of `.ioc-feature`'s own 34px padding, for
   a glyph it never drew. Thirty items across five bands did exactly that.

   The real fix is authoring the icons, and this round does that. This rule
   is the SAFETY NET for the next item authored without one, so the failure
   mode degrades to "no icon" instead of "no icon and a hole where it was".

   `:only-child` is load-bearing. `.ioc-fmark` is also the numbered variants'
   mono numeral slot (34-46px, `--ioc-g30`), and a numeral is TEXT in the same
   wrapper — without the guard, a numbered item that also carried a blank svg
   would lose its number. Same guard, same reason, as the `.ioc-card-ix` rule
   in section AA above.

   NOT A DEFECT, checked and recorded so the next reader does not re-open it:
   `.ioc-card-tags` and `.ioc-card-link[href="#"]` were both suspected of the
   same waste. They are not — `infoc-cms.css:1985` already collapses a tag row
   whose tags are all empty, and the dead card link is already hidden. Measured
   live on /talents: 8 tag rows and 8 dead links, ZERO of each visible.
   ============================================================ */
body.ioc-site .ioc-feature .ioc-fmark:has(> svg:only-child > use[href$="#"]){display:none}

/* ============================================================
   AC · The HEADER joins the page family (owner ruling 2026-08-18,
   CMS-D-132). Extends CMS-D-128 (1), which took the family accents page-wide
   in <main> and explicitly left "global chrome house blue".

   WHY AN ATTRIBUTE HAD TO BE ADDED IN TSX FIRST. `data-page-family` is emitted
   by `KitPageBody` on `body > main > article > div.infoc-cms`, and `<header>`
   is a SIBLING of `<main>` — measured, not assumed. No descendant selector
   from the page wrapper can ever reach the chrome, which is the identical
   structural reason the footer CTA band grew its own attribute under
   CMS-D-128. `Header.tsx` now sets it from `route-path.ts#pageFamilyOf`, the
   single route-to-family map (the copy that lived in `Footer.tsx` was folded
   into it, because two copies is how the band and the chrome drift apart).

   WHY THE TOKENS ARE REMAPPED RATHER THAN TEN SELECTORS RESTATED. Every blue
   in the header spells `var(--ioc-blue)` or `var(--ioc--blue)` LITERALLY, not
   `var(--ioc-accent)` — so the family scope alone moved none of them. Listing
   the selectors (wordmark, top CTA, mega labels, view-all, featured rail and
   its inline SVGs, which inherit through currentColor) would be a list that
   silently rots as the header grows. Remapping the two blue tokens inside this
   one scope moves everything downstream, including SVG fills nobody enumerated.
   `--ioc--blue` (double dash) is NOT a typo: it is the absorbed legacy layer's
   parallel token namespace, declared in `infoc-cms.css`, and the wordmark reads
   it. Both are mapped or the "C" stays blue while the CTA turns green.

   THIS IS SAFE HERE AND WOULD NOT BE ON THE FOOTER. The header has no
   per-route colour system, so remapping its blue is unambiguous. The footer
   does: `.route-cta` and `.route-rule span[data-fam="solutions"]` resolve
   `--ioc-accent` as the SOLUTIONS cell's own identity, so the same treatment
   there would paint Solutions green on /talents. `Footer.tsx` records that
   rejection at its root element; the route band keeps its per-route palette on
   every page, and its CTA band keeps the attribute CMS-D-128 gave it.

   No new hex: token to token, so T16 (1) sees no literal and DESIGN.md rule 3
   holds. Contrast is unchanged from the values the family scope already ships.
   ============================================================ */
body.ioc-site .ioc-header[data-page-family="Talents Gateway"]{
  --ioc-blue:var(--ioc-fam-talents);
  --ioc--blue:var(--ioc-fam-talents);
  --ioc-blue-hover:var(--ioc-fam-talents-hover);
}
body.ioc-site .ioc-header[data-page-family="Academy"]{
  --ioc-blue:var(--ioc-fam-academy);
  --ioc--blue:var(--ioc-fam-academy);
  --ioc-blue-hover:var(--ioc-fam-academy-hover);
}
/* THREE MORE TOKENS, each found by MEASURING the rendered page rather than by
   reading the sheet — the reason the list is not just `--ioc-blue`:
     `--ioc-header-active` paints the active nav underline and it is a ::AFTER,
   so an element scan cannot see it at all; on /talents the active slot is
   Talents Gateway, which would have kept a blue underline under a green
   wordmark and nobody would have caught it from the DOM.
     `--ioc-selected-border` rules the mega panel's featured rail. Its base is
   #c6d9ff, but the v6 SKIN overwrites it to #0001ff at runtime, which is why it
   survived the first pass — the value that renders is not the value the sheet
   declares.
     `--ioc-selected-surface` is the featured panel's pale wash (#edf5ff, a blue
   tint) and it has NO family equivalent — `--ioc-fam-talents-tint` and
   `-academy-tint` do not exist. Inventing the two hexes is forbidden
   (DESIGN.md, "NEVER invent a hex"), so it is DERIVED from the family accent
   with `color-mix`, the same instrument `.ioc-cards [data-route-fam]` already
   uses for its 4% card ground. Hex-free, and it follows any future skin. */
body.ioc-site .ioc-header[data-page-family]{
  --ioc-header-active:var(--ioc-accent);
  --ioc-selected-border:var(--ioc-accent);
  --ioc-selected-surface:color-mix(in oklch,var(--ioc-accent) 8%,var(--ioc-surface,#fff));
}

/* ============================================================
   AD · FORM AFFORDANCES, site-wide (owner ruling 2026-08-18, from a screenshot
   — its weight rule is scoped out of the consent tick by CMS-D-146; see (1)
   of /talk-to-infoc: "make the What is this about? items bold and focused, and
   the form easy to identify the box").

   THE MEASUREMENT. On B-17-V11 a selected topic chip changed ONE thing: its
   border colour, #e0e0e0 -> #0001ff, 1px. No fill, no weight change, no text
   colour. The native checkbox is `opacity:0;position:absolute` (kit :1907
   territory), so with the border being the only signal there is nothing else
   for the eye to catch — on a ten-chip grid a visitor cannot tell at a glance
   what they picked. The markup already ships `<b>`, and it was rendering at
   500 because nothing site-wide restated the kit's own `font-weight:600`.

   THIS IS NOT A NEW DESIGN — IT IS AN EXISTING ONE, DE-SCOPED. The good
   treatment already lived at `[data-block-instance^="p-home-"]
   [data-variant-id="B-17-V10"]` (:1203-1244): hairline border, blue border and
   tinted ground when checked, `b{font-weight:700}`. It was written for the HOME
   enquiry form and every other form on the site was left with the flat
   fallback. /talk-to-infoc is B-17-V11, so it matched none of it. Rather than
   copy the block to a second variant selector and have the same thing drift in
   two places, the rules move up to `body.ioc-site` where they describe what a
   choice chip IS. The home block keeps its own copies and still wins on
   specificity with identical values, so nothing about the home form moves.

   FIELDS BECOME A BOX, AND THAT DEPARTS FROM THE COMP. Section (1) above sets
   `border:0;border-bottom:1px` site-wide, citing Home.dc.html:341-343 —
   underline-only was faithful. The owner asked for the box, which outranks the
   comp exactly the way the white ground in (3a) already does on this same
   block. Focus keeps a real state rather than the 1px underline-colour swap the
   underline treatment could afford: border plus a 1px inset ring reads as a
   2px edge without adding a shadow-as-structure (CMS-D-066 r4).

   HINTS ARE PROSE, SO THEY ARE MANROPE. `.ioc-fhint` inherits `--ioc-mono` from
   the kit (:1925). CMS-D-066 r2 reserves JetBrains Mono for IDs, routes, tokens
   and numbers; "Pick as many as apply. Your selection decides who replies." is
   none of those, and it renders as code in the screenshot that prompted this.
   Corrected for the SITE only — the kit rule still governs the admin, where a
   hint may legitimately carry an id.

   NO NEW HEX (T16 (1)): every value is a token or a color-mix of one, and the
   selected ground uses the same instrument as `.ioc-cards [data-route-fam]`.
   ============================================================ */

/* (1) Choice chips — selection is legible without hunting for a 1px edge.

   `.ioc-choicegroup:not(.ioc-consent)` on the WEIGHT rule is CMS-D-146, and it
   is the same defect §AG/CMS-D-145 fixed one selector earlier: this rule was
   written for CHOICE CHIPS — things a visitor picks between — and an unqualified
   `.ioc-choices .ioc-choice b` also reaches the PDPA consent tick, which is a
   legal agreement and not a choice. It tied §T on specificity (both (0,3,2)) and
   won on source order, so §T's `font-weight:400` had never rendered on any page
   since this section landed: the agree line was bold everywhere, which is the
   opposite of small print. The owner ruled 400 the standard across all forms.
   The 700 itself is UNCHANGED and still the owner's 2026-08-18 ruling for the
   topic chips (the section header above); only the consent tick leaves its
   scope. The BORDER/padding rule deliberately keeps the old selector — §T
   already strips the card chrome off the consent row at higher specificity, so
   qualifying it too would add a second way to say the same thing. */
body.ioc-site .ioc-choices .ioc-choice{border:1px solid var(--ioc-border-subtle);box-shadow:none;padding:12px 16px;align-items:center}
body.ioc-site .ioc-choices .ioc-choice input{margin:0}
body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices .ioc-choice b{font-weight:700}
/* HOVER IS NEUTRAL, SELECTED IS ACCENT — and the two must never be the same
   colour. This rule used to paint `--ioc-accent` on hover, one token away
   from the `:has(input:checked)` rule below it, so a hovered-but-unchosen
   tile and a chosen one differed only by a background wash that computes to
   L≈0.999 on white. Measured on /contact: an 8% oklch accent mix over
   #ffffff is not a perceptible ground change, so the border WAS the whole
   signal and both states were spending it.
   `--ioc-g60` is the neutral edge; accent now means chosen and nothing else.
   The CMS-D-133 reasoning that put `--ioc-accent` here (rather than a
   literal `--ioc-blue`) still governs the CHECKED rules below, which is
   where family shift on /academy and /talents actually matters.
   CONSEQUENCE, owner-visible: hovering a topic chip on a family-scoped route
   now shows a grey edge instead of family purple or green. */
body.ioc-site .ioc-choices .ioc-choice:hover{border-color:var(--ioc-g60);background:var(--ioc-g10)}
/* Required, not optional. Without it the neutral hover above ties §AJ's
   multi-chip hover and wins on source order, and the marketplace/topic
   chips lose their blue language entirely. */
body.ioc-site .ioc-multi .ioc-choices .ioc-choice:hover{border-color:var(--ioc-blue)}
body.ioc-site .ioc-choices .ioc-choice:has(input:checked){
  border-color:var(--ioc-accent);
  background:color-mix(in oklch,var(--ioc-accent) 8%,var(--ioc-surface,#fff));
  box-shadow:inset 0 0 0 1px var(--ioc-accent);
}
body.ioc-site .ioc-choices .ioc-choice:has(input:checked) b{color:var(--ioc-accent-ink,var(--ioc-accent))}

/* (2) Text fields read as a box, and focus is a state rather than a hairline. */
body.ioc-site .ioc-field input,
body.ioc-site .ioc-field select,
body.ioc-site .ioc-field textarea{border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff)}
/* The inset ring is GONE, deliberately, and `outline` is NOT reset here.
   §AQ resolves --ioc-shadow-focus to none, which leaves the outline as the
   single focus ring for every control on the site; adding `outline:0` here
   would make the field the ONE control with no ring at all, indicated only
   by a 1px border-colour change. The blue border stays as reinforcement. */
body.ioc-site .ioc-field input:focus,
body.ioc-site .ioc-field select:focus,
body.ioc-site .ioc-field textarea:focus{
  border-color:var(--ioc-blue);
  box-shadow:none;
}

/* (3) Field hints are prose (CMS-D-066 r2). */
body.ioc-site .ioc-fhint{font-family:var(--ioc-sans);letter-spacing:0}

/* (4) HOVER. `.ioc-form` is the specificity lever, not a narrowing:
   packages/standard/src/forms/markup.ts puts class="ioc-form" on every
   form. (0,4,2) is required to tie §(1)'s home border-bottom rule and win
   it on source order; a (0,3,2) rule is half-painted on the home page. */
body.ioc-site .ioc-form .ioc-field input:hover,
body.ioc-site .ioc-form .ioc-field select:hover,
body.ioc-site .ioc-form .ioc-field textarea:hover{border-color:var(--ioc-g60)}

/* (5) ERROR — TWO rules, never one list. An engine that cannot parse
   :user-invalid drops the whole rule, and a combined list would take the
   .is-error fix down with it. The runtime's own .is-error state is
   currently UNPAINTED: infoc-cms.css:1916 is (0,2,1) and loses to (2)
   above at (0,2,2). */
body.ioc-site .ioc-form .ioc-field.is-error input,
body.ioc-site .ioc-form .ioc-field.is-error select,
body.ioc-site .ioc-form .ioc-field.is-error textarea{border-color:var(--ioc-danger)}
body.ioc-site .ioc-form .ioc-field input:user-invalid,
body.ioc-site .ioc-form .ioc-field select:user-invalid,
body.ioc-site .ioc-form .ioc-field textarea:user-invalid{border-color:var(--ioc-danger)}

/* (6) TEXTAREA GROWTH. `field-sizing` has no competitor in any of the five
   concat parts. Both caps are load-bearing, not tidiness: `max-width` stops
   one long unbroken token blowing out a 1fr grid column, and `max-height`
   stops the chat drawer regressing to the scrollport defect the drawer's own
   rules below pin the action row to fix. Chromium-only today; everywhere else the box stays at
   its present fixed 120px, which is exactly the current behaviour. */
body.ioc-site .ioc-field textarea{field-sizing:content;max-width:100%;max-height:40vh}
body.ioc-site .sh-chat .chat-form textarea{max-height:22vh}

/* ============================================================
   AE · Choice options are ICON + TITLE (owner ruling 2026-08-18, CMS-D-133:
   "all the form go with icon+title and no subtitle ... make all the form sleek
   and objective is to get the information").

   WHAT CHANGED IN MARKUP, so this file is read against the right DOM. The radio
   option was `<span><b>Title</b><small>Sub-line</small></span>`; it is now
   `<svg class="ioc-choiceicon">` + `<span><b>Title</b></span>`. Eight options
   across three fields (`journey`, `learning_mode`, `gateway_side`, reached by
   four presets) carried a sub-line and no longer do; their strings are deleted
   from `presets.ts` rather than left unrendered, because a value nothing draws
   is the dangling defect this repo keeps paying for.

   THE ROW BECOMES ONE LINE, SO IT CENTRES. `.ioc-choice` is
   `align-items:flex-start` in the kit (:1918 territory) — correct when a
   two-line block sat beside a radio, wrong the moment the block is a single
   title, which left the radio and the glyph riding high against the text. This
   is the whole of the "sleek": less height per option, nothing decorative
   added, and the choice still reads at a glance.

   THE GLYPH IS SECONDARY UNTIL IT IS CHOSEN. At rest it is
   `--ioc-text-secondary`, so the TITLE leads and the icon supports; on the
   selected option it takes the accent alongside the title, which is the only
   moment the icon should compete for attention. It is `aria-hidden` in the
   markup — it repeats the title rather than adding to it, so a screen reader
   must not read it twice.

   WHAT THIS DOES NOT DO: it adds no fill, no radius and no shadow. The selected
   state is entirely section AD's (border, 8% ground, inset ring) and is
   untouched here beyond the token correction above.
   ============================================================ */
body.ioc-site .ioc-choices .ioc-choice{align-items:center}
body.ioc-site .ioc-choices .ioc-choice input{margin:0}
/* 16px, not 20 (owner ruling 2026-08-18, pointing at the home route rail).
   The glyph must sit UNDER the title's cap height so the words lead and the
   mark supports; at 20px it matched the 15px title's height and competed with
   it. 16 is the reference size the rail already uses (its `.ioc-cardicon` is
   15px) rounded onto DESIGN.md's 4px vocabulary, so it is the same mark at the
   same weight without adding a third icon size to the system. */
body.ioc-site .ioc-choices .ioc-choiceicon{width:16px;height:16px;flex:0 0 auto;color:var(--ioc-text-secondary)}
body.ioc-site .ioc-choices .ioc-choice:has(input:checked) .ioc-choiceicon{color:var(--ioc-accent-ink,var(--ioc-accent))}
/* The MULTI chips need the gap back (owner report 2026-08-18: the glyph was
   touching the first letter). `.ioc-multi .ioc-choice` sets `gap:0` in the kit,
   and that was right for as long as the chip held ONE visible child: its input
   is `position:absolute`, so it leaves flex flow entirely and a gap had nothing
   to act on. The glyph is the second visible child and the zero became real.
   8px, matching the gap BETWEEN chips, so the spacing inside a chip and the
   spacing around it come from one number. The radio options are untouched:
   they already resolve the base 12px, measured. */
body.ioc-site .ioc-multi .ioc-choices .ioc-choice{gap:8px}

/* ============================================================
   AF · POPUP CAPTURE (CMS-D-136 — PopupForm-standalone.html)

   Three shells, one contract. The comp draws a corner card, a right drawer and
   a bottom bar; they differ in position and motion and share everything else,
   so the shared rules live once and each shell adds only what makes it itself.

   SPACING IS ON THE SEVEN-STEP SCALE, and where the comp was not, the value is
   CORRECTED rather than respelled: the comp's 22px card padding becomes 24, its
   30/28 drawer padding becomes 32/24, and its 16/40 bar padding becomes 16/48.
   T17's V6 ceiling is at 27 with no headroom, so an off-scale value here fails
   the build — and respelling one to dodge the detector is the trap the ratchet
   itself records.

   WIDTHS ARE NOT SPACING. 340px and 380px are the comp's own dimensions and
   T17 scans gap/padding/margin only, so they are carried verbatim.

   MOTION: the comp describes 260/320/240ms in prose and ships no keyframes.
   They are authored here as transitions on a `[data-popup-open]` state, and
   every one is disabled under `prefers-reduced-motion` — a capture surface that
   ignores that preference is worse than one that does not animate at all.
   ============================================================ */
body.ioc-site .ioc-popup{position:fixed;z-index:60;color:var(--ioc-text-primary)}
body.ioc-site .ioc-popup[hidden]{display:none}

/* The scrim belongs to the drawer alone — the other two shells leave the page
   usable, which is why only the drawer is a modal dialog. */
body.ioc-site .ioc-popup__scrim{position:fixed;inset:0;background:rgba(22,22,22,.35);opacity:0;transition:opacity 320ms ease}
body.ioc-site .ioc-popup[data-popup-open] .ioc-popup__scrim{opacity:1}

body.ioc-site .ioc-popup__panel{position:relative;background:var(--ioc-surface);border-radius:0;box-shadow:var(--ioc-shadow-pop)}
body.ioc-site .ioc-popup__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
body.ioc-site .ioc-popup__kicker{margin:0;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-popup__headline{display:block;font-size:18px;font-weight:800;letter-spacing:-.022em;line-height:1.2}
body.ioc-site .ioc-popup__sub{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ioc-text-secondary)}

/* The dismiss is a real button with a real accessible name (PopupMount supplies
   it from SITE_FALLBACKS), and it keeps a visible ring: the house treatment
   uses `outline-offset:-2px`, which a 28px control would otherwise swallow. */
body.ioc-site .ioc-popup__x{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ioc-text-secondary);cursor:pointer;padding:0}
body.ioc-site .ioc-popup__x:hover{color:var(--ioc-text-primary)}
body.ioc-site .ioc-popup__x:focus-visible{outline:2px solid var(--ioc-accent);outline-offset:-2px}
body.ioc-site .ioc-popup__x svg{width:16px;height:16px;fill:currentColor}

body.ioc-site .ioc-popup__sent{text-align:left}
body.ioc-site .ioc-popup__tick{margin:0 0 8px}
body.ioc-site .ioc-popup__tick svg{width:24px;height:24px;fill:var(--ioc-success,#198038)}
body.ioc-site .ioc-popup__sent strong{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
body.ioc-site .ioc-popup__sent p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ioc-text-secondary)}

/* 1 · CORNER SLIDE-IN — 340px, bottom right, no scrim, 260ms. */
body.ioc-site .ioc-popup--corner{right:24px;bottom:24px;width:340px;max-width:calc(100vw - 32px)}
body.ioc-site .ioc-popup--corner .ioc-popup__panel{padding:24px;transform:translateY(16px);opacity:0;transition:transform 260ms ease,opacity 260ms ease}
body.ioc-site .ioc-popup--corner[data-popup-open] .ioc-popup__panel{transform:translateY(0);opacity:1}

/* 2 · SIDE DRAWER — 380px, full height, scrim, 320ms. */
body.ioc-site .ioc-popup--drawer{inset:0}
body.ioc-site .ioc-popup--drawer .ioc-popup__panel{position:absolute;right:0;top:0;bottom:0;width:380px;max-width:100vw;padding:32px 24px;overflow:auto;transform:translateX(100%);transition:transform 320ms ease}
body.ioc-site .ioc-popup--drawer[data-popup-open] .ioc-popup__panel{transform:translateX(0)}

/* 3 · BOTTOM BAR — full width, 240ms. The comp lays it out as one row; below
   the mobile breakpoint it stacks, because seven flex children in 320px is not
   a row (WCAG 1.4.10 reflow, the rule §Y already applies to the rest of V6). */
body.ioc-site .ioc-popup--bar{left:0;right:0;bottom:0}
body.ioc-site .ioc-popup--bar .ioc-popup__panel{padding:16px 48px;transform:translateY(100%);transition:transform 240ms ease}
body.ioc-site .ioc-popup--bar[data-popup-open] .ioc-popup__panel{transform:translateY(0)}
body.ioc-site .ioc-popup--bar .ioc-popup__head{margin-bottom:4px}
body.ioc-site .ioc-popup--bar .ioc-popup__sub{display:none}
body.ioc-site .ioc-popup--bar [data-popup-body]{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
body.ioc-site .ioc-popup--bar .ioc-popup__headline{flex:0 0 auto;max-width:240px;font-size:15px}
body.ioc-site .ioc-popup--bar [data-ioc-cta-form]{flex:1 1 420px;min-width:0}
body.ioc-site .ioc-popup--bar .ioc-form-grid{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:600px){
  body.ioc-site .ioc-popup--corner{right:0;bottom:0;width:100%;max-width:100%}
  body.ioc-site .ioc-popup--drawer .ioc-popup__panel{width:100%}
  body.ioc-site .ioc-popup--bar .ioc-popup__panel{padding:16px}
  body.ioc-site .ioc-popup--bar [data-popup-body]{display:block}
}

@media (prefers-reduced-motion:reduce){
  body.ioc-site .ioc-popup__panel,
  body.ioc-site .ioc-popup__scrim{transition:none}
  body.ioc-site .ioc-popup--corner .ioc-popup__panel{transform:none;opacity:1}
  body.ioc-site .ioc-popup--drawer .ioc-popup__panel,
  body.ioc-site .ioc-popup--bar .ioc-popup__panel{transform:none}
}

/* ---- AF · the form INSIDE a popup ---------------------------------------
   THE BUG THIS FIXES: the form ran straight out of the card. A 340px corner
   card on a 1440px screen showed a 493px-wide form — 153px past its own panel.

   WHY, and it is worth stating because the same trap is waiting for the next
   narrow surface: the kit's form layout is sized by the VIEWPORT, not by its
   container. `.ioc-form-grid` is `1fr 1fr` and only collapses inside
   `@media(max-width:620px)`; `.ioc-choices` is `repeat(auto-fit,minmax(220px,1fr))`
   and cannot shrink below 220px. Both are right for B-17, which spans a page
   band and whose width really does track the viewport. A popup's width is set
   by its SHELL, so on a wide screen the media query never fires and the form
   keeps laying itself out for a band that is not there.

   The corner card and the drawer are therefore pinned to one column outright,
   and `min-width:0` is restored on the children — a grid item defaults to
   `min-width:auto`, which refuses to shrink below its content and is what turns
   a too-wide child into overflow rather than a wrap. The BOTTOM BAR is left
   alone: it is full-width by design and its own row treatment above already
   stacks it under 600px.

   No `@container` query: these two shells have known fixed widths, so a plain
   descendant rule says the same thing without asking anything of the browser. */
body.ioc-site .ioc-popup--corner .ioc-form-grid,
body.ioc-site .ioc-popup--drawer .ioc-form-grid{grid-template-columns:1fr}
body.ioc-site .ioc-popup--corner .ioc-choices,
body.ioc-site .ioc-popup--drawer .ioc-choices{grid-template-columns:1fr}
body.ioc-site .ioc-popup .ioc-form-grid > *,
body.ioc-site .ioc-popup .ioc-field,
body.ioc-site .ioc-popup .ioc-choicegroup,
body.ioc-site .ioc-popup .ioc-choice{min-width:0}
/* Long words in a label or an option must wrap rather than push the panel. */
body.ioc-site .ioc-popup .ioc-field label,
body.ioc-site .ioc-popup .ioc-choice span{overflow-wrap:anywhere}
/* The control itself never exceeds its column, whatever the kit sets. */
body.ioc-site .ioc-popup .ioc-form input,
body.ioc-site .ioc-popup .ioc-form select,
body.ioc-site .ioc-popup .ioc-form textarea{max-width:100%;box-sizing:border-box}

/* ============================================================
   AG · Symptom router — the ANSWER ROW RIDES THE TAB COLUMNS
   (B-10-V20; owner ruling 2026-08-19 — CMS-D-143 ①②③).

   Owner-reported from the rendered Home: "top row is 4 x 25%; second row
   should be 75% + 25% so it will be aligned properly." Measured on the
   running site at 1536px BEFORE the fix — the tablist's `repeat(4,1fr)`
   gap 12px gives four 295px columns at x=160/467/774/1081, while the split
   under it gave 880 + 320 with the aside starting at x=1056. The aside's
   left edge therefore sat 25px inside the fourth tab's, and the answer
   panel's right edge 41px inside the third tab's. Nothing lined up.

   THIS DEPARTS FROM THE COMP, DELIBERATELY. Home.dc.html:278 writes the
   split as `grid-template-columns:1.3fr .7fr` (65/35) with `gap:16px` over
   a tablist that is `repeat(4,1fr)` with `gap:12px` (:267) — two different
   column systems and two different gaps stacked on each other, so the comp
   is misaligned at every viewport too. The kit's base rule was a third
   system again (`minmax(0,1fr) minmax(16rem,20rem)`, i.e. a FIXED 320px
   aside, which is why the drift GREW with the viewport). The owner ruling
   replaces all three with the one thing that cannot drift: the answer row
   IS the tab grid — same four columns, same gap — with the panel spanning
   three of them. 75/25 then holds at every width by construction, rather
   than by a pair of ratios that only happen to agree at one.

   `gap:12px` here is the tablist's own value, not a new one; equal gaps are
   what make the two rows one grid, and it is why §R above no longer sets a
   gap on this rule. 12 is a DESIGN.md-scale step, and `grid-template-columns`
   / `grid-column` are not spacing properties (T17 §N ruling) — the v6
   ceiling is unmoved and this is a net REMOVAL of one spacing declaration.

   Scoped by variant id, like §R: B-10-V09 shares `.ioc-tabs-body` and keeps
   the base two-column rule. The 900px collapse has to be RESTATED because
   the base `@media` rule is (0,2,1) and this selector is (0,3,1) — media
   queries add no specificity, so without the pair below the four-column
   grid would survive onto mobile and paint four ~60px slivers.
   ============================================================ */
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-body{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-body>.ioc-tabs-answer{grid-column:span 3}
@media(max-width:900px){
  body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-body{grid-template-columns:minmax(0,1fr)}
  body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-body>.ioc-tabs-answer{grid-column:auto}
}

/* ============================================================
   AH · Home outcome cards — ONE UNIFORM HAIRLINE
   (B-11-V17; owner ruling 2026-08-19 — CMS-D-143 ④⑤).

   Owner-reported alongside §AG: "WHERE TO START section outerbox line has
   to be uniform like all other boxes." Measured on the running Home at
   1536px, the four outcome cards were the ONLY boxes on the page whose
   border was not uniform — 3px on top in the route-family colour
   (measured then as #0001ff · #0001ff · #7a3ffc · #9f1853; the last two are
   house blue since CMS-D-168 folded `dat` and `sec`, which changes the
   colours this paragraph counted but not the finding) against 1px #e0e0e0
   on the other
   three sides, where every other box on the page (the four symptom tabs,
   the WHERE IT LEADS aside) is a plain 1px #e0e0e0 hairline all round.

   §R already set `border:1px solid var(--ioc-border-subtle)` on these
   cards and noted that F38's rule "outranks the border shorthand here":
   F38 is `body.ioc-site .ioc-cards [data-route-fam]` (0,3,1) carrying
   `!important`, which no unflagged shorthand can reach. So the top side is
   restated here at (0,4,1) with the flag matched — the same move, and the
   same reason, as B-11-V21's `border-top:0!important` above (:2234).

   THE FAMILY SIGNAL IS NOT LOST, which is why this is a border change and
   not a route-family retreat. Each card still carries `data-route-fam`,
   and the harvested `[data-route-fam] .ioc-card-link{color:var(--rfi)}`
   plus the family icon tint still paint "Data & AI" purple and
   "Cloud & security" crimson. Only the frame stops competing with them.

   SCOPE IS THIS VARIANT, deliberately. F38's rule is the site-wide
   route-family CARD contract (§AA) and still renders everywhere else; the
   owner ruling was taken on the Home section it was reported against, and
   widening it would retire that contract across all 23 pages — a bigger
   decision than the one that was made. Read the divergence as "one section
   ruled, the contract intact", not as drift.
   ============================================================ */
body.ioc-site [data-variant-id="B-11-V17"] .ioc-cards .ioc-card[data-route-fam]{border-top:1px solid var(--ioc-border-subtle)!important}

/* ============================================================
   AI · A FULL-BLEED BAND MUST NOT PRODUCE A HORIZONTAL SCROLLBAR
   (owner report 2026-08-19, from a screenshot of the home page).

   `100vw` MEASURES THE VIEWPORT INCLUDING THE CLASSIC VERTICAL SCROLLBAR
   and the containing block EXCLUDES it. So the standard 50%-50vw escape
   used by `.ioc-plat-layers` (SS T, :2071) lays out one scrollbar WIDER
   than the space available, and its negative margin recentres that, so
   half a scrollbar hangs off each side. Measured at a 1896px viewport
   with a 15px scrollbar: box left -7.5, right 1888.5, clientWidth 1881
   -- an 8px document overflow, i.e. a scrollbar under every fold.

   IT DOES NOT REPRODUCE HEADLESS. Headless Chromium hides scrollbars, so
   `100vw` equals `clientWidth` there and the overflow measures ZERO. Any
   future check for this class has to run headed or reserve a gutter;
   that blind spot is why the band shipped and why no gate saw it.

   IT TAKES BOTH ELEMENTS, AND THAT WAS MEASURED, NOT REASONED. The first
   attempt was `body.ioc-site` alone, on the textbook reading that
   body-to-viewport propagation applies while `html` is `visible`. The
   propagation DOES happen -- computed `body` overflow-x really is `clip`
   -- and the page still scrolled 8px. `html` alone also still scrolled,
   with computed `html` overflow-x reading `clip` the whole time. Only
   the PAIR stops it. Measured at 1440px, `.ioc-plat-layers` present:

     none .......... SCROLLS 8px
     html only ..... SCROLLS 8px
     body only ..... SCROLLS 8px
     html + body ... no scroll

   So do not "tidy" either half away because the other looks sufficient
   or because computed style says the value took: on this defect the
   computed value and the used value disagree, and only scrollability
   tells the truth. The `:has()` keeps the root half off the admin,
   honouring this sheet's public-only rule (it is linked from
   `app/(frontend)/layout.tsx` alone, so that is belt-and-braces).

   `clip`, NOT `hidden` -- and this one is measured too, not stylistic.
   Both spellings stop the scroll; `hidden` makes the viewport a scroll
   container and BREAKS THE STICKY HEADER (measured: the header stops
   pinning at top 0 on scroll). `clip` cannot create a scroll container,
   and the header was re-checked under the shipped rule: still
   `position:sticky`, still pinned at top 0 after a 2000px scroll.

   THIS IS THE COMPLETE FIX, NOT A MASK. The band's CONTENTS are already
   placed correctly: `.ioc-plat-layer`'s `padding-inline:max(32px,
   calc(50vw - 648px))` (648 since §O's 2026-08-21 spine ruling; the
   measurement below was taken at the era's 608, and the cancellation is
   the same-vw derivation, not the constant) is derived from the SAME `vw`
   as the margin, so the two errors cancel exactly -- measured content left
   104.5px against a section heading at 104.5px, drift ZERO. Only the empty 7.5px of band
   overhanging the right edge is wrong, and clipping it is what
   "full-bleed" means. A scrollbar-aware `--ioc-sbw` variable was
   REJECTED: it would have to move the padding rule too, in order to
   preserve an alignment that is already right, and it makes layout
   depend on JS having run.

   SITE-WIDE ON PURPOSE. All 23 routes were swept and only `/` overflowed.
   The guard is written once, here, rather than per-band, so that the next
   full-bleed block cannot reintroduce the same scrollbar.

   IT IS SCOPED TO >=768px, AND THAT IS A CORRECTNESS BOUND, NOT A TASTE
   ONE. Clipping is only safe where the thing being clipped is EMPTY BAND.
   At 320px the public site has a PRE-EXISTING reflow defect that predates
   this rule: `.ioc-news` and `.ioc-cta-panel.has-form` lay out 342px-wide
   children inside a 256px parent (the automatic minimum size of a grid
   item -- `min-width:auto` plus the frozen kit's `.ioc-news
   input{min-width:200px}` -- there is no literal 342px anywhere). An
   unscoped clip turned that from CONTENT A VISITOR COULD SCROLL TO into
   CONTENT SILENTLY CUT OFF, which is a worse SC 1.4.10 outcome than the
   scrollbar. Measured on /insights at 320px: 83px of real copy. So the
   guard stops at the breakpoint above which the only overhang is the
   band's own empty 7.5px. Below it the site behaves exactly as it did
   before this rule existed -- no regression, and the a11y suite ratchets
   that residue in the open instead of clipping it out of sight.

   A PURE-CSS SCROLLBAR-SAFE BREAKOUT WAS TRIED AND REJECTED ON EVIDENCE.
   `html{--ioc-sbw:calc(100vw - 100%)}` is the classic trick, but a custom
   property substitutes TOKENS: the `100%` re-resolves against the
   consuming element's containing block (the wrap), not the root. Measured:
   the band stopped being full-bleed at every width and picked up 32px of
   drift. The JS variant (`--ioc-sbw` written by the runtime) works but
   makes layout depend on script having run, and needs the padding rule
   moved in lockstep to keep an alignment that is already correct.

   ADDS NOTHING TO THE RATCHETS: no hex (T16 (1)) and no px (T17 -- 768 is
   a BREAKPOINT, not spacing).
   ============================================================ */
@media(min-width:768px){html:has(body.ioc-site),body.ioc-site{overflow-x:clip}}

/* ============================================================
   AJ · TWO A11Y REPAIRS THE L5 SUITE FOUND (owner ruling 2026-08-19,
   closing CMS-D-153 ③'s inventory).

   1 · AUDIENCE LIST — was two DEAD BUTTONS. `Footer.tsx` rendered
   `.ioc-cta-aud > button[aria-selected]`, and `aria-selected` is not an
   attribute ARIA permits on `button` (axe's only CRITICAL finding here).
   The attribute was the symptom; the cause is that NOTHING binds a
   handler to them -- not this sheet, not `Footer.tsx`, not
   `infoc-runtime.js` -- so they sat in the tab order of every page
   carrying the panel, wearing the frozen kit's `cursor:pointer`. A
   control that cannot be operated must not be focusable. They are now
   `<li>` in a `<ul>`, with `aria-current` (allowed on any element) for
   the highlighted entry.

   The frozen kit styles `.ioc-cta-aud button` and
   `.ioc-cta-aud button[aria-selected=true]` (infoc-cms.css:1594-1595),
   which no longer match. These rules carry that appearance across
   VERBATIM -- same border, fill, padding, transition -- with two
   deliberate differences: no `cursor:pointer` (the affordance lie) and
   `list-style:none` for the new element. Rendered result is otherwise
   identical, which is why this is a markup repair and not a redesign.

   2 · IN-TEXT LINKS -- links sitting inside a run of body copy were
   distinguishable from it by COLOUR ALONE, at 1.09:1 against that copy
   (#0001ff on #525252; WCAG needs 3:1 for the colour-only route, SC
   1.4.1). Underlining is the cheaper and more robust half of the rule:
   with it the 3:1 requirement no longer applies at all. 1px keeps the
   rule on the link's own colour rather than minting one, and the offset
   keeps descenders legible.

   THREE NAMED CONTAINERS, NOT A BLANKET `p a`. The prose contexts are
   `.ioc-cta-note` (the CTA band's footnote), `.ioc-prose` (the legal
   pages' body — privacy and cookies) and `.ioc-td-hours` (the contact
   card's hours line). A blanket rule would have been shorter and wrong:
   `<p>` is a LAYOUT element in this kit, carrying `.ioc-kicker` eyebrows
   and `.ioc-card-ix` icon slots among others, so underlining every `p a`
   would have drawn rules under card links and icon anchors that are not
   in a text block at all. `.ioc-privacy` is deliberately absent — the
   form's closing privacy line already passes.

   ADDS NOTHING TO THE RATCHETS: no hex (T16 (1)); 1px/2px are BORDER and
   offset values, not spacing steps (T17 -- §N's own precedent).
   ============================================================ */
body.ioc-site .ioc-cta-aud{list-style:none;margin:0;padding:0}
body.ioc-site .ioc-cta-aud>li{flex:1 1 42%;border:1px solid var(--ioc-g30);background:var(--ioc-surface,#fff);color:var(--ioc-text-primary);padding:12px;text-align:left;font:inherit;transition:background .15s,color .15s,border-color .15s}
body.ioc-site .ioc-cta-aud>li[aria-current="true"]{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);border-color:var(--ioc-accent)}
body.ioc-site .ioc-cta-note a,
body.ioc-site .ioc-prose a,
body.ioc-site .ioc-td-hours a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* ============================================================
   AK · The 404 — the one page V6 never dressed (CMS-D-165).

   THE FINDING. Every other route got the V6 structural language;
   `.ioc-404` did not. It still rendered the base kit treatment
   (`infoc-cms.css:1572-1577`): a 640px column, centred, floating in
   white, with four equal-weight buttons in a row. Nothing about it
   said INFOC, and the page a visitor reaches when they are already
   lost was the one page with no wayfinding vocabulary on it.

   THE COLOUR RULING, and it is the load-bearing decision here.
   The kit paints `.code` in `--ioc-accent` at up to 150px. CMS-D-066
   rule 3 makes house blue the INTERACTION colour — "colour is rare
   and always means something" — so a 150px non-interactive numeral
   spends the one colour that should mean "you can act here", and it
   spends it on the least useful element. The code goes to ink; blue
   is left to the search field and the one real CTA. That is a
   recolour of a kit default by the OWNED delta sheet, which is what
   this sheet is for; the frozen kit is untouched.

   THE LAYOUT reuses the footer route band rather than inventing:
   destinations become a hairline-divided vertical list, the same
   object a visitor already met in the footer of the page they failed
   to reach. Markup is UNCHANGED (CMS-D-054 — `B-01-V10`'s template is
   canonical); every placement below is CSS grid over the existing
   DOM order (code, h1, p, form, links).

   SPACING is on the seven steps everywhere it is graded — T17's
   `v6CssOffScaleCeiling` is shrink-only at 27 and grades px inside
   `clamp()`. The hierarchy is carried by `font-size`, `min-height`,
   `max-width`, `grid-template-columns` and `border-width`, none of
   which T17 grades, so this whole section lands at an unmoved ceiling
   honestly rather than by respelling.
   ============================================================ */
body.ioc-site .ioc-404{
  max-width:100%;
  margin:0;
  padding:0;
  text-align:left;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  column-gap:48px;
  row-gap:0;
  align-items:start;
}

/* -- left column: the status, the sentence, the way out -- */
body.ioc-site .ioc-404 .code{
  grid-column:1;grid-row:1;
  font-family:var(--ioc-mono);
  font-size:clamp(52px,8vw,96px);
  font-weight:500;
  line-height:.82;
  letter-spacing:-.05em;
  /* Ink, not accent — see the colour ruling above. */
  color:var(--ioc-g100);
  padding-bottom:8px;
}
/* NO rule under the code, and that is a decision rather than an omission.
   It was authored with one and measured out: the code's border landed at
   y=297 while the destination list's first divider landed at y=249 — two
   horizontal rules 48px apart in adjacent columns, which reads as a
   near-miss rather than a grid. The columns now do different jobs: TYPE
   carries the message on the left, RULES carry the navigation on the
   right. One rule system on the page, not two competing ones. */
body.ioc-site .ioc-404 h1{
  grid-column:1;grid-row:2;
  margin:16px 0 0;
  font-size:clamp(30px,3.6vw,46px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.028em;
  max-width:18ch;
}
body.ioc-site .ioc-404 p{
  grid-column:1;grid-row:3;
  margin:12px 0 0;
  max-width:52ch;
  font-size:16px;
  line-height:1.6;
  color:var(--ioc-text-secondary);
}

/* The search is the most useful control on the page, so it reads as
   the primary one: full column width, taller than the kit default,
   and the only blue-bordered object in the left column on focus. */
body.ioc-site .ioc-404 .ioc-searchbar{
  grid-column:1;grid-row:4;
  margin:32px 0 0;
  max-width:none;
  min-height:64px;
  border:1px solid var(--ioc-g100);
}
body.ioc-site .ioc-404 .ioc-searchbar:focus-within{
  border-color:var(--ioc-accent);
  box-shadow:inset 0 0 0 1px var(--ioc-accent);
}
body.ioc-site .ioc-404 .ioc-searchbar svg{color:var(--ioc-g100)}
body.ioc-site .ioc-404 .ioc-searchbar input{font-size:17px}

/* -- right column: destinations, as the footer route band does them -- */
body.ioc-site .ioc-404-links{
  grid-column:2;grid-row:1 / span 4;
  display:flex;
  flex-direction:column;
  gap:0;
  justify-content:flex-start;
  border-top:1px solid var(--ioc-g100);
}
body.ioc-site .ioc-404-links .btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:64px;
  padding:12px 16px;
  border:0;
  border-bottom:1px solid var(--ioc-border-subtle);
  background:transparent;
  color:var(--ioc-text-primary);
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
  text-align:left;
  transition:background .16s var(--ioc-ease),color .16s var(--ioc-ease),padding-left .16s var(--ioc-ease);
}
body.ioc-site .ioc-404-links .btn:hover{
  background:var(--ioc-hover-wash);
  color:var(--ioc-accent);
  padding-left:24px;
}
/* The one real CTA keeps its weight: a filled block closing the list,
   and the only place blue is spent in this column. */
body.ioc-site .ioc-404-links .btn-primary{
  margin:16px 0 0;
  border-bottom:0;
  background:var(--ioc-accent);
  color:var(--ioc-text-on-primary,#fff);
}
body.ioc-site .ioc-404-links .btn-primary:hover{
  background:var(--ioc-blue-hover);
  color:var(--ioc-text-on-primary,#fff);
  padding-left:24px;
}
body.ioc-site .ioc-404-links .btn-primary svg{width:16px;height:16px;flex:none}

@media (max-width:900px){
  body.ioc-site .ioc-404{grid-template-columns:minmax(0,1fr);column-gap:0}
  body.ioc-site .ioc-404 .code,
  body.ioc-site .ioc-404 h1,
  body.ioc-site .ioc-404 p,
  body.ioc-site .ioc-404 .ioc-searchbar{grid-column:1}
  body.ioc-site .ioc-404-links{grid-column:1;grid-row:5;margin:32px 0 0}
}

/* -- AK continued · the destination rows get a directional mark ------------
   OWNER REQUEST 2026-08-20 ("give icon to menu on 404").

   A CHEVRON, NOT A ROUTE GLYPH, and the distinction is the whole reason this
   comment exists. The footer route band gives each cell an IDENTITY glyph from
   `Footer.tsx#ROUTE_GLYPH` — dashboard/store/people/education — and DESIGN.md
   (CMS-D-130) states "one glyph per route ... adding a second glyph for the
   same route is drift". That register covers solutions, marketplace, talents
   and academy. The 404's links are Solutions, Industries, Insights and
   Contact: only the first has a canonical glyph, so glyphing the other three
   would mean INVENTING route identity (SOT section 8 rule 1), and the sprite
   having a plausible `industry`/`information`/`email` is not the same as the
   register declaring one.

   It would also be a claim that can go false. These four links are
   store-driven and editor-editable; a per-slot identity glyph becomes a lie
   the moment someone repoints link 2, which is exactly the failure CMS-D-133
   refuses for form-choice glyphs ("an unmapped value renders no icon: never a
   fallback glyph, which would state something untrue").

   A chevron claims only "this goes somewhere", which is true of every row
   whatever the store says. Drawn from borders rather than a data-URI so the
   arrow-right sprite keeps exactly one source in the tree. The primary row
   already carries the real sprite arrow from the canonical template and is
   deliberately left alone — it is the one row whose mark is markup.
   ------------------------------------------------------------------------ */
body.ioc-site .ioc-404-links .btn-secondary::after{
  content:"";
  flex:none;
  width:9px;
  height:9px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  opacity:.5;
  transition:opacity .16s var(--ioc-ease),transform .16s var(--ioc-ease);
}
body.ioc-site .ioc-404-links .btn-secondary:hover::after{
  opacity:1;
  transform:rotate(45deg) translate(2px,-2px);
}
@media (prefers-reduced-motion:reduce){
  body.ioc-site .ioc-404-links .btn-secondary::after,
  body.ioc-site .ioc-404-links .btn-secondary:hover::after{transition:none}
}


/* ============================================================
   AL · Marketplace §THE DIFFERENCE and §HOW BUYING WORKS — a card
   grid with no column count, and a number slot carrying a phrase
   (B-03-V07 / B-13-V07; owner-reported 2026-08-20).

   ① A CARD GRID WITH NO COLUMN COUNT RENDERS AS ONE COLUMN.
   `.ioc-cards` (infoc-cms.css:1215) declares `display:grid` and no
   columns at all — the count lives entirely in the `.two`/`.three`/
   `.four` modifiers (1217-1219), which page-mapper.ts emits as
   `grid_01` from the block's stored `grid` field. The B-03-V07 template
   is `<div class="ioc-cards[[attr:grid_01]]">` with `grid_01` defaulting
   to `""`, so a block that never sets `grid` gets a BARE `.ioc-cards`:
   a one-column grid of full-width cards.

   MEASURED across the seed, not assumed: 20 of 64 card blocks carry no
   `grid` value, and every one of them is a `one-data-features` (B-03)
   block — every `one-data-cards` (B-11) block sets it. So this is not a
   marketplace typo; the B-03 authoring path never supplies the field.
   Marketplace §THE DIFFERENCE is the worst instance at 8 cards, and
   /technologies runs 13 in a single column.

   The fix restores the count the kit ALREADY declares for `.three`,
   breakpoints included (1218/1235/1236) — no new layout vocabulary. The
   `:not()` guard means it can never touch a block that does set
   two/three/four, nor `.is-rows`, which is flex (§ above) and has no
   columns to set.

   ② FOUR STEPS IN A SIX-COLUMN GRID. `.ioc-process` (1254) hard-codes
   `repeat(6,1fr)`. Every other B-13 instance in the seed has exactly six
   steps, so that constant has always matched; marketplace is the only
   one with four, and its strip ran two columns short with a third of the
   band left empty. Made count-aware rather than re-constanted, so the
   six-step instances are untouched by construction.

   The `min-width:1081px` guard is load-bearing: `body.ioc-site` outranks
   the kit's bare `.ioc-process`, so without it these rules would beat
   the kit's own collapse to 3 columns (1281) and 1 column (1282) and
   pin four columns onto a phone. The tablet arm gives the four-step case
   2×2 instead of the kit's 3-up, which would orphan its last step.

   ③ A PHRASE IN THE NUMBER SLOT. `.ioc-step-n` (1260) is sized
   `clamp(20px,1.8vw,26px)` mono with `tabular-nums` — a slot built for
   "01". The six other B-13 instances store no `mark` and render it
   EMPTY (verified on the running /how-we-help: six `<span
   class="ioc-step-n">` holding nothing but their icon). Marketplace is
   the only page that stores marks — "START A REQUEST", "DAY 1 TO 2" —
   so its labels rendered at up to 26px, wrapping inside the column and
   out-shouting the 15px `<b>` titles below them.

   Restyled to the kit's OWN eyebrow metrics (`.ioc-card-eyebrow`, 1224:
   mono / 11px / .1em / uppercase), keeping the accent colour the slot
   already carries. Left GLOBAL rather than scoped to marketplace on
   purpose: it is content-driven, so any page that later stores a mark
   gets the same treatment, and it is visually inert on the other six
   instances precisely BECAUSE their slot is empty. THE TRADE, stated:
   if a numbered process is ever authored, these metrics are wrong for
   it and the mark case will need its own class from the mapper — CSS
   cannot tell a text node from an absent one.

   ④ An empty `.ioc-card-eyebrow` still spends its `margin:0 0 10px`
   (1224). B-03 emits the element unconditionally and marketplace stores
   no eyebrow text, so all eight cards carried 10px of dead space above
   their title.
   ============================================================ */

body.ioc-site .ioc-cards:not(.two):not(.three):not(.four):not(.is-rows){
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:960px){
  body.ioc-site .ioc-cards:not(.two):not(.three):not(.four):not(.is-rows){
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:620px){
  body.ioc-site .ioc-cards:not(.two):not(.three):not(.four):not(.is-rows){
    grid-template-columns:1fr;
  }
}

@media (min-width:1081px){
  body.ioc-site .ioc-process:has(>.ioc-step:nth-child(3):last-child){
    grid-template-columns:repeat(3,1fr);
  }
  body.ioc-site .ioc-process:has(>.ioc-step:nth-child(4):last-child){
    grid-template-columns:repeat(4,1fr);
  }
  body.ioc-site .ioc-process:has(>.ioc-step:nth-child(5):last-child){
    grid-template-columns:repeat(5,1fr);
  }
}
@media (min-width:621px) and (max-width:1080px){
  body.ioc-site .ioc-process:has(>.ioc-step:nth-child(4):last-child){
    grid-template-columns:repeat(2,1fr);
  }
}

body.ioc-site .ioc-step .ioc-step-n{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.45;
}

body.ioc-site .ioc-card-eyebrow:empty{display:none}


/* ============================================================
   AM · Contact route cards — THE SELECTED ONE SAYS SO
   (B-17-V07 §CHOOSE THE RIGHT ROUTE; owner-reported 2026-08-20).

   These four cards are real `<button>`s: each preselects the enquiry
   form's `journey` radio, scrolls to the form and focuses the name
   field. Everything about their APPEARANCE said otherwise — no icon,
   and no acknowledgement after a click, so the one control the visitor
   had just used was the only surface that did not react.

   The icons and the `aria-pressed` attribute are markup, and land in
   the overlay manifest via apps/one/scripts/gen-b17-v07-route-icons.mjs.
   Only the pressed STYLE belongs in a stylesheet, and it is one rule.

   WHY AN INSET RING AND NOT A FILL. `.ioc-cards [data-route-fam]:hover`
   already takes the background to `--ioc-g10` (§ above, v6:1867), so a
   background change cannot also mean "selected" — the two states would
   be indistinguishable the moment the pointer rested on the chosen
   card. An inset ring in the card's own route-family colour is
   orthogonal to hover, reads at a glance, and changes no background,
   so no text/background contrast pair moves at all.

   The hairline is RE-DECLARED, not replaced: `.ioc-cards>*` draws every
   card's border with `box-shadow:0 0 0 1px` (infoc-cms.css:1216), so a
   bare `box-shadow` here would silently delete the selected card's own
   outline. Both shadows are listed.

   Focus is deliberately NOT touched — infoc-cms.css:1660 already gives
   `.ioc-cards [data-route-fam]:focus-visible` a 3px `--rf` outline, and
   a second focus treatment would fight it.
   ============================================================ */

body.ioc-site .ioc-card[data-contact-route][aria-pressed="true"]{
  box-shadow:0 0 0 1px var(--ioc-border-subtle),inset 0 0 0 2px var(--rf);
}

/* ================================================================
   CAMPAIGN LANDERS - the Departures Board (CMS-D-172 W1).
   docs/designs/V6_FRONTEND/REACH-CAMPAIGN-DESIGN.md as amended.
   Tokens only (T16 (1)); spacing on the documented seven steps
   (4/8/12/16/24/32/48 - T17); motion 110/240ms on the house ease.
   One blue FILL per screenful: the CTA. Selection inverts to INK.
   ================================================================ */

/* ---- B-01-V21 : departures hero ---- */
body.ioc-site .ioc-depart .ioc-depart-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.65fr);gap:48px;align-items:stretch;border:1px solid var(--ioc-border-subtle);position:relative}
body.ioc-site .ioc-depart .ioc-hero-copy{padding:48px;min-width:0}
/* The page's one load gesture: a 1px accent rule draws across the hero's top
   edge. Gated on js-motion; reduced-motion and no-JS get the instant state. */
body.ioc-site .ioc-depart .ioc-depart-grid::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--ioc-accent);transform-origin:left}
html.js-motion body.ioc-site .ioc-depart .ioc-depart-grid::before{transform:scaleX(0);animation:ioc-depart-rule 240ms var(--ioc-ease) forwards}
@keyframes ioc-depart-rule{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){html.js-motion body.ioc-site .ioc-depart .ioc-depart-grid::before{animation:none;transform:none}}
body.ioc-site .ioc-depart-stack{display:flex;flex-direction:column;justify-content:stretch;border-left:1px solid var(--ioc-border-subtle);min-width:0}
body.ioc-site .ioc-depart-num{flex:1;display:flex;flex-direction:column;justify-content:center;padding:16px 32px;border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-depart-num:last-child{border-bottom:0}
body.ioc-site .ioc-depart-num strong{font-family:var(--ioc-mono);font-weight:700;font-size:clamp(48px,6vw,84px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ioc-text-primary)}
body.ioc-site .ioc-depart-num span{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-text-helper);margin-top:8px}
body.ioc-site .ioc-depart-alt{font-weight:600;color:var(--ioc-text-primary);text-decoration:underline;text-underline-offset:4px;margin-left:24px}
body.ioc-site .ioc-depart-reply{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper);margin:24px 0 0}
@media (max-width:860px){
  body.ioc-site .ioc-depart .ioc-depart-grid{grid-template-columns:1fr}
  body.ioc-site .ioc-depart-stack{border-left:0;border-top:1px solid var(--ioc-border-subtle);flex-direction:row}
  body.ioc-site .ioc-depart-num{border-bottom:0;border-right:1px solid var(--ioc-border-subtle);padding:16px}
  body.ioc-site .ioc-depart-num:last-child{border-right:0}
  body.ioc-site .ioc-depart-num strong{font-size:clamp(28px,9vw,48px)}
}

/* ---- B-17-V12 : campaign brief - the keypad IS the form ---- */
body.ioc-site .ioc-campaign-brief .ioc-cb-rail{display:flex;border:1px solid var(--ioc-border-subtle);margin:0 0 24px}
body.ioc-site .ioc-campaign-brief .ioc-cb-seg{flex:1;background:var(--ioc-surface);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-text-helper);padding:8px 16px}
body.ioc-site .ioc-campaign-brief .ioc-cb-seg + .ioc-cb-seg{border-left:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-campaign-brief.cb-picked .ioc-cb-seg[data-cb-seg="1"]{background:var(--ioc-g100);color:var(--ioc-surface)}
/* The service_route radio group becomes the 4x2 keypad: shared 1px borders,
   zero gap, one ruled instrument. Cells are the server renderer's own
   .ioc-choice labels - nothing moves on hover, ever. */
body.ioc-site .ioc-campaign-brief .ioc-choicegroup{border:0;padding:0;margin:0}
body.ioc-site .ioc-campaign-brief .ioc-choicegroup legend{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:12px}
/* Shared hairlines as real borders (gap stays 0 — a 1px gap is a border in
   disguise and T17 grades it as off-scale spacing): every cell draws its
   right+bottom rule; the 4th column and the last row hand theirs to the
   container's own border. */
body.ioc-site .ioc-campaign-brief .ioc-choices{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ioc-border-subtle);counter-reset:cbroute}
body.ioc-site .ioc-campaign-brief .ioc-choice{position:relative;display:block;background:var(--ioc-surface);padding:16px;min-height:96px;cursor:pointer;counter-increment:cbroute;border-right:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-campaign-brief .ioc-choice:nth-child(4n){border-right:0}
body.ioc-site .ioc-campaign-brief .ioc-choice:nth-last-child(-n+4):nth-child(4n+1),
body.ioc-site .ioc-campaign-brief .ioc-choice:nth-last-child(-n+4):nth-child(4n+1) ~ .ioc-choice{border-bottom:0}
body.ioc-site .ioc-campaign-brief .ioc-choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
body.ioc-site .ioc-campaign-brief .ioc-choice svg{display:none}
body.ioc-site .ioc-campaign-brief .ioc-choice span{display:block;position:relative}
body.ioc-site .ioc-campaign-brief .ioc-choice span::before{content:"0" counter(cbroute);font-family:var(--ioc-mono);font-size:12px;letter-spacing:.08em;color:var(--ioc-text-helper);display:block;margin-bottom:8px;transition:color 110ms var(--ioc-ease)}
body.ioc-site .ioc-campaign-brief .ioc-choice span b{font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.3}
/* The option's third tuple slot (the symptom line) - campaign context only. */
body.ioc-site .ioc-campaign-brief .ioc-choice span::after{content:attr(data-desc);display:block;font-size:12.5px;line-height:1.4;color:var(--ioc-text-secondary);margin-top:4px}
body.ioc-site .ioc-campaign-brief .ioc-choice:hover span::before,
body.ioc-site .ioc-campaign-brief .ioc-choice:focus-within span::before{color:var(--ioc-accent)}
body.ioc-site .ioc-campaign-brief .ioc-choice:focus-within{outline:2px solid var(--ioc-accent);outline-offset:0;z-index:1}
/* Selection inverts to INK (one-blue-fill rule): the input precedes the span,
   so input:checked ~ span carries the whole cell surface - no :has() needed. */
body.ioc-site .ioc-campaign-brief .ioc-choice input:checked ~ span{background:var(--ioc-g100);margin:-16px;padding:16px;min-height:96px;box-sizing:content-box}
body.ioc-site .ioc-campaign-brief .ioc-choice input:checked ~ span,
body.ioc-site .ioc-campaign-brief .ioc-choice input:checked ~ span b{color:var(--ioc-surface)}
body.ioc-site .ioc-campaign-brief .ioc-choice input:checked ~ span::before{color:var(--ioc-surface)}
body.ioc-site .ioc-campaign-brief .ioc-choice input:checked ~ span::after{color:var(--ioc-surface);opacity:.72}
/* The brief strip: a 48px mono readout that rewrites on selection. */
body.ioc-site .ioc-campaign-brief .ioc-cb-strip{display:flex;align-items:center;min-height:48px;border:1px solid var(--ioc-border-subtle);border-top:0;padding:0 16px;font-family:var(--ioc-mono);font-size:13px;letter-spacing:.04em;color:var(--ioc-text-secondary)}
/* JS-collapsed brief fields: only with the runtime present (html.js-motion)
   and only until a route is picked (.cb-open). No-JS renders everything. */
html.js-motion body.ioc-site .ioc-campaign-brief .ioc-cb-mount:not(.cb-open) .ioc-cta-field:not(:has(.ioc-choicegroup)),
html.js-motion body.ioc-site .ioc-campaign-brief .ioc-cb-mount:not(.cb-open) .ioc-cta-actions{display:none}
@media (max-width:860px){
  /* The keypad's 50%−50vw breakout is §AI's scrollbar class BELOW the >=768
     page guard (measured: 8px document overflow at 390px with a classic
     scrollbar; zero on real phones, zero headless). §AI's page-level clip
     stops at 768 because down there OTHER blocks overhang with REAL content
     — but THIS band's overhang is its own empty label padding, so the clip
     §AI prescribes for empty band is taken SECTION-scoped instead: it can
     only ever clip this band's own edges. `clip` not `hidden`, per §AI —
     `hidden` mints a scroll container. */
  body.ioc-site .ioc-campaign-brief{overflow-x:clip}
  body.ioc-site .ioc-campaign-brief .ioc-choices{grid-template-columns:1fr;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-left:0;border-right:0}
  body.ioc-site .ioc-campaign-brief .ioc-choice{min-height:64px;display:flex;align-items:center}
}

/* ---- B-06-V07 : D+ timeline - THE dark band ---- */
body.ioc-site .ioc-depart-band{background:var(--ioc-g100)}
body.ioc-site .ioc-depart-band .ioc-head h2{color:var(--ioc-surface)}
body.ioc-site .ioc-depart-band .ioc-sh-lead p{color:var(--ioc-surface);opacity:.8}
body.ioc-site .ioc-depart-band .ioc-sh-lead .meta{color:var(--ioc-on-inverse-green)}
body.ioc-site .ioc-db-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative;padding-top:24px}
/* The one theatrical gesture: the white rule draws once on reveal (240ms). */
body.ioc-site .ioc-db-rail::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ioc-surface);transform-origin:left}
html.js-motion body.ioc-site .ioc-db-rail[data-reveal]::before{transform:scaleX(0);transition:transform 240ms var(--ioc-ease)}
html.js-motion body.ioc-site .ioc-db-rail[data-reveal].in::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){html.js-motion body.ioc-site .ioc-db-rail[data-reveal]::before{transform:none;transition:none}}
body.ioc-site .ioc-db-mark strong{display:block;font-family:var(--ioc-mono);font-weight:700;font-size:20px;letter-spacing:.02em;color:var(--ioc-on-inverse-green)}
body.ioc-site .ioc-db-mark b{display:block;font-weight:700;font-size:15px;color:var(--ioc-surface);margin-top:8px}
body.ioc-site .ioc-db-mark p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ioc-surface);opacity:.72}
@media (max-width:860px){body.ioc-site .ioc-db-rail{grid-template-columns:1fr;gap:16px}}

/* ---- B-06-V08 : mono stat strip (48px breath mark) ---- */
body.ioc-site .ioc-stat-strip{border-top:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-stat-strip .ioc-ss-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;min-height:48px;gap:8px 16px;padding:8px 0}
body.ioc-site .ioc-ss-i{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-secondary);display:inline-flex;align-items:baseline;gap:8px}
body.ioc-site .ioc-ss-i strong{font-weight:700;color:var(--ioc-text-primary);font-variant-numeric:tabular-nums}
body.ioc-site .ioc-ss-i + .ioc-ss-i::before{content:"\00B7";color:var(--ioc-text-helper);margin-right:16px}

/* ---- Campaign runtime chrome (CMS-D-172 W2) ---- */
body.ioc-site .ioc-progress-rail{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ioc-accent);z-index:60;transition:width 110ms var(--ioc-ease)}
@media (prefers-reduced-motion:reduce){body.ioc-site .ioc-progress-rail{transition:none}}
body.ioc-site .ioc-cb-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;background:var(--ioc-blue);color:var(--ioc-surface);border-top:1px solid var(--ioc-g100);font-weight:700;text-align:center;padding:16px;text-decoration:none}
@media (max-width:860px){body.ioc-site .ioc-campaign-brief.cb-picked ~ * .ioc-cb-sticky,body.ioc-site .ioc-cb-sticky.cb-show{display:block}}
html.js-motion body.ioc-site .ioc-cb-mount .ioc-cta-field{transition:opacity 240ms var(--ioc-ease)}

/* ============================================================
   Z · Playful 404 (NotFoundPlayful-standalone.html, owner-directed
   2026-08-21 — B-01-V22 hero · B-11-V23 escape routes · B-06-V07
   accent CTA band). Grounds and inks are EXISTING tokens only: the
   comp's #0b0b12 band resolves to --ioc-g100 (the .ioc-depart-band
   precedent), its #ff8389 terminal line IS --ioc-danger-on-color's
   declared value (infoc-cms.css:118), its greens ride
   --ioc-on-inverse-green and its #a3adff kicker resolves to
   --ioc-on-inverse-blue — nothing minted, so nothing for T16 ②b to
   orphan. Translucent whites are color-mix over the on-ink role,
   never an rgba literal. The comp's ring/dot circles are SVG, not
   border-radius — radius stays ZERO (CMS-D-066 r4). The two hero
   cells ride `.ioc-hero .wrap`'s own grid (infoc-cms.css:1158).
   ============================================================ */
body.ioc-site .ioc-404p{position:relative;overflow:hidden;background:var(--ioc-g100);border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-404p::before{content:"";position:absolute;inset:-64px;background-image:linear-gradient(color-mix(in oklch,var(--ioc-text-on-primary,#fff) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--ioc-text-on-primary,#fff) 7%,transparent) 1px,transparent 1px);background-size:64px 64px;pointer-events:none}
body.ioc-site .ioc-404p .wrap{position:relative}
body.ioc-site .ioc-404p .ioc-kicker{color:var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-404p h1{color:var(--ioc-text-on-primary,#fff);max-width:22ch}
body.ioc-site .ioc-404p .ioc-lede{color:var(--ioc-text-on-ink-muted,#c6c6c6)}
body.ioc-site .ioc-404p .ioc-lede:empty{display:none}
body.ioc-site .ioc-404p .ioc-lede+.ioc-lede{margin-top:12px}
body.ioc-site .ioc-404p-term{max-width:460px;margin-top:24px;padding:16px;background:var(--ioc-g100);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ioc-text-on-primary,#fff) 22%,transparent);display:flex;flex-direction:column}
body.ioc-site .ioc-404p-line{display:flex;gap:8px;font-family:var(--ioc-mono);font-size:11.5px;line-height:1.9;color:var(--ioc-text-on-ink-muted,#c6c6c6)}
body.ioc-site .ioc-404p-line b{font-weight:400;opacity:.5;flex:0 0 auto}
body.ioc-site .ioc-404p-line:first-child{color:var(--ioc-text-on-primary,#fff);font-weight:700}
body.ioc-site .ioc-404p-line:nth-child(2){color:var(--ioc-danger-on-color,#ff8389)}
body.ioc-site .ioc-404p-line.is-turn{color:var(--ioc-on-inverse-green)}
body.ioc-site .ioc-404p-cursor{display:inline-block;width:7px;height:14px;margin-left:4px;background:var(--ioc-on-inverse-green);align-self:center}
body.ioc-site .ioc-404p-art{display:flex;align-items:center;justify-content:center;gap:8px;user-select:none}
body.ioc-site .ioc-404p-num{font-family:var(--ioc-sans);font-size:clamp(110px,15vw,220px);font-weight:800;letter-spacing:-.06em;line-height:.86;color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-404p-zero{position:relative;display:inline-flex;align-items:center;justify-content:center}
body.ioc-site .ioc-404p-num.zero{color:var(--ioc-accent);-webkit-text-stroke:2px var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-404p-ring{position:absolute;left:50%;top:50%;width:112px;height:112px;transform:translate(-50%,-50%);overflow:visible}
body.ioc-site .ioc-404p-ring .c{fill:none;stroke:color-mix(in oklch,var(--ioc-text-on-primary,#fff) 35%,transparent);stroke-width:2}
body.ioc-site .ioc-404p-ring .d{fill:var(--ioc-on-inverse-green)}
@media(max-width:860px){body.ioc-site .ioc-404p-art{padding-bottom:32px}body.ioc-site .ioc-404p-num{font-size:clamp(88px,20vw,140px)}}

/* B-11-V23's head link worn as the comp's outlined search button; the
   base .ioc-head-link idiom (accent ink, end-aligned, gap) stays intact
   underneath — this only adds the border and control padding. */
body.ioc-site .ioc-404p-search{box-shadow:inset 0 0 0 1px var(--ioc-accent);padding:12px 16px}
body.ioc-site .ioc-404p-search svg{width:15px;height:15px}
body.ioc-site .ioc-404p-search:hover svg{transform:none}

/* B-06-V07 — the accent CTA band. On-accent ink is --ioc-text-on-color
   (minted for accent fills, infoc-cms.css:36); the primary button
   inverts to surface-on-accent and the tertiary keeps a translucent
   on-color ring. `blue` is baked into the variant's section class —
   TONE_CLASS has no blue arm and the variant IS the blue band. */
body.ioc-site .ioc-cta-band.blue{background:var(--ioc-accent);border-top:0;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-cta-band.blue .ioc-cta-lead{color:var(--ioc-text-on-color,#fff);opacity:.9}
body.ioc-site .ioc-cta-band.blue .ioc-cta-lead b{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-cta-band.blue .btn-primary{background:var(--ioc-surface,#fff);color:var(--ioc-accent)}
body.ioc-site .ioc-cta-band.blue .btn-primary:hover{background:var(--ioc-surface-subtle,#fbfbfb);color:var(--ioc-accent-hover,#0000c4)}
body.ioc-site .ioc-cta-band.blue .btn-tertiary{color:var(--ioc-text-on-color,#fff);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ioc-text-on-color,#fff) 60%,transparent)}
body.ioc-site .ioc-cta-band.blue .btn-tertiary:hover{background:color-mix(in oklch,var(--ioc-text-on-color,#fff) 12%,transparent)}

/* ============================================================
   AA · /search route (Search.dc.html, V6 rewire 2026-08-21). The route is
   code-owned (CMS-D-081 registered exemption — heading/meta resolve from
   `pages[path=search]`, microcopy from `widget-areas.search.*`); this is
   its class vocabulary, zero rules anywhere before this sheet. B-32
   `one/util-search` stays a client-free island OUTSIDE the block register
   (B-24 cap) per the handover override. Every colour is an existing
   token; kind-chip tints are color-mix over the family accents, the same
   mechanism as `.ioc-cards [data-route-fam]` (infoc-cms.css:1649). The
   comp's #0043ce Guide chip has no token and folds to house blue — the
   CMS-D-168 `dat` precedent.
   ============================================================ */
body.ioc-site .ioc-search-head{border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-search-crumb{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-family:var(--ioc-mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-search-crumb a{display:inline-flex;color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-search-crumb a:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:2px}
body.ioc-site .ioc-search-crumb span{color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-head h1{margin:0 0 24px;font-size:clamp(32px,3vw,40px);line-height:1.06;font-weight:700;letter-spacing:-.04em}
body.ioc-site .ioc-search-field{display:flex;align-items:center;gap:12px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);border-bottom:2px solid var(--ioc-g100);padding:0 16px}
body.ioc-site .ioc-search-field:focus-within{outline:2px solid var(--ioc-accent);outline-offset:-2px}
body.ioc-site .ioc-search-field svg{flex:0 0 auto;width:18px;height:18px;color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-field input{width:100%;height:60px;border:0;background:transparent;font-family:inherit;font-size:17px;outline:none;color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-facets{display:flex;flex-wrap:wrap;gap:12px;border:1px solid var(--ioc-border-subtle);margin-top:24px}
body.ioc-site .ioc-search-facets a{flex:1 1 auto;padding:12px 16px;font-size:13.5px;font-weight:600;text-align:center;white-space:nowrap;background:var(--ioc-surface,#fff);color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-facets a:hover{background:var(--ioc-g10)}
body.ioc-site .ioc-search-facets a:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:-3px}
body.ioc-site .ioc-search-facets a[aria-current]{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-search-count{margin:0 0 24px;font-family:var(--ioc-mono);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-list{display:flex;flex-direction:column;gap:12px}
body.ioc-site .ioc-search-hit{background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);padding:24px;transition:background 110ms var(--ioc-ease)}
body.ioc-site .ioc-search-hit:hover{background:var(--ioc-g10)}
body.ioc-site .ioc-search-kind{display:inline-block;margin-bottom:12px;padding:4px 8px;font-family:var(--ioc-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;--sk:var(--ioc-accent);color:var(--sk);background:color-mix(in oklch,var(--sk) 9%,var(--ioc-surface))}
body.ioc-site .ioc-search-kind.is-academy{--sk:var(--ioc-fam-academy)}
body.ioc-site .ioc-search-kind.is-talent{--sk:var(--ioc-fam-talents-ink,var(--ioc-fam-talents))}
body.ioc-site .ioc-search-kind.is-company{--sk:var(--ioc-fam-company)}
body.ioc-site .ioc-search-hit h3{margin:0 0 8px;font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.022em}
body.ioc-site .ioc-search-hit h3 a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-hit h3 a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-search-hit h3 a:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:2px}
body.ioc-site .ioc-search-hit p{margin:0 0 8px;font-size:15px;line-height:1.62;color:var(--ioc-text-secondary);max-width:80ch}
body.ioc-site .ioc-search-path{font-family:var(--ioc-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ioc-text-helper)}
body.ioc-site .ioc-search-empty{margin:0;font-size:15px;color:var(--ioc-text-secondary)}


/* ============================================================
   CV2 · COMP-EXACT CAMPAIGN LANDERS (CMS-D-172 W6, owner ruling
   2026-08-21 — "exactly like the v2 comp, top to bottom, no site
   header/footer"). MACHINE-PORTED from the four v2 comps by
   apps/one/scripts + the session port script: comp classes renamed
   into the owned cv2- namespace, every hex resolved to a house
   token or a color-mix over tokens (T16), spacing snapped to the
   T17 scale, fonts to --ioc-sans/--ioc-mono, and the comp form
   interior re-targeted at the governed .ioc-form anatomy inside
   .cv2-card. The comps stay the SOURCE; regenerate rather than
   hand-editing large spans.
   ============================================================ */
body.ioc-site{
      --cv2-infoc-blue: var(--ioc-blue);
      --cv2-infoc-blue-dark: var(--ioc-blue-hover);
      --cv2-infoc-blue-soft: color-mix(in srgb, var(--ioc-blue) 7%, var(--ioc-surface));
      --cv2-infoc-pink: var(--ioc-accent);
      --cv2-ink: var(--ioc-g100);
      --cv2-ink-2: color-mix(in srgb, var(--ioc-g100) 91%, var(--ioc-surface));
      --cv2-muted: var(--ioc-g70);
      --cv2-muted-2: var(--ioc-g60);
      --cv2-paper: var(--ioc-surface);
      --cv2-canvas: var(--ioc-surface-subtle);
      --cv2-canvas-2: color-mix(in srgb, var(--ioc-g100) 7%, var(--ioc-surface));
      --cv2-line: color-mix(in srgb, var(--ioc-g100) 15%, var(--ioc-surface));
      --cv2-line-dark: color-mix(in srgb, var(--ioc-g100) 81%, var(--ioc-surface));
      --cv2-success: var(--ioc-success);
      --cv2-warning: var(--ioc-amber);
      --cv2-error: var(--ioc-danger);
      /* THE BOX IS THE SITE MEASURE. Same stale literal, and the same fix, the
         footer's `.route-grid` already took on owner direction 2026-08-20:
         1280px predates `--ioc-maxw:1360px`, so every campaign band sat 40px
         inboard of the header, the footer and every other page on the site.
         Measured at 1440px: campaign content started at x=112 where the site
         spine (50vw-648, CMS-D-174) puts it at x=72. */
      --cv2-max-width: var(--ioc-maxw, 1360px);
      --cv2-header-height: 74px;
      --cv2-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ioc-blue) 22%, transparent);
      color-scheme: light;
    }body.ioc-site *,
body.ioc-site *::before,
body.ioc-site *::after{
      box-sizing: border-box;
    }.cv2-dropped{display:none;
      scroll-behavior: smooth;
      scroll-padding-top:calc(var(--cv2-header-height) + 1.5rem);
    }.cv2-dropped{display:none;
      margin:0;
      background: var(--cv2-paper);
      color: var(--cv2-ink);
      font-family:var(--ioc-sans);
      font-size: 1rem;
      line-height: 1.55;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }body.ioc-site a{
      color: inherit;
    }body.ioc-site button,
body.ioc-site input,
body.ioc-site select,
body.ioc-site textarea{
      font: inherit;
    }body.ioc-site button,
body.ioc-site a{
      -webkit-tap-highlight-color: transparent;
    }body.ioc-site :focus-visible{
      outline: 2px solid var(--cv2-infoc-blue);
      outline-offset: 3px;
    }body.ioc-site ::selection{
      background: var(--cv2-infoc-blue);
      color: var(--ioc-surface);
    }.cv2-dropped{display:none;
      position: fixed;
      top:0.75rem;
      left:0.75rem;
      z-index: 300;
      padding:0.75rem 1rem;
      background: var(--cv2-ink);
      color: var(--ioc-surface);
      text-decoration: none;
      transform: translateY(-180%);
      transition: transform 160ms ease;
    }.cv2-dropped{display:none;
      transform: translateY(0);
    }body.ioc-site .cv2-wrap{
      width: min(calc(100% - 2.5rem), var(--cv2-max-width));
      margin-inline:auto;
    }body.ioc-site .cv2-sec{
      padding-block:clamp(4.75rem, 8vw, 8rem);
    }body.ioc-site .cv2-eyebrow{
      display: inline-flex;
      align-items: center;
      gap:0.65rem;
      margin:0 0 1rem;
      color: var(--cv2-infoc-blue);
      font-size: 0.75rem;
      font-weight: 850;
      letter-spacing: 0.13em;
      line-height: 1.3;
      text-transform: uppercase;
    }body.ioc-site .cv2-eyebrow::before{
      width: 1.75rem;
      height: 2px;
      background: currentColor;
      content: "";
    }body.ioc-site .cv2-eyebrow--cv2-light{
      color: color-mix(in srgb, var(--ioc-blue) 28%, var(--ioc-surface));
    }body.ioc-site .cv2-display{
      margin:0;
      max-width: 12ch;
      font-size: clamp(3.25rem, 6.4vw, 6rem);
      font-weight: 780;
      letter-spacing: -0.065em;
      line-height: 0.95;
    }body.ioc-site .cv2-title{
      margin:0;
      max-width: 18ch;
      font-size: clamp(2.2rem, 4.5vw, 4.4rem);
      font-weight: 750;
      letter-spacing: -0.05em;
      line-height: 1.02;
    }body.ioc-site .cv2-sec-lead{
      margin:1.5rem 0 0;
      max-width: 760px;
      color: var(--cv2-muted);
      font-size: clamp(1.05rem, 1.6vw, 1.28rem);
      line-height: 1.65;
    }body.ioc-site .cv2-btn{
      min-height: 3.25rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap:0.75rem;
      padding:0.85rem 1.25rem;
      border: 1px solid transparent;
      border-radius: 0;
      cursor: pointer;
      font-weight: 780;
      line-height: 1;
      text-decoration: none;
      transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
    }body.ioc-site .cv2-btn:hover{
      transform: translateY(-2px);
    }body.ioc-site .cv2-btn--cv2-primary{
      background: var(--cv2-infoc-blue);
      color: var(--ioc-surface);
    }body.ioc-site .cv2-btn--cv2-primary:hover{
      background: var(--cv2-infoc-blue-dark);
    }body.ioc-site .cv2-btn--cv2-dark{
      background: var(--cv2-ink);
      color: var(--ioc-surface);
    }body.ioc-site .cv2-btn--cv2-dark:hover{
      background: var(--cv2-ink-2);
    }body.ioc-site .cv2-btn--cv2-light{
      background: var(--ioc-surface);
      color: var(--cv2-ink);
    }body.ioc-site .cv2-btn--cv2-light:hover{
      background: var(--cv2-infoc-blue-soft);
    }body.ioc-site .cv2-btn--cv2-ghost{
      border-color: var(--cv2-line);
      background: transparent;
      color: var(--cv2-ink);
    }body.ioc-site .cv2-btn--cv2-ghost:hover{
      border-color: var(--cv2-ink);
      background: var(--cv2-canvas);
    }body.ioc-site .cv2-btn-arrow{
      width: 1.05rem;
      height: 1.05rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-announce{
      min-height: 34px;
      display: grid;
      place-items: center;
      padding:0.45rem 1rem;
      background: var(--cv2-ink);
      color: var(--ioc-surface);
      font-family:var(--ioc-mono);
      font-size: 0.71rem;
      font-weight: 750;
      letter-spacing: 0.06em;
      text-align: center;
      text-transform: uppercase;
    }body.ioc-site .cv2-header{
      position: sticky;
      top:0;
      z-index: 100;
      border-bottom:1px solid var(--cv2-line);
      background: color-mix(in srgb, var(--ioc-surface) 96%, transparent);
      backdrop-filter: blur(14px);
    }body.ioc-site .cv2-header-in{
      min-height: var(--cv2-header-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap:2rem;
    }body.ioc-site .cv2-brand-wrap{
      display: flex;
      align-items: center;
      gap:1.3rem;
    }body.ioc-site .cv2-brand{
      position: relative;
      display: inline-flex;
      align-items: baseline;
      color: var(--cv2-ink);
      font-size: 1.55rem;
      font-weight: 900;
      letter-spacing: -0.08em;
      line-height: 1;
      text-decoration: none;
    }body.ioc-site .cv2-brand-c{
      position: relative;
      color: var(--cv2-infoc-blue);
    }body.ioc-site .cv2-brand-c::after{
      position: absolute;
      right:0;
      bottom:-0.42rem;
      width: 1.1em;
      height: 0.17em;
      background: var(--cv2-infoc-blue);
      content: "";
    }body.ioc-site .cv2-label{
      padding-left:1.3rem;
      border-left:1px solid var(--cv2-line);
      color: var(--cv2-muted);
      font-size: 0.79rem;
      font-weight: 740;
    }body.ioc-site .cv2-navwrap{
      display: flex;
      align-items: center;
      gap:0.25rem;
    }body.ioc-site .cv2-navwrap a:not(.cv2-btn){
      padding:0.75rem 0.9rem;
      color: color-mix(in srgb, var(--ioc-g100) 76%, var(--ioc-surface));
      font-size: 0.88rem;
      font-weight: 700;
      text-decoration: none;
    }body.ioc-site .cv2-navwrap a:not(.cv2-btn):hover{
      color: var(--cv2-infoc-blue);
    }body.ioc-site .cv2-hero{
      position: relative;
      overflow: clip;
      border-bottom:1px solid var(--cv2-line);
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--ioc-blue) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(color-mix(in srgb, var(--ioc-blue) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        var(--ioc-surface);
    }body.ioc-site .cv2-hero::after{
      position: absolute;
      right:-16rem;
      bottom:-16rem;
      width: 42rem;
      height: 42rem;
      border: 8rem solid color-mix(in srgb, var(--ioc-blue) 4%, transparent);
      border-radius: 50%;
      content: "";
      pointer-events: none;
    }body.ioc-site .cv2-hero-in{
      position: relative;
      z-index: 1;
      min-height: min(900px, calc(100vh - 1rem));
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
      align-items: start;
      gap:clamp(3rem, 6vw, 6.5rem);
      padding-block:clamp(3.75rem, 7vw, 6.5rem);
    }body.ioc-site .cv2-hero-copy{
      position: sticky;
      top:calc(var(--cv2-header-height) + 4rem);
      padding-top:1rem;
    }body.ioc-site .cv2-hero-lead{
      margin:1.65rem 0 0;
      max-width: 650px;
      color: var(--cv2-muted);
      font-size: clamp(1.08rem, 1.7vw, 1.32rem);
      line-height: 1.65;
    }body.ioc-site .cv2-promise{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top:2.2rem;
      border-top:1px solid var(--cv2-line);
      border-left:1px solid var(--cv2-line);
    }body.ioc-site .cv2-promise-item{
      min-height: 116px;
      padding:1rem;
      border-right:1px solid var(--cv2-line);
      border-bottom:1px solid var(--cv2-line);
      background: color-mix(in srgb, var(--ioc-surface) 78%, transparent);
    }body.ioc-site .cv2-promise-item span{
      display: inline-flex;
      align-items: center;
      gap:0.5rem;
      margin-bottom:0.65rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.67rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-promise-icon{
      width: 1.3rem;
      height: 1.3rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-promise-item strong{
      display: block;
      font-size: 0.91rem;
      line-height: 1.35;
    }body.ioc-site .cv2-hero-note{
      margin:1.5rem 0 0;
      display: flex;
      align-items: flex-start;
      gap:0.8rem;
      color: color-mix(in srgb, var(--ioc-g100) 76%, var(--ioc-surface));
      font-size: 0.86rem;
      line-height: 1.55;
    }body.ioc-site .cv2-hero-note::before{
      width: 0.65rem;
      height: 0.65rem;
      flex: 0 0 auto;
      margin-top:0.32rem;
      background: var(--cv2-infoc-pink);
      content: "";
    }body.ioc-site .cv2-card{
      position: relative;
      border: 1px solid var(--cv2-ink);
      background: var(--ioc-surface);
    }body.ioc-site .cv2-card-bar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap:1rem;
      padding:0.85rem 1rem;
      border-bottom:1px solid var(--cv2-line-dark);
      background: var(--cv2-ink);
      color: var(--ioc-surface);
      font-family:var(--ioc-mono);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }body.ioc-site .cv2-card-status{
      display: inline-flex;
      align-items: center;
      gap:0.45rem;
      color: color-mix(in srgb, var(--ioc-success) 45%, var(--ioc-surface));
    }body.ioc-site .cv2-card-status::before{
      width: 0.48rem;
      height: 0.48rem;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 4px rgba(142, 224, 189, 0.12);
      content: "";
    }body.ioc-site .cv2-card .ioc-form{
      padding:clamp(1.5rem, 3vw, 2.35rem);
    }body.ioc-site .cv2-card-head{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap:1rem;
      margin-bottom:1.35rem;
      padding-bottom:1.25rem;
      border-bottom:1px solid var(--cv2-line);
    }body.ioc-site .cv2-card-head h2{
      margin:0;
      max-width: 16ch;
      font-size: clamp(1.7rem, 3vw, 2.45rem);
      letter-spacing: -0.045em;
      line-height: 1.04;
    }body.ioc-site .cv2-card-head p{
      margin:0.55rem 0 0;
      max-width: 500px;
      color: var(--cv2-muted);
      font-size: 0.88rem;
      line-height: 1.55;
    }body.ioc-site .cv2-route-badge{
      max-width: 185px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap:0.45rem;
      padding:0.55rem 0.7rem;
      background: var(--cv2-infoc-blue-soft);
      color: var(--cv2-infoc-blue-dark);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: right;
      text-transform: uppercase;
    }body.ioc-site .cv2-route-badge svg{
      width: 1rem;
      height: 1rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-route-summary{
      margin-bottom:1.25rem;
      padding:1rem 1.05rem;
      border-left:4px solid var(--cv2-infoc-pink);
      background: var(--cv2-canvas);
    }body.ioc-site .cv2-rs-title{
      margin:0;
      font-size: 1rem;
      font-weight: 820;
      line-height: 1.3;
    }body.ioc-site .cv2-rs-copy{
      margin:0.45rem 0 0;
      color: var(--cv2-muted);
      font-size: 0.8rem;
      line-height: 1.5;
    }body.ioc-site .cv2-rs-target{
      display: grid;
      grid-template-columns: auto 1fr;
      gap:0.6rem;
      margin-top:0.65rem;
      padding-top:0.65rem;
      border-top:1px solid var(--cv2-line);
      color: color-mix(in srgb, var(--ioc-g100) 81%, var(--ioc-surface));
      font-size: 0.76rem;
      line-height: 1.45;
    }body.ioc-site .cv2-rs-target strong{
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.63rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }body.ioc-site .cv2-card .ioc-form-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:0.95rem;
    }body.ioc-site .cv2-card .ioc-field{
      display: grid;
      gap:0.4rem;
    }body.ioc-site .cv2-card .ioc-field.full{
      grid-column: 1 / -1;
    }body.ioc-site .cv2-card .ioc-field label{
      color: color-mix(in srgb, var(--ioc-g100) 83%, var(--ioc-surface));
      font-size: 0.76rem;
      font-weight: 790;
    }body.ioc-site .cv2-card .ioc-field label .cv2-optional{
      color: var(--cv2-muted-2);
      font-weight: 520;
    }body.ioc-site .cv2-card .ioc-field input,
body.ioc-site .cv2-card .ioc-field select,
body.ioc-site .cv2-card .ioc-field textarea{
      width: 100%;
      min-height: 3rem;
      border: 1px solid color-mix(in srgb, var(--ioc-g100) 34%, var(--ioc-surface));
      border-radius: 0;
      background: var(--ioc-surface);
      color: var(--cv2-ink);
      padding:0.72rem 0.78rem;
      transition: border-color 150ms ease, box-shadow 150ms ease;
    }body.ioc-site .cv2-card .ioc-field textarea{
      min-height: 6rem;
      resize: vertical;
    }body.ioc-site .cv2-card .ioc-field input:focus,
body.ioc-site .cv2-card .ioc-field select:focus,
body.ioc-site .cv2-card .ioc-field textarea:focus{
      border-color: var(--cv2-infoc-blue);
      outline: 0;
      box-shadow: var(--cv2-focus-ring);
    }body.ioc-site .cv2-card .ioc-field input::placeholder,
body.ioc-site .cv2-card .ioc-field textarea::placeholder{
      color: var(--ioc-placeholder);
    }body.ioc-site .cv2-card .ioc-field:has(input[type=checkbox]){
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1.05rem 1fr;
      gap:0.7rem;
      align-items: start;
      margin-top:0.1rem;
      color: var(--cv2-muted);
      font-size: 0.72rem;
      line-height: 1.5;
    }body.ioc-site .cv2-card .ioc-field:has(input[type=checkbox]) input{
      width: 1rem;
      height: 1rem;
      margin:0.15rem 0 0;
      accent-color: var(--cv2-infoc-blue);
    }body.ioc-site .cv2-card .ioc-form-actions{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap:1rem;
      margin-top:1.25rem;
    }body.ioc-site .cv2-card-note{
      margin:0;
      color: var(--cv2-muted);
      font-size: 0.69rem;
      line-height: 1.45;
    }body.ioc-site .cv2-card .ioc-form-ok{
      min-height: 1.4rem;
      margin:0.85rem 0 0;
      color: var(--cv2-success);
      font-size: 0.8rem;
      font-weight: 700;
    }body.ioc-site .cv2-card .ioc-form-ok[data-state="error"]{
      color: var(--cv2-error);
    }body.ioc-site .cv2-card .ioc-form-ok[data-state="demo"]{
      color: var(--cv2-warning);
    }body.ioc-site .cv2-route-strip{
      position: relative;
      z-index: 1;
      overflow-x: auto;
      border-top:1px solid var(--cv2-line);
      background: var(--cv2-canvas);
      scrollbar-width: thin;
    }body.ioc-site .cv2-route-strip-in{
      min-width: 880px;
      display: grid;
      grid-template-columns: repeat(8, minmax(110px, 1fr));
    }body.ioc-site .cv2-route-strip span{
      min-height: 4rem;
      display: grid;
      place-items: center;
      padding:0.75rem 1rem;
      border-right:1px solid var(--cv2-line);
      color: color-mix(in srgb, var(--ioc-g100) 72%, var(--ioc-surface));
      font-family:var(--ioc-mono);
      font-size: 0.68rem;
      font-weight: 850;
      letter-spacing: 0.07em;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
    }body.ioc-site .cv2-situations{
      background: var(--ioc-surface);
    }body.ioc-site .cv2-sec-head{
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
      align-items: end;
      gap:3rem;
      margin-bottom:clamp(2.7rem, 5vw, 4.8rem);
    }body.ioc-site .cv2-sec-head .cv2-sec-lead{
      margin:0;
    }body.ioc-site .cv2-route-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top:1px solid var(--cv2-line);
      border-left:1px solid var(--cv2-line);
    }body.ioc-site .cv2-route-card{
      min-height: 278px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap:1.75rem;
      padding:1.45rem;
      border: 0;
      border-right:1px solid var(--cv2-line);
      border-bottom:1px solid var(--cv2-line);
      border-radius: 0;
      background: var(--ioc-surface);
      color: var(--cv2-ink);
      cursor: pointer;
      text-align: left;
      transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
    }body.ioc-site .cv2-route-card::after{
      position: absolute;
      right:1.3rem;
      bottom:1.3rem;
      width: 0.9rem;
      height: 0.9rem;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      content: "";
      transform: rotate(-45deg);
      transition: transform 180ms ease;
    }body.ioc-site .cv2-route-card:hover,
body.ioc-site .cv2-route-card[aria-pressed="true"]{
      z-index: 1;
      background: var(--cv2-infoc-blue);
      color: var(--ioc-surface);
      transform: translateY(-4px);
    }body.ioc-site .cv2-route-card:hover::after,
body.ioc-site .cv2-route-card[aria-pressed="true"]::after{
      transform: translateX(0.25rem) rotate(-45deg);
    }body.ioc-site .cv2-rc-label{
      display: inline-flex;
      align-items: center;
      gap:0.55rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-rc-icon{
      width: 1.4rem;
      height: 1.4rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-route-card:hover .cv2-rc-label,
body.ioc-site .cv2-route-card[aria-pressed="true"] .cv2-rc-label{
      color: color-mix(in srgb, var(--ioc-blue) 15%, var(--ioc-surface));
    }body.ioc-site .cv2-route-card h3{
      margin:0;
      max-width: 15ch;
      font-size: 1.22rem;
      letter-spacing: -0.025em;
      line-height: 1.16;
    }body.ioc-site .cv2-route-card p{
      margin:0.75rem 0 0;
      color: var(--cv2-muted);
      font-size: 0.87rem;
      line-height: 1.52;
    }body.ioc-site .cv2-route-card:hover p,
body.ioc-site .cv2-route-card[aria-pressed="true"] p{
      color: color-mix(in srgb, var(--ioc-blue) 11%, var(--ioc-surface));
    }body.ioc-site .cv2-rc-action{
      display: inline-flex;
      align-items: center;
      gap:0.45rem;
      padding-right:2rem;
      color: inherit;
      font-size: 0.75rem;
      font-weight: 800;
    }body.ioc-site .cv2-platform{
      position: relative;
      overflow: hidden;
      background: var(--cv2-ink);
      color: var(--ioc-surface);
    }body.ioc-site .cv2-platform::before{
      position: absolute;
      inset:0;
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--ioc-surface) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(color-mix(in srgb, var(--ioc-surface) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px;
      content: "";
      pointer-events: none;
    }body.ioc-site .cv2-platform-in{
      position: relative;
      z-index: 1;
    }body.ioc-site .cv2-platform .cv2-sec-lead{
      color: color-mix(in srgb, var(--ioc-g100) 21%, var(--ioc-surface));
    }body.ioc-site .cv2-plat-map{
      display: grid;
      grid-template-columns: 1.2fr repeat(2, 1fr);
      margin-top:4rem;
      border-top:1px solid var(--cv2-line-dark);
      border-left:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-plat-card{
      min-height: 230px;
      position: relative;
      padding:clamp(1.4rem, 3vw, 2rem);
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
      background: color-mix(in srgb, var(--ioc-g100) 94%, var(--ioc-surface));
    }body.ioc-site .cv2-plat-core{
      grid-row: span 2;
      min-height: 460px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: var(--cv2-infoc-blue);
    }body.ioc-site .cv2-plat-index{
      color: color-mix(in srgb, var(--ioc-g100) 38%, var(--ioc-surface));
      font-family:var(--ioc-mono);
      font-size: 0.67rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-plat-core .cv2-plat-index{
      color: color-mix(in srgb, var(--ioc-blue) 21%, var(--ioc-surface));
    }body.ioc-site .cv2-plat-card h3{
      margin:2.6rem 0 0;
      font-size: clamp(1.35rem, 2.4vw, 2rem);
      letter-spacing: -0.035em;
      line-height: 1.08;
    }body.ioc-site .cv2-plat-core h3{
      max-width: 10ch;
      font-size: clamp(2.3rem, 4vw, 4.1rem);
      letter-spacing: -0.055em;
      line-height: 0.98;
    }body.ioc-site .cv2-plat-card p{
      margin:0.85rem 0 0;
      color: color-mix(in srgb, var(--ioc-g100) 26%, var(--ioc-surface));
      font-size: 0.87rem;
      line-height: 1.55;
    }body.ioc-site .cv2-plat-core p{
      max-width: 420px;
      color: color-mix(in srgb, var(--ioc-blue) 12%, var(--ioc-surface));
      font-size: 0.98rem;
    }body.ioc-site .cv2-plat-tags{
      display: flex;
      flex-wrap: wrap;
      gap:0.45rem;
      margin-top:1.5rem;
    }body.ioc-site .cv2-plat-tags span{
      padding:0.42rem 0.55rem;
      border: 1px solid color-mix(in srgb, var(--ioc-surface) 24%, transparent);
      color: color-mix(in srgb, var(--ioc-blue) 5%, var(--ioc-surface));
      font-family:var(--ioc-mono);
      font-size: 0.63rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }body.ioc-site .cv2-outcomes{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top:2rem;
      border-top:1px solid var(--cv2-line-dark);
      border-left:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-outcome{
      min-height: 150px;
      padding:1.25rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-outcome span{
      color: color-mix(in srgb, var(--ioc-blue) 37%, var(--ioc-surface));
      font-family:var(--ioc-mono);
      font-size: 0.66rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-outcome strong{
      display: block;
      margin-top:0.8rem;
      max-width: 22ch;
      font-size: 1.02rem;
      line-height: 1.35;
    }body.ioc-site .cv2-plat-ai{
      background:
        linear-gradient(145deg, rgba(255, 0, 119, 0.22), transparent 52%),
        color-mix(in srgb, var(--ioc-g100) 93%, var(--ioc-surface));
    }body.ioc-site .cv2-plat-ai h3{
      max-width: 12ch;
    }body.ioc-site .cv2-ai-panel{
      display: grid;
      grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
      gap:clamp(1.5rem, 4vw, 3.5rem);
      margin-top:2rem;
      padding:clamp(1.5rem, 3vw, 2.5rem);
      border: 1px solid var(--cv2-line-dark);
      background: color-mix(in srgb, var(--ioc-g100) 97%, var(--ioc-surface));
    }body.ioc-site .cv2-ai-head h3{
      margin:0.7rem 0 0;
      max-width: 13ch;
      font-size: clamp(1.9rem, 3.4vw, 3.2rem);
      letter-spacing: -0.05em;
      line-height: 1.02;
    }body.ioc-site .cv2-ai-head p{
      margin:1rem 0 0;
      max-width: 460px;
      color: color-mix(in srgb, var(--ioc-g100) 26%, var(--ioc-surface));
      font-size: 0.88rem;
      line-height: 1.6;
    }body.ioc-site .cv2-capabilities{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-top:1px solid var(--cv2-line-dark);
      border-left:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-capability{
      min-height: 118px;
      padding:1rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-capability strong{
      display: block;
      color: var(--ioc-surface);
      font-size: 0.88rem;
      line-height: 1.35;
    }body.ioc-site .cv2-capability span{
      display: block;
      margin-top:0.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 33%, var(--ioc-surface));
      font-size: 0.73rem;
      line-height: 1.5;
    }body.ioc-site .cv2-path-wrap{
      grid-column: 1 / -1;
      margin-top:0.5rem;
      padding-top:1.75rem;
      border-top:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-path-wrap h4{
      margin:0;
      font-size: clamp(1.25rem, 2vw, 1.65rem);
      letter-spacing: -0.025em;
    }body.ioc-site .cv2-path-wrap > p{
      margin:0.55rem 0 0;
      max-width: 780px;
      color: color-mix(in srgb, var(--ioc-g100) 33%, var(--ioc-surface));
      font-size: 0.8rem;
      line-height: 1.55;
    }body.ioc-site .cv2-path{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top:1.25rem;
      border-top:1px solid var(--cv2-line-dark);
      border-left:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-path-step{
      min-height: 150px;
      padding:1rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-path-icon{
      display: block;
      width: 1.45rem;
      height: 1.45rem;
      color: color-mix(in srgb, var(--ioc-blue) 37%, var(--ioc-surface));
    }body.ioc-site .cv2-path-step strong{
      display: block;
      margin-top:0.65rem;
      color: var(--ioc-surface);
      font-size: 0.94rem;
      line-height: 1.3;
    }body.ioc-site .cv2-path-step span{
      display: block;
      margin-top:0.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 33%, var(--ioc-surface));
      font-size: 0.7rem;
      line-height: 1.48;
    }body.ioc-site .cv2-ai-guardrail{
      grid-column: 1 / -1;
      margin:0;
      padding-top:1.25rem;
      border-top:1px solid var(--cv2-line-dark);
      color: color-mix(in srgb, var(--ioc-g100) 21%, var(--ioc-surface));
      font-size: 0.72rem;
      line-height: 1.58;
    }@media (max-width: 1100px){body.ioc-site .cv2-ai-panel{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-path{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }}@media (max-width: 820px){body.ioc-site .cv2-path{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }}@media (max-width: 620px){body.ioc-site .cv2-ai-panel{
        margin-inline:-0.35rem;
        padding:1.25rem;
      }body.ioc-site .cv2-capabilities,
body.ioc-site .cv2-path{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-path-step{
        min-height: auto;
      }}body.ioc-site .cv2-close{
      position: relative;
      overflow: hidden;
      background: var(--cv2-infoc-blue);
      color: var(--ioc-surface);
    }body.ioc-site .cv2-close::before{
      position: absolute;
      inset:0;
      background:
        linear-gradient(135deg, transparent 0 65%, color-mix(in srgb, var(--ioc-surface) 9%, transparent) 65% 66%, transparent 66%),
        linear-gradient(90deg, color-mix(in srgb, var(--ioc-surface) 6%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(color-mix(in srgb, var(--ioc-surface) 6%, transparent) 1px, transparent 1px) 0 0 / 80px 80px;
      content: "";
      pointer-events: none;
    }body.ioc-site .cv2-close-in{
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(400px, 0.72fr);
      align-items: end;
      gap:clamp(3rem, 8vw, 8rem);
    }body.ioc-site .cv2-close .cv2-title{
      max-width: 13ch;
    }body.ioc-site .cv2-close-lead{
      margin:1.35rem 0 0;
      max-width: 650px;
      color: color-mix(in srgb, var(--ioc-blue) 12%, var(--ioc-surface));
      font-size: 1.08rem;
      line-height: 1.62;
    }body.ioc-site .cv2-close-steps{
      display: grid;
      gap:0.8rem;
      margin-top:2.1rem;
    }body.ioc-site .cv2-close-step{
      display: grid;
      grid-template-columns: 2rem 1fr;
      gap:0.8rem;
      align-items: start;
      color: color-mix(in srgb, var(--ioc-blue) 4%, var(--ioc-surface));
      font-size: 0.88rem;
    }body.ioc-site .cv2-close-step span{
      width: 2rem;
      height: 2rem;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--ioc-surface) 48%, transparent);
      font-family:var(--ioc-mono);
      font-size: 0.64rem;
      font-weight: 850;
    }body.ioc-site .cv2-close-action{
      padding:clamp(1.5rem, 4vw, 2.4rem);
      border: 1px solid color-mix(in srgb, var(--ioc-surface) 45%, transparent);
      background: color-mix(in srgb, var(--ioc-g100) 15%, transparent);
    }body.ioc-site .cv2-close-action p{
      margin:0 0 1.2rem;
      color: color-mix(in srgb, var(--ioc-blue) 10%, var(--ioc-surface));
      font-size: 0.9rem;
      line-height: 1.55;
    }body.ioc-site .cv2-close-action .cv2-btn{
      width: 100%;
    }body.ioc-site .cv2-close-action small{
      display: block;
      margin-top:0.9rem;
      color: color-mix(in srgb, var(--ioc-blue) 18%, var(--ioc-surface));
      font-size: 0.69rem;
      line-height: 1.45;
    }body.ioc-site .cv2-footer{
      background: var(--cv2-ink);
      color: var(--ioc-surface);
    }body.ioc-site .cv2-footer-in{
      min-height: 108px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap:2rem;
      padding-block:1.5rem;
    }body.ioc-site .cv2-footer-brand{
      display: flex;
      align-items: center;
      gap:1.5rem;
    }body.ioc-site .cv2-footer .cv2-brand{
      color: var(--ioc-surface);
    }body.ioc-site .cv2-footer-brand p{
      margin:0;
      color: color-mix(in srgb, var(--ioc-g100) 33%, var(--ioc-surface));
      font-size: 0.78rem;
    }body.ioc-site .cv2-footer-links{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap:1rem;
      color: color-mix(in srgb, var(--ioc-g100) 28%, var(--ioc-surface));
      font-size: 0.75rem;
    }body.ioc-site .cv2-footer-links a{
      text-decoration: none;
    }body.ioc-site .cv2-footer-links a:hover{
      color: var(--ioc-surface);
      text-decoration: underline;
      text-underline-offset: 0.25rem;
    }@media (max-width: 1100px){body.ioc-site .cv2-hero-in{
        grid-template-columns: 1fr;
        min-height: auto;
      }body.ioc-site .cv2-hero-copy{
        position: static;
        max-width: 850px;
        padding-top:0;
      }body.ioc-site .cv2-card{
        max-width: 850px;
      }body.ioc-site .cv2-route-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }body.ioc-site .cv2-plat-map{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }body.ioc-site .cv2-plat-core{
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 340px;
      }body.ioc-site .cv2-close-in{
        grid-template-columns: 1fr;
        align-items: start;
      }body.ioc-site .cv2-close-action{
        max-width: 700px;
      }}@media (max-width: 820px){body.ioc-site{
        --cv2-header-height: 66px;
      }body.ioc-site .cv2-wrap{
        width: min(calc(100% - 2rem), var(--cv2-max-width));
      }body.ioc-site .cv2-label,
body.ioc-site .cv2-navwrap a:not(.cv2-btn){
        display: none;
      }body.ioc-site .cv2-sec-head{
        grid-template-columns: 1fr;
        align-items: start;
        gap:1.5rem;
      }body.ioc-site .cv2-outcomes{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-footer-in,
body.ioc-site .cv2-footer-brand{
        align-items: flex-start;
        flex-direction: column;
      }body.ioc-site .cv2-footer-links{
        justify-content: flex-start;
      }}@media (max-width: 620px){body.ioc-site .cv2-announce{
        font-size: 0.64rem;
      }body.ioc-site .cv2-display{
        font-size: clamp(2.85rem, 13vw, 4.1rem);
      }body.ioc-site .cv2-hero-in{
        gap:2.1rem;
        padding-top:2.75rem;
      }body.ioc-site .cv2-hero-lead{
        font-size: 1rem;
        line-height: 1.55;
      }body.ioc-site .cv2-promise,
body.ioc-site .cv2-hero-note{
        display: none;
      }body.ioc-site .cv2-promise,
body.ioc-site .cv2-card .ioc-form-grid,
body.ioc-site .cv2-route-grid,
body.ioc-site .cv2-plat-map{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-promise-item{
        min-height: auto;
      }body.ioc-site .cv2-card{
        margin-inline:-0.35rem;
      }body.ioc-site .cv2-card-head,
body.ioc-site .cv2-card .ioc-form-actions{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-route-badge{
        max-width: none;
        text-align: left;
      }body.ioc-site .cv2-card .ioc-form-actions .cv2-btn{
        width: 100%;
      }body.ioc-site .cv2-route-card{
        min-height: 220px;
      }body.ioc-site .cv2-plat-card,
body.ioc-site .cv2-plat-core{
        grid-column: auto;
        min-height: 230px;
      }body.ioc-site .cv2-plat-core h3{
        font-size: clamp(2.5rem, 13vw, 3.7rem);
      }body.ioc-site .cv2-close-action{
        margin-inline:-0.35rem;
      }body.ioc-site .cv2-footer-brand p{
        max-width: 260px;
      }}@media (prefers-reduced-motion: reduce){body.ioc-site *,
body.ioc-site *::before,
body.ioc-site *::after{
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }}body.ioc-site .cv2-promise-item span{
      display: block;
      margin-bottom:0.65rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.67rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-promise-icon,
body.ioc-site .cv2-route-badge-icon,
body.ioc-site .cv2-rc-icon{
      width: 1.25rem;
      height: 1.25rem;
      flex: 0 0 1.25rem;
    }body.ioc-site .cv2-promise-icon{
      display: block;
      margin-bottom:0.65rem;
    }body.ioc-site .cv2-route-badge{
      display: inline-flex;
      align-items: center;
      gap:0.4rem;
      max-width: 185px;
      padding:0.55rem 0.7rem;
      background: var(--cv2-infoc-blue-soft);
      color: var(--cv2-infoc-blue-dark);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: right;
      text-transform: uppercase;
    }body.ioc-site .cv2-rc-label{
      display: inline-flex;
      align-items: center;
      gap:0.45rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}@media (prefers-reduced-motion: reduce){}body.ioc-site .cv2-rs-ai{
      display: grid;
      grid-template-columns: auto 1fr;
      gap:0.6rem;
      margin-top:0.65rem;
      padding-top:0.65rem;
      border-top:1px solid var(--cv2-line);
      color: color-mix(in srgb, var(--ioc-g100) 81%, var(--ioc-surface));
      font-size: 0.76rem;
      line-height: 1.45;
    }body.ioc-site .cv2-rs-ai strong{
      color: var(--cv2-infoc-pink);
      font-family:var(--ioc-mono);
      font-size: 0.63rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }body.ioc-site .cv2-route-card{
      min-height: 372px;
    }body.ioc-site .cv2-rc-ai{
      margin-top:1rem;
      padding-top:0.9rem;
      border-top:1px solid var(--cv2-line);
      color: color-mix(in srgb, var(--ioc-g100) 77%, var(--ioc-surface));
      font-size: 0.75rem;
      line-height: 1.48;
    }body.ioc-site .cv2-rc-ai strong{
      display: block;
      margin-bottom:0.32rem;
      color: var(--cv2-infoc-pink);
      font-family:var(--ioc-mono);
      font-size: 0.61rem;
      font-weight: 850;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }body.ioc-site .cv2-route-card:hover .cv2-rc-ai,
body.ioc-site .cv2-route-card[aria-pressed="true"] .cv2-rc-ai{
      border-top-color: color-mix(in srgb, var(--ioc-surface) 32%, transparent);
      color: color-mix(in srgb, var(--ioc-blue) 6%, var(--ioc-surface));
    }body.ioc-site .cv2-route-card:hover .cv2-rc-ai strong,
body.ioc-site .cv2-route-card[aria-pressed="true"] .cv2-rc-ai strong{
      color: color-mix(in srgb, var(--ioc-accent) 25%, var(--ioc-surface));
    }body.ioc-site .cv2-ai-panel{
      display: grid;
      grid-template-columns: minmax(250px, 0.65fr) minmax(0, 1.35fr);
      gap:2rem;
      margin-top:2rem;
      padding:clamp(1.5rem, 3vw, 2.2rem);
      border: 1px solid var(--cv2-line-dark);
      background: color-mix(in srgb, var(--ioc-g100) 97%, var(--ioc-surface));
    }body.ioc-site .cv2-ai-panel h3{
      margin:0.55rem 0 0;
      max-width: 13ch;
      font-size: clamp(1.7rem, 3vw, 2.75rem);
      letter-spacing: -0.045em;
      line-height: 1.05;
    }body.ioc-site .cv2-ai-head{
      margin:1rem 0 0;
      color: color-mix(in srgb, var(--ioc-g100) 26%, var(--ioc-surface));
      font-size: 0.86rem;
      line-height: 1.55;
    }body.ioc-site .cv2-capability{
      min-height: 112px;
      padding:1rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-capability span{
      display: block;
      margin-top:0.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 33%, var(--ioc-surface));
      font-size: 0.72rem;
      line-height: 1.48;
    }body.ioc-site .cv2-ai-guardrail{
      grid-column: 1 / -1;
      margin:0;
      padding-top:1rem;
      border-top:1px solid var(--cv2-line-dark);
      color: color-mix(in srgb, var(--ioc-g100) 21%, var(--ioc-surface));
      font-size: 0.72rem;
      line-height: 1.55;
    }body.ioc-site .cv2-form-disclosure{
      grid-column: 1 / -1;
      margin:-0.15rem 0 0;
      color: var(--cv2-muted-2);
      font-size: 0.68rem;
      line-height: 1.45;
    }@media (max-width: 820px){}@media (max-width: 620px){body.ioc-site .cv2-route-card{
        min-height: 300px;
      }body.ioc-site .cv2-rs-ai,
body.ioc-site .cv2-rs-target{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-capabilities{
        grid-template-columns: 1fr;
      }}body.ioc-site{
      --cv2-m365-blue: var(--ioc-blue);
      --cv2-m365-blue-dark: var(--ioc-blue-hover);
      --cv2-m365-cyan: color-mix(in srgb, var(--ioc-green) 55%, var(--ioc-surface));
      --cv2-m365-navy: color-mix(in srgb, var(--ioc-g100) 98%, var(--ioc-surface));
      --cv2-m365-soft: color-mix(in srgb, var(--ioc-blue) 7%, var(--ioc-surface));
    }body.ioc-site .cv2-page .cv2-announce{
      background: var(--cv2-m365-navy);
    }body.ioc-site .cv2-page .cv2-hero{
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--ioc-blue) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(color-mix(in srgb, var(--ioc-blue) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(135deg, var(--ioc-surface) 0 68%, color-mix(in srgb, var(--ioc-blue) 5%, var(--ioc-surface)) 68% 100%);
    }body.ioc-site .cv2-page .cv2-hero::after{
      border-color: color-mix(in srgb, var(--ioc-blue) 5%, transparent);
    }body.ioc-site .cv2-page .cv2-hero-note::before,
body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-m365-blue);
    }body.ioc-site .cv2-page .cv2-route-card:hover,
body.ioc-site .cv2-page .cv2-route-card[aria-pressed="true"]{
      background: var(--cv2-m365-blue);
    }body.ioc-site .cv2-page .cv2-rc-label,
body.ioc-site .cv2-page .cv2-rs-target strong,
body.ioc-site .cv2-page .cv2-eyebrow{
      color: var(--cv2-m365-blue);
    }body.ioc-site .cv2-page .cv2-eyebrow--cv2-light{
      color: var(--cv2-m365-cyan);
    }body.ioc-site .cv2-page .cv2-route-badge{
      background: var(--cv2-m365-soft);
      color: var(--cv2-m365-blue-dark);
    }body.ioc-site .cv2-page .cv2-route-summary{
      border-left-color: var(--cv2-m365-cyan);
    }body.ioc-site .cv2-page .cv2-plat-core{
      background: var(--cv2-m365-blue);
    }body.ioc-site .cv2-page .cv2-plat-ai{
      background: color-mix(in srgb, var(--ioc-g100) 85%, var(--ioc-blue));
    }body.ioc-site .cv2-page .cv2-plat-ai .cv2-plat-index{
      color: var(--cv2-m365-cyan);
    }body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-m365-navy);
    }body.ioc-site .cv2-page .cv2-close-action{
      border-color: rgba(85, 230, 193, 0.55);
      background: color-mix(in srgb, var(--ioc-blue) 18%, transparent);
    }body.ioc-site .cv2-page .cv2-outcome span{
      color: var(--cv2-m365-cyan);
    }body.ioc-site .cv2-ai-panel{
      display: grid;
      grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
      gap:clamp(1.5rem, 4vw, 3.5rem);
      margin-top:2rem;
      padding:clamp(1.5rem, 3vw, 2.5rem);
      border: 1px solid var(--cv2-line-dark);
      background:
        linear-gradient(145deg, rgba(85, 230, 193, 0.11), transparent 44%),
        color-mix(in srgb, var(--ioc-g100) 97%, var(--ioc-surface));
    }body.ioc-site .cv2-ai-head p{
      margin:1rem 0 0;
      max-width: 470px;
      color: color-mix(in srgb, var(--ioc-g100) 20%, var(--ioc-surface));
      font-size: 0.88rem;
      line-height: 1.6;
    }body.ioc-site .cv2-capability{
      min-height: 124px;
      padding:1rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-capability span{
      display: block;
      margin-top:0.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 28%, var(--ioc-surface));
      font-size: 0.73rem;
      line-height: 1.5;
    }body.ioc-site .cv2-path-wrap h4{
      margin:0;
      color: var(--ioc-surface);
      font-size: clamp(1.25rem, 2vw, 1.65rem);
      letter-spacing: -0.025em;
    }body.ioc-site .cv2-path-wrap > p{
      margin:0.55rem 0 0;
      max-width: 820px;
      color: color-mix(in srgb, var(--ioc-g100) 28%, var(--ioc-surface));
      font-size: 0.8rem;
      line-height: 1.55;
    }body.ioc-site .cv2-path{
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      margin-top:1.25rem;
      border-top:1px solid var(--cv2-line-dark);
      border-left:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-path-step{
      min-height: 154px;
      padding:1rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-path-step b{
      display: block;
      color: var(--cv2-m365-cyan);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-path-step span{
      display: block;
      margin-top:0.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 28%, var(--ioc-surface));
      font-size: 0.7rem;
      line-height: 1.48;
    }body.ioc-site .cv2-ai-guardrail{
      grid-column: 1 / -1;
      margin:0;
      padding-top:1.25rem;
      border-top:1px solid var(--cv2-line-dark);
      color: color-mix(in srgb, var(--ioc-g100) 17%, var(--ioc-surface));
      font-size: 0.72rem;
      line-height: 1.58;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}body.ioc-site .cv2-promise-label{
      display: inline-flex;
      align-items: center;
      gap:.5rem;
      margin:0 0 .65rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: .67rem;
      font-weight: 850;
      letter-spacing: .08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-promise-icon,
body.ioc-site .cv2-route-badge-icon,
body.ioc-site .cv2-rc-icon{
      width: 1.25rem;
      height: 1.25rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-route-badge{
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap:.45rem;
      max-width: 185px;
      padding:0.55rem 0.7rem;
      background: var(--cv2-infoc-blue-soft);
      color: var(--cv2-infoc-blue-dark);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: right;
      text-transform: uppercase;
    }body.ioc-site .cv2-rc-label{
      display: inline-flex;
      align-items: center;
      gap:.45rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-plat-index{
      display: inline-flex;
      align-items: center;
      gap:.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 38%, var(--ioc-surface));
      font-family:var(--ioc-mono);
      font-size: 0.67rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-plat-icon{
      width: 1.25rem;
      height: 1.25rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-close-action .cv2-secondary-diagnostic{
      margin:1rem 0 0;
      color: color-mix(in srgb, var(--ioc-blue) 18%, var(--ioc-surface));
      font-size: 0.78rem;
      line-height: 1.45;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}@media (prefers-reduced-motion: reduce){}@media (max-width: 820px){}@media (max-width: 620px){}body.ioc-site{
      --cv2-azure-blue: var(--ioc-blue);
      --cv2-azure-blue-dark: var(--ioc-blue-hover);
      --cv2-azure-cyan: color-mix(in srgb, var(--ioc-green) 55%, var(--ioc-surface));
      --cv2-azure-navy: color-mix(in srgb, var(--ioc-g100) 95%, var(--ioc-surface));
      --cv2-azure-soft: color-mix(in srgb, var(--ioc-blue) 5%, var(--ioc-surface));
    }body.ioc-site .cv2-page .cv2-announce{
      background: var(--cv2-azure-navy);
    }body.ioc-site .cv2-page .cv2-hero{
      background:
        linear-gradient(90deg, rgba(0, 120, 212, 0.055) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(rgba(0, 120, 212, 0.055) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(135deg, var(--ioc-surface) 0 68%, color-mix(in srgb, var(--ioc-blue) 4%, var(--ioc-surface)) 68% 100%);
    }body.ioc-site .cv2-page .cv2-hero::after{
      border-color: rgba(0, 120, 212, 0.055);
    }body.ioc-site .cv2-page .cv2-hero-note::before,
body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-azure-blue);
    }body.ioc-site .cv2-page .cv2-route-card:hover,
body.ioc-site .cv2-page .cv2-route-card[aria-pressed="true"]{
      background: var(--cv2-azure-blue);
    }body.ioc-site .cv2-page .cv2-rc-label,
body.ioc-site .cv2-page .cv2-rs-target strong,
body.ioc-site .cv2-page .cv2-eyebrow{
      color: var(--cv2-azure-blue);
    }body.ioc-site .cv2-page .cv2-eyebrow--cv2-light{
      color: var(--cv2-azure-cyan);
    }body.ioc-site .cv2-page .cv2-route-badge{
      background: var(--cv2-azure-soft);
      color: var(--cv2-azure-blue-dark);
    }body.ioc-site .cv2-page .cv2-route-summary{
      border-left-color: var(--cv2-azure-cyan);
    }body.ioc-site .cv2-page .cv2-plat-core{
      background: var(--cv2-azure-blue);
    }body.ioc-site .cv2-page .cv2-plat-ai{
      background: color-mix(in srgb, var(--ioc-g100) 72%, var(--ioc-blue));
    }body.ioc-site .cv2-page .cv2-plat-ai .cv2-plat-index{
      color: var(--cv2-azure-cyan);
    }body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-azure-navy);
    }body.ioc-site .cv2-page .cv2-close-action{
      border-color: rgba(80, 230, 255, 0.55);
      background: rgba(0, 120, 212, 0.18);
    }body.ioc-site .cv2-page .cv2-outcome span{
      color: var(--cv2-azure-cyan);
    }body.ioc-site .cv2-ai-panel{
      display: grid;
      grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
      gap:clamp(1.5rem, 4vw, 3.5rem);
      margin-top:2rem;
      padding:clamp(1.5rem, 3vw, 2.5rem);
      border: 1px solid var(--cv2-line-dark);
      background:
        linear-gradient(145deg, rgba(0, 188, 242, 0.10), transparent 44%),
        color-mix(in srgb, var(--ioc-g100) 96%, var(--ioc-surface));
    }body.ioc-site .cv2-path-step b{
      display: block;
      color: var(--cv2-azure-cyan);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}body.ioc-site .cv2-promise-icon{
      width: 1.5rem;
      height: 1.5rem;
      display: block;
      margin-bottom:0.65rem;
      color: var(--cv2-infoc-blue);
    }body.ioc-site .cv2-route-badge{
      max-width: 185px;
      display: inline-flex;
      align-items: center;
      gap:0.45rem;
      padding:0.55rem 0.7rem;
      background: var(--cv2-infoc-blue-soft);
      color: var(--cv2-infoc-blue-dark);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: left;
      text-transform: uppercase;
    }body.ioc-site .cv2-route-badge-icon{
      width: 1.25rem;
      height: 1.25rem;
      flex: 0 0 auto;
    }body.ioc-site [data-secondary-diagnostic]{
      margin-top:0.45rem;
    }body.ioc-site .cv2-rc-icon{
      width: 1.5rem;
      height: 1.5rem;
      flex: 0 0 auto;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}@media (prefers-reduced-motion: reduce){}@media (max-width: 820px){}@media (max-width: 620px){}body.ioc-site{
      --cv2-fabric-blue: var(--ioc-blue);
      --cv2-fabric-blue-dark: var(--ioc-blue-hover);
      --cv2-fabric-cyan: color-mix(in srgb, var(--ioc-green) 60%, var(--ioc-surface));
      --cv2-fabric-navy: color-mix(in srgb, var(--ioc-g100) 97%, var(--ioc-surface));
      --cv2-fabric-soft: color-mix(in srgb, var(--ioc-blue) 7%, var(--ioc-surface));
    }body.ioc-site .cv2-page .cv2-announce{
      background: var(--cv2-fabric-navy);
    }body.ioc-site .cv2-page .cv2-hero-note::before,
body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-fabric-blue);
    }body.ioc-site .cv2-page .cv2-route-card:hover,
body.ioc-site .cv2-page .cv2-route-card[aria-pressed="true"]{
      background: var(--cv2-fabric-blue);
    }body.ioc-site .cv2-page .cv2-rc-label,
body.ioc-site .cv2-page .cv2-rs-target strong,
body.ioc-site .cv2-page .cv2-eyebrow{
      color: var(--cv2-fabric-blue);
    }body.ioc-site .cv2-page .cv2-eyebrow--cv2-light{
      color: var(--cv2-fabric-cyan);
    }body.ioc-site .cv2-page .cv2-route-badge{
      background: var(--cv2-fabric-soft);
      color: var(--cv2-fabric-blue-dark);
    }body.ioc-site .cv2-page .cv2-route-summary{
      border-left-color: var(--cv2-fabric-cyan);
    }body.ioc-site .cv2-page .cv2-plat-core{
      background: var(--cv2-fabric-blue);
    }body.ioc-site .cv2-page .cv2-plat-ai .cv2-plat-index{
      color: var(--cv2-fabric-cyan);
    }body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-fabric-navy);
    }body.ioc-site .cv2-page .cv2-outcome span{
      color: var(--cv2-fabric-cyan);
    }body.ioc-site .cv2-path-step b{
      display: block;
      color: var(--cv2-fabric-cyan);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}

/* CV2: the diagnostic card's head is TEMPLATE-owned (form_heading_01/
   form_copy_01) — the runtime's own fallback title/copy inside the mount
   would print a second heading, so it is suppressed here, not in JS. */
body.ioc-site .cv2-card .ioc-form-title{display:none}

/* CV2: the campaign chrome wears the MAIN SITE LOGO (owner instruction
   2026-08-21) — the same .infoc-logo lockup the site header renders, word
   store-defaulted via brand_01, letters split by the runtime (no-JS shows
   the plain Michroma word). The comp's own INFO+boxed-C approximation is
   retired; .cv2-brand-c rules below are inert. */
body.ioc-site .cv2-brand{font-size:17px;color:var(--ioc-g100);text-decoration:none}
body.ioc-site .cv2-footer .cv2-brand{color:var(--ioc-surface)}

/* CV2 · SC 1.4.10 FLOOR (CMS-D-172 W6). The comp's own mobile rules stack
   with bare `1fr` tracks, and a bare `1fr` is minmax(auto,1fr) — the
   min-content of a 45px display headline or a wide diagnostic card grows
   the track past a 320px viewport (measured: hero copy 341px, card 352px
   in a 305px client). minmax(0,1fr) + min-width:0 is the fix the kit uses
   for the same class elsewhere; word wrapping catches the residue. */
@media (max-width:767px){
  body.ioc-site .cv2-hero-in,
  body.ioc-site .cv2-promise,
  body.ioc-site .cv2-route-grid,
  body.ioc-site .cv2-plat-map,
  body.ioc-site .cv2-capabilities,
  body.ioc-site .cv2-outcomes,
  body.ioc-site .cv2-path,
  body.ioc-site .cv2-card .ioc-form-grid{grid-template-columns:minmax(0,1fr)}
  body.ioc-site .cv2-hero-copy,
  body.ioc-site .cv2-card,
  body.ioc-site .cv2-capability,
  body.ioc-site .cv2-route-card,
  body.ioc-site .cv2-card .ioc-field{min-width:0;max-width:100%}
  body.ioc-site .cv2-card{margin-inline:0}
  body.ioc-site .cv2-display,
  body.ioc-site .cv2-title{overflow-wrap:anywhere}
}

/* CV2 · SC 1.4.10 floor, round 2 (measured at 320px): the adoption panel's
   path kept a fixed track and its h4/step text refused to wrap; the header
   nav row would not break. Content is made to FIT — nothing is clipped. */
@media (max-width:767px){
  body.ioc-site .cv2-ai-panel{max-width:100%;min-width:0}
  body.ioc-site .cv2-ai-panel .cv2-path-wrap{max-width:100%;min-width:0}
  body.ioc-site .cv2-ai-panel .cv2-path{grid-template-columns:minmax(0,1fr);width:100%;min-width:0}
  body.ioc-site .cv2-ai-panel .cv2-path-step{min-width:0;width:auto;max-width:100%}
  body.ioc-site .cv2-path-wrap h4,
  body.ioc-site .cv2-path-step strong,
  body.ioc-site .cv2-path-step span{white-space:normal;overflow-wrap:anywhere}
  body.ioc-site .cv2-navwrap{flex-wrap:wrap;justify-content:flex-end;min-width:0}
  body.ioc-site .cv2-navwrap .cv2-btn{max-width:100%}
  body.ioc-site .cv2-header-in{flex-wrap:wrap}
}

/* SC 1.4.10 · THE HONEYPOT CONTAINMENT the a11y ratchet's own inventory
   prescribes ("Containing it … should take this ceiling from 24 to about
   3"). `.ioc-hp` is position:absolute WITHOUT an inset, so its 1px box sits
   at its STATIC position — the end of the form row, frequently past the
   right edge — and an absolute box beyond the edge extends the document
   scroll area even though its content is clipped. Pinning it to the form's
   origin removes the dominant narrow-reflow class site-wide. Here and not
   in infoc-cms.css: the kit sheet is byte-pinned (CMS-D-054); this sheet is
   the owned tiebreak layer. */
body.ioc-site .ioc-hp{left:0;top:0}

/* SC 1.4.10 · below the §AI page-clip guard (<768px) the plat-layers band's
   50%−50vw breakout is the only thing left overhanging (8px of EMPTY band at
   390, the measured §AI class). Down here the breakout buys nothing a 390px
   viewport can see, so it is retired rather than clipped — the band spans
   its container, no content moves, no scrollbar. */
@media (max-width:767px){
  body.ioc-site .ioc-plat-layers{width:100%;margin-left:0}
}

/* SC 2.5.8 · the UTILITY BAR's phone/email anchors measure 106x19 packed
   tighter than the 24px spacing exception — the one target class failing
   both of the criterion's own exceptions once the reflow debt stopped
   masking the check. Block padding lifts the HIT AREA to >=24px; the
   negative block margin keeps the bar's visual height unchanged.
   DELIBERATELY NO display DECLARATION. The first cut wrote
   display:inline-block here, and it broke the contact anchors on the live
   bar: it won the cascade over their display:inline-flex (§J, same
   specificity, earlier in the sheet), the anchor stopped being a flex
   container, and the frontend's Tailwind preflight (svg{display:block})
   stacked the 14px icon above its label — measured 41px anchor against the
   one-line 25px. It bought nothing anywhere: both clusters are flex
   containers (.ioc-utility-links §J, .ioc-utility-contact above), so their
   anchor flex ITEMS blockify to the same computed display with or without
   it, and padding grows a flex item's bounding box for the criterion just
   the same. utility-bar-contact-display.int.spec.ts pins the cascade
   winner. */
body.ioc-site .ioc-utility-contact a,
body.ioc-site .ioc-utility-links a{padding-block:4px;margin-block:-4px}

/* SC 1.4.3 + 2.5.8 · two below-the-fold findings the a11y suite's new
   reveal-sweep unmasked (they predate CMS-D-172; the pre-sweep scan measured
   pages in their unrevealed state and could not see them):
   · .ioc-plat-note printed white at opacity .55 — ~3.3:1 where the note
     crosses the blue accent card. Raised to .8 → ≥5.4:1 over the blue and
     ≥9:1 over the band.
   · .ioc-card-link is a 19px-tall target with a neighbour inside 24px on
     the talents cards. Same remedy as the utility bar: block padding lifts
     the hit area, the negative margin keeps the layout. */
body.ioc-site .ioc-plat-note{opacity:.8}
body.ioc-site .ioc-card .ioc-card-link{padding-block:4px;margin-block:-4px;margin-top:14px}

/* SC 1.4.3 · the aud selector's CURRENT item prints its 12px small line at
   the kit's opacity .82 over the accent fill — axe measures it under 4.5:1.
   Full opacity on the selected item only; unselected items keep the kit's
   treatment on their white ground (where it passes). Kit sheet is byte-
   pinned, so the override lives here. */
body.ioc-site .ioc-cta-aud>li[aria-current="true"] small{opacity:1}

/* CV2 · DESKTOP QUALITY PASS (owner review 2026-08-21, 1920px screenshots).
   Four measured repairs — file-late so they win their earlier ported twins:
   1) The display clamp capped: at 1920 the comp's own 6rem cap set
      "implementation" (96px, −0.065em) wider than the 512px copy column and
      the card clipped it mid-word. 4.6vw/5.1rem keeps every headline's
      longest word inside the column at any width; break-word is the safety
      net, inert while things fit.
   2) The situation card's HOVER lost its blue fill in the port while its
      text-color rules survived — hover printed near-white text on a white
      card. Hover and pressed now share one canonical treatment: blue fill,
      white h3, near-white body, pale chip/action.
   3) The campaign header wraps untidily at wide viewports — label, nav
      anchors and the CTA each broke to two lines. Single-line at >=768.
   4) The route-summary/back-of-card text inherits correctly. */
body.ioc-site .cv2-display{font-size:clamp(3.25rem,4.6vw,5.1rem);overflow-wrap:break-word}
body.ioc-site .cv2-route-card:hover,
body.ioc-site .cv2-route-card[aria-pressed="true"]{background:var(--ioc-blue);border-color:var(--ioc-blue);color:var(--ioc-surface)}
body.ioc-site .cv2-route-card:hover h3,
body.ioc-site .cv2-route-card[aria-pressed="true"] h3{color:var(--ioc-surface)}
body.ioc-site .cv2-route-card:hover p,
body.ioc-site .cv2-route-card[aria-pressed="true"] p{color:color-mix(in srgb, var(--ioc-surface) 88%, var(--ioc-blue))}
body.ioc-site .cv2-route-card:hover .cv2-rc-label,
body.ioc-site .cv2-route-card[aria-pressed="true"] .cv2-rc-label,
body.ioc-site .cv2-route-card:hover .cv2-rc-action,
body.ioc-site .cv2-route-card[aria-pressed="true"] .cv2-rc-action{color:var(--ioc-surface)}
@media (min-width:768px){
  body.ioc-site .cv2-label{white-space:nowrap}
  body.ioc-site .cv2-nav a{white-space:nowrap}
  body.ioc-site .cv2-navwrap .cv2-btn{white-space:nowrap}
}

/* CV2 · desktop pass, round 2 (both measured): "implementation" at the
   5.1rem cap is 567px in a 512px column — 4.5rem measures 500px and every
   page's longest headline word now fits at any width. And the dark bands'
   kicker inherited the base eyebrow's full blue (0,1,255 on black — near
   invisible); the light variant re-asserts its periwinkle here where the
   cascade can't lose it. */
body.ioc-site .cv2-display{font-size:clamp(3.25rem,4.6vw,4.5rem)}
body.ioc-site .cv2-eyebrow.cv2-eyebrow-light{color:color-mix(in srgb, var(--ioc-blue) 34%, var(--ioc-surface))}

/* CV2: an empty kicker must not print its lone dash. */
body.ioc-site .cv2-eyebrow:empty{display:none}

/* ============================================================
   CV2 · FORM-FIRST CARD + FOCUS TYPOGRAPHY + SITE FOOTER ROW
   (owner review 2026-08-21: "form is the main focus … remove all
   the clutter text … no proper padding … footer last row like the
   general home page footer").
   The card is now bar → fields → submit → one reply line. Field
   type is tuned for focus: quiet 12.5px/600 sans labels, 16px
   inputs (no mobile zoom), calm 16px rhythm, a real focus ring.
   The footer bottom row is the site footer's legal-row anatomy:
   one 64px flex row, brand+tagline left, © + links right with
   the same 20px gaps and 12.5px muted type.
   ============================================================ */
body.ioc-site .cv2-card-body{padding:24px}
body.ioc-site .cv2-card .ioc-form-grid{gap:16px}
body.ioc-site .cv2-card .ioc-field label{font-family:var(--ioc-sans);font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--ioc-text-primary);margin-bottom:8px}
body.ioc-site .cv2-card .ioc-field input,
body.ioc-site .cv2-card .ioc-field select,
body.ioc-site .cv2-card .ioc-field textarea{font-family:var(--ioc-sans);font-size:16px;line-height:1.4;padding:12px;border:1px solid color-mix(in srgb, var(--ioc-g100) 24%, var(--ioc-surface));background:var(--ioc-surface);color:var(--ioc-text-primary);width:100%}
body.ioc-site .cv2-card .ioc-field input:focus-visible,
body.ioc-site .cv2-card .ioc-field select:focus-visible,
body.ioc-site .cv2-card .ioc-field textarea:focus-visible{outline:2px solid var(--ioc-blue);outline-offset:0}
body.ioc-site .cv2-card .ioc-field textarea{min-height:96px}
body.ioc-site .cv2-card .ioc-field:has(input[type=checkbox]) label,
body.ioc-site .cv2-card .ioc-field .ioc-fhint{font-size:12px;font-weight:400;color:var(--ioc-g70);line-height:1.5}
body.ioc-site .cv2-card .ioc-form-actions{margin-top:24px}
body.ioc-site .cv2-card .ioc-form-actions button{font-size:16px;font-weight:700;padding:16px 24px;width:100%}
body.ioc-site .cv2-footer{padding:0}
body.ioc-site .cv2-footer .wrap.cv2-footer-in{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px;flex-wrap:wrap}
body.ioc-site .cv2-footer-brand{display:flex;align-items:center;gap:16px;margin:0}
body.ioc-site .cv2-footer-brand p{margin:0;font-size:12.5px;color:color-mix(in srgb, var(--ioc-surface) 72%, var(--ioc-g100))}
body.ioc-site .cv2-footer-links{display:flex;align-items:center;gap:16px;font-size:12.5px;color:color-mix(in srgb, var(--ioc-surface) 72%, var(--ioc-g100))}
body.ioc-site .cv2-footer-nav{display:inline-flex;align-items:center;gap:16px}
body.ioc-site .cv2-footer-nav a{color:inherit;text-decoration:none}
body.ioc-site .cv2-footer-nav a:hover{color:var(--ioc-surface)}
/* ── CV2 R2 (owner 2026-08-21): per-section perfection + the site footer legal row ── */
/* An icon slot the store leaves empty holds no space above the promise label
   (the comps' promise chips are text-only; a store-supplied icon still renders). */
body.ioc-site .cv2-promise-icon:has(use[href$=".svg#"]){display:none}
/* A two-column cell grid with an odd tail must not frame an empty cell:
   the last odd capability spans the full row. */
body.ioc-site .cv2-capabilities .cv2-capability:nth-child(odd):last-child{grid-column:1 / -1}
/* The campaign footer's LAST ROW is the site footer's legal row, verbatim. */
body.ioc-site .cv2-footer .wrap.cv2-footer-in{min-height:0;padding-block:24px 16px}
body.ioc-site .cv2-footer-legal{border-top:1px solid color-mix(in srgb, var(--ioc-surface) 16%, transparent)}
body.ioc-site .cv2-legal-row{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:12px}
body.ioc-site .cv2-legal-links{display:flex;align-items:center;flex-wrap:wrap;gap:16px;font-size:12.5px;color:color-mix(in srgb, var(--ioc-surface) 72%, var(--ioc-g100))}
body.ioc-site .cv2-legal-button{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
body.ioc-site .cv2-legal-button:hover{color:var(--ioc-surface);text-decoration:underline;text-underline-offset:4px}
body.ioc-site .cv2-legal-actions{display:flex;align-items:center;gap:16px}
body.ioc-site .cv2-social{display:flex;align-items:center;gap:8px}
body.ioc-site .cv2-social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ioc-surface);color:var(--cv2-ink)}
body.ioc-site .cv2-social a:hover{background:var(--cv2-infoc-blue);color:var(--ioc-surface)}
body.ioc-site .cv2-social svg{display:block}
body.ioc-site .cv2-back-top{display:inline-flex;align-items:center;gap:8px;margin:0;border:0;padding:8px 12px;background:var(--ioc-surface);color:var(--cv2-ink);font-family:var(--ioc-sans);font-size:12.5px;font-weight:600;cursor:pointer}
body.ioc-site .cv2-back-top:hover{background:var(--cv2-infoc-blue);color:var(--ioc-surface)}
@media (max-width: 820px){
body.ioc-site .cv2-legal-row{flex-direction:column;align-items:flex-start;gap:16px;padding-block:16px}
body.ioc-site .cv2-legal-actions{width:100%;justify-content:space-between}
}
/* ── CV2 R3 (QA 2026-08-21, ISSUE-003): the campaign display heading's 3.25rem
   floor renders one word per line at phone widths and pushes the form nearly
   two screens down. Below 620px the floor steps down; the vw term keeps it
   fluid up to the old floor. Scale-snapped (2rem / 3.25rem bounds). ── */
@media (max-width: 620px){
body.ioc-site .cv2-display{font-size:clamp(2rem,9vw,3.25rem)}
}

/* --- CHAT ROUTING PANEL -> capture form (owner decision 2026-08-24). The kit
   sheet is byte-pinned (CMS-D-054), so the two states this adds live here.
   `[hidden]` is asserted explicitly because the kit gives `.chat-route` and the
   form's own rows `display:flex/grid`, and a display rule beats the attribute's
   UA default -- without this the "hidden" half renders under the visible one,
   which is how a swapped view silently becomes a stacked one. --- */
body.ioc-site .sh-chat [data-chat-routes][hidden],
body.ioc-site .sh-chat [data-chat-form][hidden]{display:none}
body.ioc-site .sh-chat .chat-form{display:block}
/* Secondary, not accent (owner ruling 2026-08-25). This is a step BACK out of
   the form, printed above the question the visitor is meant to answer, and in
   house blue it was the first coloured thing the eye landed on — an escape
   hatch competing with the task. Grey at rest, accent on hover and on
   keyboard focus, so it still reads as a control and still announces itself
   the moment it is aimed at. Nothing moves: same size, same box, same 12px
   margin, so the fix costs no height in a panel that is already over budget. */
body.ioc-site .sh-chat .chat-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--ioc-text-secondary);cursor:pointer}
body.ioc-site .sh-chat .chat-back:hover,
body.ioc-site .sh-chat .chat-back:focus-visible{color:var(--ioc-blue,#0001ff);text-decoration:underline}
body.ioc-site .sh-chat .chat-form form{margin:0}

/* --- CHAT PANEL: the form must FIT (owner report 2026-08-24, from a screenshot
   of the live panel showing the Email field, the second route option and the
   textarea all cut off at the panel's right edge).

   The panel is `min(100vw - 40px, 23rem)` = 368px, and the form it now carries
   was drawn for a page column: `.ioc-form-grid` is `1fr 1fr` and `.ioc-choices`
   is `repeat(auto-fit, minmax(220px, 1fr))`, so two 220px tracks plus the gap
   demand ~456px and simply overflow a 368px box. Nothing here restyles the
   form; it is told the truth about how much room it has.

   `min-width:0` is the load-bearing line. A grid ITEM defaults to
   `min-width:auto`, so a long unbroken value (an email address, a URL) sets a
   floor wider than the track and pushes the whole row past the panel edge --
   the same blowout the footer contact rows needed `overflow-wrap:anywhere` for.

   The panel also gains a height cap with its own scroll: a router form is
   taller than a four-row list, and without this the panel grew past the
   viewport on a laptop and the submit button became unreachable. --- */
/* SLIDE-OUT, not a popover (owner request 2026-08-24). The panel carries a
   router form now, and a 26rem box capped at 70vh was the wrong container for
   it: the form fitted only because it was told to, and the submit button sat
   behind a scroll on a laptop.

   The geometry is the shell's OWN drawer (`.sh-drawer`, infoc-cms.css) rather
   than a new pattern — right edge, full height, `min(92vw,28rem)`,
   `translateX(102%)` out and `none` in, at the same easing. Reusing it means
   the chat opens exactly like the mobile menu, which is the behaviour a visitor
   has already learned on this site.

   `position:fixed` escapes `.sh-chat` (fixed, no transform on it, so no
   containing block is created) — which is the point: the launcher stays pinned
   bottom-right and paints ABOVE the drawer, because the button follows the
   panel in DOM order, so it keeps working as the close affordance.

   The closed state keeps the kit's `opacity:0;visibility:hidden` so a hidden
   panel cannot take focus; only the geometry and the direction of travel
   change. Head and foot hold still and the BODY scrolls, which is what full
   height buys. */
body.ioc-site .sh-chat .chat-panel{
  position:fixed;inset:0 0 0 auto;right:0;bottom:0;
  width:min(92vw,28rem);max-width:none;
  display:flex;flex-direction:column;
  transform:translateX(102%);transform-origin:right center;
  transition:transform .32s var(--ioc-ease),opacity .2s var(--ioc-ease),visibility .2s;
  box-shadow:-2rem 0 5rem rgba(0,0,0,.18)
}
body.ioc-site .sh-chat .chat-panel.open{transform:none}
body.ioc-site .sh-chat .chat-body{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden}
body.ioc-site .sh-chat .chat-head,
body.ioc-site .sh-chat .chat-foot{flex:0 0 auto}
/* The launcher is the FAB that OPENS the drawer, and a full-height drawer lands
   on top of it — measured: `elementFromPoint` at the launcher's centre returns
   the panel, so the button is covered rather than merely overlapped. It is
   hidden while the drawer is open instead of floated above it: a FAB sitting
   over the drawer's own content is the pattern every chat widget abandoned, and
   the drawer already carries its own close control in the head (plus Escape,
   which the shell runtime binds). `:has()` is the same mechanism this sheet
   already uses for the hero carve-out, so no new class or runtime work. */
body.ioc-site .sh-chat:has(.chat-panel.open) .chat-launcher{opacity:0;visibility:hidden;pointer-events:none}
body.ioc-site .sh-chat .chat-form .ioc-form-grid{grid-template-columns:1fr}
body.ioc-site .sh-chat .chat-form .ioc-choices{grid-template-columns:1fr}
body.ioc-site .sh-chat .chat-form .ioc-field,
body.ioc-site .sh-chat .chat-form .ioc-form-grid>*,
body.ioc-site .sh-chat .chat-form .ioc-choicegroup{min-width:0}
body.ioc-site .sh-chat .chat-form input,
body.ioc-site .sh-chat .chat-form select,
body.ioc-site .sh-chat .chat-form textarea{max-width:100%;overflow-wrap:anywhere}
body.ioc-site .sh-chat .chat-form textarea{min-height:5.5rem}

/* --- CHAT DRAWER: a COMPACT scale so the form fits the panel (owner request
   2026-08-24, with a screenshot of the router form scrolling).

   Measured on production before this: the form was 1000px of content in a
   761px body — 239px past the fold, so the consent tick and the submit button
   both sat below it. The form is drawn at page scale (16px labels and inputs,
   48px controls, 49px choice rows x5) and a 448px drawer is not a page column.

   Nothing new is minted: 14px and 13px are already the kit's secondary and
   helper sizes, and the paddings stay on the spacing scale. The choice rule
   carries `:not(.ioc-consent)` because CMS-D-145/146 make that binding — an
   unqualified `.ioc-choice b` font-size took the PDPA tick with it once
   already, and `consent-print-contract.spec.ts` fails any rule that can reach
   the consent fieldset by accident.

   `@media (pointer:coarse)` puts inputs back to 16px. Below 16px iOS Safari
   ZOOMS the viewport on focus, which on a fixed drawer leaves the visitor
   scrolled sideways inside a panel they cannot see the edges of — a worse
   failure than the scroll this is fixing. Touch keeps the roomier scale it
   needs anyway. --- */
body.ioc-site .sh-chat .chat-form .ioc-field label,
body.ioc-site .sh-chat .chat-form .ioc-choicegroup>label{font-size:13px}
/* `:not([type=radio]):not([type=checkbox])` is not tidiness. `.ioc-choice` IS a
   <label> wrapping its own radio, so a bare `input{height}` sizes the RADIO and
   pushes every choice row taller — measured: the rows went 49px -> 56px and the
   form got LONGER, the opposite of the intent. */
body.ioc-site .sh-chat .chat-form input:not([type=radio]):not([type=checkbox]),
body.ioc-site .sh-chat .chat-form select,
body.ioc-site .sh-chat .chat-form textarea{font-size:14px;padding:8px 12px;min-height:0}
body.ioc-site .sh-chat .chat-form input:not([type=radio]):not([type=checkbox]),
body.ioc-site .sh-chat .chat-form select{height:38px}
body.ioc-site .sh-chat .chat-form .ioc-choice{font-size:14px;line-height:1.35}
body.ioc-site .sh-chat .chat-form textarea{min-height:56px}
body.ioc-site .sh-chat .chat-form .ioc-form-grid{gap:8px}
body.ioc-site .sh-chat .chat-form .ioc-field{gap:4px}
body.ioc-site .sh-chat .chat-form .ioc-choicegroup:not(.ioc-consent) .ioc-choice{padding:8px 12px;min-height:0}
body.ioc-site .sh-chat .chat-form .ioc-choicegroup:not(.ioc-consent) .ioc-choice b{font-size:14px}
/* --- The submit button must never sit behind a scroll (owner report
   2026-08-25, third report of the same class). Compaction alone cannot
   guarantee it: measured on this build at 1440x900 with Turnstile absent and
   no validation message shown, `.chat-body` was 915px of content in a 775px
   scrollport -- 140px over -- and "Send the enquiry" rendered at y=831..879
   against a scrollport ending at 853. Add a field error or the Turnstile box
   and it drops further. Two earlier rounds shrank the form's scale; a fourth
   would keep losing to whatever the form grows next.

   So the action row is PINNED instead of shrunk. `position:sticky;bottom:0`
   inside the existing `.chat-body` scrollport keeps the button on screen at
   every scroll position and still lets it settle into its natural place once
   the form is short enough to fit -- no second layout, no markup change, and
   nothing here reaches `server-forms.ts` or a form runtime (the CG form-flow
   gate covers those; this sheet is not on that list).

   The negative side margins cancel `.chat-body`'s own 16px padding so the bar
   spans the full panel width and the hairline reads as an edge rather than a
   floating rule; the padding puts the inset back inside the bar. The opaque
   `--ioc-surface` background is load-bearing -- without it the fields scroll
   through the button. --- */
body.ioc-site .sh-chat .chat-form .ioc-form-actions{
  position:sticky;bottom:0;z-index:2;
  margin:8px -16px 0;padding:12px 16px;
  background:var(--ioc-surface,#fff);
  border-top:1px solid var(--ioc-border-subtle)
}
body.ioc-site .sh-chat .chat-form .btn{min-height:40px;font-size:14px}
body.ioc-site .sh-chat .chat-head{padding-top:12px;padding-bottom:12px}
body.ioc-site .sh-chat .chat-head h2{font-size:20px}
@media (pointer:coarse){
  body.ioc-site .sh-chat .chat-form input:not([type=radio]):not([type=checkbox]),
  body.ioc-site .sh-chat .chat-form select,
  body.ioc-site .sh-chat .chat-form textarea{font-size:16px}
}

/* --- FOOTER COLUMNS: an accordion on phones (owner ruling 2026-08-25).
   Measured at 375x812 before this: `.ioc-footer` was 1932px — two and a half
   screens of footer under every page.

   `[hidden]` IS ASSERTED, not assumed. This sheet already learned that lesson
   on the chat panel: the kit gives footer links their own `display`, and a
   display rule beats the attribute's UA default, so an unasserted `hidden`
   panel renders under the open one and a collapsed accordion silently becomes
   a stacked list. `.footer-sub` is a plain div today, which is exactly when
   this is cheapest to state and easiest to forget.

   Everything below the media query is DESKTOP-INERT: above 768px the runtime
   strips the button semantics and un-hides every panel, and none of these
   rules apply, so the footer is byte-for-byte the composition it already was.

   The chevron is a CSS caret in `currentColor`, not a sprite icon — the
   CMS-D-066 icon vocabulary governs the SVG set, and this is a disclosure
   affordance drawn from the heading's own colour. It has to be VISIBLE:
   a tappable heading with no affordance is the "relying on hover for
   discoverability" failure, and there is no hover on a phone. --- */
body.ioc-site .ioc-footer .footer-sub[hidden]{display:none}
@media (max-width:768px){
  /* ONE COLUMN, and this is the load-bearing rule — without it the accordion
     is unusable, which is how it first shipped.

     `.footer-main-grid` is FIVE tracks
     (`minmax(0,1.3fr) repeat(3,minmax(0,1fr)) minmax(0,1.3fr)`, section
     "footer" above) and that rule carries `body.ioc-site`, so it OUTRANKS the
     kit sheet's own `@media` fallbacks at `.ioc-footer .footer-main-grid`
     (0,2,0) — the footer was five columns at every width already, and had been
     since V6 landed. It looked fine only because the link lists held the
     tracks open.

     Collapsing the panels removed that content, and `minmax(0,…)` let the
     tracks shrink to what was left. MEASURED at 375px: the three menu tracks
     came out 42.47px, 32.69px and 32.69px, so "SOLUTIONS", "TALENTS GATEWAY"
     and "EXPLORE" rendered on top of one another and two of the four chevrons
     were clipped out of their cell. A disclosure control has to own a full
     row; a 33px one is not a control.

     `row-gap:0` because each heading already carries its own `border-top`
     hairline — a 32px gap as well would float the rule away from the heading
     it separates. The brand and contact blocks get that space back explicitly,
     since they are the two grid children that are NOT accordion rows. The
     stack keeps its two navs in document order (Talents Gateway, then
     Academy), so the mobile order matches the desktop composition. */
  body.ioc-site .ioc-footer .footer-main-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  body.ioc-site .ioc-footer .footer-menu-stack{gap:0}
  body.ioc-site .ioc-footer .footer-brand{margin-bottom:24px}
  body.ioc-site .ioc-footer .footer-contact-col{margin-top:24px}
  /* `min-height:44px` is the touch-target floor and does the work; the padding
     is 12px because it must stay ON the 4/8/12/16/24/32/48 scale — 14px was
     the first draft and it took T17's v6 off-scale count from 27 to 28 against
     a SHRINK-ONLY ceiling, which is the gate refusing to let a new value in,
     not a number to raise. The rendered row is unchanged: 12 + the 11px mono
     line + 12 is under 44, so `min-height` sets the height either way. */
  body.ioc-site .ioc-footer h3[data-footer-accordion][role=button]{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin:0;padding:12px 0;min-height:44px;
    border-top:1px solid var(--ioc-border-subtle);
    cursor:pointer;-webkit-tap-highlight-color:transparent
  }
  body.ioc-site .ioc-footer h3[data-footer-accordion][role=button]::after{
    content:"";width:8px;height:8px;flex:0 0 auto;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .2s var(--ioc-ease)
  }
  body.ioc-site .ioc-footer h3[data-footer-accordion][aria-expanded=true]::after{
    transform:translateY(2px) rotate(-135deg)
  }
  body.ioc-site .ioc-footer h3[data-footer-accordion][role=button]:focus-visible{
    outline:2px solid var(--ioc-accent);outline-offset:2px
  }
  /* The panel keeps the kit's own link rhythm; only its bottom gap is added,
     so an open column does not collide with the next column's hairline. */
  body.ioc-site .ioc-footer .footer-sub{padding-bottom:12px}
}

/* VISUALLY HIDDEN, and defined here because nothing defined it.
   The canonical kit's `renderPage` emits `<h1 class="sr-only">` and the shipped
   sheet carried NO `.sr-only` rule — `grep -c sr-only site.css` returned 0. The
   class exists only in `infoc-admin-preview.css`, which the public document
   never loads. Emitting the class without this rule would have rendered a
   full-size page title at the top of 31 pages (the bare `h1{font-size:clamp(...)}`
   applies).

   `left:0;top:0` is not decoration: `.ioc-hp` is `position:absolute` with NO
   inset, and the a11y ratchet records it as 23 of 24 narrow-reflow violations
   because an unpinned 1px box still contributes to scroll width. Pinning it is
   what keeps this rule from repeating that defect.

   No margin/padding/gap declaration, deliberately: those are the properties
   gate T17 grades, and `1px` is off its 4/8/12/16/24/32/48 scale. Width and
   height are not graded, so the classic recipe passes without touching the
   shrink-only ceiling. */
.sr-only{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   Blog post header (CMS-D-066 · owner ruling 2026-08-27).

   The 96 imported posts rendered through the STOCK ENGINE template: white
   text over a top-transparent gradient (so the title was invisible against
   the pale top of the photo), `-mt-[10.4rem]` pulling the block 166px UP
   under the site header, and none of the house type or spacing. The header
   now sits on the page ground; the photo became a figure below it.

   Type sizes deliberately reuse the section-head scale the rest of the site
   uses, so a post reads as the same product as every other page. Every
   spacing value is on the DESIGN.md scale (T17); `font-size`, `height` and
   `max-height` are not spacing properties (§N).
   ============================================================ */
body.ioc-site .ioc-postheader{padding-top:48px;padding-bottom:24px}
body.ioc-site .ioc-postheader h1{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0;max-width:20ch}
body.ioc-site .ioc-postheader .ioc-kicker{margin:0 0 16px}
body.ioc-site .ioc-post-dek{margin:16px 0 0;max-width:60ch;font-size:18px;line-height:1.5;color:var(--ioc-text-secondary)}

/* The meta line draws its OWN separators, so an absent author or date leaves
   no orphaned middot in the markup. */
body.ioc-site .ioc-post-meta{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-secondary)}
body.ioc-site .ioc-post-meta > * + *::before{content:"·";margin-right:8px;color:var(--ioc-border-strong)}

/* The photo as a FIGURE rather than a substrate for text. `max-height` keeps
   a portrait-oriented import from filling a screen before the article starts;
   `object-fit` stops that crop distorting it. */
body.ioc-site .ioc-post-figure{margin:0 0 48px;padding:0}
body.ioc-site .ioc-post-figure img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;border:1px solid var(--ioc-border-subtle)}

@media(max-width:760px){
  body.ioc-site .ioc-postheader h1{font-size:32px;max-width:none}
  body.ioc-site .ioc-postheader{padding-top:32px}
}

/* ---- /reach card CTA (CMS-D-189) ----
   The reach tiles' CTA read as 15px bold blue body text with no arrow at all:
   the markup emitted no <svg>, even though `infoc-cms.css:1231` has always
   styled `.ioc-card .ioc-card-link svg` with a hover translate. It now takes
   the marketplace plan-card treatment (`.ioc-plan-cta`, ~line 3007) — mono,
   uppercase, arrow, and a hairline divider that pins it to the card foot.

   SCOPED TO `[data-ioc-reach]`, DELIBERATELY. `.ioc-card-link` is the card CTA
   on EVERY page of this site. /reach is a code-owned route and emits no
   `data-variant-id` to hang a rule on, so `ReachTiles.tsx` sets the hook. This
   is the same rule the separated-plan-tiles block above states in its own
   words: scope to the surface, never to `.ioc-cards`.

   SPECIFICITY, MEASURED — not assumed. Line 194 of this sheet is
   `body.ioc-site a.ioc-card .ioc-card-body .ioc-card-link{margin-top:16px}` at
   (0,4,2). The media-anatomy selector below is (0,5,2), so `margin:auto` wins
   and the CTAs align across a row. A bare `[data-ioc-reach] .ioc-card-link`
   would be (0,3,1) — silently overridden, leaving a fixed 16px top margin and
   ragged CTAs. That is the trap this comment exists to stop.

   THE DIVIDER IS FULL-BLEED, VIA MARKETPLACE PARITY (CMS-D-190, which amends
   CMS-D-189 ⓐ — this block shipped inset earlier the same day).

   A bleed needs a negative margin equal to the container's own padding. The
   first attempt restated the reach card's `clamp(22px,2.2vw,30px)` /
   `clamp(24px,2.4vw,34px)` and bought THREE off-scale values (22, 30, 34),
   pushing T17's v6 ceiling 27 -> 30 on a shrink-only ratchet — so it shipped
   inset instead.

   The marketplace does not have that problem, and the reason is the whole
   fix: `.ioc-plan` (line 2922) pads a FLAT `24px`, which is ON the 4px scale,
   so its `-24px` bleed is free. Adopting the same flat 24px here buys the
   full-bleed rule at zero off-scale cost and makes the two surfaces
   structurally identical — which is what "full width like marketplace" asks
   for. Do NOT reintroduce the clamp: it is what made the bleed unaffordable.

   SPACE ABOVE THE RULE comes from the description's bottom margin, exactly as
   it does on a plan card (whose checklist supplies it). `margin-top:auto`
   still pins the CTA to the foot, but auto collapses to ZERO in a card whose
   text already fills the row — which is why the tallest tile had its rule
   jammed against the copy. The 24px below is a floor, not the whole gap. */
body.ioc-site [data-ioc-reach] a.ioc-card .ioc-card-body{padding:24px}
body.ioc-site [data-ioc-reach] a.ioc-card:not(:has(.ioc-card-media:not(:empty))){padding:24px}
body.ioc-site [data-ioc-reach] .ioc-card-body .ioc-card-d,
body.ioc-site [data-ioc-reach] a.ioc-card > p{margin-bottom:24px}
body.ioc-site [data-ioc-reach] a.ioc-card .ioc-card-body .ioc-card-link,
body.ioc-site [data-ioc-reach] a.ioc-card > .ioc-card-link{
  margin:auto -24px 0;padding:24px 24px 0;
  border-top:1px solid var(--ioc-border-subtle);
  font-family:var(--ioc-mono);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ioc-blue,#0001ff)
}
body.ioc-site [data-ioc-reach] .ioc-card-link svg{flex:none}

/* ============================================================
   AM · CAMPAIGN FIGURE BAND (B-05-V10)

   Owner direction 2026-08-28: HALF WIDTH, not full-bleed. The first cut bled
   the image edge to edge, which made it the widest element on the page and
   louder than the hero. Copy left, image right — the same split the home hero
   uses, and the same reading order the rest of the lander already has.

   Being contained also retires the scrollbar hazard the full-bleed version
   carried: no `100vw`, so no dependency on §AI's `overflow-x:clip` guard, and
   nothing that only misbehaves on a headed browser.

   NOT the hero. `.cv2-hero-copy` is `position:sticky` and already measures
   864px against a 900px viewport, so an image there is pinned below the fold
   (measured, prod 1.4.0+24). This band sits between the situation cards and
   the band that follows.
   ============================================================ */
body.ioc-site .cv2-figband-in{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(3rem,6vw,6.5rem);align-items:center;
  padding-block:clamp(3.75rem,7vw,6.5rem)
}
body.ioc-site .cv2-figband-fig{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:4/3;background:var(--cv2-line);
  border:1px solid var(--cv2-line)
}
body.ioc-site .cv2-figband-fig img{width:100%;height:100%;object-fit:cover;display:block}
body.ioc-site .cv2-figband-h{
  margin:1rem 0 0;font-size:clamp(1.9rem,3.2vw,2.9rem);
  font-weight:800;line-height:1.08;letter-spacing:-.02em
}
body.ioc-site .cv2-figband-lead{
  margin:1.65rem 0 0;max-width:560px;color:var(--cv2-muted);
  font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.65
}
@media(max-width:1100px){
  body.ioc-site .cv2-figband-in{grid-template-columns:1fr;gap:2rem}
  body.ioc-site .cv2-figband-fig{aspect-ratio:16/9}
}

/* ============================================================
   AN · THE CAMPAIGN PLATFORM BAND GOES LIGHT (owner direction 2026-08-28:
   "make the whole page white theme, dark is no good experience").

   `.cv2-platform` shipped as the one ink band on a campaign lander — pure
   black with ~24 rules written against it: white body text, `--cv2-line-dark`
   hairlines, light-on-dark greys built as `color-mix(--ioc-g100 N%,
   --ioc-surface)`, and a pink gradient on the AI card. Flipping only the
   background would have left every one of those unreadable, so each is
   answered here.

   ADDITIVE ON PURPOSE. The comp's own rules (§ above, CMS-D-172 W6) are left
   untouched and this block overrides them at equal specificity. Reverting the
   ruling means deleting this block, not reconstructing 24 values.

   SCOPE IS EXACTLY THE FOUR LANDERS. `.cv2-platform` is rendered only by
   B-13-V11…V14, and those are used only by reach/business-central,
   reach/microsoft-365, reach/microsoft-azure and
   reach/microsoft-fabric-power-bi. Nothing else on the site moves.

   `.cv2-plat-core` KEEPS its blue fill. It is the band's focal card, white on
   house blue reads correctly on a light ground, and dropping it too would
   leave the band with no anchor at all.
   ============================================================ */
body.ioc-site .cv2-platform{background:var(--ioc-surface);color:var(--cv2-ink)}
body.ioc-site .cv2-platform::before{
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ioc-g100) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(color-mix(in srgb, var(--ioc-g100) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px
}
body.ioc-site .cv2-platform .cv2-eyebrow.cv2-eyebrow-light{color:var(--cv2-infoc-blue)}
body.ioc-site .cv2-platform .cv2-sec-lead{color:var(--cv2-muted)}
/* Grid hairlines: the dark-band line token inverts to the light one. */
body.ioc-site .cv2-platform .cv2-plat-map,
body.ioc-site .cv2-platform .cv2-outcomes,
body.ioc-site .cv2-platform .cv2-path{border-top-color:var(--cv2-line);border-left-color:var(--cv2-line)}
body.ioc-site .cv2-platform .cv2-plat-card,
body.ioc-site .cv2-platform .cv2-outcome,
body.ioc-site .cv2-platform .cv2-path-step{border-right-color:var(--cv2-line);border-bottom-color:var(--cv2-line)}
body.ioc-site .cv2-platform .cv2-plat-card:not(.cv2-plat-core){background:var(--ioc-surface)}
body.ioc-site .cv2-platform .cv2-plat-ai{background:color-mix(in srgb, var(--ioc-g100) 4%, var(--ioc-surface))}
/* Text that was light-on-dark. */
body.ioc-site .cv2-platform .cv2-plat-index{color:var(--cv2-muted)}
body.ioc-site .cv2-platform .cv2-plat-card:not(.cv2-plat-core) p{color:var(--cv2-muted)}
body.ioc-site .cv2-platform .cv2-plat-tags span{border-color:var(--cv2-line);color:var(--cv2-muted)}
body.ioc-site .cv2-platform .cv2-outcome span,
body.ioc-site .cv2-platform .cv2-path-icon{color:var(--cv2-infoc-blue)}
body.ioc-site .cv2-platform .cv2-path-step strong{color:var(--cv2-ink)}
body.ioc-site .cv2-platform .cv2-path-step span{color:var(--cv2-muted)}
body.ioc-site .cv2-platform .cv2-ai-panel{
  border-color:var(--cv2-line);
  background:color-mix(in srgb, var(--ioc-g100) 3%, var(--ioc-surface))
}
body.ioc-site .cv2-platform .cv2-ai-head p,
body.ioc-site .cv2-platform .cv2-path-wrap > p,
body.ioc-site .cv2-platform .cv2-ai-guardrail{color:var(--cv2-muted)}
body.ioc-site .cv2-platform .cv2-path-wrap{border-top-color:var(--cv2-line)}

/* The promise trio gets FEEDBACK, not decoration (owner asked for "animation on
   the box", 2026-08-28). DESIGN.md §Motion is explicit — "instant state
   changes; only drawers/palette may transition (≤150ms)", and decorative motion
   is a listed anti-pattern — so this is the same 120ms colour/background
   transition the marketplace tiles already use in this sheet, and nothing
   moves. The icon carries the accent on hover so the row reads as a unit. */
body.ioc-site .cv2-promise-item{transition:background 120ms linear}
body.ioc-site .cv2-promise-item:hover{background:var(--ioc-g10)}
body.ioc-site .cv2-promise-item .cv2-promise-icon{transition:color 120ms linear}
body.ioc-site .cv2-promise-item:hover .cv2-promise-icon{color:var(--cv2-infoc-blue)}
@media (prefers-reduced-motion:reduce){
  body.ioc-site .cv2-promise-item,
  body.ioc-site .cv2-promise-item .cv2-promise-icon{transition:none}
}

/* ============================================================
   AO · CAMPAIGN ENGAGEMENT BAND (B-17-V16) — owner direction 2026-08-28,
   CG sign-off.

   The campaign close was a button that sent you back up the page. It is now a
   real enquiry surface: head, photo, phone/email, form beside — the anatomy of
   B-17-V10 (the home enquiry band), rebuilt in cv2 rather than reused, so a
   campaign lander keeps its own language instead of importing ioc-* styling
   onto a page that has none of it.

   `.cv2-engage-card` is NOT `.cv2-card`, and that is load-bearing: the route
   runtime resolves the hero's select with
   `querySelector('.cv2-card select[name=service_route]')`, so a second
   `.cv2-card` on the page would make that first-match lookup ambiguous and the
   situation cards would start driving the wrong form.
   ============================================================ */
body.ioc-site .cv2-engage-in{
  display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:clamp(3rem,6vw,6.5rem);align-items:start
}
body.ioc-site .cv2-engage-fig{
  position:relative;margin:2rem 0 0;overflow:hidden;
  aspect-ratio:16/9;background:var(--cv2-line);border:1px solid var(--cv2-line)
}
body.ioc-site .cv2-engage-fig img{width:100%;height:100%;object-fit:cover;display:block}
body.ioc-site .cv2-engage-direct{
  display:grid;margin-top:24px;
  border-top:1px solid var(--cv2-line);border-left:1px solid var(--cv2-line)
}
body.ioc-site .cv2-engage-direct a{
  display:flex;align-items:center;gap:12px;padding:16px;
  border-right:1px solid var(--cv2-line);border-bottom:1px solid var(--cv2-line);
  color:var(--cv2-ink);font-weight:600;
  transition:background 120ms linear
}
body.ioc-site .cv2-engage-direct a:hover{background:var(--ioc-g10)}
body.ioc-site .cv2-engage-direct svg{width:20px;height:20px;flex:none;fill:currentColor;color:var(--cv2-infoc-blue)}
/* Mirrors the hero card so the two enquiry surfaces read as one system. */
body.ioc-site .cv2-engage-card{
  border:1px solid var(--cv2-ink);background:var(--ioc-surface)
}
@media(max-width:1100px){
  body.ioc-site .cv2-engage-in{grid-template-columns:1fr;gap:2.5rem}
}

/* ============================================================
   WORDMARK — no terminal underscore (owner instruction 2026-09-02).

   The kit draws a bar under the C in currentColor — `.infoc-logo
   .gc::after` (infoc-cms.css:309), a terminal-cursor conceit — on EVERY
   lockup this site renders: the header, the mobile drawer, the footer
   (`.footer-lockup`) and the CV2 campaign chrome, which wears the main
   site logo per the 2026-08-21 instruction. One unscoped-within-site
   rule reaches all four.

   Dropped HERE and not in the kit sheet: `infoc-cms.css` is the shared
   CMS-D-054 contract that infoc.ai and infoc.one also concatenate, and
   this is an infoc.com brand ruling. Neither of those sites renders
   `.infoc-logo` (they pass AiBrand/OneBrand), but the boundary is the
   point. `body.ioc-site …` is (0,3,0) against the kit's (0,2,0), and v6
   is the last part of the concat besides.

   `padding-bottom` goes with the bar. The kit's `.26em` on `.infoc-logo`
   (infoc-cms.css:304) exists ONLY to reserve the bar's box — it sits at
   `top:calc(100% + .122em)` and is `.14em` tall, i.e. .262em, the
   padding to the thousandth. Left in place it would keep the wordmark
   sitting ~0.13em high of centre inside every `align-items:center`
   brand row. T17: `0` is unitless, so no px enters a spacing property.

   The kit's own footer rule that faded this same bar out under
   `.suffixing` (infoc-cms.css:461) is now inert. It stays there,
   unedited, for the same boundary reason.
   ============================================================ */
body.ioc-site .infoc-logo{padding-bottom:0}
body.ioc-site .infoc-logo .gc::after{content:none}

/* ============================================================
   AQ · THE ELEMENT SYSTEM PASS (2026-09-04, owner-approved).

   Presentation only. No block changes shape, no page loses a section, no
   copy moves. Every value below is either an existing --ioc-* token or a
   color-mix() of one, so nothing is minted and radius stays ZERO.

   READ THIS BEFORE ADDING TO THE SECTION. Three quarters of the fixes that
   went into the audit behind this pass did not work as first written,
   because this sheet loading last is NOT the same as this sheet winning.
   The generated correction layer (concat part 2) re-emits kit colour rules
   as `body.ioc-site ...` at (0,2,x), so a (0,2,1) rule here loses on
   SPECIFICITY before source order is ever consulted. Every rule below
   states the weight it needs and why.

   CROSS-SITE WARNING, and it is not theoretical. The root frontend layout
   is site-blind: apps/one/src/app/(frontend)/layout.tsx:74 links site.css
   unconditionally and :93 stamps <body class="ioc-site"> for EVERY Site,
   and [siteKey]/layout.tsx nests inside it and only ADDS its own sheet. So
   every rule in this file ships on www.infoc.ai and www.infoc.one too, at a
   specificity their own sheets cannot beat. The exposed surfaces are the
   shared forms emitter (packages/standard/src/forms/markup.ts, which puts
   .ioc-form/.ioc-field/.ioc-choice on all three) and the shared search
   route ([siteKey]/search/page.tsx, which emits .ioc-search-hit). Anything
   else is protected only by the other sites using their own `iai-` and
   `ione-` class prefixes, which is content, not a boundary.
   ============================================================ */

/* --- AQ1 · FOCUS: ONE RING, NOT TWO -------------------------------------
   The kit declares --ioc-shadow-focus (infoc-cms.css:160) and paints it as
   a box-shadow at :195, then its own absorbed legacy reset paints an
   OUTLINE over the top at :2035, and the CV2 port restates that outline at
   :4602 of this file. Both are (0,1,0) and neither cancels the other, so
   every focused control on the site has rendered two rings.
   Resolving the token to `none` on the same element the kit declares it on,
   from the sheet that loads last, removes the shadow from all six of its
   consumers at once and changes no other declaration in the concat. The
   OUTLINE is the ring that survives, deliberately: it is never clipped by
   an ancestor's overflow (the concat has 70 such declarations), it cannot
   collide with a structural box-shadow, and it is the only one of the two
   that forced-colors mode preserves. */
body.ioc-site{--ioc-shadow-focus:none}

/* --- AQ2 · ONE MOTION DURATION FOR ONE INTERACTION ----------------------
   The kit defines a five-step duration scale (infoc-cms.css:77-82) and the
   site then hand-writes 31 distinct durations across 235 transitions, of
   which four use a token. Eight surfaces that all do the same thing --
   hover a box, change its ground -- do it at eight speeds.
   LONGHANDS, not the `transition` shorthand: each existing rule keeps its
   own property list, so the two-part rule on .ioc-plat-layer is not wiped.
   The media wrapper is what makes this safe -- it adds NO specificity, so
   the six authored `transition:none` reduced-motion resets in the kit and
   in this sheet stay live instead of becoming dead declarations whose
   comments still claim otherwise. Do not "simplify" it into an :is() list
   without the wrapper: :is() takes the weight of its heaviest argument, so
   one attribute selector in the list lifts every branch to (0,3,1) and
   silently outranks all six floors. */
@media (prefers-reduced-motion:no-preference){
  body.ioc-site :is(.ioc-row,.ioc-job,.ioc-card,.ioc-feature,.ioc-search-hit,.cv2-promise-item){
    transition-duration:var(--ioc-dur-instant);
    transition-timing-function:var(--ioc-ease);
  }
}

/* --- AQ3 · THE CARD HOVER SYSTEM ----------------------------------------
   One duration for the ground AND for everything that moves with it, or the
   card desyncs: the feature bar would still sweep at .38s and both arrows
   still run .18s under a 100ms ground. */
body.ioc-site .ioc-card,
body.ioc-site .ioc-feature,
body.ioc-site .ioc-related a,
body.ioc-site .ioc-cards [data-route-fam]{transition:background var(--ioc-dur-instant) var(--ioc-ease)}
body.ioc-site .ioc-card .ioc-card-link svg,
body.ioc-site .ioc-related .ioc-rel-go svg{transition:transform var(--ioc-dur-instant) var(--ioc-ease)}

/* ONE GROUND. The last selector ties :2052 at (0,4,1) and wins on source
   order. It deliberately does NOT reach the home B-11-V21 blue fill at
   (0,6,1), which is a recorded comp decision and stays.
   DELIBERATE EXCEPTION, not an oversight: the family band's 6% accent wash
   (infoc-cms.css:1136) is untouched. It paints 48 of 57 related links
   inside 16 .ioc-fam sections, and flattening it to --ioc-g10 would put a
   neutral near-white cell inside a 24% purple or green ground. */
body.ioc-site .ioc-card:hover,
body.ioc-site .ioc-feature:hover,
body.ioc-site .ioc-related a:hover,
body.ioc-site .ioc-cards [data-route-fam]:hover{background:var(--ioc-g10)}

/* ONE ARROW DISTANCE: 4px, not 3px. 3px is this site's CHROME value (header,
   footer, nav, form submit) and 4px its CONTENT value (cards, banners, jobs,
   related). Moving cards to 3px would invert that convention; moving related
   links to 4px joins the majority and touches one rule. */
body.ioc-site .ioc-related a:hover .ioc-rel-go svg{transform:translateX(4px)}

/* RESTATE THE MOTION FLOOR. The kit's per-component reduced-motion floors
   are now outranked by the rules above, and a media query adds no
   specificity of its own. */
@media (prefers-reduced-motion:reduce){
  body.ioc-site .ioc-card,
  body.ioc-site .ioc-feature,
  body.ioc-site .ioc-related a,
  body.ioc-site .ioc-cards [data-route-fam],
  body.ioc-site .ioc-card .ioc-card-link svg,
  body.ioc-site .ioc-related .ioc-rel-go svg{transition:none}
}

/* --- AQ4 · HOVER MEANS CLICKABLE, BOTH WAYS -----------------------------
   .ioc-feature carries the richest hover on the site -- a ground wash, a 3px
   accent bar sweeping in over 380ms, and an icon that moves -- and contains
   no anchor in any stylesheet or template. People hover it, get a complete
   "this is a link" response, click, and nothing happens.
   TWO VALUES HERE ARE COUNTER-INTUITIVE AND BOTH ARE DELIBERATE.
   `background` must be a real surface, NOT `transparent`: .ioc-features is
   a gap:1px grid whose container ground IS --ioc-border-subtle, so a
   transparent tile paints grey. And the bar must be `content:none`, NOT
   `transform:none`: the bar rests at scaleX(0), so the identity transform
   would pin it permanently VISIBLE. */
body.ioc-site .ioc-feature{background:var(--ioc-surface,#ffffff);transition:none}
body.ioc-site .ioc-feature::before{content:none}
body.ioc-site .ioc-feature:hover{background:var(--ioc-surface,#ffffff)}
body.ioc-site .ioc-feature:hover .ioc-fmark{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-feature .ioc-fmark{transition:none}

/* The other direction. .ioc-faq-item summary is cursor:pointer with no
   hover in any of the five sheets, while its sibling primitive
   .ioc-more>summary has had one since the kit was written.
   COLOUR ONLY, never a ground: the summary is `padding:20px 0` with zero
   inline padding, so a ground would run edge to edge of the text column.
   (0,3,2) beats the kit's (0,1,1) and the generated layer's (0,2,2) on
   specificity, not merely on source order. No :focus-visible rule here --
   the kit already rings it and a second outline would stack, not replace. */
body.ioc-site .ioc-faq-item summary:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}

/* --- AQ5 · TWO LIVE LAYOUT DEFECTS --------------------------------------
   (a) A DOUBLED HAIRLINE. The kit's .ioc-cards>* ring is never cancelled
   for the two de-stitched variants, whose cards already carry a real 1px
   border. Border 1px plus ring 1px of the same colour, adjacent, reads as a
   2px line on the home outcomes grid and the marketplace plan tiles. */
body.ioc-site [data-variant-id="B-11-V17"] .ioc-cards .ioc-card,
body.ioc-site [data-variant-id="B-11-V22"] .ioc-cards .ioc-card.ioc-plan{
  box-shadow:none;
}

/* (b) NINE CARDS IN ONE COLUMN. `.ioc-cards` sets display:grid but no
   columns; only .two/.three/.four supply them, and nothing gives the bare
   class a default, so a container authored without a count renders
   full-bleed single-column on a page that is otherwise 3-up and 4-up.
   auto-fit rather than a fixed count so it needs no media query of its own
   and cannot disagree with the kit's collapse rules. `grid-template-columns`
   is not a spacing property, so no new value enters the T17 ratchet. */
body.ioc-site .ioc-cards:not(.two):not(.three):not(.four){
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* --- AQ6 · CHIP GEOMETRY ------------------------------------------------
   SCOPE IS TWO FAMILIES, NOT FIVE, and the exclusions are the finding.
   `.tag` is EXCLUDED: its colour is pinned white at (0,3,1) by the
   generated correction layer, which no (0,2,x) rule here can beat, so
   giving it a surface ground would paint #ffffff text on #ffffff.
   `.ioc-cta-slots span` is EXCLUDED: it has zero live occurrences, and its
   descendant combinator would inflate this whole :is() list to (0,2,2),
   which is the step that would steal .ioc-markets .tag from the kit.
   `.ioc-mktchip` is EXCLUDED: already 8/12, already 36px, and it owns the
   site's only real chip hover and selected states.
   `display:inline-flex` is not decoration: .ioc-tag declares no `display`
   anywhere in the concat, so min-height would not apply to it as an inline
   box. It works today only because every painted instance happens to be a
   flex item. */
body.ioc-site :is(.ioc-tag,.ioc-chip){
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 12px;
  border-width:1px;
  border-style:solid;
  border-color:var(--ioc-border-subtle);
  border-radius:0;
  background:var(--ioc-surface);
}
/* The kit's small-screen reduction is a bare .ioc-chip at (0,1,0), and a
   media query adds no specificity, so the rule above would silently void
   it. Restated at a weight that survives. */
@media (max-width:640px){
  body.ioc-site .ioc-chip{padding:8px}
}
/* border-color above outranks the kit's .ioc-tag.ai accent edge. */
body.ioc-site .ioc-tag.ai{border-color:var(--ioc-accent)}

/* --- AQ7 · THE CONSENT ROW ----------------------------------------------
   The row records permission to contact someone and should be the easiest
   control in the form to hit, not the hardest.
   The hover is the half nobody had noticed: section AD's tile hover reaches
   the consent row too, so an UNTICKED consent box grew an accent edge on
   hover -- the exact inverse of the owner ruling that took card chrome off
   this row in the first place. (0,6,1) clears BOTH competitors by WEIGHT
   and never by source order, which matters because the home variant's own
   hover sits at (0,5,1) and would otherwise let this die silently on
   exactly one page. */
body.ioc-site .ioc-choicegroup.ioc-consent .ioc-choices .ioc-choice:hover{
  background:transparent;
  border-color:var(--ioc-border-subtle);
}
/* The 44px floor, stated instead of accidental. The consent scope's own
   `min-height:0` already voids the kit's floor; the row clears 44px today
   only because a padding tie happened to go the other way. Changes no pixel
   now, and stops the next padding change from silently shrinking a control
   that carries legal weight. */
body.ioc-site .ioc-choicegroup.ioc-consent .ioc-choices .ioc-choice{
  min-height:44px;
}

/* --- AQ8 · FORM ERRORS READ AS INFORMATION, NOT PUNISHMENT --------------
   The mechanics are already right: a summary panel that takes focus, links
   that jump to the field, aria-invalid and aria-describedby set per field.
   What was wrong was the weighting -- a red border, a red ground and a blue
   focus ring arriving together at equal strength, so nothing said what to
   fix first.
   The panel's focus ring is NOT recoloured here. Doing so would need an
   owner ruling against CMS-D-066 r3 and a DESIGN.md row in the same commit;
   AQ1 already removes the competing halo, which was the visible half. */
body.ioc-site .ioc-form-errors{
  border:1px solid var(--ioc-border-subtle,#e0e0e0);
  border-left:3px solid var(--ioc-danger,#da1e28);
  background:var(--ioc-danger-surface,#fff1f1);
}
/* Prose is never mono (CMS-D-066 r2). `color` TIES the generated correction
   layer and wins only on concat order, which is exactly why the
   body.ioc-site prefix is mandatory here and a bare .ioc-field-error would
   be a trap. */
body.ioc-site .ioc-field-error{
  font-family:var(--ioc-sans);
  font-size:13px;
  line-height:1.45;
  letter-spacing:0;
  color:var(--ioc-danger-text,#a2191f);
}
/* RESTORE THE CONSENT GROUP'S ERROR BORDER. The consent scope zeroes the
   group's border, so the kit's `.is-error` colour swap paints nothing, and
   the garbled generated sentence has been the ONLY error signal on the one
   field that blocks every submit on the site. Must be the `border`
   SHORTHAND: a border-color rule alone paints nothing against a zeroed
   width, at any specificity. */
body.ioc-site .ioc-choicegroup.is-error .ioc-choices{
  border:1px solid var(--ioc-danger,#da1e28);
}

/* --- AQ9 · THE SUBMIT BUTTON LOOKS BUSY WHEN IT IS BUSY -----------------
   Today the button disables itself and swaps its label, and nothing else:
   there is no [disabled] rule for .btn anywhere in the kit or this sheet,
   so it stays full house-blue and looks completely pressable while inert.
   The `button` element part of the selector is load-bearing, not
   decoration: it clears the (0,4,1) ceiling set by four separate
   .btn-primary:hover rules, so this wins by SPECIFICITY and never depends
   on source position.
   NO GREY [disabled] STATE, deliberately: on this control "disabled" and
   "in flight" are the same instant, so a grey would read "you cannot do
   this" at the exact moment the honest message is "working".
   The runtime half that sets aria-busy is CG-gated and is NOT in this
   commit; until it lands this rule is inert, which is the correct order --
   the presentation is ready and waiting for the behaviour. */
body.ioc-site .ioc-form-actions button.btn[aria-busy="true"]{
  opacity:.78;
  cursor:progress;
  justify-content:center;
  gap:12px;
}
@media (prefers-reduced-motion:reduce){
  body.ioc-site .ioc-form-actions button.btn[aria-busy="true"] .ioc-spin{animation:none}
}

/* CMS-D-221 / 00-wiringsite — the AUTHORED skin for www.infoc.com.
 *
 * WHAT THIS FILE IS. www.infoc.com's complete visual layer, replacing the
 * V6 sheet (CMS-D-118) that CMS-D-221 supersedes. It is served STANDALONE:
 * the concat is kit + forms + slider + this file, with NO overrides.css and
 * NO infoc-v6.css. That is the whole reason the pack's generic class names
 * (.card, .btn, .wrap, .hero) need no namespacing — nothing else is in the
 * document to collide with them.
 *
 * TWO REGIONS, and the difference matters:
 *
 *   THIS HEAD is authored and owned. It carries the transport the pack could
 *   not ship (self-hosted Figtree, an owned icon sprite) and nothing else.
 *
 *   THE PACK LAYER below the marker is SPLICED by
 *   sites/infoc.com/scripts/build-pack-layer.mjs from the pack's own
 *   site.css. Do not hand-edit it; the next build overwrites it. Change the
 *   pack, or change the splice rules in the builder.
 *
 * WHY THE PACK LAYER IS NEAR-VERBATIM. The owner asked for the pack exactly.
 * The two gates that grade a site skin for literal colour and off-scale
 * spacing (T16 appearance-gate, T17 spacing-gate) both read a fixed list of
 * named files and neither reads this one, so there is no gate pressure to
 * distort the sheet — and distorting it to satisfy a gate that never reads it
 * would trade real fidelity for imaginary compliance. T24 gate:icom-scale
 * grades this file honestly instead, armed at what the pack actually measures.
 *
 * THE PACK'S OWN LOAD-BEARING MOTION RULE, preserved verbatim from its
 * CMS-INTEGRATION.md section 5 because all three failure modes shipped as
 * bugs on this site once: a frame-driven transition must never be the thing
 * that makes content visible, legible or correctly coloured. No rule may
 * transition background, color, opacity or visibility. Only transform is
 * transitioned. An int spec asserts this against the built file.
 */

/* -- Figtree ------------------------------------------------------------
 * The pack loads Figtree from fonts.googleapis.com. S4 refuses a font CDN,
 * so it is self-hosted. These are the SAME two committed woff2 files the
 * infoc.one skin already serves — a variable face carrying wght 300-900,
 * which covers every weight the pack asks for (400,500,600,700,800,900) in
 * one download. Deliberately NOT a second copy: same bytes, same URL, one
 * cache entry across both sites. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/infoc-one-cms/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/infoc-one-cms/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -- Icons --------------------------------------------------------------
 * The pack draws icons as Phosphor webfont glyphs and gets the .ph class
 * from a CDN stylesheet it links in the head. site.css itself never defines
 * .ph — it only SIZES it, through the four-step --ic-1..4 scale, and colours
 * it (.platr i, .mh__nav i, .cs__i a i). Both of those keep working here.
 *
 * What changes is the transport: an owned symbol sprite and use, not a font.
 * A font was refused for a second reason beyond S4 — glyph elements with no
 * accessible name are announced by screen readers as private-use characters,
 * which is the defect the L5 seal exists to prevent.
 *
 * The metrics below reproduce what the font gave: Phosphor sets line-height
 * 1 and the glyph box scales with font-size, so 1em square keeps every
 * existing --ic-* size rule meaningful and unchanged. currentColor keeps the
 * pack's colour rules working untouched. The -0.125em baseline shift is what
 * puts an inline SVG where a glyph sat; without it every icon rides high
 * against its label. */
/* SCOPED, and that is load-bearing. An unscoped `.ph` sits at (0,1,0) and
 * LOSES to the kit's own `.btn svg{width:18px;height:18px}` at (0,1,1), which
 * sizes any svg inside any button. Measured: the hero CTA's icon rendered at
 * 18px against the pack's 15px, which grew the button from 47px to 56px and
 * pushed every band below it down the page. Scoping to `body.ioc-site` puts
 * this at (0,2,0), above every `element + class` rule the kit has.
 *
 * `align-self` matters for the same reason: these icons sit inside flex
 * buttons and links, and a stretched flex item would set the line height
 * instead of following it. */
body.ioc-site .ph,
body.ioc-site .ioc-form .btn > svg {
  width: 1em;
  /* A font glyph occupies its LINE BOX, not its em: the pack’s <i> measures
     24.3px tall inside a 15px icon at line-height 1.62, and in the flex rows
     the pack uses (.cs__i .k, .btn, .platr) that box height is what sets the
     row. An SVG at height:1em is only 15px and every such row came out short
     — 6px on the credential strip, 10px on industries, 19px down the page.
     `1lh` restores the glyph box exactly; preserveAspectRatio (the SVG
     default) keeps the MARK at 15×15 inside it, centred, exactly as a glyph
     sits on its baseline. The 1em fallback precedes it for engines without
     the lh unit — they get the old, slightly tight box rather than nothing. */
  height: 1em;
  height: 1lh;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
  flex: none;
  align-self: center;
  line-height: 1;
}

/* -- Band context -------------------------------------------------------
 * The pack sets its typography ONCE, on body, and every band inherits it:
 *
 *   body{font:400 16px/1.62 var(--disp);color:var(--t1);...}
 *
 * That works when the pack's sheet is the only one on the page. Here it is
 * not: infoc.com still loads site.css ahead of this layer, because thirteen
 * routes are still V6 and need it. site.css carries explicit rules on names
 * the pack also uses — `.hero{font-family:Manrope}`, `.lede{letter-spacing}`
 * — and an explicit rule beats inheritance at ANY specificity and in any
 * load order. Measured: `.hero`, `.k`, `.lede`, `.k--q` and `.hero__cap` all
 * rendered in Manrope while every value the pack states directly (the h1,
 * the button, the chips) was exact. Class-coverage checks cannot see this;
 * every class was present and correct and the ink underneath was V6's.
 *
 * So the pack's body context is re-established at every band root — every
 * `[data-block]` element (only pack bands carry that attribute; V6 sections
 * carry `data-block-id`) and the four chrome roots. Inheritance resumes from
 * there. Values are the pack's own body declaration, restated verbatim.
 * Nothing the pack sets explicitly is affected: the pack layer follows this
 * head in the sheet and wins every tie. */
body.ioc-site [data-block],
body.ioc-site .ub,
body.ioc-site .mh,
body.ioc-site .mm,
body.ioc-site .qd,
body.ioc-site .ft {
  font: 400 16px/1.62 var(--disp);
  color: var(--t1);
  letter-spacing: normal;
  text-wrap: pretty;
  font-variant-numeric: tabular-nums;
}
/* `.lede` is hit DIRECTLY by site.css (`.lede{letter-spacing:...}`), not by
   inheritance, so the root reset above cannot reach it; the pack's own .lede
   rule sets size and leading and leaves tracking at initial. Restated. */
body.ioc-site [data-block] .lede {
  letter-spacing: normal;
}

/* -- Closing-quad accents -----------------------------------------------
 * shell.js paints the three route cells with an INLINE style="--qa:#…" each:
 * #5478E8 (cloud marketplace), #3DD68C (Talents Gateway), #B388F5 (Academy).
 * A six-digit hex may not ride in product markup (CMS-D-066) and the
 * template scan refuses it, so the same three values are declared here, on
 * the cells by position, exactly as the pack's own :root declares its
 * tokens. The first is the pack's existing --halo-4; the other two exist
 * nowhere else in its token system and are lifted from shell.js verbatim.
 * The lead cell keeps the pack's --acc rule untouched. */
/* The lead cell takes the token too. The pack pins it to a literal #5478E8
   with the note that the solid accent is 2.79:1 on this black ground and fails
   AA while the lighter step is 5.23 — sound, and the reason survives the
   re-colour: the lighter step is now #33B1FF, which measures 8.1:1 there. A
   literal cannot follow the scale, so the token does the following. */
body.ioc-site .qd__i:nth-child(1) { --qa: var(--halo-4); }
body.ioc-site .qd__i:nth-child(2) { --qa: var(--halo-4); }
body.ioc-site .qd__i:nth-child(3) { --qa: #3FDBA0; }
body.ioc-site .qd__i:nth-child(4) { --qa: #BE95FF; }

/* -- The CMS form inside the enquiry band -------------------------------
 * The form markup is the CMS's (form-flow, CG-gated) and is not touched;
 * this is skin. The kit's forms sheet sets the "(optional)" tag in the
 * admin's mono face, which the pack never uses anywhere on this site. */
body.ioc-site [data-block] .ioc-form .ioc-opt {
  font-family: inherit;
}

/* -- Buttons inherit the UA default the pack relied on ----------------------
 * The pack never resets `button`, so its rail rows (.st__r), symptom tiles
 * (.sy__i) and seat tabs run at the UA default for buttons: 13.3333px, line-
 * height normal — measured on the pack, not assumed. The app's global reset
 * says `button{font:inherit}`, which lifts them to the body's 16px/1.62 and
 * moved every rail row by 3px and every tile by 1px. `:where()` keeps this at
 * the reset's own weight, so any pack class on a button (.btn's 15px, .st__t)
 * still outranks it exactly as it outranks the UA sheet. */
body.ioc-site :where(button) {
  font-size: 13.3333px;
  line-height: normal;
}

/* -- The kit form marks -----------------------------------------------------
 * The pack's radios and consent are native inputs; the kit's form draws its own mark
 * as an <svg> beside each native input, sized by the kit sheet this site does not
 * load, so a viewBox-only svg filled its whole flex line: 415px per radio. The
 * native input is what the pack shows, so the kit's mark stays out of flow. */
body.ioc-site .ioc-choice > svg {
  display: none;
}

/* -- The required mark ------------------------------------------------------
 * The pack marks a required field with a bare <sup>, so its label line box is
 * two pixels taller than its 13px/1 font — the UA sheet's `vertical-align:
 * super; font-size: smaller` is the whole effect, and no pack rule states it.
 * The kit marks the same field with <span class="req">, which the selector
 * alias maps every pack `sup` rule onto; this restores the UA half. */
body.ioc-site .ioc-field > label .req,
body.ioc-site .ioc-choicegroup legend .req {
  vertical-align: super;
  font-size: smaller;
}

/* -- The kit form grid ------------------------------------------------------
 * The pack lays its form out in block flow — each `.fg` group carries a 19px
 * bottom margin — and puts name and email side by side in one `.f2` row. The
 * kit renders every field as a direct child of `.ioc-form-grid`, so the
 * pack's `.f2` rule is aliased onto that grid (two columns, 15px gap) and the
 * row gap is zeroed here so the pack's group margin, not the grid, spaces the
 * rows (one specificity step above the alias, which is later in the sheet and
 * would otherwise win the tie). The kit's `.ioc-field.full` span rides in through the kit slice;
 * choice groups and the consent have no pack-side equivalent and span too.
 * The kit's third field (phone) sits in a half column — that is the CMS
 * form's own grid semantics, which the pack's mock did not have to satisfy. */
body.ioc-site form .ioc-form-grid {
  row-gap: 0;
}
body.ioc-site .ioc-form-grid > .ioc-choicegroup {
  grid-column: 1 / -1;
}


/* -- Pack layer ---------------------------------------------------------
 * Everything below is generated. See the header. */


/* -- 2.5.8 Target Size (Minimum), on the blocks this site has not ported yet --
 * The pack arms its own link families at 24px (`.lnk`, `.crumb a`, `.ub a`,
 * `.cs__i b a` above). The kit's link families are not armed, and on this site
 * they inherit the pack's 16px/1.62 body rhythm, which lands them just under
 * the minimum — measured 22.5px for the breadcrumb home, 22.7px for a card
 * link, 23.3px for a section-head link. Each is a standalone control, not a
 * link inside a sentence, so the 2.5.8 inline exception does not apply.
 *
 * These name KIT classes on purpose: this sheet loads only on www.infoc.com, so
 * the fix reaches this site's unported routes without touching the shared kit
 * that the other two sites render. When a route ports to the pack its links
 * become pack links and the rules above take over. */
body.ioc-site .ioc-card-link,
body.ioc-site .ioc-sh-link,
body.ioc-site .ioc-head-link,
body.ioc-site .ioc-home,
body.ioc-site .chat-back {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}


/* -- 1.4.1 Use of Colour, on the one link that sits inside a sentence ---------
 * The enquiry form's closing line carries a link to the privacy notice inside
 * running text. Everywhere else on this site a link is its own control — a
 * button, a card, a nav item — and shape tells you it is one. In a sentence
 * only the colour does, and the pack states no underline for it (nor does the
 * kit), so a reader who cannot separate those two colours has nothing to go
 * on. axe over all 28 routes found this and nothing else.
 *
 * Underlined always, not on hover: hover is not available to a keyboard or
 * touch reader, and 1.4.1 asks for the cue to be present, not discoverable. */
body.ioc-site .ioc-privacy a,
body.ioc-site .form__foot a {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* -- The credential strip sits on the site's spine ---------------------------
 * OWNER-DIRECTED, and a deliberate departure from the pack: the pack runs this
 * strip full-bleed while every other band on the page — hero, card row, deck,
 * quad, footer, even the masthead — sits in `.wrap`, `max-width:1240px` with
 * `--pad` inside it. On a 1440 screen that misalignment is 100px and reads as
 * a design choice. On a 2560 screen it is 634px: the strip's first label starts
 * at x26 while the hero above it starts at x724, and the strip looks like it
 * belongs to a different page. The live V6 site boxes the same strip.
 *
 * The BAND keeps its full-bleed black: `.cs` carries the background, `.cs__g`
 * carries the grid, so constraining the grid boxes the content and leaves the
 * ground edge to edge — which is what the V6 site does today and what the two
 * screenshots the owner sent differ on.
 *
 * `max-width` and `padding` are the pack's own `.wrap` values, not new numbers,
 * so the cell borders land on the same spine as every band's content and track
 * `--pad` at every breakpoint.
 *
 * MEASURED COST, stated rather than tuned away: the band is 109px, not the
 * pack's 101px. Four cells on this spine are 278px wide with 226px inside the
 * cell padding, and the longest label — "Business applications · Data & AI" —
 * needs 248px, so it takes two lines at every width. The live V6 site fits the
 * same label on one line only because its spine is wider (1296px of content
 * against this pack's 1112px). Closing those 22px means either cell padding
 * near 12px, which crowds the divider, or a column rule the pack does not
 * have. Eight pixels of band height is the cheaper price, and it buys the
 * alignment the strip was missing. */
body.ioc-site .cs__g {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--pad);
}


/* BEGIN PACK LAYER */
/* Generated from design/00-wiringsite/www.infoc.com/site.css by
   sites/infoc.com/scripts/build-pack-layer.mjs --scope  (every selector lifted under body.ioc-site)
   Do not hand-edit: the next build overwrites this region. */
/* INFOC · Business applications · Data & AI consulting, talents and training
   ─────────────────────────────────────────────────────────────────────────
   A deliberately separate identity from INFOC ONE. ONE is a product company:
   its language is a 52px lattice of identical cells, cool halo blue, and
   solid app tiles — the architecture of a suite. The PALETTE stays the brand's
   (Halo and Beacon); what separates the two sites is structure, not colour.
   This is a consultancy, so the language is a working paper: Figtree
   throughout with no mono, no background texture at all, and content set as a
   ruled REGISTER of numbered records rather than a field of hover cards. The
   structure carries the page; nothing is decorated. */
:root{
  /* brand anchors · Halo Solid #0F43D6 and Beacon Dark #1A1726. The palette is
     the brand's; only the STRUCTURE separates this site from the product one. */
  --beacon:#1A1726;--beacon-2:#141120;--beacon-3:#2A2438;--beacon-4:#4A4266;
  --halo:#0F43D6;--halo-600:#0B34AB;
  /* #0F43D6 is 7.52:1 on white and carries white at 7.52:1, so the brand
     anchor needs no darkening anywhere; --halo-600 is the hover state only.
     #5478E8 is 4.62:1 on --beacon-2, which is why every dark ground in this
     sheet is --beacon-2: on --beacon it would be 4.38 and fail. */
  --halo-4:#5478E8;--halo-50:#EEF2FE;
  --paper:#fff;--wash:#F5F5F7;--wash2:#EBEBEF;
  --rule:#E5E5E9;--rule-2:#C9C9D0;
  --t1:#121317;--t2:#121317;--t3:#121317;--t4:#7A828F;
  --dk-t:#fff;--dk-t2:#fff;
  /* .86 is the step for text on a HALO fill, where .76 would drop under AA */
  --dk-t3:#fff;
  /* two rules on dark ground, not five: a hairline and an edge */
  --b-line:rgba(255,255,255,.14);--b-line2:rgba(255,255,255,.24);
  --ok:#0F6B33;
  /* the accent is Halo by default; two sub-brands override it on their own
     pages only, which is why accent-bearing rules read --acc, not --halo */
  --acc:#0F43D6;--acc-600:#0B34AB;--acc-dk:#5478E8;--acc-wash:#EEF2FE;
  --disp:"Figtree",system-ui,sans-serif;
  --pad:clamp(20px,4vw,64px);
  --sec-y:clamp(72px,9vw,132px);--sec-y-tight:clamp(44px,5vw,72px);
  --sec-y-hero:clamp(40px,5vw,64px);--sec-y-hero-t:clamp(34px,4vw,54px);
  --r:3px;
  /* icon scale · four steps. Sizes ran 11,12,13,14,15,16,17,18,19,21 with no
     system, so the same role rendered at a different size in each section. */
  --ic-1:13px;--ic-2:15px;--ic-3:18px;--ic-4:22px;
}body.ioc-site[data-section="academy"]{--acc:#5B21B6;--acc-600:#4C1D95;--acc-dk:#A78BFA;--acc-wash:#F3EEFE}body.ioc-site[data-section="talents"]{--acc:#12674A;--acc-600:#0E523B;--acc-dk:#5FBF9B;--acc-wash:#E9F5F0}body.ioc-site,body.ioc-site *{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body.ioc-site{margin:0;background:var(--paper);color:var(--t1);font:400 16px/1.62 var(--disp);text-wrap:pretty;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}body.ioc-site h1:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h1,body.ioc-site h2:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h2,body.ioc-site h3:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h3,body.ioc-site h4:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h4{font-family:var(--disp);font-weight:700;letter-spacing:-.028em;line-height:1.06;margin:0;color:var(--beacon)}/* h5 is only ever an eyebrow here, and the theme rewrite dropped the global
   rule — two of them fell back to UA defaults because the replacement rules
   keyed on .k, which the markup did not carry. Reset it so a missing class
   can never again leave a heading unstyled. */
body.ioc-site h5:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h5{margin:0;font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--halo)}body.ioc-site h1:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h1{font-size:clamp(38px,5.2vw,64px)}body.ioc-site h2:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h2{font-size:clamp(27px,3.4vw,42px)}body.ioc-site h3:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h3{font-size:clamp(19px,1.9vw,25px);letter-spacing:-.022em}body.ioc-site h4:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h4{font-size:17px;letter-spacing:-.014em;line-height:1.28}body.ioc-site p:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) p{margin:0}body.ioc-site a:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) a{color:var(--halo);text-decoration:none}body.ioc-site a:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer):hover,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) a:hover{color:var(--halo-600)}body.ioc-site img:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) img,body.ioc-site svg:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) svg{display:block;max-width:100%}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).wrap,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}body.ioc-site section:where([data-block]){padding:var(--sec-y) 0}body.ioc-site section:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tight,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) section.tight{padding:var(--sec-y-tight) 0}body.ioc-site .wash{background:var(--wash);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}body.ioc-site .dk{background:var(--beacon-2);color:var(--dk-t)}body.ioc-site .dk h1,body.ioc-site .dk h2,body.ioc-site .dk h3,body.ioc-site .dk h4{color:#fff}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).lede,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .lede{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;color:var(--t3)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).dk .lede,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .dk .lede{color:var(--dk-t2)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).body,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .body{font-size:14.5px;line-height:1.6;color:var(--t3)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).dk .body,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .dk .body{color:var(--dk-t2)}body.ioc-site .small{font-size:12.5px;line-height:1.55;color:var(--t3)}body.ioc-site .dk .small{color:var(--dk-t2)}/* the eyebrow · tracked Figtree, no mono anywhere on this site */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .k{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--halo);display:block}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).dk .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .dk .k{color:var(--halo-4)}body.ioc-site .k--q{color:var(--t3)}/* buttons · beacon or halo, flat fills, never a gradient */
/* no transition on a fill or a text colour anywhere in this sheet: a
   transition needs frames, and where frames do not run the element never
   arrives at the state it was told to take. Only transform and opacity —
   neither of which any state depends on for legibility — are animated. */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).btn,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .btn{display:inline-flex;align-items:center;gap:9px;padding:12px 19px;border-radius:var(--r);border:1px solid var(--rule-2);
  background:transparent;color:var(--beacon);font:600 14px/1 var(--disp);cursor:pointer;white-space:nowrap}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).btn:hover,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .btn:hover{background:var(--wash2);border-color:var(--rule-2);color:var(--beacon)}body.ioc-site .btn--beacon{background:var(--beacon);border-color:var(--beacon);color:#fff}body.ioc-site .btn--beacon:hover{background:var(--beacon-2);border-color:var(--beacon-2);color:#fff}body.ioc-site .btn--halo,body.ioc-site .btn--acc{background:var(--acc);border-color:var(--acc);color:#fff}body.ioc-site .btn--halo:hover,body.ioc-site .btn--acc:hover{background:var(--acc-600);border-color:var(--acc-600);color:#fff}body.ioc-site .btn--paper{background:var(--paper);border-color:var(--paper);color:var(--beacon)}body.ioc-site .btn--paper:hover{background:#fff;border-color:#fff;color:var(--beacon)}body.ioc-site .btn--dk{background:transparent;border-color:var(--b-line2);color:#fff}body.ioc-site .btn--dk:hover{background:rgba(255,255,255,.09);color:#fff}body.ioc-site .btn--lg{padding:15px 24px;font-size:15px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).btn i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .btn i{}body.ioc-site .lnk{font:600 13.5px/1 var(--disp);display:inline-flex;align-items:center;gap:7px;color:var(--halo);white-space:nowrap}body.ioc-site .lnk i{transition:transform .18s ease}body.ioc-site .lnk:hover{color:var(--halo-600)}body.ioc-site .lnk:hover i{transform:translateX(3px)}body.ioc-site .dk .lnk{color:var(--halo-4)}/* section head */
body.ioc-site .sec-h{margin-bottom:clamp(28px,3.2vw,42px)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).sec-h .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .sec-h .k{margin-bottom:18px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).sec-h .lede,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .sec-h .lede{margin-top:18px;max-width:52ch}@media (min-width:900px){/* start-aligned, never end-aligned: bottom-aligning the heading to the lede
     pushed a one-line h2 down by the lede's full height — 89px away from the
     eyebrow labelling it — whenever the two columns were uneven. The heading
     now stays with its eyebrow at any lede length, and the lede takes a small
     padding-top so its first line sits with the heading's cap height rather
     than above it. */
body.ioc-site .sec-h--wide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(36px,5vw,80px);align-items:start}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).sec-h--wide .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .sec-h--wide .k{grid-column:1/-1}body.ioc-site .sec-h--wide h2{max-width:20ch}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).sec-h--wide .lede,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .sec-h--wide .lede{margin-top:0;padding-top:.5em;max-width:44ch}
}body.ioc-site .sec-h__row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}/* ═══ block · utility-bar ═══ */
body.ioc-site .ub{background:var(--beacon-2);color:var(--dk-t2);font:500 12px/1 var(--disp)}body.ioc-site .ub__in{max-width:1240px;margin:0 auto;padding:0 var(--pad);height:36px;display:flex;align-items:center;gap:22px}body.ioc-site .ub__l,body.ioc-site .ub__r{display:flex;align-items:center;gap:18px}body.ioc-site .ub__r{margin-left:auto}body.ioc-site .ub a{color:var(--dk-t2);display:inline-flex;align-items:center;gap:6px}body.ioc-site .ub a:hover{color:#fff}body.ioc-site .ub__loc{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dk-t2);white-space:nowrap}@media (max-width:860px){body.ioc-site .ub__hide,body.ioc-site .ub__r{display:none}}/* ═══ block · masthead ═══ */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mh,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mh{position:sticky;top:0;z-index:60;background:var(--dk-t3);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}body.ioc-site .mh__in{max-width:1240px;margin:0 auto;padding:0 var(--pad);height:72px;display:flex;align-items:center;gap:30px}body.ioc-site .wm{flex:none;display:inline-flex;align-items:center;margin-right:12px;line-height:0}/* the wordmark is now live Archivo rather than outlined Syncopate, so the mark
   and the interface share one face. Tracking is 0.14em — the master lockup's
   authored gap was 0.20em and read loose at this size. One cap height in both
   places; the footer only changes colour. */
/* the wordmark is the site's own face at zero tracking — one family, one
   request, and the mark no longer waits on a font the page does not otherwise
   need. 800 rather than 700: at zero tracking the lighter weight read thin
   against the interface it sits above. */
body.ioc-site .wm{font-family:var(--disp);font-weight:800;font-size:31px;line-height:1;
  letter-spacing:0;color:var(--beacon);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.30em}/* the badge is set from the wordmark's cap height, not a fixed px, so the two
   stay in proportion at any size. align-items:center, not baseline — a disc
   has no baseline of its own and a baseline row drops it below the letters. */
body.ioc-site .wm__b{width:.94em;height:.94em;flex:none;display:block}/* the footer's own link rule sets 13.5px and wins by order at equal
   specificity, so the wordmark states its size again rather than inheriting.
   Weight 700 against the header's 800 is deliberate: reversed type blooms, so
   an identical weight reads heavier on black. This is the optical match. */
body.ioc-site .ft .wm,body.ioc-site .ft__wm{font-family:var(--disp);font-weight:700;font-size:31px;letter-spacing:0;color:#fff}body.ioc-site .wm small{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--t3);margin-left:8px;align-self:center}body.ioc-site .mh__nav{display:flex;gap:2px;margin:0 auto}body.ioc-site .mh__nav a{padding:9px 12px;border-radius:3px;font:500 14.5px/1 var(--disp);color:var(--t2);display:inline-flex;align-items:center;gap:5px}body.ioc-site .mh__nav a:hover{background:var(--wash2);color:var(--beacon)}body.ioc-site .mh__nav i{color:var(--t1)}/* margin-left:auto here, not on the nav: the cluster's right-alignment must
   not depend on a sibling that the 1120px breakpoint sets to display:none —
   the nav's auto margins then stop participating and the controls collapsed
   to the left with 527px of dead space beside them */
body.ioc-site .mh__r{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}body.ioc-site .mh__s{width:36px;height:36px;border-radius:3px;border:1px solid var(--rule);background:transparent;display:grid;place-items:center;color:var(--t3);cursor:pointer}body.ioc-site .mh__s:hover{background:var(--wash2);color:var(--beacon)}/* nav disclosure · the inline nav collapses below 1080px, so it needs a
   control rather than simply vanishing: every declared item must resolve */
body.ioc-site .navtog{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:3px;
  border:1px solid var(--rule-2);background:transparent;color:var(--beacon);font-size:17px;flex:none;cursor:pointer}body.ioc-site .navtog:hover{background:var(--wash2)}@media (max-width:1080px){body.ioc-site .mh__nav{display:none}body.ioc-site .navtog{display:inline-flex}body.ioc-site .mh__in{flex-wrap:wrap;height:auto;min-height:64px;padding-top:12px;padding-bottom:12px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mh__in.open .mh__nav,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mh__in.open .mh__nav{display:flex;order:9;flex-basis:100%;flex-direction:column;gap:1px;padding-top:10px;margin:4px 0 0;border-top:1px solid var(--rule)}
}/* the one hero whose second column is a form rather than an image: it has no
   absolutely-positioned figure to clear, so it keeps ordinary section padding */
body.ioc-site .hero--form{padding:clamp(52px,6vw,88px) 0 var(--sec-y)}/* the reveal must not hide a menu panel that opens after the pass */
body.ioc-site .mm .rv{opacity:1!important;transform:none!important}/* ═══ mega menu ═══
   Groups are STACKS inside equal grid columns, not a grid of cells — a cell
   grid leaves a half-ruled partial row whenever the item count does not divide
   evenly, which is what the boxed version did. Stacks take any count. */
/* the panel spans the header, so its containing block must BE the header: the
   item and its wrapper go static, leaving .mh (sticky, therefore positioned)
   as the nearest positioned ancestor */
body.ioc-site .mh__i--has:has(.mm){position:static}body.ioc-site .mh__i--has:has(.mm) .mh__dd{position:static;padding-top:0}body.ioc-site .mm{position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule-2);z-index:70}body.ioc-site .mm__in{max-width:1240px;margin:0 auto;padding:clamp(30px,3vw,44px) var(--pad) clamp(32px,3.4vw,48px);
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,2.2fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px)}body.ioc-site .mm__lead h3{font-size:clamp(22px,1.9vw,27px);letter-spacing:-.028em;margin:14px 0 0}body.ioc-site .mm__lead p{margin-top:12px;font-size:14px;line-height:1.55;color:var(--t3);max-width:34ch}body.ioc-site .mm__lead .lnk{margin-top:18px}/* the item columns: each column is an independent stack of groups */
body.ioc-site .mm__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.4vw,40px) clamp(24px,2.6vw,44px);align-content:start}body.ioc-site .mm__g{display:grid;gap:2px;align-content:start}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mm__g > .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mm__g > .k{margin-bottom:10px}body.ioc-site .mm__it{display:grid;grid-template-columns:22px minmax(0,1fr) 14px;gap:11px;align-items:start;
  padding:9px 8px 9px 0;border-radius:var(--r);color:var(--beacon)}body.ioc-site .mm__it:hover{background:var(--wash);color:var(--beacon)}body.ioc-site .mm__it > i:first-child{font-size:var(--ic-3);color:var(--halo);line-height:1.35}body.ioc-site .mm__it b{display:block;font:600 14.5px/1.35 var(--disp);letter-spacing:0}body.ioc-site .mm__it span{display:block;font-size:12.5px;line-height:1.45;color:var(--t3);margin-top:2px}body.ioc-site .mm__it > i:last-child{font-size:var(--ic-1);color:var(--t1);line-height:1.5;opacity:0}body.ioc-site .mm__it:hover > i:last-child{opacity:1;color:var(--halo)}/* the rail states its own ground rather than a box border */
body.ioc-site .mm__rail{background:var(--wash);border-left:2px solid var(--halo);padding:clamp(18px,1.8vw,24px);align-self:start}body.ioc-site .mm__rail h4{margin:12px 0 10px;font-size:17px;letter-spacing:-.02em}body.ioc-site .mm__rail p{font-size:13px;line-height:1.55;color:var(--t3)}body.ioc-site .mm__rail .lnk{margin-top:16px}@media (max-width:1180px){body.ioc-site .mm__in{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}body.ioc-site .mm__rail{grid-column:1/-1}
}/* below the nav breakpoint the panel is part of the disclosure list, so it
   flattens: no absolute positioning, no lead or rail, just the groups */
@media (max-width:1120px){body.ioc-site .mh__i--has:has(.mm){position:relative}body.ioc-site .mm{position:static;border-top:0;border-bottom:0;background:var(--wash)}body.ioc-site .mm__in{display:block;padding:6px 0 12px;max-width:none}body.ioc-site .mm__lead,body.ioc-site .mm__rail{display:none}body.ioc-site .mm__cols{grid-template-columns:1fr;gap:14px}body.ioc-site .mm__it{padding:9px 16px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mm__g > .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mm__g > .k{padding:0 16px}body.ioc-site .mm__it > i:last-child{opacity:1}
}/* ═══ block · hero ═══
   The figure is absolutely positioned to the section's right edge rather than
   sitting in a grid track inside .wrap, so it bleeds to the viewport and the
   text still aligns to the same measure as every section below it. Below
   900px it returns to normal flow and stacks above the text. */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero{position:relative;padding:0;border-bottom:1px solid var(--rule);overflow:hidden}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero .wrap,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero .wrap{position:relative;z-index:2}body.ioc-site .hero__t{max-width:50%;padding:clamp(52px,6vw,88px) clamp(30px,3.4vw,64px) clamp(48px,5.5vw,80px) 0}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero .k{margin-bottom:22px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero h1,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.035em}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero h1 em,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero h1 em{font-style:normal;color:var(--halo)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero .lede,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero .lede{margin-top:22px;max-width:44ch;font-size:clamp(16px,1.25vw,18.5px)}body.ioc-site .hero__cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:32px}/* the platform names are a light row, not a bordered table: at this size the
   box competed with the call to action directly above it */
body.ioc-site .hero__pl{margin-top:44px;padding-top:22px;border-top:1px solid var(--rule)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero__pl .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero__pl .k{margin-bottom:14px}body.ioc-site .platr{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}body.ioc-site .platr li{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1.2 var(--disp);color:var(--t2);white-space:nowrap}body.ioc-site .platr i{color:var(--halo)}body.ioc-site .hero__fig{position:relative}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig{position:absolute;right:0;top:0;bottom:0;width:50%;z-index:1;border-left:1px solid var(--rule)}body.ioc-site .hero__fig image-slot{position:absolute;inset:0}body.ioc-site .hero__img{width:100%;height:100%;object-fit:cover;object-position:38% center;display:block}/* a figure outside the hero sizes itself rather than filling an absolute box */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer):not(.hero) > .hero__fig,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) :not(.hero) > .hero__fig{height:clamp(220px,26vw,320px);border:1px solid var(--rule);overflow:hidden}/* where a footing panel is present the image yields the bottom third to it,
   so the photograph is never cropped behind an opaque panel */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) .hero__img,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) .hero__img{height:66%}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) image-slot,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) image-slot{inset:0 0 auto 0;height:66%}body.ioc-site .hero__cap{position:absolute;left:0;right:0;bottom:0;padding:26px 28px 24px;color:#fff;pointer-events:none;
  background:linear-gradient(0deg,rgba(26,23,38,.95) 0%,rgba(26,23,38,.88) 62%,rgba(26,23,38,.55) 85%,rgba(26,23,38,0) 100%)}/* the caption's ground is a translucent plate over a photograph we do not
   control, so this is the one eyebrow that cannot carry the brand blue */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero__cap .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero__cap .k{color:var(--dk-t3);margin-bottom:9px}body.ioc-site .hero__cap b{display:block;font:700 clamp(17px,1.5vw,21px)/1.24 var(--disp);letter-spacing:-.024em}body.ioc-site .hero__cap a{pointer-events:auto;display:inline-flex;margin-top:11px;color:#fff}/* the split stacks at 1000px, not 900: a half-width text column below that
   leaves the headline about 420px wide, which broke it into four lines */
@media (max-width:1000px){body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero{display:flex;flex-direction:column}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig{position:relative;order:-1;width:auto;height:clamp(240px,44vw,320px);border-left:0;border-bottom:1px solid var(--rule)}body.ioc-site .hero__t{max-width:none;padding:clamp(34px,6vw,52px) 0 clamp(34px,5vw,48px)}body.ioc-site .hero--form{padding:clamp(34px,6vw,52px) 0 clamp(56px,8vw,84px)}
}/* ═══ block · credential strip ═══ */
body.ioc-site .cs{background:var(--beacon-2);color:var(--dk-t)}body.ioc-site .cs__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}/* flex column with the label pinned to the bottom: the grid equalises the
   item heights but nothing inside them would align, so each label would sit
   wherever its own eyebrow's wrap left it */
body.ioc-site .cs__i{padding:22px 26px;border-right:1px solid var(--b-line);display:flex;flex-direction:column}body.ioc-site .cs__i:last-child{border-right:0}/* an icon leading a WRAPPING label must align to the first line, not to the
   centre of the wrapped block — with align-items:center the glyph drifted to
   the middle of a three-line eyebrow and read as detached from its phrase.
   Matching the icon's line box to the text's makes it optically centre on
   that first line. Only this row wraps; rows whose labels are single-line
   keep align-items:center, which centres their glyph more exactly. */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).cs__i .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .cs__i .k{color:var(--halo-4);margin-bottom:9px;display:flex;align-items:flex-start;gap:8px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).cs__i .k i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .cs__i .k i{line-height:1.62;flex:none}body.ioc-site .cs__i b{margin-top:auto;font:600 16px/1.28 var(--disp);letter-spacing:-.02em;color:#fff}body.ioc-site .cs__i a{color:#fff;display:inline-flex;align-items:center;gap:8px}body.ioc-site .cs__i a i{color:var(--halo-4);transition:transform .18s ease}body.ioc-site .cs__i a:hover i{transform:translateX(3px)}@media (max-width:720px){body.ioc-site .cs__i{border-right:0;border-bottom:1px solid var(--b-line)}}/* ═══ block · solution cards ═══
   Four routes in, each with a photograph of the work rather than an icon
   alone. The image is the card's own figure, cropped to a fixed ratio so a
   portrait or a wide shot both sit on the same baseline. */
body.ioc-site .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}body.ioc-site .card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;color:inherit;min-width:0}body.ioc-site .card:hover{border-color:var(--halo)}body.ioc-site .card__fig{display:block;aspect-ratio:8/5;background:var(--wash2);overflow:hidden}body.ioc-site .card__fig img{width:100%;height:100%;object-fit:cover;display:block}body.ioc-site .card--data .card__fig img{object-position:78% center}body.ioc-site .card__bd{display:flex;flex-direction:column;gap:9px;padding:20px 20px 22px;flex:1;border-top:1px solid var(--rule)}body.ioc-site .card__i{font-size:21px;color:var(--halo);margin-bottom:2px}body.ioc-site .card h4{font-size:17.5px;color:var(--beacon)}body.ioc-site .card__d{font-size:14px;line-height:1.55;color:var(--t3)}body.ioc-site .card__go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;
  font:600 13.5px/1 var(--disp);color:var(--halo);white-space:nowrap}body.ioc-site .card:hover .card__go i{animation:nudge .34s ease-out}@media (max-width:1000px){body.ioc-site .g4{grid-template-columns:1fr 1fr}}@media (max-width:560px){body.ioc-site .g4{grid-template-columns:1fr}}/* ═══ block · register · the site's core structure ═══
   consulting sells evidence in rows: a number, a claim, what it covers, and
   where it leads. Ruled records, not a field of cards. */
/* a ruled block is enclosed, never bounded on one side: a border-top with
   per-row bottom rules left the left and right ends open and the final rule
   dangling, so the whole register read as an unfinished box */
body.ioc-site .reg{border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}body.ioc-site .reg__r:last-child{border-bottom:0}body.ioc-site .reg__r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;gap:clamp(16px,2.4vw,34px);
  align-items:start;padding:22px clamp(16px,2vw,24px);border-bottom:1px solid var(--rule)}body.ioc-site .reg__r:hover{background:var(--wash)}body.ioc-site .dk .reg{border-top-color:var(--b-line2)}body.ioc-site .dk .reg__r{border-bottom-color:var(--b-line)}body.ioc-site .dk .reg__r:hover{background:rgba(255,255,255,.045)}body.ioc-site .reg__t{display:flex;align-items:baseline;gap:11px}body.ioc-site .reg__t i{color:var(--beacon-4);flex:none}body.ioc-site .dk .reg__t i{color:var(--halo-4)}body.ioc-site .reg__t h4{color:var(--beacon)}body.ioc-site .dk .reg__t h4{color:#fff}body.ioc-site .reg__d{font-size:14.5px;line-height:1.55;color:var(--t3);padding-top:1px}body.ioc-site .dk .reg__d{color:var(--dk-t2)}body.ioc-site .reg__a{padding-top:2px;justify-self:end}@media (max-width:860px){body.ioc-site .reg__r{grid-template-columns:1fr;row-gap:9px}body.ioc-site .reg__a{justify-self:start}
}/* ═══ block · industries ═══
   Each cell carries the sector's own operating shape — the answer to the lede's
   question. A name alone made the grid a list of labels; the detail line is
   what shows the sector is understood. Sector facts only: nothing here claims a
   client or an engagement. */
body.ioc-site .ind{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}body.ioc-site .ind li{background:var(--paper);display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-width:0}body.ioc-site .ind__h{display:flex;align-items:flex-start;gap:11px}/* the glyph's line box is matched to the label's so it optically centres on the
   first line whether the sector name runs to one line or two */
body.ioc-site .ind__h i{line-height:1.3;color:var(--halo);flex:none}body.ioc-site .ind__h b{font:600 14.5px/1.3 var(--disp);letter-spacing:-.012em;color:var(--beacon)}body.ioc-site .ind__d{font-size:12.5px;line-height:1.5;color:var(--t3);padding-left:30px}body.ioc-site .ind li:nth-child(4n){border-right:0}body.ioc-site .ind li:nth-last-child(-n+4){border-bottom:0}/* the eighth cell would have been empty, leaving the last row half-ruled: it
   carries an invitation instead, which fills the grid without inventing a
   sector the business does not serve */
body.ioc-site .ind li.ind__ask{padding:0;background:var(--wash)}body.ioc-site .ind__ask a{display:flex;flex-direction:column;gap:9px;width:100%;height:100%;padding:20px 22px 22px;color:var(--halo)}body.ioc-site .ind__ask:hover{background:var(--wash2)}body.ioc-site .ind__ask .ind__h b{color:var(--halo)}body.ioc-site .ind__ask .ind__d{color:var(--t3)}@media (max-width:1000px){body.ioc-site .ind{grid-template-columns:repeat(2,1fr)}body.ioc-site .ind li:nth-child(4n){border-right:1px solid var(--rule)}body.ioc-site .ind li:nth-child(2n){border-right:0}body.ioc-site .ind li:nth-last-child(-n+4){border-bottom:1px solid var(--rule)}body.ioc-site .ind li:nth-last-child(-n+2){border-bottom:0}
}@media (max-width:520px){body.ioc-site .ind{grid-template-columns:1fr}body.ioc-site .ind li{border-right:0!important;border-bottom:1px solid var(--rule)!important}body.ioc-site .ind li:last-child{border-bottom:0!important}
}/* ═══ block · platform stack · the architecture in cross-section ═══
   A section cut through the platform: the core is the top stratum and each
   band rests on the one below. Selecting a band brings its screen forward in
   the deck beside it, and a flow runs down the strata so the stack reads as
   something with current through it rather than a list of tabs. */
body.ioc-site .pf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);
  align-items:stretch;margin-top:clamp(24px,3vw,38px)}@media (max-width:960px){body.ioc-site .pf{grid-template-columns:1fr}}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).st,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .st{position:relative;border:1px solid var(--b-line2);border-radius:var(--r);overflow:hidden}body.ioc-site .st__r{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;font-family:var(--disp);
  display:grid;grid-template-columns:30px minmax(0,1fr) 18px;gap:clamp(12px,1.6vw,20px);align-items:center;
  padding:17px clamp(16px,2.2vw,26px);border-bottom:1px solid var(--b-line);color:#fff}body.ioc-site .st__r:last-of-type{border-bottom:0}body.ioc-site .st__r:hover{background:rgba(255,255,255,.05)}body.ioc-site .st__c{min-width:0}body.ioc-site .st__ic{color:var(--halo-4)}body.ioc-site .st__n{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dk-t2);display:block;margin-bottom:5px}body.ioc-site .st__t{font:700 clamp(14.5px,1.3vw,17.5px)/1.2 var(--disp);letter-spacing:-.024em;display:block}body.ioc-site .st__a{color:#fff;justify-self:end;transition:transform .18s ease}body.ioc-site .st__r:hover .st__a{transform:translateX(3px);color:#fff}/* the selected band, and the core, are the two states that get a fill */
body.ioc-site .st__r[aria-pressed="true"]{background:var(--halo);box-shadow:inset 3px 0 0 #fff}body.ioc-site .st__r[aria-pressed="true"] .st__n{color:var(--dk-t3)}body.ioc-site .st__r[aria-pressed="true"] .st__ic,body.ioc-site .st__r[aria-pressed="true"] .st__a{color:#fff}body.ioc-site .st__r--core:not([aria-pressed="true"]){background:rgba(15,67,214,.16)}/* the flow · a band of light travelling down the stack. Decorative only: it
   carries no content, so if keyframes never run nothing is lost. */
body.ioc-site .st__flow{position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,rgba(84,120,232,0) 0%,rgba(84,120,232,.13) 50%,rgba(84,120,232,0) 100%);
  animation:stflow 7s ease-in-out infinite}@keyframes stflow{0%{transform:translateY(-40%)}50%{transform:translateY(300%)}100%{transform:translateY(-40%)}}@media (prefers-reduced-motion:reduce){body.ioc-site .st__flow{display:none}}/* the deck · one card per layer, stacked. The active card is fully opaque and
   in front; the rest fan back behind it. Every state is set outright rather
   than arrived at by a transition, so a stuck transition still shows the
   correct card. */
/* the deck stretches to the grid row rather than carrying its own height, so
   it always matches the strata column beside it however many layers there are.
   Its cards are position:absolute, so they contribute no content height — the
   row is sized by the strata list alone. min-height covers the stacked layout,
   where the two are no longer in the same row. */
body.ioc-site .pf__deck{position:relative;min-height:clamp(300px,34vw,392px)}body.ioc-site .pf__card{position:absolute;inset:0;margin:0;border:1px solid var(--b-line2);border-radius:var(--r);
  background:var(--beacon);overflow:hidden;display:flex;flex-direction:column;
  /* opacity decides WHICH card is visible, so it must never be reached by a
     transition: where frames do not advance, computed opacity stays one state
     behind the value JS wrote, leaving the deck showing the wrong layer with a
     fully transparent card on top of it eating clicks. Only transform is
     animated — nothing depends on it to be legible. */
  transition:transform .42s cubic-bezier(.2,.8,.2,1)}body.ioc-site .pf__img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}body.ioc-site .pf__fig{position:relative;flex:1;min-height:0;display:block}body.ioc-site .pf__fig image-slot{position:absolute;inset:0}/* the caption carries the layer's full sentence, so it is sized for two or
   three lines rather than the copy being cut to fit it */
body.ioc-site .pf__card figcaption{padding:15px 18px 17px;border-top:1px solid var(--b-line);background:var(--beacon-2);min-height:5.6em}body.ioc-site .pf__n{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--halo-4);margin-bottom:6px}body.ioc-site .pf__card figcaption b{font:600 14px/1.45 var(--disp);letter-spacing:-.014em;color:#fff;display:block;max-width:42ch}@media (max-width:960px){body.ioc-site .pf__deck{height:clamp(280px,60vw,340px)}}/* ═══ block · symptom register + engagement ═══ */
body.ioc-site .sy{border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}body.ioc-site .sy__i:last-child{border-bottom:0}body.ioc-site .sy__i{width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--rule);cursor:pointer;font-family:var(--disp);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:clamp(16px,2.4vw,34px);align-items:start;
  padding:20px clamp(16px,2vw,24px)}body.ioc-site .sy__i:hover{background:var(--wash)}body.ioc-site .sy__h{display:flex;align-items:baseline;gap:11px}body.ioc-site .sy__h i{color:var(--beacon-4);flex:none}body.ioc-site .sy__h b{font:700 17px/1.28 var(--disp);letter-spacing:-.02em;color:var(--beacon)}body.ioc-site .sy__d{font-size:14px;line-height:1.55;color:var(--t3)}body.ioc-site .sy__go{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--halo);display:inline-flex;align-items:center;gap:7px;justify-self:end;padding-top:3px;white-space:nowrap}body.ioc-site .sy__i[aria-pressed="true"]{background:var(--beacon-2);border-bottom-color:var(--beacon-2)}body.ioc-site .sy__i[aria-pressed="true"] .sy__h b{color:#fff}body.ioc-site .sy__i[aria-pressed="true"] .sy__d{color:var(--dk-t2)}body.ioc-site .sy__i[aria-pressed="true"].sy__i[aria-pressed="true"] .sy__h i,body.ioc-site .sy__i[aria-pressed="true"] .sy__go{color:var(--halo-4)}@media (max-width:860px){body.ioc-site .sy__i{grid-template-columns:1fr;row-gap:9px}body.ioc-site .sy__go{justify-self:start}
}body.ioc-site .eng{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) 220px;margin-top:clamp(20px,2.4vw,32px);
  border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;background:var(--paper)}body.ioc-site .eng__m{background:var(--beacon-2);color:#fff;padding:clamp(22px,2.6vw,32px)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).eng__m .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .eng__m .k{color:var(--halo-4);margin-bottom:16px}body.ioc-site .eng__m h3{margin-bottom:12px;color:#fff}body.ioc-site .eng__m p{font-size:14px;line-height:1.55;color:var(--dk-t3)}body.ioc-site .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}/* stays at (0,1,1) deliberately: the .tags--q and .tags--pick variants are
   also (0,1,1) and override it by coming later in the sheet. Adding a :not()
   here to exclude the picker raised this to (0,2,1) and silently defeated
   .tags--q, turning six chips white-on-white on the home page. */
body.ioc-site .tags span{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:7px 11px;border-radius:var(--r);border:1px solid var(--b-line2);color:#fff}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).eng__m .btn,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .eng__m .btn{margin-top:22px}body.ioc-site .eng__f{position:relative;min-height:210px;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}body.ioc-site .eng__f image-slot{position:absolute;inset:0}body.ioc-site .eng__s{background:var(--wash);padding:clamp(18px,2.2vw,26px)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).eng__s .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .eng__s .k{margin-bottom:14px}body.ioc-site .eng__s a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--rule);
  font:600 14px/1.3 var(--disp);color:var(--beacon)}body.ioc-site .eng__s a:last-child{border-bottom:0}body.ioc-site .eng__s a i{color:var(--t1);transition:transform .18s ease}body.ioc-site .eng__s a:hover{color:var(--halo)}body.ioc-site .eng__s a:hover i{transform:translateX(3px);color:var(--halo)}body.ioc-site .tags--q span{border-color:var(--rule-2);color:var(--t3)}@media (max-width:980px){body.ioc-site .eng{grid-template-columns:1fr}body.ioc-site .eng__f{border-left:0;border-right:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);min-height:190px}}/* ═══ block · route pair · train or hire ═══ */
/* fixed track count, never auto-fit: a wrapping row left "Platform admin"
   alone on a second row, stretched full width, so the strip read as an open
   box. Four equal tracks, then two, then one — every row always full. */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;margin-bottom:22px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button{padding:15px 16px;border:0;border-right:1px solid var(--rule);background:transparent;cursor:pointer;
  font:600 14px/1 var(--disp);color:var(--t3);display:inline-flex;align-items:center;gap:9px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button:last-child,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button:last-child{border-right:0}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button i{color:var(--t1)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button:hover,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button:hover{background:var(--wash);color:var(--beacon)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button[aria-selected="true"],body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button[aria-selected="true"]{background:var(--beacon-2);color:#fff}@media (max-width:760px){body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs{grid-template-columns:repeat(2,1fr)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button:nth-child(2n),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button:nth-child(2n){border-right:0}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button:nth-child(-n+2),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button:nth-child(-n+2){border-bottom:1px solid var(--rule)}}@media (max-width:420px){body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs{grid-template-columns:1fr}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button{border-right:0;border-bottom:1px solid var(--rule)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button:last-child,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button:last-child{border-bottom:0}}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button[aria-selected="true"] i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button[aria-selected="true"] i{color:var(--halo-4)}body.ioc-site .g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(18px,2.2vw,26px)}body.ioc-site .rt{border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;background:var(--paper)}body.ioc-site .rt__fig{height:124px;position:relative;border-bottom:1px solid var(--rule)}body.ioc-site .rt__fig image-slot{position:absolute;inset:0}body.ioc-site .rt__bd{padding:20px 22px 22px;display:flex;flex-direction:column;gap:11px;flex:1}body.ioc-site .rt__tag{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}body.ioc-site .rt__tag i{flex:none}body.ioc-site .rt--train .rt__tag i{color:var(--beacon-4)}body.ioc-site .rt--hire .rt__tag i{color:var(--halo)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).rt__bd .btn,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .rt__bd .btn{margin-top:auto;align-self:flex-start}/* ═══ block · enquiry ═══ */
body.ioc-site .eq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:start}body.ioc-site .eq__fig{height:196px;position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--rule);margin-top:28px}body.ioc-site .eq__fig image-slot{position:absolute;inset:0}body.ioc-site .eq__c{margin-top:20px;border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}body.ioc-site .eq__c a:last-child{border-bottom:0}body.ioc-site .eq__c a{padding:14px 16px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:12px;font:500 14.5px/1 var(--disp);color:var(--beacon)}body.ioc-site .eq__c a i{color:var(--halo)}body.ioc-site .eq__c a:hover{color:var(--halo)}body.ioc-site .form{background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--r);padding:clamp(22px,2.6vw,30px)}body.ioc-site .fl{font:600 13px/1 var(--disp);color:var(--t2);display:block;margin-bottom:10px}body.ioc-site .fl sup{color:var(--halo)}body.ioc-site .fl span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-left:6px}body.ioc-site .fg{margin-bottom:19px}body.ioc-site .radios{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}body.ioc-site .radios label{padding:12px 13px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:9px;font:500 14px/1 var(--disp);color:var(--t2);cursor:pointer}body.ioc-site .radios label:hover{background:var(--wash)}body.ioc-site .radios input{accent-color:var(--halo);margin:0}body.ioc-site .radios label i{color:var(--t1)}body.ioc-site .f2{display:grid;grid-template-columns:1fr 1fr;gap:15px}body.ioc-site select:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) select{width:100%;padding:12px 13px;border:1px solid var(--rule-2);border-radius:var(--r);font:400 14.5px/1.5 var(--disp);color:var(--t1);background:var(--paper);appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234E5663' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 14px center}body.ioc-site select:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer):focus,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) select:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}body.ioc-site input:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer)[type=text],body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) input[type=text],body.ioc-site input:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer)[type=email],body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) input[type=email],body.ioc-site input:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer)[type=tel],body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) input[type=tel],body.ioc-site textarea:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) textarea{width:100%;padding:12px 13px;border:1px solid var(--rule-2);border-radius:3px;
  font:400 14.5px/1.5 var(--disp);color:var(--t1);background:var(--paper)}body.ioc-site input:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer):focus,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) input:focus,body.ioc-site textarea:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer):focus,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) textarea:focus{outline:2px solid var(--halo);outline-offset:-1px;border-color:var(--halo)}body.ioc-site textarea:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) textarea{min-height:92px;resize:vertical}body.ioc-site .consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--t3);margin:20px 0}/* every required marker on the form is the same halo, including the consent
   checkbox's — it was an inline style on a token the theme swap deleted, so
   the declaration was invalid and it silently inherited grey */
body.ioc-site .consent sup{color:var(--halo)}body.ioc-site .consent input{accent-color:var(--halo);margin:2px 0 0}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).form .btn,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .form .btn{width:100%;justify-content:center}body.ioc-site .form__foot{font-size:12px;line-height:1.5;color:var(--t3);margin-top:13px}/* the success state is the only feedback a submitted enquiry gives, so it
   reads as one: base rule is display:none, revealed by dropping [hidden] */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).form__foot.done,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .form__foot.done{display:none;color:var(--ok);font-weight:600}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).form__foot.done:not([hidden]),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .form__foot.done:not([hidden]){display:block}@media (max-width:900px){body.ioc-site .eq{grid-template-columns:1fr}body.ioc-site .radios,body.ioc-site .f2{grid-template-columns:1fr}}/* ═══ block · closing quad ═══ */
/* the closing CTA band joins the footer on black, so the page ends on one
   ground rather than a near-black section sitting above a black footer */
body.ioc-site section:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer)[data-block="closing-quad"],body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) section[data-block="closing-quad"]{background:#000}/* the band keeps the page's 1240px wrap so its columns line up with the footer
   columns directly beneath it. Full-bleed looked right only at narrow widths:
   past 1240px the wrap is centred, so a bled band started its text ~380px left
   of the footer wordmark. The black ground still spans the viewport — it is the
   section's background, not the band's — so nothing is lost visually.
   The outer cells give up their outside padding so the first cell's text sits
   on the same line as the footer wordmark and the last ends where the footer's
   last column ends. */
body.ioc-site section:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer)[data-block="closing-quad"],body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) section[data-block="closing-quad"]{padding:0}body.ioc-site section:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer)[data-block="closing-quad"] > .wrap,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) section[data-block="closing-quad"] > .wrap{padding-top:0;padding-bottom:0}body.ioc-site .qd{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}body.ioc-site .qd__i{padding:clamp(24px,2.8vw,34px) clamp(20px,2.2vw,28px);border-left:1px solid var(--b-line);
  display:flex;flex-direction:column;gap:11px}/* outer cells give up their outside padding: the wrap already supplies the page
   gutter, so keeping var(--pad) here indented the band one gutter further in
   than the footer columns directly beneath it */
body.ioc-site .qd__i:first-child{border-left:0;padding-left:0}body.ioc-site .qd__i:last-child{padding-right:0}/* each column carries its own accent, set inline per cell: the eyebrow, its
   icon and the link all take it, so the four destinations are distinguishable
   at a glance. The lead cell keeps Halo. */
/* the lead cell's accent is the lighter Halo step, not the solid: #0F43D6 is
   2.79:1 on this black ground and fails AA, where #5478E8 is 5.23 */
body.ioc-site .qd__i{--qa:#5478E8}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).qd__i .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .qd__i .k{display:flex;align-items:center;gap:8px;margin-bottom:4px;color:var(--qa)}body.ioc-site .qd__i h3{font-size:clamp(19px,1.9vw,26px);color:#fff;max-width:24ch}body.ioc-site .qd__i h4{color:#fff}/* the link is ruled off from its description and its arrow sits at the cell's
   outer edge. Deliberately NOT margin-top:auto — .qd is a grid, so the lead
   cell (2-line h3 + buttons + note) sets a row height ~110px taller than a
   right cell needs, and an auto margin banks all of that slack into one gap
   between a paragraph and its own link: 94–153px, read as a break rather than
   alignment. The three right cells share a content shape, so their links line
   up without being pushed. */
body.ioc-site .qd__i .lnk{width:100%;justify-content:space-between;
  padding-top:14px;border-top:1px solid var(--b-line);color:var(--qa)}body.ioc-site .qd__i .lnk:hover{color:#fff}body.ioc-site .qd__i--lead{border-bottom:2px solid var(--acc)}body.ioc-site .qd__note{margin:2px 0 0;font-size:12px;line-height:1.55;color:var(--dk-t2)}@media (max-width:980px){body.ioc-site .qd{grid-template-columns:1fr 1fr}/* only the OUTSIDE edge loses its padding, by column position: at two
     columns the odd cells sit left and the even cells right, so zeroing both
     sides on every cell left the inner pair touching — one cell's arrow ran
     into the next cell's label and their rules merged into one line */
body.ioc-site .qd__i{border-left:0;border-top:1px solid var(--b-line)}body.ioc-site .qd__i:nth-child(odd){padding-left:0}body.ioc-site .qd__i:nth-child(even){padding-right:0}body.ioc-site .qd__i:first-child{border-top:0}body.ioc-site .qd__i--lead{border-bottom:0}
}@media (max-width:620px){body.ioc-site .qd{grid-template-columns:1fr}/* one column: every cell spans the wrap, so both sides are outside edges */
body.ioc-site .qd__i{padding-left:0;padding-right:0}
}/* one footnote treatment, shared. The strata footnote lost its rule when the
   platform block was rewritten and fell back to 16px body text, reading as
   content rather than an annotation — and as a different class of element
   from the identical-purpose note in the closing quad. Declared once here so
   a future block swap cannot drop one of two parallel rules. */
body.ioc-site .st__foot{margin:20px 0 0}/* two consecutive sections on the same plain ground have nothing to separate
   them — neither a ground change nor a rule — so state the boundary. Scoped to
   plain-after-plain so a section following .wash or .dk does not get a second
   rule on top of the one that block already carries. */
/* the hero already closes with a rule, so a .wash section directly following it
   must not add its own — two 0.73px hairlines would stack into a 1.45px line,
   heavier than every other boundary. Applies to the nine inner pages where the
   two are adjacent; on the home page the credential strip separates them. */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero + .wash,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero + .wash,body.ioc-site .wash + .wash{border-top:0}/* Scoped away from .rel: the :not() arguments give this selector specificity
   (0,4,3), which beat .rel's (0,1,0) and repainted that band's 2px Halo accent
   as a grey hairline on 8 pages — the marker that distinguishes it. */
body.ioc-site main > section:not(.wash):not(.dk) + section:not(.wash):not(.dk):not(.rel){border-top:1px solid var(--rule)}/* ═══ block · footer ═══ */
/* the footer sits on the same ground as the closing section, so the boundary
   has to be stated the way every other boundary on the site is stated — with a
   rule. The section's padding-bottom and the footer's padding-top then read as
   a symmetric 47px either side of it rather than as one 94px void. */
body.ioc-site footer:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) footer{background:#000;color:var(--dk-t);padding:var(--sec-y-tight) 0 28px;border-top:1px solid var(--b-line2)}/* five columns: the brand block, three link columns, and the contact table */
body.ioc-site .ft{display:grid;grid-template-columns:1.35fr .85fr .85fr .85fr 1.1fr;gap:clamp(20px,3vw,48px)}body.ioc-site .ft__h2{margin-top:26px}@media (max-width:1080px){body.ioc-site .ft{grid-template-columns:1fr 1fr 1fr}}@media (max-width:760px){body.ioc-site .ft{grid-template-columns:1fr 1fr}}@media (max-width:520px){body.ioc-site .ft{grid-template-columns:1fr;gap:30px}}body.ioc-site .ft .wm{margin-bottom:16px;align-items:center}body.ioc-site .ft .wm i{color:inherit}body.ioc-site .ft .wm small{color:var(--dk-t2)}body.ioc-site .ft p{font-size:13.5px;line-height:1.6;color:var(--dk-t2);max-width:32ch}body.ioc-site .ft h5{margin-bottom:15px;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dk-t2)}body.ioc-site .ft ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}body.ioc-site .ft a{color:var(--dk-t);font-size:13.5px}body.ioc-site .ft a:hover{color:#fff}/* the column links had colour alone as their affordance, which on a dark
   ground is a small step. Each now reveals an arrow on hover — held at
   opacity 0 rather than display:none so it always reserves its width and the
   label cannot shift sideways when it appears. No transition: a frame-driven
   one never advances in the preview, so the state must be instant. */
body.ioc-site .ft ul a{display:inline-flex;align-items:baseline;gap:6px;width:max-content}body.ioc-site .ft ul a::after{content:"\2192";font-size:12.5px;line-height:1;opacity:0;color:var(--acc-dk)}body.ioc-site .ft ul a:hover::after{opacity:1}/* the contact rows carry real values, so they underline rather than sprout an
   arrow — an arrow implies navigation, and these are a mail and tel handoff */
body.ioc-site .ft__d dd a:hover{text-decoration:underline;text-underline-offset:3px}body.ioc-site .ft__d{display:grid;gap:12px;margin:0}body.ioc-site .ft__d div{display:grid;grid-template-columns:64px 1fr;gap:12px;font-size:13px;padding:9px 0;border-bottom:1px solid var(--b-line)}body.ioc-site .ft__d div:last-child{border-bottom:0}body.ioc-site .ft__d dt{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dk-t2)}body.ioc-site .ft__d dd{margin:0;color:var(--dk-t)}body.ioc-site .ft__bot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(30px,3.4vw,44px);padding-top:22px;border-top:1px solid var(--b-line2);font-size:12.5px;color:var(--dk-t2)}body.ioc-site .ft__bot nav{display:flex;gap:16px}body.ioc-site .ft__bot a{font-size:12.5px;color:var(--dk-t2)}body.ioc-site .ft__bot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}/* this one carries a visible label, so it must size to its content — the
   .ft__soc a rule below sets a 32px square and out-specifies a single class,
   which crushed "Back to top" into three wrapped lines spilling out of a 30px
   column. Hence .ft__soc a:not(.ft__top) there, and nowrap here. */
body.ioc-site .ft__top{display:inline-flex;align-items:center;gap:8px;width:auto;height:auto;padding:8px 13px;
  border:1px solid var(--b-line2);border-radius:3px;font:600 12.5px/1 var(--disp);
  color:var(--dk-t);margin-left:6px;white-space:nowrap}body.ioc-site .ft__top:hover{background:rgba(255,255,255,.08);color:#fff}body.ioc-site .ft__top i{}body.ioc-site .ft__soc{display:flex;flex-wrap:wrap;gap:9px;align-items:center}body.ioc-site .ft__soc a:not(.ft__top){width:32px;height:32px;border-radius:var(--r);border:1px solid var(--b-line2);display:grid;place-items:center;color:var(--dk-t);font-size:14px}body.ioc-site .ft__soc a:hover{background:var(--halo);border-color:var(--halo);color:#fff}@media (prefers-reduced-motion:reduce){body.ioc-site,body.ioc-site *{transition:none!important}}/* ═══ shared shell · masthead dropdowns ═══ */
body.ioc-site .mh__nav{display:flex;gap:2px;margin:0 auto}body.ioc-site .mh__i{position:relative}/* no transition on background or color: they never advance here, so the
   hover state would stay pinned at its from-value and never render */
body.ioc-site .mh__i > a{padding:9px 12px;border-radius:var(--r);font:500 14.5px/1 var(--disp);color:var(--t2);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}body.ioc-site .mh__i > a:hover{background:var(--wash2);color:var(--beacon)}body.ioc-site .mh__i > a i{color:var(--t3)}body.ioc-site .mh__i > a[aria-current]{color:var(--acc);font-weight:600;box-shadow:inset 0 -2px 0 var(--acc);border-radius:var(--r) 8px 0 0}body.ioc-site .mh__i > a[aria-current] i{color:var(--acc)}/* the panel is hidden by display, never by opacity: an opacity transition
   never advances where frames do not run, which would leave an invisible
   panel over the page capturing clicks */
body.ioc-site .mh__dd{display:none;position:absolute;top:100%;left:0;padding-top:8px;z-index:70}body.ioc-site .mh__i--has:hover .mh__dd,body.ioc-site .mh__i--has:focus-within .mh__dd,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mh__i--has.open .mh__dd,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mh__i--has.open .mh__dd{display:block}body.ioc-site .mh__ddi{min-width:288px;background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--r);box-shadow:0 24px 48px -24px rgba(12,10,20,.3);overflow:hidden}body.ioc-site .mh__ddi a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;font:500 14px/1.35 var(--disp);color:var(--beacon);border-bottom:1px solid var(--rule)}body.ioc-site .mh__ddi a:last-child{border-bottom:0}body.ioc-site .mh__ddi a i{color:var(--t3);flex:none;transition:transform .18s ease}body.ioc-site .mh__ddi a:hover{background:var(--acc-wash);color:var(--acc)}body.ioc-site .mh__ddi a:hover i{transform:translateX(3px);color:var(--acc)}@media (max-width:1120px){body.ioc-site .mh__nav{display:none}body.ioc-site .navtog{display:inline-flex}body.ioc-site .mh__in{flex-wrap:wrap;height:auto;min-height:64px;padding-top:12px;padding-bottom:12px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mh__in.open .mh__nav,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mh__in.open .mh__nav{display:flex;order:9;flex-basis:100%;flex-direction:column;gap:0;padding-top:8px;margin:6px 0 0;border-top:1px solid var(--rule)}body.ioc-site .mh__i{border-bottom:1px solid var(--rule)}body.ioc-site .mh__i:last-child{border-bottom:0}body.ioc-site .mh__i > a{padding:13px 4px;border-radius:0;justify-content:space-between}body.ioc-site .mh__dd{position:static;padding:0 0 10px}body.ioc-site .mh__ddi{border:0;box-shadow:none;border-radius:0;min-width:0;background:var(--wash)}body.ioc-site .mh__ddi a{padding:11px 16px;font-size:13.5px}
}/* ═══ page furniture ═══ */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).crumb,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .crumb{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-bottom:22px;white-space:nowrap;flex-wrap:wrap}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).crumb a,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .crumb a{color:var(--t3);display:inline-flex;align-items:center}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).crumb a:hover,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .crumb a:hover{color:var(--acc)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).crumb i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .crumb i{color:var(--t3)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero h1 em,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero h1 em{font-style:normal;color:var(--acc)}body.ioc-site .hero__chips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:30px}body.ioc-site .hero__chips b{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-right:2px}body.ioc-site .hero__chips span{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--rule-2);border-radius:var(--r);font:600 11px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--t2);white-space:nowrap}body.ioc-site .hero__chips i{color:var(--acc)}/* the figure's footing panel · the four families sit on the image side, on
   solid paper rather than over the photograph, so the grid stays readable and
   the text column is no longer bottom-heavy */
body.ioc-site .hero__panel{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--rule-2);padding:18px 22px 20px}body.ioc-site .hero__panel__t{display:block;font:700 15px/1.3 var(--disp);letter-spacing:-.02em;color:var(--beacon);margin-bottom:14px}body.ioc-site .hero__panel .facts{margin-top:0;border:1px solid var(--rule)}@media (max-width:1000px){/* the panel lives inside .hero__fig, which sits outside .hero .wrap and so
     never inherits the page gutter — on desktop the panel's own padding hides
     that, so it must supply the gutter itself once stacked */
body.ioc-site .hero__panel{position:static;border-top:0;padding:0 var(--pad) clamp(28px,4vw,40px)}/* and the panel must not travel with the figure's order:-1: display:contents
     dissolves the figure's box so the image and the panel become flex items of
     .hero directly — the image still leads, the panel now follows the H1 */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel){display:contents}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) .hero__img,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) .hero__img,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) image-slot,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) image-slot{order:-1;width:100%;border-bottom:1px solid var(--rule)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) .hero__panel,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) .hero__panel{order:1}body.ioc-site .hero__panel__t{margin:18px 0 12px}/* stacked, the figure is height-clamped — a static panel inside it would
     overflow that clamp and spill over the next section, so the clamp moves
     to the image and the figure grows to fit both */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel){height:auto}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) .hero__img,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) .hero__img,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) image-slot,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) image-slot{position:relative;inset:auto;height:clamp(240px,44vw,320px)}}/* the four-fact grid: what a reader can check */
body.ioc-site .facts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule-2);margin-top:32px}body.ioc-site .facts div{padding:14px 16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}body.ioc-site .facts div:nth-child(2n){border-right:0}body.ioc-site .facts div:nth-last-child(-n+2){border-bottom:0}body.ioc-site .facts b{display:flex;align-items:flex-start;gap:8px;font:600 13px/1.3 var(--disp);color:var(--beacon)}body.ioc-site .facts b i{color:var(--acc);flex:none;line-height:1.3}body.ioc-site .facts p{margin-top:5px;font-size:12px;line-height:1.45;color:var(--t3)}@media (max-width:560px){body.ioc-site .facts{grid-template-columns:1fr}body.ioc-site .facts div{border-right:0}}/* ═══ related band ═══ */
/* the accent rule IS this band's boundary marker, so the preceding section must
   drop its hairline rather than sit a 1px line directly above a 2px one */
body.ioc-site .wash:has(+ .rel){border-bottom:0}body.ioc-site .rel{background:var(--acc-wash);border-top:2px solid var(--acc)}body.ioc-site .rel__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;background:var(--paper)}body.ioc-site .rel__g a{padding:20px 22px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}body.ioc-site .rel__g a:last-child{border-right:0}body.ioc-site .rel__g a:hover{background:var(--wash)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).rel__g .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .rel__g .k{font-size:10px;letter-spacing:.14em}body.ioc-site .rel__g h4{color:var(--beacon)}body.ioc-site .rel__g p{font-size:13px;line-height:1.5;color:var(--t3)}body.ioc-site .rel__g > a > i{color:var(--acc);margin-top:auto;padding-top:6px}@media (max-width:760px){body.ioc-site .rel__g a{border-right:0;border-bottom:1px solid var(--rule)}body.ioc-site .rel__g a:last-child{border-bottom:0}}/* ═══ content grids ═══ */
body.ioc-site .g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(16px,1.8vw,20px)}body.ioc-site .tile{border:1px solid var(--rule-2);border-radius:var(--r);padding:20px 22px 22px;background:var(--paper);display:flex;flex-direction:column;gap:9px}body.ioc-site .tile > i{color:var(--acc)}body.ioc-site .tile h4{color:var(--beacon)}body.ioc-site .tile p{font-size:13.5px;line-height:1.55;color:var(--t3)}body.ioc-site .tile .lnk{margin-top:auto;padding-top:6px}/* equal-width at any count: grid tracks, never a wrapping flex row, which
   stretches whatever lands in the final row */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mx,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mx{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mx > div,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mx > div{padding:20px 22px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mx > div > i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mx > div > i{color:var(--acc)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mx h4,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mx h4{color:var(--beacon);font-size:16px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mx p,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mx p{font-size:13px;line-height:1.55;color:var(--t3)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mx .k,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mx .k{font-size:10px;letter-spacing:.13em}body.ioc-site .rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;background:var(--acc-wash)}body.ioc-site .rail > div{padding:18px 20px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:7px}body.ioc-site .rail > div:last-child{border-right:0}body.ioc-site .rail > div > i{color:var(--acc)}body.ioc-site .rail b{font:700 14.5px/1.25 var(--disp);letter-spacing:-.02em;color:var(--beacon)}body.ioc-site .rail p{font-size:12.5px;line-height:1.5;color:var(--t3)}@media (max-width:820px){body.ioc-site .rail > div{border-right:0;border-bottom:1px solid var(--rule)}body.ioc-site .rail > div:last-child{border-bottom:0}}body.ioc-site .chk{list-style:none;margin:0;padding:0;display:grid;gap:11px}body.ioc-site .chk li{display:flex;gap:11px;font-size:14px;line-height:1.55;color:var(--t2)}body.ioc-site .chk li:before{content:"";flex:none;width:7px;height:7px;margin-top:7px;border-radius:var(--r);background:var(--acc)}body.ioc-site .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}@media (max-width:860px){body.ioc-site .split{grid-template-columns:1fr}}/* ═══ disclosure ═══ */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq{border-top:1px solid var(--rule-2)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq details,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq details{border-bottom:1px solid var(--rule)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq summary,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq summary{padding:17px 4px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;font:600 15px/1.4 var(--disp);color:var(--beacon)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq summary::-webkit-details-marker,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq summary::-webkit-details-marker{display:none}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq summary:after,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq summary:after{content:"+";font:400 20px/1 var(--disp);color:var(--acc);flex:none}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq details[open] summary:after,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq details[open] summary:after{content:"\2212"}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq summary:hover,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq summary:hover{color:var(--acc)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq p,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq p{padding:0 4px 18px;font-size:14px;line-height:1.65;color:var(--t3);max-width:74ch}body.ioc-site .qd__btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px}/* the pair shares the cell evenly and centres its label, so they read as one
   control group rather than two differently-sized buttons */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).qd__btns .btn,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .qd__btns .btn{flex:1 1 0;min-width:140px;justify-content:center;margin-top:0}/* ═══ legal prose ═══ */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).prose,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .prose{max-width:74ch}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).prose h2,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .prose h2{font-size:clamp(21px,2vw,26px);margin:clamp(30px,3.4vw,44px) 0 12px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).prose h2:first-child,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .prose h2:first-child{margin-top:0}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).prose p,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .prose p{font-size:15px;line-height:1.72;color:var(--t3)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).prose .chk,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .prose .chk{margin-top:6px}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).prose .chk li,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .prose .chk li{font-size:15px;line-height:1.72;color:var(--t3)}/* ═══ pickable topic tags ═══ */
/* rows are uniform and meet the 44px hit-target floor, so a label that wraps
   cannot make its row a taller class of control than its nine siblings */
body.ioc-site .tags--pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;grid-auto-rows:minmax(44px,auto)}/* padding and gap are trimmed so the longest option ("Automation & integration")
   fits on one line at the 2-column width: a single wrapped label made its grid
   row 15px taller than the other four, reading as a different control class */
body.ioc-site .tags--pick label{display:flex;align-items:center;gap:8px;padding:10px 11px;border:1px solid var(--rule-2);
  border-radius:var(--r);font:500 13px/1.3 var(--disp);color:var(--t2);cursor:pointer}body.ioc-site .tags--pick label:hover{background:var(--wash)}body.ioc-site .tags--pick input{accent-color:var(--acc);margin:0;flex:none}/* the picker's labels are text on paper, not chips on a dark band. .tags span
   claims white AND the 10.5px uppercase chip face, which overrode the font the
   label itself declares — so the intended 13.5px sentence case never rendered
   and two labels wrapped. Resetting the face, not just the colour. */
body.ioc-site .tags--pick span{color:inherit;border:0;padding:0;font-size:13px;font-weight:500;
  text-transform:none;letter-spacing:-.005em}body.ioc-site .tags--pick input:checked + span{color:var(--acc);font-weight:600}/* ═══════════════════════════════════════════════════════════════════════
   MOTION
   Built against one hard constraint: in the embedded preview, CSS
   transitions and rAF never advance. So nothing here may rely on a frame
   to become VISIBLE. The reveal is gated on html.rv-on, which only script
   adds — if the script never runs, no element is ever hidden. A failsafe
   then force-reveals everything with animation:none, so a stalled or
   missed animation can never leave content invisible.
   Hover and press feedback is instant (0s) for anything that changes
   legibility, and animated only where failure is silent.
   ═════════════════════════════════════════════════════════════════════ */
@keyframes rvUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes tap{0%{transform:scale(1)}42%{transform:scale(.972)}100%{transform:scale(1)}}@keyframes nudge{0%{transform:translateX(0)}50%{transform:translateX(3px)}100%{transform:translateX(0)}}/* only script hides anything */
html.rv-on body.ioc-site .rv{opacity:0}html.rv-on body.ioc-site .rv.rv-in{animation:rvUp .52s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}/* the failsafe outranks every reveal state and starts no animation of its own */
html.rv-done body.ioc-site .rv,html.rv-done body.ioc-site .rv.rv-in{opacity:1!important;transform:none!important;animation:none!important}/* ── press feedback ─────────────────────────────────────────────────────
   :active fires without frames; the animation is a bonus, and its absence
   is silent because nothing depends on it */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).btn:active,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .btn:active,body.ioc-site .sy__i:active,body.ioc-site .st__r:active,body.ioc-site .reg__r:active,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button:active,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button:active,body.ioc-site .ind li:active,body.ioc-site .mh__s:active,body.ioc-site .pf__card:active{animation:tap .18s ease-out}/* ── hover ──────────────────────────────────────────────────────────────
   the colour change is instant (see the 0s durations below) so it can
   never be half-applied; the arrow's travel is animated, and if the
   animation does not run the row still reads as hovered */
body.ioc-site .reg__r:hover .reg__a i,body.ioc-site .eng__s a:hover i,body.ioc-site .ind__ask a:hover i,body.ioc-site .st__r:hover .st__a,body.ioc-site .qd__i .lnk:hover i,body.ioc-site .lnk:hover i{animation:nudge .34s ease-out}/* a hovered row states itself through fill, not through motion */
body.ioc-site .reg__r,body.ioc-site .sy__i,body.ioc-site .ind li,body.ioc-site .st__r,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button,body.ioc-site .eq__c a,body.ioc-site .eng__s a,body.ioc-site .ft a,body.ioc-site .ind__ask a{transition-duration:0s}/* ═══ offices · entity card, map, and the market mailboxes ═══ */
body.ioc-site .ofc__note{margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}body.ioc-site .ofc{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);border:1px solid var(--rule-2);background:var(--paper)}body.ioc-site .ofc__card{padding:clamp(24px,2.6vw,32px)}body.ioc-site .ofc__card h4{font-size:clamp(19px,1.8vw,24px);letter-spacing:-.03em}body.ioc-site .ofc__uen{margin-top:7px;font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--t3)}/* one ruled row per contact route, label above value, matching the register */
body.ioc-site .ofc__d{margin:20px 0 0;display:grid}body.ioc-site .ofc__d > div{padding:14px 0;border-top:1px solid var(--rule)}body.ioc-site .ofc__d dt{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}body.ioc-site .ofc__d dt i{color:var(--acc)}body.ioc-site .ofc__d dd{margin:7px 0 0;font-size:15px;font-weight:600;line-height:1.5;color:var(--beacon)}body.ioc-site .ofc__d dd a{color:var(--beacon)}body.ioc-site .ofc__d dd a:hover{color:var(--acc)}body.ioc-site .ofc__btns{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).ofc__btns .btn,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .ofc__btns .btn{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:11px 15px}body.ioc-site .ofc__map{position:relative;border-left:1px solid var(--rule-2);min-height:clamp(280px,32vw,420px);background:var(--wash2)}body.ioc-site .ofc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}/* the map is a third-party embed and may be blocked, so the link is a real
   fallback rather than decoration: it sits above the frame and always works */
body.ioc-site .ofc__mapl{position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:9px 13px;background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--r);
  font:600 12px/1 var(--disp);color:var(--beacon)}body.ioc-site .ofc__mapl:hover{border-color:var(--beacon);color:var(--beacon)}body.ioc-site .ofc__mapl i{}/* region switcher */
body.ioc-site .seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,2.6vw,32px)}body.ioc-site .seg button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:12px 17px;border:1px solid var(--rule-2);
  background:var(--paper);border-radius:var(--r);cursor:pointer;
  font:600 13.5px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:var(--t2)}body.ioc-site .seg button:hover{border-color:var(--beacon);color:var(--beacon)}body.ioc-site .seg button span{font-size:11px;font-weight:700;color:var(--t3)}body.ioc-site .seg button[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:#fff}body.ioc-site .seg button[aria-selected="true"] span{color:#fff}body.ioc-site .ofc__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:clamp(20px,2.2vw,28px) 0 14px}body.ioc-site .ofc__head b{font:700 16px/1.3 var(--disp);letter-spacing:-.02em;color:var(--beacon)}body.ioc-site .ofc__head span{font-size:13px;font-style:italic;color:var(--t3)}/* the mailbox grid: four to a row, hairline ruled, cells equal per row */
body.ioc-site .mbx{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule-2);background:var(--paper)}body.ioc-site .mbx--one{grid-template-columns:1fr}body.ioc-site .mbx__c{padding:16px 18px 17px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-width:0}body.ioc-site .mbx__c:nth-child(4n),body.ioc-site .mbx--one .mbx__c{border-right:0}body.ioc-site .mbx__c:nth-last-child(-n+4){border-bottom:0}body.ioc-site .mbx--one .mbx__c{border-bottom:0}body.ioc-site .mbx__c b{display:flex;align-items:center;gap:9px;font:600 14.5px/1.3 var(--disp);letter-spacing:-.015em;color:var(--beacon)}body.ioc-site .mbx__of{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 7px;border-radius:3px;background:var(--acc);color:#fff}body.ioc-site .mbx__c a{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12.5px;color:var(--t3);min-width:0}body.ioc-site .mbx__c a i{color:var(--t1);flex:none}body.ioc-site .mbx__c a:hover{color:var(--acc)}body.ioc-site .mbx__c a:hover i{color:var(--acc)}@media (max-width:1000px){body.ioc-site .ofc{grid-template-columns:1fr}body.ioc-site .ofc__map{border-left:0;border-top:1px solid var(--rule-2)}body.ioc-site .mbx{grid-template-columns:repeat(2,1fr)}body.ioc-site .mbx__c:nth-child(4n){border-right:1px solid var(--rule)}body.ioc-site .mbx__c:nth-child(2n){border-right:0}body.ioc-site .mbx__c:nth-last-child(-n+4){border-bottom:1px solid var(--rule)}body.ioc-site .mbx__c:nth-last-child(-n+2){border-bottom:0}
}@media (max-width:560px){body.ioc-site .mbx,body.ioc-site .mbx--one{grid-template-columns:1fr}body.ioc-site .mbx__c{border-right:0!important;border-bottom:1px solid var(--rule)!important}body.ioc-site .mbx__c:last-child{border-bottom:0!important}
}/* the only grey text on the site: a form placeholder, which must read as
   unfilled rather than as content. Everything else is solid black or white. */
body.ioc-site input:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer)::placeholder,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) input::placeholder,body.ioc-site textarea:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer)::placeholder,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) textarea::placeholder{color:#6B7280;opacity:1}/* ══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY · WCAG 2.2
   ══════════════════════════════════════════════════════════════════════ */
/* 2.4.7 Focus Visible · the sheet had no :focus-visible rule at all, so every
   control relied on the UA default — which all but disappears on the black
   sections. One ring, stated in the brand accent, with a white outer edge so
   it holds on any ground. */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer):focus-visible,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) :focus-visible{outline:3px solid #0001ff;outline-offset:2px;border-radius:2px}/* on ink grounds the ring inverts, with a blue halo so it reads on both */
body.ioc-site .dk :focus-visible,body.ioc-site footer:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) :focus-visible,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) footer :focus-visible,body.ioc-site .cs :focus-visible,body.ioc-site section:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer)[data-block="closing-quad"] :focus-visible,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) section[data-block="closing-quad"] :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px rgba(0,1,255,.65)}/* a filled accent button needs the white ring too — a blue ring on a blue fill
   is no indicator at all */
body.ioc-site .btn--acc:focus-visible,body.ioc-site .btn--paper:focus-visible{outline-color:#fff;box-shadow:0 0 0 6px rgba(0,1,255,.65)}/* the ring must never be clipped by a rounded container that hides overflow */
body.ioc-site .card:focus-within,body.ioc-site .rt:focus-within,body.ioc-site .ind li:focus-within{overflow:visible}/* 2.4.11 Focus Not Obscured · the masthead is sticky at z-60, so a control
   scrolled to by keyboard could sit underneath it. Scroll padding keeps the
   focused element clear of it. */
html{scroll-padding-top:88px}/* 2.4.1 Bypass Blocks · every page carries the same nav, so a keyboard user
   needs one jump past it. Visible only when focused. */
/* moved by position, not transform: a transform on a focused element is the
   kind of thing a stray reset or a stalled transition can leave stuck, and the
   link is useless if it does not appear */
body.ioc-site .skip{position:fixed;left:12px;top:-100px;z-index:200;
  background:var(--acc);color:#fff;font:600 14px/1 var(--disp);padding:13px 17px;
  border-radius:3px;text-decoration:none}body.ioc-site .skip:focus,body.ioc-site .skip:focus-visible{top:12px;color:#fff;outline:3px solid #fff;outline-offset:2px}/* 2.5.8 Target Size (Minimum) · standalone controls need 24x24. These read as
   text but are not inline in a sentence, so they take a minimum box rather
   than growing the type. */
body.ioc-site .ub a,body.ioc-site .ub__loc{min-height:24px;display:inline-flex;align-items:center}body.ioc-site .lnk{min-height:24px}body.ioc-site .ft a,body.ioc-site .ft__bot a{min-height:24px;display:inline-flex;align-items:center}body.ioc-site .ft ul a{min-height:24px}/* 1.4.12 Text Spacing · nothing may clip when a user overrides spacing */
body.ioc-site h1:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h1,body.ioc-site h2:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h2,body.ioc-site h3:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h3,body.ioc-site h4:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h4,body.ioc-site h5:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) h5,body.ioc-site p:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) p,body.ioc-site li:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) li,body.ioc-site dd:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) dd,body.ioc-site dt:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) dt{overflow-wrap:break-word}/* nav panel titles: styled as headings, marked up as text. Eight of these sat
   in the outline ahead of every page's h1, and they labelled a menu group
   rather than a section of the document. */
body.ioc-site .mm__lt{font-family:var(--disp);font-weight:700;font-size:clamp(19px,1.9vw,26px);
  letter-spacing:-.022em;line-height:1.06;color:var(--beacon)}body.ioc-site .mm__rt{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.014em;
  line-height:1.28;color:var(--beacon)}/* the promoted card and route titles keep the size they had as h4 — the tag
   changed for the document outline, not for the type scale */
body.ioc-site .card h3,body.ioc-site .rt__bd h3,body.ioc-site .reg__t h3{font-size:17px;letter-spacing:-.014em;line-height:1.28}/* 2.5.8 · the credential strip's two links measured 20px tall */
body.ioc-site .cs__i b a{min-height:24px;display:inline-flex;align-items:center}/* ── icon scale ──────────────────────────────────────────────────────────
   One base for every icon, then four roles over it. Setting only the roles
   left eight sizes on the page: dozens of per-block rules written as each
   section was built still won, because a role selector cannot enumerate
   every context an icon appears in. The base is the guarantee. */
body.ioc-site i:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer)[class*="ph-"],body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) i[class*="ph-"]{font-size:var(--ic-2)}/* micro · eyebrows, nav, breadcrumb, footer and utility links */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).k i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .k i,body.ioc-site .ub i,body.ioc-site .sy__go i,body.ioc-site .ft a i,body.ioc-site .ft__bot i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).crumb i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .crumb i,body.ioc-site .mh__nav i,body.ioc-site .mh__i > a i,body.ioc-site .mh__ddi a i,body.ioc-site .cs__i a i,body.ioc-site .eng__s a i,body.ioc-site .ft__top i,body.ioc-site .hero__chips i,body.ioc-site .ofc__mapl i,body.ioc-site .mbx__c a i{font-size:var(--ic-1)}/* default · buttons, form controls, tags, action links, row arrows */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).btn i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .btn i,body.ioc-site button:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) button i,body.ioc-site label:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) label i,body.ioc-site .radios label i,body.ioc-site .rt__tag i,body.ioc-site .card__go i,body.ioc-site .lnk i,body.ioc-site .st__a,body.ioc-site .reg__a i,body.ioc-site .ofc i,body.ioc-site .mbx i,body.ioc-site .platr i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).cs__i .k i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .cs__i .k i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button i,body.ioc-site .facts b i,body.ioc-site .rel__g > a > i,body.ioc-site .ofc__d dt i{font-size:var(--ic-2)}/* feature · the icon that names a record or a row */
body.ioc-site .ind__h i,body.ioc-site .sy__h i,body.ioc-site .st__ic,body.ioc-site .plat i,body.ioc-site .reg__t i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).qd__i .k i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .qd__i .k i,body.ioc-site .eq__c a i,body.ioc-site .rail > div > i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mx > div > i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mx > div > i{font-size:var(--ic-3)}/* display · the lead icon on a card or tile */
body.ioc-site .card__i i,body.ioc-site .card__bd .card__i i,body.ioc-site .tile > i{font-size:var(--ic-4)}/* 2.5.8 · the breadcrumb's home link was a 13px glyph with no box around it */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).crumb a,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .crumb a{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).crumb a:not([aria-label]),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .crumb a:not([aria-label]){justify-content:flex-start}/* 2.5.8 · a native checkbox renders ~13px. The whole <label> is the target, so
   the criterion is met by the label's box, but the control itself should still
   be large enough to see and hit directly. */
body.ioc-site .consent input[type=checkbox],body.ioc-site .radios input[type=radio]{width:20px;height:20px;flex:none}/* ── hover motion · site-wide ────────────────────────────────────────────
   The home page's components each got their nudge as they were written; the
   inner-page components were added later and never did, and the CTA button
   never had any motion at all — only a fill change. Same pattern as the rest:
   the state change is instant, the motion is a keyframe animation that is
   purely a bonus, so nothing depends on frames that may not run here. */
@keyframes lift{from{transform:translateY(0)}to{transform:translateY(-2px)}}/* every CTA: its arrow leads, and the button lifts off the page */
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).btn:hover i,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .btn:hover i{animation:nudge .34s ease-out}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).btn:hover,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .btn:hover{animation:lift .18s ease-out forwards}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).btn:active,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .btn:active{animation:tap .18s ease-out}/* the related band's cards read as links but had no motion */
body.ioc-site .rel__g > a:hover > i{animation:nudge .34s ease-out}body.ioc-site .rel__g > a:hover{animation:lift .18s ease-out forwards}/* the disclosure rows in an FAQ are the one control on those pages. Its
   indicator is a ::after carrying + / −, not an <i>, so the icon selector used
   everywhere else matches nothing here. And nudge translates on X, which reads
   as a slip on a plus sign — a disclosure wants a scale pulse instead. */
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq summary,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq summary{cursor:pointer}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq summary:hover,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq summary:hover{background:var(--wash)}body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).faq summary:hover::after,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .faq summary:hover::after{animation:bump .3s ease-out}/* remaining action links on the inner pages */
body.ioc-site .mbx__c a:hover i,body.ioc-site .ofc__mapl:hover i,body.ioc-site .ofc__d dd a:hover i,body.ioc-site .ftp a:hover i,body.ioc-site .mm__it:hover > i:last-child{animation:nudge .34s ease-out}

/* deliberately no lift on .tile, .rt or .mbx: none of them is a link — only a
   control inside them is — and a card that rises under the cursor promises a
   click the card itself does not accept */


/* --- selector alias (generated by build-pack-layer.mjs: the pack styles
   images through __img classes and icons through `i` element selectors;
   the host renders <img class="infoc-media"> and <svg class="ph">, so each
   rule is duplicated rather than its values restated by hand) --- */
body.ioc-site .ioc-form .btn-primary{background:var(--beacon);border-color:var(--beacon);color:#fff}
body.ioc-site .ioc-form .btn-primary:hover{background:var(--beacon-2);border-color:var(--beacon-2);color:#fff}
body.ioc-site .ioc-form .btn-primary{padding:15px 24px;font-size:15px}
body.ioc-site .lnk svg.ph{transition:transform .18s ease}
body.ioc-site .lnk:hover svg.ph{transform:translateX(3px)}
body.ioc-site .mh__nav svg.ph{color:var(--t1)}
body.ioc-site .mm__it > svg.ph:first-child{font-size:var(--ic-3);color:var(--halo);line-height:1.35}
body.ioc-site .mm__it > svg.ph:last-child{font-size:var(--ic-1);color:var(--t1);line-height:1.5;opacity:0}
body.ioc-site .mm__it:hover > svg.ph:last-child{opacity:1;color:var(--halo)}
@media (max-width:1120px){body.ioc-site .mm__it > svg.ph:last-child{opacity:1}}
body.ioc-site .platr svg.ph{color:var(--halo)}
body.ioc-site .infoc-media{width:100%;height:100%;object-fit:cover;object-position:38% center;display:block}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) .infoc-media,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) .infoc-media{height:66%}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).cs__i .k svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .cs__i .k svg.ph{line-height:1.62;flex:none}
body.ioc-site .cs__i a svg.ph{color:var(--halo-4);transition:transform .18s ease}
body.ioc-site .cs__i a:hover svg.ph{transform:translateX(3px)}
body.ioc-site .card:hover .card__go svg.ph{animation:nudge .34s ease-out}
body.ioc-site .reg__t svg.ph{color:var(--beacon-4);flex:none}
body.ioc-site .dk .reg__t svg.ph{color:var(--halo-4)}
body.ioc-site .ind__h svg.ph{line-height:1.3;color:var(--halo);flex:none}
body.ioc-site .infoc-media{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
body.ioc-site .sy__h svg.ph{color:var(--beacon-4);flex:none}
body.ioc-site .sy__i[aria-pressed="true"].sy__i[aria-pressed="true"] .sy__h svg.ph,body.ioc-site .sy__i[aria-pressed="true"] .sy__go{color:var(--halo-4)}
body.ioc-site .eng__s a svg.ph{color:var(--t1);transition:transform .18s ease}
body.ioc-site .eng__s a:hover svg.ph{transform:translateX(3px);color:var(--halo)}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button svg.ph{color:var(--t1)}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button[aria-selected="true"] svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button[aria-selected="true"] svg.ph{color:var(--halo-4)}
body.ioc-site .rt__tag svg.ph{flex:none}
body.ioc-site .rt--train .rt__tag svg.ph{color:var(--beacon-4)}
body.ioc-site .rt--hire .rt__tag svg.ph{color:var(--halo)}
body.ioc-site .eq__c a svg.ph{color:var(--halo)}
body.ioc-site .ioc-form{background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--r);padding:clamp(22px,2.6vw,30px)}
body.ioc-site .ioc-field > label{font:600 13px/1 var(--disp);color:var(--t2);display:block;margin-bottom:10px}
body.ioc-site .ioc-choicegroup legend{font:600 13px/1 var(--disp);color:var(--t2);display:block;margin-bottom:10px}
body.ioc-site .ioc-field > label .req{color:var(--halo)}
body.ioc-site .ioc-choicegroup legend .req{color:var(--halo)}
body.ioc-site .ioc-field > label span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-left:6px}
body.ioc-site .ioc-choicegroup legend span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-left:6px}
body.ioc-site .ioc-field{margin-bottom:19px}
body.ioc-site .ioc-choicegroup:not(.ioc-consent){margin-bottom:19px}
body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices label{padding:12px 13px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:9px;font:500 14px/1 var(--disp);color:var(--t2);cursor:pointer}
body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices label:hover{background:var(--wash)}
body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices input{accent-color:var(--halo);margin:0}
body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices label svg.ph{color:var(--t1)}
body.ioc-site .ioc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
body.ioc-site .ioc-consent .ioc-choice{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--t3);margin:20px 0}
body.ioc-site .ioc-consent .ioc-choice .req{color:var(--halo)}
body.ioc-site .ioc-consent .ioc-choice input{accent-color:var(--halo);margin:2px 0 0}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).ioc-form .btn,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .ioc-form .btn{width:100%;justify-content:center}
body.ioc-site .ioc-privacy{font-size:12px;line-height:1.5;color:var(--t3);margin-top:13px}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).ioc-privacy.done,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .ioc-privacy.done{display:none;color:var(--ok);font-weight:600}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).ioc-privacy.done:not([hidden]),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .ioc-privacy.done:not([hidden]){display:block}
@media (max-width:900px){body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices,body.ioc-site .ioc-form-grid{grid-template-columns:1fr}}
body.ioc-site .ft .wm svg.ph{color:inherit}
body.ioc-site .mh__i > a svg.ph{color:var(--t3)}
body.ioc-site .mh__i > a[aria-current] svg.ph{color:var(--acc)}
body.ioc-site .mh__ddi a svg.ph{color:var(--t3);flex:none;transition:transform .18s ease}
body.ioc-site .mh__ddi a:hover svg.ph{transform:translateX(3px);color:var(--acc)}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).crumb svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .crumb svg.ph{color:var(--t3)}
body.ioc-site .hero__chips svg.ph{color:var(--acc)}
@media (max-width:1000px){body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) .infoc-media,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) .infoc-media,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) image-slot,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) image-slot{order:-1;width:100%;border-bottom:1px solid var(--rule)}}
@media (max-width:1000px){body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) .infoc-media,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) .infoc-media,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).hero > .hero__fig:has(.hero__panel) image-slot,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .hero > .hero__fig:has(.hero__panel) image-slot{position:relative;inset:auto;height:clamp(240px,44vw,320px)}}
body.ioc-site .facts b svg.ph{color:var(--acc);flex:none;line-height:1.3}
body.ioc-site .rel__g > a > svg.ph{color:var(--acc);margin-top:auto;padding-top:6px}
body.ioc-site .tile > svg.ph{color:var(--acc)}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mx > div > svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mx > div > svg.ph{color:var(--acc)}
body.ioc-site .rail > div > svg.ph{color:var(--acc)}
body.ioc-site .reg__r:hover .reg__a svg.ph,body.ioc-site .eng__s a:hover svg.ph,body.ioc-site .ind__ask a:hover svg.ph,body.ioc-site .st__r:hover .st__a,body.ioc-site .qd__i .lnk:hover svg.ph,body.ioc-site .lnk:hover svg.ph{animation:nudge .34s ease-out}
body.ioc-site .ofc__d dt svg.ph{color:var(--acc)}
body.ioc-site .mbx__c a svg.ph{color:var(--t1);flex:none}
body.ioc-site .mbx__c a:hover svg.ph{color:var(--acc)}
body.ioc-site svg.ph:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer),body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) svg.ph{font-size:var(--ic-2)}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).k svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .k svg.ph,body.ioc-site .ub svg.ph,body.ioc-site .sy__go svg.ph,body.ioc-site .ft a svg.ph,body.ioc-site .ft__bot svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).crumb svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .crumb svg.ph,body.ioc-site .mh__nav svg.ph,body.ioc-site .mh__i > a svg.ph,body.ioc-site .mh__ddi a svg.ph,body.ioc-site .cs__i a svg.ph,body.ioc-site .eng__s a svg.ph,body.ioc-site .ft__top svg.ph,body.ioc-site .hero__chips svg.ph,body.ioc-site .ofc__mapl svg.ph,body.ioc-site .mbx__c a svg.ph{font-size:var(--ic-1)}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).btn svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .btn svg.ph,body.ioc-site button:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) button svg.ph,body.ioc-site label:where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) label svg.ph,body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices label svg.ph,body.ioc-site .rt__tag svg.ph,body.ioc-site .card__go svg.ph,body.ioc-site .lnk svg.ph,body.ioc-site .st__a,body.ioc-site .reg__a svg.ph,body.ioc-site .ofc svg.ph,body.ioc-site .mbx svg.ph,body.ioc-site .platr svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).cs__i .k svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .cs__i .k svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).tabs button svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .tabs button svg.ph,body.ioc-site .facts b svg.ph,body.ioc-site .rel__g > a > svg.ph,body.ioc-site .ofc__d dt svg.ph{font-size:var(--ic-2)}
body.ioc-site .ind__h svg.ph,body.ioc-site .sy__h svg.ph,body.ioc-site .st__ic,body.ioc-site .plat svg.ph,body.ioc-site .reg__t svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).qd__i .k svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .qd__i .k svg.ph,body.ioc-site .eq__c a svg.ph,body.ioc-site .rail > div > svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).mx > div > svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .mx > div > svg.ph{font-size:var(--ic-3)}
body.ioc-site .card__i svg.ph,body.ioc-site .card__bd .card__i svg.ph,body.ioc-site .tile > svg.ph{font-size:var(--ic-4)}
body.ioc-site .ioc-consent .ioc-choice input[type=checkbox],body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices input[type=radio]{width:20px;height:20px;flex:none}
body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer).btn:hover svg.ph,body.ioc-site :where([data-variant-id="B-01-V25"],[data-variant-id="B-03-V28"],[data-variant-id="B-10-V29"],[data-variant-id="B-10-V31"],[data-variant-id="B-11-V26"],[data-variant-id="B-11-V27"],[data-variant-id="B-11-V30"],[data-variant-id="B-17-V32"],.ub,header.mh,section[data-block="closing-quad"],footer) .btn:hover svg.ph{animation:nudge .34s ease-out}
body.ioc-site .rel__g > a:hover > svg.ph{animation:nudge .34s ease-out}
body.ioc-site .mbx__c a:hover svg.ph,body.ioc-site .ofc__mapl:hover svg.ph,body.ioc-site .ofc__d dd a:hover svg.ph,body.ioc-site .ftp a:hover svg.ph,body.ioc-site .mm__it:hover > svg.ph:last-child{animation:nudge .34s ease-out}

/* --- kit-leak neutralisers (generated by build-pack-layer.mjs) --- */

body.ioc-site [data-variant-id="B-01-V25"] .btn,
body.ioc-site [data-variant-id="B-03-V28"] .btn,
body.ioc-site [data-variant-id="B-10-V29"] .btn,
body.ioc-site [data-variant-id="B-10-V31"] .btn,
body.ioc-site [data-variant-id="B-11-V26"] .btn,
body.ioc-site [data-variant-id="B-11-V27"] .btn,
body.ioc-site [data-variant-id="B-11-V30"] .btn,
body.ioc-site [data-variant-id="B-17-V32"] .btn,
body.ioc-site .ub .btn,
body.ioc-site header.mh .btn,
body.ioc-site section[data-block="closing-quad"] .btn,
body.ioc-site footer .btn {
  min-height: 0;
}

body.ioc-site [data-variant-id="B-01-V25"] .btn svg,
body.ioc-site [data-variant-id="B-03-V28"] .btn svg,
body.ioc-site [data-variant-id="B-10-V29"] .btn svg,
body.ioc-site [data-variant-id="B-10-V31"] .btn svg,
body.ioc-site [data-variant-id="B-11-V26"] .btn svg,
body.ioc-site [data-variant-id="B-11-V27"] .btn svg,
body.ioc-site [data-variant-id="B-11-V30"] .btn svg,
body.ioc-site [data-variant-id="B-17-V32"] .btn svg,
body.ioc-site .ub .btn svg,
body.ioc-site header.mh .btn svg,
body.ioc-site section[data-block="closing-quad"] .btn svg,
body.ioc-site footer .btn svg {
  width: 1em;
  height: 1em;
}

body.ioc-site [data-variant-id="B-01-V25"] button,
body.ioc-site [data-variant-id="B-03-V28"] button,
body.ioc-site [data-variant-id="B-10-V29"] button,
body.ioc-site [data-variant-id="B-10-V31"] button,
body.ioc-site [data-variant-id="B-11-V26"] button,
body.ioc-site [data-variant-id="B-11-V27"] button,
body.ioc-site [data-variant-id="B-11-V30"] button,
body.ioc-site [data-variant-id="B-17-V32"] button,
body.ioc-site .ub button,
body.ioc-site header.mh button,
body.ioc-site section[data-block="closing-quad"] button,
body.ioc-site footer button {
  font-size: 13.3333px;
  line-height: normal;
}

body.ioc-site [data-variant-id="B-01-V25"] .ioc-field,
body.ioc-site [data-variant-id="B-03-V28"] .ioc-field,
body.ioc-site [data-variant-id="B-10-V29"] .ioc-field,
body.ioc-site [data-variant-id="B-10-V31"] .ioc-field,
body.ioc-site [data-variant-id="B-11-V26"] .ioc-field,
body.ioc-site [data-variant-id="B-11-V27"] .ioc-field,
body.ioc-site [data-variant-id="B-11-V30"] .ioc-field,
body.ioc-site [data-variant-id="B-17-V32"] .ioc-field,
body.ioc-site .ub .ioc-field,
body.ioc-site header.mh .ioc-field,
body.ioc-site section[data-block="closing-quad"] .ioc-field,
body.ioc-site footer .ioc-field {
  gap: 0;
}

body.ioc-site [data-variant-id="B-01-V25"] .ioc-consent .ioc-choice,
body.ioc-site [data-variant-id="B-03-V28"] .ioc-consent .ioc-choice,
body.ioc-site [data-variant-id="B-10-V29"] .ioc-consent .ioc-choice,
body.ioc-site [data-variant-id="B-10-V31"] .ioc-consent .ioc-choice,
body.ioc-site [data-variant-id="B-11-V26"] .ioc-consent .ioc-choice,
body.ioc-site [data-variant-id="B-11-V27"] .ioc-consent .ioc-choice,
body.ioc-site [data-variant-id="B-11-V30"] .ioc-consent .ioc-choice,
body.ioc-site [data-variant-id="B-17-V32"] .ioc-consent .ioc-choice,
body.ioc-site .ub .ioc-consent .ioc-choice,
body.ioc-site header.mh .ioc-consent .ioc-choice,
body.ioc-site section[data-block="closing-quad"] .ioc-consent .ioc-choice,
body.ioc-site footer .ioc-consent .ioc-choice {
  padding: 0;
  border: 0;
  background: none;
}

/* END PACK LAYER */

/* Everything from here sits AFTER the generated pack layer, and has to:
 * the layer restates the pack every build, so a correction placed above it
 * loses every tie at equal specificity. The figure ratio and the selected
 * tab mark were written in the authored head first and measured unchanged —
 * 547x124 still, the mark still #5478E8 — which is what moved them here. */

/* -- The capability-gap photos are not cropped to a letterbox ---------------
 * OWNER-REPORTED. The pack fixes `.rt__fig` at 124px, and the panel is 547px
 * wide, so every photo is cut to a 4.4:1 slot — heads and rooms lost. The
 * pack draws its OTHER photo figure, the card row, at `aspect-ratio:8/5`, so
 * that is the ratio used here rather than a height invented for the purpose:
 * the image keeps the proportion the pack already chose for photography, and
 * the figure grows with the column instead of at one breakpoint. */
body.ioc-site .rt__fig {
  height: auto;
  aspect-ratio: 8 / 5;
}

/* -- The platform deck shows a whole diagram, not the top of one -----------
 * SAME DEFECT CLASS AS `.rt__fig` ABOVE, found when the six layer figures
 * became process-flow illustrations (CMS-D-221 imagery pass) instead of
 * product screenshots.
 *
 * The pack gives the deck ONE fixed height below 960px —
 * `clamp(280px,60vw,340px)` — while the card spans the full measure there,
 * so the figure left after the caption gets wider and wider without getting
 * taller. MEASURED on the rendered page (`.pf__card .pf__fig`):
 *
 *     390px → 348 x 202   (1.72:1)      900px → 826 x 248   (3.33:1)
 *     480px → 438 x 208   (2.10:1)      960px → 881 x 248   (3.55:1)
 *
 * With `object-fit:cover` anchored `top left` a 3:2 illustration therefore
 * loses 12.8% off the bottom at 390px and 54.9% at 900px — at tablet widths
 * the arrows, the inputs and the outputs are all below the cut and only the
 * tops of the panels survive. A SCREENSHOT tolerated that (its top-left is
 * its most meaningful corner, which is why this shipped unnoticed); a
 * diagram of a flow does not.
 *
 * ABOVE 960px THE SAME FRAME WAS WRONG THE OTHER WAY, which the first pass at
 * this missed by trusting one measurement at 1440px. `.pf` couples its two
 * columns with `align-items:stretch`, so the deck is stretched to the
 * SIX-ROW strata column beside it and the figure comes out TALLER than 3:2 —
 * measured 1.283:1 at 961px and 1.367:1 at 1024px, which `cover` pays for by
 * cutting 14.5% and 8.8% off one SIDE, i.e. the output end of every flow.
 *
 * So the coupling goes. `align-items:start` lets each column take its own
 * height and the figure holds 3:2 at EVERY width — measured 1.500 at
 * 961/1024/1100/1280/1440/1920 as well as across 360…960. The cost is that
 * the two columns no longer end flush: the deck runs 41px short at 961px,
 * 23px short at 1024px, level at 1100px, then 24px/12px/7px long at
 * 1280/1440/1920. That is a smaller price than cutting the subject out of the
 * picture, and under 25px at the widths this site is mostly read at.
 *
 * WHY A STACKED GRID RATHER THAN A TALLER `height`. The deck must keep an
 * explicit box because its six cards are stacked, and a vw formula for that
 * height would only re-guess what the caption and the measure do. Putting
 * every card in ONE grid cell keeps exactly the overlay `position:absolute;
 * inset:0` gave — the cards still occupy the identical rectangle and the
 * island still drives z-index/opacity/transform untouched — while letting
 * the deck take its height from the tallest card, so the figure's own
 * `aspect-ratio` decides the geometry. `opacity`, not `display`, is what
 * hides an inactive card (the pack's own note above says why), so all six
 * still contribute height and switching layers never reflows the band. */
body.ioc-site .pf {
  align-items: start;
}
body.ioc-site .pf__deck {
  display: grid;
  height: auto;
  min-height: 0;
}
body.ioc-site .pf__card {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
}
body.ioc-site .pf__fig {
  flex: none;
  aspect-ratio: 3 / 2;
}

/* Whatever crop is left, take it from BOTH edges rather than one.
 *
 * The site-wide `.infoc-media` rule anchors every image `top left` (it is
 * declared twice in the generated layer and the later one, from the pack's
 * `.pf__img`, wins for the whole site — so this deck is where that default
 * came from in the first place). Anchoring is right for a screenshot and
 * wrong for a centred illustration: it spends the entire crop on one edge.
 *
 * The frame above now holds 3:2 at every width, so for a 3:2 illustration
 * there is no crop left for this to place — it is not what fixes the band,
 * and the comment it replaced said otherwise. It stays for the case the
 * frame cannot control: the slot is EDITOR-MANAGED (CMS-D-081), so the next
 * picture dropped into it may be 16:9 or square, and `cover` will crop
 * whatever does not match. Centred, that crop is shared between both edges
 * instead of being spent entirely on the right.
 *
 * Scoped to this figure alone: the site-wide default is load-bearing for the
 * photography elsewhere and is deliberately not touched. */
body.ioc-site .pf__fig .infoc-media {
  object-position: center;
}

/* -- A grid of cells is separate boxes, not one stitched sheet --------------
 * OWNER-REPORTED, against two screenshots: the enquiry form's choice grid and
 * the home role tabs. The pack draws both with COLLAPSED borders — the
 * container carries a top and left hairline, every cell carries a right and
 * bottom one, and the gap is zero, so the cells fuse into a single ruled sheet
 * with no space between them.
 *
 * IT IS NOT TWO COMPONENTS. A scan of all 36 routes (every one 200, the 404
 * route 404) found the same idiom in the industries grid on the SAME page as
 * both screenshots, and the choice grid repeats it on /contact, /academy and
 * /talents-gateway. The site already disagrees with itself about it:
 * `/talk-to-infoc` draws its choice grid GAPPED, which is the treatment
 * adopted here so the site converges on one pattern instead of gaining a
 * third. Its 8px gap and 1px hairline are the measured reference; that grid
 * also kept a stray container top/left hairline from the stitched idiom, and
 * this removes it everywhere.
 *
 * DELIBERATELY NOT TOUCHED, and it is the reason this rule is a list of three
 * and not a wildcard: the seven `.cv2-*` grids on the /reach landers use the
 * identical idiom, but those landers are comp-exact to the v2 comps approved
 * under CMS-D-172 — changing them is a superseding design decision, not a
 * defect fix. `.ioc-faq-list`, `.qd`, `.cs__g`, `.ioc-office-info`,
 * `.ioc-td-chips` and `.ioc-tabs-list` draw a single divider between items
 * rather than boxing them, which is a different pattern and reads correctly.
 *
 * WHY `!important`, which is otherwise a smell here. The pack spends SIX
 * `nth-child` rules across three breakpoints (1000px, 760px, 520px, 420px)
 * re-adding and clearing cell borders, purely to keep a stitched grid's OUTER
 * edge clean — `.ind li:nth-child(2n){border-right:0}` and its five siblings,
 * two of which are themselves `!important`. Those all sit at (0,3,2) and beat
 * a plain restatement, and the whole pack layer is REGENERATED by
 * build-pack-layer.mjs on every build, so matching each selector by hand would
 * go stale silently the next time the pack adds a seventh. The invariant
 * "every cell carries its own full border" is what has to survive that, so it
 * is stated once, importantly, rather than six times, fragilely. */
body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices,
body.ioc-site .tabs,
body.ioc-site .ind {
  gap: 8px;
  border: 0 !important;
  border-radius: 0 !important;
  /* the pack clips the tab strip so its shared seams meet the rounded frame;
     with the frame gone the clip would crop each cell's own corner instead. */
  overflow: visible !important;
}
/* `:nth-child(n)` matches every cell and changes nothing about WHICH elements
   are selected — it is here purely for specificity. Those six pack rules are
   `.ind li:last-child`, `.tabs button:nth-child(2n)` and their siblings, all
   at (0,3,2); a plain `.ind li` is (0,2,2) and loses even when both sides are
   `!important`, because specificity decides between two important
   declarations and order only breaks a tie. Measured: without this the last
   industries cell rendered `1101` — no bottom border — below 520px. One
   pseudo-class puts this at (0,3,2) too, and being later in the sheet it now
   wins, for every one of the six rather than for the one that was caught. */
body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices label:nth-child(n),
body.ioc-site .tabs button:nth-child(n),
body.ioc-site .ind li:nth-child(n) {
  border: 1px solid var(--rule) !important;
}
/* The tab strip's frame was `--rule-2`, a step darker than the cell hairline
   the other two use; moving the border onto the cells keeps that weight rather
   than silently restyling the component. */
body.ioc-site .tabs button:nth-child(n) {
  border-color: var(--rule-2) !important;
}

/* -- A <select> must not decide how wide the page is ------------------------
 * FOUND BY /qa, not reported: /reach/business-central, /reach/microsoft-365,
 * /reach/microsoft-azure and /reach/microsoft-fabric-power-bi all scrolled
 * SIDEWAYS at 390px - measured 149, 194, 208 and 219 extra pixels. Four ad
 * landers, where the mobile share of traffic is the highest on the site.
 *
 * THE CHAIN, traced by min-content rather than guessed. A `<select>` is
 * `white-space: pre` and its min-content width is its LONGEST OPTION, so
 * "Azure cloud foundation and..." measured 454px. Nothing above it could
 * shrink: `.ioc-field` and `.ioc-form-grid` are flex/grid items, whose
 * `min-width` is `auto` (NOT zero) by spec, so the 454px floor propagated up
 * untouched - field 454 -> grid track 454 -> form 500 -> `.cv2-card-body` 548
 * -> `.cv2-engage-card` 550. And `.cv2-engage-in` does collapse to `1fr` below
 * 1100px, but `1fr` is `minmax(AUTO, 1fr)`: its automatic minimum is that same
 * min-content, so the single column sized itself to 550px inside a 358px
 * container instead of clamping. One unshrinkable option string set the width
 * of the document.
 *
 * The floor is released where it is imposed - the flex and grid items, and the
 * controls themselves. Nothing is resized: this only permits shrinking that
 * `min-width:auto` was forbidding. Measured before and after at 1440px, the
 * engagement card is 653px BOTH WAYS on all four routes, which is what keeps
 * this a bug fix rather than a change to the CMS-D-172 comp-exact landers; at
 * 390px the overflow is 0 on all four. A shrunk select truncates its option
 * text, which is the platform's own behaviour and costs nothing - the native
 * picker still shows every option in full when it opens. */
body.ioc-site .cv2-engage-in > *,
body.ioc-site .cv2-card-body,
body.ioc-site .cv2-mount,
body.ioc-site .ioc-form,
body.ioc-site .ioc-form-grid,
body.ioc-site .ioc-field {
  min-width: 0;
}
body.ioc-site .ioc-field select,
body.ioc-site .ioc-field input,
body.ioc-site .ioc-field textarea {
  min-width: 0;
  max-width: 100%;
}

/* -- The selected seat tab reads as selected --------------------------------
 * The pack paints the chosen tab's ground `--beacon-2` and its label white,
 * but leaves the mark at `--halo-4`, a mid blue that was legible on the
 * light ground it was designed against and is not on the dark one. The
 * label and the mark belong to the same state, so they take the same
 * colour. */
body.ioc-site .tabs button[aria-selected="true"] svg.ph,
body.ioc-site .tabs button[aria-selected="true"] i {
  color: #fff;
}

/* -- The accent scale, taken from www.infoc.com itself ----------------------
 * OWNER-DIRECTED: follow the live site exactly. These values are READ OFF it
 * (its `:root` carries 175 custom properties; these are the blue family and
 * the two section accents the pack also defines), not derived from a rule of
 * thumb, which is how the first cut went wrong.
 *
 * WHAT THE FIRST CUT GOT WRONG, recorded so it is not repeated: it read
 * "#0000C4 is the accent" as the REST colour and paired it with #00008F as
 * the hover. Both numbers are real and both are used on the live site, but
 * one step further down the scale than that: #0001FF rests, #0000C4 is the
 * HOVER (`--ioc-blue-hover`, `--ioc-accent-hover`, `--accent-solutions-hover`
 * all carry it) and #00008F is the PRESSED state (`--blue-active`). So the
 * whole scale was shifted one step dark, and every link and kicker on the
 * site rested at its own hover colour.
 *
 * THE MAPPING, pack token to the live token it mirrors:
 *   --halo     / --acc      #0001FF   --ioc-blue       / --ioc-accent
 *   --halo-600 / --acc-600  #0000C4   --ioc-blue-hover / --ioc-accent-hover
 *   --halo-4   / --acc-dk   #33B1FF   the colour the live site RENDERS on dark
 *                                     grounds — see THE ON-DARK COLOUR below
 *   --halo-50  / --acc-wash #E8E8FF   --blue-tint      (the pale wash)
 *   academy    --acc        #6929C4   --ioc-fam-academy, hover #55209C
 *   talents    --acc        #227758   --ioc-fam-talents, hover #145F40
 *
 * #00008F is NOT set here. The live site spends it on `:active`, and this
 * pack answers a press with motion instead — its only `:active` rules run a
 * `tap` animation and set no colour. Adding one would invent an interaction
 * state the design does not have, so the colour stays unused until that is a
 * decision rather than a side effect.
 *
 * Declared AFTER the generated layer because that layer carries the pack's
 * own `:root` and would otherwise win. Contrast: #0001FF on white is 8.6:1
 * and white on #0001FF is 8.6:1, both above the 4.5:1 AA text rule; #A5A6FF
 * on `--beacon-2` is 8.9:1.
 *
 * THE ON-DARK COLOUR IS #33B1FF, NOT #A5A6FF, AND THE DIFFERENCE IS THE WHOLE
 * LESSON. The live site declares `--blue-on-dark:#a5a6ff`, and choosing a value
 * by its NAME is what put that lavender on our dark bands. Measuring what the
 * site actually PAINTS on those grounds gives a different answer: nine of its
 * non-white marks on dark are #33B1FF, and they are the very elements this
 * token drives — the platform kicker, its six layer labels, the marketplace
 * link. The token carrying that value is `--ioc-accent-on-ink`. A token name
 * states an intention; only the rendered page says which token won.
 *
 * The quad's other two marks follow the same measurement: its green moves from
 * the pack's #3DD68C to the live #3FDBA0 (`--ioc-on-inverse-green`) and its
 * purple from #B388F5 to #BE95FF (`--ioc-on-inverse-purple`). */
:root {
  --halo: #0001FF;
  --halo-600: #0000C4;
  --halo-4: #33B1FF;
  --halo-50: #E8E8FF;
  --acc: #0001FF;
  --acc-600: #0000C4;
  --acc-dk: #33B1FF;
  --acc-wash: #E8E8FF;
}

/* The two section accents the pack redefines per page family, matched to the
 * live site's own family tokens rather than left at the pack's purple and
 * green. The selectors are the pack's. */
body[data-section="academy"] {
  --acc: #6929C4;
  --acc-600: #55209C;
}
body[data-section="talents"] {
  --acc: #227758;
  --acc-600: #145F40;
}


/* -- The enquiry form wears the pack's form CSS, measured role by role --------
 * The pack authored `.form > .fg > label.fl + input`; the CMS emits
 * `form.ioc-form > .ioc-form-grid > .ioc-field > label + input`, and the form
 * flow is CG-gated so neither markup moves. The selector alias in
 * build-pack-layer.mjs already carries most of the pack's form rules across.
 * What follows is what a role-by-role comparison of the two rendered forms
 * still showed apart, each value copied from the pack's own rule.
 *
 * EVERY RULE BELOW IS SCOPED TO `.eq`, the pack's enquiry container, which
 * only this band renders. Three other routes — /contact, /talk-to-infoc and
 * /industries — mount the same `.ioc-form` markup and are still on the old
 * design; unscoped, these corrections would have restyled their forms too,
 * which is not what comparing THIS band against the pack asked for.
 *
 * Placed after the generated layer because several of these lose to v6's
 * `body.ioc-site .ioc-field input` at (0,2,2), which outranks the pack's own
 * element selectors at (0,1,2) — the reason the textarea kept the kit's
 * 12px/16px padding while the text inputs took the pack's 12px/13px. */

/* The pack's form is block flow and spaces itself with `.fg{margin-bottom:19px}`.
 * The kit's is a flex column with a 22px gap, which stacked ON TOP of those
 * margins: measured 726px against the pack's 663px. */
body.ioc-site .eq form.ioc-form,
body.ioc-site .eq form.ioc-form > div {
  display: block;
}

/* `input[type=text],input[type=email],input[type=tel],textarea` — the pack's
 * one rule for every text control, restated on the kit's vocabulary. */
body.ioc-site .eq .ioc-field input[type='text'],
body.ioc-site .eq .ioc-field input[type='email'],
body.ioc-site .eq .ioc-field input[type='tel'],
body.ioc-site .eq .ioc-field textarea {
  padding: 12px 13px;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  font: 400 14.5px/1.5 var(--disp);
  color: var(--t1);
  background: var(--paper);
}
body.ioc-site .eq .ioc-field textarea {
  min-height: 92px;
  resize: vertical;
}
body.ioc-site .eq .ioc-field input:focus,
body.ioc-site .eq .ioc-field textarea:focus {
  outline: 2px solid var(--halo);
  outline-offset: -1px;
  border-color: var(--halo);
}

/* The four choices are a TABLE in the pack: the rule runs top and left on the
 * group, right and bottom on each cell, and nothing carries a ground. The kit
 * draws each choice as a white tile with its own full border. */
body.ioc-site .eq .ioc-choicegroup:not(.ioc-consent) .ioc-choices {
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  background: none;
}
body.ioc-site .eq .ioc-choicegroup:not(.ioc-consent) .ioc-choice {
  padding: 12px 13px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: none;
  gap: 9px;
  font: 500 14px/1 var(--disp);
  color: var(--t2);
}
body.ioc-site .eq .ioc-choicegroup:not(.ioc-consent) .ioc-choice:hover {
  background: var(--wash);
}
body.ioc-site .eq .ioc-choicegroup .ioc-choice input {
  accent-color: var(--halo);
  margin: 0;
}

/* The pack puts name and email side by side and every other control full
 * width. The kit's grid is two columns throughout, which left the phone in a
 * half column. Keyed on the control's own type rather than its position, so
 * re-ordering the form cannot silently re-shape it. */
body.ioc-site .eq .ioc-form-grid > .ioc-field:has(input[type='tel']) {
  grid-column: 1 / -1;
}

/* The required mark is the pack's superscript. The kit styles `.req` as a
 * small-caps label — uppercase, 1.3px tracking, its own left margin — which
 * beside a 13px field label reads as a second word rather than a mark. */
body.ioc-site .eq .ioc-field > label .req,
body.ioc-site .eq .ioc-choicegroup legend .req {
  margin: 0;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--halo);
}

/* `.form .btn{width:100%}` with the pack's own line box: its `.btn` sets
 * `font:600 14px/1`, and the site-wide button reset restores the UA line
 * height, which this band must not take. */
body.ioc-site .eq .ioc-form .btn {
  width: 100%;
  justify-content: center;
  line-height: 1;
}

/* The closing note runs the width of the form. The kit clamps it to `66ch`,
 * which measured 508px against the form's 552px and broke the line where the
 * pack does not. `.form__foot` sets a size, a colour and a top margin, and no
 * measure at all — the form's own width is the measure. */
body.ioc-site .eq .ioc-form .ioc-privacy {
  max-width: none;
}

/* MARGIN COLLAPSE, which a grid does not do. In the pack the message group's
 * 19px bottom margin and the consent's 20px top margin collapse to 20px. The
 * kit lays the same controls out as grid items, where adjoining margins ADD:
 * 39px, and the form stood 17px taller than the pack for that one reason.
 * Dropping the bottom margin of whatever precedes the consent reproduces the
 * collapsed result exactly, and keys on the consent rather than on a position,
 * so re-ordering the form cannot quietly restore the gap. */
body.ioc-site .eq .ioc-form-grid > *:has(+ .ioc-choicegroup.ioc-consent) {
  margin-bottom: 0;
}


/* -- One wordmark for the whole site ----------------------------------------
 * OWNER-REPORTED: the logo must read the same everywhere it appears as it does
 * on the home page.
 *
 * MEASURED, three places and two different marks:
 *   home + every section page, masthead   `.wm`          Figtree 800, tracking
 *                                                        normal, 31px
 *   every route, MOBILE DRAWER            `.infoc-logo`  Michroma 400, .11em
 *                                                        tracking, a .063em
 *                                                        text-stroke and
 *                                                        per-letter kerning
 *   /reach/* campaign header AND footer   `.infoc-logo`  the same Michroma mark
 *
 * So the old lockup was not only on the campaign landers — it was one tap away
 * on every page of the site, because the drawer never moved to the new mark.
 * The pack has no Michroma: `--disp` is Figtree, and CMS-D-066 reserves
 * Michroma for the INFOC wordmark in the ADMIN, which is a different surface.
 *
 * WHAT THIS SETS AND WHAT IT DELIBERATELY DOES NOT. It sets the identity —
 * typeface, weight, tracking, the stroke and the per-letter kerning that only
 * Michroma needed. It does NOT set font-size or colour: the drawer, the
 * campaign bar and the campaign footer each size and colour their brand for
 * their own context (17px dark in the campaign bar, white on the dark footer),
 * and forcing the masthead's 31px into a compact campaign bar would break the
 * bar rather than match the home page. If exact size parity is wanted too,
 * that is a per-context number and belongs in a follow-up. */
body.ioc-site .infoc-logo {
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: normal;
  -webkit-text-stroke: 0;
  padding-bottom: 0;
  align-items: center;
}
/* The lockup splits INFOC into per-letter spans and pulls the first two
 * together — a correction for Michroma's sidebearings that reads as a fault in
 * any other face. */
body.ioc-site .infoc-logo .g {
  margin-right: 0;
}

/* -- An unfilled note must not reserve space ---------------------------------
 * OWNER-DIRECTED: the cross-section band's mono footline ("The core is the top
 * stratum ...") comes off the home page. The words are content and left with
 * the store; this is the form half of the same change.
 *
 * pack-layer-stack renders `<p class="st__foot">[[text:note_01]]</p>`
 * unconditionally, and `note_01` legitimately defaults to '' — so emptying the
 * slot leaves an empty paragraph still carrying `margin:20px 0 0` plus its own
 * line box. Written as a general guard rather than a one-page override: any
 * block whose optional footline is unfilled should collapse, not leave a gap,
 * and the alternative (deleting the <p> from the variant) would remove an
 * editable slot from every future page to fix one page's copy. */
body.ioc-site .st__foot:empty {
  display: none;
}

/* -- The closing quad lights its column on hover ------------------------------
 * OWNER-REPORTED, measured against www.infoc.com (2026-09-09). Live's V6 band
 * keeps a 3px rule under the four routes, one segment per family at opacity 0,
 * and lights the segment of whichever cell is hovered or focused - solutions
 * in house blue, marketplace, talents and academy each in their own colour,
 * with a 140ms linear fade (site.css?v=fa5676109868, 36 route-rule rules).
 *
 * The pack has none of this: `.qd__i--lead{border-bottom:2px solid var(--acc)}`
 * is a permanent underline on the lead cell alone, and the other three never
 * respond. Measured here at rest and on hover: identical, every cell.
 *
 * Restated in the pack's own vocabulary rather than transplanting V6's grid
 * rule: each `.qd__i` already carries `--qa`, the colour its eyebrow, icon and
 * link read, so the accent is a `::after` in `var(--qa)` and inherits the
 * column's colour without a second source of truth. The lead's static
 * underline goes, because live has no static state - the lead lights on hover
 * like the others. `:focus-within`, not `:focus-visible` on the cell: the
 * cell is a div, the focusable thing is the link inside it, and live lights
 * on keyboard focus too. Placed after the generated layer so the lead's
 * (0,2,1) override wins on source order. */
body.ioc-site .qd__i {
  position: relative;
}
body.ioc-site .qd__i::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--qa, var(--halo-4));
  /* A WIPE, NOT A FADE, because the pack's motion rule allows exactly one
     animated property. This bar used to sit at `opacity:0` and transition
     `opacity` — which the rule forbids by name, and which left this file's
     own int spec red on main from a6b22a32 onward. `transform` says the same
     thing and is the one property the rule permits: the bar is fully opaque
     and scaled to nothing, so where frames never advance it stays at
     scaleX(0) — absent, exactly as the un-hovered state should be, and never
     a half-drawn line over a cell that is not hovered. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 140ms linear;
  pointer-events: none;
}
body.ioc-site .qd__i:hover::after,
body.ioc-site .qd__i:focus-within::after {
  transform: scaleX(1);
}
body.ioc-site .qd__i--lead {
  border-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  body.ioc-site .qd__i::after {
    transition: none;
  }
}

/* -- The sector grid is a set of destinations --------------------------------
 * OWNER-REPORTED: the industries band "not good". Measured: structurally it
 * matched the pack exactly - 8 cells, 4 x 2 at 1440, all icons and lines
 * present - so nothing was broken. What was wrong is that seven of the eight
 * cells went nowhere. Only the invitation linked out, while the pack gives
 * `.ind li:active` the same tap animation it gives `.mh__s` and `.pf__card`,
 * both of which ARE links: the interaction was styled and never wired.
 *
 * The variant now wraps each sector in an anchor. These rules make the anchor
 * FILL its cell, so the whole tile is the target rather than the title alone,
 * mirroring what the pack already does for `.ind__ask a`.
 *
 * Scoped `:not(.ind__ask)` throughout: the invitation cell keeps the padding,
 * ground and halo colour the pack authored for it, and only the seven sectors
 * take these. `color:inherit` so the title stays --beacon and the line --t3
 * rather than becoming link blue - the tile reads as a tile, not a list of
 * links.
 *
 * Hover and focus-within take `--wash2`, the pack's own idiom for this band
 * (`.ind__ask:hover`), and the title takes the accent the way `.mh__ddi a:hover`
 * does. focus-visible gets a real ring: these cells were not focusable before,
 * and adding a tab stop without a visible indicator would trade one defect for
 * a worse one (WCAG 2.4.7). */
body.ioc-site .ind li:not(.ind__ask):has(> a) {
  padding: 0;
}
body.ioc-site .ind li:not(.ind__ask) > a {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 20px 22px 22px;
  color: inherit;
  text-decoration: none;
  /* No transition. The hover state here is a BACKGROUND wash, and the pack's
     motion rule forbids transitioning background outright — there is no
     transform that says the same thing, so the wash lands instantly rather
     than being animated by a property the rule bans. This was the second of
     the two declarations that left this file's int spec red on main (from
     6e7e0dc8); the wash itself is unchanged. */
}
body.ioc-site .ind li:not(.ind__ask):has(> a):hover,
body.ioc-site .ind li:not(.ind__ask):has(> a):focus-within {
  background: var(--wash2);
}
body.ioc-site .ind li:not(.ind__ask):has(> a):hover .ind__h b,
body.ioc-site .ind li:not(.ind__ask):has(> a):focus-within .ind__h b {
  color: var(--halo);
}
body.ioc-site .ind li:not(.ind__ask) > a:focus-visible {
  outline: 2px solid var(--halo);
  outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
  body.ioc-site .ind li:not(.ind__ask) > a {
    transition: none;
  }
}

/* -- The master mark is artwork, so it is sized as artwork -----------------
 * The masthead and footer now carry the outlined master (design/brand, the
 * Figtree rounded cut, 3661 x 1127 = 3.248:1) instead of live letters. The
 * pack's .wm still sets font-size:31px and a gap for letters it no longer
 * holds; neither touches an <img>, so these rules state the box directly.
 *
 * WIDTH IS THE ONLY SIZE SET. height:auto lets the drawing's own ratio fix the
 * box. A fixed height beside a capped width is how a lockup gets squashed with
 * nothing visibly wrong in a screenshot, so there is no fixed height here, and
 * flex:none on the link and the image keeps a crowded masthead row from
 * shrinking the mark.
 *
 * Sizes are read as cap height (cap = 0.621 of the lockup's height): masthead
 * 120px = 22.9px cap, holding the weight the 31px live wordmark had; footer
 * 150px = 28.7px cap; phones 110px = 21.0px cap, just above the comp's 20px
 * digital minimum, below which the knot's gaps close. */
body.ioc-site .mh .wm,
body.ioc-site .ft__wm {
  flex: none;
}
body.ioc-site .wm__lockup {
  display: block;
  flex: none;
  width: 120px;
  height: auto;
}
/* OWNER-DIRECTED 2026-09-11: "follow header logo size to be footer logo size
 * too". The footer used to draw the mark at 150px against the masthead's 120px
 * — a quarter larger on the part of the page that should recede. There is now
 * ONE size, so the two marks are the same drawing at the same width, and the
 * footer override is gone rather than restated at 120 (a rule that only repeats
 * the base is a second place to change).
 *
 * The narrow-screen step moves with it. It was scoped `.mh .wm__lockup`, so at
 * =<560px the masthead dropped to 110 while the footer stayed at 120 — the same
 * mismatch this removes, just inverted. Dropping `.mh` applies it to both. */
@media (max-width: 560px) {
  body.ioc-site .wm__lockup {
    width: 110px;
  }
}


/* -- The pack's bands sit on the SITE's spine, not the pack's own ------------
 * OWNER-DIRECTED 2026-09-11, verbatim: "Box width 1360px, Padding 32px,
 * Content starts at x = 64 — follow this for all infoc.com and infoc.in pages".
 *
 * The pack ships its own narrower spine: `.wrap{max-width:1240px;padding:0
 * var(--pad)}` with `--pad:clamp(20px,4vw,64px)`, scoped under the V7 variant
 * ids. Every OTHER page on this site uses the site tokens — `--ioc-maxw` (the
 * body narrows :root's 1584px to 1360px) and `--ioc-gutter` (32px) — so the
 * home page was the only route on a 1240px box while the other 27 were on
 * 1360px. Measured at 1425px viewport: content began at x150 on the home page
 * and x64 everywhere else, an 86px jog a visitor meets on their first click.
 *
 * FIVE CONTAINERS CARRY THAT SPINE, not one. `.wrap` is the obvious one, but
 * the masthead uses `.mh__in`, the utility bar `.ub__in`, the mega panels
 * `.mm__in`, and the credential strip `.cs__g`. Moving `.wrap` ALONE was tried
 * first and is worse than doing nothing: the logo stayed at x150 while the
 * headline moved to x64, so the chrome and the content it sits above no longer
 * shared an edge. All five move together or none do.
 *
 * WHY TOKENS AND NOT THE LITERALS the owner quoted: 1360/32 ARE
 * `--ioc-maxw`/`--ioc-gutter` at every width this site renders. Restating them
 * as numbers would fork the spine the moment either token moves, which is the
 * drift this rule exists to remove.
 *
 * SPECIFICITY, and why this sits at the END of the authored region: the pack
 * rule is `body.ioc-site :where(...) .wrap` — `:where()` contributes ZERO, so
 * it grades (0,2,1). This selector grades the same, and `:is()` takes the
 * highest of its arguments, which is a class. Equal specificity means ORDER
 * decides, and the generated layer is restated above on every build — so a
 * correction placed anywhere above it loses the tie. It is also why the same
 * rule injected into `<head>` during verification did nothing: this sheet
 * loads in BODY flow, after anything in the document head.
 *
 * MEASURED after, at three widths, with zero horizontal overflow at each:
 * 1425 -> box 1360, padding 32, logo AND headline both x64, nothing left at
 * 1240; 1265 -> x32; 375 -> x32 (the gutter becomes 32px where the pack's
 * clamp gave 20px, which is what every other page already does on a phone). */
body.ioc-site :is(.wrap, .ub__in, .mh__in, .mm__in, .cs__g) {
  max-width: var(--ioc-maxw);
  padding-inline: var(--ioc-gutter);
}


/* -- The mega panel's items keep their own layout -------------------------
 * OWNER-REPORTED: "Where to start icons not aligned properly". They were not:
 * every mega-panel icon sat 12px right of its own column heading — measured
 * "TRADE & SUPPLY" at x388 with its icons at x400, "MAKE & BUILD" at x724 with
 * icons at x736.
 *
 * NOT THE SPINE CHANGE ABOVE, checked before anything else: the offset is
 * EXACTLY 12px at the new 1360 box and at the old 1240 one, so it predates it.
 *
 * THE CAUSE IS A LEAK, and it is the two-way pack/kit leak class CMS-D-221
 * already records. `body.ioc-site .mh__nav a` styles the TOP-LEVEL nav pills
 * ("Solutions", "Industries"): `display:inline-flex; padding:9px 12px;
 * border-radius:3px`. The panel's items are also `<a>` elements, and they are
 * nested INSIDE `.mh__nav`, so that selector matches them too — and it OUTRANKS
 * the panel's own rule, (0,2,2) against `.mm__it`'s (0,2,1). Specificity, not
 * order, so the generated layer cannot win this by being restated later.
 *
 * TWO things broke, and the second is the one a screenshot does not show:
 *   · `padding-left:0` became `12px` — the visible misalignment.
 *   · `display:grid` became `inline-flex`, which makes the pack's own
 *     `grid-template-columns:22px minmax(0,1fr) 14px` INERT. The icon column
 *     and the trailing-arrow column stop existing, so nothing holds an icon of
 *     a different width on the same edge, and `gap:11px` collapsed to 5px.
 *
 * Restating the pack's values at (0,3,1) beats the leak without touching the
 * generated layer or the nav-pill rule other elements still need. The ≤1120px
 * padding is restated with it: this rule outranks the pack's media rule too, so
 * omitting it would silently drop the panel's mobile padding.
 *
 * MEASURED after: display grid, padding-left 0, gap 11px, and every icon flush
 * with its heading — x388 and x724, offset 0. */
body.ioc-site .mh__nav .mm__it {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  gap: 11px;
  align-items: start;
  padding: 9px 8px 9px 0;
}


/* -- The campaign chrome wears the SAME mark as the rest of the site --------
 * OWNER-REPORTED: "why reach pages use different infoc logo, fix once as site
 * logo has to be one". They did. The campaign-v2 chrome (CMS-D-172) predates
 * the master mark and set the wordmark as LIVE TYPE — `.infoc-logo`, five
 * `<span class="g">` letters in Figtree 800 at 17px, 54px wide, with NO KNOT —
 * while every other surface drew the 120px outlined lockup. The brand kit's own
 * DO NOT list forbids exactly that ("set the wordmark as live Syncopate — the
 * redrawn F would revert"), and it did revert: live type cannot draw the
 * shortened-arm F or the trefoil.
 *
 * Fixed at the SOURCE — `gen-campaign-v2.mjs` emits the mark now, and the two
 * chrome variants already spliced into the owned manifest (B-20-V05 header,
 * B-20-V06 footer) were brought into line with it. This rule only sizes what
 * that markup draws: the light mark on the white header, the reversed one on
 * the black footer, both at the one site size the masthead and footer use.
 *
 * `height: auto` with a width, not the 120x37 attributes alone: the attributes
 * set the intrinsic ratio for layout, and this keeps the drawing on it if the
 * lockup's own box changes again the way it just did (3661 -> 3732). */
body.ioc-site .cv2-brand .cv2-lockup {
  display: block;
  width: 120px;
  height: auto;
}

@media (max-width: 1120px) {
  body.ioc-site .mh__nav .mm__it {
    padding: 9px 16px;
  }
}