/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-400-italic-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: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-400-italic-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: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-400-italic-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: 400;
  font-display: swap;
  src: url(../fonts/barlow-400-vietnamese-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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-2.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;
}

    body { margin: 0; background: #ffffff; font-family: 'Barlow', sans-serif; color: #3c4550; }
    a { color: #14335c; }
    a:hover { color: #b27718; }
    ::selection { background: #14335c; color: #fff; }
    body { overflow-x: hidden; }

    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    :focus-visible { outline: 2.5px solid #E8A33D; outline-offset: 2px; }

    #c-search-input::placeholder, .c-newsletter-input::placeholder { color: #6b7480; opacity: 1; }

    /* desktop Buy/Hire mega dropdowns */
    .c-navdd { position: relative; display: flex; align-items: center; }
    .c-navdd-trigger {
      background: transparent; border: none; color: #fff; font-family: 'Barlow', sans-serif;
      font-weight: 600; font-size: 15px; padding: 15px 18px; display: flex; align-items: center;
      gap: 7px; cursor: pointer; min-height: 44px;
    }
    .c-dd-arrow { transition: transform .15s ease; flex: 0 0 auto; }
    .c-navdd.open .c-dd-arrow { transform: rotate(180deg); }
    .c-navdd-panel {
      display: none; flex-direction: column; position: absolute; top: 100%; left: 0;
      min-width: 250px; background: #fff; border-radius: 0 0 6px 6px;
      box-shadow: 0 14px 28px rgba(16, 24, 32, .2); padding: 8px; z-index: 60;
    }
    .c-navdd.open .c-navdd-panel { display: flex; }
    .c-navdd-panel a {
      display: flex; align-items: center; padding: 11px 14px; color: #14335c; text-decoration: none;
      font-size: 14.5px; font-weight: 600; border-radius: 4px; min-height: 24px;
    }
    .c-navdd-panel a:hover, .c-navdd-panel a:focus-visible { background: #f2f3f5; color: #b27718; }

    /* hero prev/next controls: paired bottom-right over the photo half only, so
       they read as belonging to the slider rather than floating over the copy
       panel (the copy panel can only ever be 460px, so anchoring to the
       wrapper's right edge keeps both buttons on the image at any width the
       arrows are shown at). */
    .c-hc-controls {
      position: absolute; right: 24px; bottom: 20px; display: flex; gap: 10px; z-index: 5;
    }

    /* enlarged, accessible tap targets for carousel dots (visual mark stays small) */
    .c-dot {
      width: 44px; height: 44px; border: none; background: transparent; padding: 0;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .c-dot-mark { width: 10px; height: 10px; border-radius: 99px; display: block; }

    /* Testimonial pager: dots at desktop (two-up, three pages, comfortably one
       row), a "1 of 6" counter at mobile instead. At one-up, six testimonials
       means six pages, and six 44px dot targets plus gaps cannot fit the width
       between the two arrows at any mobile size, wrapping or shrinking either
       looks broken. Both elements exist for both breakpoints; the media query
       below swaps which one is visible. */
    .c-tc-counter {
      display: none; font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 600;
      color: #6b7480; letter-spacing: 0.02em;
    }

    /* dark scrim pill behind the dot group so it survives light slides:
       the pill's own opacity sets the contrast floor regardless of what
       photo is behind it, rather than relying on the photo being dark.
       Centred on the photo half specifically (460px copy column + the
       remainder), not the whole slide: centring on the whole width would
       drift the pill onto the copy panel on narrower desktop/tablet
       viewports, where the fixed 460px column is a much bigger share of
       a smaller wrapper. Mobile resets this to plain full-width centring
       below, since the copy and photo stack into one column there. */
    .c-hc-dots {
      position: absolute; left: calc(460px + (100% - 460px) / 2); bottom: 16px;
      transform: translateX(-50%);
      display: flex; gap: 8px; background: rgba(13, 20, 28, .85);
      padding: 8px 14px; border-radius: 999px;
    }

    /* mobile off-canvas menu */
    .c-mobilemenu-backdrop {
      position: fixed; inset: 0; background: rgba(10, 16, 26, .55); opacity: 0;
      pointer-events: none; transition: opacity .25s ease; z-index: 150;
    }
    .c-mobilemenu-backdrop.open { opacity: 1; pointer-events: auto; }
    .c-mobilemenu {
      position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(86vw, 360px);
      background: #0d2340; box-shadow: -8px 0 30px rgba(0, 0, 0, .3); transform: translateX(100%);
      transition: transform .3s ease; z-index: 200; overflow-y: auto; display: block;
    }
    .c-mobilemenu.open { transform: translateX(0); }
    .c-mobilemenu-inner { display: flex; flex-direction: column; padding: 18px 20px 28px; gap: 4px; min-height: 100%; box-sizing: border-box; }
    .c-mobilemenu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .c-mobilemenu-close {
      width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
      background: transparent; border: none; color: #fff; font-size: 28px; line-height: 1;
      cursor: pointer; border-radius: 4px;
    }
    .c-mobile-accordion { border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .c-mobile-acc-trigger {
      width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent;
      border: none; color: #fff; font-weight: 600; font-size: 16px; padding: 15px 4px; min-height: 44px;
      cursor: pointer; text-align: left; font-family: 'Barlow', sans-serif;
    }
    .c-acc-arrow { transition: transform .2s ease; flex: 0 0 auto; }
    .c-mobile-acc-trigger[aria-expanded="true"] .c-acc-arrow { transform: rotate(180deg); }
    .c-mobile-acc-panel { display: none; flex-direction: column; padding: 0 4px 10px 12px; }
    .c-mobile-acc-panel.open { display: flex; }
    .c-mobile-acc-panel a {
      color: rgba(255, 255, 255, .85); text-decoration: none; font-size: 15px; padding: 11px 0;
      min-height: 44px; display: flex; align-items: center;
    }
    .c-mobilemenu-link {
      color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; padding: 14px 4px;
      border-bottom: 1px solid rgba(255, 255, 255, .12); min-height: 44px; display: flex; align-items: center;
    }
    .c-mobilemenu-phone { color: #E8A33D; font-weight: 700; border-bottom: none; margin-top: 4px; }
    .c-mobilemenu-cta {
      margin-top: 16px; text-align: center; text-decoration: none; background: #E8A33D; color: #101820;
      font-weight: 700; font-size: 15.5px; padding: 15px 0; border-radius: 4px; min-height: 44px;
      display: flex; align-items: center; justify-content: center;
    }
    html.c-noscroll, html.c-noscroll body { overflow: hidden; height: 100%; }

    /* clear the sticky two-row header (140px desktop / 132px mobile) on
       in-page anchor jumps, plus a little breathing room, so a section's
       heading doesn't land underneath it. */
    #range, #custom, #hire, #newsletter, #contact, #c-why-section { scroll-margin-top: 156px; }

    /* Mobile client-logo strip: 7 logos never divide evenly into a grid (see
       the mobile override below, which swaps the grid for this continuous
       marquee), so there's no orphan row to centre or explain. */
    @keyframes cLogoSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

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

    /* scp0: header search submit button */
    .scp0 { transition: background .2s ease; }
    .scp0:hover { background: #1c4677 !important; }

    /* scp1: plain nav links on the navy nav band (Custom Builds / About Us) */
    .scp1 { transition: background .2s ease; }
    .scp1:hover { background: rgba(255,255,255,.12); }

    /* scp2: solid amber CTAs (Get a Quote, Browse the Range, newsletter submit, etc.) */
    .scp2 { transition: background .2s ease, box-shadow .2s ease; }
    .scp2:hover { background: #d99223 !important; box-shadow: 0 6px 16px rgba(16,24,32,.2); }

    /* scp3: hero prev/next circular arrow buttons */
    .scp3 { transition: background .2s ease; }
    .scp3:hover { background: rgba(16,24,32,.7) !important; }

    /* scp4: quicklink tiles (image + text horizontal cards) */
    .scp4 { transition: box-shadow .2s ease; }
    .scp4 img { transition: transform .5s ease; }
    .scp4:hover { box-shadow: 0 10px 24px rgba(16,24,32,.14); }
    .scp4:hover img { transform: scale(1.06); }

    /* scp5: navy buttons, both solid ("View All Portables") and outline
       ("See hire options" / mobile "Call"): filling to a lighter navy with
       white text reads correctly on both variants. */
    .scp5 { transition: background .2s ease, color .2s ease, border-color .2s ease; }
    .scp5:hover { background: #1c4677 !important; border-color: #1c4677 !important; color: #fff !important; }

    /* scp6: "Book a FaceTime tour" tile, already on a navy section background */
    .scp6:hover { background: rgba(255,255,255,.06); }

    /* scp7: bordered white cards with a photo (range grid + news/project grid):
       image scales, card lifts, border picks up the accent. */
    .scp7 { transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
    .scp7 img { transition: transform .5s ease; }
    .scp7:hover { box-shadow: 0 10px 24px rgba(16,24,32,.14); border-color: rgb(20,51,92); transform: translateY(-2px); }
    .scp7:hover img { transform: scale(1.06); }
    .tile-arrow { display: inline-block; transition: transform .25s ease; }
    .scp7:hover .tile-arrow { transform: translateX(6px); }

    /* scp8: "See Past Projects" outline white button on the navy custom-builds panel */
    .scp8 { transition: background .2s ease, border-color .2s ease; }
    .scp8:hover { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.9) !important; }

    /* scp9: testimonial prev/next arrows + "View All News" outline navy button */
    .scp9 { transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
    .scp9:hover { background: #14335c !important; color: #fff !important; border-color: #14335c !important; }
    /* pointer-events:none stops the hover fill above from firing on a page-end
       control that's disabled but still shown (see .is-single-page below for
       the "nothing to page to at all" case, which hides rather than dims). */
    .scp9:disabled { opacity: .35; cursor: default; pointer-events: none; }

    /* testimonial slider controls: simple chevrons matching the hero carousel,
       pulled in tight against the card row rather than the wrapper's outer
       edge, and positioned relative to the card row alone (not row+dots)
       so they stay vertically centred on the cards regardless of whether
       the dot row is present below. */
    /* position:relative only, deliberately no overflow:hidden here: the
       arrows sit just outside the card row via a negative offset, and an
       overflow:hidden on this element would clip them. The sliding-card
       clip lives one level in, on .c-tc-clip, wrapping the track alone. */
    .c-tc-viewport { position: relative; }
    .c-tc-clip { overflow: hidden; }
    .c-tc-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px; border-radius: 50%; font-size: 17px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 5;
    }
    .c-tc-arrow[data-tc-prev] { left: -54px; }
    .c-tc-arrow[data-tc-next] { right: -54px; }
    /* Controls (both arrows and dots) are shown only where paging is
       genuinely possible: hidden entirely, not shown-disabled, when there's
       exactly one page, since a permanently disabled pair reads as broken
       in front of a client. Page count is computed from the actual card
       count in c.js, so this comes back on its own the moment a page count
       above one exists again, no code change required. */
    .c-tc-arrow.is-single-page, #c-tc-dots.is-single-page, .c-tc-counter.is-single-page { display: none !important; }

    /* ---- Fake-clickable / missing-hover sweep ----
       Every element below is a genuine <a> or <button> that already navigates
       or toggles correctly, but had no visible hover feedback: either because
       its colour is set inline (inline always beats a plain external :hover,
       same reason the scp0-scp9 rules above need !important) or because the
       base-colour rule shares (or beats) the specificity of the generic
       `a:hover` rule two rules up and wins on source order. No fake controls
       (styled span/div with no href) were found in C on this pass. */

    /* header utility links: inline colour blocks the generic a:hover */
    #c-visit-link:hover, #c-visit-link:focus-visible { color: #b27718 !important; }
    #c-topbar-phone:hover, #c-topbar-phone:focus-visible { color: #b27718 !important; }

    /* footer + footer-bottom: 13 links all set colour inline */
    #c-footer-grid a:hover, #c-footer-grid a:focus-visible,
    #c-footer-bottom a:hover, #c-footer-bottom a:focus-visible { color: #E8A33D !important; }

    /* desktop Buy/Hire dropdown trigger buttons: same navy nav band as the
       plain scp1 links beside them, so the same wash on hover/focus. */
    .c-navdd-trigger:hover, .c-navdd-trigger:focus-visible { background: rgba(255, 255, 255, .12); }

    /* mobile off-canvas menu: close button, accordion triggers and the
       accordion panel links (the panel links share a-element specificity
       with the generic a:hover two rules up and lose on source order). */
    .c-mobilemenu-close:hover, .c-mobilemenu-close:focus-visible { background: rgba(255, 255, 255, .12); }
    .c-mobile-acc-trigger:hover, .c-mobile-acc-trigger:focus-visible { background: rgba(255, 255, 255, .08); }
    .c-mobile-acc-panel a:hover, .c-mobile-acc-panel a:focus-visible { color: #E8A33D; }
    .c-mobilemenu-cta:hover, .c-mobilemenu-cta:focus-visible { background: #d99223; }

    /* carousel/testimonial pagination dots: real buttons, no hover cue at all */
    .c-dot:hover .c-dot-mark, .c-dot:focus-visible .c-dot-mark { opacity: .85; transform: scale(1.15); }

    @media (prefers-reduced-motion: reduce) {
      [data-hc-track] { transition: none !important; }
      .c-navdd-panel, .c-mobilemenu, .c-mobilemenu-backdrop, .c-mobile-acc-panel, .c-dd-arrow, .c-acc-arrow { transition: none !important; }
      #c-logos-mobile-track { animation: none !important; }
      .scp0, .scp1, .scp2, .scp3, .scp4, .scp4 img, .scp5, .scp6, .scp7, .scp7 img, .tile-arrow, .scp8, .scp9 {
        transition: none !important;
      }
    }

    /* Narrow "desktop" widths (roughly tablet-portrait): the 460px copy
       column eats most of the wrapper, so the photo-half is too narrow for
       the dot pill and the arrow pair to sit side by side on the same row
       without colliding. Lift the dots into their own row above the arrows
       instead of trying to squeeze both into one. */
    @media (min-width: 769px) and (max-width: 960px) {
      .c-hc-dots { bottom: 78px; }
    }

    @media (max-width: 768px) {
      body { padding-bottom: 108px !important; }
      #mobile-cta-bar { display: flex !important; }
      /* one-up testimonials: dots give way to the "N of M" counter */
      #c-tc-dots { display: none !important; }
      .c-tc-counter { display: block !important; }
      #c-topbar { padding: 12px 16px !important; gap: 14px !important; }
      #c-search, #c-visit-link { display: none !important; }
      #c-navlinks { display: none !important; }
      #c-burger { display: flex !important; }
      #c-navband { padding: 0 16px !important; }
      #hero-carousel { padding: 16px 16px 0 !important; }
      /* copy and photo stack into a single column on mobile, so the dots
         should centre on the full width again rather than the desktop
         photo-half offset.

         The scrim pill has to go here. Three 44px targets plus its own gap and
         padding make it 176 by 60, which is defensible over a full-height
         desktop slide and absurd over a 200px mobile photo: it covered a
         quarter of the image to frame three 10px dots. The pill's contrast job
         moves onto the marks themselves as a dark ring plus shadow, so they
         still read over a bright sky. The targets stay 44px and overlap by
         14px through the negative margin, which pulls the visual pitch to 30px
         while every dot keeps a 30 by 44 exclusive area, well past the 24px
         minimum. */
      .c-hc-dots {
        left: 50% !important; bottom: 6px !important;
        background: transparent !important; padding: 0 !important; gap: 0 !important;
      }
      .c-dot { margin: 0 -7px !important; }
      .c-dot-mark {
        box-shadow: 0 0 0 1px rgba(13, 20, 28, .45), 0 1px 3px rgba(13, 20, 28, .7) !important;
      }
      [data-hc-track] > div { grid-template-columns: 1fr !important; min-height: 0 !important; }
      [data-hc-track] > div > div { padding: 26px 20px 30px !important; gap: 14px !important; }
      [data-hc-track] img { height: 200px !important; }
      [data-hc-track] h1, [data-hc-track] h2 { font-size: 30px !important; }
      [data-hc-track] p { font-size: 15px !important; }
      [data-hc-prev], [data-hc-next], .c-hc-controls { display: none !important; }
      #c-quicklinks { padding: 18px 16px 0px !important; }
      /* 3 tiles in a 2-col grid orphans the 3rd ("Visit Our Yard") alone with a
         gap beside it. Span it across the full row instead: two plus one
         deliberate, not an orphan. */
      #c-ql-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
      #c-ql-grid > a { grid-template-columns: 1fr !important; min-height: 0 !important; }
      #c-ql-grid > a > img, #c-ql-grid > a > span:first-child { height: 96px !important; }
      #c-ql-grid > a > span { padding: 14px 14px 16px !important; }
      #c-ql-grid > a:last-child { grid-column: 1 / -1 !important; }
      /* full-width last tile: a fixed px height turns into a squashed
         letterbox once the tile spans the whole row, so crop to a fixed
         aspect ratio instead and let the height float with the width. */
      #c-ql-grid > a:last-child img { height: auto !important; aspect-ratio: 16 / 9 !important; }
      #c-fork { grid-template-columns: 1fr !important; gap: 12px !important; }
      #c-services { grid-template-columns: 1fr !important; }
      #c-services > a { padding: 20px !important; }
      #c-range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
      #c-range-grid img { height: 130px !important; }
      #c-range-grid strong { font-size: 19px !important; }
      #c-range-grid > a:last-child { grid-column: 1 / -1 !important; }
      /* same full-width letterbox risk as the quicklink tile above: aspect
         ratio instead of a fixed height keeps the crop sane at any width. */
      #c-range-grid > a:last-child img { height: auto !important; aspect-ratio: 16 / 9 !important; }
      /* Short Term Hire (last tile) spans the full row on mobile: the same
         orphan-avoidance pattern as the range grid above, and it doubles as
         the extra visual weight that tile needs to stay findable. */
      #c-hire-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
      #c-hire-grid > a:last-child { grid-column: 1 / -1 !important; }
      #c-custom-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
      #c-custom-grid > div { padding: 40px 0 !important; }
      #c-custom-grid img { min-height: 0 !important; height: 240px !important; margin-bottom: 40px; }

      /* Section-level CTAs: centred on mobile rather than left- or right-hung,
         a deliberate tap target instead of trailing off to one side. */
      #c-range-cta { text-align: center !important; }
      #c-custom-cta-row { justify-content: center !important; }
      #news a.scp9 { margin-left: auto !important; margin-right: auto !important; }
      /* Swap the static 7-up grid (orphans logo 7 on mobile) for a continuous
         marquee strip, the same technique concept A uses for its trust bar. */
      #c-logos { display: none !important; }
      #c-logos-mobile { display: block !important; }
      #c-reviews { gap: 0 !important; }
      .c-review { padding: 0 4px !important; }
      #c-why { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
      #c-industries { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
      #c-industries-section { padding-top: 60px !important; padding-bottom: 60px !important; }
      #c-yard-grid { grid-template-columns: 1fr !important; }
      #c-newsletter-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
      #c-newsletter-grid input { min-width: 0; }
      /* Row gap (56px) is the ONLY thing separating one group from the next,
         including the brand block from the first heading below it: three
         groups need contrast against the near-zero within-group spacing,
         not just less spacing overall. Eleven items evenly spaced read as
         eleven items, not three groups. */
      #c-footer-grid { grid-template-columns: 1fr !important; gap: 56px !important; text-align: center !important; }
      #c-footer-grid a, #c-footer-grid span, #c-footer-grid p { overflow-wrap: anywhere !important; }
      /* Column gap goes to zero: every link/text row below carries its own
         fixed 44px box, so the row height itself is the spacing. A non-zero
         gap on top of that stacks (44px box + gap), which is what read as
         "five unrelated items" instead of one list. */
      #c-footer-grid > div { align-items: center !important; gap: 0 !important; }
      #c-footer-grid img { margin-left: auto !important; margin-right: auto !important; margin-bottom: 22px !important; }
      #c-footer-grid p { margin-left: auto !important; margin-right: auto !important; }
      /* brand block: explicit breathing room instead of the jam (this column
         isn't a flex list, so its rhythm is margin-driven, not gap-driven) */
      #c-footer-grid > div:first-child p + p { margin-top: 14px !important; }
      /* heading to first link/row: tight enough that the heading reads as
         bound to its own list, not floating between two gaps. !important
         beats the inline margin-bottom:4px on <strong> (no inline !important
         present to fight back). */
      #c-footer-grid > div > strong { margin-bottom: 12px !important; }
      /* every link AND plain-text row (address, hours) gets an identical,
         fixed (not min-) 44px box, so four "Get in touch" items don't end up
         with three different gaps between them. */
      #c-footer-grid > div > a, #c-footer-grid > div > span { height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
      #c-footer-bottom { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 12px !important; }
      #c-footer-bottom > span:last-child { margin-left: 0 !important; justify-content: center !important; flex-wrap: wrap !important; }
      #c-footer-bottom a { height: 44px !important; display: flex !important; align-items: center !important; }
      section, footer { padding-left: 16px !important; padding-right: 16px !important; }
      h2 { font-size: 30px !important; }

      /* Mobile vertical rhythm: same scale, reduced value (Part 3.4) */
      #range, #c-logos-section, #news, #hire { padding-top: 60px !important; padding-bottom: 60px !important; }
      #c-testimonials-section { padding-bottom: 60px !important; }
      #c-why-section { padding-top: 60px !important; padding-bottom: 60px !important; }
    }