/* indexalt.html - editorial, technical, restrained.
     Warm paper background, serif display, hairline rules, FMC teal as
     a quiet structural accent. One inverted dark panel for the digital
     layer. Static page: no required-for-visibility JS. */

  :root {
    --bone:        #F4F2EC;
    --bone-2:      #EBE8DE;
    --bone-3:      #DCD8CB;
    --paper:       #FBFAF6;

    --ink:         #0E1A1F;
    --ink-2:       #1B2A31;
    --ink-3:       #2E3F46;
    --mute:        #57676D;
    --mute-2:      #8A969A;

    --rule:        rgba(14,26,31,0.14);
    --rule-strong: rgba(14,26,31,0.32);

    --teal:        #0d8a7c;
    --teal-deep:   #0a6e63;
    --teal-bright: #2dd4bf;
    --teal-line:   rgba(13,138,124,0.55);
    --teal-soft:   rgba(13,138,124,0.10);

    /* Product accents - used sparingly, only on wordmarks */
    --sage:  #9CAF88;
    --pulse: #C0392B;
    --rx:    #8B7CD8;

    --f-sans:    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --f-serif:   var(--f-sans);
    /* Keep former mono/meta labels on the standard FMC system stack. */
    --f-mono:    var(--f-sans);

    --container: none; /* no fixed cap - margins are a constant viewport ratio (2026-07-24, KP) */
    --container-narrow: 980px;
    /* Tighter fluid gutter (2026-07-21, KP): content margins shrink on
       small screens and track the nav's new edge insets. Was
       clamp(20px, 4vw, 48px). */
    --gutter: 6vw; /* constant-ratio side margin (~6% each side) so the layout looks the same at every screen size (2026-07-24, KP) */
    --nav-h: 52px;

    /* 2026-07-06 UI audit (John): every homepage section header had its
       own size/leading. ONE scale now - the "book-sized" type John chose
       for the hero/CTA. Hero h1 stays a step larger for hierarchy. */
    --h2-size: clamp(28px, 3.4vw, 42px);
    --h2-leading: 1.1;
    --lead-size: 17px;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

  /* ── Accessibility primitives (2026-06-11 design-system pass) ──
     One visible focus ring for every interactive element. Teal on the
     light bone/paper surfaces; bright teal on dark/inverted panels so
     the ring holds WCAG contrast in both registers. */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
  }
  .digital :focus-visible,
  .cta :focus-visible,
  body.page-dark :focus-visible,
  nav.site-nav:not(.nav--light) :focus-visible,
  .mobile-dropdown:not(.nav--light) :focus-visible {
    outline-color: var(--teal-bright);
  }
  .form-field input:focus-visible,
  .form-field select:focus-visible,
  .form-field textarea:focus-visible {
    outline: none; /* fields carry their own border + ring treatment */
  }

  /* Motion is opt-in: nothing on the page requires animation to be
     readable. Reduce everything when the visitor asks. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  body {
    background: var(--bone);
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern','liga','calt';
    overflow-x: hidden;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--teal); color: #fff; }

  .sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
  }
  .sr-only:focus {
    position: fixed !important; top: 14px; left: 14px;
    width: auto !important; height: auto !important; clip: auto !important;
    padding: 10px 16px !important;
    background: var(--ink); color: var(--bone);
    border-radius: 4px; z-index: 9999; font-weight: 600; font-size: 13px;
  }

  /* ============================================================
     LAYOUT PRIMITIVES
     ============================================================ */
  .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
  .eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 500;
  }
  .eyebrow--inverted { color: rgba(244,242,236,0.62); }
  .eyebrow--teal { color: var(--teal-deep); }

  .display {
    font-family: var(--f-serif);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.02;
    color: var(--ink);
    font-feature-settings: 'kern','liga','onum';
  }
  .display em,
  .display strong { font-style: normal; font-weight: 700; color: var(--teal-deep); }
  .display .accent { color: var(--teal-deep); font-style: normal; font-weight: 700; }
  /* ============================================================
     NAV - dark liquid glass (matches fmc-hub.com header)
     ============================================================ */
  nav.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 0; /* gutter lives on .nav-inner so it mirrors .container exactly */
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-bottom: 0.5px solid rgba(255,255,255,0.10);
    box-shadow:
      inset 0 0.5px 0 0 rgba(255,255,255,0.12),
      0 4px 24px rgba(0,0,0,0.28);
  }
  .nav-inner {
    width: 100%;
    /* Full-bleed nav row (2026-07-21, KP): logo and Login track the real
       screen edges at every viewport, matching the homepage nav.
       Supersedes the 2026-07-11 content-rail alignment. */
    max-width: none;
    padding-left: max(clamp(6px, 0.9vw, 13px), env(safe-area-inset-left));
    padding-right: max(clamp(6px, 0.9vw, 13px), env(safe-area-inset-right));
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-logo {
    display: flex; align-items: center; gap: 8px;
    color: #f5f5f7;
  }
  .nav-logo-text {
    font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  }
  .nav-logo-text span {
    font-weight: 400; color: #6e6e73;
  }

  .nav-logo img,
  .footer__brand img {
    object-fit: contain;
    background: transparent;
  }
  .nav-logo img {
    border-radius: 0 !important;
  }

  .hero__brandmark {
    display: block;
    width: clamp(99px, 10.4vw, 146px);
    height: auto;
    margin: 0 auto clamp(18px, 2.4vw, 28px);
    filter: drop-shadow(0 18px 34px rgba(14,26,31,0.10));
  }
  .nav-links {
    display: flex; align-items: center; gap: 4px;
    list-style: none;
  }
  .nav-links li { display: flex; align-items: center; }
  .nav-links a {
    display: flex; align-items: center;
    font-size: 12px; font-weight: 400;
    color: #86868b;
    transition: color .2s;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-links a:hover { color: #f5f5f7; }

  nav.site-nav.nav--light {
    /* Hub glass port (2026-08-08, John): the customer hub bar's film,
       rgba(255,255,255,0.40) over the same blur(40px) saturate(200%),
       replaces the 86% bone strip. Recipe source: fmc-portal-shell.css,
       body.portal-light nav. The mobile panel below stays near-opaque
       on purpose, same as the Hub menu. */
    background: rgba(255,255,255,0.40);
    border-bottom-color: rgba(14,26,31,0.06);
    box-shadow:
      inset 0 0.5px 0 0 rgba(255,255,255,0.55),
      0 1px 12px rgba(10,70,60,0.04);
  }
  nav.site-nav.nav--light .nav-logo,
  nav.site-nav.nav--light .nav-logo-text {
    color: var(--ink);
  }
  nav.site-nav.nav--light .nav-logo-text span {
    color: var(--teal-deep);
  }
  nav.site-nav.nav--light .nav-links a {
    color: var(--ink-3);
  }
  nav.site-nav.nav--light .nav-links a:hover {
    color: var(--ink);
  }
  nav.site-nav.nav--light .mobile-menu-btn span {
    background: var(--ink-3);
  }
  nav.site-nav,
  nav.site-nav .nav-logo,
  nav.site-nav .nav-logo-text,
  nav.site-nav .nav-logo-text span,
  nav.site-nav .nav-links a,
  nav.site-nav .mobile-menu-btn span {
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
  }

  .nav-dropdown { position: relative; }
  .nav-dropdown > a { gap: 3px; }
  .nav-dropdown > a .nav-chevron {
    width: 10px; height: 10px; transition: transform .2s;
    flex-shrink: 0; opacity: .5;
  }
  .nav-dropdown:hover > a .nav-chevron { transform: rotate(180deg); }
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 200px;
    background: rgba(20,20,22,0.65);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 0.5px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 4px;
    opacity: 0; visibility: hidden;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
      inset 0 0.5px 0 0 rgba(255,255,255,0.15),
      0 12px 40px rgba(0,0,0,0.55),
      0 2px 8px rgba(0,0,0,0.3);
    z-index: 200;
    overflow: hidden;
  }
  .nav-dropdown-menu::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 16px 16px 0 0;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-dropdown-menu::before {
    content: ''; position: absolute;
    top: -12px; left: 0; right: 0; height: 12px; z-index: 201;
  }
  .nav-dropdown-menu a {
    display: block; padding: 8px 12px;
    font-size: 13px; font-weight: 400; color: #86868b;
    border-radius: 12px; transition: all .15s;
    position: relative; z-index: 2;
  }
  .nav-dropdown-menu a:hover { color: #f5f5f7; background: rgba(255,255,255,0.08); }
  .nav-dropdown-menu .dd-divider {
    height: 0.5px; background: rgba(255,255,255,0.06);
    margin: 4px 8px; position: relative; z-index: 2;
  }

  /* Light-header dropdown variant (2026-06-09): when the adaptive nav is in
     nav--light mode the dark glass panel clashed with the bone header - match
     the header's light glass instead. */
  nav.site-nav.nav--light .nav-dropdown-menu {
    background: rgba(244,242,236,0.94);
    border-color: rgba(14,26,31,0.10);
    box-shadow:
      inset 0 0.5px 0 0 rgba(255,255,255,0.9),
      0 18px 40px rgba(10,70,60,0.14);
  }
  nav.site-nav.nav--light .nav-dropdown-menu::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, transparent 100%);
  }
  nav.site-nav.nav--light .nav-dropdown-menu a { color: var(--ink-3); }
  nav.site-nav.nav--light .nav-dropdown-menu a:hover {
    color: var(--ink);
    background: rgba(10,70,60,0.07);
  }
  nav.site-nav.nav--light .nav-dropdown-menu .dd-divider {
    background: rgba(14,26,31,0.10);
  }

  .nav-cta {
    font-size: 12px !important;
    font-weight: 400 !important;
    background: var(--teal) !important;  /* solid teal - matches .btn--primary */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #fff !important;
    padding: 5px 14px !important;
    border-radius: 980px !important;
    transition: all .2s !important;
    border: 0.5px solid rgba(45,212,191,0.25) !important;
    box-shadow:
      inset 0 0.5px 0 0 rgba(255,255,255,0.2),
      0 2px 8px rgba(13,138,124,0.3) !important;
  }
  .nav-cta:hover { background: var(--teal-deep) !important; }  /* matches .btn--primary:hover */

  /* Mobile nav */
  .mobile-menu-btn {
    display: none;
    position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 8px; z-index: 101;
  }
  .mobile-menu-btn span {
    display: block; width: 16px; height: 1px;
    background: #86868b;
    transition: all .3s; transform-origin: center;
  }
  .mobile-menu-btn span:nth-child(1) { margin-bottom: 5px; }
  .mobile-menu-btn span:nth-child(3) { margin-top: 5px; }
  .mobile-menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
  .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mobile-dropdown {
    display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    padding: 8px 24px 24px; z-index: 99; flex-direction: column;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  }
  .mobile-dropdown.open { display: flex; }
  .mobile-dropdown.nav--light {
    /* Near-opaque paper - same recipe as the Hub menu. Thin glass let the
       page background bleed through the blur as a cloudy smudge on iOS. */
    background: rgba(251,250,246,0.92);
    border-bottom-color: rgba(14,26,31,0.08);
    box-shadow:
      inset 0 0.5px 0 0 rgba(255,255,255,0.9),
      0 12px 36px rgba(14,26,31,0.10);
  }
  .mobile-dropdown.nav--light a {
    color: var(--ink);
    border-bottom-color: var(--rule);
  }
  .mobile-dropdown.nav--light a:hover {
    color: var(--teal-deep);
  }
  .mobile-dropdown.nav--light .mobile-solutions-sub a {
    color: var(--mute) !important;
  }
  .mobile-dropdown a {
    display: block; padding: 12px 0;
    font-size: 17px; font-weight: 600;
    color: #86868b;
    border-bottom: 0.5px solid rgba(255,255,255,0.06);
    transition: color .15s;
  }
  .mobile-dropdown a:last-child { border-bottom: none; }
  .mobile-dropdown a:hover { color: #f5f5f7; }
  .mobile-dropdown a.mobile-cta {
    margin-top: 12px; text-align: center;
    background: rgba(13,138,124,0.85);
    color: #fff !important;
    font-weight: 500;
    border-radius: 980px;
    border: 0.5px solid rgba(45,212,191,0.2);
    padding: 14px;
    font-size: 15px;
    box-shadow: inset 0 0.5px 0 0 rgba(255,255,255,0.15);
  }
  .mobile-solutions-sub { display: none; flex-direction: column; padding-left: 0; }
  .mobile-solutions-sub.open { display: flex; }
  .mobile-solutions-sub a {
    font-size: 15px !important; font-weight: 400 !important;
    color: #6e6e73 !important;
    padding: 10px 0 10px 16px !important;
  }
  /* `.mobile-dropdown a` sets display:block (higher specificity) and the
     global `img, svg { display:block }` reset pushes the chevron onto its
     own line - qualify the selector so flex wins and the arrow sits to
     the right of the label, matching the Hub menu. */
  .mobile-dropdown a.mobile-solutions-toggle,
  .mobile-solutions-toggle {
    display: flex; align-items: center;
  }
  .mobile-solutions-toggle .mobile-chev {
    display: inline-block;
    width: 14px; height: 14px; transition: transform .25s;
    margin-left: 8px; opacity: .4;
  }
  .mobile-solutions-toggle.expanded .mobile-chev { transform: rotate(180deg); }

  @media (max-width: 768px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
  }

  /* ============================================================
     BUTTONS
     ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    font-family: var(--f-sans);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
    white-space: nowrap;
  }
  .btn .btn__arrow {
    display: inline-flex;
    transition: transform .25s ease;
  }
  .btn:hover .btn__arrow { transform: translateX(3px); }

  .btn--primary {
    background: var(--teal);
    color: var(--paper);
    border-color: var(--teal);
  }
  .btn--primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }

  .btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-strong);
  }
  .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  .btn--link {
    padding: 6px 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    color: var(--ink);
    font-size: 14px;
    gap: 8px;
  }
  .btn--link:hover {
    color: var(--teal-deep);
    border-bottom-color: var(--teal-deep);
  }

  .btn--inv-primary {
    background: var(--bone);
    color: var(--ink);
    border-color: var(--bone);
  }
  .btn--inv-primary:hover { background: #fff; color: var(--ink); }

  .btn--inv-ghost {
    background: transparent;
    color: var(--bone);
    border-color: rgba(244,242,236,0.40);
  }
  .btn--inv-ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

  /* Push content below fixed nav */
  main { padding-top: var(--nav-h); }

  /* ============================================================
     HERO
     ============================================================ */
  .hero {
    position: relative;
    padding: clamp(18px, 2.7vw, 34px) 0 0;
    border-bottom: 1px solid var(--rule);
    background: var(--bone);
  }
  .hero__layout {
    display: block;
  }
  .hero__copy {
    min-width: 0;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
  }
  .hero__tagline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(22px, 3vw, 32px);
    font-family: var(--f-sans);
    font-size: clamp(13px, 1.35vw, 15px);
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--teal-deep);
  }
  .hero__title {
    /* 2026-07-06 (John): oversized hero type reads as AI-made; book-sized. */
    font-size: clamp(32px, 4.2vw, 52px);
    max-width: 14ch;
    margin-left: auto;
    margin-right: auto;
  }
  .hero__title .accent {
    color: var(--teal-deep);
  }
  .hero__title-line {
    display: block;
  }
  .hero__sub {
    margin-top: clamp(28px, 3.4vw, 40px);
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(17px, 1.55vw, 20px);
    line-height: 1.5;
    color: var(--ink-3);
  }
  .hero__ctas {
    margin-top: clamp(36px, 4.4vw, 48px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .hero__footer {
    margin-top: clamp(46px, 6vw, 72px);
    padding: 0;
    min-height: clamp(124px, 11vw, 156px);
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: center;
  }
  .hero__fact {
    min-height: clamp(124px, 11vw, 156px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;        /* centered per John 2026-06-09 (was flex-start) */
    text-align: center;
    justify-content: center;
  }
  .hero__fact-num {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: clamp(34px, 3.6vw, 48px);
    letter-spacing: -0.02em;
    line-height: 0.9;
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
  }
  .hero__fact-num em {
    font-style: normal;
    color: var(--teal-deep);
    font-size: 0.7em;
    margin-left: 1px;
    position: relative;
    top: -0.03em;
  }
  .hero__fact-label {
    font-family: var(--f-sans);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 600;
  }

  /* ============================================================
     SECTION GENERIC
     ============================================================ */
  .section {
    padding: clamp(29px, 4vw, 50px) 0;
    border-bottom: 1px solid var(--rule);
  }
  .section--paper { background: var(--paper); }
  /* ============================================================
     WHAT FMC DOES (capabilities ladder, two-column)
     ============================================================ */
  .what {
    background: var(--paper);
  }
  .what__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .what__title {
    font-size: var(--h2-size);
    line-height: var(--h2-leading);
    max-width: 22ch;
  }
  .what__title .accent { color: var(--teal-deep); }
  .what__body {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-3);
    margin-top: 24px;
  }
  .what__body + .what__body { margin-top: 14px; }

  .what__list {
    list-style: none;
    display: grid;
    gap: 0;
  }
  .what__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: baseline;
    padding: 22px 0;
    border-top: 1px solid var(--rule);
  }
  .what__item:last-child { border-bottom: 1px solid var(--rule); }
  .what__item-name {
    font-family: var(--f-serif);
    font-size: clamp(20px, 2.2vw, 26px);
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .what__item-desc {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-3);
    margin-top: 6px;
    max-width: 48ch;
  }
  .what__item-tag {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 700; /* 2026-07-06 revamp: tags read as bold markers */
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
    line-height: 1;
    padding-top: 8px;
    white-space: nowrap;
  }

  /* ============================================================
     DIGITAL LAYER (inverted dark panel)
     ============================================================ */
  .digital {
    background: var(--ink);
    color: var(--bone);
    padding: clamp(29px, 4vw, 50px) 0;
    border-bottom: 1px solid var(--ink);
    position: relative;
    overflow: hidden;
  }
  .digital__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
  }
  .digital__title {
    font-size: var(--h2-size);
    line-height: var(--h2-leading);
    color: var(--bone);
    max-width: 20ch;
  }
  .digital__title em,
  .digital__title strong { color: #6ED4C2; font-style: normal; font-weight: 700; }
  .digital__body {
    margin-top: 22px;
    color: rgba(244,242,236,0.7);
    max-width: 50ch;
    font-size: 17px;
    line-height: 1.6;
  }
  .digital__cta { margin-top: 32px; }










  /* ============================================================
     IN THE FIELD (Sweeping Corp-inspired ground proof)
     ============================================================ */
  .field {
    background: var(--paper);
  }




  /* ============================================================
     CTA - final
     ============================================================ */
  .cta {
    background: var(--ink);
    color: var(--bone);
    padding: clamp(32px, 4.4vw, 54px) 0;
  }
  .cta__inner {
    text-align: center;
  }
  .cta__eyebrow {
    color: rgba(244,242,236,0.55);
    margin-bottom: 18px;
  }
  .cta__title {
    font-family: var(--f-serif);
    /* 2026-07-06 (John): oversized display type reads as AI-made; book-sized. */
    font-size: var(--h2-size);
    letter-spacing: -0.02em;
    line-height: var(--h2-leading);
    color: var(--bone);
    max-width: 18ch;
    margin: 0 auto;
  }
  .cta__title em,
  .cta__title strong { color: #6ED4C2; font-style: normal; font-weight: 700; }
  .cta__body {
    margin: 22px auto 0;
    max-width: 52ch;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(244,242,236,0.7);
  }
  .cta__buttons {
    margin-top: 36px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
  }
  .cta__phone {
    margin-top: 28px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244,242,236,0.55);
  }
  .cta__phone a {
    color: var(--bone);
    border-bottom: 1px solid rgba(244,242,236,0.4);
    padding-bottom: 1px;
    transition: border-color .2s ease;
  }
  .cta__phone a:hover { border-bottom-color: var(--bone); }

  /* ============================================================
     FOOTER
     ============================================================ */
  footer {
    background: var(--bone-2);
    color: var(--ink);
    padding: clamp(22px, 2.7vw, 32px) 0 20px;
    border-top: 1px solid var(--rule);
  }
  .footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--rule);
  }
  .footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }
  .footer__brand img {
    width: 22px; height: 22px;
    border-radius: 0;
  }
  .footer__brand-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .footer__brand-text span {
    font-weight: 400;
    color: var(--mute);
    margin-left: 2px;
  }
  .footer__desc {
    font-size: 13.5px;
    color: var(--ink-3);
    line-height: 1.55;
    max-width: 36ch;
  }
  .footer__col h4 {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 16px;
  }
  .footer__col ul { list-style: none; }
  .footer__col li { margin-bottom: 10px; }
  .footer__col a {
    font-size: 13.5px;
    color: var(--ink-3);
    transition: color .15s ease;
  }
  .footer__col a:hover { color: var(--ink); }

  .footer__bottom {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    flex-wrap: wrap;
    gap: 10px;
  }
  /* Quiet utility links (Mass Save / FAQs) live in the bottom line so the
     columns above can mirror the header nav exactly (2026-07-06 audit). */
  .footer__bottom a {
    color: var(--mute);
    transition: color .15s ease;
  }
  .footer__bottom a:hover { color: var(--ink); }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1080px) {
    .hero__layout,
    .what__grid,
    .digital__grid,
    .field__top {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }
  @media (max-width: 980px) {
  }
  @media (max-width: 720px) {
    /* Containment only - the canonical phone layout lives in the
       MOBILE UI/UX POLISH block further down. (A conflicting 390px
       left-aligned .container override was removed 2026-06-11.) */
    .hero__layout,
    .hero__copy { width: 100%; max-width: 100%; min-width: 0; }
    .hero__title,
    .hero__sub { overflow-wrap: anywhere; }
  }
  @media (max-width: 480px) {
    .hero__title { font-size: clamp(36px, 10vw, 44px); }
    .hero__ctas { display: grid; width: 100%; }
    .hero__ctas .btn { width: 100%; justify-content: center; white-space: normal; }
    .hero__footer { grid-template-columns: 1fr 1fr; }
    .footer__top { grid-template-columns: 1fr; }
  }

  /* ============================================================
     BUILDINGPULSE DASHBOARD MOCKUP (replaces sparkpanel)
     ============================================================ */
  .bpdash {
    position: relative;
    border: 1px solid rgba(244,242,236,0.14);
    border-radius: 10px;
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(110,212,194,0.06), transparent 60%),
      linear-gradient(180deg, rgba(244,242,236,0.025), rgba(244,242,236,0));
    overflow: hidden;
  }
  .bpdash__chrome {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(244,242,236,0.10);
    background: rgba(0,0,0,0.18);
  }
  .bpdash__brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--f-sans);
    font-size: 13px;
    color: var(--bone);
    letter-spacing: -0.005em;
  }
  .bpdash__brand-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #6ED4C2;
    box-shadow: 0 0 0 4px rgba(110,212,194,0.16);
  }
  .bpdash__brand strong { font-weight: 600; }
  .bpdash__brand span { color: rgba(244,242,236,0.5); font-weight: 400; }
  .bpdash__status {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6ED4C2;
  }
  .bpdash__body { padding: 18px clamp(16px, 2.2vw, 22px) 22px; }
  .bpdash__crumb {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .bpdash__site {
    font-family: var(--f-serif);
    font-size: 18px;
    color: var(--bone);
    letter-spacing: -0.01em;
  }
  .bpdash__site em {
    font-style: normal;
    color: rgba(244,242,236,0.55);
    font-weight: 400;
  }
  .bpdash__period {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244,242,236,0.5);
  }
  .bpdash__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }
  .bpdash__kpi {
    padding: 12px 14px;
    background: rgba(244,242,236,0.03);
    border: 1px solid rgba(244,242,236,0.08);
    border-radius: 6px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .bpdash__kpi-label {
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244,242,236,0.5);
  }
  .bpdash__kpi-val {
    font-family: var(--f-serif);
    font-size: 22px;
    color: var(--bone);
    letter-spacing: -0.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .bpdash__kpi-val em {
    font-style: normal;
    color: #6ED4C2;
    font-size: 0.55em;
    margin-left: 2px;
    letter-spacing: 0.03em;
  }
  .bpdash__kpi-trend {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(110,212,194,0.85);
  }
  .bpdash__kpi-trend.down { color: rgba(110,212,194,0.85); }
  .bpdash__kpi-trend.up { color: rgba(244,200,160,0.85); }
  .bpdash__chartwrap {
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(244,242,236,0.08);
    border-radius: 6px;
    padding: 14px 14px 10px;
  }
  .bpdash__charthead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
  }
  .bpdash__chart-title {
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--bone);
    letter-spacing: -0.005em;
  }
  .bpdash__legendrow {
    display: flex; gap: 14px;
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244,242,236,0.5);
  }
  .bpdash__legendrow .dot {
    display: inline-block; width: 8px; height: 2px; vertical-align: middle;
    margin-right: 6px; border-radius: 1px;
  }
  .bpdash__chart {
    width: 100%; height: 130px; display: block;
  }
  .bpdash__axis {
    display: flex; justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    color: rgba(244,242,236,0.4);
    padding-top: 4px;
  }
  @media (max-width: 560px) {
    .bpdash__kpis { grid-template-columns: 1fr 1fr; }
    .bpdash__kpi:nth-child(3) { grid-column: 1 / -1; }
  }

  /* ============================================================
     NAMES BAND (promoted, standalone trust strip)
     ============================================================ */
  .namesband {
    background: var(--bone-2);
    padding: clamp(22px, 2.8vw, 37px) 0;
    border-bottom: 1px solid var(--rule);
  }
  .namesband__inner { text-align: left; }
  .namesband__eyebrow {
    margin-bottom: 18px;
    color: var(--ink-3);
    font-weight: 600;
  }
  /* 2026-07-06 UI audit (John): the logos band header was display-sized
     and competed with real section titles. Demoted to a quiet caps label -
     the logos are the content here, the sentence is just a caption. */
  .namesband__title {
    font-family: var(--f-sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.7;
    color: var(--mute);
    max-width: 58ch;
    margin-bottom: clamp(22px, 3vw, 34px);
  }
  .namesband__title em,
  .namesband__title strong { font-style: normal; font-weight: 700; color: var(--teal-deep); }
  .namesband__row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
    padding: clamp(20px, 3vw, 28px) 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  /* 2026-07-06 revamp: logos show in full color (grayscale treatment retired). */
  .namesband__row img {
    max-width: 100%;
    height: clamp(38px, 4.4vw, 52px);
    width: auto;
    object-fit: contain;
    opacity: 1;
    transition: opacity .25s ease;
    margin: 0 auto;
  }
  @media (max-width: 980px) {
    .namesband__row { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  }
  @media (max-width: 480px) {
    .namesband__row { grid-template-columns: repeat(2, 1fr); }
  }

  /* ============================================================
     SUCCESS STORIES - auto-scroll carousel
     ============================================================ */
  .stories {
    background: var(--paper);
    padding: clamp(29px, 3.6vw, 46px) 0;
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
  }
  .stories__head {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: end;
    margin-bottom: clamp(40px, 6vw, 56px);
  }
  .stories__title {
    font-size: var(--h2-size);
    line-height: var(--h2-leading);
    max-width: 22ch;
  }
  .stories__title em,
  .stories__title strong { font-style: normal; font-weight: 700; color: var(--teal-deep); }
  .stories__lead {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-3);
    max-width: 48ch;
  }
  .stories__viewport {
    position: relative;
    width: min(100% - 36px, 1080px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--rule);
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .stories__viewport.is-dragging {
    cursor: grabbing;
  }
  .stories__viewport:hover {
    border-color: var(--rule-strong);
  }
  .stories__viewport.is-dragging .story__link {
    pointer-events: none;
  }
  .stories__track {
    display: flex;
    /* Breathing room between cards while the carousel slides or is
       dragged - the step math in index.html reads this gap, so keep
       it here rather than hard-coding it in JS. */
    gap: 24px;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }

  .story {
    flex: 0 0 var(--story-w, 100%);
    width: var(--story-w, 100%);
    background: var(--bone);
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 390px;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .story:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(14,26,31,0.07);
  }
  .story__photo {
    position: relative;
    width: 100%;
    aspect-ratio: auto;
    min-height: 100%;
    background:
      linear-gradient(135deg, #2E3F46 0%, #1B2A31 60%, #0E1A1F 100%);
    overflow: hidden;
  }
  .story__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .story__photo::after {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(60% 80% at 20% 20%, rgba(110,212,194,0.10), transparent 60%),
      linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.32));
    pointer-events: none;
  }
  .story__body { padding: clamp(26px, 4vw, 40px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .story__client {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .story__name {
    font-family: var(--f-serif);
    font-size: clamp(23px, 2.7vw, 32px);
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
  }
  .story__work {
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.5;
    margin-top: 2px;
  }
  .story__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .story__year { color: var(--ink-3); }
  .story__link {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: color .15s ease, border-color .15s ease;
  }
  .story__link:hover { color: var(--teal-deep); border-bottom-color: var(--teal-deep); }
  /* Stepper controls - visible, keyboard-operable alternative to the
     drag/auto-advance behavior. Calm: hairline round buttons, small
     rule-colored dots, no glow. */
  .stories__nav {
    width: min(100% - 36px, 1080px);
    margin: 18px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .stories__dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .stories__dot {
    width: 7px; height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bone-3);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .stories__dot:hover { background: var(--mute-2); }
  .stories__dot[aria-current="true"] {
    background: var(--teal-deep);
    transform: scale(1.25);
  }
  .stories__arrows { display: flex; gap: 8px; }
  .stories__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--rule-strong);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
  }
  .stories__arrow:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .stories__arrow svg { width: 14px; height: 14px; }

  @media (max-width: 780px) {
    .stories__viewport { width: min(100% - 28px, 560px); }
    .stories__nav { width: min(100% - 28px, 560px); }
    .story {
      grid-template-columns: 1fr;
      min-height: auto;
    }
    .story__photo { aspect-ratio: 16 / 10; min-height: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .stories__track {
      transform: none !important;
      flex-wrap: wrap;
      width: 100%;
      gap: 28px;
    }
    .stories__track > .story[aria-hidden="true"] { display: none; }
    .stories__track > .story {
      flex: 0 0 100% !important;
      width: 100% !important;
    }
    .stories__viewport { cursor: default; }
    /* All cards are shown stacked - the stepper has nothing to step. */
    .stories__nav { display: none; }
  }

  /* ============================================================
     VERTICALS - building types as a floating icon field.
     2026-07-06 UI audit (John): section moved from the homepage to
     the EMS page; white tile cards removed, the line-art icons
     float free with a slow drift. Title uses the page's own
     .sec-head pattern, so only the icon field lives here.
     ============================================================ */
  .vfloat {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(40px, 5.5vw, 64px) clamp(18px, 3vw, 40px);
    padding-top: clamp(6px, 1.5vw, 14px);
    text-align: center;
  }
  .vfloat li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: vdrift 7.4s ease-in-out infinite alternate;
  }
  .vfloat li:nth-child(2n) { animation-duration: 8.6s; animation-delay: -2.3s; }
  .vfloat li:nth-child(3n) { animation-duration: 9.4s; animation-delay: -4.1s; }
  .vfloat li:nth-child(5n) { animation-duration: 7.9s; animation-delay: -1.4s; }
  @keyframes vdrift {
    from { transform: translateY(3px); }
    to   { transform: translateY(-5px); }
  }
  .vfloat__icon {
    width: 48px; height: 48px;
    color: var(--teal-deep);
    display: inline-flex;
  }
  .vfloat__icon svg {
    width: 100%; height: 100%;
    stroke: currentColor; fill: none;
    stroke-width: 1.3;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .vfloat__name {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink-2);
    line-height: 1.3;
    max-width: 17ch;
  }
  @media (max-width: 860px) {
    .vfloat { grid-template-columns: repeat(2, 1fr); gap: 38px 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .vfloat li { animation: none; }
  }

  /* ============================================================
     MOBILE UI/UX POLISH - phone-first centering and containment
     ============================================================ */
  @media (max-width: 720px) {
    .container {
      width: 100%;
      max-width: 430px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 6vw;  /* constant-ratio 6% side margin on mobile, matching the rest of the site (2026-07-27, KP) */
      padding-right: 6vw;
    }

    .section { padding: 64px 0; }

    .hero {
      padding-top: 42px;
    }
    .hero__copy,
    .what__grid,
    .digital__grid,
    .field__top,
    .stories__head {
      text-align: center;
    }
    .hero__tagline,
    .hero__ctas,
    .digital__cta,
    .stories__lead,
    .field__body,
    .body-lead {
      margin-left: auto;
      margin-right: auto;
    }
    .hero__title,
    .what__title,
    .digital__title,
    .field__title,
    .stories__title {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .hero__sub {
      max-width: 34ch;
      margin-left: auto;
      margin-right: auto;
    }

    .hero__footer {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      min-height: 0;
      margin-top: 42px;
    }
    .hero__fact {
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 112px;
      padding: 18px 8px;
      border-bottom: 1px solid var(--rule);
    }
    .hero__fact:nth-last-child(-n+2) { border-bottom: none; }
    .hero__fact-num { font-size: clamp(36px, 11vw, 44px); }
    .hero__fact-label {
      max-width: 14ch;
      font-size: 10px;
      line-height: 1.35;
      letter-spacing: 0.075em;
    }

    .what__grid,
    .digital__grid,
    .field__top,
    .stories__head {
      grid-template-columns: minmax(0, 1fr);
      gap: 26px;
    }
    .what__body { max-width: 34ch; margin-left: auto; margin-right: auto; }
    .what__list { margin-top: 6px; }
    .what__item {
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      justify-items: center;
      text-align: center;
      padding: 24px 0;
    }
    .what__item-tag {
      order: -1;
      padding-top: 0;
      letter-spacing: 0.14em;
      color: var(--teal-deep);
    }
    .what__item-desc { margin-left: auto; margin-right: auto; }

    .digital__body { margin-left: auto; margin-right: auto; }
    .bpdash { max-width: 390px; margin-left: auto; margin-right: auto; }
    .bpdash__chrome,
    .bpdash__crumb,
    .bpdash__charthead {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .bpdash__kpis { grid-template-columns: 1fr; }
    .bpdash__kpi:nth-child(3) { grid-column: auto; }
    .bpdash__kpi { align-items: center; text-align: center; }
    .bpdash__legendrow,
    .bpdash__axis { justify-content: center; gap: 12px; flex-wrap: wrap; }

    .namesband__inner { text-align: center; }
    .namesband__title { margin-left: auto; margin-right: auto; }
    .namesband__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px 30px;
      justify-items: center;
    }
    .namesband__row img {
      height: auto;
      max-height: 42px;
      max-width: 130px;
      opacity: 0.86;
    }
    .namesband__row img:nth-child(5) {
      grid-column: 1 / -1;
      max-width: 116px;
    }

    .stories__head {
      align-items: center;
      margin-bottom: 30px;
    }
    .stories__lead { max-width: 32ch; }
    .stories__viewport {
      width: min(100% - 28px, 390px);
      -webkit-mask-image: none;
              mask-image: none;
    }
    .stories__nav { width: min(100% - 28px, 390px); }
    .story__body { text-align: center; padding: 26px 22px 28px; }
    .story__client { color: var(--teal-deep); }
    .story__foot {
      flex-direction: column;
      justify-content: center;
      gap: 8px;
      letter-spacing: 0.11em;
    }
    .cta__buttons { display: grid; width: min(100%, 330px); margin-inline: auto; }
    .cta__buttons .btn { width: 100%; justify-content: center; }

    .footer__top,
    .footer__bottom,
    .footer__brand,
    .footer__desc,
    .footer__col {
      text-align: center;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
    }
    .footer__bottom { flex-direction: column; }
  }

  @media (max-width: 600px) {
    .hero__title {
      font-size: clamp(30px, 8vw, 38px);
      max-width: none;
    }
  }

  @media (max-width: 380px) {
    .container { padding-left: 6vw; padding-right: 6vw; }
    .hero__title { font-size: clamp(27px, 7.4vw, 32px); }
    .btn { white-space: normal; text-align: center; justify-content: center; }
    .hero__fact-label { font-size: 9.5px; letter-spacing: 0.06em; }
    .bpdash__body { padding-left: 14px; padding-right: 14px; }
    .namesband__row { grid-template-columns: 1fr; }
    .namesband__row img:nth-child(5) { grid-column: auto; }
  }

  /* ============================================================
     SUBPAGE COMPONENTS - same editorial system, extra parts
     used by Solutions, BuildingPulse, Our Story, Careers,
     Success Stories, and Contact. All built from the same
     bone/paper palette, hairline rules, and teal accent.
     ============================================================ */

  /* Simple page hero (no stats footer) */
  .subhero {
    position: relative;
    padding: clamp(22px, 2.9vw, 40px) 0 clamp(26px, 3.2vw, 42px); /* top trimmed ~40% (2026-07-21, KP) */
    border-bottom: 1px solid var(--rule);
    background: var(--bone);
  }
  .subhero__inner { max-width: 880px; }
  .subhero__title {
    font-size: clamp(30px, 3.6vw, 46px);
    max-width: 22ch;
  }
  .subhero__title .accent { color: var(--teal-deep); }
  .subhero__sub {
    margin-top: clamp(22px, 3vw, 32px);
    max-width: 60ch;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.5;
    color: var(--ink-3);
  }
  .subhero__ctas {
    margin-top: clamp(30px, 4vw, 42px);
    display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }

  /* Section heading block */
  .sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
  .sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
  .sec-head__eyebrow { margin-bottom: 16px; }
  .sec-head__title {
    font-family: var(--f-serif);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
    font-size: clamp(30px, 4.2vw, 50px);
  }
  .sec-head__title em, .sec-head__title strong {
    font-style: normal; font-weight: 700; color: var(--teal-deep);
  }
  .sec-head__sub {
    margin-top: 18px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-3);
    max-width: 60ch;
  }
  .sec-head--center .sec-head__sub { margin-left: auto; margin-right: auto; }

  /* Card grid + card (paper tile, hairline, teal icon) */
  .cardgrid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .cardgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 26px 28px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .card--link { cursor: pointer; }
  .card:hover {
    border-color: var(--rule-strong);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(14,26,31,0.06);
  }
  .card__icon {
    width: 40px; height: 40px;
    color: var(--teal-deep);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--teal-soft);
    border-radius: 9px;
    padding: 8px;
    flex-shrink: 0;
  }
  .card__icon svg {
    width: 100%; height: 100%;
    stroke: currentColor; fill: none;
    stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .card__title {
    font-family: var(--f-serif);
    font-size: clamp(18px, 1.9vw, 22px);
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
  }
  .card__body { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
  .card__eyebrow {
    font-family: var(--f-mono);
    font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--teal-deep); font-weight: 600;
  }
  .card__link {
    margin-top: auto; padding-top: 6px;
    font-size: 13.5px; color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    align-self: flex-start;
    transition: color .15s ease, border-color .15s ease;
  }
  .card__link:hover { color: var(--teal-deep); border-bottom-color: var(--teal-deep); }

  /* Numbered process steps */
  .steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule);
  }
  .step {
    padding: 28px 24px 30px;
    border-bottom: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
  }
  .step:nth-child(4n) { border-right: none; }
  .step__tag {
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--teal-deep); font-weight: 600;
    margin-bottom: 14px;
  }
  .step__title {
    font-family: var(--f-serif);
    font-size: clamp(18px, 2vw, 23px);
    letter-spacing: -0.01em; line-height: 1.2; color: var(--ink);
    margin-bottom: 8px;
  }
  .step__body { font-size: 14px; line-height: 1.55; color: var(--ink-3); }

  /* Stat strip */
  .statstrip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: clamp(28px, 4vw, 44px) 0;
  }
  .statstrip__item { display: flex; flex-direction: column; gap: 8px; }
  .statstrip__num {
    font-family: var(--f-serif);
    font-size: clamp(34px, 3.6vw, 48px);
    letter-spacing: -0.02em; line-height: 0.95; color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
  }
  .statstrip__num em { font-style: normal; color: var(--teal-deep); font-size: 0.62em; margin-left: 1px; }
  .statstrip__label {
    font-family: var(--f-sans);
    font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--mute); font-weight: 600;
  }

  /* Timeline (Our Story) */
  .timeline { list-style: none; display: grid; gap: 0; }
  .timeline__item {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 28px;
    padding: 26px 0;
    border-top: 1px solid var(--rule);
  }
  .timeline__item:last-child { border-bottom: 1px solid var(--rule); }
  .timeline__year {
    font-family: var(--f-serif);
    font-size: clamp(22px, 2.4vw, 30px);
    color: var(--teal-deep); letter-spacing: -0.01em; line-height: 1.1;
  }
  .timeline__body { font-size: 15.5px; line-height: 1.6; color: var(--ink-3); max-width: 60ch; }
  .timeline__body strong { color: var(--ink); font-weight: 600; }

  /* Forms */
  .form-alt { max-width: 640px; }
  .form-alt--center { margin: 0 auto; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-field { margin-bottom: 18px; }
  .form-field label {
    display: block; margin-bottom: 8px;
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--mute); font-weight: 600;
  }
  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100%;
    font-family: var(--f-sans); font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: 8px;
    padding: 13px 15px;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .form-field textarea { resize: vertical; min-height: 130px; }
  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-soft);
  }
  .form-field input::placeholder, .form-field textarea::placeholder { color: var(--mute-2); }
  .form-file {
    border: 1px dashed var(--rule-strong);
    border-radius: 8px; padding: 22px; text-align: center;
    background: var(--paper); color: var(--mute); font-size: 14px;
    cursor: pointer;
  }
  .form-alt .btn { margin-top: 8px; }
  /* audit 2026-07-01: visual required-field indicators (asterisks + legend);
     purely cosmetic - names/validation untouched */
  .form-req-legend { font-size: 12.5px; color: var(--mute); margin: 0 0 16px; }
  .form-req-legend .req,
  .form-field label .req { color: var(--teal-deep); font-weight: 600; }

  /* Department / contact info cards */
  .infocards { display: grid; gap: 12px; }
  .infocard {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 20px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
  }
  .infocard__icon {
    flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px;
    color: var(--teal-deep);
  }
  .infocard__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .infocard h3 {
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink); font-weight: 600; margin-bottom: 6px;
  }
  .infocard p, .infocard a { font-size: 15px; line-height: 1.45; color: var(--ink-3); }
  .infocard a:hover { color: var(--teal-deep); }
  .infocard__sub { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mute); }

  .contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
  @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 24px; } }

  /* Department cards (link cards w/ strong intro) */
  .deptcard p strong { color: var(--ink); font-weight: 600; }

  /* Job listing cards */
  .joblist { display: grid; gap: 14px; }
  .jobcard {
    padding: 28px 30px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .jobcard:hover { border-color: var(--rule-strong); box-shadow: 0 10px 22px rgba(14,26,31,0.05); }
  .jobcard__title {
    font-family: var(--f-serif);
    font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.01em; color: var(--ink);
  }
  .jobcard__meta {
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--teal-deep); font-weight: 600; margin: 8px 0 12px;
  }
  .jobcard__body { font-size: 15px; line-height: 1.6; color: var(--ink-3); max-width: 70ch; margin-bottom: 18px; }

  /* Success story cards (data-driven) */
  .storycard {
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .storycard:hover { border-color: var(--rule-strong); transform: translateY(-2px); box-shadow: 0 14px 26px rgba(14,26,31,0.07); }
  .storycard__photo {
    position: relative; height: 170px;
    background: linear-gradient(135deg, #2E3F46 0%, #1B2A31 60%, #0E1A1F 100%);
    background-size: cover; background-position: center;
  }
  .storycard__photo::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(60% 80% at 20% 20%, rgba(110,212,194,0.10), transparent 60%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.30));
  }
  .storycard__body { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 28px; flex: 1; }
  .storycard__eyebrow {
    font-family: var(--f-mono);
    font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep); font-weight: 600;
  }
  .storycard__title { font-family: var(--f-serif); font-size: clamp(20px, 2.1vw, 25px); letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
  .storycard__body p { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
  .storycard__link {
    margin-top: auto; padding-top: 8px;
    font-size: 13.5px; color: var(--ink); align-self: flex-start;
    border-bottom: 1px solid var(--rule-strong);
    transition: color .15s ease, border-color .15s ease;
  }
  .storycard__link:hover { color: var(--teal-deep); border-bottom-color: var(--teal-deep); }



  .prose { font-size: 16.5px; line-height: 1.65; color: var(--ink-3); }
  .prose + .prose { margin-top: 14px; }
  .prose strong { color: var(--ink); font-weight: 600; }

  /* Inline incentive / highlight band */
  .band {
    background: var(--bone-2);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: clamp(32px, 5vw, 56px);
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 64px);
    align-items: center;
  }
  .band__title { font-family: var(--f-serif); font-weight: 400; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
  .band__body { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-3); }
  .band__aside { display: grid; gap: 16px; }
  .band__stat { padding: 18px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; }
  .band__stat-num { font-family: var(--f-serif); font-size: clamp(22px, 2.6vw, 30px); color: var(--teal-deep); letter-spacing: -0.01em; }
  .band__stat-label { font-size: 12.5px; color: var(--mute); margin-top: 4px; }
  /* audit 2026-07-01: when .band is used as a full-bleed section it wraps a single
     .container child - the 2-col band grid squeezed all content into the left 1.2fr
     column and left the right half empty. Section usage flows as a block; inner
     .split / .sec-head layouts provide their own columns or max-width. */
  .section.band { display: block; }

  /* Responsive collapses for subpage components */
  @media (max-width: 1080px) {
    .band { grid-template-columns: 1fr; }
  }
  @media (max-width: 920px) {
    .cardgrid, .cardgrid--4 { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .step:nth-child(4n) { border-right: 1px solid var(--rule); }
    .step:nth-child(2n) { border-right: none; }
    .statstrip { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  }
  @media (max-width: 620px) {
    .cardgrid, .cardgrid--2, .cardgrid--4 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .step { border-right: none !important; }
    .form-row { grid-template-columns: 1fr; }
    .timeline__item { grid-template-columns: 1fr; gap: 6px; }
  }
  @media (max-width: 720px) {
    .subhero__inner, .sec-head, .twocol { text-align: left; }
  }

/* Asset reintegration: restrained visual panels using legacy FMC images/SVGs */
.subhero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.78fr);gap:clamp(28px,5vw,70px);align-items:center}
.subhero__grid .subhero__inner{max-width:880px}
.subhero__media{position:relative;border-radius:34px;padding:10px;background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.28));border:1px solid var(--rule);box-shadow:0 30px 80px rgba(13,31,36,.13);overflow:hidden}
.subhero__media:before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 18% 12%,rgba(9,199,185,.22),transparent 34%),radial-gradient(circle at 78% 82%,rgba(166,35,48,.16),transparent 34%);pointer-events:none}
.subhero__media img{position:relative;display:block;width:100%;height:100%;max-height:430px;object-fit:cover;border-radius:25px;filter:saturate(.96) contrast(1.03)}
.subhero__media--contain img{object-fit:contain;background:rgba(255,255,255,.76);padding:clamp(22px,4vw,44px)}
.subhero__media-caption{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(13,31,36,.76);color:var(--bone);backdrop-filter:blur(16px);font-size:12px;letter-spacing:.1em;text-transform:uppercase}




.logo-cloud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}.logo-tile{min-height:92px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;padding:16px}.section--paper .logo-tile,.logo-tile--light{border-color:var(--rule);background:rgba(255,255,255,.64)}.logo-tile img{max-width:100%;max-height:52px;object-fit:contain;filter:saturate(.85) contrast(.98)}.section--ink .logo-tile img{filter:brightness(0) invert(1) saturate(0) opacity(.86)}
.protocol-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}.protocol-strip img{width:100%;height:50px;object-fit:contain;border:1px solid var(--rule);border-radius:12px;background:rgba(255,255,255,.72);padding:12px}
.image-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}.image-band figure{margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--rule);background:var(--paper);box-shadow:0 14px 42px rgba(14,26,31,.08)}.image-band img{display:block;width:100%;height:180px;object-fit:cover}.image-band figcaption{padding:12px 14px;color:var(--ink-3);font-size:13px}
.contact-snapshot{margin-top:18px;border-radius:26px;overflow:hidden;border:1px solid var(--rule);background:var(--paper);box-shadow:0 18px 50px rgba(14,26,31,.08)}.contact-snapshot img{display:block;width:100%;height:210px;object-fit:cover}.contact-snapshot__body{padding:18px;color:var(--ink-3);line-height:1.55}
@media(max-width:920px){.subhero__grid{grid-template-columns:1fr}.subhero__media{max-width:620px}.logo-cloud{grid-template-columns:repeat(2,minmax(0,1fr))}.protocol-strip,.image-band{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.protocol-strip,.image-band{grid-template-columns:1fr}.subhero__media-caption{position:static;margin-top:10px;background:rgba(13,31,36,.92)}}

/* ============================================================
   SAFE-REDUCTIONS MIGRATION - 2026-06-01
   Page-local <style> blocks previously inlined on
   solutions.html and building-pulse.html are scoped to
   body.subpage--editorial so the existing taller-hero and
   rounded-card variants stay on those two pages only; the
   other redesigned pages (our-story, success-stories,
   join-our-team, contact-us, index) continue to use the
   canonical subpage components above.
   ============================================================ */
body.subpage--editorial .subhero {
  padding: clamp(48px,5.6vw,70px) 0 clamp(29px,4vw,46px); /* top trimmed ~40% (2026-07-21, KP) */
  background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--rule);
}
body.subpage--editorial .subhero__inner { max-width: 880px; }
body.subpage--editorial .subhero__title {
  /* 2026-07-06 (John): was clamp(48px,9vw,104px) - the too-large AI hero. */
  font-size: clamp(30px,3.6vw,46px);
  margin-top: 0;
}
body.subpage--editorial .subhero__sub {
  font-size: clamp(18px,2vw,24px);
  line-height: 1.45;
  color: var(--ink-3);
  max-width: 760px;
  margin-top: 24px;
}
body.subpage--editorial .section { padding: clamp(29px,4vw,46px) 0; }
body.subpage--editorial .section--paper { background: var(--paper); }
body.subpage--editorial .section--ink {
  background: var(--ink);
  color: var(--bone);
}
body.subpage--editorial .section--ink .sec-head__title,
body.subpage--editorial .section--ink .card__title { color: var(--bone); }
body.subpage--editorial .section--ink .sec-head__sub,
body.subpage--editorial .section--ink .card__body { color: rgba(244,242,236,.74); }
body.subpage--editorial .sec-head { max-width: 760px; margin-bottom: 34px; }
body.subpage--editorial .sec-head__title {
  font-size: clamp(34px,5vw,64px);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 500;
  color: var(--ink);
}
body.subpage--editorial .sec-head__sub {
  margin-top: 16px;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1.55;
}
body.subpage--editorial .cardgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
}
body.subpage--editorial .card {
  display: block;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 26px;
  min-height: 100%;
  box-shadow: 0 18px 50px rgba(14,26,31,.08);
}
body.subpage--editorial .section--ink .card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
body.subpage--editorial .card__kicker {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  font-weight: 700;
}
body.subpage--editorial .section--ink .card__kicker { color: var(--teal-bright); }
body.subpage--editorial .card__title {
  font-size: 24px;
  line-height: 1.1;
  margin-top: 14px;
  color: var(--ink);
}
body.subpage--editorial .card__body {
  margin-top: 12px;
  color: var(--ink-3);
  line-height: 1.6;
}
body.subpage--editorial .band {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bone-2);
}
body.subpage--editorial .statstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
body.subpage--editorial .statstrip__item {
  padding: 24px;
  border-right: 1px solid var(--rule);
}
body.subpage--editorial .statstrip__item:last-child { border-right: 0; }
body.subpage--editorial .statstrip__num {
  font-size: clamp(34px,5vw,56px);
  font-weight: 650;
  letter-spacing: -.04em;
  color: var(--ink);
}
body.subpage--editorial .statstrip__num em {
  font-size: .45em;
  font-style: normal;
  color: var(--teal-deep);
}
body.subpage--editorial .statstrip__label {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 6px;
}
body.subpage--editorial .split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px,6vw,72px);
  align-items: start;
}
body.subpage--editorial .process {
  counter-reset: step;
  display: grid;
  gap: 14px;
}
body.subpage--editorial .process li {
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 22px;
}
body.subpage--editorial .process li strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  margin-bottom: 6px;
}
@media (max-width: 860px) {
  body.subpage--editorial .cardgrid,
  body.subpage--editorial .split,
  body.subpage--editorial .statstrip { grid-template-columns: 1fr; }
  body.subpage--editorial .statstrip__item {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  body.subpage--editorial .statstrip__item:last-child { border-bottom: 0; }
}

/* ── BuildingPulse-only: four-answers grid, data layer (heat map +
   load-duration curve), pricing tiers, also-included, final CTA.
   Selectors are unique to this page but kept scoped under
   body.page-building-pulse so a future page can reuse names without
   collision. ── */
body.page-building-pulse .subhero__note {
  margin-top: 22px;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
}
body.page-building-pulse .subhero__note strong { color: var(--ink); font-weight: 600; }

body.page-building-pulse .fourgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
}
body.page-building-pulse .four {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--rule);
  border-radius: 26px;
  padding: 28px;
  text-decoration: none;
  box-shadow: 0 18px 50px rgba(14,26,31,.08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.page-building-pulse .four:hover {
  transform: translateY(-2px);
  border-color: var(--teal-line);
  box-shadow: 0 22px 60px rgba(14,26,31,.12);
}
/* .four__num (decorative 01–04) removed 2026-06-11 - the labels carry
   the structure now. */
body.page-building-pulse .four__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
body.page-building-pulse .four h3 {
  font-size: 23px;
  line-height: 1.1;
  color: var(--ink);
  margin: 4px 0 2px;
  font-weight: 500;
}
body.page-building-pulse .four p {
  color: var(--ink-3);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
body.page-building-pulse .four__tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-deep);
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--rule);
}

body.page-building-pulse .datawrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
body.page-building-pulse .datacard {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 26px;
  padding: clamp(22px,4vw,34px);
  box-shadow: 0 18px 50px rgba(14,26,31,.08);
}
body.page-building-pulse .datacard__eyebrow {
  /* 2026-07-06 (John): tracked-caps kickers read as AI-made; plain bold label. */
  font-size: 13px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--teal-deep);
  font-weight: 700;
}
body.page-building-pulse .datacard h3 {
  font-size: clamp(22px,2.6vw,30px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 12px 0 10px;
  font-weight: 500;
}
body.page-building-pulse .datacard h3 .accent { color: var(--teal-deep); }
body.page-building-pulse .datacard__sub {
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 22px;
}
body.page-building-pulse .heatmap,
body.page-building-pulse .ldc {
  width: 100%;
  display: block;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: 16px;
}
body.page-building-pulse .heatmap { height: 240px; }
body.page-building-pulse .ldc { height: 260px; }
body.page-building-pulse .heat-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--mute);
}
body.page-building-pulse .heat-legend .bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #E7E3D8, #5BBFB1, #E0A21A, #A62330);
}
body.page-building-pulse .annot {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--teal-soft);
  border-left: 3px solid var(--teal-line);
  border-radius: 0 12px 12px 0;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.55;
}
body.page-building-pulse .annot strong { color: var(--teal-deep); font-weight: 650; }
body.page-building-pulse .ldc-stats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.page-building-pulse .ldc-stat {
  padding: 16px 18px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--rule);
  border-radius: 16px;
}
body.page-building-pulse .ldc-stat__num {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
body.page-building-pulse .ldc-stat__num.amber { color: #B7860B; }
body.page-building-pulse .ldc-stat__num.red { color: #A62330; }
body.page-building-pulse .ldc-stat__lbl {
  font-size: 12px;
  color: var(--mute);
  margin-top: 6px;
  line-height: 1.4;
}
body.page-building-pulse .datacard__foot {
  margin-top: 16px;
  font-size: 13px;
  color: var(--mute);
}

body.page-building-pulse .tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
body.page-building-pulse .tier {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--rule);
  border-radius: 26px;
  padding: 30px;
  box-shadow: 0 18px 50px rgba(14,26,31,.08);
}
body.page-building-pulse .tier--feature {
  border-color: var(--teal-line);
  box-shadow: 0 22px 60px rgba(13,138,124,.14);
}
body.page-building-pulse .tier__name {
  font-size: 13px;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--teal-deep);
}
body.page-building-pulse .tier__name span { color: var(--mute); font-weight: 600; }
body.page-building-pulse .tier h3 {
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink);
  margin: 10px 0 8px;
  font-weight: 500;
}
body.page-building-pulse .tier > p { color: var(--ink-3); line-height: 1.6; }
body.page-building-pulse .tier__list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
body.page-building-pulse .tier__list li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-3);
  line-height: 1.5;
  font-size: 15px;
}
body.page-building-pulse .tier__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
body.page-building-pulse .tier__price {
  margin-top: 22px;
  padding: 20px;
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: 18px;
}
body.page-building-pulse .tier--quote .tier__price {
  background: var(--bone-2);
  border-color: var(--rule);
}
body.page-building-pulse .tier__price-val {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1;
}
body.page-building-pulse .tier__price-val small {
  font-size: 14px;
  font-weight: 500;
  color: var(--mute);
  letter-spacing: 0;
}
body.page-building-pulse .tier__price-val.quote { font-size: 22px; }
body.page-building-pulse .tier__price-meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--mute);
  line-height: 1.5;
}
body.page-building-pulse .tier__price-meta strong { color: var(--ink-3); font-weight: 600; }

body.page-building-pulse .bp-final { text-align: center; }
body.page-building-pulse .bp-final .sec-head {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 26px;
}
body.page-building-pulse .bp-final .hero__ctas {
  justify-content: center;
  margin-top: 0;
}
body.page-building-pulse .also-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* audit 2026-07-01: the editorial 3-col .cardgrid override outranked .cardgrid--2 in the
   engineer-review datacard, leaving its 4 cards as 3 + 1 orphan; force 2x2 at desktop */
body.page-building-pulse .datacard .cardgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 860px) {
  body.page-building-pulse .fourgrid,
  body.page-building-pulse .tiers,
  body.page-building-pulse .ldc-stats,
  body.page-building-pulse .datacard .cardgrid--2,
  body.page-building-pulse .also-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body.page-building-pulse { overflow-x: hidden; }
  body.page-building-pulse .subhero,
  body.page-building-pulse .section,
  body.page-building-pulse footer { overflow: hidden; }
  body.page-building-pulse .subhero__grid,
  body.page-building-pulse .split { min-width: 0; }
  body.page-building-pulse .subhero__inner,
  body.page-building-pulse .sec-head,
  body.page-building-pulse .card,
  body.page-building-pulse .four,
  body.page-building-pulse .datacard,
  body.page-building-pulse .tier { min-width: 0; }
  body.page-building-pulse .subhero__title { font-size: clamp(28px,8vw,40px); }
  body.page-building-pulse .subhero__sub,
  body.page-building-pulse .sec-head__sub {
    font-size: 18px;
    max-width: 100%;
  }
  body.page-building-pulse .hero__ctas { align-items: flex-start; }
  body.page-building-pulse .subhero__media {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.page-building-pulse .subhero__media-caption {
    gap: 10px;
    font-size: 10px;
    white-space: normal;
  }
  body.page-building-pulse .heatmap,
  body.page-building-pulse .ldc { max-width: 100%; }
}





/* ============================================================
   Success-story detail template - ported verbatim from styles.css
   2026-06-09 (migration spec B1 - docs/legacy-pages-styles-alt-
   migration-spec-2026-06-08.md). One CSS port serves all 8
   success-story pages; the team-bio (vcard) pages and the
   BuildingPulse Get wizard also reference the dark-theme tokens
   and .btn-primary / fadeIn below from their inline <style>.

   Notes:
   - The :root tokens below are the styles.css variables these rules
     reference. Namespaces verified disjoint with styles-alt.css's own
     tokens (--teal and --teal-bright exist in both with identical
     values and are NOT re-declared here).
   - Three selectors collide with styles-alt.css components used by
     modern pages (.prose - cortex.html, .timeline - our-story.html,
     .accent - descendant rules sitewide). Those, plus the dark page
     canvas from styles.css's body/body::after, are scoped under
     body.page-dark, which the migrated dark legacy pages opt into.
   ============================================================ */

:root {
  --bg: #000000;
  --border: rgba(255,255,255,0.08);
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #8e8e93;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-bg-hover: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.14);
  --glass-highlight: rgba(255,255,255,0.22);
  --glass-shadow: rgba(0,0,0,0.50);
  --glass-blur: 24px;
  --glass-saturation: 180%;
  --glass-radius: 20px;
  --radius-control: 8px;
}

/* Dark page canvas - styles.css's body + body::after, opted into via
   <body class="page-dark"> so it can't leak onto the bone-paper pages. */
body.page-dark {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  position: relative;
}
body.page-dark::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 650px at 10% 10%, rgba(13,138,124,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 800px 550px at 85% 35%, rgba(45,212,191,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 700px 550px at 35% 70%, rgba(13,138,124,0.06) 0%, transparent 60%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
/* styles.css had no main{padding-top}: the legacy heroes carry their own
   fixed-nav clearance (.page-hero padding-top 140px, vcard 120px), so
   cancel styles-alt.css's main{padding-top:var(--nav-h)} offset here. */
body.page-dark main { padding-top: 0; }





@media (max-width: 760px) {
}
@media (max-width: 460px) {
}




@media (max-width: 720px) {
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}


.section-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* ===== LIQUID GLASS CARD ===== */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturation));
  border: 0.5px solid var(--glass-border);
  border-radius: var(--glass-radius);
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0.5px 0 0 rgba(255,255,255,0.15),
    0 8px 32px rgba(0,0,0,0.35),
    0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

.glass-card:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    inset 0 0.5px 0 0 rgba(255,255,255,0.22),
    0 12px 40px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

.glass-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
}

.glass-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  position: relative;
  z-index: 2;
}

.glass-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.glass-card .card-icon {
  font-size: 28px;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.glass-card .card-eyebrow {
  font-size: 11px;
  color: var(--teal-bright);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

/* ===== BUTTONS (Liquid Glass) ===== */
.btn-primary {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  background: rgba(13,138,124,0.8);
  color: white;
  padding: 12px 28px;
  border-radius: 980px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 0.5px solid rgba(45,212,191,0.3);
  cursor: pointer;
  display: inline-block;
  position: relative;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.2),
    0 4px 16px rgba(13,138,124,0.3),
    0 1px 3px rgba(0,0,0,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-primary:hover {
  background: rgba(16,160,143,0.9);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.25),
    0 6px 24px rgba(13,138,124,0.4),
    0 2px 6px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}















.stat-num {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 400;
}

/* .accent / .prose / .timeline collide with styles-alt.css components -
   scoped to the dark legacy pages (see block comment above). */
body.page-dark .accent { color: var(--teal-bright); }

/* ===== PROSE CONTENT ===== */
body.page-dark .prose {
  max-width: 680px;
  margin: 0 auto;
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
}
body.page-dark .prose strong { color: var(--text-primary); font-weight: 600; }
body.page-dark .prose p + p { margin-top: 16px; }
body.page-dark .prose h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 48px 0 16px;
}

/* ===== TIMELINE ===== */
body.page-dark .timeline {
  max-width: 680px;
  margin: 48px auto 0;
  position: relative;
  padding-left: 32px;
}

body.page-dark .timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.5px;
  background: rgba(255,255,255,0.08);
}





.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 600;
  color: var(--teal-bright);
  background: rgba(45,212,191,0.10);
  border: 0.5px solid rgba(45,212,191,0.35);
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
  box-shadow: inset 0 0.5px 0 0 rgba(255,255,255,0.12);
}















@media (max-width: 720px) {

}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.reveal.visible,
.reveal.active { opacity: 1; transform: translate3d(0, 0, 0); }

/* ===== RESPONSIVE (success-template subset of styles.css's 768px block) ===== */
@media (max-width: 768px) {












}

/* ============================================================
   SUCCESS-STORY DETAIL PAGES - light editorial (2026-06-11)
   The eight success-*.html pages were converted from the legacy
   page-dark glass design to the bone-paper editorial system so
   they match the listing (/success-stories/) and the rest of the
   public site. The canonical subpage components (subhero,
   statstrip, sec-head, cardgrid, steps, timeline, band, cta) do
   the heavy lifting; the classes below cover only what the
   stories need beyond them.
   ============================================================ */
.story-back {
  display: flex; width: max-content; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mute); font-weight: 600;
  margin-bottom: clamp(18px, 2.5vw, 26px);
  transition: color .15s ease;
}
.story-back:hover { color: var(--teal-deep); }
.story-back svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform .15s ease; }
.story-back:hover svg { transform: translateX(-3px); }

/* Full-width photo: reuses .subhero__media's frame + caption pill. */
.story-media { margin-top: clamp(36px, 5vw, 56px); }
.story-media img { max-height: 480px; }

/* Three-stat variant (Granite, L.L. Bean). Base .statstrip handles
   the ≤920px two-column collapse. */
@media (min-width: 921px) {
  .statstrip--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Measure-width body copy for narrative sections. */
.story-body { max-width: 70ch; }
.story-body > * + * { margin-top: 14px; }

ul.prose-list {
  list-style: none;
  margin: 18px 0 0;
  display: grid; gap: 10px;
}
ul.prose-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px; line-height: 1.6; color: var(--ink-3);
}
ul.prose-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.66em;
  width: 11px; height: 1.5px;
  background: var(--teal);
}
ul.prose-list strong { color: var(--ink); font-weight: 600; }

/* Standalone highlight card inside a narrative section. */
.story-card { max-width: 760px; margin-top: 28px; }

/* Editorial pull-quote with attribution. */
.story-quote {
  max-width: 760px;
  margin-top: clamp(40px, 6vw, 56px);
  padding-left: clamp(22px, 3vw, 34px);
  border-left: 2px solid var(--teal-line);
}
.story-quote p {
  font-family: var(--f-serif);
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.story-quote footer {
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute); font-weight: 600;
  /* audit 2026-07-01: the global site `footer` element rule (beige bg + clamp
     padding) was catching this attribution footer, rendering it as a large,
     mostly-empty beige panel below the quote on 55 Thomson / L.L. Bean. */
  background: none;
  padding: 0;
  border-top: 0;
}

/* Project dossier strip (de-AI v1), light edition - the four cells a
   facilities owner reads first: which building, what we did, what
   runs the controls, what changed. */
.story-dossier {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: clamp(36px, 5vw, 56px) 0 0;
}
.story-dossier > div {
  padding: 20px 22px 22px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 8px;
}
.story-dossier > div:last-child { border-right: 0; }
.story-dossier dt {
  font-family: var(--f-mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-deep); font-weight: 600;
}
.story-dossier dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); font-weight: 500; }
@media (max-width: 860px) {
  .story-dossier { grid-template-columns: 1fr 1fr; }
  .story-dossier > div:nth-child(2n) { border-right: 0; }
  .story-dossier > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .story-dossier > div { padding: 16px 18px 18px; }
}
@media (max-width: 480px) {
  .story-dossier { grid-template-columns: 1fr; }
  .story-dossier > div { border-right: 0 !important; border-bottom: 1px solid var(--rule); }
  .story-dossier > div:last-child { border-bottom: 0; }
}

/* Outcome line at the foot of a .step (Crown Colony measures). */
.step__result {
  display: block;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal-deep); font-weight: 600;
}

/* The story CTAs run longer than the listing's "Have a project in
   mind?" - let them breathe. */
.cta__title--wide { max-width: 26ch; }

/* ============================================================
   BPH v2 - faithful clone of the real BuildingPulse LIVE DEMAND
   card (2026-07-06, per John: "almost identical"). Values copied
   from buildingpulse_dashboard.html: glass banner w/ red radial
   tint, top-right freshness tag, 12px/800 caps label + EKG sweep
   (dasharray 16 100), 44px value, plain colored delta, centered
   liquid-glass range capsule with sliding red indicator, 112px
   load-gradient trace. Interactive: hover/touch crosshair tip.
   ============================================================ */
.bph {
  --bph-ink: #0E2A52;
  --bph-ink-3: #4d5b6c;
  --bph-red: #c0392b;
  --bph-red-deep: #a02a1d;
  --bph-line: rgba(14, 42, 82, 0.10);
  --bph-green: #16a34a;
  background: #eef3f1;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.18);
  font-family: var(--f-sans);
  color: var(--bph-ink);
}
.bph__brandrow {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 2px 6px 10px;
}
.bph__wordmark { font-size: 19px; letter-spacing: -0.015em; }
.bph__wordmark b { font-weight: 700; color: var(--bph-ink); }
.bph__wordmark em { font-style: normal; font-weight: 300; color: var(--bph-red); }
.bph__site { font-size: 11.5px; color: var(--bph-ink-3); white-space: nowrap; }
.bph__banner {
  position: relative;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.50) 60%, rgba(254,247,245,0.55) 100%),
    radial-gradient(ellipse 600px 180px at 12% 50%, rgba(192,57,43,0.06), transparent 70%);
  border: 0.5px solid var(--bph-line);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 24px -14px rgba(14, 42, 82, 0.25);
  padding: 14px 18px 12px;
  overflow: hidden;
}
.bph__banner::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%);
  mix-blend-mode: screen; opacity: 0.6;
}
.bph__updated {
  position: absolute; top: 12px; right: 16px; z-index: 3;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--bph-ink-3); font-variant-numeric: tabular-nums;
}
.bph__updated::before {
  content: '·'; display: inline-block; margin-right: 6px;
  color: var(--bph-green); font-weight: 900;
  transform: scale(1.6) translateY(-1px);
}
.bph__live-label {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--bph-ink-3);
}
.bph__ekg { width: 38px; height: 14px; flex: 0 0 auto; overflow: visible; display: block; }
.bph__ekg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bph__ekg-base { stroke: var(--bph-red); stroke-width: 1.4; opacity: 0.16; }
.bph__ekg-spark {
  stroke: var(--bph-red); stroke-width: 1.8;
  stroke-dasharray: 16 100;
  filter: drop-shadow(0 0 1.5px rgba(192,57,43,0.45));
  animation: bphEkgSweep 1.8s linear infinite;
}
@keyframes bphEkgSweep { from { stroke-dashoffset: 116; } to { stroke-dashoffset: 0; } }
.bph__valrow { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.bph__value {
  font-size: 44px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--bph-ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.bph__unit { font-size: 16px; font-weight: 500; color: var(--bph-ink-3); margin-left: 4px; }
.bph__delta {
  font-size: 13px; font-weight: 700; color: var(--bph-green);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap;
}
.bph__rangerow { display: flex; justify-content: center; margin: 8px 0 10px; position: relative; z-index: 2; }
.bph__ranges {
  position: relative; display: inline-flex; align-items: center; padding: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));
  backdrop-filter: blur(30px) saturate(2) brightness(1.06);
  -webkit-backdrop-filter: blur(30px) saturate(2) brightness(1.06);
  border: 0.5px solid rgba(255,255,255,0.55);
  box-shadow: 0 8px 20px -10px rgba(10,40,55,0.30), inset 0 1px 0 rgba(255,255,255,0.80), inset 0 -1px 1px rgba(10,40,55,0.05);
}
.bph__range-ind {
  position: absolute; top: 3px; left: 0; width: 0; height: calc(100% - 6px);
  border-radius: 999px; z-index: 0; transform: translateX(3px);
  background: linear-gradient(180deg, var(--bph-red), var(--bph-red-deep));
  box-shadow: 0 4px 12px -4px rgba(192,57,43,0.50), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .42s cubic-bezier(.34,1.36,.46,1), width .42s cubic-bezier(.34,1.36,.46,1);
}
.bph__ranges button {
  position: relative; z-index: 1; background: transparent; border: none;
  color: #54635f; font: 600 11.5px/1 var(--f-sans); letter-spacing: 0.01em;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: color .3s ease;
}
.bph__ranges button:hover { color: var(--bph-ink); }
.bph__ranges button[aria-pressed="true"] { color: #fff; }
.bph__tracewrap { position: relative; z-index: 2; height: 112px; margin-top: 4px; }
.bph__tracewrap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.bph__tip {
  position: absolute; z-index: 4; pointer-events: none;
  transform: translate(-50%, -130%);
  background: rgba(255,255,255,0.95);
  border: 0.5px solid var(--bph-line); border-radius: 9px;
  box-shadow: 0 6px 18px -8px rgba(14,42,82,0.35);
  padding: 5px 9px; white-space: nowrap;
}
.bph__tip b { display: block; font-size: 13px; font-weight: 700; color: var(--bph-ink); font-variant-numeric: tabular-nums; }
.bph__tip span { display: block; font-size: 10px; font-weight: 600; color: var(--bph-ink-3); font-variant-numeric: tabular-nums; }
.bph__tip[hidden] { display: none; }
.bph__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.bph__stat {
  background: rgba(255,255,255,0.72); border: 0.5px solid var(--bph-line);
  border-radius: 12px; padding: 11px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.bph__stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bph-ink-3); }
.bph__stat-val { font-size: 19px; font-weight: 700; color: var(--bph-ink); font-variant-numeric: tabular-nums; }
.bph__stat-sub { font-size: 11.5px; color: var(--bph-ink-3); }
.bph__tabs {
  display: flex; justify-content: space-between; gap: 4px;
  margin-top: 10px; padding: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35));
  border: 0.5px solid rgba(255,255,255,0.6);
  box-shadow: 0 6px 16px -10px rgba(10,40,55,0.25), inset 0 1px 0 rgba(255,255,255,0.7);
  border-radius: 999px;
}
.bph__tabs span {
  flex: 1; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--bph-ink-3); padding: 7px 6px; border-radius: 999px;
}
.bph__tabs span.is-active { background: linear-gradient(180deg, var(--bph-red), var(--bph-red-deep)); color: #fff; font-weight: 700; box-shadow: 0 4px 12px -4px rgba(192,57,43,0.5); }
@media (max-width: 980px) { .bph { max-width: 440px; margin: 0 auto; } }
@media (max-width: 480px) { .bph__stats { grid-template-columns: 1fr 1fr; } .bph__value { font-size: 36px; } }
@media (prefers-reduced-motion: reduce) { .bph__ekg-spark { animation: none; } .bph__range-ind { transition: none; } }

/* ============================================================
   BPT - replicas of real BuildingPulse dashboard tiles for the
   public product page ("The numbers behind the bill").
   ============================================================ */
.bpt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 24px); }
@media (max-width: 900px) { .bpt-grid { grid-template-columns: 1fr; } }
.bpt {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.72));
  border: 0.5px solid rgba(14,42,82,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 30px -18px rgba(14,42,82,0.25);
  padding: clamp(18px, 2.6vw, 26px);
  color: #0E2A52;
}
.bpt h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.012em; color: #0E2A52; margin-bottom: 2px; }
.bpt__what { font-size: 13.5px; color: #4d5b6c; margin-bottom: 14px; }
.bpt__big { font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.bpt__big small { font-size: 15px; font-weight: 500; color: #4d5b6c; margin-left: 5px; }
.bpt__sub { font-size: 12.5px; color: #4d5b6c; margin-top: 5px; }
.bpt__sub b { color: #16a34a; font-weight: 700; }
.bpt__sub .risk { color: #b8860b; font-weight: 700; }
.bpt__split { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 14px 0 8px; }
.bpt__split i { display: block; height: 100%; }
.bpt__split .usage { background: #0d8a7c; }
.bpt__split .demand { background: #c0392b; }
.bpt__legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #4d5b6c; }
.bpt__legend b { color: #0E2A52; font-variant-numeric: tabular-nums; }
.bpt__legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.bpt__ibar { position: relative; height: 12px; border-radius: 999px; margin: 26px 6px 30px;
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 34%, #eab308 58%, #f97316 78%, #dc2626 100%); }
.bpt__mark { position: absolute; top: 50%; }
.bpt__mark i { display: block; width: 2px; height: 22px; background: #0E2A52; opacity: 0.55; transform: translate(-50%, -50%); border-radius: 2px; }
.bpt__mark.now i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3.5px solid #0E2A52; opacity: 1; box-shadow: 0 2px 6px rgba(14,42,82,0.35); }
.bpt__mark span {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; font-weight: 700; color: #4d5b6c; font-variant-numeric: tabular-nums;
}
.bpt__mark.above span { bottom: 16px; }
.bpt__mark.below span { top: 16px; }
.bpt__goalbar { position: relative; height: 14px; border-radius: 999px; background: rgba(14,42,82,0.08); margin: 16px 2px 26px; }
.bpt__goalbar > i { display: block; height: 100%; border-radius: 999px; background: #0d8a7c; }
.bpt__goaltick { position: absolute; top: -5px; bottom: -5px; width: 2.5px; background: #7c3aed; border-radius: 2px; }
.bpt__goaltick span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: #7c3aed; white-space: nowrap; }

/* ============================================================
   KBROWSER - Safari-style frame for system-graphics screenshots.
   ============================================================ */
.kbrowser {
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 18px 40px -26px rgba(14,26,31,0.35);
}
.kbrowser__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: linear-gradient(180deg, #f6f5f1, #edece7);
  border-bottom: 1px solid var(--rule);
}
.kbrowser__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.kbrowser__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.kbrowser__dots i:nth-child(1) { background: #ff5f57; }
.kbrowser__dots i:nth-child(2) { background: #febc2e; }
.kbrowser__dots i:nth-child(3) { background: #28c840; }
.kbrowser__url {
  flex: 1; max-width: 420px; margin: 0 auto; text-align: center;
  font-size: 11.5px; color: var(--mute);
  background: #fff; border: 1px solid var(--rule); border-radius: 7px;
  padding: 4px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kbrowser__body img { display: block; width: 100%; height: auto; }
.kbrowser + figcaption, .kbooklet + figcaption {
  padding-top: 12px; font-size: 13.5px; color: var(--mute); text-align: center;
}

/* ============================================================
   KBOOKLET - an 11x17 landscape drawing sheet, presented like a
   printed submittal booklet open to this page.
   ============================================================ */
.kbooklet { position: relative; padding-left: 14px; }
.kbooklet__sheet {
  position: relative;
  background: #fff;
  border: 1px solid rgba(14,26,31,0.16);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(14,26,31,0.10),
    0 14px 34px -18px rgba(14,26,31,0.38),
    18px 22px 40px -30px rgba(14,26,31,0.35);
}
.kbooklet__sheet::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -14px; width: 14px;
  background: linear-gradient(90deg, rgba(14,26,31,0.0) 0%, rgba(14,26,31,0.16) 82%, rgba(14,26,31,0.30) 100%);
  border-radius: 3px 0 0 3px;
}
.kbooklet__sheet::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 26px;
  background: linear-gradient(270deg, rgba(14,26,31,0.07), rgba(14,26,31,0));
  pointer-events: none;
}
.kbooklet img { display: block; width: 100%; height: auto; }
.kbooklet__tab {
  position: absolute; top: -11px; right: 18px;
  font-size: 11px; font-weight: 700; color: var(--ink-2);
  background: var(--bone-2); border: 1px solid var(--rule); border-radius: 5px;
  padding: 3px 10px;
}

/* ============================================================
   KPANELSLOT - designated space for field photos to come.
   ============================================================ */
.kpanelslot {
  display: grid; place-items: center; text-align: center;
  min-height: 200px; padding: 28px;
  border: 1.5px dashed var(--rule-strong); border-radius: 12px;
  background: rgba(255,255,255,0.4);
}
.kpanelslot b { display: block; font-size: 15px; font-weight: 650; color: var(--ink-2); margin-bottom: 5px; }
.kpanelslot span { font-size: 13px; color: var(--mute); max-width: 40ch; }

/* ============================================================
   KHUBLITE - compact, faithful mock of a Customer Hub Location
   page for the homepage (light register, real product anatomy).
   ============================================================ */
.khublite {
  background: #eef3f1; border-radius: 18px; padding: 14px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.18);
  color: #0E2A52; font-family: var(--f-sans);
}
.khublite__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 6px 10px; }
.khublite__brand { font-size: 15px; font-weight: 700; color: #0E2A52; }
.khublite__brand span { color: #0a6b60; }
.khublite__remote { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; color: #0a6b60; background: rgba(10,107,96,0.10); border-radius: 999px; padding: 5px 11px; }
.khublite__remote::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.khublite__aerial { position: relative; border-radius: 12px; overflow: hidden; height: 148px;
  background: linear-gradient(180deg, #dfe8e2, #cfdbd2); }
.khublite__aerial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.khublite__score {
  position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; border: 3px solid #0d8a7c; display: grid; place-items: center;
  font-size: 17px; font-weight: 800; color: #0E2A52;
  box-shadow: 0 4px 12px rgba(14,42,82,0.25);
}
.khublite__loc { padding: 12px 6px 4px; }
.khublite__loc b { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; }
.khublite__loc span { font-size: 11.5px; color: #4d5b6c; }
.khublite__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; }
.khublite__tile {
  background: rgba(255,255,255,0.72); border: 0.5px solid rgba(14,42,82,0.10);
  border-radius: 11px; padding: 10px 12px; min-height: 58px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
}
.khublite__tile b { font-size: 12.5px; font-weight: 650; color: #0E2A52; }
.khublite__tile b em { font-style: normal; font-weight: 300; color: #c0392b; }
.khublite__tile span { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: #4d5b6c; font-variant-numeric: tabular-nums; }
.khublite__tile span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #16a34a; flex: 0 0 auto; }
.khublite__tile.amber span::before { background: #d6a51c; }
@media (max-width: 980px) { .khublite { max-width: 440px; margin: 0 auto; } }

/* ---------- small utilities for this pass ---------- */
.khero__media--bare img { border: 0; border-radius: 0; }
.kledger--media .kledger__row { grid-template-columns: minmax(150px, 220px) minmax(140px, 0.5fr) minmax(0, 1fr) minmax(110px, 0.32fr); align-items: center; }
.kledger__thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--rule); }
@media (max-width: 860px) {
  .kledger--media .kledger__row { grid-template-columns: 1fr 1fr; }
  .kledger--media .kledger__thumb { grid-row: span 2; }
}
@media (max-width: 640px) { .kledger--media .kledger__row { grid-template-columns: 1fr; } .kledger--media .kledger__thumb { grid-row: auto; } }
.kcareer-logo { display: grid; place-items: center; }
.kcareer-logo img { width: min(240px, 52vw); height: auto; }
@media (max-width: 940px) { .kcareer-logo img { width: 130px; } }


/* ============================================================
   REVAMP KIT - 2026-07-06 full front-end overhaul
   Shared section anatomy for every public page. Only the banded
   background system (bone / paper / ink) and the type stack were
   kept from the previous generation; these components replace the
   old cardgrid-everywhere layouts. Pages compose ONLY from these
   plus the pre-existing primitives (.section, .band, .cta, .btn,
   .statstrip, .tier, .timeline, .datacard, .bph).
   ============================================================ */

/* ---------- khero: editorial page hero ----------
   2026-07-06 (John): NO tracked-caps kicker above the title, hero type
   stays book-sized (≤46px), and media is a PLAIN photo with a hairline
   border - no glossy gradient frames, no pill captions, anywhere. */
.khero { padding: clamp(19px, 2.6vw, 35px) 0 clamp(22px, 3.2vw, 38px); } /* top trimmed ~40% (2026-07-21, KP) */
.khero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.khero__grid--solo { grid-template-columns: minmax(0, 1fr); }
/* Program emblem in the hero's right column (KP, 2026-07-28). No card,
   no plate: the art is a keyed PNG, so it prints straight onto the page
   background. Sized as a badge rather than a banner. */
.khero__media--emblem {
  display: grid; place-items: center; justify-self: center;
  width: min(100%, 420px); margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none;
}
.khero__media--emblem img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .khero__media--emblem { width: min(100%, 280px); justify-self: start; }
}
.khero__title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.025em; max-width: 24ch; }
.khero__title .accent { color: var(--teal-deep); }
/* Wider measure for this hero (KP, 2026-07-28). The shared title caps at
   24ch, which on the Mass Save page broke the headline early and left a
   gap between it and the emblem. 32ch lets the lines run further right
   while still stopping well short of the artwork. Opt-in: the other
   eleven heroes keep the tighter measure. */
.khero__title--wide { max-width: 32ch; }
/* One measure for the whole hero copy block (KP, 2026-07-28). Title, sub,
   buttons and the note each carried their own cap — 847 / 594 / 966 / 392px
   — so the right edge stepped in and out and the button row actually
   overran the headline. Constraining the column and clearing the children's
   individual caps lines every edge up. Scoped to this page. */
.khero__copy--measured { max-width: min(100%, clamp(520px, 46vw, 850px)); }
.khero__copy--measured .khero__title,
.khero__copy--measured .khero__sub,
.khero__copy--measured .khero__ctas,
.khero__copy--measured .khero__note { max-width: 100%; }
.khero__sub { margin-top: clamp(16px, 2.2vw, 24px); font-size: clamp(16.5px, 1.8vw, 19px); line-height: 1.62; color: var(--ink-3); max-width: 58ch; }
.khero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 34px); }
.khero__note { margin-top: 16px; font-size: 14px; color: var(--mute); max-width: 52ch; }
.khero__media img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 12px;
}
/* The emblem is a keyed PNG printed straight onto the page, so it takes
   neither the photo border nor the rounded corner this rule gives every
   other hero image (KP, 2026-07-28). Declared AFTER the rule above so it
   wins on source order — the earlier copy of this reset sat before it and
   was silently overridden, which is where the little box came from. */
.khero__media--emblem img { border: 0; border-radius: 0; }
@media (max-width: 940px) {
  .khero__grid { grid-template-columns: 1fr; }
  .khero__media { max-width: 520px; }
}

/* ---------- kledger: bordered row list (replaces card grids) ---------- */
.kledger { border-top: 1px solid var(--rule-strong); }
.kledger__row {
  display: grid; grid-template-columns: minmax(140px, 0.42fr) minmax(0, 1.2fr) minmax(120px, 0.38fr);
  gap: clamp(16px, 3vw, 40px); align-items: baseline;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none;
}
a.kledger__row { transition: background-color 0.2s ease; }
a.kledger__row:hover { background: rgba(13,138,124,0.04); }
.kledger__lead { font-size: clamp(17px, 1.9vw, 20px); font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.kledger__lead small {
  display: block; margin-top: 6px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal-deep);
}
.kledger__body { font-size: 15.5px; line-height: 1.6; color: var(--ink-3); max-width: 58ch; }
.kledger__meta {
  justify-self: end; text-align: right;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute);
}
.kledger__meta .big { display: block; font-family: var(--f-sans); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.02em; color: var(--teal-deep); text-transform: none; margin-bottom: 4px; }
.section--ink .kledger__lead, body.subpage--editorial .section--ink .kledger__lead { color: var(--bone); }
.section--ink .kledger__body { color: rgba(244,242,236,0.72); }
.section--ink .kledger__row { border-color: rgba(244,242,236,0.14); }
.section--ink .kledger { border-top-color: rgba(244,242,236,0.28); }
@media (max-width: 760px) {
  .kledger__row { grid-template-columns: 1fr; gap: 8px; }
  .kledger__meta { justify-self: start; text-align: left; margin-top: 4px; }
}

/* ---------- krail: numbered vertical process ---------- */
.krail { display: grid; gap: clamp(26px, 4vw, 40px); max-width: 760px; }
.krail__step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: clamp(14px, 2.6vw, 26px); }
.krail__num {
  position: relative;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--teal-deep);
}
.krail__num b {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1.25px solid var(--teal-line); border-radius: 50%;
  background: #fff; font-weight: 700;
}
.krail__num::after {
  content: ""; position: absolute; left: 14.5px; top: 36px; bottom: calc(-1 * clamp(26px, 4vw, 40px));
  width: 1.25px; background: linear-gradient(var(--teal-line), rgba(13,138,124,0.08));
}
.krail__step:last-child .krail__num::after { display: none; }
.krail__step h3 { font-size: clamp(18px, 2vw, 21px); font-weight: 650; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 7px; }
.krail__step p { font-size: 15.5px; line-height: 1.62; color: var(--ink-3); max-width: 56ch; }
.krail__deliverable {
  /* Sentence case, untracked - tracked-caps labels read as AI scaffolding (John, 2026-07-06). */
  margin-top: 10px; font-size: 13.5px; font-weight: 650;
  color: var(--teal-deep);
}

/* ── krail--flow: the same steps read left-to-right (KP, 2026-07-28) ──
   The vertical rail caps at 760px, so on a wide page the four steps ran
   down the left and left the right half of the band empty. This variant
   lays them across instead — one column per step, the connector threading
   through the markers — and drops the number out of the marker, leaving a
   plain dot. Opt-in via the modifier: the Solutions page keeps the
   numbered vertical rail. Below 900px it falls back to that same vertical
   layout, where four side-by-side columns would be unreadable. ── */
.krail--flow {
  --kf-gap: clamp(20px, 2.6vw, 40px);
  --kf-cols: 4;
  --kf-col: calc((100% - (var(--kf-cols) - 1) * var(--kf-gap)) / var(--kf-cols));
  position: relative; max-width: none;
  grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--kf-gap); align-items: start;
}
/* One continuous rule behind the markers, stopping on the first and last. */
.krail--flow::before {
  content: ""; position: absolute; top: 14px; height: 1.25px; border-radius: 1px;
  left: calc(var(--kf-col) / 2); right: calc(var(--kf-col) / 2);
  background: linear-gradient(90deg, rgba(13,138,124,0.10), var(--teal-line) 12%, var(--teal-line) 88%, rgba(13,138,124,0.10));
}
.krail--flow .krail__step { grid-template-columns: 1fr; gap: 0; text-align: center; }
.krail--flow .krail__num { display: grid; place-items: center; margin-bottom: 14px; }
/* Number out, dot in — the step's heading already says what it is. */
.krail--flow .krail__num b {
  width: 15px; height: 15px; font-size: 0; border-width: 3px;
  border-color: var(--teal, #0d8a7c); background: var(--paper, #FBFAF6);
}
.krail--flow .krail__num::after { display: none; }
.krail--flow .krail__step p { max-width: 40ch; margin-inline: auto; }
.krail--flow .krail__deliverable { margin-inline: auto; }
@media (max-width: 900px) {
  .krail--flow {
    grid-auto-flow: row; grid-auto-columns: auto;
    gap: clamp(26px, 4vw, 40px); max-width: 760px;
  }
  .krail--flow::before { display: none; }
  .krail--flow .krail__step {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: clamp(14px, 2.6vw, 26px); text-align: left;
  }
  .krail--flow .krail__num { display: block; margin-bottom: 0; }
  .krail--flow .krail__num b { width: 30px; height: 30px; font-size: 12px; border-width: 1.25px; border-color: var(--teal-line); background: #fff; }
  .krail--flow .krail__num::after { display: block; }
  .krail--flow .krail__step:last-child .krail__num::after { display: none; }
  .krail--flow .krail__step p { max-width: 56ch; margin-inline: 0; }
  .krail--flow .krail__deliverable { margin-inline: 0; }
}

/* ---------- kproof: ink-band claim + readouts ---------- */
.kproof__claim { font-size: clamp(26px, 3.6vw, 42px); font-weight: 650; letter-spacing: -0.025em; line-height: 1.12; color: var(--bone); max-width: 24ch; }
.kproof__claim strong { color: var(--teal-bright, #2dd4bf); font-weight: 650; }
.kproof__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(18px, 3vw, 36px); margin-top: clamp(30px, 4.4vw, 48px); }
.kproof__stat { border-top: 1px solid rgba(244,242,236,0.22); padding-top: 14px; }
.kproof__stat b { display: block; font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; color: var(--bone); }
.kproof__stat b em { font-style: normal; font-size: 0.6em; color: rgba(244,242,236,0.6); margin-left: 2px; }
.kproof__stat span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45; color: rgba(244,242,236,0.62); }

/* ---------- kfacts: dossier grid ---------- */
.kfacts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: #fff;
}
.kfacts > div { padding: 16px 18px; border-right: 1px solid var(--rule); }
.kfacts > div:last-child { border-right: 0; }
.kfacts dt {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px;
}
.kfacts dd { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
@media (max-width: 760px) {
  .kfacts { grid-template-columns: 1fr 1fr; }
  .kfacts > div { border-bottom: 1px solid var(--rule); }
  .kfacts > div:nth-child(even) { border-right: 0; }
  .kfacts > div:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---------- kresult: case-file outcome banner ---------- */
.kresult {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap;
  border: 1px solid var(--teal-line); border-radius: 20px;
  background: var(--teal-soft); padding: clamp(22px, 3.4vw, 34px) clamp(22px, 3.6vw, 40px);
}
.kresult b { font-size: clamp(38px, 5.6vw, 64px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--teal-deep); }
.kresult span { font-size: clamp(15px, 1.8vw, 17px); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }

/* ---------- kacc: accordion (native details) ---------- */
.kacc { border-top: 1px solid var(--rule-strong); }
.kacc details { border-bottom: 1px solid var(--rule); }
.kacc summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: clamp(18px, 2.6vw, 24px) 4px;
  font-size: clamp(16.5px, 1.9vw, 19px); font-weight: 650; letter-spacing: -0.01em; color: var(--ink);
  cursor: pointer; list-style: none;
}
.kacc summary::-webkit-details-marker { display: none; }
.kacc summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: var(--f-mono); font-size: 18px; font-weight: 500; color: var(--teal-deep);
  transition: transform 0.2s ease;
}
.kacc details[open] summary::after { content: "–"; }
.kacc details > div { padding: 0 4px clamp(20px, 2.8vw, 26px); font-size: 15.5px; line-height: 1.65; color: var(--ink-3); max-width: 64ch; }
.kacc details > div p + p { margin-top: 10px; }

/* ---------- kquote ---------- */
.kquote { max-width: 860px; }
.kquote blockquote { font-size: clamp(20px, 2.8vw, 28px); font-weight: 550; letter-spacing: -0.018em; line-height: 1.35; color: var(--ink); }
.kquote figcaption {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute);
}

/* ---------- kteam: headshot strip ---------- */
.kteam { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(14px, 2.4vw, 24px); }
.kteam figure { margin: 0; }
.kteam img {
  display: block; width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--rule);
  filter: saturate(0.94);
}
.kteam figcaption { padding: 10px 2px 0; }
.kteam .nm { display: block; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.kteam .rl { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
a.kteam__card { text-decoration: none; color: inherit; display: block; border-radius: 12px; }
a.kteam__card:hover img { filter: saturate(1); }

/* ---------- ksplit: framed media + copy ---------- */
.ksplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ksplit__media { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 12px; }
.ksplit__media img { display: block; width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 860px) { .ksplit { grid-template-columns: 1fr; } .ksplit__media { max-width: 520px; } }

/* ---------- knext: prev/next case-file nav ---------- */
.knext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 1px solid var(--rule-strong); padding-top: clamp(22px, 3.2vw, 30px); }
.knext a { display: block; text-decoration: none; color: inherit; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 12px; transition: background-color 0.2s ease; }
.knext a:hover { background: rgba(13,138,124,0.05); }
.knext .dir { display: block; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.knext .ttl { font-size: 15.5px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.knext a:last-child { text-align: right; }
@media (max-width: 640px) { .knext { grid-template-columns: 1fr; } .knext a:last-child { text-align: left; } }

/* ---------- kcta-strip: slim inline cross-sell ---------- */
.kcta-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: 20px; background: rgba(255,255,255,0.6);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3.4vw, 34px);
}
.kcta-strip h3 { font-size: clamp(17px, 2vw, 20px); font-weight: 650; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 4px; }
.kcta-strip p { font-size: 14.5px; color: var(--ink-3); max-width: 56ch; }

/* ============================================================
   2026-07-06 UI AUDIT ADDITIONS
   One h2 scale everywhere + device-framed product previews that
   carry REAL screenshots of the live products (John: the hand-
   built minis never quite matched; these can't drift).
   ============================================================ */

/* Customer Hub section header joins the unified h2 scale (was an
   inline-styled .khero__title one-off on the homepage). */
.hub__title {
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  max-width: 20ch;
}
.hub__title .accent { color: var(--teal-deep); }

/* KSHOT - a product screenshot in a device. Desktop visitors get
   the Safari frame, phone visitors get the iPhone. */
.kshot { margin: 0; }
.kshot--phone { display: none; }
.kshot figcaption {
  padding-top: 14px;
  font-size: 13.5px;
  color: var(--mute);
  text-align: center;
}
.digital .kshot figcaption { color: rgba(244,242,236,0.55); }
.kshot figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kshot figcaption a:hover { color: var(--teal-deep); }
.digital .kshot figcaption a:hover { color: #6ED4C2; }
.digital .kbrowser {
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 44px 90px -44px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.35);
}
@media (max-width: 880px) {
  .kshot--desktop { display: none; }
  .kshot--phone { display: block; }
}

/* KPHONE - a modern iPhone around a real mobile screenshot. */
.kphone {
  --kphone-bg: #eef3f1;
  position: relative;
  width: min(310px, 88%);
  margin: 0 auto;
  border-radius: 56px;
  background: linear-gradient(160deg, #3a3d42 0%, #17181b 22%, #101113 78%, #33363b 100%);
  padding: 11px;
  box-shadow:
    0 40px 80px -38px rgba(0,0,0,0.6),
    0 4px 14px rgba(0,0,0,0.25);
}
.kphone::before {
  /* right-side power button */
  content: '';
  position: absolute; top: 24%; right: -2.5px;
  width: 2.5px; height: 62px; border-radius: 2px;
  background: #26282c;
}
.kphone::after {
  /* left-side volume pair */
  content: '';
  position: absolute; top: 20%; left: -2.5px;
  width: 2.5px; height: 38px; border-radius: 2px;
  background: #26282c;
  box-shadow: 0 50px 0 0 #26282c;
}
.kphone__screen {
  position: relative;
  border-radius: 45px;
  overflow: hidden;
  background: var(--kphone-bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}
.kphone__top {
  position: relative;
  height: 46px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 28px 0;
  font: 600 13.5px/1 var(--f-sans);
  color: #0E2A52;
  font-variant-numeric: tabular-nums;
}
.kphone__island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 26px; border-radius: 999px;
  background: #060708;
}
.kphone__glyphs { display: inline-flex; align-items: center; gap: 5px; }
.kphone__glyphs svg { display: block; }
.kphone__screen > img { display: block; width: 100%; height: auto; }
@media (max-width: 880px) {
  .kphone { width: min(300px, 84%); }
}

/* ===== Success story bands (2026-07-28) ===== */
/* Success story: full-width banded chapters (scoped .kstory) */
.kstory .kchap{padding:clamp(24px,2.1vw,32px) var(--gutter);}
.kstory .kchap--paper{background:var(--paper);}
.kstory .kchap__head{display:flex;justify-content:space-between;align-items:baseline;gap:clamp(24px,4vw,70px);padding-bottom:12px;margin-bottom:clamp(18px,1.8vw,24px);border-bottom:1px solid rgba(14,26,31,.13);}
.kstory .kchap__head h2{margin:0;font-size:clamp(28px,2.8vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.05;color:var(--ink);}
.kstory .kchap__head p{margin:0;text-align:right;max-width:52ch;font-size:clamp(14px,1.05vw,16px);color:var(--ink-3);}
.kstory .kchap__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,62ch);gap:clamp(32px,3.4vw,64px);align-items:start;}
.kstory .kchap__grid .prose{max-width:none;margin-top:0;margin-bottom:14px;}
.kstory .kchap__grid .prose:last-child{margin-bottom:0;}
.kstory .kpanel{border-left:2px solid var(--teal);padding:2px 0 2px clamp(18px,1.6vw,26px);}
.kstory .kpanel h3{margin:0 0 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-deep);font-weight:700;}
.kstory .kpanel ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;}
.kstory .kpanel li{font-size:14.5px;line-height:1.45;color:var(--ink-2);padding-left:18px;position:relative;}
.kstory .kpanel li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--teal);}
.kstory .kpull{margin:0;font-size:clamp(19px,1.6vw,25px);line-height:1.4;font-weight:500;letter-spacing:-.01em;color:var(--ink);}
.kstory .kpull small{display:block;margin-top:14px;font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--ink-3);}
.kstory .kfigures{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px);margin-top:clamp(22px,2.2vw,32px);padding-top:clamp(18px,1.8vw,26px);border-top:1px solid rgba(14,26,31,.13);}
.kstory .kfigures b{display:block;font-size:clamp(30px,3.1vw,46px);font-weight:600;letter-spacing:-.025em;line-height:1;color:var(--ink);}
.kstory .kfigures b em{font-style:normal;color:var(--teal-deep);font-size:.58em;margin-left:2px;}
.kstory .kfigures span{display:block;margin-top:9px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);}
@media (max-width:900px){
  .kstory .kchap__head{flex-direction:column;gap:10px;}
  .kstory .kchap__head p{text-align:left;}
  .kstory .kchap__grid{grid-template-columns:1fr;gap:30px;}
  .kstory .kfigures{grid-template-columns:repeat(2,1fr);gap:26px 20px;}
}

/* Ledger sections inside a story band run full width */
.kstory .kchap .kledger{margin-top:clamp(18px,1.8vw,26px);}
.kstory .kchap .kresult{margin:clamp(14px,1.5vw,20px) 0;}