: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; }
    /* 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);
    }
    .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: 768px) { .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; }
    @media (max-width: 991px) { .section-lead { max-width: 100%; } }
    .row.mb-5 { margin-bottom: 4rem !important; }

    #home { padding: 150px 0 5rem; background: var(--bg-0); position: relative; overflow: hidden; }
    #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); }

    .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: 0.64rem; 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.35rem; font-weight: 900; letter-spacing: 0.01em; color: var(--text); }
      .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: 768px) { .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); }
    @media (max-width: 576px) {
      #services .vertical-tags { display: grid; grid-template-columns: 1fr 1fr; }
      #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: 768px) { .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; padding: 1.1rem 2rem; background: var(--bg-alt); border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
    .case-resolved { color: var(--green); display: flex; align-items: center; gap: 0.35rem; }
    .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: 1.02rem; 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); }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
    .faq-item.open .faq-answer { max-height: 260px; }
    .faq-answer-inner { padding: 0 2.25rem 2rem; font-size: 0.9rem; color: var(--muted); line-height: 1.85; }

    /* 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; }
    /* #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-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; }
    /* Impersonation warning on the SOS panel — sits between the intro line and the download
       buttons so it's seen before anyone acts, not after. Orange (var(--orange)) reads as
       "caution" without the alarm-red of a full error state. */
    .security-notice {
      display: flex; align-items: flex-start; gap: 1rem; text-align: left;
      max-width: 640px; margin: 1.75rem auto 0; padding: 1.5rem 1.75rem;
      background: rgba(229,137,61,0.08); border: 1px solid rgba(229,137,61,0.3);
      border-radius: 16px;
    }
    .security-notice-icon {
      flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
      background: rgba(229,137,61,0.15); color: var(--orange);
      display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    }
    .security-notice h3 { font-size: 0.95rem; margin-bottom: 0.4rem; color: var(--text); }
    .security-notice p { font-size: 0.85rem; color: var(--muted); margin: 0; line-height: 1.7; }
    .security-notice p a { color: var(--orange); font-weight: 700; }
    @media (max-width: 576px) {
      .security-notice { flex-direction: column; }
    }
    .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; }
    .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; }
    .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: 480px; }
    .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); }

    #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); }
    .hours-grid { width: 100%; border-collapse: collapse; }
    .hours-grid td { padding: 0.3rem 0; font-size: 0.84rem; }
    .hours-grid td:first-child { color: var(--muted); font-weight: 600; }
    .hours-grid td:last-child { text-align: right; font-weight: 500; }
    #contact .ntpc-card { border-radius: 16px; }
    .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; }
    .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; }
    .form-status { margin: 0.75rem 0 0; font-size: 0.86rem; min-height: 1.2em; }
    .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.25rem 0; text-align: center; font-size: 0.78rem; color: var(--muted); }
    footer a { color: var(--muted); text-decoration: none; }
    footer a:hover { color: var(--green); }
    footer img { height: 26px; opacity: 0.65; margin-bottom: 0.75rem; }
    /* 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.68rem; }
    /* Lean legal-links 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. */
    .footer-legal-links { margin-top: 0.9rem; font-size: 0.68rem; line-height: 1.9; }
    .footer-legal-links a { margin: 0 0.15rem; }

    .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;
    }

    .float-google-badge {
      position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 900;
      background: var(--bg-1); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
      padding: 0.85rem 1.1rem; box-shadow: 0 12px 32px rgba(0,0,0,0.45);
      display: flex; align-items: center; gap: 0.65rem;
    }
    .float-google-badge .g-icon { font-size: 1.3rem; }
    .float-google-badge .stars { color: #F5B942; font-size: 0.72rem; letter-spacing: 1px; }
    .float-google-badge .glabel { font-size: 0.68rem; color: var(--muted); font-weight: 700; }
    @media (max-width: 768px) { .float-google-badge { display: none; } }

    #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: 768px) {
      .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 hero section is the first
         thing under the fixed nav needs this, not just the homepage. Generic
         section padding below (3.5rem = 56px) is less than the 64px fixed nav
         height on mobile, so without this the hero starts under the header. */
      #home, #careers-hero, #apply-hero, #change-order-hero, #new-user-hero, #tax-exempt-hero, #support-hero, #blog-hero {
        padding: 110px 0 3rem;
      }
      .lead-magnet-bar .row > div { margin-bottom: 0.75rem; }

      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; }
      .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-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; }
.blog-post-featured-img { width: 100%; max-width: 900px; margin: 0 auto; display: block; border-radius: 8px; aspect-ratio: 16/9; object-fit: cover; }
.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; }
}