/* ============================================================
   C&R — Homepage
   Desktop-first. Responsive overrides live at bottom.
   ============================================================ */

/* Screen-reader-only utility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ========== Nav header ========== */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--navy);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.nav-utility {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-utility-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--page-pad);
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--w-medium);
}
.nav-util-link {
  color: var(--white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-util-link .ico { width: 14px; height: 14px; flex-shrink: 0; }
.nav-util-link:hover { color: var(--green); }

.nav-main-inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;        /* anchor for the full-width services mega-menu */
  padding: 20px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.nav-logo { height: 34px; width: auto; }
.nav-meta {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: var(--w-semibold);
  border-left: 1px solid rgba(255, 255, 255, .2);
  padding-left: 24px;
}
.nav-links {
  display: flex;
  gap: 32px;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 13px;
}
.nav-links a {
  color: var(--white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--dur) var(--ease-out);
}
.nav-links a:hover { color: var(--green); }
.nav-links svg { width: 9px; height: 6px; }

/* ---------- Nav dropdown ---------- */
/* Wraps a top-level link plus its dropdown panel. Pure-CSS show/hide via
   :hover and :focus-within — keyboard-accessible without JS. */
.nav-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-wrap > a .has-dropdown-chev,
.nav-dropdown-wrap > a svg {
  transition: transform var(--dur) var(--ease-out);
}
.nav-dropdown-wrap:hover > a svg,
.nav-dropdown-wrap:focus-within > a svg {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 240px;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 8px;
  margin-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity .2s var(--ease-out),
    transform .2s var(--ease-out),
    visibility 0s linear .2s;
  z-index: 50;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
}
.nav-dropdown-wrap:hover .nav-dropdown-menu,
.nav-dropdown-wrap:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}
.nav-dropdown-menu a {
  display: block;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--w-medium);
  color: var(--white);
  text-decoration: none;
  border-radius: 6px;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: rgba(var(--green-rgb), .12);
  color: var(--green);
  outline: none;
}
.nav-dropdown-menu a[aria-current="page"] {
  color: var(--green);
}
/* Hide dropdown on mobile (panel handles it inline via the mobile menu) */
@media (max-width: 900px) {
  .nav-dropdown-menu { display: none; }
}

/* ============================================================
   SERVICES MEGA-MENU — full-width, two-division split
   Navy left (Line Marking, 3-col list) + sky-blue right (Jet
   Washing feature). Theme-immune: each side pins its own
   division colour so a page theme (.theme-jetwash) can't bleed in.
   ============================================================ */
.nav-svc { display: inline-flex; align-items: center; }
.nav-svc > a svg { transition: transform var(--dur) var(--ease-out); }
.nav-svc:hover > a svg,
.nav-svc:focus-within > a svg { transform: rotate(180deg); }
/* Hover bridge that lives in the SAME layer as the trigger (a pseudo-element on
   the link), so it reliably catches the pointer across the gap to the panel —
   unlike the panel's own ::before, which the nav bar paints over. Scoped to the
   trigger width so it never affects neighbouring nav items. Uses ::before
   because the active-page underline already owns ::after on .is-current links. */
.nav-svc > a { position: relative; }
.nav-svc > a::before {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 28px;
}

.nav-mega {
  position: absolute;
  top: calc(100% - 2px);
  left: var(--page-pad); right: var(--page-pad);   /* align to nav content width */
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity .22s var(--ease-out),
    transform .22s var(--ease-out),
    visibility 0s linear .22s;
}
.nav-mega::before {                 /* invisible bridge spans the FULL gap (trigger bottom → panel top) so a slow mouse never hits a dead zone */
  content: "";
  position: absolute;
  top: -23px; left: 0; right: 0; height: 25px;
}
.nav-svc:hover .nav-mega,
.nav-svc:focus-within .nav-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}

.nav-mega-inner {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 28px 60px -18px rgba(0, 0, 0, .55);
}

/* Column frame shared by both sides. The LINE MARKING side (left) keeps the
   shared eyebrow/heading/cta classes; the JET WASHING side (right) has its OWN
   isolated classes (restored to the approved version) so line-marking edits can
   never alter it. */
.nav-mega-marking,
.nav-mega-jet {
  display: flex;
  flex-direction: column;
}
.nav-mega-marking {
  --green: #61CC6B;                /* re-pin so a page theme can't recolour the line-marking side */
  --green-rgb: 97, 204, 107;
  background: var(--navy);
  padding: 28px 30px;
}
.nav-mega-jet {
  background: var(--jet-sky);
  color: var(--navy);
  padding: 26px 28px 30px;
}
.nav-mega-jet .nav-mega-feature {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: var(--navy);
}
/* the jet card stays navy on hover — the global .nav-links a:hover green must not leak in */
.nav-mega-jet .nav-mega-feature:hover,
.nav-mega-jet .nav-mega-feature:focus-visible { color: var(--navy); }

/* Eyebrow base — LINE MARKING uses this as-is */
.nav-mega-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 13px;
}
.nav-mega-eyebrow--marking { color: var(--green); font-size: 11px; margin-bottom: 14px; }   /* matched to the jet benchmark */
/* JET eyebrow — restored to the approved treatment (own size / opacity / spacing) */
.nav-mega-eyebrow--jet {
  color: var(--navy);
  opacity: .68;
  font-size: 11px;
  margin-bottom: 14px;
}

/* LINE MARKING bold heading — matched to the jet benchmark (line-height / spacing) */
.nav-mega-h {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 21px;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 10px;
}
.nav-mega-marking .nav-mega-h { color: var(--white); }
.nav-mega-marking .nav-mega-h .is-green { color: var(--green); }

/* LINE MARKING list — three labelled category columns */
.nav-mega-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 14px;
  align-items: start;
}
.nav-mega-group {
  display: flex;
  flex-direction: column;
}
.nav-mega-group-h {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  padding: 0 11px;
  margin-bottom: 9px;
}
.nav-mega-cols a {
  display: block;
  padding: 8px 11px;
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--w-medium);
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out);
}
.nav-mega-cols a:hover,
.nav-mega-cols a:focus-visible {
  background: rgba(var(--green-rgb), .14);
  color: var(--green);
  padding-left: 17px;
  outline: none;
}
.nav-mega-cols a[aria-current="page"] { color: var(--green); }   /* current service */

/* LINE MARKING "Explore line marking" link */
.nav-mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 13px;
  letter-spacing: .01em;
  text-decoration: none;
}
.nav-mega-marking .nav-mega-cta { color: var(--green); }   /* scoped to beat the global .nav-links a colour */
.nav-mega-cta svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.nav-mega-cta--marking:hover svg,
.nav-mega-cta--marking:focus-visible svg { transform: translateX(4px); }

/* ===== JET WASHING card — isolated; do not fold into the line-marking classes ===== */
.nav-mega-feature-name {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 21px;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin-bottom: 10px;
}
.nav-mega-feature-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(27, 20, 66, .82);
  margin-bottom: auto;
}
.nav-mega-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--navy);
}
.nav-mega-feature-cta svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.nav-mega-feature:hover .nav-mega-feature-cta svg,
.nav-mega-feature:focus-visible .nav-mega-feature-cta svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .nav-mega { transition: opacity .15s linear, visibility 0s linear .15s; transform: none; }
  .nav-svc:hover .nav-mega, .nav-svc:focus-within .nav-mega { transform: none; }
  .nav-mega-cols a { transition: background var(--dur) linear, color var(--dur) linear; }
  .nav-mega-cta svg, .nav-mega-feature-cta svg { transition: none; }
}
@media (max-width: 900px) {
  .nav-mega { display: none; }
}

.btn-cta-nav {
  background: var(--green);
  color: var(--navy);
  padding: 11px 20px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--w-semibold);
  letter-spacing: .03em;
  text-decoration: none;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: background var(--dur) var(--ease-out);
  flex-shrink: 0;
}
.btn-cta-nav:hover { background: var(--green-hover); }
.btn-cta-nav svg { width: 14px; height: 14px; }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  width: 44px; height: 44px;
  border-radius: 4px;
  cursor: pointer;
  padding: 10px 6px;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  top: var(--header-h, 112px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
/* Lock the page behind the open menu so touch-scroll stays inside the menu. */
body.nav-open { overflow: hidden; }
.nav-mobile nav {
  display: flex;
  flex-direction: column;
  padding: 16px var(--page-pad) 24px;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--w-medium);
}
.nav-mobile a {
  color: var(--white);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-mobile a.nav-mobile-sub {
  display: block;
  padding: 9px 0 9px 20px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .72);
  border-bottom: none;
}
.nav-mobile a.nav-mobile-sub--all { color: var(--white); font-weight: var(--w-semibold); padding-top: 12px; }
.nav-mobile a.btn-cta-nav {
  margin-top: 16px;
  align-self: flex-start;
  border: none;
}

/* Expandable "Our Services" accordion (mobile) — plain flat vertical list. */
.nav-mobile-svc { display: block; }
.nav-mobile-svc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--white);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-mobile-svc > summary::-webkit-details-marker { display: none; }
.nav-mobile-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .25s var(--ease-out);
}
.nav-mobile-svc[open] > summary .nav-mobile-chev { transform: rotate(180deg); }
.nav-mobile-svc[open] > summary { border-bottom-color: transparent; }
.nav-mobile-svc > a.nav-mobile-sub:last-child { padding-bottom: 14px; }

/* ========== Hero ========== */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  overflow: hidden;
  min-height: calc(100vh - 124px);
  display: flex;
  flex-direction: column;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  pointer-events: none;
}
.hero-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 9, 48, .6) 0%, rgba(14, 9, 48, .4) 45%, rgba(14, 9, 48, .97) 100%);
}
.hero-inner {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 40px var(--page-pad);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(56px, 8vw, 128px);
  line-height: .95;
  letter-spacing: -.045em;
  margin: 0;
  color: var(--white);
  max-width: 1300px;
}
.hero-title span { display: block; }
.hero-title span:first-child { padding-bottom: 0.08em; }
.hero-title .is-green { color: var(--green); padding-bottom: 0.2em; }
.hero-title .is-italic {
  font-style: italic;
  font-weight: var(--w-regular);
  color: rgba(255, 255, 255, .85);
}

.hero-meta {
  position: relative;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-pad) 32px;
}

/* Road line + van animation */
@keyframes roadLinePaint {
  0%   { clip-path: inset(0 100% 0 0); opacity: 1; }
  75%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  92%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  100% { clip-path: inset(0 0 0 0);    opacity: 0; }
}
@keyframes roadLineNozzle {
  0%   { left: 0%;   opacity: 1; }
  75%  { left: 100%; opacity: 1; }
  78%  { opacity: 0; }
  100% { left: 100%; opacity: 0; }
}
.hero-roadline-wrap {
  position: relative;
  height: 4px;
  margin-top: 90px;
  margin-bottom: 32px;
}
.hero-roadline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, #fff 0 140px, transparent 140px 220px);
  animation: roadLinePaint 9s cubic-bezier(0.5, 0, 0.25, 1) infinite;
}
.hero-roadline-van {
  /* Hidden until we build a better van illustration. Keeps SVG markup in place. */
  display: none;
  position: absolute;
  bottom: 0;
  width: 260px;
  height: 104px;
  animation: roadLineNozzle 9s cubic-bezier(0.5, 0, 0.25, 1) infinite;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5));
}
.hero-roadline-van svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .hero-roadline { animation: none; clip-path: none; }
  .hero-roadline-van { display: none; }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr auto auto;
  gap: 56px;
  align-items: end;
}
.stat { padding-top: 20px; }
.stat-n {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 28px;
  letter-spacing: -.02em;
  color: var(--white);
  line-height: 1;
}
.stat-l {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: var(--w-medium);
  margin-top: 10px;
}
.stat-spacer { min-width: 0; }

.btn-hero-ghost,
.btn-hero-primary {
  padding: 17px 28px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--w-semibold);
  letter-spacing: .04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.btn-hero-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .4);
}
.btn-hero-ghost:hover { border-color: var(--white); }
.btn-hero-ghost svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-hero-primary {
  background: var(--green);
  color: var(--navy-deep);
  padding: 18px 30px;
}
.btn-hero-primary:hover { background: var(--green-hover); }
.btn-hero-primary svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Wiggle animation — modelled on c-2it.co.uk: two-stage wiggle
   (small at 45-48%, big at 91-95%) over a 10s loop. */
@keyframes wiggle {
  0%, 44%, 49%, 90%, 96%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(2.5deg); }
  46% { transform: rotate(-2.5deg); }
  47% { transform: rotate(2.5deg); }
  48% { transform: rotate(-2.5deg); }
  91% { transform: rotate(5deg); }
  92% { transform: rotate(-5deg); }
  93% { transform: rotate(5deg); }
  94% { transform: rotate(-5deg); }
  95% { transform: rotate(5deg); }
}
.wiggle {
  animation: wiggle 10s ease infinite;
  transform-origin: 50% 50%;
}
.wiggle:hover {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .wiggle { animation: none; }
}

/* ========== Showreel ========== */
.showreel {
  position: relative;
  height: 640px;
  overflow: hidden;
  background: var(--navy);
}
.showreel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showreel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%);
}
.showreel-caption {
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  bottom: 36px;
  max-width: 1360px;
  margin: 0 auto;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 32px;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.showreel-caption .is-green { color: var(--green); }

/* ========== Delivered for ========== */
.delivered {
  padding: 96px 0;
  background: var(--white);
  border-top: 1px solid #EDEBE5;
  border-bottom: 1px solid #EDEBE5;
}
.delivered-label {
  text-align: center;
  color: var(--fg-muted);
  margin-bottom: 44px;
}
.delivered-grid {
  overflow: hidden;
}
.delivered-track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}
.delivered-track li {
  flex: 1 1 0;
  min-width: 0;
  height: 72px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Marquee duplicates — hidden on desktop so the original 12 fill the row evenly. */
.delivered-track li.is-clone { display: none; }
.delivered-track img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ========== Section header (shared) ========== */
.section-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 72px;
}
.section-header .eyebrow {
  margin-bottom: 22px;
}
.section-header--dark .eyebrow { color: rgba(255, 255, 255, .55); }
.section-title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}
.section-header--dark .section-title { color: var(--white); }
.section-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 20px auto 0;
  max-width: 620px;
  text-wrap: pretty;
}
.section-header--dark .section-sub { color: rgba(255, 255, 255, .68); }

/* ========== Why C&R ========== */
.why {
  padding: 140px 0 120px;
  background: var(--white);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.why-col { min-width: 0; }
.why-card {
  position: relative;
  height: 100%;
  padding: 32px 26px 30px;
  background: linear-gradient(180deg, #fff, #fbfbfd);
  border: 1px solid rgba(27, 20, 66, .08);
  border-radius: 18px;
  box-shadow: 0 12px 32px -24px rgba(27, 20, 66, .3);
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.why-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -28px rgba(27, 20, 66, .42);
  border-color: rgba(var(--green-rgb), .35);
}
.why-card:hover::after { transform: scaleX(1); }

.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  color: var(--green);
  background: rgba(var(--green-rgb), .1);
  border: 1px solid rgba(var(--green-rgb), .2);
  border-radius: 14px;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.why-icon svg { width: 26px; height: 26px; display: block; }
.why-card:hover .why-icon {
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
}

.why-h {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 20px;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--navy);
}
.why-h .is-green { color: var(--green); }

.why-body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 14px 0 0;
}

/* ========== Services (bento) ========== */
.services {
  padding: 140px 0 120px;
  background: var(--surface-soft);
  color: var(--navy);
}
.services-title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(48px, 7vw, 110px);
  line-height: .9;
  letter-spacing: -.04em;
  margin: 0 0 64px;
  color: var(--navy);
}
.services-title .is-green { color: var(--green); }

/* Animated periods — slide out from behind the preceding word when the
   services section enters the viewport. JS adds .is-shown. */
.svc-period {
  display: inline-block;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .5s var(--ease-out), transform .55s cubic-bezier(.2, .8, .25, 1);
}
.svc-period--navy { color: var(--navy); }
.svc-period--green { color: var(--green); }
.svc-period.is-shown {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .svc-period {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
}
.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--white);
  display: block;
}
.bento-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.bento-card:hover img { transform: scale(1.04); }
.bento-card:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}
/* Unused — frosted band now lives on .bento-meta::before so it
   auto-sizes to each card's title+arrow content. */
.bento-grad { display: none; }

.bento-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 22px 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--white);
  isolation: isolate;
}
.bento-meta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, .22);
  z-index: -1;
  transition: background var(--dur) var(--ease-out);
}
.bento-card:hover .bento-meta::before { background: rgba(255, 255, 255, .18); }

.bento-title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 18px;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.bento-title::after {
  content: '.';
  color: var(--green);
}
.bento-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.bento-arrow svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-out); }
.bento-card:hover .bento-arrow {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy);
}
.bento-card:hover .bento-arrow svg { transform: translateX(2px); }

/* Bento spans per card */
.bento-01 { grid-column: span 6; grid-row: span 2; }
.bento-01 .bento-title { font-size: 32px; }
.bento-02 { grid-column: span 3; grid-row: span 1; }
.bento-03 { grid-column: span 3; grid-row: span 1; }
.bento-04 { grid-column: span 3; grid-row: span 1; }
.bento-05 { grid-column: span 3; grid-row: span 1; }
.bento-06 { grid-column: span 4; grid-row: span 2; }
.bento-06 .bento-title { font-size: 24px; }
.bento-07 { grid-column: span 4; grid-row: span 1; }
.bento-08 { grid-column: span 4; grid-row: span 1; }
.bento-09 { grid-column: span 4; grid-row: span 1; }
.bento-10 { grid-column: span 4; grid-row: span 1; }
.bento-11 { grid-column: span 4; grid-row: span 2; }
.bento-11 .bento-title { font-size: 24px; }
.bento-12 { grid-column: span 4; grid-row: span 1; }
.bento-13 { grid-column: span 4; grid-row: span 1; }
.bento-14 { grid-column: span 8; grid-row: span 1; }
.bento-13 img { object-position: center 5%; }

/* ============================================================
   Services — two-division showcase (replaces the photo bento).
   Light section. Line Marking (green) grouped left; Jet Washing
   (jet-blue) as its own feature panel right. One accent per zone.
   ============================================================ */
.svc-two {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr);
  gap: clamp(18px, 2.2vw, 34px);
  align-items: stretch;
}

/* ---- Left: Line Marking & Surface Coatings ---- */
.svc-marking {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(158deg, rgba(14, 9, 48, 0) 32%, rgba(14, 9, 48, .55) 100%),
    linear-gradient(152deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: 0 22px 60px -26px rgba(14, 9, 48, .7);
}
.svc-marking::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(/assets/images/svc-01-car-park.jpg) center 42% / cover no-repeat;
  opacity: .18;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.svc-marking-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 8% -4%, rgba(var(--green-rgb), .18), transparent 52%);
  pointer-events: none;
}
.svc-marking-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .1), transparent);
  transform: skewX(-12deg);
  animation: svcSheen 13s linear infinite;
  pointer-events: none;
}
.svc-marking-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 44px);
}
.svc-marking-head { margin-bottom: clamp(22px, 2.4vw, 34px); }
.svc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--w-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.svc-eyebrow--marking { color: var(--green); }
.svc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(var(--green-rgb), .16);
}
.svc-lead {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
}
.svc-lead .is-green { color: var(--green); }

.svc-cats {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 30px);
}
.svc-cat { min-width: 0; }
.svc-cat-h {
  position: relative;
  margin: 0 0 12px;
  padding-bottom: 11px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--w-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.svc-cat-h::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
}
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -12px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.svc-arrow { width: 14px; height: 14px; flex-shrink: 0; }
.svc-list a .svc-arrow {
  color: var(--green);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.svc-list a:hover,
.svc-list a:focus-visible {
  background: rgba(var(--green-rgb), .16);
  color: #fff;
  transform: translateX(3px);
  outline: none;
}
.svc-list a:focus-visible { box-shadow: 0 0 0 2px rgba(var(--green-rgb), .6); }
.svc-list a:hover .svc-arrow,
.svc-list a:focus-visible .svc-arrow {
  opacity: 1;
  transform: translateX(0);
}
.svc-explore {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin-top: clamp(22px, 2.4vw, 34px);
  padding: 13px 22px;
  border-radius: 3px;
  background: var(--green);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}
.svc-explore .svc-arrow { width: 15px; height: 15px; transition: transform .2s var(--ease-out); }
.svc-explore:hover {
  background: var(--green-hover, #52BC5C);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(14, 9, 48, .55);
}
.svc-explore:hover .svc-arrow { transform: translateX(4px); }
.svc-explore:focus-visible { outline: 3px solid rgba(var(--green-rgb), .6); outline-offset: 2px; }

/* ---- Right: Jet Washing feature panel ---- */
.svc-jet {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(158deg, rgba(28, 156, 212, 0) 28%, rgba(23, 137, 189, .55) 100%),
    linear-gradient(158deg, var(--jet) 0%, var(--jet-hover) 100%);
  box-shadow: 0 22px 60px -26px rgba(23, 137, 189, .6);
}
.svc-jet::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(/assets/images/svc-09-jetwash.jpg) center 30% / cover no-repeat;
  opacity: .16;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.svc-jet-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 4%, rgba(103, 189, 224, .7), transparent 58%);
  pointer-events: none;
}
.svc-jet-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-12deg);
  animation: svcSheenJet 13s linear infinite;
  animation-delay: 0.36s;
  pointer-events: none;
}
@keyframes svcSheen {
  0%     { left: -45%; }
  4.64%  { left: 130%; }
  100%   { left: 130%; }
}
/* Jet box is ~65% the width of the marking box; its sweep % travel is the same,
   so it must complete faster (×0.645) to move at the SAME pixels/second — i.e.
   one constant-speed glint across both boxes rather than slowing on the narrower one. */
@keyframes svcSheenJet {
  0%     { left: -45%; }
  2.99%  { left: 130%; }
  100%   { left: 130%; }
}
.svc-jet-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 46px);
  color: #fff;
}
.svc-eyebrow--jet { color: #fff; }
.svc-dot--jet {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .22);
}
.svc-jet-name {
  max-width: 15ch;
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
}
.svc-jet-desc {
  max-width: 42ch;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}
.svc-jet-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin-top: auto;
  padding: 13px 22px;
  border-radius: 3px;
  background: #fff;
  color: var(--jet-hover);
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.svc-jet-cta .svc-arrow { width: 14px; height: 14px; transition: transform .2s var(--ease-out); }
.svc-jet-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(11, 60, 85, .55);
}
.svc-jet-cta:hover .svc-arrow { transform: translateX(4px); }
.svc-jet-cta:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .svc-jet-sheen,
  .svc-marking-sheen { display: none; }
}

/* Tablet & below — stack the two zones; jet becomes a full-width feature. */
@media (max-width: 1024px) {
  .svc-two { grid-template-columns: 1fr; }
  .svc-jet-cta { margin-top: clamp(22px, 4vw, 36px); }
}
/* Phone — stack the service categories. */
@media (max-width: 640px) {
  .svc-cats { grid-template-columns: 1fr; gap: 22px; }
}

/* ========== Process ========== */
.process {
  padding: 140px 0;
  background: var(--navy);
  color: var(--white);
}
/* Sequential flow — thin green rail across the top, small ticks marking each
   stage. The rail is the unifier; everything else is restrained type. */
.process-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
  padding-top: 36px;
}
/* Two-layer rail: soft white hairline base + crisp green top.
   Solid on the left, fades only on the right — reads as a directional flow line. */
.process-rail {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(255, 255, 255, .08) 0%,
      rgba(255, 255, 255, .08) 92%,
      rgba(255, 255, 255, 0) 100%);
}
.process-rail::after {
  /* Green accent: solid across the left, fades only at the right edge */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(var(--green-rgb), .55) 0%,
    rgba(var(--green-rgb), .55) 90%,
    rgba(var(--green-rgb), 0) 100%);
}
.process-step {
  position: relative;
}
/* Static ticks no longer shown — a single travelling dot (below) moves
   through the 5 positions. Hidden rather than removed so existing markup
   remains semantically harmless. */
.process-tick {
  display: none;
}
/* Travelling dot — one dot for the whole rail, animated through 5 stops
   via JS-set CSS custom properties --dot-x (desktop) / --dot-y (mobile).
   Sits on the rail at top:0 of .process-flow. */
.process-dot-travel {
  position: absolute;
  top: 3px;
  left: 0;
  z-index: 3;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  transform: translate3d(var(--dot-x, 0px), var(--dot-y, 0px), 0);
  transition:
    transform 700ms cubic-bezier(.65, .05, .25, 1),
    opacity 350ms ease;
  pointer-events: none;
  box-shadow:
    0 0 0 3px var(--navy),
    0 0 0 5px rgba(var(--green-rgb), .25),
    0 0 22px rgba(var(--green-rgb), .6);
}
@media (prefers-reduced-motion: reduce) {
  .process-dot-travel { transition: none; }
}
.process-h {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--white);
  margin: 0;
}
.process-h .is-green { color: var(--green); }
.process-b {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
  margin: 18px 0 0;
}

/* ========== Recent Work ========== */
.recent {
  padding: 140px 0;
  background: var(--white);
}
.recent-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 56px;
  gap: 24px;
}
.recent-title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(48px, 6vw, 96px);
  line-height: .9;
  letter-spacing: -.04em;
  margin: 0;
  color: var(--navy);
}
.recent-all {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--w-semibold);
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.recent-all:hover { color: var(--green); }
.recent-all svg { width: 14px; height: 14px; }

/* 1 feature + 3 side — editorial hierarchy */
.recent-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  min-height: 640px;
}
.recent-card {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  background: var(--navy);
}
/* Full-card frost — sits between img and meta so backdrop-filter sees the image. */
.recent-frost {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(20px) saturate(1.7) brightness(0.78);
  backdrop-filter: blur(20px) saturate(1.7) brightness(0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out);
}
.recent-card:not(.recent-card--feature):hover .recent-frost { opacity: 1; }
.recent-card--feature {
  grid-row: 1 / -1;
  grid-column: 1;
}
.recent-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.recent-card:hover img { transform: scale(1.04); }

/* Frosted glass band — matches the services bento recipe: defined glass
   panel with a hairline top edge, no image darkening. */
.recent-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 22px;
  color: var(--white);
  isolation: isolate;
}
.recent-meta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, .22);
  z-index: -1;
  transition: background var(--dur) var(--ease-out), border-top-color var(--dur) var(--ease-out);
}
.recent-card:hover .recent-meta::before { background: rgba(255, 255, 255, .18); }

/* Non-feature cards: on hover, kill the band frost so the full-card frost
   layer (recent-frost) reads as a single continuous surface. */
.recent-card:not(.recent-card--feature):hover .recent-meta::before {
  background: transparent;
  border-top-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.recent-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--green);
  margin-bottom: 6px;
  padding-bottom: 10px;
  position: relative;
  display: inline-block;
}
.recent-eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 24px;
  height: 1px;
  background: var(--green);
}

.recent-job {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 18px;
  letter-spacing: -.02em;
  line-height: 1.22;
  margin: 0;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.recent-job::after {
  content: '.';
  color: var(--green);
}
.recent-client {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .78);
  margin-top: 6px;
}

/* Feature card — bigger type, blurb + link always visible */
.recent-card--feature .recent-meta { padding: 30px 36px 30px; }
.recent-card--feature .recent-job {
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.1;
  max-width: 640px;
}
.recent-card--feature .recent-client {
  font-size: 15px;
  margin-top: 10px;
}

/* Side-card expandable wrapper — collapses fully when not hovered.
   Title + client stay visible. Feature card has no wrapper, content always shows. */
.recent-card:not(.recent-card--feature) .recent-expand {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  margin-top: 0;
  transition:
    max-height .35s var(--ease-out),
    opacity .35s var(--ease-out),
    transform .35s var(--ease-out),
    margin-top .35s var(--ease-out);
  pointer-events: none;
}
.recent-card:not(.recent-card--feature):hover .recent-expand {
  opacity: 1;
  max-height: 180px;
  margin-top: 12px;
  transform: translateY(0);
}
.recent-card:not(.recent-card--feature) .recent-blurb { margin-top: 0; }
.recent-card:not(.recent-card--feature) .recent-readmore { margin-top: 10px; }

.recent-blurb {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .85);
  margin: 12px 0 0;
}
.recent-card--feature .recent-blurb {
  font-size: 15.5px;
  max-width: 560px;
  margin-top: 16px;
}
.recent-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--green);
  margin-top: 14px;
}
.recent-card--feature .recent-readmore {
  font-size: 14px;
  margin-top: 20px;
}
.recent-readmore svg {
  width: 13px;
  height: 13px;
  transition: transform .3s var(--ease-out);
}
.recent-card:hover .recent-readmore svg { transform: translateX(3px); }

/* ========== Testimonials ========== */
.quotes {
  padding: 140px 0;
  background: var(--surface-soft);
}
.quotes-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
}
.quote {
  margin: 0;
  padding: 32px;
  background: var(--white);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.quote--featured {
  background: var(--navy);
  color: var(--white);
  padding: 48px;
  justify-content: center;
}
.quote-body {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--navy);
}
.quote--featured .quote-body {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--white);
}
/* Typing caret — shown next to the typed text; hidden when typing ends. */
.quote-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--green);
  margin-left: 2px;
  vertical-align: -0.18em;
  animation: quoteCaretBlink 1s step-end infinite;
}
.quote-caret.is-done { display: none; }
@keyframes quoteCaretBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-caret { display: none; }
}
.quote-mark {
  color: var(--green);
  font-size: 28px;
  line-height: 0;
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: 6px;
}
.quote--featured .quote-mark {
  font-size: 48px;
  vertical-align: -0.25em;
  margin-right: 8px;
}
/* Closing quote mark — mirrors the opening .quote-mark (same green, same size).
   On the featured (typed) quote it stays hidden until typing finishes, so it
   lands after the final word instead of trailing the caret. */
.quote-mark--close { margin-right: 0; margin-left: 6px; }
.quote--featured .quote-mark--close { margin-left: 8px; visibility: hidden; }
.quote--featured .quote-body.is-quote-done .quote-mark--close { visibility: visible; }
/* Keep the last word and the closing mark on the same line so the mark can
   never widow onto a line of its own (robust across browsers, unlike a word-joiner). */
.quote-tail { white-space: nowrap; }
.quote-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(27, 20, 66, .12);
}
.quote--featured .quote-foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top-color: rgba(255, 255, 255, .15);
}
.quote-name {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 13.5px;
  color: var(--navy);
}
.quote--featured .quote-name { font-size: 15px; color: var(--white); }
.quote-role {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.quote--featured .quote-role {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .6);
  margin-top: 4px;
}
.quotes-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.quotes-stack .quote { flex: 1; }

/* ========== Accreditations ========== */
.accred {
  padding: 96px 0;
  background: var(--white);
  border-top: 1px solid #EDEBE5;
  border-bottom: 1px solid #EDEBE5;
}
.accred-label {
  text-align: center;
  color: var(--fg-muted);
  margin-bottom: 44px;
}
.accred-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 16px;
  align-items: center;
}
.accred-grid li {
  min-width: 0;
  height: 96px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accred-grid img {
  max-width: 100%;
  max-height: 58px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.62;
  transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.accred-grid li:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ========== FAQ ========== */
.faq {
  padding: 140px 0;
  background: var(--navy);
  color: var(--white);
}
.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 96px;
  align-items: start;
  max-width: 1200px;
}
.faq-aside { position: sticky; top: 140px; }
.faq-aside .eyebrow { color: rgba(255, 255, 255, .55); margin-bottom: 22px; }
.faq-aside .section-title { color: var(--white); }
.faq-aside .section-sub { color: rgba(255, 255, 255, .7); max-width: 320px; margin-top: 24px; }

/* Speech bubble bursting out of the green period after "Answered before you ask." */
.faq-period {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.faq-bubble {
  position: absolute;
  top: -14px;
  left: calc(100% + 6px);
  width: 44px;
  height: 44px;
  color: var(--green);
  opacity: 0;
  transform: scale(.3) rotate(-8deg);
  transform-origin: left bottom;
  transition: opacity .4s var(--ease-out), transform .6s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(var(--green-rgb), .35));
}
.faq-bubble svg { width: 100%; height: 100%; display: block; }
.faq-period.is-shown .faq-bubble {
  opacity: 1;
  transform: scale(1) rotate(0);
}
@media (prefers-reduced-motion: reduce) {
  .faq-bubble { transition: none; opacity: 1; transform: none; }
}

.faq-list {
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: var(--white);
  transition: padding-left var(--dur) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .faq-item > summary:hover { padding-left: 4px; }
}
.faq-item > summary:hover .faq-q { opacity: 1; }
.faq-item > summary:hover .faq-toggle {
  border-color: rgba(var(--green-rgb), .6);
  color: var(--green);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 18px;
  letter-spacing: -.01em;
  opacity: .92;
  transition: opacity var(--dur) var(--ease-out);
}
.faq-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  background: transparent;
  color: var(--white);
}
.faq-toggle svg { width: 12px; height: 12px; }
.faq-item[open] > summary .faq-toggle {
  transform: rotate(45deg);
  background: var(--green);
  color: var(--navy);
}
.faq-a {
  padding-bottom: 24px;
  max-width: 640px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .8);
}
.faq-item[open] > summary .faq-q { opacity: 1; }

/* ========== Contact ========== */
.contact {
  padding: 120px 0;
  background: var(--surface-cream);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 96px;
  align-items: start;
  max-width: 1280px;
}
.contact-aside .section-title { font-size: clamp(40px, 4.2vw, 56px); }
.contact-aside .section-sub { max-width: 400px; margin-top: 20px; }
.contact-details {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(27, 20, 66, .15);
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--navy);
}
.contact-row a { color: inherit; text-decoration: none; }
.contact-row a:hover { color: var(--green); }
.contact-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--green);
  margin-top: 2px;
  display: inline-block;
}
.contact-ico svg { width: 22px; height: 22px; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form .hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field { display: block; position: relative; }
.field input,
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid rgba(27, 20, 66, .12);
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--navy);
  outline: none;
  transition: border-color var(--dur) var(--ease-out);
  resize: none;
  font-weight: var(--w-medium);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235A5470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m1 1 5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 20px center;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy);
}
.field input::placeholder,
.field textarea::placeholder {
  color: #6A6880;
}
.field textarea { min-height: 140px; }

/* Float-label pattern. Each .field--float wraps an input/textarea followed
   by a .field-label span. Label floats up + shrinks when the field is focused
   or filled (placeholder is a single space so :placeholder-shown tracks state). */
.field--float { position: relative; }
.field--float input,
.field--float textarea {
  padding: 26px 20px 10px;
}
.field--float .field-label {
  position: absolute;
  left: 20px;
  top: 18px;
  color: #6A6880;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: var(--w-medium);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .2s var(--ease-out), color .2s var(--ease-out);
  background: transparent;
}
.field--float input:focus ~ .field-label,
.field--float input:not(:placeholder-shown) ~ .field-label,
.field--float textarea:focus ~ .field-label,
.field--float textarea:not(:placeholder-shown) ~ .field-label {
  transform: translateY(-12px) scale(0.72);
  color: var(--navy);
}
.field--float input:focus ~ .field-label,
.field--float textarea:focus ~ .field-label {
  color: var(--green);
}
.field--float--textarea .field-label,
.field--textarea .field-label {
  top: 18px;
}

.btn-contact {
  margin-top: 6px;
  background: var(--green);
  color: var(--navy);
  padding: 18px 24px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--w-semibold);
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  transition: background var(--dur) var(--ease-out);
}
.btn-contact:hover:not([disabled]) { background: var(--green-hover); }
.btn-contact[disabled] { opacity: .6; cursor: wait; }
.form-status {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-muted);
  min-height: 20px;
}
.form-status.is-success { color: var(--navy); }
.form-status.is-error { color: #cc3333; }

/* ========== Footer ========== */
.foot {
  background: var(--navy);
  color: var(--white);
  padding: 56px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.foot-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: 24px;
}
.foot-logo { height: 32px; width: auto; }
.foot-meta {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: var(--w-medium);
  border-left: 1px solid rgba(255, 255, 255, .2);
  padding-left: 24px;
}
.foot-contact {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--w-medium);
}
.foot-contact a { color: var(--white); text-decoration: none; }
.foot-contact a:hover { color: var(--green); }

.foot-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 22px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
}
.foot-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-nav a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
}
.foot-nav a:hover { color: var(--green); }
.foot-legal {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.foot-legal a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: 1px;
}
.foot-legal a:hover { color: var(--white); border-bottom-color: var(--white); }

/* ============================================================
   RESPONSIVE
   Breakpoints:
     1100px — large tablet: tighten nav, shorter paddings
     900px  — tablet: hamburger nav, stack multi-col grids to 2
     640px  — mobile: 1-col, reflow stats, compact type
   ============================================================ */

@media (max-width: 1100px) {
  :root { --page-pad: 32px; }

  .nav-links { gap: 22px; font-size: 12.5px; }
  .nav-main-inner { gap: 24px; }

  .hero-stats { gap: 32px; }

  .why { padding: 110px 0 100px; }
  .services { padding: 110px 0 100px; }
  .process { padding: 110px 0; }
  .recent  { padding: 110px 0; }
  .quotes  { padding: 110px 0; }
  .faq     { padding: 110px 0; }
  .contact { padding: 100px 0; }

  .recent-grid { gap: 14px; }
  .bento-01 .bento-title { font-size: 26px; }

  .faq-layout   { gap: 64px; }
  .contact-layout { gap: 64px; }

  .accred-grid { gap: 28px 14px; }
}

@media (max-width: 900px) {
  :root { --page-pad: 24px; }

  /* Nav → hamburger (borderless). CTA button hidden on mobile; all nav items
     accessed via hamburger panel. Utility right-aligned so it doesn't stack
     over the logo. */
  .nav-utility-inner { padding: 0 var(--page-pad); gap: 16px; font-size: 12px; justify-content: flex-end; }
  .nav-util-link { min-height: 44px; }
  .nav-main-inner { padding: 14px var(--page-pad); }
  .nav-links,
  .nav-main-inner > .btn-cta-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-meta { display: none; }
  .nav-brand { gap: 0; }

  /* Hero */
  .hero { min-height: calc(100vh - 110px); }
  .hero-inner { padding: 32px var(--page-pad); }
  .hero-title { font-size: clamp(42px, 10vw, 72px); }
  .hero-roadline-wrap { margin-top: 40px; margin-bottom: 24px; }
  .hero-roadline-van { width: 180px; height: 72px; }
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .hero-stats .stat-spacer { display: none; }
  .btn-hero-ghost,
  .btn-hero-primary {
    grid-column: span 3;
    justify-content: center;
    padding: 14px 20px;
  }
  .btn-hero-ghost { grid-column: span 2; }
  .btn-hero-primary { grid-column: span 1; padding: 14px 18px; }
  .stat-n { font-size: 22px; }

  /* Showreel */
  .showreel { height: 480px; }
  .showreel-caption { font-size: 24px; bottom: 28px; }

  /* Delivered-for — single-row infinite marquee */
  .delivered { padding: 72px 0; }
  .delivered-grid {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
  }
  .delivered-track {
    display: flex;
    width: max-content;
    gap: 56px;
    padding-right: 56px;
    animation: logoMarquee 36s linear infinite;
  }
  .delivered-track li {
    flex: 0 0 auto;
    width: 110px;
    height: 56px;
    padding: 0;
  }
  .delivered-track li.is-clone { display: flex; }
  @keyframes logoMarquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .delivered-track { animation: none; }
  }

  /* Section headers */
  .section-header { margin-bottom: 56px; }

  /* Why */
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  /* Services bento: tablet simplification */
  .services-title { font-size: clamp(40px, 8vw, 72px); margin-bottom: 48px; }
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
  }
  .bento-01 { grid-column: span 6; grid-row: span 2; }
  .bento-01 .bento-title { font-size: 26px; }
  .bento-02, .bento-03, .bento-04, .bento-05 { grid-column: span 3; grid-row: span 1; }
  .bento-06 { grid-column: span 6; grid-row: span 2; }
  .bento-06 .bento-title { font-size: 22px; }
  .bento-07, .bento-08 { grid-column: span 3; grid-row: span 1; }
  .bento-09, .bento-10 { grid-column: span 3; grid-row: span 1; }
  .bento-11 { grid-column: span 6; grid-row: span 2; }
  .bento-11 .bento-title { font-size: 22px; }
  .bento-12, .bento-13 { grid-column: span 3; grid-row: span 1; }
  .bento-14 { grid-column: span 6; grid-row: span 1; }

  /* Process — vertical stack with a left-side rail + static green dot per step.
     The travelling-dot animation is desktop-only; below 900px JS skips it. */
  .process-flow {
    display: flex !important;
    flex-direction: column;
    gap: 36px;
    padding-top: 0;
    padding-left: 40px;
    grid-template-columns: none;
  }
  .process-rail {
    display: block;
    top: 6px;
    bottom: 18px;
    left: 9px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, .08) 0%,
      rgba(255, 255, 255, .08) 92%,
      rgba(255, 255, 255, 0) 100%);
  }
  .process-rail::after {
    background: linear-gradient(to bottom,
      rgba(var(--green-rgb), .55) 0%,
      rgba(var(--green-rgb), .55) 90%,
      rgba(var(--green-rgb), 0) 100%);
  }
  /* One travelling dot moves down the rail between the 5 step positions.
     Static ticks are hidden; JS measures vertical positions and sets --dot-y. */
  .process-tick { display: none; }
  .process-dot-travel {
    display: block;
    position: absolute;
    top: 6px;
    left: 4px;
  }
  .process-step { position: relative; text-align: left; }
  .process-b { margin-top: 10px; }

  /* Recent */
  .recent-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .recent-head { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .recent-title { text-align: center; }
  .recent-card img { aspect-ratio: 4 / 3; }

  /* Testimonials */
  .quotes-grid { grid-template-columns: 1fr; gap: 18px; }
  .quote--featured { padding: 36px 28px; }
  .quote--featured .quote-body { font-size: 22px; }
  .quotes-stack { flex-direction: row; gap: 18px; }
  .quotes-stack .quote { flex: 1; padding: 24px; }

  /* Accreditations */
  .accred-grid { grid-template-columns: repeat(5, 1fr); gap: 24px 12px; }

  /* FAQs */
  .faq-layout { grid-template-columns: 1fr; gap: 48px; }
  .faq-aside { position: static; text-align: center; }
  .faq-aside .section-sub { margin-left: auto; margin-right: auto; }
  .faq-period { display: inline-block; }

  /* Contact — centre the aside, keep details block left-aligned but centred as a block */
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-aside { text-align: center; }
  .contact-aside .section-sub { margin-left: auto; margin-right: auto; }
  .contact-details {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  /* Services title stays left-aligned on mobile */
  .services-title { text-align: left; }

  /* Why-C&R cards stack with centred content below 900px — hover lift
     is irrelevant on touch so we also neutralise the translateY fallback */
  .why-card { padding: 26px 22px 24px; }
  .why-card:hover { transform: none; box-shadow: 0 12px 32px -24px rgba(27, 20, 66, .3); }

  /* Accred logos always show in colour on touch devices — no hover on mobile */
  .accred-grid img {
    filter: none;
    opacity: 1;
  }
}

@media (max-width: 640px) {
  :root { --page-pad: 20px; }

  .nav-utility-inner { gap: 14px; font-size: 10.5px; justify-content: flex-end; }
  .nav-main-inner { padding: 12px var(--page-pad); }
  .nav-logo { height: 28px; }

  .nav-mobile nav { padding: 12px var(--page-pad) 24px; font-size: 17px; }
  .nav-mobile .btn-cta-nav {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    margin-top: 20px;
  }

  /* Hero */
  .hero { min-height: auto; }
  .hero-inner { padding: 40px var(--page-pad) 24px; min-height: 460px; }
  .hero-title {
    font-size: clamp(36px, 11vw, 56px);
    letter-spacing: -.03em;
  }
  /* Bigger bottom padding + iOS safe area so the bottom CTA clears the
     Safari address bar. */
  .hero-meta {
    padding: 0 var(--page-pad) calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .hero-roadline-wrap { margin-top: 20px; margin-bottom: 18px; height: 3px; }
  .hero-roadline {
    /* ~10% shorter again at mobile */
    background: repeating-linear-gradient(90deg, #fff 0 76px, transparent 76px 119px);
  }
  .hero-roadline-van { width: 120px; height: 48px; }
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start;
  }
  .hero-stats .stat { padding-top: 14px; }
  .stat-n { font-size: 18px; }
  .stat-l { font-size: 10px; letter-spacing: .14em; margin-top: 6px; }
  .btn-hero-ghost { grid-column: span 3; padding: 13px 16px; font-size: 13px; }
  .btn-hero-primary { grid-column: span 3; padding: 14px 20px; justify-content: center; font-size: 13px; }

  /* Showreel */
  .showreel { height: 360px; }
  .showreel-caption { font-size: 20px; line-height: 1.2; bottom: 24px; }

  /* Delivered — tighter marquee on phone: more logos visible at once */
  .delivered { padding: 56px 0; }
  .delivered-label { margin-bottom: 28px; }
  .delivered-track {
    gap: 24px;
    padding-right: 24px;
    animation-duration: 26s;
  }
  .delivered-track li { width: 64px; height: 40px; padding: 0; }
  .delivered-track img { max-height: 28px; }

  /* Section type */
  .section-title { font-size: clamp(28px, 8vw, 40px); line-height: 1.15; }
  .section-sub { font-size: 15px; }
  .section-header { margin-bottom: 40px; }

  /* Why */
  .why { padding: 80px 0 72px; }
  .why-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Services */
  .services { padding: 80px 0 72px; }
  .services-title { font-size: clamp(36px, 10vw, 56px); margin-bottom: 32px; }
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 10px;
  }
  .bento-card {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    aspect-ratio: 16 / 10;
  }
  .bento-card .bento-title { font-size: 18px !important; }

  /* Process — tighter at phone widths (vertical rail from 900px block is retained) */
  .process { padding: 80px 0; }
  .process-flow { gap: 28px; padding-left: 36px; }
  .process-rail { left: 7px; }
  .process-tick { left: -32px; }

  /* Recent — horizontal carousel on phone widths. Scroll-snap aligns each
     card to start with a consistent left gutter so first + last cards don't
     land off-centre. All cards share the same slim frost band. */
  .recent { padding: 80px 0; }
  .recent-title { font-size: clamp(36px, 10vw, 56px); }
  .recent-grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--page-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px var(--page-pad) 16px;
    margin: 0 calc(-1 * var(--page-pad));
    min-height: 0;
  }
  .recent-grid::-webkit-scrollbar { display: none; }
  .recent-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
    grid-row: auto !important;
    grid-column: auto !important;
    height: 340px;
    min-height: 340px;
  }
  /* Feature card on mobile: behave identically to side cards — slim frost
     band with just title + client, not the full desktop editorial layout. */
  .recent-card--feature { height: 340px; min-height: 340px; }
  .recent-card--feature .recent-meta {
    padding: 14px 22px;
    bottom: 0;
  }
  .recent-card--feature .recent-job {
    font-size: 18px;
    line-height: 1.22;
    max-width: none;
  }
  .recent-card--feature .recent-client {
    font-size: 13.5px;
    margin-top: 6px;
  }
  .recent-card--feature .recent-eyebrow,
  .recent-card--feature .recent-blurb,
  .recent-card--feature .recent-readmore {
    display: none;
  }
  .recent-card img {
    aspect-ratio: auto;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Every card shows the same slim band — title + client only. The side-card
     blurb/"read more" is a desktop hover affordance; on mobile it's dropped so
     all four panes carry the same level of detail. */
  .recent-card:not(.recent-card--feature) .recent-expand { display: none; }
  /* Reserve identical space so pane height never changes with text length:
     title always occupies two lines, client always one. Only the words differ. */
  .recent-meta .recent-job {
    font-size: 18px;
    line-height: 1.22;
    min-height: calc(1.22em * 2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .recent-meta .recent-client {
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Testimonials */
  .quotes { padding: 80px 0; }
  .quotes-stack { flex-direction: column; gap: 14px; }
  .quote--featured { padding: 28px 24px; }
  .quote--featured .quote-body { font-size: 19px; }
  .quote { padding: 22px; }
  .quote-body { font-size: 16px; }

  /* Accreditations */
  .accred { padding: 64px 0; }
  .accred-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 8px; max-width: 420px; }
  .accred-mark { width: 56px; height: 56px; font-size: 13px; }
  .accred-mark--sm { font-size: 11px; }

  /* FAQs — horizontally centred block, narrower list */
  .faq { padding: 80px 0; }
  .faq-layout { max-width: 520px; margin-left: auto; margin-right: auto; }
  .faq-q { font-size: 16px; }
  .faq-item > summary { padding: 20px 0; gap: 16px; }
  .faq-a { font-size: 14px; padding-bottom: 20px; }
  /* Speech bubble sits beside the period, not above it — avoids clashing
     with the line of text above on a narrower column */
  .faq-bubble {
    top: 2px;
    left: calc(100% + 4px);
    width: 36px;
    height: 36px;
  }

  /* Contact — block centred, form narrower */
  .contact { padding: 80px 0; }
  .contact-layout { gap: 32px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .field-row { grid-template-columns: 1fr; }
  .contact-aside .section-title { font-size: clamp(32px, 8vw, 44px); }
  .field input,
  .field select,
  .field textarea { padding: 14px 16px; }
  .field--float input,
  .field--float textarea { padding: 22px 16px 8px; }
  .field--float .field-label { left: 16px; }
  .btn-contact { width: 100%; padding: 16px 20px; }

  /* Footer — centred, stacked */
  .foot { padding: 40px 0 24px; text-align: center; }
  .foot-main { flex-direction: column; align-items: center; gap: 18px; }
  .foot-brand { flex-direction: column; gap: 10px; align-items: center; }
  .foot-meta { border-left: none; padding-left: 0; font-size: 10px; }
  .foot-contact { gap: 18px; flex-wrap: wrap; justify-content: center; }
  .foot-sub { flex-direction: column; align-items: center; gap: 20px; padding-top: 22px; }
  .foot-nav { justify-content: center; gap: 18px; }
  .foot-legal { flex-direction: column; align-items: center; gap: 8px; }
}

/* Very small devices */
@media (max-width: 380px) {
  .accred-grid { grid-template-columns: repeat(2, 1fr); max-width: 300px; }
  .hero-stats { gap: 10px; }
  .stat-n { font-size: 16px; }
  .stat-l { font-size: 9px; }
}

/* No hover-driven movement on touch / hybrid pointers (e.g. iPad + mouse) —
   keeps the colour/border feedback, drops the lift + reveal that feel jumpy.
   Desktop (precise hover) is unaffected. */
@media (hover: none), (pointer: coarse) {
  .why-card:hover { transform: none; box-shadow: 0 12px 32px -24px rgba(27, 20, 66, .3); }
  .process-card:hover { transform: none; }
  /* No hover on touch — show the "read more" blurb by default rather than on hover. */
  .recent-card:not(.recent-card--feature) .recent-expand {
    opacity: 1;
    max-height: 200px;
    margin-top: 12px;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Accreditation strip — centred wrapping variant (site-wide).
   Specificity (.accred-grid.accred-grid--centered) wins over both the
   .accred-grid (home) and .ab-accred-grid (about/service) bases regardless of
   stylesheet order. Centres each row so an odd count never strands a logo;
   a hard break (desktop >=1024px) splits small-on-top / wide-on-bottom.
   ============================================================ */
.accred-grid.accred-grid--centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 28px;
  max-width: 980px;
}
.accred-grid.accred-grid--centered li {
  flex: 0 0 auto;
  width: auto;
  height: 84px;
}
.accred-grid.accred-grid--centered img { max-height: 56px; }
.accred-grid.accred-grid--centered .accred-break {
  flex: 0 0 100%;
  height: 0;
  margin: 0;
  padding: 0;
}
@media (max-width: 1023px) {
  .accred-grid.accred-grid--centered .accred-break { display: none; }
}