/*
Theme Name: Imprint Immigration
Theme URI: https://imprintimmigration.com
Author: ClientEnginePro
Description: Premium, high-trust custom theme for Imprint Immigration Services Inc. - RCIC-IRB regulated immigration consultancy, Edmonton. Trust & Authority design system.
Version: 2.25.0
License: Proprietary
Text Domain: imprint
*/

/* =====================================================================
   DESIGN TOKENS
   Navy authority + warm ivory canvas + Imprint red accent.
   ===================================================================== */
:root {
  /* Charcoal / black - dark anchors. NO navy/blue (Brand DNA: red-dominant). */
  --ink:        #1A1A1A;   /* Deep Charcoal */
  --ink-2:      #232220;
  --ink-3:      #2E2B29;
  /* Canvas - white-dominant with a faint warm tint */
  --ivory:      #FFFFFF;
  --sand:       #F7F3F1;
  --white:      #FFFFFF;
  /* Brand reds (Brand DNA palette) */
  --red:        #D60000;   /* Imprint Red Primary */
  --red-dark:   #B70B0F;   /* Dark Crimson */
  --red-deep:   #A30506;   /* Deep Red - pressed */
  --red-bright: #E1171E;   /* Bright Bold Red */
  --red-soft:   rgba(214,0,0,0.08);
  --gold:       #804848;   /* Warm Neutral Brown - restrained accent only */
  /* Text */
  --text:       #1A1A1A;
  --text-muted: #595350;
  --text-faint: #8A827E;
  --on-dark:    rgba(255,255,255,0.82);
  --on-dark-faint: rgba(255,255,255,0.58);
  /* Lines */
  --border:     #E8E2DE;
  --border-2:   #D9D1CC;
  --border-dark: rgba(255,255,255,0.14);
  /* Shadows (soft, premium) */
  --sh-sm: 0 1px 2px rgba(15,27,45,0.05), 0 1px 3px rgba(15,27,45,0.06);
  --sh-md: 0 4px 12px rgba(15,27,45,0.07), 0 2px 4px rgba(15,27,45,0.05);
  --sh-lg: 0 18px 48px rgba(15,27,45,0.13), 0 6px 16px rgba(15,27,45,0.08);
  --sh-xl: 0 30px 70px rgba(15,27,45,0.20);
  /* Type */
  --font-display: 'Antonio', 'Poppins', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Metrics */
  --maxw: 1200px;
  --maxw-narrow: 820px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 9px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;
  /* z-index scale */
  --z-nav: 100;
  --z-drawer: 200;
  --z-overlay: 150;
  --z-sticky: 90;

  /* ---- Backward-compat aliases (legacy inner-page inline styles) ---- */
  --clr-navy: var(--ink);
  --clr-red: var(--red);
  --clr-white: var(--white);
  --clr-bg: var(--white);
  --clr-border: var(--border);
  --clr-text: var(--text);
  --clr-text-muted: var(--text-muted);
  --clr-slate: var(--text-muted);
  --clr-slate-light: var(--text-faint);
  --transition-standard: all var(--dur) var(--ease);
  --shadow-lg: var(--sh-lg);
}

/* =====================================================================
   RESET / BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; padding: 0; }
strong { font-weight: 700; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.002em;
  color: var(--ink);
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
p { color: var(--text); overflow-wrap: break-word; }

::selection { background: var(--red); color: #fff; }

/* Accessibility: focus + skip link */
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 3px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.container--narrow { max-width: var(--maxw-narrow); }
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--sand { background: var(--sand); }
.text-center { text-align: center; }

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

/* Section heading block */
.section-header { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-header.text-center { margin-inline: auto; }
.section-eyebrow, .eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); display: inline-block; }
.section-header p { color: var(--text-muted); font-size: 1.08rem; margin-top: 0.9rem; }
.section--ink .section-header p { color: var(--on-dark); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-body); font-weight: 700; font-size: 0.97rem;
  letter-spacing: 0.01em; line-height: 1;
  padding: 1rem 1.6rem; border-radius: 10px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
  cursor: pointer; text-align: center; min-height: 48px;
}
.btn svg { flex-shrink: 0; }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(214,0,0,0.28); }
.btn--primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(214,0,0,0.34); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-3); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--border-2); }
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn--ghost-light { background: rgba(255,255,255,0.08); color: #fff; border: 1.5px solid rgba(255,255,255,0.25); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); }
.btn--lg { padding: 1.15rem 2rem; font-size: 1.03rem; min-height: 54px; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.85rem; min-height: 40px; }
.btn--block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: 1rem; }

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 0.85rem clamp(1.15rem, 4vw, 2.5rem);
  background: rgba(250,247,241,0.0);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur);
}
.site-nav.is-scrolled {
  background: rgba(250,247,241,0.94);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 var(--border), var(--sh-sm);
  padding-block: 0.6rem;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; min-width: 0; max-width: 240px; overflow: visible; }
.nav-logo img { display: block; height: 42px; width: auto; max-width: 100%; object-fit: contain; transition: height var(--dur); }
.is-scrolled .nav-logo img { height: 38px; }

.nav-menu { display: flex; align-items: center; gap: 0.35rem; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 600; font-size: 0.95rem; color: var(--ink);
  padding: 0.6rem 0.85rem; border-radius: 8px;
  transition: color var(--dur), background var(--dur);
}
.site-nav.is-dark .nav-link { color: rgba(255,255,255,0.86); }
.nav-link:hover { color: var(--red); }
.site-nav.is-dark .nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-link.current-menu-item { color: var(--red); }
.nav-link[aria-haspopup]::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.6; transition: transform var(--dur);
}
.nav-item:hover .nav-link[aria-haspopup]::after { transform: rotate(225deg) translateY(2px); }

/* Dropdown */
.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 280px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--sh-lg); padding: 0.5rem;
  opacity: 0; visibility: hidden; transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown li a {
  display: block; padding: 0.7rem 0.9rem; border-radius: 8px; font-size: 0.92rem;
  font-weight: 600; color: var(--ink); transition: background var(--dur), color var(--dur);
}
.nav-dropdown li a:hover { background: var(--red-soft); color: var(--red); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 0.5rem;
  background: var(--red); color: #fff !important; font-weight: 700; font-size: 0.92rem;
  padding: 0.7rem 1.25rem; border-radius: 9px; box-shadow: 0 4px 14px rgba(214,0,0,0.28);
  transition: background var(--dur), transform var(--dur), box-shadow var(--dur);
}
.nav-cta:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(214,0,0,0.34); }

/* Hamburger */
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 10px; position: relative; flex-shrink: 0; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur), opacity var(--dur), background var(--dur); }
.site-nav.is-dark .nav-toggle span { background: #fff; }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.is-open span { background: var(--ink); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); z-index: var(--z-drawer);
  background: var(--white); box-shadow: var(--sh-xl); padding: 5.5rem 1.5rem 2rem;
  display: flex; flex-direction: column; gap: 0.15rem; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.34s var(--ease);
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer a {
  padding: 0.85rem 1rem; border-radius: 9px; font-weight: 600; font-size: 1rem; color: var(--ink);
  transition: background var(--dur), color var(--dur);
}
.nav-drawer a:hover { background: var(--red-soft); color: var(--red); }
.nav-drawer strong { display: block; padding: 0.75rem 1rem 0.35rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); }
.nav-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(15,27,45,0.45);
  opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility var(--dur);
  backdrop-filter: blur(2px);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--red); z-index: 300; transition: width 0.1s linear; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; background: var(--ink); color: #fff; overflow: hidden;
  padding-top: clamp(6rem, 9vh, 7.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem);
  display: flex; align-items: start;
}
/* Hero background image (case-desk) + readability scrim */
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, #1A1A1A 0%, rgba(26,26,26,0.94) 30%, rgba(26,26,26,0.66) 62%, rgba(26,26,26,0.42) 100%),
    radial-gradient(820px 460px at 86% 4%, rgba(214,0,0,0.14), transparent 66%),
    linear-gradient(0deg, rgba(26,26,26,0.55), transparent 42%);
}
@media (max-width: 1024px) {
  .hero__bg img { object-position: 70% center; }
  .hero__scrim { background:
    linear-gradient(90deg, #1A1A1A 0%, rgba(26,26,26,0.9) 45%, rgba(26,26,26,0.72) 100%),
    radial-gradient(600px 360px at 80% 0%, rgba(214,0,0,0.13), transparent 66%),
    linear-gradient(0deg, rgba(26,26,26,0.6), transparent 46%); }
}
@media (max-width: 640px) {
  .hero__bg img { object-position: 62% center; }
  .hero__scrim { background:
    linear-gradient(180deg, rgba(26,26,26,0.86) 0%, rgba(26,26,26,0.78) 55%, rgba(26,26,26,0.9) 100%),
    radial-gradient(500px 320px at 80% 0%, rgba(214,0,0,0.12), transparent 70%); }
}
.hero::after { content: none; }
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  width: 100%;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%;
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--red); padding: 0.45rem 0.95rem; border-radius: 99px;
  margin-bottom: 1.5rem; white-space: normal; line-height: 1.3;
}
.hero__title { color: #fff; font-size: clamp(2.3rem, 5.6vw, 4.3rem); line-height: 1.04; overflow-wrap: break-word; }
.hero__title em { font-style: normal; color: var(--red); }
.hero__sub {
  color: var(--on-dark); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.65;
  max-width: 38ch; margin-top: 1.5rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.1rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border-dark); }
.hero__trust-item .label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-faint); }
.hero__trust-item .value { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: #fff; margin-top: 0.15rem; }

/* Hero credential card */
.hero__card {
  position: relative; background: linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid var(--border-dark); border-radius: var(--radius-lg);
  padding: 2.2rem; box-shadow: var(--sh-xl); backdrop-filter: blur(4px);
}
.hero__card-seal {
  width: 60px; height: 60px; border-radius: 50%; background: var(--red);
  display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 1.25rem;
  box-shadow: 0 8px 20px rgba(214,0,0,0.4);
}
.hero__card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 0.3rem; }
.hero__card .role { color: var(--on-dark-faint); font-size: 0.9rem; margin-bottom: 1.5rem; }
.hero__card-rows { display: flex; flex-direction: column; gap: 0.7rem; }
.hero__card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.85rem; font-size: 0.88rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hero__card-row:last-child { border-bottom: none; padding-bottom: 0; }
.hero__card-row .k { color: var(--on-dark-faint); min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }
.hero__card-row .v { color: #fff; font-weight: 700; text-align: right; flex: 0 0 auto; white-space: nowrap; }
.hero__card-verify { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.5rem; font-size: 0.82rem; color: var(--on-dark); font-weight: 600; }
.hero__card-verify:hover { color: #fff; }
.hero__card-verify svg { transition: transform var(--dur); }
.hero__card-verify:hover svg { transform: translate(2px,-2px); }

/* =====================================================================
   TRUST BAND
   ===================================================================== */
.trust-band { background: var(--white); border-block: 1px solid var(--border); }
.trust-band__inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; padding-block: 2.2rem; }
.trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding-inline: 0.5rem; }
.trust-item + .trust-item { border-left: 1px solid var(--border); }
.trust-item__icon { color: var(--red); }
.trust-item__label { font-size: 0.92rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.trust-item__sub { font-size: 0.78rem; color: var(--text-muted); }

/* =====================================================================
   SERVICE CARDS
   ===================================================================== */
.service-card {
  position: relative; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.9rem; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
  display: flex; flex-direction: column;
}
.service-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--border-2); }
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon-wrap { width: 54px; height: 54px; border-radius: 13px; background: var(--red-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; transition: background var(--dur), color var(--dur); }
.service-card__icon { color: var(--red); display: flex; }
.service-card:hover .service-card__icon-wrap { background: var(--red); }
.service-card:hover .service-card__icon { color: #fff; }
.service-card__title { font-size: 1.22rem; margin-bottom: 0.6rem; color: var(--ink); }
.service-card__desc { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; flex-grow: 1; }
.service-card__link { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.9rem; color: var(--red); margin-top: auto; }
.service-card__link svg { transition: transform var(--dur); }
.service-card:hover .service-card__link svg { transform: translateX(4px); }

/* =====================================================================
   MEET SHIRANI (split)
   ===================================================================== */
.meet { background: var(--ink); color: var(--on-dark); overflow: hidden; }
.meet__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.meet__panel {
  background: linear-gradient(165deg, var(--ink-2), var(--ink-3)); border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--sh-xl);
}
.meet__avatar { width: 90px; height: 90px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; color: #fff; margin-bottom: 1.5rem; }
.meet__panel h3 { color: #fff; font-size: 1.5rem; margin-bottom: 0.25rem; }
.meet__panel .role { color: var(--on-dark-faint); font-size: 0.92rem; margin-bottom: 1.75rem; }
.meet__creds { display: flex; flex-direction: column; gap: 0.8rem; }
.meet__cred { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.92rem; color: var(--on-dark); }
.meet__cred svg { color: var(--red); flex-shrink: 0; margin-top: 2px; }
.meet h2 { color: #fff; }
.meet__body p { color: var(--on-dark); margin-bottom: 1.15rem; font-size: 1.05rem; }
.meet__quote { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: 1.25rem; color: #fff; border-left: 3px solid var(--red); padding-left: 1.25rem; margin: 1.75rem 0; line-height: 1.5; }

/* =====================================================================
   PROCESS TIMELINE
   ===================================================================== */
.process__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.process-step { position: relative; padding-top: 2.5rem; }
.process-step::before { content: ""; position: absolute; top: 19px; left: 0; right: 0; height: 2px; background: var(--border-2); }
.process-step:last-child::before { right: 50%; }
.process-step:first-child::before { left: 50%; }
.process-step__num {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
  font-weight: 700; color: var(--text-muted); z-index: 2; transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.process-step.is-active .process-step__num, .process-step:hover .process-step__num { background: var(--red); border-color: var(--red); color: #fff; }
.process-step__title { font-size: 1.05rem; margin-bottom: 0.4rem; text-align: center; color: var(--ink); }
.process-step__desc { font-size: 0.88rem; color: var(--text-muted); text-align: center; line-height: 1.55; }

/* =====================================================================
   BOOKING CTA / GENERIC CTA
   ===================================================================== */
.cta-section { background: var(--ink); color: #fff; text-align: center; padding-block: clamp(3.5rem, 7vw, 5.5rem); position: relative; overflow: hidden; }
.cta-section::before { content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 700px; height: 500px; background: radial-gradient(circle, rgba(214,0,0,0.18), transparent 65%); pointer-events: none; }
.cta-section .container { position: relative; z-index: 2; }
.cta-section h2 { color: #fff; margin-bottom: 1rem; }
.cta-section p { color: var(--on-dark); font-size: 1.1rem; max-width: 620px; margin: 0 auto 2rem; }
.cta-section .btn-group { justify-content: center; }

.booking-cta__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; text-align: left; }
.booking-cta__fees { background: rgba(255,255,255,0.06); border: 1px solid var(--border-dark); border-radius: var(--radius); padding: 1.75rem; }
.fee-row { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.95rem; color: var(--on-dark); }
.fee-row:last-child { border-bottom: none; }
.fee-row .total { font-weight: 700; color: #fff; font-size: 1.15rem; }
.fee-row .total-amt { font-weight: 700; color: var(--red); font-size: 1.2rem; }

/* =====================================================================
   LOCAL / NAP
   ===================================================================== */
.local { background: var(--sand); }
.local__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.nap-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.25rem; box-shadow: var(--sh-md); }
.nap-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.nap-row:last-child { border-bottom: none; }
.nap-row__icon { width: 44px; height: 44px; border-radius: 11px; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nap-row__label { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.nap-row__value { font-size: 1.02rem; font-weight: 700; color: var(--ink); }

/* =====================================================================
   PAGE HERO (inner pages)
   ===================================================================== */
.page-hero { background: var(--ink); color: #fff; padding-top: clamp(7rem, 11vh, 9rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; top: -20%; right: -5%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(214,0,0,0.14), transparent 65%); pointer-events: none; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.page-hero__title { color: #fff; margin-bottom: 1rem; }
.page-hero__sub { color: var(--on-dark); font-size: 1.12rem; max-width: 60ch; line-height: 1.6; }
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--on-dark-faint); margin-bottom: 1.5rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--on-dark); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb svg { opacity: 0.5; }
.breadcrumb [aria-current] { color: #fff; }

/* Inner page content typography */
.page-body { padding-block: clamp(3rem,6vw,5rem); }
.page-body h2 { margin: 2.5rem 0 1rem; }
.page-body h3 { margin: 2rem 0 0.75rem; }
.page-body p { margin-bottom: 1.15rem; color: var(--text); }
.page-body ul.bullets { list-style: disc; padding-left: 1.4rem; margin-bottom: 1.15rem; }
.page-body ul.bullets li { margin-bottom: 0.5rem; }
.page-body a.inline { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); cursor: pointer; transition: color var(--dur); }
.faq-question:hover { color: var(--red); }
.faq-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; transition: transform var(--dur), background var(--dur), color var(--dur); }
.faq-item.is-open .faq-icon { background: var(--red); color: #fff; transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.faq-item.is-open .faq-answer { max-height: 560px; }
.faq-answer p { padding-bottom: 1.4rem; color: var(--text-muted); line-height: 1.7; margin: 0; }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testimonial-slider { overflow: hidden; }
.testimonial-track { display: flex; gap: 1.5rem; }
.testimonial-card { flex: 0 0 calc(33.333% - 1rem); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.9rem; box-shadow: var(--sh-sm); }
.testimonial-card__stars { color: var(--gold); display: flex; gap: 2px; margin-bottom: 1rem; }
.testimonial-card__text { font-size: 0.98rem; color: var(--text); line-height: 1.65; margin-bottom: 1.25rem; }
.testimonial-card__name { font-weight: 700; color: var(--ink); }
.testimonial-card__role { font-size: 0.82rem; color: var(--text-faint); }
.testimonial-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.testimonial-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); transition: background var(--dur), width var(--dur); }
.testimonial-dot.is-active { background: var(--red); width: 26px; border-radius: 5px; }

/* =====================================================================
   BLOG
   ===================================================================== */
.blog-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur); display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.blog-card__img { aspect-ratio: 16/10; overflow: hidden; background: var(--ink); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.blog-card__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.78rem; }
.blog-card__cat { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.blog-card__meta time { color: var(--text-faint); }
.blog-card__title { font-size: 1.15rem; line-height: 1.3; margin-bottom: 1rem; }
.blog-card__title a { color: var(--ink); transition: color var(--dur); }
.blog-card__title a:hover { color: var(--red); }
.blog-card__read-more { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.85rem; color: var(--red); margin-top: auto; }
.blog-card__read-more svg { transition: transform var(--dur); }
.blog-card:hover .blog-card__read-more svg { transform: translateX(4px); }
.cat-filter.is-active { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }

/* Pagination */
.pagination ul { display: flex; gap: 0.4rem; justify-content: center; }
.pagination a, .pagination span { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; border-radius: 9px; border: 1px solid var(--border); font-weight: 600; color: var(--ink); }
.pagination .current { background: var(--red); color: #fff; border-color: var(--red); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--ink); color: var(--on-dark); padding-top: clamp(3rem,6vw,4.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border-dark); }
.footer-brand img { height: 42px; width: auto; max-width: 220px; object-fit: contain; margin-bottom: 1.25rem; }
.footer-brand p { color: var(--on-dark-faint); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 34ch; }
.footer-social { display: flex; gap: 0.6rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--border-dark); display: flex; align-items: center; justify-content: center; color: var(--on-dark); transition: background var(--dur), border-color var(--dur), color var(--dur), transform var(--dur); }
.footer-social a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.25rem; font-weight: 700; }
.footer-col ul li { margin-bottom: 0.7rem; }
.footer-col ul li a { color: var(--on-dark-faint); font-size: 0.92rem; transition: color var(--dur), padding-left var(--dur); }
.footer-col ul li a:hover { color: #fff; padding-left: 4px; }
.footer-contact-row { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 1rem; font-size: 0.9rem; color: var(--on-dark); }
.footer-contact-row svg { color: var(--red); flex-shrink: 0; margin-top: 3px; }
.footer-contact-row a { color: var(--on-dark); }
.footer-contact-row a:hover { color: #fff; }
.footer-compliance { padding-block: 1.75rem; border-bottom: 1px solid var(--border-dark); }
.footer-compliance p { color: var(--on-dark-faint); font-size: 0.8rem; line-height: 1.6; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.75rem; }
.footer-bottom p { color: var(--on-dark-faint); font-size: 0.82rem; }
.footer-bottom nav { display: flex; gap: 1.5rem; }
.footer-bottom nav a { color: var(--on-dark-faint); font-size: 0.82rem; transition: color var(--dur); }
.footer-bottom nav a:hover { color: #fff; }

/* Compliance boilerplate block (inline use) */
.compliance-boilerplate { font-size: 0.82rem; color: var(--text-faint); line-height: 1.6; font-style: italic; }
.section--ink .compliance-boilerplate, .cta-section .compliance-boilerplate { color: var(--on-dark-faint); }

/* Sticky booking bar */
.sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem clamp(1.15rem,4vw,2.5rem); box-shadow: 0 -6px 24px rgba(15,27,45,0.25); transform: translateY(100%); transition: transform 0.34s var(--ease); }
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar__text { display: flex; align-items: center; gap: 0.75rem; font-size: 0.92rem; color: var(--on-dark); }
.sticky-bar__text strong { color: #fff; }
.sticky-bar svg { color: var(--red); flex-shrink: 0; }

/* =====================================================================
   REVEAL SYSTEM - TRANSFORM-ONLY. Content is NEVER hidden by opacity.
   opacity is never set to 0 anywhere in this block. A reveal that never
   fires (JS off/error, IO miss, mid-page load) just leaves the element
   18px lower - fully visible. Motion is pure enhancement.
   ===================================================================== */
.reveal-on [data-reveal] { transform: translateY(18px); transition: transform 0.6s var(--ease); }
.reveal-on [data-reveal].is-revealed { transform: none; }
.reveal-on [data-stagger] > * { transform: translateY(18px); transition: transform 0.55s var(--ease); }
.reveal-on [data-stagger].is-revealed > * { transform: none; }
.reveal-on [data-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-on [data-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-on [data-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-on [data-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-on [data-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.35s; }
.reveal-on [data-stagger].is-revealed > *:nth-child(7) { transition-delay: 0.42s; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__card { max-width: 460px; }
  .meet__grid { grid-template-columns: 1fr; }
  .booking-cta__grid { grid-template-columns: 1fr; gap: 2rem; }
  .local__grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .process__steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .process-step::before { display: none; }
  .process-step { padding-top: 0; padding-left: 3.25rem; }
  .process-step__num { left: 0; transform: none; }
  .process-step__title, .process-step__desc { text-align: left; }
}

@media (max-width: 860px) {
  .nav-menu { display: none; }
  .nav-toggle { display: block; }
  .trust-band__inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .trust-item { align-items: flex-start; text-align: left; }
  .trust-item + .trust-item { border-left: none; }
  .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; }
  .testimonial-card { flex: 0 0 calc(50% - 0.75rem); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { max-width: 100%; padding-inline: 20px; }
  .nav-logo { max-width: 220px; }
  .nav-logo img { height: 38px; }
  .is-scrolled .nav-logo img { height: 36px; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .trust-band__inner { grid-template-columns: 1fr; gap: 1.1rem; }
  .process__steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .testimonial-card { flex: 0 0 100%; }

  /* Hero - every child constrained, nothing can exceed the viewport */
  .hero { min-height: auto; padding-top: 5.75rem; padding-bottom: 3rem; }
  .hero__grid, .hero__intro, .hero__actions, .hero__trust, .hero__card,
  .hero__title, .hero__sub { width: 100%; max-width: 100%; min-width: 0; }
  .hero__eyebrow { font-size: 0.66rem; letter-spacing: 0.08em; padding: 0.4rem 0.8rem; }
  .hero__title { font-size: clamp(2rem, 7.2vw, 2.45rem); line-height: 1.08; overflow-wrap: normal; word-break: normal; }
  .hero__sub { overflow-wrap: normal; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; max-width: 100%; min-width: 0; }

  /* Hero trust - clean grid, never an overflowing flex row */
  .hero__trust { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; margin-top: 2rem; padding-top: 1.5rem; }
  .hero__trust-item { width: 100%; min-width: 0; }

  /* Credential card rows - stack label over value (no nowrap space-between) */
  .hero__card { padding: 1.6rem; }
  .hero__card-row { display: grid; grid-template-columns: 1fr; gap: 0.2rem; align-items: start; }
  .hero__card-row .v { text-align: left; white-space: normal; }

  /* Section headings must never run off the right edge */
  .section-header h2, .section-header p, h1, h2, h3 { max-width: 100%; overflow-wrap: normal; word-break: normal; }

  /* Generic CTA / button groups */
  .btn-group { width: 100%; }
  .btn-group .btn { width: 100%; max-width: 100%; min-width: 0; }
  .cta-section .btn-group .btn { min-width: 0; }
  .sticky-bar__text span.full { display: none; }

  /* Booking embed + service sidebars stack cleanly */
  .booking-cta__grid, .local__grid, .meet__grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .hero__trust { grid-template-columns: 1fr; }
  .hero__eyebrow { font-size: 0.62rem; }
  .booking-cta__fees { padding: 1.25rem; }
  .nap-card, .meet__panel { padding: 1.5rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal-on [data-reveal], .reveal-on [data-stagger] > * { transform: none !important; }
}

/* =====================================================================
   VISUAL POLISH (hover / microinteractions) - v2.2
   ===================================================================== */
/* Nav link: clean red underline indicator (box-shadow avoids ::after clash with dropdown arrow) */
.nav-link:hover, .nav-link.current-menu-item { color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }
.site-nav.is-dark .nav-link:hover { color: #fff; box-shadow: inset 0 -2px 0 #fff; background: transparent; }

/* Credential card: border highlight + edge glow on hover */
.hero__card { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hero__card:hover { border-color: rgba(214,0,0,0.55); box-shadow: var(--sh-xl), 0 0 0 1px rgba(214,0,0,0.25); transform: translateY(-3px); }

/* Trust band icons: subtle lift on hover */
.trust-item { transition: transform var(--dur) var(--ease); }
.trust-item:hover { transform: translateY(-3px); }
.trust-item__icon { transition: transform var(--dur) var(--ease); }
.trust-item:hover .trust-item__icon { transform: scale(1.08); }

/* Hero parallax target (JS adds transform; safe + reduced-motion gated in JS) */
.hero__bg { will-change: transform; }

/* NAP card + meet panel hover lift */
.nap-card, .meet__panel { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.nap-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }

/* =====================================================================
   v2.3.0 - Visitor-pain-first homepage additions
   - Hero quick-pick aside (replaces credential card in hero)
   - Situation finder grid (7 pain-first cards)
   - Why-RCIC-matters grid (2x3 reasoning panel)
   ===================================================================== */

/* Hero quick-pick aside: white-bg high-contrast card for readability over photo hero */
.hero__pick {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--sh-xl);
  color: var(--ink);
}
.hero__pick .hero__card-seal {
  background: var(--red-soft);
  border-color: rgba(214,0,0,0.18);
  color: var(--red);
}
.hero__pick h3 { color: var(--ink); }
.hero__pick .role { color: var(--text-muted); }
.hero__pick .hero__pick-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.5rem 0 1.1rem; }
.hero__pick .hero__pick-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.85rem;
  padding: 0.85rem 0.95rem; border-radius: 10px;
  background: #ffffff; border: 1px solid var(--border);
  color: var(--ink); font-size: 0.96rem; font-weight: 600;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hero__pick .hero__pick-list a > span { display: inline-flex; align-items: center; gap: 0.7rem; }
.hero__pick .hero__pick-list a > span svg { color: var(--red); flex-shrink: 0; }
.hero__pick .hero__pick-list a > svg:last-child { color: var(--text-muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.hero__pick .hero__pick-list a:hover { background: var(--red-soft); border-color: var(--red); transform: translateX(2px); }
.hero__pick .hero__pick-list a:hover > svg:last-child { transform: translateX(3px); color: var(--red); }
.hero__pick .hero__pick-foot { color: var(--text-muted); font-size: 0.85rem; line-height: 1.55; margin-top: 0.25rem; }
.hero__pick:hover { border-color: rgba(214,0,0,0.45); box-shadow: var(--sh-xl), 0 0 0 1px rgba(214,0,0,0.25); transform: translateY(-3px); }

/* Situation finder grid: 7 cards, pain-first */
.situation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.situation-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem 1.4rem;
  box-shadow: var(--sh-sm);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.situation-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--red);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
.situation-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--border-2); }
.situation-card:hover::before { transform: scaleY(1); }
.situation-card__icon-wrap {
  width: 46px; height: 46px; border-radius: 11px;
  background: var(--red-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.05rem;
  transition: background var(--dur) var(--ease);
}
.situation-card__icon { color: var(--red); display: flex; }
.situation-card:hover .situation-card__icon-wrap { background: var(--red); }
.situation-card:hover .situation-card__icon { color: #fff; }
.situation-card__title { font-size: 1.18rem; margin-bottom: 0.55rem; color: var(--ink); }
.situation-card__pain { font-size: 0.93rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 0.85rem; }
.situation-card__next { font-size: 0.9rem; color: var(--text); line-height: 1.55; margin-bottom: 1.1rem; }
.situation-card__next strong { color: var(--ink); font-weight: 700; }
.situation-card__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 700; font-size: 0.88rem; color: var(--red);
  margin-top: auto;
}
.situation-card__cta svg { transition: transform var(--dur) var(--ease); }
.situation-card:hover .situation-card__cta svg { transform: translateX(4px); }

/* Why-RCIC-matters grid: 2x3 reasoning panel */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.why-item {
  display: flex; gap: 1rem;
  padding: 1.35rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.why-item:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--border-2); }
.why-item__icon {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--red-soft);
  color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
}
.why-item__title { font-size: 1.06rem; margin-bottom: 0.35rem; color: var(--ink); line-height: 1.2; }
.why-item__body { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }

/* Responsive: situation + why grids collapse cleanly */
@media (max-width: 960px) {
  .situation-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .situation-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .why-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .situation-card { padding: 1.4rem 1.25rem 1.25rem; }
}

/* ===================================================== v2.4.0 IMAGE BANDS */

/* Wide editorial visual band inside a section, between header and grid. */
.section-visual {
  margin: 2rem auto 2.5rem;
  max-width: 1100px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 16 / 9;
  background: var(--sand);
}
.section-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .section-visual { margin: 1.25rem auto 1.75rem; border-radius: 12px; }
}

/* Optional editorial thumb on a situation-card. Sits above icon+title. */
.situation-card--has-image { padding-top: 0; overflow: hidden; }
.situation-card__image { display: block; width: calc(100% + 0px); margin: 0 0 1.2rem; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--border); }
.situation-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.situation-card--has-image:hover .situation-card__image img { transform: scale(1.04); }
.situation-card--has-image .situation-card__icon-wrap { margin-left: 1.5rem; }
.situation-card--has-image .situation-card__title,
.situation-card--has-image .situation-card__pain,
.situation-card--has-image .situation-card__next,
.situation-card--has-image .situation-card__cta { padding-left: 1.5rem; padding-right: 1.5rem; }
.situation-card--has-image .situation-card__cta { padding-bottom: 1.5rem; }

/* Optional editorial thumb on a service-card. */
.service-card--has-image { padding-top: 0; overflow: hidden; }
.service-card__image { display: block; width: 100%; margin: 0 0 1.2rem; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--border); }
.service-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.service-card--has-image:hover .service-card__image img { transform: scale(1.04); }
.service-card--has-image .service-card__icon-wrap { margin-left: 1.6rem; }
.service-card--has-image .service-card__title,
.service-card--has-image .service-card__desc,
.service-card--has-image .service-card__link { padding-left: 1.6rem; padding-right: 1.6rem; }
.service-card--has-image .service-card__link { padding-bottom: 1.6rem; }

/* Booking CTA with side visual on the left, content on the right. */
.cta-section--visual { padding-block: 0; text-align: left; display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; gap: 0; }
.cta-section--visual::before { display: none; }
.cta-section--visual .cta-section__visual { margin: 0; min-height: 100%; overflow: hidden; }
.cta-section--visual .cta-section__visual img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 380px; }
.cta-section--visual .container { padding-block: clamp(3rem, 6vw, 4.5rem); padding-inline: clamp(1.5rem, 4vw, 3rem); max-width: none; }
.cta-section--visual .booking-cta__grid { grid-template-columns: 1fr; gap: 2rem; }
.cta-section--visual h2 { text-align: left; }
.cta-section--visual p { margin-left: 0; }
.cta-section--visual .btn-group { justify-content: flex-start; }
@media (max-width: 900px) {
  .cta-section--visual { grid-template-columns: 1fr; }
  .cta-section--visual .cta-section__visual img { min-height: 220px; max-height: 260px; }
}

/* =====================================================================
   2.5.1 - HOVER + CONTRAST PASS (2026-09-10)
   Alvin Design Voice Sec 3: every interactive element changes colour AND
   text colour on hover, with animation; nothing lift-only. Plus the missing
   dark-context variant for outline buttons (charcoal-on-charcoal in
   .cta-section / .meet / .section--ink). Mobile .fx scroll twins are added
   by the cep-imprint-content plugin's fx.js for elements carrying .fx.
   ===================================================================== */

/* Primary: invert on hover (red -> white with red text), keep the lift */
.btn--primary { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); border: 1px solid var(--red); }
.btn--primary:hover, .btn--primary.fx-on { background: #fff; color: var(--red); border-color: var(--red); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(214,0,0,0.22); }
.btn--primary:hover svg, .btn--primary.fx-on svg { color: var(--red); stroke: var(--red); }

/* Outline on LIGHT sections: fill charcoal with white text (existing), now animated */
.btn--outline { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* Outline on DARK sections: was charcoal text on charcoal. Now white text, fills white on hover */
.cta-section .btn--outline, .section--ink .btn--outline, .meet .btn--outline, .site-footer .btn--outline, .page-hero .btn--outline {
  color: #fff; border-color: rgba(255,255,255,0.45); background: transparent; }
.cta-section .btn--outline:hover, .section--ink .btn--outline:hover, .meet .btn--outline:hover, .site-footer .btn--outline:hover, .page-hero .btn--outline:hover,
.cta-section .btn--outline.fx-on, .section--ink .btn--outline.fx-on, .meet .btn--outline.fx-on {
  background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); }

/* Ghost-light (on dark heroes): flip to solid white with charcoal text instead of a faint tint */
.btn--ghost-light { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn--ghost-light:hover, .btn--ghost-light.fx-on { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); }
.btn--ghost-light:hover svg, .btn--ghost-light.fx-on svg { color: var(--ink); stroke: var(--ink); }

/* Situation + service cards: the card itself turns red, all its text turns white */
.situation-card, .service-card { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.situation-card:hover, .situation-card.fx-on, .service-card:hover, .service-card.fx-on { background: var(--red); border-color: var(--red); color: #fff; }
.situation-card:hover h3, .situation-card:hover p, .situation-card:hover .situation-card__cta, .situation-card:hover span,
.situation-card.fx-on h3, .situation-card.fx-on p, .situation-card.fx-on .situation-card__cta, .situation-card.fx-on span,
.service-card:hover h3, .service-card:hover p, .service-card:hover .service-card__link, .service-card:hover span,
.service-card.fx-on h3, .service-card.fx-on p, .service-card.fx-on .service-card__link, .service-card.fx-on span { color: #fff; }
.situation-card:hover .situation-card__icon-wrap, .situation-card.fx-on .situation-card__icon-wrap,
.service-card:hover .service-card__icon-wrap, .service-card.fx-on .service-card__icon-wrap { background: #fff; }
.situation-card:hover .situation-card__icon, .situation-card.fx-on .situation-card__icon,
.service-card:hover .service-card__icon, .service-card.fx-on .service-card__icon { color: var(--red); }
.situation-card:hover::before, .service-card:hover::before { background: #fff; }

/* In-content TEXT links only (inside p / li / dd / td): colour shift on hover, underlined so never colour-only.
   Scoped to text containers so button-like anchors (.btn, .cep-cta, card wrappers) are never caught. */
.entry-content p a:not(.btn), .entry-content li a:not(.btn), .entry-content dd a, .entry-content td a,
.content-body p a:not(.btn), .content-body li a:not(.btn), .content-body dd a, .content-body td a,
.hero__lede a, .meet__body p a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur) var(--ease); }
.entry-content p a:not(.btn):hover, .entry-content li a:not(.btn):hover, .entry-content dd a:hover, .entry-content td a:hover,
.content-body p a:not(.btn):hover, .content-body li a:not(.btn):hover, .content-body dd a:hover, .content-body td a:hover,
.hero__lede a:hover, .meet__body p a:hover { color: var(--red-dark); }
.section--ink .content-body p a:not(.btn), .meet__body p a { color: #fff; }
.section--ink .content-body p a:not(.btn):hover, .meet__body p a:hover { color: var(--red-bright); }

/* Nav links + footer links: animated colour change */
.nav-link { transition: color var(--dur) var(--ease); }
.site-nav.is-scrolled .nav-link:hover { color: var(--red); }
.site-nav:not(.is-scrolled) .nav-link:hover { color: #fff; opacity: 1; }
.footer-col ul li a:hover, .footer-bottom nav a:hover, .footer-contact-row a:hover { color: #fff; }
.footer-social a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .btn--primary, .btn--outline, .btn--ghost-light, .situation-card, .service-card, .nav-link { transition: none; }
  .btn--primary:hover, .btn--outline:hover, .btn--ghost-light:hover, .situation-card:hover, .service-card:hover { transform: none; }
}

/* ============================================================
   2.5.2 - NAV CTA INVERT (Design Voice: colour + text flip, no lift-only)
   Base has color:#fff !important, so the hover colour must also be !important.
   Border is red at rest (invisible against red fill) so the box does not jump on hover.
   ============================================================ */
.nav-cta { border: 1.5px solid var(--red); transition: background var(--dur), color var(--dur), border-color var(--dur), box-shadow var(--dur); }
.nav-cta:hover, .nav-cta:focus-visible { background: #fff; color: var(--red) !important; border-color: var(--red); transform: none; box-shadow: 0 8px 20px rgba(214,0,0,0.22); }

/* ============================================================
   2.5.3 - CONTRAST SCAN FIXES (Playwright contrast-scan.js, 14 pages)
   - .section--dark had no rule (About "Our Mission" paragraph was white on white)
   - hero excerpt guard: any <p> inside .page-hero reads on-dark
   - pricing total: brand red on the dark fee card measured 2.71:1, use the bright red
   ============================================================ */
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .section-eyebrow { color: var(--red-bright, #ff3b3b); }
.section--dark .compliance-note { color: var(--on-dark-faint); }
.page-hero p, .page-hero__sub p { color: var(--on-dark); }
.fee-row .total-amt { color: #ff3b3b; }

/* ============================================================
   2.6.0 - PAGE IMAGE LAYER (split hero, figures, band, gallery)
   Hover = image zoom + caption bar turns red with white text; .fx-on is the mobile scroll twin.
   ============================================================ */
.page-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.page-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.page-fig { margin: 2rem 0 0; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--sh-md, 0 4px 12px rgba(15,27,45,0.07)); }
.page-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.6s var(--ease); }
.page-fig figcaption { padding: 0.8rem 1rem; font-size: 0.85rem; line-height: 1.45; color: var(--text-muted, #595350); background: #fff; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.page-fig--wide { margin-top: 3.5rem; }
.page-fig--wide img { aspect-ratio: 21 / 9; }
.page-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 4rem; }
.page-gallery .page-fig { margin: 0; }
.page-band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: 5rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--sand, #F7F3F1); border-radius: var(--radius-lg); }
.page-band--flip .page-band__media { order: 2; }
.page-band__media { border-radius: var(--radius); overflow: hidden; }
.page-band__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s var(--ease); }
.page-band__body h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.page-band__body p { color: var(--text); margin: 0; }
.page-band__body .section-eyebrow { margin-bottom: 0.75rem; }
@media (hover: hover) and (pointer: fine) {
  .page-fig:hover img, .page-band__media:hover img { transform: scale(1.04); }
  .page-fig:hover figcaption { background: var(--red); color: #fff; }
}
.page-fig.fx-on img, .page-band__media.fx-on img { transform: scale(1.04); }
.page-fig.fx-on figcaption { background: var(--red); color: #fff; }
@media (max-width: 860px) {
  .page-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .page-gallery { grid-template-columns: 1fr; }
  .page-band { grid-template-columns: 1fr; margin-top: 3.5rem; }
  .page-band--flip .page-band__media { order: 0; }
  .page-fig--wide img { aspect-ratio: 16 / 9; }
}
.post-featured img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid--2 > div > h2:first-child { margin-bottom: 1rem; }
@media (prefers-reduced-motion: reduce) { .page-fig img, .page-band__media img { transition: none; } .page-fig:hover img, .page-band__media:hover img, .page-fig.fx-on img, .page-band__media.fx-on img { transform: none; } }

/* 2.6.1 - MOBILE OVERFLOW FIX. Book Consultation and Contact use inline two-column grids
   (1fr 360px / 1fr 380px) with no breakpoint; at 390px the page scrolled sideways and the
   booking iframe collapsed to 90px. Any inline grid collapses to one column under 860px. */
@media (max-width: 860px) {
  main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  main [style*="position:sticky"] { position: static !important; }
  .booking-embed, .booking-embed iframe { width: 100% !important; min-width: 0 !important; }
}

/* ============================================================
   2.7.0 - FOOTER LEGAL ROW + CARD IMAGES
   The legal links were present but sat under the fixed sticky bar and at 0.58
   alpha. The bar now retracts at the footer (main.js) and the row reads clearly.
   ============================================================ */
.footer-bottom { border-top: 1px solid var(--border-dark); margin-top: 0.5rem; }
.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-bottom nav.footer-legal a, .footer-legal a { color: rgba(255,255,255,0.86); font-size: 0.82rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.3); transition: color var(--dur), text-decoration-color var(--dur); }
.footer-bottom nav.footer-legal a:hover, .footer-bottom nav.footer-legal a:focus-visible, .footer-legal a:hover, .footer-legal a:focus-visible { color: #fff; text-decoration-color: #fff; }
/* Card images: the loop now emits <picture>, so target the inner img the same way */
.service-card__image picture, .situation-card__image picture { display: block; width: 100%; height: 100%; }
.service-card__image picture img, .situation-card__image picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hub and Help-Inside cards are <div>, not <a>: keep the image flush like the anchor cards */
.service-card--has-image { padding-top: 0; overflow: hidden; }

}

/* 2.8.0 - COPY PASS. Trust micro-copy under the focal CTA, per the CEP copy standard:
   the button says what you get, the line under it carries duration, fee and no-obligation. */
.cta-micro { margin-top: 1.1rem; font-size: 0.86rem; color: var(--on-dark-faint); }
.cta-section .cta-micro { color: rgba(255,255,255,0.68); }
.hero .cta-micro { color: rgba(255,255,255,0.7); margin-top: 0.9rem; }

/* 2.8.1 - the seventh situation renders as a full-width row, not a spanned grid cell.
   Image fills its column edge to edge; the copy sits in a readable measure beside it. */
.situation-row { display: grid; grid-template-columns: 340px 1fr; align-items: stretch; padding: 0; overflow: hidden; gap: 0; }
.situation-row__media { display: block; height: 100%; min-height: 220px; }
.situation-row__media picture, .situation-row__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.situation-row__body { display: block; padding: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 70ch; }
.situation-row .situation-card__title { margin-top: 0.85rem; }
.situation-row .situation-card__cta { margin-top: 1rem; display: inline-flex; }
@media (max-width: 860px) {
  .situation-row { grid-template-columns: 1fr; }
  .situation-row__media { min-height: 190px; }
}

/* 2.8.2 - the three steps are an explainer, not a progress tracker. Side by side they
   all carry the brand number badge; stacked on mobile the scroll activation still runs. */
@media (min-width: 861px) {
  .process-step__num { background: var(--red); border-color: var(--red); color: #fff; }
}

/* =====================================================================
   v2.10.0 - 320px overflow (independent audit, 2026-09-14)

   At 320px the page scrolled sideways by 50px. The cause was not the
   off-canvas drawer, which was the obvious suspect and was innocent: hiding
   it changed nothing. It was `grid-template-columns: 1fr` in the NAP section.
   A `1fr` track carries an implicit `min-width: auto` floor, so it cannot
   shrink below the min-content width of what it holds. The flex row carrying
   the office address has the same implicit floor, and between them the column
   resolved to 350px inside a 265px container.

   minmax(0, 1fr) removes the floor from the track; min-width: 0 removes it
   from the flex children. Both are needed, and neither changes any layout
   that was already fitting.
   ===================================================================== */
@media (max-width: 860px) {
  .local__grid,
  .booking-cta__grid,
  .meet__grid,
  .footer-grid,
  .process__steps { grid-template-columns: minmax(0, 1fr); }
  .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Flex rows holding long unbreakable values must be allowed to shrink. */
.nap-row,
.nap-row > *,
.hero__trust > * { min-width: 0; }

.nap-row__value,
.nap-row__label { overflow-wrap: anywhere; }

/* Belt and braces: no descendant may force the document wider than the
   viewport on a phone. This clips rather than scrolls, and `clip` is used in
   preference to `hidden` because `hidden` would break position: sticky. */
@media (max-width: 480px) {
  html, body { overflow-x: clip; }
  main img, main svg, main video, main iframe { max-width: 100%; height: auto; }
}

/* ============================================================
   2.15.0 - ARTICLE CROSS-LINK CARDS
   Every migrated post arrived with no featured image, so article pages carried
   one image and two scroll hooks. These cards carry the internal service links
   under each article and supply the hover pair required by non-negotiable 5:
   the title colour changes AND the image scales plus the card lifts. The
   .fx-on twin is driven by the same observer that serves .page-fig on touch.
   ============================================================ */
.article-links { gap: 1.5rem; }
.article-link-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--clr-border, #E6E0DC);
  border-radius: var(--radius, 16px); overflow: hidden;
  text-decoration: none; color: inherit; min-width: 0;
  box-shadow: 0 2px 8px rgba(15, 27, 45, 0.05);
  transition: transform var(--dur, 0.25s) var(--ease, ease), box-shadow var(--dur, 0.25s) var(--ease, ease), border-color var(--dur, 0.25s) var(--ease, ease);
}
.article-link-card__img { display: block; overflow: hidden; }
.article-link-card__img img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 0.6s var(--ease, ease);
}
.article-link-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.15rem 1.25rem 1.3rem; }
.article-link-card__title {
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.02rem;
  line-height: 1.3; color: var(--clr-navy, #0F1B2D);
  transition: color var(--dur, 0.25s) var(--ease, ease);
}
.article-link-card__text { font-size: 0.875rem; line-height: 1.5; color: var(--clr-slate-light, #6B6560); }
.article-link-card__go {
  margin-top: 0.35rem; display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--clr-red, #D60000);
  transition: gap var(--dur, 0.25s) var(--ease, ease);
}
@media (hover: hover) {
  .article-link-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 27, 45, 0.13); border-color: var(--clr-red, #D60000); }
  .article-link-card:hover .article-link-card__img img { transform: scale(1.05); }
  .article-link-card:hover .article-link-card__title { color: var(--clr-red, #D60000); }
  .article-link-card:hover .article-link-card__go { gap: 0.6rem; }
}
.article-link-card.fx-on { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 27, 45, 0.13); border-color: var(--clr-red, #D60000); }
.article-link-card.fx-on .article-link-card__img img { transform: scale(1.05); }
.article-link-card.fx-on .article-link-card__title { color: var(--clr-red, #D60000); }
.article-link-card:focus-visible { outline: 3px solid var(--clr-red, #D60000); outline-offset: 3px; }
@media (max-width: 860px) { .article-links { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .article-link-card, .article-link-card__img img { transition: none; }
  .article-link-card:hover, .article-link-card.fx-on { transform: none; }
  .article-link-card:hover .article-link-card__img img, .article-link-card.fx-on .article-link-card__img img { transform: none; }
}

/* ============================================================
   2.22.0 - UNWANTED GAPS (non-negotiable 2)
   Measured on the live About page at 2560x873:
     - .container capped at a fixed 1200px, so content spanned 46.9% of the
       viewport. The rule is >=55% at 1440 and above. There was no large-screen
       breakpoint anywhere in the stylesheet, so above 1200px the page just grew
       empty margins.
     - .section pads 104px top and bottom. Two adjacent sections therefore stack
       208px of dead space, and a 256px empty band was measured between the
       profile section and Our Mission. The front page stacks 13 sections.
   Both are fixed below. Nothing changes under 1400px, so the layout that was
   already approved at laptop widths is untouched.
   ============================================================ */

/* Container grows with the viewport instead of stranding content in a column.
   At 1440 this still resolves to 1200px, so narrower screens are unaffected.
   1600: 1248px (78%). 1920: 1498px (78%). 2560: 1600px (62.5%). All clear 55%. */
@media (min-width: 1400px) {
  :root { --maxw: clamp(1200px, 78vw, 1600px); }
}

/* Two stacked sections produced a 208px void. Trim only the JOIN, so each
   section keeps its own opening rhythm and the boundary stops reading as a gap.
   104 + 72 = 176px, comfortably under the 220px limit. */
.section + .section,
.section + .cta-section,
.cta-section + .section,
.page-hero + .section,
.page-hero + .cta-section {
  padding-block-start: clamp(2.25rem, 4.5vw, 4.5rem);
}

/* Trimming only the following section's top still left 224px, because the
   section above it keeps a full 104px bottom. Trim that side too when another
   section follows, so the join is 72 + 72 rather than 104 + 104. :has() is the
   right selector here and it degrades safely: without it the boundary simply
   stays as it was. */
.section:has(+ .section),
.section:has(+ .cta-section),
.page-hero:has(+ .section),
.page-hero:has(+ .cta-section) {
  padding-block-end: clamp(2.25rem, 4.5vw, 4.5rem);
}

/* Prose should not stretch to 1600px just because the shell can. Grids, bands
   and card rows widen; reading measure stays civilised. */
.content-body > p,
.content-body > ul,
.content-body > ol,
.content-body > h2,
.content-body > h3 { max-width: 76ch; }

/* 2.23.2 - Leading margins on the first block in a section.
   .page-band carries margin-top: 5rem so it separates from the prose above it.
   On the category archives the band IS the first thing in its section, so that
   80px stacked on top of the section's own 104px padding and the hero's 64px,
   producing a measured 270px void on all seven archives. Same applies to the
   figure and gallery helpers wherever they lead a block. */
.page-band:first-child,
.page-fig:first-child,
.page-gallery:first-child,
.container > .page-band:first-child,
.container > .page-fig:first-child,
.container > .page-gallery:first-child { margin-top: 0; }

/* 2.23.3 - Mobile joins. The limit is 160px on mobile, and at 390px two adjacent
   sections still measured 168px and 181px on About and Express Entry. Section
   padding bottoms out at 3.5rem there, so trim the JOIN specifically rather than
   the sections themselves, and pull in the band's leading margin to match. */
@media (max-width: 860px) {
  .section + .section,
  .section + .cta-section,
  .cta-section + .section,
  .page-hero + .section,
  .page-hero + .cta-section { padding-block-start: 2rem; }
  .section:has(+ .section),
  .section:has(+ .cta-section),
  .page-hero:has(+ .section),
  .page-hero:has(+ .cta-section) { padding-block-end: 2rem; }
  .page-band { margin-top: 2.5rem; }
  .page-gallery { margin-top: 2.5rem; }
}