/* Midnight Marquee — shared design system for lasvegasmobilecarglass.com
   World: Las Vegas at night. Voice: signal red from the emblem.
   Tone: nocturnal / precise / electric. */

/* ============================================================
     MIDNIGHT MARQUEE — Las Vegas Mobile Car Glass
     World  : Las Vegas at night (deep midnight, chrome, bulb amber)
     Voice  : signal red from the emblem
     Tone   : nocturnal / precise / electric
     Object : a Vegas marquee sign + a glass technician's spec sheet
     ============================================================ */

    :root {
      --night: #070c18;
      --night-2: #0c1428;
      --night-3: #111d3a;
      --chrome: #f2f4f8;
      --chrome-2: #e2e7f0;
      --ink: #080d1a;
      --ink-soft: #3c4660;
      --txt: #ccd5e8;
      --txt-dim: #9fadc6;
      --red: #c00000;
      --red-2: #e2201f;
      --red-3: #ff4d42;
      --red-deep: #6d0a0c;
      --amber: #f0dfae;
      --amber-2: #ffd86b;
      --line: rgba(242, 244, 248, .14);
      --line-soft: rgba(242, 244, 248, .07);
      --ease: cubic-bezier(.16, 1, .3, 1);
      --bar: 66px;
      --folio: 30px;
      --wrap: 1240px;
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      overflow-x: clip
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--night);
      color: var(--txt);
      font-family: 'Manrope', sans-serif;
      font-size: 16.5px;
      line-height: 1.78;
      -webkit-font-smoothing: antialiased;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block
    }

    a {
      color: inherit
    }

    ::selection {
      background: var(--red-2);
      color: #fff
    }

    /* film grain */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 998;
      pointer-events: none;
      opacity: .42;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
    }

    ::-webkit-scrollbar {
      width: 11px
    }

    ::-webkit-scrollbar-track {
      background: var(--night-2)
    }

    ::-webkit-scrollbar-thumb {
      background: #243459
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--red-2)
    }

    .wrap {
      max-width: var(--wrap);
      margin: 0 auto;
      padding-left: 26px;
      padding-right: 26px
    }

    .sec {
      padding: clamp(72px, 10.5vh, 132px) 0;
      position: relative
    }

    section[id] {
      scroll-margin-top: calc(var(--bar) + 22px)
    }

    /* ---------- type roles ---------- */
    .grot {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -.028em
    }

    .ser {
      font-family: 'Newsreader', serif;
      font-weight: 300;
      font-style: italic;
      letter-spacing: -.005em
    }

    .mono {
      font-family: 'Spline Sans Mono', monospace;
      text-transform: uppercase
    }

    .out {
      -webkit-text-stroke: 2px var(--chrome);
      -webkit-text-fill-color: transparent;
      color: transparent
    }

    .rd {
      color: var(--red-3)
    }

    .am {
      color: var(--amber)
    }

    .chap {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .32em;
      text-transform: uppercase;
      color: var(--amber);
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 0 22px;
    }

    .chap::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line)
    }

    .chap b {
      font-weight: 400;
      color: var(--txt-dim)
    }

    .h2 {
      font-size: clamp(29px, 4.5vw, 58px);
      line-height: 1.03;
      margin: 0 0 26px;
      letter-spacing: -.02em;
    }

    .h2 .grot {
      display: inline
    }

    h3.h3 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: -.012em;
      font-size: clamp(19px, 2.1vw, 26px);
      line-height: 1.14;
      margin: 0 0 14px;
      color: var(--chrome);
    }

    p {
      margin: 0 0 18px;
      max-width: 68ch;
      text-wrap: pretty
    }

    .lede {
      font-size: 17.5px;
      color: var(--chrome);
      max-width: 52ch
    }

    .body-col p:last-child {
      margin-bottom: 0
    }

    em {
      font-family: 'Newsreader', serif;
      font-style: italic;
      font-weight: 400;
      color: var(--amber);
      font-size: 1.06em
    }

    /* in-copy links */
    .body-col a:not(.btn):not(.row):not(.cta-band),
    .pr a:not(.btn) {
      color: var(--red-3);
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 77, 66, .4);
      transition: border-color .25s var(--ease), color .25s var(--ease);
    }

    @media(hover:hover) {

      .body-col a:not(.btn):not(.row):not(.cta-band):hover,
      .pr a:not(.btn):hover {
        color: var(--amber);
        border-bottom-color: var(--amber)
      }
    }

    .body-col a:not(.btn):not(.row):not(.cta-band):focus-visible,
    .pr a:not(.btn):focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px
    }

    /* ---------- marquee bulb frame (the signature) ---------- */
    .bulbs {
      position: absolute;
      inset: 0;
      pointer-events: none
    }

    .bulbs i {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--amber);
      box-shadow: 0 0 7px 1px rgba(240, 223, 174, .55);
      animation: bulb 2.4s var(--ease) infinite;
    }

    @keyframes bulb {

      0%,
      100% {
        opacity: .28;
        transform: scale(.86)
      }

      45% {
        opacity: 1;
        transform: scale(1)
      }
    }

    /* ---------- reveal primitive ---------- */
    .ro {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1s var(--ease), transform 1s var(--ease)
    }

    .ro.in {
      opacity: 1;
      transform: none
    }

    .d1 {
      transition-delay: .08s
    }

    .d2 {
      transition-delay: .16s
    }

    .d3 {
      transition-delay: .24s
    }

    .d4 {
      transition-delay: .32s
    }

    /* ---------- folio ---------- */
    .folio {
      height: var(--folio);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-bottom: 1px solid var(--line-soft);
      background: var(--night);
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--txt-dim);
      position: relative;
      z-index: 60;
    }

    .folio .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      width: 100%
    }

    .folio .fo-mid {
      color: var(--amber)
    }

    .folio span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    /* ---------- smart bar ---------- */
    .bar {
      position: sticky;
      top: 0;
      z-index: 70;
      height: var(--bar);
      background: rgba(7, 12, 24, .92);
      backdrop-filter: blur(11px);
      border-bottom: 1px solid var(--line);
      transition: transform .5s var(--ease);
    }

    .bar .wrap {
      height: 100%;
      display: flex;
      align-items: center;
      gap: 22px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      text-decoration: none;
      margin-right: auto
    }

    .brand img {
      height: 46px;
      width: auto
    }

    .brand-txt {
      display: flex;
      flex-direction: column;
      line-height: 1
    }

    .bt1 {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 8.5px;
      letter-spacing: .34em;
      color: var(--amber);
      text-transform: uppercase
    }

    .bt2 {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      text-transform: uppercase;
      font-size: 14.5px;
      letter-spacing: -.02em;
      color: var(--chrome);
      margin-top: 4px
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 2px
    }

    .nav>li {
      list-style: none;
      position: relative
    }

    .nav a {
      display: block;
      text-decoration: none;
      padding: 9px 11px;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--txt-dim);
      white-space: nowrap;
      transition: color .22s var(--ease);
    }

    .nav>li>a {
      display: flex;
      align-items: center;
      gap: 5px
    }

    .nav>li>a .cv {
      width: 7px;
      height: 7px;
      border-right: 1.4px solid currentColor;
      border-bottom: 1.4px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
      transition: transform .3s var(--ease)
    }

    .nav ul {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 266px;
      margin: 0;
      padding: 8px 0;
      background: var(--night-2);
      border: 1px solid var(--line);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
      box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
    }

    .nav ul li {
      list-style: none
    }

    .nav ul a {
      padding: 8px 16px;
      letter-spacing: .1em;
      font-size: 10px
    }

    @media(hover:hover) {
      .nav>li:hover>ul {
        opacity: 1;
        visibility: visible;
        transform: none
      }

      .nav>li:hover>a .cv {
        transform: rotate(45deg) translateY(1px)
      }

      .nav a:hover {
        color: var(--amber)
      }
    }

    .nav>li:nth-last-child(2)>ul {
      left: auto;
      right: 0
    }

    .nav>li:focus-within>ul {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    .nav a:focus-visible {
      outline: 1px solid var(--amber);
      outline-offset: -2px;
      color: var(--amber)
    }

    .nav a.on {
      color: var(--chrome)
    }

    .bar-cta {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: 14px;
      letter-spacing: -.01em;
      color: var(--chrome);
      background: var(--red);
      padding: 10px 17px;
      position: relative;
      overflow: hidden;
      white-space: nowrap;
    }

    .bar-cta span {
      position: relative;
      z-index: 2
    }

    .bar-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--red-deep);
      transform: translateX(-101%);
      transition: transform .5s var(--ease)
    }

    @media(hover:hover) {
      .bar-cta:hover::before {
        transform: none
      }
    }

    .bar-cta:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 2px
    }

    .burger {
      display: none;
      background: none;
      border: 1px solid var(--line);
      color: var(--chrome);
      width: 40px;
      height: 36px;
      cursor: pointer;
      padding: 0;
      align-items: center;
      justify-content: center
    }

    .burger i {
      display: block;
      width: 17px;
      height: 1.4px;
      background: currentColor;
      position: relative
    }

    .burger i::before,
    .burger i::after {
      content: "";
      position: absolute;
      left: 0;
      width: 17px;
      height: 1.4px;
      background: currentColor
    }

    .burger i::before {
      top: -5px
    }

    .burger i::after {
      top: 5px
    }

    /* mobile drawer */
    .drawer {
      position: fixed;
      inset: var(--bar) 0 0;
      z-index: 65;
      background: var(--night-2);
      overflow-y: auto;
      padding: 20px 26px 60px;
      transform: translateY(-8px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
    }

    .drawer.open {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    .drawer h4 {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--amber);
      margin: 26px 0 8px;
      font-weight: 400;
    }

    .drawer a {
      display: block;
      text-decoration: none;
      color: var(--txt);
      padding: 8px 0;
      border-bottom: 1px solid var(--line-soft);
      font-size: 14.5px
    }

    /* ---------- HERO ---------- */
    .hero {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--line)
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: url('/assets/img/services/windshield-replacement.jpg') center 42%/cover no-repeat;
      opacity: .30;
      filter: grayscale(.3) contrast(1.06);
    }

    .hero-veil {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(760px 460px at 78% 12%, rgba(226, 32, 31, .16), transparent 70%),
        radial-gradient(680px 520px at 12% 88%, rgba(17, 29, 58, .9), transparent 72%),
        linear-gradient(180deg, rgba(7, 12, 24, .62) 0%, rgba(7, 12, 24, .86) 58%, var(--night) 100%);
    }

    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 74px 1.32fr .78fr;
      gap: 0 46px;
      align-items: stretch;
      padding-top: clamp(52px, 7.6vh, 92px);
      padding-bottom: clamp(56px, 8vh, 104px);
    }

    .rail {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
      border-right: 1px solid var(--line);
      padding-right: 20px
    }

    .rail-txt {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .42em;
      text-transform: uppercase;
      color: var(--txt-dim);
      white-space: nowrap;
    }

    .rail-seal {
      width: 34px;
      height: 34px;
      border: 1px solid var(--red-2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      font-size: 12px;
      color: var(--red-3);
      flex: none;
    }

    .rail-line {
      flex: 1;
      width: 1px;
      background: linear-gradient(180deg, var(--line), transparent)
    }

    .eyebrow {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 10px;
      letter-spacing: .34em;
      text-transform: uppercase;
      color: var(--amber);
      margin: 0 0 22px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .eyebrow .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--red-2);
      box-shadow: 0 0 0 0 rgba(226, 32, 31, .55);
      animation: ping 2s ease-in-out infinite
    }

    @keyframes ping {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(226, 32, 31, .5)
      }

      50% {
        box-shadow: 0 0 0 7px rgba(226, 32, 31, 0)
      }
    }

    h1 {
      margin: 0 0 26px;
      font-size: clamp(30px, 4.32vw, 63px);
      line-height: 1.0;
      letter-spacing: -.02em;
      color: var(--chrome);
    }

    h1 .ln {
      display: block;
      overflow: hidden;
      padding: .05em 0
    }

    h1 .ln>span {
      display: block;
      white-space: nowrap;
      transform: translateY(106%);
      animation: up 1.05s var(--ease) forwards
    }

    h1 .ln:nth-child(1)>span {
      animation-delay: .10s
    }

    h1 .ln:nth-child(2)>span {
      animation-delay: .20s
    }

    h1 .ln:nth-child(3)>span {
      animation-delay: .30s
    }

    h1 .ln:nth-child(4)>span {
      animation-delay: .40s
    }

    @keyframes up {
      to {
        transform: translateY(0)
      }
    }

    h1 .ser {
      font-size: 1.06em
    }

    .lead {
      display: flex;
      flex-direction: column
    ;min-width:0}

    .hero-lede {
      opacity: 0;
      animation: fadein .9s var(--ease) .66s forwards
    }

    /* in-copy links inside a hero lede (docx hyperlinks carried into the hero).
       .body-col's link rule can't reach here, and a{color:inherit} would render
       the link as plain text. --red-3 scores 5.95:1 on --night and 5.07:1 on the
       lightest veil ground (--night-3) — AA for normal text either way. */
    .lede a {
      color: var(--red-3);
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 77, 66, .4);
      /* legal pages carry the bare website URL as link text — let it break
         rather than push the hero into horizontal overflow on narrow screens */
      overflow-wrap: anywhere;
      transition: border-color .25s var(--ease), color .25s var(--ease);
    }

    .lede a:hover {
      color: var(--amber);
      border-bottom-color: var(--amber)
    }

    .lede a:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px
    }

    .cover {
      margin-top: auto;
      padding-top: 26px;
      border-top: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 18px;
      opacity: 0;
      animation: fadein .9s var(--ease) 1.05s forwards;
    }

    .cover .cl {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--amber);
      white-space: nowrap;
    }

    .cover a {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--txt-dim);
      text-decoration: none;
      white-space: nowrap;
      border-bottom: 1px solid transparent;
      transition: color .25s var(--ease), border-color .25s var(--ease);
    }

    @media(hover:hover) {
      .cover a:hover {
        color: var(--chrome);
        border-bottom-color: var(--red-2)
      }
    }

    .cover a:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px
    }

    .acts {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
      opacity: 0;
      animation: fadein .9s var(--ease) .80s forwards
    }

    @keyframes fadein {
      to {
        opacity: 1
      }
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -.01em;
      font-size: 16px;
      padding: 15px 26px;
      color: var(--chrome);
      background: var(--red);
      border: 1px solid var(--red);
    }

    .btn span {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 11px
    }

    .btn::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--red-deep), #a30d0d);
      transform: translateX(-101%);
      transition: transform .5s var(--ease)
    }

    .btn.ghost {
      background: transparent;
      border-color: var(--line);
      color: var(--chrome)
    }

    .btn.ghost::before {
      background: var(--night-3)
    }

    @media(hover:hover) {
      .btn:hover::before {
        transform: none
      }

      .btn:hover .arw {
        transform: translateX(5px)
      }
    }

    .btn:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px
    }

    .arw {
      transition: transform .45s var(--ease)
    }

    /* credential plate */
    .plate {
      position: relative;
      border: 1px solid var(--line);
      background: rgba(12, 20, 40, .72);
      padding: 24px
    }

    .plate::before,
    .plate::after {
      content: "";
      position: absolute;
      width: 13px;
      height: 13px;
      border: 2px solid var(--red-2)
    }

    .plate::before {
      top: -1px;
      left: -1px;
      border-right: 0;
      border-bottom: 0
    }

    .plate::after {
      bottom: -1px;
      right: -1px;
      border-left: 0;
      border-top: 0
    }

    .pl-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--txt-dim);
      border-bottom: 1px solid var(--line);
      padding-bottom: 12px;
      margin-bottom: 18px;
    }

    .pl-head b {
      color: var(--amber);
      font-weight: 400
    }

    .emblem {
      margin: 0 auto 20px;
      max-width: 242px;
      filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .55))
    }

    .hero-plate {
      opacity: 0;
      animation: fadein .9s var(--ease) .95s forwards
    }

    .lead-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 11px;
      font-size: 13.5px
    }

    .lead-row .lb {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--txt-dim);
      white-space: nowrap
    }

    .lead-row .ld {
      flex: 1;
      border-bottom: 1px dotted rgba(242, 244, 248, .28);
      transform: translateY(-4px)
    }

    .lead-row .lv {
      white-space: nowrap;
      color: var(--chrome);
      font-weight: 600
    }

    .lead-row .lv a {
      text-decoration: none;
      color: var(--amber)
    }

    .pl-block {
      border-top: 1px solid var(--line-soft);
      padding-top: 14px;
      margin-top: 16px
    }

    .pl-block .lb {
      display: block;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--txt-dim);
      margin-bottom: 6px
    }

    .pl-block p {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.6;
      color: var(--chrome)
    }

    .hero-plate {
      padding-bottom: 78px
    }

    .hero-plate .pl-block:last-of-type p {
      max-width: 72%
    }

    .stamp {
      position: absolute;
      right: -18px;
      bottom: -20px;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      border: 1px dashed rgba(240, 223, 174, .5);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 8px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--amber);
      transform: rotate(-13deg);
      background: rgba(7, 12, 24, .86);
      line-height: 1.5;
      padding: 8px;
    }

    /* ---------- ticker ---------- */
    .ticker {
      border-top: 2px solid var(--red);
      border-bottom: 2px solid var(--red);
      background: var(--night-2);
      overflow: hidden;
      padding: 15px 0;
      position: relative;
    }

    .ticker::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(-45deg, rgba(242, 244, 248, .03) 0 1px, transparent 1px 11px)
    }

    .tk-track {
      display: flex;
      width: max-content;
      animation: marq 34s linear infinite
    }

    .ticker:hover .tk-track {
      animation-play-state: paused
    }

    .tk-track span {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      text-transform: uppercase;
      font-size: 17px;
      letter-spacing: -.01em;
      color: var(--chrome);
      padding: 0 22px;
      white-space: nowrap;
    }

    .tk-track span.i {
      font-family: 'Newsreader', serif;
      font-style: italic;
      font-weight: 300;
      text-transform: none;
      color: var(--amber);
      letter-spacing: 0
    }

    .tk-track span.s {
      color: var(--red-3)
    }

    @keyframes marq {
      to {
        transform: translateX(-50%)
      }
    }

    /* ---------- editorial grids ---------- */
    .duo {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: clamp(28px, 4.4vw, 64px);
      align-items: start
    }

    .duo.rev .fig {
      order: 2
    }

    .duo-wide {
      display: grid;
      grid-template-columns: 230px 1fr;
      gap: clamp(24px, 4vw, 56px);
      align-items: start
    }

    .side-label {
      position: sticky;
      top: calc(var(--bar) + 26px);
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--txt-dim);
      line-height: 2;
      border-top: 2px solid var(--red);
      padding-top: 14px;
    }

    .side-label b {
      display: block;
      color: var(--amber);
      font-weight: 400
    }

    .tail {
      margin-top: 26px;
      padding-top: 22px;
      border-top: 1px solid var(--line-soft);
      max-width: none;
      columns: 2;
      column-gap: clamp(28px, 4vw, 56px)
    }

    .tail p {
      max-width: none;
      break-inside: avoid
    }

    .tail p:last-child {
      margin-bottom: 0
    }

    @media (max-width:860px) {
      .tail {
        columns: 1
      }
    }

    .cols2 {
      columns: 2;
      column-gap: clamp(28px, 4vw, 56px)
    }

    .cols2 p {
      max-width: none;
      break-inside: avoid
    }

    .cols2 p:last-child {
      margin-bottom: 0
    }

    @media (max-width:860px) {
      .cols2 {
        columns: 1
      }
    }

    /* figure columns fill their row so photo and copy share a baseline */
    .duo.pic {
      align-items: stretch
    }

    .duo.pic .fig {
      display: flex;
      flex-direction: column
    }

    .duo.pic .fig-w {
      flex: 1;
      min-height: 0
    }

    .duo.pic .fig img {
      height: 100%;
      object-fit: cover
    }

    @media (max-width:980px) {
      .duo.pic .fig-w {
        flex: none
      }

      .duo.pic .fig img {
        height: auto
      }
    }

    .fig {
      position: relative
    }

    .fig img {
      width: 100%;
      height: auto;
      filter: grayscale(.22) contrast(1.04);
      transition: filter .6s var(--ease), transform .6s var(--ease)
    }

    .fig-w {
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--night-2)
    }

    @media(hover:hover) {
      .fig:hover img {
        filter: none;
        transform: scale(1.03)
      }
    }

    .fig-cap {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
      margin-top: 11px;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--txt-dim);
    }

    .fig-cap b {
      color: var(--amber);
      font-weight: 400
    }

    /* ---------- ruled rows ---------- */
    .rows {
      border-top: 2px solid var(--chrome);
      margin-top: 8px
    }

    .row {
      position: relative;
      display: grid;
      grid-template-columns: 78px auto 1fr auto;
      gap: 20px;
      align-items: center;
      border-bottom: 1px solid var(--line);
      padding: 20px 0;
      text-decoration: none;
      overflow: hidden;
      transition: padding-left .5s var(--ease);
    }

    .row::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(90deg, rgba(226, 32, 31, .20), rgba(226, 32, 31, 0) 72%);
      transform: translateX(-101%);
      transition: transform .5s var(--ease)
    }

    .row>* {
      position: relative;
      z-index: 1
    }

    .row .rn {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 10px;
      letter-spacing: .2em;
      color: var(--txt-dim)
    }

    .row .rt {
      margin: 0;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: clamp(15px, 1.7vw, 20px);
      letter-spacing: -.012em;
      color: var(--chrome);
      line-height: 1.2
    }

    .row .rl {
      border-bottom: 1px dotted rgba(242, 244, 248, .20);
      transform: translateY(-3px);
      min-width: 24px
    }

    .row .rc {
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 50%;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--chrome);
      transition: background .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
    }

    @media(hover:hover) {
      .row:hover {
        padding-left: 20px
      }

      .row:hover::before {
        transform: none
      }

      .row:hover .rc {
        background: var(--red-2);
        border-color: var(--red-2);
        color: #fff;
        transform: rotate(-45deg)
      }

      .row:hover .rt {
        color: #fff
      }
    }

    .row:focus-visible {
      outline: 1px solid var(--amber);
      outline-offset: -3px
    }

    .row:focus-visible .rc {
      background: var(--red-2);
      border-color: var(--red-2);
      color: #fff;
      transform: rotate(-45deg)
    }

    /* ---------- service dossiers ---------- */
    .dossier {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(12, 20, 40, .85), rgba(7, 12, 24, .4));
      position: relative
    }

    .dos-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding: 20px 26px;
      border-bottom: 1px solid var(--line);
      background: rgba(17, 29, 58, .55);
    }

    .dos-head .n {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 10px;
      letter-spacing: .28em;
      color: var(--amber);
      text-transform: uppercase
    }

    .dos-body {
      padding: 26px;
      columns: 2;
      column-gap: 44px
    }

    .dos-body p {
      max-width: none;
      break-inside: avoid
    }

    .dos-body p:last-child {
      margin-bottom: 0
    }

    /* ---------- inverted light band ---------- */
    .band-light {
      background: var(--chrome);
      color: var(--ink);
      position: relative;
      border-top: 3px solid var(--red);
      border-bottom: 3px solid var(--red)
    }

    .band-light::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(-45deg, rgba(8, 13, 26, .028) 0 1px, transparent 1px 12px)
    }

    .band-light .wrap {
      position: relative;
      z-index: 1
    }

    .band-light p {
      color: var(--ink-soft)
    }

    .band-light .chap {
      color: var(--red)
    }

    .band-light .chap::after {
      background: rgba(8, 13, 26, .16)
    }

    .band-light .chap b {
      color: var(--ink-soft)
    }

    .band-light .h2 {
      color: var(--ink)
    }

    .band-light .out {
      -webkit-text-stroke: 2px var(--ink)
    }

    .band-light .rd {
      color: var(--red)
    }

    .band-light .ser {
      color: var(--ink)
    }

    .band-light em {
      color: var(--red)
    }

    .band-light .side-label {
      color: var(--ink-soft)
    }

    .band-light .btn.ghost {
      border-color: rgba(8, 13, 26, .3);
      color: var(--ink)
    }

    .band-light .btn.ghost::before {
      background: rgba(8, 13, 26, .09)
    }

    .band-light .side-label b {
      color: var(--red)
    }

    /* ---------- testimonials ---------- */
    .quotes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
      align-items: start
    }

    .quotes>*:nth-child(2) {
      margin-top: 34px
    }

    .quotes>*:nth-child(3) {
      margin-top: 68px
    }

    .qt {
      border-top: 2px solid var(--red);
      padding-top: 22px;
      position: relative
    }

    .qt .mark {
      font-family: 'Newsreader', serif;
      font-style: italic;
      font-size: 74px;
      line-height: .6;
      color: var(--red-2);
      opacity: .42;
      position: absolute;
      left: -10px;
      top: 22px;
      pointer-events: none
    }

    .qt-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 6px
    }

    .qt-name a {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 14px;
      letter-spacing: -.005em;
      color: var(--chrome);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color .3s var(--ease), color .3s var(--ease);
    }

    @media(hover:hover) {
      .qt-name a:hover {
        color: var(--amber);
        border-bottom-color: var(--amber)
      }
    }

    .qt-name a:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px
    }

    .stars {
      color: var(--amber);
      font-size: 12px;
      letter-spacing: 2px;
      white-space: nowrap
    }

    .qt p {
      font-size: 14.5px;
      line-height: 1.72;
      color: var(--txt);
      max-width: none;
      margin: 0
    }

    .qt .qbody {
      max-height: 250px;
      overflow: hidden;
      position: relative;
      transition: max-height .6s var(--ease)
    }

    .qt.open .qbody {
      max-height: 1800px
    }

    .qt .qbody::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 76px;
      background: linear-gradient(180deg, transparent, var(--night));
      transition: opacity .4s var(--ease)
    }

    .qt.open .qbody::after {
      opacity: 0
    }

    .qmore {
      margin-top: 12px;
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--amber);
    }

    .qmore:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px
    }

    /* ---------- CTA marquee band ---------- */
    .cta-band {
      display: block;
      text-decoration: none;
      background: var(--red);
      overflow: hidden;
      border-top: 2px solid var(--red-deep);
      border-bottom: 2px solid var(--red-deep);
      padding: 22px 0;
      transition: background .45s var(--ease)
    }

    .cta-band .tk-track {
      animation-duration: 26s
    }

    .cta-band .tk-track span {
      color: #fff;
      font-size: clamp(20px, 2.7vw, 34px);
      padding: 0 20px
    }

    .cta-band .tk-track span.i {
      color: rgba(255, 255, 255, .8)
    }

    @media(hover:hover) {
      .cta-band:hover {
        background: var(--red-deep)
      }
    }

    .cta-band:focus-visible {
      outline: 3px solid var(--amber);
      outline-offset: -6px
    }

    /* ---------- quote form plate (lit sign face) ---------- */
    .qform {
      background: var(--chrome);
      color: var(--ink);
      position: relative;
      padding: 0;
      border: 1px solid var(--line)
    }

    .qform::before,
    .qform::after {
      content: "";
      position: absolute;
      width: 15px;
      height: 15px;
      border: 2px solid var(--red);
      z-index: 2
    }

    .qform::before {
      top: -1px;
      left: -1px;
      border-right: 0;
      border-bottom: 0
    }

    .qform::after {
      bottom: -1px;
      right: -1px;
      border-left: 0;
      border-top: 0
    }

    .qf-head {
      padding: 24px 26px 20px;
      border-bottom: 1px solid rgba(8, 13, 26, .14)
    }

    .qf-head .qk {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--red);
      margin: 0 0 10px;
    }

    .qf-head h2 {
      font-size: clamp(25px, 2.9vw, 36px);
      line-height: 1.02;
      margin: 0 0 8px;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    .qf-head p {
      margin: 0;
      font-size: 14px;
      color: var(--ink-soft);
      max-width: none
    }

    .qf-trust {
      display: flex;
      gap: 0;
      border-bottom: 1px solid rgba(8, 13, 26, .14);
      background: #e8ecf3
    }

    .qf-trust div {
      flex: 1;
      text-align: center;
      padding: 11px 6px;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 8.5px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ink-soft);
    }

    .qf-trust div+div {
      border-left: 1px solid rgba(8, 13, 26, .12)
    }

    .qf-body {
      padding: 24px 26px 26px
    }

    .fgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px
    }

    .fg {
      margin-bottom: 18px
    }

    .fg label {
      display: block;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 7px;
      transition: color .22s var(--ease);
    }

    .fg:focus-within label {
      color: var(--red)
    }

    .fg .req {
      color: var(--red)
    }

    .fg input,
    .fg textarea {
      width: 100%;
      background: transparent;
      border: 0;
      border-bottom: 1px solid rgba(8, 13, 26, .26);
      padding: 9px 2px;
      font-family: 'Manrope', sans-serif;
      font-size: 15px;
      color: var(--ink);
      transition: border-color .25s var(--ease);
    }

    .fg textarea {
      resize: vertical;
      min-height: 84px;
      line-height: 1.6
    }

    .fg input:focus,
    .fg textarea:focus {
      outline: 0;
      border-bottom-color: var(--red);
      border-bottom-width: 2px;
      padding-bottom: 8px
    }

    .fg input::placeholder,
    .fg textarea::placeholder {
      color: #5c6780
    }

    .cap {
      border: 1px solid rgba(8, 13, 26, .16);
      background: #e8ecf3;
      padding: 15px;
      margin-bottom: 18px
    }

    .cap-h {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 11px
    }

    .cap-row {
      display: flex;
      align-items: flex-end;
      gap: 12px;
      flex-wrap: wrap
    }

    .cap-row img {
      flex: 0 0 auto;
      border: 1px solid rgba(8, 13, 26, .2);
      cursor: pointer;
      background: #fff;
      width: 140px;
      height: 44px
    }

    .cap-row .capf {
      flex: 1;
      min-width: 150px
    }

    .cap-row .capf input {
      height: 44px;
      border-bottom-color: rgba(8, 13, 26, .3)
    }

    .cap-rf {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      background: none;
      border: 1px solid rgba(8, 13, 26, .2);
      color: var(--ink-soft);
      width: 44px;
      height: 44px;
      cursor: pointer;
      font-size: 17px;
      line-height: 1;
      transition: background .25s var(--ease), color .25s var(--ease)
    }

    /* While a new question loads, spin the glyph — not the box. */
    .cap-rf.is-loading {
      pointer-events: none
    }

    .cap-rf.is-loading span {
      display: inline-block;
      animation: cap-spin .6s linear infinite
    }

    @keyframes cap-spin {
      to {
        transform: rotate(360deg)
      }
    }

    @media(hover:hover) {
      .cap-rf:hover {
        background: var(--red);
        color: #fff;
        border-color: var(--red)
      }
    }

    .sub-btn {
      width: 100%;
      border: 0;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      background: var(--red);
      color: #fff;
      padding: 16px 20px;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      text-transform: uppercase;
      font-size: 16px;
      letter-spacing: -.01em;
    }

    .sub-btn span {
      position: relative;
      z-index: 2
    }

    .sub-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--red-deep), #a30d0d);
      transform: translateX(-101%);
      transition: transform .5s var(--ease)
    }

    @media(hover:hover) {
      .sub-btn:hover::before {
        transform: none
      }
    }

    .sub-btn:focus-visible {
      outline: 3px solid var(--ink);
      outline-offset: -4px
    }

    .f-priv {
      margin: 14px 0 0;
      font-size: 11.5px;
      color: var(--ink-soft);
      text-align: center;
      max-width: none;
      font-family: 'Spline Sans Mono', monospace;
      letter-spacing: .06em
    }

    #red_response {
      margin-bottom: 14px;
      font-size: 14px
    }

    #red_response p {
      max-width: none;
      margin: 0
    }

    #red_response .error,
    #red_response p.error {
      color: var(--red)
    }

    #red_response .success,
    #red_response p.success {
      color: #1a7f4b
    }

    .spin {
      display: none;
      width: 15px;
      height: 15px;
      border: 2px solid rgba(255, 255, 255, .4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: sp .8s linear infinite;
      vertical-align: -2px;
      margin-left: 8px
    }

    @keyframes sp {
      to {
        transform: rotate(360deg)
      }
    }

    /* ---------- accordion ---------- */
    .acc {
      border-top: 2px solid var(--chrome)
    }

    .acc details {
      border-bottom: 1px solid var(--line)
    }

    .acc summary {
      list-style: none;
      cursor: pointer;
      display: grid;
      grid-template-columns: 1fr 34px;
      gap: 16px;
      align-items: center;
      padding: 17px 0;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 14.5px;
      letter-spacing: -.008em;
      color: var(--chrome);
      transition: color .25s var(--ease);
    }

    .acc summary::-webkit-details-marker {
      display: none
    }

    .acc summary h3 {
      margin: 0;
      font: inherit;
      color: inherit;
      letter-spacing: inherit
    }

    .acc summary .chip {
      width: 34px;
      height: 34px;
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      line-height: 1;
      color: var(--amber);
      transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
    }

    @media(hover:hover) {
      .acc summary:hover {
        color: var(--amber)
      }
    }

    .acc summary:focus-visible {
      outline: 1px solid var(--amber);
      outline-offset: -2px
    }

    .acc details[open] .chip {
      transform: rotate(45deg);
      background: var(--red-2);
      border-color: var(--red-2);
      color: #fff
    }

    .acc .ans {
      padding: 0 52px 20px 0;
      animation: ansin .55s var(--ease)
    }

    @keyframes ansin {
      from {
        opacity: 0;
        transform: translateY(-8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .acc .ans p {
      margin: 0 0 10px;
      font-size: 14.5px
    }

    .acc .ans a {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .1em;
      color: var(--amber);
      text-decoration: none;
      border-bottom: 1px solid rgba(240, 223, 174, .35);
      word-break: break-all;
    }

    @media(hover:hover) {
      .acc .ans a:hover {
        color: var(--red-3);
        border-bottom-color: var(--red-3)
      }
    }

    .acc .ans a:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px
    }

    /* ---------- maps ---------- */
    .map {
      border: 1px solid var(--line);
      overflow: hidden;
      background: var(--night-2)
    }

    .duo.mapduo {
      align-items: stretch
    }

    .duo.mapduo .map {
      display: flex
    }

    .duo.mapduo .map iframe {
      height: 100%;
      min-height: 420px
    }

    @media (max-width:980px) {
      .duo.mapduo .map iframe {
        height: 420px
      }
    }

    .map iframe {
      display: block;
      width: 100%;
      border: 0;
      filter: grayscale(1) invert(.9) hue-rotate(180deg) contrast(.86);
      transition: filter .6s var(--ease)
    }

    @media(hover:hover) {
      .map:hover iframe {
        filter: none
      }
    }

    /* ---------- contact plate ---------- */
    .cgrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line)
    }

    .cgrid .ci {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 24px
    }

    .cgrid .ci .lb {
      display: block;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--amber);
      margin-bottom: 10px
    }

    .cgrid .ci p {
      margin: 0;
      font-size: 15px;
      color: var(--chrome);
      max-width: none
    }

    .cgrid .ci a {
      color: var(--chrome);
      text-decoration: none;
      border-bottom: 1px solid var(--line);
      transition: color .25s var(--ease), border-color .25s var(--ease)
    }

    @media(hover:hover) {
      .cgrid .ci a:hover {
        color: var(--amber);
        border-bottom-color: var(--amber)
      }
    }

    .cgrid .ci a:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px
    }

    /* ---------- colophon ---------- */
    .colophon {
      background: var(--night-2);
      border-top: 1px solid var(--line);
      padding: clamp(52px, 7vh, 84px) 0 0
    }

    .col-grid {
      display: grid;
      grid-template-columns: 1.05fr .78fr .78fr .9fr;
      gap: clamp(24px, 3.2vw, 48px)
    }

    .colophon h4 {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--amber);
      margin: 0 0 16px;
      font-weight: 400;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }

    .colophon ul {
      margin: 0;
      padding: 0;
      list-style: none
    }

    .colophon li a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--txt);
      font-size: 14px;
      padding: 6px 0;
      transition: color .25s var(--ease), transform .35s var(--ease);
    }

    .colophon li a::before {
      content: "";
      width: 11px;
      height: 1px;
      background: var(--red-2);
      transition: width .35s var(--ease)
    }

    @media(hover:hover) {
      .colophon li a:hover {
        color: var(--amber)
      }

      .colophon li a:hover::before {
        width: 20px
      }
    }

    .colophon li a:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 2px
    }

    .col-brand img {
      max-width: 190px;
      margin-bottom: 18px
    }

    .col-contact p {
      margin: 0 0 9px;
      font-size: 13.5px;
      max-width: none
    }

    .col-contact b {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--txt-dim);
      font-weight: 400;
      display: block;
      margin-bottom: 2px
    }

    .col-contact a {
      color: var(--chrome);
      text-decoration: none;
      border-bottom: 1px solid var(--line)
    }

    .col-bar {
      margin-top: clamp(36px, 5vh, 58px);
      border-top: 1px solid var(--line);
      padding: 20px 0 26px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px 26px;
      justify-content: space-between;
      align-items: center;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--txt-dim);
    }

    .col-bar a {
      color: var(--chrome);
      text-decoration: none
    }

    .weather-wrap {
      padding: 0 0 clamp(40px, 6vh, 70px)
    }

    .weatherwidget-io {
      display: block
    }

    /* ---------- scroll progress + to-top ---------- */
    .prog {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 100%;
      background: var(--red-2);
      z-index: 99;
      transform: scaleX(0);
      transform-origin: 0 50%
    }

    .totop {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 80;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      background: rgba(12, 20, 40, .9);
      color: var(--chrome);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background .3s var(--ease);
    }

    .totop.on {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    @media(hover:hover) {
      .totop:hover {
        background: var(--red-2);
        border-color: var(--red-2)
      }
    }

    .totop:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px
    }

    .duo.city {
      grid-template-columns: 408px 1fr
    }

    .duo.city .fig-w {
      max-width: 408px
    }

    .duo.city .tail {
      columns: 1
    }

    @media (max-width:980px) {
      .duo.city {
        grid-template-columns: 1fr
      }
    }

    /* ---------- cursor peek card (service rows) ---------- */
    .peek {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 95;
      width: 236px;
      pointer-events: none;
      background: var(--night-2);
      border: 1px solid var(--red-2);
      opacity: 0;
      transition: opacity .35s var(--ease);
      will-change: transform;
      box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
    }

    .peek.on {
      opacity: 1
    }

    .peek img {
      width: 100%;
      height: 148px;
      object-fit: cover;
      display: block
    }

    .peek .pk-l {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--amber);
      padding: 9px 11px;
      border-top: 1px solid var(--line);
    }

    @media (pointer:coarse) {
      .peek {
        display: none
      }
    }

    /* ---------- work grid ---------- */
    .work {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px
    }

    .work figure {
      margin: 0
    }

    .wk {
      position: relative
    }

    .wk .wk-w {
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--night-2);
      aspect-ratio: 4/3
    }

    .wk img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(.24) contrast(1.05);
      transition: filter .6s var(--ease), transform .6s var(--ease)
    }

    .wk .wk-c {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
      position: relative;
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--txt-dim);
    }

    .wk .wk-c::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      width: 26px;
      height: 2px;
      background: var(--red-2);
      transition: width .55s var(--ease)
    }

    .wk .wk-c b {
      color: var(--amber);
      font-weight: 400
    }

    @media(hover:hover) {
      .wk:hover img {
        filter: none;
        transform: scale(1.035)
      }

      .wk:hover .wk-c::before {
        width: 100%
      }
    }

    /* ---------- responsive ---------- */
    @media (max-width:1180px) {
      .nav {
        display: none
      }

      .burger {
        display: flex
      }

      .hero-grid {
        grid-template-columns: 64px 1.15fr .85fr;
        gap: 0 32px
      }
    }

    @media (max-width:980px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 38px
      }

      .rail {
        display: none
      }

      .duo,
      .duo.rev {
        grid-template-columns: 1fr
      }

      .duo.rev .fig {
        order: 0
      }

      .duo-wide {
        grid-template-columns: 1fr;
        gap: 22px
      }

      .side-label {
        position: static;
        border-top: 2px solid var(--red);
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        align-items: baseline
      }

      .side-label b {
        display: inline
      }

      .dos-body {
        columns: 1
      }

      .quotes {
        grid-template-columns: 1fr
      }

      .quotes>*:nth-child(2),
      .quotes>*:nth-child(3) {
        margin-top: 0
      }

      .work {
        grid-template-columns: 1fr 1fr
      }

      .col-grid {
        grid-template-columns: 1fr 1fr
      }

      .col-brand {
        grid-column: 1/-1
      }
    }

    @media (max-width:860px) {
      .fgrid {
        grid-template-columns: 1fr;
        gap: 0
      }

      .cgrid {
        grid-template-columns: 1fr
      }

      .qt .qbody {
        max-height: none
      }

      .qt .qbody::after {
        display: none
      }

      .qmore {
        display: none
      }
    }

    @media (max-width:760px) {
      body {
        font-size: 16px
      }

      .folio .fo-hide {
        display: none
      }

      .row {
        grid-template-columns: 58px 1fr auto;
        gap: 14px
      }

      .row .rl {
        display: none
      }

      .stamp {
        width: 82px;
        height: 82px;
        right: -8px;
        bottom: -14px;
        font-size: 7px
      }

      .acc .ans {
        padding-right: 0
      }

      .work {
        grid-template-columns: 1fr
      }

      .col-grid {
        grid-template-columns: 1fr
      }

      .brand img {
        height: 40px
      }
    }

    @media (max-width:560px) {
      .wrap {
        padding-left: 18px;
        padding-right: 18px
      }

      .emblem {
        max-width: 200px
      }

      .btn {
        font-size: 15px;
        padding: 14px 20px;
        width: 100%;
        justify-content: center
      }

      .acts {
        gap: 10px
      }

      .qf-trust div {
        font-size: 7.5px;
        letter-spacing: .12em
      }

      .dos-head {
        padding: 16px 18px
      }

      .dos-body,
      .qf-body,
      .qf-head {
        padding-left: 18px;
        padding-right: 18px
      }

      .plate {
        padding: 20px 18px
      }

      .cgrid .ci {
        padding: 20px 18px
      }
    }

    /* ---------- accessibility gates ---------- */
    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .001s !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important
      }

      html {
        scroll-behavior: auto
      }

      .ro,
      .hero-lede,
      .acts,
      .hero-plate {
        opacity: 1 !important;
        transform: none !important
      }

      h1 .ln>span {
        transform: none !important
      }

      .tk-track {
        animation: none !important
      }

      .bulbs i {
        opacity: .7 !important
      }
    }

    /* ---------- service rows: index / title / description / arrow ---------- */
    .rows.svc .row {
      grid-template-columns: 78px minmax(190px, .92fr) 1.45fr auto;
      align-items: center
    }

    .rows.svc .rd {
      font-size: 14px;
      line-height: 1.6;
      color: var(--txt-dim);
      margin: 0;
      max-width: none
    }

    @media(hover:hover) {
      .row:hover .rd {
        color: var(--txt)
      }
    }

    @media (max-width:900px) {

      /* restack — never drop the description */
      .rows.svc .row {
        grid-template-columns: 58px 1fr auto;
        grid-template-areas: "n t a" "n d a";
        row-gap: 6px;
        align-items: start;
        padding: 18px 0
      }

      .rows.svc .row .rn {
        grid-area: n;
        padding-top: 3px
      }

      .rows.svc .row .rt {
        grid-area: t
      }

      .rows.svc .row .rd {
        grid-area: d
      }

      .rows.svc .row .rc {
        grid-area: a;
        align-self: center
      }

      .rows.svc .row .rl {
        display: none
      }
    }

    /* ---------- ticked credential list ---------- */
    .checks {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px 26px
    }

    .checks li {
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 11px;
      align-items: start;
      padding: 11px 0;
      border-bottom: 1px solid var(--line-soft);
      font-size: 14.5px;
      line-height: 1.55;
    }

    .checks li svg {
      width: 20px;
      height: 20px;
      margin-top: 2px;
      flex: none;
      color: var(--red-3)
    }

    @media (max-width:760px) {
      .checks {
        grid-template-columns: 1fr
      }
    }

    .band-light .checks li {
      border-bottom-color: rgba(8, 13, 26, .12)
    }

    .band-light .checks li svg {
      color: var(--red)
    }

    /* ---------- reason cards (bold lead-in + explanation) ---------- */
    .reasons {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line)
    }

    .reasons .rz {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 24px;
      position: relative
    }

    .reasons .rz .rzn {
      font-family: 'Spline Sans Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .26em;
      color: var(--amber);
      display: block;
      margin-bottom: 12px;
    }

    .reasons .rz b {
      display: block;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 14.5px;
      line-height: 1.24;
      letter-spacing: -.008em;
      color: var(--chrome);
      margin: 0 0 9px;
    }

    .reasons .rz p {
      margin: 0;
      font-size: 14px;
      line-height: 1.65;
      color: var(--txt-dim);
      max-width: none
    }

    .reasons .rz::after {
      content: "";
      position: absolute;
      left: 0;
      top: -1px;
      width: 0;
      height: 2px;
      background: var(--red-2);
      transition: width .55s var(--ease)
    }

    @media(hover:hover) {
      .reasons .rz:hover::after {
        width: 100%
      }

      .reasons .rz:hover p {
        color: var(--txt)
      }
    }

    @media (max-width:860px) {
      .reasons {
        grid-template-columns: 1fr
      }
    }

    /* ---------- dispatch checklist (light band) ---------- */
    .prep {
      list-style: none;
      margin: 0;
      padding: 0;
      counter-reset: pp
    }

    .prep li {
      counter-increment: pp;
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 0 18px;
      align-items: start;
      padding: 18px 0;
      border-bottom: 1px solid var(--line);
    }

    .prep li::before {
      content: "0" counter(pp);
      font-family: 'Spline Sans Mono', monospace;
      font-size: 11px;
      letter-spacing: .14em;
      color: var(--red-3);
      padding-top: 3px;
      grid-column: 1;
      grid-row: 1 / span 2;
    }

    .prep li b {
      display: block;
      grid-column: 2;
      grid-row: 1;
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 14px;
      letter-spacing: -.005em;
      color: var(--chrome);
      margin-bottom: 5px;
    }

    .prep li span {
      grid-column: 2;
      grid-row: 2;
      font-size: 14.5px;
      line-height: 1.6;
      color: var(--txt)
    }

    /* .prep was first authored inside the inverted light band, so it carried the
       dark palette inline. It is now dark-ground-first like every other component
       — the light band re-inverts it here. */
    .band-light .prep li {
      border-bottom-color: rgba(8, 13, 26, .14)
    }

    .band-light .prep li b {
      color: var(--ink)
    }

    .band-light .prep li span {
      color: var(--ink-soft)
    }

    .band-light .prep li::before {
      color: var(--red)
    }

    @media (max-width:560px) {
      .prep li {
        grid-template-columns: 32px 1fr;
        gap: 0 12px
      }
    }

    .checks.one {
      grid-template-columns: 1fr
    }

    /* service-row CTA label (the client's own link wording) */
    .rcta {
      display: block;
      margin-top: 7px;
      font-family: 'Spline Sans Mono', monospace;
      font-weight: 400;
      font-size: 9.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--amber);
    }

    @media(hover:hover) {
      .row:hover .rcta {
        color: #fff
      }
    }

    /* inline "Call (702)… " sentences */
    .tel-line {
      margin-top: 22px;
      font-size: 16px
    }

    .tel-line a {
      text-decoration: none;
      color: var(--red-3);
      border-bottom: 1px solid rgba(255, 77, 66, .45)
    }

    .tel-line strong {
      font-family: 'Bricolage Grotesque', sans-serif;
      font-weight: 800;
      letter-spacing: -.01em
    }

    @media(hover:hover) {
      .tel-line a:hover {
        color: var(--amber);
        border-bottom-color: var(--amber)
      }
    }

    .tel-line a:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px
    }

    .band-light .tel-line a {
      color: var(--red);
      border-bottom-color: rgba(192, 0, 0, .4)
    }

    .band-light .tel-line {
      color: var(--ink)
    }

    /* ---------- neighbourhood note ---------- */
    .note {
      margin-top: 26px;
      padding: 18px 22px;
      border-left: 2px solid var(--red-2);
      background: rgba(17, 29, 58, .5);
      font-size: 14.5px;
      line-height: 1.7;
      color: var(--txt);
      max-width: none;
    }

/* ============================================================
   SERVICE / LOCATION PAGE COMPONENTS
   ============================================================ */

/* breadcrumb */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;
  font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--txt-dim);
}
.crumb a{color:var(--txt-dim);text-decoration:none;transition:color .25s var(--ease)}
.crumb span{color:var(--amber)}
.crumb i{font-style:normal;color:var(--red-2)}
@media(hover:hover){.crumb a:hover{color:var(--chrome)}}
.crumb a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* compact hero for inner pages */
.hero.compact .hero-grid{
  padding-top:clamp(38px,5vh,64px);padding-bottom:clamp(40px,5.5vh,72px);
}
.hero.compact h1{font-size:clamp(25px,3.25vw,46px)}

/* plain bulleted list in the page voice (docx list paragraphs) */
.blist{list-style:none;margin:0 0 18px;padding:0}
.blist li{
  position:relative;padding:8px 0 8px 22px;font-size:15px;line-height:1.6;
  border-bottom:1px solid var(--line-soft);
}
.blist li::before{
  content:"";position:absolute;left:0;top:17px;width:9px;height:1px;background:var(--red-2);
}
.blist.two{columns:2;column-gap:clamp(26px,4vw,54px)}
.blist.two li{break-inside:avoid}
@media (max-width:760px){.blist.two{columns:1}}
.band-light .blist li{border-bottom-color:rgba(8,13,26,.12)}
.band-light .blist li::before{background:var(--red)}

/* a bolded lead-in line that introduces a list ("Potential causes include:") */
.lead-in{
  margin:24px 0 10px;font-family:'Spline Sans Mono',monospace;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--amber);max-width:none;
}
.band-light .lead-in{color:var(--red)}

/* price rows */
.prices{border-top:2px solid var(--chrome);margin:0 0 22px}
.prices .pr-row{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.prices .pr-row span{font-size:15px;color:var(--txt)}
.prices .pr-row b{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;
  letter-spacing:-.01em;color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* review cards (location pages).
   Scoped to `.revs .rev` on purpose: a bare `.rev` also matches `.duo.rev`
   (the image-right modifier), which then picked up the red 2px card rule. */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.revs .rev{border-top:2px solid var(--red);padding-top:20px;position:relative}
.revs .rev .mark{
  font-family:'Newsreader',serif;font-style:italic;font-size:64px;line-height:.6;
  color:var(--red-2);opacity:.4;position:absolute;left:-8px;top:20px;pointer-events:none;
}
.revs .rev p{font-size:14.5px;line-height:1.72;color:var(--txt);max-width:none;margin:0 0 14px}
.revs .rev .who{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:13.5px;letter-spacing:-.005em;color:var(--chrome);
}
.revs .rev .who a{
  font-family:'Spline Sans Mono',monospace;font-weight:400;font-size:9.5px;letter-spacing:.2em;
  color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(240,223,174,.35);
}
@media(hover:hover){.revs .rev .who a:hover{color:var(--red-3);border-bottom-color:var(--red-3)}}
.revs .rev .who a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (max-width:900px){.revs{grid-template-columns:1fr}}

/* the client's "Name | Verified Google Review" separator */
.revs .rev .who i{font-style:normal;font-weight:400;color:var(--txt-dim)}

/* accordion on the inverted light band — the dark-ground colours are unreadable here */
.band-light .acc{border-top-color:var(--ink)}
.band-light .acc details{border-bottom-color:rgba(8,13,26,.16)}
.band-light .acc summary{color:var(--ink)}
.band-light .acc summary .chip{border-color:rgba(8,13,26,.25);color:var(--red)}
@media(hover:hover){.band-light .acc summary:hover{color:var(--red)}}
.band-light .acc summary:focus-visible{outline-color:var(--red)}
.band-light .acc details[open] .chip{background:var(--red);border-color:var(--red);color:#fff}
.band-light .acc .ans p{color:var(--ink-soft)}
.band-light .acc .ans a{color:var(--red);border-bottom-color:rgba(192,0,0,.35)}
@media(hover:hover){.band-light .acc .ans a:hover{color:var(--ink);border-bottom-color:var(--ink)}}

/* a heading that opens a sub-block partway down a column, after intro copy */
.h2-sub{margin-top:clamp(26px,3.4vh,38px);padding-top:clamp(22px,3vh,30px);border-top:1px solid var(--line)}
.band-light .h2-sub{border-top-color:rgba(8,13,26,.16)}

/* ======================================================================
   TIPS / ARTICLE PAGES (tips/*.php)
   Reuses the Midnight Marquee system; only the pieces an article needs
   that the service and location pages never did are added here.
   ====================================================================== */

/* reason cards built from real <h3> headings — the original rule only styled
   <b>, so an <h3> inside a card fell back to the UA default (also fixes
   adas-calibration.php, which already ships h3 inside .rz) */
.reasons .rz h3{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:14.5px;line-height:1.24;letter-spacing:-.008em;color:var(--chrome);margin:0 0 9px;
}
.band-light .reasons .rz h3{color:var(--ink)}
/* reason cards on the inverted light band: the dark-ground tokens are unreadable
   here — --txt-dim scores 2.06:1 and --amber 1.20:1 on --chrome (both fail AA).
   --ink-soft (8.52:1) and --red (5.88:1) take over, and the hairlines flip to ink
   alpha so the grid rules stay visible on light paper. */
.band-light .reasons{border-top-color:rgba(8,13,26,.16);border-left-color:rgba(8,13,26,.16)}
.band-light .reasons .rz{border-right-color:rgba(8,13,26,.16);border-bottom-color:rgba(8,13,26,.16)}
.band-light .reasons .rz .rzn{color:var(--red)}
.band-light .reasons .rz p{color:var(--ink-soft)}
.band-light .reasons .rz:hover p{color:var(--ink)}
.band-light .reasons .rz::after{background:var(--red)}

/* body-copy links on the inverted light band: --red-3 scores 2.98:1 on --chrome
   (fails AA even for large text), so the deep red token takes over at 5.88:1 */
.band-light .body-col a:not(.btn):not(.row):not(.cta-band),
.band-light .pr a:not(.btn){
  color:var(--red);border-bottom-color:rgba(192,0,0,.4);
}
@media(hover:hover){
  .band-light .body-col a:not(.btn):not(.row):not(.cta-band):hover,
  .band-light .pr a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--ink)}
}
.band-light .body-col a:not(.btn):not(.row):not(.cta-band):focus-visible{
  outline-color:var(--red)
}

/* "In this guide" contents list, sits in the hero plate on article pages */
.toc{list-style:none;margin:0;padding:0;counter-reset:tc}
.toc li{counter-increment:tc;border-bottom:1px solid var(--line-soft)}
.toc li:last-child{border-bottom:0}
.toc a{
  display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:baseline;
  padding:9px 0;text-decoration:none;color:var(--txt);font-size:13px;line-height:1.45;
  transition:color .3s var(--ease),padding-left .4s var(--ease);
}
.toc a::before{
  content:"[ " counter(tc,decimal-leading-zero) " ]";
  font-family:'Spline Sans Mono',monospace;font-size:8.5px;letter-spacing:.12em;
  color:var(--txt-dim);white-space:nowrap;
}
@media(hover:hover){.toc a:hover{color:var(--amber);padding-left:5px}}
.toc a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* once the hero plate is full width the corner stamp lands on top of the last
   dotted-leader row — reserve the space it occupies */
@media (max-width:980px){.hero-plate{padding-bottom:76px}}

/* ---------- spec table ----------
   Some source docs carry cost tables with three or four columns, which the
   two-column .prices row cannot hold. This is the spec-sheet variant: it keeps
   the marquee rules and scrolls inside its own box on narrow screens. */
.dtable{
  border-top:2px solid var(--chrome);margin:0 0 22px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.dtable table{border-collapse:collapse;width:100%;min-width:520px}
.dtable th,.dtable td{
  text-align:left;vertical-align:top;padding:14px 20px 14px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.62;color:var(--txt);
}
.dtable th{
  font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--txt-dim);font-weight:400;
  padding-top:12px;padding-bottom:12px;white-space:nowrap;
}
.dtable td:first-child{color:var(--chrome);padding-right:28px}
.dtable td strong{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15.5px;
  letter-spacing:-.01em;color:var(--amber);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dtable tr:last-child td{border-bottom:0}
.band-light .dtable{border-top-color:var(--ink)}
.band-light .dtable th{color:var(--ink-soft)}
.band-light .dtable th,.band-light .dtable td{border-bottom-color:rgba(8,13,26,.16)}
.band-light .dtable td{color:var(--ink-soft)}
.band-light .dtable td:first-child{color:var(--ink)}
.band-light .dtable td strong{color:var(--red)}

/* a caption heading that introduces a table or list inside a chapter */
.h3-cap{
  font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--amber);font-weight:400;
  margin:clamp(22px,3vh,30px) 0 12px;
}
.band-light .h3-cap{color:var(--red)}

/* a served area that has no page of its own — same row, no link affordance */
.row.is-static{cursor:default}
.row.is-static::before{display:none}
.row.is-static .rt{color:var(--txt-dim)}
.row.is-static .rc{color:var(--txt-dim);opacity:.5}

/* A chapter whose source carries only ONE reason card. The .reasons grid draws
   its rules with borders on the CONTAINER, so a single centred track would leave
   the top and left rules spanning the full width with nothing under them. The
   solo card therefore carries its own frame and drops the container's. */
.reasons.solo{
  grid-template-columns:minmax(0,760px)!important;
  justify-content:center;
  border-top:0;border-left:0;
}
.reasons.solo .rz{
  border-top:2px solid var(--red);
  border-right:0;border-bottom:0;
  text-align:center;
}
.reasons.solo .rz p{margin-left:auto;margin-right:auto}
.reasons.solo .rz::after{left:50%;transform:translateX(-50%)}
.band-light .reasons.solo .rz{border-top-color:var(--red)}

/* ---------- Areas mega-dropdown: communities | ZIP codes ----------
   Explicit column placement + dense flow lets each column fill from row 1
   independently, whatever the item counts. Right-anchored because the Areas
   item sits right of centre and a 560px panel would run off-screen otherwise. */
.nav ul.mega{
  left:auto;right:-120px;min-width:560px;
  display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;
  column-gap:6px;padding:10px 0 12px;
}
.nav ul.mega > li{grid-column:1}
.nav ul.mega > li.mega-col2{grid-column:2;border-left:1px solid var(--line)}
.nav ul.mega .mega-h{
  font-family:'Spline Sans Mono',monospace;font-size:8.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--amber);padding:6px 16px 8px;
}

/* ---------- footer: ZIP codes, a flowing row under the column grid ---------- */
.col-zips{margin-top:clamp(30px,4.4vh,48px)}
.col-zips ul{display:flex;flex-wrap:wrap;gap:10px 26px}
.col-zips li a{font-size:13.5px}

/* ---------- phones: call bar moves to the bottom ----------
   Below ~480px the header row (logo + number + menu) cannot hold the full phone
   number — it clipped to "+1 (702) 846-136". Rather than hide or shrink the
   client's number, the SAME link restacks into a full-width call bar pinned to
   the bottom of the screen, where it fits and sits under the thumb.
   .bar's backdrop-filter would make it the containing block for a fixed child
   (trapping the call bar inside the header), so it is swapped for a solid
   ground at this width. */
@media (max-width:600px){
  .bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--night)}
  .bar-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:75;
    justify-content:center;font-size:16px;
    padding:15px 18px calc(15px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 28px rgba(0,0,0,.5);
  }
  /* no opacity: at .85 the prefix measured 4.45:1 on the red, just under AA. Weight alone carries the hierarchy */
  .bar-cta span::before{content:"Call ";font-weight:600}
  .burger{flex-shrink:0}
  /* keep the page end, the back-to-top button and the drawer's last link clear of the bar */
  /* the bar renders 58px tall; 66px leaves the footer's last line breathing room */
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .totop{bottom:calc(72px + env(safe-area-inset-bottom))}
  .drawer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  /* tagline line: tighter tracking so both items fit instead of truncating */
  .folio{letter-spacing:.14em;font-size:9px}
  .folio .wrap{justify-content:space-between;gap:12px}
}

/* burger -> close (×) while the drawer is open; the menu script already sets
   aria-expanded, so the icon tracks the real state rather than a guessed class */
.burger i,.burger i::before,.burger i::after{transition:transform .3s var(--ease),top .3s var(--ease),background .3s var(--ease)}
.burger[aria-expanded="true"]{border-color:var(--red-2)}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

/* hero plate: verified Google rating (see the comment in index.php) */
.pl-rating{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--chrome)}
.pl-rating .stars{color:var(--amber);font-size:15px;letter-spacing:.14em;line-height:1}
.pl-rating .rv{font-size:13.5px;border-bottom:1px solid rgba(240,223,174,.35);transition:border-color .25s var(--ease),color .25s var(--ease)}
@media(hover:hover){.pl-rating:hover .rv{color:var(--amber);border-bottom-color:var(--amber)}}
.pl-rating:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- drawer: scroll lock + containment ----------
   nav-lock is set on <html> by the drawer script (see inc/footer.php for why not <body>).
   overscroll-behavior stops a scroll that reaches the end of the drawer from
   chaining through to the page behind it. The desktop rule is a safety net under
   the script's own close-on-widen. */
html.nav-lock{overflow:hidden}
.drawer{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (min-width:1181px){.drawer{display:none}}