/* ============ YELLOW-DRIVEN INDUSTRIAL PALETTE ============
   Every neutral is warmed toward the hazard yellow's hue (~45deg),
   so the accent reads as native to the page, not stuck on top of it. */
      :root {
        --hz: #FFC300;
        /* the one accent */
        --hz-hi: #FFD84D;
        /* hover */
        --ink: #0C0B08;
        --ink-2: #14120D;
        --ink-3: #1B1811;
        --ink-4: #272216;
        --line: #342E20;
        --line-soft: #241F16;
        --text: #F2EFE7;
        --muted: #B3ADA0;
        --maxw: 1240px;
        --gut: clamp(20px, 5vw, 64px);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box
      }

      html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth
      }

      body {
        margin: 0;
        background: var(--ink);
        color: var(--text);
        font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
        font-size: 17px;
        line-height: 1.65;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

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

      a {
        color: inherit
      }

      h1,
      h2,
      h3 {
        font-family: "Bebas Neue", Impact, sans-serif;
        font-weight: 400;
        letter-spacing: .014em;
        line-height: .92;
        margin: 0;
        color: var(--text)
      }

      h1 {
        font-size: clamp(46px, 8.2vw, 102px);
        line-height: .98
      }

      h2 {
        font-size: clamp(34px, 5.2vw, 62px)
      }

      h3 {
        font-size: clamp(22px, 2.6vw, 30px)
      }

      p {
        margin: 0 0 1.05em
      }

      .wrap {
        max-width: var(--maxw);
        margin: 0 auto;
        padding-inline: var(--gut)
      }

      .pad {
        padding-block: clamp(64px, 9vw, 124px)
      }

      section {
        position: relative
      }

      /* Yellow as a MARK on running text — never as heading colour.
   Anchored to the BASELINE via text-decoration, NOT to the inline em box.
   Bebas Neue's content area is ~1.33em tall while this H1's line advance is
   under 1em, so a percentage background-position measured from the bottom of
   that em box paints ~30px down INSIDE the next line. Baseline anchoring
   cannot do that, because the browser resolves it from the glyph baseline. */
      .mk {
        text-decoration-line: underline;
        text-decoration-color: var(--hz);
        text-decoration-thickness: .08em;
        text-underline-offset: .1em;
        text-decoration-skip-ink: none;
      }

      h1 .mk {
        text-decoration-thickness: .07em;
        text-underline-offset: .08em
      }

      .eyebrow {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--hz);
        margin: 0 0 18px;
        display: flex;
        align-items: center;
        gap: 12px
      }

      .eyebrow::before {
        content: "";
        width: 26px;
        height: 2px;
        background: var(--hz);
        flex: none
      }

      .lede {
        font-size: clamp(17px, 1.7vw, 20px);
        color: var(--muted);
        max-width: 62ch
      }

      .shead {
        max-width: 76ch;
        margin-bottom: clamp(40px, 5.5vw, 68px)
      }

      .shead h2 {
        margin-bottom: 20px
      }

      .stripe {
        height: 8px;
        background: repeating-linear-gradient(135deg, var(--hz) 0 14px, var(--ink) 14px 28px);
        background-size: 39.6px 39.6px;
        animation: hazShift 2.4s linear infinite
      }

      @keyframes hazShift {
        from {
          background-position: 0 0
        }

        to {
          background-position: 39.6px 0
        }
      }

      /* ---------- buttons ---------- */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: .045em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 17px 28px;
        border: 2px solid transparent;
        border-radius: 2px;
        transition: transform .16s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
        white-space: nowrap
      }

      .btn-hz {
        background: var(--hz);
        color: #0C0B08;
        border-color: var(--hz)
      }

      .btn-hz:hover {
        background: var(--hz-hi);
        border-color: var(--hz-hi);
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(255, 195, 0, .18)
      }

      .btn-out {
        background: transparent;
        color: var(--text);
        border-color: var(--line)
      }

      .btn-out:hover {
        border-color: var(--hz);
        color: var(--hz);
        transform: translateY(-2px)
      }

      .btn-sm {
        padding: 12px 20px;
        font-size: 13px
      }

      .ctas {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: center
      }

      .reassure {
        font-size: 14px;
        color: var(--muted);
        margin: 16px 0 0;
        display: flex;
        align-items: center;
        gap: 9px
      }

      .reassure svg {
        flex: none;
        color: var(--hz)
      }

      .tail {
        margin-top: clamp(34px, 4.5vw, 52px);
        display: flex;
        flex-wrap: wrap;
        gap: 16px 26px;
        align-items: center;
        padding-top: 26px;
        border-top: 1px solid var(--line-soft)
      }

      .tail p {
        margin: 0;
        font-size: 15px;
        color: var(--muted);
        max-width: 52ch
      }

      a:focus-visible,
      button:focus-visible {
        outline: 3px solid var(--hz);
        outline-offset: 3px;
        border-radius: 2px
      }

      .skip {
        position: absolute;
        left: -9999px;
        top: 0;
        background: var(--hz);
        color: #0C0B08;
        padding: 12px 20px;
        font-weight: 800;
        z-index: 300
      }

      .skip:focus {
        left: 12px;
        top: 12px
      }

      .inline-link {
        color: var(--hz);
        text-decoration: none;
        font-weight: 800;
        font-size: 14.5px;
        letter-spacing: .045em;
        text-transform: uppercase;
        border-bottom: 2px solid rgba(255, 195, 0, .32);
        padding-bottom: 3px;
        transition: border-color .2s, color .2s;
        white-space: nowrap
      }

      .inline-link:hover {
        border-color: var(--hz);
        color: var(--hz-hi)
      }

      /* ---------- header ---------- */
      .hdr {
        position: sticky;
        top: 0;
        z-index: 120;
        background: rgba(12, 11, 8, .9);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line-soft)
      }

      .hdr-in {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 var(--gut);
        height: 76px;
        display: flex;
        align-items: center;
        gap: 30px
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        flex: none
      }

      .brand-mk {
        width: 36px;
        height: 36px;
        flex: none
      }

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

      .brand-tx b {
        font-family: "Bebas Neue", sans-serif;
        font-weight: 400;
        font-size: 22px;
        letter-spacing: .045em;
        white-space: nowrap
      }

      .brand-tx i {
        font-style: normal;
        font-size: 9.5px;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 700;
        margin-top: 4px;
        white-space: nowrap
      }

      .nav {
        display: flex;
        gap: 20px;
        margin-left: auto
      }

      .nav a {
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        color: var(--muted);
        letter-spacing: .04em;
        white-space: nowrap;
        flex-shrink: 0;
        transition: color .18s;
        padding-block: 6px;
        border-bottom: 2px solid transparent
      }

      .nav a:hover {
        color: var(--text);
        border-bottom-color: var(--hz)
      }

      .hdr-call {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: none;
        margin-left: auto
      }

      .nav+.hdr-call {
        margin-left: 0
      }

      .hdr-num {
        font-family: "Bebas Neue", sans-serif;
        font-size: 22px;
        letter-spacing: .03em;
        text-decoration: none;
        color: var(--text);
        white-space: nowrap;
        transition: color .18s
      }

      .hdr-num:hover {
        color: var(--hz)
      }

      @media(max-width:1400px) {
        .hdr-num {
          display: none
        }
      }

      .nav-cta {
        display: none
      }

      .nav-tgl {
        display: none;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: none;
        margin-left: auto;
        padding: 0;
        background: transparent;
        border: 1px solid var(--line-soft);
        border-radius: 3px;
        color: var(--text);
        cursor: pointer;
        transition: border-color .18s, color .18s
      }

      .nav-tgl:hover {
        border-color: #FFC300;
        color: #FFC300
      }

      .nav-tgl:focus-visible {
        outline: 2px solid #FFC300;
        outline-offset: 2px
      }

      .nav-tgl .x {
        display: none
      }

      .nav-tgl[aria-expanded="true"] {
        border-color: #FFC300;
        color: #FFC300
      }

      .nav-tgl[aria-expanded="true"] .x {
        display: block
      }

      .nav-tgl[aria-expanded="true"] .b {
        display: none
      }

      @media(max-width:1180px) {
        .nav-tgl {
          display: inline-flex
        }

        .hdr-in {
          gap: 16px
        }

        .hdr-call {
          display: none
        }

        .nav .nav-cta {
          display: block;
          margin-top: 10px;
          padding: 13px 14px;
          text-align: center;
          font-family: "Bebas Neue", sans-serif;
          letter-spacing: .08em;
          font-size: 16px;
          border-top: 0
        }

        .nav .nav-cta-q {
          background: #FFC300;
          color: #0C0B08
        }

        .nav .nav-cta-p {
          border: 1px solid var(--line-soft);
          color: var(--text)
        }

        .nav {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          margin-left: 0;
          flex-direction: column;
          gap: 0;
          background: #0C0B08;
          border-bottom: 1px solid var(--line-soft);
          padding: 6px var(--gut) 14px;
          box-shadow: 0 18px 40px rgba(0, 0, 0, .55)
        }

        .nav.open {
          display: flex
        }

        .nav a {
          padding: 13px 2px;
          border-top: 1px solid rgba(255, 255, 255, .06)
        }
      }

      @media(max-width:560px) {
        .hdr-num {
          display: none
        }

        .brand-tx i {
          display: none
        }
      }

      /* ---------- hero ---------- */
      .hero {
        position: relative;
        min-height: clamp(620px, 94vh, 900px);
        display: flex;
        align-items: flex-end;
        overflow: hidden
      }

      .hero-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 58% 48%
      }

      .hero-scrim {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(to right, rgba(12, 11, 8, .97) 0%, rgba(12, 11, 8, .92) 40%, rgba(12, 11, 8, .5) 72%, rgba(12, 11, 8, .72) 100%),
          linear-gradient(to top, rgba(12, 11, 8, 1) 1%, rgba(12, 11, 8, 0) 46%)
      }

      .hero-grit {
        position: absolute;
        inset: -20%;
        opacity: .5;
        pointer-events: none;
        background-image: radial-gradient(rgba(255, 195, 0, .055) 1px, transparent 1.4px);
        background-size: 5px 5px;
        animation: drift 26s linear infinite
      }

      @keyframes drift {
        from {
          transform: translate3d(0, 0, 0)
        }

        to {
          transform: translate3d(40px, -30px, 0)
        }
      }

      .hero-in {
        position: relative;
        width: 100%;
        padding-block: clamp(48px, 9vh, 92px) 0
      }

      .hero h1 {
        max-width: 15ch;
        margin-bottom: 24px
      }

      .hero .lede {
        max-width: 53ch;
        font-size: clamp(17px, 1.85vw, 21px);
        color: #DCD7CB;
        margin-bottom: 30px
      }

      .hero-facts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--line-soft);
        border-top: 1px solid var(--line-soft);
        margin-top: clamp(44px, 7vh, 76px)
      }

      .hero-fact {
        background: rgba(12, 11, 8, .76);
        padding: 26px clamp(16px, 2.4vw, 30px);
        transition: background .25s
      }

      .hero-fact:hover {
        background: rgba(27, 24, 17, .9)
      }

      .hero-fact b {
        display: block;
        font-family: "Bebas Neue", sans-serif;
        font-size: clamp(25px, 2.7vw, 35px);
        line-height: 1;
        margin-bottom: 8px
      }

      .hero-fact span {
        font-size: 13.5px;
        color: var(--muted);
        line-height: 1.5;
        display: block
      }

      @media(max-width:780px) {
        .hero-facts {
          grid-template-columns: 1fr
        }

        .hero {
          min-height: auto;
          padding-top: 36px
        }
      }

      /* ---------- substrate ticker ---------- */
      .tick {
        background: var(--ink-2);
        border-bottom: 1px solid var(--line-soft);
        overflow: hidden;
        padding-block: 18px
      }

      .tick-row {
        display: flex;
        width: max-content;
        animation: roll 46s linear infinite
      }

      .tick:hover .tick-row {
        animation-play-state: paused
      }

      .tick-set {
        display: flex;
        align-items: center;
        gap: 34px;
        padding-right: 34px
      }

      .tick-set span {
        font-family: "Bebas Neue", sans-serif;
        font-size: 19px;
        letter-spacing: .07em;
        color: var(--muted);
        white-space: nowrap
      }

      .tick-set i {
        color: var(--hz);
        font-style: normal;
        font-size: 12px
      }

      @keyframes roll {
        from {
          transform: translate3d(0, 0, 0)
        }

        to {
          transform: translate3d(-50%, 0, 0)
        }
      }

      /* ---------- trust ---------- */
      .trust {
        background: var(--ink-2);
        border-bottom: 1px solid var(--line-soft)
      }

      .trust-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr)
      }

      .trust-i {
        padding: clamp(32px, 4vw, 46px) clamp(18px, 2.6vw, 34px);
        border-right: 1px solid var(--line-soft);
        transition: background .25s
      }

      .trust-i:hover {
        background: var(--ink-3)
      }

      .trust-i:last-child {
        border-right: 0
      }

      .trust-i svg {
        color: var(--hz);
        margin-bottom: 16px
      }

      .trust-i b {
        display: block;
        font-family: "Bebas Neue", sans-serif;
        font-size: 22px;
        letter-spacing: .035em;
        margin-bottom: 8px
      }

      .trust-i p {
        font-size: 14.5px;
        color: var(--muted);
        margin: 0;
        line-height: 1.55
      }

      .trust-tail {
        border-top: 1px solid var(--line-soft);
        padding: 22px var(--gut);
        display: flex;
        flex-wrap: wrap;
        gap: 14px 26px;
        align-items: center;
        justify-content: space-between
      }

      .trust-tail p {
        margin: 0;
        font-size: 14.5px;
        color: var(--muted)
      }

      @media(max-width:920px) {
        .trust-grid {
          grid-template-columns: repeat(2, 1fr)
        }

        .trust-i:nth-child(2n) {
          border-right: 0
        }

        .trust-i:nth-child(-n+2) {
          border-bottom: 1px solid var(--line-soft)
        }
      }

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

        .trust-i {
          border-right: 0;
          border-bottom: 1px solid var(--line-soft)
        }
      }

      /* ---------- services ---------- */
      .svc {
        display: grid;
        grid-template-columns: 1.02fr .98fr;
        gap: clamp(28px, 5vw, 72px);
        align-items: center;
        margin-bottom: clamp(56px, 8vw, 104px)
      }

      .svc:last-of-type {
        margin-bottom: 0
      }

      .svc.flip .svc-media {
        order: -1
      }

      .svc-media {
        position: relative;
        aspect-ratio: 4/3;
        overflow: hidden;
        background: var(--ink-3)
      }

      .svc-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s cubic-bezier(.2, .7, .3, 1)
      }

      .svc-media:hover img {
        transform: scale(1.045)
      }

      .svc-media::after {
        content: "";
        position: absolute;
        inset: 0;
        box-shadow: inset 0 0 0 1px var(--line);
        pointer-events: none
      }

      .svc-no {
        position: absolute;
        left: 0;
        bottom: 0;
        background: var(--hz);
        color: #0C0B08;
        font-family: "Bebas Neue", sans-serif;
        font-size: 31px;
        line-height: 1;
        padding: 13px 20px 11px;
        letter-spacing: .05em
      }

      .svc h3 {
        margin-bottom: 16px
      }

      .svc p {
        color: var(--muted)
      }

      .svc-list {
        list-style: none;
        padding: 0;
        margin: 22px 0 26px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 22px
      }

      .svc-list li {
        font-size: 14.5px;
        color: var(--muted);
        padding-left: 19px;
        position: relative;
        line-height: 1.45
      }

      .svc-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .62em;
        width: 9px;
        height: 2px;
        background: var(--hz)
      }

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

        .svc.flip .svc-media {
          order: 0
        }

        .svc-list {
          grid-template-columns: 1fr
        }
      }

      /* ---------- audience ---------- */
      .aud {
        background: var(--ink-2);
        border-block: 1px solid var(--line-soft)
      }

      .aud-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: var(--line-soft);
        border: 1px solid var(--line-soft)
      }

      .aud-i {
        background: var(--ink-2);
        padding: clamp(28px, 3.4vw, 44px);
        transition: background .25s
      }

      .aud-i:hover {
        background: var(--ink-3)
      }

      .aud-i .n {
        font-family: "Bebas Neue", sans-serif;
        font-size: 15px;
        letter-spacing: .16em;
        color: var(--hz);
        display: block;
        margin-bottom: 14px
      }

      .aud-i h3 {
        font-size: clamp(21px, 2.3vw, 27px);
        margin-bottom: 12px
      }

      .aud-i p {
        font-size: 15px;
        color: var(--muted);
        margin: 0
      }

      .aud-i.secondary {
        background: var(--ink)
      }

      .aud-i.secondary:hover {
        background: var(--ink-3)
      }

      .aud-i.secondary .n {
        color: var(--muted)
      }

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

      /* ---------- process ---------- */
      .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--line-soft);
        border: 1px solid var(--line-soft)
      }

      .step {
        background: var(--ink);
        padding: clamp(26px, 3vw, 40px);
        position: relative;
        transition: background .25s
      }

      .step:hover {
        background: var(--ink-2)
      }

      .step .k {
        font-family: "Bebas Neue", sans-serif;
        font-size: 54px;
        line-height: .8;
        color: var(--ink-4);
        display: block;
        margin-bottom: 16px;
        transition: color .3s
      }

      .step:hover .k {
        color: var(--hz)
      }

      .step h3 {
        font-size: 22px;
        margin-bottom: 11px
      }

      .step p {
        font-size: 14.5px;
        color: var(--muted);
        margin: 0
      }

      .step::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 3px;
        background: var(--hz);
        transition: width .5s cubic-bezier(.2, .7, .3, 1)
      }

      .step.on::before {
        width: 100%
      }

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

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

      /* ---------- objections ---------- */
      .obj {
        background: var(--ink-2);
        border-block: 1px solid var(--line-soft)
      }

      .obj-i {
        border-top: 1px solid var(--line);
        padding-block: clamp(30px, 4vw, 48px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        gap: clamp(20px, 4vw, 60px)
      }

      .obj-i:last-of-type {
        border-bottom: 1px solid var(--line)
      }

      .obj-q {
        display: flex;
        gap: 16px;
        align-items: flex-start
      }

      .obj-q .mkq {
        font-family: "Bebas Neue", sans-serif;
        font-size: 14px;
        letter-spacing: .14em;
        color: var(--hz);
        padding-top: 8px;
        flex: none
      }

      .obj-i h3 {
        font-size: clamp(22px, 2.5vw, 29px)
      }

      .obj-a p {
        font-size: 16px;
        color: var(--muted);
        margin-bottom: .9em
      }

      .obj-a p:last-child {
        margin-bottom: 0
      }

      .obj-a strong {
        color: var(--text);
        font-weight: 800
      }

      @media(max-width:820px) {
        .obj-i {
          grid-template-columns: 1fr;
          gap: 16px
        }
      }

      /* ---------- service area + map ---------- */
      .map-wrap {
        border: 1px solid var(--line);
        background: var(--ink-2);
        padding: clamp(16px, 2.4vw, 28px);
        margin-bottom: clamp(32px, 4vw, 48px)
      }

      .map-svg {
        width: 100%;
        height: auto;
        display: block
      }

      .st-fill {
        fill: #171410;
        stroke: #4A4130;
        stroke-width: 2.2
      }

      .st-fill-2 {
        fill: #131109;
        stroke: #3A3325;
        stroke-width: 2.2
      }

      .mp-line {
        fill: none;
        stroke: var(--hz);
        stroke-width: 2.6;
        stroke-dasharray: 3400;
        stroke-dashoffset: 3400;
        opacity: .85
      }

      .map-lit .mp-line {
        animation: drawline 2.6s cubic-bezier(.3, .7, .3, 1) forwards
      }

      @keyframes drawline {
        to {
          stroke-dashoffset: 0
        }
      }

      .dot {
        fill: #C9C2B2
      }

      .dot-base {
        fill: var(--hz)
      }

      .ring {
        fill: none;
        stroke: var(--hz);
        stroke-width: 2
      }

      .map-lit .ring {
        animation: ping 2.8s ease-out infinite
      }

      @keyframes ping {
        0% {
          r: 7;
          opacity: .9
        }

        70% {
          r: 19;
          opacity: 0
        }

        100% {
          r: 19;
          opacity: 0
        }
      }

      .lbl {
        font-family: Manrope, sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        fill: #B3ADA0
      }

      .lbl-base {
        font-family: Manrope, sans-serif;
        font-size: 14px;
        font-weight: 800;
        fill: #FFC300
      }

      .rgn {
        font-family: "Bebas Neue", sans-serif;
        font-size: 23px;
        letter-spacing: .12em;
        fill: #5C5340
      }

      .map-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 26px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--line-soft)
      }

      .map-legend span {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 13px;
        color: var(--muted)
      }

      .map-legend i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #C9C2B2;
        flex: none
      }

      .map-legend i.b {
        background: var(--hz);
        box-shadow: 0 0 0 3px rgba(255, 195, 0, .2)
      }

      .areas-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(28px, 5vw, 64px)
      }

      .area-col h3 {
        margin-bottom: 8px
      }

      .area-col .sub {
        font-size: 13px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--hz);
        font-weight: 800;
        margin-bottom: 22px
      }

      .towns {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0
      }

      .towns li {
        font-size: 14px;
        color: var(--muted);
        border: 1px solid var(--line-soft);
        padding: 7px 13px;
        background: var(--ink-2);
        border-radius: 2px;
        transition: border-color .2s, color .2s
      }

      .towns li:hover {
        border-color: var(--hz);
        color: var(--text)
      }

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

      /* ---------- pricing ---------- */
      .price {
        background: var(--ink-3);
        border-block: 1px solid var(--line)
      }

      .price-in {
        display: grid;
        grid-template-columns: 1fr 1.25fr;
        gap: clamp(28px, 5vw, 72px);
        align-items: start
      }

      .price h2 {
        max-width: 12ch
      }

      .price-body p {
        color: var(--muted);
        font-size: 16.5px
      }

      .price-body p:first-child {
        color: var(--text);
        font-size: clamp(18px, 2vw, 22px);
        font-weight: 600;
        line-height: 1.5
      }

      .incl {
        list-style: none;
        padding: 0;
        margin: 28px 0 0;
        border-top: 1px solid var(--line)
      }

      .incl li {
        display: flex;
        gap: 13px;
        align-items: flex-start;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        font-size: 15px;
        color: var(--muted)
      }

      .incl svg {
        flex: none;
        color: var(--hz);
        margin-top: 3px
      }

      .incl li b {
        color: var(--text);
        font-weight: 800
      }

      @media(max-width:840px) {
        .price-in {
          grid-template-columns: 1fr
        }
      }

      /* ---------- final cta ---------- */
      .fin {
        position: relative;
        overflow: hidden;
        border-top: 1px solid var(--line)
      }

      .fin-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 58%
      }

      .fin-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, rgba(12, 11, 8, .98) 0%, rgba(12, 11, 8, .93) 48%, rgba(12, 11, 8, .6) 100%)
      }

      .fin-in {
        position: relative
      }

      .fin h2 {
        max-width: 16ch;
        margin-bottom: 20px
      }

      .fin .lede {
        margin-bottom: 32px;
        color: #DCD7CB
      }

      .fin-num {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        margin-top: 32px;
        text-decoration: none
      }

      .fin-num span {
        font-size: 12px;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 800
      }

      .fin-num b {
        font-family: "Bebas Neue", sans-serif;
        font-size: clamp(32px, 4.4vw, 52px);
        letter-spacing: .02em;
        line-height: 1;
        transition: color .2s
      }

      .fin-num:hover b {
        color: var(--hz)
      }

      /* ---------- footer ---------- */
      .ft {
        background: #080705;
        border-top: 1px solid var(--line-soft);
        padding-block: clamp(48px, 6vw, 74px) 0
      }

      .ft-grid {
        display: grid;
        grid-template-columns: 1.7fr 1fr 1fr 1fr;
        gap: clamp(24px, 3vw, 48px);
        padding-bottom: 44px
      }

      .ft h3 {
        font-family: "Bebas Neue", sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 1.65;
        letter-spacing: .1em;
        margin: 0 0 18px;
        color: var(--text)
      }

      .ft p,
      .ft address {
        font-size: 14.5px;
        color: var(--muted);
        font-style: normal;
        line-height: 1.75;
        margin: 0 0 14px
      }

      .ft a {
        color: var(--muted);
        text-decoration: none;
        transition: color .18s
      }

      .ft a:hover {
        color: var(--hz)
      }

      .ft ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 10px;
        font-size: 14.5px
      }

      .ft-phone {
        font-family: "Bebas Neue", sans-serif;
        font-size: 32px;
        letter-spacing: .03em;
        color: var(--text) !important;
        display: inline-block;
        margin-bottom: 6px
      }

      .ft-bot {
        border-top: 1px solid var(--line-soft);
        padding-block: 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px 30px;
        justify-content: space-between;
        font-size: 13px;
        color: #9A9385
      }

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

        .ft-grid>div:first-child {
          grid-column: 1/-1
        }
      }

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

      /* ---------- mobile call bar ---------- */
      .mbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 130;
        display: none;
        background: var(--hz);
        border-top: 2px solid var(--ink)
      }

      .mbar a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        padding: 16px;
        color: #0C0B08;
        text-decoration: none;
        font-weight: 800;
        font-size: 16px;
        letter-spacing: .05em;
        text-transform: uppercase
      }

      .mbar svg {
        animation: jiggle 3.4s ease-in-out infinite
      }

      @keyframes jiggle {

        0%,
        86%,
        100% {
          transform: rotate(0)
        }

        90% {
          transform: rotate(-11deg)
        }

        94% {
          transform: rotate(9deg)
        }
      }

      @media(max-width:780px) {
        .mbar {
          display: block;
          padding-bottom: env(safe-area-inset-bottom)
        }

        body {
          padding-bottom: 62px
        }
      }

      /* ---------- reveal ---------- */
      .rv {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .75s cubic-bezier(.2, .7, .3, 1), transform .75s cubic-bezier(.2, .7, .3, 1)
      }

      .rv.on {
        opacity: 1;
        transform: none
      }

      @media(prefers-reduced-motion:reduce) {
        html {
          scroll-behavior: auto
        }

        .rv {
          opacity: 1;
          transform: none;
          transition: none
        }

        .stripe,
        .hero-grit,
        .tick-row,
        .mbar svg {
          animation: none !important
        }

        .map-lit .mp-line {
          animation: none;
          stroke-dashoffset: 0
        }

        .map-lit .ring {
          animation: none;
          opacity: .5
        }

        .step::before {
          transition: none;
          width: 100%
        }

        .btn,
        .btn:hover,
        .svc-media img,
        .svc-media:hover img {
          transition: none;
          transform: none;
          box-shadow: none
        }
      }

      /* ---------- page-specific ---------- */
      .svc-media {
        align-self: stretch;
        margin-inline: auto;
        width: 100%
      }

      .ft-grid {
        grid-template-columns: 1.5fr .9fr .9fr .9fr .9fr
      }

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

        .ft-grid>div:first-child {
          grid-column: 1/-1
        }
      }

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

      .ccx-main [style*="display:grid"]:has(>img),
      .ccx-main [style*="display: grid"]:has(>img),
      .ccx-main [style*="display:flex"]:has(>img),
      .ccx-main [style*="display: flex"]:has(>img) {
        align-items: center
      }

/* ── ADOPTED-CHROME BRIDGE (written by adoptSiteChrome, never by a renderer) ──
   theme.css loads before this file and declares all composed-body typography as
   var(--disp)/var(--body); these two overrides re-font the composed sections into
   the site's real pairing. The rules above are the source page's own, verbatim. */
:root{--disp:"Bebas Neue", Impact, sans-serif;--body:Manrope, system-ui, -apple-system, "Segoe UI", sans-serif}