/* ===========================================================================
   AlRrai Combined General Trading Co. — site styles
   Bright site: white floating panels on a white and pale-blue ground (section
   25), with photographic heroes and feature bands as rounded panels and one
   brand-blue CTA band per page. Palette derived from the supplied logo.
   =========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --navy-900: #08192b;
  --navy-800: #0c2340;
  --navy-700: #123055;
  --navy-600: #1a4372;
  --blue-600: #10639f;
  --blue-500: #1a7ec4;
  --cyan-600: #0f9fc4;
  --cyan-ink: #0a7690; /* accent text on light: 5.24:1 on white */
  --cyan-500: #16b6d8;
  --cyan-400: #48cfe8;

  --white: #ffffff;
  --grey-50: #f7f9fc;
  --grey-100: #eef2f7;
  --grey-150: #e4eaf2;
  --grey-200: #d8e1ec;
  --grey-400: #93a3b8;
  --grey-500: #5c6e84; /* 5.23:1 on white, 4.95:1 on --grey-50 */
  --grey-600: #52657d;
  --ink: #10243a;

  /* Brand surfaces: the page ground and tinted sections are a light blue-grey,
     so white panels always separate from what is behind them.
     --grey-500 stays >= 4.5:1 on --tint-100. */
  --canvas: #ebf0f6;
  --tint-50: #f3f7fb;
  --tint-100: #ecf2f8;
  --brand-line: linear-gradient(
    90deg,
    var(--navy-800) 0%,
    var(--blue-600) 55%,
    var(--cyan-500) 100%
  );
  --shadow-float:
    0 1px 3px rgba(4, 14, 26, 0.1), 0 20px 46px -20px rgba(4, 14, 26, 0.46);

  --ok: #12805c;
  --warn: #8a5a00;
  --err: #b3261e;

  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-display:
    "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 8vw, 120px);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: clamp(18px, 2vw, 30px);

  --shadow-sm:
    0 1px 2px rgba(12, 35, 64, 0.06), 0 2px 8px rgba(12, 35, 64, 0.05);
  --shadow-md:
    0 4px 12px rgba(12, 35, 64, 0.07), 0 14px 34px rgba(12, 35, 64, 0.09);
  --shadow-lg:
    0 10px 24px rgba(12, 35, 64, 0.1), 0 30px 70px rgba(12, 35, 64, 0.14);

  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header (/transport/#worker-company etc.) */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* belt-and-braces against horizontal overflow */
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem);
  letter-spacing: -0.028em;
}
h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
}
h4 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1.1em;
}
p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}
a {
  color: var(--blue-600);
}
strong {
  font-weight: 650;
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.25em;
}
li {
  margin-bottom: 0.4em;
}

hr {
  border: 0;
  border-top: 1px solid var(--grey-200);
  margin: 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--cyan-500);
  color: var(--navy-900);
}

/* ---------- 3. Focus & skip link ---------------------------------------- */
:focus-visible {
  outline: 3px solid var(--cyan-500);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible,
.cinema :focus-visible {
  outline-color: var(--cyan-400);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -200px;
  z-index: 200;
  background: var(--white);
  color: var(--navy-800);
  padding: 12px 18px;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: top 0.18s var(--ease);
}
.skip-link:focus {
  top: 12px;
}

/* ---------- 4. Layout helpers ------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: clamp(44px, 5.5vw, 80px);
}
.section--grey {
  background: linear-gradient(180deg, var(--tint-50) 0%, var(--tint-100) 100%);
}
.section--line {
  border-top: 1px solid var(--grey-150);
}

.section--dark {
  background: var(--navy-800);
  color: #dbe6f2;
  background-image:
    radial-gradient(
      110% 80% at 12% 0%,
      rgba(26, 126, 196, 0.28),
      transparent 62%
    ),
    radial-gradient(
      90% 70% at 92% 100%,
      rgba(22, 182, 216, 0.16),
      transparent 60%
    );
}
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--white);
}
.section--dark a:not([class*="btn"]) {
  color: var(--cyan-400);
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.6;
  color: var(--grey-600);
}
.section--dark .lede {
  color: #b9cade;
}
.measure {
  max-width: 62ch;
}
.measure-sm {
  max-width: 48ch;
}
.center {
  text-align: center;
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--cyan-500);
  border-radius: 2px;
}
.section--dark .eyebrow,
.cinema .eyebrow {
  color: var(--cyan-400);
}

.section-head {
  max-width: 66ch;
  margin-bottom: clamp(32px, 4vw, 56px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--white) 35%, var(--tint-50) 100%);
  --head-rule: var(--blue-600);
  box-shadow:
    inset 0 3px 0 var(--head-rule),
    var(--shadow-sm);
  transform: translateY(var(--lift, 0px)) scale(var(--scale, 1))
    perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.section--dark .section-head {
  --head-rule: var(--cyan-500);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}
.section-head[data-tilt-active="true"] {
  --lift: -3px;
  --scale: 1.006;
  box-shadow:
    inset 0 3px 0 var(--head-rule),
    var(--shadow-md);
}
.section-head.center {
  text-align: center;
}
.section-head.center .eyebrow {
  justify-content: center;
}

main[data-scroll-motion-ready] > section {
  position: relative;
  transform: translate3d(0, var(--section-scroll-y, 0px), 0);
  will-change: transform;
}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 13px 26px;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease),
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--blue-600);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(16, 99, 159, 0.28);
}
.btn--primary:hover {
  background: var(--navy-600);
  box-shadow: 0 10px 26px rgba(12, 35, 64, 0.32);
}

/* The call to action on dark grounds: the same brand blue as primary, with a
   light edge so it holds its shape against navy photography. */
.btn--accent {
  background: var(--blue-600);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 8px 22px rgba(4, 14, 26, 0.34);
}
.btn--accent:hover {
  background: var(--navy-600);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 28px rgba(4, 14, 26, 0.42);
}

.btn--ghost {
  background: transparent;
  color: var(--navy-800);
  border-color: rgba(16, 99, 159, 0.3);
}
.btn--ghost:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
  background: var(--tint-50);
}

.btn--onDark {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.38);
}
.btn--onDark:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--white);
}

.btn--lg {
  min-height: 54px;
  padding: 16px 32px;
  font-size: 1.03rem;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.btn-row.center {
  justify-content: center;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  text-decoration: none;
  color: var(--blue-600);
}
.arrow-link::after {
  content: "→";
  transition: transform 0.18s var(--ease);
}
.arrow-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.arrow-link:hover::after {
  transform: translateX(4px);
}

/* ---------- 6. Header & navigation --------------------------------------- */
/* The frosted header surface lives on ::before, not on the header itself: a
   backdrop-filter on the header would make it the backdrop root for the
   Services menu inside it, and the menu's glass could no longer see the page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--grey-150);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.5) blur(10px);
  backdrop-filter: saturate(1.5) blur(10px);
  pointer-events: none;
}
.site-header::after,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-line);
  pointer-events: none;
}
.site-header::after {
  bottom: -1px;
}
.site-footer::before {
  top: 0;
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy-800);
}
.brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: none;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.brand__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-top: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 42px;
  padding: 8px 14px;
  font-size: 0.94rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--navy-700);
  border-radius: var(--r-sm);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition:
    color 0.16s var(--ease),
    background-color 0.16s var(--ease);
}
.nav__link:hover {
  color: var(--blue-600);
  background: var(--grey-100);
}
.nav__link[aria-current="page"],
.nav__link[data-section-current] {
  color: var(--blue-600);
}
.nav__link[aria-current="page"]::after,
.nav__link[data-section-current]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan-500);
}
.nav__caret {
  width: 9px;
  height: 9px;
  flex: none;
  transition: transform 0.2s var(--ease);
}
.nav__link[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

.nav__item {
  position: relative;
}
/* Services dropdown: a floating frosted-glass panel of service names. The
   header's own frosting sits on a pseudo-element, so this blur samples the
   page and the photograph behind shows faintly through. The tint stays light
   enough to keep bold navy names well above AA over any hero image. */
.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 10;
  min-width: 240px;
  padding: 10px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(240, 245, 250, 0.74) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 1px rgba(12, 35, 64, 0.07),
    0 4px 14px rgba(8, 25, 43, 0.08),
    0 22px 50px -14px rgba(8, 25, 43, 0.3);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* visibility flips instantly when opening and is delayed to the end of the
     fade when closing. Transitioning it like the other properties would leave
     the menu unfocusable for the first frames, breaking keyboard entry. */
  transition:
    opacity 0.16s var(--ease),
    transform 0.16s var(--ease),
    visibility 0s linear 0.16s;
}
.nav__item--open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.16s var(--ease),
    transform 0.16s var(--ease),
    visibility 0s linear 0s;
}
.nav__menu li {
  margin: 0;
}
.nav__menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--navy-800);
  transition:
    background-color 0.14s var(--ease),
    color 0.14s var(--ease),
    transform 0.18s var(--ease);
}
.nav__menu a:hover {
  background: rgba(16, 99, 159, 0.08);
  color: var(--blue-600);
}
.nav__menu a[aria-current="page"] {
  background: rgba(16, 99, 159, 0.1);
  color: var(--blue-600);
}
/* Desktop glass panel: a name takes a light surface and a blue-to-cyan
   underline that draws from left to right, and lifts slightly under a mouse.
   The link is a one-column grid whose column is exactly the name's width
   (capped at the row). The name fills row 1; the underline sits in row 2,
   directly beneath it. Its negative margin cancels its own height, so row 2
   adds nothing and the row, padding and hover surface stay as they were. */
@media (min-width: 1001px) {
  .nav__menu a {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    align-content: center;
    justify-content: start;
  }
  .nav__menu a::after {
    content: "";
    grid-row: 2;
    grid-column: 1;
    height: 2px;
    margin-top: -2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
    translate: 0 3px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--ease);
    pointer-events: none;
  }
  .nav__menu a:hover,
  .nav__menu a:focus-visible,
  .nav__menu a[aria-current="page"] {
    background: rgba(26, 126, 196, 0.1);
    color: var(--blue-600);
  }
  .nav__menu a:hover::after,
  .nav__menu a:focus-visible::after,
  .nav__menu a[aria-current="page"]::after {
    transform: scaleX(1);
  }
}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nav__menu a:hover {
    transform: translateY(-1px);
  }
}

.nav__cta {
  margin-left: 10px;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 14px 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-800);
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 17px;
  height: 12px;
  flex: none;
}
.nav-toggle__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-800);
  transition:
    transform 0.22s var(--ease),
    opacity 0.16s var(--ease);
}
.nav-toggle__bars i:nth-child(1) {
  top: 0;
}
.nav-toggle__bars i:nth-child(2) {
  top: 5px;
}
.nav-toggle__bars i:nth-child(3) {
  top: 10px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Mobile navigation ------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* backdrop-filter makes an element the containing block for its
     position:fixed descendants. With it on, the nav panel below resolves its
     inset against the 76px-tall header instead of the viewport and collapses
     to a thin strip. The header is opaque on mobile, so drop the filter. */
  .site-header {
    background: var(--white);
    backdrop-filter: none;
  }
  .site-header::before {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 90;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px var(--gutter) 40px;
    background: var(--white);
    border-top: 1px solid var(--grey-150);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity 0.2s var(--ease),
      transform 0.2s var(--ease),
      visibility 0.2s;
  }
  .nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__link {
    width: 100%;
    min-height: 52px;
    justify-content: space-between;
    font-size: 1.05rem;
    padding-inline: 4px;
    border-radius: 0;
    border-bottom: 1px solid var(--grey-100);
  }
  .nav__link:hover {
    background: none;
  }
  .nav__link[aria-current="page"]::after,
  .nav__link[data-section-current]::after {
    left: 4px;
    right: auto;
    width: 22px;
    bottom: 8px;
  }
  .nav__item {
    width: 100%;
  }
  .nav__menu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 4px 0 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__item--open .nav__menu {
    display: block;
  }
  .nav__menu a {
    min-height: 48px;
    padding: 12px 4px 12px 14px;
    border-left: 2px solid var(--grey-150);
    border-radius: 0;
    font-size: 1rem;
    white-space: normal;
  }
  .nav__menu a[aria-current="page"] {
    border-left-color: var(--blue-600);
  }
  .nav__cta {
    margin: 18px 0 0;
    width: 100%;
  }
  body[data-nav-open="true"] {
    overflow: hidden;
  }
}

/* ---------- 7. Cinema (moving background) component ---------------------- */
.cinema {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--white);
}
.cinema__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.cinema__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  will-change: opacity;
}
.cinema__slide[data-active="true"] {
  opacity: 1;
}
.cinema__slide > img,
.cinema__slide > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
/* When a clip is configured, the <video> stacks over the still frame. Its
   poster is that same still, so the swap never flashes or shifts layout. */
.cinema__slide > video {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Still-image motion: a slow pan/zoom over the photograph.
   This is a CAMERA effect on a still frame — it never animates a subject. */
.cinema__slide > img {
  transform-origin: var(--focal, 50% 50%);
  animation: kb-in 16s var(--ease) both;
  animation-play-state: paused;
}
.cinema__slide[data-pan="left"] > img {
  animation-name: kb-left;
}
.cinema__slide[data-pan="right"] > img {
  animation-name: kb-right;
}
.cinema[data-playing="true"] .cinema__slide[data-active="true"] > img {
  animation-play-state: running;
}

@keyframes kb-in {
  from {
    transform: scale(1.015);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes kb-left {
  from {
    transform: scale(1.07) translateX(1.6%);
  }
  to {
    transform: scale(1.07) translateX(-1.6%);
  }
}
@keyframes kb-right {
  from {
    transform: scale(1.07) translateX(-1.6%);
  }
  to {
    transform: scale(1.07) translateX(1.6%);
  }
}

.cinema__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(8, 25, 43, 0.74) 0%,
      rgba(8, 25, 43, 0.5) 34%,
      rgba(8, 25, 43, 0.66) 78%,
      rgba(8, 25, 43, 0.88) 100%
    ),
    linear-gradient(
      100deg,
      rgba(8, 25, 43, 0.84) 0%,
      rgba(8, 25, 43, 0.48) 52%,
      rgba(12, 35, 64, 0.3) 100%
    );
}
.cinema--soft .cinema__scrim {
  background:
    linear-gradient(
      180deg,
      rgba(8, 25, 43, 0.6) 0%,
      rgba(8, 25, 43, 0.42) 40%,
      rgba(8, 25, 43, 0.78) 100%
    ),
    linear-gradient(
      100deg,
      rgba(8, 25, 43, 0.8) 0%,
      rgba(8, 25, 43, 0.34) 60%,
      transparent 100%
    );
}
.cinema__body {
  position: relative;
  z-index: 2;
}
.cinema h1,
.cinema h2,
.cinema h3 {
  color: var(--white);
  text-shadow: 0 2px 22px rgba(4, 14, 26, 0.55);
}
.cinema p {
  color: #d9e6f3;
  text-shadow: 0 1px 14px rgba(4, 14, 26, 0.5);
}

/* Playback control */
.cinema__controls {
  position: absolute;
  right: var(--gutter);
  bottom: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cinema__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(8, 25, 43, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition:
    background-color 0.16s var(--ease),
    border-color 0.16s var(--ease);
}
.cinema__btn:hover {
  background: rgba(8, 25, 43, 0.88);
  border-color: rgba(255, 255, 255, 0.6);
}
.cinema__btn svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: currentColor;
}

.cinema__dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.cinema__dot {
  width: 26px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.34);
  transition:
    background-color 0.2s var(--ease),
    width 0.2s var(--ease);
}
.cinema__dot[aria-current="true"] {
  background: var(--cyan-400);
  width: 40px;
}
/* Keep the real hit area finger-friendly without a fat visual dot */
.cinema__dot::before {
  content: "";
  position: absolute;
  inset: -14px -3px;
}
.cinema__dot {
  position: relative;
}

/* "Still image" provenance tag, shown only while no clip is configured */
.cinema__tag {
  position: absolute;
  left: var(--gutter);
  bottom: 24px;
  z-index: 3;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  /* Backed rather than bare: over bright footage, unbacked light text drops
     below AA, and which frame is showing must not decide legibility. */
  background: rgba(8, 25, 43, 0.72);
  backdrop-filter: blur(6px);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: #e9f2fa;
}

/* Hero sizing — stable box, no layout shift */
.hero {
  display: grid;
  align-items: end;
  min-height: min(86svh, 780px);
  padding-block: clamp(96px, 14vh, 150px) clamp(72px, 10vh, 110px);
}
.hero--page {
  min-height: min(64svh, 560px);
}
.hero__inner {
  max-width: 860px;
}
.hero p.lede {
  color: #cddceb;
  max-width: 54ch;
}
.hero .btn-row {
  margin-top: clamp(24px, 3vw, 36px);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.hero__meta span {
  font-size: 0.82rem;
  font-weight: 550;
  color: #bdd0e3;
}
.hero__meta b {
  color: var(--cyan-400);
  font-weight: 700;
}

/* Home hero: the company name over the background clip, with the trading name,
   one supporting line and one call to action, all on the left. The navy
   gradient shades the text side just enough to keep white text readable over
   any frame, without dulling the footage. Phones, where the text spans the
   width, get an even shade instead. */
.hero--home {
  align-items: center;
}
.hero--home .cinema__scrim {
  background:
    linear-gradient(
      90deg,
      rgba(8, 25, 43, 0.72) 0%,
      rgba(8, 25, 43, 0.5) 45%,
      rgba(8, 25, 43, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 25, 43, 0.28) 0%,
      rgba(8, 25, 43, 0.12) 45%,
      rgba(8, 25, 43, 0.46) 100%
    );
}
.hero--home .hero__inner {
  max-width: none;
}
/* ALRRAI in pale white-blue over COMBINED in a cyan gradient. Both words are
   one block each, so the pair never re-wraps as the viewport changes. */
.hero-brand__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 11.5vw, 8.5rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-shadow: 0 6px 34px rgba(4, 14, 26, 0.45);
}
.hero-brand__word {
  display: block;
}
.hero-brand__word--a {
  color: #eef5fc;
}
.hero-brand__word--a > span {
  display: inline-block; /* transformable, and identical in layout at rest */
}
.hero-brand__word--b {
  /* The light band inside this gradient is what the sweep moves across. */
  background-image: linear-gradient(
    95deg,
    #7fd3ef 0%,
    #48cfe8 30%,
    #ffffff 50%,
    #48cfe8 70%,
    #16b6d8 100%
  );
  background-size: 260% 100%;
  background-position: 0 0;
  color: #7fd3ef; /* fallback where background-clip: text is unsupported */
  text-shadow: none;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-brand__word--b {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.hero-brand__sub {
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.85rem + 0.45vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d7e5f3;
}

/* Entrance, once on load: ALRRAI letter by letter, COMBINED after it with one
   light sweep, then the trading name, the supporting line and the button.
   Everything is opacity and transform, so nothing reflows and the button stays
   clickable throughout. */
@media (prefers-reduced-motion: no-preference) {
  .hero-brand__word--a > span {
    animation: hero-brand-letter 0.66s var(--ease) both;
  }
  .hero-brand__word--a > span:nth-child(1) { animation-delay: 0.05s; }
  .hero-brand__word--a > span:nth-child(2) { animation-delay: 0.13s; }
  .hero-brand__word--a > span:nth-child(3) { animation-delay: 0.21s; }
  .hero-brand__word--a > span:nth-child(4) { animation-delay: 0.29s; }
  .hero-brand__word--a > span:nth-child(5) { animation-delay: 0.37s; }
  .hero-brand__word--a > span:nth-child(6) { animation-delay: 0.45s; }
  .hero-brand__word--b {
    animation:
      hero-brand-word 0.8s var(--ease) 0.62s both,
      hero-brand-sweep 1.7s ease-out 1.3s both;
  }
  .hero-brand__sub {
    animation: hero-brand-rise 0.7s var(--ease) 1s both;
  }
  .hero--home .hero__sub {
    animation: hero-brand-rise 0.7s var(--ease) 1.15s both;
  }
  .hero--home .hero__cta {
    animation: hero-brand-rise 0.7s var(--ease) 1.3s both;
  }
}
@keyframes hero-brand-letter {
  from {
    opacity: 0;
    transform: translateY(0.16em) scale(1.32) rotate(-2.5deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hero-brand-word {
  from {
    opacity: 0;
    transform: translateY(0.24em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hero-brand-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes hero-brand-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Reduced motion: one short fade, no letter reveal, movement or sweep. */
@media (prefers-reduced-motion: reduce) {
  .hero-brand__name,
  .hero-brand__sub,
  .hero--home .hero__sub,
  .hero--home .hero__cta {
    animation: hero-brand-fade 0.2s linear both;
  }
}
@keyframes hero-brand-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero--home .hero__sub {
  max-width: 46ch;
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  color: #e4edf6;
}
.hero--home .hero__cta {
  margin-top: clamp(26px, 3.2vw, 40px);
  padding-inline: 36px;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 699px) {
  /* Content is centred in a full-height hero; the page-hero top padding would
     push the call to action below the fold on short phones. */
  .hero--home {
    padding-top: 44px;
  }
  .hero--home .cinema__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(8, 25, 43, 0.52) 0%,
        rgba(8, 25, 43, 0.56) 55%,
        rgba(8, 25, 43, 0.72) 100%
      );
  }
  /* Phones: shorter, smaller entrance moves, and it finishes sooner. */
  @media (prefers-reduced-motion: no-preference) {
    .hero-brand__word--a > span {
      animation-duration: 0.5s;
    }
    .hero-brand__word--a > span:nth-child(1) { animation-delay: 0.04s; }
    .hero-brand__word--a > span:nth-child(2) { animation-delay: 0.1s; }
    .hero-brand__word--a > span:nth-child(3) { animation-delay: 0.16s; }
    .hero-brand__word--a > span:nth-child(4) { animation-delay: 0.22s; }
    .hero-brand__word--a > span:nth-child(5) { animation-delay: 0.28s; }
    .hero-brand__word--a > span:nth-child(6) { animation-delay: 0.34s; }
    .hero-brand__word--b {
      animation:
        hero-brand-word 0.55s var(--ease) 0.46s both,
        hero-brand-sweep 1.3s ease-out 0.95s both;
    }
    .hero-brand__sub {
      animation-duration: 0.5s;
      animation-delay: 0.72s;
    }
    .hero--home .hero__sub {
      animation-duration: 0.5s;
      animation-delay: 0.82s;
    }
    .hero--home .hero__cta {
      animation-duration: 0.5s;
      animation-delay: 0.92s;
    }
  }
}
/* Phones held sideways: a shorter heading and tighter spacing so the subtitle
   and the call to action stay on screen, clear of the playback controls. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero--home {
    padding-block: 24px 72px;
  }
  .hero-brand__name {
    font-size: clamp(1.9rem, 7vw, 3.2rem);
  }
  .hero-brand__sub {
    font-size: 0.9rem;
    letter-spacing: 0.16em;
  }
  .hero--home .hero__sub {
    max-width: 64ch;
    margin-top: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .hero--home .hero__cta {
    min-height: 46px;
    margin-top: 16px;
    padding-block: 11px;
  }
}

/* Breadcrumb inside page heroes */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: 0.82rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  color: #a8bed4;
}
.crumbs li {
  margin: 0;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 0.5em;
  opacity: 0.55;
}
.crumbs a {
  color: #cfe0f0;
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Inline (non-hero) cinematic feature band */
.feature-band {
  position: relative;
  min-height: min(60svh, 520px);
  display: grid;
  align-items: center;
  padding-block: clamp(56px, 8vw, 96px);
  border-radius: 0;
}
.feature-band__inner {
  max-width: 620px;
}

/* ---------- 8. Cards & grids -------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Business cards: entrance on the article, hover on the linked surface. */
.business-card-reveal {
  min-width: 0;
  height: 100%;
}
.business-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 440px;
  height: 100%;
  padding: clamp(26px, 3vw, 40px);
  overflow: hidden;
  border-radius: var(--r-lg);
  color: white;
  background: var(--navy-800);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transform: translateY(var(--lift, 0px)) scale(var(--scale, 1))
    perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.business-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.business-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 8px), 0)
    scale(var(--img-scale, 1.03));
  transition: transform 0.65s var(--ease);
}
.business-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(8, 25, 43, 0.12) 0%,
    rgba(8, 25, 43, 0.16) 26%,
    rgba(8, 25, 43, 0.82) 60%,
    rgba(8, 25, 43, 0.97) 100%
  );
}
.business-card__tag {
  align-self: flex-start;
  color: white;
  padding: 6px 12px;
  border-radius: 24px;
  background: rgba(8, 25, 43, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.business-card__copy {
  padding-top: 110px;
  max-width: 490px;
  transform: translate3d(calc(var(--px, 0) * -3px), calc(var(--py, 0) * -3px), 0);
  transition: transform 0.45s var(--ease);
}
.business-card h3 {
  color: white;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  margin-bottom: 12px;
}
.business-card p {
  color: #edf3fa;
  font-size: 0.96rem;
  line-height: 1.65;
  margin-bottom: 22px;
}
.business-card .arrow-link {
  color: var(--cyan-400);
  font-size: 0.9rem;
}
.business-card:focus-visible {
  outline: 3px solid var(--cyan-400);
  outline-offset: 5px;
  box-shadow: var(--shadow-lg);
}
.business-card:focus-visible .arrow-link::after {
  transform: translateX(4px);
}
@media (hover: hover) and (pointer: fine) {
  .business-card:hover,
  .business-card:focus-visible {
    --lift: -6px;
    --scale: 1.015;
    box-shadow: 0 22px 40px -16px rgba(8, 25, 43, 0.45);
  }
  .business-card:hover .business-card__media img,
  .business-card:focus-visible .business-card__media img {
    --img-scale: 1.05;
  }
  .business-card:hover .arrow-link::after {
    transform: translateX(4px);
  }
}
@media (max-width: 720px) {
  .business-card {
    min-height: 420px;
  }
  .business-card__copy {
    padding-top: 110px;
  }
}

/* Business-specific section photographs. Only the overscanned layer moves. */
.section-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--grey-50);
}
.section-photo__background {
  position: absolute;
  inset: -32px 0;
  z-index: -2;
}
.section-photo__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
.section-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(247, 249, 252, 0.93);
}
[data-parallax] .cinema__stage {
  inset: -32px 0;
}
[data-parallax] .cinema__stage,
.section-photo__background {
  transform: translateY(var(--parallax-y, 0px));
}
/* These feature posters follow scrolling rather than looping camera motion. */
[data-parallax] .cinema__slide > img {
  animation: none;
}

/* "Play preview" affordance on division cards */
.div-card__play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--white);
  background: rgba(8, 25, 43, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.div-card__play svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}
.div-card__play:hover {
  background: rgba(8, 25, 43, 0.85);
}

/* Plain content card */
.card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.4vw, 30px);
  box-shadow:
    0 1px 2px rgba(12, 35, 64, 0.06),
    0 10px 26px -12px rgba(12, 35, 64, 0.18);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: #c3d1e1;
    box-shadow: var(--shadow-md);
  }
}
.section--grey .card {
  background: var(--white);
}
.card--flat {
  box-shadow: none;
}
.card h3,
.card h4 {
  margin-bottom: 0.5em;
}
.card p {
  color: var(--grey-600);
  font-size: 0.96rem;
  margin-bottom: 0;
}

.section--dark .card,
.section--dark .card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.section--dark .card:hover {
  border-color: rgba(255, 255, 255, 0.3);
}
.section--dark .card p {
  color: #b4c6da;
}

/* Numbered strength cards */
.strength {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.strength__k {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan-ink);
}
.section--dark .strength__k {
  color: var(--cyan-400);
}
.strength h3 {
  font-size: 1.12rem;
  margin: 0;
}

/* Service cards: the one image-card language used by every service grid -
   photograph, navy gradient, icon, small number, heading and description.
   Tilt (--tilt-x/--tilt-y, --lift, --scale) and the pointer offsets (--px/--py,
   -1..1) are set by initTilt() in main.js, for desktop mice only; touch and
   reduced motion never receive them. */
.svc-grid {
  display: grid;
  gap: clamp(16px, 1.8vw, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.svc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 320px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-lg);
  background: var(--navy-800);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.svc__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
/* Slight overscan so the pointer drift never exposes an edge. */
.svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 8px), 0)
    scale(var(--img-scale, 1.04));
  transition: transform 0.65s var(--ease);
}
.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(8, 25, 43, 0.42) 0%,
    rgba(8, 25, 43, 0.18) 32%,
    rgba(8, 25, 43, 0.84) 64%,
    rgba(8, 25, 43, 0.97) 100%
  );
}
.svc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.svc__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--cyan-400);
  background: rgba(8, 25, 43, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.26);
}
.svc__icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc__num {
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  background: rgba(8, 25, 43, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.26);
}
/* Content drifts a little against the photograph. */
.svc__copy {
  transform: translate3d(calc(var(--px, 0) * -3px), calc(var(--py, 0) * -3px), 0);
  transition: transform 0.45s var(--ease);
}
.svc h3 {
  color: var(--white);
  font-size: 1.22rem;
  margin: 0 0 8px;
  text-shadow: 0 2px 16px rgba(4, 14, 26, 0.55);
}
.svc p {
  color: #e3ecf6;
  font-size: 0.93rem;
  line-height: 1.6;
  margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  .svc:hover {
    --img-scale: 1.09;
    box-shadow: 0 22px 40px -16px rgba(8, 25, 43, 0.45);
  }
}
/* A lone last card spans its row rather than leaving a gap. */
.svc-grid > .svc:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}
@media (max-width: 999px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .svc-grid > .svc:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }
  .svc-grid > .svc:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* Phones: one full-width card per row. */
@media (max-width: 599px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
  .svc-grid > .svc:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .svc {
    min-height: 280px;
  }
}

/* Tick list */
.ticks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55em;
}
.ticks li {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  margin: 0;
  font-size: 0.97rem;
}
.ticks li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.27em;
  border-radius: 50%;
  background: rgba(22, 182, 216, 0.16)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f9fc4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}
.section--dark .ticks li::before {
  background-color: rgba(72, 207, 232, 0.2);
}
.ticks--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55em 1.6em;
}

/* Pill / tag list (e.g. manpower trades) */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pills li {
  margin: 0;
  padding: 8px 15px;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--navy-700);
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 999px;
}
.section--dark .pills li {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: #dbe7f3;
}

/* ---------- 9. Split (image + text) ------------------------------------- */
.split {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split--media-right .split__media {
  order: 2;
}
.split__media {
  position: relative;
}
.split__media .frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--grey-100);
}
.split__media .frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
.split--wide .split__media .frame img {
  aspect-ratio: 16 / 10;
}

/* Small stat plate that overlaps the image */
.plate {
  position: absolute;
  right: -14px;
  bottom: -18px;
  z-index: 2;
  background: var(--navy-800);
  color: var(--white);
  padding: 18px 22px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-width: 230px;
}
.plate b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cyan-400);
}
.plate span {
  display: block;
  font-size: 0.82rem;
  color: #b7c9dd;
  margin-top: 6px;
  line-height: 1.45;
}

/* Anchor targets (/transport/#worker-company etc.) clear the sticky header via
   the single `scroll-padding-top` on <html>. Adding scroll-margin-top here as
   well would stack the two offsets and drop the section far down the screen. */
.anchor {
  scroll-margin-top: 0;
}

/* ---------- 11. Gallery -------------------------------------------------- */
.gallery {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gallery figure {
  margin: 0;
}
.gallery .frame {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
}
.gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
.gallery figcaption {
  font-size: 0.85rem;
  color: var(--grey-500);
  margin-top: 10px;
  line-height: 1.5;
}

/* ---------- 12. Locations / facts --------------------------------------- */
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.facts li {
  display: grid;
  grid-template-columns: minmax(140px, 32%) 1fr;
  gap: 10px 24px;
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--grey-150);
  font-size: 0.97rem;
}
.facts dt,
.facts .k {
  font-weight: 600;
  color: var(--navy-700);
}
.facts .v {
  color: var(--grey-600);
}

/* ---------- 13. Forms ---------------------------------------------------- */
.form {
  display: grid;
  gap: 20px;
}
.field {
  display: grid;
  gap: 7px;
}
.field > label,
.fieldset > legend {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-700);
}
.field .hint {
  font-size: 0.82rem;
  color: var(--grey-500);
  line-height: 1.5;
}
.req {
  color: var(--err);
  font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-sm);
  transition:
    border-color 0.16s var(--ease),
    box-shadow 0.16s var(--ease);
}
textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352657d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
}
input:hover,
select:hover,
textarea:hover {
  border-color: var(--grey-400);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(26, 126, 196, 0.18);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--err);
}
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16);
}

.field__error {
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--err);
}
.field__error:empty {
  display: none;
}

.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.fieldset > legend {
  padding: 0;
  margin-bottom: 2px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.field-row {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form__status {
  border-radius: var(--r-md);
  padding: 18px 20px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.form__status[data-tone="info"] {
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
}
.form__status[data-tone="error"] {
  background: #fdf2f1;
  border: 1px solid #f0c8c5;
  color: #7d1d17;
}
.form__status[data-tone="success"] {
  background: #eefaf5;
  border: 1px solid #b7e5d3;
  color: #0c5f45;
}
.form__status[data-tone="pending"] {
  background: #fff8e9;
  border: 1px solid #f0dcb0;
  color: var(--warn);
}
.form__status p:last-child {
  margin-bottom: 0;
}
.form__status h3 {
  font-size: 1.05rem;
  color: inherit;
}

.summary-box {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--r-sm);
  background: var(--white);
  border: 1px solid var(--grey-200);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

/* Anti-spam honeypot: out of view and out of the accessibility tree. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 14. Contact & quotation pages ------------------------------- */
/* Both pages: every panel floats on a navy brand band that eases into the light
   page ground, so a white form never sits on a white page. Nothing in these
   sections is placed on the background itself - it is all inside cards. */
.contact-page,
.quote-page {
  background:
    radial-gradient(70% 520px at 8% 0%, rgba(26, 126, 196, 0.3), transparent 70%),
    radial-gradient(55% 460px at 96% 6%, rgba(22, 182, 216, 0.16), transparent 70%),
    linear-gradient(
      180deg,
      var(--navy-800) 0,
      var(--navy-900) 520px,
      #6f86a0 610px,
      var(--canvas) 700px
    );
}
.contact-action,
.form-panel,
.company-card {
  box-shadow: var(--shadow-float);
}
.contact-page .section-head {
  box-shadow:
    inset 0 3px 0 var(--head-rule),
    var(--shadow-float);
}
/* Contact page: action cards and the quote CTA on the left, the message form on
   the right. Tablets and phones stack them as cards, form, quote CTA. Both pages
   carry [data-no-tilt]: forms and contact cards never tilt. */
.contact-grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas:
    "cards form"
    "quote form";
  align-items: start;
}
.contact-grid__cards {
  grid-area: cards;
}
.contact-grid__form {
  grid-area: form;
}
.contact-grid__quote {
  grid-area: quote;
}
@media (max-width: 991px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cards"
      "form"
      "quote";
  }
}

.contact-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.contact-action {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .contact-action:hover {
    border-color: var(--grey-400);
    transform: translateY(-2px);
    box-shadow:
      0 2px 6px rgba(4, 14, 26, 0.12),
      0 26px 52px -20px rgba(4, 14, 26, 0.55);
  }
}
.contact-action__icon,
.quote-cta__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--navy-800);
  color: var(--cyan-400);
}
.contact-action__icon svg,
.quote-cta__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-action__label {
  margin: 0 0 3px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.contact-action__value {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy-800);
  overflow-wrap: anywhere;
}
.contact-action__value p,
.contact-action__value address {
  margin: 0;
}
.contact-action__value address {
  font-style: normal;
  font-weight: 500;
  color: var(--grey-600);
}
.contact-action__value a {
  color: inherit;
  text-decoration: none;
}
.contact-action__value a:hover {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-action__more {
  margin-top: 6px;
  font-size: 0.88rem;
}
.contact-action__btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Phone card: one row per number, each with its own small Call button. */
.phone-list {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}
.phone-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--grey-150);
}
.phone-list__row:first-child {
  padding-top: 4px;
  border-top: 0;
}
.phone-list__row:last-child {
  padding-bottom: 0;
}
.phone-list__number {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.phone-list .phone-list__call {
  flex: none;
  width: auto;
  min-height: 36px;
  padding: 6px 18px;
  font-size: 0.86rem;
}
/* The card's plain-link colour and hover underline must not reach the button. */
.phone-list .phone-list__call,
.phone-list .phone-list__call:hover {
  color: var(--white);
  text-decoration: none;
}
/* Darker on hover: the lighter shared hover blue gives this small text less
   than 4.5:1 contrast. Navy keeps it well above. */
.phone-list .phone-list__call:hover {
  background: var(--navy-700);
}
/* Touch screens and phones: a full-size touch target, still beside the number. */
@media (pointer: coarse), (max-width: 600px) {
  .phone-list .phone-list__call {
    min-height: 44px;
    padding: 10px 20px;
  }
}
/* Longer values (the office address) keep their width: button under the text. */
.contact-action--stacked {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
}
.contact-action--stacked .contact-action__btn {
  grid-column: 2;
  justify-self: start;
}
@media (max-width: 600px) {
  .contact-action {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 12px 14px;
    padding: 16px;
  }
  .contact-action__icon {
    width: 44px;
    height: 44px;
  }
  .contact-action__btn,
  .contact-action--stacked .contact-action__btn {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }
}
/* Very narrow phones: the icon sits above the text so an email address or a
   phone number never breaks mid-word. */
@media (max-width: 380px) {
  .contact-action,
  .contact-action--stacked {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Form panel shared by both pages. */
.form-panel {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-xl);
  padding: clamp(22px, 3vw, 38px);
}
.form-panel__head {
  margin-bottom: 24px;
}
.form-panel__head h2 {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
  margin-bottom: 8px;
}
.form-panel__head p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--grey-600);
}
.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.form__actions .btn {
  min-width: 220px;
}
@media (max-width: 600px) {
  .form__actions .btn {
    width: 100%;
    min-width: 0;
  }
}
.form__routes {
  margin-top: 16px;
}
.form__note {
  margin-top: 14px;
  font-size: 0.88rem;
}

.quote-cta {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px 16px;
  align-items: start;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  color: var(--white);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(22, 182, 216, 0.22), transparent 60%),
    var(--navy-800);
  box-shadow: var(--shadow-md);
}
.quote-cta__icon {
  background: rgba(255, 255, 255, 0.1);
}
.quote-cta h3 {
  margin: 4px 0 6px;
  font-size: 1.2rem;
  color: var(--white);
}
.quote-cta p {
  margin: 0;
  font-size: 0.95rem;
  color: #c2d3e5;
}
.quote-cta .btn {
  grid-column: 2;
  justify-self: start;
}
@media (max-width: 600px) {
  .quote-cta .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Request a Quote page: the form beside a compact company card, which moves
   above the form on tablets and phones. */
.quote-layout {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  grid-template-areas: "form company";
  align-items: start;
}
.quote-layout__form {
  grid-area: form;
}
.quote-layout__company {
  grid-area: company;
}
/* Desktop: the company card stays beside the long form (native sticky, no
   animation), keeping the two columns balanced. Only where the whole card fits
   under the header - a pinned card taller than the viewport would hide its own
   Get Directions button and Contact link (e.g. 1024x768, 1366x768). */
@media (min-width: 1200px) and (min-height: 820px) {
  .quote-layout__company {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
@media (max-width: 991px) {
  .quote-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "company"
      "form";
  }
}
.company-card {
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 22px);
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
}
.company-card__title {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.company-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}
.company-card__sub {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--grey-600);
}
/* Wrap only between segments, never inside "Established 2005". */
.company-card__sub span {
  white-space: nowrap;
}
.company-card__list {
  display: grid;
  gap: 14px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--grey-200);
}
.company-card__item {
  min-width: 0;
}
.company-card__item + .company-card__item {
  padding-top: 14px;
  border-top: 1px solid var(--grey-150);
}
.company-card__list dt {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.company-card__list dd {
  margin: 4px 0 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--navy-800);
  overflow-wrap: break-word;
}
.company-card__list dd a {
  color: inherit;
  text-underline-offset: 3px;
}
.company-card__list address {
  font-style: normal;
  font-weight: 500;
  color: var(--grey-600);
}
.company-card__list .phone-list__row {
  padding-block: 7px;
}
.company-card__list .phone-list__row:first-child {
  padding-top: 2px;
}
.company-card__list .phone-list__row:last-child {
  padding-bottom: 0;
}
.company-card__action {
  min-height: 36px;
  margin-top: 10px;
  padding: 6px 16px;
  font-size: 0.86rem;
}
@media (pointer: coarse), (max-width: 600px) {
  .company-card .company-card__action {
    min-height: 44px;
    padding: 10px 20px;
  }
}
.company-card__cta {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--grey-200);
  font-size: 0.9rem;
  color: var(--grey-600);
}
.company-card__cta .arrow-link {
  font-weight: 600;
}
/* Tablets: Phone beside Office, Email beside Website, so the card stays compact. */
@media (min-width: 600px) and (max-width: 991px) {
  .company-card__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "phone office"
      "email website";
    column-gap: 32px;
  }
  .company-card__item--phone {
    grid-area: phone;
  }
  .company-card__item--email {
    grid-area: email;
  }
  .company-card__item--website {
    grid-area: website;
  }
  /* Top of the right column: no divider, level with Phone. */
  .company-card__list .company-card__item--office {
    grid-area: office;
    padding-top: 0;
    border-top: 0;
  }
}

/* Quotation form sections (A, B, C) and the service-specific groups. */
.form--sections {
  gap: 30px;
}
.form-section > legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 0.8rem;
  color: var(--navy-800);
}
.form-section__key {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--navy-800);
  color: var(--white);
  font-size: 0.74rem;
  letter-spacing: 0;
}
.form-section--sub {
  padding: clamp(16px, 2vw, 22px);
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-md);
}
/* A floated legend is laid out inside the padded box instead of on its border. */
.form-section--sub > legend {
  float: left;
  width: 100%;
  margin-bottom: 0;
  color: var(--blue-600);
}

/* Success popup (native <dialog>). */
.modal {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}
.modal::backdrop {
  background: rgba(8, 25, 43, 0.64);
}
.modal[open] {
  animation: modal-in 0.22s var(--ease) both;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal__panel {
  padding: clamp(26px, 5vw, 40px);
  text-align: center;
}
.modal__icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(22, 182, 216, 0.14);
  color: var(--cyan-ink);
}
.modal__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.modal__title {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  color: var(--navy-800);
}
.modal p {
  margin: 0 0 10px;
  font-size: 0.98rem;
  color: var(--grey-600);
}
.modal__close {
  margin-top: 16px;
  min-width: 170px;
}

.notice {
  border-left: 3px solid var(--cyan-500);
  background: var(--grey-50);
  padding: 14px 18px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.9rem;
  color: var(--grey-600);
  line-height: 1.6;
}
.section--dark .notice {
  background: rgba(255, 255, 255, 0.06);
  color: #b9cade;
}

/* ---------- 15. CTA band ------------------------------------------------- */
.cta-band {
  background: var(--navy-800);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      70% 120% at 88% 10%,
      rgba(22, 182, 216, 0.26),
      transparent 60%
    ),
    radial-gradient(
      60% 110% at 4% 100%,
      rgba(26, 126, 196, 0.3),
      transparent 62%
    );
}
.cta-band > .wrap {
  position: relative;
}
.cta-band h2 {
  color: var(--white);
}
.cta-band p {
  color: #c2d3e5;
}

/* ---------- 16. Footer --------------------------------------------------- */
/* Four columns from one top line - brand, services, company, contact - with a
   single heading style, one line-height and even list spacing. Tablets show
   two columns, phones one. */
.site-footer {
  position: relative;
  background: var(--navy-900);
  color: #a9bdd2;
  font-size: 0.93rem;
  line-height: 1.6;
}
.site-footer a {
  color: #cfe0f0;
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--cyan-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* A link sitting INSIDE a run of body text cannot be distinguished by colour
   alone (WCAG 1.4.1), so inline footer links are underlined at rest. Links in
   the footer's lists are standalone and do not need this. */
.site-footer p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__grid {
  display: grid;
  align-items: start;
  gap: 44px clamp(28px, 3.2vw, 48px);
  grid-template-columns:
    minmax(0, 1.25fr) minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 1.2fr);
  padding-block: clamp(52px, 6vw, 76px) clamp(40px, 5vw, 60px);
}
.site-footer__col {
  min-width: 0;
}
.site-footer h2 {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--white);
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer li {
  margin: 0;
}
.site-footer__links {
  display: grid;
  gap: 10px;
}
.site-footer__links a {
  display: inline-block;
  line-height: 1.5;
}
.site-footer .brand {
  color: var(--white);
  margin-bottom: 18px;
}
.site-footer .brand__sub {
  color: #8ba3bd;
}
/* Logo sits on a white chip so the mark keeps its own colours on navy */
.site-footer .brand img {
  background: var(--white);
  border-radius: 10px;
  padding: 4px;
  width: 46px;
  height: 46px;
}
.site-footer p {
  color: #93a9c1;
  font-size: 0.92rem;
  line-height: 1.7;
}
.site-footer__col--brand p {
  max-width: 36ch;
}

/* Company profile download: the footer's one branded button. */
.site-footer .footer-profile {
  display: flex;
  width: 100%;
  min-height: 50px;
  margin-top: 24px;
  padding: 12px 16px;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--white);
  background: var(--blue-600);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55);
}
.site-footer .footer-profile:hover,
.site-footer .footer-profile:focus-visible {
  color: var(--white);
  text-decoration: none;
  background: #0b4f85;
  border-color: var(--cyan-400);
  box-shadow:
    0 0 0 1px var(--cyan-400),
    0 14px 28px -10px rgba(0, 0, 0, 0.6);
}
.footer-profile__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Contact: a small label over each value, one phone number per line. */
.footer-contact {
  display: grid;
  gap: 18px;
  margin: 0;
}
.footer-contact__item {
  min-width: 0;
}
.footer-contact dt {
  margin-bottom: 4px;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8ba3bd;
}
.footer-contact dd {
  margin: 0;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.footer-contact__phones {
  display: grid;
  gap: 4px;
}
.footer-contact__phones a {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.footer-contact address {
  font-style: normal;
  color: #a9bdd2;
}
.site-footer .footer-contact__note {
  margin: 16px 0 0;
}

/* Bottom row: a divider aligned with the columns, then copyright and note. */
.site-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  justify-content: space-between;
  align-items: center;
  padding-block: 22px 26px;
  font-size: 0.84rem;
  color: #7e94ad;
}
.site-footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.site-footer__bottom p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #7e94ad;
}

@media (max-width: 1199px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px clamp(28px, 5vw, 56px);
  }
  .site-footer .footer-profile {
    max-width: 320px;
  }
}
@media (max-width: 640px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .site-footer .footer-profile {
    max-width: none;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- 16b. Stacked scroll sections -------------------------------- */
/* Runs of adjacent content sections become large rounded panels that pile up
   as you scroll: the active panel pins, the next rises from below and takes
   over, and scrolling up plays the same thing in reverse.

   The stacking itself is native `position: sticky`, so it is scroll-linked by
   definition. It tracks scroll position exactly, reverses perfectly and cannot
   desync on fast scroll or momentum scrolling. JavaScript only sets each
   card's sticky offset and adds the depth cues.

   Most sections here are TALLER than the viewport, so a fixed `top` would pin
   a card with its lower half unreachable. main.js gives those cards a negative
   offset instead, so they scroll fully past before pinning. Without
   JavaScript the cards stay static rounded panels and nothing is lost. */
.stack {
  position: relative;
}
.stack__card {
  position: relative;
  margin-inline: var(--stack-inset, clamp(8px, 1.4vw, 22px));
  border: 1px solid var(--grey-200);
  border-radius: var(--r-xl);
  background-color: var(--white);
  box-shadow:
    0 -2px 10px rgba(12, 35, 64, 0.04),
    0 -18px 44px rgba(12, 35, 64, 0.07);
  transform-origin: 50% 50%;
}
.stack__card.section--grey {
  background-color: var(--tint-100);
}
/* Plain white panels: a faint brand-blue light from the top corner and a soft
   fade towards the tinted ground, so they read as layered rather than paper.
   Dark, grey and photograph panels keep their own backgrounds. */
.stack__card:not(.section--dark):not(.section--grey):not(.section-photo) {
  background-image:
    radial-gradient(55% 420px at 100% 0%, rgba(26, 126, 196, 0.07), transparent 72%),
    linear-gradient(180deg, var(--white) 55%, var(--tint-50) 100%);
}
.section--grey.stack__card {
  background-image:
    radial-gradient(50% 380px at 0% 0%, rgba(26, 126, 196, 0.06), transparent 72%),
    linear-gradient(180deg, var(--tint-50) 0%, var(--tint-100) 100%);
}
.stack__card.section--dark {
  background-color: var(--navy-800);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Depth cue on the card being covered. A dim layer rather than `opacity`, so
   the panel's own text never half-fades while it is still the active one. */
.stack__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  background: var(--navy-900);
  opacity: var(--stack-dim, 0);
  pointer-events: none;
}
.stack__card.section--dark::after {
  background: #000;
}

/* Sticky is switched on by main.js: wide screens, motion allowed. */
.stack--on .stack__card {
  position: sticky;
  top: var(--stack-top, 100px);
  will-change: transform;
  transform: translate3d(0, var(--stack-lift, 0px), 0)
    scale(var(--stack-scale, 1));
}
/* The final card has nothing to hand over to, so it never pins. */
.stack--on .stack__card:last-child {
  position: relative;
  top: auto;
}

/* The `.wrap` inside a card already provides the gutter, so trim the doubled
   inset the card margin would otherwise add on wide screens. */
@media (min-width: 1340px) {
  .stack__card > .wrap {
    padding-inline: clamp(20px, 4vw, 56px);
  }
}

/* Lighter on small screens: the panel look is kept, the pinning is not. */
@media (max-width: 899px) {
  .stack__card {
    box-shadow: var(--shadow-sm);
  }
}

/* ---------- 16c. 3D hover tilt ------------------------------------------ */
/* Shared hooks for the cards main.js tilts. Each target already composes
   --lift / --scale / --tilt-x / --tilt-y in its own transform; these rules add
   the same composition to the cards that did not have it yet. */
.svc,
.card,
.gallery .frame {
  transform: translateY(var(--lift, 0px)) scale(var(--scale, 1))
    perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    border-color 0.2s var(--ease);
}
.svc[data-tilt-active="true"],
.card[data-tilt-active="true"],
.gallery .frame[data-tilt-active="true"] {
  --lift: -5px;
  --scale: 1.012;
  box-shadow: var(--shadow-md);
}
.gallery .frame[data-tilt-active="true"] {
  box-shadow: var(--shadow-lg);
}

/* While the pointer is inside, the card has to track it closely; the long
   easing above is for the hand-back. Dropping the attribute on leave restores
   that easing, so the card glides home instead of snapping. */
/* `.reveals-ready .reveal` is two classes, and several tilt targets carry
   .reveal, so the reveal-scoped form is needed here to outrank it. */
.reveals-ready .reveal[data-tilt-active="true"],
.business-card[data-tilt-active="true"],
.section-head[data-tilt-active="true"],
.svc[data-tilt-active="true"],
.card[data-tilt-active="true"],
.gallery .frame[data-tilt-active="true"] {
  transition-duration: 0.12s;
  transition-delay: 0ms;
}

/* ---------- 17. Reveal animation ---------------------------------------- */
.reveal {
  opacity: 1;
}
.reveals-ready .reveal {
  /* transform and box-shadow are listed here too: several tilt targets (.svc,
     .card, .section-head) are also reveal elements, and without them this rule
     would replace their transition list and make the tilt snap back on leave
     instead of easing. The reveal itself animates `translate`, which composes
     with the tilt's `transform` rather than fighting it. */
  transition:
    opacity 0.7s var(--ease),
    translate 0.7s var(--ease),
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
  /* Per-property: the reveal is staggered, the tilt must never be. */
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms,
    0ms;
}
.reveals-ready .reveal:not([data-shown="true"]) {
  opacity: 0;
  translate: 0 42px;
}
/* Set by main.js for the two frames in which reveals arm. */
.reveals-arming .reveal {
  transition: none !important;
}
.reveals-ready .reveal[data-shown="true"] {
  opacity: 1;
  translate: none;
}
.reveal[data-delay="1"] {
  --reveal-delay: 100ms;
}
.reveal[data-delay="2"] {
  --reveal-delay: 200ms;
}
.reveal[data-delay="3"] {
  --reveal-delay: 300ms;
}
@media (max-width: 720px) {
  .reveals-ready .reveal {
    transition-duration: 0.6s;
    --reveal-delay: 0ms;
  }
  .reveals-ready .reveal:not([data-shown="true"]) {
    translate: 0 24px;
  }
}
.no-js .reveal {
  opacity: 1;
  translate: none;
}

/* ---------- 18. Responsive ---------------------------------------------- */
@media (max-width: 900px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .split--media-right .split__media {
    order: 0;
  }
  .plate {
    position: static;
    max-width: none;
    margin-top: -30px;
    margin-inline: 16px;
  }
  .gallery {
    grid-template-columns: 1fr 1fr;
  }
  .gallery figure:first-child {
    grid-column: span 2;
  }
}
@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
  .ticks--2 {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: min(80svh, 620px);
  }
  .hero--page {
    min-height: 400px;
  }
  .feature-band {
    min-height: 440px;
  }
  .gallery {
    grid-template-columns: 1fr;
  }
  .gallery figure:first-child {
    grid-column: auto;
  }
  .facts li {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 13px 0;
  }
  .cinema__controls {
    right: auto;
    left: var(--gutter);
    bottom: 16px;
  }
  .cinema__tag {
    position: static;
    display: inline-block;
    margin: 26px var(--gutter) 0;
  }
  .cinema--hasTag .cinema__body {
    padding-bottom: 8px;
  }
}
@media (max-width: 420px) {
  .btn {
    width: 100%;
  }
  .btn-row {
    gap: 10px;
  }
  .cinema__btn,
  .cinema__dot {
    width: auto;
  }
  .cinema__btn {
    width: auto;
  }
}

/* ---------- 19. Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .cinema__slide > img {
    animation: none !important;
    transform: none !important;
  }
  .cinema__slide {
    transition: none !important;
  }
  .btn:hover,
  .div-card:hover,
  .svc:hover {
    transform: none !important;
  }
  .div-card:hover .div-card__media img {
    transform: none !important;
  }
}

/* ---------- 20. Print ---------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .cinema__controls,
  .cinema__scrim,
  .btn,
  .skip-link {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
  .cinema {
    min-height: 0;
    color: #000;
  }
  .cinema h1,
  .cinema p {
    color: #000;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveals-ready .reveal {
    opacity: 1 !important;
    translate: none !important;
  }
  main[data-scroll-motion-ready] > section {
    transform: none !important;
    will-change: auto;
  }
  .business-card,
  .business-card__media img,
  .business-card .arrow-link::after,
  [data-parallax] .cinema__stage,
  .section-photo__background {
    transform: none !important;
    transition: none !important;
  }
  /* Stacked panels stop pinning and are simply stacked rounded sections. */
  .stack--on .stack__card {
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }
  .stack__card::after {
    opacity: 0 !important;
  }
  .svc,
  .card,
  .gallery .frame,
  .svc__media img,
  .svc__copy,
  .business-card__copy {
    transform: none !important;
  }
}

/* ---------- 21. Services dropdown (8 services) -------------------------- */
/* Desktop: two columns of names, read row by row, so Manpower Solutions stays
   the last item. The panel is only as wide as the names need. */
@media (min-width: 1001px) {
  .nav__menu--wide {
    left: 50%;
    translate: -50% 0;
    min-width: 0;
    width: max-content;
    display: grid;
    grid-template-columns: repeat(2, minmax(196px, 1fr));
    gap: 4px 6px;
  }
}

/* ---------- 22. Motion stack: home division layers ---------------------- */
/* Markup:
     [data-motion-stack] > [data-motion-section] > .motion-section__frame >
       .section-bg > img  |  .section-overlay  |  .section-content >
       .section-content__inner > .section-copy + .section-visual
   Sections stay in normal flow. Copy and photos enter once using main.js;
   motion.js adds background parallax without moving section frames. */
.motion-stack {
  position: relative;
  background: var(--navy-900);
}
.motion-stack > .hero {
  min-height: calc(100svh - var(--header-h));
}
.motion-section {
  position: relative;
  color: #dbe6f2;
}
.motion-section__frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(52px, 8vh, 96px);
  background: var(--navy-900);
}
.section-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}
/* Overscanned so the scroll parallax never exposes an edge. */
.section-bg img {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
.section-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8, 25, 43, 0.72) 0%, transparent 42%),
    linear-gradient(
      100deg,
      rgba(8, 25, 43, 0.93) 0%,
      rgba(8, 25, 43, 0.8) 44%,
      rgba(8, 25, 43, 0.38) 100%
    );
}
/* Profile-derived photos are small at source: keep them further back. */
.section-bg--soft + .section-overlay {
  background:
    linear-gradient(0deg, rgba(8, 25, 43, 0.8) 0%, transparent 50%),
    linear-gradient(
      100deg,
      rgba(8, 25, 43, 0.95) 0%,
      rgba(8, 25, 43, 0.86) 50%,
      rgba(8, 25, 43, 0.6) 100%
    );
}
.section-shade {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #030b14;
  opacity: 0;
  pointer-events: none;
}
.section-content {
  position: relative;
  z-index: 1;
}
.section-content__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.section-copy {
  max-width: 600px;
}
.motion-section h2 {
  color: var(--white);
  text-shadow: 0 2px 22px rgba(4, 14, 26, 0.5);
}
.motion-section .eyebrow {
  color: var(--cyan-400);
}
.motion-section .lede {
  color: #c9d8e8;
}
.motion-section p {
  color: #c2d2e3;
}
.motion-section .ticks {
  margin: 22px 0 28px;
}
.motion-section .ticks li {
  color: #dbe6f2;
}
.motion-section .ticks li::before {
  background-color: rgba(72, 207, 232, 0.2);
}
.motion-index {
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.section-visual__card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--navy-800);
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, 0.65);
  transform: translateY(var(--lift, 0px)) scale(var(--scale, 1))
    perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.section-visual__card[data-tilt-active="true"] {
  --lift: -4px;
  --scale: 1.015;
  transition-duration: 0.12s;
  box-shadow: 0 44px 70px -26px rgba(0, 0, 0, 0.72);
}
.section-visual__card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
.section-visual__card figcaption {
  padding: 12px 18px 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #a9bdd2;
}

/* Sticky layers - switched on by motion.js only. */
.motion-stack--sticky > [data-motion-section] {
  position: sticky;
  top: var(--sticky-top, var(--header-h));
}
.motion-stack--sticky > [data-motion-section]:last-child {
  position: relative;
  top: auto;
}
@media (min-width: 992px) {
  .motion-stack--sticky .motion-section__frame,
  .motion-stack--sticky .section-bg {
    will-change: transform;
  }
}
/* Heroes and feature bands elsewhere get overscan for their parallax. */
.motion-on .cinema .cinema__stage {
  inset: -7% 0;
}
/* Home hero: one looping background clip that never moves - no parallax
   overscan, and its poster frame never pans or zooms, whether the clip is
   loading, playing, held for reduced motion or unable to load. Text and
   buttons stay above it in .cinema__body. */
.motion-on .hero--home .cinema__stage {
  inset: 0;
}
.hero--home .cinema__slide > img,
.cinema__slide[data-has-video="true"] > img {
  animation: none;
}

@media (max-width: 991px) {
  .section-content__inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .section-visual__card img {
    aspect-ratio: 16 / 9;
  }
  .section-overlay,
  .section-bg--soft + .section-overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 25, 43, 0.45) 0%,
      rgba(8, 25, 43, 0.84) 40%,
      rgba(8, 25, 43, 0.95) 100%
    );
  }
  .motion-section__frame {
    align-items: end;
    padding-block: 44px;
  }
  /* Small-source photos would be stretched ~3x to fill a portrait screen.
     Show them as a top band near their natural resolution instead; the
     overlay gradient fades the band into the navy below. */
  .section-bg--soft img {
    top: -4%;
    height: 50%;
  }
}
/* Phones: one clear screen per division - the photograph carries the visual,
   so the inset card is dropped to keep the section readable. */
@media (max-width: 600px) {
  .section-visual {
    display: none;
  }
  .motion-section .ticks {
    margin: 16px 0 22px;
  }
}

/* ---------- 23. Garage locations ---------------------------------------- */
.garage-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.garage-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.garage-card__n {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cyan-ink);
}
.garage-card h3 {
  font-size: 1.1rem;
  margin: 0;
}
.garage-card .garage-card__area {
  font-weight: 600;
  color: var(--navy-700);
}
.garage-card .pills li {
  font-size: 0.78rem;
  padding: 5px 11px;
}
.garage-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}
.garage-card__actions .btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .section-bg img {
    top: 0;
    height: 100%;
  }
  .section-visual__card {
    transform: none !important;
  }
}

/* ---------- 24. Company-name bus reveal (header brand) ------------------ */
/* A minibus drives across "AlRrai Combined" once (motion.js). The name is
   clipped only while scripting is on and motion is allowed; if the script never
   starts, the safety animation reveals it after 2.5s. No-JS and reduced motion
   show the name as normal. The bus is absolutely positioned and moved with
   transforms, so the header layout never changes. */
.brand-reveal {
  position: relative;
  display: inline-block;
}
.brand-reveal__bus {
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.brand-reveal__bus svg {
  width: 100%;
  height: auto;
}
@media (max-width: 600px) {
  .brand-reveal__bus {
    width: 24px;
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .brand-reveal:not(.is-revealed) .brand-reveal__text {
    clip-path: inset(0 100% 0 0);
    animation: brand-reveal-safety 1ms 2.5s forwards;
  }
  .brand-reveal.is-driving .brand-reveal__text {
    animation: none;
  }
}
@keyframes brand-reveal-safety {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ---------- 25. Rounded-image design system ----------------------------- */
/* Every page (body.page-rounded, set by build_pages.py). A plain bright ground
   with generously rounded white panels floating on it. Each panel draws its own
   pale-blue shapes behind its content, so text always sits above them. One
   radius scale, one light-blue card edge and one blue-grey shadow family are
   shared by every card, box and panel. Photos sit in rounded frames. */
.page-rounded {
  --round-inset: clamp(8px, 1.4vw, 22px);
  --round-gap: clamp(8px, 1.2vw, 18px);
  /* One radius scale: small cards, medium cards, large section panels. */
  --round-panel: clamp(28px, 2.6vw, 36px);
  --round-card: clamp(24px, 2vw, 28px);
  --round-card-sm: 20px;
  --round-ground: #f3f7fb;
  /* Card edge: a thin light-blue line that strengthens on hover. */
  --edge: rgba(26, 126, 196, 0.16);
  --edge-hover: rgba(16, 99, 159, 0.36);
  /* Cards: shorter than panel shadows, in the same blue-grey tone. */
  --card-shadow:
    0 1px 2px rgba(12, 35, 64, 0.06),
    0 16px 34px -18px rgba(12, 35, 64, 0.3);
  --card-shadow-hover:
    0 2px 6px rgba(12, 35, 64, 0.08),
    0 28px 50px -22px rgba(12, 35, 64, 0.4);
  /* Floating panels: broad blue-grey layers, deep enough that white panels
     separate clearly from the bright ground, never a hard edge. */
  --float-shadow:
    0 1px 2px rgba(12, 35, 64, 0.06),
    0 14px 32px -12px rgba(12, 35, 64, 0.18),
    0 40px 80px -30px rgba(12, 35, 64, 0.32);
  --float-shadow-hover:
    0 2px 4px rgba(12, 35, 64, 0.08),
    0 20px 42px -14px rgba(12, 35, 64, 0.24),
    0 50px 92px -32px rgba(12, 35, 64, 0.38);
  /* Section decoration in pale blue, drawn inside each panel: diagonal pills
     with one round form (A), and a long rounded bar with two soft round forms
     (B). Light enough that body text over a shape keeps AA contrast. */
  --pill-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'%3E%3Cg fill='%23cfe1f3' transform='rotate(-58 600 600)'%3E%3Crect x='120' y='330' width='720' height='150' rx='75' fill-opacity='.5'/%3E%3Crect x='560' y='540' width='620' height='150' rx='75' fill-opacity='.4'/%3E%3Crect x='120' y='750' width='420' height='150' rx='75' fill-opacity='.34'/%3E%3Ccircle cx='1010' cy='880' r='92' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  --pill-orbs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'%3E%3Cg fill='%23cfe1f3'%3E%3Crect x='120' y='520' width='900' height='190' rx='95' transform='rotate(-32 570 615)' fill-opacity='.42'/%3E%3Ccircle cx='930' cy='300' r='150' fill-opacity='.34'/%3E%3Ccircle cx='300' cy='960' r='90' fill-opacity='.28'/%3E%3C/g%3E%3C/svg%3E");
  /* Which shape set a panel draws, and where; alternating panels override. */
  --panel-shape: var(--pill-pattern);
  --panel-shape-pos: right -14% top -200px;
  --pill-pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'%3E%3Cg fill='%23ffffff' transform='rotate(-58 600 600)'%3E%3Crect x='120' y='330' width='720' height='150' rx='75' fill-opacity='.06'/%3E%3Crect x='560' y='540' width='620' height='150' rx='75' fill-opacity='.05'/%3E%3Crect x='120' y='750' width='420' height='150' rx='75' fill-opacity='.04'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--round-ground);
}
/* The ground is plain and bright: a soft cool light from one corner over a
   white-to-ground gradient, on a fixed layer that never moves. The pale-blue
   shapes are drawn inside each section panel, not across the page. */
.page-rounded::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70vmax 60vmax at 100% 0%, rgba(207, 225, 243, 0.3), transparent 70%),
    /* Ends on the ground colour, so no seam shows if the fixed layer ever
       falls short of the viewport (mobile toolbar resize). */
    linear-gradient(180deg, var(--white) 0%, var(--round-ground) 100%);
}

/* Heroes, feature bands, CTA bands and lone dark sections: inset rounded
   panels floating on the ground, matching the stacked content panels. */
.page-rounded .hero--page,
.page-rounded .hero--home,
.page-rounded .feature-band,
.page-rounded .cta-band,
.page-rounded main > .section--dark {
  margin: var(--round-gap) var(--round-inset) 0;
  border-radius: var(--round-panel);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--float-shadow);
}
.page-rounded .feature-band,
.page-rounded .cta-band {
  margin-bottom: var(--round-gap);
}
.page-rounded main > .cta-band:last-child,
.page-rounded .motion-stack > .cta-band:last-child {
  margin-bottom: clamp(16px, 2vw, 28px);
}
.page-rounded .stack {
  margin-top: var(--round-gap);
}
/* CTA bands: each page's one brand-blue panel, brighter than the old navy. */
.page-rounded .cta-band {
  background: linear-gradient(135deg, var(--blue-600) 0%, #0e4f86 55%, var(--navy-700) 100%);
}
.page-rounded .cta-band::before {
  background:
    var(--pill-pattern-light) right -8% center / clamp(520px, 60vw, 980px) auto no-repeat,
    radial-gradient(70% 120% at 88% 10%, rgba(22, 182, 216, 0.24), transparent 60%),
    radial-gradient(60% 110% at 4% 100%, rgba(72, 207, 232, 0.14), transparent 62%);
}
/* On the blue band, a white call to action keeps its shape and contrast. */
.page-rounded .cta-band .btn--accent {
  background: var(--white);
  color: var(--navy-800);
  border-color: transparent;
  box-shadow: 0 10px 24px -8px rgba(4, 14, 26, 0.4);
}
.page-rounded .cta-band .btn--accent:hover {
  background: var(--tint-50);
  color: var(--blue-600);
  box-shadow: 0 14px 30px -8px rgba(4, 14, 26, 0.46);
}

/* Stacked content panels: bright white surfaces with a faint blue light in one
   corner. The pale-blue pills stay on the ground, so each panel reads clearly
   against it. */
.page-rounded .stack__card {
  border-radius: var(--round-panel);
  border-color: var(--edge);
  box-shadow:
    0 -10px 30px -18px rgba(12, 35, 64, 0.16),
    var(--float-shadow);
}
/* Real ground between panels, so each one reads as a separate surface. */
.page-rounded .stack__card + .stack__card {
  margin-top: var(--round-gap);
}
.page-rounded .stack__card:not(.section--dark):not(.section-photo),
.page-rounded .motion-section__frame,
.page-rounded main > section.section:not(.cta-band):not(.contact-page):not(.quote-page) {
  background-repeat: no-repeat;
  background-position: var(--panel-shape-pos), 0 0, 0 0;
  background-size: clamp(560px, 62vw, 1040px) auto, auto, auto;
}
/* Alternate panels draw the second shape set from the lower corner. Both sets
   stay on the right, away from the left-aligned headings and copy. */
.page-rounded .stack__card:nth-child(even),
.page-rounded .motion-section:nth-of-type(odd) .motion-section__frame {
  --panel-shape: var(--pill-orbs);
  --panel-shape-pos: right -10% bottom -300px;
}
.page-rounded .stack__card:not(.section--dark):not(.section--grey):not(.section-photo),
.page-rounded .motion-section__frame,
.page-rounded main > section.section:not(.cta-band):not(.contact-page):not(.quote-page) {
  background-image:
    var(--panel-shape),
    radial-gradient(60% 460px at 100% 0%, rgba(26, 126, 196, 0.06), transparent 72%),
    linear-gradient(180deg, var(--white) 55%, #f9fbfe 100%);
}
/* Tinted panels: off-white with a cool blue cast, never a flat grey. */
.page-rounded .section--grey.stack__card,
.page-rounded .motion-section:nth-of-type(odd) .motion-section__frame {
  background-color: #f7fafe;
  background-image:
    var(--panel-shape),
    radial-gradient(55% 420px at 0% 100%, rgba(26, 126, 196, 0.07), transparent 72%),
    linear-gradient(180deg, #fcfdff 0%, #f1f6fc 100%);
}
/* The covered panel dims towards a pale blue-grey rather than navy, so a stack
   never turns grey or dark while it scrolls. */
.page-rounded .stack__card::after {
  background: #a9bdd4;
}
.page-rounded .section--dark {
  background-image:
    var(--pill-pattern-light),
    radial-gradient(110% 80% at 12% 0%, rgba(26, 126, 196, 0.28), transparent 62%),
    radial-gradient(90% 70% at 92% 100%, rgba(22, 182, 216, 0.16), transparent 60%);
  background-repeat: no-repeat;
  background-position: right -12% top -120px, 0 0, 0 0;
  background-size: clamp(620px, 68vw, 1100px) auto, auto, auto;
}

/* Section headings: a soft frosted plaque instead of a ruled box. */
.page-rounded .section-head {
  --head-rule: transparent;
  border-color: rgba(12, 35, 64, 0.08);
  border-radius: var(--round-card);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 35%, rgba(243, 247, 251, 0.92) 100%);
  box-shadow:
    0 1px 2px rgba(12, 35, 64, 0.05),
    0 16px 36px -20px rgba(12, 35, 64, 0.26);
}
.page-rounded .section-head[data-tilt-active="true"] {
  box-shadow: var(--float-shadow);
}
.page-rounded .section--dark .section-head {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

/* Split photographs: a stadium frame with a pale pill echoing it behind. */
.page-rounded .split__media {
  isolation: isolate;
}
.page-rounded .split__media::before {
  content: "";
  position: absolute;
  top: 16%;
  bottom: -9%;
  left: 9%;
  right: 3%;
  z-index: -1;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(16, 99, 159, 0.1), rgba(22, 182, 216, 0.08));
}
.page-rounded .split__media .frame {
  border-radius: 999px;
  border: 6px solid var(--white);
  box-shadow:
    0 2px 6px rgba(12, 35, 64, 0.06),
    0 30px 60px -28px rgba(12, 35, 64, 0.42);
}
.page-rounded .split__media .frame img {
  aspect-ratio: 16 / 10;
}

/* Gallery: stadium photographs. The rounding sits on the image, not the frame,
   so the frame keeps its rectangular box and the hover tilt still starts when
   the pointer enters a corner. */
.page-rounded .gallery .frame {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}
.page-rounded .gallery .frame img {
  border-radius: 999px;
  border: 5px solid var(--white);
  background: var(--grey-100);
  box-shadow:
    0 1px 3px rgba(12, 35, 64, 0.06),
    0 22px 44px -24px rgba(12, 35, 64, 0.38);
}
.page-rounded .gallery .frame[data-tilt-active="true"] {
  box-shadow: none;
}
.page-rounded .gallery figcaption {
  padding-inline: 14px;
}
/* Three across: the middle photograph is an asymmetric rounded rectangle set
   a little lower, so the row reads as composed rather than repeated. */
@media (min-width: 901px) {
  .page-rounded .gallery figure:nth-child(3n + 2) {
    margin-top: 28px;
  }
  .page-rounded .gallery figure:nth-child(3n + 2) .frame img {
    border-radius: 120px 28px 120px 28px;
  }
}

/* Unified card system: every card, box and panel shares the radius scale, a
   thin light-blue edge and a blue-grey shadow. On hover the edge strengthens
   and the shadow deepens; the lift, slight scale and tilt come from initTilt()
   in main.js (mouse only, motion allowed). Scroll reveals move `translate`
   and hover moves `transform`, so the two never fight. */
.page-rounded .svc,
.page-rounded .business-card {
  border-radius: var(--round-card);
  box-shadow:
    0 0 0 1px rgba(72, 207, 232, 0.18),
    0 18px 38px -20px rgba(8, 25, 43, 0.5);
}
.page-rounded .svc__icon {
  border-radius: 50%;
}
.page-rounded .card,
.page-rounded .contact-action {
  border-radius: var(--round-card-sm);
}
.page-rounded .card,
.page-rounded .section-head,
.page-rounded .contact-action,
.page-rounded .form-panel,
.page-rounded .company-card {
  border-color: var(--edge);
  box-shadow: var(--card-shadow);
}
.page-rounded .section--dark .card {
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .page-rounded .card:hover,
  .page-rounded .section-head[data-tilt-active="true"],
  .page-rounded .contact-action:hover {
    border-color: var(--edge-hover);
    box-shadow: var(--card-shadow-hover);
  }
  .page-rounded .section--dark .card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
  }
  .page-rounded .svc:hover,
  .page-rounded .business-card:hover {
    box-shadow:
      0 0 0 1px rgba(72, 207, 232, 0.45),
      0 28px 50px -22px rgba(8, 25, 43, 0.6);
  }
}
.page-rounded .notice {
  border-radius: 6px 18px 18px 6px;
  background: rgba(255, 255, 255, 0.72);
}
.page-rounded .section--dark .notice {
  background: rgba(255, 255, 255, 0.06);
}

/* Contact and quotation: the panels sit straight on the light pill ground. */
/* Contact and quotation: the cards and form are the panels, so the section
   itself draws the pale-blue shapes behind them. */
.page-rounded .contact-page,
.page-rounded .quote-page {
  background:
    var(--pill-pattern) right -10% top 40px / clamp(560px, 62vw, 1040px) auto no-repeat,
    var(--pill-orbs) left -14% bottom -120px / clamp(520px, 56vw, 940px) auto no-repeat;
}
.page-rounded .quote-cta,
.page-rounded .company-card {
  border-radius: var(--round-card);
}
.page-rounded .contact-action__icon,
.page-rounded .quote-cta__icon {
  border-radius: 50%;
}
/* The form is a large panel: panel radius and panel shadow. */
.page-rounded .form-panel {
  border-radius: var(--round-panel);
  box-shadow: var(--float-shadow);
}
.page-rounded .company-card {
  background: var(--white);
}
.page-rounded .quote-cta {
  background:
    var(--pill-pattern-light) right -40% center / 150% auto no-repeat,
    radial-gradient(90% 120% at 100% 0%, rgba(22, 182, 216, 0.24), transparent 60%),
    linear-gradient(135deg, var(--blue-600) 0%, #0e4f86 55%, var(--navy-700) 100%);
  /* A faint cyan edge, like the image cards. */
  box-shadow:
    0 0 0 1px rgba(72, 207, 232, 0.22),
    var(--card-shadow);
}
.page-rounded .quote-cta .btn {
  background: var(--white);
  color: var(--navy-800);
  border-color: transparent;
  box-shadow: 0 10px 24px -8px rgba(4, 14, 26, 0.4);
}
.page-rounded .quote-cta .btn:hover {
  background: var(--tint-50);
  color: var(--blue-600);
}
.page-rounded .form-section--sub {
  border-radius: 20px;
}
.page-rounded .form-section__key {
  border-radius: 50%;
}
.page-rounded input[type="text"],
.page-rounded input[type="email"],
.page-rounded input[type="tel"],
.page-rounded input[type="number"],
.page-rounded input[type="date"],
.page-rounded select {
  border-radius: 14px;
}
.page-rounded textarea {
  border-radius: 18px;
}
.page-rounded .modal {
  border-radius: var(--round-panel);
}

/* Home: the division sections are white floating panels like every other
   page's content. Each photograph sits in its own rounded card beside the copy;
   there is no full-bleed photographic background behind the text. */
.page-rounded .motion-stack {
  background: transparent;
}
.page-rounded .motion-stack > .hero {
  min-height: calc(100svh - var(--header-h) - var(--round-gap) * 2);
}
.page-rounded .motion-section {
  color: var(--ink);
}
.page-rounded .motion-section__frame {
  min-height: 0;
  margin: var(--round-gap) var(--round-inset) 0;
  padding-block: clamp(56px, 7vw, 104px) clamp(68px, 8vw, 104px);
  border: 1px solid var(--edge);
  border-radius: var(--round-panel);
  background-color: var(--white);
  box-shadow: var(--float-shadow);
}
.page-rounded .motion-section h2 {
  color: var(--navy-800);
  text-shadow: none;
}
.page-rounded .motion-section .eyebrow {
  color: var(--blue-600);
}
.page-rounded .motion-section p {
  color: var(--grey-600);
}
.page-rounded .motion-section .ticks li {
  color: var(--ink);
}
.page-rounded .motion-section .ticks li::before {
  background-color: rgba(22, 182, 216, 0.16);
}
.page-rounded .motion-index {
  color: var(--navy-800);
}
.page-rounded .motion-section .btn--accent {
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(16, 99, 159, 0.28);
}
.page-rounded .motion-section .btn--accent:hover {
  box-shadow: 0 12px 26px rgba(12, 35, 64, 0.32);
}
/* Photo cards: a white frame, rounded image and a soft, broad shadow. */
.page-rounded .section-visual__card {
  padding: 6px;
  border: 1px solid var(--edge);
  border-radius: var(--round-card);
  background: var(--white);
  box-shadow:
    0 2px 6px rgba(12, 35, 64, 0.06),
    0 30px 60px -28px rgba(12, 35, 64, 0.42);
}
.page-rounded .section-visual__card[data-tilt-active="true"] {
  box-shadow: var(--float-shadow-hover);
}
.page-rounded .section-visual__card img {
  border-radius: calc(var(--round-card) - 7px);
}
.page-rounded .section-visual__card figcaption {
  padding: 12px 12px 8px;
  color: var(--grey-500);
}
/* Phones keep the photo card: with no photographic background it is the
   section's only image. */
@media (max-width: 600px) {
  .page-rounded .section-visual {
    display: block;
  }
  .page-rounded .section-visual__card {
    padding: 4px;
  }
}

/* Tablets and phones: panels still float, with a shorter shadow so stacked
   panels never smear into one another. */
@media (max-width: 899px) {
  .page-rounded .stack__card,
  .page-rounded .motion-section__frame,
  .page-rounded .hero--home,
  .page-rounded .hero--page,
  .page-rounded .feature-band,
  .page-rounded .cta-band,
  .page-rounded main > .section--dark {
    box-shadow:
      0 1px 2px rgba(12, 35, 64, 0.05),
      0 14px 30px -18px rgba(12, 35, 64, 0.24);
  }
}
@media (max-width: 720px) {
  .page-rounded .split__media .frame {
    border-width: 4px;
  }
  .page-rounded .split__media::before {
    bottom: -6%;
  }
}

/* Homepage entrances: short rises, independent of scroll and cursor transforms.
   Existing reveal handling shows focused content and honours reduced motion. */
.reveals-ready .motion-section .reveal {
  transition-duration: 0.65s, 0.65s, 0.45s, 0.45s;
}
.reveals-ready .motion-section .reveal:not([data-shown="true"]) {
  translate: 0 28px;
}
.motion-section .section-visual__card.reveal {
  --reveal-delay: 90ms;
}
@media (max-width: 991px) {
  .reveals-ready .motion-section .reveal {
    transition-duration: 0.5s;
    --reveal-delay: 0ms;
  }
  .reveals-ready .motion-section .reveal:not([data-shown="true"]) {
    translate: 0 16px;
  }
}

/* ---------- 26. Section panels & section motion --------------------------- */
/* Lone content sections (not part of a stack) float as panels too. */
.page-rounded main > section.section:not(.cta-band):not(.contact-page):not(.quote-page) {
  margin: var(--round-gap) var(--round-inset);
  border: 1px solid var(--edge);
  border-radius: var(--round-panel);
  background-color: var(--white);
  box-shadow: var(--float-shadow);
}
@media (max-width: 899px) {
  .page-rounded main > section.section:not(.cta-band):not(.contact-page):not(.quote-page) {
    box-shadow:
      0 1px 2px rgba(12, 35, 64, 0.05),
      0 14px 30px -18px rgba(12, 35, 64, 0.24);
  }
}
/* Contact cards lift under a mouse only when motion is allowed. */
@media (prefers-reduced-motion: reduce) {
  .page-rounded .contact-action:hover {
    transform: none;
  }
}

/* Home: every division panel enters on its own as it reaches the viewport -
   a fade and a short rise (alternate panels also settle from 98.5% scale) -
   and its copy follows line by line: label, heading, paragraph, list, CTA.
   All of it is the one-time reveal from main.js (IntersectionObserver), so it
   never runs with reduced motion or without JavaScript, and it moves only
   `translate`/`scale`/`opacity`: the scroll drift on .section-visual and the
   hover tilt on the photo card use `transform` on other elements. */
.reveals-ready .motion-section__frame.reveal {
  transition:
    opacity 0.8s var(--ease),
    translate 0.8s var(--ease),
    scale 0.8s var(--ease);
}
.reveals-ready .motion-section__frame.reveal:not([data-shown="true"]) {
  translate: 0 36px;
}
.reveals-ready .motion-section:nth-of-type(odd) .motion-section__frame.reveal:not([data-shown="true"]) {
  scale: 0.985;
}
.reveals-ready .motion-section .section-copy > * {
  transition:
    opacity 0.6s var(--ease),
    translate 0.6s var(--ease);
}
.reveals-ready .motion-section .section-copy:not([data-shown="true"]) > * {
  opacity: 0;
  translate: 0 18px;
}
.reveals-ready .motion-section .section-copy > :nth-child(2) {
  transition-delay: 80ms;
}
.reveals-ready .motion-section .section-copy > :nth-child(3) {
  transition-delay: 160ms;
}
.reveals-ready .motion-section .section-copy > :nth-child(4) {
  transition-delay: 240ms;
}
.reveals-ready .motion-section .section-copy > :nth-child(5) {
  transition-delay: 320ms;
}
.reveals-arming .motion-section .section-copy > * {
  transition: none !important;
}

/* Home photos: three entrance styles spread across the divisions, so no two
   neighbours enter the same way. The card fades and scales in, slides in from
   the right, or rises while the photograph unveils inside its frame; in every
   case the photograph settles from a slight zoom. */
.reveals-ready .motion-section .section-visual__card.reveal {
  transition:
    opacity 0.8s var(--ease),
    translate 0.8s var(--ease),
    scale 0.8s var(--ease),
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
  transition-delay:
    var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms),
    0ms, 0ms;
}
.reveals-ready .motion-section .section-visual__card.reveal[data-tilt-active="true"] {
  transition-duration: 0.12s;
  transition-delay: 0ms;
}
.reveals-ready .motion-section:is([data-variant="about"], [data-variant="fleet"], [data-variant="hvac"]) .section-visual__card.reveal:not([data-shown="true"]) {
  translate: none;
  scale: 0.94;
}
.reveals-ready .motion-section:is([data-variant="mechanical"], [data-variant="transport"], [data-variant="manpower"]) .section-visual__card.reveal:not([data-shown="true"]) {
  translate: 44px 0;
}
.reveals-ready .motion-section .section-visual__card img {
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.95s var(--ease),
    scale 1.1s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0ms) + 80ms);
}
.reveals-ready .motion-section .section-visual__card:not([data-shown="true"]) img {
  scale: 1.08;
}
.reveals-ready .motion-section:is([data-variant="automotive"], [data-variant="school"]) .section-visual__card:not([data-shown="true"]) img {
  clip-path: inset(0 0 0 100%);
}
.reveals-ready .motion-section[data-variant="spare-parts"] .section-visual__card:not([data-shown="true"]) img {
  clip-path: inset(100% 0 0 0);
}

/* Tablets and phones: the same choreography over shorter distances. */
@media (max-width: 991px) {
  .reveals-ready .motion-section__frame.reveal {
    transition-duration: 0.55s;
  }
  .reveals-ready .motion-section__frame.reveal:not([data-shown="true"]) {
    translate: 0 18px;
  }
  .reveals-ready .motion-section .section-copy > * {
    transition-duration: 0.45s;
  }
  .reveals-ready .motion-section .section-copy:not([data-shown="true"]) > * {
    translate: 0 10px;
  }
  .reveals-ready .motion-section:is([data-variant="about"], [data-variant="fleet"], [data-variant="hvac"]) .section-visual__card.reveal:not([data-shown="true"]) {
    scale: 0.97;
  }
  .reveals-ready .motion-section:is([data-variant="mechanical"], [data-variant="transport"], [data-variant="manpower"]) .section-visual__card.reveal:not([data-shown="true"]) {
    translate: 20px 0;
  }
  .reveals-ready .motion-section .section-visual__card:not([data-shown="true"]) img {
    scale: 1.04;
  }
}

/* Inner pages: split photographs slide in from their own side and gallery
   photographs scale in; headings, cards and lists keep the rise, staggered
   by grid row. Each section's items reveal independently. */
.reveals-ready .split__media.reveal:not([data-shown="true"]) {
  translate: -40px 0;
}
.reveals-ready .split--media-right .split__media.reveal:not([data-shown="true"]) {
  translate: 40px 0;
}
.reveals-ready .gallery figure.reveal {
  transition:
    opacity 0.7s var(--ease),
    scale 0.8s var(--ease),
    translate 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveals-ready .gallery figure.reveal:not([data-shown="true"]) {
  translate: none;
  scale: 0.95;
}
@media (max-width: 720px) {
  .reveals-ready .split__media.reveal:not([data-shown="true"]),
  .reveals-ready .split--media-right .split__media.reveal:not([data-shown="true"]) {
    translate: 0 24px;
  }
}

/* ---------- 27. Photo cards (School Transportation approach) ------------- */
/* A clean photograph with its title and description on a white area below:
   no overlay, number, icon or link. The grid is .grid--3 (3 / 2 / 1 columns).
   The scroll entrance is the shared reveal (`translate`); the hover lift, a
   very small lean and a soft image drift come from initTilt() in main.js
   (`transform`), for a mouse only and never with reduced motion. */
.photo-grid {
  gap: clamp(20px, 2.4vw, 32px);
}
.photo-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(26, 126, 196, 0.2);
  border-radius: 30px;
  background: var(--white);
  box-shadow:
    0 2px 4px rgba(12, 35, 64, 0.06),
    0 24px 48px -22px rgba(12, 35, 64, 0.36);
  transform: translateY(var(--lift, 0px)) scale(var(--scale, 1))
    perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    border-color 0.2s var(--ease);
}
.photo-card__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 362 / 272;
  background: var(--grey-100);
}
.photo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A slight overscan so the pointer drift never shows an edge. */
  transform: translate3d(calc(var(--px, 0) * 4px), 0, 0) scale(var(--img-scale, 1.02));
  transition: transform 0.65s var(--ease);
}
.photo-card__body {
  flex: 1;
  padding: clamp(20px, 2vw, 26px) clamp(22px, 2.2vw, 28px) clamp(24px, 2.4vw, 30px);
}
.photo-card h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: var(--navy-800);
}
.photo-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--grey-600);
}
.photo-card[data-tilt-active="true"] {
  --lift: -6px;
  --scale: 1.01;
  --img-scale: 1.05;
  border-color: rgba(16, 99, 159, 0.38);
  box-shadow:
    0 4px 10px rgba(12, 35, 64, 0.08),
    0 34px 60px -24px rgba(12, 35, 64, 0.44);
}
/* Portrait photographs (Mechanical Services) keep their own 2:3 shape, so
   nothing in the frame is cropped. */
.photo-card--portrait .photo-card__media {
  aspect-ratio: 256 / 384;
}
/* Level cards: hover lifts the card and deepens its shadow, with a gentle
   photo zoom - no lean (maxTilt 0 in main.js) and no cursor drift. */
.photo-card--level .photo-card__media img {
  transform: scale(var(--img-scale, 1.02));
}
/* Blue cards (Spare Parts as .photo-card--parts, Automotive as
   .photo-card--blue): the same card with a stronger blue shadow, a bluer edge
   and a slightly larger radius, so each card separates clearly from the tinted
   panel. Hover deepens the blue shadow; the lift comes from the shared
   [data-tilt-active] rule (mouse only, never reduced motion). */
.photo-card--parts,
.photo-card--blue {
  border-color: rgba(26, 126, 196, 0.3);
  border-radius: 34px;
  box-shadow:
    0 2px 6px rgba(16, 99, 159, 0.1),
    0 28px 54px -22px rgba(16, 99, 159, 0.42);
}
.photo-card--parts[data-tilt-active="true"],
.photo-card--blue[data-tilt-active="true"] {
  border-color: rgba(16, 99, 159, 0.5);
  box-shadow:
    0 6px 14px rgba(16, 99, 159, 0.14),
    0 40px 70px -26px rgba(16, 99, 159, 0.55);
}
@media (max-width: 720px) {
  .photo-card.photo-card--parts,
  .photo-card.photo-card--blue {
    border-radius: 30px;
  }
}
@media (max-width: 720px) {
  .photo-card {
    border-radius: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .photo-card,
  .photo-card__media img {
    transform: none !important;
  }
}