/* ============================================================
       ORPINGTON DESIGN SYSTEM
       Brand: Deep Slate Navy / Warm Parchment / Precision Emerald / Aged Gold
       Vertical: B2B ERP Consulting — Authority + Approachability
       Archetype: The Sage — wisdom, precision, trustworthy expertise
    ============================================================ */
    :root {
      /* — PALETTE — */
      --ink:          #0C1521;   /* near-black with blue undertone */
      --navy:         #152236;   /* deep authority navy */
      --navy-mid:     #1C2F45;
      --navy-soft:    #243750;
      --slate:        #344E68;   /* warm slate for cards */
      --emerald:      #1A6B45;
      --emerald-mid:  #1F7D52;
      --emerald-glow: #24976A;
      --emerald-on-dark: #2FA97C;  /* emerald-glow is 4.35:1 on navy — this clears AA */
      --emerald-lite: rgba(36,151,106,0.12);
      --gold:         #B8922A;   /* aged gold — authority signal */
      --gold-lite:    #C9A84C;
      --parchment:    #F6F2EB;   /* warm editorial white */
      --parchment-2:  #EDE8DF;
      --parchment-3:  #E0D9CE;
      --white:        #FFFFFF;
      --text-primary: #1A2535;
      --text-mid:     #4A5568;
      --text-soft:    #718096;
      --text-ghost:   #A0AEC0;

      /* — TYPOGRAPHY OPTION A (Playfair + DM Sans) — */
      --font-display: "Playfair Display", Georgia, serif;
      --font-body:    "DM Sans", system-ui, sans-serif;
      --font-mono:    "DM Mono", monospace;

      /* — SPACING — */
      --max-w: 1180px;
      --section-py: clamp(4.5rem, 9vw, 8rem);

      /* — EFFECTS — */
      --shadow-sm:   0 2px 12px rgba(12,21,33,0.08);
      --shadow-md:   0 8px 32px rgba(12,21,33,0.12);
      --shadow-lg:   0 20px 60px rgba(12,21,33,0.18);
      --shadow-hero: 0 32px 80px rgba(12,21,33,0.28);
      --radius:      10px;
      --radius-lg:   18px;
      --radius-pill: 999px;
      --ease:        cubic-bezier(0.4,0,0.2,1);
      --dur:         0.3s;
    }


    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    body { font-family: var(--font-body); background: var(--parchment); color: var(--text-primary); font-size: 16px; line-height: 1.7; overflow-x: hidden; }
    img  { display: block; max-width: 100%; height: auto; }
    a    { color: inherit; text-decoration: none; }

    /* ============================================================ TYPOGRAPHY */
    .eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--emerald-glow);
    }
    .eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.38rem 1rem;
      background: rgba(36,151,106,0.1);
      border: 1px solid rgba(36,151,106,0.22);
      border-radius: var(--radius-pill);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--emerald-glow);
    }
    .eyebrow-pill-dark {
      background: rgba(36,151,106,0.15);
      border-color: rgba(36,151,106,0.28);
      color: var(--emerald-glow);
    }
    .eyebrow-dot {
      width: 5px; height: 5px;
      background: var(--emerald-glow);
      border-radius: 50%;
      display: inline-block;
    }
    h1, .h1 {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 5.5vw, 5rem);
      font-weight: 400;
      line-height: 1.06;
      letter-spacing: -0.02em;
      color: var(--white);
    }
    h1 em, .h1 em { font-style: italic; color: var(--emerald-glow); font-weight: 400; }
    h2, .h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 3.8vw, 3.2rem);
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.015em;
    }
    h2 em, .h2 em { font-style: italic; }
    h3, .h3 {
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 2.2vw, 1.75rem);
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: -0.01em;
    }
    .body-lg { font-size: 1.05rem; line-height: 1.78; color: var(--text-mid); }
    .body    { font-size: 0.94rem; line-height: 1.72; color: var(--text-mid); }
    .mono    { font-family: var(--font-mono); }
    .score-num {
      font-family: var(--font-mono);
      font-size: clamp(2.8rem, 5vw, 4.5rem);
      font-weight: 500;
      color: var(--emerald-glow);
      line-height: 1;
    }

    /* ============================================================ LAYOUT */
    .container { max-width: var(--max-w); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
    .section   { padding-block: var(--section-py); }
    .text-center { text-align: center; }

    /* ============================================================ NAV */
    .nav {
      position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200;
      padding-block: 1rem;
      background: rgba(12,21,33,0.96);
      backdrop-filter: blur(16px) saturate(1.4);
      transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }
    .nav.scrolled {
      box-shadow: 0 1px 0 rgba(255,255,255,0.06);
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      max-width: var(--max-w); margin-inline: auto;
      padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    }
    .nav-logo {
      display: flex; align-items: center; gap: 0.65rem;
      /* Flex items shrink by default when their siblings' combined
         content is wider than .nav-inner. The logo image's height stays
         a fixed 68px (below) while a shrunk container caps its width via
         the global `img{max-width:100%}` reset, so if the logo were ever
         allowed to shrink that would squeeze its width without its
         height, visibly distorting the aspect ratio. The logo must never
         be the thing that gives. */
      flex-shrink: 0;
    }
    .nav-logo-img { height: 68px; width: auto; display: block; }
    .nav-links { display: flex; align-items: center; gap: 1.55rem; list-style: none; }
    /* Flex items shrink by default, but only down to their content's
       natural min-content width (roughly the longest unbreakable word) --
       min-width:0 overrides that, so a link is actually allowed to
       shrink further and wrap its text onto a second line instead of
       forcing the whole row wider (or squeezing the logo -- see
       .nav-logo above). The pill button is excluded below -- a wrapped
       2-line pill looks broken, so it keeps its natural width instead
       and everything else wraps around it if the row gets tight. */
    .nav-links li { min-width: 0; }
    .nav-links li:has(> .nav-btn) { flex-shrink: 0; min-width: auto; }
    .nav-links a {
      font-size: 0.83rem; font-weight: 500; letter-spacing: 0.04em;
      color: rgba(255,255,255,0.68);
      transition: color var(--dur);
      /* Plain nav labels are allowed to wrap onto a second line -- see
         the min-width:0 comment above. overflow-wrap/word-break are the
         backstop for a single very long unbreakable word, forcing a
         mid-word break rather than ever pushing the row wider than its
         container. */
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      text-align: center;
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a.nav-btn {
      /* The pill stays a single line always -- its <li> is exempted from
         shrinking above, so there's no tight space forcing a wrap here
         in the first place. */
      white-space: nowrap;
    }
    .nav-btn {
      background: var(--emerald); color: var(--white) !important;
      padding: 0.52rem 1.3rem; border-radius: var(--radius-pill);
      font-size: 0.8rem !important; font-weight: 600 !important;
      letter-spacing: 0.06em !important; text-transform: uppercase;
      transition: background var(--dur), transform var(--dur) !important;
    }
    .nav-btn:hover { background: var(--emerald-mid) !important; transform: translateY(-1px); }

    /* ============================================================ MOBILE NAV */
    .mobile-menu-toggle {
      display: none; background: none; border: none; cursor: pointer;
      width: 40px; height: 40px; padding: 0; position: relative; z-index: 320;
    }
    .mobile-menu-toggle span {
      display: block; position: absolute; inset-inline-start: 8px; width: 24px; height: 2px;
      background: var(--white); border-radius: 2px;
      transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), inset-block-start var(--dur) var(--ease);
    }
    .mobile-menu-toggle span:nth-child(1) { inset-block-start: 14px; }
    .mobile-menu-toggle span:nth-child(2) { inset-block-start: 20px; }
    .mobile-menu-toggle span:nth-child(3) { inset-block-start: 26px; }
    .mobile-menu-toggle.open span:nth-child(1) { inset-block-start: 20px; transform: rotate(45deg); }
    .mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.open span:nth-child(3) { inset-block-start: 20px; transform: rotate(-45deg); }
    .mobile-menu-panel {
      /* Deliberately physical `right` (not inset-inline-end): this panel
         is hidden off-canvas via a physical translateX(100%), which only
         clears the viewport when its anchor edge is a fixed physical
         side. */
      position: fixed; inset-block: 0; right: 0; width: min(320px, 84vw);
      background: var(--navy); box-shadow: -12px 0 40px rgba(0,0,0,0.35);
      transform: translateX(100%); transition: transform 0.32s var(--ease);
      /* Above .cookie-banner's z-index (300) -- when the mobile menu is
         open it's a full modal-style overlay, so it should fully cover
         the cookie banner rather than have the banner sit on top of its
         lowest rows. */
      z-index: 310; display: flex; flex-direction: column;
      padding: 5.5rem 2rem 2rem;
      /* Scrollable so the panel's own content can never get cut off on
         shorter phone screens. */
      overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .mobile-menu-panel.open { transform: translateX(0); }
    .mobile-menu-close {
      position: absolute; top: 1.3rem; right: 1.3rem;
      width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 50%; cursor: pointer; color: var(--parchment);
      transition: background var(--dur), transform var(--dur);
    }
    .mobile-menu-close:hover { background: rgba(255,255,255,0.14); transform: rotate(90deg); }
    .mobile-menu-close svg { width: 16px; height: 16px; }
    .mobile-menu-panel a {
      display: block; padding: 1rem 0; font-size: 1.05rem; font-weight: 600;
      color: var(--parchment); border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .mobile-menu-panel .nav-btn {
      display: inline-block; margin-block-start: 1.5rem; text-align: center;
    }
    .mobile-menu-overlay {
      position: fixed; inset: 0; background: rgba(12,21,33,0.6);
      z-index: 305; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
    }
    .mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }

    /* ============================================================ BUTTONS */
    .btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: var(--font-body); font-weight: 600;
      letter-spacing: 0.05em; text-transform: uppercase;
      border-radius: var(--radius-pill); cursor: pointer;
      transition: all var(--dur) var(--ease); border: none;
    }
    .btn-lg  { font-size: 0.88rem; padding: 1rem 2.2rem; }
    .btn-md  { font-size: 0.8rem;  padding: 0.7rem 1.6rem; }
    .btn-sm  { font-size: 0.74rem; padding: 0.52rem 1.2rem; }
    .btn-primary {
      background: var(--emerald); color: var(--white);
      box-shadow: 0 4px 20px rgba(26,107,69,0.28);
    }
    .btn-primary:hover {
      background: var(--emerald-mid);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(26,107,69,0.38);
    }
    .btn-ghost-light {
      background: transparent; color: rgba(255,255,255,0.75);
      border: 1.5px solid rgba(255,255,255,0.22);
    }
    .btn-ghost-light:hover {
      color: var(--white); border-color: rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.06);
    }
    .btn-outline-dark {
      background: transparent; color: var(--navy);
      border: 1.5px solid rgba(21,34,54,0.3);
    }
    .btn-outline-dark:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
    .btn-gold {
      background: var(--gold); color: var(--white);
      box-shadow: 0 4px 18px rgba(184,146,42,0.28);
    }
    .btn-gold:hover { background: var(--gold-lite); transform: translateY(-2px); }
    .btn-rescue {
      background: transparent; color: #8B2215;
      border: 1.5px solid rgba(139,34,21,0.3);
    }
    .btn-rescue:hover { background: #8B2215; color: var(--white); }
    .btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }

    /* ============================================================ HERO */
    .hero {
      position: relative; min-height: 100svh;
      display: flex; align-items: center;
      background: var(--ink);
      overflow: hidden;
    }
    /* Layered background atmosphere */
    .hero::before {
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 75% 55% at 65% 35%, rgba(26,107,69,0.14) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(21,34,54,0.8) 0%, transparent 70%),
        linear-gradient(160deg, #0C1521 0%, #152236 50%, #0C1521 100%);
      pointer-events: none;
    }
    /* Fine grid texture */
    .hero::after {
      content: "";
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, black 0%, transparent 80%);
    }
    .hero-inner { position: relative; z-index: 2; width: 100%; }
    .hero-grid {
      display: grid; grid-template-columns: 1fr;
      justify-items: center; text-align: center;
      padding-block: clamp(7rem, 13vw, 11rem) clamp(4rem, 7vw, 6rem);
    }
    .hero-content { max-width: 720px; }
    .hero-pre { margin-block-end: 1.8rem; }
    .hero-title { margin-block: 1.4rem 1.6rem; }
    .hero-sub {
      font-size: 1.06rem; line-height: 1.76;
      color: rgba(246,242,235,0.65); max-width: 560px;
      margin-inline: auto;
      margin-block-end: 2.4rem;
    }
    .hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.9rem; margin-block-end: 2.4rem; }
    .hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-block-end: 3rem; }
    .trust-item {
      display: flex; align-items: center; gap: 0.4rem;
      font-family: var(--font-mono);
      font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(246,242,235,0.38);
    }
    .trust-dot { width: 3px; height: 3px; background: var(--emerald-glow); border-radius: 50%; flex-shrink: 0; }

    /* Hero confidence strip — inline score display (replaces the former photo panel) */
    .hero-confidence-strip {
      display: flex; align-items: center; justify-content: center;
      gap: 1.4rem; flex-wrap: wrap;
    }
    .hero-score-card {
      background: var(--navy);
      border: 1px solid rgba(36,151,106,0.28);
      border-radius: var(--radius);
      padding: 1.1rem 1.6rem;
      box-shadow: var(--shadow-lg);
      min-width: 190px;
      text-align: start;
    }
    .score-card-label {
      font-family: var(--font-mono);
      font-size: 0.62rem; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--text-ghost);
      margin-block-end: 0.28rem;
    }
    .score-card-val {
      font-family: var(--font-mono);
      font-size: 2.4rem; font-weight: 500;
      color: var(--emerald-glow); line-height: 1;
    }
    .score-card-sub {
      font-size: 0.72rem; color: rgba(246,242,235,0.42);
      margin-block-start: 0.35rem; line-height: 1.4;
    }
    /* SVG ring badge */
    .hero-ring {
      background: rgba(12,21,33,0.82);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--radius);
      padding: 0.9rem;
      flex-shrink: 0;
    }

    /* ============================================================ DIVIDER */
    .section-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--parchment-3) 30%, var(--parchment-3) 70%, transparent);
    }
    .section-divider-dark {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent);
    }

    /* ============================================================ NARRATIVE STORY SECTIONS */
    /* Shared story section base */
    .story-section { position: relative; overflow: hidden; }

    /* VIDEO — See it in action */
    .section-video { background: var(--parchment); }
    .video-embed {
      position: relative; width: 100%; max-width: 860px; margin-inline: auto;
      aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
      box-shadow: var(--shadow-lg); background: var(--navy);
    }
    .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

    /* PROBLEM — dark, tense */
    .story-problem { background: var(--navy-mid); }
    .story-problem .h2 { color: var(--parchment); }

    /* RELIEF — light, warm */
    .story-relief { background: var(--parchment); }
    .story-relief .h2 { color: var(--navy); }

    /* CONFIDENCE — dark, triumphant */
    .story-confidence { background: var(--ink); }
    .story-confidence .h2 { color: var(--parchment); }

    /* DECISION — light parchment */
    .story-decision { background: var(--parchment-2); }
    .story-decision .h2 { color: var(--navy); }

    /* Story grid layout */
    .story-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 4rem; align-items: center;
    }
    .story-grid-reverse { direction: rtl; }
    .story-grid-reverse > * { direction: ltr; }

    /* Story image */
    .story-img-wrap {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }
    .story-img-wrap img {
      width: 100%; height: 440px;
      object-fit: cover;
      display: block;
      transition: transform 0.8s var(--ease);
    }
    .story-img-wrap:hover img { transform: scale(1.025); }

    /* Overlay accent bar on images */
    .story-img-accent {
      position: absolute; inset-inline-start: 0; inset-block-start: 0; inset-block-end: 0;
      width: 4px;
      background: linear-gradient(to bottom, var(--emerald-glow), transparent);
    }
    .story-img-accent-gold {
      background: linear-gradient(to bottom, var(--gold), transparent);
    }

    /* Scene label */
    .scene-label {
      position: absolute; top: 1.1rem; left: 1.1rem;
      background: rgba(12,21,33,0.8);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-pill);
      padding: 0.32rem 0.85rem;
      font-family: var(--font-mono);
      font-size: 0.63rem; letter-spacing: 0.14em;
      text-transform: uppercase; color: rgba(246,242,235,0.65);
      z-index: 5;
    }
    .scene-label-light {
      background: rgba(246,242,235,0.88);
      border-color: rgba(21,34,54,0.12);
      color: var(--text-mid);
    }

    /* Story content */
    .story-content { }
    .story-content .eyebrow-pill { margin-block-end: 1.4rem; }
    .story-content .h2 { margin-block-end: 1.2rem; }
    .story-content .body-lg { margin-block-end: 1.6rem; max-width: 460px; }

    /* Pull quote */
    .pull-quote {
      border-inline-start: 3px solid var(--emerald);
      padding: 0.8rem 1.4rem;
      margin-block: 1.6rem;
    }
    .pull-quote p {
      font-family: var(--font-display);
      font-size: 1.18rem; font-style: italic; font-weight: 400;
      line-height: 1.55; color: var(--parchment);
    }
    .pull-quote-dark p { color: var(--navy); }
    .pull-quote-gold { border-color: var(--gold); }

    /* Stat pills row */
    .stat-row { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-block-start: 2rem; }
    .stat-pill {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius);
      padding: 1rem 1.3rem;
      min-width: 120px;
    }
    .stat-pill-light {
      background: var(--white);
      border-color: var(--parchment-3);
      box-shadow: var(--shadow-sm);
    }
    .stat-pill .num {
      font-family: var(--font-mono);
      font-size: 1.7rem; font-weight: 500;
      color: var(--emerald-glow); line-height: 1;
      margin-block-end: 0.2rem;
    }
    .stat-pill .lbl {
      font-size: 0.74rem; color: var(--text-soft); line-height: 1.35;
    }
    .stat-pill-light .num { color: var(--emerald); }
    .stat-pill-light .lbl { color: var(--text-mid); }

    /* ============================================================ COMPARE TABLE */
    .section-compare { background: var(--white); }
    .compare-wrap {
      overflow-x: auto;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      border: 1px solid var(--parchment-3);
      margin-block-start: 2.5rem;
    }
    table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: var(--white); }
    thead tr { background: var(--navy); }
    thead th {
      padding: 1.1rem 1.4rem; text-align: left;
      font-family: var(--font-mono); font-size: 0.68rem;
      letter-spacing: 0.13em; text-transform: uppercase;
      color: rgba(246,242,235,0.55); font-weight: 500;
    }
    thead th:last-child { color: var(--emerald-on-dark); }
    tbody tr { border-bottom: 1px solid var(--parchment-2); transition: background var(--dur); }
    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background: var(--parchment); }
    tbody td { padding: 0.95rem 1.4rem; color: var(--text-mid); vertical-align: top; line-height: 1.45; }
    tbody td:first-child { font-weight: 500; color: var(--navy); font-size: 0.83rem; }
    tbody td:last-child { color: var(--emerald); font-weight: 500; }
    .ck { color: var(--emerald-glow); }
    .cx { color: #C0392B; }

    /* ============================================================ DIAGNOSTIC CARDS */
    .section-diagnostic { background: var(--navy); }
    .diag-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-block-start: 3rem; }
    .diag-card {
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.065);
      border-radius: var(--radius-lg);
      padding: 1.9rem 1.7rem;
      position: relative; overflow: hidden;
      transition: border-color var(--dur), transform var(--dur);
    }
    .diag-card::before {
      content: "";
      position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
      background: var(--emerald);
      transform: scaleX(0); transform-origin: left;
      transition: transform var(--dur) var(--ease);
    }
    .diag-card:hover { border-color: rgba(36,151,106,0.28); transform: translateY(-4px); }
    .diag-card:hover::before { transform: scaleX(1); }
    .diag-num {
      font-family: var(--font-mono); font-size: 0.65rem;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--emerald-glow); margin-block-end: 1.1rem;
    }
    .diag-title {
      font-family: var(--font-display);
      font-size: 1.32rem; font-weight: 500;
      color: var(--parchment); margin-block-end: 0.9rem; line-height: 1.25;
    }
    .diag-body { font-size: 0.88rem; line-height: 1.72; color: rgba(246,242,235,0.55); }

    /* ============================================================ SERVICE LADDER */
    .section-services { background: var(--parchment-2); }
    .service-ladder {
      display: flex; flex-direction: column; gap: 1px;
      background: var(--parchment-3);
      border-radius: var(--radius-lg); overflow: hidden;
      box-shadow: var(--shadow-md);
      margin-block-start: 3rem;
    }
    .svc-row {
      display: grid; grid-template-columns: 190px 1fr auto;
      gap: 2rem; align-items: start;
      background: var(--white); padding: 2rem 2.2rem;
      transition: background var(--dur);
    }
    .svc-row:hover { background: var(--parchment); }
    .tier-badge {
      display: inline-block; padding: 0.28rem 0.75rem;
      border-radius: var(--radius-pill);
      font-family: var(--font-mono); font-size: 0.62rem;
      font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
      margin-block-end: 0.5rem;
    }
    .t-free, .t-report, .t-adv, .t-consult, .t-rescue, .t-staffing { background: rgba(184,146,42,0.1);  color: #7A5F10;        border: 1px solid rgba(184,146,42,0.25); }
    .tier-sub  { font-size: 0.78rem; color: var(--text-soft); }
    .svc-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--navy); margin-block-end: 0.55rem; }
    .svc-desc  { font-size: 0.87rem; line-height: 1.68; color: var(--text-mid); margin-block-end: 0.85rem; }
    .svc-desc a { color: var(--emerald); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
    .svc-desc a:hover { color: var(--emerald-mid); }
    .chip-row  { display: flex; flex-wrap: wrap; gap: 0.38rem; }
    .chip {
      background: var(--parchment); border: 1px solid var(--parchment-3);
      border-radius: var(--radius-pill); padding: 0.18rem 0.68rem;
      font-family: var(--font-mono); font-size: 0.63rem;
      color: var(--navy); letter-spacing: 0.05em; font-weight: 500;
    }
    .svc-action { padding-block-start: 0.2rem; white-space: nowrap; }

    /* ============================================================ PLATFORMS */
    .section-platforms { background: var(--white); }
    .plat-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; margin-block-start: 3rem; }
    .plat-card {
      background: var(--parchment);
      border: 1px solid var(--parchment-2);
      border-radius: var(--radius);
      padding: 1.5rem 1.1rem; text-align: center;
      transition: all var(--dur) var(--ease);
    }
    .plat-card:hover {
      background: var(--navy); border-color: var(--navy);
      transform: translateY(-4px); box-shadow: var(--shadow-lg);
    }
    .plat-card:hover .plat-abbr { background: rgba(255,255,255,0.08); color: var(--emerald-glow); }
    .plat-card:hover .plat-name { color: var(--white); }
    .plat-card:hover .plat-subs { color: rgba(246,242,235,0.5); }
    .plat-abbr {
      width: 46px; height: 46px;
      background: var(--parchment-2); border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      margin-inline: auto; margin-block-end: 0.9rem;
      font-family: var(--font-mono); font-size: 0.6rem;
      font-weight: 500; letter-spacing: 0.08em;
      color: var(--navy); text-transform: uppercase;
      transition: all var(--dur);
    }
    .plat-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--navy); margin-block-end: 0.35rem; transition: color var(--dur); }
    .plat-subs { font-size: 0.72rem; color: var(--text-soft); line-height: 1.45; transition: color var(--dur); }

    /* ============================================================ ICP */
    .section-icp { background: var(--navy-mid); }
    .icp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-block-start: 3rem; }
    .icp-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--radius-lg);
      padding: 2.1rem 1.8rem;
      transition: all var(--dur);
    }
    .icp-card:hover { background: rgba(255,255,255,0.055); border-color: rgba(36,151,106,0.22); }
    .icp-role {
      font-family: var(--font-mono); font-size: 0.68rem;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--emerald-glow); margin-block-end: 0.75rem;
    }
    .icp-title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; color: var(--parchment); margin-block-end: 1rem; line-height: 1.2; }
    .icp-body  { font-size: 0.88rem; line-height: 1.72; color: rgba(246,242,235,0.55); }

    /* ============================================================ TESTIMONIALS */
    .section-testimonials { background: var(--parchment); overflow: hidden; }
    .testi-track-wrap {
      margin-block-start: 3rem;
      overflow: hidden;
      max-width: var(--max-w);
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 4vw, 2.5rem);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    }
    .testi-track {
      display: flex;
      align-items: stretch;   /* all cards share the tallest card's height */
      width: max-content;
      animation: testiScroll 140s linear infinite;
    }
    /* The track holds the card set twice, so -50% lands exactly on the start of
       the copy. Spacing lives on each card's margin rather than flex `gap` —
       with `gap` the halfway point falls mid-gap and the loop visibly jumps. */
    @keyframes testiScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .testi-track.paused { animation-play-state: paused; }
    /* Pause while reading or tabbing through, so links aren't moving targets */
    .testi-track-wrap:hover .testi-track,
    .testi-track-wrap:focus-within .testi-track { animation-play-state: paused; }

    .testi-featured.in-marquee {
      flex: 0 0 auto;
      width: min(400px, 82vw);
      max-width: none;
      margin: 0 1.4rem 0 0;   /* every card, including the last — keeps -50% exact */
      padding: 1.9rem 1.7rem 1.4rem;
      /* Column layout pins the attribution and CTA to the bottom, so those rows
         line up across cards even when the quotes differ in length. */
      display: flex;
      flex-direction: column;
    }
    .testi-featured.in-marquee + .testi-featured.in-marquee { margin-block-start: 0; }
    /* Quote uses the body face, not the display italic — an italic serif at this
       size is hard to read and sat oddly against the sans-serif attribution. */
    .testi-featured.in-marquee .testi-feat-quote {
      font-family: var(--font-body);
      font-style: normal;
      font-size: 0.97rem;
      line-height: 1.62;
      color: var(--text-primary);
      margin: 0 0 1.1rem;
      flex: 1 1 auto;          /* absorbs the slack so footers align */
    }
    .testi-featured.in-marquee .testi-quote-mark { width: 26px; height: 26px; margin-block-end: 0.35rem; }
    .testi-featured.in-marquee .testi-feat-footer {
      /* At 400px the person block and the logo cannot share a row, so some cards
         wrapped and others did not. Stacking them makes every footer the same
         shape, and the reserved heights absorb 1- vs 2-line roles and the
         different logo aspect ratios. */
      flex-direction: column;
      align-items: flex-start;
      gap: 0.85rem;
      padding-block-start: 1rem;
      min-height: 132px;
    }
    .testi-featured.in-marquee .testi-feat-person { min-height: 64px; }  /* fits a 2-line role */
    .testi-featured.in-marquee .testi-feat-logo-wrap { min-height: 56px; align-items: center; }
    .testi-featured.in-marquee .testi-feat-cta { min-height: 44px; }
    .testi-featured.in-marquee .testi-report-link { line-height: 1.35; }
    .testi-featured.in-marquee .testi-feat-name { font-size: 0.98rem; }
    .testi-featured.in-marquee .testi-feat-role { font-size: 0.76rem; line-height: 1.4; }
    .testi-featured.in-marquee .testi-feat-photo-wrap { width: 50px; height: 50px; }
    .testi-featured.in-marquee .testi-feat-cta { margin-block-start: 1.1rem; padding-block-start: 1rem; }
    .testi-featured.in-marquee .testi-report-link { font-size: 0.83rem; }
    .testi-featured.in-marquee .testi-report-note { font-size: 0.62rem; }
    /* logos scale down in step with the smaller card */
    .testi-featured.in-marquee .testi-feat-logo { height: 34px; max-width: 150px; }
    .testi-featured.in-marquee .testi-feat-logo.is-stacked { height: 54px; }
    .testi-featured.in-marquee .testi-feat-logo.is-stacked-wide { height: 46px; }

    .testi-pause {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      background: none; border: 1px solid var(--parchment-3); border-radius: 999px;
      padding: 0.4rem 1.1rem; min-height: 44px; cursor: pointer;   /* 44px = min touch target */
      font-family: var(--font-mono); font-size: 0.68rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-mid);
      transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    .testi-pause:hover { color: var(--navy); border-color: var(--gold); }
    .testi-pause svg { width: 12px; height: 12px; }
    .testi-pause .testi-play-icon { display: none; }
    .testi-pause[aria-pressed="true"] .testi-pause-icon { display: none; }
    .testi-pause[aria-pressed="true"] .testi-play-icon { display: inline; }

    /* By design, the marquee auto-scrolls for every visitor, including those
       with a reduced-motion OS setting -- it no longer switches to a manual
       swipeable row for them. The always-visible, keyboard-reachable Pause
       Scrolling button below the track is what satisfies WCAG 2.2.2 (a way
       to stop motion that runs longer than five seconds), so removing the
       prefers-reduced-motion fallback here doesn't drop that requirement. */
    .testi-card {
      flex: 0 0 auto;
      width: 320px;
      background: var(--white);
      border: 1px solid var(--parchment-3);
      border-radius: var(--radius-lg);
      padding: 1.8rem 1.7rem;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: box-shadow var(--dur), border-color var(--dur);
    }
    .testi-card:hover { box-shadow: var(--shadow-md); border-color: rgba(184,146,42,0.3); }
    .testi-quote-lines { margin-block-end: 1.4rem; }
    .testi-skel-line {
      height: 0.62rem;
      border-radius: 999px;
      background: var(--parchment-2);
      margin-block-end: 0.6rem;
    }
    .testi-skel-line.w-full  { width: 100%; }
    .testi-skel-line.w-90    { width: 90%; }
    .testi-skel-line.w-70    { width: 70%; }
    .testi-person { display: flex; align-items: center; gap: 0.85rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--parchment-2); }
    .testi-avatar {
      width: 42px; height: 42px; border-radius: 50%;
      background: var(--parchment-2);
      flex-shrink: 0;
    }
    .testi-person-lines { flex: 1; }
    .testi-skel-line.name  { width: 60%; height: 0.68rem; }
    .testi-skel-line.role  { width: 85%; height: 0.55rem; margin-block-end: 0; background: var(--parchment-3); }
    .testi-hint {
      text-align: center; margin-block-start: 1.6rem;
      font-family: var(--font-mono); font-size: 0.68rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-ghost);
    }
    /* Featured single testimonial */
    .testi-featured {
      position: relative;
      max-width: 760px;
      margin: 3rem auto 0;
      background: var(--white);
      border: 1px solid var(--parchment-3);
      border-radius: var(--radius-lg);
      padding: 2.8rem 2.6rem 2.2rem;
      box-shadow: var(--shadow-md);
    }
    .testi-quote-mark {
      width: 46px; height: 46px;
      color: var(--gold);
      opacity: 0.5;
      margin-block-end: 0.6rem;
    }
    .testi-feat-quote {
      font-family: var(--font-display);
      font-size: 1.5rem;
      line-height: 1.5;
      color: var(--navy);
      margin: 0 0 2rem;
      font-style: italic;
    }
    .testi-feat-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
      padding-block-start: 1.6rem;
      border-block-start: 1px solid var(--parchment-2);
    }
    .testi-feat-person { display: flex; align-items: center; gap: 1rem; }
    .testi-feat-photo-wrap {
      position: relative;
      width: 60px; height: 60px;
      flex-shrink: 0;
      border-radius: 50%;
      overflow: hidden;
      background: var(--navy);
      display: flex; align-items: center; justify-content: center;
    }
    .testi-feat-photo-wrap::before {
      content: attr(data-initials);
      font-family: var(--font-display);
      font-size: 1.2rem; font-weight: 600;
      color: var(--white);
    }
    .testi-feat-photo {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
    }
    .testi-feat-id { display: flex; flex-direction: column; }
    .testi-feat-name {
      font-family: var(--font-display);
      font-size: 1.05rem; font-weight: 600;
      color: var(--navy);
    }
    .testi-feat-role {
      font-size: 0.82rem;
      color: var(--text-mid);
      margin-block-start: 0.15rem;
    }
    .testi-feat-logo-wrap {
      flex-shrink: 0;
      display: flex; align-items: center;
      min-height: 44px;
      text-decoration: none;
      opacity: 0.92;
      transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    a.testi-feat-logo-wrap:hover { opacity: 1; transform: translateY(-1px); }
    .testi-feat-logo { height: 42px; width: auto; max-width: 190px; object-fit: contain; }
    /* Stacked lockups (icon over wordmark) read far smaller than wide ones at
       the same height — give them room so their optical weight matches. */
    .testi-feat-logo.is-stacked { height: 66px; }
    .testi-feat-logo.is-stacked-wide { height: 57px; }
    .testi-feat-logo-wrap.logo-fallback::after {
      content: attr(data-brand);
      font-family: var(--font-display);
      font-size: 1.15rem; font-weight: 700;
      color: var(--navy);
      letter-spacing: 0.01em;
    }
    /* Second and subsequent testimonials sit closer than the first */
    .testi-featured + .testi-featured { margin-block-start: 1.6rem; }
    @media (max-width: 620px) {
      .testi-featured { padding: 2rem 1.5rem 1.7rem; }
      .testi-feat-quote { font-size: 1.22rem; }
      .testi-feat-footer { gap: 1.2rem; }
    }
    .testi-feat-cta {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 0.8rem;
      margin-block-start: 1.5rem; padding-block-start: 1.4rem;
      border-block-start: 1px dashed var(--parchment-3);
    }
    .testi-report-link {
      display: inline-flex; align-items: center; gap: 0.6rem;
      background: none; border: none; padding: 0; cursor: pointer;
      font-family: var(--font-body); font-size: 0.92rem; font-weight: 600;
      color: var(--emerald);
      border-block-end: 1px solid transparent;
      transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    .testi-report-link:hover { color: var(--emerald-mid); border-block-end-color: currentColor; }
    .testi-report-link svg { width: 17px; height: 17px; flex-shrink: 0; }
    .testi-report-note {
      font-family: var(--font-mono); font-size: 0.68rem;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-soft);
    }

    /* Brief glow on the contact form when arriving from the report link */
    .contact-form.form-highlight input, .contact-form.form-highlight textarea {
      border-color: var(--emerald-glow);
      box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
    }
    .contact-form.form-highlight input, .contact-form.form-highlight textarea {
      transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
    }

    /* ============================================================ FINAL CTA */
    .section-cta {
      background: var(--ink); text-align: center;
      position: relative; overflow: hidden;
    }
    .section-cta::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(26,107,69,0.2) 0%, transparent 70%);
    }
    .cta-inner { position: relative; z-index: 1; max-width: 660px; margin-inline: auto; }
    .cta-inner .h2 { color: var(--parchment); margin-block: 0.9rem 1.3rem; }
    .cta-inner .body-lg { color: rgba(246,242,235,0.58); margin-block-end: 2.4rem; }
    .cta-actions { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
    .cta-reassure { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: rgba(246,242,235,0.3); }

    /* Contact block: Call Now, form, email — inside the final CTA section */
    .contact-block {
      margin-block-start: 3rem; padding-block-start: 2.6rem;
      border-top: 1px solid rgba(255,255,255,0.1);
      display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
    }
    .contact-form {
      width: 100%; max-width: 480px;
      display: flex; flex-direction: column; gap: 0.9rem; text-align: left;
    }
    .contact-form .form-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }
    .contact-form input, .contact-form textarea {
      flex: 1; min-width: 180px; width: 100%;
      padding: 0.85rem 1rem; border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05);
      color: var(--parchment); font-family: var(--font-body); font-size: 0.88rem;
      transition: border-color var(--dur) var(--ease);
    }
    .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(246,242,235,0.4); }
    .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--emerald-glow); }
    .contact-form textarea { resize: vertical; min-height: 96px; }
    .contact-form button { justify-content: center; }
    .contact-email { font-size: 0.82rem; color: rgba(246,242,235,0.5); }
    .contact-email a { color: var(--emerald-glow); font-weight: 600; }
    .contact-regions {
      font-size: 0.8rem; line-height: 1.6; text-align: center;
      color: rgba(246,242,235,0.42); max-width: 540px;
      margin-block-start: 0.2rem;
    }
    .contact-regions strong { color: rgba(246,242,235,0.66); font-weight: 600; }
    .contact-status { font-size: 0.85rem; margin-block-start: 0.6rem; padding: 0.6rem 0.9rem; border-radius: 6px; }
    .contact-status-success { color: var(--emerald-glow); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); }
    .contact-status-error { color: #f87171; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); }

    /* ============================================================ FOOTER */
    .footer { background: #080E18; padding-block: 3rem 1.6rem; }
    .footer-cols {
      display: flex; gap: 2.4rem;
      border: none;
    }
    .footer-cols > .footer-col { flex: 1 1 0; min-width: 0; border: none; }
    .footer-brand { display: flex; align-items: flex-start; }
    .footer-logo-img { height: 40px; width: auto; display: block; }
    .footer-col-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(246,242,235,0.35); margin-block-end: 1rem; }
    .footer-menu { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; border: none; }
    .footer-menu a { font-size: 0.83rem; color: rgba(246,242,235,0.55); transition: color var(--dur); }
    .footer-menu a:hover { color: rgba(246,242,235,0.9); }
    .footer-info p { font-size: 0.83rem; color: rgba(246,242,235,0.55); margin: 0 0 0.6rem; }
    .footer-info p:last-child { margin-block-end: 0; }
    .footer-info p strong { color: rgba(246,242,235,0.85); font-weight: 600; }
    .footer-info a { color: rgba(246,242,235,0.55); transition: color var(--dur); }
    .footer-info a:hover { color: rgba(246,242,235,0.9); }
    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
      margin-block-start: 2.4rem;
      /* padding-block (not padding-block-start) so the Privacy Policy/Terms
         links and the social icons sit centered top-to-bottom between this
         rule's own top border and the next element's top border directly
         below (the first <div class="legal-panel">, which is flush against
         this element and shows its own 1px border even while collapsed) --
         equal padding above and below the content = equal gap to both lines.
         0.8rem top+bottom (not the original 1.6rem top-only) keeps the total
         distance between the two lines the same as before this was made
         symmetric: half the padding on each side sums to the same 1.6rem. */
      padding-block: 0.8rem;
      border-block-start: 1px solid rgba(246,242,235,0.08);
    }
    .footer-links { display: flex; gap: 1.6rem; list-style: none; flex-wrap: wrap; border: none; }
    .footer-links a { font-size: 0.76rem; color: rgba(246,242,235,0.28); transition: color var(--dur); }
    .footer-links a:hover { color: rgba(246,242,235,0.65); }
    .footer-social { display: flex; gap: 1rem; }
    /* The LinkedIn/Facebook marks are now full-color vector logos (their own
       official badge colors baked into the SVG -- see /assets/logo/), not
       currentColor line icons, so there's no color rule to apply here
       anymore; only the same dim/brighten-on-hover treatment as before. */
    .footer-social a { opacity: 0.82; transition: opacity var(--dur); display: flex; }
    .footer-social a:hover { opacity: 1; }
    .footer-social img { width: 19px; height: 19px; display: block; }
    .footer-legal-trigger {
      /* Same font, size and color as the top nav's own links (.nav-links a)
         so "Privacy Policy"/"Terms" read as part of the same site
         typography, not a separate faint footer-only style. */
      background: none; border: none; padding: 0; margin: 0; cursor: pointer;
      font-family: var(--font-body); font-size: 0.83rem; font-weight: 500;
      letter-spacing: 0.04em; color: rgba(255,255,255,0.68);
      transition: color var(--dur);
    }
    .footer-legal-trigger:hover, .footer-legal-trigger[aria-expanded="true"] { color: var(--white); }
    @media (max-width: 720px) {
      .footer-cols { flex-direction: column; gap: 2rem; }
    }
    /* .site-home-btn (bottom-left, site.css) and the live-chat launcher
       (bottom-right, widget/widget.js's .cw-launcher) both float at a fixed
       pixel offset from the viewport edges, not from .footer-bottom's own
       container -- so as the viewport narrows and .container's side inset
       shrinks toward its floor, the Privacy Policy/Terms links (left) and
       the LinkedIn/Facebook icons (right) end up underneath them. Because
       .container is centered with its own max-width, that inset only grows
       enough to clear both floating buttons on its own above ~1300px wide;
       below that, on everything from phones through most laptop screens,
       give the links extra room on the left and the icons extra room on
       the right so neither ever sits under a floating button. */
    @media (max-width: 1300px) {
      .footer-links { margin-inline-start: 60px; }
      /* margin-inline-start:auto keeps these icons pinned to the right edge
         of their own flex line even on the narrowest phones, where the added
         margin-inline-end below is enough to make .footer-bottom's flex-wrap
         drop them to a line of their own -- without it, a lone wrapped item
         loses the row's space-between push and falls back to the left,
         landing right under .site-home-btn instead of clear of the chat
         launcher on the right. */
      .footer-social { margin-inline-start: auto; margin-inline-end: 70px; }
    }

    /* Expandable legal panels */
    .legal-panel {
      max-height: 0; overflow: hidden;
      transition: max-height 0.4s var(--ease);
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .legal-panel.open { max-height: 1400px; border-top-color: rgba(255,255,255,0.1); }
    .legal-panel-inner { padding-block: 2rem 1.4rem; max-width: 760px; }
    .legal-panel-inner h4 {
      font-family: var(--font-display); font-size: 1.2rem; font-weight: 500;
      color: var(--parchment); margin-block-end: 0.9rem;
    }
    .legal-panel-inner p {
      font-size: 0.82rem; line-height: 1.7; color: rgba(246,242,235,0.55);
      margin-block-end: 0.9rem;
    }
    .legal-panel-inner a { color: var(--emerald-glow); text-decoration: underline; }

    /* Cookie consent banner */
    .cookie-banner {
      position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 300;
      background: var(--navy); border-top: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
      transform: translateY(110%); transition: transform 0.4s var(--ease);
    }
    .cookie-banner.show { transform: translateY(0); }
    .cookie-banner-inner {
      max-width: var(--max-w); margin-inline: auto;
      padding: 1.2rem clamp(1.25rem, 4vw, 2.5rem);
      display: flex; align-items: center; justify-content: space-between;
      gap: 1.5rem; flex-wrap: wrap;
    }
    .cookie-text { font-size: 0.82rem; line-height: 1.55; color: rgba(246,242,235,0.7); max-width: 640px; }
    .cookie-link {
      background: none; border: none; padding: 0; margin: 0; cursor: pointer;
      font: inherit; color: var(--emerald-glow); text-decoration: underline;
    }
    .cookie-actions { display: flex; gap: 0.7rem; flex-shrink: 0; }
    /* Decline reuses .btn-outline-dark, which is styled for light/parchment
       sections elsewhere on the site (dark navy text). On this banner's dark
       navy background that would render as navy-on-navy -- invisible --
       so it's overridden here to use light text/border instead. */
    .cookie-banner .btn-outline-dark {
      color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.3);
    }
    .cookie-banner .btn-outline-dark:hover {
      background: rgba(255,255,255,0.1); color: var(--white); border-color: rgba(255,255,255,0.5);
    }

    /* ============================================================ SCROLL REVEAL */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
    .reveal.in { opacity: 1; transform: none; }
    .d1 { transition-delay: 0.1s; }
    .d2 { transition-delay: 0.2s; }
    .d3 { transition-delay: 0.3s; }
    .d4 { transition-delay: 0.4s; }

    /* Nine nav items no longer fit a narrow laptop bar -- hand over to
       the hamburger before the row wraps. Matches .nav-inner's own
       max-width above. */
    @media (max-width: 1180px) {
      .nav-links { display: none; }
      .nav-toggle, .mobile-menu-toggle, #mobileMenuToggle { display: flex; }
    }

    /* ============================================================ RESPONSIVE */
    @media (max-width: 1024px) {
      .plat-grid { grid-template-columns: repeat(3,1fr); }
    }
    @media (max-width: 840px) {
      .story-grid, .story-grid-reverse { grid-template-columns: 1fr; gap: 2.5rem; direction: ltr; }
      .diag-grid, .icp-grid { grid-template-columns: 1fr; }
      .svc-row { grid-template-columns: 1fr; gap: 1rem; }
      .plat-grid { grid-template-columns: repeat(2,1fr); }
      .nav-links { display: none; }
      .mobile-menu-toggle { display: block; }
    }
    @media (max-width: 480px) {
      .plat-grid { grid-template-columns: 1fr 1fr; }
      .hero-actions { flex-direction: column; align-items: flex-start; }
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      * { transition-duration: 0.01ms !important; }
    }

    /* ============================================================ FREE CALCULATOR PANEL
       .calc-dock / .calc-tab (the floating vertical "Free Score Calculator"
       tab that used to sit at the right edge of the viewport) were removed
       at the user's request. .calc-panel stays -- it's still opened by
       every other "Get Your Score" / "Start Free" button on the page. */
    .calc-panel {
      position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw);
      background: var(--parchment); box-shadow: -12px 0 40px rgba(12,21,33,0.22);
      transform: translateX(100%); transition: transform 0.32s var(--ease);
      z-index: 901; display: flex; flex-direction: column; 
    }
    .calc-panel.open { transform: translateX(0); }
    .calc-head {
      background: var(--navy); color: var(--parchment); padding: 1.2rem 1.3rem;
      display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0;
    }
    .calc-head-eyebrow {
      font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.09em;
      text-transform: uppercase; color: var(--emerald-glow); display: block; margin-bottom: 0.3rem;
    }
    .calc-head h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0; line-height: 1.25; }
    .calc-min-btn {
      background: rgba(255,255,255,0.08); border: none; color: var(--parchment);
      width: 28px; height: 28px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
      font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
    }
    .calc-min-btn:hover { background: rgba(255,255,255,0.18); }
    .calc-body { flex: 1; overflow-y: auto; padding: 1.3rem; }
    .calc-body::-webkit-scrollbar { width: 6px; }
    .calc-body::-webkit-scrollbar-thumb { background: var(--parchment-3); border-radius: 3px; }
    .calc-progress { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-soft); margin-bottom: 1rem; letter-spacing: 0.04em; }
    .calc-q { margin-bottom: 1.4rem; }
    .calc-q-cat {
      font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--emerald-mid); font-weight: 500; display: block; margin-bottom: 0.35rem;
    }
    .calc-q-text { font-size: 0.87rem; color: var(--text-primary); font-weight: 500; margin: 0 0 0.6rem; line-height: 1.4; }
    .calc-opt { display: block; margin-bottom: 0.45rem; }
    .calc-opt input { position: absolute; opacity: 0; pointer-events: none; }
    .calc-opt span {
      display: block; padding: 0.6rem 0.8rem; border-radius: 8px;
      border: 1px solid var(--parchment-3); background: var(--white);
      font-size: 0.82rem; color: var(--text-mid); cursor: pointer;
      transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    .calc-opt input:checked + span {
      border-color: var(--emerald-mid); background: var(--emerald-lite); color: var(--text-primary); font-weight: 500;
    }
    .calc-opt span:hover { border-color: var(--emerald-mid); }
    .calc-submit {
      width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem;
      margin-top: 0.4rem; opacity: 0.45; pointer-events: none;
    }
    .calc-submit.ready { opacity: 1; pointer-events: auto; }
    .calc-note { font-size: 0.7rem; color: var(--text-soft); text-align: center; margin-top: 0.7rem; line-height: 1.4; }

    /* Results */
    .calc-results { display: none; }
    .calc-results.show { display: block; }
    .calc-score-wrap { text-align: center; padding: 0.6rem 0 1.5rem; }
    .calc-score-num { font-family: var(--font-display); font-size: 3rem; line-height: 1.2; font-weight: 600; }
    .calc-score-max { font-size: 1rem; color: var(--text-mid); font-weight: 400; }
    .calc-score-band {
      display: inline-block; margin-top: 0.85rem; padding: 0.28rem 0.8rem; border-radius: var(--radius-pill);
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
    }
    .calc-confidence { text-align: center; font-size: 0.76rem; color: var(--text-mid); margin-bottom: 1.3rem; }
    .calc-flags-title, .calc-next-title {
      font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-mid); font-weight: 500; margin: 0 0 0.6rem;
    }
    .calc-flag {
      display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0; border-top: 1px solid var(--parchment-3);
      font-size: 0.82rem; color: var(--text-primary); line-height: 1.4;
    }
    .calc-flag:last-of-type { border-bottom: 1px solid var(--parchment-3); }
    .calc-flag-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 0.35rem; flex-shrink: 0; }
    .calc-next { list-style: none; padding: 0; margin: 0 0 1.3rem; }
    .calc-next li {
      font-size: 0.79rem; color: var(--text-mid); padding-left: 1.1rem; position: relative; margin-bottom: 0.5rem; line-height: 1.4;
    }
    .calc-next li::before { content: "→"; position: absolute; left: 0; color: var(--emerald-mid); }
    .calc-actions-row { display: flex; gap: 0.6rem; margin-top: 1rem; }
    .calc-actions-row .btn { flex: 1; justify-content: center; font-size: 0.76rem; padding: 0.7rem 0.9rem; }
    .calc-retake {
      display: block; text-align: center; font-size: 0.76rem; color: var(--text-mid);
      margin-top: 1rem; cursor: pointer; text-decoration: underline; background: none; border: none; width: 100%;
    }
    #calcCaptureArea { background: var(--parchment); padding: 0.4rem; border-radius: 10px; }
    .calc-report-head {
      display: flex; align-items: center; justify-content: space-between;
      padding-bottom: 0.7rem; margin-bottom: 0.8rem;
      border-bottom: 1px solid var(--parchment-3);
    }
    .calc-report-brand {
      font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--navy);
    }
    .calc-report-date {
      font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--text-soft);
    }
    .calc-explain {
      font-size: 0.82rem; line-height: 1.6; color: var(--text-mid);
      text-align: center; max-width: 340px; margin: 0 auto 1.2rem; padding-bottom: 1rem;
      border-bottom: 1px solid var(--parchment-3);
    }
    .calc-chart { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1rem; }
    .calc-chart-row { display: grid; grid-template-columns: 108px 1fr 32px; align-items: center; gap: 0.6rem; }
    .calc-chart-label { font-size: 0.68rem; color: var(--text-mid); font-weight: 500; }
    .calc-chart-track { background: var(--parchment-2); border-radius: var(--radius-pill); height: 8px; overflow: hidden; }
    .calc-chart-fill { display: block; height: 100%; border-radius: var(--radius-pill); transition: width 0.5s var(--ease); }
    .calc-chart-val { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-soft); text-align: right; }
    .calc-conclusion { font-size: 0.82rem; line-height: 1.65; color: var(--text-mid); margin-bottom: 0.4rem; }
    .calc-disclaimer {
      font-size: 0.66rem; line-height: 1.5; color: var(--text-soft);
      margin-top: 1.3rem; padding-top: 0.9rem; border-top: 1px solid var(--parchment-3);
    }
    @media (max-width: 480px) {
      .calc-panel { width: 100vw; }
    }
    @media (max-width: 380px) {
      .calc-body { padding: 1rem; }
      .calc-chart-row { grid-template-columns: 84px 1fr 30px; gap: 0.4rem; }
      .calc-chart-label { font-size: 0.62rem; line-height: 1.2; }
      .calc-score-num { font-size: 2.5rem; }
      .calc-actions-row { flex-direction: column; }
      .calc-actions-row .btn { width: 100%; }
      .calc-report-head { flex-wrap: wrap; gap: 0.3rem; }
    }

    /* ============================================================ INSIGHTS OVERLAY
       Hidden by default. All content lives in this single file, inside
       hidden panels, and is only shown when the "Insights" nav link is
       clicked. Nothing here is fetched or loaded separately. */
    .insights-overlay {
      position: fixed; inset: 0; z-index: 500;
      background: var(--parchment);
      display: none;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .insights-overlay.open { display: block; }
    body.insights-lock { overflow: hidden; }
    .insights-overlay-topbar {
      position: sticky; inset-block-start: 0; z-index: 5;
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(12,21,33,0.97);
      backdrop-filter: blur(16px) saturate(1.4);
      padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
    }
    .insights-overlay-brand { font-family: var(--font-display); color: var(--white); font-size: 1.15rem; }
    .insights-overlay-close {
      background: none; border: none; cursor: pointer; color: var(--white);
      font-size: 1.5rem; line-height: 1; padding: 0.3rem 0.5rem;
      transition: opacity var(--dur);
    }
    .insights-overlay-close:hover { opacity: 0.7; }
    .insights-panel { display: none; }
    .insights-panel.active { display: block; }
    .insights-overlay .back-to-hub {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: none; border: none; cursor: pointer; padding: 0;
      font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
      text-transform: uppercase; color: rgba(255,255,255,0.7);
      margin-bottom: 1.1rem; transition: color var(--dur);
    }
    .insights-overlay .back-to-hub:hover { color: var(--white); }

    .site-home-btn {
      position: fixed; left: 24px;
      /* 31.5px, not a round 28/30px: at the page's natural resting scroll
         position (all the way down), this is what centers the button
         vertically between .footer-bottom's own top border and the next
         line below it (the first .legal-panel's top border) -- see the
         matching comment on .footer-bottom above. Measured, not guessed:
         (distance from the very bottom of <footer> up to the midpoint of
         those two lines) minus half this button's own 46px height. */
      bottom: 31.5px; z-index: 150;
      width: 46px; height: 46px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(21,34,54,0.55);
      border: 1px solid rgba(255,255,255,0.25);
      backdrop-filter: blur(6px);
      color: var(--white); cursor: pointer;
      opacity: 0.6; transition: opacity var(--dur), background var(--dur), bottom var(--dur);
    }
    .site-home-btn:hover { opacity: 1; background: rgba(21,34,54,0.85); }
    .site-home-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
    /* The cookie banner (z-index 300, full-width, same bottom-left corner)
       would otherwise sit right on top of the home button and hide it for
       every first-time visitor — see initCookieBanner() in site.js, which
       toggles this class on <body> for as long as the banner is shown. */
    /* --cookie-banner-h is set from JS (initCookieBanner() in site.js) to
       the banner's own actual rendered height, which varies a lot by
       viewport width (a single-line bar on desktop vs. up to three
       stacked lines on a narrow phone) -- a fixed pixel guess here would
       clear it on some widths and not others. 72.5px is only the
       fallback for the brief window before that JS runs. */
    body.has-cookie-banner .site-home-btn { bottom: calc(31.5px + var(--cookie-banner-h, 72.5px)); }
    /* .site-home-btn is a fixed, constant-position circle (left:24px,
       bottom:31.5px on every scroll position) that only ever has room to
       float clear of real content when .container's own side margins are
       wide -- true above ~1300px (see the comment on .footer-links above),
       but not on phones/tablets, where the container runs close to the
       viewport edges and this button ends up sitting on top of hero copy,
       form fields, card text or CTA buttons depending on scroll position
       (confirmed on the homepage hero, /contact/, /platforms/,
       /the-problem/, /services/staffing.html and /free-diagnostic/).
       Rather than hide it there -- the nav logo (.nav is position:fixed at
       the top on every page) already links home, but the user wants this
       floating shortcut kept on mobile too -- it's shrunk and tucked into
       the very corner with a low idle opacity, so whatever it does overlap
       stays small and see-through; a tap (:active -- touch devices don't
       reliably fire :hover) brings it to full opacity/contrast like the
       desktop hover state.
       This has to come after the base .site-home-btn rule above (same
       0-specificity class selector) so it isn't the earlier declaration
       that loses the cascade on width alone. */
    @media (max-width: 1024px) {
      .site-home-btn {
        width: 38px; height: 38px;
        left: 12px; bottom: 12px;
        opacity: 0.4;
      }
      .site-home-btn svg { width: 16px; height: 16px; }
      .site-home-btn:active { opacity: 1; background: rgba(21,34,54,0.85); }
      /* Same clearance logic as the desktop rule above, just measured from
         this breakpoint's own smaller base offset (12px, not 31.5px). */
      body.has-cookie-banner .site-home-btn { bottom: calc(12px + var(--cookie-banner-h, 72.5px)); }
    }

    /* ============================================================
       ORPINGTON INSIGHTS — overlay-scoped stylesheet
       Loaded on demand (only when the Insights overlay is first opened).
       Every rule is scoped under .insights-overlay so it can never
       affect the homepage's own styles. Typography/utility classes
       that already exist identically in index.html's own style block
       (h1, h2, h3, .container, .body, .body-lg, .mono, .eyebrow,
       .eyebrow-pill, .btn, .btn-primary, .section) are intentionally
       NOT redefined here — the injected content reuses them as-is.
    ============================================================ */

    .insights-overlay .eyebrow-pill.gold { background: rgba(184,146,42,0.12); border-color: rgba(184,146,42,0.28); color: var(--gold); }
    .insights-overlay .container-article { max-width: 760px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
    .insights-overlay h2 { margin-block: 2.2rem 1rem; }
    .insights-overlay h3 { margin-block: 1.7rem 0.7rem; }

    /* ---- hub hero + article hero ---- */
    .insights-overlay .insights-hero,
    .insights-overlay .article-hero { background: var(--navy); padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 3.2rem); position: relative; overflow: hidden; }
    .insights-overlay .insights-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(36,151,106,0.18), transparent 60%); pointer-events: none; }
    .insights-overlay .insights-hero-inner { position: relative; z-index: 1; max-width: 720px; }
    .insights-overlay .insights-hero p.body-lg { color: rgba(255,255,255,0.72); margin-top: 1.1rem; }
    .insights-overlay .article-hero .breadcrumb { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 1.3rem; }
    .insights-overlay .article-hero .breadcrumb a { color: rgba(255,255,255,0.75); cursor: pointer; }
    .insights-overlay .article-hero .breadcrumb a:hover { color: var(--white); }
    .insights-overlay .article-dek { color: rgba(255,255,255,0.72); margin-top: 1.05rem; }
    .insights-overlay .article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.55); text-transform: uppercase; }

    /* ---- hub grid + cards (also reused in "related" sections) ---- */
    .insights-overlay .insights-grid,
    .insights-overlay .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
    .insights-overlay .related-grid { grid-template-columns: repeat(2, 1fr); }
    @media (max-width: 900px) { .insights-overlay .insights-grid { grid-template-columns: 1fr; } }
    @media (max-width: 760px) { .insights-overlay .related-grid { grid-template-columns: 1fr; } }
    .insights-overlay .insight-card {
      background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
      padding: 1.9rem 1.6rem; display: flex; flex-direction: column; gap: 0.85rem;
      border: 1px solid var(--parchment-3); transition: box-shadow var(--dur), transform var(--dur); cursor: pointer;
    }
    .insights-overlay .insight-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
    .insights-overlay .insight-card h3 { margin-block: 0; }
    .insights-overlay .insight-card .body { flex-grow: 1; }
    .insights-overlay .insight-card .read-more { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald-mid); font-weight: 500; }
    .insights-overlay .insight-card .meta-line { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-soft); text-transform: uppercase; }
    .insights-overlay .related { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--parchment-2); }
    .insights-overlay .related h2 { text-align: center; }
    .insights-overlay .related .eyebrow { display: block; text-align: center; margin-bottom: 0.6rem; }

    /* ---- article body ---- */
    .insights-overlay .article-body { padding-block: clamp(2.2rem, 5vw, 3.5rem); }
    .insights-overlay .article-body p { margin-bottom: 1.2rem; }
    .insights-overlay .article-body ul, .insights-overlay .article-body ol { margin: 0 0 1.4rem 0; list-style: none; }
    .insights-overlay .article-body li { margin-bottom: 0.6rem; padding-left: 1.6rem; position: relative; color: var(--text-mid); font-size: 0.95rem; line-height: 1.7; }
    .insights-overlay .article-body ul li::before { content: "—"; position: absolute; left: 0; color: var(--emerald-mid); }
    .insights-overlay .article-body ol { counter-reset: ol-counter; }
    .insights-overlay .article-body ol li { counter-increment: ol-counter; }
    .insights-overlay .article-body ol li::before { content: counter(ol-counter) "."; position: absolute; left: 0; color: var(--emerald-mid); font-weight: 600; font-family: var(--font-mono); font-size: 0.85rem; }
    .insights-overlay .article-body strong { color: var(--navy); font-weight: 600; }
    .insights-overlay .article-body a.inline-link { color: var(--emerald-mid); text-decoration: underline; text-underline-offset: 3px; }

    .insights-overlay .pull-quote { border-left: 3px solid var(--gold); padding: 0.4rem 0 0.4rem 1.5rem; margin: 2rem 0; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; line-height: 1.5; color: var(--navy); }
    .insights-overlay .pull-quote cite { display: block; margin-top: 0.55rem; font-family: var(--font-mono); font-style: normal; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }

    .insights-overlay .callout { background: var(--parchment-2); border: 1px solid var(--parchment-3); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 1.8rem 0; }
    .insights-overlay .callout h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald-mid); margin-bottom: 0.55rem; }
    .insights-overlay .callout p:last-child { margin-bottom: 0; }

    .insights-overlay .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.8rem 0; }
    @media (max-width: 640px) { .insights-overlay .stat-row { grid-template-columns: 1fr; } }
    .insights-overlay .stat-block { background: var(--white); border: 1px solid var(--parchment-3); border-radius: var(--radius); padding: 1.3rem; text-align: center; }
    .insights-overlay .stat-num { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 500; color: var(--emerald-mid); line-height: 1; }
    .insights-overlay .stat-label { font-size: 0.76rem; color: var(--text-soft); margin-top: 0.45rem; }

    .insights-overlay .checklist { background: var(--white); border: 1px solid var(--parchment-3); border-radius: var(--radius-lg); padding: 1.6rem 1.6rem 1.1rem; margin: 1.3rem 0; }
    .insights-overlay .checklist-item { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--parchment-2); }
    .insights-overlay .checklist-item:last-child { border-bottom: none; }
    .insights-overlay .checklist-box { flex-shrink: 0; width: 18px; height: 18px; border: 2px solid var(--emerald-mid); border-radius: 4px; margin-top: 0.15rem; }
    .insights-overlay .checklist-text { font-size: 0.92rem; color: var(--text-primary); line-height: 1.55; }
    .insights-overlay .checklist-text strong { color: var(--navy); }
    .download-cta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; background: var(--white); border: 1px solid var(--parchment-3); border-radius: var(--radius-lg); padding: 1.8rem 2rem; margin: 1.8rem 0; box-shadow: 0 6px 24px rgba(21,34,54,0.06); }
    .download-cta-icon { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(26,107,69,0.08); color: var(--emerald); }
    .download-cta-icon svg { width: 26px; height: 26px; }
    .download-cta-body { flex: 1 1 240px; }
    .download-cta-body h3 { color: var(--navy); margin: 0 0 0.35rem; }
    .download-cta-body p { font-size: 0.92rem; color: var(--text-primary); line-height: 1.55; margin: 0; }
    .download-cta-btn { flex-shrink: 0; text-decoration: none; }
    .download-cta-btn svg { width: 16px; height: 16px; }
    @media (max-width: 640px) { .download-cta { padding: 1.4rem; } .download-cta-btn { width: 100%; justify-content: center; } }

    .insights-overlay .faq-item { border-bottom: 1px solid var(--parchment-3); padding: 1.2rem 0; }
    .insights-overlay .faq-item h4 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; color: var(--navy); margin-bottom: 0.5rem; }
    .insights-overlay .faq-item p { color: var(--text-mid); font-size: 0.92rem; margin-bottom: 0; }

    .insights-overlay .cta-band { background: var(--navy); border-radius: var(--radius-lg); padding: 2.2rem clamp(1.4rem, 4vw, 2.6rem); margin: 2.6rem 0 1rem; text-align: center; }
    .insights-overlay .cta-band h3 { color: var(--white); margin-block: 0 0.65rem; }
    .insights-overlay .cta-band p { color: rgba(255,255,255,0.72); max-width: 500px; margin-inline: auto 1.4rem; }

    .insights-overlay .author-block { display: flex; align-items: center; gap: 0.85rem; padding: 1.4rem 0; margin-top: 1.8rem; border-top: 1px solid var(--parchment-3); }
    .insights-overlay .author-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--emerald-lite); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: var(--emerald-mid); font-size: 1.05rem; flex-shrink: 0; }
    .insights-overlay .author-name { font-size: 0.88rem; font-weight: 600; color: var(--navy); }
    .insights-overlay .author-role { font-size: 0.76rem; color: var(--text-soft); }

/* ============================================================ INSIGHTS / ARTICLES
   Built entirely on the existing design tokens — no new colours introduced. */
.art-main { background: var(--parchment); padding-block: clamp(6rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem); }
.art-inner { width: min(760px, calc(100% - 3rem)); margin-inline: auto; }

.art-breadcrumb {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft); margin-block-end: 2rem;
}
.art-breadcrumb a { color: var(--emerald); border-block-end: 1px solid transparent; }
.art-breadcrumb a:hover { border-block-end-color: currentColor; }
.art-breadcrumb span { margin-inline: 0.45rem; }

.art-head { margin-block-end: 2.6rem; }
.art-head h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.14;
  color: var(--navy); margin-block: 0.9rem 1.1rem;
}
.art-standfirst {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.55;
  color: var(--text-mid); margin-block-end: 1.6rem;
}
.art-meta {
  display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-soft);
  padding-block-start: 1.3rem; border-block-start: 1px solid var(--parchment-3);
}

.art-toc {
  background: var(--white); border: 1px solid var(--parchment-3);
  border-radius: var(--radius-lg); padding: 1.5rem 1.7rem; margin-block-end: 2.8rem;
}
.art-toc-title {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-soft); margin-block-end: 0.8rem;
}
.art-toc ol { margin: 0; padding-inline-start: 1.1rem; }
.art-toc li { margin-block-end: 0.45rem; color: var(--text-mid); font-size: 0.94rem; }
.art-toc a { color: var(--navy); border-block-end: 1px solid transparent; }
.art-toc a:hover { color: var(--emerald); border-block-end-color: currentColor; }

.art-body { font-size: 1.06rem; line-height: 1.78; color: var(--text-primary); }
.art-body p { margin-block-end: 1.35rem; }
.art-body h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 1.95rem); line-height: 1.25;
  color: var(--navy); margin-block: 2.9rem 1.1rem;
  scroll-margin-block-start: 6rem;
}
.art-body h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  color: var(--navy); margin-block: 2rem 0.8rem;
}
.art-body ul, .art-body ol { margin-block-end: 1.6rem; padding-inline-start: 1.4rem; }
.art-body li { margin-block-end: 0.7rem; }
.art-body a { color: var(--emerald); border-block-end: 1px solid rgba(26,107,69,0.35); }
.art-body a:hover { border-block-end-color: currentColor; }
.art-body strong { color: var(--navy); font-weight: 600; }

.art-pull {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.5;
  color: var(--navy); margin-block: 2.2rem; padding-inline-start: 1.5rem;
  border-inline-start: 3px solid var(--gold);
}
.art-note {
  background: var(--white); border: 1px solid var(--parchment-3);
  border-inline-start: 3px solid var(--emerald);
  border-radius: var(--radius-sm, 6px);
  padding: 1.1rem 1.3rem; margin-block: 1.9rem;
  font-size: 0.97rem; color: var(--text-mid);
}
.art-note strong { color: var(--emerald); margin-inline-end: 0.3rem; }

.art-faq-wrap { margin-block-start: 3.4rem; }
.art-faq-wrap h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 1.95rem); color: var(--navy);
  margin-block-end: 1.2rem; scroll-margin-block-start: 6rem;
}
.art-faq {
  background: var(--white); border: 1px solid var(--parchment-3);
  border-radius: var(--radius-sm, 6px); padding: 0.2rem 1.2rem; margin-block-end: 0.7rem;
}
.art-faq summary {
  cursor: pointer; padding-block: 0.95rem; font-weight: 600; color: var(--navy);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.art-faq summary::-webkit-details-marker { display: none; }
.art-faq summary::after { content: "+"; color: var(--emerald); font-size: 1.3rem; line-height: 1; }
.art-faq[open] summary::after { content: "\2212"; }
.art-faq p { padding-block-end: 1rem; color: var(--text-mid); font-size: 0.99rem; line-height: 1.7; }

.art-cta {
  background: var(--navy); border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem); margin-block-start: 3.6rem; text-align: center;
}
.art-cta h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--white);
  margin-block: 0.8rem 0.9rem;
}
.art-cta p { color: rgba(255,255,255,0.78); margin-block-end: 1.7rem; font-size: 1rem; }
.art-cta .eyebrow { color: var(--gold-lite); }

.art-related { margin-block-start: 3.2rem; padding-block-start: 2rem; border-block-start: 1px solid var(--parchment-3); }
.art-related h2 {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-soft); margin-block-end: 1rem;
}
.art-related ul { list-style: none; padding: 0; margin: 0; }
.art-related li { margin-block-end: 0.75rem; }
.art-related a {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--navy);
  border-block-end: 1px solid transparent;
}
.art-related a:hover { color: var(--emerald); border-block-end-color: currentColor; }

/* Insights hub */
.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem; margin-block-start: 2.6rem;
}
.hub-card {
  background: var(--white); border: 1px solid var(--parchment-3);
  border-radius: var(--radius-lg); padding: 1.7rem 1.6rem;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hub-card:hover { box-shadow: var(--shadow-md); border-color: rgba(184,146,42,0.35); }
.hub-card .eyebrow { font-size: 0.65rem; }
.hub-card h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.22rem;
  line-height: 1.3; color: var(--navy); margin-block: 0.7rem 0.6rem;
}
.hub-card p { color: var(--text-mid); font-size: 0.95rem; line-height: 1.65; flex: 1; }
.hub-card a.hub-link {
  margin-block-start: 1.1rem; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald);
}
.hub-card a.hub-link:hover { color: var(--emerald-mid); }
.hub-featured { grid-column: 1 / -1; border-inline-start: 3px solid var(--gold); }

/* ============================================================ PRICING
   Built on the existing tokens — no new colours or fonts introduced. */
.section-pricing { background: var(--white); }
.price-table-wrap { margin-block-start: 2.6rem; overflow-x: auto; }
.price-table {
  width: 100%; border-collapse: collapse; min-width: 640px;
  font-size: 0.95rem;
}
.price-table thead th {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  /* The global `thead tr` rule paints this row navy, so header text must be
     light. It was previously navy-on-navy (invisible) and muted grey (unreadable). */
  text-transform: uppercase; color: var(--white);
  text-align: left; padding: 0.9rem 1rem; border-block-end: 1px solid var(--parchment-3);
  font-weight: 500;
}
.price-table tbody th {
  text-align: left; font-family: var(--font-body); font-weight: 600;
  color: var(--navy); padding: 1.05rem 1rem; font-size: 0.98rem;
  border-block-end: 1px solid var(--parchment-2); vertical-align: top;
}
.price-table tbody td {
  padding: 1.05rem 1rem; color: var(--text-mid);
  border-block-end: 1px solid var(--parchment-2); vertical-align: top;
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-block-end: none; }
.price-table .price-figure { color: var(--navy); font-weight: 600; display: block; }
.price-table .price-meta {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--text-soft); display: block; margin-block-start: 0.2rem;
}
.price-free { color: var(--emerald); font-weight: 600; }
.price-note {
  margin-block-start: 1.4rem; font-size: 0.85rem; line-height: 1.65;
  color: var(--text-mid); max-width: none; width: 100%;
}
.price-tier-note {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem; margin-block-start: 1.8rem;
}
.price-tier-card {
  background: var(--parchment); border: 1px solid var(--parchment-3);
  border-radius: var(--radius-lg); padding: 1.1rem 1.2rem;
}
.price-tier-card strong {
  display: block; font-family: var(--font-display); font-size: 1.02rem;
  color: var(--navy); margin-block-end: 0.3rem;
}
.price-tier-card span { font-size: 0.85rem; color: var(--text-mid); line-height: 1.55; }

/* comparison */
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.93rem; }
.compare-table thead th {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: left; font-weight: 500;
  padding: 0.9rem 1rem; border-block-end: 1px solid var(--parchment-3);
  color: var(--white);
}
/* Emerald fails contrast on the navy header band; gold is the readable brand
   accent here (about 7:1) and is already used for emphasis elsewhere. */
.compare-table thead th.is-us { color: var(--gold-lite); font-weight: 600; }
.compare-table tbody th {
  text-align: left; font-weight: 600; color: var(--navy); font-size: 0.92rem;
  padding: 1rem; border-block-end: 1px solid var(--parchment-2); vertical-align: top;
}
.compare-table tbody td {
  padding: 1rem; color: var(--text-mid); border-block-end: 1px solid var(--parchment-2);
  vertical-align: top; line-height: 1.55;
}
.compare-table tbody td.is-us { background: rgba(26,107,69,0.05); color: var(--navy); font-weight: 500; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-block-end: none; }
.price-source {
  font-size: 0.78rem; color: var(--text-soft); margin-block-start: 1.2rem; line-height: 1.6;
}
.price-source a { color: var(--emerald); border-block-end: 1px solid rgba(26,107,69,0.3); }

/* Visually hidden but read by screen readers — used on table captions. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.price-cta { margin-block-start: 2.4rem; }
.price-cta-alt {
  margin-block-start: 1.15rem; font-size: 0.9rem; color: var(--text-mid);
}
.price-cta-alt a {
  color: var(--emerald); font-weight: 600;
  border-block-end: 1px solid rgba(26,107,69,0.35);
}
.price-cta-alt a:hover { color: var(--emerald-mid); border-block-end-color: currentColor; }

.art-cta-alt {
  margin-block-start: 1.1rem; font-size: 0.88rem; color: rgba(255,255,255,0.62);
}
.art-cta-alt a { color: var(--gold-lite); font-weight: 600; border-block-end: 1px solid rgba(201,168,76,0.4); }
.art-cta-alt a:hover { border-block-end-color: currentColor; }

/* Contact form context line — tells the visitor what submitting will do. */
.form-context {
  font-size: 0.85rem; line-height: 1.55; color: var(--text-mid);
  margin-block: 0.2rem 0.9rem;
}
.form-context.is-download {
  color: var(--emerald); font-weight: 500;
}

/* ============================================================ HOMEPAGE FAQ
   Reuses the .art-faq accordion from the article pages so the component is
   identical sitewide; only the section wrapper is new. */
.section-faq { background: var(--parchment); }
.faq-list {
  max-width: 780px; margin-inline: auto; margin-block-start: 2.6rem;
}
.faq-list .art-faq { margin-block-end: 0.6rem; }
.faq-list .art-faq summary { font-size: 1rem; }
.faq-list .art-faq p { font-size: 0.95rem; }

/* ============================================================ PLATFORMS SUBMENUS
   Added for the /platforms/ dropdown (top nav), its mobile accordion
   equivalent, and the footer's right-opening flyout. All three share one
   interaction model: CSS hover/focus-within opens it for a mouse, and a
   small toggle button (click, via the JS below) opens/closes it for touch
   and keyboard, since a tap has no hover state. Menus sit flush against
   their trigger (top:100% / left:100%, zero external gap) so the pointer
   never crosses empty space while moving from trigger to menu — any gap
   there would drop the CSS :hover state before the menu is reached. */

/* --- Top nav dropdown (opens down) ---
   The toggle button is position:absolute, deliberately taken out of flex
   flow: .nav-links sizes each item by its own natural content width (see
   the min-width:0/overflow-wrap comments above), and an in-flow button
   here would widen the "Platforms" item enough to push the whole bar into
   its wrap fallback below ~1180px width, before .mobile-menu-toggle even
   takes over. Anchoring the caret outside the flow keeps this item's
   footprint identical to every plain nav link next to it. */
.nav-item-dropdown { position: relative; }
.nav-dropdown-toggle {
  /* Sits in the existing gap between nav items (.nav-links has gap:1.55rem)
     rather than reserving any padding on the link itself — any in-flow
     width added to this one item is what pushes the bar into its wrap
     fallback early (see the comment above). */
  position: absolute; inset-inline-end: -1.05rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 0.3rem; margin: 0; cursor: pointer;
  color: rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center;
  transition: color var(--dur);
}
.nav-dropdown-toggle:hover, .nav-dropdown-toggle[aria-expanded="true"] { color: var(--white); }
.nav-dropdown-toggle svg { width: 8px; height: 8px; transition: transform var(--dur) var(--ease); }
.nav-item-dropdown:hover .nav-dropdown-toggle svg,
.nav-item-dropdown:focus-within .nav-dropdown-toggle svg,
.nav-item-dropdown.open .nav-dropdown-toggle svg { transform: rotate(180deg); }
/* Modernized "mega-menu"-lite treatment: a mono-font badge (matching the
   .plat-abbr badges on the /platforms/ hub -- same abbreviations, same
   visual language, so the badge reads as one system across the site) plus
   a name + one-line description per item, instead of a bare list of links.
   Used by both the Platforms dropdown and the Insights "browse by
   platform" dropdown below. */
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, -6px);
  width: 322px; background: linear-gradient(165deg, var(--navy) 0%, var(--navy-mid) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); list-style: none;
  padding: 0.6rem 0.5rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility var(--dur), transform var(--dur) var(--ease);
  z-index: 210;
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-item-dropdown.open .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown-eyebrow {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-lite);
  padding: 0.5rem 0.7rem 0.65rem; margin-block-end: 0.15rem;
  border-block-end: 1px solid rgba(255,255,255,0.08);
}
.nav-dropdown-menu li + li { margin-block-start: 0.15rem; }
.nav-dropdown-item {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.55rem 0.7rem; border-radius: calc(var(--radius) - 2px);
  text-align: left; transition: background var(--dur), transform var(--dur);
}
.nav-dropdown-item:hover, .nav-dropdown-item:focus-visible {
  background: rgba(255,255,255,0.06); transform: translateX(2px);
}
.nav-dropdown-badge {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.55);
  transition: background var(--dur), color var(--dur);
}
.nav-dropdown-item:hover .nav-dropdown-badge { background: var(--emerald-lite); color: var(--emerald-on-dark); }
.nav-dropdown-badge svg { width: 15px; height: 15px; }
.nav-dropdown-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.12rem; min-width: 0; width: 100%; }
.nav-dropdown-name {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 600;
  color: rgba(255,255,255,0.9); line-height: 1.25; white-space: nowrap;
  transition: color var(--dur);
}
.nav-dropdown-item:hover .nav-dropdown-name { color: var(--white); }
.nav-dropdown-desc {
  font-size: 0.72rem; color: rgba(255,255,255,0.4); line-height: 1.3; white-space: nowrap;
}
.nav-dropdown-item[aria-current="page"] .nav-dropdown-name { color: var(--emerald-on-dark); }
.nav-dropdown-item[aria-current="page"] .nav-dropdown-badge { background: var(--emerald-lite); color: var(--emerald-on-dark); }
.nav-dropdown-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 0.4rem 0.7rem; }
.nav-dropdown-item--all .nav-dropdown-name { font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.72); }
.nav-dropdown-item--all:hover .nav-dropdown-name { color: var(--white); }
.nav-dropdown-arrow { width: 12px; height: 12px; flex-shrink: 0; margin-inline-start: auto; color: rgba(255,255,255,0.3); transition: transform var(--dur), color var(--dur); }
.nav-dropdown-item--all:hover .nav-dropdown-arrow { transform: translateX(3px); color: var(--emerald-on-dark); }

/* --- Mobile hamburger accordion (Platforms expands in place) --- */
.mobile-menu-group { border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-menu-group-head { display: flex; align-items: stretch; }
.mobile-menu-group-head a { flex: 1; border-bottom: none; }
.mobile-menu-expand {
  background: none; border: none; padding: 0 0.5rem; margin: 0; cursor: pointer;
  color: rgba(246,242,235,0.55); display: flex; align-items: center; justify-content: center;
}
.mobile-menu-expand svg { width: 11px; height: 11px; transition: transform var(--dur) var(--ease); }
.mobile-menu-group.open .mobile-menu-expand svg { transform: rotate(180deg); }
.mobile-menu-submenu { max-height: 0; overflow: hidden; transition: max-height 0.32s var(--ease); }
.mobile-menu-group.open .mobile-menu-submenu { max-height: 340px; }
.mobile-menu-submenu a {
  padding-block: 0.7rem; padding-inline-start: 1.1rem; font-size: 0.92rem; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(246,242,235,0.72);
}
.mobile-menu-submenu a:last-child { border-bottom: none; }
.mobile-menu-submenu a[aria-current="page"] { color: var(--emerald-on-dark); }

/* --- Footer flyout (opens right on desktop, expands inline on mobile) --- */
.footer-menu li.footer-item-flyout { align-self: flex-start; position: relative; }
.footer-flyout-head { display: flex; align-items: center; gap: 0.25rem; }
.footer-flyout-head a { font-size: 0.83rem; color: rgba(246,242,235,0.55); transition: color var(--dur); }
.footer-flyout-head a:hover { color: rgba(246,242,235,0.9); }
.footer-flyout-toggle {
  background: none; border: none; padding: 0.15rem; margin: 0; cursor: pointer; flex-shrink: 0;
  color: rgba(246,242,235,0.4); display: flex; align-items: center; justify-content: center;
  transition: color var(--dur);
}
.footer-flyout-toggle:hover, .footer-flyout-toggle[aria-expanded="true"] { color: rgba(246,242,235,0.85); }
.footer-flyout-toggle svg { width: 9px; height: 9px; transform: rotate(-90deg); transition: transform var(--dur) var(--ease); }
.footer-item-flyout:hover .footer-flyout-toggle svg,
.footer-item-flyout:focus-within .footer-flyout-toggle svg,
.footer-item-flyout.open .footer-flyout-toggle svg { transform: rotate(90deg); }
.footer-flyout-menu { list-style: none; max-height: 0; overflow: hidden; transition: max-height 0.32s var(--ease); }
.footer-item-flyout.open .footer-flyout-menu { max-height: 260px; margin-block-start: 0.5rem; }
.footer-flyout-menu li + li { margin-block-start: 0.5rem; }
.footer-flyout-menu a {
  display: block; padding-inline-start: 0.9rem; font-size: 0.79rem;
  color: rgba(246,242,235,0.45); border-inline-start: 2px solid rgba(246,242,235,0.14);
}
.footer-flyout-menu a:hover { color: rgba(246,242,235,0.85); border-inline-start-color: var(--emerald-glow); }
.footer-flyout-menu a[aria-current="page"] { color: var(--emerald-on-dark); border-inline-start-color: var(--emerald-glow); }
/* Badge/description/eyebrow/divider/arrow are the desktop flyout's richer
   treatment (see the ≥721px block below, matching .nav-dropdown-* in the
   top nav) -- hidden here so the mobile accordion keeps showing a plain
   name per row, exactly as before this was added. .footer-flyout-copy
   unwraps to a plain inline child so hiding .footer-flyout-desc leaves
   just the name as the anchor's own text, matching the old markup. */
.footer-flyout-badge, .footer-flyout-desc, .footer-flyout-eyebrow, .footer-flyout-divider, .footer-flyout-arrow { display: none; }
.footer-flyout-copy { display: contents; }
/* Footer columns are still a row above 720px (see .footer-cols media rule) —
   fly the menu out to the right of "Platforms" instead of stacking it below. */
@media (min-width: 721px) {
  /* Same badge/name/description "mega-menu"-lite treatment as the top
     nav's .nav-dropdown-menu (inc/site-header.php + the rules near
     .nav-dropdown-eyebrow above) -- only the opening direction differs:
     this one flies out to the right of "Platforms"/"Insights" instead of
     dropping down, since the footer sits at the bottom of the page with
     no room to drop down into. */
  .footer-flyout-menu {
    /* Anchored to the BOTTOM of the trigger, growing upward -- with 5-7
       badge rows this menu runs 350-500px tall, and the footer sits at
       the very bottom of the page with nothing below it to grow into
       (the same "last thing on the page" issue as the legal-panel
       accordion above), so opening downward would push most of it below
       the fold, out of reach of a hover-only menu. */
    position: absolute; left: 100%; bottom: -0.7rem;
    transform: translateX(-6px);
    width: 322px; max-height: none; overflow: visible;
    background: linear-gradient(165deg, var(--navy) 0%, var(--navy-mid) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 0.6rem 0.5rem; margin: 0 !important;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease), visibility var(--dur), transform var(--dur) var(--ease);
    z-index: 50;
  }
  .footer-item-flyout:hover .footer-flyout-menu,
  .footer-item-flyout:focus-within .footer-flyout-menu,
  .footer-item-flyout.open .footer-flyout-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(0);
    /* .footer-item-flyout.open .footer-flyout-menu (the mobile accordion's
       260px cap, set outside this media query) is just as specific as this
       selector, so without repeating max-height here it would win the tie
       and clamp this much taller desktop menu to 260px. */
    max-height: none;
  }
  .footer-flyout-menu li + li { margin-block-start: 0.15rem; }
  .footer-flyout-eyebrow {
    display: block;
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-lite);
    padding: 0.5rem 0.7rem 0.65rem; margin-block-end: 0.15rem;
    border-block-end: 1px solid rgba(255,255,255,0.08);
  }
  /* Extra ".footer-flyout-menu" ancestor prefix on these two rules isn't
     decorative -- it's needed to outrank the pre-existing ".footer-flyout-menu
     a" / "a:hover" rules above (which include the "a" type selector, making
     them MORE specific than a bare ".footer-flyout-item" class would be,
     regardless of source order), so display:flex/hover background actually
     take effect instead of silently losing to the mobile anchor styles. */
  .footer-flyout-menu .footer-flyout-item {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.55rem 0.7rem; border-radius: calc(var(--radius) - 2px);
    border-inline-start: none; padding-inline-start: 0.7rem;
    text-align: left; white-space: normal;
    transition: background var(--dur), transform var(--dur);
  }
  .footer-flyout-menu .footer-flyout-item:hover, .footer-flyout-menu .footer-flyout-item:focus-visible {
    background: rgba(255,255,255,0.06); transform: translateX(2px);
  }
  .footer-flyout-badge {
    display: flex; flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.07);
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
    letter-spacing: 0.04em; color: rgba(255,255,255,0.55);
    transition: background var(--dur), color var(--dur);
  }
  .footer-flyout-badge svg { width: 15px; height: 15px; }
  .footer-flyout-item:hover .footer-flyout-badge { background: var(--emerald-lite); color: var(--emerald-on-dark); }
  .footer-flyout-copy { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
  .footer-flyout-name {
    font-family: var(--font-display); font-size: 0.9rem; font-weight: 600;
    color: rgba(255,255,255,0.9); line-height: 1.25; white-space: nowrap;
    transition: color var(--dur);
  }
  .footer-flyout-item:hover .footer-flyout-name { color: var(--white); }
  .footer-flyout-desc {
    display: block; font-size: 0.72rem; color: rgba(255,255,255,0.4); line-height: 1.3; white-space: nowrap;
  }
  .footer-flyout-item[aria-current="page"] .footer-flyout-name { color: var(--emerald-on-dark); }
  .footer-flyout-item[aria-current="page"] .footer-flyout-badge { background: var(--emerald-lite); color: var(--emerald-on-dark); }
  .footer-flyout-divider { display: block; height: 1px; background: rgba(255,255,255,0.08); margin: 0.4rem 0.7rem; }
  .footer-flyout-item--all .footer-flyout-name { font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.72); }
  .footer-flyout-item--all:hover .footer-flyout-name { color: var(--white); }
  .footer-flyout-arrow {
    display: block; width: 12px; height: 12px; flex-shrink: 0; margin-inline-start: auto;
    color: rgba(255,255,255,0.3); transition: transform var(--dur), color var(--dur);
  }
  .footer-flyout-item--all:hover .footer-flyout-arrow { transform: translateX(3px); color: var(--emerald-on-dark); }
}

/* ============================================================ PLATFORM DETAIL PAGES */
.platform-hero { background: var(--ink); position: relative; overflow: hidden; padding-block-start: 3.2rem; }
.platform-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 20%, rgba(26,107,69,0.16) 0%, transparent 65%),
    linear-gradient(160deg, #0C1521 0%, #152236 55%, #0C1521 100%);
  pointer-events: none;
}
.platform-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center; padding-block-end: 4.5rem; }
.platform-hero-art { display: flex; justify-content: center; }
.platform-hero-art img { width: 100%; max-width: 420px; filter: drop-shadow(0 20px 50px rgba(0,0,0,0.35)); }
.platform-hero h1 { color: var(--white); margin-block: 0.9rem 1.2rem; text-align: left; }
.platform-hero .body-lg { color: rgba(246,242,235,0.68); max-width: 520px; }
.platform-hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.6rem; }
.platform-hero-tags .chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: rgba(246,242,235,0.75); }
.platform-hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-block-start: 2rem; }
@media (max-width: 900px) {
  .platform-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .platform-hero h1, .platform-hero .body-lg { text-align: center; margin-inline: auto; }
  .platform-hero-tags, .platform-hero-actions { justify-content: center; }
  .platform-hero-art img { max-width: 280px; }
}

.cap-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; margin-block-start: 3rem; }
.cap-card {
  background: var(--white); border: 1px solid var(--parchment-3); border-radius: var(--radius-lg);
  padding: 1.8rem 1.9rem; box-shadow: var(--shadow-sm); transition: transform var(--dur), box-shadow var(--dur);
}
.cap-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cap-card-icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--emerald-lite);
  display: flex; align-items: center; justify-content: center; margin-block-end: 1.1rem;
}
.cap-card-icon svg { width: 20px; height: 20px; stroke: var(--emerald); fill: none; stroke-width: 1.8; }
.cap-card h3 { color: var(--navy); margin-block-end: 0.55rem; }
.cap-card p { font-size: 0.88rem; line-height: 1.68; color: var(--text-mid); }
@media (max-width: 640px) { .cap-grid { grid-template-columns: 1fr; } }

.platform-signals { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 2.4rem; }
/* These stat pills sometimes carry a short phrase ("2 Editions") instead of
   a pure number — .stat-pill .num is sized for 2-4 digits, so give this
   context a smaller, wrap-friendly size instead of overflowing the pill. */
.platform-signals .stat-pill { min-width: 168px; }
.platform-signals .stat-pill .num { font-size: 1.35rem; line-height: 1.25; }

/* --- Careers menu additions ---------------------------------------------
   1) Footer: a flyout can open to the LEFT when there isn't room on the
      right (site.js toggles .flyout-left; "Careers" sits in the right-hand
      footer column, under Our Clients). Desktop only -- on mobile the
      flyout expands inline like the others.
   2) Top nav: the "Careers" item makes nine entries, and .nav-inner is
      width-capped, so at every desktop width (>=1181px) the row tightens
      its gap/letter-spacing instead of wrapping labels onto two lines. */
.footer-menu--solo { margin-block: 0 0.6rem; }
@media (min-width: 721px) {
  .footer-item-flyout.flyout-left .footer-flyout-menu { left: auto; right: 100%; transform: translateX(6px); }
  .footer-item-flyout.flyout-left:hover .footer-flyout-menu,
  .footer-item-flyout.flyout-left:focus-within .footer-flyout-menu,
  .footer-item-flyout.flyout-left.open .footer-flyout-menu { transform: translateX(0); }
}
@media (min-width: 1181px) {
  .nav-logo { margin-inline-start: calc(-1 * (clamp(1.25rem, 4vw, 2.5rem) - 0.75rem)); }   /* logo sits further left, freeing room for the menu */
  .nav-links { gap: 1.4rem; }
  .nav-links a { font-size: 0.8rem; letter-spacing: 0.01em; white-space: nowrap; }  /* never wrap a label onto two lines */
  .nav-dropdown-toggle { inset-inline-end: -0.95rem; }
}