/* GENERATED by scripts/copy-render-kit-runtime.mjs — do not edit by hand. * The public site sheet: the canonical CMS-D-054 kit, then the correction * layer that must outrank it, then forms, then slider, then the V6 delta. Order is load-bearing; * see the note in that script. Each part is also served standalone for the * admin preview routes. */ /* Generated from the canonical CMS-D-054 stylesheet; only the remote font transport is replaced. */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/manrope-latin.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2')} @font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/michroma-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; --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 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 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-g50)} .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-g60)} .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} .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