:root {
      --green:    #96C93D;
      --green-dk: #7aaa2e;
      --bg-0:     #0E1013;
      --bg-1:     #15181D;
      --bg-2:     #1C2026;
      --bg-alt:   #131419;
      --blue:     #3D79BD;
      --orange:   #E5893D;
      --text:     #e8e8e8;
      --muted:    #8a8f9a;
      --grad:     linear-gradient(90deg, var(--blue), var(--green));
      --grad-rev: linear-gradient(90deg, var(--green), var(--blue));
      --grad-diag: linear-gradient(135deg, var(--blue), var(--green));
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Montserrat', sans-serif;
      background: var(--bg-0);
      color: var(--text);
      font-size: 15px;
      line-height: 1.7;
      /* Pins the footer to the bottom of the viewport on short pages (legal-doc fallback
         states, portal.html) instead of it trailing right after a couple lines of content
         with a dead gap below it. */
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    body > main { flex: 1 0 auto; display: flex; flex-direction: column; }
    /* form-redirect.php's content is short enough that the sticky-footer rule above (main
       stretched to fill the viewport) left a large dead gap between the content and the
       footer instead of the footer trailing right after it — most visible on a tall
       (portrait tablet) viewport. Centering this one section within main's stretched height
       distributes that space around the content instead of dumping it all below. */
    #submission-thanks { flex: 1; display: flex; flex-direction: column; justify-content: center; }
    /* Locks background scroll while the mobile nav is open (iOS needs position:fixed,
       not just overflow:hidden, or touchmove still scrolls the page behind the menu).
       scrollY is captured/restored in JS alongside this class. */
    body.nav-open { position: fixed; left: 0; right: 0; overflow: hidden; }
    h1, h2, h3, h4, h5, h6, .btn, button, input, select, textarea, label {
      font-family: 'Montserrat', sans-serif;
    }

    .site-nav {
      position: fixed;
      top: 32px; left: 0; right: 0;
      z-index: 1000;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2.5rem;
      background: rgba(14,16,19,0.9);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(150,201,61,0.12);
    }
    /* util-bar is fixed (occupies no document-flow space) and .site-nav's top:32px offset
       exists only to sit below it — omitting the bar (body.no-util-bar, see site_head.php's
       $hideUtilBar) without this would leave a blank 32px strip instead of actually closing
       the gap. */
    body.no-util-bar .site-nav { top: 0; }
    .site-nav .logo img { height: 34px; }
    .nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
    .nav-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transition: color 0.2s;
    }
    .nav-links a:hover, .nav-links a.active-link { color: var(--green); }
    .nav-links .nav-cta {
      background: var(--grad-rev);
      color: #0E1013 !important;
      padding: 0.55rem 1.4rem;
      border-radius: 100px;
      box-shadow: 0 4px 18px rgba(150,201,61,0.25);
    }
    .nav-links .nav-cta:hover { filter: brightness(1.08); }
    /* Standalone mobile-menu Support button (promoted out of the "More" panel so it's
       reachable in one tap) — desktop already has Support in the util-bar, so this stays
       hidden until the mobile nav layout kicks in below. */
    .nav-support-item { display: none; }
    .nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0; }
    .nav-mobile-actions { display: none; }

    .util-bar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: 32px;
      background: var(--bg-0); border-bottom: 1px solid rgba(255,255,255,0.05);
      padding: 0 2.5rem; display: flex; align-items: center; gap: 1.5rem;
    }
    .util-bar .util-phone { position: absolute; top: 0; height: 100%; display: flex; align-items: center; color: var(--text); font-weight: 700; white-space: nowrap; }
    .util-bar a { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; transition: color 0.2s; }
    .util-bar a:hover { color: var(--green); }
    .util-bar a i { font-size: 0.62rem; }
    .util-links { display: flex; gap: 1.5rem; }
    .util-forms-dropdown { position: relative; }
    .util-forms-dropdown .dropdown-toggle {
      background: none; border: none; padding: 0; font: inherit;
      color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    }
    .util-forms-dropdown .dropdown-toggle:hover, .util-forms-dropdown .dropdown-toggle:focus-visible { color: var(--green); }
    .util-forms-dropdown .dropdown-toggle::after { display: none; }
    .util-forms-dropdown .dropdown-menu {
      background: var(--bg-1); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
      padding: 0.5rem; margin-top: 0.75rem; min-width: 160px;
      box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);
    }
    .util-forms-dropdown .dropdown-item {
      color: var(--text); font-size: 0.8rem; font-weight: 600; border-radius: 6px; padding: 0.55rem 0.75rem;
    }
    .util-forms-dropdown .dropdown-item:hover, .util-forms-dropdown .dropdown-item:focus {
      background: var(--grad-diag); color: #0E1013;
    }
    .util-mobile-forms-label {
      font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--muted); padding: 0.9rem 0 0.3rem !important; display: block;
    }
    @media (max-width: 1024px) { .util-bar { display: none; } }
    .util-mobile-only { display: none; }
    .util-mobile-only a {
      font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important;
      text-transform: none !important; padding-top: 0.65rem !important; padding-bottom: 0.65rem !important;
      color: var(--muted);
    }
    .util-mobile-only a i { font-size: 0.85rem; margin-right: 0.4rem; width: 1rem; display: inline-block; text-align: center; }
    .util-mobile-only.util-first { margin-top: 0.25rem; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.06); }

    section { padding: 8rem 0; scroll-margin-top: 100px; }
    .section-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); margin-bottom: 1.1rem; }
    h2.section-title { font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 900; line-height: 1.22; margin-bottom: 1.5rem; }
    .section-lead { color: var(--muted); font-size: 1rem; line-height: 1.9; max-width: 80%; }
    /* .section-lead's own box shrinks to max-width but isn't auto-centered by default, so on
       portal.html (where the surrounding wrap centers everything) the box itself sat flush left
       and only the text inside it was centering — visually off-center. */
    .portal-login-wrap .section-lead { margin-left: auto; margin-right: auto; }
    /* Same fix, for areas-we-serve.php's three lead paragraphs — none of them sit inside a
       .form-hero-wrap (which centers its own .section-lead child already; see below), so
       without this they'd sit flush left of their wide 80%-of-container box despite the
       surrounding container being text-center. */
    #areas-hero .section-lead, #areas-services .section-lead, #areas-cta .section-lead {
      margin-left: auto; margin-right: auto;
    }
    @media (max-width: 991px) { .section-lead { max-width: 100%; } }
    /* Service chip click-to-expand panel — same 80%-of-container span as the section's own
       .section-lead paragraph above it, so the panel doesn't suddenly stretch full-width. */
    #areas-svc-detail-panel { max-width: 80%; margin-left: auto; margin-right: auto; }
    @media (max-width: 991px) { #areas-svc-detail-panel { max-width: 100%; } }
    /* Tightened bottom padding so the coverage map (inside this same section) doesn't leave
       excessive dead space before #areas-services below it, at the generic 8rem+8rem rhythm. */
    #areas-hero { padding-bottom: 3rem; }
    /* Same tightening as #areas-hero above, so the services-to-CTA gap (was 8rem+8rem = 16rem)
       matches the hero-to-services gap (3rem+8rem = 11rem) instead of reading noticeably taller. */
    #areas-services { padding-bottom: 3rem; }

    /* areas-we-serve.php's coverage radius map — replaces an earlier exhaustive per-city grid
       (91 cities across 5 counties) that read as disproportionate and added little real SEO
       value over the county-level areaServed schema, which is what actually carries weight.
       This leads with the real qualifying rule instead — drive time from HQ. */
    .coverage-map-wrap { display: flex; justify-content: center; margin: 2.5rem 0 2rem; }
    .coverage-map { width: 100%; max-width: 440px; height: auto; }
    .coverage-map .ring { fill: none; stroke: var(--blue); }
    .coverage-map .ring-1 { stroke-opacity: 0.35; }
    .coverage-map .ring-2 { stroke-opacity: 0.2; }
    .coverage-map .map-line { stroke: var(--blue); stroke-opacity: 0.25; stroke-width: 1; }
    .coverage-map .hq-dot { fill: var(--green); }
    .coverage-map .hq-dot-ring { fill: none; stroke: var(--green); stroke-opacity: 0.4; }
    .coverage-map .county-dot { fill: var(--bg-0); stroke: var(--blue); stroke-width: 2; }
    .coverage-map .map-label {
      font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
      letter-spacing: 0.04em; fill: var(--text); text-transform: uppercase;
    }
    .coverage-map .map-label.hq { fill: var(--green); font-size: 10px; }
    .coverage-map .map-sublabel {
      font-family: 'Montserrat', sans-serif; font-size: 9px; fill: var(--muted);
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    .row.mb-5 { margin-bottom: 4rem !important; }

    #home { padding: 150px 0 5rem; background: var(--bg-0); position: relative; overflow: hidden; }
    /* Same top clearance as #home — the generic `section { padding: 8rem 0; }` isn't enough
       breathing room for a section sitting directly under the fixed header (util-bar+nav don't
       occupy document-flow space, so a plain section's padding alone starts right at the very
       top of the page). */
    #submission-thanks { padding: 150px 0 5rem; }
    #home::before { content: ''; position: absolute; top: -250px; right: -250px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(150,201,61,0.08) 0%, transparent 65%); pointer-events: none; }
    #home::after { content: ''; position: absolute; bottom: -150px; left: -150px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(61,121,189,0.06) 0%, transparent 65%); pointer-events: none; }

    .hero-eyebrow { display: flex; align-items: center; gap: 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 1.4rem; }
    .hero-eyebrow::before { content: ''; display: block; width: 36px; height: 2px; background: var(--grad); flex-shrink: 0; }
    .hero-title { font-size: clamp(1.9rem, 6.5vw, 3.4rem); font-weight: 900; line-height: 1.08; margin-bottom: 1.5rem; }
    @media (min-width: 992px) { .hero-title { font-size: clamp(2.2rem, 3vw, 3.2rem); } }
    .hero-title .accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .hero-sub { font-size: 1rem; color: var(--muted); max-width: 520px; line-height: 1.85; margin-bottom: 2.5rem; }

    .btn-green {
      display: inline-block; background: var(--grad-rev); background-size: 160% 100%; background-position: 0% 0%;
      color: #0E1013; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.9rem 2.1rem; border: none; border-radius: 100px; text-decoration: none; cursor: pointer;
      box-shadow: 0 6px 24px rgba(150,201,61,0.22);
      transition: background-position 0.3s, transform 0.15s, box-shadow 0.2s;
    }
    .btn-green:hover { background-position: 100% 0%; color: #0E1013; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(150,201,61,0.32); }
    .btn-ghost {
      display: inline-block; background: transparent; color: var(--text); font-size: 0.78rem; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase; padding: 0.88rem 1.9rem; border: 1px solid rgba(255,255,255,0.18);
      border-radius: 100px; text-decoration: none; cursor: pointer; transition: border-color 0.2s, color 0.2s;
    }
    .btn-ghost:hover { border-color: var(--green); color: var(--green); }
    .btn-outline-white {
      display: inline-block; background: transparent; color: #fff; font-size: 0.78rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase; padding: 0.85rem 2rem; border: 2px solid #fff;
      border-radius: 100px; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }
    .btn-outline-white:hover {
      background: linear-gradient(var(--bg-0), var(--bg-0)) padding-box, var(--grad-diag) border-box;
      border-color: transparent; color: #fff; transform: translateY(-2px);
    }
    .icon-cta {
      display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
      border-radius: 50%; font-size: 1.6rem; text-decoration: none; cursor: pointer;
      transition: background-position 0.3s, background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.2s;
    }
    .icon-cta-outline { background: transparent; border: 2px solid #fff; color: #fff; }
    .icon-cta-outline:hover {
      background: linear-gradient(var(--bg-0), var(--bg-0)) padding-box, var(--grad-diag) border-box;
      border-color: transparent; color: #fff; transform: translateY(-2px);
    }

    .hero-tagline { margin-top: 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
    .hero-tagline span { color: var(--green); }
    .hero-tagline-mobile { display: none; }
    .client-strip { margin-top: 1.75rem; }
    .client-strip-label { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 0.5rem; }

    .trust-bar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.06); }
    .trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
    .trust-item i { color: var(--green); font-size: 0.85rem; }
    .hero-mobile-divider { display: none; }

    .hero-visual { position: relative; height: 560px; display: flex; align-items: center; justify-content: center; }
    .tx-map { width: 100%; max-width: 520px; opacity: 0.92; filter: drop-shadow(0 0 36px rgba(150,201,61,0.12)); }
    .tx-map path { fill: rgba(150,201,61,0.03); stroke: url(#txGrad); stroke-width: 2; stroke-linejoin: round; }
    .tx-dot { fill: var(--green); }
    .tx-dot-ring { fill: none; stroke: var(--green); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.6; transform-box: fill-box; transform-origin: center; animation: pulse-ring 2.2s ease-out infinite; }
    @keyframes pulse-ring {
      0%   { transform: scale(1);    opacity: 0.7; }
      100% { transform: scale(4.35); opacity: 0; }
    }
    .tx-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; fill: var(--text); text-transform: uppercase; font-family: 'Montserrat', sans-serif; }
    .tx-label.dim { fill: var(--muted); font-size: 8px; letter-spacing: 0.1em; }

    #get-started-top { display: none; }

    @media (max-width: 991px) {
      .hero-eyebrow { justify-content: center; }
      .hero-eyebrow::before { display: none; }
      .hero-title { text-align: center; }
      .hero-sub { text-align: center; margin-left: auto; margin-right: auto; font-size: calc(1rem - 0.5px); }
      .hero-cta-row { justify-content: center; }
      .hero-visual-col { margin-top: 2.5rem; }
      .hero-visual { height: 340px; }
      .tx-map { max-width: 320px; }
      .hero-mobile-divider {
        display: block; border: none; height: 1px;
        background: linear-gradient(to right, transparent, var(--blue) 15%, var(--green) 50%, var(--blue) 85%, transparent);
        opacity: 0.4; margin: 2.25rem 0 1.75rem;
      }
      .client-strip { margin-top: 0; text-align: center; }
      .client-strip-label { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.16em; color: var(--muted); }
      .hero-tagline { margin-top: 0.6rem; text-align: center; }
      .hero-tagline-desktop { display: none; }
      .hero-tagline-mobile { display: block; margin-top: 1.75rem; }
      .trust-bar { border-top: none; padding-top: 0; margin-top: 1.25rem; justify-content: center; text-align: center; }
      #get-started-top { display: block; }
    }

    .stats-bar { background: var(--bg-2); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 2.5rem 0; }
    .stats-inner { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; }
    .stat-item { flex: 1; min-width: 140px; text-align: center; padding: 0.5rem 1rem; position: relative; }
    .stat-item + .stat-item::before { content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: rgba(255,255,255,0.08); }
    .stat-number { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; color: var(--green); line-height: 1; margin-bottom: 0.4rem; }
    .stat-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
    @media (max-width: 1024px) { .stat-item + .stat-item::before { display: none; } }

    .ntpc-card {
      background: var(--bg-1);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 2.75rem;
      height: 100%;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 0 rgba(150,201,61,0.06), 0 20px 50px -12px rgba(61,121,189,0.18), 0 8px 24px -8px rgba(150,201,61,0.1);
      transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
    }
    .ntpc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); opacity: 0; transition: opacity 0.25s; }
    .ntpc-card:hover::before { opacity: 1; }
    .ntpc-card:hover { border-color: rgba(150,201,61,0.3); transform: translateY(-4px); box-shadow: 0 28px 60px -12px rgba(61,121,189,0.28), 0 12px 30px -8px rgba(150,201,61,0.18); }
    .card-icon { width: 50px; height: 50px; background: rgba(150,201,61,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 1.2rem; margin-bottom: 1.5rem; flex-shrink: 0; }
    .card-title-sm { font-size: 0.86rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem; }
    .card-body-text { font-size: 0.88rem; color: var(--muted); line-height: 1.85; }

    .vertical-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; }
    .industry-item .vertical-tags { margin-top: 0; }
    .vertical-tag {
      font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
      padding: 0.4rem 0.9rem; border-radius: 100px;
      background: linear-gradient(var(--bg-0), var(--bg-0)) padding-box, var(--grad-diag) border-box;
      border: 2px solid transparent;
      color: var(--text);
    }
    .industry-item .vertical-tag { background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad-diag) border-box; }
    .svc-tag { font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
    .svc-tag:hover { background: var(--grad-diag); color: var(--bg-0); }
    .svc-tag.active { background: var(--grad-diag); border-color: transparent; color: var(--bg-0); }
    /* Areas We Serve's 6 service chips read as one long strip at desktop widths since they fit
       on a single flex-wrap row — force a fixed 3-per-row grid so it reads as two even rows. */
    @media (min-width: 992px) {
      #areas-services .vertical-tags { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; }
    }
    @media (max-width: 576px) {
      #services .vertical-tags, #areas-services .vertical-tags { display: grid; grid-template-columns: 1fr 1fr; }
      #services .vertical-tag, #areas-services .vertical-tag { white-space: normal; text-align: center; line-height: 1.3; }
    }
    .svc-detail { display: none; margin-top: 1.5rem; padding: 1.75rem 2rem; border-radius: 8px; background: var(--bg-1); border: 1px solid rgba(255,255,255,0.06); color: var(--text); font-size: 0.9rem; line-height: 1.8; box-shadow: 0 20px 50px -12px rgba(61,121,189,0.18); }
    .svc-detail.show { display: block; }
    .industry-tag { font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
    .industry-tag:hover { background: var(--grad-diag); color: var(--bg-0); }
    .industry-tag.active { background: var(--grad-diag); border-color: transparent; color: var(--bg-0); }
    .value-tag { font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
    .value-tag:hover { background: var(--grad-diag); color: var(--bg-0); }
    .value-tag.active { background: var(--grad-diag); border-color: transparent; color: var(--bg-0); }

    .num-timeline { position: relative; }
    .num-timeline::before { content: ''; position: absolute; left: 21px; top: 42px; bottom: 42px; width: 2px; background: repeating-linear-gradient(to bottom, rgba(150,201,61,0.35) 0 6px, transparent 6px 12px); }
    .num-card { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem 0; position: relative; }
    .num-badge {
      width: 42px; height: 42px; min-width: 42px; border-radius: 12px; background: var(--grad-rev);
      display: flex; align-items: center; justify-content: center; color: #0E1013;
      font-weight: 900; font-size: 1rem; position: relative; z-index: 1;
      box-shadow: 0 8px 20px -4px rgba(150,201,61,0.4);
    }

    .quote-highlight {
      background: linear-gradient(var(--bg-0), var(--bg-0)) padding-box, var(--grad-diag) border-box;
      border: 2px solid transparent;
      border-radius: 16px;
      padding: 3.5rem 3rem;
      max-width: 460px;
      margin: 0 auto;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-sizing: border-box;
      position: relative;
    }
    .quote-highlight i.bi-quote { position: absolute; top: 2.25rem; right: 2.5rem; font-size: 2.75rem; color: rgba(150,201,61,0.22); }
    .quote-highlight .qtext { font-size: 1.15rem; line-height: 1.9; font-style: italic; margin-bottom: 2rem; }
    .quote-highlight .qname { font-weight: 800; color: var(--green); font-size: 0.9rem; }

    .picture-this { background: var(--grad-diag); border-radius: 16px; padding: 3.5rem; }
    .picture-this-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; color: #0E1013; margin-bottom: 1.5rem; }
    .picture-this-cols { display: flex; gap: 3rem; }
    .picture-this-col { flex: 1; min-width: 0; }
    .picture-this p { font-size: 1.05rem; line-height: 1.85; color: rgba(14,16,19,0.82); margin-bottom: 1.1rem; }
    .picture-this-close { font-weight: 700; color: #0E1013; margin-bottom: 0 !important; }
    @media (max-width: 1024px) { .picture-this-cols { flex-direction: column; gap: 0.5rem; } }

    #industries { background: var(--bg-1); }
    .industry-item { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 2.25rem; border-radius: 8px; background: var(--bg-2); border: 1px solid rgba(255,255,255,0.06); height: 100%; box-shadow: 0 20px 50px -12px rgba(61,121,189,0.18), 0 8px 24px -8px rgba(150,201,61,0.1); transition: border-color 0.2s, transform 0.2s; }
    .industry-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); opacity: 0; transition: opacity 0.25s; }
    .industry-item:hover::before { opacity: 1; }
    .industry-item:hover { border-color: rgba(150,201,61,0.25); transform: translateY(-3px); }
    .industry-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.1rem; }
    .industry-icon { width: 52px; height: 52px; min-width: 52px; background: rgba(150,201,61,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 1.2rem; }
    .industry-title { font-size: 0.86rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
    .industry-sub { font-size: 0.86rem; color: var(--muted); line-height: 1.8; margin-bottom: 1.1rem; }

    #case-studies { background: var(--bg-0); }
    .case-card { padding: 0; overflow: hidden; }
    .case-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1.1rem 1.5rem; background: var(--bg-alt); border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
    .case-header span:first-child { white-space: nowrap; flex-shrink: 0; }
    .case-resolved { color: var(--green); display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
    .case-body-inner { padding: 2.75rem; }
    .case-stat { font-size: 2.8rem; font-weight: 900; line-height: 1; margin-bottom: 0.75rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .case-stat-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); margin-bottom: 1.25rem; }

    #faq { background: var(--bg-alt); }
    .faq-item { background: var(--bg-1); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; margin-bottom: 1.25rem; overflow: hidden; }
    .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.75rem 2.25rem; cursor: pointer; font-weight: 700; font-size: 0.92rem; background: none; border: none; width: 100%; text-align: left; color: var(--text); font-family: inherit; }
    .faq-chevron {
      width: 40px; height: 40px; min-width: 40px; border-radius: 100px; background: var(--grad-rev);
      display: flex; align-items: center; justify-content: center; color: #0E1013; font-size: 1rem;
      transition: transform 0.25s; flex-shrink: 0;
    }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }
    /* grid-template-rows 0fr->1fr, not a fixed max-height — a fixed cap clipped the longest
       answer once it wrapped to more lines on mobile's narrower width. This auto-fits whatever
       height the content actually needs, at any width, so it can't clip again as copy changes. */
    .faq-answer { display: grid; grid-template-rows: 0fr; overflow: hidden; min-height: 0; transition: grid-template-rows 0.3s ease; }
    .faq-item.open .faq-answer { grid-template-rows: 1fr; }
    /* Bottom padding lives here, not baked into .faq-answer-inner's own padding — a fixed
       padding-box floor is exactly as tall regardless of min-height:0, since border-box sizing
       can shrink the content area to 0 but never below the element's own declared padding. That
       floor alone (2rem) was enough to peek open every closed answer by a line of text. */
    .faq-answer-inner { overflow: hidden; min-height: 0; padding: 0 2.25rem; font-size: 0.9rem; color: var(--muted); line-height: 1.85; }
    .faq-item.open .faq-answer-inner { padding-bottom: 2rem; }
    .faq-answer-inner a { color: var(--green); }
    .faq-answer-inner a:hover { color: var(--green-dk); }

    /* Job listing accordion (careers.html) — reuses .faq-item/.faq-question/.faq-chevron for the
       header chrome, but .job-answer has no max-height cap since job descriptions run much longer
       than an FAQ answer. */
    .job-answer { display: none; }
    .job-item.open .job-answer { display: block; }
    .job-answer-inner { padding: 0 2.25rem 2.25rem; font-size: 0.9rem; color: var(--muted); line-height: 1.85; }
    .job-answer-inner h3 { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); margin: 1.5rem 0 0.75rem; }
    .job-answer-inner h3:first-child { margin-top: 0; }
    .job-answer-inner ul { padding-left: 1.2rem; margin: 0; }
    .job-answer-inner li { margin-bottom: 0.5rem; }
    .job-meta { font-size: 0.8rem; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.35rem; }
    .job-apply-btn {
      display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;
      background: var(--grad-rev); background-size: 160% 100%; background-position: 0% 0%;
      color: #0E1013 !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      padding: 0.85rem 1.75rem; border-radius: 100px; text-decoration: none; font-size: 0.82rem;
      box-shadow: 0 6px 24px rgba(150,201,61,0.22);
      transition: background-position 0.3s, transform 0.15s, box-shadow 0.2s;
    }
    .job-apply-btn:hover { background-position: 100% 0%; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(150,201,61,0.32); }

    #careers-hero .row { min-height: 420px; }
    #careers-hero .row > div { display: flex; flex-direction: column; justify-content: center; }
    .careers-team-photo {
      width: 100%; height: 100%; min-height: 320px; max-height: 480px; object-fit: cover;
      border-radius: 20px; display: block;
      box-shadow: 0 30px 70px -12px rgba(61,121,189,0.25), 0 12px 30px -8px rgba(150,201,61,0.15);
    }
    @media (max-width: 991px) {
      #careers-hero .row { min-height: 0; }
      .careers-team-photo { min-height: 220px; max-height: 320px; }
    }

    /* Tighter section rhythm for support.html — the default `section{padding:8rem 0}` is tuned
       for the homepage's long single-scroll hero pacing; on a short, utilitarian page like this
       one it reads as dead space between short blocks. */
    .support-section { padding: 3.25rem 0; }
    .support-section:first-of-type { padding-top: 8rem; }
    /* The impersonation banner leads the page (see .security-notice below) — its own section
       needs the nav clearance above but not the full section rhythm below, since the banner
       is a compact one-liner, not a content block; #support-hero follows immediately after
       with its own reduced top padding so the two don't stack two full section gaps. */
    #support-security { padding-bottom: 0.5rem; }
    #support-hero { padding-top: 1.5rem; }
    /* #support-sos previously had a distinct background (var(--bg-alt)) — the pixel
       padding above and below it was identical to every other section gap, but the
       color seam at that boundary made the gap read as tighter than the seamless
       hero→existing transition. Same background removes the seam so all three gaps
       read as equal, which they numerically already were. */
    .sos-warning { font-style: italic; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .sos-platforms { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.75rem; }
    .sos-platform-card {
      flex: 1 1 220px; background: var(--bg-1); border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px; padding: 1.75rem 1.5rem; text-align: center;
    }
    .sos-platform-card .sos-icon {
      width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 14px;
      background: rgba(150,201,61,0.1); display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; color: var(--green);
    }
    .sos-platform-card h3 { font-size: 0.95rem; margin-bottom: 1.1rem; }
    /* Support page's first section (see .support-section:first-of-type above) — leads the
       page so it's seen before anyone acts, not after. Blue (var(--blue)) ties it to the
       site's own blue/green palette instead of the caution-orange, which read as mismatched
       against the surrounding page. Collapsed by default (native <details>/<summary>, no JS
       needed) so the warning takes one bold, centered line of real estate instead of a full
       card — the heading itself carries the attention-grabbing job; the explanation is a
       click away. Heading/content are centered with the caret absolutely positioned so it
       doesn't throw off that centering at any width. */
    .security-notice {
      margin: 0 0 1.75rem; padding: 1.1rem 2.75rem;
      background: rgba(61,121,189,0.08); border: 1px solid rgba(61,121,189,0.3);
      border-radius: 16px; text-align: center;
    }
    .security-notice[open] { padding-bottom: 1.6rem; }
    .security-notice-summary {
      display: flex; align-items: center; justify-content: center; gap: 0.85rem; cursor: pointer;
      list-style: none; font-weight: 800; font-size: 1.05rem; color: var(--text);
      position: relative;
    }
    .security-notice-summary::-webkit-details-marker { display: none; }
    .security-notice-icon {
      width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
      background: rgba(61,121,189,0.15); color: var(--blue);
      display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    }
    .security-notice-caret {
      position: absolute; right: 0; top: 50%; transform: translateY(-50%);
      color: var(--muted); transition: transform 0.2s;
    }
    .security-notice[open] .security-notice-caret { transform: translateY(-50%) rotate(180deg); }
    .security-notice p {
      font-size: 0.9rem; color: var(--muted); margin: 1rem auto 0; line-height: 1.8;
      max-width: 800px;
    }
    .security-notice p a { color: var(--blue); font-weight: 700; }
    @media (max-width: 576px) {
      .security-notice { padding: 1rem 1.35rem; }
      .security-notice-summary { gap: 0.6rem; font-size: 0.95rem; }
      .security-notice-icon { width: 34px; height: 34px; font-size: 1.05rem; }
      .security-notice-caret { position: static; transform: none; flex-shrink: 0; }
      .security-notice[open] .security-notice-caret { transform: rotate(180deg); }
    }
    @media (max-width: 400px) {
      .security-notice-summary { font-size: 0.85rem; gap: 0.5rem; }
      .security-notice-icon { width: 30px; height: 30px; font-size: 0.95rem; }
    }
    .support-form-note { font-size: 0.85rem; color: var(--muted); margin-top: 1rem; }
    .support-form-note a { color: #6FA3DD; } /* var(--blue)/Bootstrap default both under 4.5:1 on this bg */
    #portal-login .support-form-note a { color: var(--text); }

    /* portal.html — Syncro magic-link sign-in, restyled to match the rest of the site */
    .portal-login-wrap { max-width: 460px; margin: 0 auto; text-align: center; }
    /* Same centered treatment as .portal-login-wrap (centered heading/eyebrow/lead,
       no-line eyebrow), but wide enough to hold a full multi-field JotForm embed
       instead of portal's single-field login box. */
    .form-hero-wrap { max-width: 720px; margin: 0 auto; text-align: center; }
    /* Same fix as .portal-login-wrap .section-lead above — .section-lead's own box
       shrinks to max-width but isn't auto-centered by default, so without this the
       text sits flush left inside the centered wrapper instead of centered as a block. */
    .form-hero-wrap .section-lead { margin-left: auto; margin-right: auto; }

    /* Dotty loading state — shown over a JotForm iframe while it loads, hidden on
       iframe 'load' (see site_footer.php). Reuses the mascot's orbit animation from
       the brand kit as a branded stand-in for a generic spinner. */
    .jf-loader-wrap { position: relative; }
    .jf-loader {
      position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 1.1rem; background: var(--bg-0);
      border-radius: 12px; transition: opacity 0.3s ease; opacity: 1;
    }
    .jf-loader.is-hidden { opacity: 0; pointer-events: none; }
    .jf-loader svg { width: 96px; height: 96px; }
    .jf-loader-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
    .jf-orbit-spin { transform-origin: 100px 100px; animation: jf-spin 3s linear infinite; }
    @keyframes jf-spin { to { transform: rotate(360deg); } }
    .jf-dotty-body { animation: jf-bob 2.6s ease-in-out infinite; }
    @keyframes jf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
    .jf-dotty-blink { transform-origin: 100px 92px; animation: jf-blink 4.5s ease-in-out infinite; }
    @keyframes jf-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.12); } }
    @media (prefers-reduced-motion: reduce) {
      .jf-orbit-spin, .jf-dotty-body, .jf-dotty-blink { animation: none !important; }
    }

    .portal-login-form { text-align: left; margin-top: 2rem; padding: 2.5rem; }
    .portal-login-form .form-label { margin-bottom: 0.5rem; text-align: center; display: block; }
    .portal-login-form .form-control { margin-bottom: 1.5rem; }
    .portal-submit-btn { width: 100%; text-align: center; border: none; cursor: pointer; }
    /* Vertically centers the sign-in card in the space between header and footer, rather than
       it sitting flush at the top with a dead gap below it. */
    .portal-main { display: flex; flex-direction: column; }
    .portal-main #portal-login { flex: 1 0 auto; display: flex; align-items: center; }
    .portal-main #portal-login .container { width: 100%; }
    .hero-eyebrow.no-line::before { display: none; }
    .hero-eyebrow.no-line { justify-content: center; }

    /* Dark-theme override for Bootstrap's modal (used by the portal's "Get in touch" popup) —
       default modal chrome is white, doesn't match the rest of the site. */
    .modal-content { background: var(--bg-1); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; }
    .modal-header { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 1.5rem 1.75rem; }
    .modal-title { color: var(--text); font-weight: 800; font-size: 1.1rem; }
    .modal-body { padding: 1.75rem; }

    /* Support page action chips (support.html) — same gradient-border/fill-on-hover chip language
       as .vertical-tag/.svc-tag/.industry-tag elsewhere on the site, sized up since these are
       primary actions (contact channels), not small filter tags. */
    .support-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
    .support-action-chip {
      display: inline-flex; align-items: center; gap: 0.7rem;
      font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
      padding: 0.95rem 1.6rem; border-radius: 100px;
      background: linear-gradient(var(--bg-1), var(--bg-1)) padding-box, var(--grad-diag) border-box;
      border: 2px solid transparent;
      color: var(--text); text-decoration: none;
      transition: background 0.15s, color 0.15s;
    }
    .support-action-chip i { font-size: 1.05rem; }
    /* Two-line variant (iPhone Shortcut chip) — main label + a small "last updated" sub-label
       so visitors can tell at a glance whether it's current, without a separate tooltip/page. */
    .chip-label-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
    .chip-label-sub { font-size: 0.65rem; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; }
    .support-action-chip:hover { background: var(--grad-diag); color: #0E1013; }
    .support-portal-card {
      background: var(--grad-diag); border-radius: 20px; padding: 2.5rem 2.75rem;
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
      color: #0E1013;
      /* Without a cap, space-between stretches across the full container width — with
         just a short paragraph and a small button, that leaves a huge empty gap in the
         middle on desktop instead of reading as one balanced card. */
      max-width: 960px; margin-left: auto; margin-right: auto;
    }
    .support-portal-card h2 { font-size: 1.4rem; margin-bottom: 0.4rem; }
    .support-portal-card p { margin: 0; font-size: 0.9rem; opacity: 0.85; max-width: 620px; }
    .support-portal-card .btn-portal {
      background: #0E1013; color: var(--text); font-weight: 700; font-size: 0.85rem;
      padding: 0.9rem 1.75rem; border-radius: 100px; text-decoration: none; white-space: nowrap;
      display: inline-flex; align-items: center; gap: 0.6rem; transition: filter 0.15s;
    }
    .support-portal-card .btn-portal:hover { filter: brightness(1.3); }
    @media (max-width: 576px) {
      .support-actions { flex-direction: column; }
      .support-action-chip { justify-content: center; }
      .support-portal-card { padding: 2rem; }
      /* Contact chips (call/ticket/email) read as the more urgent action on a small
         screen — reorder above the portal card here without touching source order,
         so desktop (unaffected by this breakpoint) keeps the portal card first. */
      #support-existing .container { display: flex; flex-direction: column; }
      #support-existing .support-actions { order: 1; }
      #support-existing .support-portal-card { order: 2; }
    }

    #about { background: var(--bg-1); }
    .about-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(150,201,61,0.08); border: 1px solid rgba(150,201,61,0.22); border-radius: 100px; padding: 0.4rem 1rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 1.25rem; }
    .mini-stat { text-align: center; padding: 1.1rem 1.5rem; background: var(--bg-2); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 8px 24px rgba(0,0,0,0.24); }
    .mini-stat-num { font-size: 1.6rem; font-weight: 900; color: var(--green); line-height: 1; margin-bottom: 0.3rem; }
    .mini-stat-lbl { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
    .founder-card { background: var(--bg-2); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 3.25rem 2.5rem; box-shadow: 0 30px 70px -12px rgba(61,121,189,0.25), 0 12px 30px -8px rgba(150,201,61,0.15); }
    .founder-photo { width: 100%; height: 320px; object-fit: cover; object-position: 50% 25%; border-radius: 8px; }
    .green-bar { width: 48px; height: 3px; background: var(--grad); margin: 0 auto 1.5rem; }

    .lead-magnet-bar { background: var(--grad-diag); padding: 3rem 0; position: relative; overflow: hidden; }
    .lead-magnet-headline { font-size: 1.4rem; font-weight: 900; color: #0E1013; margin-bottom: 0.35rem; }
    .lead-magnet-sub { font-size: 0.88rem; color: rgba(14,16,19,0.75); font-weight: 600; }
    .lead-magnet-bar .form-control { border-radius: 100px !important; border: none !important; padding: 0.8rem 1.25rem !important; font-size: 0.85rem !important; }
    .lead-magnet-bar .btn-dark-pill {
      background: #0E1013; color: #fff; border: none; border-radius: 100px; padding: 0.85rem 1.6rem;
      font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
      text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: transform 0.15s;
    }
    .lead-magnet-bar .btn-dark-pill:hover { transform: translateY(-2px); }
    /* Tablet only (iPad portrait/landscape) — keep the side-by-side layout (button
       vertically centered next to the text via the row's align-items-center) but give
       the text more than Bootstrap's stock 66.67%, so the sub-line has real margin
       instead of a hairline fit that risks orphaning the last word on its own line. */
    @media (min-width: 768px) and (max-width: 1024px) {
      .lead-magnet-bar .row > div { margin-bottom: 0.75rem; }
      .lead-magnet-bar .col-lg-8 { flex: 0 0 75%; max-width: 75%; }
      .lead-magnet-bar .col-lg-4 { flex: 0 0 25%; max-width: 25%; }
    }
    /* True mobile — stack full-width so the button sits below the text, left-aligned,
       instead of squeezed beside it. */
    @media (max-width: 767px) {
      .lead-magnet-bar .col-lg-8, .lead-magnet-bar .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
      .lead-magnet-bar .col-lg-4 { text-align: left; }
    }

    #contact { background: var(--bg-2); }
    .contact-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.6rem; }
    .contact-icon { width: 42px; height: 42px; min-width: 42px; background: rgba(150,201,61,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 0.95rem; }
    .contact-lbl { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 0.2rem; }
    .contact-val { font-size: 0.92rem; font-weight: 600; color: var(--text); }
    .contact-val a { color: var(--text); text-decoration: none; }
    .contact-val a:hover { color: var(--green); }
    .coverage-area-link {
      display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem;
      font-size: 0.8rem; font-weight: 600; color: var(--green); text-decoration: none;
    }
    .coverage-area-link i { font-size: 0.75rem; transition: transform 0.15s; }
    .coverage-area-link:hover i { transform: translateX(3px); }
    /* support.php's variant sits inside the hours tile itself, as a footer action under the
       table rather than a separate line below the card — divider + full-width centering makes
       it read as the card's own CTA instead of another table row. */
    .hours-card-link.coverage-area-link {
      display: flex; justify-content: center; margin-top: 1rem; padding-top: 1rem;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    /* Fills the #contact card's dead space below Hours with reinforcement instead of a map:
       what a consultation actually involves, plus the same real awards used in the hero
       trust-bar, right where someone's about to commit to filling out the form. */
    /* Flex column + flex:1 so this footer fills whatever's left of the (JS-equalized) card
       height, and card-trust-bar's margin-top:auto below sinks it flush to the bottom —
       same "grow the spacer, not the target" trick .form-card uses on the form column, so
       the trust row lines up with the consultation form's submit button on the other side. */
    #contact .col-lg-5 .ntpc-card { display: flex; flex-direction: column; }
    .contact-card-footer { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; flex: 1; }
    .mini-steps-label { margin-bottom: 0.75rem; }
    /* Stacked (not wrapped inline) at every width, and clickable — same active/panel pattern as
       .svc-tag — so "what happens next" doubles as a short explanation of each step on click.
       Gradient border (same double-background trick as .support-action-chip) signals these are
       interactive, filling solid on hover/active like the other gradient CTAs on the site. */
    .mini-steps { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.4rem; }
    .mini-step {
      display: flex; align-items: center; gap: 0.75rem; width: 100%; font-family: inherit;
      background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad-diag) border-box;
      border: 2px solid transparent; border-radius: 10px;
      padding: 0.6rem 0.85rem; font-size: 0.88rem; font-weight: 600; color: var(--text); text-align: left;
      cursor: pointer; transition: background 0.15s, color 0.15s;
    }
    .mini-step:hover, .mini-step.active { background: var(--grad-diag); color: #0E1013; }
    .mini-step-num {
      display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 26px;
      border-radius: 50%; background: rgba(150,201,61,0.12); color: var(--green); font-size: 0.8rem; font-weight: 700;
      transition: background 0.15s, color 0.15s;
    }
    .mini-step:hover .mini-step-num, .mini-step.active .mini-step-num { background: rgba(14,16,19,0.15); color: #0E1013; }
    .card-trust-bar { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.06); justify-content: center; }
    /* At narrow widths items no longer fit a centered row without wrapping raggedly (two centered
       items, then one alone). Instead give each badge the same full-width, boxed-row treatment as
       a .mini-step so the two lists in this card read as one consistent, symmetrical rhythm. */
    @media (max-width: 576px) {
      .card-trust-bar { flex-direction: column; align-items: stretch; gap: 0.6rem; }
      .card-trust-bar .trust-item {
        width: 100%; background: var(--bg-2); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
        padding: 0.6rem 0.85rem; font-size: 0.78rem; gap: 0.75rem;
      }
      .card-trust-bar .trust-item i { font-size: 0.95rem; }
    }
    /* Auto width (not 100%) so the two columns hug their content instead of stretching to
       fill whatever card they're dropped into — on the bare support-tile version (no icon
       column narrowing it) a full-width table spread "Remote"/"8AM–6PM" far enough apart
       to look broken. */
    .hours-grid { border-collapse: collapse; margin: 0 auto; }
    /* Monitoring is the last row, so its popover (see .hours-info span below) has nowhere
       to go but past the card's own bottom edge — .ntpc-card's overflow:hidden (there for
       the top-accent-bar hover effect) was clipping it. Popovers are meant to float over
       whatever's below anyway, so let this specific card ignore that clipping. */
    .ntpc-card:has(.hours-grid) { overflow: visible; }
    .hours-grid td { padding: 0.3rem 0; font-size: 0.84rem; }
    .hours-grid td:first-child { color: var(--muted); font-weight: 600; padding-right: 1.5rem; }
    .hours-grid td:last-child { font-weight: 500; }
    /* Holiday note on the Emergency row — a native <details>/<summary> disclosure (same
       no-JS pattern as .security-notice) shrunk to an inline icon so the table stays
       compact by default. The note (span) is taken out of flow with position:absolute so
       opening it never reflows the table — it floats over whatever's below instead of
       pushing "Until 10PM" onto its own line and shoving Monitoring down. */
    .hours-info { display: inline-block; position: relative; margin-left: 0.3rem; }
    .hours-info summary { display: inline-flex; list-style: none; cursor: pointer; color: var(--muted); font-size: 0.85em; vertical-align: middle; }
    .hours-info summary::-webkit-details-marker { display: none; }
    .hours-info summary:hover, .hours-info[open] summary { color: var(--green); }
    .hours-info span {
      /* The two rows sit close enough that an open popover can cover the row below it,
         including that row's own info icon. pointer-events:none lets clicks pass straight
         through to whatever's underneath (see the .hours-info toggle listener in
         site_footer.php) instead of getting swallowed by a note the visitor isn't trying
         to interact with anyway. */
      pointer-events: none;
      position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%);
      width: 240px; padding: 0.6rem 0.8rem; border-radius: 10px;
      background: var(--bg-2); border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 12px 30px -8px rgba(0,0,0,0.5);
      font-size: 0.78em; font-weight: 500; color: var(--muted); line-height: 1.5;
      white-space: normal; text-align: left; z-index: 5;
    }
    #contact .ntpc-card { border-radius: 16px; }
    /* .ntpc-card's site-wide height:100% relies on the row stretching both columns to match —
       fine when both sides are static, but the left card's mini-step detail panel now expands
       and collapses on click, which was dragging the form card's height along with it (and, at
       least visually, leaving dead space in the form card that didn't always look like it reset).
       Decouple the two columns so the contact card can grow/shrink on its own. */
    #contact .row.g-5 { align-items: flex-start; }
    .form-control, .form-select { background: var(--bg-0) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: var(--text) !important; font-size: 0.86rem !important; border-radius: 10px !important; }
    .form-control:focus, .form-select:focus { border-color: var(--green) !important; box-shadow: 0 0 0 3px rgba(150,201,61,0.12) !important; background: var(--bg-0) !important; color: var(--text) !important; }
    .form-control::placeholder { color: var(--muted) !important; }
    /* Chrome/Safari paint autofilled fields with their own forced background (white or pale
       blue) that a plain background-color can't override — the box-shadow inset trick paints
       over it, and the long transition delay stops the browser's own fade-in from flashing the
       native color first. iOS Safari's "Contact Info" AutoFill (name/email/phone — as opposed
       to its password-manager autofill, which the box-shadow trick alone handles fine) has
       needed, per real-device testing here, every one of: -webkit-appearance:none (strips iOS's
       own native control chrome, which can repaint over our box-shadow), the modern unprefixed
       :autofill selector (newer WebKit's real hook, -webkit-autofill is kept for older/Chrome),
       and both the background shorthand and background-color set directly, not just the
       box-shadow layer. */
    /* Kept as its own rule, separate from :autofill below — a browser that doesn't recognize
       one pseudo-class in a comma-separated selector list drops the WHOLE rule, so mixing an
       unsupported selector in here would risk breaking this already-working desktop fix too. */
    .form-control:-webkit-autofill,
    .form-control:-webkit-autofill:hover,
    .form-control:-webkit-autofill:focus,
    .form-control:-webkit-autofill:active {
      -webkit-appearance: none;
      -webkit-box-shadow: 0 0 0 1000px var(--bg-0) inset !important;
      -webkit-text-fill-color: var(--text) !important;
      background: var(--bg-0) !important;
      background-color: var(--bg-0) !important;
      color: var(--text) !important;
      caret-color: var(--text);
      transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
    }
    .form-control:autofill {
      -webkit-appearance: none;
      appearance: none;
      box-shadow: 0 0 0 1000px var(--bg-0) inset !important;
      -webkit-text-fill-color: var(--text) !important;
      background: var(--bg-0) !important;
      background-color: var(--bg-0) !important;
      color: var(--text) !important;
      caret-color: var(--text);
      transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
    }
    .form-select option { background: var(--bg-0); }
    .form-label { font-size: 0.66rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; color: var(--muted) !important; margin-bottom: 0.4rem !important; }
    .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    /* Fills any extra height (e.g. when a sibling column is taller and stretches this one via
       equal-height row) by growing the message textarea, rather than leaving a gap of empty
       space between the fields and the submit button.
       Uses flex-grow (not a height:100% percentage chain) so the card's own equal-height
       stretch from the Bootstrap row keeps working — nesting percentage heights this deep
       silently broke that stretch instead of filling it. */
    .form-card { display: flex; flex-direction: column; }
    .consultation-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 1.5rem; }
    .consultation-form .form-field-message { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    .consultation-form .form-field-message textarea { flex: 1 1 auto; min-height: 84px; resize: vertical; }
    .form-status { margin: 0.75rem 0 0; font-size: 0.86rem; min-height: 1.2em; text-align: center; }
    /* #contact's submit button sits inside a box the same total height as the trust-bar row
       it needs to visually center against (see .card-trust-bar/margin-top:auto) — but that
       height is mostly the (usually-empty) status message below the button, so the button
       itself renders top-heavy within it. Shifting 14px from the status message's reserved
       space to the button's own top margin re-centers the button without changing the box's
       total height, which would otherwise get silently cancelled out by .form-field-message's
       flex-grow absorbing the difference (see .consultation-form). Scoped to #contact only —
       the hero and modal forms sharing .form-submit/.form-status have no such row to match. */
    #contact .form-submit { display: flex; flex-direction: column; }
    #contact .form-submit button { margin-top: 14.34px; }
    #contact .form-submit .form-status { margin-top: -2.34px; }
    .form-status.is-error { color: #e08a8a; }
    .form-status.is-success { color: var(--green); }

    .ntpc-hr { height: 1px; background: linear-gradient(to right, transparent, var(--blue) 15%, var(--green) 50%, var(--blue) 85%, transparent); opacity: 0.35; border: none; margin: 0; }

    footer { background: var(--bg-0); border-top: 1px solid rgba(255,255,255,0.05); padding: 2.75rem 0 0; font-size: 0.78rem; color: var(--muted); }
    footer a { color: var(--muted); text-decoration: none; }
    footer a:hover { color: var(--green); }

    /* Single centered column — matches the centered-text convention the rest of the site uses
       (hero, section leads, card grids), rather than a left-aligned multi-column layout that
       reads as a different design language once you hit the footer. No contact details here on
       purpose: that's what /support is for. */
    .footer-center {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      padding-bottom: 2rem;
    }
    .footer-logo { height: 24px; opacity: 0.65; }
    .footer-blurb { font-size: 0.8rem; line-height: 1.7; margin: 0.9rem 0 1.1rem; max-width: 46ch; }
    .footer-google-badge { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; }
    .footer-google-badge .stars { color: #F5B942; font-size: 0.7rem; letter-spacing: 1px; }
    .footer-google-badge .glabel { font-size: 0.66rem; font-weight: 700; }
    /* Desktop already has Services/Careers/Blog/Support reachable via the fixed util-bar (and
       Services via the main nav) — repeating them here just duplicates nav for no reason. Below
       1024px the util-bar hides (see the util-bar rule above), so this becomes the only way to
       reach them without opening the hamburger menu. Same breakpoint as the util-bar itself. */
    .footer-nav-links { display: none; font-size: 0.78rem; }
    .footer-nav-links a { margin: 0 0.5rem; }
    @media (max-width: 1024px) {
      .footer-nav-links { display: block; }
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.06); padding: 1.1rem 0; text-align: center;
    }
    /* Bootstrap's reboot sets p{margin-bottom:1rem} globally — every paragraph in this block
       zeroes it explicitly and relies on its own margin-bottom instead, so the two lines land
       exactly 0.5rem apart instead of stacking a stray extra 1rem underneath one of them. */
    /* Same var(--muted) the rest of the footer already uses at full opacity — the old
       opacity:0.7 override dimmed it below WCAG AA contrast against the footer background. */
    .footer-fineprint { font-size: 0.66rem; margin: 0 0 0.5rem; }
    /* Lean legal row — just the public-facing docs (Privacy/Cookies/Terms of Use), not the full
       client-paperwork list (MSA/SLA/etc.) that used to sit here — Ashley wanted those off the
       public site entirely. Copyright/license/links all read as one line (wrapping together as
       plain text when it doesn't fit) instead of stacking as separate blocks. */
    .footer-legal-row { font-size: 0.66rem; margin: 0; }
    .footer-legal-row a { margin: 0 0.15rem; }

    /* Below this width the full line no longer fits on one row — rather than let it wrap
       mid-sequence (a lone "Privacy ·" stranded at the end of one line), the legal links break
       onto their own row entirely, dropping the separator dot that would otherwise dangle at
       the start of it. */
    @media (max-width: 767px) {
      .footer-legal-sep { display: none; }
      .footer-legal-links { display: block; margin-top: 0.3rem; }
    }

    .skip-link {
      position: absolute; left: -9999px; top: 0; z-index: 2000;
      background: var(--bg-1); color: var(--text); padding: 0.85rem 1.5rem;
      border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none;
      border: 1px solid var(--line-2, rgba(255,255,255,0.15));
    }
    .skip-link:focus { left: 0; }

    a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--green); outline-offset: 2px;
    }

    #testimonials { background: var(--bg-alt); }
    .testimonial-card { background: var(--bg-2); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 2.5rem; height: 100%; position: relative; overflow: hidden; box-shadow: 0 16px 40px -12px rgba(61,121,189,0.16), 0 6px 18px -6px rgba(150,201,61,0.1); }
    .testimonial-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-rev); }
    .testimonial-stars { color: var(--green); font-size: 0.8rem; margin-bottom: 1.25rem; display: flex; gap: 0.2rem; }
    .testimonial-quote { font-size: 0.94rem; line-height: 1.9; color: var(--text); font-style: italic; margin-bottom: 1.75rem; }
    .testimonial-footer { display: flex; align-items: center; }
    .testimonial-name { font-size: 0.86rem; font-weight: 800; color: var(--text); }

    @media (max-width: 1024px) {
      .site-nav { top: 0; padding: 0 1.25rem; }
      .nav-toggle { display: block; }
      .nav-links { display: none; position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-0); border-bottom: 1px solid rgba(150,201,61,0.12); padding: 0.5rem 1.5rem 1.25rem; max-height: calc(100vh - 64px); overflow-y: auto; }
      .nav-links.open { display: flex; }
      .nav-links li { width: 100%; }
      .nav-links a { display: block; padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
      .nav-links .nav-cta { display: block; text-align: center; margin-top: 0.9rem; padding: 0.7rem 1.2rem; border-bottom: none; }
      .nav-support-item { display: block; }
      .nav-links .nav-support-btn {
        display: block; text-align: center; margin-top: 0.9rem; padding: 0.65rem 1.2rem;
        border: 2px solid #fff; border-radius: 100px; background: transparent;
        color: #fff; font-weight: 700;
        transition: background 0.15s, border-color 0.15s;
      }
      .nav-links .nav-support-btn:hover {
        background: linear-gradient(var(--bg-0), var(--bg-0)) padding-box, var(--grad-diag) border-box;
        border-color: transparent; color: #fff;
      }
      /* Same top clearance as #home — any page whose FIRST section sits directly under
         the fixed nav needs this. Generic section padding below (3.5rem = 56px) is less
         than the 64px fixed nav height on mobile, so without this the section starts
         under the header. support.php's first section is the impersonation banner
         (#support-security), not its hero, since the banner leads the page. */
      #home, #careers-hero, #apply-hero, #change-order-hero, #new-user-hero, #tax-exempt-hero, #support-security, #blog-hero, #quiz-hero, #areas-hero, #submission-thanks {
        padding: 110px 0 3rem;
      }
      /* #support-security is a compact one-line banner, not a hero — override the shared
         3rem bottom above so it doesn't stack with #support-hero's own top padding. */
      #support-security { padding-bottom: 0.5rem; }
      section { padding: 3.5rem 0; }
      .row.mb-5 { margin-bottom: 2rem !important; }
      .row.g-5, .row.g-4 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
      h2.section-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
      .ntpc-card { padding: 1.85rem; }
      .card-icon { margin-bottom: 1rem; }
      .industry-item { padding: 1.5rem; }
      .testimonial-card { padding: 1.85rem; }
      .quote-highlight { padding: 2rem; }
      .picture-this { padding: 2rem 1.5rem; }
      .founder-card { padding: 2.25rem 1.5rem; }
      .case-body-inner { padding: 1.85rem; }
      /* "20m / 3d" is the longest stat value — at 2.8rem it doesn't fit this narrower
         padding and wraps to two lines while every other stat fits fine. Shrink all of
         them together so the row stays visually consistent instead of just this one. */
      .case-stat { font-size: 2.3rem; white-space: nowrap; }
      .about-badge { border-radius: 12px; font-size: 0.62rem; letter-spacing: 0.08em; padding: 0.5rem 0.85rem; }
      .lead-magnet-headline { font-size: 1.15rem; }
      .util-mobile-only { display: block; }
      .hero-eyebrow { font-size: 0.62rem; letter-spacing: 0.12em; }

      /* Tap-to-call icon that replaces the phone-number list item — sits next to the
         hamburger toggle instead of buried in the menu. */
      .nav-mobile-actions { display: flex; align-items: center; gap: 0.25rem; }
      .nav-call-mobile { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--text); font-size: 1.05rem; text-decoration: none; }
      .nav-call-mobile:hover { color: var(--green); }

      /* Collapsible "More" section — replaces the flat Support/Careers/Blog/Forms
         list with one toggle, so the primary mobile menu is just the marketing anchors. */
      .nav-more-toggle {
        width: 100%; display: flex; align-items: center; justify-content: space-between;
        background: none; border: none; font-family: inherit; color: var(--muted);
        padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
        font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
      }
      .nav-more-toggle i { transition: transform 0.2s; }
      .nav-more-item.open .nav-more-toggle { color: var(--green); }
      .nav-more-item.open .nav-more-toggle i { transform: rotate(180deg); }
      .nav-more-panel { list-style: none; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; padding-left: 0.75rem; margin: 0; }
      .nav-more-item.open .nav-more-panel { max-height: 400px; }
      .nav-more-panel a { display: block; padding: 0.75rem 0 !important; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: none !important; color: var(--muted); }
      /* "Forms" reads as a peer of Support/Careers/Blog (same icon, same row style),
         not a link — it's a group header, so no href, just matching visual weight. */
      .nav-more-forms-label {
        display: flex; align-items: center; gap: 0.4rem;
        padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
        font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
        color: var(--muted);
      }
      .nav-more-forms-label i { font-size: 0.85rem; width: 1rem; text-align: center; }
      /* Change Order / New User / Tax Exempt nest under "Forms" — indented, no icon,
         so the hierarchy (Forms is a parent, these are its children) reads visually. */
      .nav-more-sub a { padding-left: 1.4rem !important; font-size: 0.68rem !important; color: var(--muted); opacity: 0.85; }
      .num-timeline::before { left: 21px; }
      .num-card { padding: 1.1rem 0; gap: 1.1rem; }
    }

/* ── Minimal header for /legal/ pages (logo only — no marketing nav) ── */
.legal-minimal-header { padding: 1.5rem 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.legal-minimal-header .logo img { height: 34px; }
@media (max-width: 576px) { .legal-minimal-header { padding: 1.25rem 1.25rem; } }

/* ── Shared /legal/ document page chrome ── */
.legal-hero { max-width: 900px; margin: 0 auto; padding: 3.5rem 2rem 2.5rem; }
.legal-hero .section-label { margin-bottom: 0.75rem; }
.legal-hero h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 900; margin-bottom: 0.75rem; }
.legal-updated { font-size: 0.78rem; color: var(--muted); margin-bottom: 0; }
.legal-wrap { max-width: 900px; margin: 0 auto; padding: 0 2rem 6rem; }
.legal-doc-body { font-size: 0.92rem; line-height: 1.85; color: var(--muted); }
.legal-doc-body h1, .legal-doc-body h2, .legal-doc-body h3, .legal-doc-body h4 { color: var(--text); font-weight: 700; margin: 1.75rem 0 0.75rem; }
.legal-doc-body h3 { font-size: 1.05rem; }
.legal-doc-body h4 { font-size: 0.94rem; }
.legal-doc-body p { margin: 0 0 1rem; }
.legal-doc-body ul, .legal-doc-body ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.legal-doc-body li { margin-bottom: 0.35rem; }
.legal-doc-body a { color: #6FA3DD; } /* var(--blue) is 4.24:1 on --bg-0, just under WCAG AA's 4.5:1 for body text; this passes at 7.22:1 */
.legal-doc-body table { border-collapse: collapse; width: 100%; margin: 1rem 0; display: block; overflow-x: auto; }
.legal-doc-body th, .legal-doc-body td { border: 1px solid rgba(255,255,255,0.1); padding: 0.6rem 0.9rem; font-size: 0.86rem; }
.legal-doc-body th { background: var(--bg-2); color: var(--text); font-weight: 700; }
.legal-doc-body blockquote { margin: 0 0 1rem; padding: 0.1rem 0 0.1rem 1rem; border-left: 2px solid rgba(255,255,255,0.14); color: var(--muted); }

/* Sectioned/TOC pages: sla, rts, it-policy, handbook */
.legal-layout { max-width: 1240px; margin: 0 auto; padding: 0 2rem 6rem; display: grid; grid-template-columns: 260px 1fr; gap: 3.5rem; align-items: start; }
.legal-toc { position: sticky; top: 2rem; max-height: calc(100vh - 4rem); overflow-y: auto; }
.legal-toc-title { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); padding: 0 0.9rem 0.75rem; }
.legal-toc a { display: block; padding: 0.6rem 0.9rem; margin-bottom: 1px; border-left: 2px solid transparent; font-size: 0.84rem; color: var(--muted); text-decoration: none; line-height: 1.4; transition: background-color .15s, border-color .15s, color .15s; border-radius: 0 8px 8px 0; }
.legal-toc a:hover { background: var(--bg-1); color: var(--text); }
.legal-toc a.active { background: rgba(150,201,61,.10); border-left-color: var(--green); color: var(--green); font-weight: 600; }
.legal-content { min-width: 0; }
.legal-doc-section { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.06); scroll-margin-top: 1.5rem; }
.legal-doc-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.legal-doc-section h2 { font-size: 1.4rem; margin: 0 0 0.5rem; font-weight: 900; }
.legal-mobile-toc { display: none; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 0; padding: 0 1.25rem 4rem; }
  .legal-toc { display: none; }
  .legal-mobile-toc { display: block; position: sticky; top: 64px; z-index: 5; background: var(--bg-0); padding: 0.75rem 0; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .legal-mobile-toc select { width: 100%; background: var(--bg-1); color: var(--text); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.7rem 0.9rem; font-family: 'Montserrat', sans-serif; font-size: 0.86rem; }
  .legal-hero { padding: 96px 1.25rem 2rem; }
  .legal-wrap { padding: 0 1.25rem 4rem; }
}

/* Blog listing + detail — cards use the .ntpc-card hover recipe (top-edge gradient accent,
   lift on hover); post body reuses .legal-doc-body wholesale for typography (docs/BLOG contract
   with ntpctechadmin) rather than re-defining heading/list/table/blockquote rules a second time. */
#blog-hero .section-lead { margin-left: auto; margin-right: auto; }
.blog-wrap { max-width: 1240px; margin: 0 auto; padding: 0 2rem 6rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.blog-card {
  display: flex; flex-direction: column;
  background: var(--bg-1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 0 rgba(150,201,61,0.06), 0 20px 50px -12px rgba(61,121,189,0.18), 0 8px 24px -8px rgba(150,201,61,0.1);
  transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
}
.blog-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); opacity: 0; transition: opacity 0.25s; z-index: 1; }
.blog-card:hover::before { opacity: 1; }
.blog-card:hover { border-color: rgba(150,201,61,0.3); transform: translateY(-4px); box-shadow: 0 28px 60px -12px rgba(61,121,189,0.28), 0 12px 30px -8px rgba(150,201,61,0.18); }
.blog-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--bg-2); }
.blog-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.75rem; }
.blog-card-title { font-size: 1.05rem; font-weight: 800; line-height: 1.35; margin-bottom: 0.85rem; color: var(--text); }
.blog-card-excerpt { font-size: 0.86rem; color: var(--muted); line-height: 1.8; flex: 1; }
.blog-empty { text-align: center; color: var(--muted); padding: 4rem 0; }
.blog-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 3.5rem; }
.blog-pagination a, .blog-pagination span {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.65rem 1.4rem; border-radius: 100px; text-decoration: none; color: var(--muted);
  border: 1px solid rgba(255,255,255,0.1);
}
.blog-pagination a:hover { color: var(--green); border-color: rgba(150,201,61,0.3); }
.blog-pagination .disabled { opacity: 0.35; pointer-events: none; }
.blog-pagination .current { color: var(--text); }
@media (max-width: 991px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-wrap { padding: 0 1.25rem 4rem; }
}

/* blog-post.php uses the full site_head.php nav (fixed util-bar + site-nav = 96px tall), not
   legal_head.php's minimal logo-only header that .legal-hero's smaller padding was tuned for —
   this needs the same fixed-nav clearance as #home/#careers-hero/etc. get from the generic
   `section{padding:8rem 0}` rule, since .blog-post-hero is a plain div, not a <section>, and never
   inherited that. */
.blog-post-hero { max-width: 900px; margin: 0 auto; padding: 150px 2rem 2.5rem; }
.blog-post-back { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--muted); text-decoration: none; margin-bottom: 1.25rem; transition: color 0.2s; }
.blog-post-back:hover { color: var(--green); }
.blog-post-back-bottom { display: block; text-align: center; margin: 2.5rem 0 0; }
.blog-post-hero .section-label { margin-bottom: 0.75rem; }
.blog-post-hero h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 900; margin-bottom: 0.75rem; }
.blog-post-meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 0; display: flex; align-items: center; gap: 0.5rem; }
.blog-post-author-photo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blog-post-divider { width: 100%; height: 5px; border-radius: 100px; background: var(--grad); margin-top: 1.75rem; }
.blog-post-wrap { max-width: 900px; margin: 0 auto; padding: 2rem 2rem 6rem; }
.blog-post-cta {
  max-width: 900px; margin: 3rem auto 0; padding: 3rem 2.5rem; border-radius: 16px;
  background: var(--bg-1); border: 1px solid rgba(255,255,255,0.06); text-align: center;
  box-shadow: 0 20px 50px -12px rgba(61,121,189,0.18), 0 8px 24px -8px rgba(150,201,61,0.1);
}
.blog-post-cta h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 900; margin-bottom: 0.75rem; }
.blog-post-cta p { color: var(--muted); font-size: 0.95rem; margin: 0 auto 1.75rem; max-width: 480px; }
.blog-post-cta .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 576px) {
  .blog-post-hero { padding: 110px 1.25rem 2rem; }
  .blog-post-wrap { padding: 1.5rem 1.25rem 4rem; }
  .blog-post-cta { padding: 2.25rem 1.5rem; }
}

/* Calendly popup widget (widget.css, loaded on index.php) is injected straight into our page's
   DOM by widget.js — not inside the booking iframe — so it's ours to restyle. Two real bugs in
   Calendly's own CSS, not ours: (1) .calendly-overlay defaults to a near-black tint at only 40%
   opacity, which barely reads as a scrim against our already-dark theme, making the page behind
   it look untouched; (2) their own mobile media query sets max-height:none on .calendly-popup,
   but the desktop rule sets max-height:700px!important — an !important rule always beats a
   non-important one regardless of media query, so mobile is stuck at that 700px cap and the
   popup stops short of the viewport bottom. Both need !important here for the same reason: to
   beat widget.css's rules regardless of its load order relative to ours. */
.calendly-overlay { background-color: rgba(14, 16, 19, 0.92) !important; }
/* The popup's actual content (both the event-details panel and the date picker) is a single
   cross-origin iframe pointing at calendly.com — our CSS can't reach anything inside it, only
   Calendly's own url params (background_color/text_color/primary_color) can, and those only
   partially applied to their redesigned date picker, leaving a mismatched dark/light split.
   Rather than fight that, site_footer.php now leaves Calendly on its own native light theme
   (uniform, legible) and this frames it: a thick brand-gradient border + heavy shadow so the
   card visually separates from the dark backdrop instead of blending into it. */
.calendly-overlay .calendly-popup {
  border: 6px solid transparent !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: var(--grad-diag) !important;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,0.8) !important;
}
@media (max-width: 975px) {
  /* Both rules are !important with equal (0,0,2,0) specificity, so without this the tie goes
     to whichever <link> the browser parsed last — which is widget.css, since it's loaded near
     the bottom of index.php, after this stylesheet. Repeating the class doubles our specificity
     to (0,0,4,0) so we win outright instead of depending on load order. */
  .calendly-overlay.calendly-overlay .calendly-popup.calendly-popup { max-height: none !important; border-width: 4px !important; border-radius: 0 !important; }
}