/* Keyboard users land here first; visually hidden until focused. */
    .skip-link {
      position: absolute; left: -9999px; top: 0; z-index: 300;
      background: #fff; color: #003087; font-weight: 700;
      padding: .7rem 1.1rem; border-radius: 0 0 4px 0;
      box-shadow: 0 2px 12px rgba(6,16,40,.25);
    }
    .skip-link:focus { left: 0; }

    :root {
      --ink: #ffffff;
      --ink-2: #f6f7f9;
      --ink-3: #ffffff;
      --line: rgba(15,23,42,.09);
      --line-2: rgba(15,23,42,.16);
      --text: #16191f;
      --muted: #5b6472;
      --brand: #003087;
      --brand-hi: #003087;
      --brand-soft: rgba(0,48,135,.08);
      --steel: #16191f;
      --steel-2: #1d222b;
      --steel-line: rgba(255,255,255,.09);
      --safety: #ff7a29;
      --safety-deep: #c2410c;
      --font-d: 'Oswald', sans-serif;
      --font-b: 'Inter', system-ui, sans-serif;
      --font-m: 'Spline Sans Mono', ui-monospace, monospace;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--ink);
      color: var(--text);
      font-family: var(--font-b);
      font-weight: 400;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    .shell { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
    .accent { color: var(--brand-hi); }

    /* dev banner */
    .dev-banner {
      position: relative; z-index: 60;
      background: #eef3fb;
      border-bottom: 1px solid rgba(0,48,135,.25);
      color: #002570;
      font-family: var(--font-m);
      font-size: .68rem; letter-spacing: .08em;
      text-align: center; padding: .45rem 1rem;
    }
    .dev-banner a { text-decoration: underline; color: #001a58; }
    .dev-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-hi); margin-right: .35rem; animation: blink 1.6s infinite; }
    @keyframes blink { 50% { opacity: .25; } }

    /* ============ NAV ============ */
    .nav {
      position: sticky; top: 0; z-index: 50;
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 106px; gap: 1rem; }

    /* Every button reaches the 44px minimum touch target on phones. */
    @media (max-width: 1023px) {
      .btn { min-height: 44px; }
      .btn-lg { min-height: 48px; }
    }


    .wordmark { display: inline-flex; align-items: center; }
    .wordmark img { height: 52px; width: auto; }
    @media (min-width: 1024px) { .wordmark img { height: 58px; } }
    .nav-links { display: none; gap: 1.8rem; }
    .nav-links a { font-size: 1rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); transition: color .2s; }
    .nav-links a:hover { color: var(--brand-hi); }
    .nav-cta { display: flex; align-items: center; gap: .8rem; }
    /* Same "breath" the other racking sites' nav phone runs (ported from DC):
       gentle opacity+scale cycle, pauses at full emphasis on hover. */
    .nav-phone { display: none; align-items: center; gap: .45rem; font-family: var(--font-m); font-size: .98rem; font-weight: 600; color: var(--text); transition: color .2s;
      animation: phone-breath 2.4s ease-in-out infinite; transform-origin: center; }
    .nav-phone:hover { color: var(--brand-hi); animation-play-state: paused; opacity: 1; transform: scale(1.07); }
    @keyframes phone-breath {
      0%, 100% { opacity: .65; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.07); }
    }
    .nav-phone svg { color: var(--brand-hi); }
    /* 44x44 minimum touch target — was 28px tall and awkward to hit. */
    .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; min-width: 44px; min-height: 44px; flex-shrink: 0; }
    .nav-burger span { width: 22px; height: 2px; background: var(--text); transition: all .25s; }
    .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* The panel is taller than the screen (24 links), so it must scroll on its
       own — previously it ran off the bottom with no way to reach the last
       items. 106px is the sticky header height. */
    .nav-mobile {
      display: none; flex-direction: column; gap: .25rem;
      padding: 1rem clamp(1rem,4vw,2.5rem) 2rem;
      border-top: 1px solid var(--line);
      max-height: calc(100svh - 106px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      background: #fff;
    }
    .nav-mobile.open { display: flex; }
    .nav-mobile > a { display: block; padding: .7rem 0; font-weight: 600; color: var(--muted); min-height: 44px; line-height: 1.65; }
    /* `color: inherit` here picked up the menu's dark link colour, so the Free
       Estimate button rendered near-black text on the navy fill. */
    .nav-mobile > a.btn { margin-top: .75rem; text-align: center; min-height: 48px; }
    .nav-mobile > a.btn-solid { color: #fff; }
    .nav-mobile > a.btn-ghost { color: var(--text); }
    @media (min-width: 1024px) {
      .nav-links { display: flex; }
      .nav-phone { display: inline-flex; }
      .nav-burger { display: none; }
      /* breathing room between the phone and the Free Estimate button */
      .nav-cta { gap: 1.7rem; }
    }

    /* ============ BUTTONS ============ */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
      font-weight: 700; font-size: .9rem; letter-spacing: .02em;
      padding: .8rem 1.5rem; border-radius: 10px;
      transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
    }
    .btn-sm { padding: .55rem 1rem; font-size: .8rem; }
    .btn-lg { padding: 1rem 1.9rem; font-size: 1rem; }
    .btn-solid { background: var(--brand); color: #fff; box-shadow: 0 8px 26px rgba(0,48,135,.3);
      position: relative; overflow: hidden; }
    .btn-solid:hover { background: #002570; transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0,48,135,.35); }
    /* Shine sweep ported from certifiedlabelingsolutions.com's Request a Sample
       button: a diagonal white glint crosses the button quickly, then rests for
       the remainder of the 5s cycle. Testing on Delaware before the other sites. */
    .btn-solid::after {
      content: ""; pointer-events: none; position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.55), transparent 58%);
      transform: translateX(-130%);
      animation: btn-sweep 5s ease-in-out infinite;
    }
    @keyframes btn-sweep {
      0% { transform: translateX(-130%); }
      12% { transform: translateX(130%); }
      100% { transform: translateX(130%); }
    }
    .btn-ghost { background: rgba(15,23,42,.04); border: 1px solid var(--line-2); color: var(--text); font-family: var(--font-m); }
    .btn-ghost:hover { border-color: var(--brand-hi); color: var(--brand-hi); transform: translateY(-2px); }

    /* ============ DARK STEEL SECTIONS ============ */
    .section-dark {
      position: relative;
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        var(--steel);
      background-size: 48px 48px, 48px 48px, auto;
      color: #e8eaee;
      border-block: 0;
    }
    .section-dark.hazard::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
      background: repeating-linear-gradient(-45deg, var(--safety) 0 12px, #101318 12px 24px);
    }
    .section-dark .kicker { color: var(--safety); }
    .section-dark :is(.sec-head h2, h3) { color: #fff; }
    .section-dark .sec-sub { color: #9aa3b2; }
    .section-dark .accent { color: var(--safety); }
    .section-dark .view-all { color: var(--safety); }

    ::selection { background: var(--safety); color: #101318; }
    :focus-visible { outline: 2px solid var(--safety-deep); outline-offset: 2px; }
    .nav-links > a, .nav-dd-trigger {
      background-image: linear-gradient(var(--safety-deep), var(--safety-deep));
      background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
      transition: color .2s, background-size .25s;
      padding-bottom: 2px;
    }
    .nav-links > a:hover, .nav-dd:hover > .nav-dd-trigger { background-size: 100% 2px; }

    /* dark-section variants of shared components */
    .section-dark .bento-card { border-color: var(--steel-line); }
    .section-dark .bento-card:hover { border-color: var(--safety); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
    .section-dark .bento-card img { filter: saturate(.75); }
    .section-dark .bento-idx, .section-dark .bento-go { color: var(--safety); }
    .section-dark .steps { position: relative; }
    @media (min-width: 900px) {
      .section-dark .steps::before {
        content: ''; position: absolute; top: 3.6rem; left: 4%; right: 4%;
        border-top: 1px dashed rgba(255,255,255,.16);
      }
    }
    .section-dark .step { background: var(--steel-2); border-color: var(--steel-line); }
    .section-dark .step:hover { border-color: rgba(255,122,41,.5); box-shadow: 0 14px 34px rgba(0,0,0,.4); }
    .section-dark .step-n { -webkit-text-stroke-color: rgba(255,122,41,.65); }
    .section-dark .step p { color: #9aa3b2; }
    .section-dark .step-line { background: linear-gradient(to right, transparent, var(--safety)); }
    .section-dark .side-box { background: var(--steel-2); border-color: var(--steel-line); }
    .section-dark .side-box h3 { color: var(--safety); }
    .section-dark .glance-row { border-color: var(--steel-line); }
    .section-dark .glance-row span { color: #9aa3b2; }
    .section-dark .glance-row b { color: #fff; }
    .section-dark .feat-list li { color: #e8eaee; }
    .section-dark .rich { color: #b9c0ca; }

    /* ============ HERO ============ */
    .hero { position: relative; min-height: calc(100svh - 100px); display: flex; align-items: center; overflow: hidden; }
    /* Static poster of the assembled rack. Shown on mobile/reduced-motion, and as an
       instant placeholder on desktop until the live 3D canvas paints over it. Source
       order keeps stacking correct: poster -> canvas -> vignette -> hero-content. */
    .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
    /* The canvas dissolves in over the static poster rather than replacing it in
       one frame. Even with the poster matched to the scene's opening state, a
       hard swap is visible; a short fade absorbs any residual difference. */
    #rack-canvas {
      position: absolute; inset: 0; width: 100%; height: 100%;
      opacity: 0; transition: opacity .9s ease-out;
    }
    #rack-canvas.live { opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
      #rack-canvas { transition: none; }
    }
    .hero-vignette {
      position: absolute; inset: 0; pointer-events: none;
      background:
        linear-gradient(100deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.58) 30%, rgba(255,255,255,.22) 48%, transparent 60%),
        linear-gradient(to top, var(--ink) 0%, transparent 16%);
    }
    /* Mobile: the text column spans full width over the poster, so the left-to-right
       whitening isn't enough. Whiten top-down instead, letting the rack read below the copy. */
    @media (max-width: 1023px) {
      .hero-vignette {
        background:
          linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 40%, rgba(255,255,255,.45) 68%, rgba(255,255,255,.12) 100%);
      }
    }
    /* Tap-to-activate 3D chip — mobile/tablet only; desktop boots the 3D automatically.
       Sits in the content flow under the CTAs so it's always above the fold. */
    .hero-3d {
      display: none; align-items: center; gap: .45rem;
      margin: 1rem 0 1.4rem;
      padding: .55rem .95rem; border-radius: 999px; cursor: pointer;
      background: rgba(255,255,255,.94); color: var(--blue, #003087);
      border: 1px solid rgba(0,48,135,.35);
      font-family: var(--font-d); font-weight: 600; font-size: .72rem;
      letter-spacing: .09em; text-transform: uppercase;
      box-shadow: 0 2px 10px rgba(6,16,40,.18);
    }
    .hero-3d:disabled { opacity: .7; cursor: default; }
    .hero-3d[hidden] { display: none !important; }
    @media (max-width: 1023px) { .hero-3d { display: inline-flex; } }
    /* wide hero: text sits left, clear of the rack — nav logo shares the same
       left plane so the wordmark aligns directly above the headline. */
    .hero .shell, .nav .shell {
      max-width: 1680px;
    }
    /* The extra 1cm exists to line the nav wordmark up with the hero headline
       on desktop. Applied at every width it added ~38px of LEFT-only padding on
       a 390px phone (~53px total vs ~16px on the right), which shoved the header
       row past the viewport and caused sitewide horizontal scroll. Desktop only. */
    @media (min-width: 1024px) {
      .hero .shell, .nav .shell {
        padding-left: calc(clamp(1rem, 4vw, 2.5rem) + 1cm);
      }
    }
    .hero-content { position: relative; z-index: 2; width: 100%; padding-top: 4rem; padding-bottom: 5rem; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: .6rem;
      font-family: var(--font-m); font-size: .72rem; font-weight: 600;
      letter-spacing: .18em; text-transform: uppercase; color: var(--brand-hi);
      border: 1px solid rgba(0,48,135,.35); background: rgba(0,48,135,.07);
      padding: .5rem .95rem; border-radius: 999px; margin-bottom: 1.6rem;
    }
    .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-hi); box-shadow: 0 0 0 0 rgba(0,48,135,.5); animation: pulse 2s infinite; }
    @keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(0,48,135,0); } 100% { box-shadow: 0 0 0 0 rgba(0,48,135,0); } }
    .hero-h1 {
      font-size: clamp(2.9rem, 7.6vw, 6rem);
      line-height: .98;
      text-transform: uppercase; margin-bottom: 1.6rem;
    }
    .hero-h1 span { display: block; }
    .hero-h1 .accent { text-shadow: 0 0 50px rgba(0,48,135,.25); }
    .hero-sub { max-width: 34rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); margin-bottom: 2.2rem; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
    .hero-spec {
      display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 3rem;
      font-family: var(--font-m); font-size: .64rem; letter-spacing: .14em;
      color: rgba(91,100,114,.75);
    }
    .hero-spec span { border-left: 2px solid rgba(0,48,135,.5); padding-left: .7rem; }
    /* CAD dimension callouts over the 3D rack (desktop only, clickable) */
    .hero-callouts { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
    @media (min-width: 1024px) { .hero-callouts { display: block; } }
    .callout {
      /* slim CAD marker: pulsing anchor dot + hairline leader + frosted tag.
         The dot is pinned to its 3D part every frame (updateCallouts in the
         hero script projects world coords → screen %). */
      position: absolute; display: inline-flex; align-items: center; gap: .4rem;
      transform: translate(var(--cx, -4px), -50%);
      font-family: var(--font-m); font-size: .6rem; font-weight: 600; letter-spacing: .12em;
      color: #2e3949; background: none; border: 0; padding: 0;
      opacity: 0; animation: callout-in .6s ease forwards;
      pointer-events: auto; cursor: pointer;
    }
    .callout .co-txt {
      background: rgba(255,255,255,.85); border: 1px solid rgba(13,27,54,.2);
      border-radius: 3px; padding: .3rem .55rem; white-space: nowrap;
      backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15);
      box-shadow: 0 3px 14px rgba(13,27,54,.13);
      transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
    }
    .callout:hover .co-txt, .callout:focus-visible .co-txt {
      background: rgba(255,255,255,.94); color: var(--text);
      border-color: var(--safety-deep); box-shadow: 0 6px 20px rgba(194,65,12,.2);
    }
    .callout[data-side="left"] { flex-direction: row-reverse; --cx: calc(-100% + 4px); }
    .callout:nth-child(1) { animation-delay: 6.6s; }
    .callout:nth-child(2) { animation-delay: 6.9s; }
    .callout:nth-child(3) { animation-delay: 7.2s; }
    .callout:nth-child(4) { animation-delay: 7.5s; }
    .callout:nth-child(5) { animation-delay: 7.8s; }
    .callout:nth-child(6) { animation-delay: 8.1s; }

    /* inspect mode: hero copy, callouts and the text-legibility vignette step aside */
    .hero.inspecting :is(.hero-content, .scroll-cue, .hero-callouts, .hero-vignette) {
      opacity: 0; pointer-events: none; transition: opacity .45s ease;
    }
    .hero :is(.hero-content, .scroll-cue, .hero-callouts, .hero-vignette) { transition: opacity .45s ease; }

    /* inspector panel */
    .inspector {
      position: absolute; z-index: 4; top: 50%; right: clamp(1rem, 4vw, 3.5rem);
      transform: translateY(-50%) translateX(14px);
      width: min(400px, 34vw);
      background: var(--steel);
      border: 1px solid var(--steel-line); border-radius: 16px;
      padding: 1.6rem 1.6rem 4.4rem; color: #e8eaee;
      box-shadow: 0 30px 80px rgba(10,13,18,.45);
      opacity: 0; transition: opacity .4s ease .25s, transform .4s ease .25s;
    }
    .inspector::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
      border-radius: 16px 16px 0 0;
      background: repeating-linear-gradient(-45deg, var(--safety) 0 12px, #101318 12px 24px);
    }
    .inspector.open { opacity: 1; transform: translateY(-50%) translateX(0); }
    .inspector .kicker { color: var(--safety); margin-bottom: .5rem; }
    .inspector h2 { font-family: var(--font-d); font-weight: 600; font-size: 1.7rem; letter-spacing: .01em; text-transform: uppercase; color: #fff; margin-bottom: .7rem; }
    .insp-body { font-size: .88rem; line-height: 1.6; color: #b6bdc9; margin-bottom: 1.1rem; }
    .insp-specs { margin-bottom: 1.3rem; }
    .inspector .glance-row { border-color: var(--steel-line); padding: .45rem 0; font-size: .82rem; }
    .inspector .glance-row span { color: #8d95a3; }
    .inspector .glance-row b { color: #fff; }
    .insp-close {
      position: absolute; top: .9rem; right: .9rem; z-index: 2;
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,.06); border: 1px solid var(--steel-line);
      color: #cdd3dd; font-size: 1.25rem; line-height: 1; cursor: pointer;
      transition: border-color .2s, color .2s;
    }
    .insp-close:hover { border-color: var(--safety); color: var(--safety); }
    .insp-nav {
      position: absolute; left: 0; right: 0; bottom: 0;
      display: flex; align-items: center; justify-content: space-between;
      padding: .8rem 1.6rem; border-top: 1px solid var(--steel-line);
      font-family: var(--font-m); font-size: .66rem; letter-spacing: .12em; color: #8d95a3;
    }
    .insp-nav button {
      background: none; border: 0; cursor: pointer; padding: .3rem .2rem;
      font-family: var(--font-m); font-size: .68rem; font-weight: 600; letter-spacing: .12em;
      color: #cdd3dd; transition: color .2s;
    }
    .insp-nav button:hover { color: var(--safety); }
    @media (max-width: 1023px) { .inspector { display: none; } }
    .callout i {
      width: 20px; height: 1px; position: relative; flex-shrink: 0;
      background: linear-gradient(90deg, var(--safety-deep), rgba(0,48,135,.18));
    }
    .callout[data-side="left"] i { background: linear-gradient(270deg, var(--safety-deep), rgba(0,48,135,.18)); }
    .callout i::before {
      content: ''; position: absolute; left: -3.5px; top: -3px;
      width: 7px; height: 7px; border-radius: 50%; background: var(--safety-deep);
      box-shadow: 0 0 0 2px rgba(255,255,255,.75);
      animation: co-pulse 2.8s ease-out infinite;
    }
    .callout[data-side="left"] i::before { left: auto; right: -3.5px; }
    @keyframes co-pulse {
      0% { box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 0 2px rgba(194,65,12,.4); }
      60% { box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 0 9px rgba(194,65,12,0); }
      100% { box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 0 9px rgba(194,65,12,0); }
    }
    @keyframes callout-in { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .callout { animation: none; opacity: 1; } .callout i::before { animation: none; } }
    .scroll-cue { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); width: 24px; height: 38px; border: 1.5px solid var(--line-2); border-radius: 12px; z-index: 2; }
    .scroll-cue span { position: absolute; top: 7px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px; background: var(--brand-hi); border-radius: 2px; animation: cue 1.8s infinite; }
    @keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(13px); opacity: 0; } 100% { opacity: 0; } }

    /* ============ TICKER ============ */
    .ticker { border-block: 1px solid var(--line); background: var(--ink-2); overflow: hidden; padding: .85rem 0; }
    .ticker-track { display: flex; gap: 2.6rem; width: max-content; animation: ticker 36s linear infinite; }
    .ticker-item { font-family: var(--font-m); font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
    .ticker-item i { color: var(--brand); font-style: normal; margin-left: 2.4rem; }
    @keyframes ticker { to { transform: translateX(-50%); } }

    /* ============ STATS ============ */
    /* Brand-blue band. As plain white it washed into the white section below it
       and read as dead space between the hero and the products grid. Blue is the
       one surface of real brand colour on the page (#003087 otherwise only shows
       up in text and buttons), and it stays distinct from the near-black
       .section-dark steel bands further down. Grid texture matches those bands. */
    .stats {
      position: relative;
      padding: clamp(2.6rem, 5vw, 4rem) 0;
      background:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
        var(--brand);
      background-size: 48px 48px, 48px 48px, auto;
    }
    .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    @media (min-width: 900px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
    /* --safety, not --safety-deep: the deep rust goes muddy on blue. */
    .stat { border-left: 3px solid var(--safety); padding-left: 1.2rem; }
    .stat-n { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; color: #fff; }
    .stat-l { font-family: var(--font-m); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-top: .5rem; }

    /* ============ SECTIONS ============ */
    .section { padding: clamp(4rem, 8vw, 7rem) 0; }
    .sec-head { margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
    .kicker { font-family: var(--font-m); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--safety-deep); margin-bottom: .9rem; }
    .sec-head h2, .feat-copy h2, .trust-copy h2 {
      font-size: clamp(1.9rem, 4.4vw, 3.4rem);
      line-height: 1.02; text-transform: uppercase;
    }

    /* ============ BENTO ============ */
    .bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }
    @media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, 1fr); } .bento-card.wide { grid-column: span 2; } }
    .bento-card {
      position: relative; border-radius: 16px; overflow: hidden;
      min-height: 280px; display: flex; align-items: flex-end;
      border: 1px solid var(--line);
      transition: border-color .3s, transform .3s;
      isolation: isolate;
    }
    .bento-card:hover { border-color: rgba(0,48,135,.55); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,24,40,.14); }
    .bento-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2,.6,.2,1); filter: saturate(.9); }
    .bento-card:hover img { transform: scale(1.06); }
    .bento-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11,13,16,.96) 8%, rgba(11,13,16,.55) 48%, rgba(11,13,16,.18) 100%); }
    .bento-body { padding: 1.4rem; width: 100%; }
    .bento-idx { font-family: var(--font-m); font-size: .68rem; letter-spacing: .2em; color: #5580ce; }
    .bento-body h3 { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; margin: .4rem 0 .35rem; color: #fff; }
    .bento-body p { font-size: .84rem; color: #c3c9d4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .bento-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; font-family: var(--font-m); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #5580ce; opacity: 0; transform: translateX(-6px); transition: all .3s; }
    .bento-card:hover .bento-go { opacity: 1; transform: translateX(0); }

    /* ============ FEATURED ============ */
    .feat { background: var(--ink-2); border-block: 1px solid var(--line); }
    .feat-card {
      display: grid; gap: 0; border-radius: 20px; overflow: hidden;
      border: 1px solid var(--line-2);
      background: linear-gradient(135deg, #eef3fb 0%, #ffffff 60%);
      box-shadow: 0 24px 60px rgba(16,24,40,.08);
      margin-bottom: clamp(3rem, 6vw, 5rem);
    }
    @media (min-width: 1024px) { .feat-card { grid-template-columns: 1.05fr 1fr; } }
    .feat-copy { padding: clamp(1.6rem, 4vw, 3.2rem); }
    .feat-copy h2 { margin-bottom: 1.2rem; }
    .feat-sub { color: var(--muted); font-size: .98rem; margin-bottom: 1.6rem; max-width: 32rem; }
    .feat-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem .9rem; margin-bottom: 1.9rem; }
    .feat-list li { display: flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 600; }
    .feat-list svg { color: var(--brand-hi); flex-shrink: 0; }
    .feat-list-link { display: inline-flex; align-items: center; gap: .55rem; color: inherit; transition: color .2s; }
    .feat-list-link:hover { color: var(--brand-hi); }
    .feat-list-link:hover svg { color: var(--safety-deep); }
    .feat-img { position: relative; min-height: 300px; }
    .feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .feat-tag {
      position: absolute; top: 1.1rem; right: 1.1rem;
      background: var(--brand); color: #fff;
      font-family: var(--font-m); font-size: .68rem; font-weight: 600; letter-spacing: .12em;
      padding: .5rem .8rem; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.4);
    }

    /* ============ PRODUCT RAIL ============ */
    .rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
    .rail-head .kicker { margin-bottom: 0; }
    .rail-nav { display: flex; gap: .5rem; }
    .rail-nav button {
      width: 42px; height: 42px; border-radius: 50%;
      background: transparent; border: 1px solid var(--line-2); color: var(--text);
      font-size: 1rem; cursor: pointer; transition: all .2s;
    }
    .rail-nav button:hover { border-color: var(--brand-hi); color: var(--brand-hi); }
    .rail { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: none; }
    .rail::-webkit-scrollbar { display: none; }
    .rail-card {
      flex: 0 0 min(78vw, 300px); scroll-snap-align: start;
      background: var(--ink-3); border: 1px solid var(--line); border-radius: 14px;
      overflow: hidden; transition: border-color .3s, transform .3s;
    }
    .rail-card:hover { border-color: rgba(0,48,135,.55); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16,24,40,.12); }
    .rail-img { height: 170px; overflow: hidden; }
    .rail-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .5s; }
    .rail-card:hover .rail-img img { transform: scale(1.06); }
    .rail-card h3 { font-size: 1rem; font-weight: 800; text-transform: uppercase; padding: 1rem 1.1rem .3rem; }
    .rail-card p { font-size: .82rem; color: var(--muted); padding: 0 1.1rem 1.2rem; }
    .spec-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 1.1rem .9rem; }
    .spec-chips i {
      font-style: normal; font-family: var(--font-m);
      font-size: .58rem; font-weight: 500; letter-spacing: .08em;
      color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px;
      padding: .28rem .5rem; white-space: nowrap;
    }

    /* ============ TRUST ============ */
    .trust-grid { display: grid; gap: 3rem; align-items: center; }
    @media (min-width: 1024px) { .trust-grid { grid-template-columns: 1.1fr 1fr; } }
    .trust-copy h2 { margin-bottom: 1.1rem; }
    .trust-items { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
    .trust-item { display: flex; gap: .9rem; }
    .trust-check {
      width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
      background: var(--brand-soft); border: 1px solid rgba(0,48,135,.3);
      display: flex; align-items: center; justify-content: center; color: var(--brand-hi); margin-top: .15rem;
    }
    .trust-item h3 { font-size: .98rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
    .trust-item p { font-size: .86rem; color: var(--muted); }
    .trust-img { position: relative; }
    .trust-img img { border-radius: 18px; border: 1px solid var(--line-2); width: 100%; height: 460px; object-fit: cover; filter: saturate(.9); }
    .trust-badge {
      position: absolute; bottom: -1.2rem; left: -1.2rem;
      background: #fff; border: 1px solid var(--line-2); border-radius: 14px;
      padding: 1.1rem 1.4rem; box-shadow: 0 18px 44px rgba(16,24,40,.18);
    }
    .trust-badge .stat-n { color: var(--brand-hi); font-size: 1.9rem; }
    @media (max-width: 640px) { .trust-badge { left: .8rem; bottom: .8rem; } }

    /* ============ STEPS ============ */
    .steps { display: grid; gap: 1.6rem; counter-reset: step; }
    @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
    .step { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 1.8rem 1.6rem; overflow: hidden; transition: border-color .3s; }
    .step:hover { border-color: rgba(0,48,135,.45); box-shadow: 0 14px 34px rgba(16,24,40,.08); }
    .step-n {
      font-size: 4.6rem; line-height: 1;
      color: transparent; -webkit-text-stroke: 1.5px rgba(0,48,135,.5);
      display: block; margin-bottom: 1rem;
    }
    .step-line { position: absolute; top: 2.4rem; right: 1.6rem; width: 44px; height: 2px; background: linear-gradient(to right, transparent, var(--brand)); }
    .step h3 { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; margin-bottom: .6rem; }
    .step p { font-size: .88rem; color: var(--muted); }

    /* ============ AREAS ============ */
    .areas { background: var(--ink-2); border-block: 1px solid var(--line); }
    .area-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
    @media (min-width: 768px) { .area-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1024px) { .area-grid { grid-template-columns: repeat(4, 1fr); } }
    .area-chip {
      display: flex; align-items: center; gap: .7rem;
      background: var(--ink-3); border: 1px solid var(--line); border-radius: 12px;
      padding: .9rem 1rem; transition: all .25s;
    }
    .area-chip:hover { border-color: var(--brand-hi); background: var(--brand-soft); transform: translateY(-2px); }
    .area-pin { color: var(--brand-hi); display: flex; }
    .area-name { font-weight: 700; font-size: .92rem; line-height: 1.15; }
    .area-name em { display: block; font-style: normal; font-family: var(--font-m); font-size: .6rem; letter-spacing: .18em; color: var(--muted); }
    .area-arrow { margin-left: auto; color: var(--muted); transition: all .25s; }
    .area-chip:hover .area-arrow { color: var(--brand-hi); transform: translateX(3px); }
    .areas-head { display: grid; gap: 2rem; align-items: center; }
    @media (min-width: 1024px) { .areas-head { grid-template-columns: 1fr auto; } }
    .de-map { display: none; }
    @media (min-width: 1024px) { .de-map { display: block; height: 250px; width: auto; margin-right: clamp(0rem, 3vw, 3rem); } }
    .de-shape { fill: rgba(0,48,135,.05); stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
    .de-line { stroke: rgba(0,48,135,.35); stroke-dasharray: 4 4; stroke-width: 1.5; fill: none; }
    .de-pin circle { fill: var(--safety-deep); }
    .de-pin text { font-family: var(--font-m); font-size: 9px; font-weight: 600; letter-spacing: .12em; fill: var(--muted); }
    .de-county { font-family: var(--font-m); font-size: 7.5px; letter-spacing: .2em; fill: rgba(0,48,135,.45); }
    .area-note { margin-top: 1.6rem; font-size: .86rem; color: var(--muted); }
    .area-note a { color: var(--brand-hi); font-weight: 600; }

    /* ============ FAQ ============ */
    .faq-shell { max-width: 880px; }
    .faq-list { display: grid; gap: .8rem; }
    .faq-item { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .3s; }
    .faq-item[open] { border-color: rgba(0,48,135,.45); }
    .faq-item summary { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; list-style: none; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-idx { font-family: var(--font-m); font-size: .7rem; color: var(--brand-hi); letter-spacing: .1em; flex-shrink: 0; }
    .faq-item h3 { font-size: .98rem; font-weight: 700; flex: 1; }
    .faq-plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
    .faq-plus::before, .faq-plus::after { content: ''; position: absolute; background: var(--brand-hi); transition: transform .3s; }
    .faq-plus::before { top: 7px; left: 0; width: 16px; height: 2px; }
    .faq-plus::after { top: 0; left: 7px; width: 2px; height: 16px; }
    .faq-item[open] .faq-plus::after { transform: rotate(90deg); }
    .faq-item > p { padding: 0 1.3rem 1.3rem 3.1rem; font-size: .9rem; color: var(--muted); }
    .faq-link { color: var(--brand-hi); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0,48,135,.4); text-underline-offset: 2px; }
    .faq-link:hover { text-decoration-color: var(--brand-hi); }

    /* ============ CTA (dark steel, site-wide) ============ */
    .cta {
      position: relative;
      overflow: hidden;
      padding: clamp(5rem, 10vw, 8.5rem) 0;
      text-align: center;
      background:
        radial-gradient(ellipse 70% 80% at 50% 115%, rgba(0,48,135,.45) 0%, transparent 65%),
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
        var(--steel);
      background-size: auto, 48px 48px, 48px 48px, auto;
    }
    .cta.hazard::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
      background: repeating-linear-gradient(-45deg, var(--safety) 0 12px, #101318 12px 24px);
    }
    .cta .shell { position: relative; z-index: 1; }
    .cta .kicker { margin-bottom: 1.2rem; color: var(--safety); }
    .cta-h {
      font-size: clamp(3rem, 9.4vw, 7.4rem);
      line-height: .95;
      text-transform: uppercase;
      margin-bottom: 2.4rem;
      color: #fff;
    }
    .cta-h span {
      background: linear-gradient(90deg, #fff 15%, var(--safety) 90%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .cta .hero-actions { justify-content: center; }
    .cta .cta-sub { color: #9aa3b2; }
    .cta .cta-chips { color: #c3c9d4; }
    .cta .btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
    .cta .btn-ghost:hover { border-color: var(--safety); color: var(--safety); }

    /* dark CTA variant */
    .cta-dark {
      position: relative;
      background:
        radial-gradient(ellipse 70% 80% at 50% 115%, rgba(0,48,135,.45) 0%, transparent 65%),
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
        var(--steel);
      background-size: auto, 48px 48px, 48px 48px, auto;
      border-top: 0;
    }
    .cta-dark.hazard::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
      background: repeating-linear-gradient(-45deg, var(--safety) 0 12px, #101318 12px 24px);
    }
    .cta-dark .kicker { color: var(--safety); }
    .cta-dark .cta-h { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; }
    .cta-dark .cta-h span {
      background: linear-gradient(90deg, #fff 15%, var(--safety) 90%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .cta-dark .cta-sub { color: #9aa3b2; }
    .cta-dark .cta-chips { color: #c3c9d4; }
    .cta-dark .btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
    .cta-dark .btn-ghost:hover { border-color: var(--safety); color: var(--safety); }

    /* ============ FOOTER (dark steel) ============ */
    .footer { background: #101318; padding-top: clamp(2.6rem, 5vw, 4rem); color: #9aa3b2; }
    .footer-grid { display: grid; gap: 2.4rem; padding-bottom: 2.6rem; }
    @media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }
    .footer h4 { font-family: var(--font-m); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--safety); margin-bottom: 1rem; }
    .footer-grid a { display: block; font-size: .86rem; color: #9aa3b2; padding: .26rem 0; transition: color .2s; }
    .footer-grid a:hover { color: #fff; }
    .footer-grid .wordmark { display: inline-flex; padding: 0; margin-bottom: 1rem; color: #fff !important; }
    .footer-note { font-size: .84rem; color: #9aa3b2; max-width: 26rem; }
    .footer-alliance { font-size: .8rem; color: #9aa3b2; margin-top: .9rem; }
    .footer-alliance strong { color: #e8eaee; }
    .footer-base {
      display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between;
      border-top: 1px solid var(--steel-line); padding-block: 1.2rem;
      font-family: var(--font-m); font-size: .66rem; letter-spacing: .08em; color: rgba(154,163,178,.7);
    }
    .footer-devtag { color: var(--brand-hi); }

    /* ============ REVEALS ============ */
    .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
    .reveal.in { opacity: 1; transform: none; }
    .reveal.d1 { transition-delay: .08s; }
    .reveal.d2 { transition-delay: .16s; }
    .reveal.d3 { transition-delay: .24s; }
    .reveal.d4 { transition-delay: .32s; }
    .reveal.d5 { transition-delay: .4s; }
    .reveal.d6 { transition-delay: .48s; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .ticker-track { animation: none; }
      .nav-phone { animation: none; opacity: 1; }
      .btn-solid::after { animation: none; }
      html { scroll-behavior: auto; }
    }

    /* ============ AREA / SUBPAGE ============ */
    .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-family: var(--font-m); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem; }
    .crumbs a { color: var(--muted); transition: color .2s; }
    .crumbs a:hover { color: var(--brand-hi); }
    .crumbs i { font-style: normal; color: rgba(0,48,135,.5); }
    .crumbs strong { color: var(--brand-hi); font-weight: 600; }

    .area-hero { position: relative; padding: clamp(2.6rem, 5vw, 4.5rem) 0 clamp(2.2rem, 4vw, 3.5rem); overflow: hidden; }
    .area-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
    @media (min-width: 1024px) { .area-hero-grid { grid-template-columns: 1.1fr 1fr; } }
    .area-h1 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: .98; text-transform: uppercase; margin-bottom: 1.3rem; }
    .area-hero-img { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(16,24,40,.14); }
    .area-hero-img img { width: 100%; height: clamp(260px, 36vw, 420px); object-fit: cover; }
    .area-hero-tag {
      position: absolute; bottom: 1rem; left: 1rem;
      background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
      border: 1px solid var(--line); border-radius: 10px;
      padding: .6rem .9rem; font-family: var(--font-m); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text);
    }
    .area-hero-tag b { color: var(--brand-hi); }

    .qa-strip { background: var(--brand); }
    .qa-strip .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding-block: .8rem; }
    .qa-strip p { color: #fff; font-size: .88rem; font-weight: 600; }
    .qa-strip .qa-actions { display: flex; align-items: center; gap: 1rem; }
    .qa-strip a.qa-phone { color: #fff; font-family: var(--font-m); font-weight: 600; font-size: .85rem; }
    .qa-strip a.qa-btn { background: #fff; color: var(--brand); font-weight: 800; font-size: .8rem; padding: .55rem 1.1rem; border-radius: 9px; transition: transform .2s; }
    .qa-strip a.qa-btn:hover { transform: translateY(-2px); }

    .layout { display: grid; gap: 3rem; }
    @media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); } }
    .layout-main > * + * { margin-top: clamp(2.6rem, 5vw, 4rem); }
    .sub-h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.05; text-transform: uppercase; margin-bottom: 1.1rem; }
    .rich { color: #3a4150; font-size: .96rem; line-height: 1.75; }
    .rich p { margin-bottom: 1rem; }
    .rich ul { margin: 1rem 0 1rem 1.1rem; display: grid; gap: .55rem; }
    .rich li::marker { color: var(--brand-hi); }
    .rich a { color: var(--brand-hi); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0,48,135,.35); text-underline-offset: 3px; }
    .rich a:hover { text-decoration-color: var(--brand-hi); }
    .rich strong { color: var(--text); }

    .sidebar { display: grid; gap: 1.2rem; align-self: start; }
    @media (min-width: 1024px) { .sidebar { position: sticky; top: 92px; } }
    .side-card { background: #16191f; border-radius: 16px; padding: 1.6rem; color: #e8eaee; }
    .side-card h3 { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; margin-bottom: .5rem; color: #fff; }
    .side-card > p { font-size: .84rem; color: #9aa3b2; margin-bottom: 1.1rem; }
    .side-card .btn { width: 100%; margin-bottom: .6rem; }
    .side-card .btn-ghost { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
    .side-card .btn-ghost:hover { border-color: #5580ce; color: #5580ce; }
    .side-card ul { list-style: none; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: .5rem; }
    .side-card ul li { display: flex; align-items: center; gap: .55rem; font-family: var(--font-m); font-size: .68rem; letter-spacing: .06em; color: #9aa3b2; }
    .side-card ul svg { color: #4ade80; flex-shrink: 0; }
    .side-box { background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; }
    .side-box h3 { font-family: var(--font-m); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-hi); margin-bottom: 1rem; }
    .glance-row { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
    .glance-row:last-child { border-bottom: 0; }
    .glance-row span { color: var(--muted); }
    .glance-row b { font-weight: 700; color: var(--text); }
    .side-box ul { list-style: none; display: grid; gap: .15rem; }
    .side-box ul a { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--muted); padding: .32rem 0; transition: color .2s, transform .2s; }
    .side-box ul a:hover { color: var(--brand-hi); transform: translateX(3px); }
    .side-box ul svg { color: rgba(0,48,135,.5); flex-shrink: 0; }

    .svc-grid { display: grid; gap: 1rem; }
    @media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
    .svc-grid .bento-card { min-height: 215px; }

    .map-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); }
    .map-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; background: var(--ink-2); border-bottom: 1px solid var(--line); }
    .map-head p { font-weight: 700; font-size: .9rem; }
    .map-head small { display: block; font-family: var(--font-m); font-size: .64rem; letter-spacing: .1em; color: var(--muted); font-weight: 400; }
    .map-head a { font-family: var(--font-m); font-size: .68rem; letter-spacing: .08em; color: var(--brand-hi); font-weight: 600; white-space: nowrap; }
    .map-frame iframe { display: block; border: 0; width: 100%; height: 340px; filter: saturate(.85); }

    .nearby-grid { display: grid; gap: .9rem; }
    @media (min-width: 640px) { .nearby-grid { grid-template-columns: repeat(3, 1fr); } }
    .nearby-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; transition: all .25s; }
    .nearby-card:hover { border-color: rgba(0,48,135,.5); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,24,40,.1); }
    .nearby-card .nb-img { height: 110px; overflow: hidden; }
    .nearby-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
    .nearby-card:hover img { transform: scale(1.06); }
    .nearby-card div + div, .nearby-card .nb-body { padding: .8rem 1rem; }
    .nearby-card h3 { font-size: .92rem; font-weight: 800; text-transform: uppercase; }
    .nearby-card span { font-family: var(--font-m); font-size: .64rem; letter-spacing: .12em; color: var(--brand-hi); }

    /* ============ TYPE SYSTEM ============ */
    /* Display elements take --font-d; body --font-b; small labels --font-m.
       TEMP: four readable-industrial candidate pairings below (data-font). */
    .hero-h1, .area-h1, .sec-head h2, .feat-copy h2, .trust-copy h2, .sub-h2, .cta-h,
    .stat-n, .step-n, .bento-body h3, .rail-card h3, .step h3, .trust-item h3,
    .nearby-card h3, .side-card h3 {
      font-family: var(--font-d);
      font-weight: var(--font-d-weight, 600); letter-spacing: .01em;
    }
    /* Labels are no longer monospaced — same sans as the body, semibold, less
       aggressive tracking, so small text stays readable. */
    :is(.kicker, .eyebrow, .stat-l, .hero-spec, .ticker-item, .nav-phone, .faq-idx,
        .crumbs, .side-box h3, .footer h4, .nav-m-group, .bento-idx, .spec-chips i,
        .callout, .de-pin text, .de-county, .footer-base, .nav-dd-all, .area-name em,
        .view-all, .bento-go, .rail-go, .map-head a, .map-head small, .nearby-card span,
        .side-card ul li, .feat-tag, .area-hero-tag, .trust-stats .tl, .qa-strip a.qa-phone) {
      letter-spacing: .09em;
    }

    /* Candidate 0a — Oswald display + Inter for body AND labels (no mono anywhere) */
    html[data-font="oswald-inter"] {
      --font-d: 'Oswald', sans-serif; --font-d-weight: 600;
      --font-b: 'Inter', system-ui, sans-serif;
      --font-m: 'Inter', system-ui, sans-serif;
    }
    html[data-font="oswald-inter"] .hero-h1 { font-size: clamp(2.9rem, 7.6vw, 6rem); }
    html[data-font="oswald-inter"] .cta-h { font-size: clamp(3rem, 9.4vw, 7.4rem); }

    /* Candidate 0b — Oswald display + Barlow body/labels (warmer than Inter) */
    html[data-font="oswald-barlow"] {
      --font-d: 'Oswald', sans-serif; --font-d-weight: 600;
      --font-b: 'Barlow', system-ui, sans-serif;
      --font-m: 'Barlow', system-ui, sans-serif;
    }
    html[data-font="oswald-barlow"] .hero-h1 { font-size: clamp(2.9rem, 7.6vw, 6rem); }
    html[data-font="oswald-barlow"] .cta-h { font-size: clamp(3rem, 9.4vw, 7.4rem); }

    /* Candidate 1 — Barlow: US-signage DNA, open + friendly, industrial */
    html[data-font="barlow"] {
      --font-d: 'Barlow Condensed', sans-serif; --font-d-weight: 600;
      --font-b: 'Barlow', system-ui, sans-serif;
      --font-m: 'Barlow', system-ui, sans-serif;
    }
    html[data-font="barlow"] .hero-h1 { font-size: clamp(3rem, 7.8vw, 6.2rem); }
    html[data-font="barlow"] .cta-h { font-size: clamp(3.1rem, 9.6vw, 7.6rem); }

    /* Candidate 2 — Roboto Condensed: maximum familiarity and legibility */
    html[data-font="roboto"] {
      --font-d: 'Roboto Condensed', sans-serif; --font-d-weight: 700;
      --font-b: 'Roboto', system-ui, sans-serif;
      --font-m: 'Roboto Condensed', system-ui, sans-serif;
    }
    html[data-font="roboto"] .hero-h1 { font-size: clamp(2.9rem, 7.6vw, 6rem); }
    html[data-font="roboto"] .cta-h { font-size: clamp(3rem, 9.4vw, 7.4rem); }

    /* Candidate 3 — Archivo: wide sturdy grotesque, zero squint */
    html[data-font="archivo"] {
      --font-d: 'Archivo', system-ui, sans-serif; --font-d-weight: 800;
      --font-b: 'Archivo', system-ui, sans-serif;
      --font-m: 'Archivo', system-ui, sans-serif;
    }
    html[data-font="archivo"] .hero-h1 { font-size: clamp(2.4rem, 6.4vw, 5rem); letter-spacing: -.01em; }
    html[data-font="archivo"] .cta-h { font-size: clamp(2.7rem, 8.2vw, 6.4rem); letter-spacing: -.01em; }

    /* Candidate 4 — IBM Plex Sans: engineering heritage, technical legibility */
    html[data-font="plex"] {
      --font-d: 'IBM Plex Sans Condensed', sans-serif; --font-d-weight: 700;
      --font-b: 'IBM Plex Sans', system-ui, sans-serif;
      --font-m: 'IBM Plex Sans', system-ui, sans-serif;
    }
    html[data-font="plex"] .hero-h1 { font-size: clamp(2.8rem, 7.2vw, 5.6rem); }
    html[data-font="plex"] .cta-h { font-size: clamp(2.9rem, 9vw, 7rem); }

    /* Floating font switcher (TEMP) */
    .font-switch {
      position: fixed; bottom: 1rem; right: 1rem; z-index: 70;
      display: flex; align-items: center; gap: .3rem;
      background: rgba(255,255,255,.96); border: 1px solid var(--line-2); border-radius: 999px;
      padding: .35rem .45rem .35rem .85rem;
      box-shadow: 0 12px 32px rgba(16,24,40,.2);
    }
    .font-switch > span { font-size: .6rem; font-weight: 600; letter-spacing: .12em; color: var(--muted); margin-right: .3rem; }
    .font-switch button {
      border: 1px solid transparent; background: transparent; border-radius: 999px;
      font-size: .78rem; font-weight: 600; line-height: 1;
      cursor: pointer; padding: .48rem .75rem; color: var(--muted); transition: all .2s;
    }
    .font-switch button.on { background: var(--brand); color: #fff; }
    .font-switch button:not(.on):hover { border-color: var(--line-2); color: var(--text); }

    /* ============ VERBATIM-HOMEPAGE ADDITIONS ============ */
    .sec-sub { color: var(--muted); font-size: .98rem; max-width: 40rem; margin-top: .9rem; line-height: 1.65; }
    .eb-m { display: inline; } .eb-d { display: none; }
    @media (min-width: 640px) { .eb-m { display: none; } .eb-d { display: inline; } }
    .view-all { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.2rem; font-family: var(--font-m); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-hi); transition: gap .2s; }
    .view-all:hover { gap: .8rem; }
    .rail-go { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-m); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-hi); padding: 0 1.1rem 1.2rem; }
    .rail-card p { padding-bottom: .8rem; }
    .ind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
    @media (min-width: 640px) { .ind-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1024px) { .ind-grid { grid-template-columns: repeat(6, 1fr); } }
    .ind-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem .9rem; text-align: center; transition: all .25s; }
    .ind-card:hover { border-color: rgba(0,48,135,.45); background: var(--brand-soft); transform: translateY(-3px); }
    .ind-ico { font-size: 1.7rem; display: block; margin-bottom: .55rem; }
    .ind-card p { font-size: .8rem; font-weight: 700; line-height: 1.3; }
    .areas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
    @media (min-width: 768px) { .areas-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1100px) { .areas-grid { grid-template-columns: repeat(4, 1fr); } }
    .nearby-card h3 small { font-family: var(--font-m); font-size: .6rem; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
    .trust-stats {
      position: absolute; left: 0; right: 0; bottom: 0;
      background: linear-gradient(to top, rgba(11,13,16,.92) 25%, transparent);
      padding: 2rem 1.2rem 1.2rem;
      display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem .6rem;
      border-radius: 0 0 18px 18px;
    }
    .trust-stats p { text-align: center; }
    .trust-stats .tn { display: block; font-family: var(--font-d); font-weight: 800; font-size: 1.3rem; color: #fff; line-height: 1; text-transform: uppercase; }
    .trust-stats .tl { display: block; font-family: var(--font-m); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: #c3c9d4; margin-top: .3rem; }
    .seo-links { font-size: .84rem; color: var(--muted); text-align: center; line-height: 2; max-width: 64rem; margin: 0 auto; }
    .seo-links a { color: var(--brand-hi); font-weight: 600; }
    .seo-links a:hover { text-decoration: underline; }
    .cta-sub { color: var(--muted); font-size: 1rem; max-width: 40rem; margin: 0 auto 2.2rem; line-height: 1.65; }
    .cta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2.4rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
    .cta-chips span { display: inline-flex; align-items: center; gap: .45rem; }
    .cta-chips svg { color: #16a34a; }
    .footer-contact { display: block; font-size: .88rem; font-weight: 600; color: #e8eaee !important; padding: .2rem 0; }
    .footer-contact:hover { color: var(--safety) !important; }
    .foot-test { font-size: .8rem; font-style: italic; color: var(--muted); line-height: 1.65; margin-top: 1.1rem; max-width: 24rem; }
    .foot-test b { display: block; font-style: normal; font-weight: 600; margin-top: .4rem; color: var(--text); }
    .stars { color: #f59e0b; font-style: normal; letter-spacing: .12em; font-size: .82rem; }

    /* ============ NAV DROPDOWNS ============ */
    .nav-dd { position: relative; display: flex; align-items: center; }
    .nav-dd > .nav-dd-trigger {
      display: inline-flex; align-items: center; gap: .3rem;
      font-size: 1rem; font-weight: 600; letter-spacing: .04em;
      color: var(--muted); cursor: pointer; transition: color .2s;
    }
    .nav-dd > .nav-dd-trigger svg { transition: transform .25s; }
    .nav-dd:hover > .nav-dd-trigger,
    .nav-dd:focus-within > .nav-dd-trigger { color: var(--brand-hi); }
    .nav-dd:hover > .nav-dd-trigger svg,
    .nav-dd:focus-within > .nav-dd-trigger svg { transform: rotate(180deg); }
    .nav-dd-panel {
      position: absolute; top: 100%; left: 50%;
      transform: translateX(-50%) translateY(8px);
      padding-top: 16px; /* invisible hover bridge to the trigger */
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .2s ease, transform .2s ease, visibility .2s;
      z-index: 60;
    }
    .nav-dd:hover > .nav-dd-panel,
    .nav-dd:focus-within > .nav-dd-panel {
      opacity: 1; visibility: visible; pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .nav-dd-inner {
      background: rgba(255,255,255,.98);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      border: 1px solid var(--line-2); border-radius: 14px;
      box-shadow: 0 22px 54px rgba(16,24,40,.17);
      padding: .55rem; min-width: 260px;
    }
    .nav-dd-all {
      display: block; font-family: var(--font-m);
      font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
      color: var(--brand-hi); padding: .55rem .8rem .6rem;
      border-bottom: 1px solid var(--line); margin-bottom: .35rem;
    }
    .nav-dd-list { display: grid; gap: .08rem; }
    /* Two-column menus: size each column to its longest label and never wrap.
       Fixed 1fr columns forced long names like "Warehouse Design & Space
       Planning" onto two lines, which made rows different heights and left the
       menu looking gappy. max-content + nowrap keeps every row one line high. */
    .nav-dd-list.two {
      grid-template-columns: repeat(2, max-content);
      gap: .08rem 1.1rem;
    }
    .nav-dd-list.two .nav-dd-link { white-space: nowrap; }
    /* Single-column menus (Forklifts): the 260px default forced "New & Used
       Forklifts for Sale" and the "Forklifts — New & Used" header onto two
       lines. Explicit class rather than :has() so it applies everywhere. */
    .nav-dd-inner.wide { min-width: 330px; }
    .nav-dd-inner.wide .nav-dd-all,
    .nav-dd-inner.wide .nav-dd-link { white-space: nowrap; }
    /* An odd number of items would leave an empty cell in the bottom-right;
       let the final item run the full width instead so the block stays solid. */
    .nav-dd-list.two > .nav-dd-link:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .nav-dd-link { display: block; font-size: .85rem; font-weight: 500; color: var(--text); padding: .5rem .8rem; border-radius: 8px; transition: background .15s, color .15s; }
    .nav-dd-link:hover { background: var(--brand-soft); color: var(--brand-hi); }
    .nav-dd-link.extra { margin-top: .25rem; border-top: 1px solid var(--line); padding-top: .6rem; color: var(--muted); }
    /* in a two-column panel the divider row spans the full width */
    .nav-dd-list.two .nav-dd-link.extra { grid-column: 1 / -1; }

    /* ============ RAIL MEGA DROPDOWN ============ */
    /* Left category rail + right photo-card pane, ported from the Langer/Valley
       nav (playbook: rail-cards-mega-menu). De-branded to this site's tokens —
       brand blue instead of Langer's red, and inline SVG chevrons because this
       site ships no icon font.

       A 1000px panel centred on its own trigger overflows the viewport at the
       1024px breakpoint where the desktop nav appears, so mega panels anchor to
       the header shell instead: .nav-inner becomes the positioned ancestor and
       .mega-dd goes static. The small Forklifts dropdown still anchors to its
       trigger. */
    .nav-inner { position: relative; }
    .nav-dd.mega-dd { position: static; }

    /* Because the mega panel anchors to .nav-inner it no longer starts at the
       trigger's own bottom edge the way the small dropdowns do. .nav-inner is
       106px tall and the trigger is ~26px centred in it, so ~40px of dead space
       sat under each trigger — the cursor was over neither the trigger nor the
       panel on the way down and the menu closed. This invisible bridge spans
       that gap. It only exists while the menu is open, and is only as wide as
       its own trigger, so it never swallows hovers meant for other nav items. */
    /* Attached to the header the way Langer's is: the panel's top edge meets the
       nav's bottom border instead of floating 16px below it, so the 3px brand
       rule reads as one continuous edge with the bar. The base .nav-dd-panel
       keeps its 16px offset for any non-mega dropdown. */
    .nav-dd.mega-dd > .nav-dd-panel { padding-top: 0; }

    .nav-dd.mega-dd > .nav-dd-trigger { position: relative; }
    .nav-dd.mega-dd > .nav-dd-trigger::after {
      content: ''; position: absolute; top: 100%; left: -40px; right: -40px;
      height: 54px; display: none;
    }
    .nav-dd.mega-dd:hover > .nav-dd-trigger::after,
    .nav-dd.mega-dd:focus-within > .nav-dd-trigger::after { display: block; }

    /* One expanded photo-card box per menu — no category rail. --rmega-w and
       --rmega-cols are set per menu inline, so Forklifts (2 tiles) gets a narrow
       2-column box while Services and Products get wide 4-column ones. */
    .rmega {
      width: min(var(--rmega-w, 1000px), calc(100vw - 2.5rem));
      background: #fff;
      border: 1px solid var(--line-2);
      border-top: 3px solid var(--brand);
      border-radius: 0 0 14px 14px;
      box-shadow: 0 26px 58px rgba(16,24,40,.20);
      overflow: hidden; text-align: left;
    }
    .rmega-pane { padding: 18px 24px 20px; }
    .rmega-pane h4 { font-family: var(--font-d); font-size: 1.18rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
    .rmega-desc { font-size: .8rem; color: var(--muted); margin-bottom: 13px; line-height: 1.45; }
    .rmega-grid { display: grid; grid-template-columns: repeat(var(--rmega-cols, 4), 1fr); gap: 12px; }
    .rmega-tile {
      border: 1px solid var(--line-2); border-radius: 12px;
      padding: 10px 10px 12px;
      transition: border-color .2s, box-shadow .2s, transform .2s;
      display: flex; flex-direction: column; align-items: center; text-align: center;
    }
    .rmega-tile img { height: var(--rmega-imgh, 112px); width: 100%; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
    .rmega-tile b {
      font-family: var(--font-d); font-size: .92rem; font-weight: 600;
      color: var(--text); letter-spacing: .02em; line-height: 1.2;
    }
    .rmega-tile:hover {
      border-color: var(--brand);
      box-shadow: 0 12px 28px -8px rgba(0,48,135,.28);
      transform: translateY(-3px);
    }
    .rmega-foot {
      margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    }
    .rmega-foot a {
      display: inline-flex; align-items: center; gap: .35rem;
      font-weight: 700; color: var(--brand-hi); font-size: .82rem;
    }
    .rmega-foot a:hover { color: #002570; }
    .rmega-foot span { font-size: .76rem; color: var(--muted); }
    .rmega-foot span b { color: var(--text); }

    /* mobile nav groups */
    .nav-m-group { font-family: var(--font-m); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-hi); padding: 1rem 0 .25rem; }
    /* Mobile accordion — matches the DFW pattern: compact rows, sub-items
       indented behind a left rule, chevron rotates on open. */
    .nav-m-acc > summary {
      display: flex; align-items: center; justify-content: space-between;
      list-style: none; cursor: pointer;
      padding: .625rem .75rem; min-height: 44px;
      font-size: 1rem; font-weight: 600; color: var(--text);
      border-radius: 6px; transition: background .15s;
    }
    .nav-m-acc > summary::-webkit-details-marker { display: none; }
    .nav-m-acc > summary:hover { background: rgba(15,23,42,.04); }
    .nav-m-acc > summary svg { color: var(--muted); transition: transform .2s; flex-shrink: 0; }
    .nav-m-acc[open] > summary svg { transform: rotate(180deg); }
    .nav-m-acc .nav-m-sub {
      margin: .25rem 0 .25rem 1rem;
      padding-left: .75rem;
      border-left: 2px solid var(--line);
      gap: 0;
    }
    .nav-m-acc .nav-m-sub a {
      padding: .5rem .75rem; min-height: 40px; font-size: .875rem;
      font-weight: 400; color: var(--muted); border-radius: 6px;
      line-height: 1.5; transition: background .15s, color .15s;
    }
    .nav-m-acc .nav-m-sub a:first-child { font-weight: 600; color: var(--text); }
    .nav-m-acc .nav-m-sub a:hover { background: rgba(15,23,42,.04); color: var(--brand-hi); }
    /* top-level rows (Home / About / Contact) share the summary rhythm */
    .nav-mobile > a:not(.btn) { padding: .625rem .75rem; min-height: 44px; font-size: 1rem; font-weight: 600; color: var(--text); border-radius: 6px; }
    .nav-mobile > a:not(.btn):hover { background: rgba(15,23,42,.04); }
    /* Single column on phones: two columns forced long names ("Material Handling
       Equipment", "New & Used Forklifts for Sale") to wrap and halved the tap
       width. Padding gives every row a 44px touch target. */
    .nav-m-sub { display: grid; grid-template-columns: 1fr; gap: 0; }
    .nav-m-sub a { display: block; padding: .7rem 0; font-size: .95rem; font-weight: 500; color: var(--muted); min-height: 44px; line-height: 1.65; }
    .nav-m-sub a:hover { color: var(--brand-hi); }

    /* ---- Phone hero: tighten it up ----------------------------------------
       The hero was sized for desktop and dominated the whole first screen on a
       phone. Smaller headline/eyebrow, less vertical padding, and the two
       decorative bits (spec chips + scroll cue) removed so the CTAs are
       visible without scrolling. Declared with the font-candidate selectors
       too, since those set hero-h1 at a higher specificity. */
    @media (max-width: 767px) {
      .hero { min-height: auto; }
      .hero-content { padding-top: 1.9rem; padding-bottom: 2.4rem; }
      .hero-h1,
      html[data-font="oswald-inter"] .hero-h1,
      html[data-font="oswald-barlow"] .hero-h1,
      html[data-font="barlow"] .hero-h1,
      html[data-font="roboto"] .hero-h1,
      html[data-font="archivo"] .hero-h1,
      html[data-font="plex"] .hero-h1 {
        /* Matches DFW and DC on a phone: 30px / 1.25 / 16px subhead (measured
           on all three live sites). Delaware's 1.02 line-height was what made
           it read cramped and off-pattern versus the siblings. */
        font-size: 1.875rem;
        line-height: 1.25;
        margin-bottom: .85rem;
      }
      .hero-sub { font-size: 1rem; line-height: 1.55; margin-bottom: 1.3rem; max-width: 100%; }
      .eyebrow { font-size: .6rem; letter-spacing: .12em; padding: .3rem .6rem; }
      .hero-actions { gap: .6rem; }
      /* decorative only — they pushed the CTAs below the fold */
      .hero-spec { display: none; }
      .scroll-cue { display: none; }
      /* the big lower CTA headline was oversized on phones too */
      .cta-h,
      html[data-font="oswald-inter"] .cta-h,
      html[data-font="oswald-barlow"] .cta-h,
      html[data-font="barlow"] .cta-h,
      html[data-font="roboto"] .cta-h,
      html[data-font="archivo"] .cta-h,
      html[data-font="plex"] .cta-h {
        font-size: clamp(1.9rem, 9vw, 2.7rem);
      }
    }

    /* Phone header: the 1.55rem wordmark wrapped to two lines and the full-size
       Free Estimate button wrapped to two lines as well, which together pushed
       the burger past the right edge. Shrink both, keep everything on one row. */
    @media (max-width: 1023px) {
      .nav-inner { height: 86px; gap: .6rem; }
      .wordmark { font-size: 1.08rem !important; line-height: 1.05 !important; max-width: 52vw; }
      .nav-cta { gap: .6rem; flex-shrink: 0; }
      /* Tap-to-call replaces the CTA in the phone header — same as the other
         racking sites. Calling is the highest-intent mobile action, and Free
         Estimate is still the last item in the menu. Keeps the pulse. */
      .nav-cta .btn-solid { display: none; }
      /* Tighter number: no icon, no letter-spacing (the global mono-label rule
         adds .09em, which stretched it wall-to-wall), and breathing room on
         both sides so it isn't jammed against the wordmark and the burger. */
      /* The global label rule is `:is(..., .nav-phone, ..., .qa-strip a.qa-phone)`
         — :is() takes the specificity of its most specific argument, so it
         outranks any plain `.nav .nav-phone`. !important is the honest fix here
         rather than an escalating selector war. That .09em tracking is what
         stretched the number across the header. */
      .nav-phone {
        display: inline-flex; font-size: .88rem; white-space: nowrap;
        letter-spacing: 0 !important; gap: .3rem; margin: 0 .35rem;
      }
      .nav-phone svg { display: block; width: 14px; height: 14px; }
    }
    @media (max-width: 360px) {
      .wordmark { font-size: .95rem !important; max-width: 44vw; }
      .nav-phone { font-size: .8rem; margin: 0 .2rem; }
    }
    /* Desktop is intentionally left at its original treatment (.98rem with the
       global .09em label tracking, icon + pulse) — the tightening is mobile-only. */

    /* ---- Mobile hero legibility -------------------------------------------
       The complaint was "harder to read than desktop", but measured contrast
       was already fine: h1 13.6:1 worst-case, sub 4.43:1. The problem isn't
       contrast, it's TEXTURE — rack uprights and orange beams run directly
       behind the words, and detail behind letterforms hurts reading even at a
       high ratio. Desktop avoids this by construction: its wash is horizontal,
       so copy sits entirely in a clean zone and the rack is a separate zone.
       Mobile's top-down wash faded to 12% by the bottom, dropping the subhead
       and CTAs straight onto the busiest part of the photo.

       Fix = give mobile the same "clean zone / photo zone" split, just
       stacked instead of side-by-side: hold the wash through the copy, then
       release it so the rack still reads below and behind the buttons.
       NOTE: deliberately NOT touching .hero-poster object-position — that crop
       is matched to the 3D scene's opening frame, and shifting it would make
       the canvas visibly jump when it fades in. */
    @media (max-width: 1023px) {
      .hero-vignette {
        background:
          linear-gradient(180deg,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.92) 46%,
            rgba(255,255,255,.80) 63%,
            rgba(255,255,255,.42) 82%,
            rgba(255,255,255,.10) 100%);
      }
      /* Longest string on the page and the weakest element at 4.43:1. Moving off
         --muted grey onto the body ink takes it to ~11:1 with no design change. */
      .hero-sub { color: var(--text); }
      /* The ghost phone button was a hairline border over cartons — effectively
         invisible. Solid fill so it reads as a button, not an outline. */
      .hero-cta .btn-ghost {
        background: rgba(255,255,255,.92);
        border-color: rgba(0,48,135,.28);
      }
    }

    /* ---- Service/product → city block (ServiceAreas.astro) ---------------- */
    .svc-areas-lead {
      max-width: 62ch; margin: 0 0 1.9rem;
      color: var(--muted); font-size: 1.02rem; line-height: 1.65;
    }
    .svc-areas-grid {
      list-style: none; margin: 0 0 1.6rem; padding: 0;
      display: grid; gap: .6rem;
      grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    }
    .svc-areas-grid a {
      display: flex; flex-direction: column; gap: .12rem;
      padding: .8rem .95rem; min-height: 44px;
      border: 1px solid var(--line); border-radius: 8px;
      background: #fff; text-decoration: none;
      transition: border-color .18s, transform .18s, box-shadow .18s;
    }
    .svc-areas-grid a:hover {
      border-color: var(--brand-hi, #003087);
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(10,13,18,.08);
    }
    .svc-areas-city { font-weight: 700; color: var(--text); font-size: .96rem; }
    /* The offering repeated per city is the whole point of the block — it's the
       anchor-text pairing, so it must be readable, not decorative fine print. */
    .svc-areas-sub { color: var(--muted); font-size: .8rem; line-height: 1.35; }
    @media (max-width: 767px) {
      .svc-areas-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
      .svc-areas-grid a { padding: .7rem .8rem; }
      .svc-areas-city { font-size: .9rem; }
      .svc-areas-sub { font-size: .74rem; }
      .svc-areas-lead { font-size: .96rem; }
    }