/* Shared page components - extracted from index.html so every page in the
   cluster (homepage, healthcare, behavioral health, ABA) uses one source. */

    /* ===== Page-specific only. Tokens only, zero hex. ===== */

    /* Scroll reveal */
    .reveal {
      opacity: 0; transform: translateY(24px);
      /* the stagger lives in --reveal-delay, not the element's inline
         transition-delay slot, so it applies only to these two properties and
         can never delay a hover transition on the same element */
      transition: opacity 0.6s var(--ease-enter) var(--reveal-delay, 0s),
                  transform 0.6s var(--ease-enter) var(--reveal-delay, 0s);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }

    /* Trust-bar marquee */
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(calc(-50% - var(--marquee-gap, 12px) / 2)); }
    }
    .marquee-mask {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent, var(--black-100) 8%, var(--black-100) 92%, transparent);
              mask-image: linear-gradient(to right, transparent, var(--black-100) 8%, var(--black-100) 92%, transparent);
    }
    .marquee-track {
      display: flex;
      width: max-content;
      gap: var(--space-16);
      align-items: center;
      animation: marquee 36s linear infinite;
    }
    .marquee-track:hover { animation-play-state: paused; }

    /* Trust-bar dual logo marquee - frosted pills, opposing directions */
    /* one half is content plus (n-1) inner gaps, but the two halves are joined by
       one MORE gap, so a raw -50% lands exactly gap/2 short and the row snaps
       once per cycle. The gap is tokenised on the track so the two cannot drift. */
    @keyframes marquee-ltr {
      from { transform: translateX(calc(-50% - var(--marquee-gap, 12px) / 2)); }
      to   { transform: translateX(0); }
    }
    @keyframes marquee-rtl {
      from { transform: translateX(0); }
      to   { transform: translateX(calc(-50% - var(--marquee-gap, 12px) / 2)); }
    }
    .logo-marquee-track {
      --marquee-gap: var(--space-6);
      display: flex;
      width: max-content;
      gap: var(--marquee-gap);
      align-items: center;
    }
    .logo-marquee-track--ltr { animation: marquee-ltr 52s linear infinite; }
    .logo-marquee-track--rtl { animation: marquee-rtl 52s linear infinite; }
    .logo-marquee-row + .logo-marquee-row { margin-top: var(--space-5); }
    .marquee-mask:hover .logo-marquee-track { animation-play-state: paused; }
    .band-label--dark { color: var(--text-on-dark-muted); }
    .client-logo-pill {
      flex: none;
      display: flex; align-items: center; justify-content: center;
      padding: 24px 40px;
      background: var(--gray-0);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 999px;
      box-shadow: none;
    }
    .client-wordmark {
      font-family: var(--t-font-display);
      font-weight: 700;
      font-size: 15px;
      color: var(--secondary-800);
      letter-spacing: -0.01em;
      white-space: nowrap;
    }
    .client-logo-pill img { height: 23px; width: auto; display: block; }
    /* Force black on white-only logos so they're visible on white pill bg */
    .client-logo-pill img[src*="omron"] { filter: brightness(0); }
    /* Tidewater is a tall 2-line wordmark - give it a touch more height */
    .client-logo-pill img[src*="tidewater"] { height: 30px; }
    .client-logo-pill img[src*="socioh"] { height: 28px; }
    @media (prefers-reduced-motion: reduce) {
      .logo-marquee-track { animation: none; }
    }

    /* Trust-bar split header - section-style title + retention line */
    .tb-header { 
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--space-12);
      align-items: end;
      margin-bottom: var(--space-10);
     }
    /* the heading was sized by its 1.1fr track, so it could never reach the intended
       measure; the header stacks so the h2 takes the container width instead */
    @media (min-width: 900px) { .tb-header { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; } }
    @media (max-width: 820px) {
      .tb-header { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
    }
    .tb-hl {
      position: relative;
      color: var(--manila);
      white-space: nowrap;
    }
    .tb-hl::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -2px;
      height: 3px;
      background: var(--manila);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.8s var(--ease-out) 0.45s;
    }
    .reveal.is-visible .tb-hl::after { transform: scaleX(1); }
    .tb-closer { font-weight: 800; color: var(--white-100); }
    .tb-closer span {
      display: inline-block;
      opacity: 0;
      transform: translateY(7px);
      transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    }
    .reveal.is-visible .tb-closer span { opacity: 1; transform: translateY(0); }
    .reveal.is-visible .tb-closer span:nth-child(1) { transition-delay: 0.65s; }
    .reveal.is-visible .tb-closer span:nth-child(2) { transition-delay: 0.85s; }
    .reveal.is-visible .tb-closer span:nth-child(3) { transition-delay: 1.05s; }
    @media (prefers-reduced-motion: reduce) {
      .tb-hl::after { transition: none; transform: scaleX(1); }
      .tb-closer span { transition: none; opacity: 1; transform: none; }
    }

    /* Hero canvas - CSS particle animation */
    .hero-canvas-wrap { position:relative; width:100%; min-height:480px; height:100%; background:transparent; }
    #hero-canvas { display:block; width:100%; height:100%;
      -webkit-mask-image: radial-gradient(ellipse 70% 70% at 55% 50%, #000 35%, rgba(0,0,0,.5) 65%, transparent 100%);
      mask-image: radial-gradient(ellipse 70% 70% at 55% 50%, #000 35%, rgba(0,0,0,.5) 65%, transparent 100%); }
    @media (max-width: 1023px) {
      .hero { position: relative; overflow: hidden; }
      .hero__grid { position: relative; z-index: 1; }
      .hero__visual { position: static !important; width: 0 !important; height: 0 !important; overflow: visible; }
      .hero-canvas-wrap {
        display: block !important;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: unset;
        opacity: 0.12;
        pointer-events: none;
        z-index: 0;
      }
      #hero-canvas {
        width: 100% !important;
        height: 100% !important;
      }
    }
    /* ===== Hero - Immersive layout (animation behind text), desktop ===== */
    @media (min-width: 1024px) {
      .hero { position: relative; overflow: hidden; min-height: 80vh; display: flex; align-items: center; padding-block: calc(var(--space-12) - 30px); }
      .hero > .container { position: relative; z-index: 2; }
      .hero__grid { display: block !important; }
      .hero__visual {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        transform: translateX(-50%) !important;
        z-index: 0;
        opacity: 0.7;
        align-items: stretch !important;
        pointer-events: none;
      }
      .hero-canvas-wrap { width: 100% !important; height: 100% !important; min-height: 0; }
      /* full-bleed: widen the edge mask so the animation fills the whole hero */
      .hero #hero-canvas {
        -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 60%, rgba(0,0,0,.7) 82%, transparent 100%) !important;
        mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 60%, rgba(0,0,0,.7) 82%, transparent 100%) !important;
      }
      .hero__content {
        position: relative;
        z-index: 2;
        text-align: center !important;
        align-items: center !important;
        justify-content: center;
        min-height: calc(80vh - (var(--space-12) - 30px) * 2);
        max-width: 100%;
        margin: 0 auto;
        gap: 40px;
      }
      .hero__content::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 130%;
        height: 118%;
        z-index: -1;
        background: radial-gradient(ellipse 60% 56% at 50% 50%, rgba(8,13,28,0.72) 0%, rgba(8,13,28,0.5) 42%, rgba(8,13,28,0.22) 66%, transparent 84%);
        pointer-events: none;
      }
      .hero__content > * { width: 100%; }
      .hero h1 {
        font-size: clamp(2.1rem, 2.85vw, 2.95rem) !important;
        max-width: 100%;
        margin: 0 auto;
        margin-bottom: var(--space-2);
        text-wrap: balance;
      }
      .hero .meta { text-align: center; }
      .hero-proof { max-width: 100%; margin: 0 auto; }
      .hero .lead { margin-left: auto; margin-right: auto; }
      .hero__ctas { justify-content: center; }
      .hero-verbs { text-align: center; }
    }
    /* Industry cards - 5-up staggered row */
    .ind-asymmetric {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--space-4);
      align-items: start;
    }
    .ind-a {
      background: var(--bg-surface);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      padding: var(--space-8) var(--space-6);
      box-shadow: var(--shadow-surface);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      text-decoration: none;
      cursor: pointer;
      position: relative;
      transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    }
    .ind-a:hover {
      transform: translateY(-4px);
      border-color: var(--accent-main);
      box-shadow: 0 10px 28px rgba(215,119,87,0.18);
    }
    .ind-a:focus-visible { outline: 2px solid var(--accent-main); outline-offset: 3px; }
    .ind-a:nth-child(even) { margin-top: var(--space-6); }
    .ind-ico { display: flex; color: var(--accent-main); }
    .ind-ico svg { width: 28px; height: 28px; }
    .ind-a-name { font-family: var(--t-font-display); font-weight: 800; font-size: var(--text-base); color: var(--secondary-800); letter-spacing: var(--tracking-tight); line-height: 1.25; margin: 0; }
    .ind-a-go {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: var(--space-2);
      font-family: var(--t-font-body);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: .02em;
      color: var(--accent-main);
      opacity: 1;
      transform: translateY(-2px);
      transition: opacity var(--transition-base), transform var(--transition-base);
    }
    .ind-a-go svg { transition: transform var(--transition-base); }
    .ind-a:hover .ind-a-go { opacity: 1; transform: translateY(0); }
    .ind-a:hover .ind-a-go svg { transform: translateX(3px); }
    .ind-a--featured { }
    @media (max-width: 768px) { .ind-asymmetric { grid-template-columns: 1fr 1fr; } .ind-a:nth-child(even) { margin-top: 0; } .ind-a-go { opacity: 1; transform: none; } }

    /* legacy industry-grid (kept for safety, not used) */
    .industry-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-4);
    }
    @media (min-width: 640px)  { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1024px) { .industry-grid { grid-template-columns: repeat(5, 1fr); } }

    /* Founders - variation C: staggered cards + big index numerals + orange rule */
    .team-head { max-width: 100%; margin-bottom: var(--space-16); }
    .team-head h2 { margin-top: var(--space-3); }
    .team-board {
      display: flex;
      flex-wrap: nowrap;
      gap: var(--space-5);
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      align-items: start;
      justify-content: safe center;
      /* full-bleed breakout of .container */
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      padding: var(--space-2) var(--space-8) var(--space-6);
      scrollbar-width: thin;
      scrollbar-color: #CBD5E1 transparent;
    }
    .team-board::-webkit-scrollbar { height: 2px; }
    .team-board::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 2px; }
    .team-board::-webkit-scrollbar-track { background: transparent; }
    .team-card {
      flex: 0 0 240px;
      scroll-snap-align: start;
      position: relative;
    }
    .team-card:nth-child(odd) { padding-bottom: 0; }
    .team-line { font-size: var(--t-caption); color: var(--text-muted); margin-top: var(--space-3); line-height: 1.5; max-width: 28ch; }
    /* C5 - mobile: keep carousel inside container so first card's text isn't clipped */
    @media (max-width: 767px) {
      .team-board {
        width: auto;
        margin-left: 0;
        justify-content: flex-start;
        padding: var(--space-2) var(--container-padding-x) var(--space-6) 12px;
        scroll-padding-left: 12px;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
      }
      .team-card { flex-basis: 200px; }
      .team-card:nth-child(odd) { padding-bottom: 0; }
      /* scroll hint cue */
      .team-board::after {
        content: "";
        flex: 0 0 var(--space-4);
      }
    }
    /* ── Audit section V5: orange takeover ── */
    .audit-hero { background: transparent; border: none; border-radius: 0; width: 100%; margin-bottom: var(--space-16); padding: 0; position: relative; overflow: hidden; }
    .audit-hero .eyebrow { color: rgba(255,255,255,.7); }
    .audit-hero h2 { color: #fff; margin-top: var(--space-4); max-width: 75%; }
    .audit-hero .lead { color: rgba(255,255,255,.82); margin-top: var(--space-5); max-width: 75%; }
    .audit-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-10); width: 100%; }
    .audit-hero-stat { padding: var(--space-6) var(--space-5); background: rgba(0,0,0,.15); border-radius: var(--radius-lg); text-align: center; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    @media (max-width: 767px) { .audit-hero-stats { grid-template-columns: repeat(2, 1fr); } }
    .audit-hero-stat .sv { font-family: var(--t-font-display); font-size: var(--text-3xl); font-weight: 900; color: #fff; line-height: 1; }
    .audit-hero-stat .sl { font-size: var(--text-xs); color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-top: var(--space-1); }
    .audit-v5-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
    .audit-v5-card { min-width: 0; }
.audit-v5-card { display: flex; flex-direction: column; gap: var(--space-5); }
    .audit-v5-card .ac-label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      align-self: flex-start;
      font-family: var(--t-font-body);
      font-size: var(--text-sm);
      font-weight: var(--weight-bold);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--accent-main);
    }
    .audit-v5-card .ac-ico {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-full);
      background: var(--accent-main);
      color: #fff;
      flex: none;
    }
    .audit-v5-card .ac-q { font-size: var(--t-body-lg); font-weight: var(--weight-semibold); font-style: italic; color: var(--text-heading); line-height: 1.4; }
    .audit-v5-card .ac-body { font-size: var(--t-body); color: var(--text-muted); line-height: 1.65; margin: 0; }
    .audit-v5-card .ac-checks { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
    .audit-v5-card .ac-checks li { display: flex; gap: var(--space-3); font-size: var(--t-small); color: var(--text-main); line-height: 1.55; }
    .audit-v5-card .ac-checks .ck { color: var(--accent-main); font-weight: 900; flex: none; margin-top: 1px; }
    @media (max-width: 860px) { .audit-v5-cards { grid-template-columns: 1fr; } }
    .team-card img {
      width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; object-position: center top;
      display: block; border-radius: var(--radius-md); background: var(--bg-section-alt);
    }
    .team-name { font-family: var(--t-font-display); font-weight: 700; color: var(--text-heading); margin-top: var(--space-5); display: inline-block; position: relative; padding-bottom: 6px; }
    .team-name::after { content: ""; position: absolute; left: 0; bottom: 0; width: 75%; height: 2px; background: var(--accent-main); }
    .team-role { font-size: var(--t-caption); color: var(--text-muted); margin-top: var(--space-2); display: block; }
    @media (max-width: 760px) {
      .team-board { grid-template-columns: 1fr 1fr; }
      .team-card:nth-child(odd) { margin-bottom: 0; }
    }

    /* ========== Filmstrip - natural-ratio photo grid ========== */
    .film-masonry {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-3);
      margin: var(--space-12) 0;
      align-items: start;
    }
    .film-col {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .film-cell { position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
      opacity: 0; transform: translateY(28px) scale(.98); filter: saturate(0.6);
      transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), filter 0.6s var(--ease-out); }
    .film-cell.is-visible { opacity: 1; transform: none; filter: saturate(1); }
    .film-cell:nth-child(1){transition-delay:.00s} .film-cell:nth-child(2){transition-delay:.10s}
    .film-cell:nth-child(3){transition-delay:.20s} .film-cell:nth-child(4){transition-delay:.30s}
    .film-cell img { width:100%; height:auto; display:block;
      transition: transform 0.6s cubic-bezier(.25,.46,.45,.94); }
    .film-cell:hover img { transform: scale(1.04); }
    .film-cell::after { content:""; position:absolute; inset:0;
      background: linear-gradient(to top, rgba(4,28,44,.75) 0%, transparent 50%);
      opacity:0; transition: opacity 0.3s var(--ease-out); }
    .film-cell:hover::after { opacity:1; }
    .film-cell .lbl { position:absolute; left:var(--space-4); bottom:var(--space-4); z-index:1;
      color:#fff; font-family:var(--t-font-mono); font-size:var(--text-xs);
      font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wider); text-transform:uppercase;
      opacity:0; transform:translateY(6px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
    .film-cell:hover .lbl { opacity:1; transform:translateY(0); }
    @media (max-width:860px) {
      .film-masonry { grid-template-columns: repeat(2,1fr); gap: var(--space-2); }
      .film-masonry .film-col { margin-top: 0 !important; }
    }

    /* ========== Committee · Five Files ========== */
    .files { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-8); }
    .file { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-12); box-shadow: var(--shadow-surface); grid-column: span 2; }
    .file.f1, .file.f2 { grid-column: span 3; }
    .file .id { font-family: var(--t-font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-main); margin-bottom: var(--space-5); }
    .file h3 { font-family: var(--t-font-display); font-size: var(--text-xl); color: var(--text-heading); margin: 0 0 var(--space-5); line-height: 1.25; }
    .file p { color: var(--text-main); line-height: 1.6; margin: 0 0 var(--space-6); }
    .file p b { color: var(--text-heading); }
    .file .chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
    .file .chip { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); background: var(--bg-section-alt); border: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); }
    .com-closer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-12); }

    /* ========== Verticals ========== */
    .vert-tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-12) 0 var(--space-10); }
    .vert-tab { padding: var(--space-4) var(--space-8); border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--bg-surface); cursor: pointer; font-weight: var(--weight-semibold); color: var(--text-muted); font-size: var(--t-caption); }
    .vert-tab.active { background: var(--accent-main); border-color: var(--accent-main); color: var(--gray-0); }
    .vert-tab:hover:not(.active) { background: var(--secondary-800); border-color: var(--secondary-800); color: var(--text-on-dark); }
    .vp { display: none; grid-template-columns: 1.3fr 1fr; gap: var(--space-16); }
    .vp.active { display: grid; }
    .vp .share { font-family: var(--t-font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-main); margin-bottom: var(--space-4); }
    .vp h3 { font-family: var(--t-font-display); font-size: var(--text-4xl); color: var(--text-heading); margin: 0 0 var(--space-6); }
    .vp ul { margin: 0 0 var(--space-6); padding-left: var(--space-6); color: var(--text-main); line-height: 1.7; }
    .vp .clients { color: var(--text-muted); font-size: var(--t-caption); line-height: 1.8; }
    .client-link { color: var(--secondary-600); font-weight: var(--weight-semibold); }
    .tabcta { display: inline-block; margin-top: var(--space-6); color: var(--accent-main); font-weight: var(--weight-bold); text-transform: capitalize; }
    .vp .pull { background: var(--secondary-800); border-radius: var(--radius-2xl); padding: var(--space-12); color: var(--text-on-dark); }
    .vp .quote-row { display: flex; gap: var(--space-5); align-items: flex-start; }
    .vp .quote-row .avatar img { width: 56px; height: 56px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; }
    .vp .q { font-style: italic; line-height: 1.5; color: var(--text-on-dark); }
    .vp .q b { display: block; font-style: normal; color: var(--text-on-dark-muted); font-size: var(--t-caption); margin-top: var(--space-4); font-weight: var(--weight-semibold); }
    .vp .metric { margin: var(--space-10) 0; }
    .vp .metric .num { display: block; font-family: var(--t-font-display); font-weight: 800; font-size: var(--text-5xl); color: var(--accent-main); line-height: 1; }
    .vp .metric .lbl { color: var(--text-on-dark-muted); font-size: var(--t-caption); margin-top: var(--space-3); display: block; }
    .vp .logo-row { min-height: 42px; display: flex; align-items: center; }
    .vp .logo-row img { max-height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
    .vp .logo-row img[src*="fresh-thyme"] { filter: none; opacity: 1; max-height: 48px; }
    .vp .client-name { color: var(--text-on-dark); font-weight: var(--weight-bold); }

    /* ========== Case studies ========== */
    .case-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-12) 0 var(--space-10); }
    .case-filter { padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--bg-surface); cursor: pointer; font-weight: var(--weight-semibold); color: var(--text-muted); font-size: var(--t-caption); }
    .case-filter.active { background: var(--accent-main); border-color: var(--accent-main); color: var(--gray-0); }
    .case-filter:hover:not(.active) { background: var(--secondary-800); border-color: var(--secondary-800); color: var(--text-on-dark); }
    .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
    .case { display: flex; flex-direction: column; gap: var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-10); box-shadow: var(--shadow-surface); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
    .case:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
    .case .meta { font-family: var(--t-font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-main); }
    .case .client { font-weight: var(--weight-bold); color: var(--text-heading); }
    .case h4 { font-family: var(--t-font-display); font-size: var(--text-lg); color: var(--text-heading); margin: var(--space-2) 0 var(--space-4); line-height: 1.3; }
    .case .wf { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
    .case .wf b { display: block; color: var(--text-heading); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 14px; margin-bottom: var(--space-2); }
    .case .c-badge { align-self: flex-start; background: var(--accent-subtle); color: var(--accent-main); font-size: var(--text-xs); font-weight: var(--weight-bold); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); }
    .case.browse { background: var(--secondary-800); }
    .case.browse .meta { color: var(--accent-main); }
    .case.browse h4 { color: var(--text-on-dark); }
    .case.browse .body { font-size: var(--t-caption); color: var(--text-on-dark-muted); line-height: 1.6; }
    .case.browse .browse-cta { margin-top: auto; color: var(--accent-main); font-weight: var(--weight-bold); }
    .case.is-hidden { display: none; }

    /* ========== FAQ - split: question list + answer panel ========== */
    .faq-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-10); align-items: start; }
    .faq-q-list { display: flex; flex-direction: column; gap: var(--space-4); }
    .faq-item-wrap { display: flex; flex-direction: column; }
    .faq-q {
      display: block;
      width: 100%; text-align: left; cursor: pointer;
      background: var(--bg-surface); border: 1px solid var(--border-default);
      border-radius: var(--radius-md); padding: var(--space-5) var(--space-6);
      font-family: var(--t-font-display); font-weight: 600; font-size: var(--text-base);
      color: var(--text-heading); line-height: 1.4;
      transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
    }
    .faq-q:hover:not(.active) { background: var(--accent-main); border-color: var(--accent-main); color: #fff; }
    .faq-q.active { background: var(--secondary-800); border-color: var(--secondary-800); color: #fff; }
    .faq-q:focus-visible { outline: 2px solid var(--accent-main); outline-offset: 2px; }
    .faq-a-inline { display: none; }
    .faq-panel {
      position: sticky; top: calc(var(--nav-total, 112px) + 10px);
      background: var(--secondary-800); border-radius: var(--radius-lg);
      padding: var(--space-10);
    }
    .faq-panel-q { font-family: var(--t-font-display); font-size: var(--text-2xl); color: #fff; margin: 0 0 var(--space-6); line-height: 1.25; }
    .faq-panel-a { color: rgba(255,255,255,.82); line-height: 1.7; font-size: var(--t-body); }
    .faq-panel-a a { color: var(--accent-main); font-weight: var(--weight-semibold); }
    @media (max-width: 1023px) {
      .faq-split { grid-template-columns: 1fr; gap: var(--space-6); }
      .faq-panel { display: none; }
      .faq-q.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
      .faq-q.active + .faq-a-inline {
        display: block;
        background: var(--secondary-800);
        color: rgba(255,255,255,.85);
        font-family: var(--t-font-body); font-weight: 400;
        font-size: var(--t-small); line-height: 1.65;
        padding: 0 var(--space-6) var(--space-6);
        border: 1px solid var(--secondary-800); border-top: none;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
      }
      .faq-q.active + .faq-a-inline a { color: var(--accent-main); font-weight: var(--weight-semibold); }
    }

    /* ========== Two paths ========== */
    .paths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-12); }
    .path { position: relative; background: var(--bg-surface); border-radius: var(--radius-2xl); padding: var(--space-16); }
    .path--1 { background: var(--secondary-600); }
    .path--2 { background: var(--secondary-900); }
    .path .rib { display: inline-block; font-family: var(--t-font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-main); margin-bottom: var(--space-5); }
    .path h3 { font-family: var(--t-font-display); font-size: var(--text-2xl); color: var(--text-heading); margin: 0 0 var(--space-6); }
    .path p { color: var(--text-main); line-height: 1.6; margin: 0; }
    .mega { display: inline-flex; align-items: center; margin-top: var(--space-8); background: var(--accent-main); color: var(--gray-0); font-weight: var(--weight-bold); font-size: var(--t-body); height: 48px; padding: 0 var(--space-12); border-radius: var(--btn-radius); border: 2px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer; }
    .mega { transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .1s var(--ease-out); }
    .mega:hover { background: var(--accent-hover); color: var(--gray-0); box-shadow: 0 4px 12px rgba(0,0,0,.2); transform: translateY(-1px); }
    .mega:active { background: var(--primary-400); color: var(--gray-0); transform: scale(0.97); }

    /* Unified orange-CTA hover - always a deeper orange from the palette, text color unchanged */
    .btn--primary:hover,
    .btn--primary:focus-visible {
      background: var(--primary-400);
      border-color: var(--primary-400);
      color: var(--text-inverse);
    }
    .btn--primary:active {
      background: var(--primary-400);
      border-color: var(--primary-400);
      color: var(--text-inverse);
    }
    .subline { color: var(--text-muted); font-size: var(--t-caption); margin-top: var(--space-5); }
    .path .toggle { display: inline-flex; gap: var(--space-2); margin: var(--space-6) 0; padding: var(--space-2); background: var(--secondary-900); border-radius: 999px; }
    .path .toggle button { flex: 1; padding: var(--space-3) var(--space-6); border-radius: 999px; border: none; background: transparent; cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--t-caption); color: var(--text-on-dark-muted); white-space: nowrap; transition: background .2s, color .2s; }
    .path .toggle button:hover { color: var(--text-on-dark); }
    .path .toggle button.on { background: var(--accent-main); border: none; color: var(--gray-0); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
    .slot-meta { color: var(--text-muted); font-size: var(--t-caption); margin: var(--space-5) 0; }
    .slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
    .slot { padding: var(--space-4); text-align: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; font-weight: var(--weight-semibold); color: var(--text-heading); font-size: var(--t-caption); }
    .slot:hover { border-color: var(--accent-main); color: var(--accent-main); }
    .slot.taken { opacity: .4; text-decoration: line-through; pointer-events: none; }

    @media (max-width: 860px) {
      .files, .files .file, .files .file.f1, .files .file.f2 { grid-template-columns: 1fr; grid-column: auto; }
      .vp.active { grid-template-columns: 1fr; gap: var(--space-10); }
      .case-grid { grid-template-columns: 1fr; }
      .paths-grid { grid-template-columns: 1fr; }
    }

    /* Big stat row */
    .bigstat-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-12) var(--space-8);
    }
    @media (min-width: 768px)  { .bigstat-row { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1024px) { .bigstat-row { grid-template-columns: repeat(5, 1fr); } }

    /* Avatar row */
    .avatar-row { display: flex; flex-wrap: wrap; justify-content: center; }
    .avatar-row img {
      width: 56px; height: 56px; border-radius: var(--radius-full);
      object-fit: cover; margin-left: calc(var(--space-4) * -1);
      border: 2px solid var(--bg-section-dark);
      background: var(--bg-section-alt);
    }
    .avatar-row img:first-child { margin-left: 0; }

    /* Navbar CTA - pulse glow animation (color unchanged) */
    @keyframes btn-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(215,119,87,0.5); }
      50%       { box-shadow: 0 0 0 7px rgba(215,119,87,0); }
    }
    #navbar .navbar__inner {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      height: auto !important;
      min-height: 0 !important;
    }
    #navbar {
      height: auto !important;
      padding-top: 12px !important;
      padding-bottom: 12px !important;
    }
    @media (min-width: 1024px) {
      #navbar {
        padding-top: 27px !important;
        padding-bottom: 27px !important;
      }
    }
    @keyframes btn-shimmer {
      0%   { background-position: 200% center; }
      100% { background-position: -200% center; }
    }
    @keyframes btn-breathe {
      0%, 100% { box-shadow: 0 0 0 0 rgba(215,119,87,0.4); }
      50%       { box-shadow: 0 0 0 6px rgba(215,119,87,0); }
    }
    #navbar .btn--primary {
      color: #fff !important;
      height: 48px !important;
      padding: 0 var(--space-12) !important;
      font-size: var(--t-body) !important;
      animation: btn-breathe 2.4s ease-in-out infinite;
    }
    #navbar .btn--primary:hover {
      animation: none !important;
      box-shadow: 0 0 0 4px rgba(215,119,87,.3), 0 4px 20px rgba(215,119,87,.5) !important;
      transform: translateY(-1px);
    }
    #navbar {
      background: var(--secondary-800) !important;
      border-bottom: 1px solid rgba(255,255,255,.08) !important;
      box-shadow: none !important;
    }
    #navbar.is-scrolled {
      background: var(--secondary-800) !important;
      border-bottom: 1px solid rgba(255,255,255,.1) !important;
      box-shadow: 0 2px 24px rgba(0,0,0,.3) !important;
    }
    #navbar .navbar__logo-dark { display: none !important; }
    #navbar .navbar__logo-white { display: block !important; }
    #navbar .navbar__link {
      color: #ffffff !important;
      position: relative;
      font-size: 15px !important;
      font-weight: 700 !important;
    }
    #navbar .navbar__actions .navbar__link {
      font-weight: 400 !important;
      font-size: 14px !important;
    }
    #navbar .navbar__link::after {
      content: '';
      position: absolute;
      bottom: 0; left: 14px; right: 14px;
      height: 2px;
      background: var(--accent-main);
      border-radius: 2px;
      opacity: 0;
      transition: opacity .22s;
    }
    #navbar .navbar__link:hover {
      color: #fff !important;
      background: transparent !important;
    }
    #navbar .navbar__link:hover::after { opacity: 1; }
    #navbar .navbar__actions .navbar__link {
      color: rgba(255,255,255,.4) !important;
    }
    #navbar .navbar__actions .navbar__link::after { display: none; }
    #navbar .badge {
      background: var(--accent-main) !important;
      color: #fff !important;
    }
    /* Mobile: prevent navbar horizontal overflow.
       Use overflow-x:clip (not hidden) so position:sticky on the navbar still works
       - `hidden` turns body into a scroll container and breaks sticky. */
    html, body { overflow-x: clip; max-width: 100%; }
    #navbar { position: sticky !important; top: 0 !important; z-index: 1000 !important; }
    @media (max-width: 1023px) {
      #navbar .navbar__inner {
        max-width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 0;
      }
      /* Reset display:contents - simple flex actions on the right */
      #navbar .navbar__actions {
        display: flex !important;
        align-items: center;
        gap: var(--space-2);
        order: 3;
      }
      #navbar .navbar__logo {
        order: 1;
        margin: 0;
        flex-shrink: 0;
      }
      #navbar nav[aria-label="Main navigation"] { order: 2; }
      #navbar .navbar__actions a[href^="tel"] { display: none !important; }
      #navbar .navbar__actions .btn--primary {
        display: inline-flex !important;
        font-size: 14px !important;
        padding: 6px 12px !important;
        white-space: nowrap;
      }
    }
    #navbar .navbar__toggle { color: #fff !important; }
    #navbar .navbar__actions a[href^="tel"] { color: #fff !important; }
    #navbar .navbar__actions a[href^="tel"]:hover { color: var(--accent-main) !important; }
    #navbar .navbar__toggle:hover { background: rgba(255,255,255,.1) !important; }

    /* ---- Contact section (Talk to a strategist) ---- */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-16);
    }
    @media (min-width: 960px) {
      .contact-grid { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--space-32); align-items: start; }
    }
    .contact-square {
      width: 88px; height: 88px;
      background: var(--accent-main);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-10);
    }
    @media (max-width: 959px) { .contact-square { width: 64px; height: 64px; } }
    .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-8); }
    .contact-form .span-2 { grid-column: 1 / -1; }
    .contact-form .form-label { color: var(--text-on-dark); letter-spacing: var(--tracking-wide); }
    .contact-form .form-input,
    .contact-form .form-textarea {
      background: var(--gray-100);
      color: var(--gray-900);
      border: 1.5px solid var(--gray-300);
    }
    .contact-form .form-input::placeholder,
    .contact-form .form-textarea::placeholder { color: var(--gray-500); }
    .contact-fine { color: var(--text-on-dark-muted); font-size: var(--t-caption); line-height: var(--leading-relaxed); }
    .contact-fine a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s var(--ease-out); }
    .contact-fine a:hover { color: var(--accent-main); }

    /* ---- Motto section (Outpace · Outrank · Outperform) ---- */
    .motto-badge {
      display: inline-flex; align-items: center; gap: var(--space-3);
      padding: var(--space-3) var(--space-6); border-radius: var(--radius-full);
      background: var(--accent-subtle); border: 1px solid var(--accent-main);
      color: var(--accent-main); font-weight: var(--weight-bold);
      font-size: var(--t-small); letter-spacing: var(--tracking-widest); text-transform: uppercase;
    }
    .motto-badge::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent-main); }

    .motto-stack { display: flex; flex-direction: column; align-items: flex-start; margin: var(--space-12) 0 var(--space-16); }
    .motto-word {
      position: relative;
      background: var(--gray-100);
      border-bottom: 7px solid var(--secondary-800);
      padding: var(--space-4) 0.65em var(--space-5) var(--space-8);
      font-family: var(--t-font-display);
      font-weight: 800;
      font-size: clamp(56px, 10vw, 132px);
      line-height: 0.96;
      letter-spacing: var(--tracking-tighter);
      color: var(--secondary-800);
      width: max-content; max-width: 100%;
    }
    .motto-word:not(:first-child) { margin-top: calc(var(--space-3) * -1); }
    .motto-word .o-suffix { color: var(--accent-main); }
    .motto-word .o-num {
      position: absolute; top: 0.1em; right: 0.08em;
      display: inline-flex; align-items: center; justify-content: center;
      width: 0.45em; height: 0.45em; padding: 0;
      border-radius: var(--radius-full);
      background: rgba(215,119,87,0.12);
      border: 1px solid rgba(215,119,87,0.38);
      color: var(--accent-main);
      line-height: 1;
    }
    .motto-word .o-num svg { width: 0.26em; height: 0.26em; display: block; }
    .motto-w3 { margin-left: clamp(0px, 22vw, 320px); }
    .motto-w2 { margin-left: clamp(0px, 11vw, 170px); }
    .motto-w1 { margin-left: 0; }

    .motto-lede { font-size: var(--t-body-lg); line-height: 1.7; color: var(--text-main); max-width: 75%; }
    .motto-mark { background: var(--secondary-800); color: var(--text-on-dark); font-weight: var(--weight-bold); padding: 2px 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
    .motto-emph { display: block; margin-top: var(--space-5); }

    .motto-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-20); }
    .motto-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-12); box-shadow: var(--shadow-surface); }
    .motto-card h3 { font-family: var(--t-font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--secondary-800); margin: 0 0 var(--space-6); letter-spacing: var(--tracking-tight); }
    .motto-card h3 .o-suffix { color: var(--accent-main); }
    .motto-card p { color: var(--text-main); line-height: 1.65; margin: 0; }

    @media (max-width: 820px) {
      .motto-cards { grid-template-columns: 1fr; }
      .motto-w3, .motto-w2 { margin-left: 0; }
    }

    /* ---- Testimonials - alternating wide / two-up editorial grid ---- */
    .tg-grid { display: flex; flex-direction: column; gap: var(--space-8); }
    .tg-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .tg-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      padding: var(--space-12) var(--space-16);
    }
    .tg-cat { display: block; font-family: var(--t-font-body); font-size: var(--t-small); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent-main); line-height: 1.3; }
    .tg-date { display: block; font-family: var(--t-font-mono); font-size: var(--t-caption); letter-spacing: var(--tracking-wider); color: var(--text-muted); margin-top: var(--space-3); }
    .tg-quote { font-size: var(--t-body-lg); line-height: 1.6; color: var(--text-main); text-wrap: pretty; }
    .tg-author { display: flex; align-items: center; gap: var(--space-5); }
    .tg-author img { width: 56px; height: 56px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; background: var(--bg-section-alt); }
    .tg-name { font-weight: var(--weight-bold); color: var(--text-heading); line-height: 1.25; }
    .tg-role { font-size: var(--t-caption); color: var(--text-muted); margin-top: 2px; }

    /* Wide card - meta · quote · author, horizontal */
    .tg-card.wide { display: grid; grid-template-columns: 180px 1fr 260px; gap: var(--space-12); align-items: center; }
    .tg-card.wide .tg-author { flex-direction: row-reverse; text-align: right; }

    /* Half card - stacked: meta → quote → author pinned bottom */
    .tg-card.half { display: flex; flex-direction: column; gap: var(--space-8); }
    .tg-card.half .tg-meta { margin-bottom: calc(var(--space-3) * -1); }
    .tg-card.half .tg-author { margin-top: auto; }

    /* Footer bar */
    .tg-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); margin-top: var(--space-12); }
    .tg-pill { background: var(--secondary-900); color: var(--gray-0); font-weight: var(--weight-bold); padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); }
    .tg-foot-note { color: var(--text-muted); }
    .tg-foot-links { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-left: auto; }
    .tg-foot-link { color: var(--accent-main); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; white-space: nowrap; }
    .tg-foot-link:hover { color: var(--accent-hover); }

    @media (max-width: 768px) {
      .tg-row { grid-template-columns: 1fr; }
      .tg-card.wide { grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
      .tg-card.wide .tg-author { flex-direction: row; text-align: left; }
      .tg-foot-links { margin-left: 0; }
    }

    /* ---- Subtle marketing-themed section bottom graphics ---- */
    .has-deco { position: relative; overflow: hidden; }
    .section-deco { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
    .section-deco svg { display: block; width: 100%; height: 100%; }

    /* Stats - upward growth trend line */
    .deco-trend { height: 200px; opacity: 0.6; margin-top: 180px; }
    .t-stop-0 { stop-color: var(--accent-main); stop-opacity: 0.30; }
    .t-stop-1 { stop-color: var(--accent-main); stop-opacity: 0; }
    .deco-trend .t-area { fill: url(#tFade); }
    .deco-trend .t-line {
      fill: none; stroke: var(--accent-main); stroke-width: 2.5;
      stroke-linecap: round; stroke-linejoin: round;
      stroke-dasharray: 1700; stroke-dashoffset: 1700;
      animation: t-draw 2.6s var(--ease-out) 0.3s forwards;
    }
    @keyframes t-draw { to { stroke-dashoffset: 0; } }
    @media (max-width: 768px) {
      section[data-screen-label="stats"] { padding-top: var(--section-padding-y) !important; }
    }
    .deco-trend .t-runner { fill: var(--gray-0); }

    /* =====================================================
       ORANGE CARD HOVER - applied to all clickable cards
       White-bg cards  → full orange fill + white text
       Dark-bg cards   → full orange fill + white text
       Buttons inside  → invert to white/dark so they read
    ===================================================== */

    /* Case study cards (white bg) */
    .case { transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background .22s var(--ease-out), border-color .22s var(--ease-out); }
    .case:hover {
      background: var(--accent-main) !important;
      border-color: var(--accent-main) !important;
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(215,119,87,.35);
    }
    .case:hover .meta,
    .case:hover .client,
    .case:hover h4,
    .case:hover .wf,
    .case:hover .wf b,
    .case:hover .browse-cta { color: #fff !important; }
    .case:hover .c-badge { background: rgba(255,255,255,.25); color: #fff !important; }
    .case:hover .wf { border-top-color: rgba(255,255,255,.25) !important; }
    /* Browse card (dark navy) */
    .case.browse:hover { background: var(--accent-main) !important; border-color: var(--accent-main) !important; }
    .case.browse:hover .body { color: rgba(255,255,255,.85) !important; }

    /* Testimonial cards (white bg) */
    .tg-card { transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); cursor: pointer; }
    .tg-card:hover {
      background: var(--accent-main) !important;
      border-color: var(--accent-main) !important;
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(215,119,87,.35);
    }
    .tg-card:hover .tg-cat,
    .tg-card:hover .tg-company,
    .tg-card:hover .tg-quote,
    .tg-card:hover .tg-name,
    .tg-card:hover .tg-role { color: #fff !important; }
    .tg-card:hover .tg-foot { border-top-color: rgba(255,255,255,.25) !important; }

    /* Services cards (dark bg) - upgrade from subtle white to full orange */
    [data-screen-label="services"] .grid-cards .card:hover {
      background: var(--accent-main) !important;
      border-color: var(--accent-main) !important;
      cursor: pointer;
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(215,119,87,.4);
    }
    [data-screen-label="services"] .grid-cards .card:hover h4,
    [data-screen-label="services"] .grid-cards .card:hover p,
    [data-screen-label="services"] .grid-cards .card:hover .mono-tag,
    [data-screen-label="services"] .grid-cards .card:hover a { color: #fff !important; }

    /* Form inputs - orange focus border + dimmed placeholder */
    .form-input:focus, .form-textarea:focus {
      outline: none;
      background: var(--gray-0);
      border: 1.5px solid var(--primary-400) !important;
      box-shadow: 0 0 0 3px var(--primary-a20);
    }
    .form-input::placeholder, .form-textarea::placeholder {
      opacity: 0.65;
    }

    /* Audits section outline btn hover fix - white bg reveals white text otherwise */
    [data-screen-label="audits"] .btn--outline:hover {
      background: #fff !important;
      border-color: var(--accent-main) !important;
      color: var(--accent-main) !important;
    }
    [data-screen-label="audits"] .card:hover {
      background: var(--secondary-800) !important;
      border-color: var(--secondary-800) !important;
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(4,28,44,.4);
    }
    [data-screen-label="audits"] .card:hover h4,
    [data-screen-label="audits"] .card:hover p,
    [data-screen-label="audits"] .card:hover li,
    [data-screen-label="audits"] .card:hover .ck { color: #fff !important; }
    [data-screen-label="audits"] .card:hover .btn--primary {
      background: var(--primary-400) !important;
      border-color: var(--primary-400) !important;
      color: #fff !important;
    }
    /* ── Consistent hover: grey/muted text → white across all cards ── */
    .tg-card:hover .tg-date,
    .tg-card:hover .tg-role,
    .tg-card:hover .tg-cat,
    .tg-card:hover .tg-company { color: rgba(255,255,255,.75) !important; }
    .case:hover .meta { color: rgba(255,255,255,.7) !important; }
    .case:hover .client { color: #fff !important; }
    [data-screen-label="services"] .grid-cards .card:hover .text-muted { color: rgba(255,255,255,.8) !important; }
    [data-screen-label="services"] .grid-cards .card:hover .mono-tag { color: rgba(255,255,255,.7) !important; }
    [data-screen-label="audits"] .card:hover .ac-label { color: var(--accent-main) !important; }
    [data-screen-label="audits"] .card:hover .ac-q,
    [data-screen-label="audits"] .card:hover .ac-body { color: rgba(255,255,255,.9) !important; }
    /* Outline buttons - consistent 2px border + hover */
    .btn--outline, .btn--outline-inverse { border-width: 2px; }
    .btn--outline-inverse:hover { background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.65) !important; color: #fff !important; }

    /* Buttons inside hovered cards - invert so they stay readable */
    .case:hover .btn--primary,
    .tg-card:hover .btn--primary {
      background: #fff !important;
      border-color: #fff !important;
      color: var(--primary-400) !important;
    }
    [data-screen-label="services"] .grid-cards .card:hover .btn--primary,
    [data-screen-label="services"] .grid-cards .card:hover .text-accent {
      color: #fff !important;
    }
    .deco-flow { height: 120px; }
    .deco-flow .f-line { stroke: url(#fLine); stroke-width: 1.5; fill: none; }
    .fl-stop-0 { stop-color: var(--accent-main); stop-opacity: 0; }
    .fl-stop-1 { stop-color: var(--accent-main); stop-opacity: 0.55; }
    .fl-stop-2 { stop-color: var(--accent-main); stop-opacity: 0; }
    .deco-flow .f-glow {
      fill: url(#fGlow);
      transform-origin: center bottom;
      animation: f-breathe 6s var(--ease-in-out, ease-in-out) infinite;
    }
    @keyframes f-breathe { 0%,100% { opacity: 0.5; } 50% { opacity: 0.9; } }
    .deco-flow .f-spark { fill: var(--accent-main); filter: drop-shadow(0 0 6px var(--accent-main)); }
    /* =========================================================
       DOC REVIEW FIXES (Aug 2026)
       ========================================================= */
    /* L3 - hero eyebrow: double size + subtle solid background chip */
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      font-size: calc(var(--t-small) * 2);
      line-height: 1.1;
      font-weight: var(--weight-bold);
      letter-spacing: 0.06em;
      color: var(--accent-main);
      padding: 0;
      text-transform: uppercase;
      text-align: center;
      justify-content: center;
      width: auto;
      max-width: max-content;
      align-self: center;
    }
    /* beat the `.hero__content > * { width:100% }` stretch so the chip hugs its text */
    .hero__content > .hero-eyebrow { width: auto; max-width: max-content; align-self: center; }
    @media (max-width: 767px) {
      .hero-eyebrow { font-size: calc(var(--t-small) * 1.5); padding: 0; letter-spacing: 0.04em; }
    }

    /* L5 - hero verbs: bigger, own visual treatment (rule + spaced caps + dots) */
    .hero-verbs {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      flex-wrap: wrap;
      margin-top: var(--space-2);
      padding-top: var(--space-6);
      border-top: 1px solid rgba(255,255,255,0.18);
      font-family: var(--t-font-display);
      font-weight: 800;
      font-size: var(--text-xl);
      line-height: 1.2;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #fff;
    }
    .hero-verbs .hv-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--accent-main);
      flex: none;
    }

    /* L9 - service card icons (replace 01–08) */
    .svc-ico { display: flex; color: var(--accent-main); }
    .svc-ico svg { width: 30px; height: 30px; }
    [data-screen-label="services"] .grid-cards .card:hover .svc-ico { color: #fff; }

    /* L6 - breathing room + visual cue between the copy and the logo rows */
    .tb-header--spaced { margin-bottom: var(--space-12); }
    .tb-rule {
      max-width: var(--container-max);
      margin: 0 auto var(--space-10);
      padding: 0 var(--container-padding-x);
    }
    .tb-rule span {
      display: block;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 12%, rgba(255,255,255,0.22) 88%, transparent);
    }
    @media (max-width: 767px) {
      .tb-header--spaced { margin-bottom: var(--space-8); }
      .tb-rule { margin-bottom: var(--space-8); }
    }

    /* =========================================================
       PDF REVIEW FIXES (June 2026) - mostly mobile
       ========================================================= */

    /* C3 - hero verbs line readable on mobile */
    @media (max-width: 767px) {
      .hero-verbs { font-size: var(--text-base) !important; letter-spacing: 0.1em !important; gap: var(--space-3) !important; padding-top: var(--space-5) !important; }
    }

    /* C8 - big stat row on mobile: $500M+ alone, then 2-up rows */
    @media (max-width: 767px) {
      .bigstat-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--space-6); }
      .bigstat-row > :first-child { grid-column: 1 / -1; }
    }

    /* C11 - verticals H2 more airy on mobile */
    @media (max-width: 767px) {
      [data-screen-label="verticals"] > .container > h2 { line-height: 1.28; }
    }

    /* C4 - service stat cards centered + icon on mobile */
    .stat-ico { display: none; }
    @media (max-width: 767px) {
      .stat-card { align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-5); }
      .stat-ico {
        display: flex; align-items: center; justify-content: center;
        width: 92px; height: 92px; margin-bottom: var(--space-3);
        border-radius: 999px;
        background: #fff;
        box-shadow: var(--shadow-surface);
        color: var(--accent-main);
      }
      .stat-ico svg { width: 46px; height: 46px; }
      .stat-card .stat-card__value { color: var(--accent-main); }
      .stat-card .stat-card__label { max-width: 26ch; }
    }

    /* C12 - footer items min 14px, centered on mobile */
    @media (max-width: 767px) {
      .footer__link, .footer__tagline, .footer__copy { font-size: 14px !important; }
      .footer__grid { text-align: center; }
      .footer__links { align-items: center; }
      .footer__brand { align-items: center; }
      .footer__bottom { justify-content: center; text-align: center; }
    }
    /* C10 - committee "files" cards: kill the vertical slide (reads glitchy),
       and make the chips readable on the dark section */
    .files.reveal { transform: none; }
    [data-theme="dark-section"] .file .chip {
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.22);
      color: var(--text-on-dark);
    }
    /* C2 - hero proof cards (Version 2) */
    .hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: 880px; }
    .hero-proof__card {
      background: rgba(13,20,38,0.58);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      padding: var(--space-8) var(--space-12);
      min-height: 234px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: var(--radius-lg);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: center;
      gap: 0;
    }
    .hero-proof__metric { font-family: var(--t-font-display); font-weight: 800; font-size: calc(var(--text-4xl) * 1.1); color: var(--accent-main); line-height: 1; letter-spacing: -.02em; }
    .hero-proof__cap { color: var(--text-on-dark); font-weight: 700; font-size: var(--t-body); margin-top: 18px; }
    .hero-proof__txt { display: contents; }
    .hero-proof__sub { color: var(--text-on-dark-muted); font-size: var(--t-small); line-height: 1.45; margin-top: 32px; }
    @media (max-width: 767px) {
      .hero-proof { grid-template-columns: 1fr; gap: var(--space-3); max-width: 100%; }
      .hero-proof__card { flex-direction: row; align-items: center; gap: var(--space-4); flex-wrap: nowrap; padding: var(--space-5) var(--space-5); min-height: 0; justify-content: flex-start; text-align: left; }
      .hero-proof__metric { font-size: var(--text-3xl); min-width: 0; flex: none; }
      .hero-proof__txt { display: flex; flex-direction: column; gap: 4px; flex: 1; text-align: left; }
      .hero-proof__cap { flex: none; margin-top: 0; }
      .hero-proof__sub { flex: none; margin-top: 0; }
    }
    /* ===================== STICKY URGENCY BAR ===================== */
    .urgency-bar {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 900;
      background: var(--primary-400);
      box-shadow: 0 -6px 24px rgba(0,0,0,.22);
      transform: translateY(0);
      transition: transform .4s var(--ease-out);
    }
    .urgency-bar.is-hidden { transform: translateY(110%); }
    .urgency-bar__inner {
      max-width: var(--container-max, 1200px);
      margin: 0 auto;
      padding: 14px var(--container-padding-x, 24px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
    }
    .urgency-bar__text {
      margin: 0;
      display: flex;
      align-items: center;
      gap: var(--space-3);
      color: #fff;
      font-family: var(--t-font-body);
      font-size: var(--t-small);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      line-height: 1.35;
    }
    .urgency-bar__text strong { font-weight: 800; }
    .urgency-bar__dot {
      flex: none;
      width: 9px; height: 9px; border-radius: 999px;
      background: #fff;
      box-shadow: 0 0 0 0 rgba(255,255,255,.7);
      animation: urgency-pulse 1.8s ease-in-out infinite;
    }
    @keyframes urgency-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
      50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
    }
    .urgency-bar__actions { display: flex; align-items: center; gap: var(--space-4); flex: none; }
    .urgency-bar__cta {
      display: inline-flex;
      align-items: center;
      background: #fff;
      color: var(--primary-400);
      font-family: var(--t-font-body);
      font-weight: 700;
      font-size: var(--t-small);
      text-decoration: none;
      white-space: nowrap;
      height: 40px;
      padding: 0 var(--space-6);
      border-radius: 999px;
      transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out);
    }
    .urgency-bar__cta:hover { background: var(--secondary-800); color: #fff; transform: translateY(-1px); }
    .urgency-bar__close {
      flex: none;
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      border: none; background: rgba(255,255,255,.18); color: #fff;
      border-radius: 999px; cursor: pointer;
      transition: background .18s var(--ease-out);
    }
    .urgency-bar__close:hover { background: rgba(255,255,255,.34); }
    @media (max-width: 767px) {
      .urgency-bar__inner { padding: 10px var(--space-4); gap: var(--space-3); }
      .urgency-bar__text { font-size: 11px; letter-spacing: .02em; }
      .urgency-bar__cta { height: 36px; padding: 0 var(--space-4); font-size: 12px; }
    }
  /* sprite-ref icon sizing (stroke comes from the 1.2 sprite) */
    .audit-v5-card .ac-ico svg { width: 23px; height: 23px; flex: none; }
    .ind-a-go__svg { width: 14px; height: 14px; flex: none; }
    .nav-phone__svg { width: 15px; height: 15px; flex: none; }
    .nav-burger__svg { width: 22px; height: 22px; flex: none; }
    .urg-close__svg { width: 15px; height: 15px; flex: none; }
    .drawer-close__svg { width: 22px; height: 22px; flex: none; }
  

/* ==========================================================================
   CROSS-PAGE ALIGNMENT (homepage + healthcare + the rest of the cluster)
   ========================================================================== */

/* 1 · Inputs: one look everywhere. Pill radius matching the buttons, filled so
   a field never reads as empty space, and a border that is actually visible. */
.form-input,
.form-textarea {
  border-radius: var(--btn-radius);
  background: var(--gray-100);
  color: var(--gray-900);
  border: 1.5px solid var(--gray-300);
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--gray-500); opacity: 1; }
.form-input:hover,
.form-textarea:hover { border-color: var(--gray-400); background: var(--gray-50); }
.form-input:focus,
.form-textarea:focus,
.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: none;
  background: var(--gray-0);
  border: 1.5px solid var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-a20);
}
/* A full pill reads badly on a multi-line box, so textareas take a fixed 25px */
.form-textarea { border-radius: 25px; }
/* (the global .form-input rule above already supplies the contact-form look) */

/* 2 · Primary CTA: white-on-accent measures 3.48:1 at --primary-500, under the
   4.5:1 body gate. --primary-500 is 4.63:1 and reads the same orange family. */
.btn--primary { background: var(--primary-400); border-color: var(--primary-400); }
.btn--primary:hover { background: var(--primary-400); border-color: var(--primary-400); }
.btn--primary:active { background: var(--primary-400); border-color: var(--primary-400); }
.mega { background: var(--primary-400); }
.mega:hover { background: var(--primary-400); }
.mega:active { background: var(--primary-400); }


/* ==========================================================================
   RHYTHM + INTERACTION PASS (homepage v2 groundwork, applies cluster-wide)
   Pure presentation: no copy is added, removed or reworded anywhere.
   ========================================================================== */

/* 1 · Reading width. No h2 had a cap, so headings ran the full 1360px content
   box on desktop. 34ch keeps a display heading to two or three lines. */
main h2 { max-width: 75%; text-wrap: pretty; }
main .lead { max-width: 75%; text-wrap: pretty; }
/* Only genuinely centred contexts get auto margins. The trust bar is a
   left-aligned block, and auto margins there centred the capped heading, which
   read as a large indent against a flush-left eyebrow and lead. */
main [style*="text-align:center"] h2,
main [style*="text-align: center"] h2,
main .hero__content h2 { margin-inline: auto; }
/* every other heading and lead stays flush to the left edge of its container */
main h2, main .lead { margin-inline: 0; }

/* 2 · One hover language for every card-like surface. Previously each component
   invented its own, so the page felt inconsistent rather than crafted. */
.card, .case, .stat-card, .tg-card, .ind-a, .hc-door, .hc-case, .logo-tile,
.prob-card, .comp-card, .svcd-card, .hc-acard, .audit-v5-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              border-color var(--transition-base), background var(--transition-base);
}
a.card:hover, a.case:hover, a.ind-a:hover, a.hc-door:hover, a.hc-case:hover,
a.logo-tile:hover, a.svcd-card:hover, a.tg-card:hover {
  transform: translateY(-4px);
}

/* accent rule that grows from the left on the top edge of a hovered card */
a.ind-a, a.hc-door, a.hc-case, a.case, a.svcd-card { position: relative; overflow: hidden; }
a.ind-a::after, a.hc-door::after, a.hc-case::after, a.case::after, a.svcd-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-main); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-base);
}
a.ind-a:hover::after, a.hc-door:hover::after, a.hc-case:hover::after,
a.case:hover::after, a.svcd-card:hover::after { transform: scaleX(1); }

/* the number lights up with the card */
a.ind-a .ind-num, a.case .meta, a.hc-case .hc-case__client { transition: color var(--transition-base); }
a.ind-a:hover .ind-num { color: var(--accent-main); }

/* any trailing arrow slides */
a:hover > .ind-a-go svg, a:hover > .hc-door__go svg, a:hover > .hc-case__go svg,
a:hover > .svcd-card__go svg, a:hover .browse-cta { transition: transform var(--transition-base); }


/* The audit CTAs are nowrap by default, so their intrinsic width floored the
   grid tracks above. Allowing them to wrap keeps min-content small. */
.audit-v5-card .btn { white-space: normal; overflow-wrap: anywhere; }


/* the active question is navy; .faq-q-text has its own colour and would
   otherwise render navy on navy */
.faq-q.active .faq-q-text { color: var(--text-on-dark); }


/* the navbar CTA hover took a darker brick fill; a white border reads cleaner
   against the navy bar and leaves the brand orange intact */
#navbar .btn--primary:hover {
  background: var(--accent-main) !important;
  border-color: #fff !important;
  box-shadow: none !important;
}


/* navbar logo, 25% larger: components.css caps .navbar__logo at 32px */
#navbar .navbar__logo { max-height: 40px; }
#navbar .navbar__logo img { height: 35px; max-height: 40px; width: auto; }


/* FAQ single-column inline accordion, same concept as the vertical pages */
.faq-split { display: block !important; }
.faq-panel { display: none !important; }
.faq-q-list { max-width: 76ch; }
.faq-a-inline {
  display: none;
  padding: 0 var(--space-6) var(--space-6) 3.2ch;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 72ch;
}
.faq-q.active + .faq-a-inline { display: block; }
.faq-q.active + .faq-a-inline a { color: var(--accent-main); font-weight: var(--weight-semibold); }
.faq-q.active { background: none; color: var(--text-heading); border-radius: 0; padding-left: var(--space-6); }
.faq-q.active .faq-q-text { color: var(--accent-main); }
.faq-q.active::before { color: var(--accent-main); }


/* ==========================================================================
   The sticky urgency bar is position:fixed, so it occupies no space in flow and
   permanently covers the end of the document. The page needs bottom clearance
   equal to the bar's real height, not a fixed guess: its text wraps to two lines
   below ~1000px, so the bar is taller there than at desktop. --urgency-h is
   published by script from the measured height; the fallback covers the case
   where script has not run yet.
   ========================================================================== */
body { padding-bottom: var(--urgency-h, 96px); }
/* once dismissed the clearance goes with it */
body:has(#urgency-bar) { padding-bottom: var(--urgency-h, 96px); }
body:not(:has(#urgency-bar)) { padding-bottom: 0; }


/* ==========================================================================
   FAQ · the card treatment retired for good
   Step 14 turned the split panel into an in-place accordion, but the base
   .faq-q rule still painted every question as a bordered card and the open
   answer still carried a navy block from the earlier panel design. That is why
   the list read as a stack of unfinished boxes. The list is now a plain index:
   hairline dividers, no surfaces, no fills.
   ========================================================================== */
.faq-q-list { gap: 0 !important; border-top: 1px solid var(--border-default); }
.faq-item-wrap { border-bottom: 1px solid var(--border-default); }
.faq-q {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--space-6) var(--space-2) !important;
  color: var(--text-heading) !important;
  transition: padding-left var(--transition-base), background var(--transition-base);
}
.faq-q:hover:not(.active) {
  background: linear-gradient(90deg, rgba(245, 101, 56,.06), transparent 60%) !important;
  border-color: transparent !important;
  color: var(--text-heading) !important;
  padding-left: var(--space-6) !important;
}
.faq-q:hover:not(.active) .faq-q-text { color: var(--accent-main); }
.faq-q.active + .faq-a-inline,
.faq-q[aria-expanded="true"] + .faq-a-inline {
  display: block;
  background: none !important;
  color: var(--text-muted) !important;
  font-size: var(--t-small);
  line-height: 1.7;
  padding: 0 var(--space-6) var(--space-6) var(--space-6);
  max-width: 72ch;
}
.faq-q.active + .faq-a-inline a,
.faq-q[aria-expanded="true"] + .faq-a-inline a { color: var(--accent-main); font-weight: var(--weight-semibold); }


/* the retired FAQ panel still drew its own border and rounded corners, leaving a
   3-sided navy outline on the light surface and a second rule 1px above the
   item hairline. The box goes with the fill. */
.faq-q.active + .faq-a-inline,
.faq-q[aria-expanded="true"] + .faq-a-inline {
  border: none !important;
  border-radius: 0 !important;
}


/* ==========================================================================
   Anchor landings clear the fixed chrome
   href="#audits" was correct, but a fixed navbar plus the staging bar sit over
   the top of whatever the anchor lands on, so the section heading was hidden and
   the user arrived mid-block. Every anchor target now reserves that height,
   driven off the same --nav-total the sticky panels use, so the top of the
   section is the first thing visible.
   ========================================================================== */
:target, main > section[id], .faq-item-wrap[id] {
  scroll-margin-top: calc(var(--nav-total, 112px) + var(--space-6));
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ==========================================================================
   FAQ · Option A, full-width inline accordion
   The split panel put the answer in a column that was not visually tied to the
   row that produced it, and the two-column index left the section unbalanced.
   One list at full width: the answer opens directly under its question,
   indented to the text column, with a round toggle that turns orange when open.
   ========================================================================== */
.faq-split { display: block !important; }
.faq-panel { display: none !important; }
.faq-q-list { columns: auto !important; column-gap: normal !important; max-width: 900px; margin: 0 auto; border-top: 1px solid var(--border-default); }
.faq-item-wrap { border-bottom: 1px solid var(--border-default); break-inside: auto; }
.faq-q {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-6) 0 !important;
  border: none !important;
  border-left: none !important;
  background: none !important;
  text-align: left;
}
.faq-q-text { font-size: var(--t-body); font-weight: 700; color: var(--text-heading); }
.faq-q:hover .faq-q-text { color: var(--accent-main); }
.faq-q.active .faq-q-text { color: var(--text-heading) !important; }
/* the round toggle: grey plus, orange x when open */
.faq-q::after {
  content: "";
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-section-alt);
  background-image: linear-gradient(var(--text-muted), var(--text-muted)), linear-gradient(var(--text-muted), var(--text-muted));
  background-size: 12px 2px, 2px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: background-color var(--transition-base), background-size var(--transition-base), transform var(--transition-base);
}
.faq-q.active::after {
  background-color: var(--accent-main);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 12px 2px, 2px 12px;
  transform: rotate(45deg);
}
.faq-q.active + .faq-a-inline,
.faq-q[aria-expanded="true"] + .faq-a-inline {
  display: block;
  border: none !important;
  background: none !important;
  color: var(--text-muted) !important;
  font-size: var(--t-small);
  line-height: 1.75;
  padding: 0 var(--space-16) var(--space-6) var(--space-8) !important;
  max-width: 74ch;
}

/* the accordion runs the container width, not a 900px column */
.faq-q-list { max-width: none !important; margin: 0 !important; }


/* item 19 · muted body text on dark sections was rgba(255,255,255,.5), which
   fails AA on #041C2C. One raise to .78 covers services, stats captions, the
   filmstrip, the motto lede and two-paths in a single change. */
[data-theme="dark-section"] .text-muted,
.hc-dark .text-muted,
[data-screen-label="services"] .text-muted { color: rgba(255,255,255,0.78) !important; }


/* ==========================================================================
   HOVER SYNC · one duration for the surface and everything on it
   The lag was not a slow animation, it was two speeds. The card transitions its
   background over .22s, but the text, icons, badges and rules inside it had NO
   transition at all, so they snapped to white instantly and the orange fill
   arrived a fifth of a second later. That reads as a flash, then a fill.
   Every child now shares the parent's duration and easing, so the whole card
   changes as one object. Applied to every card-like component in the cluster.
   ========================================================================== */
.case, .tg-card, .hc-case, .hc-door, .hc-svc, .svcd-card, .aw-item,
[data-screen-label="services"] .grid-cards .card,
[data-screen-label="find-your-service"] .grid-cards .card,
[data-screen-label="audits"] .card {
  transition: background-color .22s var(--ease-out), border-color .22s var(--ease-out),
              transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
/* Children change exactly one property on hover: colour. Naming them and
   transitioning colour alone keeps the count low, where the universal selector
   put six transitions including transform on every descendant and asked the
   compositor for hundreds of layers. That was the remaining lag. */
.case h4, .case p, .case .meta, .case .client, .case .wf, .case .wf b, .case .browse-cta, .case .c-badge,
.tg-card .tg-cat, .tg-card .tg-company, .tg-card .tg-quote, .tg-card .tg-name, .tg-card .tg-role, .tg-card .tg-date,
.hc-case .hc-case__client, .hc-case .hc-case__head, .hc-case .hc-case__go,
.hc-door .hc-door__name, .hc-door .hc-door__sub, .hc-door .hc-door__go,
.hc-svc .hc-svc__name, .hc-svc .hc-svc__body, .hc-svc .hc-svc__go,
.svcd-card .svcd-card__name, .svcd-card .svcd-card__body, .svcd-card .svcd-card__go,
.aw-item .aw-item__name, .aw-item .aw-item__line,
[data-screen-label="services"] .grid-cards .card h4,
[data-screen-label="services"] .grid-cards .card p,
[data-screen-label="services"] .grid-cards .card .text-muted,
[data-screen-label="services"] .grid-cards .card .text-accent,
[data-screen-label="services"] .grid-cards .card .mono-tag,
[data-screen-label="services"] .grid-cards .card .svc-ico,
[data-screen-label="find-your-service"] .grid-cards .card h4,
[data-screen-label="find-your-service"] .grid-cards .card p,
[data-screen-label="find-your-service"] .grid-cards .card .text-muted,
[data-screen-label="find-your-service"] .grid-cards .card .text-accent,
[data-screen-label="find-your-service"] .grid-cards .card .svc-ico,
[data-screen-label="audits"] .card h4,
[data-screen-label="audits"] .card p,
[data-screen-label="audits"] .card li,
[data-screen-label="audits"] .card .ac-label,
[data-screen-label="audits"] .card .ac-q,
[data-screen-label="audits"] .card .ac-body {
  transition: color .22s var(--ease-out);
}
/* arrows keep their own slide, same clock */
.case:hover .browse-cta, .svcd-card:hover .svcd-card__go svg,
.hc-door:hover .hc-door__go svg, .hc-case:hover .hc-case__go svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .case, .tg-card, .hc-case, .hc-door, .hc-svc, .svcd-card, .aw-item,
  [data-screen-label="services"] .grid-cards .card,
  [data-screen-label="find-your-service"] .grid-cards .card,
  [data-screen-label="audits"] .card { transition: none; }
}


/* the hover fill, declared once */
.case:hover, .tg-card:hover,
[data-screen-label="services"] .grid-cards .card:hover,
[data-screen-label="find-your-service"] .grid-cards .card:hover { background: var(--accent-main); }


/* ==========================================================================
   HOVER FILL · children go navy, not white
   The fill is #F56538 by settled decision. White small copy on it measures
   3.07:1 and 70%-white about 1.9:1. Navy --secondary-800 measures 5.36:1 on the
   same orange and is already what this project uses for small text on the audit
   band, so the fill stays and the text inverts. Stated last, at ID weight where
   an ID rule would otherwise win, so nothing needs !important.
   ========================================================================== */
/* only the badge takes the translucent pill; the text children must not, or a
   white plate is painted behind every line. The white-text rules below own the
   copy colour on the fill. */
.case:hover .c-badge, #cases .case:hover .c-badge {
  background: rgba(255,255,255,.32);
  color: var(--secondary-800) !important;
}
/* hairlines inside the card follow the same inversion */
.case:hover .wf, #cases .case:hover .wf { border-top-color: rgba(4,28,44,.28) !important; }

/* the button on a hovered card inverts too */
.case:hover .btn--primary, .tg-card:hover .btn--primary {
  background: var(--secondary-800) !important;
  border-color: var(--secondary-800) !important;
  color: #fff !important;
}


/* the services grid hovers to the same #F56538 fill as the case cards, so it
   takes the same navy inversion. Alphas dropped: 0.8 white composites to 2.48
   and 0.7 to 2.21 on this orange, where solid navy is 5.63. */
[data-screen-label="services"] .grid-cards .card:hover h4,
[data-screen-label="services"] .grid-cards .card:hover p,
[data-screen-label="services"] .grid-cards .card:hover .text-muted,
[data-screen-label="services"] .grid-cards .card:hover .text-accent,
[data-screen-label="services"] .grid-cards .card:hover .mono-tag,
[data-screen-label="services"] .grid-cards .card:hover .svc-ico,
[data-screen-label="find-your-service"] .grid-cards .card:hover h4,
[data-screen-label="find-your-service"] .grid-cards .card:hover p,
[data-screen-label="find-your-service"] .grid-cards .card:hover .text-muted,
[data-screen-label="find-your-service"] .grid-cards .card:hover .text-accent,
[data-screen-label="find-your-service"] .grid-cards .card:hover .mono-tag,
[data-screen-label="find-your-service"] .grid-cards .card:hover .svc-ico {
  color: var(--secondary-800) !important;
  opacity: 1;
}


/* Services hover: white text and icon on the orange fill, per instruction.
   This reverses the navy inversion for the services grids only; the case cards
   and testimonials keep navy. Solid white, no alpha, so the small copy holds as
   much contrast as the bright orange allows (3.09:1). */
[data-screen-label="services"] .grid-cards .card:hover h4,
[data-screen-label="services"] .grid-cards .card:hover p,
[data-screen-label="services"] .grid-cards .card:hover .text-muted,
[data-screen-label="services"] .grid-cards .card:hover .text-accent,
[data-screen-label="services"] .grid-cards .card:hover .mono-tag,
[data-screen-label="services"] .grid-cards .card:hover .svc-ico,
[data-screen-label="find-your-service"] .grid-cards .card:hover h4,
[data-screen-label="find-your-service"] .grid-cards .card:hover p,
[data-screen-label="find-your-service"] .grid-cards .card:hover .text-muted,
[data-screen-label="find-your-service"] .grid-cards .card:hover .text-accent,
[data-screen-label="find-your-service"] .grid-cards .card:hover .mono-tag,
[data-screen-label="find-your-service"] .grid-cards .card:hover .svc-ico {
  color: #fff !important;
  opacity: 1;
}


/* the FAQ answer runs the full width of the row, finishing level with the
   toggle rather than stopping at a 72ch measure well short of it */
.faq-q.active + .faq-a-inline,
.faq-q[aria-expanded="true"] + .faq-a-inline {
  max-width: none !important;
  padding-right: var(--space-6) !important;
}


/* the committee chips and case badges were light grey on white, which reads as
   an unstyled default rather than a decision. Stated last so the accent tint
   wins wherever a page-level grey rule was set. */
.file .chip {
  background: color-mix(in srgb, var(--accent-main) 10%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-main) 45%, transparent) !important;
  color: var(--primary-700) !important;
}
/* the white chip variant is gated on the real dark context, never on a card
   position: f1 and f2 are white cards on a light section, so keying off their
   class made six chips white-on-white */
[data-theme="dark-section"] .file .chip {
  background: rgba(255,255,255,.10) !important;
  border: 1.5px solid rgba(255,255,255,.30) !important;
  color: var(--text-on-dark) !important;
}
.case .c-badge, #cases .c-badge {
  background: color-mix(in srgb, var(--accent-main) 12%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-main) 40%, transparent) !important;
  color: var(--primary-700) !important;
}


/* the FAQ row is number / question / toggle in a space-between flex, which
   pushed the question to the centre of the leftover space. The text takes the
   free space instead, so it starts immediately after the number. */
.faq-q .faq-q-text,
[data-screen-label="faq"] .faq-q .faq-q-text {
  flex: 1 1 auto !important;
  text-align: left !important;
  min-width: 0;
}


/* the FAQ numerals lose the filled disc: plain orange digits, no background */
/* the FAQ numerals take the homepage treatment on every page: muted grey mono
   digits at caption size, normal weight, no disc */
.faq-q::before,
[data-screen-label="faq"] .faq-q::before {
  background: none !important;
  color: var(--text-muted) !important;
  font-family: var(--t-font-mono) !important;
  font-size: var(--t-caption) !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  min-width: 2ch;
  border-radius: 0 !important;
}


/* the audits CTA lands on the content, not the section box: data-chapter="open"
   adds up to 104px of top padding, which would put the pill and heading below
   the fold. The inline anchor sits where the container starts. */
#audits-top { display: block; scroll-margin-top: calc(var(--nav-total, 112px) + var(--space-6)); }


/* the committee file grid had no breakpoints: repeat(6, 1fr) applied on phones
   too, so each card became a sliver of unreadable vertical text. Column count
   now follows the width, and the span overrides go with it. */
@media (max-width: 899px) {
  .files { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-5) !important; }
  .files .file, .file.f1, .file.f2, .file.f3, .file.f4, .file.f5 { grid-column: 1 / -1 !important; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .files { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .file.f1, .file.f2, .file.f3, .file.f4, .file.f5 { grid-column: auto !important; }
  .file.f5 { grid-column: 1 / -1 !important; }
}


/* ==========================================================================
   TEXT WIDTH CAPS ARE A DESKTOP MEASURE ONLY
   Every heading and lead cap in this codebase was authored to stop long lines on
   a 1400px canvas. They were never gated, so on a 390px phone a 75% cap leaves a
   quarter of the screen empty and breaks two-word headlines onto two lines, and
   ch caps do the same to body copy. Below 900px the viewport is already the
   measure, so every cap is released. Emitted last so no page-level rule survives.
   ========================================================================== */
@media (max-width: 899px) {
  main h1, main h2, main h3,
  main .lead, main p,
  .hero h1, .audit-hero h2, .audit-hero .lead,
  .motto-lede, .team-line, .prob-close, .film-foot .l,
  .hc-h2, .hc-lead, .hc-hero__sub, .hc-audits .hc-h2, .hc-audits .hc-lead,
  .acc-b p, .aud-note, .pane-cap,
  #audits .lead, #audits2 .lead, #audits .acc-b p, #audits2 .acc-b p,
  #problem > .container > .hc-lead,
  .hero-proof__sub, .topform__intro h2, .topform__intro .lead,
  [data-screen-label="verticals"] .container > h2,
  [data-screen-label="verticals"] .container > .lead,
  [data-screen-label="founders"] .team-foot .lead,
  .tg-quote, .svcd-card__body, .wf-item__b, .hc-flow__b,
  .faq-q.active + .faq-a-inline,
  .faq-q[aria-expanded="true"] + .faq-a-inline {
    max-width: 100% !important;
  }
  /* two-word headlines should not break while space remains beside them */
  main h1, main h2, .hc-h2, .audit-hero h2 { text-wrap: balance; }
}


/* the homepage team rail is a horizontal scroller with fixed-width cards, so on
   a wide screen five cards stop short of the container. Above 1100px it fills
   the row instead; the scroll rail stays for narrower widths. */
@media (min-width: 1100px) {
  .team-board {
    overflow-x: visible;
    scroll-snap-type: none;
    justify-content: stretch;
    padding-left: 0;
    padding-right: 0;
    gap: var(--space-5);
  
    position: static; left: auto; width: auto; max-width: none; margin-left: 0; margin-right: 0;
  }
  .team-board > * { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
  .team-board::after { display: none; }
}


/* ==========================================================================
   H2 and H3 use the full container width (Michael, round 3)
   main h2 was capped at 75%, which on a 1440 layout wrapped headings that fit
   on one line. Subheadings now run the full measure; the hero H1 keeps its own
   balance rule.
   ========================================================================== */
main h2, main h3 { max-width: 100% !important; }
main .lead { max-width: 100% !important; }
/* the trust-bar claim is the one Michael wants on a single line */
[data-screen-label="trust-bar"] h2 { max-width: 100% !important; text-wrap: nowrap; }
@media (max-width: 1100px) { [data-screen-label="trust-bar"] h2 { text-wrap: balance; } }


/* ==========================================================================
   Testimonial and case cards · white type on the orange hover, stated last
   An earlier round set navy on hover; that rule sat later in the cascade and
   won, so every line went dark on the brand orange. White is emitted last here
   and covers the date and role that the first white rule missed.
   ========================================================================== */
.tg-card:hover, .tg-card:hover *,
.case:hover, .case:hover * { color: #fff !important; }
.tg-card:hover .tg-date, .tg-card:hover .tg-role,
.tg-card:hover .tg-cat { color: rgba(255,255,255,.86) !important; }
.tg-card:hover .tg-foot, .case:hover .tg-foot { border-top-color: rgba(255,255,255,.28) !important; }
.tg-card:hover .btn--primary, .case:hover .btn--primary {
  background: #fff !important; border-color: #fff !important; color: var(--secondary-800) !important;
}


/* the restored trust-bar marquee pauses on hover and on keyboard focus, so a
   visitor can read a mark instead of chasing it */
.logo-marquee-row:hover .logo-marquee-track,
.logo-marquee-row:focus-within .logo-marquee-track { animation-play-state: paused; }


/* the trust-bar pills are links to their case studies, so the anchor needs the
   pill's own layout back and a hover that says it is clickable */
a.client-logo-pill { text-decoration: none; cursor: pointer; }
a.client-logo-pill:hover { border-color: var(--accent-main); }
a.client-logo-pill:focus-visible { outline: 2px solid var(--accent-main); outline-offset: 2px; }
.lw-more { margin: var(--space-8) 0 0; text-align: center; }.lw-more a { font-size: var(--t-small); font-weight: var(--weight-semibold); color: var(--accent-main); text-decoration: none; }
.lw-more a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* the duplicate marquee half is wrapped so it can be marked decorative without
   hiding the real one; display:contents lets its pills sit in the same flex row */
.lm-dupe { display: contents; }