/* ============================================================
   1. TOKENS
   ============================================================ */
    :root {
      /* palette */
      --ink: #0B1F1C;
      --ink-60: rgba(11, 31, 28, .62);
      --ink-40: rgba(11, 31, 28, .42);
      --teal-900: #08302C;
      --teal-800: #0B3F39;
      --teal-700: #0F4F47;
      --teal-500: #1A756A;
      --seaglass: #BFE3DA;
      --seaglass-2: #E6F4F0;
      --sand: #F0E7DA;
      --sand-2: #F7F1E8;
      --gold: #C9922F;
      --gold-soft: #F2DFB8;
      --canvas: #FBFAF7;
      --card: #FFFFFF;
      --line: rgba(11, 31, 28, .10);
      --line-soft: rgba(11, 31, 28, .06);

      /* type */
      --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
      --serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
      --fs-display: clamp(2.4rem, 5.5vw, 4.9rem);
      --fs-h1: clamp(2.25rem, 5.2vw, 4.25rem);
      --fs-h2: clamp(1.9rem, 3.9vw, 3.35rem);
      --fs-h3: clamp(1.25rem, 1.8vw, 1.6rem);
      --fs-lead: clamp(1.02rem, 1.28vw, 1.24rem);
      --fs-body: clamp(.95rem, 1.02vw, 1.03rem);
      --fs-small: .875rem;
      --fs-micro: .75rem;

      /* space */
      --s-1: .25rem;
      --s-2: .5rem;
      --s-3: .75rem;
      --s-4: 1rem;
      --s-5: 1.5rem;
      --s-6: 2rem;
      --s-7: 2.5rem;
      --s-8: 3rem;
      --s-9: 4rem;
      --s-10: 5.5rem;
      --s-11: 7rem;
      --s-12: 9rem;
      --gutter: clamp(1.15rem, 4vw, 3.5rem);
      --maxw: 1340px;

      /* shape */
      --r-sm: 12px;
      --r-md: 20px;
      --r-lg: 28px;
      --r-xl: 36px;
      --r-pill: 999px;
      --sh-1: 0 1px 2px rgba(11, 31, 28, .05), 0 4px 14px rgba(11, 31, 28, .05);
      --sh-2: 0 2px 6px rgba(11, 31, 28, .06), 0 18px 44px rgba(11, 31, 28, .09);
      --sh-3: 0 30px 80px rgba(8, 48, 44, .20);

      /* motion */
      --e-out: cubic-bezier(.22, 1, .36, 1);
      --e-io: cubic-bezier(.65, 0, .35, 1);
    }

    /* ============================================================
   2. RESET / BASE
   ============================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    html {
      -webkit-text-size-adjust: 100%
    }

    html:not(.has-smooth) {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--canvas);
      color: var(--ink);
      font-family: var(--sans);
      font-size: var(--fs-body);
      line-height: 1.6;
      font-synthesis-weight: none;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

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

    img {
      height: auto
    }

    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote {
      margin: 0
    }

    ul,
    ol {
      margin: 0;
      padding: 0;
      list-style: none
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
      color: inherit
    }

    fieldset {
      border: 0;
      margin: 0;
      padding: 0;
      min-width: 0
    }

    legend {
      padding: 0
    }

    [hidden] {
      display: none !important
    }

    button {
      background: none;
      border: 0;
      cursor: pointer
    }

    h1,
    h2,
    h3 {
      line-height: 1.03;
      letter-spacing: -.032em;
      font-weight: 600
    }

    h1 {
      font-size: var(--fs-h1)
    }

    h2 {
      font-size: var(--fs-h2)
    }

    h3 {
      font-size: var(--fs-h3);
      line-height: 1.18;
      letter-spacing: -.02em
    }

    em.ac {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -.01em
    }

    ::selection {
      background: var(--seaglass);
      color: var(--teal-900)
    }

    :focus-visible {
      outline: 2.5px solid var(--teal-500);
      outline-offset: 3px;
      border-radius: 4px
    }

    .skip {
      position: absolute;
      left: var(--s-4);
      top: -100px;
      z-index: 999;
      background: var(--teal-700);
      color: #fff;
      padding: .7rem 1.1rem;
      border-radius: var(--r-pill);
      transition: top .2s
    }

    .skip:focus {
      top: var(--s-4)
    }

    .wrap {
      width: 100%;
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--gutter)
    }

    .section {
      position: relative;
      padding-block: clamp(3.5rem, 8vw, var(--s-11))
    }

    .center {
      text-align: center
    }

    .u-sr {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap
    }

    /* ============================================================
   3. DECOR PRIMITIVES — depth without images
   ============================================================ */
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(70px);
      opacity: .55;
      pointer-events: none;
      z-index: 0
    }

    .grain::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: .055;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .grain--light::after {
      mix-blend-mode: overlay;
      opacity: .13
    }

    .dotgrid {
      background-image: radial-gradient(rgba(11, 31, 28, .09) 1px, transparent 1px);
      background-size: 14px 14px;
      color: rgba(11, 31, 28, .028);
    }

    .hr {
      height: 1px;
      background: var(--line);
      border: 0;
      margin: 0
    }

    /* eyebrow */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: var(--fs-micro);
      font-weight: 600;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--teal-700);
      background: var(--card);
      border: 1px solid var(--line);
      padding: .42rem .85rem .42rem .7rem;
      border-radius: var(--r-pill);
      box-shadow: var(--sh-1);
    }

    .eyebrow::before {
      content: "✦";
      font-size: .85em;
      color: var(--gold);
      line-height: 1
    }

    .eyebrow--onDark {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .18);
      color: var(--seaglass);
      backdrop-filter: blur(8px)
    }

    /* section head */
    .shead {
      display: grid;
      gap: var(--s-5);
      grid-template-columns: 1fr;
      align-items: end;
      margin-bottom: var(--s-8)
    }

    @media(min-width:900px) {
      .shead {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
        gap: var(--s-9)
      }

      .shead__aside {
        padding-bottom: .4rem
      }
    }

    .shead h2 {
      margin-top: var(--s-4);
      max-width: 16ch
    }

    .shead p {
      color: var(--ink-60);
      font-size: var(--fs-lead);
      max-width: 46ch
    }

    /* buttons */
    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      padding: .92rem 1.5rem;
      border-radius: var(--r-pill);
      font-weight: 600;
      font-size: var(--fs-body);
      letter-spacing: -.01em;
      white-space: nowrap;
      isolation: isolate;
      overflow: hidden;
      transition: transform .35s var(--e-out), box-shadow .35s var(--e-out), color .3s var(--e-out), border-color .3s;
    }

    .btn::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      transform: translateY(101%);
      transition: transform .48s var(--e-out);
    }

    .btn:hover {
      transform: translateY(-2px)
    }

    .btn:active {
      transform: translateY(0)
    }

    .btn svg {
      flex: none;
      transition: transform .4s var(--e-out)
    }

    .btn:hover svg {
      transform: translateX(3px)
    }

    .btn--primary {
      background: var(--teal-700);
      color: #fff;
      box-shadow: 0 8px 22px rgba(15, 79, 71, .26)
    }

    .btn--primary::before {
      background: var(--teal-900)
    }

    .btn--primary:hover {
      box-shadow: 0 14px 34px rgba(15, 79, 71, .32)
    }

    .btn--primary:hover::before {
      transform: translateY(0)
    }

    .btn--ghost {
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--line);
    }

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

    .btn--ghost:hover {
      color: #fff;
      border-color: var(--ink)
    }

    .btn--ghost:hover::before {
      transform: translateY(0)
    }

    .btn--glass {
      background: rgba(255, 255, 255, .82);
      color: var(--ink);
      border: 1px solid rgba(255, 255, 255, .7);
      backdrop-filter: blur(14px)
    }

    .btn--glass::before {
      background: #fff
    }

    .btn--glass:hover::before {
      transform: translateY(0)
    }

    .btn--gold {
      background: var(--gold);
      color: #231703
    }

    .btn--gold::before {
      background: #b07f22
    }

    .btn--gold:hover::before {
      transform: translateY(0)
    }

    .btn--lg {
      padding: 1.05rem 1.85rem
    }

    .btn--full {
      width: 100%
    }

    .iconbtn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: none;
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--ink);
      transition: background .3s, color .3s, transform .3s var(--e-out), border-color .3s;
    }

    .iconbtn:hover:not(:disabled) {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
      trauseform: scale(1.06)
    }

    .iconbtn:disabled {
      opacity: .32;
      cursor: not-allowed
    }

    /* cards */
    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      position: relative
    }

    /* stars */
    .stars {
      display: inline-flex;
      gap: 2px;
      color: var(--gold)
    }

    .stars svg {
      width: 14px;
      height: 14px;
      fill: currentColor
    }

    /* reveal */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      filter: blur(5px);
      transition: opacity .85s var(--e-out) var(--d, 0ms), transform .95s var(--e-out) var(--d, 0ms), filter .85s var(--e-out) var(--d, 0ms)
    }

    .reveal.is-in {
      opacity: 1;
      transform: none;
      filter: none
    }

    .reveal--x {
      transform: translateX(-28px)
    }

    .reveal--s {
      transform: scale(.96) translateY(18px)
    }

    /* ============================================================
   4. SMOOTH SCROLL SHELL
   ============================================================ */
    /* Scroll-driven effects read a lerped scroll value (see JS `Ticker`), which gives
   the weighted, Melius/Table22-style feel WITHOUT a transform wrapper — a wrapper
   would break every `position:sticky` pin on this page. */

    /* ============================================================
   5. ANNOUNCEMENT + NAV
   ============================================================ */
    .announce {
      background: var(--teal-900);
      color: var(--seaglass);
      font-size: var(--fs-micro);
      letter-spacing: .02em;
      position: relative;
      z-index: 60;
    }

    .announce__in {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--s-5);
      min-height: 38px;
      padding-block: .45rem;
      text-align: center;
      flex-wrap: wrap
    }

    .announce b {
      color: #fff;
      font-weight: 600
    }

    .announce a {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: rgba(255, 255, 255, .4)
    }

    .announce a:hover {
      text-decoration-color: #fff
    }

    .announce__x {
      position: absolute;
      right: var(--gutter);
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255, 255, 255, .55);
      line-height: 1;
      padding: .3rem;
      border-radius: 50%
    }

    .announce__x:hover {
      color: #fff
    }

    @media(max-width:640px) {
      .announce__x {
        display: none
      }
    }

    .announce.is-hidden {
      display: none
    }

    /* The floating pill is the DEFAULT state, not just the scrolled state —
   scrolling only deepens the shadow and tightens the rhythm slightly. */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      padding-block: var(--s-4);
      margin-bottom: -100px;
      pointer-events: none;
      transition: padding .45s var(--e-out), margin-bottom .45s var(--e-out)
    }

    .nav__in {
      display: flex;
      align-items: center;
      gap: var(--s-5);
      padding: .55rem .55rem .55rem 1.15rem;
      border-radius: var(--r-pill);
      background: rgba(251, 250, 247, .72);
      backdrop-filter: blur(18px) saturate(180%);
      border: 1px solid var(--line);
      box-shadow: var(--sh-1);
      pointer-events: auto;
      transition: background .45s var(--e-out), border-color .45s, box-shadow .45s;
    }

    .nav.is-stuck {
      padding-block: .6rem;
      margin-bottom: -74px
    }

    .nav.is-stuck .nav__in {
      background: rgba(251, 250, 247, .86);
      box-shadow: var(--sh-2)
    }

    /* Wordmark lockup */
    .brand {
      display: inline-flex;
      align-items: center;
      gap: .62rem;
      line-height: 1;
      white-space: nowrap
    }

    .brand__word {
      font-size: 1.44rem;
      font-weight: 600;
      letter-spacing: -.052em;
      color: var(--teal-900);
      display: inline-flex;
      align-items: baseline;
    }

    .brand__word b {
      font-weight: 600;
      color: var(--teal-700)
    }

    .brand__dot {
      width: 5.5px;
      height: 5.5px;
      border-radius: 50%;
      background: var(--gold);
      margin-left: 3px;
      flex: none;
      align-self: flex-end;
      margin-bottom: 3px
    }

    .brand__rule {
      width: 1px;
      height: 19px;
      background: var(--line);
      flex: none
    }

    .brand__sub {
      font-size: .575rem;
      font-weight: 600;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--ink-40)
    }

    .brand:hover .brand__dot {
      background: var(--teal-500)
    }

    .brand__dot {
      transition: background .35s var(--e-out)
    }

    /* Inverted lockup for dark surfaces */
    .brand--light .brand__word {
      color: #fff
    }

    .brand--light .brand__word b {
      color: var(--seaglass)
    }

    .brand--light .brand__rule {
      background: rgba(255, 255, 255, .22)
    }

    .brand--light .brand__sub {
      color: rgba(255, 255, 255, .5)
    }

    @media(max-width:420px) {

      .brand__rule,
      .brand__sub {
        display: none
      }
    }

    .nav__links {
      display: none;
      gap: .15rem;
      margin-inline: auto
    }

    @media(min-width:1024px) {
      .nav__links {
        display: flex
      }
    }

    .nav__links a {
      position: relative;
      padding: .55rem .85rem;
      border-radius: var(--r-pill);
      font-size: var(--fs-small);
      font-weight: 500;
      color: var(--ink-60);
      transition: color .28s
    }

    .nav__links a::after {
      content: "";
      position: absolute;
      left: .85rem;
      right: .85rem;
      bottom: .34rem;
      height: 1.5px;
      background: var(--teal-700);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s var(--e-out)
    }

    .nav__links a:hover {
      color: var(--ink)
    }

    .nav__links a:hover::after {
      transform: scaleX(1)
    }

    .nav__cta {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-left: auto
    }

    @media(min-width:1024px) {
      .nav__cta {
        margin-left: 0
      }
    }

    .nav__tel {
      display: none;
      align-items: center;
      gap: .45rem;
      font-weight: 600;
      font-size: var(--fs-small);
      padding: .6rem .9rem;
      border-radius: var(--r-pill);
      transition: background .3s
    }

    .nav__tel:hover {
      background: rgba(11, 31, 28, .05)
    }

    @media(min-width:760px) {
      .nav__tel {
        display: inline-flex
      }
    }

    .nav .btn {
      padding: .72rem 1.25rem;
      font-size: var(--fs-small)
    }

    .burger {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4.5px;
      border: 1px solid var(--line);
      background: var(--card)
    }

    @media(min-width:1024px) {
      .burger {
        display: none
      }
    }

    .burger span {
      display: block;
      width: 17px;
      height: 2px;
      background: var(--ink);
      border-radius: 1px;
      transition: transform .4s var(--e-out), opacity .25s
    }

    body.menu-open .burger span:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg)
    }

    body.menu-open .burger span:nth-child(2) {
      opacity: 0
    }

    body.menu-open .burger span:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg)
    }

    .menu {
      position: fixed;
      inset: 0;
      z-index: 80;
      background: var(--teal-900);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--s-2);
      padding: var(--s-10) var(--gutter) var(--s-9);
      clip-path: circle(0% at calc(100% - 46px) 46px);
      transition: clip-path .72s var(--e-io);
      visibility: hidden;
    }

    body.menu-open .menu {
      clip-path: circle(150% at calc(100% - 46px) 46px);
      visibility: visible
    }

    .menu__top {
      position: absolute;
      top: var(--s-4);
      left: var(--gutter);
      right: var(--gutter);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s-4)
    }

    .menu__close {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: none;
      border: 1px solid rgba(255, 255, 255, .24);
      color: #fff;
      transition: background .3s, color .3s
    }

    .menu__close:hover {
      background: #fff;
      color: var(--teal-900)
    }

    .menu a.menu__link {
      font-size: clamp(1.9rem, 7vw, 3rem);
      font-weight: 600;
      letter-spacing: -.035em;
      padding-block: .28rem;
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .5s var(--e-out), transform .6s var(--e-out);
      border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    body.menu-open .menu a.menu__link {
      opacity: 1;
      transform: none;
      transition-delay: calc(.22s + var(--i, 0)*.06s)
    }

    .menu__foot {
      margin-top: var(--s-7);
      display: grid;
      gap: var(--s-4);
      color: var(--seaglass);
      font-size: var(--fs-small)
    }

    .menu__foot .btn {
      align-self: start
    }

    /* ============================================================
   6. HERO  —  copy + proof on the left, lead form on the right.
   No pinned scroll takeover: everything the visitor needs to act
   is visible and stationary above the fold.
   ============================================================ */
    .hero {
      position: relative;
      z-index: 1;
      overflow: clip;
      padding-block: calc(120px + .5rem) clamp(3rem, 7vh, 5rem)
    }

    .hero__bgblob-a {
      width: 52vw;
      height: 52vw;
      max-width: 720px;
      max-height: 720px;
      left: -16vw;
      top: -18vw;
      background: radial-gradient(circle at 35% 35%, #BFE3DA, rgba(191, 227, 218, 0) 70%)
    }

    .hero__bgblob-b {
      width: 46vw;
      height: 46vw;
      max-width: 660px;
      max-height: 660px;
      right: -12vw;
      top: 4vw;
      background: radial-gradient(circle at 50% 50%, #F2DFB8, rgba(242, 223, 184, 0) 70%);
      opacity: .65
    }

    .hero__grid {
      position: relative;
      z-index: 2;
      display: grid;
      gap: var(--s-8);
      align-items: center
    }

    @media(min-width:1000px) {
      .hero__grid {
        grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
        gap: clamp(2.5rem, 4.5vw, 5rem)
      }
    }

    .hero__copy {
      position: relative
    }

    .hero__title {
      font-size: clamp(2.3rem, 4.5vw, 4rem);
      letter-spacing: -.045em;
      line-height: 1;
      margin-top: var(--s-5);
      max-width: 14ch
    }

    .hero__title .ac {
      color: var(--teal-700)
    }

    .hero__title .w {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
      padding-bottom: .14em;
      margin-bottom: -.14em
    }

    .hero__title .w>span {
      display: inline-block;
      transform: translateY(105%);
      transition: transform 1.05s var(--e-out) var(--d, 0ms)
    }

    .hero.is-ready .hero__title .w>span {
      transform: none
    }

    .hero__fade {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .9s var(--e-out) var(--d, .5s), transform .9s var(--e-out) var(--d, .5s)
    }

    .hero.is-ready .hero__fade {
      opacity: 1;
      transform: none
    }

    .hero__sub {
      margin-top: var(--s-5);
      max-width: 50ch;
      color: var(--ink-60);
      font-size: var(--fs-lead)
    }

    .hero__proof {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-top: var(--s-6)
    }

    .hero__ctas {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--s-4);
      margin-top: var(--s-6)
    }

    .hero__ctas .btn {
      flex: none
    }

    .hero__ticks {
      display: flex;
      flex-wrap: wrap;
      gap: .35rem 1.15rem;
      margin-top: var(--s-5);
      font-size: var(--fs-small);
      color: var(--ink-60)
    }

    .hero__ticks li {
      display: inline-flex;
      align-items: center;
      gap: .4rem
    }

    .hero__ticks svg {
      width: 15px;
      height: 15px;
      color: var(--teal-500);
      flex: none
    }

    /* proof chips — static, readable, reusable anywhere */
    .pill {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      background: rgba(255, 255, 255, .86);
      backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, .75);
      border-radius: var(--r-pill);
      padding: .55rem 1rem .55rem .6rem;
      box-shadow: var(--sh-1);
      font-size: var(--fs-small);
      white-space: nowrap;
    }

    .pill__text {
      display: flex;
      flex-direction: column;
      gap: 0
    }

    .pill strong {
      display: block;
      font-weight: 600;
      letter-spacing: -.015em;
      line-height: 1.2;
      color: var(--ink)
    }

    .pill__sub {
      display: block;
      font-size: var(--fs-micro);
      color: var(--ink-60);
      line-height: 1.2
    }

    .pill .stars {
      display: inline-flex;
      vertical-align: -1px;
      margin-left: 1px
    }

    .pill__ic {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: none;
      background: var(--seaglass-2);
      color: var(--teal-700)
    }

    .pill__ic svg {
      width: 16px;
      height: 16px
    }

    .avstack {
      display: flex;
      padding-left: 6px
    }

    .avstack img {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 2px solid #fff;
      object-fit: cover;
      margin-left: -6px
    }

    /* ---------- hero lead card ---------- */
    .hero__panel {
      position: relative;
      z-index: 3
    }

    .hero__panel::before {
      /* offset tint plate for depth */
      content: "";
      position: absolute;
      inset: 22px -20px -20px 22px;
      border-radius: var(--r-xl);
      background: var(--seaglass);
      opacity: .5;
      z-index: 0
    }

    @media(max-width:1000px) {
      .hero__panel::before {
        display: none
      }
    }

    .leadcard {
      position: relative;
      z-index: 1;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--sh-3)
    }

    .leadcard__photo {
      position: relative;
      aspect-ratio: 16/8;
      background: var(--seaglass-2)
    }

    .leadcard__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .leadcard__photo::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(8, 48, 44, .5), rgba(8, 48, 44, .04) 60%, transparent)
    }

    .leadcard__badge {
      position: absolute;
      left: var(--s-4);
      bottom: var(--s-4);
      z-index: 2
    }

    .leadcard__body {
      padding: clamp(1.15rem, 2.4vw, 1.75rem)
    }

    .leadcard__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--s-4)
    }

    .leadcard__head h2 {
      font-size: clamp(1.2rem, 1.9vw, 1.5rem);
      letter-spacing: -.03em
    }

    .leadcard__head p {
      font-size: var(--fs-micro);
      color: var(--ink-40);
      margin-top: .3rem
    }

    .leadcard__est {
      text-align: right;
      flex: none
    }

    .leadcard__est b {
      display: block;
      font-size: 1.45rem;
      font-weight: 600;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--teal-700);
      font-variant-numeric: tabular-nums;
      transition: transform .35s var(--e-out)
    }

    .leadcard__est b.bump {
      transform: scale(1.07)
    }

    .leadcard__est span {
      display: block;
      font-size: .66rem;
      color: var(--ink-40);
      margin-top: .25rem;
      letter-spacing: .06em;
      text-transform: uppercase
    }

    .lfield {
      margin-top: var(--s-5)
    }

    .lfield>label,
    .lfield>.lfield__lab {
      display: block;
      font-size: var(--fs-micro);
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink-40);
      margin-bottom: .5rem
    }

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

    .lchip {
      position: relative
    }

    .lchip input {
      position: absolute;
      inset: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      cursor: pointer
    }

    .lchip input+span {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .35rem;
      padding: .7rem .3rem;
      border: 1.5px solid var(--line);
      border-radius: var(--r-sm);
      background: var(--canvas);
      font-size: .72rem;
      font-weight: 600;
      text-align: center;
      line-height: 1.2;
      transition: border-color .3s, background .3s, color .3s
    }

    .lchip svg {
      width: 19px;
      height: 19px;
      stroke: var(--teal-700);
      fill: none;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .lchip input:hover+span {
      border-color: var(--teal-500)
    }

    .lchip input:focus-visible+span {
      outline: 2.5px solid var(--teal-500);
      outline-offset: 2px
    }

    .lchip input:checked+span {
      border-color: var(--teal-700);
      background: var(--seaglass-2)
    }

    .lrow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .55rem
    }

    .lstep {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .4rem;
      padding: .45rem .5rem .45rem .8rem;
      border: 1.5px solid var(--line);
      border-radius: var(--r-sm);
      background: var(--canvas)
    }

    .lstep__t {
      font-size: var(--fs-small);
      font-weight: 600
    }

    .lstep__c {
      display: flex;
      align-items: center;
      gap: .15rem
    }

    .lstep__c button {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--card);
      display: grid;
      place-items: center;
      font-size: 1rem;
      line-height: 1;
      transition: background .25s, color .25s, border-color .25s
    }

    .lstep__c button:hover:not(:disabled) {
      background: var(--teal-700);
      color: #fff;
      border-color: var(--teal-700)
    }

    .lstep__c button:disabled {
      opacity: .35;
      cursor: not-allowed
    }

    .lstep__c output {
      min-width: 1.8ch;
      text-align: center;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      font-size: var(--fs-small)
    }

    .lzip {
      display: flex;
      gap: .5rem
    }

    .lzip input {
      flex: 1;
      min-width: 0;
      padding: .85rem 1rem;
      border: 1.5px solid var(--line);
      border-radius: var(--r-sm);
      background: var(--canvas);
      letter-spacing: .08em;
      transition: border-color .25s, box-shadow .25s
    }

    .lzip input:focus {
      outline: none;
      border-color: var(--teal-500);
      box-shadow: 0 0 0 3px rgba(26, 117, 106, .14)
    }

    .lzip input[aria-invalid="true"] {
      border-color: #C0553F;
      background: #FDF4F2
    }

    .leadcard .qerr {
      margin-top: .4rem
    }

    .leadcard__go {
      margin-top: var(--s-5)
    }

    .leadcard__foot {
      margin-top: var(--s-4);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      font-size: var(--fs-micro);
      color: var(--ink-40);
      text-align: center;
      flex-wrap: wrap
    }

    .leadcard__foot svg {
      width: 13px;
      height: 13px;
      color: var(--teal-500);
      flex: none
    }

    /* ============================================================
   7. TRUST MARQUEE
   ============================================================ */
    .trust {
      border-block: 1px solid var(--line);
      background: var(--card);
      padding-block: var(--s-5);
      overflow: hidden;
      position: relative;
      z-index: 2
    }

    .trust::before,
    .trust::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 12%;
      z-index: 2;
      pointer-events: none
    }

    .trust::before {
      left: 0;
      background: linear-gradient(90deg, var(--card), transparent)
    }

    .trust::after {
      right: 0;
      background: linear-gradient(-90deg, var(--card), transparent)
    }

    .marquee {
      display: flex;
      width: max-content;
      animation: marq 42s linear infinite
    }

    .trust:hover .marquee {
      animation-play-state: paused
    }

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

    .marquee__set {
      display: flex;
      align-items: center;
      gap: clamp(1.6rem, 4.4vw, 3.4rem);
      padding-right: clamp(1.6rem, 4.4vw, 3.4rem)
    }

    .tbadge {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      font-size: var(--fs-small);
      font-weight: 500;
      color: var(--ink-60);
      white-space: nowrap
    }

    .tbadge svg {
      width: 17px;
      height: 17px;
      color: var(--teal-500);
      flex: none
    }

    .tbadge b {
      color: var(--ink);
      font-weight: 600
    }

    /* ============================================================
   7b. AS SEEN ON
   ============================================================ */
    .asseen {
      padding-block: var(--s-6);
      overflow: hidden;
      position: relative;
      z-index: 2
    }

    .asseen__head {
      text-align: center;
      margin-bottom: var(--s-6)
    }

    .asseen::before,
    .asseen::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 12%;
      z-index: 2;
      pointer-events: none
    }

    .asseen::before {
      left: 0;
      background: linear-gradient(90deg, var(--canvas), transparent)
    }

    .asseen::after {
      right: 0;
      background: linear-gradient(-90deg, var(--canvas), transparent)
    }

    .logomarquee {
      display: flex;
      width: max-content;
      animation: marq 38s linear infinite
    }

    .asseen:hover .logomarquee {
      animation-play-state: paused
    }

    .logomarquee__set {
      display: flex;
      align-items: center;
      gap: clamp(2.2rem, 5.6vw, 4.2rem);
      padding-right: clamp(2.2rem, 5.6vw, 4.2rem)
    }

    .logo-item {
      display: block;
      height: clamp(20px, 2.6vw, 32px);
      width: auto;
      max-width: none;
      opacity: .55;
      filter: grayscale(1);
      transition: opacity .25s var(--e-out), filter .25s var(--e-out);
      flex: none
    }

    .logo-item:hover {
      opacity: 1;
      filter: grayscale(0)
    }

    /* Newsday / News 12 ship white-on-transparent marks (built for dark
       backgrounds) — invert so they read as dark marks on this light section */
    .logo-item--onlight {
      filter: invert(1) grayscale(1)
    }

    .logo-item--onlight:hover {
      filter: invert(1) grayscale(0)
    }

    /* ============================================================
   8. SERVICES GRID
   ============================================================ */
    .svc {
      display: grid;
      gap: var(--s-4);
      grid-template-columns: 1fr
    }

    @media(min-width:640px) {
      .svc {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(min-width:1024px) {
      .svc {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    .svcard {
      --tint: var(--seaglass-2);
      position: relative;
      overflow: hidden;
      background: var(--tint);
      border: 1px solid var(--line-soft);
      border-radius: var(--r-lg);
      padding: var(--s-6) var(--s-5) var(--s-5);
      display: flex;
      flex-direction: column;
      min-height: 290px;
      transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
    }

    .svcard::before {
      content: "";
      position: absolute;
      right: -30%;
      top: -45%;
      width: 78%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(255, 255, 255, .6);
      transition: transform .7s var(--e-out);
      transform: scale(.7)
    }

    .svcard:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-2)
    }

    .svcard:hover::before {
      transform: scale(1.15)
    }

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

    .svcard__ic {
      width: 52px;
      height: 52px;
      border-radius: 15px;
      background: var(--card);
      display: grid;
      place-items: center;
      box-shadow: var(--sh-1);
      margin-bottom: var(--s-5)
    }

    .svcard__ic svg {
      width: 26px;
      height: 26px;
      stroke: var(--teal-700);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .svcard__ic svg [data-draw] {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      pathLength: 1;
      transition: stroke-dashoffset 1.1s var(--e-out) var(--d, 0ms)
    }

    .svcard.is-in .svcard__ic svg [data-draw] {
      stroke-dashoffset: 0
    }

    .svcard:hover .svcard__ic svg {
      animation: nudge .6s var(--e-out)
    }

    @keyframes nudge {
      50% {
        transform: translateY(-3px) rotate(-4deg)
      }
    }

    .svcard h3 {
      margin-bottom: .4rem
    }

    .svcard p {
      color: var(--ink-60);
      font-size: var(--fs-small);
      max-width: 34ch
    }

    .svcard ul {
      margin-top: var(--s-4);
      display: flex;
      flex-wrap: wrap;
      gap: .35rem
    }

    .svcard li {
      font-size: var(--fs-micro);
      font-weight: 500;
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(11, 31, 28, .06);
      padding: .28rem .6rem;
      border-radius: var(--r-pill);
      color: var(--ink-60)
    }

    .svcard__go {
      margin-top: auto;
      padding-top: var(--s-5);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--fs-small);
      font-weight: 600
    }

    .svcard__arrow {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--ink);
      color: #fff;
      display: grid;
      place-items: center;
      transition: transform .45s var(--e-out)
    }

    .svcard:hover .svcard__arrow {
      transform: rotate(45deg) scale(1.08)
    }

    .svcard__arrow svg {
      width: 15px;
      height: 15px
    }

    /* ============================================================
   9. SCROLL-LINKED RAIL
   ============================================================ */
    /* NOTE: no `overflow:hidden` on .rail — it would turn the section into a
   scroll container and break the sticky pin on .rail__stage. */
    .rail {
      position: relative;
      background: var(--sand-2)
    }

    .rail__track {
      height: 300vh
    }

    @media(max-width:820px) {
      .rail__track {
        height: auto
      }
    }

    .rail__stage {
      position: sticky;
      top: 0;
      height: 100dvh;
      min-height: 600px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding-top: 76px
    }

    @media(max-width:820px) {
      .rail__stage {
        position: static;
        height: auto;
        min-height: 0;
        padding-block: var(--s-8)
      }
    }

    .why,
    .quote,
    .areas,
    .process,
    .ba,
    .revs {
      overflow: clip
    }

    .rail__head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--s-5);
      width: 100%;
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--gutter);
      margin-bottom: var(--s-6);
      position: relative;
      z-index: 2
    }

    .rail__head h2 {
      max-width: 14ch
    }

    .rail__nav {
      display: flex;
      gap: .5rem;
      flex: none
    }

    @media(max-width:820px) {
      .rail__nav {
        display: none
      }
    }

    .rail__viewport {
      position: relative;
      width: 100%;
      overflow: hidden
    }

    .rail__strip {
      display: flex;
      gap: var(--s-4);
      padding-inline: var(--gutter);
      will-change: transform
    }

    @media(max-width:820px) {
      .rail__viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
      }

      .rail__viewport::-webkit-scrollbar {
        display: none
      }

      .rail__strip {
        transform: none !important
      }

      .rcard {
        scroll-snap-align: center
      }
    }

    .rcard {
      position: relative;
      flex: none;
      width: min(76vw, 340px);
      aspect-ratio: 3/4.1;
      border-radius: var(--r-lg);
      overflow: hidden;
      /* On the pinned desktop rail the card is sized from viewport height so the
     whole stage (head + rail + progress) always fits one screen. */
      background: var(--seaglass-2);
      box-shadow: var(--sh-1);
      will-change: transform;
      transition: box-shadow .5s var(--e-out)
    }

    .rcard:hover {
      box-shadow: var(--sh-2)
    }

    .rcard img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 1.1s var(--e-out)
    }

    .rcard:hover img {
      transform: scale(1.05)
    }

    .rcard::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(8, 48, 44, .82), rgba(8, 48, 44, .12) 52%, transparent)
    }

    .rcard__body {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: var(--s-5);
      color: #fff
    }

    .rcard__chip {
      display: inline-block;
      font-size: var(--fs-micro);
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      background: rgba(255, 255, 255, .16);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, .24);
      padding: .3rem .65rem;
      border-radius: var(--r-pill);
      margin-bottom: .65rem
    }

    .rcard__body h3 {
      color: #fff;
      margin-bottom: .3rem
    }

    .rcard__body p {
      font-size: var(--fs-small);
      color: rgba(255, 255, 255, .78);
      max-width: 30ch
    }

    .rail__progress {
      height: 2px;
      background: var(--line);
      width: min(320px, 50vw);
      margin: var(--s-6) auto 0;
      border-radius: 2px;
      overflow: hidden;
      position: relative;
      z-index: 2
    }

    @media(max-width:820px) {
      .rail__progress {
        display: none
      }
    }

    .rail__progress i {
      display: block;
      height: 100%;
      background: var(--teal-700);
      width: 100%;
      transform: scaleX(.06);
      transform-origin: left;
      border-radius: 2px
    }

    @media(min-width:821px) {
      .rcard {
        width: auto;
        height: clamp(300px, 50vh, 470px)
      }
    }

    /* ============================================================
   10. WHY VEO
   ============================================================ */
    .why {
      position: relative;
      overflow: hidden
    }

    .why__grid {
      display: grid;
      gap: var(--s-7);
      align-items: start
    }

    @media(min-width:960px) {
      .why__grid {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        gap: var(--s-10)
      }
    }

    .why__sticky {
      position: relative
    }

    @media(min-width:960px) {
      .why__sticky {
        position: sticky;
        top: calc(50vh - 190px)
      }
    }

    .why__blob {
      width: 420px;
      height: 420px;
      left: -30%;
      top: -25%;
      background: radial-gradient(circle, #BFE3DA, rgba(191, 227, 218, 0) 70%);
      opacity: .6
    }

    .why__photo {
      margin-top: var(--s-6);
      border-radius: var(--r-lg);
      overflow: hidden;
      aspect-ratio: 4/3;
      box-shadow: var(--sh-2);
      position: relative;
      z-index: 1
    }

    .why__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .whylist {
      display: grid;
      gap: var(--s-3)
    }

    .whyitem {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--s-4);
      align-items: start;
      padding: var(--s-5);
      border-radius: var(--r-lg);
      border: 1px solid var(--line);
      background: var(--card);
      transition: background .5s var(--e-out), border-color .5s, transform .5s var(--e-out), box-shadow .5s
    }

    .whyitem.is-active {
      background: var(--teal-900);
      border-color: var(--teal-900);
      color: #fff;
      box-shadow: var(--sh-3)
    }

    .whyitem.is-active p {
      color: rgba(255, 255, 255, .72)
    }

    .whyitem.is-active .whyitem__n {
      background: var(--seaglass);
      color: var(--teal-900)
    }

    .whyitem__n {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      flex: none;
      background: var(--seaglass-2);
      color: var(--teal-700);
      font-weight: 600;
      font-size: var(--fs-small);
      font-variant-numeric: tabular-nums;
      transition: background .5s, color .5s
    }

    .whyitem h3 {
      font-size: 1.12rem;
      margin-bottom: .3rem
    }

    .whyitem p {
      color: var(--ink-60);
      font-size: var(--fs-small);
      max-width: 52ch;
      transition: color .5s
    }

    /* ============================================================
   11. STATS BAND
   ============================================================ */
    .stats {
      background: var(--teal-900);
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .stats__swoosh {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: .24;
      pointer-events: none
    }

    .stats__grid {
      position: relative;
      z-index: 2;
      display: grid;
      gap: var(--s-6);
      grid-template-columns: repeat(2, 1fr);
      text-align: center
    }

    @media(min-width:900px) {
      .stats__grid {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    .stat b {
      display: block;
      font-size: clamp(2.5rem, 5.2vw, 4.1rem);
      font-weight: 600;
      letter-spacing: -.05em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      color: #fff
    }

    .stat b .u {
      color: var(--seaglass)
    }

    .stat span {
      display: block;
      margin-top: .7rem;
      font-size: var(--fs-small);
      color: rgba(255, 255, 255, .62);
      max-width: 20ch;
      margin-inline: auto
    }

    .stats__note {
      position: relative;
      z-index: 2;
      text-align: center;
      margin-top: var(--s-8);
      font-size: var(--fs-small);
      color: rgba(255, 255, 255, .5)
    }

    /* ============================================================
   12. SERVICE AREAS
   ============================================================ */
    .areas {
      background: var(--seaglass-2);
      position: relative;
      overflow: hidden
    }

    .areas__grid {
      display: grid;
      gap: var(--s-7);
      align-items: center
    }

    @media(min-width:960px) {
      .areas__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--s-9)
      }
    }

    .map {
      position: relative;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: var(--s-5);
      box-shadow: var(--sh-1)
    }

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

    .map .rgn {
      cursor: pointer
    }

    .map .rgn path {
      stroke: #fff;
      stroke-width: 2.5;
      transition: fill .4s var(--e-out)
    }

    .map .rgn text {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .04em;
      fill: var(--teal-900);
      pointer-events: none;
      transition: fill .4s var(--e-out)
    }

    .map .rgn[data-region="north"] path {
      fill: #CFE9E1
    }

    .map .rgn[data-region="central"] path {
      fill: #B4DED2
    }

    .map .rgn[data-region="south"] path {
      fill: #9CD2C4
    }

    .map .rgn:hover path,
    .map .rgn.is-on path {
      fill: var(--teal-700)
    }

    .map .rgn:hover text,
    .map .rgn.is-on text {
      fill: #fff
    }

    .map .water {
      fill: #EAF2F5
    }

    .map .pin {
      fill: var(--gold)
    }

    .map__legend {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-4);
      margin-top: var(--s-4);
      font-size: var(--fs-micro);
      color: var(--ink-60)
    }

    .map__legend b {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-weight: 500
    }

    .map__legend i {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      background: var(--seaglass);
      display: block
    }

    .region {
      border-top: 1px solid rgba(11, 31, 28, .12);
      padding-block: var(--s-5)
    }

    .region:first-of-type {
      border-top: 0;
      padding-top: 0
    }

    .region__h {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--s-4);
      margin-bottom: .7rem;
      cursor: default
    }

    .region__h h3 {
      font-size: 1.1rem
    }

    .region__h span {
      font-size: var(--fs-micro);
      color: var(--ink-40);
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .region ul {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem
    }

    .region li {
      font-size: var(--fs-small);
      color: var(--ink-60);
      background: rgba(255, 255, 255, .8);
      border: 1px solid rgba(11, 31, 28, .06);
      padding: .32rem .7rem;
      border-radius: var(--r-pill);
      transition: background .3s, color .3s
    }

    .region li:hover {
      background: var(--card);
      color: var(--ink)
    }

    .zipcheck {
      margin-top: var(--s-6);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: var(--s-5);
      box-shadow: var(--sh-1)
    }

    .zipcheck p {
      font-size: var(--fs-small);
      color: var(--ink-60);
      margin-bottom: var(--s-4)
    }

    .zipcheck__row {
      display: flex;
      gap: .5rem;
      flex-wrap: wrap
    }

    .zipcheck input {
      flex: 1 1 160px;
      min-width: 0;
      padding: .85rem 1.1rem;
      border-radius: var(--r-pill);
      border: 1px solid var(--line);
      background: var(--canvas);
      letter-spacing: .06em
    }

    .zipcheck input:focus {
      outline: none;
      border-color: var(--teal-500);
      box-shadow: 0 0 0 3px rgba(26, 117, 106, .14)
    }

    .zipcheck__out {
      margin-top: var(--s-4);
      font-size: var(--fs-small);
      font-weight: 500;
      display: none
    }

    .zipcheck__out.is-on {
      display: block
    }

    .zipcheck__out.ok {
      color: var(--teal-700)
    }

    .zipcheck__out.no {
      color: #9A3B2C
    }

    /* ============================================================
   13. PROCESS
   ============================================================ */
    .process {
      position: relative;
      overflow: hidden;
      color: var(--ink)
    }

    .process__path {
      position: absolute;
      left: 0;
      right: 0;
      top: 52%;
      z-index: 0;
      pointer-events: none;
      display: none
    }

    @media(min-width:960px) {
      .process__path {
        display: block
      }
    }

    .process__path path {
      fill: none;
      stroke: var(--seaglass);
      stroke-width: 1.5;
      stroke-dasharray: 5 10;
      stroke-linecap: round;
      opacity: .2
    }

    .steps {
      position: relative;
      z-index: 1;
      display: grid;
      gap: var(--s-6);
      grid-template-columns: 1fr
    }

    @media(min-width:820px) {
      .steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-7)
      }
    }

    .step {
      text-align: center;
      padding-inline: var(--s-3)
    }

    .step__n {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin: 0 auto var(--s-5);
      display: grid;
      place-items: center;
      background: var(--gold-soft);
      color: #7A5A12;
      font-weight: 600;
      font-size: 1.28rem;
      border: 6px solid var(--canvas);
      position: relative;
      transition: transform .55s var(--e-out)
    }

    .step__n::after {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1px dashed rgba(201, 146, 47, .5)
    }

    .step:hover .step__n {
      transform: scale(1.07)
    }

    .step h3 {
      margin-bottom: .5rem;
      color: var(--ink)
    }

    .step p {
      color: var(--ink-60);
      font-size: var(--fs-small);
      max-width: 34ch;
      margin-inline: auto
    }

    /* ============================================================
   14. BEFORE / AFTER
   ============================================================ */
    .ba {
      position: relative;
      overflow: hidden;
      background: var(--sand-2)
    }

    .ba__grid {
      display: grid;
      gap: var(--s-7);
      align-items: center
    }

    @media(min-width:960px) {
      .ba__grid {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: var(--s-9)
      }
    }

    .compare {
      position: relative;
      border-radius: var(--r-lg);
      overflow: hidden;
      aspect-ratio: 16/10;
      box-shadow: var(--sh-2);
      touch-action: pan-y;
      background: #ddd;
      cursor: ew-resize;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none
    }

    .compare img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none
    }

    /* While scrubbing, nothing on the page may be selected or dragged. */
    body.is-dragging {
      user-select: none;
      -webkit-user-select: none;
      cursor: ew-resize
    }

    body.is-dragging * {
      user-select: none !important;
      -webkit-user-select: none !important
    }

    .compare__after {
      clip-path: inset(0 0 0 var(--p, 50%))
    }

    .compare__tag {
      position: absolute;
      bottom: var(--s-4);
      z-index: 3;
      font-size: var(--fs-micro);
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      background: rgba(11, 31, 28, .62);
      backdrop-filter: blur(8px);
      color: #fff;
      padding: .35rem .75rem;
      border-radius: var(--r-pill)
    }

    .compare__tag--b {
      left: var(--s-4)
    }

    .compare__tag--a {
      right: var(--s-4)
    }

    .compare__handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--p, 50%);
      width: 2px;
      background: #fff;
      z-index: 4;
      box-shadow: 0 0 0 1px rgba(11, 31, 28, .12);
      transform: translateX(-1px)
    }

    .compare__knob {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #fff;
      box-shadow: var(--sh-2);
      display: grid;
      place-items: center;
      color: var(--ink)
    }

    .compare__knob svg {
      width: 20px;
      height: 20px
    }

    .compare:not(.is-touched) .compare__knob {
      animation: hint 2.6s var(--e-io) infinite
    }

    @keyframes hint {

      0%,
      100% {
        transform: translate(-50%, -50%)
      }

      30% {
        transform: translate(calc(-50% - 9px), -50%)
      }

      60% {
        transform: translate(calc(-50% + 9px), -50%)
      }
    }

    .ba__points {
      display: grid;
      gap: var(--s-4);
      margin-top: var(--s-6)
    }

    .ba__pt {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--s-3);
      align-items: start;
      font-size: var(--fs-small);
      color: var(--ink-60)
    }

    .ba__pt svg {
      width: 20px;
      height: 20px;
      color: var(--teal-500);
      flex: none;
      margin-top: 1px
    }

    .ba__pt b {
      display: block;
      color: var(--ink);
      font-weight: 600;
      margin-bottom: .1rem
    }

    /* ============================================================
   15. PRICING
   ============================================================ */
    .plans {
      display: grid;
      gap: var(--s-4);
      grid-template-columns: 1fr;
      align-items: stretch
    }

    @media(min-width:900px) {
      .plans {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-5)
      }
    }

    .plan {
      position: relative;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: var(--s-6) var(--s-5);
      display: flex;
      flex-direction: column;
      transition: transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .4s
    }

    .plan:hover {
      transform: translateY(-4px);
      box-shadow: var(--sh-2)
    }

    .plan--hero {
      background: var(--teal-900);
      color: #fff;
      border-color: var(--teal-900);
      box-shadow: var(--sh-3)
    }

    @media(min-width:900px) {
      .plan--hero {
        transform: scale(1.035)
      }

      .plan--hero:hover {
        transform: scale(1.035) translateY(-4px)
      }
    }

    .plan__ribbon {
      position: absolute;
      top: -11px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gold);
      color: #231703;
      font-size: var(--fs-micro);
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      padding: .32rem .8rem;
      border-radius: var(--r-pill);
      box-shadow: 0 6px 16px rgba(201, 146, 47, .35);
      white-space: nowrap
    }

    .plan__kicker {
      font-size: var(--fs-micro);
      font-weight: 600;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--teal-500)
    }

    .plan h3 {
      margin: .55rem 0 .35rem
    }

    .plan>p {
      font-size: var(--fs-small);
      color: var(--ink-60);
      max-width: 32ch
    }

    .plan__price {
      display: flex;
      align-items: baseline;
      gap: .4rem;
      margin: var(--s-5) 0 .25rem
    }

    .plan__price em {
      font-style: normal;
      font-size: var(--fs-small);
      color: var(--ink-40)
    }

    .plan__price b {
      font-size: clamp(2.1rem, 3.5vw, 2.7rem);
      font-weight: 600;
      letter-spacing: -.045em;
      line-height: 1
    }

    .plan__save {
      font-size: var(--fs-micro);
      color: var(--ink-40)
    }

    .plan ul {
      margin: var(--s-5) 0 var(--s-6);
      display: grid;
      gap: .6rem
    }

    .plan li {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .6rem;
      align-items: start;
      font-size: var(--fs-small);
      color: var(--ink-60);
      padding-bottom: .6rem;
      border-bottom: 1px solid var(--line-soft)
    }

    .plan li:last-child {
      border-bottom: 0;
      padding-bottom: 0
    }

    .plan li svg {
      width: 16px;
      height: 16px;
      color: var(--teal-500);
      flex: none;
      margin-top: 3px
    }

    .plan .btn {
      margin-top: auto
    }

    /* Dark-card overrides live AFTER the base .plan rules — same specificity,
   so source order is what decides the winner. */
    .plan--hero>p,
    .plan--hero .plan__save {
      color: rgba(255, 255, 255, .72)
    }

    .plan--hero .plan__kicker {
      color: var(--seaglass)
    }

    .plan--hero .plan__price em {
      color: rgba(255, 255, 255, .6)
    }

    .plan--hero li {
      color: rgba(255, 255, 255, .84);
      border-bottom-color: rgba(255, 255, 255, .14)
    }

    .plan--hero li svg {
      color: var(--seaglass)
    }

    .plan--hero .btn--ghost {
      color: #fff;
      border-color: rgba(255, 255, 255, .3)
    }

    .plan--hero .btn--ghost::before {
      background: #fff
    }

    .plan--hero .btn--ghost:hover {
      color: var(--teal-900)
    }

    .plans__note {
      text-align: center;
      margin-top: var(--s-6);
      font-size: var(--fs-small);
      color: var(--ink-40);
      max-width: 60ch;
      margin-inline: auto
    }

    /* ============================================================
   16. REVIEWS — MARQUEE GRID
   ============================================================ */
    .revwallsec {
      background: var(--teal-900);
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .revwallsec .eyebrow {
      margin-bottom: var(--s-4)
    }

    .revwallsec__head {
      margin-bottom: var(--s-8)
    }

    .revwallsec__head h2 {
      max-width: 20ch
    }

    .revwall {
      display: flex;
      flex-direction: column;
      gap: var(--s-5);
      position: relative
    }

    .revwall::before,
    .revwall::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 10%;
      z-index: 2;
      pointer-events: none
    }

    .revwall::before {
      left: 0;
      background: linear-gradient(90deg, var(--teal-900), transparent)
    }

    .revwall::after {
      right: 0;
      background: linear-gradient(-90deg, var(--teal-900), transparent)
    }

    .revwall__row {
      display: flex;
      width: max-content
    }

    .revwall__row--l {
      animation: revscroll-l 62s linear infinite
    }

    .revwall__row--r {
      animation: revscroll-r 74s linear infinite
    }

    .revwall:hover .revwall__row {
      animation-play-state: paused
    }

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

    @keyframes revscroll-r {
      from {
        transform: translateX(-50%)
      }

      to {
        transform: translateX(0)
      }
    }

    .revwall__set {
      display: flex;
      gap: var(--s-5);
      padding-right: var(--s-5)
    }

    .revcard {
      flex: none;
      width: min(360px, 82vw);
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: var(--r-lg);
      padding: var(--s-5);
      backdrop-filter: blur(6px)
    }

    .revcard__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--s-4)
    }

    .revcard__platform {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-size: var(--fs-micro);
      font-weight: 600;
      color: rgba(255, 255, 255, .55)
    }

    .revcard__pico {
      width: 16px;
      height: 16px;
      flex: none
    }

    .revcard blockquote {
      font-size: var(--fs-body);
      line-height: 1.55;
      color: rgba(255, 255, 255, .88)
    }

    .revcard__by {
      margin-top: var(--s-5);
      display: flex;
      align-items: baseline;
      gap: .6rem;
      flex-wrap: wrap
    }

    .revcard__by b {
      font-weight: 600
    }

    .revcard__by span {
      color: rgba(255, 255, 255, .5);
      font-size: var(--fs-small)
    }

    @media(max-width:640px) {

      .revwall__row--l,
      .revwall__row--r {
        animation-duration: 46s
      }
    }

    /* ============================================================
   17. QUOTE FORM
   ============================================================ */
    .quote {
      position: relative;
      overflow: hidden;
      scroll-margin-top: 90px
    }

    .quote__blob {
      width: 560px;
      height: 560px;
      right: -16%;
      top: -14%;
      background: radial-gradient(circle, #F2DFB8, rgba(242, 223, 184, 0) 70%)
    }

    .quote__shell {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 0;
      border: 1px solid var(--line);
      border-radius: var(--r-xl);
      overflow: hidden;
      background: var(--card);
      box-shadow: var(--sh-2)
    }

    @media(min-width:960px) {
      .quote__shell {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr)
      }
    }

    .qmain {
      padding: clamp(1.4rem, 3.4vw, var(--s-8))
    }

    .qbar {
      height: 4px;
      background: var(--line-soft);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: var(--s-3)
    }

    .qbar i {
      display: block;
      height: 100%;
      background: var(--teal-700);
      width: 20%;
      border-radius: 4px;
      transition: width .55s var(--e-out)
    }

    .qmeta {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-micro);
      color: var(--ink-40);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: var(--s-6)
    }

    .qsteps {
      position: relative
    }

    .qstep {
      display: none
    }

    .qstep.is-on {
      display: block;
      animation: qin .5s var(--e-out)
    }

    @keyframes qin {
      from {
        opacity: 0;
        transform: translateX(22px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .qstep h3 {
      font-size: clamp(1.35rem, 2.4vw, 1.85rem);
      letter-spacing: -.03em;
      margin-bottom: .4rem
    }

    .qstep>p {
      color: var(--ink-60);
      font-size: var(--fs-small);
      margin-bottom: var(--s-5);
      max-width: 46ch
    }

    .qopts {
      display: grid;
      gap: .7rem;
      grid-template-columns: repeat(2, 1fr)
    }

    @media(min-width:640px) {
      .qopts--4 {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    .qopt {
      position: relative
    }

    .qopt input {
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      cursor: pointer
    }

    /* Scoped to the span that FOLLOWS the input, so .qopt__badge (which sits
   before it) doesn't pick up the option-tile styling. */
    .qopt input+span {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      text-align: center;
      padding: var(--s-5) .7rem;
      border: 1.5px solid var(--line);
      border-radius: var(--r-md);
      background: var(--canvas);
      font-size: var(--fs-small);
      font-weight: 600;
      min-height: 112px;
      transition: border-color .3s, background .3s, transform .35s var(--e-out), box-shadow .3s
    }

    .qopt input+span small {
      display: block;
      font-weight: 400;
      font-size: var(--fs-micro);
      color: var(--ink-40);
      line-height: 1.3
    }

    .qopt svg {
      width: 26px;
      height: 26px;
      stroke: var(--teal-700);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .qopt input:hover+span {
      border-color: var(--teal-500);
      transform: translateY(-2px)
    }

    .qopt input:focus-visible+span {
      outline: 2.5px solid var(--teal-500);
      outline-offset: 3px
    }

    .qopt input:checked+span {
      border-color: var(--teal-700);
      background: var(--seaglass-2);
      box-shadow: 0 0 0 3px rgba(15, 79, 71, .1)
    }

    .qopt__badge {
      position: absolute;
      top: -8px;
      right: -6px;
      background: var(--gold);
      color: #231703;
      font-size: .66rem;
      font-weight: 700;
      padding: .2rem .5rem;
      border-radius: var(--r-pill);
      z-index: 2;
      pointer-events: none;
      box-shadow: 0 3px 8px rgba(201, 146, 47, .35)
    }

    .qrow {
      display: grid;
      gap: var(--s-4)
    }

    @media(min-width:560px) {
      .qrow--2 {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .qfield label,
    .stepper__lab {
      display: block;
      font-size: var(--fs-small);
      font-weight: 600;
      margin-bottom: .45rem
    }

    .qfield input,
    .qfield select {
      width: 100%;
      padding: .9rem 1.05rem;
      border: 1.5px solid var(--line);
      border-radius: var(--r-sm);
      background: var(--canvas);
      transition: border-color .25s, box-shadow .25s
    }

    .qfield input:focus,
    .qfield select:focus {
      outline: none;
      border-color: var(--teal-500);
      box-shadow: 0 0 0 3px rgba(26, 117, 106, .14)
    }

    .qfield input[aria-invalid="true"] {
      border-color: #C0553F;
      background: #FDF4F2
    }

    .qerr {
      display: block;
      font-size: var(--fs-micro);
      color: #9A3B2C;
      margin-top: .35rem;
      min-height: 1.1em
    }

    .stepper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s-4);
      padding: .75rem .85rem .75rem 1.1rem;
      border: 1.5px solid var(--line);
      border-radius: var(--r-md);
      background: var(--canvas)
    }

    .stepper__lab {
      margin: 0
    }

    .stepper__lab small {
      display: block;
      font-weight: 400;
      font-size: var(--fs-micro);
      color: var(--ink-40)
    }

    .stepper__ctl {
      display: flex;
      align-items: center;
      gap: .35rem
    }

    .stepper__ctl button {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--card);
      display: grid;
      place-items: center;
      font-size: 1.15rem;
      line-height: 1;
      transition: background .25s, color .25s, border-color .25s
    }

    .stepper__ctl button:hover:not(:disabled) {
      background: var(--teal-700);
      color: #fff;
      border-color: var(--teal-700)
    }

    .stepper__ctl button:disabled {
      opacity: .35;
      cursor: not-allowed
    }

    .stepper__ctl output {
      min-width: 2.1ch;
      text-align: center;
      font-weight: 600;
      font-variant-numeric: tabular-nums
    }

    .qnav {
      display: flex;
      align-items: center;
      gap: .7rem;
      margin-top: var(--s-6);
      flex-wrap: wrap
    }

    .qback {
      font-size: var(--fs-small);
      font-weight: 500;
      color: var(--ink-40);
      padding: .6rem .3rem;
      transition: color .25s
    }

    .qback:hover {
      color: var(--ink)
    }

    .qnav__legal {
      font-size: var(--fs-micro);
      color: var(--ink-40);
      flex-basis: 100%;
      margin-top: -.2rem
    }

    /* estimate panel */
    .qside {
      background: var(--teal-900);
      color: #fff;
      padding: clamp(1.4rem, 3.4vw, var(--s-7));
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column
    }

    @media(min-width:960px) {
      .qside {
        position: sticky;
        top: 0;
        align-self: stretch
      }
    }

    /* On mobile the price leads — it's the reason people finish the form. */
    @media(max-width:959px) {
      .qside {
        order: -1
      }
    }

    .qside__blob {
      width: 340px;
      height: 340px;
      left: -30%;
      bottom: -25%;
      background: radial-gradient(circle, #1A756A, rgba(26, 117, 106, 0) 70%);
      opacity: .9
    }

    /* :not(.blob) — otherwise this would override the blob's position:absolute
   and drop a 340px decorative circle into the flex flow. */
    .qside>:not(.blob) {
      position: relative;
      z-index: 1
    }

    .qside__lab {
      font-size: var(--fs-micro);
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--seaglass)
    }

    .qest {
      display: flex;
      align-items: baseline;
      gap: .35rem;
      margin: .7rem 0 .3rem
    }

    .qest b {
      font-size: clamp(2.4rem, 5vw, 3.3rem);
      font-weight: 600;
      letter-spacing: -.05em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      transition: transform .35s var(--e-out)
    }

    .qest b.bump {
      transform: scale(1.06)
    }

    .qest em {
      font-style: normal;
      font-size: var(--fs-small);
      color: rgba(255, 255, 255, .55)
    }

    .qside__sub {
      font-size: var(--fs-small);
      color: rgba(255, 255, 255, .6);
      max-width: 30ch
    }

    .qrecap {
      margin-top: var(--s-6);
      display: grid;
      gap: .55rem;
      font-size: var(--fs-small)
    }

    .qrecap div {
      display: flex;
      justify-content: space-between;
      gap: var(--s-3);
      padding-bottom: .55rem;
      border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    .qrecap span {
      color: rgba(255, 255, 255, .55)
    }

    .qrecap b {
      font-weight: 500;
      text-align: right
    }

    .qside__trust {
      margin-top: auto;
      padding-top: var(--s-6);
      display: grid;
      gap: .6rem;
      font-size: var(--fs-micro);
      color: rgba(255, 255, 255, .6)
    }

    .qside__trust b {
      display: flex;
      align-items: center;
      gap: .5rem;
      font-weight: 400
    }

    .qside__trust svg {
      width: 15px;
      height: 15px;
      color: var(--seaglass);
      flex: none
    }

    .qdone {
      display: none;
      text-align: center;
      padding: var(--s-8) var(--s-4)
    }

    .qdone.is-on {
      display: block;
      animation: qin .6s var(--e-out)
    }

    .qdone__ic {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--seaglass-2);
      color: var(--teal-700);
      display: grid;
      place-items: center;
      margin: 0 auto var(--s-5)
    }

    .qdone__ic svg {
      width: 34px;
      height: 34px
    }

    .qdone h3 {
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      margin-bottom: .5rem
    }

    .qdone p {
      color: var(--ink-60);
      max-width: 44ch;
      margin-inline: auto;
      font-size: var(--fs-small)
    }

    /* ============================================================
   18. FAQ
   ============================================================ */
    .faq__grid {
      display: grid;
      gap: var(--s-7)
    }

    @media(min-width:960px) {
      .faq__grid {
        grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
        gap: var(--s-9)
      }
    }

    .faq__aside {
      position: relative
    }

    @media(min-width:960px) {
      .faq__aside {
        position: sticky;
        top: 110px;
        align-self: start
      }
    }

    .faq__list {
      border-top: 1px solid var(--line)
    }

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

    .faqitem__q {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--s-4);
      padding: var(--s-5) 0;
      text-align: left;
      font-weight: 600;
      font-size: var(--fs-lead);
      letter-spacing: -.018em;
      cursor: pointer;
      list-style: none;
      transition: color .25s
    }

    .faqitem__q::-webkit-details-marker {
      display: none
    }

    .faqitem__q::marker {
      content: ""
    }

    .faqitem__q:hover {
      color: var(--teal-700)
    }

    .faqitem__ic {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid var(--line);
      flex: none;
      display: grid;
      place-items: center;
      position: relative;
      margin-top: 2px;
      transition: background .35s, border-color .35s
    }

    .faqitem__ic::before,
    .faqitem__ic::after {
      content: "";
      position: absolute;
      background: var(--ink);
      border-radius: 2px;
      transition: transform .4s var(--e-out), background .35s
    }

    .faqitem__ic::before {
      width: 11px;
      height: 1.6px
    }

    .faqitem__ic::after {
      width: 1.6px;
      height: 11px
    }

    .faqitem[open] .faqitem__ic {
      background: var(--teal-700);
      border-color: var(--teal-700)
    }

    .faqitem[open] .faqitem__ic::before,
    .faqitem[open] .faqitem__ic::after {
      background: #fff
    }

    .faqitem[open] .faqitem__ic::after {
      transform: scaleY(0)
    }

    .faqitem__a {
      overflow: hidden;
      height: 0;
      transition: height .45s var(--e-out)
    }

    .faqitem__a p {
      padding-bottom: var(--s-5);
      color: var(--ink-60);
      font-size: var(--fs-small);
      max-width: 62ch
    }

    /* ============================================================
   19. FINAL CTA + FOOTER
   ============================================================ */
    .final {
      position: relative;
      overflow: hidden;
      color: #fff;
      isolation: isolate
    }

    .final img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2
    }

    .final::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(120deg, rgba(8, 48, 44, .94), rgba(8, 48, 44, .72) 55%, rgba(15, 79, 71, .55))
    }

    .final__in {
      text-align: center;
      padding-block: clamp(4rem, 9vw, var(--s-12))
    }

    .final h2 {
      max-width: 18ch;
      margin-inline: auto
    }

    .final p {
      margin: var(--s-5) auto 0;
      max-width: 52ch;
      color: rgba(255, 255, 255, .75);
      font-size: var(--fs-lead)
    }

    .final__ctas {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-3);
      justify-content: center;
      margin-top: var(--s-6)
    }

    .final__guar {
      margin-top: var(--s-6);
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      font-size: var(--fs-small);
      color: var(--seaglass);
      border: 1px solid rgba(255, 255, 255, .2);
      background: rgba(255, 255, 255, .07);
      backdrop-filter: blur(10px);
      padding: .55rem 1.05rem;
      border-radius: var(--r-pill)
    }

    .final__guar svg {
      width: 16px;
      height: 16px;
      flex: none
    }

    .foot {
      background: var(--teal-900);
      color: rgba(255, 255, 255, .62);
      padding-block: var(--s-9) var(--s-6);
      font-size: var(--fs-small)
    }

    .foot__grid {
      display: grid;
      gap: var(--s-7)
    }

    @media(min-width:760px) {
      .foot__grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(min-width:1024px) {
      .foot__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
        gap: var(--s-6)
      }
    }

    .foot .brand {
      margin-bottom: var(--s-4)
    }

    .foot__blurb {
      max-width: 36ch
    }

    .foot h3 {
      color: #fff;
      font-size: var(--fs-micro);
      letter-spacing: .13em;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: var(--s-4)
    }

    .foot ul {
      display: grid;
      gap: .6rem
    }

    .foot a:hover {
      color: #fff
    }

    .foot__soc {
      display: flex;
      gap: .5rem;
      margin-top: var(--s-5)
    }

    .foot__soc a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .16);
      display: grid;
      place-items: center;
      transition: background .3s, color .3s, border-color .3s
    }

    .foot__soc a:hover {
      background: #fff;
      color: var(--teal-900);
      border-color: #fff
    }

    .foot__soc svg {
      width: 16px;
      height: 16px
    }

    .foot__nap {
      color: #fff;
      font-style: normal;
      line-height: 1.9
    }

    .foot__nap a {
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: rgba(255, 255, 255, .3)
    }

    .foot__legal {
      margin-top: var(--s-8);
      padding-top: var(--s-5);
      border-top: 1px solid rgba(255, 255, 255, .12);
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-4);
      justify-content: space-between;
      font-size: var(--fs-micro);
      color: rgba(255, 255, 255, .42)
    }

    .foot__legal ul {
      display: flex;
      gap: var(--s-4)
    }

    /* ============================================================
   20. STICKY MOBILE BAR
   ============================================================ */
    .mbar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 44;
      display: none;
      gap: .5rem;
      padding: .65rem var(--s-4) calc(.65rem + env(safe-area-inset-bottom));
      background: rgba(251, 250, 247, .9);
      backdrop-filter: blur(18px);
      border-top: 1px solid var(--line);
      transform: translateY(110%);
      transition: transform .5s var(--e-out)
    }

    @media(max-width:767px) {
      .mbar {
        display: flex
      }
    }

    .mbar.is-on {
      transform: none
    }

    .mbar .btn {
      flex: 1;
      padding: .85rem 1rem;
      font-size: var(--fs-small)
    }

    @media(max-width:767px) {
      body {
        padding-bottom: 0
      }

      .foot {
        padding-bottom: calc(var(--s-6) + 70px)
      }
    }

    /* ============================================================
   21. REDUCED MOTION
   ============================================================ */
    @media(prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
      }

      .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important
      }

      .hero__title .w>span {
        transform: none !important
      }

      .hero__sub,
      .hero__ctas,
      .hero__micro {
        opacity: 1 !important;
        transform: none !important
      }

      .hero__track,
      .rail__track {
        height: auto !important
      }

      .hero__stage,
      .rail__stage {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        padding-block: var(--s-8)
      }

      .hero__visual {
        aspect-ratio: 16/9;
        height: auto !important;
        margin-top: var(--s-6)
      }

      .hero__lower {
        height: auto !important
      }

      .rail__viewport {
        overflow-x: auto
      }

      .rail__strip {
        transform: none !important
      }

      .marquee,
      .logomarquee,
      .revwall__row {
        animation: none
      }

      .compare__knob {
        animation: none !important
      }
    }

/* ============================================================
   22. SUBPAGE SHARED — breadcrumbs, page hero, town/service chips
   Used by contact.php and everything under /services/, /locations/
   ============================================================ */
.crumbs {
  /* .nav floats with `margin-bottom:-100px` (see rule 601) so it can sit as a
     translucent pill over a hero image; any element placed right after it on
     a page with no hero needs matching top padding to clear that overlap. */
  padding-top: calc(100px + var(--s-4));
  padding-bottom: var(--s-4);
  font-size: var(--fs-micro);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  color: var(--ink-40);
}

.crumbs a {
  color: var(--ink-60);
  font-weight: 500;
}

.crumbs a:hover {
  color: var(--teal-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs li[aria-current="page"] {
  color: var(--ink-60);
  font-weight: 600;
}

.crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: .4rem;
  color: var(--line);
}

/* Compact page hero for subpages (contact / service / location) */
.phero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.4rem, 5vw, var(--s-9));
  background: linear-gradient(180deg, var(--seaglass-2), var(--canvas) 70%);
}

.phero__grid {
  display: grid;
  gap: var(--s-6);
}

@media(min-width:900px) {
  .phero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: var(--s-9)
  }
}

.phero h1 {
  font-size: var(--fs-h1);
  letter-spacing: -.03em;
  line-height: 1.04;
  margin-top: var(--s-4);
}

.phero__lead {
  font-size: var(--fs-lead);
  color: var(--ink-60);
  margin-top: var(--s-5);
  max-width: 52ch;
}

.phero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: var(--s-6);
}

.phero__fact {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .5rem .9rem;
  font-size: var(--fs-small);
  font-weight: 600;
  box-shadow: var(--sh-1);
}

.phero__fact svg {
  width: 15px;
  height: 15px;
  color: var(--teal-500);
  flex: none;
}

.phero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: var(--s-6);
}

/* Chip list — related towns / related services, for internal linking blocks */
.chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-60);
  transition: border-color .2s var(--e-out), color .2s var(--e-out), background .2s var(--e-out);
}

.chip:hover {
  border-color: var(--teal-500);
  color: var(--teal-700);
  background: var(--seaglass-2);
}

.chip--current {
  border-color: var(--teal-700);
  color: var(--teal-900);
  background: var(--seaglass-2);
  cursor: default;
}

/* Checklist used on service pages ("what's included") */
.checklist {
  display: grid;
  gap: .85rem;
}

@media(min-width:640px) {
  .checklist--2 {
    grid-template-columns: repeat(2, 1fr)
  }
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--fs-body);
}

.checklist svg {
  width: 18px;
  height: 18px;
  color: var(--teal-500);
  flex: none;
  margin-top: .15rem;
}

/* Map embed frame, reused on contact + location pages */
.mapframe {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  aspect-ratio: 4/3;
}

.mapframe iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media(min-width:900px) {
  .mapframe {
    aspect-ratio: 16/10
  }
}

/* ============================================================
   23. KIT COMPONENTS — generic, page-agnostic building blocks
   Everything above this line is coupled to a specific section of the site
   (.svcard belongs to the services grid, .qopt to the estimator, and so on).
   The classes below are deliberately NOT coupled to anything: they are the
   reusable vocabulary — tabs, progress, badges, alerts, cards, tables,
   fields, dividers, avatars, tooltips — and the pieces that become Elementor
   widgets / global styles later. Showcased on /style-guide.php.
   Tokens only in here: no raw hex, no magic radii, no ad-hoc easing.
   ============================================================ */

/* ---- 23.1 TABS ------------------------------------------------
   Markup: [data-tabs] > .tabs__list[role=tablist] > button.tabs__tab[role=tab]
                       + .tabs__panel[role=tabpanel]
   Behaviour lives in main.js module 12. Without JS the first panel shows
   and the tabs read as plain buttons — no broken state. */
.tabs {
  --tab-accent: var(--teal-700);
}

.tabs__list {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
}

.tabs__list::-webkit-scrollbar {
  display: none;
}

.tabs__tab {
  position: relative;
  flex: none;
  padding: .8rem 1.15rem;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-60);
  white-space: nowrap;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color .3s var(--e-out), background .3s var(--e-out);
}

.tabs__tab::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: -1px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--tab-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .42s var(--e-out);
}

.tabs__tab:hover {
  color: var(--ink);
}

.tabs__tab[aria-selected="true"] {
  color: var(--teal-900);
}

.tabs__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.tabs__panel {
  animation: tabIn .5s var(--e-out) both;
}

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

  to {
    opacity: 1;
    transform: none
  }
}

/* Pill variant — no underline, seaglass capsule instead */
.tabs--pill .tabs__list {
  border-bottom: 0;
  gap: .45rem;
  padding: .35rem;
  background: var(--seaglass-2);
  border-radius: var(--r-pill);
  width: fit-content;
  max-width: 100%;
}

.tabs--pill .tabs__tab {
  border-radius: var(--r-pill);
  padding: .6rem 1.2rem;
}

.tabs--pill .tabs__tab::after {
  display: none;
}

.tabs--pill .tabs__tab[aria-selected="true"] {
  background: var(--card);
  color: var(--teal-900);
  box-shadow: var(--sh-1);
}

/* ---- 23.2 PROGRESS / METER ------------------------------------
   Markup: .prog > .prog__head (label + .prog__val) + .prog__track > .prog__bar
   Fill width comes from an inline custom property: style="--pct:78%" */
.prog+.prog {
  margin-top: var(--s-5);
}

.prog__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: .5rem;
}

.prog__lab {
  font-size: var(--fs-small);
  font-weight: 600;
}

.prog__val {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
}

.prog__track {
  /* The track is a <span>; without this it stays an inline box, height is
     ignored and the bar collapses to nothing. */
  display: block;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  overflow: hidden;
}

.prog__bar {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-700), var(--teal-500));
  transition: width 1.1s var(--e-out) var(--d, 0ms);
}

/* Bars inside a .reveal start empty and fill as the block scrolls in. */
.reveal .prog__bar {
  width: 0;
}

.reveal.is-in .prog__bar {
  width: var(--pct, 0%);
}

.prog--thin .prog__track {
  height: 5px;
}

.prog--lg .prog__track {
  height: 16px;
}

.prog--gold .prog__bar {
  background: linear-gradient(90deg, var(--gold), #e0b45e);
}

.prog--gold .prog__val {
  color: var(--gold);
}

.prog--onDark .prog__track {
  background: rgba(255, 255, 255, .16);
}

.prog--onDark .prog__bar {
  background: linear-gradient(90deg, var(--seaglass), #fff);
}

.prog--onDark .prog__val {
  color: var(--seaglass);
}

/* Circular meter — same --pct contract, conic fill */
.meter {
  --size: 108px;
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--teal-700) var(--pct, 0%), var(--line-soft) 0);
  transition: background 1.1s var(--e-out);
}

.meter::before {
  content: "";
  position: absolute;
  width: calc(var(--size) - 20px);
  height: calc(var(--size) - 20px);
  border-radius: 50%;
  background: var(--card);
}

.meter b {
  position: relative;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ---- 23.3 BADGE -----------------------------------------------
   The smallest label. Not a link (that's .chip) and not a section
   kicker (that's .eyebrow) — this is inline status. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  background: var(--line-soft);
  color: var(--ink-60);
  white-space: nowrap;
}

.badge svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.badge--teal {
  background: var(--teal-700);
  color: #fff;
}

.badge--seaglass {
  background: var(--seaglass);
  color: var(--teal-900);
}

.badge--gold {
  background: var(--gold);
  color: #231703;
}

.badge--sand {
  background: var(--sand);
  color: var(--ink);
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-60);
}

.badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---- 23.4 ALERT / NOTICE --------------------------------------
   Markup: .alert.alert--info > svg (optional icon) + div > strong + p */
.alert {
  --alert-accent: var(--teal-700);
  --alert-bg: var(--seaglass-2);
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--alert-bg);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--alert-accent);
  font-size: var(--fs-body);
}

.alert+.alert {
  margin-top: var(--s-4);
}

.alert>svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: .12rem;
  color: var(--alert-accent);
}

.alert strong {
  display: block;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: .15rem;
}

.alert p {
  color: var(--ink-60);
}

.alert--info {
  --alert-accent: var(--teal-500);
  --alert-bg: var(--seaglass-2);
}

.alert--success {
  --alert-accent: var(--teal-700);
  --alert-bg: rgba(26, 117, 106, .10);
}

.alert--warn {
  --alert-accent: var(--gold);
  --alert-bg: var(--gold-soft);
}

.alert--error {
  --alert-accent: #B4462F;
  --alert-bg: rgba(180, 70, 47, .09);
}

/* ---- 23.5 KIT CARD --------------------------------------------
   Generic content card. Builds on .card (rule 486) but stands alone too.
   Markup: article.kcard > .kcard__media + .kcard__body(> .kcard__meta,
           h3.kcard__title, p, .kcard__foot) */
.kcard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .3s;
}

.kcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}

.kcard__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--seaglass-2);
}

.kcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--e-out);
}

.kcard:hover .kcard__media img {
  transform: scale(1.045);
}

.kcard__media .badge {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 2;
}

.kcard__body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: var(--s-5);
  flex: 1;
}

.kcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.kcard__title {
  font-size: var(--fs-h3);
  letter-spacing: -.02em;
  line-height: 1.18;
}

.kcard__body p {
  color: var(--ink-60);
}

.kcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  color: var(--ink-60);
}

/* Size any icon in the foot. Without this an <svg> carrying only a viewBox
   stretches to fill the flex line instead of sitting inline with the text. */
.kcard__foot svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Icon-led variant — no photo, tinted glyph on top */
.kcard--icon .kcard__body {
  padding-top: var(--s-6);
}

.kcard__ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--tint, var(--seaglass-2));
  color: var(--teal-700);
  margin-bottom: .3rem;
}

.kcard__ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kcard--flat {
  border-color: transparent;
  box-shadow: none;
  background: var(--sand-2);
}

.kcard--flat:hover {
  box-shadow: var(--sh-1);
}

.kcard--bordered {
  box-shadow: none;
}

.kcard--bordered:hover {
  border-color: var(--teal-500);
  box-shadow: none;
  transform: none;
}

.kcard--dark {
  background: var(--teal-900);
  border-color: rgba(255, 255, 255, .12);
  color: #fff;
}

.kcard--dark .kcard__body p,
.kcard--dark .kcard__foot {
  color: rgba(255, 255, 255, .68);
}

.kcard--dark .kcard__meta {
  color: var(--seaglass);
}

.kcard--dark .kcard__foot {
  border-top-color: rgba(255, 255, 255, .12);
}

.kcard--dark .kcard__ic {
  background: rgba(255, 255, 255, .09);
  color: var(--seaglass);
}

/* Quote / testimonial variant */
.kcard--quote .kcard__body {
  gap: var(--s-4);
}

.kcard--quote blockquote {
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -.015em;
}

.kcard--quote figcaption {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: auto;
  font-size: var(--fs-small);
}

.kcard--quote figcaption b {
  display: block;
  font-weight: 600;
}

.kcard--quote figcaption span {
  color: var(--ink-40);
}

/* ---- 23.6 TABLE -----------------------------------------------
   Always wrap in .ktable__wrap so it scrolls instead of blowing out
   the page on narrow screens. */
.ktable__wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}

.ktable {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  font-size: var(--fs-body);
}

.ktable th,
.ktable td {
  padding: .9rem var(--s-5);
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}

.ktable thead th {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-40);
  background: var(--sand-2);
  border-bottom-color: var(--line);
  white-space: nowrap;
}

.ktable tbody tr:last-child td {
  border-bottom: 0;
}

.ktable tbody tr {
  transition: background .25s var(--e-out);
}

.ktable tbody tr:hover {
  background: var(--seaglass-2);
}

.ktable--striped tbody tr:nth-child(even) {
  background: var(--line-soft);
}

.ktable--striped tbody tr:nth-child(even):hover {
  background: var(--seaglass-2);
}

.ktable td b {
  font-weight: 600;
}

/* ---- 23.7 FORM FIELDS -----------------------------------------
   Decoupled from the estimator's .qfield so any page can use them.
   Markup: .field > .field__lab + input.field__input + .field__hint/.field__err */
.field {
  display: block;
}

.field+.field {
  margin-top: var(--s-4);
}

.field__lab {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: .4rem;
}

.field__lab .field__opt {
  font-weight: 400;
  color: var(--ink-40);
  margin-left: .35rem;
}

.field__input {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color .25s var(--e-out), box-shadow .25s var(--e-out);
}

.field__input::placeholder {
  color: var(--ink-40);
}

.field__input:hover:not(:disabled) {
  border-color: rgba(11, 31, 28, .2);
}

.field__input:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(26, 117, 106, .14);
}

.field__input:disabled {
  background: var(--line-soft);
  color: var(--ink-40);
  cursor: not-allowed;
}

textarea.field__input {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}

select.field__input {
  appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 16px;
}

.field__hint {
  display: block;
  margin-top: .35rem;
  font-size: var(--fs-micro);
  color: var(--ink-40);
}

.field__err {
  display: block;
  margin-top: .35rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: #B4462F;
}

.field.is-invalid .field__input {
  border-color: #B4462F;
}

.field.is-invalid .field__input:focus {
  box-shadow: 0 0 0 3px rgba(180, 70, 47, .14);
}

.fieldrow {
  display: grid;
  gap: var(--s-4);
}

/* Inside a row the grid gap does the spacing — the sibling margin that stacks
   standalone fields would otherwise push every column but the first down. */
.fieldrow .field+.field {
  margin-top: 0;
}

@media(min-width:640px) {
  .fieldrow--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .fieldrow--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

/* Checkbox + radio — one shared shape, radio just rounds it off */
.kcheck,
.kradio {
  display: inline-flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: 1.45;
}

.kcheck input,
.kradio input {
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
  margin-top: .1rem;
  border: 1.5px solid var(--line);
  background: var(--card);
  border-radius: 6px;
  cursor: pointer;
  transition: background .25s var(--e-out), border-color .25s var(--e-out);
}

.kradio input {
  border-radius: 50%;
}

.kcheck input:checked,
.kradio input:checked {
  background: var(--teal-700);
  border-color: var(--teal-700);
}

.kcheck input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
}

.kradio input:checked {
  box-shadow: inset 0 0 0 4px var(--card);
}

.kcheck input:disabled,
.kradio input:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.kcheck small,
.kradio small {
  display: block;
  color: var(--ink-40);
  font-size: var(--fs-micro);
}

/* Switch */
.kswitch {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  font-size: var(--fs-body);
}

.kswitch input {
  appearance: none;
  position: relative;
  width: 46px;
  height: 26px;
  flex: none;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--line);
  cursor: pointer;
  transition: background .32s var(--e-out);
}

.kswitch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--sh-1);
  transition: transform .32s var(--e-out);
}

.kswitch input:checked {
  background: var(--teal-700);
}

.kswitch input:checked::after {
  transform: translateX(20px);
}

/* ---- 23.8 DIVIDERS --------------------------------------------
   .hr (rule 273) stays the plain 1px rule; these are the decorated ones. */
.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
}

.divider--gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

.divider--dots {
  height: 5px;
  background: radial-gradient(circle, var(--line) 1.4px, transparent 1.6px);
  background-size: 12px 5px;
  background-repeat: repeat-x;
  background-position: center;
}

.divider--label {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: auto;
  background: none;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.divider--label::before,
.divider--label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---- 23.9 AVATARS ---------------------------------------------
   Generalised from the hero's .avstack. */
.avatar {
  --av: 40px;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid var(--card);
  background: var(--seaglass-2);
  display: grid;
  place-items: center;
  font-size: calc(var(--av) * .36);
  font-weight: 600;
  color: var(--teal-700);
  letter-spacing: 0;
  overflow: hidden;
}

.avatar--sm {
  --av: 30px;
}

.avatar--lg {
  --av: 60px;
}

.avatar-stack {
  display: inline-flex;
  align-items: center;
}

.avatar-stack .avatar+.avatar {
  margin-left: -12px;
}

.avatar-stack .avatar {
  box-shadow: var(--sh-1);
}

.avatar-stack__more {
  margin-left: -12px;
  background: var(--teal-700);
  color: #fff;
}

/* ---- 23.10 TOOLTIP --------------------------------------------
   CSS-only. Markup: <span class="tooltip" data-tip="Text">trigger</span>
   Not keyboard-inert: the trigger takes tabindex="0" so :focus-visible shows it. */
.tooltip {
  position: relative;
  border-bottom: 1px dashed var(--line);
  cursor: help;
}

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 20;
  width: max-content;
  max-width: 240px;
  padding: .55rem .8rem;
  border-radius: var(--r-sm);
  background: var(--teal-900);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  box-shadow: var(--sh-2);
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity .28s var(--e-out), transform .28s var(--e-out);
}

.tooltip:hover::after,
.tooltip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- 23.11 UTILITIES ------------------------------------------
   A deliberately short list — these map 1:1 onto Elementor global classes
   later. Resist growing this into a utility framework. */
.u-bg-canvas {
  background: var(--canvas);
}

.u-bg-card {
  background: var(--card);
}

.u-bg-sand {
  background: var(--sand);
}

.u-bg-sand-2 {
  background: var(--sand-2);
}

.u-bg-seaglass {
  background: var(--seaglass);
}

.u-bg-seaglass-2 {
  background: var(--seaglass-2);
}

.u-bg-teal {
  background: var(--teal-700);
  color: #fff;
}

.u-bg-dark {
  background: var(--teal-900);
  color: #fff;
}

.u-text-ink {
  color: var(--ink);
}

.u-text-muted {
  color: var(--ink-60);
}

.u-text-faint {
  color: var(--ink-40);
}

.u-text-teal {
  color: var(--teal-700);
}

.u-text-gold {
  color: var(--gold);
}

.u-text-white {
  color: #fff;
}

.u-radius-sm {
  border-radius: var(--r-sm);
}

.u-radius-md {
  border-radius: var(--r-md);
}

.u-radius-lg {
  border-radius: var(--r-lg);
}

.u-radius-xl {
  border-radius: var(--r-xl);
}

.u-radius-pill {
  border-radius: var(--r-pill);
}

.u-shadow-1 {
  box-shadow: var(--sh-1);
}

.u-shadow-2 {
  box-shadow: var(--sh-2);
}

.u-shadow-3 {
  box-shadow: var(--sh-3);
}

.u-border {
  border: 1px solid var(--line);
}

.u-border-soft {
  border: 1px solid var(--line-soft);
}

.u-lead {
  font-size: var(--fs-lead);
  color: var(--ink-60);
}

.u-small {
  font-size: var(--fs-small);
}

.u-micro {
  font-size: var(--fs-micro);
}

.u-serif {
  font-family: var(--serif);
}

.u-mt-4 {
  margin-top: var(--s-4);
}

.u-mt-5 {
  margin-top: var(--s-5);
}

.u-mt-6 {
  margin-top: var(--s-6);
}

.u-mt-8 {
  margin-top: var(--s-8);
}

.u-mb-4 {
  margin-bottom: var(--s-4);
}

.u-mb-5 {
  margin-bottom: var(--s-5);
}

.u-mb-6 {
  margin-bottom: var(--s-6);
}

.u-mb-8 {
  margin-bottom: var(--s-8);
}

/* ---- 23.12 REDUCED MOTION for the kit -------------------------
   Section 21 already kills transitions globally; these need their
   end-state forced because they animate from a zeroed value. */
@media(prefers-reduced-motion:reduce) {
  .tabs__panel {
    animation: none !important;
  }

  .reveal .prog__bar {
    width: var(--pct, 0%) !important;
  }

  .kcard:hover {
    transform: none !important;
  }

  .kcard:hover .kcard__media img {
    transform: none !important;
  }
}

/* ============================================================
   24. STYLE-GUIDE PAGE CHROME — /style-guide.php only
   Presentation for the template kit page itself: the section index,
   the specimen frames, the swatch/scale visualisers. None of this is
   meant for the live site, which is why it is namespaced `sg-`.
   Safe to strip once the kit has been ported into Elementor.
   ============================================================ */
.sg-head {
  /* .nav carries margin-bottom:-100px (see .crumbs, rule 3895) — clear it. */
  padding-top: calc(100px + var(--s-6));
  padding-bottom: var(--s-7);
  background: linear-gradient(180deg, var(--seaglass-2), var(--canvas) 78%);
}

.sg-head h1 {
  margin-top: var(--s-4);
  max-width: 18ch;
}

.sg-head p {
  margin-top: var(--s-5);
  max-width: 62ch;
  font-size: var(--fs-lead);
  color: var(--ink-60);
}

.sg-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--s-6);
}

/* Layout: sticky section index beside the content on wide screens */
.sg-layout {
  display: grid;
  gap: var(--s-6);
  align-items: start;
  padding-block: var(--s-7) var(--s-10);
}

/* Grid items default to min-width:auto, so the horizontally-scrolling section
   index below 1100px would size its track to the full un-scrolled list and drag
   the whole page sideways. Both children have to opt out. */
.sg-layout>* {
  min-width: 0;
}

@media(min-width:1100px) {
  .sg-layout {
    grid-template-columns: 216px minmax(0, 1fr);
    gap: var(--s-9);
  }
}

.sg-nav {
  position: sticky;
  top: var(--s-4);
  z-index: 5;
}

.sg-nav__t {
  display: none;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: var(--s-4);
}

.sg-nav ol {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  counter-reset: sgn;
  padding: .5rem;
  background: rgba(251, 250, 247, .88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.sg-nav ol::-webkit-scrollbar {
  display: none;
}

.sg-nav a {
  display: block;
  flex: none;
  padding: .45rem .85rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-60);
  white-space: nowrap;
  transition: color .25s var(--e-out), background .25s var(--e-out);
}

.sg-nav a:hover {
  color: var(--teal-900);
  background: var(--seaglass-2);
}

@media(min-width:1100px) {
  .sg-nav__t {
    display: block;
  }

  .sg-nav ol {
    flex-direction: column;
    gap: 1px;
    overflow: visible;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
  }

  .sg-nav a {
    border-radius: 0;
    padding: .38rem 0 .38rem var(--s-4);
    margin-left: -1px;
    border-left: 2px solid transparent;
    white-space: normal;
  }

  .sg-nav a::before {
    counter-increment: sgn;
    content: counter(sgn, decimal-leading-zero) " ";
    color: var(--ink-40);
    font-variant-numeric: tabular-nums;
  }

  .sg-nav a:hover {
    background: none;
    border-left-color: var(--teal-500);
  }
}

/* One showcase block */
.sg-block {
  scroll-margin-top: var(--s-8);
  padding-bottom: var(--s-9);
}

.sg-block+.sg-block {
  border-top: 1px solid var(--line);
  padding-top: var(--s-8);
}

.sg-block__head {
  margin-bottom: var(--s-6);
}

.sg-block__head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-top: .6rem;
}

.sg-block__head p {
  margin-top: .7rem;
  max-width: 62ch;
  color: var(--ink-60);
}

.sg-block__num {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}

/* The frame a specimen renders inside */
.sg-demo {
  position: relative;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}

.sg-demo+.sg-demo {
  margin-top: var(--s-5);
}

.sg-demo--pad {
  padding: var(--s-8) var(--s-6);
}

.sg-demo--flush {
  padding: 0;
  overflow: hidden;
}

.sg-demo--canvas {
  background: var(--canvas);
}

.sg-demo--dark,
.sg-dark {
  background: var(--teal-900);
  color: #fff;
  border-color: rgba(255, 255, 255, .14);
}

.sg-dark {
  padding: var(--s-6);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
}

.sg-demo--dark h2,
.sg-demo--dark h3,
.sg-dark h2,
.sg-dark h3 {
  color: #fff;
}

.sg-demo--dark p,
.sg-dark p {
  color: rgba(255, 255, 255, .7);
}

/* A caption naming the class(es) on the specimen above it */
.sg-spec {
  display: block;
  margin-top: .7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem;
  letter-spacing: -.01em;
  color: var(--ink-40);
}

.sg-demo--dark .sg-spec,
.sg-dark .sg-spec {
  color: rgba(255, 255, 255, .5);
}

.sg-label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: var(--s-4);
}

.sg-demo--dark .sg-label,
.sg-dark .sg-label {
  color: rgba(255, 255, 255, .55);
}

/* Generic specimen layouts */
.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

.sg-row--top {
  align-items: flex-start;
}

.sg-stack {
  display: grid;
  gap: var(--s-6);
}

.sg-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.sg-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.sg-item {
  min-width: 0;
}

/* Colour swatches */
.sg-sw-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}

.sg-sw {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
}

.sg-sw__chip {
  height: 78px;
  background: var(--c, var(--canvas));
  border-bottom: 1px solid var(--line-soft);
}

.sg-sw__chip--check {
  background-color: var(--card);
  background-image:
    linear-gradient(var(--c), var(--c)),
    linear-gradient(45deg, var(--line-soft) 25%, transparent 25%, transparent 75%, var(--line-soft) 75%),
    linear-gradient(45deg, var(--line-soft) 25%, transparent 25%, transparent 75%, var(--line-soft) 75%);
  background-size: 100% 100%, 14px 14px, 14px 14px;
  background-position: 0 0, 0 0, 7px 7px;
}

.sg-sw__body {
  padding: .6rem .75rem .7rem;
}

.sg-sw__name {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -.01em;
}

.sg-sw__tok,
.sg-sw__val {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem;
  color: var(--ink-40);
  word-break: break-all;
}

.sg-sw__tok {
  color: var(--teal-700);
  margin-top: .2rem;
}

/* Type specimens */
.sg-type {
  padding-block: var(--s-5);
}

.sg-type+.sg-type {
  border-top: 1px solid var(--line-soft);
}

.sg-type__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem var(--s-4);
  margin-bottom: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  color: var(--ink-40);
}

.sg-type__meta b {
  color: var(--teal-700);
  font-weight: 500;
}

.sg-type__sample {
  display: block;
  line-height: 1.05;
  letter-spacing: -.032em;
  font-weight: 600;
}

/* Scale visualisers — spacing bars, radius tiles, shadow tiles */
.sg-scale {
  display: grid;
  gap: .55rem;
}

.sg-scale__row {
  display: grid;
  grid-template-columns: 4.5rem 4.5rem 1fr;
  align-items: center;
  gap: var(--s-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem;
  color: var(--ink-40);
}

.sg-scale__row b {
  color: var(--teal-700);
  font-weight: 500;
}

.sg-scale__bar {
  height: 14px;
  width: var(--w);
  min-width: 2px;
  max-width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal-700), var(--teal-500));
}

.sg-tile {
  display: grid;
  place-items: center;
  height: 108px;
  background: var(--seaglass-2);
  border: 1px solid var(--line);
  color: var(--teal-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem;
}

.sg-tile--sh {
  background: var(--card);
  border-color: transparent;
  border-radius: var(--r-md);
}

.sg-tile-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}

.sg-tile-grid--sh {
  gap: var(--s-6);
  padding: var(--s-4);
}

/* Decor primitives need a stage with height + relative positioning */
.sg-decor {
  position: relative;
  overflow: hidden;
  height: 150px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--sand-2);
  display: grid;
  place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem;
  color: var(--ink-40);
}

.sg-decor--teal {
  background: var(--teal-800);
  color: rgba(255, 255, 255, .55);
  border-color: transparent;
}

.sg-decor .blob {
  width: 200px;
  height: 200px;
  left: -40px;
  top: -50px;
  background: var(--seaglass);
}

/* Motion demo needs a fixed-height stage so the reveal is observable */
.sg-motion {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--seaglass-2);
  font-weight: 600;
  text-align: center;
}

/* Static preview of the sticky mobile bar (the real .mbar is fixed) */
.sg-mbar {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}

.sg-mbar .mbar {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
}

/* Marquee demos are full-bleed on the site; keep them inside the frame here */
.sg-demo--flush .marquee,
.sg-demo--flush .logomarquee {
  padding-block: var(--s-5);
}

@media(prefers-reduced-motion:reduce) {
  .sg-nav {
    position: static;
  }
}