/* Self-hosted fonts (Poppins + DM Sans) — no third-party font calls.
   Regenerate with _source/gen_fonts.py */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Product Scope — Design System & Site Styles
   Rebuilt from live site (productscope.uk), Qode "Leroux" theme reference.
   Single shared stylesheet for the whole static site.

   Design language: minimal, professional B2B. Structural dark surfaces
   (header, hero, CTA, footer) use a SLATE CHARCOAL; burgundy (#800020) is
   used sparingly as an ACCENT only (links, eyebrows, icons, small highlights).
   Headings in Poppins, body in DM Sans.
   See docs/DESIGN-SYSTEM.md for tokens & rationale.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand accent (used sparingly — links, eyebrows, icons, highlights) */
  --brand: #800020;          /* oxblood burgundy — accent */
  --brand-dark: #5e0018;     /* hover / pressed */
  --brand-tint: #f7ebee;     /* pale burgundy wash for small fills */

  /* Structural dark surfaces (header / hero / CTA / footer) — slate charcoal */
  --surface-dark: #1b2329;
  --surface-dark-2: #243038;
  --surface-darker: #141a1f;

  /* Ink & neutrals */
  --ink: #263037;            /* body text (dark slate) */
  --heading: #20282d;        /* headings (near-black slate) */
  --muted: #54606a;          /* secondary text */
  --bg: #ffffff;
  --bg-alt: #e4e9ee;         /* cool grey band — matched to the pastel bands' depth */
  --line: #e3e8ea;

  /* Accent */
  --gold: #c9a227;           /* incidental highlight / rating */

  /* Section accents (match live productscope.uk) */
  --topbar: #800020;         /* thin burgundy bar above the header */
  --cta-blue: #1e3a5f;       /* "Interested in working together?" band */
  --band-warm: #f4e6e6;      /* warm band — blush (echoes the burgundy accent) */
  --band-cool: #dde6ef;      /* cool band — pale navy tint (ties to the navy CTA) */
  --band-third: #efe6d2;     /* third band — soft champagne (ties to the gold accent) */
  --footer-bg: #1b2329;      /* footer — deep slate */

  /* In-content link colour */
  --link: #800020;
  --link-hover: #5e0018;

  /* Buttons (dark charcoal primary, matching the slate surfaces) */
  --btn-dark: #20282d;
  --btn-dark-hover: #0f1316;

  /* Typography */
  --font-heading: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.06);

  /* Header height (used for scroll offset) */
  --header-h: 84px;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;   /* long URLs/words wrap instead of forcing horizontal scroll on mobile */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--brand-dark); }

/* ---------- Focus visibility (keyboard) ---------- */
/* One consistent, high-contrast ring for everything keyboard-focusable. */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
/* On burgundy / dark / photo backgrounds a white ring stays visible. */
.site-header :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible { outline-color: #fff; }

/* ---------- Skip to content (keyboard bypass) ---------- */
.skip-link {
  position: absolute; left: 8px; top: -64px; z-index: 200;
  background: #fff; color: var(--brand);
  font-family: var(--font-heading); font-weight: 600;
  padding: 10px 18px; border-radius: 6px; box-shadow: var(--shadow);
  transition: top .2s ease;
}
.skip-link:focus { top: 8px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading);
  line-height: 1.25;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: .2px;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h4 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; }

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

.section { padding: clamp(40px, 5vw, 64px) 0; }
.section--alt { background: var(--bg-alt); }

/* Collapse doubled padding when two SAME-background sections stack,
   so consecutive white (or consecutive grey) sections read as one rhythm
   instead of leaving a huge gap. Different backgrounds keep full padding. */
.section:not(.section--alt):not(.section--warm):not(.section--cool):not(.section--feature):not(.cta-band) + .section:not(.section--alt):not(.section--warm):not(.section--cool):not(.section--feature):not(.cta-band) { padding-top: 0; }
.section--alt + .section--alt { padding-top: 0; }

.section--cool + .section--cool { padding-top: 0; }

/* Panel-holding sections add NO outer padding — the contained .panel carries its
   own generous padding, and the neighbouring sections' rhythm supplies the gap, so
   the panel sits on the same 64px rhythm as everything else without doubling up. */
.section--feature { padding-block: 0; }
/* A flush full-bleed photo strip immediately after a panel section needs the
   rhythm gap restored (the panel section contributes none). */
.section--feature + .photo-strip { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- Subtle scroll-reveal (hidden state applied by main.js; no-JS safe) ---------- */
.reveal-up { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.reveal-up.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1; transform: none; transition: none; } }

.section-head { text-align: left; max-width: 720px; margin: 0 0 44px; }
.section-head p {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.12rem, 1.6vw, 1.32rem);
  line-height: 1.5;
  color: #43505a;
  max-width: none;        /* full container width */
}
/* Fixed-length burgundy divider under section headings (same length everywhere) */
.section-head h2::after {
  content: ""; display: block; width: 64px; height: 3px;
  border-radius: 2px; background: var(--brand); margin-top: 18px;
}
.section-head h2::after { margin-left: 0; }  /* left-aligned sections */
.section-head--wide { max-width: none; }      /* intro spans the full container */

/* Utility: left-aligned burgundy divider under a bare section <h2> */
.h2-rule::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--brand); margin-top: 18px; }

/* Section header with an inline "View all" link (Case Studies, Articles) */
.cs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(26px, 4vw, 42px); }
.cs-head__main { max-width: 720px; }
.cs-head__main h2 { margin-bottom: 0; }
.cs-head__main h2::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--brand); margin-top: 16px; }
.cs-head__main p { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.12rem, 1.6vw, 1.32rem); line-height: 1.5; color: #43505a; margin: 16px 0 0; }
.cs-head__btn { flex: 0 0 auto; white-space: nowrap; }




@media (max-width: 680px) { .cs-head { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* Reusable brand subheading (under a section H2) */


.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
  padding: 14px 30px;
  border-radius: 4px;                 /* live theme uses near-rectangular buttons */
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  text-align: center;
}
/* ===== Button system: Primary (filled brand) + Secondary (outline) =====
   On dark/brand bands both flip to white for contrast (overrides below). */
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn--outline { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn--outline:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.hero .btn--primary, .cta-band .btn--primary, .post-cta .btn--primary { background: #fff; border-color: #fff; color: var(--brand); }
.hero .btn--primary:hover, .cta-band .btn--primary:hover, .post-cta .btn--primary:hover { background: #f0e2e6; border-color: #f0e2e6; color: var(--brand-dark); }
.hero .btn--outline, .cta-band .btn--outline, .post-cta .btn--outline { border-color: rgba(255,255,255,.6); color: #fff; }
.hero .btn--outline:hover, .cta-band .btn--outline:hover, .post-cta .btn--outline:hover { background: #fff; border-color: #fff; color: var(--brand); }

/* ==========================================================================
   Header
   ========================================================================== */
/* Legacy topbar div (kept in some pages) — folded into the header accent below. */
.topbar { display: none; }

/* Fixed header — ALWAYS solid + visible (white logo/nav legible on every page),
   with a thin burgundy accent line at the very top. */
.site-header {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 100;
  background: var(--cta-blue);          /* navy #1e3a5f — ties to the CTA bands */
  border-top: 4px solid var(--brand);   /* thin burgundy accent line */
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.16);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 24px;
}
.site-logo img { height: 52px; width: auto; }

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}
.main-nav a {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: .98rem;
  padding: 6px 0;
  position: relative;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: #fff;
  transition: width .25s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { width: 100%; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle svg { width: 28px; height: 28px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  color: #fff;
  text-align: left;
  background: #2a2a2a;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Directional: dark on the left (text sits here), clearing to the right so the
     lens / lake stays visible. */
  background: linear-gradient(90deg, rgba(16,20,24,.88) 0%, rgba(16,20,24,.66) 42%, rgba(16,20,24,.18) 80%, rgba(16,20,24,.05) 100%);
}
.hero__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(140px, 18vw, 210px) 24px clamp(80px, 12vw, 130px);
}
.hero__col { max-width: 820px; }   /* ~2/3 of the content width */
.hero__brand { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.hero__brand-icon { height: clamp(44px, 5.5vw, 58px); width: auto; display: block; flex: 0 0 auto; }
/* Animated "scope" mark — four corner brackets that focus inward on load */
.ps-mark { width: clamp(44px, 5.5vw, 58px); height: clamp(44px, 5.5vw, 58px); overflow: visible; stroke-linecap: butt; stroke-linejoin: miter; transform-origin: 50% 50%; animation: ps-expand 3.5s cubic-bezier(.2, .7, .2, 1) both; }
.ps-mark__c { opacity: 1; }
/* The mark "opens out": it starts as a small square in the centre, then expands
   to its full corner-bracket position while turning a quarter-turn, over 3s —
   once, on load (trigger unchanged). Rests at scale(1) rotate(0). */
@keyframes ps-expand { from { transform: scale(.18) rotate(-90deg); } to { transform: scale(1) rotate(0deg); } }
/* Logo lockups (header + footer) — animated SVG mark + Poppins wordmark */
.site-logo { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.site-logo .ps-mark { width: 40px; height: 40px; flex: 0 0 auto; }
.site-logo__name { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: .98; font-size: 1.05rem; color: #fff; }
.site-logo:hover { color: #fff; }   /* the logo never changes colour on hover */
.footer-brand__lock { display: inline-flex; align-items: center; gap: 11px; color: #fff; margin-bottom: 20px; }
.footer-brand__lock .ps-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.footer-brand__name { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: .98; font-size: 1.05rem; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .ps-mark { animation: none; }
  .ps-mark__c { animation: none; transition: none; opacity: 1; }
}
.hero__brand-name {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; line-height: 1; color: #fff;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
}
@media (max-width: 420px) { .hero__brand { gap: 12px; } }
.hero__title {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 600; line-height: 1.18; color: #fff; margin-bottom: 0; letter-spacing: .2px;
}
/* Divider under the title — white here so it reads on the dark hero photo (burgundy gets lost) */
.hero__title::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: #fff; margin-top: 18px; }
.hero h1 { color: #fff; margin-bottom: 0; }
.hero__lead { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.18rem, 1.8vw, 1.45rem); line-height: 1.5; color: #e7ecf0; max-width: none; margin: 18px 0 2em; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   Intro / about split
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.split__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Hover: the photo pans inside its frame (no zoom, no block movement) — the
   crop shifts so a little more of one side shows and the other is hidden. */


.split__body h2 { margin-bottom: .6em; }
.split__body p { color: var(--ink); }

/* ==========================================================================
   Services grid
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #cdd6da;
}


.card h4 { color: var(--heading); margin-bottom: .4em; font-size: 1.22rem; }
.card h4 a { color: var(--heading); }
.card h4 a:hover { color: var(--brand); }
.card p { color: var(--muted); margin: 0 0 1em; font-size: .98rem; }



/* ==========================================================================
   Testimonials / trust
   ========================================================================== */











/* ==========================================================================
   Blog teaser
   ========================================================================== */
.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ---------- Articles grid — clean editorial cards (image + cat/date + title) ---------- */
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 32px; }
.art-card { display: block; text-decoration: none; }
.art-card__img { display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 11; }
.art-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; }
.art-card:hover .art-card__img img { transform: scale(1.04); }
.art-card__meta { display: flex; gap: 9px; align-items: center; font-family: var(--font-heading); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin: 16px 0 10px; }
.art-card__cat { color: var(--brand); }
.art-card__sep { color: #9aa2a8; }
.art-card__date { color: var(--muted); }
.art-card__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.18rem; line-height: 1.22; color: var(--heading); margin: 0; transition: color .2s ease; }
.art-card:hover .art-card__title { color: var(--brand); }
@media (max-width: 860px) { .art-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .art-grid { grid-template-columns: 1fr; } }
.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.post-card__date { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.post-card h3 { font-size: 1.2rem; line-height: 1.35; margin-bottom: 16px; }
.post-card h3 a { color: var(--heading); }
.post-card h3 a:hover { color: var(--brand); }
.post-card__more {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 600; font-size: .85rem;
  color: var(--brand); background: transparent;
  border: 1.5px solid var(--brand); border-radius: 4px; padding: 8px 18px;
  transition: background .2s ease, color .2s ease;
}
.post-card__more:hover { background: var(--brand); color: #fff; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: var(--cta-blue);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #d6e0ee; margin: 0 auto 1.8em; }
/* CTA as a header row: heading + intro left, button right (matches section headers) */
.cta-band--row { text-align: left; }
.cta-row { display: flex; justify-content: space-between; align-items: center; gap: 36px; }
.cta-row__text { max-width: 820px; }
.cta-row h2 { margin-bottom: .4em; }
.cta-row p { margin: 0; }
.cta-row .btn { flex: 0 0 auto; }
@media (max-width: 680px) { .cta-row { flex-direction: column; align-items: flex-start; gap: 22px; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--footer-bg);
  color: #bdbdbd;
  padding: 70px 0 0;
  font-size: .95rem;
  border-top: 3px solid var(--brand);   /* burgundy accent, mirrors the header */
}
/* Footer social icon buttons */
.footer-social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #cfd6db; transition: background .2s ease, color .2s ease, transform .2s ease; }
.footer-social a:hover { width: 40px; background: var(--brand); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
/* Back to top */
.footer-totop { color: #8b969d; font-family: var(--font-heading); font-weight: 600; white-space: nowrap; }
.footer-totop:hover { color: #fff; }

.site-footer h3 {
  color: #fff;
  font-size: 1rem;
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: #aeb8be; }
.site-footer a:hover { color: #fff; }





/* ---------- Redesigned footer: brand block + nav columns + legal bar ---------- */
.footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(32px, 5vw, 64px); padding-bottom: 44px; align-items: start; }
.footer-brand { max-width: 420px; }
.footer-brand img { height: 40px; width: auto; margin-bottom: 20px; display: block; }
.footer-brand p { color: #8b969d; margin: 0 0 24px; max-width: 360px; }


.footer-col h3 { color: #fff; font-size: .95rem; letter-spacing: .04em; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: #aeb8be; }
.footer-col a:hover { color: #fff; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 22px 0; font-size: .85rem; color: #8b969d; }
.footer-legal a { color: #8b969d; }
.footer-legal a:hover { color: #fff; }
@media (max-width: 860px) { .footer-main { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-main { grid-template-columns: 1fr; } .footer-legal { flex-direction: column; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .cards, .posts { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--cta-blue);
    border-top: 1px solid rgba(255,255,255,.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .main-nav.open { max-height: 420px; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 8px 24px 20px; }
  .main-nav li { border-bottom: 1px solid rgba(255,255,255,.12); }
  .main-nav a { display: block; padding: 14px 0; }
  .cards, .posts { grid-template-columns: 1fr; }
  
}

/* ==========================================================================
   INTERIOR PAGES — components added for services / about / contact /
   privacy / blog index / blog posts. (Homepage components are above.)
   ========================================================================== */

/* ---------- Generic prose / long-form text (privacy, article body) ---------- */
.prose { max-width: 760px; color: var(--ink); }
.prose--wide { max-width: none; }   /* case-study prose fills the full container width */
.prose.center-col { margin-inline: auto; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.55rem; margin: 1.7em 0 .55em; }
/* Case-study section titles (.h2-rule in prose) match the .section-head size */
.prose h2.h2-rule { font-size: clamp(1.8rem, 3.6vw, 2.75rem); margin-bottom: .5em; }
.prose h3 { font-size: 1.25rem; margin: 1.5em 0 .5em; }
.prose p { margin: 0 0 1.15em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--link); text-decoration: none; transition: color .15s ease; }
.prose a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--heading); }
.prose blockquote {
  margin: 1.5em 0; padding: 4px 0 4px 22px;
  border-left: 4px solid var(--brand);
  color: var(--muted); font-style: italic;
}
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.6em 0; box-shadow: var(--shadow-sm); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
/* Standfirst — the larger intro paragraph at the top of an article */
.prose .lead { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.6; color: #43505a; margin-bottom: 1.4em; }

/* ---------- Feature / tick list ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink); }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
  font-size: .72rem; font-weight: 700; display: grid; place-items: center;
}

/* ---------- Pricing cards (services) — centered, borderless; middle column highlighted ---------- */





/* Featured card (Full Service) = solid burgundy with white text + a gold badge */



.price-card--highlight .price-card__price .per { color: rgba(255,255,255,.78); }



.price-card--highlight .card-details .ticks li { color: rgba(255,255,255,.92); }
.price-card--highlight .card-details .ticks li::before { background: rgba(255,255,255,.22); color: #fff; }


/* Price: tidy currency superscript + big amount, optional /unit suffix */

.price-card__price .cur { font-size: 1rem; font-weight: 600; margin-top: .35em; }
.price-card__price .amt { font-size: 2.7rem; line-height: .9; }
.price-card__price .per { font-size: .8rem; font-weight: 500; color: var(--muted); align-self: flex-end; margin-bottom: .35em; }

/* Expandable "What's included" details. Toggle sits directly after the
   (uniform-height) description, so toggles AND the first tick line up across
   cards in both the collapsed and open states. */




   /* minus when open */

/* Expanded bullets: left-aligned as a centered block (reads better than centered
   text, which orphans wrapped words) with more breathing room. */
.price-card .card-details .ticks { margin: 22px auto 0; max-width: 290px; gap: 20px; text-align: left; }
.price-card .card-details .ticks li { text-align: left; padding-left: 32px; line-height: 1.45; }
.price-card .card-details .ticks li::before { position: absolute; left: 0; top: 1px; margin-right: 0; display: grid; }
/* Guarantee the bullets are hidden until expanded (robust across browsers) */
.card-details:not([open]) .ticks { display: none; }

.price-card .ticks { margin: 0 0 26px; display: block; }
.price-card .ticks li { font-size: .92rem; text-align: center; padding-left: 0; }
.price-card .ticks li::before {
  position: static; display: inline-grid; vertical-align: middle; margin-right: 7px; top: auto; left: auto;
}
.price-card .btn { margin-top: auto; }

/* ---------- Numbered steps (how it works) ---------- */






/* ---------- Booking panel (contact) ---------- */





/* ---------- VisaDB badge ---------- */



/* ---------- Article (blog post) ---------- */

/* Featured image: full content width (spans article + sidebar), above the title.
   3:2 matches the source photos, so the whole image shows with little/no cropping. */




/* ---------- Back link ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 600; font-size: .9rem; margin-bottom: 28px; }

/* ---------- Plain (flag) testimonials — 4 across, no card, flag + name ---------- */







/* ---------- About timeline — stat headlines + auto-sliding rail (reuses gallery engine) ---------- */
.tl-stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 54px); padding: 4px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.tl-stat strong { display: block; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3rem); color: var(--brand); line-height: 1; }
.tl-stat span { color: var(--muted); font-size: .95rem; }
.tl-rail { overflow: hidden; position: relative; padding-top: 44px; }
.tl-rail::before { content: ""; position: absolute; top: 30px; left: 0; right: 0; height: 2px; background: rgba(128, 0, 32, .22); }
.tl-rail .gallery__track { display: flex; gap: 22px; will-change: transform; }
.tl-card { flex: 0 0 300px; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.tl-card::before { content: ""; position: absolute; top: -21px; left: 26px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.tl-card__year { font-family: var(--font-heading); font-weight: 700; font-size: .78rem; letter-spacing: .09em; color: var(--brand); }
.tl-card h3 { margin: 7px 0 9px; font-size: 1.12rem; line-height: 1.25; }
.tl-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.tl-hint { text-align: center; color: var(--muted); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; margin: 20px 0 0; }
@media (max-width: 560px) { .tl-card { flex-basis: 80vw; } }

/* ---------- Plain centered service items (homepage) ---------- */
.cards--plain .card { background: transparent; border: 0; box-shadow: none; text-align: center; padding: 22px 18px; }
.cards--plain .card:hover { transform: none; box-shadow: none; border-color: transparent; }



/* ---------- Interior responsive ---------- */





/* ==========================================================================
   Blog post — photo-banner hero + two-column (article + sidebar)
   ========================================================================== */
.post-hero { overflow: hidden; }
.post-hero__bg { width: 100%; height: clamp(260px, 32vw, 430px); object-fit: cover; display: block; }

/* Overlay variant — full-bleed featured image with the title + meta in white on top,
   mimicking the homepage hero (dark directional gradient for legibility). Reduced height. */
.post-hero--overlay { position: relative; }
.post-hero--overlay .post-hero__bg { height: clamp(360px, 44vw, 560px); }
.post-hero__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  background:
    linear-gradient(0deg, rgba(20,26,31,.86) 0%, rgba(20,26,31,.30) 52%, rgba(20,26,31,.06) 100%),
    linear-gradient(90deg, rgba(20,26,31,.45) 0%, rgba(20,26,31,0) 62%);
}
.post-hero__overlay .container { padding-bottom: clamp(26px, 4vw, 46px); }
.post-hero__meta { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; color: rgba(255,255,255,.82); margin: 0 0 12px; }
.post-hero__overlay h1 { color: #fff; margin: 0; max-width: 820px; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.16; }
.post-hero__overlay h1::before { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: #fff; margin-bottom: 18px; }

.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 50px; align-items: start; }
.post-main { min-width: 0; }
.post-main h1 { margin: .1em 0 .6em; }
.post-main .prose { max-width: none; }

/* In-article CTA — dark slate panel matching the site's consultation band */




/* Related reading */
.related { margin-top: 40px; }
.related h3 { font-size: 1.3rem; margin-bottom: .5em; }
.related ul { margin: 0; padding-left: 1.2em; }
.related li { margin-bottom: .5em; }
.related a { color: var(--link); text-decoration: none; transition: color .15s ease; }
.related a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Prev / next */
.post-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.post-nav a { font-family: var(--font-heading); font-weight: 600; font-size: .92rem; color: var(--brand); }
.post-nav a:hover { color: var(--brand-dark); }
.post-nav span { color: var(--line); }

/* Sidebar (scrolls normally with the page — not sticky) */
.post-sidebar { }
.sidebar-search { margin-bottom: 0; }
.sidebar-search label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--heading); margin-bottom: 20px; }
.sidebar-search label::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--brand); margin-top: 12px; }
.sidebar-search input {
  width: 100%; appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line);
  padding: 8px 2px; font-family: var(--font-body); font-size: 1rem;
  background: transparent; color: var(--ink);
}
.sidebar-search input:focus, .sidebar-search input:focus-visible { border-bottom-color: var(--brand); outline: none; box-shadow: none; }
.sidebar__title { font-size: 1.05rem; margin-bottom: 20px; }
.sidebar__title::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--brand); margin-top: 12px; }
.sb-post { display: block; margin-bottom: 22px; }
.sb-post__media { position: relative; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 10; }
.sb-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sb-post:hover .sb-post__media img { transform: scale(1.06); }
.sb-post__date {
  position: absolute; top: 8px; right: 8px;
  background: var(--btn-dark); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: .7rem;
  padding: 4px 8px; border-radius: 4px;
}
.sb-post__title { display: block; margin-top: 10px; font-family: var(--font-heading); font-weight: 600; font-size: .98rem; line-height: 1.35; color: var(--heading); }
.sb-post:hover .sb-post__title { color: var(--brand); }
/* Spacing between sidebar sections (search | category | more) */
.post-sidebar > * + * { margin-top: 44px; }
/* More room between the featured (large) sidebar article and the minis below it */
.post-sidebar .feat-lead { margin-bottom: clamp(30px, 3.4vw, 44px); }

@media (max-width: 900px) {
  .post-layout { grid-template-columns: 1fr; gap: 36px; }
  .post-sidebar { position: static; }
}

/* ==========================================================================
   Fees comparison table (Services page, below the trimmed pricing cards)
   ========================================================================== */
.fees-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fees-table { width: 100%; border-collapse: collapse; min-width: 760px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.fees-table th, .fees-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .95rem; vertical-align: middle; }
.fees-table thead th { font-family: var(--font-heading); font-weight: 600; color: #fff; background: var(--brand); border-bottom: 0; white-space: nowrap; }
.fees-table tbody th { font-family: var(--font-heading); font-weight: 600; color: var(--heading); }
.fees-table tbody tr:last-child th, .fees-table tbody tr:last-child td { border-bottom: 0; }
.fees-table tbody tr:hover { background: var(--brand-tint); }
.fees-table .price { font-family: var(--font-heading); font-weight: 700; color: var(--brand); white-space: nowrap; }
.fees-table .yes { color: var(--brand); font-weight: 700; text-align: center; }
.fees-table .no { color: #767676; text-align: center; }

/* ==========================================================================
   Product Scope — homepage components (faithful to live productscope.uk)
   ========================================================================== */

/* ---------- Buttons: dark "Read More" (live style) ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.btn--dark { background: #2b2b2b; border-color: #2b2b2b; color: #fff; }
.btn--dark:hover { background: #000; border-color: #000; color: #fff; }

/* ---------- "What I Deliver" — centered plain dark line icons ---------- */
.deliver-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 10px; }
.deliver { text-align: left; }
.deliver__icon { color: var(--brand); margin: 0 0 18px; line-height: 0; }
.deliver__icon svg { width: 46px; height: 46px; stroke-width: 1.5; }
.deliver h3 { font-size: 1.2rem; margin-bottom: .5em; }
.deliver p { color: var(--muted); margin: 0; font-size: .98rem; }
@media (max-width: 760px) { .deliver-grid { grid-template-columns: 1fr; gap: 44px; } }

/* ---------- "What I Deliver" — editorial numbered columns (no cards) ---------- */
.deliver2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4vw, 56px); margin-top: 8px; }
.deliver2 { border-top: 2px solid var(--brand); padding-top: 22px; }
.deliver2__num { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.35rem; color: var(--brand); letter-spacing: .03em; margin-bottom: 16px; }
.deliver2 h3 { font-size: 1.3rem; margin-bottom: .5em; }
.deliver2 p { color: var(--muted); margin: 0; font-size: 1rem; line-height: 1.6; }
@media (max-width: 760px) { .deliver2-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Full-bleed 4-up photo strip ---------- */
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.photo-strip img { width: 100%; height: clamp(150px, 18vw, 240px); object-fit: cover; display: block; }
@media (max-width: 760px) { .photo-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Case-study rows — alternating pastel colour bands, image + text ----------
   Warm band / white / cool band. The two pastel hues are swappable via the
   --band-warm and --band-cool tokens (set once, applied site-wide). */
/* Homepage: contained, rounded PASTEL cards (the full-width bands live on /case-studies/) */
.cs-stack { display: grid; gap: clamp(22px, 3vw, 34px); margin-top: 16px; }
.cs-row { border-radius: 14px; overflow: hidden; background: #fff;
  transition: opacity .6s ease, transform .3s ease, box-shadow .3s ease; }
.cs-row:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
/* Scroll-reveal — the hidden state is applied by main.js (.reveal) and cleared
   on view (.is-in). Without JS no card ever gets .reveal, so all stay visible.
   The translate lives on the inner element so it never fights the hover lift. */
.cs-row.reveal { opacity: 0; }
.cs-row.reveal .cs-row__inner { transform: translateY(20px); transition: transform .6s ease; }
.cs-row.reveal.is-in { opacity: 1; }
.cs-row.reveal.is-in .cs-row__inner { transform: none; }
.cs-row--warm { background: var(--band-warm); }
.cs-row--cool { background: var(--band-cool); }
.cs-row--third { background: var(--band-third); }
.cs-row__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch; position: relative;   /* anchor for the stretched (whole-row) link */
}
/* Image fills its half of the card (flush); the BODY text drives the row height,
   the image just cover-fills it. Gentle zoom on hover. */
.cs-row__media { overflow: hidden; position: relative; }
.cs-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cs-row:hover .cs-row__media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .cs-row, .cs-row .cs-row__inner { transition: none; }
  .cs-row.reveal { opacity: 1; }
  .cs-row.reveal .cs-row__inner { transform: none; }
  .cs-row:hover { transform: none; }
  .cs-row:hover .cs-row__media img { transform: none; }
}
.cs-row__body { padding: clamp(30px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
/* Editorial label: big faint index number + small sector tag above the title */
.cs-row__index { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--brand); opacity: .22; margin-bottom: 6px; }
.cs-row__tag { display: block; font-family: var(--font-heading); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
/* Whole-row clickable (stretched link); button sits above it so it stays hoverable */
.cs-row__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cs-row__body .btn { position: relative; z-index: 2; }
.cs-row__body h3 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); margin-bottom: .5em; }
.cs-row__body h3 a { color: var(--heading); }
.cs-row__body h3 a:hover { color: var(--brand); }
.cs-row__body p { color: #4a545b; margin-bottom: 1.4em; }
.cs-row__body .btn { align-self: flex-start; }
/* Alternate: image on the LEFT for even rows */
.cs-row--flip .cs-row__media { order: 2; }
@media (max-width: 760px) {
  .cs-row__inner { grid-template-columns: 1fr; }
  .cs-row--flip .cs-row__media { order: 0; }
  .cs-row__media { min-height: 210px; }
}

/* ---------- "How I work" — full-bleed split (image right, pale-navy panel left) ---------- */
.howiwork-fb { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 520px; background: var(--band-cool); }
.howiwork-fb__body {
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px);
  padding-left: max(24px, calc((100vw - var(--container)) / 2));
  padding-right: clamp(28px, 4vw, 64px);
}
.howiwork-fb__inner { max-width: 540px; }
.howiwork-fb h2 { margin: 0 0 .4em; }
.howiwork-fb h2::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--brand); margin-top: 18px; }
.howiwork-fb__lead { font-family: var(--font-heading); font-weight: 400; font-size: 1.12rem; line-height: 1.5; color: #43505a; margin: 22px 0 30px; }
.howiwork-fb__media { overflow: hidden; }
.howiwork-fb__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.principle-list { display: grid; gap: 16px; }
.principle-list p { margin: 0; color: var(--ink); padding-left: 16px; border-left: 2px solid var(--line); }
.principle-list strong { color: var(--brand); }
.howiwork-fb .principle-list p { border-left-color: rgba(30, 58, 95, .28); }

/* Numbered variant (01–05) */
.principle-list--num { gap: 20px; }
.principle-list--num .pitem { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; }
.principle-list--num .pitem p { margin: 0; padding-left: 0; border-left: 0; color: var(--ink); }
.principle-list--num .pitem strong { color: var(--heading); font-family: var(--font-heading); font-weight: 600; }
.principle-list--num .num { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--brand); opacity: .32; }
@media (max-width: 860px) {
  .howiwork-fb { grid-template-columns: 1fr; }
  .howiwork-fb__media { order: -1; min-height: 240px; }
  .howiwork-fb__body { padding-left: 24px; padding-right: 24px; }
}

/* ---------- Article teasers (homepage, text-only) ---------- */
/* ---------- Articles — featured layout (newest large + two beside) ---------- */
.articles-feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; }

/* Category tag */
.art-tag { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 16px 0 8px; }

/* Title with draw-in underline on card hover */
.art-title { line-height: 1.3; margin: 0; }
.art-link { color: var(--heading); transition: color .2s ease; }
.feat-lead:hover .art-link, .feat-mini:hover .art-link, .art-link:hover { color: var(--brand); }

/* Featured (lead) */
.feat-lead__media { display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 10; box-shadow: var(--shadow-sm); }
.feat-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.feat-lead:hover .feat-lead__media img { transform: scale(1.05); }
.feat-lead .art-title { font-size: clamp(1.4rem, 2vw, 1.85rem); }

/* Side stack (two minis) */
.feat-side { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.feat-mini { display: grid; grid-template-columns: 108px 1fr; gap: 16px; align-items: center; }
.feat-mini__media { display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); }
.feat-mini__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.feat-mini:hover .feat-mini__media img { transform: scale(1.06); }
.feat-mini .art-tag { margin: 0 0 5px; }
.feat-mini .art-title { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .feat-lead:hover .feat-lead__media img, .feat-mini:hover .feat-mini__media img { transform: none; }
}
@media (max-width: 860px) { .articles-feature { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 480px) { .feat-mini { grid-template-columns: 104px 1fr; gap: 14px; } }

/* ---------- Article category chips (blog index + category pages) ---------- */
/* Articles-page search field */
.posts-search { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 460px; margin: 0 0 clamp(38px, 5vw, 52px); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; transition: border-color .15s ease, box-shadow .15s ease; }
.posts-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.posts-search__icon { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.posts-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: 1rem; color: var(--ink); }
.posts-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.posts-search input:focus, .posts-search input:focus-visible { outline: none; box-shadow: none; }
.posts-search__clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-alt); color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.posts-search__clear svg { width: 13px; height: 13px; }
.posts-search__clear:hover { background: var(--brand); color: #fff; }
.posts-search__clear[hidden] { display: none; }
/* Result count — a small pill below the field */
.posts-search__note:not(:empty) { position: absolute; left: 6px; top: calc(100% + 12px); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 500; font-size: .82rem; color: var(--muted); background: var(--bg-alt); border-radius: 999px; padding: 5px 14px; white-space: nowrap; }
.posts-search__note strong { color: var(--brand); font-weight: 700; }

.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(28px, 4vw, 40px); }
/* Hide the category chips on mobile — main article page only (category pages carry
   data-current and keep theirs). */
@media (max-width: 640px) { .cat-chips:not([data-current]) { display: none; } }
.cat-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: .82rem; color: var(--heading); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.cat-chip span { color: var(--muted); font-weight: 500; }
.cat-chip:hover { border-color: var(--brand); color: var(--brand); }
.cat-chip:hover span { color: var(--brand); }
.cat-chip--active { background: var(--brand); border-color: var(--brand); color: #fff; }
.cat-chip--active span { color: rgba(255,255,255,.78); }

/* ---------- About — project timeline ---------- */








/* ---------- Two-up card grid (principles / projects) ---------- */



/* ---------- FAQ accordion (services) ---------- */
/* ---------- FAQ accordion (native <details>, no JS) ---------- */
.faq-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 56px); align-items: stretch; }
.faq-grid__media img { width: 100%; height: 100%; min-height: 320px; border-radius: var(--radius-lg); box-shadow: var(--shadow); object-fit: cover; display: block; }
.faq-grid .faq { max-width: none; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid__media { max-width: 420px; } .faq-grid__media img { min-height: 0; aspect-ratio: 16 / 10; } }

.faq { max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__item summary { display: block; cursor: pointer; list-style: none; position: relative; padding: 22px 48px 22px 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.12rem; color: var(--heading); transition: color .15s ease; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover, .faq__item[open] > summary { color: var(--brand); }
.faq__item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--brand); }
.faq__item[open] > summary::after { content: "\2212"; }
.faq__item p { margin: 0 0 24px; color: var(--ink); max-width: 72ch; }

/* ---------- Contact ---------- */

/* Contained About intro panel (pastel card holding the bio + photo) */
/* Contained colour panels — a soft band held inside a white section (kinder on the eye than edge-to-edge colour) */
.panel { border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 56px); }
.panel--warm { background: var(--band-warm); }



.about-panel { background: var(--band-third); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 56px); }
.about-panel .split { align-items: start; }
.about-panel .split__media img { border-radius: 10px; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-panel .split__media .btn-row { margin-top: 20px; }

/* Contained contact panel (pale-navy card with intro + form) */
.contact-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 4vw, 60px); background: var(--band-cool); border-radius: var(--radius-lg); padding: clamp(30px, 4vw, 56px); align-items: start; }
.contact-panel__intro h2 { margin: 0; }
.contact-panel__intro > p { font-family: var(--font-heading); font-weight: 400; font-size: 1.08rem; line-height: 1.55; color: #43505a; margin: 18px 0 22px; }
.contact-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.contact-meta li { position: relative; padding-left: 22px; color: var(--ink); font-size: .98rem; }
.contact-meta li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
@media (max-width: 760px) { .contact-panel { grid-template-columns: 1fr; } }

.contact-form .field { margin-bottom: 16px; }
.contact-form label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: .85rem; margin-bottom: 6px; color: var(--heading); }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(128,0,32,.12); }
.contact-form textarea { min-height: 150px; resize: vertical; }
/* Honeypot: off-screen field real users never see; bots that fill it are rejected. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Bare underline form (on the contact colour panel) */
.contact-form--bare .field { position: relative; margin-bottom: 22px; }
.contact-form--bare .field label { position: absolute; left: -9999px; }
.contact-form--bare input, .contact-form--bare textarea { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 14px 16px; transition: border-color .15s ease, box-shadow .15s ease; }
.contact-form--bare input:focus, .contact-form--bare textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(128,0,32,.12); }
.contact-form--bare textarea { min-height: 150px; line-height: 1.55; }
.contact-form--bare .form-status { color: var(--heading); }

/* Custom form validation (replaces native browser bubbles) */
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted); opacity: 1; }
.field__error { display: block; margin-top: 7px; font-family: var(--font-heading); font-weight: 500; font-size: .8rem; line-height: 1.3; color: #b0342a; }
.contact-form .field.is-invalid input, .contact-form .field.is-invalid textarea { border-color: #b0342a; }
.contact-form--bare .field.is-invalid input, .contact-form--bare .field.is-invalid textarea { border-color: #b0342a; box-shadow: none; }
.form-status { font-family: var(--font-heading); font-weight: 500; font-size: .92rem; margin-top: 16px; }
.form-status--ok { color: #1f6b27; }
.form-status--err { color: #b0342a; }

/* Success state — replaces the form after a message is sent */
.form-sent { text-align: center; padding: clamp(20px, 5vw, 44px) 8px; animation: form-sent-in .35s ease both; }
.form-sent__ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(31,107,39,.12); color: #1f6b27; margin-bottom: 16px; }
.form-sent__ico svg { width: 32px; height: 32px; }
.form-sent h3 { margin: 0 0 8px; font-size: 1.4rem; color: var(--heading); }
.form-sent p { margin: 0 auto; max-width: 380px; color: var(--muted); line-height: 1.55; }
@keyframes form-sent-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form-sent { animation: none; } }








/* ---------- Light hero (white background, left-aligned dark text) ---------- */
.hero-light { text-align: left; padding: clamp(120px, 14vw, 160px) 0 clamp(14px, 2vw, 28px); }
.hero-light h1 { margin-bottom: 0; }
/* Burgundy divider under the page title (same as section headers) */
.hero-light h1::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--brand); margin-top: 16px; }
/* Lead intro: full container width (no button beside it on a page hero) */
.hero-light p { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.12rem, 1.6vw, 1.32rem); line-height: 1.5; color: #43505a; max-width: none; margin: 16px 0 0; }
/* Light hero flows straight into the first content section — kill the doubled gap */
.hero-light + .section { padding-top: clamp(20px, 2.5vw, 32px); }
/* Services hero (split) — same burgundy divider under the title */
.split--hero .split__body h1 { margin-bottom: 0; }
.split--hero .split__body h1::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--brand); margin: 16px 0; }

/* ---------- Section colour bands (match site palette) ---------- */

.section--cool { background: var(--band-cool); }

/* Blue band that fades in/out of the surrounding white sections */


/* ---------- Blog index — search + category filter ---------- */






.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }


/* ---------- Split hero (image + text, e.g. Services) ---------- */
.split--hero .split__media img { aspect-ratio: 11 / 10; object-position: 50% 0; border-radius: 6px; box-shadow: var(--shadow); }
.split--hero h1 { margin-bottom: .35em; }
.split--hero p { color: var(--muted); }
.split--hero .btn { margin-top: 8px; }

/* ---------- Left-aligned mini CTA ---------- */



/* 3-up principles variant */
.principles2.principles2--3 { grid-template-columns: repeat(3, 1fr); max-width: none; margin: 0; }
/* NB: use .principles2.principles2--3 so these match the base rule's specificity
   and actually override it on mobile (otherwise it stays 3-up and breaks). */
@media (max-width: 860px) { .principles2.principles2--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .principles2.principles2--3 { grid-template-columns: 1fr; } }


/* ---------- About — principles (2-up, inline icon, borderless) ---------- */
.principles2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; max-width: 920px; margin: 0 auto; }
.principle2__head { display: flex; align-items: center; gap: 12px; margin-bottom: .5em; }
.principle2__ico { color: var(--brand); line-height: 0; flex: 0 0 auto; }
.principle2__ico svg { width: 28px; height: 28px; }
.principle2 h3 { margin: 0; font-size: 1.15rem; }
.principle2 p { color: var(--muted); margin: 0; font-size: .97rem; }
@media (max-width: 680px) { .principles2 { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- About — current projects (image cards, art-card family) ---------- */
.proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 34px); align-items: stretch; }
.proj-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease; }
.proj-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.proj-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
.proj-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.proj-card:hover .proj-card__media img { transform: scale(1.04); }
.proj-card__body { padding: clamp(22px, 3vw, 34px); }
.proj-card__tag { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.proj-card__body h3 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 .55em; }
.proj-card__body p { color: var(--ink); margin: 0; }
@media (max-width: 680px) { .proj-grid { grid-template-columns: 1fr; } }


/* ---------- Case-study detail — meta panel + content ---------- */





/* 4-across spec grid for the Project Summary (image now lives in the hero) */


/* Objectives / challenges as a clean two-up list */







/* ---------- Case-study detail: rich sections ---------- */
/* Hero eyebrow pill + a results-at-a-glance stat strip */



/* Project Summary — full-bleed: image bleeds to the left edge, facts full-width right */










/* Full-width hero image (below the title) — gentle zoom on hover */
.cs-hero-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.cs-hero-img img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; transition: transform .7s ease; }
.cs-hero-img:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .cs-hero-img:hover img { transform: none; } }

/* Case-study section headings span full width so their one-line subtitles never wrap */
.cs-detail .section-head { max-width: none; }

/* Key Features — editorial icon-left row list (no cards) */
.feat-intro { max-width: 760px; margin: -6px 0 clamp(28px, 3.5vw, 44px); color: var(--muted); font-size: 1.05rem; }

/* Moved off inline style= attributes so the strict CSP (style-src 'self') doesn't block them */
.section--top { padding-top: clamp(120px, 14vw, 150px); }
.mt-1 { margin-top: 1em; }
.error-lead { color: var(--muted); font-size: 1.1rem; max-width: 560px; margin: 0 auto 2em; }
.error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cf-turnstile { margin: 4px 0 16px; }
.feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 38px) clamp(44px, 5vw, 72px); }
.feat-row { display: flex; gap: 18px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: clamp(20px, 2.2vw, 26px); }
.feat-row__icon { flex: 0 0 auto; color: var(--brand); line-height: 0; }
.feat-row__icon svg { width: 30px; height: 30px; stroke-width: 1.6; }
.feat-row__body h3 { font-size: 1.08rem; margin: 0 0 .45em; }
.feat-row__body p { color: var(--muted); font-size: .95rem; line-height: 1.6; margin: 0; }
@media (max-width: 700px) { .feat-list { grid-template-columns: 1fr; } }
/* Title-only feature rows (case studies whose features are one-liners) */
.feat-list--titles .feat-row { align-items: center; }
.feat-list--titles .feat-row__body h3 { margin: 0; font-size: 1.05rem; }

/* Phase panels whose content is a bullet list rather than icon-steps */
.cs-phase__list { margin: 10px 0 0; padding-left: 20px; }
.cs-phase__list li { color: var(--ink); margin-bottom: 9px; line-height: 1.55; }
.cs-phase__list li::marker { color: var(--brand); }
.cs-phase__list li:last-child { margin-bottom: 0; }

/* Challenge fallback when a paragraph doesn't split into problem/solution */
.cs-ps__cols--single { grid-template-columns: 1fr; }

/* Challenges & Solutions — problem box → solution box, per challenge */
.cs-ps__item { border-top: 1px solid var(--line); padding-top: clamp(26px, 3vw, 36px); }
.cs-ps__item + .cs-ps__item { margin-top: clamp(30px, 3.5vw, 46px); }
.cs-ps__item > h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0 0 clamp(18px, 2vw, 24px); }
.cs-ps__cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 2.5vw, 32px); align-items: stretch; }
.cs-ps__challenge, .cs-ps__solution { border-radius: var(--radius-lg); padding: clamp(20px, 2.5vw, 30px); }
.cs-ps__challenge { background: var(--bg-alt); }
.cs-ps__solution { background: var(--band-cool); }
.cs-ps__label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: .85rem; color: var(--brand); margin-bottom: 8px; }
.cs-ps__cols p { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.6; }
.cs-ps__arrow { align-self: center; color: var(--brand); line-height: 0; }
.cs-ps__arrow svg { width: 26px; height: 26px; }
@media (max-width: 760px) { .cs-ps__cols { grid-template-columns: 1fr; } .cs-ps__arrow { transform: rotate(90deg); justify-self: center; padding: 6px 0; } }

/* Objectives — grey panel hugs the accordion; the image sits outside it on white */
.obj-panel { background: var(--bg-alt); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); }
.obj-panel .faq { max-width: none; }

/* Overview intro — sidebar floats right so the prose wraps then flows full width */
.cs-intro::after { content: ""; display: block; clear: both; }
.cs-intro__side { float: right; width: 320px; margin: 4px 0 22px 44px; }
@media (max-width: 820px) { .cs-intro__side { float: none; width: auto; margin: 0 0 30px; } }

/* Project Summary — sidebar facts on a soft card, icon per fact */
.cs-side-card { background: rgba(255, 255, 255, .55); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px); box-shadow: 0 16px 44px rgba(20, 32, 54, .07); transition: transform .3s ease, box-shadow .3s ease; }
.cs-side-card:hover { transform: scale(1.03); box-shadow: 0 22px 54px rgba(20, 32, 54, .11); }
@media (prefers-reduced-motion: reduce) { .cs-side-card:hover { transform: none; } }
.cs-side-card .sidebar__title { margin-top: 0; }
.cs-facts-side > div { display: flex; gap: 13px; align-items: flex-start; }
.cs-facts-side > div + div { margin-top: 20px; }
.cs-side-ico { flex: 0 0 auto; color: var(--brand); line-height: 0; margin-top: 2px; }
.cs-side-ico svg { width: 21px; height: 21px; }
.cs-facts-side dt { font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: var(--brand); margin-bottom: 2px; }
.cs-facts-side dd { margin: 0; color: var(--ink); font-size: .93rem; line-height: 1.42; }

/* Project Summary — key facts on a brand-gold panel */





/* Development process — phases + steps */
/* Each phase is its own contained coloured panel — a visual chapter of the process */
.cs-phase { border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 52px); }
.cs-phase--warm { background: var(--band-warm); }
.cs-phase--cool { background: var(--band-cool); }
.cs-phase--third { background: var(--band-third); }
.cs-phase--alt { background: var(--bg-alt); }
.cs-phase + .cs-phase { margin-top: clamp(24px, 3vw, 34px); }
.cs-phase__num { font-family: var(--font-heading); font-weight: 700; font-size: .92rem; color: var(--brand); }
.cs-phase h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 6px 0 4px; }
.cs-phase__lead { color: var(--muted); margin: 0 0 24px; }
.cs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 36px); }
.cs-step { border-top: 2px solid var(--brand); padding-top: 18px; }
.cs-step__icon { display: block; color: var(--brand); line-height: 0; margin-bottom: 12px; }
.cs-step__icon svg { width: 28px; height: 28px; stroke-width: 1.6; }
.cs-step h4 { font-size: 1.02rem; margin: 0 0 .5em; }
.cs-step p { color: var(--muted); font-size: .93rem; line-height: 1.55; margin: 0; }
/* icon on each key-feature item too */


@media (max-width: 760px) { .cs-steps { grid-template-columns: 1fr; } }

/* Challenges & solutions — tinted cards */






/* Results — count-up stats */
.cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 60px); text-align: center; margin-top: 0; }
.cs-stat strong { display: block; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4rem); color: var(--brand); line-height: 1; }
.cs-stat b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; color: var(--heading); margin: 12px 0 6px; }
.cs-stat p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0; }
@media (max-width: 700px) { .cs-stats { grid-template-columns: 1fr; gap: 36px; } }

/* Results — featured testimonial + member quotes */
.cs-testimonial { max-width: 820px; margin: 0 auto; text-align: center; }
.cs-testimonial blockquote { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.5; color: var(--heading); margin: 0 0 18px; }
.cs-testimonial cite { font-style: normal; font-weight: 600; color: var(--muted); font-size: .95rem; }
/* Results — stats lead; testimonial + member voices in a two-column proof row */
.cs-proof { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(36px, 5vw, 64px); align-items: start; margin-top: clamp(40px, 5vw, 60px); padding-top: clamp(34px, 4vw, 48px); border-top: 1px solid rgba(0, 0, 0, .09); }
.cs-proof .cs-testimonial { max-width: none; margin: 0; text-align: left; }
.cs-voices__label { font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: var(--brand); margin: 0 0 18px; }
.cs-voice + .cs-voice { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, .09); }
.cs-voice blockquote { margin: 0 0 5px; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; line-height: 1.4; color: var(--heading); }
.cs-voice cite { font-style: normal; color: var(--muted); font-size: .82rem; }
@media (max-width: 820px) { .cs-proof { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); } }