@charset "UTF-8";
/* ==========================================================================
   Cobalt Carbon Free
   Design system stylesheet
   Author: Ad Rank One
   Structure:
     01 Tokens
     02 Fonts
     03 Reset and base
     04 Layout primitives
     05 Typography
     06 Stripe system (signature brand device)
     07 Buttons and links
     08 Header and navigation
     09 Heroes
     10 Cards
     11 Pathways and journey ladder
     12 Editorial blocks
     13 Media, before and after
     14 Trust: reviews, accreditations, stats
     15 Interactive: accordion, tabs, calculator, selector
     16 Forms
     17 Bands: finance, CTA, quote
     18 Footer
     19 Utilities and motion
     20 Responsive
   ========================================================================== */

/* ==========================================================================
   01 Tokens
   ========================================================================== */
:root {
  /* Brand core. Black, white, yellow only, plus the stripe grey. */
  --ccf-yellow:        #ffde00;
  --ccf-yellow-deep:   #e8c800;
  --ccf-yellow-tint:   #fff9d6;
  --ccf-charcoal:      #323232;
  --ccf-silver:        #808080;
  --ccf-white:         #ffffff;

  /* Ink scale, warm neutral so it never reads as cold corporate blue-grey */
  --ink-900: #0e0f10;
  --ink-800: #1a1b1c;
  --ink-700: #262728;
  --ink-600: #3d3e3f;
  --ink-500: #4d4f50;  /* body copy on light grounds, 7.55:1 on bone, 8.24:1 on white */
  --ink-400: #7a7c7d;
  --ink-450: #6b6d6e;  /* quiet micro labels, 4.77:1 on bone, 5.20:1 on white */
  --ink-300: #a8a9a7;
  --ink-200: #d6d5d0;
  --ink-100: #e7e5e0;
  --ink-050: #f2f1ec;
  --paper:   #ffffff;
  --bone:    #f6f5f1;

  /* Semantic */
  --bg:            var(--paper);
  --bg-alt:        var(--bone);
  --bg-invert:     var(--ink-900);
  --text:          var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-invert:   var(--ccf-white);
  --line:          var(--ink-100);
  --line-strong:   var(--ink-200);
  --accent:        var(--ccf-yellow);

  /* Type */
  --font-display: "Cobalt Display", "Archivo", "Arial Black", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --step--2: clamp(0.75rem, 0.70rem + 0.10vw, 0.78rem); /* 12px floor so notes stay legible on phones */
  --step--1: clamp(0.90rem, 0.87rem + 0.18vw, 0.98rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.16rem, 1.10rem + 0.30vw, 1.32rem);
  --step-2:  clamp(1.38rem, 1.26rem + 0.58vw, 1.72rem);
  --step-3:  clamp(1.62rem, 1.40rem + 1.05vw, 2.24rem);
  --step-4:  clamp(1.92rem, 1.53rem + 1.90vw, 3.00rem);
  --step-5:  clamp(2.30rem, 1.62rem + 3.30vw, 4.20rem);
  --step-6:  clamp(2.70rem, 1.55rem + 5.60vw, 6.00rem);

  /* Space */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 40px;  --sp-8: 56px;
  --sp-9: 72px;  --sp-10: 96px; --sp-11: 128px;
  --section-y: clamp(56px, 7vw, 116px);
  --section-y-tight: clamp(40px, 4.5vw, 72px);

  /* Shape */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --container: 1600px;
  --container-narrow: 860px;
  --container-wide: 1600px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Elevation. Restrained: premium sites use line and space, not drop shadows. */
  --shadow-1: 0 1px 2px rgba(14, 15, 16, 0.05);
  --shadow-2: 0 10px 28px -12px rgba(14, 15, 16, 0.18);
  --shadow-3: 0 26px 60px -22px rgba(14, 15, 16, 0.30);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  /* The brand stripe, rebuilt as a gradient so it can move, scale and recolour.
     Period along the gradient axis is 40px, so a seamless loop translates by
     40 / sqrt(2) = 28.284px on both axes. */
  --stripe-diag: repeating-linear-gradient(135deg,
    var(--ccf-charcoal) 0 8px,
    var(--ccf-white) 8px 10px,
    var(--ccf-yellow) 10px 18px,
    var(--ccf-white) 18px 20px,
    var(--ccf-silver) 20px 28px,
    var(--ccf-white) 28px 30px,
    var(--ccf-yellow) 30px 38px,
    var(--ccf-white) 38px 40px);
  --stripe-vert: repeating-linear-gradient(90deg,
    var(--ccf-charcoal) 0 8px,
    var(--ccf-white) 8px 10px,
    var(--ccf-yellow) 10px 18px,
    var(--ccf-white) 18px 20px,
    var(--ccf-silver) 20px 28px,
    var(--ccf-white) 28px 30px,
    var(--ccf-yellow) 30px 38px,
    var(--ccf-white) 38px 40px);
  --stripe-shift: 28.284px;

  --header-h: 84px;
}

/* ==========================================================================
   02 Fonts
   ========================================================================== */
@font-face {
  font-family: "Cobalt Display";
  src: url("../fonts/avantgarde-gothic-bold.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   03 Reset and base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background-color: var(--ink-100); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--ccf-yellow); color: var(--ink-900); }

:focus-visible {
  outline: 3px solid var(--ccf-yellow);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--ccf-yellow); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ccf-yellow);
  color: var(--ink-900);
  padding: 14px 22px;
  font-weight: 800;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   04 Layout primitives
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--alt { background: var(--bg-alt); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--ink-900); color: var(--text-invert); }
.section--dark .lede,
.section--dark .section-head__intro { color: var(--ink-300); }
.section--line-top { border-top: 1px solid var(--line); }
.section--line-bottom { border-bottom: 1px solid var(--line); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--tight { gap: var(--sp-4); }
.grid--wide { gap: clamp(32px, 5vw, 80px); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.split--lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.split--trail { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
/* Blog article: the body takes 65% of the row, the contact panel the rest */
.split--article { grid-template-columns: minmax(0, 65%) minmax(0, 1fr); }
.split--article .prose { max-width: none; }
.split--center { align-items: center; }

.stack > * + * { margin-top: var(--sp-4); }
.stack--lg > * + * { margin-top: var(--sp-6); }
.stack--sm > * + * { margin-top: var(--sp-2); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }

/* ==========================================================================
   05 Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.1; font-weight: 800; }

h1, .h1, .display {
  font-family: var(--font-display);
  font-size: var(--step-5);
  letter-spacing: -0.022em;
  line-height: 1.02;
  font-weight: 400;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  letter-spacing: -0.018em;
  line-height: 1.06;
  font-weight: 400;
}
h3, .h3 {
  font-size: var(--step-2);
  letter-spacing: -0.012em;
  line-height: 1.18;
  font-weight: 800;
}
h4, .h4 {
  font-size: var(--step-1);
  letter-spacing: -0.008em;
  line-height: 1.25;
  font-weight: 800;
}
h5, .h5 { font-size: var(--step-0); font-weight: 800; letter-spacing: -0.004em; }

.display--tight { line-height: 0.97; }

/* Text sizing is deliberately two-tier and declared once:
   - All running text, links, buttons and controls inherit step-0 from body.
   - Small print, labels, captions and header/footer chrome use step--1.
   Heading sizes come from the tag (h1 to h5) and nothing else. Do not add
   font-size to component classes. */

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  line-height: 1.55;
  color: var(--text-muted);
  font-weight: 400;
}
.lede--tight { max-width: 62ch; }

.prose { max-width: 68ch; }

/* Inline link styling for body copy that sits outside a .prose column */
.copy-links a { border-bottom: 2px solid var(--ccf-yellow); font-weight: 600; }
.copy-links a:hover { background: var(--ccf-yellow-tint); }
.prose h2 { margin-top: var(--sp-8); margin-bottom: var(--sp-4); }
.prose h3 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.prose p, .prose ul, .prose ol { margin-bottom: 1.15em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--ink-400); font-weight: 800; }
.prose a { border-bottom: 2px solid var(--ccf-yellow); font-weight: 600; }
.prose a:hover { background: var(--ccf-yellow-tint); }
.prose blockquote {
  margin: var(--sp-7) 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  border-left: 4px solid var(--ccf-yellow);
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink-800);
}
.prose figure { margin: var(--sp-7) 0; }
.prose figure img { max-width: 100%; max-height: 720px; width: auto; height: auto; border-radius: var(--radius); }
.prose figcaption {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Micro label: uppercase, tracked, with a yellow tick mark */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--ccf-yellow);
  flex: none;
}
.eyebrow--invert { color: var(--ink-300); }
.eyebrow--onyellow { color: rgba(14, 15, 16, 0.72); }
.eyebrow--onyellow::before { background: var(--ink-900); }
.eyebrow--plain::before { display: none; }

.section-head { max-width: none; margin-bottom: clamp(32px, 4vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--wide { max-width: 980px; }
.section-head__intro { margin-top: var(--sp-4); color: var(--text-muted); line-height: 1.55; }
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  max-width: none;
}
.section-head--split .section-head__intro { margin-top: 0; }

/* Numbered section index, an editorial device */
.section-index {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--ink-450);
  display: block;
  margin-bottom: var(--sp-3);
}

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.mark { background: linear-gradient(transparent 62%, var(--ccf-yellow) 62%); padding: 0 2px; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   06 Stripe system
   The client asked for "the moving stripe which highlights boxes".
   Here it is generalised into three roles: a rule, a reveal and a band.
   ========================================================================== */
/* The stripes are static everywhere: the client asked for the running
   animation to be removed across the site. */

/* Horizontal rule made of the brand stripe */
.stripe-rule {
  height: 8px;
  width: 100%;
  background-image: var(--stripe-diag);
  background-size: auto;
  border: 0;
  margin: 0;
}
.stripe-rule--short { width: 96px; }
.stripe-rule--thin { height: 5px; }

/* The client's "stripe journey" artwork: the brand stripe travelling across the
   page, dipping and looping on its way. A full width decorative divider. */
.journey-graphic {
  overflow: hidden;
  padding-block: clamp(8px, 1.5vw, 24px);
  background: var(--paper);
}
.journey-graphic img {
  width: 100%;
  height: auto;
  background: transparent;
}

/* Full-width band used as a section separator */
.stripe-band {
  height: 14px;
  overflow: hidden;
  position: relative;
}
.stripe-band::before {
  content: "";
  position: absolute;
  inset: -40px;
  background-image: var(--stripe-diag);
}

/* The stripe edge. Applied to any element with .stripe-host.
   The hover and focus reveal has been switched off: an edge is hidden unless the
   host also carries .stripe-host--on, which shows it permanently. The markup and
   the always-on state are kept so the reveal can be restored by re-adding the
   :hover and :focus-within rules below. */
.stripe-host { position: relative; overflow: hidden; isolation: isolate; }
.stripe-host > .stripe-edge {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease);
  inset: 0 auto 0 0;
  width: 10px;
}
.stripe-host > .stripe-edge::before {
  content: "";
  position: absolute;
  inset: -60px;
  background-image: var(--stripe-diag);
}
/* Top edge variant */
.stripe-host--top > .stripe-edge {
  inset: 0 0 auto 0;
  width: auto;
  height: 8px;
  transform: scaleX(0);
  transform-origin: left;
}

/* Always on, for cards that are permanently highlighted */
.stripe-host--on > .stripe-edge { transform: scaleY(1); }
.stripe-host--on.stripe-host--top > .stripe-edge { transform: scaleX(1); }
.stripe-host--on > .stripe-edge::before { animation-play-state: running; }

/* Decorative corner flash used sparingly on dark panels */
.stripe-corner {
  position: absolute;
  top: 0; right: 0;
  width: 180px; height: 180px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.14;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.panel--bone .stripe-corner { opacity: 0.42; }
.panel--yellow .stripe-corner { opacity: 0.2; }
.stripe-corner::before {
  content: "";
  position: absolute;
  inset: -60px;
  background-image: var(--stripe-diag);
}

/* ==========================================================================
   07 Buttons and links
   ========================================================================== */
.btn {
  --btn-bg: var(--ccf-yellow);
  --btn-fg: var(--ink-900);
  --btn-bd: var(--ccf-yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  min-height: 54px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--primary:hover { --btn-bg: var(--ink-900); --btn-fg: var(--ccf-yellow); --btn-bd: var(--ink-900); }

.btn--dark { --btn-bg: var(--ink-900); --btn-fg: var(--ccf-white); --btn-bd: var(--ink-900); }
.btn--dark:hover { --btn-bg: var(--ccf-yellow); --btn-fg: var(--ink-900); --btn-bd: var(--ccf-yellow); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink-900); --btn-bd: var(--ink-900); }
.btn--outline:hover { --btn-bg: var(--ink-900); --btn-fg: var(--ccf-white); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-800); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--ink-900); --btn-fg: var(--ccf-white); --btn-bd: var(--ink-900); }

.btn--invert { --btn-bg: transparent; --btn-fg: var(--ccf-white); --btn-bd: rgba(255,255,255,0.34); }
.btn--invert:hover { --btn-bg: var(--ccf-white); --btn-fg: var(--ink-900); --btn-bd: var(--ccf-white); }

.btn--lg { padding: 20px 38px; min-height: 62px; }
.btn--sm { padding: 11px 20px; min-height: 44px; }
.btn--block { display: flex; width: 100%; }

/* Text link with an arrow that extends on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  padding-bottom: 2px;
  border-bottom: 2px solid var(--ccf-yellow);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.link-arrow::after {
  content: "";
  width: 16px; height: 8px;
  background: currentColor;
  clip-path: polygon(0 3px, 10px 3px, 10px 0, 16px 4px, 10px 8px, 10px 5px, 0 5px);
  transition: transform var(--dur-fast) var(--ease);
}
.link-arrow:hover::after { transform: translateX(6px); }
.link-arrow--invert { color: var(--ccf-white); }
.link-arrow--plain { border-bottom-color: transparent; }
.link-arrow--plain:hover { border-bottom-color: var(--ccf-yellow); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-note {
  font-size: var(--step--1);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   08 Header and navigation
   ========================================================================== */
.utility-bar {
  background: var(--ink-900);
  color: var(--ink-300);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-5);
  min-height: 40px;
  flex-wrap: wrap;
}
.utility-bar a { color: var(--ccf-white); }
.utility-bar a:hover { color: var(--ccf-yellow); }
.utility-bar__list { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.utility-bar__item { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding-block: 2px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-2); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 13px; flex: none; }
.brand__mark { height: 44px; width: auto; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.02;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-900);
}
.brand__word span { display: block; }
.brand__word span:last-child { color: var(--ink-500); letter-spacing: 0.055em; }
.brand--invert .brand__mark { color: var(--ccf-white); }
.brand--invert .brand__word { color: var(--ccf-white); }
.brand--invert .brand__word span:last-child { color: rgba(255, 255, 255, 0.6); }

.primary-nav { margin-left: auto; }
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.1vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-800);
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
}
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: 2px;
  height: 3px;
  background: var(--ccf-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.primary-nav__link:hover::after,
.primary-nav__link[data-current]::after,
.primary-nav__item:hover .primary-nav__link::after { transform: scaleX(1); }
/* Kept separate: a browser without :has() would otherwise drop the whole list */
.primary-nav__item:has(.primary-nav__toggle[aria-expanded="true"]) .primary-nav__link::after { transform: scaleX(1); }
.primary-nav__item { display: flex; align-items: center; position: relative; }
/* Invisible bridge from the link down to the dropdown, so the mouse stays inside the item */
.primary-nav__item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px; }
.primary-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px 12px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-800);
}
.primary-nav__toggle:hover { color: var(--ink-500); }
.primary-nav__caret {
  width: 9px; height: 6px;
  background: currentColor;
  clip-path: polygon(0 0, 9px 0, 4.5px 6px);
  transition: transform var(--dur-fast) var(--ease);
}
.primary-nav__toggle[aria-expanded="true"] .primary-nav__caret { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: var(--step--1);
  color: var(--ink-900);
  white-space: nowrap;
}
.header-phone:hover { color: var(--ink-500); }

/* Mega menu */
.mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
  gap: clamp(24px, 3vw, 56px);
  padding-block: var(--sp-8);
}
.mega__inner--two { grid-template-columns: repeat(2, minmax(0, 1fr)) 300px; }
.mega__col-title {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-450);
  padding-bottom: var(--sp-3);
  margin: 0 0 var(--sp-4);
  border-bottom: 1px solid var(--line);
  min-height: 2.9em;
  display: flex;
  align-items: flex-end;
}
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__link {
  display: block;
  padding: 8px 12px 8px 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-700);
  position: relative;
  padding-left: 16px;
  border-radius: var(--radius-sm);
}
.mega__link::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 0;
  background: var(--ccf-yellow);
  transform: translateY(-50%);
  transition: height var(--dur-fast) var(--ease);
}
.mega__link:hover { color: var(--ink-900); }
.mega__link:hover::before { height: 60%; }
.mega__link small { display: block; font-weight: 500; color: var(--ink-450); font-size: var(--step--1); }

.mega__feature {
  background: var(--ink-900);
  color: var(--ccf-white);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
}
.mega__feature p { color: var(--ink-300); margin: 0; }
.mega__feature-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5); }

/* A dropdown with one column: the promo panel fills the rest of the row and carries the contact details */
.mega__inner--one { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.mega__feature--wide { flex-direction: row; align-items: stretch; gap: var(--sp-7); padding: var(--sp-7); }
.mega__feature--wide .mega__feature-main { flex: 1 1 0; max-width: 46ch; }
.mega__contact {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  padding-left: var(--sp-7);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.mega__contact-title { font-weight: 800; color: var(--ccf-white); }
.mega__feature .mega__contact-title { color: var(--ccf-white); }
.mega__contact-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.mega__contact-lines li { display: grid; gap: 2px; }
.mega__contact-lines span { font-size: var(--step--1); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ccf-yellow); }
.mega__contact-lines a { color: var(--ccf-white); font-weight: 700; overflow-wrap: anywhere; }
.mega__contact-lines a:hover { color: var(--ccf-yellow); }

/* Mobile drawer */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: var(--ink-900);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
}
.nav-toggle__bars { position: relative; width: 20px; height: 2px; background: var(--ccf-white); transition: background var(--dur-fast); }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; width: 20px; height: 2px;
  background: var(--ccf-white);
  transition: transform var(--dur) var(--ease);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100%);
  background: var(--paper);
  z-index: 200;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--gutter);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2;
}
.drawer__close {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  background: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.drawer__close::before, .drawer__close::after {
  content: "";
  position: absolute;
  left: 13px; top: 21px;
  width: 18px; height: 2px;
  background: var(--ink-900);
}
.drawer__close::before { transform: rotate(45deg); }
.drawer__close::after { transform: rotate(-45deg); }
.drawer__body { padding: var(--sp-5) var(--gutter) var(--sp-9); }
.drawer__foot {
  margin-top: auto;
  padding: var(--sp-5) var(--gutter) var(--sp-8);
  display: grid;
  gap: var(--sp-3);
  border-top: 1px solid var(--line);
  background: var(--bone);
}

.acc-nav { list-style: none; margin: 0; padding: 0; }
.acc-nav > li { border-bottom: 1px solid var(--line); }
.acc-nav__trigger,
.acc-nav__direct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 18px 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  cursor: pointer;
}
.acc-nav__icon {
  position: relative;
  width: 16px; height: 16px;
  flex: none;
}
.acc-nav__icon::before, .acc-nav__icon::after {
  content: "";
  position: absolute;
  background: var(--ink-900);
  transition: transform var(--dur) var(--ease);
}
.acc-nav__icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.acc-nav__icon::after { left: 7px; top: 0; width: 2px; height: 16px; }
.acc-nav__trigger[aria-expanded="true"] .acc-nav__icon::after { transform: rotate(90deg); }
.acc-nav__panel { display: none; padding-bottom: var(--sp-5); }
.acc-nav__panel.is-open { display: block; }
.acc-nav__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.acc-nav__panel a {
  display: block;
  padding: 9px 0 9px 16px;
  border-left: 2px solid var(--line);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-600);
}
.acc-nav__panel a:hover { border-left-color: var(--ccf-yellow); color: var(--ink-900); }

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(14, 15, 16, 0.55);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* Sticky mobile action bar */
.action-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--ink-900);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
  border-top: 3px solid var(--ccf-yellow);
}
.action-bar .btn { flex: 1; min-height: 50px; padding-inline: 12px; }

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: var(--step--1);
  color: var(--ink-450);
  list-style: none;
  margin: 0;
  padding: var(--sp-5) 0 0;
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--ink-300); }
.crumbs a { font-weight: 600; color: var(--ink-500); }
.crumbs a:hover { color: var(--ink-900); }
.crumbs--invert { color: rgba(255,255,255,0.55); }
.crumbs--invert a { color: rgba(255,255,255,0.78); }
.crumbs--invert a:hover { color: var(--ccf-yellow); }
.crumbs--invert li + li::before { color: rgba(255,255,255,0.35); }

/* ==========================================================================
   09 Heroes
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink-900);
  color: var(--text-invert);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
/* Background video. Dark ground behind it so there is no pale flash before the
   poster paints, and a centred crop, which suits the moving footage better. */
.hero__video {
  object-position: center center;
  background: var(--ink-900);
  pointer-events: none;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(14,15,16,0.95) 0%, rgba(14,15,16,0.86) 40%, rgba(14,15,16,0.58) 70%, rgba(14,15,16,0.44) 100%),
    linear-gradient(to top, rgba(14,15,16,0.75) 0%, rgba(14,15,16,0) 45%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 11vw, 148px);
}

/* Homepage hero: height set to 60% of the viewport rather than driven by its own
   padding. min-height, so long copy or a short screen still lets it grow, and the
   inner block stretches full height so the floating aside stays pinned low. */
.hero--60vh { min-height: 60vh; display: flex; }
.hero--60vh .hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-block: clamp(40px, 5vw, 72px);
}
.hero__title { color: var(--ccf-white); margin-bottom: var(--sp-5); }
.hero__title em { font-style: normal; color: var(--ccf-yellow); }
.hero__copy {
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: var(--sp-7);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}
.hero__meta > * { display: inline-flex; align-items: center; gap: 9px; }
.hero__meta svg { color: var(--ccf-yellow); }

/* Floating feature card in the home hero. Reuses the mega menu feature panel,
   pinned to the bottom right corner of the hero on wide screens. */
.hero__inner--aside { padding-right: calc(390px + var(--gutter)); }
.hero__aside {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(24px, 3vw, 48px);
  width: 370px;
  box-shadow: var(--shadow-3);
}

.hero__stripe {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  overflow: hidden;
  z-index: 2;
}
.hero__stripe::before {
  content: "";
  position: absolute;
  inset: -50px;
  background-image: var(--stripe-diag);
}

/* Compact page hero for inner pages */
.page-hero {
  background: var(--ink-900);
  color: var(--text-invert);
  position: relative;
  overflow: hidden;
}
.page-hero__inner { padding-block: clamp(48px, 7vw, 96px); position: relative; z-index: 1; }
.page-hero__title { color: var(--ccf-white); margin-bottom: var(--sp-4); }
.page-hero__copy { color: rgba(255,255,255,0.78); }
.page-hero__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.page-hero--image .page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero--image .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--image .page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(14,15,16,0.95) 0%, rgba(14,15,16,0.82) 48%, rgba(14,15,16,0.48) 100%);
}
.page-hero--light { background: var(--bone); color: var(--text); }
.page-hero--light .page-hero__title { color: var(--ink-900); }
.page-hero--light .page-hero__copy { color: var(--text-muted); }

/* Split hero used on service pages: copy left, image right */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: stretch;
  background: var(--ink-900);
  color: var(--text-invert);
}
.hero-split__copy {
  padding-block: clamp(48px, 6vw, 104px);
  /* Left edge tracks the centred container, so hero copy lines up with the header */
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) clamp(24px, 4vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-split__copy > .container { padding-inline: 0; max-width: 620px; margin-inline: 0 auto; }
.hero-split__copy h1 { color: var(--ccf-white); margin-bottom: var(--sp-5); }
.hero-split__copy .crumbs { padding-top: 0; margin-bottom: var(--sp-5); }
.hero-split__copy .hero__copy { margin-bottom: var(--sp-6); }
.hero-split__copy .btn-note { color: rgba(255, 255, 255, 0.62); }
.page-hero__inner h1 { margin-bottom: var(--sp-4); }
.page-hero__inner .crumbs { padding-top: 0; margin-bottom: var(--sp-5); }
.hero-split__media { position: relative; min-height: 380px; overflow: hidden; }
.hero-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-split__badge {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--ccf-yellow);
  color: var(--ink-900);
  padding: 16px 24px;
  font-weight: 800;
  font-size: var(--step--1);
  max-width: 320px;
}

/* ==========================================================================
   10 Cards
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.card__title { margin-bottom: var(--sp-3); }
.card__text { color: var(--text-muted); line-height: 1.6; margin-bottom: var(--sp-5); }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }
.card--pad-lg { padding: clamp(28px, 3vw, 44px); }
.card--flat:hover { transform: none; box-shadow: none; }
.card--alt { background: var(--bone); }
.card--dark { background: var(--ink-900); color: var(--ccf-white); border-color: var(--ink-700); }
.card--dark .card__text { color: var(--ink-300); }
.card--dark .card__title { color: var(--ccf-white); }
.card--yellow { background: var(--ccf-yellow); border-color: var(--ccf-yellow); }
.card--yellow .card__text { color: rgba(14,15,16,0.72); }

/* Cards whose kicker, title, text, list and footnote line up row by row across the grid */
.grid--aligned > .card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
/* Centred card copy; list icons sit inline so centred items keep their marker beside the text */
.card--center { text-align: center; }
.card--center .crosslist li { display: block; }
.card--center .crosslist li::before { display: inline-block; vertical-align: -5px; margin: 0 var(--sp-2) 0 0; }

.card__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ccf-yellow);
  color: var(--ink-900);
  margin-bottom: var(--sp-5);
  flex: none;
}
.card--dark .card__icon { background: var(--ccf-yellow); color: var(--ink-900); }
.card__kicker {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-450);
  margin-bottom: var(--sp-3);
  display: block;
}

/* Media card: image on top, content below */
.card-media { padding: 0; overflow: hidden; }
.card-media__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card-media__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.card-media:hover .card-media__img img { transform: scale(1.045); }
.card-media__body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.card-media__tag {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--ccf-yellow);
  color: var(--ink-900);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  z-index: 2;
}

/* Service card: dark, image behind, used in the measures grid */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--ccf-white);
  background: var(--ink-800);
  isolation: isolate;
}
.service-card__img { position: absolute; inset: 0; z-index: -2; }
.service-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(14,15,16,0.98) 0%, rgba(14,15,16,0.95) 46%, rgba(14,15,16,0.72) 74%, rgba(14,15,16,0.40) 100%),
    linear-gradient(to top, rgba(14,15,16,0.26), rgba(14,15,16,0.26));
  transition: background var(--dur) var(--ease);
}
.service-card:hover .service-card__img img { transform: scale(1.06); }
.service-card:hover::after {
  background:
    linear-gradient(to top, rgba(14,15,16,0.98) 0%, rgba(14,15,16,0.94) 40%, rgba(14,15,16,0.74) 70%, rgba(14,15,16,0.46) 100%),
    linear-gradient(to top, rgba(14,15,16,0.22), rgba(14,15,16,0.22));
}
.service-card__title { color: var(--ccf-white); margin-bottom: var(--sp-3); }
.service-card__text { color: rgba(255,255,255,0.76); margin-bottom: var(--sp-4); }
.service-card__meta {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ccf-yellow);
  margin-bottom: var(--sp-3);
}
.service-card--sm { min-height: 240px; }

/* Problem card: symptom led, the entry point of the whole site */
.problem-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.problem-card__quote {
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.problem-card__answer { color: var(--text-muted); }
.problem-card__foot { margin-top: auto; padding-top: var(--sp-4); }

/* Small measure chip used in lists */
.measure-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.measure-list__item { background: var(--paper); }
.measure-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 15px var(--sp-5);
  font-weight: 700;
  transition: background var(--dur-fast) var(--ease);
}
.measure-list__link:hover { background: var(--ink-050); }
.measure-list__link:hover span:first-child { transform: translateX(5px); }
.measure-list__link span:first-child { transition: transform var(--dur-fast) var(--ease); }
.measure-list__link span:last-child { color: var(--ink-300); font-weight: 800; }
.measure-list__link:hover span:last-child { color: var(--ink-900); }

/* Cards fill their cell so a row stays level, including when a filter wrapper
   sits between the grid and the card. */
.grid > .card,
.grid > .problem-card,
.grid > .service-card,
.grid > .quote-card,
.grid > * > .card,
.grid > * > .problem-card,
.grid > * > .service-card,
.grid > * > .quote-card { height: 100%; }

/* ==========================================================================
   11 Pathways and journey ladder
   ========================================================================== */
.pathways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.pathway {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 52px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pathway:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.pathway--dark { background: var(--ink-900); border-color: var(--ink-800); color: var(--ccf-white); }
.pathway--dark .pathway__lede { color: var(--ink-300); }
.pathway--dark .measure-list { background: rgba(255,255,255,0.12); }
.pathway--dark .measure-list__item { background: var(--ink-800); }
.pathway--dark .measure-list__link { color: var(--ccf-white); }
.pathway--dark .measure-list__link:hover { background: var(--ink-700); color: var(--ccf-yellow); }
.pathway--dark .measure-list__link span:last-child { color: var(--ink-400); }
.pathway__step {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--ink-500);
  margin-bottom: var(--sp-4);
  display: block;
}
.pathway--dark .pathway__step { color: var(--ccf-yellow); }
.pathway__title {
  font-family: var(--font-display);
  letter-spacing: -0.018em;
  line-height: 1.06;
  font-weight: 400;
  margin-bottom: var(--sp-4);
}
.pathway--dark .pathway__title { color: var(--ccf-white); }
.pathway__lede { color: var(--text-muted); margin-bottom: var(--sp-6); }
.pathway__foot { margin-top: auto; padding-top: var(--sp-6); }

/* The staged journey. The single most important differentiator in the brief. */
.ladder { position: relative; display: grid; gap: 0; counter-reset: rung; }
.ladder__rung {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding-block: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid var(--line);
}
.ladder__rung:last-child { border-bottom: 1px solid var(--line); }
.ladder__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--ink-200);
  transition: color var(--dur) var(--ease);
  position: relative;
}
.ladder__rung:hover .ladder__num { color: var(--ink-900); }
.ladder__body { display: grid; gap: var(--sp-3); }
.ladder__title { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.ladder__tag {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-450);
  background: var(--bone);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
}
.ladder__text { color: var(--text-muted); max-width: 70ch; }
.ladder__meta {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-500);
  padding-top: var(--sp-2);
  line-height: 1.6;
}
.ladder__meta strong { color: var(--ink-900); }
.ladder__meta a { margin-left: 6px; }
.ladder--dark .ladder__meta { color: var(--ink-400); }
.ladder--dark .ladder__meta strong { color: var(--ccf-white); }
.section--dark .ladder__meta { color: var(--ink-400); }
.section--dark .ladder__meta strong { color: var(--ccf-white); }
.ladder--dark .ladder__rung { border-color: rgba(255,255,255,0.14); }
.ladder--dark .ladder__num { color: rgba(255,255,255,0.24); }
.ladder--dark .ladder__text { color: var(--ink-300); }
.ladder--dark .ladder__tag { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); color: var(--ink-300); }

/* Horizontal phase track, used to show a multi year plan */
.track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  position: relative;
  counter-reset: phase;
}
.track--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.track--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.track--six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-8); }
.track__item {
  position: relative;
  padding-top: var(--sp-7);
  border-top: 3px solid var(--line-strong);
}
.track__item::before {
  content: "";
  position: absolute;
  top: -9px; left: 0;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--line-strong);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.track__item.is-now { border-top-color: var(--ccf-yellow); }
.track__item.is-now::before { border-color: var(--ccf-yellow); background: var(--ccf-yellow); }
.track__when {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-450);
  display: block;
  margin-bottom: var(--sp-2);
}
.track__item.is-now .track__when { color: var(--ink-900); }
.track__title { margin-bottom: var(--sp-2); }
.track__text { color: var(--text-muted); }

/* ==========================================================================
   12 Editorial blocks
   ========================================================================== */
.figure-block { position: relative; }
.figure-block img { border-radius: var(--radius-lg); width: 100%; }
.figure-block figcaption {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.figure-block figcaption::before {
  content: "";
  width: 18px; height: 3px;
  background: var(--ccf-yellow);
  margin-top: 10px;
  flex: none;
}

.panel {
  background: var(--ink-900);
  color: var(--ccf-white);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.4vw, 56px);
  position: relative;
  overflow: hidden;
}
.panel:not(.panel--yellow):not(.panel--bone) :is(h2, h3, h4, h5, .h2, .h3, .h4, .h5) { color: var(--ccf-white); }
.panel:not(.panel--yellow):not(.panel--bone) > p { color: var(--ink-300); }
.panel--yellow { background: var(--ccf-yellow); color: var(--ink-900); }
.panel--yellow :is(h2, h3, h4, h5, .h2, .h3, .h4, .h5) { color: var(--ink-900); }
.panel--yellow > p { color: rgba(14, 15, 16, 0.74); }
.panel--bone { background: var(--bone); color: var(--text); border: 1px solid var(--line); }
.panel--bone :is(h2, h3, h4, h5, .h2, .h3, .h4, .h5) { color: var(--ink-900); }
.panel--bone > p { color: var(--text-muted); }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.checklist li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.checklist li::before {
  content: "";
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ccf-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0f10' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  background-size: 15px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 3px;
}
.checklist li > strong,
.checklist li > span,
.checklist li > p,
.checklist li > div { grid-column: 2; }
.checklist strong { display: block; margin-bottom: 2px; }
.checklist span { display: block; color: var(--text-muted); line-height: 1.55; }
.checklist--invert span { color: var(--ink-300); }

.crosslist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.crosslist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-3); color: var(--text-muted); }
.crosslist li::before {
  content: "";
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ink-200);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a9a7' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 2px;
}

/* Two column contrast: what others do vs what we do */
.contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.contrast__col {
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  background: var(--paper);
}
.contrast__col--them { background: var(--bone); }
.contrast__col--us { border-color: var(--ink-900); border-width: 2px; position: relative; }
.contrast__label {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  display: block;
}
.contrast__col--them .contrast__label { color: var(--ink-450); }
.contrast__col--us .contrast__label { color: var(--ink-900); }
.contrast__quote {
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-5);
}
.contrast__col--them .contrast__quote { color: var(--ink-400); }

/* Definition rows, used for jargon in plain English */
.defs { display: grid; gap: 0; margin: 0; }
.defs__row {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
}
.defs__row:last-child { border-bottom: 1px solid var(--line); }
.defs__term { font-weight: 800; color: var(--ink-900); }
.defs__desc { color: var(--text-muted); margin: 0; }
/* Price variant: the figure sits hard against the right edge of the row */
.defs--right .defs__desc { text-align: right; }

/* Pull quote */
.pullquote {
  border-left: 5px solid var(--ccf-yellow);
  padding-left: clamp(20px, 3vw, 40px);
  font-size: var(--step-2);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.pullquote cite {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  font-weight: 600;
  font-style: normal;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* ==========================================================================
   13 Media, before and after
   ========================================================================== */
.ba {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  user-select: none;
  touch-action: pan-y;
  background: var(--ink-100);
  cursor: ew-resize;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 4px;
  background: var(--ccf-yellow);
  transform: translateX(-2px);
  z-index: 3;
  pointer-events: none;
}
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ccf-yellow);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0f10' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 4 12 9 18'/%3E%3Cpolyline points='15 6 20 12 15 18'/%3E%3C/svg%3E");
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
}
.ba__label {
  position: absolute;
  top: 14px;
  z-index: 4;
  background: rgba(14,15,16,0.78);
  color: var(--ccf-white);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
}
.ba__label--before { left: 14px; }
.ba__label--after { right: 14px; background: var(--ccf-yellow); color: var(--ink-900); }
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  margin: 0;
  cursor: ew-resize;
  z-index: 5;
}

.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-3); }
.gallery img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; }
.gallery__item--wide { grid-column: span 8; aspect-ratio: 16 / 9; }
.gallery__item--tall { grid-column: span 4; aspect-ratio: 4 / 5; }
.gallery__item--third { grid-column: span 4; aspect-ratio: 4 / 3; }
.gallery__item--half { grid-column: span 6; aspect-ratio: 3 / 2; }

.media-full { position: relative; }
.media-full img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* ==========================================================================
   14 Trust: reviews, accreditations, stats
   ========================================================================== */
.stars { display: inline-flex; position: relative; line-height: 1; letter-spacing: 2px; font-size: 1.1rem; }
.stars__bg { color: var(--ink-200); }
.stars__fg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #b38f00;
  pointer-events: none;
}
.stars--invert .stars__bg { color: rgba(255,255,255,0.22); }
.stars--invert .stars__fg { color: var(--ccf-yellow); }

.review-summary { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.review-summary__score { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; color: var(--ink-900); }
.review-summary__meta { font-size: var(--step--1); color: var(--text-muted); }

.trust-strip {
  border-block: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--ink-900);
}
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--sp-4) var(--sp-6);
  padding-block: var(--sp-5);
}
.trust-strip__item {
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1.35;
  font-size: var(--step--1);
  font-weight: 700;
  color: #fff;
}
.trust-strip__item svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  background: var(--ccf-yellow);
  color: var(--ink-900);
  border-radius: 50%;
  flex: none;
}

.badges { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: stretch; }
.badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 156px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease);
}
.badge:hover { border-color: var(--ink-900); }
.badge__name {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  color: var(--ink-900);
  line-height: 1.1;
}
.badge__note { font-size: var(--step--1); color: var(--ink-450); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }
.badges--invert .badge { background: transparent; border-color: rgba(255,255,255,0.18); }
.badges--invert .badge:hover { border-color: var(--ccf-yellow); }
.badges--invert .badge__name { color: var(--ccf-white); }
.badges--invert .badge__note { color: var(--ink-400); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.stat { border-top: 3px solid var(--ccf-yellow); padding-top: var(--sp-4); }
.stat__num { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; display: block; }
.stat__label { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--sp-2); display: block; }
.stats--invert .stat__label { color: var(--ink-300); }

.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: clamp(26px, 3vw, 40px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  height: 100%;
}
.quote-card__text { font-size: var(--step--1); line-height: 1.6; color: var(--ink-800); flex: 1; }
.quote-card__who { display: flex; align-items: center; gap: var(--sp-3); }
.quote-card__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--ccf-yellow);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--step--1);
  flex: none;
}
.quote-card__name { font-weight: 800; font-size: var(--step--1); }
.quote-card__place { font-size: var(--step--1); color: var(--text-muted); }
.quote-card__job {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-450);
}

/* Voices arrangement: one featured quote set large on ink, two supporting
   cards beside it running their stripe edges permanently. The yellow glyph
   only ever sits on the ink panel, where it measures about 13:1. */
.voices {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-5);
  align-items: stretch;
}
.voices__side {
  display: grid;
  gap: var(--sp-5);
  grid-auto-rows: 1fr;
}
.voices__side .quote-card { height: 100%; }
/* Stripes in this section are visible but still, not animated */
.voices .stripe-edge::before,
.voices .stripe-corner::before { animation: none; }

.quote-feature {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: clamp(28px, 4vw, 56px);
  background: var(--ink-900);
  color: var(--ccf-white);
  border-radius: var(--radius-lg);
}
.quote-feature__mark {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 104px);
  line-height: 0.65;
  color: var(--ccf-yellow);
}
.quote-feature__text {
  margin: 0;
  flex: 1;
  font-size: var(--step-2);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ccf-white);
}
.quote-feature__who { display: flex; align-items: center; gap: var(--sp-3); }
.quote-feature__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--ccf-yellow);
  color: var(--ink-900);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--step--1);
  flex: none;
}
.quote-feature__name { font-weight: 800; font-size: var(--step--1); color: var(--ccf-white); }
.quote-feature__place { font-size: var(--step--1); color: var(--ink-300); }

@media (max-width: 1080px) {
  .voices { grid-template-columns: 1fr; }
  .voices__side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
}
@media (max-width: 720px) {
  .voices__side { grid-template-columns: 1fr; }
}

/* Horizontal scroll rail for testimonials and cases on small screens */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }

/* ==========================================================================
   15 Interactive
   ========================================================================== */
.accordion { border-top: 1px solid var(--line); max-width: 920px; margin-inline: auto; }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.accordion__trigger:hover { color: var(--ink-500); }
.accordion__icon { position: relative; width: 18px; height: 18px; flex: none; margin-top: 6px; }
.accordion__icon::before, .accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--ink-900);
  transition: transform var(--dur) var(--ease);
}
.accordion__icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.accordion__icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { color: var(--text-muted); max-width: none; padding-bottom: var(--sp-5); }
.accordion__panel p:last-child { margin-bottom: 0; }

/* Tabs */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-7);
  padding: 0;
  list-style: none;
}
.tabs__btn {
  padding: 13px 22px;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font-weight: 800;
  color: var(--ink-450);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tabs__btn:hover { color: var(--ink-800); }
.tabs__btn[aria-selected="true"] { color: var(--ink-900); border-bottom-color: var(--ccf-yellow); }
.tabs__panel[hidden] { display: none; }

/* Cost calculator */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
}
.calc__form { padding: clamp(26px, 3vw, 44px); display: grid; gap: var(--sp-6); align-content: start; }
.calc__out {
  padding: clamp(26px, 3vw, 44px);
  background: var(--ink-900);
  color: var(--ccf-white);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: relative;
  overflow: hidden;
}
.calc__field {
  display: grid;
  gap: var(--sp-3);
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.calc__field + .calc__field { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.calc__legend {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 0;
  margin: 0 0 var(--sp-2);
  float: left;
  width: 100%;
}
.calc__hint { font-size: var(--step--1); color: var(--text-muted); margin: 0; line-height: 1.5; }
.calc__options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.calc__opt { position: relative; }
.calc__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.calc__opt span {
  display: block;
  padding: 11px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  user-select: none;
}
.calc__opt input:hover + span { border-color: var(--ink-900); }
.calc__opt input:checked + span { background: var(--ink-900); border-color: var(--ink-900); color: var(--ccf-white); }
.calc__opt input:focus-visible + span { outline: 3px solid var(--ccf-yellow); outline-offset: 3px; }

.calc__range { display: grid; gap: var(--sp-3); }
.calc__range input[type="range"] { width: 100%; accent-color: var(--ink-900); height: 30px; }
.calc__rangeval { font-family: var(--font-display); font-size: var(--step-1); }

.calc__result-label {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.calc__result {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ccf-yellow);
}
.calc__result-note { font-size: var(--step--1); color: var(--ink-300); }
.calc__breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--step--1); }
.calc__breakdown li { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: 7px; border-bottom: 1px solid rgba(255,255,255,0.12); color: var(--ink-300); }
.calc__breakdown li strong { color: var(--ccf-white); }
.calc__disclaimer { font-size: var(--step--1); color: var(--ink-300); line-height: 1.5; margin-top: auto; }
.calc__foot { display: grid; gap: var(--sp-3); }
/* Cost calculator, measure groups, breakdown rows and the age band notes */
.calc__groups { display: grid; gap: var(--sp-4); }
.calc__group { display: grid; gap: var(--sp-2); }
.calc__group-label {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-450);
}
.calc__opt--note span { padding-right: 34px; }
.calc__opt--note input:not(:checked) + span {
  border-style: dashed;
  color: var(--ink-500);
  background: var(--ink-050);
}
.calc__opt--note input:not(:checked):hover + span { color: var(--ink-900); }
.calc__opt--note span::after {
  content: "";
  position: absolute;
  top: 50%; right: 15px;
  width: 9px; height: 9px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ccf-yellow);
  box-shadow: 0 0 0 2px var(--ink-900);
  pointer-events: none;
}
.calc__breakdown li { align-items: flex-start; }
.calc__breakdown li strong { white-space: nowrap; }
.calc__breakdown .calc__empty { display: block; }
.calc__row { display: grid; gap: 3px; min-width: 0; }
.calc__out .calc__row-label { color: var(--ccf-white); font-weight: 700; }
.calc__out a.calc__row-label {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}
.calc__out a.calc__row-label:hover,
.calc__out a.calc__row-label:focus-visible { color: var(--ccf-white); text-decoration-color: var(--ccf-yellow); }
.calc__row-inc { display: block; font-size: var(--step--2); color: var(--ink-300); line-height: 1.45; }
.calc__notes { display: grid; gap: var(--sp-3); }
.calc__notes[hidden] { display: none; }
.calc__notes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.calc__notes-list li {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-left: 3px solid var(--ccf-yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-300);
}
.calc__notes-list li strong { color: var(--ccf-white); }
.calc__notes-list li p { margin: 0; max-width: none; }

/* Home selector, a lightweight qualifier */
.selector { display: grid; gap: var(--sp-5); }
.selector__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-800);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--ink-900); }
.chip.is-on { background: var(--ccf-yellow); border-color: var(--ccf-yellow); color: var(--ink-900); }
.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--line-strong); }

/* Filter bar for listings */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-7); }

/* ==========================================================================
   16 Forms
   ========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.field { display: grid; gap: 7px; align-content: start; }
.field__label { font-size: var(--step--1); font-weight: 800; color: var(--ink-800); }
.field__label span { color: var(--ccf-yellow-deep); }
.field__hint { font-size: var(--step--1); color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--ink-900);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink-900);
  box-shadow: 0 0 0 3px var(--ccf-yellow-tint);
}
.textarea { min-height: 130px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230e0f10' stroke-width='2'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 44px;
}
.form__consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-3); align-items: start; font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.form__consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink-900); }
.form__consent a { border-bottom: 1px solid var(--ccf-yellow); font-weight: 600; }

.form-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 44px);
  box-shadow: var(--shadow-2);
}
.form-panel--dark { background: var(--ink-800); border-color: var(--ink-700); }
.form-panel--dark .field__label { color: var(--ccf-white); }
.form-panel--dark .field__hint, .form-panel--dark .form__consent { color: var(--ink-300); }
.form-panel--dark .input,
.form-panel--dark .select,
.form-panel--dark .textarea {
  background: var(--ink-900);
  border-color: rgba(255,255,255,0.18);
  color: var(--ccf-white);
}
.form-panel--dark .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

/* Step progress for the multi step enquiry */
.steps { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.steps__item { flex: 1; height: 5px; border-radius: 999px; background: var(--line-strong); transition: background var(--dur) var(--ease); }
.steps__item.is-done { background: var(--ccf-yellow); }

/* Numbered steps for the Contact Form 7 enquiry (built by initEnquirySteps) */
.form-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-7); padding: 0; }
.form-steps__btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 0 0 14px; border: 0; border-bottom: 4px solid var(--line-strong); background: none;
  font: inherit; font-weight: 700; color: var(--text-muted); text-align: left; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.form-steps__btn:disabled { cursor: default; }
.form-steps__num {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--line-strong); font-weight: 800; color: var(--text-muted);
}
.form-steps .is-current .form-steps__btn { border-bottom-color: var(--ccf-yellow); color: var(--ink-900); }
.form-steps .is-current .form-steps__num { background: var(--ccf-yellow); border-color: var(--ccf-yellow); color: var(--ink-900); }
.form-steps .is-done .form-steps__btn { border-bottom-color: var(--ink-900); color: var(--ink-900); }
.form-steps .is-done .form-steps__num { background: var(--ink-900); border-color: var(--ink-900); color: var(--ccf-white); }
.form-step[hidden], .is-stepped [hidden] { display: none !important; }
@media (max-width: 620px) {
  .form-steps__btn { flex-direction: column; gap: 8px; text-align: center; font-size: var(--step--1); }
}

/* ==========================================================================
   17 Bands
   ========================================================================== */
.band-finance {
  background: var(--ccf-yellow);
  color: var(--ink-900);
  position: relative;
  overflow: hidden;
}
.band-finance__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 72px);
}
.band-finance h2 { color: var(--ink-900); margin-bottom: var(--sp-3); }
.band-finance p { color: rgba(14,15,16,0.76); max-width: 62ch; }
.band-finance .btn--dark:hover { --btn-bg: var(--ccf-white); --btn-fg: var(--ink-900); --btn-bd: var(--ccf-white); }

.band-cta {
  background: var(--ink-900);
  color: var(--ccf-white);
  position: relative;
  overflow: hidden;
}
.band-cta__inner {
  padding-block: clamp(56px, 7vw, 112px);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
}
.band-cta h2 { color: var(--ccf-white); margin-bottom: var(--sp-4); }
.band-cta p { color: var(--ink-300); }
.band-cta__actions { display: grid; gap: var(--sp-3); }
.band-cta__media { position: absolute; inset: 0; z-index: 0; opacity: 0.22; }
.band-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.band-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ink-900) 12%, rgba(14,15,16,0.55) 100%);
}

.band-quote { background: var(--bone); }
.band-quote__inner { padding-block: clamp(48px, 6vw, 88px); display: grid; gap: var(--sp-6); max-width: 900px; }

/* Full width photographic call to action. The image carries the band, so the
   overlay only darkens enough for the type to hold AA contrast. */
.band-photo {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--ccf-white);
}
.band-photo__media { position: absolute; inset: 0; z-index: 0; }
.band-photo__media img { width: 100%; height: 100%; object-fit: cover; }
.band-photo__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(14,15,16,0.82) 0%, rgba(14,15,16,0.60) 55%, rgba(14,15,16,0.52) 100%);
}
.band-photo__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 10vw, 152px);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.band-photo__inner h2 { color: var(--ccf-white); }
.band-photo__inner p { color: rgba(255, 255, 255, 0.82); margin: 0; }
.band-photo__inner .btn { margin-top: var(--sp-3); }

/* A yellow punctuation band carrying one statement and nothing else.
   One per page, maximum. */
.band-statement {
  background: var(--ccf-yellow);
  color: var(--ink-900);
  position: relative;
  overflow: hidden;
}
.band-statement__inner {
  padding-block: clamp(44px, 5.5vw, 84px);
  position: relative;
  z-index: 1;
  max-width: 940px;
}
.band-statement :is(h2, .h2) { color: var(--ink-900); margin-bottom: var(--sp-4); }
.band-statement p { color: rgba(14, 15, 16, 0.76); max-width: 68ch; }
.band-statement .btn-row { margin-top: var(--sp-6); }

/* ==========================================================================
   18 Footer
   ========================================================================== */
.site-footer { background: var(--ink-900); color: var(--ink-300); font-size: var(--step--1); }
.site-footer a { color: var(--ink-300); }
.site-footer a:hover { color: var(--ccf-yellow); }
/* The stacked contact links need a 24px tall tap target on phones */
.site-footer__brand > div > a { display: inline-block; padding-block: 3px; }
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px);
  padding-block: clamp(48px, 6vw, 88px);
}
.site-footer__brand { display: grid; gap: var(--sp-5); align-content: start; }
.site-footer__logo { height: 56px; width: auto; }
.site-footer__addr { font-style: normal; line-height: 1.75; }
.site-footer__addr strong { color: var(--ccf-white); }
.site-footer__h {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ccf-white);
  margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer__socials { display: flex; gap: var(--sp-3); }
.site-footer__socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  transition: all var(--dur-fast) var(--ease);
}
.site-footer__socials a:hover { background: var(--ccf-yellow); border-color: var(--ccf-yellow); color: var(--ink-900); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--step--1);
  color: var(--ink-400);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }


/* Paired before and after frames.
   Two fixed images, identical crop, separated by one yellow rule. This is the
   honest device: nothing is hidden behind a handle, and on mobile the frames
   stack rather than overlapping. */
.pair {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--ink-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pair__rule { background: var(--ccf-yellow); }
.pair__frame { position: relative; }
.pair__frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pair__caption {
  position: absolute;
  left: 0; bottom: 0;
  background: rgba(14, 15, 16, 0.84);
  color: var(--ccf-white);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 8px 14px;
}
.pair__frame--after .pair__caption { background: var(--ccf-yellow); color: var(--ink-900); }

/* Case study layout: asymmetric by default, never centred */
.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.case-rail { display: grid; gap: var(--sp-6); }
.case-rail__block { display: grid; gap: var(--sp-2); }
.case-rail__label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-450);
}
.case-rail__value { font-weight: 700; color: var(--ink-900); }

/* Rating line that sits beside a call to action rather than in its own band */
.rating-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
}
.rating-line--invert { color: var(--ink-300); }

/* Certification rail: each credential explained in a sentence, low on the page */
.cred-rail { display: grid; gap: 0; }
.cred {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
  align-items: start;
}
.cred:last-child { border-bottom: 1px solid var(--line); }
.cred__name { font-family: var(--font-display); letter-spacing: -0.01em; color: var(--ink-900); }
.cred__what { color: var(--text-muted); margin: 0; }
.cred__what strong { color: var(--ink-900); }
.cred--pending .cred__name { color: var(--ink-450); }

/* A note the client needs to action before launch. Visible on purpose. */
.todo {
  border-left: 4px solid var(--ccf-yellow);
  background: var(--bone);
  padding: 14px 18px;
  font-size: var(--step--1);
  color: var(--ink-600);
  line-height: 1.55;
}
.todo strong { color: var(--ink-900); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step--1); }

/* Price band, published on the service page itself */
.price-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6);
  border: 2px solid var(--ink-900);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.price-band__figure {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}
.price-band__label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-450);
  display: block;
  margin-bottom: var(--sp-2);
}
.price-band__note { font-size: var(--step--1); color: var(--text-muted); margin: var(--sp-3) 0 0; }

/* Anchored contents list for long pages */
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.toc a {
  display: block;
  padding: 10px 0 10px 16px;
  border-left: 2px solid var(--line);
  font-weight: 600;
  color: var(--ink-600);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.toc a:hover { border-left-color: var(--ccf-yellow); color: var(--ink-900); }

/* Editorial article rail: full width rows with display scale titles, used where
   a card grid would be one card grid too many. */
.reads { border-bottom: 1px solid var(--line-strong); }
.read {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 64px;
  gap: clamp(20px, 3vw, 64px);
  align-items: center;
  padding-block: clamp(26px, 3.2vw, 44px);
  border-top: 1px solid var(--line-strong);
}
.read__kicker {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-450);
}
.read__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  transition: transform var(--dur) var(--ease);
}
.read__text {
  display: block;
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--step-0);
  max-width: 74ch;
}
.read__arrow {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--ink-900);
  display: grid;
  place-items: center;
  justify-self: end;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.read__arrow::after {
  content: "";
  width: 20px;
  height: 10px;
  background: var(--ink-900);
  clip-path: polygon(0 3.5px, 13px 3.5px, 13px 0, 20px 5px, 13px 10px, 13px 6.5px, 0 6.5px);
}
.read:hover .read__title { transform: translateX(10px); }
.read:hover .read__arrow { background: var(--ccf-yellow); border-color: var(--ccf-yellow); }

@media (max-width: 860px) {
  .pair { grid-template-columns: 1fr; }
  .pair__rule { height: 3px; }
  .case-layout { grid-template-columns: 1fr; }
  .cred { grid-template-columns: 1fr; gap: var(--sp-2); }
  .price-band { grid-template-columns: 1fr; }
  .read { grid-template-columns: 1fr; gap: var(--sp-3); }
  .read__arrow { display: none; }
}


/* --------------------------------------------------------------------------
   Dark ground inheritance.
   Anything placed inside a dark section or a dark panel adapts automatically,
   so pages never need an inline colour override.
   -------------------------------------------------------------------------- */
.section--dark .defs__row,
.panel .defs__row,
.calc__out .defs__row { border-color: rgba(255, 255, 255, 0.14); }
.section--dark .defs__term,
.panel .defs__term,
.calc__out .defs__term { color: var(--ccf-white); }
.section--dark .defs__desc,
.panel .defs__desc,
.calc__out .defs__desc { color: var(--ink-300); }
.section--dark > :not(.panel--bone):not(.panel--yellow) :is(h3, h4, h5, .h3, .h4, .h5),
.section--dark > * :is(h3, h4, h5, .h3, .h4, .h5):not(.panel--bone *):not(.panel--yellow *):not(.card:not(.card--dark) *) { color: var(--ccf-white); }
.section--dark .card:not(.card--dark) :is(h2, h3, h4, h5, .h2, .h3, .h4, .h5) { color: var(--ink-900); }
.section--dark .card:not(.card--dark) .card__text { color: var(--text-muted); }
.section--dark .quote-card :is(h2, h3, h4, .h3, .h4) { color: var(--ink-900); }
.section--dark .panel--bone .card__text,
.section--dark .panel--yellow .card__text { color: var(--text-muted); }
.section--dark .prose { color: var(--ink-300); }
.section--dark .prose strong { color: var(--ccf-white); }
.section--dark .section-index { color: var(--ink-400); }
.section--dark .accordion,
.section--dark .accordion__item { border-color: rgba(255, 255, 255, 0.16); }
.section--dark .accordion__trigger { color: var(--ccf-white); }
.section--dark .accordion__trigger:hover { color: var(--ink-300); }
.section--dark .accordion__icon::before,
.section--dark .accordion__icon::after { background: var(--ccf-yellow); }
.section--dark .accordion__panel p { color: var(--ink-300); }
.section--dark .toc a { border-left-color: rgba(255, 255, 255, 0.2); color: var(--ink-300); }
.section--dark .cred { border-color: rgba(255, 255, 255, 0.14); }
.section--dark .cred__name { color: var(--ccf-white); }
.section--dark .cred__what { color: var(--ink-300); }
.section--dark .stripe-rule { opacity: 0.9; }

.panel--yellow .defs__row { border-color: rgba(14, 15, 16, 0.16); }
.panel--yellow .defs__term { color: var(--ink-900); }
.panel--yellow .defs__desc { color: rgba(14, 15, 16, 0.72); }


/* --------------------------------------------------------------------------
   Light surfaces re-assert themselves.
   A card, panel or price band that paints its own light background must also
   own its text colour, otherwise a dark section repaints its contents and the
   text disappears. This block is deliberately more specific than the dark
   inheritance block above it.
   -------------------------------------------------------------------------- */
.light-surface,
.card:not(.card--dark),
.quote-card,
.panel--bone,
.panel--yellow,
.price-band,
.form-panel:not(.form-panel--dark),
.contrast__col,
.calc,
.problem-card,
.pathway:not(.pathway--dark),
.measure-list__item,
.badge:not(.badges--invert .badge),
.card-media__body,
.ba,
.pair { color: var(--text); }

:is(.light-surface, .card:not(.card--dark), .quote-card, .panel--bone, .price-band,
    .form-panel:not(.form-panel--dark), .contrast__col, .calc, .problem-card,
    .pathway:not(.pathway--dark), .card-media__body)
  :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display) { color: var(--ink-900); }

:is(.light-surface, .card:not(.card--dark), .quote-card, .panel--bone, .price-band,
    .form-panel:not(.form-panel--dark), .contrast__col, .calc, .problem-card,
    .pathway:not(.pathway--dark), .card-media__body) .defs__term { color: var(--ink-900); }

:is(.light-surface, .card:not(.card--dark), .quote-card, .panel--bone, .price-band,
    .form-panel:not(.form-panel--dark), .contrast__col, .calc, .problem-card,
    .pathway:not(.pathway--dark), .card-media__body)
  :is(.defs__desc, .card__text, .note, .text-muted, .problem-card__answer, .pathway__lede) { color: var(--text-muted); }

:is(.light-surface, .card:not(.card--dark), .quote-card, .panel--bone, .price-band,
    .form-panel:not(.form-panel--dark), .contrast__col, .calc, .problem-card,
    .pathway:not(.pathway--dark), .card-media__body) .defs__row { border-color: var(--line); }

:is(.light-surface, .card:not(.card--dark), .quote-card, .panel--bone, .price-band,
    .form-panel:not(.form-panel--dark), .contrast__col, .problem-card,
    .pathway:not(.pathway--dark), .card-media__body)
  :is(.card__kicker, .eyebrow, .section-index, .case-rail__label, .price-band__label) { color: var(--ink-450); }

/* Yellow panels keep near black type throughout */
.panel--yellow :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) { color: var(--ink-900); }
.panel--yellow :is(.card__text, .note, .text-muted, .defs__desc) { color: rgba(14, 15, 16, 0.72); }
.panel--yellow :is(.card__kicker, .eyebrow, .section-index) { color: rgba(14, 15, 16, 0.66); }
.panel--yellow .eyebrow::before { background: var(--ink-900); }

/* --------------------------------------------------------------------------
   Dark surfaces have the last word.
   A dark card can legitimately sit inside a light panel, for example the
   "already had it done, and worried" card inside the bone coloured damp answer
   on the external wall insulation page. The light panel must not repaint it.
   The class is repeated in each compound purely to raise specificity above the
   light surface block above, which is the only honest way to express
   "whichever surface is closest wins" in plain CSS.
   -------------------------------------------------------------------------- */
.card--dark.card--dark,
.pathway--dark.pathway--dark,
.panel:not(.panel--bone):not(.panel--yellow),
.form-panel--dark.form-panel--dark,
.calc__out.calc__out,
.service-card.service-card,
.mega__feature.mega__feature { color: var(--ccf-white); }

:is(.card--dark.card--dark, .pathway--dark.pathway--dark,
    .panel:not(.panel--bone):not(.panel--yellow), .form-panel--dark.form-panel--dark,
    .calc__out.calc__out, .service-card.service-card, .mega__feature.mega__feature)
  :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display) { color: var(--ccf-white); }

:is(.card--dark.card--dark, .pathway--dark.pathway--dark,
    .panel:not(.panel--bone):not(.panel--yellow), .form-panel--dark.form-panel--dark,
    .calc__out.calc__out, .service-card.service-card, .mega__feature.mega__feature)
  :is(.card__text, .note, .text-muted, .defs__desc, .problem-card__answer,
      .pathway__lede, .service-card__text) { color: var(--ink-300); }

:is(.card--dark.card--dark, .pathway--dark.pathway--dark,
    .panel:not(.panel--bone):not(.panel--yellow), .form-panel--dark.form-panel--dark,
    .calc__out.calc__out) .defs__term { color: var(--ccf-white); }

:is(.card--dark.card--dark, .pathway--dark.pathway--dark,
    .panel:not(.panel--bone):not(.panel--yellow), .form-panel--dark.form-panel--dark,
    .calc__out.calc__out) .defs__row { border-color: rgba(255, 255, 255, 0.14); }

:is(.card--dark.card--dark, .pathway--dark.pathway--dark,
    .panel:not(.panel--bone):not(.panel--yellow), .form-panel--dark.form-panel--dark,
    .calc__out.calc__out, .service-card.service-card, .mega__feature.mega__feature)
  :is(.card__kicker, .eyebrow, .section-index, .case-rail__label,
      .price-band__label, .ladder__tag) { color: var(--ink-300); }

/* Quiet micro labels need lifting on dark grounds, where ink-450 is unreadable */
.section--dark .card__kicker,
.band-cta .card__kicker,
.hero .card__kicker { color: var(--ink-300); }

/* The published price band is a light card, so its figure is dark type */
.price-band__figure { color: var(--ink-900); }
.price-band__note { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Small text utilities, so a page never reaches for an inline style
   -------------------------------------------------------------------------- */
.note { font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }
.note--invert { color: var(--ink-300); }
.txt-invert { color: var(--ccf-white); }
.txt-dim { color: var(--ink-300); }
.txt-quiet { color: var(--ink-450); }
.w-narrow { max-width: 62ch; }
.w-mid { max-width: 78ch; }
.center-block { margin-inline: auto; }

/* ==========================================================================
   19 Utilities and motion
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-7 { margin-bottom: var(--sp-7); }
.sticky-side { position: sticky; top: calc(var(--header-h) + 28px); }

/* Scroll reveal. Base state is visible so the page still works without JS;
   the class is only added once JS confirms IntersectionObserver support. */
.js-reveal.reveal-ready {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js-reveal.is-visible { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: 90ms; }
.js-reveal[data-delay="2"] { transition-delay: 180ms; }
.js-reveal[data-delay="3"] { transition-delay: 270ms; }
.js-reveal[data-delay="4"] { transition-delay: 360ms; }

@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;
  }
  .js-reveal.reveal-ready { opacity: 1; transform: none; }
}

/* ==========================================================================
   20 Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .mega__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega__inner--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Scoped to the menu, so the hero's feature card is not caught by it */
  .mega .mega__feature { display: none; }
  .mega__inner--one { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .mega .mega__feature--wide { display: flex; }
  .site-footer__top { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); }
  .site-footer__col--last { display: none; }
}

@media (max-width: 1100px) {
  /* Not enough width to float the hero card beside the copy, so it drops into
     normal flow underneath and the reserved gutter comes back. */
  .hero__inner--aside { padding-right: var(--gutter); }
  .hero__aside {
    position: static;
    width: auto;
    max-width: 460px;
    margin-top: var(--sp-7);
  }
}

@media (max-width: 1024px) {
  :root { --header-h: 74px; }
  .primary-nav, .header-phone { display: none; }
  /* The hidden nav normally carries the margin-left: auto that pushes the
     actions to the right edge, so the actions take it over here. */
  .header-actions { margin-left: auto; }
  /* The mega panels are unreachable once the nav is hidden, but visibility:hidden
     still lays them out, and their fixed 300px column widens the mobile layout
     viewport, clipping the fixed action bar on phones. */
  .mega { display: none; }
  .nav-toggle { display: inline-flex; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track, .track--three, .track--five, .track--six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__media { min-height: 300px; order: -1; }
  .calc { grid-template-columns: 1fr; }
  .band-cta__inner { grid-template-columns: 1fr; }
  .band-finance__inner { grid-template-columns: 1fr; }
  .section-head--split { grid-template-columns: 1fr; align-items: start; }
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__col--last { display: block; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .split, .split--lead, .split--trail, .split--article { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pathways { grid-template-columns: 1fr; }
  .contrast { grid-template-columns: 1fr; }
  .defs__row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .defs--right .defs__desc { text-align: left; }
  .gallery__item--wide, .gallery__item--tall, .gallery__item--third, .gallery__item--half { grid-column: span 12; }
  .action-bar { display: flex; }
  body { padding-bottom: 74px; }
  .hero__inner { padding-block: clamp(56px, 12vw, 96px); }
}

@media (max-width: 760px) {
  /* The sticky action bar already carries the primary call to action on small
     screens, so the header keeps only the brand and the menu. */
  .header-actions .btn { display: none; }
  .utility-bar__inner { justify-content: center; padding-block: 10px; }
  .utility-bar__list { justify-content: center; gap: var(--sp-1) var(--sp-4); }
  /* Centred hero on the homepage only; other pages keep the left-set hero. */
  .hero--60vh .hero__title, .hero--60vh .hero__copy { text-align: center; }
  .hero--60vh .hero__meta { justify-content: center; }
  /* Homepage copy reads centred on phones. The route cards, the services
     section and the case study cards stay left-set. */
  .page-home main :is(h1, h2, h3, h4, p) { text-align: center; }
  .page-home main :is(.pathway, .home-services, .card-media) :is(h1, h2, h3, h4, p) { text-align: left; }
  .page-home .stat { text-align: center; }
  .page-home .defs__row { text-align: center; }
  /* Beats the .defs--right left-set override so the price values centre too. */
  .page-home .defs__desc { text-align: center; }
  .page-home .ladder__num { text-align: center; }
  .page-home .ladder__title { justify-content: center; }
  /* Arrow links outside the left-set cards centre with the copy around them. */
  .page-home .problem-card__foot { text-align: center; }
  .page-home .panel .stack > div { text-align: center; }
  /* The homepage trust strip repeats what the hero meta already says, and the
     Eco-lution aside card is desktop furniture; both go on phones. */
  .trust-strip { display: none; }
  .hero__aside { display: none; }
  /* Footer call to action reads centred on phones. */
  .band-cta__inner { text-align: center; }
  .band-cta .btn-note { justify-content: center; }
  /* Phones keep only the brand block in the footer: socials, then the
     divider, then the copyright line. The link columns are drawer territory. */
  .site-footer__top > div:not(.site-footer__brand) { display: none; }
  .site-footer { text-align: center; }
  .site-footer__brand { justify-items: center; }
  .site-footer__socials { justify-content: center; }
  .site-footer__bottom { justify-content: center; }
  .site-footer__legal { justify-content: center; }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .track, .track--three, .track--five, .track--six { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .ladder__rung { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ladder__num { font-size: var(--step-2); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .action-bar .btn { width: auto; }
  .hero__actions .btn { width: 100%; }
  .site-footer__top { grid-template-columns: 1fr; }
  .trust-strip__inner { grid-template-columns: 1fr; }
  .stripe-corner { width: 120px; height: 120px; }
}

@media print {
  .site-header, .utility-bar, .action-bar, .drawer, .scrim, .band-cta, .site-footer { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ==========================================================================
   WhatsApp chat mockup
   ========================================================================== */
.wa-chat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.wa-chat__fab {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  transition: transform var(--dur-fast) var(--ease);
}
.wa-chat__fab:hover { transform: scale(1.06); }
.wa-chat__panel {
  width: min(340px, calc(100vw - 24px));
  border-radius: 14px;
  overflow: hidden;
  background: #ece5dd;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
}
.wa-chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #075e54;
  color: #fff;
  padding: 12px 14px;
}
.wa-chat__avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
}
.wa-chat__id { display: grid; margin: 0; line-height: 1.3; }
.wa-chat__id strong { font-size: var(--step--1); }
.wa-chat__id span { font-size: var(--step--2); opacity: 0.75; }
.wa-chat__close {
  margin-left: auto;
  background: none;
  border: 0;
  color: #fff;
  opacity: 0.8;
  cursor: pointer;
  padding: 6px;
  display: grid;
  place-items: center;
}
.wa-chat__close:hover { opacity: 1; }
.wa-chat__body { padding: 18px 14px; min-height: 96px; }
.wa-chat__bubble {
  background: #fff;
  color: #111;
  border-radius: 0 10px 10px 10px;
  padding: 10px 12px;
  font-size: var(--step--1);
  max-width: 88%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  margin: 0;
}
.wa-chat__foot { display: flex; gap: 8px; padding: 10px 12px; background: #f7f5f2; }
.wa-chat__input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d9d4cc;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-size: var(--step--1);
  background: #fff;
}
.wa-chat__input:focus { outline: 2px solid #25d366; outline-offset: 1px; border-color: transparent; }
.wa-chat__send {
  width: 42px;
  height: 42px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.wa-chat__send:hover { background: #1eb85a; }

/* ==========================================================================
   Cookie banner mockup
   ========================================================================== */
.cookie-bar {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 130;
  width: min(560px, calc(100vw - 110px));
  background: var(--ink-900);
  color: #fff;
  border-top: 3px solid var(--ccf-yellow);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar__title { font-weight: 800; margin: 0 0 4px; }
.cookie-bar__text { margin: 0; font-size: var(--step--1); color: var(--ink-300); max-width: 52ch; }
.cookie-bar__text a { color: var(--ccf-yellow); }
.cookie-bar__actions { display: flex; gap: 8px; flex: none; }

@media (max-width: 860px) {
  /* Sit both above the sticky mobile action bar */
  .wa-chat { right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); }
  .cookie-bar { left: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); width: calc(100vw - 96px); }
}

@media print {
  .wa-chat, .cookie-bar { display: none !important; }
}

/* ------------------------------------------------------------------ Contact Form 7 (WordPress)
   The enquiry form keeps the prototype's field markup; these rules only tame the wrappers,
   validation tips and response box that Contact Form 7 adds around it. */
.wpcf7-form-control-wrap { display: block; }
.form__consent .wpcf7-form-control-wrap,
.form__consent .wpcf7-acceptance,
.form__consent .wpcf7-list-item { display: contents; }
.form__consent .wpcf7-list-item label {
  grid-column: 1 / -1; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-3); align-items: start;
}
.form__consent .wpcf7-list-item-label { display: block; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: var(--step--1); font-weight: 600; color: #b3261e; }
.wpcf7 .input.wpcf7-not-valid, .wpcf7 .select.wpcf7-not-valid, .wpcf7 .textarea.wpcf7-not-valid { border-color: #b3261e; }
.wpcf7 form .wpcf7-response-output {
  margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4); border: 2px solid var(--ink-900); border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 600; color: var(--ink-900);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: #b3261e; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--ccf-yellow); background: var(--ccf-yellow); }
.wpcf7-spinner { margin-left: var(--sp-3); }

/* Blog: category links, article cards and numbered pagination (wp/theme/template-parts/blog-list.php) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.blog-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.post-card .card-media__img { background: var(--bone); }
.post-card__date { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-450); margin-bottom: var(--sp-2); }
.post-card .card__title { margin-bottom: var(--sp-3); }
.blog-pager { margin-top: var(--sp-9); }
.blog-pager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.blog-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink-800); font-weight: 700;
  transition: all var(--dur-fast) var(--ease);
}
.blog-pager a.page-numbers:hover { border-color: var(--ink-900); }
.blog-pager .page-numbers.current { background: var(--ccf-yellow); border-color: var(--ccf-yellow); color: var(--ink-900); }
.blog-pager .page-numbers.dots { border-color: transparent; background: none; min-width: 0; padding: 0 4px; }
@media (max-width: 760px) {
  .post-grid { grid-template-columns: 1fr; }
}
/* The form's submit is an input, which does not inherit the body font size like a button link does */
input.btn { font-size: var(--step-0); line-height: 1.2; }

/* Partner logo panel. A partner's logo is shown exactly as supplied, on white, at the
   on-screen heights the University of Nottingham brand guidelines give (130px desktop,
   80px tablet, 50px mobile) and with at least half the logo's depth clear on every side. */
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 72px;
}
.partner-logo a { display: block; }
.partner-logo img { display: block; width: min(349px, 100%); height: auto; background: none; }
.partner-logo__note { margin-top: var(--sp-4); font-size: var(--step--2); color: var(--text-muted); }
@media (max-width: 1199px) {
  .partner-logo { padding: 48px; }
  .partner-logo img { width: min(215px, 100%); }
}
@media (max-width: 767px) {
  .partner-logo { padding: 32px; }
  .partner-logo img { width: min(134px, 100%); }
}

/* A list of short "More ..." statements set in the display face, two to a row */
.more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-6);
}
.more-list li {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}
.more-list li span { color: var(--ink-450); }
@media (max-width: 620px) {
  .more-list { grid-template-columns: 1fr; }
}