/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-700-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-condensed-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-condensed-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-condensed-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-condensed-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-condensed-700-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

    /* Section spacing scale: one value drives every major section's top/bottom
       padding, redefined at the mobile breakpoint below. Three deliberate
       exceptions, all still derived from the scale (never a one-off pixel
       value), each because two adjoining sections would otherwise stack full
       padding with no colour change to signal a break, reading as a dead band
       rather than a deliberate one:
       1) The icon-row (Free quote / FaceTime / Visit the yard) is flush
          (0/0): it sits sandwiched between two sections that already carry
          full padding on the adjoining side.
       2) The "hire" panel (image + Hire a portable CTA) halves its padding
          top and bottom, keeping this image-led panel compact against the
          custom-projects gallery above it.
       3) The testimonials section halves its TOP padding only (bottom stays
          full, since testimonials-to-visit-CTA already has a real colour
          change): industries and testimonials sit on near-identical
          off-white/white backgrounds, so a full 100/100 there read as an
          accidental gap despite the hairline border marking the seam. */
    :root { --space-section: 100px; }

    body { margin: 0; background: #f6f8fa; font-family: 'Barlow', sans-serif; color: #2b3a4f; }
    a { color: #14335c; }
    /* !important: most links set their own colour inline (nav, footer, hero
       CTAs), which otherwise always beats a plain external :hover rule and
       silently kills hover feedback regardless of this rule being present */
    a:hover { color: #b27718 !important; }
    ::selection { background: #14335c; color: #fff; }
    @keyframes logoSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* Focus visibility, all interactive elements */
    a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
      outline: 3px solid #E8A33D; outline-offset: 2px;
    }

    /* Desktop nav dropdowns, Buy / Hire */
    .nav-drop { position: relative; }
    .nav-drop-btn {
      display: inline-flex; align-items: center; gap: 7px; height: 44px;
      background: none; border: 0; cursor: pointer; font: inherit; font-weight: 500;
      color: #14335c; padding: 0;
    }
    .nav-drop-btn:hover, .nav-drop-btn:focus-visible { color: #b27718; }
    .nav-drop-btn svg { transition: transform .2s ease; flex: 0 0 auto; }
    .nav-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
    .nav-drop-panel {
      position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
      background: #fff; border-radius: 8px; box-shadow: 0 14px 32px rgba(14,36,64,.2);
      padding: 10px; min-width: 246px; display: none; flex-direction: column; z-index: 60;
    }
    .nav-drop-panel.is-open { display: flex; }
    .nav-drop-panel a {
      display: block; min-height: 44px; box-sizing: border-box; display: flex; align-items: center;
      padding: 0 14px; border-radius: 5px; color: #14335c; text-decoration: none; font-size: 15px; font-weight: 500;
    }
    .nav-drop-panel a:hover, .nav-drop-panel a:focus-visible { background: #f0f4f8; color: #b27718; }

    /* Hamburger, hidden on desktop */
    #hamburger-btn {
      display: none; flex-direction: column; width: 44px; height: 44px; align-items: center; justify-content: center;
      background: none; border: 0; cursor: pointer; padding: 0; flex: 0 0 auto; margin-left: 4px;
    }
    #hamburger-btn .burger-line {
      display: block; width: 24px; height: 2px; background: #14335c; border-radius: 2px;
      transition: transform .28s ease, opacity .2s ease;
    }
    #hamburger-btn .burger-line + .burger-line { margin-top: 6px; }
    #hamburger-btn[aria-expanded="true"] .burger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    #hamburger-btn[aria-expanded="true"] .burger-line:nth-child(2) { opacity: 0; }
    #hamburger-btn[aria-expanded="true"] .burger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Mobile menu panel + backdrop */
    #mobile-menu-backdrop {
      position: fixed; inset: 0; background: rgba(10,26,48,.55); z-index: 149;
      opacity: 0; pointer-events: none; transition: opacity .3s ease;
    }
    #mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }
    #mobile-menu-panel {
      position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 86vw); z-index: 150;
      background: #0e2440; color: #fff; display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform .32s ease;
      box-shadow: -8px 0 30px rgba(0,0,0,.25); box-sizing: border-box;
    }
    #mobile-menu-panel.is-open { transform: translateX(0); }
    [data-m~="mmenu-head"] {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.14); flex: 0 0 auto;
    }
    #mobile-menu-close {
      width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
      background: none; border: 0; border-radius: 50%; color: #fff; cursor: pointer; padding: 0; flex: 0 0 auto;
      transition: background .18s ease;
    }
    #mobile-menu-close:hover, #mobile-menu-close:focus-visible { background: rgba(255,255,255,.12); }
    [data-m~="mmenu-body"] {
      padding: 6px 18px 28px; overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column;
      -webkit-overflow-scrolling: touch;
    }
    [data-m~="mmenu-links"] { display: flex; flex-direction: column; flex: 0 0 auto; }
    [data-m~="mmenu-bottom"] { display: flex; flex-direction: column; flex: 0 0 auto; margin-top: auto; padding-top: 24px; }
    .m-link {
      display: flex; align-items: center; min-height: 44px; padding: 12px 2px; box-sizing: border-box;
      color: #fff; text-decoration: none; font-weight: 600; font-size: 16.5px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .m-accordion { border-bottom: 1px solid rgba(255,255,255,.12); }
    .m-acc-btn {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      min-height: 44px; padding: 12px 2px; box-sizing: border-box; background: none; border: 0; cursor: pointer;
      color: #fff; font-weight: 600; font-size: 16.5px; font-family: inherit; text-align: left;
      transition: background .18s ease;
    }
    .m-acc-btn:hover, .m-acc-btn:focus-visible { background: rgba(255,255,255,.06); }
    .m-acc-btn svg { transition: transform .25s ease; flex: 0 0 auto; }
    .m-acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
    .m-acc-panel { display: flex; flex-direction: column; padding: 0 0 10px 12px; }
    .m-acc-panel[hidden] { display: none; }
    .m-acc-panel a {
      display: flex; align-items: center; min-height: 44px; padding: 9px 2px; box-sizing: border-box;
      color: rgb(213,223,236); text-decoration: none; font-size: 15.5px;
    }
    .m-phone {
      display: flex; align-items: center; justify-content: center; min-height: 44px;
      color: #E8A33D; font-weight: 700; text-decoration: none; font-size: 18px;
    }
    .m-cta {
      display: flex; align-items: center; justify-content: center; min-height: 52px;
      margin-top: 14px; background: #E8A33D; color: #0e2440; font-weight: 700;
      text-decoration: none; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em;
    }
    .m-meta {
      margin-top: 20px; text-align: center; font-size: 12.5px; line-height: 1.6;
      color: rgba(255,255,255,.4);
    }
    body.menu-open { overflow: hidden; }

    /* Hero dots, 44px touch target with a slim visible pill */
    .hero-dot {
      width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .hero-dot::after {
      content: ""; width: 10px; height: 10px; border-radius: 99px; background: rgba(255,255,255,.45);
      transition: width .4s ease, background .4s ease;
    }
    .hero-dot.is-active::after { width: 34px; background: var(--dot-accent, #E8A33D); }
    .hero-dot:hover:not(.is-active)::after, .hero-dot:focus-visible:not(.is-active)::after { background: rgba(255,255,255,.75); }

    /* ---- Round 5: hover states for every "scp" hook, all previously unstyled.
       Nearly every visual property here (background, border-color) is also
       set inline as the base state, and inline declarations beat a normal
       external rule regardless of selector, so the overrides below need
       !important to actually take effect on :hover. Transform/filter aren't
       set inline anywhere, so those stay plain. ---- */

    /* scp0: solid amber CTA (header, hero slides, visit banner, mobile bar) */
    .scp0 { transition: background .2s ease, box-shadow .2s ease; }
    .scp0:hover { background: #d99223 !important; box-shadow: 0 6px 16px rgba(14,36,64,.22); }

    /* scp1: outline button on a dark background (hero "Browse the range", "Call" CTAs) */
    .scp1 { transition: background .2s ease, border-color .2s ease; }
    .scp1:hover { background: rgba(255,255,255,.14) !important; border-color: #fff !important; }

    /* scp2: utility icon links (Get a free quote / FaceTime walk-through / Visit the yard) */
    .scp2 { transition: background .2s ease; }
    .scp2:hover { background: #f6f8fa; }

    /* scp3: big image tiles (Buy outright / Hire, and the 5 range-grid tiles):
       image scales, overlay implicitly reads darker as the image enlarges,
       and the arrow or pill CTA nudges to signal the click. */
    .scp3 img { transition: transform .5s ease; }
    .scp3:hover img { transform: scale(1.06); }
    .tile-arrow { display: inline-block; transition: transform .25s ease; }
    .scp3:hover .tile-arrow { transform: translateX(6px); }
    .tile-cta { transition: filter .2s ease, transform .2s ease; }
    .scp3:hover .tile-cta { transform: translateY(-2px); filter: brightness(1.06); }

    /* scp4: outlined navy pill buttons (Browse all buildings / See custom builds / mobile "Call") */
    .scp4 { transition: background .2s ease, color .2s ease; }
    .scp4:hover { background: #14335c !important; color: #fff !important; }

    /* scp5: "Why McGregor" feature rows (inline transition: background already present).
       min-height keeps the six rows at one consistent rhythm regardless of small
       copy-length or font-metric differences between rows (the "Service that gets
       remembered" row used to run a third line longer than its five siblings). */
    .scp5 { min-height: 98px; box-sizing: border-box; }
    .scp5:hover { background: rgba(255,255,255,.05); }

    /* scp6: "Hire a portable building" solid dark CTA */
    .scp6 { transition: background .2s ease; }
    .scp6:hover { background: #1c4677 !important; }

    /* scp7: "Get to know us" text CTA under the stat pair. Sits on the dark navy
       "why us" background at a fixed white inline color, so the global a:hover
       colour swap (meant for light backgrounds) never applies here, inline
       colour always wins. Thickening its own amber underline instead. */
    .scp7 { transition: border-bottom-width .2s ease; }
    .scp7:hover, .scp7:focus-visible { border-bottom-width: 3px !important; }

    /* Testimonials slider: native scroll-snap track, two-up on desktop, one-up on mobile */
    /* Quotes vary a lot in length; anchor the attribution to the card's bottom edge
       instead of letting the paragraph's flex-grow strand it under short quotes. */
    [data-t-card] p { flex: none !important; }
    [data-t-card] footer { margin-top: auto; }
    .t-viewport {
      overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .t-viewport::-webkit-scrollbar { display: none; }
    .t-track { display: flex; gap: 24px; }
    [data-t-card] { scroll-snap-align: start; }
    .t-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; }
    /* Controls hide only when the computed page count is one, so that a set small
       enough to fit in a single view never shows a dead arrow pair. With the
       current set there is always more than one page, so this does not fire. It
       stays as a guard in case the set is ever cut back. */
    .t-controls.is-single-page { display: none; }
    .t-arrow {
      width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; padding: 0;
      background: transparent; border: 1px solid rgb(227, 233, 240); color: rgb(20, 51, 92);
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      transition: background .18s ease, border-color .18s ease;
    }
    .t-arrow:hover:not(:disabled), .t-arrow:focus-visible:not(:disabled) {
      background: rgba(20, 51, 92, .06); border-color: rgb(20, 51, 92);
    }
    .t-arrow:disabled { opacity: .3; cursor: default; }
    /* Desktop only: two-up means three pages at most for the current set, so
       the dots always fit a single row here, no wrap needed. Mobile swaps
       these for a "1 of 6" counter instead (below), since six one-up pages
       cannot fit six 44px dot targets between the arrows at 390px. */
    .t-dots { display: flex; align-items: center; justify-content: center; gap: 8px; }
    /* Real hit area is 44x44 (invisible); the visible pill is a ::after so the
       8px-to-22px "active dot widens" look is unchanged. */
    .t-dot {
      width: 44px; height: 44px; padding: 0; border: none; background: transparent;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .t-dot::after {
      content: ""; width: 8px; height: 8px; border-radius: 4px;
      background: rgba(20, 51, 92, .22); transition: width .18s ease, background .18s ease;
    }
    .t-dot.is-active::after { width: 22px; background: rgb(232, 163, 61); }
    .t-dot:hover:not(.is-active)::after, .t-dot:focus-visible:not(.is-active)::after { background: rgba(20, 51, 92, .45); }
    /* Mobile position counter, replaces the dots (see media query below) */
    .t-counter {
      display: none; min-width: 64px; text-align: center;
      font-size: 14px; color: rgba(20, 51, 92, .65); font-variant-numeric: tabular-nums;
    }

    @media (max-width: 768px) {
      /* Mobile vertical rhythm: same scale, reduced value (Part 3.4) */
      :root { --space-section: 60px; }
      /* Utility bar: one row on mobile, phone only (address is in the menu and footer already;
         hours + phone together still wrap at 320px, so hours drops too, matching concept B) */
      #a-utility-bar { justify-content: center; }
      #a-utility-address, #a-utility-hours, #a-utility-divider { display: none; }
      #mobile-cta-bar { display: flex !important; }
      body { padding-bottom: 82px; }
      [data-m~="hdr"] { justify-content: space-between; }
      [data-m~="nav"], [data-m~="deskonly"] { display: none !important; }
      #hamburger-btn { display: flex !important; }
      [data-m~="one"] { grid-template-columns: 1fr !important; }
      [data-t-card] { flex: 0 0 100% !important; scroll-snap-align: center; }
      /* Six one-up mobile pages cannot fit six 44px dot targets between the
         arrows here, wrapping them to a second row reads as broken. A
         counter always fits. */
      .t-dots { display: none; }
      .t-counter { display: block; }
      [data-m~="two"] { grid-template-columns: 1fr 1fr !important; }
      [data-m~="span1"] { grid-column: auto !important; }
      [data-m~="sidebord"] { border-left: none !important; border-top: 1px solid #e3e9f0 !important; }
      [data-m~="heroh"] { font-size: 38px !important; }
      [data-m~="herop"] { font-size: 16.5px !important; }
      [data-m~="h2"] { font-size: 31px !important; }
      [data-m~="h2big"] { font-size: 34px !important; }
      [data-m~="pad"] { padding: 32px 26px !important; }
      [data-m~="imgtop"] { min-height: 230px !important; height: 230px !important; }
      [data-m~="gap28"] { gap: 28px !important; }
      [data-m~="why"] { gap: 36px !important; }
      [data-m~="gal"] { gap: 14px !important; }
      [data-m~="gal"] img { height: 158px !important; }

      /* Process strip ("How it works"): left aligned at desktop is correct,
         centred at mobile like the footer and section CTAs below */
      [data-m~="stepctr"] { text-align: center; }

      /* Section-level CTAs: centred on mobile rather than left- or right-hung
         (the "Browse all buildings" / "See custom builds" header buttons use
         margin-left:auto to sit flush-right on desktop; give them a matching
         auto on the right too once they wrap to their own line). */
      #range a.scp4, #custom a.scp4 { margin-left: auto !important; margin-right: auto !important; }
      #a-hire-cta { text-align: center !important; }

      /* Shared fix: footer content centres on mobile */
      [data-m~="foot"] { text-align: center; }
      [data-m~="foot"] > div { align-items: center; }
      [data-m~="footbar"] { flex-direction: column; align-items: center; text-align: center; gap: 14px !important; }
      [data-m~="footbar"] > span:last-child { margin-left: 0 !important; justify-content: center; }

      /* Footer spacing system: one gap between links in a group, one gap under
         each heading, one gap between groups (the grid's own 48px, untouched,
         already the largest of the three). The previous min-height:44px fix
         stacked with the column's own 10px gap, ~54px between links, nearly
         the same as the 48px between groups, so nothing read as a group.
         Height (not min-height) plus a zeroed column gap fixes that: the 44px
         tap target lives entirely inside the link's own box, with no extra
         gap stacking on top of it. */
      /* Zeroed at both levels: within a group (below) and between groups
         (here, the grid's own gap between the four stacked blocks). Hierarchy
         then comes entirely from the heading's own margin, not from gap, so
         the three tiers (44 within, 12 bind, 56 separate) can't fight each
         other or double up. */
      [data-m~="foot"] { gap: 0 !important; }
      [data-m~="foot"] > div { align-items: center; gap: 0 !important; }
      [data-m~="foot"] a { justify-content: center; }
      footer#contact a {
        height: 44px; min-width: 44px; box-sizing: border-box;
        display: flex; align-items: center; justify-content: center;
        padding: 0 10px; margin: 0 -10px;
      }
      /* Get In Touch's address/hours are plain text, not links, but get the
         same box height so all four items in that group read as one list */
      #a-footer-contact span {
        height: 44px; box-sizing: border-box;
        display: flex; align-items: center; justify-content: center;
        padding: 0 10px; margin: 0 -10px;
      }
      /* Three tiers, not two: 44 within a group (above), 12 binding a heading
         to its own list, 56 separating one group from the next. The first
         heading's margin-top does double duty as "space after the brand
         block", so that block needs no spacing rule of its own for this. */
      [data-m~="foot"] strong { margin-top: 56px !important; margin-bottom: 12px !important; }

      /* Brand block: logo, tagline and finance line were jammed together once
         the list gap dropped to zero elsewhere in the footer; keep this
         cluster's own breathing room explicit rather than inherited */
      #a-footer-brand img { margin-bottom: 22px !important; }
      #a-footer-brand p:first-of-type { margin-bottom: 14px !important; }
      #a-footer-brand p:last-of-type { margin-top: 0 !important; }
      /* text-align: center on the footer centres the words inside each
         paragraph but not the paragraph's own box, and both carry an inline
         max-width: 300px. In a 342px column that left-aligns the box, so the
         tagline sat 21px left of the centred logo and lists below it. */
      #a-footer-brand p { margin-left: auto !important; margin-right: auto !important; }

      /* Tap targets: small inline body links, hit-area only, no visual shift */
      .tap44 { display: inline-flex; align-items: center; padding: 14px 6px; margin: -14px -6px; }
      .tap44-v { display: inline-flex; align-items: center; padding: 14px 0; margin-top: -14px; margin-bottom: -14px; }
    }

    /* Reduced motion: stop carousels, marquees and menu animation */
    @media (prefers-reduced-motion: reduce) {
      [data-hero-layer] { transition: none !important; }
      [style*="animation"] { animation: none !important; }
      #mobile-menu-panel, #mobile-menu-backdrop, .nav-drop-panel, .hero-dot::after,
      #hamburger-btn .burger-line, .nav-drop-btn svg, .m-acc-btn svg {
        transition: none !important;
      }
      .scp3 img, .tile-arrow, .tile-cta, .scp0, .scp1, .scp2, .scp4, .scp5, .scp6, .scp7 {
        transition: none !important;
      }
      .t-viewport { scroll-behavior: auto; }
    }