@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 — monochrome, built out from the cip logo mark itself: flat #8F8F8F
     letters over a near-black offset shadow. There is no second colour in CIP's
     identity, so the site doesn't invent one; hierarchy comes from tone,
     typography and photography instead. site.config.json writes these same five
     values inline at build time, so the stylesheet also works standalone. */
  --cyan:  #3E3E45;   /* graphite — the primary accent (buttons, rules, marks) */
  --sky:   #1E1E24;   /* near-black — hover states, i.e. darker not lighter */
  --steel: #78787F;   /* the logo grey — eyebrows, meta, icons */
  --deep:  #26262C;   /* headings and outline buttons */
  --ink:   #141418;   /* the logo's shadow black */

  /* On dark surfaces the graphite accent disappears, so anything set on
     --surface-dark uses this tint instead. */
  --accent-light: #C9C9D1;

  /* Derived neutrals */
  --ink-900: #0B0B0E;              /* kept for photo scrims only — see below */
  /* Dark surfaces: the graphite tone taken 10% darker. Used for every solid
     dark section, the footer and the mobile drawer. */
  --surface-dark: #22222A;
  --ink-800: #191919;
  --ink-700: #2B2B32;
  --ink-600: #45454D;
  --grey-500: #6E6E76;
  --grey-400: #9B9BA3;
  --grey-300: #CBCBD1;
  --grey-200: #E4E4E8;
  --grey-100: #F1F1F3;
  --paper:   #FFFFFF;
  --shell:   #F6F6F8;

  /* Roles */
  --accent:      var(--cyan);
  --accent-ink:  #FFFFFF;         /* text on the graphite accent — 10.4:1 */
  /* Monochrome, so a link cannot be told apart by colour. The browser
     underline is left on everywhere and does that job instead. */
  --link:        var(--deep);
  --body-text:   #2E2E34;
  --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(20 18 22 / 0.06), 0 2px 8px rgb(20 18 22 / 0.04);
  --shadow: 0 4px 12px rgb(20 18 22 / 0.07), 0 12px 32px rgb(20 18 22 / 0.07);
  --shadow-lg: 0 8px 24px rgb(20 18 22 / 0.1), 0 24px 64px rgb(20 18 22 / 0.12);
  --ring: 0 0 0 3px rgb(62 62 69 / 0.30);

  --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(--accent-light); }

.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: var(--grey-100);
  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 var(--grey-200);
  /* 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;
}

/* The cip mark is a compact square block with no wordmark of its own, so the
   header pairs it with the strapline set in Outfit rather than lifting the mark
   up across the contact strip the way a wide logo would. */
.header__logo { flex: none; position: relative; z-index: 3; text-decoration: none; }

.lockup { display: inline-flex; align-items: center; gap: 0.7rem; }
.lockup__mark {
  width: auto;
  height: clamp(34px, 1.6vw + 27px, 46px);
  display: block;
}
.lockup__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.55vw + 0.82rem, 1.22rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--deep);
  max-width: 6.5em;
  padding-left: 0.75rem;
  border-left: 2px solid var(--cyan);
}
.lockup--light .lockup__text { color: #fff; border-left-color: var(--accent-light); }
@media (max-width: 420px) {
  .lockup__text { font-size: 0.9rem; max-width: 5.5em; }
}

.nav { display: none; }
@media (min-width: 1000px) { .nav { display: block; } }
.nav__list {
  display: flex; align-items: center; gap: clamp(0.35rem, 1.2vw, 1.1rem);
  list-style: none; padding: 0; margin: 0;
}
.nav__link {
  display: block;
  position: relative;
  padding: 0.6rem 0.35rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: ''; position: absolute; left: 0.35rem; right: 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(--accent-light); }
.mobile-nav__link:hover { color: var(--accent-light); }
.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(--accent-light); 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;
  /* Sits over photography, so it uses the light tint rather than the accent. */
  color: var(--accent-light);
  margin-bottom: 0.35rem;
  text-shadow: 0 1px 6px rgb(14 14 17 / 0.6);
}
.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 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  text-align: center;
}
.hero__brandmark img {
  width: auto;
  /* The best surviving artwork for the mark is 260px wide, so it is kept below
     that on a 2x display rather than being blown up soft. */
  height: clamp(70px, 11vh, 124px);
  object-fit: contain;
  /* Layered shadows rather than a scrim: the photograph stays at full
     brightness while the mark keeps its edge against the apron behind it. */
  filter:
    drop-shadow(0 2px 6px rgb(14 14 17 / 0.55))
    drop-shadow(0 10px 34px rgb(14 14 17 / 0.45));
}
.hero__brandtext {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 3.4vw, 2.7rem);
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 10px rgb(14 14 17 / 0.7), 0 8px 30px rgb(14 14 17 / 0.5);
}
.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(--accent-light); }
.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(--accent-light); }
.breadcrumbs [aria-current='page'] { color: var(--accent-light); }
.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; }

/* Four marks, so an even grid rather than a wrapping flex row: flexbox left a
   3 + 1 orphan at the widths this column actually gets. Two up on narrow, four
   up once there is room for them. */
.accreds__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
}
@media (min-width: 1180px) {
  .accreds__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.accred {
  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 {
  /* Three of the four marks survive only as ~88px originals from the old site,
     so they are shown well below that height: at this size they are still
     sharp on a 2x display, where the old 86px setting was visibly soft. The
     name underneath carries the weight instead. */
  height: clamp(44px, 4.4vw, 58px);
  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)); }
/* auto-fit stretches a lone card across the full width, which reads as a
   mistake rather than a design. Cap the track count to what is actually there. */
.grid--3:has(> :last-child:nth-child(1)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 0.34fr)); }
.grid--3:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 0.5fr)); }
.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; }

  /* A capability with no image keeps the same two-column rhythm by putting the
     heading in the left column and the list in the right, rather than leaving
     a hole where the picture would have been. */
  .capability--textonly { grid-template-columns: 1fr; align-items: start; }
  .capability--textonly > div {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto 1fr;
    gap: 0 clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }
  .capability--textonly .capability__index { grid-column: 1; grid-row: 1; }
  .capability--textonly > div > h3 { grid-column: 1; grid-row: 2; }
  .capability--textonly .spec-list { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}
.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; text-decoration-thickness: 1.5px; }
.prose a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.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; }

/* Archive photography. The CIP originals survive only as 99x104 thumbnails,
   so they are shown at native size rather than upscaled into a mess. */
.photo-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-block: 1.8em 0.8em;
}
.photo-row figure { margin: 0; max-width: 132px; }
.photo-row img {
  width: 99px; height: 104px;
  border-radius: var(--radius);
  border: 1px solid var(--grey-200);
  image-rendering: auto;
}
.photo-row figcaption {
  font-size: 0.76rem; line-height: 1.35;
  color: var(--grey-500); margin-top: 0.45rem;
}
.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, #17171C 0%, #2E2E36 55%, #4A4A54 118%);
  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 { margin-bottom: var(--sp-4); }
.footer__logo .lockup__mark { height: 44px; }
.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(--accent-light); }

.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; }
}

/* ==========================================================================
   CIP components
   Added for the cipltd.co.uk rebuild: the document library, the technology
   figure blocks, the sector grid, the partner list, the quartzsand swatches
   and the small tables used inside case studies.
   ========================================================================== */

/* ---------- Standalone lede (a content page with no prose above it) ------ */
.lede--standalone {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 62ch;
  margin: 0 0 var(--sp-6);
}
.lede--standalone + .prose { margin-top: 0; }

/* Two-column body copy on the wide home introduction. */
@media (min-width: 900px) {
  .prose--columns { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .prose--columns > * + * { margin-top: 1.15em; }
  .prose--columns p { break-inside: avoid; }
}

/* ---------- Document library --------------------------------------------- */
.docs__group {
  font-size: var(--step-2);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--border);
}
.docs__group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.docs {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.doc__link {
  display: flex; gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-5);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.doc__link:hover, .doc__link:focus-visible {
  border-color: var(--cyan);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  color: inherit;
}
.doc__icon { flex: none; color: var(--cyan); margin-top: 2px; }
.doc__body { display: grid; gap: 0.35rem; }
.doc__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0); color: var(--heading-text);
  line-height: 1.3;
}
.doc__ref { color: var(--steel); font-variant-numeric: tabular-nums; }
.doc__text { font-size: 0.92rem; line-height: 1.55; color: var(--grey-500); }
.doc__meta {
  justify-self: start;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.1rem 0.35rem;
  margin-top: 0.2rem;
}

/* ---------- Figure blocks (technology, product properties) --------------- */
.figure-block {
  display: grid;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: var(--border);
  align-items: start;
}
.figure-block:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 800px) {
  .figure-block { grid-template-columns: minmax(0, 26%) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
  /* No image: the body still starts in the second column, so a run of blocks
     lines up whether or not they happen to have a picture. */
  .figure-block--textonly .figure-block__body { grid-column: 2; }
}
.figure-block__media img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--shell);
}
.figure-block__index {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step--1); letter-spacing: 0.16em;
  color: var(--steel);
  margin-bottom: var(--sp-3);
}
.figure-block__body h3 { margin-bottom: 0.6rem; }
.figure-block__body p { color: var(--body-text); line-height: 1.7; }
.figure-block__body .spec-list { margin-top: var(--sp-4); }

/* ---------- Sector grid (home) ------------------------------------------- */
.sector-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.sector a {
  position: relative; display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  background: var(--ink);
  aspect-ratio: 4 / 3;
}
.sector__media { display: block; height: 100%; }
.sector__media img, .sector__media picture {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s var(--ease-out), opacity 0.3s var(--ease);
  opacity: 0.62;
}
.sector a:hover .sector__media img { transform: scale(1.05); opacity: 0.75; }
.sector__name {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; gap: 0.5rem;
  padding: var(--sp-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0); color: #fff;
  background: linear-gradient(to top, rgb(14 14 17 / 0.85), transparent);
}
.sector a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ---------- Partners (resources) ----------------------------------------- */
.partners {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}
.partner {
  display: grid; gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
}
.partner__mark {
  display: flex; align-items: center;
  height: 56px;
}
.partner__mark img { max-height: 56px; width: auto; }
.partner__name { font-size: var(--step-1); margin-bottom: 0.4rem; }
.partner__text { font-size: 0.95rem; line-height: 1.65; color: var(--grey-500); margin-bottom: 0.8rem; }

/* ---------- Quartzsand swatches ------------------------------------------ */
.swatches {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
}
.swatch { display: grid; gap: 0.45rem; }
.swatch img {
  width: 100%; height: auto;
  border-radius: var(--radius-sm);
  border: var(--border);
}
.swatch__name {
  font-size: 0.82rem; line-height: 1.35; color: var(--grey-500);
}
.swatch__name abbr { color: var(--cyan); text-decoration: none; font-weight: 700; }

/* ---------- Case study tables -------------------------------------------- */
.prose .facts, .prose .compare { display: block; overflow-x: auto; white-space: normal; }
.prose .facts { margin-block: 0 2em; }
.prose .facts th {
  width: 34%; min-width: 9rem;
  font-size: var(--step--1); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--steel);
  background: var(--shell);
  vertical-align: top;
}
.prose .facts td { vertical-align: top; }
.prose .compare th[scope='row'] { width: 28%; background: var(--shell); }

/* ---------- Case study photography --------------------------------------- */
/* Real photographs, sized by the layout. Portrait and landscape frames are
   mixed in these sets, so the grid crops to a common ratio rather than letting
   one tall frame set the row height. */
.prose .figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-4);
  margin-top: 2.4em;
  padding-top: var(--sp-5);
  border-top: var(--border);
}
.prose .figure-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--grey-100);
}
/* The first frame in a set is the establishing shot, so it runs full width. */
.prose .figure-grid img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
.prose .figure-grid figcaption {
  grid-column: 1 / -1;
  margin-top: 0;
}
/* Break out of the narrow reading column once there is room. The case study
   body is set at 780px for readability, which is too tight for photography. */
@media (min-width: 1040px) {
  .prose .figure-grid {
    --grid-w: min(1160px, calc(100vw - 2 * var(--gutter)));
    width: var(--grid-w);
    margin-left: calc((100% - var(--grid-w)) / 2);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  }
}

/* ---------- Archive photography ------------------------------------------ */
/* Two of the jobs survive only as 99x104 thumbnails, so those are shown at
   native size rather than upscaled into a mess. */
.prose .archive-gallery {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: flex-start;
  margin-top: 2.4em;
  padding-top: var(--sp-5);
  border-top: var(--border);
}
.prose .archive-gallery img {
  width: 99px; height: 104px;
  margin: 0;
  border-radius: var(--radius-sm);
  border: var(--border);
}
.prose .archive-gallery figcaption { flex-basis: 100%; margin-top: 0; }

/* ---------- Contact aside notes ------------------------------------------ */
.aside-note {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--shell);
  border-radius: var(--radius);
  border-left: 3px solid var(--cyan);
}
.aside-note h2 {
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 700;
  letter-spacing: 0.02em; margin-bottom: 0.5rem;
}
.aside-note p { font-size: 0.92rem; line-height: 1.65; color: var(--grey-500); }

/* ==========================================================================
   Holding page (September 2026)
   ========================================================================== */
.hero--holding { min-height: clamp(420px, 62vh, 640px); }
.hero--holding .hero__slide, .hero--holding .hero__media { position: absolute; inset: 0; }
.hero--holding .hero__media img, .hero--holding .hero__media picture {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero--holding .hero__inner {
  position: relative; z-index: 2;
  min-height: inherit;
  display: grid; place-items: center;
}
/* The lockup is dark artwork on white, so it sits on its own white panel
   rather than being reversed out over the photograph. */
.holding__logo {
  margin: 0;
  background: #fff;
  padding: clamp(1.1rem, 3vw, 2.2rem) clamp(1.4rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(92vw, 720px);
  line-height: 0;
}
.holding__logo img { width: 100%; height: auto; display: block; }
.holding__heading {
  font-size: var(--step-3);
  margin-bottom: var(--sp-5);
}
.holding__statement p { font-size: var(--step-1); line-height: 1.65; color: var(--body-text); }
/* The closing line points at the button directly beneath it, so it is not
   emphasised — the sentence before it, about where the work goes now, is. */
.holding__statement p:nth-last-child(3) { font-weight: 600; color: var(--heading-text); }
.holding__cta { margin-top: var(--sp-7); }
.footer--bare { padding-block: var(--sp-5); }
.footer--bare .footer__bar { border-top: 0; margin: 0; padding-top: 0; }