@charset "utf-8";
/* ==========================================================================
   Globe Group — site template
   Design tokens first. To re-skin for a sister company, change the values in
   :root under "Brand" (they are written out from site.config.json at build
   time) and nothing else in this file needs to move.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand — sampled from the logo artwork */
  --cyan:  #10CEEB;
  --sky:   #40C4EF;
  --steel: #349ABB;
  --deep:  #205D71;
  --ink:   #191919;

  /* Derived neutrals */
  --ink-900: #0F1417;              /* kept for photo scrims only — see below */
  /* Dark surfaces: the deepest logo tone (#205D71) taken 10% darker. Used for
     every solid dark section, the footer and the mobile drawer, so nothing on
     the site is flat black. */
  --surface-dark: #1D5466;
  --ink-800: #191919;
  --ink-700: #262B2E;
  --ink-600: #3A4145;
  --grey-500: #6B7478;
  --grey-400: #9AA3A7;
  --grey-300: #C9D1D4;
  --grey-200: #E3E8EA;
  --grey-100: #F1F4F5;
  --paper:   #FFFFFF;
  --shell:   #F7F9FA;

  /* Roles */
  --accent:      var(--cyan);
  --accent-ink:  #06333B;         /* text on cyan — 9.6:1 */
  --link:        var(--deep);
  --body-text:   #2B3134;
  --heading-text: var(--ink-800);

  /* Type */
  --font-display: 'Outfit', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.9rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.65rem + 2.2vw, 3.5rem);
  --step-5:  clamp(2.5rem, 1.7rem + 4vw, 4.75rem);

  /* Space */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --section-y: clamp(2.4rem, 1.4rem + 4vw, 4.7rem);

  /* Layout */
  --container: 1240px;
  --container-narrow: 780px;
  --gutter: clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);

  /* Form */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 14px;
  --cut: 22px;                     /* the angular corner cut from the logo facets */
  --border: 1px solid var(--grey-200);
  --shadow-sm: 0 1px 2px rgb(15 20 23 / 0.06), 0 2px 8px rgb(15 20 23 / 0.04);
  --shadow: 0 4px 12px rgb(15 20 23 / 0.07), 0 12px 32px rgb(15 20 23 / 0.07);
  --shadow-lg: 0 8px 24px rgb(15 20 23 / 0.1), 0 24px 64px rgb(15 20 23 / 0.12);
  --ring: 0 0 0 3px rgb(16 206 235 / 0.45);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

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

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

/* <picture> must fill its container, or the object-fit on the inner <img>
   has no height to resolve against and the image collapses. */
.hero__media picture,
.page-hero__media picture,
.card__media picture { display: block; width: 100%; height: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--heading-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cyan); }

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

::selection { background: var(--cyan); color: var(--accent-ink); }

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(1.7rem, 1rem + 2.7vw, 3rem); }
.section--shell { background: var(--shell); }
.section--ink { background: var(--surface-dark); color: var(--grey-300); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--cyan); color: var(--accent-ink);
  padding: 0.75rem 1.5rem;
  font-weight: 600; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: transform 0.18s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Section heading block */
.section-head { max-width: 62ch; margin-bottom: var(--sp-6); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: ''; width: 28px; height: 3px;
  background: var(--cyan); flex: none;
}
.section-head--center .eyebrow { justify-content: center; }
.section--ink .eyebrow { color: var(--sky); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--grey-500);
  margin-top: var(--sp-4);
}
.section--ink .lede { color: var(--grey-300); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--cyan);
  --btn-fg: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  min-height: 40px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--step-0);
  letter-spacing: 0.01em;
  border: 1.5px solid var(--btn-bg);
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
.btn:hover {
  background: var(--sky); border-color: var(--sky); color: var(--accent-ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgb(16 206 235 / 0.35);
}
.btn:active { transform: translateY(0); }

.btn--outline {
  --btn-bg: transparent; --btn-fg: var(--deep);
  border-color: var(--grey-300);
}
.btn--outline:hover {
  background: var(--deep); border-color: var(--deep); color: #fff;
  box-shadow: none;
}
.btn--ghost {
  --btn-bg: transparent; --btn-fg: #fff;
  border-color: rgb(255 255 255 / 0.45);
}
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ink-900); box-shadow: none; }
.btn--lg { padding: 0.82rem 1.7rem; font-size: var(--step-0); min-height: 46px; }
.btn--block { width: 100%; }

.btn .arrow { transition: transform 0.18s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 700;
  color: var(--deep); text-decoration: none;
  border-bottom: 2px solid var(--cyan);
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--cyan); }
.link-arrow svg { transition: transform 0.18s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Header
   ========================================================================== */
/* The whole block — contact strip and nav together — sticks to the top, and
   the logo is allowed to break upward across both rows. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  overflow: visible;
}

.topbar {
  position: relative; z-index: 1;      /* sits behind the header, see below */
  background: #EAF6FA;
  color: var(--deep);
  font-size: var(--step--1);
  /* Inset shadow rather than a border: a border sits outside the centred
     content box, which threw everything in the strip 1px high. */
  box-shadow: inset 0 -1px 0 #D3EAF2;
  /* Extra room beneath the row so the strip reads balanced against the
     oversized logo that overlaps it from the header below. */
  padding-bottom: 7px;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-5);
  min-height: 38px;
  /* Never let the strip stack into two or three rows — it wraps at high zoom
     and the whole bar grows, which is what made it look top-heavy. */
  flex-wrap: nowrap;
}
/* Fixed height + line-height 1 so the ink is optically centred: a default line
   box carries descender space, which pushes the visible text off centre. */
.topbar a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--deep); text-decoration: none; font-weight: 500;
  height: 28px; line-height: 1;
  white-space: nowrap;
}
.topbar a:hover { color: var(--steel); }
.topbar svg { color: var(--steel); flex: none; }

/* .topbar a sets padding-block and would otherwise win on specificity, so the
   pill's own vertical padding is stated at matching weight. */
.topbar .topbar__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-left: 0.35rem;
  padding: 0 0.9rem;
  height: 28px;
  line-height: 1;
  background: var(--cyan);
  color: var(--accent-ink) !important;
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.02em; white-space: nowrap;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.18s var(--ease);
}
.topbar__cta:hover { background: var(--sky); }
.topbar__cta svg { color: currentColor; }
@media (max-width: 860px) {
  .topbar .topbar__email span { display: none; }   /* keep the icon, drop the long address */
}
@media (max-width: 700px) {
  .topbar__inner { justify-content: center; gap: var(--sp-4); }
  .topbar .topbar__email,
  .topbar .topbar__cta { display: none; }
}

.header {
  position: relative; z-index: 2;      /* above .topbar so the logo overlaps it */
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--grey-200);
  transition: box-shadow 0.2s var(--ease);
}
.site-header[data-stuck='true'] .header { box-shadow: var(--shadow-sm); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: 76px;
}

/* Logo sits 20% larger and lifts up across the contact strip above it. */
.header__logo { flex: none; position: relative; z-index: 3; }
.header__logo img {
  width: auto;
  height: clamp(48px, 3.8vw + 31px, 65px);
}
@media (min-width: 700px) {
  .header__logo img {
    height: clamp(74px, 4.6vw + 42px, 100px);
    /* Lifts roughly three quarters of the way up the contact strip, so the
       mark clearly breaks the line between the two bars. */
    margin-top: calc(-1 * clamp(41px, 2.2vw + 28px, 55px));
    margin-bottom: calc(-1 * clamp(6px, 0.6vw + 3px, 12px));
  }
}

.nav { display: none; }
@media (min-width: 1000px) { .nav { display: block; } }
.nav__list {
  display: flex; align-items: center; gap: clamp(0.15rem, 0.9vw, 0.78rem);
  list-style: none; padding: 0; margin: 0;
}
/* Type, tracking and gaps tighten as the window narrows, so a nav with several
   long labels keeps fitting on one line instead of dropping to the menu
   button. The button is still the fallback if it genuinely cannot fit.
   The upper bounds matter as much as the lower ones: the content column stops
   growing at --container, so type that kept growing with the viewport would
   overflow the nav again on a wide screen. */
.nav__link {
  display: block;
  position: relative;
  padding: 0.6rem clamp(0.2rem, 0.3vw, 0.35rem);
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 0.35vw + 0.55rem, 0.86rem);
  font-weight: 600;
  letter-spacing: clamp(0.01em, 0.07vw, 0.03em);
  text-transform: uppercase;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: ''; position: absolute; left: clamp(0.2rem, 0.3vw, 0.35rem); right: clamp(0.2rem, 0.3vw, 0.35rem); bottom: 0.15rem;
  height: 3px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav__link:hover { color: var(--deep); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--deep); }


/* Mobile toggle */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: none; border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  color: var(--ink-800);
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }
.nav-toggle__bars { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
  transition: transform 0.22s var(--ease), top 0.22s var(--ease);
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--surface-dark);
  /* Clears the sticky contact strip + header, which the drawer sits beneath. */
  padding: clamp(8.5rem, 26vw, 10rem) var(--gutter) var(--sp-7);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity 0.24s var(--ease), visibility 0.24s var(--ease);
}
.mobile-nav[data-open='true'] { opacity: 1; visibility: visible; }
@media (min-width: 1000px) { .mobile-nav { display: none; } }
.mobile-nav__list { list-style: none; padding: 0; margin: 0 0 var(--sp-6); }
.mobile-nav__list li { border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: var(--step-2); font-weight: 700;
  color: #fff; text-decoration: none;
}
.mobile-nav__link[aria-current='page'] { color: var(--cyan); }
.mobile-nav__link:hover { color: var(--cyan); }
.mobile-nav__meta { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.mobile-nav__meta a {
  display: flex; align-items: center; gap: 0.65rem;
  color: var(--grey-300); text-decoration: none; font-weight: 500;
}
.mobile-nav__meta svg { color: var(--cyan); flex: none; }
body[data-nav-open='true'] { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--surface-dark);
  color: #fff;
  overflow: hidden;
}
.hero__slides { position: relative; display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(480px, 78vh, 780px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease);
}
.hero__slide[data-active='true'] { opacity: 1; visibility: visible; }
/* No JS: show the first slide */
.no-js .hero__slide:first-child { opacity: 1; visibility: visible; }

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgb(15 20 23 / 0.92) 0%, rgb(15 20 23 / 0.78) 38%, rgb(15 20 23 / 0.34) 68%, rgb(15 20 23 / 0.15) 100%),
    linear-gradient(to top, rgb(15 20 23 / 0.7), transparent 45%);
}
.hero__inner { position: relative; z-index: 1; padding-block: var(--sp-8) var(--sp-9); }
.hero__content { max-width: 40ch; }

/* Logo on the opening slide, above the headline. */
.hero__logo {
  width: auto;
  height: clamp(58px, 6vw, 96px);
  margin-bottom: clamp(0.85rem, 2vw, 1.4rem);
}

.hero__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sky);
  margin-bottom: 0.35rem;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: var(--sp-5);
}
.hero__title .rule {
  display: block; width: 84px; height: 4px;
  background: var(--cyan); margin-top: var(--sp-5);
}

/* Brand slide: the site photo at full brightness with the stacked logo
   centred. No scrim and no copy — the mark is the whole message. */
.hero__slide--brand .hero__media::after {
  background: linear-gradient(to bottom, rgb(15 20 23 / 0.12), transparent 22%);
}
.hero__inner--brand {
  display: grid;
  place-items: center;
  min-height: inherit;
  padding-block: var(--sp-8);
}
.hero__brandmark {
  width: auto;
  height: clamp(185px, 44vh, 430px);
  max-width: min(80vw, 520px);
  object-fit: contain;
  /* Layered shadows rather than a scrim: the photo stays at full brightness
     (as on the reference) while the darker 'CIVIL ENGINEERING' wordmark keeps
     its edge against the grey haul road behind it. */
  filter:
    drop-shadow(0 0 22px rgb(255 255 255 / 0.55))
    drop-shadow(0 2px 6px rgb(15 20 23 / 0.35))
    drop-shadow(0 8px 28px rgb(15 20 23 / 0.28));
}
.hero__strapline {
  font-size: var(--step-1);
  color: rgb(255 255 255 / 0.86);
  max-width: 46ch;
  margin-bottom: var(--sp-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Slider controls */
.hero__controls {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(1.5rem, 4vw, 3rem);
}
.hero__controls-inner { display: flex; align-items: center; gap: var(--sp-4); }
.hero__dots { display: flex; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.hero__dot {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: none; border: none;
}
.hero__dot::before {
  content: ''; display: block; width: 34px; height: 4px;
  background: rgb(255 255 255 / 0.35);
  transition: background 0.22s var(--ease);
}
.hero__dot[aria-current='true']::before { background: var(--cyan); }
.hero__dot:hover::before { background: #fff; }

/* Separator band — the chevron motif from the previous site: two detached
   arrowheads leading into a solid bar that runs to the right edge. The lead
   SVG keeps a fixed aspect so the chevrons never stretch; the bar simply
   flexes to fill whatever width is left. */
.hero__cut {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  height: clamp(30px, 4vw, 56px);
  display: flex; align-items: stretch;
  background: var(--paper);
  color: var(--steel);
  pointer-events: none;
}
.hero__cut-lead {
  flex: none;
  height: 100%; width: auto;
  aspect-ratio: 420 / 100;
  display: block;
  overflow: visible;
}
.hero__cut-fill { flex: 1 1 auto; background: currentColor; }

/* Page hero (interior pages) */
.page-hero {
  position: relative; background: var(--surface-dark); color: #fff; overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgb(15 20 23 / 0.93) 0%, rgb(15 20 23 / 0.8) 45%, rgb(15 20 23 / 0.5) 100%);
}
.page-hero__inner {
  position: relative; z-index: 1;
  padding-block: clamp(2.6rem, 1.6rem + 4.5vw, 4.8rem) clamp(3rem, 1.8rem + 5vw, 5.4rem);
}
.page-hero__content { max-width: 46ch; }
.page-hero h1 { color: #fff; }
.page-hero /* Logo on the opening slide, above the headline. */
.hero__logo {
  width: auto;
  height: clamp(58px, 6vw, 96px);
  margin-bottom: clamp(0.85rem, 2vw, 1.4rem);
}

.hero__eyebrow { font-size: var(--step-0); }
.page-hero__strapline {
  font-size: var(--step-1); color: rgb(255 255 255 / 0.85);
  margin-top: var(--sp-5); max-width: 52ch;
}

/* Breadcrumbs */
.breadcrumbs { font-size: var(--step--1); margin-bottom: var(--sp-5); }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumbs li + li::before { content: '/'; color: rgb(255 255 255 / 0.4); }
.breadcrumbs a { color: rgb(255 255 255 / 0.75); text-decoration: none; }
.breadcrumbs a:hover { color: var(--cyan); }
.breadcrumbs [aria-current='page'] { color: var(--cyan); }
.breadcrumbs--light a { color: var(--grey-500); }
.breadcrumbs--light li + li::before { color: var(--grey-400); }
.breadcrumbs--light [aria-current='page'] { color: var(--deep); }

/* ==========================================================================
   Accreditations — deliberately prominent. For a civils contractor these are
   the strongest trust signal on the page, so the marks are shown full colour
   and named rather than reduced to a faint logo strip.
   ========================================================================== */
.accreds {
  background: var(--shell);
  border-bottom: var(--border);
  padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
}
.accreds__inner { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); }
@media (min-width: 1000px) {
  .accreds__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: center; }
}
.accreds__intro h2 { font-size: var(--step-3); }
.accreds__text { margin-top: var(--sp-4); color: var(--grey-500); font-size: 0.98rem; }

/* Flex rather than grid so every row centres as it wraps — a grid leaves the
   short last row hanging to the left. */
.accreds__grid {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
}
.accred {
  flex: 0 1 clamp(132px, 15vw, 168px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem;
  text-align: center;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(0.9rem, 2vw, 1.35rem) 0.75rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.accred:hover { border-color: var(--grey-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.accred img {
  height: clamp(62px, 6.4vw, 86px);
  width: auto; max-width: 100%;
  object-fit: contain;
}
/* The Tree-Nation badges are wider than a logo cell, so they take two columns
   and sit flush — the widget draws its own card, we just give it the space. */
/* Marks column: the certification grid and the Tree-Nation badge row stack
   together, so the badges always sit directly under the marks rather than
   dropping into the text column at wide viewports. */
.accreds__marks { display: grid; gap: 0; }

/* Tree-Nation badges — always their own centred line beneath the marks. */
.accreds__badges {
  list-style: none; padding: 0;
  margin: clamp(0.75rem, 1.6vw, 1.15rem) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.accreds__badges li { display: grid; place-items: center; }
.accreds__badges .tn-widget { display: grid; place-items: center; }
.accreds__badges .tn-widget > * { max-width: 100%; }


.accred__name {
  font-family: var(--font-display);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--grey-500); line-height: 1.35;
}

/* Footer marks scale with them */
/* ==========================================================================
   FAQ page layout
   ========================================================================== */
.faqs-layout { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) {
  .faqs-layout { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .faqs-nav { position: sticky; top: 7rem; }
}
.faqs-nav__title {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-500);
  margin-bottom: var(--sp-3);
}
.faqs-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.faqs-nav a {
  display: block; padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--grey-200);
  font-weight: 500; text-decoration: none; color: var(--ink-700);
}
.faqs-nav a:hover { border-left-color: var(--cyan); color: var(--deep); background: var(--shell); }

.faqs-group + .faqs-group { margin-top: var(--sp-7); }
.faqs-group > h2 { font-size: var(--step-2); margin-bottom: var(--sp-4); }

/* ==========================================================================
   Cards
   ========================================================================== */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out),
              border-color 0.24s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--grey-300); }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grey-100); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.045); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2.5vw, 1.85rem); gap: var(--sp-3); }
.card__title { font-size: var(--step-2); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; }
.card__text { color: var(--grey-500); font-size: 0.97rem; }
.card__foot { margin-top: auto; padding-top: var(--sp-3); }

.card__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  background: var(--cyan); color: var(--accent-ink);
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.4rem 0.8rem; border-radius: var(--radius-sm);
}

.card__meta {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  font-size: var(--step--1); color: var(--grey-500);
}

/* Service card — the angular cut is the signature detail */
.service-card .card__media { aspect-ratio: 4 / 3; }
.service-card .card__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(15 20 23 / 0.55), transparent 55%);
}
.service-card__index {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 1;
  font-family: var(--font-display); font-size: 3.25rem; font-weight: 800;
  line-height: 1; color: rgb(255 255 255 / 0.28);
}
.service-card__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.service-card__list li {
  font-size: 0.83rem; font-weight: 500;
  color: var(--deep); background: var(--grey-100);
  border-radius: 100px; padding: 0.3rem 0.7rem;
}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stat { text-align: center; padding: var(--sp-5) var(--sp-4); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.8rem + 5vw, 5rem);
  font-weight: 800; line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-display);
  font-size: var(--step-0); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; margin-top: var(--sp-3);
}
@media (min-width: 720px) {
  .stat + .stat { border-left: 1px solid rgb(255 255 255 / 0.12); }
}

/* ==========================================================================
   Capability spec-sheet blocks (service pages)
   ========================================================================== */
.capability {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.capability + .capability { border-top: var(--border); }
@media (min-width: 860px) {
  .capability { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .capability:nth-child(even) .capability__media { order: 2; }
}
.capability__media {
  background: var(--grey-100);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid; place-items: center;
}
.capability__media img { max-height: 220px; width: auto; object-fit: contain; }

/* Photographic capability images fill the frame instead of floating inside it.
   The icon treatment above is right for line art, wrong for a photo. */
.capability__media--photo {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--grey-200);
}
.capability__media--photo picture { display: block; width: 100%; height: 100%; }
.capability__media--photo img {
  width: 100%; height: 100%;
  max-height: none;
  object-fit: cover;
}
.capability__index {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel);
  margin-bottom: var(--sp-3);
}
.capability h3 { margin-bottom: var(--sp-4); }
.spec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.spec-list li {
  display: flex; align-items: baseline; gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--grey-200);
  font-weight: 500;
}
.spec-list li::before {
  content: ''; flex: none;
  width: 8px; height: 8px;
  background: var(--cyan);
  transform: rotate(45deg) translateY(-1px);
}

/* ==========================================================================
   Prose (blog, project and policy bodies)
   ========================================================================== */
.prose { font-size: 1.06rem; line-height: 1.75; color: var(--body-text); }
.prose > * + * { margin-top: 1.25em; }
.prose h2 {
  font-size: var(--step-3); margin-top: 2.2em; margin-bottom: 0.1em;
  padding-top: 0.6em; border-top: var(--border);
}
.prose h3 { font-size: var(--step-2); margin-top: 1.9em; margin-bottom: 0.1em; }
.prose h4 { font-size: var(--step-1); margin-top: 1.6em; margin-bottom: 0.1em; }
.prose ul, .prose ol { padding-left: 1.35em; display: grid; gap: 0.55em; }
.prose li::marker { color: var(--steel); }
.prose ul li::marker { content: '▪  '; }
.prose a { color: var(--deep); font-weight: 500; }
.prose img { border-radius: var(--radius-lg); margin-block: 1.8em; }
.prose blockquote {
  margin-block: 1.8em;
  padding: var(--sp-5) var(--sp-6);
  background: var(--shell);
  border-left: 4px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step-1); line-height: 1.55;
  color: var(--ink-700);
}
.prose blockquote p + p { margin-top: 0.7em; }
.prose strong { color: var(--ink-800); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose :is(th, td) { border: 1px solid var(--grey-200); padding: 0.65rem 0.85rem; text-align: left; }
.prose th { background: var(--shell); font-family: var(--font-display); font-weight: 700; }
.prose figure { margin-block: 1.8em; }
.prose figcaption { font-size: var(--step--1); color: var(--grey-500); margin-top: 0.6em; }

.table-wrap { overflow-x: auto; }

/* Case study photography from the CIP project records. Most projects supplied
   usable originals; Waitrose survives only as 99x104 thumbnails, so that row
   keeps native sizing via --thumbs rather than being blown up. */
.photo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-4);
  margin-block: 2em 1em;
}
.photo-row figure { margin: 0; }
.photo-row img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--grey-200);
}
.photo-row figcaption {
  font-size: 0.82rem; line-height: 1.4;
  color: var(--grey-500); margin-top: 0.5rem;
}

/* Thumbnail-only fallback */
.photo-row--thumbs { display: flex; flex-wrap: wrap; }
.photo-row--thumbs figure { max-width: 132px; }
.photo-row--thumbs img { width: 99px; height: 104px; aspect-ratio: auto; }

.photo-row__note {
  font-size: 0.84rem; color: var(--grey-500);
  margin-top: 0 !important;
}

/* Key-takeaways box — the answer-first block that AI assistants quote */
.takeaways {
  background: var(--shell);
  border: var(--border);
  border-left: 4px solid var(--cyan);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  margin-block: var(--sp-6);
}
.takeaways h2 {
  font-size: var(--step-1) !important;
  margin: 0 0 var(--sp-3) !important;
  padding: 0 !important; border: 0 !important;
}
.takeaways ul { margin: 0; padding-left: 1.2em; display: grid; gap: 0.5em; }
.takeaways li { font-size: 0.98rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: 0; max-width: 80ch; }
.faq__item { border-bottom: var(--border); }
.faq__item:first-child { border-top: var(--border); }
.faq__q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: 1.25rem 0;
  background: none; border: none; text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 700; color: var(--heading-text);
}
.faq__q:hover { color: var(--deep); }
.faq__icon { flex: none; width: 22px; height: 22px; margin-top: 0.35rem; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--cyan);
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
}
.faq__icon::before { width: 100%; height: 3px; }
.faq__icon::after  { width: 3px; height: 100%; }
.faq__q[aria-expanded='true'] .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__item[data-open='true'] .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding-bottom: 1.35rem; color: var(--grey-500); max-width: 68ch; }
.faq__a p + p { padding-bottom: 0; margin-bottom: 1.35rem; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  background: linear-gradient(120deg, var(--deep) 0%, var(--steel) 62%, var(--sky) 130%);
  color: #fff;
  overflow: hidden;
}
/* Faded chevrons rather than pinstripes — the same arrowhead used by the
   separator, tiled and dropped right back so it reads as texture. */
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='100' viewBox='0 0 220 100'%3E%3Cpath fill='%23ffffff' fill-opacity='0.09' d='M0 0h50l50 50-50 50H0l50-50z'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.09' d='M120 0h50l50 50-50 50h-50l50-50z'/%3E%3C/svg%3E");
  /* Two chevrons only, full band height, sitting towards the left. */
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left var(--gutter) center;
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: grid; gap: var(--sp-6); align-items: center;
  padding-block: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem);
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1fr auto; gap: var(--sp-8); }
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: rgb(255 255 255 / 0.85); margin-top: var(--sp-3); max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.cta-band .btn { --btn-bg: #fff; --btn-fg: var(--deep); }
.cta-band .btn:hover { --btn-bg: var(--cyan); --btn-fg: var(--accent-ink); box-shadow: 0 6px 20px rgb(0 0 0 / 0.2); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.45rem; }
.field__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.94rem; color: var(--ink-700);
}
.field__label .req { color: #C0392B; }
.field__hint { font-size: var(--step--1); color: var(--grey-500); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 50px;
  background: var(--paper);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: var(--ring);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: #C0392B; }
.field__error { font-size: var(--step--1); color: #C0392B; font-weight: 500; }

.checkgroup { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.checkchip { position: relative; }
.checkchip input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.checkchip span {
  display: block;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--grey-300);
  border-radius: 100px;
  font-weight: 500; font-size: 0.95rem;
  transition: all 0.18s var(--ease);
}
.checkchip input:checked + span {
  background: var(--deep); border-color: var(--deep); color: #fff;
}
.checkchip input:focus-visible + span { box-shadow: var(--ring); }
.checkchip:hover span { border-color: var(--steel); }

.form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__status { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); font-weight: 500; }
.form__status[data-state='success'] { background: #E7F7EF; border: 1px solid #9AD9BC; color: #10603D; }
.form__status[data-state='error']   { background: #FDECEA; border: 1px solid #F0B0A8; color: #A32418; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   Contact detail cards
   ========================================================================== */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }

.detail-list { display: grid; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
.detail {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  background: var(--paper); border: var(--border); border-radius: var(--radius-lg);
}
.detail__icon {
  flex: none; width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--cyan); color: var(--accent-ink);
  border-radius: var(--radius);
}
.detail__label {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-500);
  margin-bottom: 0.15rem;
}
.detail__value { font-size: var(--step-1); font-weight: 500; color: var(--ink-800); }
.detail__value a { color: inherit; text-decoration: none; }
.detail__value a:hover { color: var(--cyan); }
.detail address { font-style: normal; font-size: var(--step-0); line-height: 1.6; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--surface-dark); color: var(--grey-300); }
.footer__main {
  display: grid; gap: var(--sp-6);
  padding-block: clamp(2.4rem, 1.6rem + 3vw, 3.8rem);
}
@media (min-width: 760px)  { .footer__main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .footer__main { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: var(--sp-6); } }

.footer__logo img { height: 52px; width: auto; margin-bottom: var(--sp-4); }
.footer__about { font-size: 0.95rem; max-width: 42ch; }

.footer__title {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  margin-bottom: var(--sp-4);
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.footer__list a { color: var(--grey-300); text-decoration: none; font-size: 0.95rem; }
.footer__list a:hover { color: var(--cyan); }

.footer__contact { display: grid; gap: var(--sp-4); }
.footer__contact a, .footer__contact address {
  display: flex; gap: 0.7rem; align-items: flex-start;
  color: var(--grey-300); text-decoration: none; font-style: normal; font-size: 0.95rem;
}
.footer__contact a:hover { color: var(--cyan); }
.footer__contact svg { color: var(--cyan); flex: none; margin-top: 3px; }

.footer__socials { display: flex; gap: 0.65rem; margin-top: var(--sp-5); }
.footer__socials a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / 0.18); border-radius: var(--radius);
  color: var(--grey-300);
}
.footer__socials a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--accent-ink); }

.footer__accreds {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.15rem);
  padding-block: var(--sp-6);
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
/* These marks carry fine detail and their own colour, so they sit on a white
   chip rather than being inverted into unreadable silhouettes. */
.footer__accreds img {
  height: 55px; width: auto;
  background: #fff;
  border-radius: var(--radius);
  padding: 0.45rem 0.6rem;
  opacity: 0.88;
  transition: opacity 0.22s var(--ease);
}
.footer__accreds img:hover { opacity: 1; }


.footer__bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5);
  align-items: center; justify-content: space-between;
  padding-block: var(--sp-5);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: 0.88rem;
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__bar a { color: var(--grey-300); text-decoration: none; }
.footer__bar a:hover { color: var(--cyan); }

/* Floating contact button */
.float-cta {
  position: fixed; right: 0; bottom: 12vh; z-index: 90;
  display: none;
  writing-mode: vertical-rl;
  padding: 1.25rem 0.85rem;
  background: var(--deep); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem;
  text-decoration: none;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--shadow);
}
.float-cta:hover { background: var(--cyan); color: var(--accent-ink); }
@media (min-width: 1100px) { .float-cta { display: block; } }

/* ==========================================================================
   Cookie consent
   ========================================================================== */
.consent {
  position: fixed; z-index: 120;
  left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  max-width: 640px;
  background: var(--paper);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
@media (min-width: 700px) { .consent { left: var(--gutter); right: auto; } }
.consent__inner { display: grid; gap: var(--sp-4); }
.consent__text { font-size: 0.94rem; line-height: 1.6; color: var(--ink-700); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.consent__actions .btn { flex: 1 1 auto; min-height: 46px; padding-block: 0.7rem; }

/* ==========================================================================
   Pagination / misc
   ========================================================================== */
.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: var(--sp-8); }
.pagination a, .pagination span {
  min-width: 46px; min-height: 46px;
  display: grid; place-items: center; padding-inline: 0.75rem;
  border: var(--border); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600;
  text-decoration: none; color: var(--ink-700);
}
.pagination a:hover { border-color: var(--cyan); color: var(--deep); }
.pagination [aria-current='page'] { background: var(--deep); border-color: var(--deep); color: #fff; }

.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  font-size: var(--step--1); color: var(--grey-500);
}
.post-meta .cat {
  background: var(--cyan); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-sm);
}

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.share__label { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-500); }
.share a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: var(--border); border-radius: var(--radius); color: var(--ink-700);
}
.share a:hover { background: var(--deep); border-color: var(--deep); color: #fff; }

/* Reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-reveal][data-revealed='true'] { opacity: 1; transform: none; }

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__slide { transition: none; }
}

@media print {
  .header, .topbar, .mobile-nav, .float-cta, .cta-band, .hero__controls, .footer__accreds { display: none !important; }
  body { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.85em; word-break: break-all; }
}