/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-variable-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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-variable-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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-variable-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;
}

    body { margin: 0; background: #ffffff; font-family: 'Archivo', sans-serif; color: #444d58; }
    h1, h2, h3 { overflow-wrap: anywhere; }
    a { color: #14335c; }
    a:hover { color: #b27718 !important; }
    ::selection { background: #101820; color: #fff; }

    /* Utility strip. It and the sticky header below it were both pure white
       with a 1px rule between, so the whole top of the page read as one flat
       slab and the header had nothing to sit against. The strip takes the
       concept's own ink instead: it caps the page, pushes the white header
       forward, and keeps B distinct at the top from A's navy bar and C's
       white-over-navy band. The strip's own links need a lighter amber than
       the global a:hover, which is tuned for hovering on white. */
    #utility-strip a:hover, #utility-strip a:focus-visible { color: #e8a33d !important; }
    #utility-strip a:focus-visible { outline-color: #e8a33d; }

    /* The footer is ink for the same reason as the strip: white on white read
       as nothing at all. Together they bookend the page, so the ink reads as a
       system rather than a one-off band, and B stays distinguishable from A's
       and C's navy footers. Ink also lets the white logo and the amber accent
       carry the bottom of the page, which white could not.
       The two amber rules below exist because the global hover, #b27718, is
       tuned for a white ground and goes muddy on ink. */
    #contact a:hover, #contact a:focus-visible { color: #e8a33d !important; }
    #contact a:focus-visible { outline-color: #e8a33d; }
    @keyframes logoSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* Visible keyboard focus, all interactive elements */
    a:focus-visible, button:focus-visible, input:focus-visible {
      outline: 3px solid #b27718;
      outline-offset: 2px;
    }

    /* Desktop nav dropdowns (Buy / Hire taxonomy panels) */
    .nav-drop { position: relative; }
    .nav-drop-btn {
      font: inherit; display: flex; align-items: center; gap: 6px;
      background: none; border: none; padding: 0; margin: 0;
      color: #101820; cursor: pointer; transition: color .15s ease;
    }
    .nav-drop-btn:hover, .nav-drop-btn:focus-visible { color: #b27718; }
    .nav-drop-caret { transition: transform .2s ease; flex: 0 0 auto; }
    .nav-drop.is-open .nav-drop-caret { transform: rotate(180deg); }
    .nav-drop-panel {
      display: none; flex-direction: column; position: absolute; top: 100%; left: 0;
      margin-top: 16px; padding: 10px; min-width: 250px;
      background: #fff; border-radius: 8px; box-shadow: 0 12px 32px rgba(16,24,32,.16);
      z-index: 60;
    }
    .nav-drop-panel a {
      display: block; padding: 10px 14px; border-radius: 6px;
      color: #101820; text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap;
    }
    .nav-drop-panel a:hover, .nav-drop-panel a:focus-visible { background: #f6f5f2; }
    .nav-drop.is-open .nav-drop-panel, .nav-drop:hover .nav-drop-panel { display: flex; }

    /* Button / tile hover states (scp0-scp6, ported from the approved concept, one rule per shared visual role) */
    .scp0 { transition: filter .18s ease; }
    .scp0:hover, .scp0:focus-visible { filter: brightness(1.06); }
    .scp1 span { transition: border-color .18s ease; }
    .scp1:hover span, .scp1:focus-visible span { border-color: #e8a33d !important; }
    .scp2 { transition: transform .25s ease; }
    .scp2:hover, .scp2:focus-visible { transform: translateY(-4px); }
    .scp3 { transition: box-shadow .25s ease; }
    .scp3:hover, .scp3:focus-visible { box-shadow: 0 20px 44px rgba(16,24,32,.24); }
    .scp4 { transition: filter .18s ease; }
    .scp4:hover, .scp4:focus-visible { filter: brightness(1.5); }
    .scp5 { transition: background .18s ease, color .18s ease; }
    .scp5:hover, .scp5:focus-visible { background: #101820 !important; color: #fff !important; }
    .scp6 { transition: box-shadow .25s ease; }
    .scp6:hover, .scp6:focus-visible { box-shadow: 0 16px 40px rgba(16,24,32,.24); }

    /* Mobile menu accordions (Buy / Hire taxonomy lists) */
    .m-acc { border-bottom: 1px solid #ece9e2; }
    .m-acc-btn {
      width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
      background: none; border: none; text-align: left; font: inherit;
      color: #101820; font-weight: 700; font-size: 21px; padding: 18px 0; cursor: pointer;
    }
    .m-acc-btn:hover, .m-acc-btn:focus-visible { color: #b27718; }
    [data-menu-close]:hover, [data-menu-close]:focus-visible { color: #b27718 !important; }
    .m-acc-caret { transition: transform .2s; flex: 0 0 auto; }
    .m-acc-btn[aria-expanded="true"] .m-acc-caret { transform: rotate(180deg); }
    .m-acc-panel { display: none; flex-direction: column; padding: 0 0 12px; }
    .m-acc-panel.is-open { display: flex; }
    .m-acc-panel a {
      text-decoration: none; color: #444d58; font-weight: 600; font-size: 17px;
      padding: 13px 0 13px 14px; box-sizing: border-box;
    }

    /* 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. */
    .t-card p { flex: none !important; }
    .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; }
    .t-card { flex: 0 0 calc(50% - 12px); box-sizing: border-box; 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 rgba(255,255,255,.3); color: #fff;
      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(255,255,255,.12); border-color: rgba(255,255,255,.6);
    }
    .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 in the ~234px between the arrows. */
    .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(255,255,255,.3); transition: width .18s ease, background .18s ease;
    }
    .t-dot.is-active::after { width: 22px; background: #e8a33d; }
    .t-dot:hover:not(.is-active)::after, .t-dot:focus-visible:not(.is-active)::after { background: rgba(255,255,255,.55); }
    /* 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(255,255,255,.55); font-variant-numeric: tabular-nums;
    }

    @media (max-width: 900px) {
      #desktop-nav { display: none !important; }
      #hamburger-btn { display: flex !important; }
      #header-row { gap: 16px !important; padding: 16px 20px !important; justify-content: space-between !important; }
      #header-cta { display: none !important; }
      #utility-address, #utility-hours, #utility-divider { display: none !important; }
      #utility-bar { justify-content: center !important; }
      #utility-right { width: 100%; justify-content: center !important; }
      #utility-right a { padding: 15px 10px; box-sizing: border-box; }
    }
    @media (max-width: 768px) {
      #mobile-cta-bar { display: flex !important; }
      #hero-h1 { font-size: 38px !important; }
      #range-grid { grid-template-columns: 1fr !important; }
      #industries-grid { grid-template-columns: repeat(2, 1fr) !important; }
      #header-row { gap: 12px !important; padding: 14px 16px !important; }
      #header-logo { height: 36px !important; }
      #buyhire-grid, #visit-grid, #hire-grid, #help-grid, #footer-grid { grid-template-columns: 1fr !important; gap: 34px !important; }
      #process-grid { grid-template-columns: 1fr 1fr !important; gap: 32px 20px !important; }
      #process-line { display: none !important; }
      #custom-grid { grid-template-columns: 1fr !important; grid-auto-rows: 200px !important; }
      #custom-grid > a { grid-row: auto !important; grid-column: auto !important; }
      .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 (~234px available, six dots plus gaps need ~264px), and
         wrapping them to a second row read as broken. A counter always fits. */
      .t-dots { display: none; }
      .t-counter { display: block; }
      #custom-header-row { flex-direction: column !important; align-items: flex-start !important; }
      #custom-header-copy { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
      #custom-header-row a { align-self: stretch !important; text-align: center; }

      /* Footer content centres and stacks below 768px */
      #footer-grid { text-align: center; }
      #footer-grid > div { align-items: center; }
      #footer-bottom { flex-direction: column; align-items: center; text-align: center; }
      #footer-legal { margin-left: 0 !important; justify-content: center; }

      /* Tap targets: footer-bottom's two legal links sit side by side (a
         horizontal gap), min-height doesn't stack with that, so it's untouched */
      #footer-bottom a {
        min-height: 44px; display: flex; align-items: center; justify-content: center;
        box-sizing: border-box; padding: 0 10px; margin: 0 -10px;
      }

      /* Footer spacing system (main columns): one gap between links in a
         group, one gap under each heading, one gap between groups (this
         grid's own 34px above, 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 34px 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, overriding the shared 34px grid gap from the rule above so
         the three tiers can't fight or double up with it). Hierarchy comes
         entirely from the heading's own margin, not from gap. */
      #footer-grid { gap: 0 !important; }
      #footer-grid > div { gap: 0 !important; }
      #footer-grid 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 */
      #footer-contact-col 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. */
      #footer-grid 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 */
      #footer-brand img { margin-bottom: 22px !important; }
      #footer-brand p:first-of-type { margin-bottom: 14px !important; }
      #footer-brand p:last-of-type { margin-top: 0 !important; }
      /* text-align: center on the grid centres the words inside each paragraph
         but not the paragraph's own box, and both carry an inline
         max-width: 300px. In a 334px column that left-aligns the box, so the
         tagline sat 17px left of the centred logo and lists below it. */
      #footer-brand p { margin-left: auto !important; margin-right: auto !important; }

      /* Mobile vertical rhythm: same scale, reduced value (Part 3.4) */
      #buyhire, #range, #testimonial-slider, #visit, #custom, #process, #industry-slider, #help {
        padding-top: 60px !important; padding-bottom: 60px !important;
      }
      /* #buyhire sits directly on #range with no colour break between them (both white);
         its own bottom padding is dropped so the two don't stack into dead space */
      #buyhire { padding-bottom: 0 !important; }
      #hire { padding-bottom: 60px !important; }
      #help-grid { padding-top: 48px !important; }
    }

    /* The H1 only had a single step at 768px. That was sized for the old
       48-character headline; the corrected one runs ~62 characters and at 38px
       it broke into six choppy lines on a 390px screen, several holding one
       word. Step it down again below 480px. Matches C's mobile H1 size. */
    @media (max-width: 480px) {
      #hero-h1 { font-size: 30px !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      #logo-marquee-track { animation: none !important; }
      [data-hero-layer] { transition: none !important; }
      .scp2:hover { transform: none; }
      .t-viewport { scroll-behavior: auto; }
    }