:root {
      --navy: #0B1F33;
      --navy-soft: #16324D;
      --cobalt: #2457D6;
      --cobalt-dark: #1B44AC;
      --green: #169873;
      --green-soft: #E7F4EF;
      --gold: #C7922B;
      --gold-soft: #FBF3E3;
      --ink: #111827;
      --soft: #F5F7FA;
      --border: #D9DEE7;
      --grey: #667085;
      --white: #FFFFFF;
      --invert: #E8EDF4;
      --invert-dim: #9FB2C6;
      --rule-invert: #294663;
      --desk: #E7EAEF;

      --font-head: "Archivo", "Helvetica Neue", "Helvetica", sans-serif;
      --font-body: "Source Serif 4", "Georgia", serif;
      --font-mono: "IBM Plex Mono", "Menlo", monospace;

      --fs-h1: 52px;
      --fs-h2: 30px;
      --fs-h3: 19px;
      --fs-lede: 20px;
      --fs-body: 17px;
      --fs-small: 14px;
      --fs-micro: 12px;
      --fs-rank: 44px;
      --fs-stat: 40px;
      --fs-service-num: 34px;
      --fs-edition-year: 30px;
      --fs-doc-title: 22px;
      --fs-doc-label: 13px;

      --lh-tight: 1.06;
      --lh-head: 1.16;
      --lh-body: 1.55;

      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-5: 24px;
      --sp-6: 32px;
      --sp-7: 48px;
      --sp-8: 64px;
      --sp-9: 88px;

      --section-y: var(--sp-9);
      --wrap-max: 1240px;
      --wrap-pad: var(--sp-7);
      --card-min: 232px;
      --col-min: 300px;
      --bw: 1px;
      --bw-thick: 3px;
      --r: 2px;
      --r-pill: 999px;

      --logo-h: 34px;
      --logo-h-footer: 30px;
      --logo-mark-h: 26px;
      --logo-mark-wall-h: 34px;
      --rank-rail-w: 96px;
      --search-mark-size: 10px;
      --dot-size: 7px;
      --menu-bar-w: 20px;
      --menu-bar-h: 2px;
      --checkbox-size: 16px;

      --cell-rank-w: 52px;
      --cell-tier-w: 128px;
      --cell-status-w: 132px;
      --cell-best-w: 168px;
      --weight-col-w: 168px;
      --weight-bar-h: 6px;
      --avatar-size: 44px;
      --profile-logo-h: 44px;
      --version-col-w: 56px;
      --fill-30: 30%;
      --fill-25: 25%;
      --fill-20: 20%;
      --fill-15: 15%;
      --fill-10: 10%;

      --w-tablet: 834px;
      --w-mobile: 390px;
      --frame-max-h: 1750px;
      --frame-shadow: 0 1px 2px rgba(11, 31, 51, 0.08);
      --track: 0.06em;
      --track-wide: 0.14em;
    }

    body {
      margin: 0;
      background: var(--desk);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--cobalt); text-decoration: none; }
    a:hover { color: var(--cobalt-dark); text-decoration: underline; }
    img { display: block; max-width: 100%; }
    button { font: inherit; }

    /* review document shell */
    .doc { display: flex; flex-direction: column; gap: var(--sp-9); padding: var(--sp-7) var(--sp-6) var(--sp-9) var(--sp-6); }
    .doc-head { display: flex; flex-direction: column; gap: var(--sp-2); max-width: var(--wrap-max); }
    .doc-title { font-family: var(--font-head); font-size: var(--fs-doc-title); font-weight: 700; letter-spacing: var(--track); margin: 0; color: var(--navy); }
    .doc-sub { margin: 0; color: var(--grey); font-size: var(--fs-small); }
    .screen-set { display: flex; flex-direction: column; gap: var(--sp-5); }
    .screen-set-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4); }
    .screen-set-title { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-wide); margin: 0; color: var(--navy); }
    .screen-set-note { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }
    .screen-row { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: flex-start; }
    .frame-block { display: flex; flex-direction: column; gap: var(--sp-2); }
    .frame-label { font-family: var(--font-mono); font-size: var(--fs-doc-label); color: var(--grey); letter-spacing: var(--track); }
    .frame { container-type: inline-size; background: var(--white); border: var(--bw) solid var(--border); box-shadow: var(--frame-shadow); overflow: hidden; }
    .frame-desktop { width: 100%; }
    .frame-tablet { width: var(--w-tablet); max-height: var(--frame-max-h); overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
    .frame-mobile { width: var(--w-mobile); max-height: var(--frame-max-h); overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }

    /* page skeleton */
    .page { display: flex; flex-direction: column; background: var(--white); }
    .page-main { display: flex; flex-direction: column; }
    .wrap { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--sp-6); }
    .section { display: flex; flex-direction: column; padding: var(--section-y) 0; }
    /* The first section sits closer to the page-head — 88px of air below a bare heading reads
       as a layout gap, not rhythm. */
    .page-head + .section { padding-top: var(--sp-7); }
    .section-soft { background: var(--soft); }
    .section-navy { background: var(--navy); color: var(--invert); }
    .section-navy .card-text { color: var(--invert-dim); }
    .section-navy .lede { color: var(--invert); }
    .section-navy .body-text { color: var(--invert); }

    /* header */
    .site-header { display: flex; flex-direction: column; border-bottom: var(--bw) solid var(--border); background: var(--white); }
    .header-top { background: var(--navy); }
    .header-top-inner { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding: var(--sp-2) var(--wrap-pad); box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
    .header-top-text { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--invert-dim); letter-spacing: var(--track); }
    .header-top-links { display: flex; gap: var(--sp-4); }
    .header-top-link { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--invert); }
    .header-top-link:hover { color: var(--white); }
    .header-inner { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding: var(--sp-4) var(--wrap-pad); box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-6); }
    .brand { display: flex; align-items: center; flex: 0 0 auto; }
    .brand-logo { height: var(--logo-h); width: auto; }
    .nav { display: flex; align-items: center; gap: var(--sp-5); flex: 1 1 auto; }
    .nav-link { font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--navy); padding: var(--sp-2) 0; border-bottom: var(--bw-thick) solid transparent; }
    .nav-link:hover { color: var(--cobalt); text-decoration: none; }
    .nav-link-active { border-bottom-color: var(--cobalt); color: var(--cobalt); }
    .header-tools { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
    .search-field { display: flex; align-items: center; gap: var(--sp-3); border: var(--bw) solid var(--border); background: var(--soft); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); min-width: var(--card-min); }
    .search-field-large { flex: 1 1 var(--col-min); background: var(--white); }
    .search-mark { display: block; width: var(--search-mark-size); height: var(--search-mark-size); border: var(--bw-thick) solid var(--navy); border-radius: var(--r-pill); flex: 0 0 auto; }
    .search-text { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }
    .menu-button { display: none; flex-direction: column; gap: var(--sp-1); background: none; border: var(--bw) solid var(--border); padding: var(--sp-3); border-radius: var(--r); cursor: pointer; }
    .menu-bar { display: block; width: var(--menu-bar-w); height: var(--menu-bar-h); background: var(--navy); }
    .nav-mobile { display: none; }
    .nav-mobile-link { font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--navy); padding: var(--sp-3) 0; border-bottom: var(--bw-thick) solid transparent; flex: 0 0 auto; }

    /* buttons */
    .button-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--cobalt); color: var(--white); font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--track); padding: var(--sp-3) var(--sp-5); border-radius: var(--r); flex: 0 0 auto; }
    .button-primary:hover { background: var(--cobalt-dark); color: var(--white); text-decoration: none; }
    .button-ghost { display: inline-flex; align-items: center; justify-content: center; border: var(--bw) solid var(--navy); color: var(--navy); font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--track); padding: var(--sp-3) var(--sp-5); border-radius: var(--r); flex: 0 0 auto; }
    .button-ghost:hover { background: var(--navy); color: var(--white); text-decoration: none; }
    .button-ghost-invert { border-color: var(--invert); color: var(--white); }
    .button-ghost-invert:hover { background: var(--white); color: var(--navy); }
    .button-small { font-size: var(--fs-micro); padding: var(--sp-2) var(--sp-4); }
    .button-block { width: 100%; padding: var(--sp-4) var(--sp-5); }

    /* type */
    .h1 { font-family: var(--font-head); font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -0.015em; color: var(--navy); margin: 0; text-wrap: pretty; }
    .h2 { font-family: var(--font-head); font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 700; color: var(--navy); margin: 0; text-wrap: pretty; }
    .h2-invert { color: var(--white); }
    .h3 { font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: 600; color: var(--navy); margin: 0; }
    .h3-invert { color: var(--white); }
    .lede { font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--ink); margin: 0; max-width: var(--wrap-max); text-wrap: pretty; }
    .body-text { margin: 0; color: var(--ink); }
    .card-text { margin: 0; font-size: var(--fs-small); color: var(--grey); line-height: var(--lh-body); }
    .eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--cobalt); }
    .caption { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }
    .footnote { margin: 0; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }
    .link-more { font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600; color: var(--cobalt); }
    .link-more-invert { color: var(--white); }
    .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-4); border-bottom: var(--bw) solid var(--border); padding-bottom: var(--sp-3); }
    .section-navy .section-head { border-bottom-color: var(--rule-invert); }

    /* hero */
    .hero { padding: var(--sp-9) 0 var(--sp-8) 0; border-bottom: var(--bw) solid var(--border); }
    .hero-inner { flex-direction: row; align-items: flex-start; gap: var(--sp-8); }
    .hero-copy { display: flex; flex-direction: column; gap: var(--sp-5); flex: 1 1 auto; min-width: 0; }
    .hero-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
    .meta-strip { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
    .meta-item { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); text-transform: uppercase; letter-spacing: var(--track); }
    .stat-block { display: flex; flex-direction: column; flex: 0 0 auto; border-left: var(--bw) solid var(--border); padding-left: var(--sp-6); gap: var(--sp-5); }
    .stat { display: flex; flex-direction: column; }
    .stat-num { font-family: var(--font-head); font-size: var(--fs-stat); font-weight: 800; color: var(--navy); line-height: var(--lh-tight); }
    .stat-label { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); text-transform: uppercase; letter-spacing: var(--track); }

    /* cards */
    .card-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
    .card-ranking { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1 1 var(--card-min); border: var(--bw) solid var(--border); border-top: var(--bw-thick) solid var(--navy); padding: var(--sp-5); background: var(--white); }
    .card-ranking:hover { border-top-color: var(--cobalt); text-decoration: none; }
    .card-facts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: var(--bw) solid var(--border); }
    .fact { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }
    .card-plain { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; flex: 1 1 var(--card-min); }
    .card-bordered { border: var(--bw) solid var(--border); background: var(--white); padding: var(--sp-5); }

    /* rank cards */
    .rank-list { display: flex; flex-direction: column; gap: var(--sp-4); }
    .card-company { display: flex; gap: var(--sp-5); background: var(--white); border: var(--bw) solid var(--border); }
    .rank-rail { display: flex; align-items: flex-start; justify-content: center; flex: 0 0 var(--rank-rail-w); background: var(--soft); border-right: var(--bw) solid var(--border); padding: var(--sp-5) 0; }
    .rank-rail-top { background: var(--gold-soft); }
    .rank-num { font-family: var(--font-head); font-size: var(--fs-rank); font-weight: 800; color: var(--navy); line-height: var(--lh-tight); letter-spacing: -0.03em; }
    .company-main { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: var(--sp-5) 0; }
    .company-identity { display: flex; align-items: center; gap: var(--sp-4); }
    .logo-mark { height: var(--logo-mark-h); width: auto; flex: 0 0 auto; }
    .company-name-block { display: flex; flex-direction: column; gap: var(--sp-2); }
    .tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
    .tier-tag { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track); padding: var(--sp-1) var(--sp-3); border: var(--bw) solid var(--border); border-radius: var(--r); }
    .tier-a { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
    .tier-b { color: var(--navy); border-color: var(--navy); background: var(--white); }
    .tier-c { color: var(--grey); border-color: var(--border); background: var(--soft); }
    .badge-verified { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track); color: var(--green); background: var(--green-soft); border: var(--bw) solid var(--green); border-radius: var(--r); padding: var(--sp-1) var(--sp-3); }
    .status-neutral { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track); color: var(--grey); border: var(--bw) dashed var(--border); border-radius: var(--r); padding: var(--sp-1) var(--sp-3); }
    .evidence-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
    .evidence-item { display: flex; align-items: center; gap: var(--sp-2); }
    .evidence-text { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--navy); }
    .dot { display: block; width: var(--dot-size); height: var(--dot-size); border-radius: var(--r-pill); background: var(--grey); flex: 0 0 auto; }
    .dot-strong { background: var(--cobalt); }
    .dot-green { background: var(--green); }
    .company-side { display: flex; flex-direction: column; gap: var(--sp-1); flex: 0 0 auto; box-sizing: border-box; border-left: var(--bw) solid var(--border); padding: var(--sp-5); align-items: flex-start; }
    .side-label { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); text-transform: uppercase; letter-spacing: var(--track); }
    .side-value { font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600; color: var(--navy); margin-bottom: var(--sp-3); }

    /* lists and rows */
    .two-col { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
    .col-half { display: flex; flex-direction: column; gap: var(--sp-5); flex: 1 1 var(--col-min); }
    .list-rows { display: flex; flex-direction: column; }
    .row-item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--border); }
    .row-item:hover { text-decoration: none; }
    .row-name { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 600; color: var(--navy); }
    .row-meta { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }
    .list-checks { display: flex; flex-direction: column; gap: var(--sp-3); }
    .check-item { display: flex; align-items: flex-start; gap: var(--sp-3); }
    .check-text { font-size: var(--fs-small); color: var(--ink); }
    .steps { display: flex; flex-direction: column; }
    .step { display: flex; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--border); }
    .step-num { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--cobalt); flex: 0 0 auto; }
    .step-body { display: flex; flex-direction: column; gap: var(--sp-2); }
    .update-list { display: flex; flex-direction: column; }
    .update-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--border); }
    .update-date { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); flex: 0 0 auto; }
    .update-tag { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track); color: var(--cobalt); border: var(--bw) solid var(--border); padding: 0 var(--sp-2); flex: 0 0 auto; }
    .update-text { margin: 0; font-size: var(--fs-small); color: var(--ink); flex: 1 1 auto; min-width: 0; }
    .band { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-6); }
    .band-copy { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1 1 var(--col-min); }
    .band-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); flex: 0 0 auto; }

    /* page head */
    .page-head { padding: var(--sp-8) 0 var(--sp-7) 0; background: var(--soft); border-bottom: var(--bw) solid var(--border); display: flex; }
    .filter-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
    .chip { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--navy); border: var(--bw) solid var(--border); background: var(--white); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); }
    .chip-active { background: var(--navy); color: var(--white); border-color: var(--navy); }

    /* services */
    .service-list { display: flex; flex-direction: column; gap: var(--sp-7); }
    .card-service { display: flex; gap: var(--sp-6); border-top: var(--bw-thick) solid var(--navy); padding-top: var(--sp-5); }
    .service-num { font-family: var(--font-head); font-size: var(--fs-service-num); font-weight: 800; color: var(--border); flex: 0 0 auto; line-height: var(--lh-tight); }
    .service-body { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 var(--col-min); }
    .coverage-row { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
    .coverage-col { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1 1 var(--card-min); }
    .role-tag { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track); color: var(--cobalt); }

    /* gallery */
    .edition-grid { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
    .card-edition { display: flex; flex-direction: column; flex: 1 1 var(--card-min); border: var(--bw) solid var(--border); background: var(--white); }
    .card-edition:hover { text-decoration: none; border-color: var(--navy); }
    .edition-cover { display: flex; justify-content: space-between; align-items: flex-end; background: var(--navy); padding: var(--sp-6) var(--sp-5) var(--sp-4) var(--sp-5); gap: var(--sp-4); }
    .edition-cover-archive { background: var(--grey); }
    .edition-year { font-family: var(--font-head); font-size: var(--fs-edition-year); font-weight: 800; color: var(--white); line-height: var(--lh-tight); }
    .edition-count { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track); color: var(--invert-dim); }
    .edition-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1 1 auto; }
    .logo-wall { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
    .logo-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); flex: 1 1 var(--card-min); border: var(--bw) solid var(--border); background: var(--white); padding: var(--sp-6) var(--sp-4); }
    .logo-mark-wall { height: var(--logo-mark-wall-h); }
    .logo-caption { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }

    /* contact */
    .contact-layout { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: flex-start; }
    .contact-form-col { display: flex; flex-direction: column; gap: var(--sp-4); flex: 2 1 var(--col-min); min-width: 0; }
    .contact-side-col { display: flex; flex-direction: column; gap: var(--sp-6); flex: 1 1 var(--col-min); }
    .mockup-tag { display: flex; align-items: center; gap: var(--sp-3); border: var(--bw) dashed var(--cobalt); background: var(--soft); padding: var(--sp-3) var(--sp-4); }
    .mockup-text { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--cobalt); text-transform: uppercase; letter-spacing: var(--track); }
    .form-mockup { display: flex; flex-direction: column; gap: var(--sp-5); border: var(--bw) solid var(--border); padding: var(--sp-7); background: var(--white); }
    .field-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
    .field { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 var(--card-min); }
    .label { font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track); color: var(--navy); }
    .input { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); border: var(--bw) solid var(--border); background: var(--white); padding: var(--sp-4); font-size: var(--fs-small); color: var(--grey); border-radius: var(--r); }
    .input-text { font-size: var(--fs-small); color: var(--grey); }
    .select-mark { display: block; width: var(--dot-size); height: var(--dot-size); border-right: var(--bw-thick) solid var(--navy); border-bottom: var(--bw-thick) solid var(--navy); transform: rotate(45deg); flex: 0 0 auto; }
    .file-button { font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 600; color: var(--navy); border: var(--bw) solid var(--border); background: var(--soft); padding: var(--sp-2) var(--sp-3); }
    .textarea { display: block; border: var(--bw) solid var(--border); background: var(--white); padding: var(--sp-4); font-size: var(--fs-small); color: var(--grey); min-height: calc(var(--sp-9) + var(--sp-5)); border-radius: var(--r); }
    .consent-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
    .checkbox { display: block; width: var(--checkbox-size); height: var(--checkbox-size); border: var(--bw) solid var(--navy); flex: 0 0 auto; }
    .consent-text { font-size: var(--fs-small); color: var(--ink); }
    .contact-block { display: flex; flex-direction: column; gap: var(--sp-2); border-top: var(--bw) solid var(--border); padding-top: var(--sp-4); }
    .contact-block-navy { background: var(--navy); border-top: none; padding: var(--sp-5); gap: var(--sp-3); align-items: flex-start; }
    .contact-block-navy .card-text { color: var(--invert-dim); }
    .contact-line { margin: 0; font-size: var(--fs-small); color: var(--ink); }
    .contact-line-muted { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }
    /* FAQ — native <details> so the page needs no JS, every answer is visible by default,
       and a reader can still fold away what they have read. One column with a wide measure:
       it reads as a reference document, not a widget. */
    .faq { display: flex; flex-direction: column; border-top: var(--bw) solid var(--border); max-width: 820px; }
    .faq-q { border-bottom: var(--bw) solid var(--border); }
    .faq-q > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1ch 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-head); color: var(--navy); }
    .faq-q > summary::-webkit-details-marker { display: none; }
    .faq-q > summary::before { content: "+"; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-lede); line-height: 1; color: var(--cobalt); }
    .faq-q[open] > summary::before { content: "\2212"; }
    .faq-q > summary:hover { color: var(--cobalt); }
    .faq-q > summary:focus-visible { outline: var(--bw-thick) solid var(--cobalt); outline-offset: 3px; }
    .faq-q > .faq-answer { padding: 0 0 var(--sp-5) calc(1ch + var(--sp-4)); max-width: 66ch; }

    /* Embedded FAQ teaser — same accordion, wrapped with an eyebrow, a heading and a link
       through to /faq/. Used on the homepage and the trust pages. The hairline top keeps it
       distinct from whatever section precedes it, soft-grey or not. */
    .faq-section { border-top: var(--bw) solid var(--border); }
    .faq-section > .wrap { gap: var(--sp-5); }
    .faq-section-head { display: flex; flex-direction: column; gap: var(--sp-2); }
    .faq-section .link-more { align-self: flex-start; }

    /* footer */
    .site-footer { display: flex; flex-direction: column; background: var(--navy); color: var(--invert); margin-top: auto; }
    .footer-top { width: 100%; max-width: var(--wrap-max); margin: 0 auto; box-sizing: border-box; padding: var(--sp-8) var(--wrap-pad); display: flex; flex-wrap: wrap; gap: var(--sp-8); }
    .footer-brand { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 var(--col-min); }
    .footer-logo { height: var(--logo-h-footer); width: auto; filter: brightness(0) invert(1); }
    .footer-note { margin: 0; font-size: var(--fs-small); color: var(--invert-dim); }
    .footer-stamp { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
    .stamp-item { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--invert); text-transform: uppercase; letter-spacing: var(--track); }
    .footer-cols { display: flex; flex-wrap: wrap; gap: var(--sp-7); flex: 2 1 var(--col-min); }
    .footer-col { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 var(--card-min); }
    .footer-heading { font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--white); margin: 0 0 var(--sp-2) 0; }
    .footer-link { font-size: var(--fs-small); color: var(--invert-dim); }
    .footer-link:hover { color: var(--white); }
    .footer-bottom { border-top: var(--bw) solid var(--rule-invert); }
    .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--wrap-pad); max-width: var(--wrap-max); width: 100%; margin: 0 auto; box-sizing: border-box; }
    .footer-small { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--invert-dim); }
    .footer-legal { display: flex; gap: var(--sp-4); }
    .footer-link-small { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--invert-dim); }

    /* breadcrumb and trust bar */
    .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
    .crumb { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }
    .crumb-current { color: var(--navy); }
    .crumb-sep { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--border); }
    .trust-bar { display: flex; flex-wrap: wrap; gap: var(--sp-6); border-top: var(--bw) solid var(--border); border-bottom: var(--bw) solid var(--border); padding: var(--sp-4) 0; }
    .trust-cell { display: flex; flex-direction: column; gap: var(--sp-1); }
    .trust-label { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track); color: var(--grey); }
    .trust-value { font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600; color: var(--navy); }

    /* quick ranking table */
    .rank-table { display: flex; flex-direction: column; border: var(--bw) solid var(--border); }
    .rank-table-head { display: flex; gap: var(--sp-4); background: var(--navy); padding: var(--sp-3) var(--sp-4); }
    .rank-table-row { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-top: var(--bw) solid var(--border); }
    .rank-table-row-top { background: var(--gold-soft); }
    .col-head { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track); color: var(--invert-dim); }
    .cell-rank { flex: 0 0 var(--cell-rank-w); font-family: var(--font-head); font-size: var(--fs-small); font-weight: 700; color: var(--navy); }
    .cell-name { flex: 1 1 auto; min-width: 0; font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600; color: var(--navy); }
    .cell-tier { flex: 0 0 var(--cell-tier-w); }
    .cell-status { flex: 0 0 var(--cell-status-w); }
    .cell-best { flex: 0 0 var(--cell-best-w); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }

    /* takeaways, criteria, notices */
    .takeaways { display: flex; flex-direction: column; gap: var(--sp-4); border-left: var(--bw-thick) solid var(--cobalt); padding-left: var(--sp-5); }
    .takeaway { display: flex; gap: var(--sp-3); align-items: flex-start; }
    .takeaway-text { font-size: var(--fs-body); color: var(--ink); margin: 0; }
    .criteria-list { display: flex; flex-direction: column; }
    .criterion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--border); }
    .criterion-body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }
    .criterion-weight { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 var(--weight-col-w); }
    .weight-bar { display: flex; height: var(--weight-bar-h); background: var(--border); flex: 1 1 auto; }
    .weight-fill { display: block; height: var(--weight-bar-h); background: var(--navy); }
    .weight-fill-30 { width: var(--fill-30); }
    .weight-fill-25 { width: var(--fill-25); }
    .weight-fill-20 { width: var(--fill-20); }
    .weight-fill-15 { width: var(--fill-15); }
    .weight-fill-10 { width: var(--fill-10); }
    .weight-num { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--navy); flex: 0 0 auto; }
    .notice { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--soft); border: var(--bw) solid var(--border); padding: var(--sp-5); }

    /* spotlight */
    .spotlight-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
    .card-spotlight { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 var(--card-min); border: var(--bw) solid var(--border); border-top: var(--bw-thick) solid var(--gold); padding: var(--sp-5); background: var(--white); }
    .spotlight-rank { font-family: var(--font-head); font-size: var(--fs-rank); font-weight: 800; color: var(--navy); line-height: var(--lh-tight); letter-spacing: -0.03em; }

    /* sources and bylines */
    .source-list { display: flex; flex-direction: column; }
    .source-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: var(--bw) solid var(--border); }
    .source-name { font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600; color: var(--navy); flex: 1 1 auto; min-width: 0; }
    .source-type { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); flex: 0 0 auto; }
    .byline-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
    .byline { display: flex; gap: var(--sp-4); align-items: flex-start; flex: 1 1 var(--card-min); border: var(--bw) solid var(--border); padding: var(--sp-5); }
    .byline-avatar { display: flex; align-items: center; justify-content: center; width: var(--avatar-size); height: var(--avatar-size); background: var(--soft); border: var(--bw) solid var(--border); flex: 0 0 auto; }
    .byline-initials { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }
    .byline-body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }

    /* change log and history */
    .change-list { display: flex; flex-direction: column; }
    .change-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: var(--bw) solid var(--border); }
    .change-tag { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track); padding: 0 var(--sp-2); border: var(--bw) solid var(--border); flex: 0 0 auto; }
    .change-up { color: var(--green); border-color: var(--green); }
    .change-down { color: var(--gold); border-color: var(--gold); }
    .change-new { color: var(--cobalt); border-color: var(--cobalt); }
    .change-text { margin: 0; font-size: var(--fs-small); color: var(--ink); flex: 1 1 auto; min-width: 0; }

    /* company profile */
    .profile-head { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: flex-start; justify-content: space-between; }
    .profile-id { display: flex; gap: var(--sp-5); align-items: center; flex: 1 1 auto; min-width: 0; }
    .profile-logo { height: var(--profile-logo-h); width: auto; flex: 0 0 auto; }
    .profile-id-body { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
    .profile-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); flex: 0 0 auto; }
    .kv-list { display: flex; flex-direction: column; }
    .kv-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: var(--bw) solid var(--border); }
    .kv-key { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track); color: var(--grey); }
    .kv-value { font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600; color: var(--navy); }
    .version-list { display: flex; flex-direction: column; }
    .version-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: var(--bw) solid var(--border); }
    .version-num { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--cobalt); flex: 0 0 var(--version-col-w); }
    .version-text { margin: 0; font-size: var(--fs-small); color: var(--ink); flex: 1 1 auto; min-width: 0; }

    /* verification */
    .status-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
    .card-status { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; flex: 1 1 var(--card-min); border: var(--bw) solid var(--border); padding: var(--sp-6); background: var(--white); }
    .card-status-verified { border-color: var(--green); }
    .check-numbered { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--border); }
    .check-num { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--cobalt); flex: 0 0 auto; }
    .check-body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }

    /* tablet */
    /* The design pack expressed these as `@container` queries because the canvas rendered
       each page inside a fixed-width `.frame` mockup shell that carried `container-type`.
       A real site has no such shell, so container queries would never resolve and every
       responsive rule below would be dead. Same breakpoints, measured on the viewport. */
    @media (max-width: 900px) {
      .page {
        --fs-h1: 38px;
        --fs-h2: 26px;
        --fs-lede: 18px;
        --fs-rank: 34px;
        --fs-stat: 30px;
        --wrap-pad: var(--sp-5);
        --section-y: var(--sp-8);
        --rank-rail-w: 72px;
      }
      .header-inner { flex-wrap: wrap; gap: var(--sp-4); }
      .header-top-links { display: none; }
      .header-top-inner { justify-content: flex-start; }
      .header-top-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .nav { gap: var(--sp-4); order: 3; flex: 1 1 100%; }
      .nav-link { font-size: var(--fs-micro); }
      .search-field { min-width: 0; }
      .header-tools { flex: 1 1 auto; justify-content: flex-end; }
      .header-tools .search-field { display: none; }
      .hero-inner { flex-direction: column; gap: var(--sp-6); }
      .stat-block { flex-direction: row; flex-wrap: wrap; border-left: none; border-top: var(--bw) solid var(--border); padding-left: 0; padding-top: var(--sp-5); gap: var(--sp-7); width: 100%; }
      .two-col { gap: var(--sp-7); }
      .company-side { border-left: none; border-top: var(--bw) solid var(--border); flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4); width: 100%; box-sizing: border-box; padding: var(--sp-4) var(--sp-5); }
      .side-value { margin-bottom: 0; }
      .card-company { flex-wrap: wrap; }
      .company-main { padding: var(--sp-5) var(--sp-5) var(--sp-4) 0; }
      .form-mockup { padding: var(--sp-5); }
      .page { --cell-best-w: 120px; --cell-status-w: 116px; --cell-tier-w: 112px; --weight-col-w: 128px; }
      .trust-bar { gap: var(--sp-5); }
      .profile-head { gap: var(--sp-5); }
    }

    /* mobile */
    @media (max-width: 560px) {
      .page {
        --fs-h1: 30px;
        --fs-h2: 22px;
        --fs-h3: 17px;
        --fs-lede: 17px;
        --fs-body: 16px;
        --fs-rank: 28px;
        --fs-stat: 26px;
        --fs-service-num: 24px;
        --wrap-pad: var(--sp-4);
        --section-y: var(--sp-7);
        --card-min: 100%;
        --col-min: 100%;
      }
      .header-top-links { display: none; }
      .header-top-inner { justify-content: flex-start; }
      .header-inner { gap: var(--sp-3); flex-wrap: wrap; }
      .nav { display: none; }
      .header-tools { flex: 1 1 auto; justify-content: flex-end; gap: var(--sp-2); }
      .header-tools .button-primary { display: none; }
      .menu-button { display: flex; }
      .nav-mobile { display: flex; gap: var(--sp-5); overflow-x: auto; padding: 0 var(--sp-4); border-top: var(--bw) solid var(--border); }
      .hero { padding: var(--sp-7) 0 var(--sp-6) 0; }
      .hero-search { flex-direction: column; align-items: stretch; }
      .hero-search .search-field { width: 100%; box-sizing: border-box; }
      .hero-search .button-primary, .hero-search .button-ghost { width: 100%; box-sizing: border-box; }
      .stat-block { gap: var(--sp-5); }
      .stat { flex: 1 1 40%; }
      .card-company { flex-direction: column; }
      /* box-sizing is not global in this pack; without it the 100% width and the horizontal
         padding add up, widening the flex parent to max-content and pushing .company-main
         past the viewport. The canvas never showed this because .frame clipped overflow. */
      .rank-rail { flex: 0 0 auto; width: 100%; box-sizing: border-box; justify-content: flex-start; border-right: none; border-bottom: var(--bw) solid var(--border); padding: var(--sp-3) var(--sp-4); }
      .company-main { padding: var(--sp-4); }
      .company-side { padding: var(--sp-4); flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
      .card-service { flex-direction: column; gap: var(--sp-3); }
      .step { gap: var(--sp-3); }
      .band { flex-direction: column; align-items: stretch; }
      .band-actions { flex-direction: column; }
      .band-actions .button-primary, .band-actions .button-ghost { width: 100%; box-sizing: border-box; }
      .form-mockup { padding: var(--sp-4); }
      .field-row { gap: var(--sp-4); }
      .footer-top { padding: var(--sp-7) var(--sp-4); gap: var(--sp-6); }
      .footer-cols { gap: var(--sp-6); }
      .footer-bottom { padding: var(--sp-4); }
      .logo-cell { padding: var(--sp-5) var(--sp-4); }
      .edition-cover { padding: var(--sp-5) var(--sp-4) var(--sp-3) var(--sp-4); }
      .page { --cell-rank-w: 40px; --weight-col-w: 100%; }
      .rank-table-head { display: none; }
      .rank-table-row { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4); }
      .cell-name { flex: 1 1 auto; }
      .cell-tier, .cell-status { flex: 0 0 auto; }
      .cell-best { flex: 1 1 100%; }
      .trust-bar { flex-direction: column; gap: var(--sp-3); }
      .takeaways { padding-left: var(--sp-4); }
      .criterion { gap: var(--sp-3); }
      .byline { padding: var(--sp-4); }
      .profile-actions { width: 100%; }
      .profile-actions .button-primary, .profile-actions .button-ghost { flex: 1 1 auto; }
      .profile-id { gap: var(--sp-4); }
      .card-status { padding: var(--sp-5); }
    }
  
    /* ---------------------------------------------------------------------
       WordPress-authored content + template glue.

       The design pack styles bespoke components only. These rules cover markup the
       CMS produces (policy pages, form pages, pagination) so it inherits the same
       type scale, rhythm and colour instead of falling back to browser defaults.
       --------------------------------------------------------------------- */

    .page-prose { max-width: 70ch; font-family: var(--font-body); color: var(--ink); }
    .page-prose > * + * { margin-top: var(--sp-4); }
    .page-prose h2 { font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 700; color: var(--navy); margin-top: var(--sp-7); }
    .page-prose h3 { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700; color: var(--navy); margin-top: var(--sp-6); }
    .page-prose p, .page-prose li { font-size: var(--fs-body); line-height: 1.65; }
    .page-prose ul, .page-prose ol { padding-left: var(--sp-5); }
    .page-prose li + li { margin-top: var(--sp-2); }
    .page-prose a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }
    .page-prose strong { font-weight: 600; }
    .page-prose em { color: var(--grey); }

    /* Forms (nominate / claim / correction) */
    .page-prose form { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
    .page-prose form p { margin: 0; display: grid; gap: var(--sp-2); }
    .page-prose label { font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--navy); }
    .page-prose input[type="text"], .page-prose input[type="email"], .page-prose input[type="url"], .page-prose textarea, .page-prose select {
      font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink);
      border: var(--bw) solid var(--border); border-radius: var(--r); padding: var(--sp-3); background: var(--white); width: 100%;
    }
    .page-prose textarea { min-height: 110px; resize: vertical; }
    .page-prose input:focus-visible, .page-prose textarea:focus-visible, .page-prose select:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }
    .page-prose button[type="submit"], .page-prose input[type="submit"] {
      font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-wide);
      background: var(--cobalt); color: var(--white); border: var(--bw) solid var(--cobalt); border-radius: var(--r);
      padding: var(--sp-3) var(--sp-5); cursor: pointer; justify-self: start;
    }
    .page-prose button[type="submit"]:hover, .page-prose input[type="submit"]:hover { background: var(--cobalt-dark); border-color: var(--cobalt-dark); }

    /* Pagination */
    .pagination, .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-7); }
    .pagination .page-numbers, .nav-links .page-numbers {
      font-family: var(--font-head); font-size: var(--fs-micro); font-weight: 600;
      border: var(--bw) solid var(--border); border-radius: var(--r); padding: var(--sp-2) var(--sp-4); color: var(--navy);
    }
    .pagination .page-numbers.current, .nav-links .page-numbers.current { background: var(--navy); color: var(--white); border-color: var(--navy); }
    .pagination .page-numbers:hover, .nav-links .page-numbers:hover { border-color: var(--cobalt); color: var(--cobalt); }
    .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    /* Links inside design components inherit the component's colour rather than the
       global link blue, so cards and tables keep their intended contrast. */
    .cell-name a, .h3 a, .card-edition, .card-ranking, .row-item { color: inherit; text-decoration: none; }
    .cell-name a:hover, .h3 a:hover { color: var(--cobalt); }

    /* Real form controls inside the design's .form-mockup shell.

       The pack draws .input/.textarea/.checkbox as static mockup elements (a div with a
       chevron, an empty square). A working form needs real controls, so these rules give
       genuine <input>/<textarea>/<input type=checkbox> the same box, type and focus
       treatment the mockup implies. */
    .form-mockup .input-control, .form-mockup .textarea {
      font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink);
      border: var(--bw) solid var(--border); border-radius: var(--r); background: var(--white);
      padding: var(--sp-4); width: 100%; box-sizing: border-box;
    }
    .form-mockup .textarea { display: block; min-height: calc(var(--sp-9) + var(--sp-5)); resize: vertical; }
    .form-mockup .input-control::placeholder, .form-mockup .textarea::placeholder { color: var(--grey); }
    .form-mockup .input-control:focus-visible, .form-mockup .textarea:focus-visible,
    .form-mockup input[type="checkbox"]:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }
    /* :user-invalid, not :invalid — a required field is invalid the moment the page loads,
       so :invalid would paint every empty field red before the visitor has typed anything.
       Browsers without :user-invalid simply show no error tint, which is the safe direction. */
    .form-mockup .input-control:user-invalid,
    .form-mockup .textarea:user-invalid { border-color: #B3261E; }
    /* A long answer or an optional field owns its row; short required fields sit two-across. */
    .form-mockup .field-full { flex: 1 1 100%; }
    .form-mockup input[type="checkbox"] {
      width: var(--checkbox-size); height: var(--checkbox-size); flex: 0 0 auto;
      accent-color: var(--cobalt); margin: 0; cursor: pointer;
    }
    .form-mockup .consent-text { cursor: pointer; }
    .form-mockup .button-primary { cursor: pointer; }

    /* Real <input> inside the header/hero search box.

       The pack draws .search-text as a span holding placeholder text, so a real input
       arrives with a native border and background sitting inside the styled .search-field
       shell — a visible box within a box. Strip the chrome and let the shell be the field. */
    .search-field input.search-text {
      border: 0; background: transparent; padding: 0; margin: 0; width: 100%; min-width: 0;
      outline: none; color: var(--ink); appearance: none; -webkit-appearance: none;
    }
    .search-field input.search-text::placeholder { color: var(--grey); opacity: 1; }
    .search-field input.search-text::-webkit-search-cancel-button { appearance: none; }
    .search-field:focus-within { border-color: var(--cobalt); }

    /* Nav labels are short phrases ("How We Rank"); letting them wrap turns one item into a
       three-line stack and throws the header's baseline out. */
    .nav-link, .nav-mobile-link { white-space: nowrap; }

    /* Attributed third-party rating (Section 17.1).

       The Google rating is Google's number, not TopChoice's, so where a listing URL exists
       the figure is a link to it and carries the date it was captured. Styled as the value
       it replaces so the sidebar rhythm is unchanged. */
    .side-value-link {
      font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600;
      color: var(--navy); text-decoration: underline; text-underline-offset: 2px;
      text-decoration-color: var(--border);
    }
    .side-value-link:hover { color: var(--cobalt); text-decoration-color: var(--cobalt); }
    .side-note {
      font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey);
      margin-bottom: var(--sp-3);
    }
    a.fact { color: var(--grey); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border); }
    a.fact:hover { color: var(--cobalt); text-decoration-color: var(--cobalt); }

    /* Card text inset when there is no rank rail.

       .company-main ships with `padding: var(--sp-5) 0` because in the design pack every
       .card-company begins with a 96px .rank-rail — that rail plus the card's flex gap is
       what insets the text. The plain company card (listings, industry/location hubs) has
       no rail, so its first child sat flush against the card border. :first-child is the
       precise test: on a ranked row .company-main is never first. */
    .card-company > .company-main:first-child { padding-left: var(--sp-5); }

    /* Footer logo.

       Two fixes over the pack's rule. (1) .footer-brand is a column flex container, so the
       image was stretched to the column's full width — a 3:1 logo smeared to 15:1, which
       read as a white bar rather than a logo; align-self stops the stretch. (2) The white
       treatment is now baked into logo-white.png instead of `filter: brightness(0) invert(1)`
       over the WebP: that file is lossless VP8L whose alpha flag Chromium does not honour,
       so the filter whitened the whole opaque rectangle. PNG alpha is unambiguous. */
    .footer-logo { height: var(--logo-h-footer); width: auto; align-self: flex-start; filter: none; }

    /* Hero brand animation (replaces the design's .stat-block slot).

       The stat block was 191px wide, which is far too narrow for video, so this claims a
       proper share of the row while still yielding to the headline. aspect-ratio plus the
       element's width/height attributes reserve the space before the file loads, so the
       hero never shifts. */
    .hero-media {
      margin: 0;
      /* No shrink: .hero-copy grows, so any shrink here lets the headline squeeze the
         animation back down to the old stat-block width (~190px). */
      flex: 0 0 clamp(280px, 34%, 420px);
      align-self: center;
      border: var(--bw) solid var(--border);
      border-radius: var(--r);
      background: var(--soft);
      overflow: hidden;
    }
    .hero-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

    @media (max-width: 900px) {
      /* .hero-inner turns into a column here, so the animation sits under the copy at a
         readable width rather than stretching the full measure. */
      .hero-media { flex: 0 0 auto; align-self: flex-start; width: 100%; max-width: 460px; }
    }

    /* Company images.

       A plain responsive grid rather than a carousel: these are reference photos, not a
       story, and a carousel would hide most of them behind interaction. Fixed aspect and
       object-fit keep a mixed set of portrait/landscape uploads on a common baseline. */
    .image-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
      gap: var(--sp-4);
    }
    .image-grid-item {
      width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
      border: var(--bw) solid var(--border); border-radius: var(--r); background: var(--white);
    }

    /* Editor-only empty slot. Never rendered for visitors — see single-company.php. */
    .image-placeholder {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: var(--sp-2); min-height: calc(var(--sp-9) + var(--sp-7));
      border: var(--bw-thick) dashed var(--border); border-radius: var(--r);
      background: var(--white); color: var(--grey); text-align: center;
      padding: var(--sp-6); text-decoration: none;
    }
    .image-placeholder:hover { border-color: var(--cobalt); color: var(--cobalt); text-decoration: none; }
    .image-placeholder-mark {
      width: var(--sp-6); height: var(--sp-6); border: var(--bw-thick) solid currentColor;
      border-radius: var(--r);
    }
    .image-placeholder-text {
      font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600;
      text-transform: uppercase; letter-spacing: var(--track);
    }
    .image-placeholder-note { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--grey); }

    /* Mobile menu.

       The pack ships .menu-button and .menu-bar styled but never wired, and shows
       .nav-mobile as an always-visible horizontal scroll strip. The strip cut items off
       with no affordance that more existed, so the button now toggles the same list as a
       stacked panel.

       Everything here is scoped to html.tc-js (set in the document head). Without JS the
       button cannot open anything, so it stays hidden and the pack's scrollable strip
       remains — the nav is never unreachable. */
    html:not(.tc-js) .menu-button { display: none; }

    @media (max-width: 560px) {
      html.tc-js .nav-mobile { display: none; }
      html.tc-js .nav-mobile.is-open {
        display: flex; flex-direction: column; gap: 0;
        overflow-x: visible; padding: 0 var(--wrap-pad) var(--sp-2);
      }
      /* Stacked rows read as a menu; the active item is marked down the left edge, since
         the strip's underline convention does not survive the change of axis. */
      html.tc-js .nav-mobile.is-open .nav-mobile-link {
        padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--border);
        border-left: var(--bw-thick) solid transparent; flex: 1 1 auto;
      }
      html.tc-js .nav-mobile.is-open .nav-mobile-link:last-child { border-bottom: none; }
      html.tc-js .nav-mobile.is-open .nav-link-active {
        border-left-color: var(--cobalt); color: var(--cobalt); padding-left: var(--sp-3);
      }
    }

    /* Bars fold into a cross while open, so the control states which action it performs. */
    .menu-bar { transition: transform 180ms var(--ease, ease), opacity 120ms ease; }
    .menu-button[aria-expanded="true"] .menu-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .menu-button[aria-expanded="true"] .menu-bar:nth-child(2) { opacity: 0; }
    .menu-button[aria-expanded="true"] .menu-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    @media (prefers-reduced-motion: reduce) {
      .menu-bar { transition: none; }
    }

    /* Mobile header search (Section 8.1: "Mobile: logo + search + hamburger").

       The pack hides .search-field below 900px, leaving mobile with no search at all outside
       the homepage hero. It is hidden because .search-field carries min-width: var(--card-min)
       (232px), which cannot fit beside the logo and the menu button. Releasing that min-width
       and letting it take the remaining space fits all three on a 360px screen. */
    @media (max-width: 560px) {
      .header-tools .search-field {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        padding: var(--sp-2) var(--sp-3);
      }
      .header-inner { flex-wrap: nowrap; gap: var(--sp-3); }
      .brand { flex: 0 1 auto; min-width: 0; }
      .brand-logo { max-width: 100%; }
      /* The placeholder is a full sentence; at this width it would just render as a clipped
         fragment, so the magnifier plus the field itself carry the affordance. */
      .header-tools .search-field .search-text::placeholder { color: transparent; }
    }

    /* Six-item nav needs its own row.

       The pack's single-row header was sized for five items; the proposal's navigation table
       (Section 3.1) requires six, plus the search utility and the Nominate CTA. Measured at the
       1240px container that leaves the nav 494px of room for 701px of links, so the row
       overflowed. The pack already drops the nav onto its own line below 900px — this applies
       the same treatment at every width where the nav is shown, rather than shrinking type or
       dropping a required item. Below 561px the nav is hidden and the hamburger takes over. */
    @media (min-width: 561px) {
      .header-inner { flex-wrap: wrap; }
      .nav { order: 3; flex: 1 1 100%; gap: var(--sp-5); padding-top: var(--sp-1); }
      .header-tools { margin-left: auto; }
      .search-field { min-width: 0; flex: 0 1 var(--card-min); }
    }

    /* The pack also hides the search between 561px and 900px. That was a consequence of the
       232px min-width, which no longer applies — at 768px the row has ~720px for a 102px logo,
       a 232px field and a 206px CTA. Section 8.1 makes search a site-wide utility, so it should
       not disappear on a tablet. */
    @media (min-width: 561px) and (max-width: 900px) {
      .header-tools .search-field { display: flex; }
    }

    /* Single-row header on wide screens.

       Restores the pack's one-line header now that the nav carries six items. The row needed
       1351px inside a 1144px content box, so the space is reclaimed from the parts that were
       oversized rather than from the nav itself: tighter link tracking, a narrower search
       field, and less padding on the CTA. Below 1200px the nav still takes its own row,
       because no amount of trimming fits six items plus search and CTA at that width.
       1240px, not 1200: at 1200 the container's 96px of padding leaves 1104 for a row that
       measures 1110, so it overflowed by 6px. */
    @media (min-width: 1240px) {
      .header-inner { flex-wrap: nowrap; gap: var(--sp-5); }
      .nav { order: 0; flex: 1 1 auto; gap: var(--sp-4); padding-top: 0; justify-content: center; }
      .nav-link { letter-spacing: 0.06em; }
      .header-tools { margin-left: 0; flex: 0 0 auto; }
      .search-field { flex: 0 1 200px; min-width: 0; }
      .header-tools .button-primary { padding: var(--sp-3) var(--sp-4); }
    }

    /* Logo sizing.

       logo.webp is 59% transparent margin, so --logo-h: 34px rendered a wordmark only 13.8px
       tall — the token was being spent on empty space. logo-header.png is the same two-tone
       mark cropped to its ink, so the height below is the height you actually see. 26px of
       real wordmark is nearly twice the old visible size; the extra 68px of width it needs on
       the single-row header is taken back from the search field and the two gaps. */
    .brand-logo { height: 26px; }

    @media (min-width: 1240px) {
      .nav { gap: var(--sp-3); }
      .header-inner { gap: var(--sp-4); }
      .search-field { flex: 0 1 150px; }
    }

    /* The enlarged wordmark sat almost against the first nav item. A little separation marks
       the brand as its own zone rather than the first link in the list; the width comes off
       the search field, which still shows its magnifier and caret. */
    @media (min-width: 1240px) {
      .brand { padding-right: var(--sp-3); }
      .search-field { flex: 0 1 132px; }
    }

    /* Filter bar — company index (Section 14.4) and ranking detail (Section 8.3).

       Built to read as an instrument panel rather than a loose cloud of pills: each criterion
       is one hairline-separated row with its mono legend in a fixed column, so the eye can run
       down the labels and pick the axis it wants before reading any values. That matches the
       records-and-evidence tone the rest of the site uses for trust metadata, and it keeps the
       27-chip A-Z strip from swamping the four real filters above it. */
    .filter-bar { border: var(--bw) solid var(--border); background: var(--white); }
    .filter-group { display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--border); }
    .filter-group:last-child { border-bottom: 0; }
    .filter-legend {
      flex: 0 0 128px; padding-top: var(--sp-2);
      font-family: var(--font-mono); font-size: var(--fs-micro);
      text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey);
    }
    .filter-group .filter-row { flex: 1 1 auto; }

    /* .chip ships as a static span in the pack; as a real control it needs states. */
    a.chip { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
    a.chip:hover { background: var(--soft); border-color: var(--navy); color: var(--navy); text-decoration: none; }
    a.chip:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) {
      a.chip { transition: none; }
    }

    .result-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
    .result-count { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--grey); }

    /* The legend column costs more than it earns once the row is narrow: stack it instead. */
    @media (max-width: 700px) {
      .filter-group { flex-direction: column; gap: var(--sp-2); }
      .filter-legend { flex: 0 0 auto; padding-top: 0; }
    }

    /* Grouped search results (Section 8.1). Each group is its own stack so the heading, its
       rows and the "browse all" link read as one unit, with the .wrap gap doing the work of
       separating one group from the next. */
    .search-group { display: flex; flex-direction: column; gap: var(--sp-4); }
    .search-group .link-more { align-self: flex-start; }

    /* A .notice carrying a problem rather than a footnote. The gold left rule is the site's
       only warning colour and is already used for Tier A, so it reads as "attention" without
       introducing a new hue; the copy stays on the same soft ground as every other notice. */
    .notice-warn { border-left: var(--bw-thick) solid var(--gold); background: var(--gold-soft); }

    /* FAQ answers keep their links and paragraphs, so they need body styling the bare
       .faq-item stack does not provide. */
    .faq-answer { display: flex; flex-direction: column; gap: var(--sp-3); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
    .faq-answer > * { margin: 0; }
    .faq-answer a { color: var(--cobalt); }
    .faq-answer a:hover { color: var(--cobalt-dark); }
    .faq-answer ul, .faq-answer ol { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }

    /* Homepage closing CTAs: a bordered half-column needs tighter internal rhythm than the
       bare .col-half stack, whose sp-5 gap is tuned for full-width sections. */
    .col-half.card-bordered { gap: var(--sp-3); }
    .col-half.card-bordered .band-actions { margin-top: var(--sp-2); }