/* Stratum Seven, 2026 rebuild.
   Note: rules are unscoped. The preview wrapped each page in #home / #about and
   several fixes were scoped to those ids; WordPress has no such wrapper, so those
   rules did nothing until the scope was removed.
   Note: the preview's .page show/hide rules are deliberately absent. WordPress puts
   "page" on the body element, and those rules hid every page on the site.
   Generated from the approved preview. The tokens at the top are overridable
   from Appearance > Customize > Design. */

:root { --ink:#08090b; --paper:#f5f6f7; --white:#fff; --line:#d5d8dc; --muted:#4e5863; --red:#e31c2b; --red-dark:#bb1220; --display:"Barlow Condensed",sans-serif; --sans:Inter,Arial,sans-serif; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.55; }
    a { color:inherit; text-decoration:none; }
    button,input,textarea,select { font:inherit; }
    .shell { min-height:100vh; }
    .site-header { position:sticky; top:0; z-index:10; height:78px; background:rgba(8,9,11,.97); color:#fff; border-bottom:1px solid #303238; }
    .site-header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; height:100%; width:min(var(--wrap,1240px),calc(100% - 40px)); margin:auto; }
    .brand img { display:block; width:245px; max-width:44vw; height:52px; object-fit:contain; object-position:left center; }
    .nav { display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:.06em; }
    .nav a { padding:8px 0; color:#d7d9dc; }
    .nav a.active,.nav a:hover { color:#fff; }
    .nav a.active { border-bottom:2px solid var(--red); }
    .button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:13px 18px; border:1px solid transparent; background:var(--red); color:#fff; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
    .button:hover { background:var(--red-dark); }
    .button.ghost { background:transparent; border-color:#aab0b8; color:var(--ink); }
    .button.ghost:hover { border-color:var(--ink); background:var(--ink); color:#fff; }
    .wrap { width:min(var(--wrap,1240px),calc(100% - 40px)); margin:auto; }
    .eyebrow { margin:0 0 15px; color:var(--red); font-family:var(--display); font-size:16px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
    h1,h2,h3,p { margin-top:0; }
    h1,h2,h3 { font-family:var(--display); font-weight:800; letter-spacing:0; line-height:.94; }
    h1 { max-width:760px; margin-bottom:24px; font-size:clamp(52px,6.3vw,94px); }
    h2 { margin-bottom:16px; font-size:clamp(42px,4.7vw,70px); }
    h3 { font-size:28px; }
    .lede { max-width:610px; color:#303943; font-size:18px; font-weight:600; }
    .home-hero { padding:clamp(32px,4vw,48px) 0 48px; background:var(--white); }
    .hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,6vw,100px); align-items:center; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
    /* The hero art now carries the video, so the box takes the clip's own 600x338
       ratio: it fills exactly, with nothing stretched and nothing cropped. */
    /* The shape the still occupied: the clip is cropped to it at encode time, so
       nothing is stretched and no pixels are downloaded that are never shown. */
    .hero-art { position:relative; aspect-ratio:564 / 454; overflow:hidden; background:var(--ink); }
    .hero-art img,
    .hero-art .hero-video { display:block; width:100%; height:100%; object-fit:cover; opacity:.82; mix-blend-mode:screen; }
    .hero-art .art-label { position:absolute; left:20px; bottom:18px; padding:8px 10px; background:var(--red); color:#fff; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
    .proof-strip { display:grid; grid-template-columns:repeat(3,1fr); max-width:1240px; margin:0 auto; background:var(--ink); box-shadow:0 0 0 100vmax var(--ink); clip-path:inset(0 -100vmax); color:#fff; }
    .proof-strip div { display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center; padding:1rem clamp(1rem,2.5vw,2rem); border-right:1px solid rgba(255,255,255,.16); }
    .proof-strip div:last-child { border:0; }
    .proof-strip strong { display:block; color:var(--red); font-family:var(--display); font-size:2.25rem; line-height:1; }
    .proof-strip span { color:rgba(255,255,255,.82); font-weight:800; }
    .section { padding:clamp(68px,9vw,136px) 0; }
    .section.white { background:var(--white); }
    .home-clarity h2 { max-width:760px; }
    .clarity-copy { max-width:790px; margin-top:24px; }
    .clarity-copy p { color:var(--muted); font-size:17px; }
    .clarity-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.9fr); gap:clamp(36px,6vw,100px); align-items:center; }
    .clarity-art { min-height:420px; overflow:hidden; background:var(--ink); }
    .clarity-art img { display:block; width:100%; height:100%; min-height:360px; object-fit:cover; }
    .leverage-map { position:relative; display:grid; grid-template-rows:auto 1fr auto; gap:18px; padding:24px; color:#fff; background:linear-gradient(145deg,#111922,#08090b 72%); }
    .leverage-map figcaption { display:flex; justify-content:space-between; gap:16px; color:#c8d0d8; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .leverage-map figcaption span:last-child { color:var(--red); }
    .map-grid { display:grid; grid-template-columns:104px minmax(0,1fr); gap:20px; align-items:stretch; min-height:270px; }
    .map-inputs { display:grid; align-content:center; gap:12px; }
    .map-input { position:relative; padding:11px 10px; border:1px solid #50606e; background:#141e28; color:#e8edf2; font-size:11px; font-weight:800; }
    .map-input::after { position:absolute; top:50%; right:-21px; width:20px; border-top:1px solid #697784; content:""; }
    .map-flow { position:relative; display:grid; grid-template-rows:auto 1fr auto; gap:13px; min-width:0; padding:16px; border:1px solid #3c4a56; background:#0d151d; }
    .map-flow::before { position:absolute; top:50%; right:16px; left:0; border-top:1px solid #697784; content:""; }
    .map-flow::after { position:absolute; top:calc(50% - 4px); right:14px; border:5px solid transparent; border-right:0; border-left-color:var(--red); content:""; }
    .map-lane { position:relative; z-index:1; display:block; width:max-content; padding:4px 7px; background:#0d151d; color:#aeb9c3; font-size:10px; font-weight:700; }
    .map-lane:nth-child(2) { align-self:center; justify-self:center; }
    .map-lane:nth-child(3) { align-self:end; justify-self:end; }
    .map-bottleneck { z-index:2; display:grid; place-items:center; width:112px; height:112px; margin:auto; border:2px solid var(--red); background:#321016; box-shadow:0 0 0 10px rgba(227,28,43,.09); }
    .map-bottleneck span { width:auto; color:#fff; font-family:var(--display); font-size:25px; font-weight:800; line-height:.9; text-align:center; transform:none; }
    .map-outcome { position:absolute; right:16px; bottom:16px; left:16px; z-index:3; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; padding:13px 14px; border-left:3px solid var(--red); background:#202b35; }
    .map-outcome strong { color:#fff; font-family:var(--display); font-size:25px; line-height:.95; }
    .map-outcome span { max-width:185px; color:#d0d7dc; font-size:10px; font-weight:700; line-height:1.35; }
    .map-key { display:flex; gap:18px; padding-top:15px; border-top:1px solid rgba(255,255,255,.16); color:#bec8d0; font-size:10px; font-weight:700; }
    .map-key span::before { display:inline-block; width:8px; height:8px; margin-right:7px; background:#697784; content:""; }
    .map-key span:last-child::before { background:var(--red); }
    .split { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(35px,8vw,130px); align-items:center; }
    .split > p { color:var(--muted); font-size:17px; }
    .workflow { margin-top:38px; padding:24px; border:1px solid var(--line); background:#f8f9fa; }
    .workflow-head { display:flex; justify-content:space-between; gap:20px; margin-bottom:22px; font-family:var(--display); font-size:21px; font-weight:800; }
    .workflow-track { display:grid; grid-template-columns:1fr 42px 1fr 42px 1fr; align-items:stretch; }
    .stage { display:flex; flex-direction:column; min-height:174px; height:100%; padding:17px; border:1px solid var(--line); background:var(--white); }
    .stage .number { display:block; margin-bottom:28px; color:var(--red); font-family:var(--display); font-size:20px; font-weight:800; }
    .stage strong { display:block; font-family:var(--display); font-size:28px; line-height:.95; }
    .stage p { margin:9px 0 0; color:var(--muted); font-size:13px; }
    .arrow { position:relative; height:2px; background:var(--red); }
    .arrow:after { position:absolute; top:-5px; right:-1px; border:6px solid transparent; border-left-color:var(--red); content:""; }
    .quote { padding:clamp(32px,5vw,70px) 0; background:#f0f2f3; }
    .quote-inner { display:grid; grid-template-columns:160px 1fr; gap:clamp(20px,4vw,65px); align-items:center; width:min(100% - 40px,1240px); margin:0 auto; }
    .quote img { width:140px; height:140px; object-fit:cover; filter:grayscale(1); }
    .quote blockquote { margin:0; }
    .quote p { max-width:none; margin-bottom:15px; color:var(--ink); font-family:var(--display); font-size:clamp(35px,4.2vw,62px); font-weight:800; line-height:.94; }
    .quote cite { color:var(--muted); font-size:13px; font-style:normal; font-weight:700; }
    .standards { padding:clamp(68px,9vw,126px) 0; background:var(--white); }
    .standards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:42px; border:1px solid var(--line); background:var(--line); }
    .standard { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-content:start; padding:24px; background:var(--white); }
    .standard-number { grid-column:1; grid-row:1; margin:0; color:var(--red); font-family:var(--display); font-size:22px; font-weight:800; line-height:1; }
    .standard h3 { grid-column:2; margin:0; }
    .standard p { grid-column:1 / -1; margin:16px 0 0; color:var(--muted); font-size:14px; }
    .standard p strong { color:var(--ink); }
    .outcomes { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:42px; background:var(--line); border:1px solid var(--line); }
    .outcomes article { min-height:200px; padding:26px; background:#fff; }
    .outcomes strong { color:var(--red); font-family:var(--display); font-size:18px; }
    .outcomes p { margin:10px 0 0; color:var(--muted); font-size:14px; }
    .examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:44px; border:1px solid var(--line); background:var(--line); }
    .example { min-height:246px; padding:28px; background:var(--white); }
    .example-number { display:block; margin-bottom:46px; color:var(--red); font-family:var(--display); font-size:21px; font-weight:800; }
    .example h3 { margin-bottom:10px; }
    .example p { max-width:470px; margin-bottom:16px; color:var(--muted); font-size:14px; }
    .example .possible-move { color:var(--ink); font-size:12px; font-weight:800; }
    .engines { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; max-width:1240px; margin:0 auto; border-top:clamp(3rem,5vw,4rem) solid var(--ink); background:var(--ink); box-shadow:0 0 0 100vmax var(--ink); clip-path:inset(0 -100vmax); color:#fff; }
    .engines article { padding:clamp(2.5rem,6vw,5rem); background:linear-gradient(135deg,rgba(215,25,32,.18),rgba(255,255,255,.03)),var(--ink); }
    .engines h2 { color:#fff; }
    .engines p:not(.eyebrow) { color:rgba(255,255,255,.72); }
    .cta-band { padding:clamp(55px,7vw,95px) 0; background:var(--ink); color:#fff; }
    .cta-band .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px; align-items:center; }
    .cta-band h2 { max-width:780px; margin:0; }
    .cta-band .wrap > div { flex:1 1 560px; }
    .cta-band p { max-width:70ch; margin:15px 0 0; color:#c4c8ce; }
    .cta-band .eyebrow { color:var(--red); }
    .next-areas { background:#eef0f2; }
    .next-cta { border-top:1px solid #303238; }
    .page-hero { padding:clamp(65px,8vw,115px) 0 60px; background:var(--white); }
    .page-hero .lede { font-size:19px; }
    .form-section { padding:clamp(48px,7vw,86px) 0; background:#e9edf0; }
    .contact-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(35px,8vw,115px); }
    .contact-notes { display:grid; gap:0; }
    .contact-notes .eyebrow { margin-bottom:2px; }
    .note { margin-top:22px; padding-top:14px; border-top:2px solid var(--red); }
    .note strong { display:block; margin-bottom:5px; font-family:var(--display); font-size:25px; }
    .note p { margin:0; color:var(--muted); font-size:14px; }
    .contact-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.75fr); gap:clamp(36px,7vw,112px); align-items:start; }
    .contact-steps { display:grid; gap:0; }
    .contact-step { display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); }
    .contact-step:last-child { border-bottom:0; }
    .contact-step b { color:var(--red); font-family:var(--display); font-size:21px; line-height:1.05; }
    .contact-step strong { display:block; margin-bottom:3px; font-family:var(--display); font-size:22px; line-height:1; }
    .contact-step p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
    .form-section form { width:min(100%,900px); margin:0 auto; }
    .contact-layout { display:block; }
    form { padding:clamp(25px,4vw,48px); background:#fff; border:1px solid #cbd0d6; box-shadow:0 18px 46px rgba(8,9,11,.10); }
    .form-top { display:flex; justify-content:space-between; gap:15px; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--line); }
    .form-top strong { font-family:var(--display); font-size:30px; }
    .form-top span { color:var(--muted); font-size:12px; font-weight:700; text-align:right; }
    .fields { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
    label { display:grid; gap:7px; color:#3b434d; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    label.full { grid-column:1 / -1; }
    input,textarea,select { width:100%; padding:13px 0; border:0; border-bottom:1px solid #abb1b9; outline:0; background:transparent; color:var(--ink); }
    input:focus,textarea:focus,select:focus { border-bottom:2px solid var(--red); }
    textarea { min-height:115px; resize:vertical; }
    .form-footer { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-top:30px; }
    .form-footer small { max-width:280px; color:var(--muted); font-size:11px; }
    .form-hint { display:block; margin-top:-2px; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; }
    .form-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
    .turnstile-preview { display:flex; align-items:center; min-height:64px; margin-top:26px; padding:14px 16px; border:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:700; }
    .turnstile-preview::before { width:22px; height:22px; margin-right:10px; border:2px solid var(--red); content:""; }
    .form-footer p { margin:0; color:var(--muted); font-size:11px; }
    .form-footer p a { color:var(--ink); font-weight:800; text-decoration:underline; }
    .process-list { display:grid; margin-top:46px; border-top:1px solid var(--line); }
    .process-row { display:grid; grid-template-columns:110px minmax(190px,.8fr) 1.2fr; gap:25px; padding:24px 0; border-bottom:1px solid var(--line); }
    .process-row b { color:var(--red); font-family:var(--display); font-size:25px; }
    .process-row h3 { margin:0; }
    .process-row p { margin:0; color:var(--muted); }
    .principles { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#373a3f; }
    .principles article { min-height:260px; padding:35px; background:var(--ink); color:#fff; }
    .principles .mark { color:var(--red); font-family:var(--display); font-size:54px; line-height:1; }
    .principles p { color:#b9bec5; }
    .engagements { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:45px; }
    .engagement { display:flex; flex-direction:column; min-height:410px; padding:28px; border:1px solid var(--line); background:#fff; }
    .engagement.featured { border-color:var(--red); box-shadow:0 18px 40px rgba(8,9,11,.08); }
    .engagement .type { margin-bottom:58px; color:var(--red); font-family:var(--display); font-size:18px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .engagement h2 { margin-bottom:16px; font-size:46px; }
    .engagement p { color:var(--muted); }
    .engagement ul { margin:auto 0 24px; padding:0; list-style:none; }
    .engagement li { padding:9px 0; border-top:1px solid var(--line); font-size:13px; font-weight:700; }
    .site-footer { background:var(--ink); color:rgba(255,255,255,.7); }
    .footer-inner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(16px,4vw,48px); align-items:center; width:min(var(--wrap,1240px),calc(100% - 40px)); min-height:82px; margin:0 auto; padding:16px 0; border-top:1px solid rgba(255,255,255,.12); }
    .footer-brand { color:#fff; font-family:var(--display); font-size:24px; font-weight:800; text-transform:uppercase; }
    .footer-inner p { margin:0; font-size:12px; }
    .footer-menu { display:flex; flex-wrap:wrap; gap:19px; margin:0; padding:0; list-style:none; font-size:12px; font-weight:700; }
    .footer-menu a:hover { color:#fff; }
    .subnav { display:flex; gap:18px; align-items:center; color:#cfd3d8; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
    .subnav a:hover,.subnav a.active { color:#fff; }
    .subnav a.active { border-bottom:2px solid var(--red); }
    .page-hero.dark { background:var(--ink); color:#fff; }
    .page-hero.dark h1,.page-hero.dark .lede { color:#fff; }
    .page-hero.dark .lede { color:rgba(255,255,255,.72); }
    .utility-section { padding:clamp(68px,9vw,118px) 0; background:#fff; }
    .utility-section.wash { background:#eef0f2; }
    .utility-section.dark { background:var(--ink); color:#fff; }
    .utility-section.dark h2,.utility-section.dark h3 { color:#fff; }
    .utility-section.dark p { color:rgba(255,255,255,.72); }
    .intro-rule { max-width:790px; margin:0 0 42px; color:var(--muted); font-size:18px; }
    .trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
    .trust-grid article { min-height:210px; padding:28px; background:#fff; }
    .trust-grid strong { display:block; margin-bottom:10px; color:var(--red); font-family:var(--display); font-size:28px; }
    .trust-grid p { margin:0; color:var(--muted); font-size:14px; }
    .metric-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:42px 0; background:#383b40; }
    .metric-strip div { padding:24px; background:var(--ink); color:#fff; }
    .metric-strip strong { display:block; color:var(--red); font-family:var(--display); font-size:48px; line-height:1; }
    .metric-strip span { display:block; margin-top:7px; color:#c9cdd1; font-size:12px; font-weight:700; }
    .system-list { border-top:1px solid var(--line); }
    .system-row { display:grid; grid-template-columns:90px minmax(220px,.78fr) 1.1fr .85fr; gap:28px; padding:34px 0; border-bottom:1px solid var(--line); }
    .system-row .index { color:var(--red); font-family:var(--display); font-size:34px; font-weight:800; }
    .system-row h2 { margin:0; font-size:40px; }
    .system-row p { margin:0; color:var(--muted); font-size:14px; }
    .system-row .system-note { color:var(--ink); font-weight:700; }
    .about-hero { padding:clamp(42px,5vw,68px) 0 34px; border-bottom:1px solid var(--line); }
    .about-hero h1 { max-width:900px; margin-bottom:18px; }
    .about-hero .lede { max-width:720px; }
    .about-opening { padding:clamp(44px,6vw,78px) 0; background:var(--white); }
    .about-opening-grid { display:grid; grid-template-columns:minmax(0,760px) 180px; gap:clamp(32px,6vw,96px); align-items:start; }
    .about-opening h2 { max-width:680px; }
    .about-opening p { max-width:720px; color:var(--muted); font-size:18px; }
    .about-opening p strong { color:var(--ink); }
    .about-opening .text-link { display:inline-flex; gap:8px; align-items:center; margin-top:6px; color:var(--ink); font-size:13px; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
    .about-opening .text-link span { color:var(--red); font-size:17px; line-height:1; }
    .about-portrait { position:relative; }
    .about-portrait::before { position:absolute; top:-12px; left:-12px; width:48px; height:48px; border-top:3px solid var(--red); border-left:3px solid var(--red); content:""; }
    .about-portrait img { position:relative; display:block; width:180px; height:230px; object-fit:cover; filter:grayscale(1); }
    .about-portrait p { margin:14px 0 0; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .about-record { padding:clamp(52px,7vw,100px) 0; background:#eef0f2; }
    .about-record-head { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(35px,8vw,130px); align-items:center; margin-bottom:34px; }
    .about-record-head p { max-width:650px; margin:0; color:var(--muted); font-size:17px; }
    .about-record-grid { border-top:1px solid var(--line); }
    .about-record-item { display:grid; grid-template-columns:150px minmax(210px,.75fr) 1.2fr; gap:clamp(22px,4vw,60px); padding:28px 0; border-bottom:1px solid var(--line); }
    .about-record-item .date { color:var(--red); font-family:var(--display); font-size:26px; font-weight:800; line-height:1; }
    .about-record-item h3 { margin:0; }
    .about-record-item p { margin:0; color:var(--muted); font-size:14px; }
    .about-why { padding:clamp(52px,7vw,94px) 0; background:var(--ink); color:#fff; }
    .about-why-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(35px,8vw,130px); align-items:center; }
    .about-why h2 { color:#fff; }
    .about-why p { max-width:710px; color:rgba(255,255,255,.74); font-size:18px; }
    .about-why .contact-choice a:not(.button) { color:#fff; }
    .proof-card { display:grid; grid-template-columns:.8fr 1.2fr; gap:1px; margin-top:42px; background:var(--ink); color:#fff; }
    .proof-card > div { padding:clamp(28px,4vw,48px); }
    .proof-card h3 { color:#fff; font-size:36px; }
    .proof-card p { color:rgba(255,255,255,.72); }
    .proof-card ul { display:grid; gap:11px; margin:0; padding:0; list-style:none; }
    .proof-card li { padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.16); font-weight:700; }
    .proof-card li strong { display:block; margin-bottom:3px; color:#fff; }
    .proof-card li span { display:block; color:rgba(255,255,255,.67); font-size:13px; font-weight:500; line-height:1.45; }
    .proof-card a { display:inline-block; margin-top:26px; color:#fff; font-weight:800; text-decoration:underline; }
    .sys-intro { max-width:790px; margin:0 0 35px; color:var(--muted); font-size:18px; }
    .systems-proof { border-top:1px solid var(--line); }
    .systems-proof article { padding:clamp(32px,5vw,58px) 0; border-bottom:1px solid var(--line); }
    .systems-proof header { display:grid; grid-template-columns:88px minmax(0,1fr); gap:20px; align-items:start; margin-bottom:28px; }
    .systems-proof .index { color:var(--red); font-family:var(--display); font-size:38px; font-weight:800; line-height:1; }
    .systems-proof h2 { margin:0 0 9px; font-size:clamp(39px,4.5vw,61px); }
    .systems-proof .standfirst { margin:0; color:var(--muted); font-family:var(--display); font-size:24px; font-weight:800; line-height:1; }
    .systems-detail { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,6vw,82px); margin-left:108px; }
    .systems-detail p { color:var(--muted); }
    .systems-detail .label { margin-bottom:6px; color:var(--red); font-family:var(--display); font-size:16px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .system-proof-side { display:grid; gap:18px; align-content:start; }
    .system-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); }
    .system-metrics div { padding:18px; background:#fff; }
    .system-metrics strong { display:block; color:var(--red); font-family:var(--display); font-size:34px; line-height:1; }
    .system-metrics span { display:block; margin-top:6px; color:var(--muted); font-size:11px; font-weight:800; }
    .system-meaning { padding:22px; border-left:3px solid var(--red); background:#eef0f2; }
    .system-meaning p { margin:0; color:var(--ink); font-size:14px; font-weight:700; }
    .faq-hero { padding:clamp(46px,6vw,78px) 0 38px; }
    .faq-hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr); gap:clamp(36px,6vw,100px); align-items:center; }
    .faq-hero h1 { max-width:680px; margin-bottom:18px; }
    .faq-art { min-height:320px; overflow:hidden; background:var(--ink); }
    .faq-art img { display:block; width:100%; height:100%; min-height:320px; object-fit:cover; }
    .s7-page-faq .utility-section { padding:clamp(38px,5vw,62px) 0 clamp(72px,9vw,118px); }
    .faq-guide { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0 0 34px; background:var(--ink); }
    .faq-guide div { min-height:150px; padding:24px; background:#111216; color:#fff; }
    .faq-guide strong { display:block; margin-bottom:11px; color:var(--red); font-family:var(--display); font-size:27px; }
    .faq-guide p { margin:0; color:#c8cdd2; font-size:13px; }
    .explainer-table { width:100%; margin-top:38px; border-collapse:collapse; font-size:14px; }
    .explainer-table th,.explainer-table td { padding:18px; border:1px solid var(--line); text-align:left; vertical-align:top; }
    .explainer-table th { background:var(--ink); color:#fff; font-family:var(--display); font-size:18px; }
    .explainer-table td:first-child { color:var(--red); font-family:var(--display); font-size:22px; font-weight:800; }
    .contact-choice { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:30px; }
    .contact-choice a { color:var(--red); font-weight:800; text-decoration:underline; }
    .contact-choice .button { color:#fff; text-decoration:none; }
    .contact-choice > a:not(.button) { display:inline-flex; align-items:center; min-height:50px; }
    .s7-page-contact .page-hero { padding:clamp(40px,5vw,62px) 0 34px; }
    @media (max-width:850px) { .site-header { height:70px; } .nav { gap:13px; font-size:15px; } .nav a:nth-child(3),.nav a:nth-child(4) { display:none; } .subnav { display:none; } .hero-grid,.split,.contact-layout,.about-opening-grid,.about-record-head,.about-why-grid,.proof-card,.systems-detail,.faq-hero-grid,.contact-hero-grid { grid-template-columns:1fr; }  .faq-art,.faq-art img { min-height:270px; } .workflow-track { grid-template-columns:1fr; gap:0; } .arrow { width:2px; height:28px; margin:auto; } .arrow:after { top:auto; right:-5px; bottom:-2px; border-color:transparent; border-top-color:var(--red); } .outcomes,.principles,.engagements,.trust-grid,.metric-strip,.faq-guide { grid-template-columns:1fr; } .quote { grid-template-columns:1fr; } .quote img { width:90px; height:90px; } .proof-strip { grid-template-columns:1fr; } .proof-strip div { border-right:0; border-bottom:1px solid #393b40; } .cta-band .wrap,.footer-inner { display:block; } .cta-band .button { margin-top:26px; } .process-row,.system-row,.about-record-item { grid-template-columns:65px 1fr; } .process-row p { grid-column:2; } .system-row p,.system-row .system-note { grid-column:2; } .about-record-item p { grid-column:2; } .systems-proof header { grid-template-columns:52px 1fr; } .systems-detail { margin-left:0; } .about-portrait { margin-top:18px; } }
    @media (max-width:850px) { .examples,.standards-grid,.engines { grid-template-columns:1fr; } }
    @media (max-width:850px) { .clarity-layout { grid-template-columns:1fr; } .clarity-art,.clarity-art img { min-height:300px; } .map-grid { grid-template-columns:92px minmax(0,1fr); gap:14px; } .leverage-map { padding:18px; } .map-outcome { grid-template-columns:1fr; gap:5px; } }
    @media (max-width:520px) { .wrap { width:min(100% - 32px,1240px); } .brand img { width:205px; } .nav { display:none; } h1 { font-size:54px; } .fields { grid-template-columns:1fr; } label.full { grid-column:auto; } .form-footer { display:block; } .form-footer .button { width:100%; margin-top:18px; } }
    /* About: the portrait belongs beside the introduction, where the reader first meets
       the person, not stranded at the top of a column it cannot fill. */
    /* Landing on an anchor put the kicker underneath the sticky header. */
    .about-hero { padding-top:clamp(52px,5vw,74px); }
    .about-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:clamp(30px,5vw,72px); align-items:end; }
    .about-hero .lede { max-width:640px; }
    .about-hero-grid .about-portrait img { width:190px; height:238px; }
    .about-copy { max-width:760px; }
    .about-copy h2 { max-width:640px; }
    .about-copy p { color:var(--muted); font-size:18px; }
    .about-copy p strong { color:var(--ink); }
    @media (max-width:850px) { .about-hero-grid { grid-template-columns:1fr; align-items:start; } }
    /* Body grey was #4e5863, which reads washed out against the very heavy display
       face. One token, 31 uses, none of them on a dark ground. */
    :root { --muted:#39424c; }
    /* Full-bleed bands sat 7px wider than every .wrap on the page, so their content
       did not line up with anything above or below. Match the wrap width exactly. */
    .proof-strip, .engines { width:min(1240px,calc(100% - 40px)); max-width:none; }
    .proof-note { margin:18px 0 0; color:var(--muted); font-size:12px; font-weight:700; }
    .proof-note a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
    .system-metrics.single { grid-template-columns:1fr; }
    .quote blockquote p { text-wrap:balance; }
    /* A worked example, not a diagram of an idea: one real request going in, the steps
       nobody has to do, and the finished thing coming out. */
    /* The approved preview rendered this figure inset by the browser's default
       figure margin, which WordPress's block CSS resets away. Set it explicitly so
       it looks the same in both places rather than depending on a UA default. */
    .trace { display:grid; grid-template-columns:1fr 34px 1.12fr 34px 1fr; align-items:stretch; margin:42px 0 0; }
    .trace-step { display:flex; flex-direction:column; gap:11px; padding:clamp(18px,2vw,26px); border:1px solid var(--line); background:#fff; }
    .trace-step.mid { border-color:var(--ink); background:var(--ink); color:#fff; }
    .trace-step.out { border-color:var(--red); box-shadow:0 14px 34px rgba(8,9,11,.09); }
    .trace-label { margin:0; color:var(--red); font-family:var(--display); font-size:15px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
    .trace-step.mid .trace-label { color:#ff616b; }
    .trace-body { margin:0; font-size:15px; line-height:1.5; }
    .trace-step.in .trace-body { color:#2b333c; font-style:italic; }
    .trace-step.mid ul { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
    .trace-step.mid li { display:grid; grid-template-columns:8px 1fr; gap:11px; color:#d6dde3; font-size:13px; line-height:1.42; }
    .trace-step.mid li::before { width:8px; height:8px; margin-top:5px; background:var(--red); content:""; }
    .trace-meta { margin:auto 0 0; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
    .trace-step.mid .trace-meta { border-top-color:#333b44; color:#98a3ad; }
    .trace-arrow { align-self:center; color:var(--red); font-size:26px; font-weight:700; line-height:1; text-align:center; }
    @media (max-width:850px) { .trace { grid-template-columns:1fr; } .trace-arrow { justify-self:center; transform:rotate(90deg); padding:6px 0; } }
    /* Rhythm. Sections were padded for far more copy than they hold, so the page read
       as a series of islands with dead space between them. */
    .section, .standards, .utility-section { padding-top:clamp(52px,6vw,86px); padding-bottom:clamp(52px,6vw,86px); }
    .outcomes article, .examples .example { min-height:0; }
    .example-number { margin-bottom:20px; }
    .examples .possible-move { display:inline-block; margin:0; padding:6px 10px; background:#f2f3f5; border-left:3px solid var(--red); font-size:12px; }
    /* The arrows between the three steps sat at the top edge of the strip. */
    .workflow-track .arrow { align-self:center; }
    /* The dark band's own padding pushed its first and last cells off the page grid. */
    .proof-strip div:first-child { padding-left:0; }
    .proof-strip div:last-child { padding-right:0; }
    /* "me." was landing alone on line three. */
    .home-hero h1, h2 { text-wrap:balance; }
    /* Headline column was too narrow for the display face, so every h2 broke to three
       lines while its paragraph floated vertically centred against them. */
    /* Heading left, text right: the text lines up with the heading's first line. The
       display face carries a lot of space above its caps, so the paragraph needs a
       nudge down to sit optically level rather than mathematically level. */
    @media (min-width:851px) { .split { grid-template-columns:1.05fr .95fr; align-items:center; } }
    @media (min-width:851px) {
      /* Optical alignment, set from measured ink rather than from line boxes: the
         condensed display face carries a lot of empty space above its capitals, so
         equal box tops still render the paragraph lower than the heading. */
      .split { align-items:center; }
      /* The heading's own bottom margin counts toward its grid item, which centred it
         half that distance too high. Measured on the served page. */
      .split > h2 { margin-bottom:0; }
      .split > p { margin:0; max-width:46ch; }
      /* Bring the two columns together. The stock gutter runs to 130px, which left a
         two-line paragraph stranded against the right edge of the page. */
      .split { grid-template-columns:1.1fr 1fr; gap:clamp(30px,4vw,68px); }
    }
    /* The workflow band and the quote band were two near-identical greys meeting at a
       seam. The quote is a statement, so it takes the contrast. */
    /* Dropping the audience cards left this section a huge headline over empty space.
       It earns its place as a compact statement band, which also breaks the ground
       colour a third time on the way down. */
    /* .section.white also matches this element, so the selector needs the same
       weight to win. Unscoping from #home dropped it below that. */
    .section.home-clarity { padding:clamp(40px,4.5vw,62px) 0; background:var(--ink); }
    .home-clarity h2 { color:#fff; font-size:clamp(30px,3.1vw,44px); margin:0; }
    /* :not(.eyebrow) matters: without it this rule greys out the red kicker. */
    .home-clarity p:not(.eyebrow) { margin:0; color:rgba(255,255,255,.76); font-size:17px; }
    .home-clarity .eyebrow { color:var(--red); }
    @media (min-width:851px) { .home-clarity .split { align-items:center; } }
    /* The line under the three steps was sitting on the body ground between two
       blocks, which read as a stray band. It belongs to the white section below it. */
    .cta-note { max-width:600px; margin:20px 0 0; color:#3b444e; font-size:15px; line-height:1.55; }
    .cta-note strong { color:var(--ink); }
    .cta-band .cta-note { color:#c4c8ce; }
    .cta-band .cta-note strong { color:#fff; }
    /* Twelve rows: a problem the reader recognises, the outcome that replaces it, and
       the mechanism folded away behind a disclosure. No numbering, because the list is
       a menu and nothing about it is a sequence. */
    .helplist { margin-top:38px; border-top:1px solid var(--line); }
    .helprow { border-bottom:1px solid var(--line); }
    .hr-line,
    .helprow.head { display:grid; grid-template-columns:24px minmax(240px,.86fr) 30px 1fr; gap:0 18px; align-items:baseline; }
    .helprow.head { margin:0 -12px; padding:10px 12px; border-bottom:1px solid var(--ink); }
    .helprow.head .hr-mark::before, .helprow.head .hr-mark::after { display:none; }
    .helprow > summary { display:block; margin:0 -12px; padding:15px 12px; cursor:pointer; list-style:none; }
    .helprow > summary::-webkit-details-marker { display:none; }
    .helprow > summary:hover { background:#f4f6f7; }
    .helprow > summary:hover .hr-name { color:var(--red); }
    .helprow > summary:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
    .hr-col { color:var(--ink); font-family:var(--display); font-size:15px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .hr-mark { position:relative; width:13px; height:13px; align-self:start; margin-top:9px; }
    .hr-mark::before,
    .hr-mark::after { position:absolute; background:var(--red); content:''; }
    .hr-mark::before { top:5px; left:0; width:13px; height:3px; }
    .hr-mark::after { top:0; left:5px; width:3px; height:13px; }
    .helprow[open] .hr-mark::after { display:none; }
    .hr-name { color:var(--ink); font-family:var(--display); font-size:22px; line-height:1.15; }
    .hr-gain { color:var(--ink); font-size:17px; font-weight:600; line-height:1.45; }
    .helprow .hr-arrow { color:var(--red); font-size:22px; font-weight:700; line-height:1; text-align:center; }
    .helprow[open] > summary .hr-name { color:var(--red); }
    .hr-detail { max-width:66ch; margin:0 0 20px; padding-left:42px; color:#252c33; font-size:15px; line-height:1.55; }
    .helpgroup { margin:34px 0 6px; color:var(--red); font-family:var(--display); font-size:16px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
    @media (max-width:900px) {
      /* Three columns, not two: the arrow starts the outcome line instead of
         sitting alone between the two lines and splitting the row in half. */
      .hr-line { grid-template-columns:22px 20px 1fr; gap:5px 8px; }
      .helprow.head { display:none; }
      .hr-line .hr-mark { grid-column:1; grid-row:1; }
      .hr-line .hr-name { grid-column:2 / 4; grid-row:1; }
      .helprow .hr-arrow { grid-column:2; grid-row:2; justify-self:start; font-size:16px; line-height:1.5; }
      .hr-line .hr-gain { grid-column:3; grid-row:2; }
      .hr-detail { padding-left:36px; }
    }
    /* The line under the three steps was sitting on the body ground between two
       blocks, which read as a stray band. It belongs to the white section below it. */
    .cta-note { max-width:600px; margin:20px 0 0; color:#3b444e; font-size:15px; line-height:1.55; }
    .cta-note strong { color:var(--ink); }
    .cta-band .cta-note { color:#c4c8ce; }
    .cta-band .cta-note strong { color:#fff; }
    /* Credentials link inside the founder credit. */
    .quote cite a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
    .quote { padding:clamp(44px,5vw,68px) 0; background:var(--ink); }
    .quote p { color:#fff; }
    .quote cite { color:#9aa3ad; }
    .quote img { filter:grayscale(1) contrast(1.05); }
    /* .wrap narrows its gutter to 32px below 520px, so the bands have to follow or
       they go back out of alignment on phones. */
    @media (max-width:520px) { .proof-strip, .engines { width:min(1240px,calc(100% - 32px)); } }

/* === WORDPRESS ADAPTER =====================================================
   The preview was static markup. WordPress wraps menus in ul/li, ships a mobile
   toggle, and renders the contact form from a shortcode with its own classes.
   These rules map that markup onto the design above. Nothing here changes the
   design; it only teaches it about WordPress output. */

.nav ul { display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); margin:0; padding:0; list-style:none; }
.nav li { display:block; }
.nav .current-menu-item > a { color:#fff; border-bottom:2px solid var(--red); }

.s7-menu-toggle { display:none; position:relative; width:42px; height:34px; padding:0; border:1px solid #4a4e55; background:transparent; cursor:pointer; }
.s7-menu-toggle span[aria-hidden] { position:absolute; left:9px; right:9px; top:16px; height:2px; background:#fff; }
.s7-menu-toggle span[aria-hidden]::before,
.s7-menu-toggle span[aria-hidden]::after { position:absolute; left:0; right:0; height:2px; background:#fff; content:""; }
.s7-menu-toggle span[aria-hidden]::before { top:-7px; }
.s7-menu-toggle span[aria-hidden]::after { top:7px; }
.s7-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:850px) {
  .s7-menu-toggle { display:block; }
  .site-header { flex-wrap:wrap; height:auto; }
  .site-header .nav { display:none; flex-basis:100%; }
  .site-header.is-open .nav { display:block; padding-bottom:14px; }
  .site-header.is-open .nav ul { flex-direction:column; align-items:flex-start; gap:12px; }
  .site-header .button { padding:11px 13px; font-size:11px; }
}
@media (max-width:520px) { .site-header .nav { display:none; } .site-header.is-open .nav { display:block; } }

/* The inquiry form comes from [s7_contact_form]. Its markup predates this design,
   so it is styled here rather than rebuilt: the submit path is load-bearing. */
.s7-form-wrap { width:min(100%,900px); margin:0 auto; }
.s7-inquiry-form { display:flex; flex-direction:column; gap:20px; padding:clamp(25px,4vw,48px); border:1px solid #cbd0d6; background:#fff; box-shadow:0 18px 46px rgba(8,9,11,.10); }
.s7-inquiry-form > .s7-form-trap { display:none; }
.s7-form-row { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.s7-form-row.is-full, .s7-form-row .is-full { grid-column:1 / -1; }
.s7-field { display:grid; gap:7px; }
.s7-inquiry-form label { display:block; color:#3b434d; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.s7-inquiry-form label span { color:var(--red); }
.s7-field-hint { margin-top:-2px; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; }
.s7-form-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.s7-form-submit { display:flex; flex-wrap:wrap; justify-content:space-between; gap:15px; align-items:center; margin-top:10px; }
.s7-form-submit .button { gap:10px; }
.s7-form-submit p { max-width:420px; margin:0; color:var(--muted); font-size:11px; }
.s7-form-submit p a { color:var(--ink); font-weight:800; text-decoration:underline; }
.s7-form-verify { min-height:64px; margin-top:26px; }
.s7-form-status { margin-bottom:20px; padding:14px 16px; border-left:3px solid var(--red); background:#f2f3f5; font-weight:700; }
.s7-form-status.is-success { border-left-color:#1c7a3e; }
@media (max-width:520px) { .s7-form-row { grid-template-columns:1fr; } }

    /* EDITOR CONTENT ------------------------------------------------------------
       Every rule here is a DIRECT CHILD selector on purpose. As descendant rules
       they reached inside the shortcode blocks and re-styled their innards: an h3
       in the record grid picked up a 34px top margin and sat lower than its own
       date, and paragraphs in the dark bands took the body colour. Blocks keep
       the theme's component CSS; only loose prose is styled here. */
    .s7-content > p,
    .s7-content > h2,
    .s7-content > h3,
    .s7-content > h4,
    .s7-content > ul,
    .s7-content > ol,
    .s7-content > blockquote { max-width:34em; }
    .s7-content > *:first-child { margin-top:0; }
    .s7-content > h2 { margin:52px 0 14px; font-family:var(--display); font-size:38px; line-height:1.04; letter-spacing:-.01em; }
    .s7-content > h3 { margin:34px 0 10px; font-family:var(--display); font-size:25px; line-height:1.1; }
    .s7-content > h4 { margin:40px 0 12px; color:var(--red); font-family:var(--display); font-size:15px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .s7-content > p { margin:0 0 17px; color:var(--muted); font-size:17px; line-height:1.62; }
    .s7-content > p strong, .s7-content > ul strong { color:var(--ink); }
    /* :not(.button) or this paints red text onto the red button and the label
       disappears: the prose rule outranks .button. */
    .s7-content > p a:not(.button), .s7-content > ul a:not(.button), .s7-content > ol a:not(.button) { color:var(--red); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
    .s7-content > ul, .s7-content > ol { margin:0 0 20px; padding:0 0 0 2px; }
    .s7-content > ul { list-style:none; }
    .s7-content > ul > li { position:relative; margin-bottom:10px; padding-left:22px; color:var(--muted); font-size:17px; line-height:1.55; }
    .s7-content > ul > li::before { position:absolute; top:9px; left:0; width:8px; height:8px; background:var(--red); content:""; }
    .s7-content > ol { padding-left:22px; }
    .s7-content > ol > li { margin-bottom:10px; color:var(--muted); font-size:17px; line-height:1.55; }
    .s7-content > blockquote { margin:28px 0; padding-left:20px; border-left:3px solid var(--red); }
    .s7-content > blockquote p { color:var(--ink); font-family:var(--display); font-size:26px; line-height:1.2; }
    .s7-content > hr { margin:44px 0; border:0; border-top:1px solid var(--line); }
    .s7-content img { max-width:100%; height:auto; }
    /* Tables only ever arrive from the editor, so descendant rules are safe here. */
    .s7-content table { width:100%; margin:8px 0 26px; border-collapse:collapse; }
    .s7-content thead th { padding:10px 18px 10px 0; border-bottom:2px solid var(--ink); color:var(--ink); text-align:left; font-family:var(--display); font-size:14px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
    .s7-content tbody td { padding:17px 18px 17px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted); font-size:15px; line-height:1.55; }
    .s7-content tbody td strong { color:var(--ink); }
    .s7-content table th:last-child, .s7-content table td:last-child { padding-right:0; }
    @media (max-width:700px) {
      .s7-content thead { display:none; }
      .s7-content table, .s7-content tbody, .s7-content tr, .s7-content td { display:block; width:auto; }
      .s7-content tbody tr { padding:14px 0; border-bottom:1px solid var(--line); }
      .s7-content tbody td { padding:3px 0; border:0; }
    }
    /* A button on its own line in the body needs air; wpautop wraps it in a p. */
    .s7-content > p > .button:only-child { margin:6px 0 10px; }
    .s7-content .button span { color:#fff; font-size:15px; line-height:1; }
    .s7-content .text-link { display:inline-flex; gap:8px; align-items:center; color:var(--ink); font-size:13px; font-weight:800; text-decoration:underline; text-underline-offset:4px; }
    .s7-content .text-link span { color:var(--red); font-size:17px; line-height:1; }
    .s7-content .helplist, .s7-content .metric-strip, .s7-content .faq-list { margin-bottom:34px; }

    /* Bands that have to reach past the reading column. Same technique as the
       proof strip: paint the sides with a shadow, then clip it flat. */
    .s7-bleed { box-shadow:0 0 0 100vmax var(--bleed,var(--ink)); clip-path:inset(0 -100vmax); }
    .s7-content > .about-record { --bleed:#eef0f2; margin:40px 0 0; padding:8px 0 4px; background:#eef0f2; }
    .s7-content > .cta-band { --bleed:var(--ink); margin:52px 0 0; padding:clamp(46px,6vw,80px) 0; }
    .s7-content > .metric-strip { --bleed:var(--ink); margin:34px 0; }
    .s7-content > .s7-band-dark { --bleed:var(--ink); }
    .s7-content > .s7-band-wash { --bleed:#eef0f2; }
    .s7-content > .s7-band-white { --bleed:var(--white); }
    /* Consecutive full width bands meet flush; a white strip between two of them
       reads as a mistake. */
    .s7-content > .s7-bleed { margin:44px 0 0; }
    .s7-content > .s7-bleed + .s7-bleed { margin-top:0; }
    /* One border between two system blocks, not two. */
    .s7-content > .systems-proof + .systems-proof { border-top:0; }
    .s7-content > .s7-band-form { --bleed:#e9edf0; }
    .s7-content > .contact-steps-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(24px,4vw,52px); margin:6px 0 34px; }
    .contact-steps-row .contact-step { border-bottom:0; border-top:1px solid var(--line); padding-top:18px; }
    @media (max-width:850px) { .s7-content > .contact-steps-row { grid-template-columns:1fr; } }
    .s7-content > .sys-intro { max-width:790px; }
    /* Systems keeps its dark hero. */
    .s7-page-systems .s7-hero { background:var(--ink); }
    .s7-page-systems .s7-hero h1 { color:#fff; }
    .s7-page-systems .s7-hero .lede { color:rgba(255,255,255,.72); }
    .s7-content > .split { margin:0 0 10px; }
    .split-body p { margin:0 0 14px; color:var(--muted); font-size:17px; line-height:1.62; }
    .split-body p:last-child { margin:0; }
    .split-body p strong { color:var(--ink); }
    .utility-section.dark .split-body p { color:rgba(255,255,255,.72); }
    .utility-section.dark .split-body p strong { color:#fff; }
    .utility-section .metric-strip { margin:34px 0 0; box-shadow:none; clip-path:none; }
    .utility-section > .proof-note { margin-top:18px; }
    .s7-content > .proof-strip { --bleed:var(--ink); margin:34px 0; }
    .s7-content > .standards-grid { margin:34px 0; }
    .s7-content > .cta-band:last-child { margin-bottom:-74px; }
    .s7-content > .about-record + .cta-band { margin-top:0; }
    .cta-inner { display:flex; flex-wrap:wrap; gap:36px; align-items:center; justify-content:space-between; }
    .cta-band .contact-choice { margin:0; }
    .cta-band .contact-choice a:not(.button) { color:#fff; }
    .cta-band .contact-choice a span { color:var(--red); }
    .cta-inner > div { flex:1 1 520px; }
    .cta-band .eyebrow { margin:0 0 10px; color:var(--red); font-family:var(--display); font-size:15px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .cta-band h2 { max-width:780px; margin:0; color:#fff; }
    .cta-band p { max-width:70ch; margin:15px 0 0; color:#c4c8ce; font-size:17px; line-height:1.6; }
    .faq-list { margin-top:26px; border-top:1px solid var(--line); }
    .faq-item { border-bottom:1px solid var(--line); }
    .faq-item > summary { display:block; margin:0 -12px; padding:15px 12px; cursor:pointer; list-style:none; }
    .faq-line { display:grid; grid-template-columns:24px 1fr; gap:0 18px; align-items:baseline; }
    .faq-item > summary::-webkit-details-marker { display:none; }
    .faq-item > summary:hover { background:#f4f6f7; }
    .faq-item > summary:hover .faq-q { color:var(--red); }
    .faq-q { color:var(--ink); font-family:var(--display); font-size:22px; line-height:1.15; }
    .faq-item[open] .faq-q { color:var(--red); }
    .faq-a { max-width:66ch; margin:0 0 20px; padding-left:42px; }
    .faq-a p { margin:0; color:#252c33; font-size:15px; line-height:1.55; }
    @media (max-width:700px) {
      .s7-content > h2 { font-size:31px; }
      .faq-line { grid-template-columns:22px 1fr; gap:0 14px; }
      .faq-a { padding-left:36px; }
      .cta-inner { display:block; }
      .cta-inner .button { margin-top:26px; }
    }

    /* PAGE HERO -----------------------------------------------------------------
       The generic .page-hero padding was drawn for a hero with art beside it. On a
       page with none it left a hole above the first line of content. */
    .s7-hero { padding:clamp(44px,5.5vw,74px) 0 36px; border-bottom:1px solid var(--line); }
    .s7-hero-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(30px,5vw,72px); align-items:center; }
    .s7-hero.has-art .s7-hero-grid { grid-template-columns:minmax(0,1fr) minmax(240px,.52fr); }
    .s7-hero h1 { max-width:900px; margin:0 0 16px; }
    .s7-hero .lede { max-width:660px; margin:0; }
    .s7-hero-art { position:relative; margin:0; justify-self:end; }
    .s7-hero-art::before { position:absolute; top:-12px; left:-12px; width:48px; height:48px; border-top:3px solid var(--red); border-left:3px solid var(--red); content:""; }
    .s7-hero-art img { position:relative; display:block; width:100%; max-width:330px; height:auto; }
    .s7-page > .section { padding:46px 0 74px; }
    @media (max-width:850px) {
      .s7-hero.has-art .s7-hero-grid { grid-template-columns:1fr; }
      .s7-hero-art { justify-self:start; }
      .s7-hero-art img { max-width:220px; }
    }

    /* MOBILE HEADER AND STEPS ---------------------------------------------------
       The call to action was allowed to grow until it wrapped onto three lines and
       squeezed the menu button down to a sliver: flex was shrinking everything
       except the text. Nothing here changes the desktop view. */
    @media (max-width:850px) {
      .site-header-inner { gap:12px; }
      .s7-menu-toggle { flex:0 0 auto; width:44px; height:38px; border-color:#6a6f77; }
      .s7-menu-toggle span[aria-hidden] { left:11px; right:11px; top:18px; }
      .s7-menu-toggle:hover { border-color:#fff; background:rgba(255,255,255,.06); }
      .brand { flex:0 1 auto; min-width:0; }
      .site-header .button { flex:0 0 auto; min-height:40px; padding:9px 13px; font-size:11px; gap:6px; white-space:nowrap; }
      /* Stacked, so the first cell no longer sits against the container edge. */
      .proof-strip div:first-child { padding-left:clamp(1rem,2.5vw,2rem); }
      .proof-strip div:last-child { padding-right:clamp(1rem,2.5vw,2rem); }
    }
    @media (max-width:520px) {
      .brand img { width:158px; }
      .site-header .button { padding:8px 10px; font-size:10px; letter-spacing:.02em; }
      .proof-strip div { grid-template-columns:46px 1fr; gap:.8rem; align-items:start; }
      .proof-strip strong { font-size:2rem; }
    }