/* ==========================================================================
   Highfield Brickwork — main.css (forked from the Muilwijk build)
   Fonts: Archivo (headlines), Instrument Sans (text and labels)
   One stylesheet for the whole site. Built against website-src/SPEC.md.

   Contents
   00  Fonts
   01  Tokens
   02  Reset & base
   03  Typography
   04  Layout primitives & utilities
   05  Logo
   06  Buttons & links (6.1)
   07  Nav + mobile menu (6.2)
   08  Intro loader (6.3)
   09  Home hero (6.4)
   10  Subpage hero (6.5)
   11  Service cards, slider, grid (6.6)
   12  "Why Highfield" stage (6.7)
   13  Sector tiles (6.8)
   14  Featured + quote (6.9)
   15  Offer cards + filter (6.10)
   16  Big CTA (6.11)
   17  Footer (6.12)
   18  Sector slider (6.13)
   19  Contact card + form (6.14)
   20  Page-level components (6.15)
   21  Motion: JS-gated initial states
   22  Keyframes
   23  Responsive: <=1279, <=1149, <=991, <=767, <=639, <=479
   24  Reduced motion
   25  Print
   ========================================================================== */


/* ==========================================================================
   00  Fonts
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   01  Tokens (§3)
   ========================================================================== */

:root {
  /* Brand */
  /* Brand (from the logo): rust is the working colour (white text 5.7:1),
     light orange is the accent on dark backgrounds (6.5:1 on charcoal),
     mid orange is for large shapes only (white text on it is 3.9:1). */
  --brand: #A54C22;
  --brand-600: #8C3F1C;
  --brand-100: #F6E4D6;
  --brand-mid: #C76828;
  --brand-light: #EB9451;
  --brand-deep: #A54C22;
  --brand-lift: #EB9451;
  --brand-text: var(--brand-deep);

  /* Logo colours (single-colour contexts override these) */
  --logo-1: #EB9451;
  --logo-2: #C76828;
  --logo-3: #A54C22;
  --logo-word: #A64E26;
  --logo-sub: #EC9552;

  /* Neutrals */
  --ink: #1E1814;        /* warm near-black */
  --night: #1A1512;      /* charcoal: hero, CTA, footer */
  --graphite: #2A221D;
  --graphite-2: #342A24;
  --silver: #F3EEE7;     /* limestone */
  --pearl: #E2D8CC;      /* mortar */
  --steel: #6B6058;
  --mist: #B8AC9F;
  --white: #fff;
  --line-dark: rgba(255, 255, 255, .14);
  --border-hover: #C9B9A8;
  --field-line: #93877B; /* form-control underline: 3:1 on white (WCAG 1.4.11) */

  /* Type */
  --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  /* labels (counters, tagline, step numbers): Instrument Sans in tracked capitals */
  --mono: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --gutter: 4rem;
  --container: 82rem;
  --nav-h: 5.75rem;
  --nav-h-scrolled: 4.5rem;
  --radius: .5rem;
  --pad-xl: 10rem;
  --pad-l: 7.5rem;
  --pad-m: 5rem;
  --phero-pt: 13.25rem;
  --phero-pb: 6rem;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* Context-dependent */
  --focus: var(--brand);
}


/* ==========================================================================
   02  Reset & base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

svg {
  flex-shrink: 0;
}

iframe {
  display: block;
  border: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  overflow-wrap: break-word;
  text-wrap: balance;
}

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Low-specificity defaults in case a heading has no size class */
:where(h1) { font-size: clamp(3rem, 1.9rem + 4.6vw, 5.5rem); line-height: 1; letter-spacing: .01em; }
:where(h2) { font-size: clamp(2rem, 1.55rem + 1.9vw, 3rem); line-height: 1.14; }
:where(h3) { font-size: clamp(1.5rem, 1.38rem + .5vw, 1.75rem); line-height: 1.3; letter-spacing: .01em; }
:where(h4, h5, h6) { font-size: 1.125rem; line-height: 1.3; }

address {
  font-style: normal;
}

blockquote,
figure {
  margin: 0;
}

sup {
  line-height: 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--brand);
  color: var(--white);
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 300;
  padding: .75rem 1.25rem;
  border-radius: 2rem;
  background: var(--ink);
  color: var(--white);
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
  transform: translateY(calc(-100% - 2rem));
  transition: transform .3s var(--ease-out);
}

.skip-link:focus {
  transform: none;
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

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


/* ==========================================================================
   03  Typography (§4)
   ========================================================================== */

/* Archivo bold for the big headings; Instrument Sans for everything else */
.h1 {
  font-family: var(--display);
  font-size: clamp(2.75rem, 1.7rem + 4.4vw, 5.25rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.025em;
}

.h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 1.9vw, 3.125rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.02em;
}

.h3 {
  font-size: clamp(1.5rem, 1.38rem + .5vw, 1.75rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .01em;
}

.t-statement {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -.015em;
}

.t-large {
  font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .01em;
}

.t-regular {
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: .01em;
}

.t-small {
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: .01em;
}

.t-light {
  font-weight: 300;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.125rem;
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* A single brick (stretcher face, 3:1) */
.eyebrow::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: .375rem;
  border-radius: 1px;
  background: var(--brand);
}

.bg-night .eyebrow::before,
.bg-graphite .eyebrow::before,
.featured .eyebrow::before {
  background: var(--brand-light);
}

.bg-brand .eyebrow::before {
  background: var(--white);
}

.t-mega {
  font-family: var(--display);
  font-size: clamp(2.75rem, 1.2rem + 7.4vw, 7.5rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.035em;
}

.t-mono {
  font-family: var(--mono);
  font-size: .8125rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Colour helpers */
.c-brand { color: var(--brand-text); }
.c-steel { color: var(--steel); }
.c-mist  { color: var(--mist); }
.c-white { color: var(--white); }
.c-ink   { color: var(--ink); }

/* Headline line mask (reveals) */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

.line > span {
  display: inline-block;
}


/* ==========================================================================
   04  Layout primitives & utilities (§5)
   ========================================================================== */

.wrap {
  padding-inline: var(--gutter);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* Section padding (values swap per breakpoint via tokens) */
.pad-xl { padding-block: var(--pad-xl); }
.pad-l  { padding-block: var(--pad-l); }
.pad-m  { padding-block: var(--pad-m); }
.pt-0   { padding-top: 0; }
.pb-0   { padding-bottom: 0; }

/* Section backgrounds */
.bg-silver {
  background: var(--silver);
}

.bg-night {
  background: var(--night);
  color: var(--white);
}

.bg-graphite {
  background: var(--graphite);
  color: var(--white);
  --brand-text: var(--brand-lift);
}

.bg-brand {
  background: var(--brand);
  color: var(--white);
  --brand-text: var(--white);
  --focus: var(--white);
}

/* Dark contexts: small brand text can use the pure brand colour */
.bg-night,
.hero,
.phero,
.cta,
.footer {
  --brand-text: var(--brand-lift);
  --focus: var(--brand-light);
}

.featured,
.quote {
  --brand-text: var(--brand-lift);
}

/* Head row */
.head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--pearl);
}

.bg-night .head-row,
.bg-graphite .head-row,
.phero .head-row,
.featured .head-row {
  border-bottom-color: var(--line-dark);
}

.head-row > .btn,
.head-row > .filter {
  flex: none;
}

.head-row + .split {
  margin-top: 2.5rem;
}

/* Split */
.split {
  display: grid;
  grid-template-columns: 1fr minmax(0, 33rem);
  column-gap: 2rem;
  align-items: end;
}

.split--top {
  align-items: start;
}

/* Spacers */
.spacer-s  { height: 1.5rem; }
.spacer-m  { height: 2.5rem; }
.spacer-l  { height: 5rem; }
.spacer-xl { height: 7.5rem; }

/* Stacks */
.stack-s,
.stack-m,
.stack-l {
  display: grid;
  align-content: start;
  justify-items: start;
}

.stack-s { gap: 1rem; }
.stack-m { gap: 1.5rem; }
.stack-l { gap: 2.5rem; }

.stack-s > *,
.stack-m > *,
.stack-l > * {
  max-width: 100%;
}

/* Button row */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Shapes */
/* Brick silhouettes (match the pinned "Why Highfield" morph shapes in main.js) */
.shape-wall {
  clip-path: polygon(0 0, 62% 0, 62% 12.5%, 74% 12.5%, 74% 25%, 87% 25%, 87% 37.5%, 100% 37.5%, 100% 100%, 7% 100%, 7% 87.5%, 0 87.5%, 0 75%, 7% 75%, 7% 62.5%, 0 62.5%, 0 50%, 7% 50%, 7% 37.5%, 0 37.5%, 0 25%, 7% 25%, 7% 12.5%, 0 12.5%);
}
.shape-roundarch { border-radius: 50% 50% 0 0 / 55% 55% 0 0 !important; }
.shape-house {
  clip-path: polygon(0 42%, 50% 8%, 64% 17.5%, 64% 6%, 68% 6%, 68% 0, 73% 0, 73% 6%, 77% 6%, 77% 26.4%, 100% 42%, 100% 100%, 0 100%);
}

/* Segmental arch cut into the top edge (brick arch soffit) */
.shape-arch {
  clip-path: polygon(0 0, 18% 0, 22.6% 7.3%, 27.8% 12.1%, 33.7% 15.9%, 40.1% 18.4%, 46.7% 19.6%, 53.3% 19.6%, 59.9% 18.4%, 66.3% 15.9%, 72.2% 12.1%, 77.4% 7.3%, 82% 0, 100% 0, 100% 100%, 0 100%);
}


/* ==========================================================================
   05  Logo
   Herringbone mark (tools/make_logo.py): every brick is a <g class="logo__brick">
   with --i = laying order (bottom to top). Joints are real gaps, so the mark
   works on any background. Colours come from --logo-1/2/3/word/sub.
   ========================================================================== */

.logo { display: block; }
.logo__mark { display: block; aspect-ratio: 1; overflow: visible; }
.logo__tone-1 { fill: var(--logo-1); }
.logo__tone-2 { fill: var(--logo-2); }
.logo__rust   { fill: var(--logo-3); }
.logo__word   { fill: var(--logo-word); }
.logo__sub    { fill: var(--logo-sub); }
.logo__wordmark { display: block; aspect-ratio: 248 / 100; overflow: visible; }

.logo__brick {
  transform-box: fill-box;
  transform-origin: center;
}

/* Single-colour contexts */
.logo--white {
  --logo-1: rgba(255, 255, 255, .92);
  --logo-2: rgba(255, 255, 255, .78);
  --logo-3: rgba(255, 255, 255, .62);
  --logo-word: #fff;
  --logo-sub: var(--brand-light);
}

/* Horizontal lock-up: mark + two-line wordmark */
.logo--h {
  --logo-h: 2.75rem;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.logo--h .logo__mark {
  height: var(--logo-h);
  width: var(--logo-h);
}

.logo--h .logo__wordmark {
  height: calc(var(--logo-h) * 1.06);
  width: calc(var(--logo-h) * 1.06 * 2.48);
  margin-left: calc(var(--logo-h) * .3);
}

/* Stacked lock-up (original artwork proportions) */
.logo--stacked {
  width: 100%;
  height: auto;
  aspect-ratio: 350 / 389;
}

/* Hover: the bricks settle one course at a time */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nav__logo:hover .logo__brick,
  a:hover > .logo--tick .logo__brick {
    animation: brick-settle .7s var(--ease-out) both;
    animation-delay: calc(var(--i) * 28ms);
  }
}

/* Brand animation: a slow shimmer runs up the courses */
.footer .logo__brick,
.quote__avatar .logo__brick {
  animation: brick-shimmer 7s var(--ease-io) infinite;
  animation-delay: calc(var(--i) * 70ms);
}


/* ==========================================================================
   06  Buttons & links (6.1)
   ========================================================================== */

.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--white);
  --btn-ring: transparent;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 2rem;
  background: none;
  color: var(--btn-fg);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-ring);
  transition:
    transform .45s var(--ease-out),
    background-color .3s var(--ease-out),
    box-shadow .3s var(--ease-out);
}

.btn:focus-visible {
  outline-offset: 4px;
}

.btn__label {
  position: relative;
}

/* Variants */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--brand-text);
  --btn-ring: var(--pearl);
}

.bg-night .btn--outline,
.bg-graphite .btn--outline,
.phero .btn--outline,
.featured .btn--outline {
  --btn-ring: rgba(255, 255, 255, .28);
}

.btn--light {
  --btn-bg: var(--white);
  --btn-fg: var(--brand-deep);
}

.btn--dark {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
}

/* A default (brand) button on a brand background flips to ink */
.bg-brand .btn:not(.btn--outline):not(.btn--light):not(.btn--dark) {
  --btn-bg: var(--night);
  --btn-fg: var(--white);
}

.bg-silver .btn--outline {
  --btn-ring: rgba(30, 24, 20, .22);
}

.bg-brand .btn--outline {
  --btn-fg: var(--white);
  --btn-ring: rgba(255, 255, 255, .45);
}

.btn--sm {
  padding: .75rem 1.25rem;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

/* Arrow-swap icon (used by .btn and .link-arrow) */
.btn__icon {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
}

.btn__icon svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .5s var(--ease-out);
}

.btn__icon svg:nth-child(2) {
  transform: translate(-120%, 120%);
}

@media (hover: hover) {
  .btn:hover::before {
    transform: scale(1.04, 1.08);
  }

  .btn--outline:hover {
    --btn-ring: var(--brand);
  }

  .btn:hover .btn__icon svg:nth-child(1),
  .link-arrow:hover .btn__icon svg:nth-child(1),
  .svc-card:hover .btn__icon svg:nth-child(1),
  .offer-card:hover .link-arrow .btn__icon svg:nth-child(1) {
    transform: translate(120%, -120%);
  }

  .btn:hover .btn__icon svg:nth-child(2),
  .link-arrow:hover .btn__icon svg:nth-child(2),
  .svc-card:hover .btn__icon svg:nth-child(2),
  .offer-card:hover .link-arrow .btn__icon svg:nth-child(2) {
    transform: translate(0, 0);
  }
}

.btn:focus-visible .btn__icon svg:nth-child(1),
.link-arrow:focus-visible .btn__icon svg:nth-child(1) {
  transform: translate(120%, -120%);
}

.btn:focus-visible .btn__icon svg:nth-child(2),
.link-arrow:focus-visible .btn__icon svg:nth-child(2) {
  transform: translate(0, 0);
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--brand-text);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
}

.link-arrow > span:first-child {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease-out);
}

.link-arrow:focus-visible > span:first-child {
  background-size: 100% 1px;
}

@media (hover: hover) {
  .link-arrow:hover > span:first-child {
    background-size: 100% 1px;
  }
}

/* Scroll button */
.scroll-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  transition:
    background-color .35s var(--ease-out),
    color .35s var(--ease-out),
    transform .45s var(--ease-out);
}

.scroll-btn svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform .45s var(--ease-out);
}

.scroll-btn:focus-visible {
  background: var(--brand);
  color: var(--white);
}

@media (hover: hover) {
  .scroll-btn:hover {
    background: var(--brand);
    color: var(--white);
  }

  .scroll-btn:hover svg {
    transform: translateY(.25rem);
  }
}

/* Slider prev/next */
.round-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 4rem;
  height: 2.75rem;
  border-radius: 2rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--pearl);
  color: var(--brand);
  cursor: pointer;
  transition:
    background-color .3s var(--ease-out),
    color .3s var(--ease-out),
    box-shadow .3s var(--ease-out),
    opacity .3s var(--ease-out);
}

.round-btn svg {
  display: block;
  width: 1rem;
  height: 1rem;
  transition: transform .45s var(--ease-out);
}

.round-btn--solid {
  background: var(--white);
  box-shadow: none;
}

.round-btn[disabled],
.round-btn[aria-disabled="true"] {
  opacity: .35;
  pointer-events: none;
  cursor: default;
}

.bg-night .round-btn:not(.round-btn--solid),
.bg-graphite .round-btn:not(.round-btn--solid) {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

@media (hover: hover) {
  .round-btn:hover {
    background: var(--silver);
  }

  .round-btn--solid:hover {
    background: var(--ink);
    color: var(--white);
  }

  .bg-night .round-btn:not(.round-btn--solid):hover,
  .bg-graphite .round-btn:not(.round-btn--solid):hover {
    background: rgba(255, 255, 255, .08);
  }

  .round-btn:hover svg {
    transform: translateX(.125rem);
  }

  .round-btn[data-slider-prev]:hover svg,
  .round-btn[data-sector-prev]:hover svg {
    transform: translateX(-.125rem);
  }
}

/* Groups of slider controls (home: left column of the services split) */
.slider-controls,
.slider-nav,
.slider__nav {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
}


/* ==========================================================================
   07  Nav (6.2)
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 0 transparent;
  transition:
    height .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
}

.nav > .wrap,
.nav__inner {
  height: 100%;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav.is-scrolled {
  height: var(--nav-h-scrolled);
  box-shadow: 0 1px 0 var(--silver);
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  flex: none;
  border-radius: .25rem;
  color: var(--ink);
}

.nav .logo {
  color: var(--ink);
}

.nav .logo__wordmark {
  transition:
    opacity .4s var(--ease-out),
    transform .4s var(--ease-out);
}

.nav.is-scrolled .logo__wordmark {
  opacity: 0;
  transform: translateX(-.5rem);
  pointer-events: none;
}

.is-menu-open .nav .logo__wordmark {
  opacity: 1;
  transform: none;
}

/* Menu */
.nav__menu {
  margin-left: 4.25rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .01em;
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease-out);
}

.nav__link:focus-visible::after,
.nav__link[aria-current]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

@media (hover: hover) {
  .nav__link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Actions */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}

.nav__secondary {
  display: flex;
  align-items: center;
  gap: 1rem;
  transition:
    opacity .4s var(--ease-out),
    visibility .4s var(--ease-out);
}


.nav__phone svg {
  display: block;
  width: 1rem;
  height: 1rem;
  color: var(--brand);
}

.nav__divider {
  display: block;
  flex: none;
  width: 1px;
  height: 1.5rem;
  background: var(--silver);
}

/* Burger (hidden on desktop) */
.nav__burger {
  position: relative;
  display: none;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -.625rem;
  border-radius: .5rem;
  color: var(--ink);
}

.nav__burger-line,
.nav__burger > span:not(.sr-only):not([class]) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5rem;
  height: 1.5px;
  margin: -.75px 0 0 -.75rem;
  border-radius: 1px;
  background: currentColor;
  transition:
    transform .45s var(--ease-out),
    opacity .3s var(--ease-out);
}

.nav__burger > :nth-child(1) { transform: translateY(-.4375rem); }
.nav__burger > :nth-child(3) { transform: translateY(.4375rem); }

.nav__burger[aria-expanded="true"] > :nth-child(1) { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] > :nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav__burger[aria-expanded="true"] > :nth-child(3) { transform: rotate(-45deg); }

/* Mobile menu */
.mmenu {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  color: var(--ink);
  border-top: 1px solid var(--silver);
}

.mmenu__inner {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.mmenu:not(:has(.mmenu__inner)) {
  padding: 1rem var(--gutter) 2rem;
}

.mmenu__links {
  display: flex;
  flex-direction: column;
}

.mmenu__links > * {
  border-bottom: 1px solid var(--silver);
}

.mmenu__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-size: clamp(2rem, 1.55rem + 1.9vw, 3rem);
  line-height: 1.14;
  font-weight: 500;
  color: var(--ink);
  transition: color .3s var(--ease-out);
}

.mmenu__links a[aria-current] {
  color: var(--brand-text);
}

.mmenu__links a svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--brand);
}

.mmenu__meta {
  display: grid;
  gap: .5rem;
  margin-top: auto;
  padding-top: 2.5rem;
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.4;
}

.mmenu__meta a {
  display: inline-flex;
  align-items: flex-start;
  gap: .625rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.mmenu__meta svg {
  width: 1rem;
  height: 1rem;
  margin-top: .2rem;
  color: var(--brand);
}

.mmenu > .btn,
.mmenu .btn {
  width: 100%;
  margin-top: 1.5rem;
}

/* CSS entrance, used only when GSAP is not animating the menu (main.js does
   the clip + stagger itself). Fill "backwards" so it never pins final values. */
html:not(.has-gsap) .mmenu {
  animation: mmenu-in .45s var(--ease-out) backwards;
}

html:not(.has-gsap) .mmenu__links > *,
html:not(.has-gsap) .mmenu__meta,
html:not(.has-gsap) .mmenu .btn {
  animation: mmenu-item .8s var(--ease-out) backwards;
}

html:not(.has-gsap) .mmenu__links > :nth-child(1) { animation-delay: .06s; }
html:not(.has-gsap) .mmenu__links > :nth-child(2) { animation-delay: .12s; }
html:not(.has-gsap) .mmenu__links > :nth-child(3) { animation-delay: .18s; }
html:not(.has-gsap) .mmenu__links > :nth-child(4) { animation-delay: .24s; }
html:not(.has-gsap) .mmenu__links > :nth-child(5) { animation-delay: .30s; }
html:not(.has-gsap) .mmenu__links > :nth-child(6) { animation-delay: .36s; }
html:not(.has-gsap) .mmenu__meta { animation-delay: .36s; }
html:not(.has-gsap) .mmenu .btn { animation-delay: .42s; }

body.is-menu-open {
  overflow: hidden;
}

@media (hover: hover) {
  .mmenu__links a:hover,
  .mmenu__meta a:hover {
    color: var(--brand-text);
  }
}


/* ==========================================================================
   08  Intro loader (6.3)
   ========================================================================== */

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  color: var(--white);
  --logo-word: #fff;
  --logo-sub: var(--brand-light);
  /* Failsafe: if main.js never takes over, the loader gets out of the way.
     main.js sets style.animation = "none" as soon as it controls the loader. */
  animation: loader-failsafe .6s ease-out 8s forwards;
}

.loader__panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--night);
  color: var(--white);
}

.loader__logo {
  width: clamp(11rem, 20vw, 16rem);
}

/* Bricks are laid one at a time, bottom course first */
.loader .logo__brick {
  animation: brick-lay .75s var(--ease-out) both;
  animation-delay: calc(.5s + var(--i) * 50ms);
}

.loader .logo__word,
.loader .logo__sub {
  animation: word-rise 1s var(--ease-out) both;
  animation-delay: 1.3s;
}

.loader .logo__sub {
  animation-delay: 1.45s;
}

.loader__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 3rem;
}

.loader__track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(30, 24, 20, .2);
}

.loader__bar {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}

.loader__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  color: var(--ink);
}

.loader__meta [data-loader-count] {
  font-variant-numeric: tabular-nums;
}

.loader__curve {
  position: absolute;
  top: 100%;
  left: -10%;
  width: 120%;
  height: 16vw;
  background: var(--brand);
  border-radius: 0 0 50% 50%;
  transform: scaleY(0);
  transform-origin: center top;
}

html:not(.js) .loader {
  display: none;
}


/* ==========================================================================
   09  Home hero (6.4)
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  height: 100svh;
  min-height: 40rem;
  overflow: hidden;
  background: var(--night);
  color: var(--white);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__media picture {
  width: 100%;
  height: 100%;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 0% 100%, rgba(199, 104, 40, .55), transparent 70%),
    linear-gradient(180deg, rgba(26, 21, 18, .55) 0%, rgba(26, 21, 18, .15) 35%, rgba(26, 21, 18, .85) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: 5rem;
}

.hero .container {
  max-width: 68rem;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}

.hero__title {
  grid-column: 1 / -1;
  color: var(--white);
}

.hero__aside {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 25.8rem;
  margin-top: 2rem;
}

.hero__aside .scroll-btn {
  margin-top: 3rem;
}


/* ==========================================================================
   10  Subpage hero (6.5)
   ========================================================================== */

.phero {
  position: relative;
  z-index: 1; /* lets a straddling card's shadow paint over the next section */
  padding-top: var(--phero-pt);
  padding-bottom: var(--phero-pb);
  background: var(--night);
  color: var(--white);
}

/* Deco: the wrapper is the clipping layer; the SVG itself is placed
   right -12rem / top -6rem at 56rem wide and slowly rotates. */
.phero__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.phero__deco svg {
  position: absolute;
  top: -6rem;
  right: -12rem;
  display: block;
  width: 56rem;
  height: 56rem;
  opacity: .5;
  color: var(--brand);
  overflow: visible;
  animation: deco-rotate 90s linear infinite;
}

.phero__deco .deco-draw {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: deco-draw 2.4s var(--ease-io) .15s both;
}

.phero__deco .deco-draw:nth-child(4n + 2) { animation-delay: .3s; }
.phero__deco .deco-draw:nth-child(4n + 3) { animation-delay: .45s; }
.phero__deco .deco-draw:nth-child(4n + 4) { animation-delay: .6s; }

.phero__inner {
  position: relative;
  z-index: 1;
}

.phero__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 33rem);
  column-gap: 2rem;
  align-items: start;
}

.phero__grid > .h1,
.phero__grid > h1 {
  color: var(--white);
}

.phero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.phero__aside > p {
  max-width: 25.8rem;
}

.phero__aside .scroll-btn {
  margin-top: 3rem;
}

.phero__aside > .btn {
  margin-top: 2.5rem;
}

/* Image row that straddles dark → white.
   The section is --night; the lower half of this row is painted white,
   and the row overlaps the section's bottom padding so nothing dark
   remains below the image. */
.phero__media,
.contact-card-row {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  margin-bottom: calc(-1 * var(--phero-pb));
}

.phero__media::after,
.contact-card-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  /* -2px: overlap the (white) next section. When the section edge lands on a
     fractional pixel, an exact 0 leaves an anti-aliased grey seam. */
  bottom: -2px;
  z-index: 0;
  background: var(--white);
}

.phero__media > .container,
.contact-card-row > .container {
  position: relative;
  z-index: 1;
}

.phero__img {
  position: relative;
  aspect-ratio: 1312 / 640;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--graphite);
  isolation: isolate; /* keeps the radius clip while the image transforms (Safari) */
}

.phero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transform-origin: center center;
}

/* Section directly after an image hero */
.after-media {
  padding-top: 11rem;
}

/* 404: a full-screen dark hero with the content centred, so the page reads
   as deliberate instead of running straight into the (also dark) footer. */
.phero--404 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + 4rem);
  border-bottom: 1px solid var(--line-dark);
}

.phero--404 .phero__inner {
  width: 100%;
}


/* ==========================================================================
   11  Service cards, slider, grid (6.6)
   ========================================================================== */

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  border: 1px solid var(--pearl);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  transition: border-color .4s var(--ease-out);
}

.svc-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--brand);
  transition: transform .5s var(--ease-out);
}

.svc-card__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.svc-card__body {
  margin-top: 7.25rem;
}

.svc-card__body p {
  margin-top: .75rem;
  color: var(--steel);
}

.svc-card__body ul {
  margin-top: 1.25rem;
  display: grid;
  gap: .5rem;
  color: var(--steel);
  font-size: 1rem;
  line-height: 1.4;
}

.svc-card__body ul {
  padding: 0;
  list-style: none;
}

.svc-card__body ul li {
  position: relative;
  padding-left: 1.25rem;
}

.svc-card__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .375rem;
  height: .375rem;
  background: var(--brand);
}

.svc-card__link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 2.5rem;
}

@media (hover: hover) {
  .svc-card:hover {
    border-color: var(--border-hover);
  }

  .svc-card:hover .svc-card__icon {
    transform: translateY(-.25rem);
  }
}

/* Slider */
.slider {
  position: relative;
}

.slider__track {
  display: flex;
  gap: 2rem;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__track:focus-visible {
  outline-offset: -2px;
}

.slider__track > * {
  flex: 0 0 26rem;
  scroll-snap-align: start;
}

.slider .svc-card {
  min-height: 32.3rem;
}

.slider__track img {
  -webkit-user-drag: none;
}

@media (hover: hover) and (pointer: fine) {
  .slider__track {
    cursor: grab;
  }
}

.slider.is-dragging .slider__track {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

.slider.is-dragging .slider__track a {
  pointer-events: none;
}

/* Grid variant (diensten) */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.svc-grid .svc-card {
  min-height: auto;
  scroll-margin-top: calc(var(--nav-h) + 2rem);
}

.svc-grid .svc-card__body {
  margin-top: 4rem;
}

.svc-card:target {
  border-color: var(--brand);
}


/* ==========================================================================
   12  "Why Highfield" stage (6.7)
   Default = stacked layout (no JS, reduced motion, <=991, .is-static).
   Stage layout = desktop while main.js pins it (.why__stage.is-pinned).
   ========================================================================== */

.why {
  position: relative;
}

.why__intro {
  margin-top: 2.5rem;
}

/* --- Stacked (default) --- */
.why__stage {
  padding-top: 5rem;
  padding-bottom: 7.5rem;
}

.why__media,
.why__counter {
  display: none;
}

.why__steps {
  display: grid;
  gap: 4rem;
}

.why__step p {
  max-width: 33rem;
  margin-top: 1.5rem;
  color: var(--steel);
}

.why__step-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 2rem;
  border-radius: var(--radius);
  clip-path: polygon(0 0, 26% 0, 50% 22%, 74% 0, 100% 0, 100% 100%, 0 100%);
}

@media (min-width: 992px) {
  .why__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* --- Pinned stage (main.js adds .is-pinned on desktop when it pins) --- */
@media (min-width: 992px) {
  .why__stage.is-pinned {
    --why-h: min(30rem, calc(100vh - var(--nav-h) - 5rem));
    display: flex;
    align-items: center;
    height: 100vh;
    min-height: 36rem;
    padding-top: var(--nav-h);
    padding-bottom: 0;
  }

  .why__stage.is-pinned .why__grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 33rem);
    column-gap: 2rem;
    align-items: center;
  }

  .why__stage.is-pinned .why__media {
    position: relative;
    display: block;
    width: min(33rem, 100%);
    height: var(--why-h);
    overflow: hidden;
    background: var(--pearl);
    clip-path: polygon(0 0, 26% 0, 50% 31%, 74% 0, 100% 0, 100% 100%, 0 100%);
    will-change: clip-path;
  }

  .why__stage.is-pinned .why__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.08);
    transition:
      opacity .8s var(--ease-out),
      transform 1.2s var(--ease-out);
  }

  .why__stage.is-pinned .why__media img.is-active {
    opacity: 1;
    transform: scale(1);
  }

  .why__stage.is-pinned .why__content {
    display: flex;
    flex-direction: column;
    height: var(--why-h);
  }

  .why__stage.is-pinned .why__counter {
    display: block;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--pearl);
    font-variant-numeric: tabular-nums;
  }

  .why__stage.is-pinned .why__steps {
    position: relative;
    display: block;
    flex: 1;
  }

  .why__stage.is-pinned .why__step {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1.25rem);
    transition:
      opacity .6s var(--ease-out),
      transform .6s var(--ease-out),
      visibility 0s linear .6s;
  }

  .why__stage.is-pinned .why__step.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity .6s var(--ease-out) .1s,
      transform .6s var(--ease-out) .1s,
      visibility 0s linear 0s;
  }

  .why__stage.is-pinned .why__step-media {
    display: none;
  }
}


/* ==========================================================================
   13  Sector tiles (6.8)
   ========================================================================== */

.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  padding: 0;
  list-style: none;
}

.sector-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  height: 7.625rem;
  padding-inline: .75rem;
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: .01em;
  text-align: center;
  transition: border-color .4s var(--ease-out);
}

.bg-silver .sector-tile {
  border-color: var(--pearl);
  background: var(--white);
}

.sector-tile svg {
  display: block;
  width: 2rem;
  height: 2rem;
  color: var(--ink);
  transition:
    color .4s var(--ease-out),
    transform .5s var(--ease-out);
}

@media (hover: hover) {
  .sector-tile--link:hover {
    border-color: var(--brand);
  }

  .sector-tile--link:hover svg {
    color: var(--brand);
    transform: translateY(-.125rem);
  }
}


/* ==========================================================================
   14  Featured + quote (6.9)
   ========================================================================== */

.featured {
  color: var(--white);
}

.featured__top {
  padding-block: 2.5rem;
}

.featured__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 34.2rem);
  gap: 2rem;
}

.featured__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding: 5rem 0 2.5rem;
}

.featured__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 33rem;
}

.featured__intro .btn {
  margin-top: 1rem;
}

.featured__stat {
  max-width: 33rem;
}

.featured__stat > :first-child {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-dark);
}

.featured__number {
  display: flex;
  align-items: flex-start;
  margin-top: 1.5rem;
  color: var(--white);
  font-size: clamp(3rem, 1.9rem + 4.6vw, 5.5rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.featured__number sup {
  margin-left: .5rem;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 300;
  vertical-align: top;
  letter-spacing: .01em;
}

.featured__media {
  position: relative;
  align-self: end;
  height: 30rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--graphite-2);
}

.featured__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Quote band */
.quote {
  padding-block: 5rem;
  background: var(--graphite-2);
  color: var(--white);
}

.quote__grid {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.quote__avatar {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius);
  background: var(--night);
}

.quote__avatar .logo__mark {
  width: 3rem;
  height: auto;
}

.quote__body {
  max-width: 50rem;
}

.quote__body p {
  color: var(--white);
}

.quote__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.4;
}

.quote__name {
  color: var(--white);
  font-weight: 500;
}

.quote__role {
  color: var(--mist);
  font-weight: 300;
}

.quote__name ~ .quote__role::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1px;
  margin-right: .75rem;
  vertical-align: middle;
  background: var(--mist);
}


/* ==========================================================================
   15  Offer cards + filter (6.10)
   ========================================================================== */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pearl);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition:
    box-shadow .5s var(--ease-out),
    border-color .4s var(--ease-out);
}

.offer-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--silver);
}

.offer-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}

/* Heftrucks photo: subject sits in the top half */
.offer-card__media img[src*="aanbod-heftrucks"] {
  object-position: center 20%;
}

.offer-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 2rem;
}

.offer-card__body > .h3,
.offer-card__body > h3 {
  margin-top: 1.25rem;
}

.offer-card__body > p {
  margin-top: .75rem;
  color: var(--steel);
}

.offer-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: auto;
  padding-top: 3.875rem;
  color: var(--steel);
}

.offer-card__body > p ~ .offer-card__meta {
  padding-top: 2rem;
}

.offer-card__body > .link-arrow {
  margin-top: auto;
  padding-top: 2rem;
}

.offer-card__body > .offer-card__meta ~ .link-arrow {
  margin-top: 1.25rem;
  padding-top: 0;
}

.offer-card__arrow {
  display: inline-flex;
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--brand);
  transition: transform .5s var(--ease-out);
}

.offer-card__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

a.offer-card:focus-visible {
  outline-offset: 4px;
}

/* Aanbod page: the cards are <article>s with one link. Stretch that link over
   the whole card so the card-wide hover state is also the click target. */
article.offer-card .offer-card__body > .link-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

@supports selector(:has(*)) {
  article.offer-card:has(.link-arrow:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
  }

  article.offer-card .link-arrow:focus-visible {
    outline: none;
  }
}

@media (hover: hover) {
  .offer-card:hover {
    box-shadow: 0 1.25rem 2.5rem rgba(30, 24, 20, .08);
  }

  .offer-card:hover .offer-card__media img {
    transform: scale(1.05);
  }

  .offer-card:hover .offer-card__arrow {
    transform: translate(.25rem, -.25rem);
  }
}

/* Tag */
.tag {
  display: inline-block;
  padding: .5rem 1.25rem;
  border-radius: 2.5rem;
  background: var(--silver);
  color: var(--graphite-2);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Filter */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.filter__btn {
  display: inline-block;
  padding: .5rem 1.25rem;
  border: 0;
  border-radius: 2.5rem;
  background: var(--silver);
  color: var(--graphite-2);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: .01em;
  cursor: pointer;
  transition:
    background-color .3s var(--ease-out),
    color .3s var(--ease-out);
}

.filter__btn.is-active,
.filter__btn[aria-selected="true"] {
  background: var(--ink);
  color: var(--white);
}

@media (hover: hover) {
  .filter__btn:not(.is-active):not([aria-selected="true"]):hover {
    background: var(--pearl);
  }
}

/* Without JS the filter cannot work (every card stays visible): hide it */
html:not(.js) .filter {
  display: none;
}


/* ==========================================================================
   16  Big CTA (6.11)
   ========================================================================== */

.cta {
  padding-top: 5rem;
  color: var(--white);
}

.cta__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--line-dark);
  color: var(--white);
  text-decoration: none;
}

.cta__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .8s var(--ease-out);
}

.cta__link:focus-visible {
  outline-offset: 8px;
}

.cta__text {
  min-width: 0;
  text-wrap: balance;
}

.cta__arrow {
  display: block;
  flex: none;
  width: 5rem;
  height: 5rem;
  color: var(--white);
  transition:
    color .4s var(--ease-out),
    transform .6s var(--ease-out);
}

.cta__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cta__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.cta__link:focus-visible .cta__arrow {
  color: var(--brand);
  transform: translate(.5rem, -.5rem);
}

@media (hover: hover) {
  .cta__link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .cta__link:hover .cta__arrow {
    color: var(--brand);
    transform: translate(.5rem, -.5rem);
  }
}


/* ==========================================================================
   17  Footer (6.12)
   ========================================================================== */

.footer {
  color: var(--white);
}

.footer > .wrap {
  padding-top: 7.5rem;
  padding-bottom: 1.875rem;
}

.footer__main {
  display: grid;
  grid-template-columns: 1fr minmax(0, 33rem);
  column-gap: 2rem;
  padding-bottom: 7.5rem;
}

.footer__brand .logo,
.footer .logo--h {
  --logo-h: 3rem;
  color: var(--white);
  --logo-word: #fff;
  --logo-sub: var(--brand-light);
}

.footer__brand > a {
  display: inline-flex;
  border-radius: .25rem;
}

.footer__brand p {
  max-width: 33rem;
  margin-top: 2rem;
  color: #D4D9DE;
  font-size: 1.125rem;
  line-height: 1.4;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.footer__social a,
.footer .social-link {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  color: var(--white);
  transition:
    background-color .3s var(--ease-out),
    color .3s var(--ease-out),
    box-shadow .3s var(--ease-out);
}

.footer__social svg,
.footer .social-link svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.footer__cols {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 2rem;
}

.footer__title {
  margin-bottom: 1.5rem;
  color: var(--mist);
  font-size: 1.125rem;
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.footer__cols ul,
.footer__links,
.footer__list {
  display: grid;
  gap: .75rem;
  padding: 0;
  list-style: none;
}

.footer__cols address {
  display: grid;
  gap: .75rem;
}

.footer__cols a,
.footer__cols address,
.footer__cols li {
  color: var(--white);
  font-size: 1.125rem;
  line-height: 1.4;
}

.footer__cols a {
  transition: color .3s var(--ease-out);
  overflow-wrap: anywhere;
}

.footer__mid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-dark);
  color: var(--mist);
  font-size: 1rem;
  line-height: 1.4;
}

.footer__mid > * {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
}

.footer__mid a,
.footer__bottom a {
  color: var(--mist);
  transition: color .3s var(--ease-out);
}

.footer__bottom {
  padding-top: 1.5rem;
  color: var(--mist);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 300;
}

@media (hover: hover) {
  .footer__cols a:hover {
    color: var(--brand);
  }

  .footer__mid a:hover,
  .footer__bottom a:hover {
    color: var(--white);
  }

  .footer__social a:hover,
  .footer .social-link:hover {
    background: var(--white);
    color: var(--night);
    box-shadow: inset 0 0 0 1px var(--white);
  }
}


/* ==========================================================================
   18  Sector slider (6.13)
   ========================================================================== */

.sector-slider {
  position: relative;
  min-height: 40rem;
}

.sector-slider:focus-visible {
  outline-offset: 6px;
  border-radius: var(--radius);
}

.sector-slider__media {
  position: relative;
  width: 75%;
  height: 40rem;
  margin-left: auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--silver);
}

.sector-slider__media img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* With GSAP, main.js layers and wipes the images itself (inline styles);
   CSS only makes sure the first paint shows the active image. */
html.has-gsap .sector-slider__media img {
  opacity: 0;
}

html.has-gsap .sector-slider__media img.is-active {
  z-index: 2;
  opacity: 1;
}

/* Without GSAP: CSS wipe. The outgoing image stays visible underneath
   until the new one has covered it. */
html:not(.has-gsap) .sector-slider__media img {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0s linear 1s;
}

html:not(.has-gsap) .sector-slider__media img.is-active {
  z-index: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-io);
}

.sector-slider__card {
  position: absolute;
  left: 0;
  bottom: 4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 34rem;
  max-width: 100%;
  min-height: 22rem;
  padding: 2.5rem;
  border-radius: var(--radius);
  background: var(--silver);
  color: var(--ink);
}

.sector-slider__count {
  font-variant-numeric: tabular-nums;
}

.sector-slider__slides {
  display: grid;
  margin-top: 2.5rem;
}

.sector-slider__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.75rem);
  transition:
    opacity .4s var(--ease-out),
    transform .5s var(--ease-out),
    visibility 0s linear .5s;
}

.sector-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity .6s var(--ease-out) .25s,
    transform .8s var(--ease-out) .25s,
    visibility 0s linear 0s;
}

.sector-slider__slide p {
  margin-top: .75rem;
  color: var(--steel);
}

.sector-slider__nav {
  display: flex;
  gap: .75rem;
  margin-top: auto;
  padding-top: 2rem;
}

/* Without JS: show every slide's text, hide the controls */
html:not(.js) .sector-slider__slide {
  grid-area: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}

html:not(.js) .sector-slider__slide + .sector-slider__slide {
  margin-top: 1.5rem;
}

html:not(.js) .sector-slider__nav,
html:not(.js) .sector-slider__count {
  display: none;
}


/* ==========================================================================
   19  Contact card + form (6.14)
   ========================================================================== */

.phero--contact .contact-card-row {
  margin-top: 4rem;
}

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  min-height: 45rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2rem 4rem rgba(30, 24, 20, .12);
  --brand-text: var(--brand-deep);
  --focus: var(--brand);
}

/* Map */
.contact-card__map {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
  background: var(--silver);
}

.contact-card__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

.contact-card__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: .375rem;
  background: var(--night);
  box-shadow: 0 .75rem 1.5rem rgba(30, 24, 20, .25);
  transform: translate(-50%, calc(-100% - .5rem));
  pointer-events: none;
}

.contact-card__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: -.5rem;
  border-style: solid;
  border-width: .5rem .5rem 0;
  border-color: var(--brand) transparent transparent;
}

.contact-card__pin .logo__mark {
  width: 1.75rem;
  height: auto;
}

.contact-card__addr {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 1;
  max-width: calc(100% - 3rem);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: 0 .75rem 2rem rgba(30, 24, 20, .14);
}

.contact-card__addr strong {
  font-weight: 500;
}

.contact-card__addr .link-arrow {
  margin-top: .5rem;
}

/* Form */
.contact-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 4rem 4.5rem;
}

.contact-form__head {
  display: grid;
  gap: .75rem;
}

.contact-form__head p {
  color: var(--steel);
}

.contact-form__grid,
.contact-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.contact-form__grid > .field--full,
.contact-form__grid > .field--wide,
.contact-form__fields > .field--full,
.contact-form__fields > .field--wide {
  grid-column: 1 / -1;
}

/* Kept separate: an unsupported :has() must not invalidate the rule above */
.contact-form__grid > .field:has(textarea),
.contact-form__fields > .field:has(textarea) {
  grid-column: 1 / -1;
}

/* Floating-label field */
.field {
  position: relative;
  padding-top: 1.5rem;
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: .75rem 0;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  /* Focus/invalid underline: a 2px brand line that grows from the left.
     (A gradient, not a box-shadow: shadows leave hairline artefacts at
     fractional pixel edges on transparent fields.) */
  background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0 2px no-repeat border-box;
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 400;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color .3s var(--ease-out),
    background-size .45s var(--ease-out);
}

.field input::placeholder,
.field textarea::placeholder {
  color: transparent;
}

.field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.field select {
  padding-right: 2rem;
  cursor: pointer;
  background-image:
    linear-gradient(var(--brand), var(--brand)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B646D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%, right .125rem center;
  background-size: 0 2px, 1rem 1rem;
  background-origin: border-box, border-box;
  background-clip: border-box, border-box;
}

.field label {
  position: absolute;
  left: 0;
  top: 2.25rem; /* field padding-top 1.5rem + input padding-top .75rem */
  max-width: 100%;
  overflow: hidden;
  color: var(--steel);
  font-size: 1.125rem;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform-origin: left top;
  pointer-events: none;
  transition:
    transform .35s var(--ease-out),
    color .3s var(--ease-out);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-bottom-color: var(--brand);
  background-size: 100% 2px;
}

.field select:focus {
  background-size: 100% 2px, 1rem 1rem;
}

.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field select ~ label,
.field.is-filled label,
.field input:-webkit-autofill ~ label {
  transform: translateY(-1.4rem) scale(.8);
}

.field input:focus ~ label,
.field select:focus ~ label,
.field textarea:focus ~ label {
  color: var(--brand-deep);
}

/* Keep autofilled fields on-brand (delays the UA autofill background) */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition:
    background-color 600000s 0s,
    border-color .3s var(--ease-out),
    background-size .45s var(--ease-out);
}

.field__req {
  color: var(--brand-deep);
}

/* Select still showing its empty "Kies een onderwerp" option */
.field select:has(option[value=""]:checked) {
  color: var(--steel);
}

.field select option {
  color: var(--ink);
}

.field__error {
  display: block;
  color: var(--brand-deep);
  font-size: .875rem;
  line-height: 1.3;
}

.field__error:not(:empty) {
  margin-top: .5rem;
}

.field--invalid input,
.field--invalid textarea {
  border-bottom-color: var(--brand);
  background-size: 100% 2px;
}

.field--invalid select {
  border-bottom-color: var(--brand);
  background-size: 100% 2px, 1rem 1rem;
}

.field--invalid label {
  color: var(--brand-deep);
}

/* Footer row */
.contact-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}

.contact-form__consent,
.contact-form__footer > p {
  flex: 1 1 14rem;
  max-width: 24rem;
  color: var(--steel);
  font-size: .875rem;
  line-height: 1.45;
}

.contact-form__consent a,
.contact-form__footer > p a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

@media (hover: hover) {
  .contact-form__consent a:hover,
  .contact-form__footer > p a:hover {
    color: var(--brand-deep);
  }

  .field input:hover:not(:focus),
  .field select:hover:not(:focus),
  .field textarea:hover:not(:focus) {
    border-bottom-color: var(--steel);
  }
}

/* Sending */
.contact-form.is-busy {
  cursor: progress;
}

.contact-form.is-busy [type="submit"] {
  opacity: .6;
  pointer-events: none;
}

/* Success state */
.contact-form__success {
  display: none;
}

.contact-form.is-sent > :not(.contact-form__success) {
  display: none;
}

.contact-form.is-sent {
  justify-content: center;
}

.contact-form.is-sent .contact-form__success,
.contact-form.is-sent + .contact-form__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 30rem;
}

html:not(.has-gsap) .contact-form.is-sent .contact-form__success {
  animation: success-in .8s var(--ease-out) both;
}

.contact-form__success > svg,
.contact-form__success-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: .875rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink);
}

.contact-form__success-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-form__success p {
  color: var(--steel);
}

/* Long e-mail address: let the text wrap inside the link so the arrow stays beside it */
.contact-form__success .link-arrow {
  max-width: 100%;
}

.contact-form__success .link-arrow > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Error line main.js appends when a configured data-endpoint fails */
.contact-form__status {
  margin-top: -1.25rem;
  color: var(--brand-deep);
  font-weight: 500;
}


/* ==========================================================================
   20  Page-level components (6.15)
   ========================================================================== */

/* Statement */
.statement__text {
  max-width: 52rem;
}

.statement__text + .btn,
.statement__text + .btn-row,
.statement .btn-row {
  margin-top: 2.5rem;
}

/* Process (on .bg-graphite) */
.process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.process__item {
  padding-top: 2rem;
  border-top: 1px solid var(--line-dark);
}

.process__item .h3,
.process__item h3 {
  margin-top: 1.5rem;
}

.process__item p {
  margin-top: .75rem;
}

.process__item p.c-mist,
.bg-graphite .process__item p,
.bg-night .process__item p {
  color: var(--mist);
}

/* Mission (on .bg-brand) */
.mission {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
}

.mission__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  align-items: center;
}

/* Same grid when .mission (or its container) holds the mark directly */
.mission:has(> .mission__mark),
.mission .container:has(> .mission__mark) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  align-items: center;
}

.mission__mark {
  justify-self: center;
  width: clamp(12rem, 30vw, 26rem);
  --logo-1: rgba(255, 255, 255, .95);
  --logo-2: rgba(255, 255, 255, .75);
  --logo-3: var(--night);
}

.mission__mark .logo__mark,
.mission__mark svg {
  display: block;
  width: 100%;
  height: auto;
}


.mission__text {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.mission__text .t-statement {
  max-width: 36rem;
}

/* Value cards */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.value-card {
  display: flex;
  flex-direction: column;
  min-height: 20rem;
  padding: 2.5rem;
  border-radius: var(--radius);
  background: var(--silver);
  color: var(--ink);
}

.bg-silver .value-card {
  background: var(--white);
}

.value-card .h3,
.value-card h3 {
  margin-top: auto;
  padding-top: 3rem;
}

.value-card p {
  margin-top: .75rem;
  color: var(--steel);
}

/* Media split */
.media-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  align-items: center;
}

.media-split__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--silver);
}

.media-split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-split__body,
.media-split__text {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  justify-items: start;
}

.media-split__body p,
.media-split__text p {
  color: var(--steel);
}

/* Contact blocks */
.contact-blocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.contact-block {
  padding-top: 2rem;
  border-top: 1px solid var(--pearl);
}

.contact-block > svg,
.contact-block__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brand);
}

.contact-block__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-block .h3,
.contact-block h3 {
  margin-top: 1.5rem;
}

.contact-block p,
.contact-block address {
  margin-top: .75rem;
  font-size: 1.125rem;
  line-height: 1.4;
}

.contact-block p + p {
  margin-top: .5rem;
}

.contact-block a {
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: color .3s var(--ease-out);
}

.contact-block .link-arrow {
  margin-top: 1rem;
  color: var(--brand-text);
}

@media (hover: hover) {
  .contact-block a:not(.link-arrow):hover {
    color: var(--brand-deep);
  }
}

/* Prose (privacy) */
.prose {
  max-width: 46rem;
}

.prose h2 {
  margin-top: 3rem;
  font-size: clamp(1.5rem, 1.38rem + .5vw, 1.75rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .01em;
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.prose > :first-child {
  margin-top: 0;
}

.prose p,
.prose ul,
.prose ol {
  margin-top: 1rem;
  color: var(--steel);
  line-height: 1.6;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: .5rem;
}

.prose li::marker {
  color: var(--brand);
}

.prose strong {
  color: var(--ink);
  font-weight: 500;
}

.prose a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .prose a:hover {
    color: var(--ink);
  }
}

/* Note */
.note {
  margin-top: 3rem;
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  background: var(--silver);
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.4;
}

.bg-silver .note {
  background: var(--white);
}

.note strong {
  font-weight: 500;
}

.note > p {
  max-width: 60rem;
}

.prose .note {
  margin-top: 2rem;
  color: var(--ink);
}

.note a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: .2em;
}


/* ==========================================================================
   21  Motion: JS-gated initial states
   Hidden states apply ONLY when JS has confirmed GSAP (html.has-gsap) and
   motion is allowed, so content is always visible without JS.
   Contract for main.js: animate TO the visible state (gsap.to / fromTo).
   Once GSAP writes an inline style on the element (or adds .is-in), these
   rules stop applying, so clearProps afterwards is safe.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html.has-gsap [data-reveal]:not([style]):not(.is-in) {
    opacity: 0;
    transform: translate3d(0, 2.5rem, 0);
  }
}


/* ==========================================================================
   22  Keyframes
   ========================================================================== */

/* Brick motion (replaces the Muilwijk gear) */
@keyframes brick-lay {
  from {
    opacity: 0;
    transform: translateY(-35%) scale(.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes brick-settle {
  0% { transform: none; }
  40% { transform: translateY(-6%); }
  100% { transform: none; }
}

@keyframes brick-shimmer {
  0%, 82%, 100% { opacity: 1; }
  88% { opacity: .55; }
}

@keyframes word-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes deco-draw {
  0% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  99.9% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

@keyframes deco-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes loader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes mmenu-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mmenu-item {
  from {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes success-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   23  Responsive
   ========================================================================== */

/* --- Desktop: the mobile menu never shows, even if left open on resize --- */
@media (min-width: 992px) {
  .mmenu {
    display: none !important;
  }

  body.is-menu-open {
    overflow: visible;
  }
}

/* --- Wide-tablet / small desktop: keep the nav on one line --- */
/* Laptop widths: keep phone + Route visible; make room by dropping the CTA button
   (Contact stays in the menu) and tightening spacing. */
@media (min-width: 992px) and (max-width: 1319px) {
  .nav__cta { display: none; }
}
@media (min-width: 1320px) and (max-width: 1439px) {
  .nav .logo--h { --logo-h: 2.25rem; }
  .nav__links { gap: 1rem; }
  .nav__actions { gap: 1rem; }
  .nav__secondary { gap: .75rem; }
}
@media (min-width: 992px) and (max-width: 1149px) {
  .nav .logo--h { --logo-h: 2.25rem; }
  .nav__links { gap: 1rem; }
  .nav__actions { gap: 1rem; }
  .nav__secondary { gap: .75rem; }
}
@media (min-width: 992px) and (max-width: 1059px) {
  .nav .logo--h { --logo-h: 2rem; }
  .nav__link { font-size: .9375rem; }
}

@media (max-width: 1149px) {
  .nav__menu {
    margin-left: 1.75rem;
  }

  .sector-slider__card {
    width: 30rem;
  }
}

/* --- Tablet (<=991) --- */
@media (max-width: 991px) {
  :root {
    --gutter: 2.5rem;
    --nav-h: 4.5rem;
    --pad-xl: 7.5rem;
    --pad-l: 5rem;
    --pad-m: 4rem;
  }

  /* Layout */
  .split {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }

  .split > :empty {
    display: none;
  }

  .split > .slider-controls,
  .split > .slider-nav {
    order: 1;
  }

  /* Nav */
  .nav__menu {
    display: none;
  }

  .nav__burger {
    display: block;
  }

  .nav__actions {
    gap: 1rem;
  }

  /* Subpage hero */
  .phero__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

  .phero__aside .scroll-btn {
    margin-top: 2.5rem;
  }

  /* Services */
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Why (stacked) */
  .why__steps {
    max-width: 40rem;
  }

  /* Sector tiles */
  .sector-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Featured */
  .featured__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .featured__content {
    padding: 2.5rem 0 0;
    gap: 3.5rem;
  }

  .featured__media {
    min-height: 0;
    height: 22rem;
  }

  .quote__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  /* Offers */
  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Odd last card spans the row instead of leaving an empty cell */
  .offer-grid > :last-child:nth-child(odd):not([hidden]) {
    grid-column: 1 / -1;
  }

  .offer-grid > :last-child:nth-child(odd):not([hidden]) .offer-card__media {
    aspect-ratio: 21 / 9;
  }

  /* Footer */
  .footer__main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4rem;
    padding-bottom: 5rem;
  }

  /* Sector slider */
  .sector-slider {
    min-height: 0;
  }

  .sector-slider__media {
    width: 100%;
    height: 60vw;
    min-height: 18rem;
  }

  .sector-slider__card {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: -3rem 1rem 0;
  }

  /* Contact card */
  .contact-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .contact-card__map {
    height: 22rem;
  }

  .contact-form {
    padding: 2.5rem 1.5rem;
  }

  /* 6.15 */
  .process {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .mission__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .mission:has(> .mission__mark),
  .mission .container:has(> .mission__mark) {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .mission__mark {
    justify-self: start;
  }

  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value-card {
    min-height: 16rem;
  }

  .media-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .media-split__img {
    max-width: 36rem;
  }
}

/* --- Mobile (<=767) --- */
@media (max-width: 767px) {
  :root {
    --gutter: 1.25rem;
    --pad-xl: 5rem;
    --pad-l: 4rem;
    --pad-m: 3rem;
    --phero-pt: 9rem;
    --phero-pb: 4.5rem;
  }

  /* Layout */
  .head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .spacer-l  { height: 3.5rem; }
  .spacer-xl { height: 5rem; }

  /* Home hero */
  .hero__img {
    object-position: 45% 50%;
  }

  .hero__inner {
    padding-bottom: 3rem;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__aside {
    grid-column: 1;
    margin-top: 1.5rem;
  }

  .hero__aside .scroll-btn {
    margin-top: 2rem;
  }

  /* Subpage hero */
  .phero__deco svg {
    top: -4rem;
    right: -8rem;
    width: 24rem;
    height: 24rem;
    opacity: .35;
  }

  .phero__media {
    margin-top: 3rem;
  }

  .phero__img {
    aspect-ratio: 4 / 3;
  }

  .after-media {
    padding-top: 6rem;
  }

  .phero--contact .contact-card-row {
    margin-top: 3rem;
  }

  /* Services */
  .svc-card {
    padding: 2rem;
  }

  .svc-card__body {
    margin-top: 4.5rem;
  }

  .slider__track {
    gap: 1rem;
  }

  .slider__track > * {
    flex-basis: min(85vw, 22rem);
  }

  .slider .svc-card {
    min-height: 28rem;
  }

  .svc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-grid .svc-card__body {
    margin-top: 3rem;
  }

  /* Why (stacked) */
  .why__stage {
    padding-top: 3.5rem;
    padding-bottom: 5rem;
  }

  .why__steps {
    gap: 3.5rem;
  }

  .why__step-media {
    margin-bottom: 1.5rem;
  }

  .why__step p {
    margin-top: 1rem;
  }

  /* Sector tiles */
  .sector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .sector-tile {
    height: 7rem;
  }

  /* Featured + quote */
  .featured__top {
    padding-block: 2rem;
  }

  .quote {
    padding-block: 4rem;
  }

  .quote__avatar {
    width: 4rem;
    height: 4rem;
  }

  .quote__avatar .logo__mark {
    width: 2.375rem;
  }

  /* Offers */
  .offer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer-grid > :last-child:nth-child(odd):not([hidden]) {
    grid-column: auto;
  }

  .offer-grid > :last-child:nth-child(odd):not([hidden]) .offer-card__media {
    aspect-ratio: 16 / 10;
  }

  .offer-card__body {
    padding: 1.5rem;
  }

  .offer-card__meta {
    padding-top: 2.5rem;
  }

  /* CTA */
  .cta {
    padding-top: 4rem;
  }

  .cta__link {
    gap: 1rem;
    padding-bottom: 2.5rem;
  }

  .cta__arrow {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* Footer */
  .footer > .wrap {
    padding-top: 5rem;
  }

  .footer__main {
    padding-bottom: 4rem;
  }

  .footer__mid {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Sector slider */
  .sector-slider__media {
    height: 70vw;
    min-height: 15rem;
  }

  .sector-slider__card {
    margin: -2rem .5rem 0;
    padding: 2rem 1.5rem;
  }

  .sector-slider__slides {
    margin-top: 1.5rem;
  }

  /* Contact: the address chip moves BELOW the map on phones, so it no
     longer covers the OpenStreetMap attribution (licence requirement). */
  .contact-card__map {
    height: auto;
    min-height: 0;
    padding-top: 18rem;
  }

  .contact-card__map iframe {
    bottom: auto;
    height: 18rem;
  }

  .contact-card__pin {
    top: 9rem;
  }

  .contact-card__addr {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    padding: 1.25rem 1.5rem;
    border-radius: 0;
    border-bottom: 1px solid var(--pearl);
    box-shadow: none;
  }

  .contact-form {
    gap: 2rem;
  }

  .contact-form__grid,
  .contact-form__fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .contact-form__footer .btn {
    width: 100%;
  }

  .contact-form__consent,
  .contact-form__footer > p {
    max-width: none;
  }

  .contact-blocks {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  /* 6.15 */
  .value-card {
    padding: 2rem;
  }

  .note {
    padding: 1.25rem 1.5rem;
  }
}

/* --- Narrow phones: nav button moves into the mobile menu --- */
@media (max-width: 639px) {
  .nav__actions .btn {
    display: none;
  }
}

/* --- Small (<=479) --- */
@media (max-width: 479px) {
  .nav .logo--h {
    --logo-h: 2.375rem;
  }

  .h1,
  .phero h1,
  .hero__title {
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .footer__cols {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }

  .value-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .value-card {
    min-height: 14rem;
  }

  .btn-row .btn {
    width: 100%;
  }

  .contact-card__pin {
    width: 2.5rem;
    height: 2.5rem;
  }

  .contact-card__pin .logo__mark {
    width: 1.5rem;
  }

  .filter__btn {
    padding-inline: 1rem;
  }

  /* Loader: keep "100%" and the tagline on one row at 360px */
  .loader__meta .t-mono {
    letter-spacing: .1em;
  }

  .loader__meta > :last-child {
    text-align: right;
  }
}


/* ==========================================================================
   24  Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .loader {
    display: none !important;
  }

  .logo__brick,
  .logo__word,
  .logo__sub,
  .phero__deco svg,
  .phero__deco .deco-draw,
  .mmenu,
  .mmenu__links > *,
  .mmenu__meta,
  .mmenu .btn,
  .contact-form.is-sent .contact-form__success,
  .contact-form.is-sent + .contact-form__success {
    animation: none !important;
  }

  .phero__deco .deco-draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .nav__logo .logo__brick {
    transition: none;
  }

  [data-reveal],
  [data-reveal-stagger] > *,
  .why__media img,
  .why__step,
  .sector-slider__slide,
  .sector-slider__media img,
  .sector-slider__media img.is-active {
    transition: none !important;
  }

  .phero__img img {
    transform: none;
  }

  .btn::before,
  .btn__icon svg,
  .offer-card__media img,
  .cta__arrow,
  .svc-card__icon {
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   25  Print
   ========================================================================== */

@media print {
  .nav,
  .mmenu,
  .loader,
  .skip-link,
  .phero__deco,
  .scroll-btn,
  .slider-nav,
  .slider__nav,
  .sector-slider__nav,
  .cta,
  .contact-card__map iframe {
    display: none !important;
  }

  .hero,
  .phero,
  .bg-night,
  .bg-graphite,
  .footer,
  .featured,
  .quote {
    background: none !important;
    color: var(--ink) !important;
  }

  .hero {
    height: auto;
    min-height: 0;
  }

  .hero__media,
  .hero__shade {
    display: none;
  }

  .phero {
    padding-top: 2rem;
  }

  .slider__track {
    flex-wrap: wrap;
    overflow: visible;
  }
}

/* ==========================================================================
   Project + service catalogue (generated pages; class names kept from the fork)
   ========================================================================== */
.gen-card__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.gen-card .h3 { margin-top: 1.25rem; }
.gen-specs {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; gap: .5rem;
}
.gen-specs li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--silver);
  font-size: 1rem; line-height: 1.25;
}
.gen-specs__k { color: var(--steel); }
.gen-specs__v { font-weight: 500; text-align: right; }
.gen-card__text { margin-top: .75rem; }
.gen-card .offer-card__meta { margin-top: auto; padding-top: 2rem; }
.gen-card .offer-card__body { display: flex; flex-direction: column; flex: 1; }
.gen-card { height: 100%; }
.gen-card__tags--dark .tag { background: rgba(255,255,255,.1); color: var(--white); }

/* Detail page */
.phero--compact { padding-bottom: 5rem; }
.phero--compact .phero__aside .gen-card__tags { margin-bottom: 1.25rem; }
.gen-back {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--mist); margin-bottom: 2.5rem;
  transition: color .3s var(--ease-out);
}
@media (hover: hover) { .gen-back:hover { color: var(--white); } }
.gen-detail__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 4rem; align-items: start;
}
.gen-gallery { margin: 0; }
.gen-gallery__main {
  border-radius: var(--radius); overflow: hidden; background: var(--silver);
  aspect-ratio: 4 / 3;
}
.gen-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gen-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem; }
.gen-gallery__thumbs img { border-radius: .375rem; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gen-detail__info { position: sticky; top: calc(var(--nav-h) + 2rem); }
.spec-table { margin: 1.5rem 0 0; border-top: 1px solid var(--pearl); }
.spec-table__row {
  display: grid; grid-template-columns: 10rem 1fr; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--pearl);
}
.spec-table dt { color: var(--steel); font-size: 1rem; }
.spec-table dd { margin: 0; font-weight: 500; }
.gen-detail__ask {
  margin-top: 2.5rem; padding: 2rem; border-radius: var(--radius);
  background: var(--silver);
}
.gen-detail__ask .t-regular { margin-top: .5rem; }
.gen-detail__ask .btn-row { margin-top: 1.5rem; }
.gen-more { background: var(--silver); }
.gen-more .offer-card { background: var(--white); }
@media (max-width: 991px) {
  .gen-detail__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .gen-detail__info { position: static; }
}
@media (max-width: 479px) {
  .spec-table__row { grid-template-columns: 7.5rem 1fr; }
  .gen-detail__ask { padding: 1.5rem; }
}

/* ==========================================================================
   Transparent header over the (dark) hero; solid white with dark text once scrolled
   ========================================================================== */
.nav {
  transition:
    height .4s var(--ease-out),
    box-shadow .4s var(--ease-out),
    background-color .4s var(--ease-out),
    color .4s var(--ease-out);
}
body:not(.is-menu-open) .nav:not(.is-scrolled) {
  background: transparent;
  color: var(--white);
  box-shadow: none;
}
body:not(.is-menu-open) .nav:not(.is-scrolled) .nav__logo,
body:not(.is-menu-open) .nav:not(.is-scrolled) .logo {
  color: var(--white);
  --logo-word: #fff;
  --logo-sub: var(--brand-light);
}
body:not(.is-menu-open) .nav:not(.is-scrolled) .nav__link::after { background: currentColor; }
body:not(.is-menu-open) .nav:not(.is-scrolled) .nav__divider { background: rgba(255, 255, 255, .3); }
body:not(.is-menu-open) .nav:not(.is-scrolled) .nav__burger { color: var(--white); }
/* Soft top fade so white header text stays legible on bright photos */
body:not(.is-menu-open) .nav:not(.is-scrolled)::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem;
  background: linear-gradient(180deg, rgba(26, 21, 18, .45), rgba(26, 21, 18, 0));
  pointer-events: none;
  z-index: -1;
}
@media (hover: hover) {
  }

/* Phones/tablets: phone number + Route live in the mobile menu, not the header bar */
@media (max-width: 991px) {
  .nav__secondary { display: none; }
}

/* Home hero: animated network overview (canvas) */
.hero__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero__canvas.is-ready { opacity: 1; }
.hero:has(.hero__canvas) .hero__shade {
  background:
    linear-gradient(180deg, rgba(26, 21, 18, .35) 0%, rgba(26, 21, 18, 0) 30%, rgba(26, 21, 18, 0) 55%, rgba(26, 21, 18, .8) 100%),
    linear-gradient(90deg, rgba(26, 21, 18, .55) 0%, rgba(26, 21, 18, 0) 45%),
    radial-gradient(60% 55% at 0% 100%, rgba(199, 104, 40, .35), transparent 70%);
}

/* ==========================================================================
   UX pass: hero CTAs, mobile action bar, catalogue extras, sector strip, slider count
   ========================================================================== */

/* 1. Hero buttons */
.hero__ctas { margin-top: 2.5rem; }
.hero .btn--outline { --btn-fg: var(--white); --btn-ring: rgba(255, 255, 255, .35); }
@media (hover: hover) { .hero .btn--outline:hover { --btn-ring: var(--white); } }
@media (max-width: 479px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
}

/* 2. Sticky call bar on phones */
.mbar { display: none; }
@media (max-width: 767px) {
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: 1fr 1.4fr; gap: .5rem;
    padding: .625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--silver);
    box-shadow: 0 -.5rem 1.5rem rgba(30, 24, 20, .08);
    transform: translateY(110%);
    transition: transform .45s var(--ease-out);
  }
  .mbar.is-visible { transform: none; }
  .is-menu-open .mbar { transform: translateY(110%); }
  .mbar__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: 3rem; border-radius: 2rem;
    font-size: 1rem; font-weight: 500; line-height: 1;
  }
  .mbar__btn svg { width: 1rem; height: 1rem; }
  .mbar__btn--call { border: 1px solid var(--pearl); color: var(--ink); }
  .mbar__btn--call svg { color: var(--brand); }
  .mbar__btn--quote { background: var(--brand); color: var(--white); }
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
}

/* 3. Contact: form first on phones/tablets, map after */
@media (max-width: 991px) {
  .contact-form { order: 1; }
  .contact-card__map { order: 2; }
}

/* 5. Catalogue: general offers look different from real fleet units */
.gen-card--extra {
  background: var(--night);
  border-color: var(--night);
  color: var(--white);
}
.gen-card--extra .gen-card__icon {
  display: flex; align-items: center;
  height: 10rem; padding: 0 2rem;
  color: var(--brand);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.gen-card--extra .gen-card__icon svg { width: 3.5rem; height: 3.5rem; }
.gen-card--extra .tag { background: rgba(255, 255, 255, .1); color: var(--white); }
.gen-card--extra .gen-card__text { color: var(--mist); }
.gen-card--extra .offer-card__meta { color: var(--white); }
.gen-card--extra .offer-card__arrow { color: var(--brand); }
@media (hover: hover) { .gen-card--extra:hover { box-shadow: 0 1.25rem 2.5rem rgba(30, 24, 20, .25); } }

/* 6. Spec table: note row for the remaining specs */
.spec-table__row--note dt, .spec-table__row--note dd { font-weight: 400; }

/* 12. Services slider position counter */
.slider-count {
  margin-left: .75rem; align-self: center;
  color: var(--steel); font-variant-numeric: tabular-nums; letter-spacing: .04em;
}

/* 13. Slightly larger, clearer small text */
.link-arrow { font-size: 1.0625rem; }
.offer-card__meta { color: var(--ink); font-weight: 500; }
.offer-card__meta .offer-card__arrow { color: var(--brand); }
@media (max-width: 767px) {
  .svc-card .t-regular, .offer-card .t-regular { font-size: 1.0625rem; line-height: 1.45; }
}

/* Hero: single CTA directly under the title (desktop); after the intro text on phones */
.hero__ctas { grid-column: 1; grid-row: 2; align-self: start; margin-top: 2.5rem; display: flex; }
.hero__aside { grid-row: 2; }
@media (max-width: 767px) {
  .hero__ctas { grid-row: auto; order: 3; margin-top: 1.75rem; }
  .hero__aside { grid-row: auto; order: 2; }
  .hero__ctas .btn { justify-content: center; }
}
@media (max-width: 479px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
}

/* Subpage header line art: scripted morphing contour lines (see main.js).
   The orange (active) line steps outward on scroll; a pulse runs around it. */
.phero__deco svg.deco--contour { animation: none; opacity: .9; }
.phero__deco .contour-line {
  stroke: rgba(255, 255, 255, var(--a, .2));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke .35s var(--ease-out), stroke-width .35s var(--ease-out);
  animation: deco-draw 2.2s var(--ease-io) both;
  animation-delay: calc(.1s + var(--i, 0) * .09s);
}
.phero__deco .contour-line.is-active { stroke: var(--brand); stroke-width: 1.5; }
.phero__deco .contour-line.is-clicking { stroke-width: 4; transition-duration: .08s; }
.phero__deco .contour-pulse {
  stroke: #FF6A50;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: .045 .955;
  filter: drop-shadow(0 0 4px rgba(199, 104, 40, .9));
  opacity: 0;
  animation: contour-pulse-in .6s var(--ease-out) 2s both;
}
.phero__deco .contour-pulse--tail { stroke: var(--brand); stroke-width: 2; stroke-dasharray: .12 .88; filter: none; }
@keyframes contour-pulse-in { to { opacity: 1; } }
.phero__deco .contour-pulse--tail { animation-name: contour-tail-in; }
@keyframes contour-tail-in { to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .phero__deco .contour-line { animation: none; stroke-dashoffset: 0; }
  .phero__deco .contour-pulse { display: none; }
}

/* Intro loader: faint morphing contour lines behind the logo */
.loader__contour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.loader__contour path {
  stroke: rgba(30, 24, 20, var(--a, .1));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: deco-draw 1.6s var(--ease-io) both;
  animation-delay: calc(var(--i, 0) * .06s);
}
.loader__logo { position: relative; z-index: 1; }
.loader__foot { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .loader__contour path { animation: none; stroke-dashoffset: 0; } }

/* Subpage header line art: large overlapping circles; a segment continuously draws itself
   around each circle (grows, travels, retracts). No scroll-linked transforms. */
.phero__deco svg.deco--orbit {
  top: 0; right: 0; left: 0; bottom: 0;
  width: 100%; height: 100%;
  opacity: 1; animation: none;
}
.deco--orbit .orbit { vector-effect: non-scaling-stroke; stroke-width: 1.5; stroke-linecap: round; }
.deco--orbit .orbit--faint { stroke: rgba(255, 255, 255, .08); }
.deco--orbit .orbit--sweep {
  stroke-dasharray: 0 1;
  animation: orbit-sweep var(--d, 12s) cubic-bezier(.65, 0, .35, 1) var(--delay, 0s) infinite;
}
.deco--orbit .orbit--a { stroke: rgba(199, 104, 40, .95); stroke-width: 3; --d: 11s; }
.deco--orbit .orbit--b { stroke: rgba(199, 104, 40, .75); stroke-width: 2.5; --d: 14s; --delay: -4s; }
.deco--orbit .orbit--c { stroke: rgba(255, 255, 255, .32); stroke-width: 2; --d: 9s; --delay: -6s; }
@keyframes orbit-sweep {
  0%   { stroke-dasharray: 0 1;     stroke-dashoffset: 0; }
  45%  { stroke-dasharray: .55 .45; stroke-dashoffset: -.15; }
  100% { stroke-dasharray: 0 1;     stroke-dashoffset: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .deco--orbit .orbit--sweep { animation: none; stroke-dasharray: .45 .55; }
}

/* Overscroll / rubber-band area matches the footer instead of flashing white */
html { background: var(--night); }
body { background: var(--white); }

/* Desktop header logo: same visual height as the pill controls on the right */
@media (min-width: 1440px) {
  .nav .logo--h { --logo-h: 2.375rem; }
}


/* ==========================================================================
   Highfield additions
   ========================================================================== */

/* Intro loader: a stretcher-bond wall is laid course by course (bottom first, each course
   worked in the opposite direction), the logo goes up on a slate plaque set in the wall. */
.loader__wall { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.loader__wall rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: wall-lay .5s var(--ease-out) both;
  animation-delay: calc(.1s + var(--c) * 85ms + var(--k) * 22ms);
}
.loader__wall::after { content: none; }
.loader__panel::before {
  /* soft vignette so the plaque and the foot read clearly over the wall */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(26, 21, 18, .35), rgba(26, 21, 18, 0) 70%),
    linear-gradient(0deg, rgba(26, 21, 18, .92) 0, rgba(26, 21, 18, .55) 9rem, rgba(26, 21, 18, 0) 16rem);
  pointer-events: none;
}
.loader__plaque {
  position: relative;
  z-index: 2;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4.5vw, 3.5rem);
  border-radius: 4px;
  background: var(--night);
  box-shadow: 0 0 0 10px var(--night), 0 2rem 4rem rgba(0, 0, 0, .45);
  animation: plaque-in .7s var(--ease-out) .35s both;
}
.loader__foot { z-index: 2; }
.loader__track { background: rgba(255, 255, 255, .14); }
.loader__bar { background: var(--brand-light); }
.loader__meta { color: var(--mist); }
@keyframes wall-lay {
  from { opacity: 0; transform: translateY(-40%) scale(1.04, .9); }
  70% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes plaque-in {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes course-draw { to { stroke-dashoffset: 0; } }

/* Subpage header drawing: light orange strokes on charcoal */
.phero__deco .deco--bond { color: var(--brand-light); }
.phero__deco .deco--bond .deco-draw { stroke: var(--brand-light); opacity: .55; }

/* Hero: two buttons */
.hero__ctas.btn-row { margin-top: 2.5rem; }

/* Footer social */
.footer__social-link { display: inline-grid; place-items: center; }

/* Area map: real county outlines (tools/make_map.py), drawn in when scrolled into view */
.area-map { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.area-map__fill { fill: #F4DCC7; stroke: #F4DCC7; stroke-width: .6; transition: fill .4s var(--ease-out); }
.area-map__county--bucks .area-map__fill { fill: #EDBF98; stroke: #EDBF98; }
.area-map__edge { fill: none; stroke: var(--brand); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.area-map__label { font: 700 22px/1 var(--display); fill: var(--ink); letter-spacing: -.01em; pointer-events: none; }
.area-map__town circle { fill: var(--steel); }
.area-map__town text { font-size: 12px; font-weight: 500; fill: #3F352E; letter-spacing: .02em; paint-order: stroke; stroke: rgba(255, 255, 255, .55); stroke-width: 2.5px; stroke-linejoin: round; }
.area-map__london text { font-size: 11px; font-weight: 500; fill: var(--steel); letter-spacing: .08em; text-transform: uppercase; }
.area-map__london path { fill: none; stroke: var(--steel); stroke-width: 1.2; stroke-linecap: round; }
.area-map__pin rect { fill: var(--brand); stroke: #fff; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease-out); }
.area-map__pin:hover rect, .area-map__pin:focus-visible rect { transform: scale(1.5); }
.area-map__pin:focus-visible { outline: none; }
.area-map__pin:focus-visible rect { stroke: var(--ink); stroke-width: 2; }
.area-map__home rect { fill: var(--night); }
.area-map__home path { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.area-map__home text { font-size: 13px; font-weight: 600; fill: var(--ink); }
.area-map__pulse { fill: none; stroke: var(--brand); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.area-map__legend text { font-size: 11px; font-weight: 500; fill: var(--steel); }
.area-map__legend-pin { fill: var(--brand); }
.area-map__legend-home { fill: var(--night); }
@media (hover: hover) { .area-map__county:hover .area-map__fill { fill: #EDBF98; } .area-map__county--bucks:hover .area-map__fill { fill: #E8AE7E; } }

/* Motion: edges draw, fills and labels fade in by county, then towns, pins and the Chesham pulse */
.js .area-map[data-area-map] .area-map__edge { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .area-map[data-area-map] .area-map__fill,
.js .area-map[data-area-map] .area-map__label,
.js .area-map[data-area-map] .area-map__town,
.js .area-map[data-area-map] .area-map__london,
.js .area-map[data-area-map] .area-map__legend { opacity: 0; transition: opacity .8s var(--ease-out); }
.js .area-map[data-area-map] .area-map__pin rect,
.js .area-map[data-area-map] .area-map__home rect,
.js .area-map[data-area-map] .area-map__home path,
.js .area-map[data-area-map] .area-map__home text { opacity: 0; }
.js .area-map.is-drawn .area-map__edge { animation: course-draw 2s var(--ease-io) forwards; animation-delay: calc(var(--i) * .18s); }
.js .area-map.is-drawn .area-map__fill { opacity: 1; transition-delay: calc(.5s + var(--i) * .18s); }
.js .area-map.is-drawn .area-map__label { opacity: 1; transition-delay: calc(1s + var(--i) * .15s); }
.js .area-map.is-drawn .area-map__town,
.js .area-map.is-drawn .area-map__london,
.js .area-map.is-drawn .area-map__legend { opacity: 1; transition-delay: 1.5s; }
.js .area-map.is-drawn .area-map__home rect,
.js .area-map.is-drawn .area-map__home path,
.js .area-map.is-drawn .area-map__home text { animation: map-drop .7s var(--ease-out) 1.2s both; }
.js .area-map.is-drawn .area-map__pin rect { animation: map-drop .6s var(--ease-out) both; animation-delay: calc(1.7s + var(--i) * .12s); }
.area-map.is-drawn .area-map__pulse { animation: map-pulse 2.8s var(--ease-out) 2s infinite; }
.area-map.is-drawn .area-map__pulse--2 { animation-delay: 3.4s; }
@keyframes map-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes map-pulse { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) { .area-map__pulse { animation: none !important; } }

.areas__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 4rem;
  align-items: center;
}
.areas__map { padding: 1rem; }
.county-grid .value-card { min-height: 0; gap: .75rem; }
.county-grid .value-card .h3 { margin-top: 2.5rem; }
.county-grid .value-card .link-arrow { margin-top: auto; padding-top: 1.5rem; }

/* Contact: area map instead of a street map */
.contact-card__map--area {
  display: grid;
  place-items: center;
  padding: 2.5rem 2rem 7rem;
  background: var(--silver);
}
.contact-card__map--area .area-map { max-width: 32rem; }
.contact-card__map--area .area-map__label { font-size: 24px; }

/* File upload: only offered when the form posts to an endpoint (mailto can't attach) */
.field--file { display: grid; gap: .75rem; }
.field__file-label { position: static; font-size: 1rem; color: var(--ink); transform: none; }
.field--file input[type="file"] {
  font: inherit;
  font-size: 1rem;
  color: var(--steel);
  padding: 1rem;
  border: 1px dashed var(--field-line);
  border-radius: var(--radius);
  background: var(--white);
}
.field--file input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: .625rem 1rem;
  border: 0;
  border-radius: 2rem;
  background: var(--ink);
  color: var(--white);
  font: inherit;
  cursor: pointer;
}
.contact-form:not([data-endpoint^="/"]):not([data-endpoint^="h"]) .field--file { display: none; }

/* Five-step process strip */
.process--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; list-style: none; }
@media (max-width: 1149px) { .process--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .process--5 { grid-template-columns: 1fr; } }

/* Detail pages: check lists, sub headings, other services */
.gen-detail__sub { margin-top: 2.5rem; }
.gen-detail__info > .t-large:first-child { margin-bottom: .5rem; }
.check-list { display: grid; gap: .75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.125rem; line-height: 1.4; }
.check-list svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; color: var(--brand); }
.svc-others { margin-top: 2.5rem; }
.svc-others .footer__title { color: var(--steel); }
.svc-others ul { display: grid; gap: .75rem; padding: 0; list-style: none; }
.gen-gallery__placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
  color: var(--steel);
}
.gen-gallery__placeholder .logo__mark { width: 6rem; }
.gen-gallery__placeholder a { color: var(--brand-text); }
.gen-card--extra .gen-card__icon { color: var(--brand-light); }

@media (max-width: 991px) {
  .areas__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}


/* Detail pages: long titles (project names) get a smaller display size */
.phero--compact .h1 { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem); line-height: 1.02; }

/* "From footings to chimney pots": 4 x 2 tiles (2 x 4 on phones), roomier than the 6-up grid */
.sector-tile { height: 10rem; gap: 1rem; font-size: 1.125rem; }
.sector-tile svg { width: 2.5rem; height: 2.5rem; }
@media (hover: hover) {
  .sector-tile { transition: border-color .4s var(--ease-out), background-color .4s var(--ease-out); }
  .sector-tile:hover { border-color: var(--brand); background: var(--silver); }
  .sector-tile:hover svg { color: var(--brand); }
}
@media (max-width: 767px) {
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .sector-tile { height: 8.5rem; font-size: 1rem; }
  .sector-tile svg { width: 2rem; height: 2rem; }
}

/* Intro plays once per visit: later visits to the home page skip straight to the hero */
.intro-seen .loader { display: none !important; }

/* Map on small screens: the SVG scales down to ~340px, so its text is set larger in map units
   (towns and the London pointer would be unreadable, so they go; dots stay for orientation) */
@media (max-width: 767px) {
  .area-map__label { font-size: 34px; }
  .area-map__town text, .area-map__london { display: none; }
  .area-map__home text { font-size: 22px; }
  .area-map__legend text { font-size: 19px; }
  .area-map__legend rect:last-of-type { transform: translateX(80px); }
  .area-map__legend text:last-of-type { transform: translateX(80px); }
  .contact-card__map--area .area-map__label { font-size: 34px; }
}