/* =========================================================================
   Precision M&E — site stylesheet
   1. Tokens      2. Base      3. Layout      4. Header/Nav      5. Hero
   6. Marquee gallery  7. Cards/sections  8. Forms  9. Footer  10. Utilities
   ========================================================================= */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --ink-950: #0b1317;
  --ink-900: #101c23;
  --ink-800: #16242d;
  --ink-700: #1e3441;
  --ink-600: #2b4756;

  --paper: #ffffff;
  --paper-alt: #f4f6f7;
  --paper-line: #e2e7ea;

  --steel-100: #eef1f3;
  --steel-300: #c3ccd2;
  --steel-500: #7d8d97;
  --steel-600: #5b6b75;

  --accent: #de8b2c;
  --accent-dark: #b96d1b;
  --accent-soft: rgba(222, 139, 44, 0.12);

  --text: #16242d;
  --text-muted: #5b6b75;
  --text-invert: #ffffff;
  --text-invert-muted: #a8b7c0;

  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Chakra Petch", var(--font-body);

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.75rem);
  --step-4: clamp(2.1rem, 1.55rem + 2.2vw, 3.5rem);

  --container: 1220px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.75rem, 7vw, 6.75rem);

  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 28, 35, 0.06), 0 6px 18px rgba(16, 28, 35, 0.06);
  --shadow-md: 0 10px 34px rgba(16, 28, 35, 0.13);
  --shadow-lg: 0 24px 60px rgba(11, 19, 23, 0.28);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --header-h: 76px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

img, svg { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* 3. Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt { background: var(--paper-alt); }
.section--dark { background: var(--ink-900); color: var(--text-invert-muted); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-muted); font-size: var(--step-1); line-height: 1.55; }
.section--dark .section-head p { color: var(--text-invert-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-family: var(--font-brand);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
}
.section--dark .eyebrow { color: var(--accent); }
.section-head--center .eyebrow::before { display: none; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;      /* headings line up across both columns */
  grid-template-columns: 1fr;
}
.split--middle { align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split--wide-left { grid-template-columns: 1fr; }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: 1.15fr 0.85fr; } }

/* Buttons */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
    border-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.btn svg { width: 1em; height: 1em; flex: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-900); border-color: var(--ink-700); }
.btn--ghost:hover { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--ink-900); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: var(--step-0); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-dark);
}
.link-arrow::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }
.section--dark .link-arrow { color: var(--accent); }

/* 4. Header / navigation ------------------------------------------------ */
.topbar {
  background: var(--ink-950);
  color: var(--text-invert-muted);
  font-size: var(--step--1);
}
.topbar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 1.75rem;
  min-height: 42px;
}
.topbar a { color: var(--text-invert-muted); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.topbar-item svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.topbar-note { margin-right: auto; display: none; }
@media (min-width: 780px) { .topbar-note { display: inline-flex; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-line);
  transition: box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* Logo lockup: supplied artwork, laid out horizontally for the header bar. */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand__mark { height: 44px; width: auto; flex: none; }
.brand__wordmark { height: 29px; width: auto; flex: none; }
.brand:hover { opacity: 0.82; }
@media (max-width: 420px) {
  .brand__mark { height: 38px; }
  .brand__wordmark { height: 25px; }
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink-800);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1000px) { .nav-toggle { display: none; } }

.main-nav {
  position: fixed;
  visibility: hidden;          /* keeps the off-canvas panel out of the tab order */
  inset: 0 0 0 auto;
  width: min(88vw, 360px);
  padding: 6rem 2rem 2rem;
  background: var(--ink-900);
  transform: translateX(100%);
  transition: transform 0.32s var(--ease);
  overflow-y: auto;
  z-index: 110;
}
.main-nav.is-open { transform: translateX(0); visibility: visible; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.main-nav a {
  display: block;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: var(--step-1);
  font-weight: 500;
  text-decoration: none;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--accent); }
.main-nav .btn { margin-top: 1.5rem; width: 100%; }
.nav-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  /* Must sit below .site-header: the header's z-index creates a stacking
     context, so the nav panel inside it cannot escape above a higher backdrop. */
  z-index: 90;
  background: rgba(11, 19, 23, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }

@media (min-width: 1000px) {
  .main-nav {
    position: static;
    visibility: visible;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.1rem);
    width: auto;
    padding: 0;
    background: none;
    transform: none;
    overflow: visible;
  }
  .main-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
  .main-nav a {
    padding: 0.4rem 0;
    border: 0;
    color: var(--ink-800);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: relative;
  }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.22s var(--ease);
  }
  .main-nav a:hover::after, .main-nav a[aria-current="page"]::after { width: 100%; }
  .main-nav a[aria-current="page"] { color: var(--ink-900); }
  .main-nav .btn { margin: 0 0 0 0.75rem; width: auto; }
  .nav-close, .nav-backdrop { display: none; }
}

/* 5. Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 70% 20%, #000 25%, transparent 78%);
  z-index: -2;
}

.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  /* Asymmetric: generous below the header, much less at the bottom — the
     "At a glance" strip immediately follows with its own top padding, and
     the two stacking at full size left a ~180px dead gap between the
     gallery card and the stats. */
  padding-top: clamp(3.5rem, 9vw, 7.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 980px) {
  /* minmax(0, ...) not bare Nfr: without it, a track's default min-width:auto
     lets oversized content (the marquee's flex row of tiles, wider than its
     column) force the track to grow rather than clip — which squeezed the
     text column into a sliver and let the gallery blow out past its border. */
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
}
.hero h1 { color: #fff; max-width: 19ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lead {
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-invert-muted);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.55rem; }
.hero__meta span::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}

.hero__panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(4px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__panel h2 {
  color: #fff;
  font-size: var(--step-1);
  margin-bottom: 1.25rem;
}
.hero__stats {
  display: grid;
  /* Was a fixed 3 columns; now flexes to however many stats there actually
     are (currently 2) rather than leaving a gap where a removed one was. */
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.stat__num {
  font-family: var(--font-brand);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.stat__num .suffix { color: var(--accent); }
/* A qualitative stat (no digit to count up) uses an icon in the same slot
   instead, kept to the same visual weight as the numeric ones beside it. */
.stat__num--icon {
  display: flex;
  align-items: center;
  height: 1em;
  color: var(--accent);
}
.stat__num--icon svg { width: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); height: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); }
.stat__label {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
}

.facts { margin: 0; display: grid; gap: 0.15rem 1.25rem; }
.facts dt {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.facts dd {
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}
.facts dd:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* Horizontal variant: the facts list read left-to-right in a full-width bar
   (the "At a glance" strip) rather than stacked in the narrow hero card. */
.facts--row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
}
.facts--row dt { margin-right: 0.5rem; }
.facts--row dt,
.facts--row dd {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
}
.facts--row dd { color: var(--text-invert-muted); }
.facts--row > div { white-space: nowrap; }

/* "Our work" panel in the hero's right column: the moving gallery, scaled
   down to sit in a half-width column instead of spanning full-bleed. */
.hero__gallery {
  container-type: inline-size;
  min-width: 0;   /* belt-and-braces alongside the grid-track fix above */
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.4vw, 1.75rem) 1.25rem;
}
.hero__gallery-head { margin-bottom: 1.1rem; }
.hero__gallery-head .eyebrow { margin-bottom: 0.35rem; }
.hero__gallery-head h2 { color: #fff; font-size: var(--step-1); margin: 0; }
.hero__gallery .marquee + .marquee { margin-top: 0.6rem; }
/* Tiles size to the column itself (container query units), not the
   viewport — the default .tile clamp is tuned for a full-width strip and
   would barely fit two tiles across a half-width column. */
.hero__gallery .tile { width: clamp(120px, 46cqw, 210px); }
.hero__gallery .marquee-controls { margin-top: 1rem; }

/* "At a glance" strip: a slim full-width bar below the hero, replacing the
   card the stats used to sit in when they were part of the hero panel.
   Two stacked rows (stats, then facts) rather than one flex-wrap row —
   forcing everything onto one line left a dangling divider with nothing
   beside it whenever the facts group ran out of room and wrapped under it. */
.glance__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* Sits directly under the hero, which already has its own (now trimmed)
   bottom padding — a full .section--tight top padding on top of that would
   still leave too big a gap, so it's cut further just for this strip. */
.glance { padding-top: clamp(1rem, 2.5vw, 1.75rem); }

.glance .hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 0;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.glance__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
}
.glance__facts .facts { flex: 1 1 auto; min-width: 220px; }

/* A distinct block, set apart from the Services/Sectors list rather than
   listed alongside them — a thin divider on either side does the separating
   instead of relying on the surrounding gap alone. */
.glance__cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: none;
  padding-inline: 2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.glance__cover-label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.glance__cover-value {
  margin-top: 0.3rem;
  color: #fff;
  font-weight: 600;
}

.glance__facts .link-arrow { flex: none; margin-left: auto; }
@media (max-width: 640px) {
  .glance__facts .link-arrow { margin-left: 0; }
  .glance__cover {
    padding-inline: 0;
    padding-block: 1rem;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    width: 100%;
  }
}

.page-hero {
  position: relative;
  background: var(--ink-900);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(100% 80% at 80% 10%, #000, transparent 75%);
}
.page-hero .container { position: relative; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero p { max-width: 60ch; color: var(--text-invert-muted); font-size: var(--step-1); }

.breadcrumb {
  margin-bottom: 1.25rem;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
}
.breadcrumb a { color: var(--text-invert-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin-inline: 0.5rem; color: rgba(255, 255, 255, 0.35); }

/* 6. Moving gallery ----------------------------------------------------- */
.gallery { position: relative; overflow: hidden; }
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.gallery__head .section-head { margin-bottom: 0; }

.marquee {
  --speed: 62s;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee + .marquee { margin-top: clamp(0.75rem, 1.6vw, 1.25rem); }
.marquee__track {
  display: flex;
  flex: none;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  padding-right: clamp(0.75rem, 1.6vw, 1.25rem);
  min-width: 100%;
  animation: marquee var(--speed) linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }

.tile {
  position: relative;
  flex: none;
  width: clamp(230px, 30vw, 400px);
  /* Most site photography arrives portrait (phone shots), so the marquee
     tiles are portrait-biased rather than a landscape 3:2 that would crop
     the top off boards and cylinders in most of the real photos. */
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-800);
  cursor: pointer;
  color: #fff;
  text-align: left;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s var(--ease), opacity 0.3s var(--ease);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 19, 23, 0.88) 0%, rgba(11, 19, 23, 0.1) 52%);
  opacity: 0.9;
  transition: opacity 0.3s var(--ease);
}
.tile:hover img { transform: scale(1.03); }
.tile:hover::after { opacity: 1; }
.tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 1.15rem;
}
.tile__caption strong {
  display: block;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.25;
}
.tile__caption span {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--step--1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.marquee-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.marquee-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.marquee-btn:hover { background: #fff; border-color: #fff; color: var(--ink-900); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 14, 18, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: min(1100px, 100%); }
.lightbox__figure img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--ink-800);
}
.lightbox__figure figcaption {
  margin-top: 1rem;
  color: #fff;
  font-size: var(--step-1);
}
.lightbox__figure figcaption span {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.lightbox__btn {
  position: absolute;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lightbox__btn:hover { background: #fff; color: var(--ink-900); }
.lightbox__btn--close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__btn--prev { left: clamp(0.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: clamp(0.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }

/* 7. Cards & content blocks --------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card:hover { border-color: var(--steel-300); box-shadow: var(--shadow-sm); }
.card h3 { margin-bottom: 0.55rem; }
.card p { color: var(--text-muted); }
.card .link-arrow { margin-top: auto; padding-top: 1.25rem; }
.card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.25rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.card__icon svg { width: 27px; height: 27px; }
.card--dark {
  background: var(--ink-800);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-invert-muted);
}
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--text-invert-muted); }
.card--dark .card__icon { background: rgba(222, 139, 44, 0.16); color: var(--accent); }

.tile-link {
  position: relative;
  display: block;
  min-height: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-800);
  color: #fff;
  text-decoration: none;
}
.tile-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.tile-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 19, 23, 0.9), rgba(11, 19, 23, 0.15) 60%);
}
.tile-link:hover img { transform: scale(1.03); }
.tile-link__body { position: relative; z-index: 2; padding: 1.5rem; margin-top: auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; }
.tile-link h3 { color: #fff; margin-bottom: 0.35rem; }
.tile-link p { font-size: var(--step--1); color: var(--text-invert-muted); margin: 0; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
/* The tick is absolutely positioned rather than a flex item: a flex <li> turns
   bare text nodes into separate items, which split "<strong>lead-in.</strong>
   rest of sentence" into two ragged columns. */
.checklist li { position: relative; display: block; padding-left: 2.15rem; margin: 0; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b96d1b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.section--dark .checklist li::before {
  background-color: rgba(222, 139, 44, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23de8b2c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: step; }
.numbered li { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; margin: 0; }
.numbered li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-brand);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.numbered h3 { margin-bottom: 0.3rem; font-size: var(--step-0); }
.numbered p { color: var(--text-muted); margin: 0; }
.section--dark .numbered p { color: var(--text-invert-muted); }

.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.badges { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.badge::before { content: ""; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.section--dark .badge { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); color: var(--text-invert-muted); }

.accred-strip { border-block: 1px solid var(--paper-line); background: #fff; }
.accred-strip .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: 1.75rem;
}
.accred {
  display: grid;
  place-items: center;
  gap: 0.15rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  min-width: 132px;
  text-align: center;
  color: var(--steel-600);
  filter: grayscale(1);
  opacity: 0.85;
  transition: opacity 0.2s var(--ease), filter 0.2s var(--ease);
}
.accred:hover { opacity: 1; filter: none; }
.accred strong {
  font-family: var(--font-brand);
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  color: var(--ink-800);
}
.accred span { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; }

.quote {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--ink-800);
  color: #fff;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  left: 0.3em;
  font-family: Georgia, serif;
  font-size: 7rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.28;
}
.quote h2, .quote h3 { color: #fff; }
.quote blockquote { position: relative; margin: 0; font-size: var(--step-1); line-height: 1.55; }
.quote figcaption { margin-top: 1.5rem; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: #fff;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 85% 15%, rgba(222, 139, 44, 0.14), transparent 62%);
}
.cta-band .container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.cta-band h2 { margin-bottom: 0.4rem; color: #fff; }   /* global h2 colour is dark */
.cta-band p { color: var(--text-invert-muted); max-width: 52ch; margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose > :first-child { margin-top: 0; }

/* Service detail rows */
.service-row { scroll-margin-top: calc(var(--header-h) + 2rem); }
.service-row + .service-row { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) {
  .service-row:nth-child(even) .service-row__media { order: -1; }
}

/* Filters (Our Work: jump the carousel to a trade) */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 2rem; }
.filter-btn {
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: #fff;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.filter-btn:hover { border-color: var(--ink-700); color: var(--ink-900); }
.filter-btn[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* Our Work — a single carousel over every photo, grouped by trade (see
   photo_data.py order) so the same timer rolls from the last photo of one
   trade into the first of the next. Base styles (no JS) lay every photo out
   as a swipeable strip, same as the moving gallery's reduced-motion fallback;
   initCarousels() then enhances it to a single auto-advancing photo with
   prev/next controls. Nothing is lost without JavaScript. */
.carousel { position: relative; max-width: 480px; margin-inline: auto; }
.carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}
.carousel__track { display: flex; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.carousel__slide {
  position: relative;
  flex: none;
  width: 100%;
  scroll-snap-align: start;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;          /* portrait-biased: most real site photos are portrait */
  background: var(--ink-800);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.6s var(--ease); }
.carousel__slide:hover img { transform: scale(1.03); }
.carousel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 19, 23, 0.88) 0%, rgba(11, 19, 23, 0.08) 55%);
}
.carousel__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem 1.15rem; }
.carousel__caption strong { display: block; font-size: var(--step-0); font-weight: 600; line-height: 1.25; }
.carousel__caption span {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}
.carousel__arrow, .carousel__counter { display: none; }

/* Enhanced mode: JS adds this once a carousel is wired up. Non-active slides
   stack on top of one another so only one shows at a time. */
.carousel--enhanced .carousel__viewport { overflow: visible; }
.carousel--enhanced .carousel__track { position: relative; display: block; aspect-ratio: 4 / 5; }
.carousel--enhanced .carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease);
}
.carousel--enhanced .carousel__slide.is-active { opacity: 1; visibility: visible; }
.carousel--enhanced .carousel__arrow {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(11, 19, 23, 0.35);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.carousel--enhanced .carousel__arrow svg { width: 20px; height: 20px; }
.carousel--enhanced .carousel__arrow:hover { background: #fff; color: var(--ink-900); }
.carousel--enhanced .carousel__arrow--prev { left: 0.75rem; }
.carousel--enhanced .carousel__arrow--next { right: 0.75rem; }
.carousel--enhanced .carousel__counter {
  display: block;
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 3;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(11, 19, 23, 0.55);
  color: #fff;
  font-size: var(--step--2, 0.75rem);
  letter-spacing: 0.04em;
}

/* 8. Forms -------------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-800); }
.field .req { color: var(--accent-dark); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: #fff;
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--text);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.field .error { font-size: var(--step--1); color: #b4231d; min-height: 1.1em; text-transform: none; letter-spacing: 0; font-weight: 500; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #b4231d; }
/* Off-screen rather than display:none — some spam bots skip fields hidden
   that way, so this stays reachable to them while invisible to people. */
.form__honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--step--1); color: var(--text-muted); }
.form__consent input { width: 20px; height: 20px; flex: none; margin-top: 0.15rem; padding: 0; }
.form-status { padding: 1rem 1.25rem; border-radius: var(--radius); font-size: var(--step--1); display: none; }
.form-status.is-visible { display: block; }
.form-status--ok { background: rgba(38, 132, 78, 0.1); color: #1c6640; border: 1px solid rgba(38, 132, 78, 0.3); }
.form-status--error { background: rgba(180, 35, 29, 0.08); color: #96201b; border: 1px solid rgba(180, 35, 29, 0.28); }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.contact-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; margin: 0; }
.contact-list svg { width: 22px; height: 22px; color: var(--accent); margin-top: 0.3rem; }
.contact-list strong { display: block; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-600); }
.contact-list a { text-decoration: none; font-size: var(--step-1); font-weight: 500; }
.section--dark .contact-list a, .section--dark .contact-list p { color: #fff; }
.section--dark .contact-list strong { color: var(--accent); }

/* 9. Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink-950); color: var(--text-invert-muted); font-size: var(--step--1); }
.site-footer h2 {
  margin-bottom: 1.1rem;
  color: #fff;
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.site-footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.site-footer .brand__mark { height: 48px; }
.site-footer .brand__wordmark { height: 32px; }
.site-footer p { color: var(--text-invert-muted); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer a { color: var(--text-invert-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--steel-600);
}
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* 10. Utilities & motion ------------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
body.no-scroll { overflow: hidden; }

/* Scroll reveal: used sparingly (a handful of home page elements only, see
   README) — one short fade + slide, no stagger, no repeat. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .marquee__track { animation: none; }
  .tile { scroll-snap-align: start; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .topbar, .cta-band, .marquee, .site-footer__bottom { display: none; }
  body { color: #000; }
}