/* ==========================================================================
   Lasting Progress — Design System
   Brand palette, typography, grid, and reusable components (PRD section 10)
   ========================================================================== */

:root {
  /* Brand palette, aligned to the approved logo/brand package */
  --c-midnight: #0F2A44;   /* Deep Navy */
  --c-exec-blue: #3C6A8E;  /* Ocean Blue */
  --c-steel: #51698A;      /* derived: muted slate for secondary text, kept AA-safe on white */
  --c-pale-blue: #E3E9ED;  /* derived: light tint of Pale Blue-Gray, for section backgrounds */
  --c-cloud: #F2F4F6;      /* Mist */
  --c-sand: #DCC6A6;       /* Muted Sand, warm accent (decorative use only, not text on light bg) */
  --c-charcoal: #1F2933;
  --c-white: #FFFFFF;
  --c-border: #DDE4E9;     /* derived: light neutral-blue border */
  --c-border-strong: #B7C7D1; /* Pale Blue-Gray */

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.9rem, 1.65rem + 1.2vw, 2.4rem);
  --step-4: clamp(2.5rem, 2rem + 2.4vw, 3.6rem);
  --step-5: clamp(3rem, 2.2rem + 3.6vw, 4.6rem);

  --content-max: 1200px;
  --content-narrow: 760px;
  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(16, 42, 67, 0.06), 0 1px 1px rgba(16, 42, 67, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 42, 67, 0.08);
  --transition: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--c-charcoal);
  background: var(--c-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--c-midnight); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 200; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--c-midnight); line-height: 1.15; margin: 0 0 0.6em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 1.1em; }
.lede { font-size: var(--step-1); color: var(--c-steel); font-weight: 400; }
.editorial-headline { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; }

.container { max-width: var(--content-max); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--content-narrow); margin: 0 auto; padding: 0 1.5rem; }

section { padding: clamp(3rem, 6vw, 6rem) 0; }
.section-tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.bg-cloud { background: var(--c-cloud); }
.bg-pale { background: var(--c-pale-blue); }
.bg-midnight { background: var(--c-midnight); color: #fff; }
.bg-midnight h1, .bg-midnight h2, .bg-midnight h3, .bg-midnight h4 { color: #fff; }
.bg-midnight .lede { color: var(--c-border-strong); }
.bg-white { background: var(--c-white); }
.rule { border: none; border-top: 1px solid var(--c-border); margin: 0; }

.eyebrow {
  display: inline-block; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-exec-blue); margin-bottom: 0.9em;
}
.bg-midnight .eyebrow { color: var(--c-sand); }

/* Grid */
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600;
  padding: 0.85rem 1.5rem; border-radius: var(--radius); text-decoration: none;
  font-size: var(--step--1); letter-spacing: 0.01em; border: 1px solid transparent;
  cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-primary { background: var(--c-exec-blue); color: #fff; }
.btn-primary:hover { background: #2C5470; }
.btn-secondary { background: transparent; color: var(--c-midnight); border-color: var(--c-border-strong); }
.btn-secondary:hover { border-color: var(--c-exec-blue); color: var(--c-exec-blue); }
.bg-midnight .btn-secondary, .hero-brand .btn-secondary, .cta-block.dark .btn-secondary { color: #fff; border-color: #3E5B7A; }
.bg-midnight .btn-secondary:hover, .hero-brand .btn-secondary:hover, .cta-block.dark .btn-secondary:hover { border-color: #fff; }
.btn-light { background: #fff; color: var(--c-midnight); }
.btn-light:hover { background: var(--c-pale-blue); }
.btn-block { width: 100%; justify-content: center; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100; background: var(--c-cloud);
  border-bottom: 1px solid var(--c-border); box-shadow: 0 1px 0 rgba(16,42,67,0.03);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1rem; }
/* Brand mark: approved client artwork (assets/img/brand/), used as supplied
   rather than redrawn. Header uses the icon + wordmark images plus a small
   live-text tagline (kept as real text so it stays legible at nav scale);
   the footer uses the full reversed-white lockup image as one piece. */
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: none; }
.brand-mark { width: 40px; height: 39px; flex: none; display: block; object-fit: contain; }
.brand-word-wrap { display: flex; flex-direction: column; }
.brand-wordmark { display: block; width: 158px; height: 34px; object-fit: contain; object-position: left center; }
.brand-word-wrap small { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-steel); margin-top: 0.2rem; }

.brand-footer-lockup { display: inline-block; margin-bottom: 1.1rem; }
.brand-footer-lockup img { display: block; width: 380px; height: auto; max-width: 100%; }

.primary-nav { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.primary-nav > ul { list-style: none; display: flex; gap: 0.1rem; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 0.3rem; text-decoration: none; color: var(--c-charcoal);
  font-weight: 600; font-size: 0.9rem; padding: 0.7rem 0.6rem; border-radius: var(--radius); white-space: nowrap;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--c-exec-blue); }
.nav-link.is-active { color: var(--c-exec-blue); }
/* Underline bar instead of an arrow flip: a thin blue bar grows in under
   the label on hover/open, roughly the weight of the nav text itself. */
.nav-link::after {
  content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.45rem;
  height: 2px; background: var(--c-exec-blue); border-radius: 1px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.nav-link:hover::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }

.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 300px; background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 0.6rem; display: none; margin-top: 0.4rem;
}
/* Wide variant for long dropdowns (Capabilities): two columns so nine items
   do not require a very tall single-column list. */
.dropdown-wide { min-width: 560px; column-count: 2; column-gap: 0.4rem; }
.dropdown-wide a { break-inside: avoid; }
@media (max-width: 1100px) {
  .dropdown-wide { column-count: 1; min-width: 0; }
}
/* Invisible strip that bridges the visual gap between the nav link and the
   dropdown panel, so the pointer never crosses "dead" space (which was
   closing the menu before the cursor reached it). Part of .dropdown, so it
   keeps the hover state alive the whole way down. */
.dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -0.4rem; height: 0.4rem;
}
.nav-item.is-open .dropdown { display: block; }
.dropdown a { display: block; padding: 0.6rem 0.75rem; border-radius: var(--radius); text-decoration: none; color: var(--c-charcoal); font-size: 0.92rem; font-weight: 500; white-space: normal; }
.dropdown a:hover { background: var(--c-pale-blue); color: var(--c-exec-blue); }
.dropdown a.dd-lead { font-weight: 700; color: var(--c-midnight); }

.header-cta { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.header-cta .btn { white-space: nowrap; }
.menu-toggle { display: none; background: none; border: 1px solid var(--c-border-strong); border-radius: var(--radius); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.menu-toggle svg { pointer-events: none; }

@media (max-width: 1100px) {
  .primary-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header.nav-open .primary-nav {
    display: block; position: fixed; inset: 76px 0 0 0; background: #fff; overflow-y: auto; padding: 1rem 1.5rem 3rem;
  }
  .site-header.nav-open .primary-nav > ul { flex-direction: column; align-items: stretch; }
  .site-header.nav-open .dropdown { position: static; box-shadow: none; border: none; padding-left: 1rem; margin-top: 0; display: none; }
  .site-header.nav-open .nav-item.is-open .dropdown { display: block; }
  .nav-link { padding: 0.9rem 0.5rem; border-bottom: 1px solid var(--c-border); white-space: normal; }
}

.cta-label-short { display: none; }
@media (max-width: 480px) {
  .site-header .container { gap: 0.4rem; padding: 0 1rem; }
  .brand-mark { width: 30px; height: 29px; }
  .brand-wordmark { width: 120px; height: 26px; }
  .brand-word-wrap small { display: none; }
  .header-cta { gap: 0.4rem; }
  .header-cta .btn-primary { padding: 0.6rem 0.75rem; font-size: 0.78rem; }
  .cta-label-full { display: none; }
  .cta-label-short { display: inline; }
  .menu-toggle { width: 38px; height: 38px; }
}

/* Hero variants */
.hero { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-editorial { background: var(--c-cloud); }
.hero-conversion { background: var(--c-pale-blue); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-figure {
  aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; position: relative;
  background:
    url("../img/pattern-flow-light.svg") center / cover no-repeat,
    linear-gradient(155deg, #3C6A8E, #0F2A44);
}
.hero-figure.wide { aspect-ratio: 16 / 10; }
.hero-figure-founder { background: url("../img/team/adam-founder.png") center / cover no-repeat; }

/* Full-bleed photo hero: opt-in per page via hero_block(bg_image=...). Same
   dark-gradient-over-photo treatment as the homepage's hero-brand/hero-home
   combination, generalized so any page can use a supplied photograph
   without depending on homepage-specific classes. The image itself comes
   from a --hero-photo custom property set inline per page. */
.hero-photo {
  position: relative; background: var(--c-midnight); color: #fff; overflow: hidden;
  min-height: 58vh; display: flex; align-items: center; padding: clamp(4rem, 8vw, 6rem) 0;
}
.hero-photo h1 { color: #fff; }
.hero-photo .lede { color: var(--c-border-strong); }
.hero-photo .eyebrow { color: var(--c-sand); }
.hero-photo .breadcrumb, .hero-photo .breadcrumb a { color: var(--c-border-strong); }
.hero-photo .breadcrumb li:not(:last-child)::after { color: rgba(255,255,255,0.3); }
.hero-photo .breadcrumb li:last-child { color: #fff; }
.hero-photo .btn-secondary { color: #fff; border-color: #3E5B7A; }
.hero-photo .btn-secondary:hover { border-color: #fff; }
.hero-photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-photo); background-position: center; background-size: cover; background-repeat: no-repeat;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(4,10,20,0.88) 0%, rgba(4,10,20,0.72) 32%, rgba(4,10,20,0.4) 55%, rgba(4,10,20,0.12) 75%, transparent 92%),
    linear-gradient(0deg, rgba(4,10,20,0.35) 0%, transparent 40%);
}
/* Same fix as .hero-brand .container below: .hero-photo is display:flex
   (for vertical centering), which makes .container a flex item that
   shrink-wraps to its content instead of stretching to the standard
   1200px width -- so its auto-margin centering pulls copy toward the
   middle of the section instead of lining up with the header logo/nav.
   Forcing width:100% (capped by max-width) makes the auto margins resolve
   to the same split the header gets, so the two align. */
.hero-photo .container { position: relative; z-index: 2; width: 100%; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .hero-photo { min-height: auto; } }

/* Full-bleed brand hero: the artwork spans the entire section edge to edge,
   with copy laid directly over it (no boxed side panel). No video/animation
   per PRD anti-patterns (10.7). Artwork is original generated line art
   (gen_art.py), not a photo, standing in for real operating-environment
   photography until the owner supplies it. */
.hero-brand {
  position: relative; background: var(--c-midnight); color: #fff; overflow: hidden;
  min-height: 74vh; display: flex; align-items: center; padding: clamp(5rem, 9vw, 6rem) 0;
}
.hero-brand h1, .hero-brand h2 { color: #fff; }
.hero-brand h1 { font-size: var(--step-5); }
.hero-brand::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6,15,26,0.85) 0%, rgba(6,15,26,0.72) 45%, rgba(6,15,26,0.38) 68%, rgba(6,15,26,0.08) 85%, transparent 100%),
    radial-gradient(60% 90% at 78% 25%, rgba(60,106,142,0.5), transparent 60%),
    linear-gradient(115deg, #0A2338 0%, #0F2A44 38%, #2E5674 66%, #3C6A8E 100%);
}
.hero-brand::after {
  content: ""; position: absolute; inset: 0; opacity: 0.7; pointer-events: none;
  background: url("../img/pattern-flow-light.svg") center / cover no-repeat;
}
/* Flex items shrink-wrap to content and then re-center via the .container
   base rule's auto margins, which was pulling hero copy toward the middle of
   the section instead of aligning it to the same left edge as the header
   logo/nav. Forcing width:100% (capped by max-width) makes the auto margins
   resolve to the same even split the header gets, so the two line up. */
.hero-brand .container { position: relative; z-index: 2; width: 100%; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .hero-brand { min-height: auto; } }

/* Homepage hero: client-approved header art (assets/img/hero/hero-home.jpg),
   part of the same header-art batch being rolled out across the site's main
   pages. Photo sits on ::before (bottom layer); the darkening scrim moves to
   ::after (top layer) so it reads over the image instead of under it. */
.hero-home::before {
  background: url("../img/hero/hero-home.jpg") center / cover no-repeat;
}
.hero-home::after {
  opacity: 1;
  background: linear-gradient(100deg, rgba(4,10,20,0.9) 0%, rgba(4,10,20,0.76) 26%, rgba(4,10,20,0.44) 44%, rgba(4,10,20,0.12) 60%, transparent 76%);
}
.hero-home-copy { max-width: 780px; }
/* Only pull further left once the container has actually hit its 1200px
   cap and has real margin to spare (~1300px+); below that the container
   fills the viewport with no slack and a negative margin here would push
   the headline past the left edge. */
@media (min-width: 1300px) {
  .hero-home-copy { margin-left: clamp(-2.5rem, -3vw, -1rem); }
}

/* Full-bleed editorial statement: large serif line over the same generated
   artwork, used sparingly to create rhythm (PRD 10.5 "alternate editorial
   sections"). */
.statement-band {
  position: relative; overflow: hidden; padding: clamp(4.5rem, 9vw, 7.5rem) 0; color: #fff;
}
.statement-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6,15,26,0.8) 0%, rgba(6,15,26,0.55) 42%, rgba(6,15,26,0.22) 66%, transparent 85%),
    radial-gradient(70% 100% at 15% 85%, rgba(81,105,138,0.55), transparent 55%),
    linear-gradient(200deg, #173650 0%, #0D2136 60%, #091B2C 100%);
}
.statement-band::after {
  content: ""; position: absolute; inset: 0; opacity: 0.6; pointer-events: none;
  background: url("../img/pattern-flow-light.svg") center / cover no-repeat;
}
.statement-band .container { position: relative; z-index: 2; }
.statement-band blockquote {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.3; color: #fff; margin: 0 0 1.5rem; max-width: 880px; letter-spacing: -0.01em;
}
.statement-band .eyebrow { color: var(--c-sand); }

/* Proof point band */
.proof-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 800px) { .proof-band { grid-template-columns: repeat(2, 1fr); } }
.proof-item .num { font-family: var(--font-serif); font-size: var(--step-3); font-weight: 700; color: var(--c-midnight); display: block; margin-bottom: 0.25rem; }
.bg-midnight .proof-item .num { color: #fff; }
.proof-item .label { color: var(--c-steel); font-size: 0.92rem; }
.bg-midnight .proof-item .label { color: var(--c-border-strong); }
.proof-source { margin-top: 2rem; font-size: 0.85rem; color: var(--c-steel); border-top: 1px solid var(--c-border); padding-top: 1.25rem; }

/* Proof band paired with a full-bleed media panel (Korn Ferry-style stat + imagery pairing) */
.proof-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
@media (max-width: 900px) { .proof-media-grid { grid-template-columns: 1fr; } }
.proof-media-grid .proof-media-copy { padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem); }
.proof-media-grid .proof-media-copy .proof-band { grid-template-columns: repeat(2, 1fr); }
.proof-media-panel {
  position: relative; min-height: 320px;
  background:
    url("../img/panels/growth-outcomes.png") center / cover no-repeat,
    linear-gradient(160deg, #4A7FA0 0%, #3C6A8E 45%, #0F2A44 100%);
}

/* Capability cards with a client-supplied illustration per service (McKinsey-style image-led card grid) */
.capability-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0; }
.capability-card .thumb {
  aspect-ratio: 16 / 10; position: relative;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-color: #3C6A8E; /* fallback while the image loads */
}
.thumb-strategy-execution { background-image: url("../img/services/strategy-execution.png"); }
.thumb-operating-performance { background-image: url("../img/services/operating-performance.png"); }
.thumb-digital-operations { background-image: url("../img/services/digital-operations.png"); }
.thumb-organizational-effectiveness { background-image: url("../img/services/organizational-effectiveness.png"); }
.thumb-transformation-turnaround { background-image: url("../img/services/transformation-turnaround.png"); }
.thumb-interim-leadership { background-image: url("../img/services/interim-leadership.png"); }
.capability-card .card-body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.capability-card .card-body p { color: var(--c-steel); font-size: 0.94rem; margin-bottom: 1rem; }
.capability-card .card-body .read-link { margin-top: auto; font-weight: 600; color: var(--c-exec-blue); text-decoration: none; font-size: 0.9rem; }
.bg-midnight .proof-source { color: #9FB3C8; border-top-color: #274563; }

/* Cards */
.card {
  background: #fff; border: 1px solid var(--c-border); border-radius: 6px; padding: 1.75rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--c-border-strong); }
.card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.card-eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-exec-blue); }

.insight-card { display: flex; flex-direction: column; height: 100%; }
.insight-card .thumb {
  aspect-ratio: 16/9; border-radius: 4px; margin-bottom: 1.1rem; position: relative;
  background:
    url("../img/pattern-flow-deep.svg") center / cover no-repeat,
    linear-gradient(135deg, var(--c-pale-blue), #DCE4E9);
}
.insight-card:nth-of-type(4n+2) .thumb:not(.thumb-photo) { transform: scaleX(-1); }
.insight-card:nth-of-type(4n+3) .thumb:not(.thumb-photo) { transform: scaleY(-1); }
.insight-card:nth-of-type(4n+4) .thumb:not(.thumb-photo) { transform: rotate(180deg); }
/* Real article thumbnails (per-article photo supplied for a given Insight)
   override the decorative pattern background above via inline
   background-image. The flip/rotate variants exist to add variety to the
   abstract placeholder pattern and would look broken applied to an actual
   photograph, so .thumb-photo is excluded from all three above. */
.thumb-photo { background-image: none; background-color: var(--c-pale-blue); background-size: cover; background-position: center; }
.insight-meta { display: flex; gap: 0.75rem; font-size: 0.78rem; color: var(--c-steel); margin-bottom: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; }
.insight-card p { color: var(--c-steel); font-size: 0.95rem; }
.insight-card .read-link { margin-top: auto; font-weight: 600; color: var(--c-exec-blue); text-decoration: none; font-size: 0.9rem; }

/* Article hero image (article_hero_image() in gen_insights.py): a full-width
   photo below the article header, used only for articles that were supplied
   with a dedicated thumbnail/hero image. Older articles without one simply
   omit this block. */
.article-hero-image { aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; margin: 0 0 2.5rem; background-size: cover; background-position: center; }

.resource-card { display: flex; flex-direction: column; height: 100%; }
.resource-format { display: inline-flex; align-self: flex-start; background: var(--c-pale-blue); color: var(--c-exec-blue); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.6rem; border-radius: 3px; margin-bottom: 0.9rem; }
.resource-access { font-size: 0.8rem; color: var(--c-steel); margin-top: 0.5rem; }

/* Service narrative blocks */
.service-narrative { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 800px) { .service-narrative { grid-template-columns: 1fr; } }
.narrative-block { border-left: 3px solid var(--c-exec-blue); padding: 0.25rem 0 0.25rem 1.25rem; }
.narrative-block h4 { margin-bottom: 0.4em; }

/* CTA block */
.cta-block { border-radius: 8px; padding: clamp(2rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.cta-block.light { background: var(--c-pale-blue); }
.cta-block.dark { background: var(--c-midnight); color: #fff; }
.cta-block.dark h2, .cta-block.dark h3 { color: #fff; }
.cta-block .cta-copy { max-width: 560px; }

/* Breadcrumb */
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 1.5rem; font-size: 0.85rem; color: var(--c-steel); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--c-border-strong); }
.breadcrumb a { text-decoration: none; color: var(--c-steel); }
.breadcrumb a:hover { color: var(--c-exec-blue); }
.breadcrumb li:last-child { color: var(--c-midnight); font-weight: 600; }
.hero-brand .breadcrumb, .hero-brand .breadcrumb a { color: var(--c-border-strong); }
.hero-brand .breadcrumb li:not(:last-child)::after { color: rgba(255,255,255,0.3); }
.hero-brand .breadcrumb li:last-child { color: #fff; }

/* Forms */
.form-field { margin-bottom: 1.4rem; }
.form-field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--c-midnight); }
.form-field .hint { font-size: 0.8rem; color: var(--c-steel); margin-top: 0.35rem; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--c-border-strong); border-radius: 4px;
  font-family: var(--font-sans); font-size: 0.95rem; background: #fff; color: var(--c-charcoal);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--c-exec-blue); outline-offset: 1px; border-color: var(--c-exec-blue); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
.field-error { color: #B3261E; font-size: 0.8rem; margin-top: 0.35rem; display: none; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #B3261E; }
.form-field.has-error .field-error { display: block; }
.error-summary { background: #FDECEA; border: 1px solid #F2B6B1; color: #7A241F; padding: 1rem 1.25rem; border-radius: 4px; margin-bottom: 1.5rem; display: none; }
.error-summary.is-visible { display: block; }
.form-success { background: var(--c-pale-blue); border: 1px solid var(--c-border-strong); border-radius: 6px; padding: 2rem; display: none; }
.form-success.is-visible { display: block; }
.consent-row { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--c-steel); }
.consent-row input { width: auto; margin-top: 0.25rem; }
.draft-note {
  background: #FFF8E6; border: 1px solid #F0DBA0; color: #6B5407; padding: 0.85rem 1.1rem; border-radius: 4px;
  font-size: 0.85rem; margin: 1.25rem 0;
}

/* Assessment */
.assessment-shell { max-width: 760px; margin: 0 auto; }
.progress-track { height: 6px; background: var(--c-border); border-radius: 3px; overflow: hidden; margin-bottom: 2.5rem; }
.progress-fill { height: 100%; width: 16.6%; background: var(--c-exec-blue); transition: width 220ms ease; }
.assessment-step { display: none; }
.assessment-step.is-active { display: block; }
.scale-options { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
.scale-option { border: 1px solid var(--c-border-strong); border-radius: 6px; padding: 0.9rem 1.1rem; cursor: pointer; display: flex; align-items: center; gap: 0.85rem; transition: border-color var(--transition), background var(--transition); }
.scale-option:hover { border-color: var(--c-exec-blue); }
.scale-option input { width: auto; }
.scale-option.is-checked { border-color: var(--c-exec-blue); background: var(--c-pale-blue); }
.assessment-nav { display: flex; justify-content: space-between; margin-top: 2rem; }
.dimension-result { border: 1px solid var(--c-border); border-radius: 6px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.dimension-result .bar-track { height: 8px; background: var(--c-border); border-radius: 4px; overflow: hidden; margin-top: 0.6rem; }
.dimension-result .bar-fill { height: 100%; background: var(--c-exec-blue); }
.band-badge { display: inline-block; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 20px; background: var(--c-midnight); color: #fff; font-size: 0.85rem; letter-spacing: 0.03em; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 1.25rem 0; font-weight: 700; font-size: 1rem; color: var(--c-midnight); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-q .plus { width: 18px; height: 18px; position: relative; flex: none; }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; background: var(--c-exec-blue); }
.faq-q .plus::before { width: 100%; height: 2px; top: 8px; }
.faq-q .plus::after { width: 2px; height: 100%; left: 8px; transition: transform var(--transition); }
.faq-item.is-open .plus::after { transform: rotate(90deg); }
.faq-a { display: none; padding: 0 0 1.25rem; color: var(--c-steel); }
.faq-item.is-open .faq-a { display: block; }

/* Metric definition component */
.metric-def { display: flex; gap: 1.25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--c-border); }
.metric-def .num { font-family: var(--font-serif); font-weight: 700; color: var(--c-exec-blue); font-size: 1.6rem; flex: none; width: 110px; }
.metric-def .meaning { color: var(--c-steel); font-size: 0.92rem; }

/* Article typography */
.article-body { max-width: var(--content-narrow); margin: 0 auto; font-size: 1.08rem; }
.article-body h2 { font-size: var(--step-2); margin-top: 1.6em; }
.article-body h3 { font-size: var(--step-1); margin-top: 1.4em; }
.article-body p { margin-bottom: 1.3em; }
.article-body ul { margin: 0 0 1.3em; padding-left: 1.2em; color: var(--c-charcoal); }
.article-body ul li { margin-bottom: 0.5em; }
.article-body .callout ul { margin-bottom: 0; }
.article-body blockquote {
  border-left: 3px solid var(--c-exec-blue); margin: 2em 0; padding: 0.2em 0 0.2em 1.5em;
  font-family: var(--font-serif); font-size: 1.25rem; color: var(--c-midnight); font-style: italic;
}
.callout { background: var(--c-pale-blue); border-radius: 6px; padding: 1.5rem 1.75rem; margin: 2em 0; }
.callout h4 { margin-bottom: 0.5em; }

/* Tags / pills */
.pill { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 20px; background: var(--c-pale-blue); color: var(--c-exec-blue); margin: 0 0.4rem 0.4rem 0; text-decoration: none; }
.pill.is-active { background: var(--c-exec-blue); color: #fff; }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }

/* Insights hub pagination: appears once article count exceeds one
   featured plus six per page. */
.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.5rem 0 1rem; }
.page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem;
  padding: 0 0.5rem; border-radius: var(--radius); font-size: 0.88rem; font-weight: 600;
  color: var(--c-steel); text-decoration: none; border: 1px solid var(--c-border);
}
.page-link:hover { border-color: var(--c-exec-blue); color: var(--c-exec-blue); }
.page-link.is-current { background: var(--c-exec-blue); border-color: var(--c-exec-blue); color: #fff; }

/* Timeline (About page) */
.timeline-item { display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--c-border); }
.timeline-item:first-of-type { border-top: none; }
@media (max-width: 700px) { .timeline-item { grid-template-columns: 1fr; gap: 0.4rem; } }
.timeline-item .role-time { font-weight: 700; color: var(--c-exec-blue); font-size: 0.9rem; }

/* Footer */
.site-footer { background: var(--c-midnight); color: #C6D5E3; padding: 4rem 0 2rem; border-top: 3px solid var(--c-sand); }
.site-footer a { color: #C6D5E3; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(5, 1fr); gap: 1.75rem; margin-bottom: 3rem; }
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 1rem; }
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h5 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.6rem; font-size: 0.9rem; }
.footer-brand p { color: #9FB3C8; font-size: 0.9rem; max-width: 320px; }
.footer-newsletter { display: flex; gap: 0.5rem; margin-top: 1rem; }
.footer-newsletter input { flex: 1; padding: 0.65rem 0.85rem; border-radius: 4px; border: 1px solid #2C4A6B; background: #0F2A44; color: #fff; font-size: 0.85rem; }
.footer-brand .error-summary { background: rgba(211, 47, 47, 0.18); border: 1px solid rgba(252, 165, 165, 0.4); color: #FCA5A5; padding: 0.65rem 0.85rem; font-size: 0.82rem; border-radius: 4px; }
.footer-bottom { border-top: 1px solid #24405E; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.82rem; color: #8FA6BC; }
.footer-bottom ul { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; flex-wrap: wrap; }

/* 404 */
.error-page { text-align: center; padding: 6rem 0; }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Interactive components — Services page redesign
   ========================================================================== */

/* Graphic placeholder: marks a spot reserved for future photography or
   custom illustration once real imagery is supplied or commissioned. */
.graphic-placeholder {
  position: relative; border: 1.5px dashed var(--c-border-strong); border-radius: 8px;
  background: var(--c-cloud); min-height: 220px; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 2rem;
}
.graphic-placeholder-label { color: var(--c-steel); font-size: 0.85rem; font-weight: 600; max-width: 260px; line-height: 1.5; }
.graphic-placeholder-label::before {
  content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 0.75rem;
  border-radius: 50%; border: 1.5px dashed var(--c-border-strong);
}
.bg-midnight .graphic-placeholder { background: rgba(255,255,255,0.04); border-color: #2C4A6B; }
.bg-midnight .graphic-placeholder-label { color: #9FB3C8; }
.bg-midnight .graphic-placeholder-label::before { border-color: #3E5B7A; }
.graphic-placeholder.tall { min-height: 340px; }
.graphic-placeholder.wide { min-height: 180px; }

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* Animated stat counters */
.stat-counter-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 800px) { .stat-counter-row { grid-template-columns: 1fr; } }
.stat-counter-item .stat-counter { font-family: var(--font-serif); font-weight: 700; font-size: var(--step-4); color: var(--c-midnight); display: block; line-height: 1; }
.bg-midnight .stat-counter-item .stat-counter { color: #fff; }
.stat-counter-item .stat-counter-label { display: block; margin-top: 0.6rem; color: var(--c-steel); font-size: 0.92rem; }
.bg-midnight .stat-counter-item .stat-counter-label { color: var(--c-border-strong); }
.stat-counter-item .stat-counter-source { display: block; margin-top: 0.3rem; color: var(--c-border-strong); font-size: 0.76rem; }
.bg-midnight .stat-counter-item .stat-counter-source { color: #6C89A3; }

/* Generic switcher engine: powers tabs, compare-toggle, and the quadrant diagram */
[data-switch-panel] { display: none; }
[data-switch-panel].is-active { display: block; }

/* Tabs */
.tabs-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--c-border); }
.tabs-btn {
  background: none; border: none; border-bottom: 2px solid transparent; padding: 0.85rem 0.1rem;
  font-weight: 700; font-size: 0.95rem; color: var(--c-steel); cursor: pointer; transition: color var(--transition), border-color var(--transition);
}
.tabs-btn:hover { color: var(--c-exec-blue); }
.tabs-btn.is-active { color: var(--c-midnight); border-bottom-color: var(--c-exec-blue); }

/* Without / with compare toggle */
.compare-toggle-switch { display: inline-flex; background: var(--c-cloud); border: 1px solid var(--c-border); border-radius: 30px; padding: 0.3rem; margin-bottom: 2rem; flex-wrap: wrap; }
.compare-toggle-switch button {
  background: none; border: none; border-radius: 24px; padding: 0.6rem 1.25rem; font-weight: 600; font-size: 0.88rem;
  color: var(--c-steel); cursor: pointer; transition: background var(--transition), color var(--transition);
}
.compare-toggle-switch button.is-active { background: var(--c-midnight); color: #fff; }

/* Quadrant diagram (click-to-inspect) */
.quad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 700px) { .quad-grid { grid-template-columns: 1fr; } }
.quad-btn {
  display: block; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--c-border);
  border-radius: 6px; padding: 1.25rem 1.5rem; cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.quad-btn:hover { border-color: var(--c-border-strong); }
.quad-btn.is-active { border-color: var(--c-exec-blue); background: var(--c-pale-blue); }
.quad-btn .quad-num { font-family: var(--font-serif); font-weight: 700; color: var(--c-exec-blue); font-size: 0.85rem; display: block; margin-bottom: 0.3rem; }
.quad-btn h4 { margin-bottom: 0.2em; }
.quad-btn p { margin-bottom: 0; font-size: 0.85rem; color: var(--c-steel); }
.quad-detail { border: 1px solid var(--c-border); border-radius: 6px; padding: 1.75rem; margin-top: 1.5rem; background: var(--c-cloud); }

/* Hover / click flip cards */
.flip-card { perspective: 1400px; height: 280px; }
.flip-card-inner {
  position: relative; width: 100%; height: 100%; transition: transform 550ms cubic-bezier(0.4,0.2,0.2,1);
  transform-style: preserve-3d; cursor: pointer;
}
.flip-card:hover .flip-card-inner, .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 6px; border: 1px solid var(--c-border);
  padding: 1.75rem; display: flex; flex-direction: column; justify-content: center;
}
.flip-card-front { background: #fff; }
.flip-card-back { background: var(--c-midnight); color: #fff; transform: rotateY(180deg); }
.flip-card-back h4 { color: #fff; }
.flip-card-back p { color: var(--c-border-strong); margin-bottom: 0; font-size: 0.92rem; }
.flip-card-hint { font-size: 0.76rem; color: var(--c-border-strong); margin-top: 1rem; display: block; }

/* Scroll-progress stepper (vertical timeline synced to scroll position) */
.scroll-stepper { position: relative; padding-left: 2.75rem; }
.stepper-rail { position: absolute; left: 10px; top: 6px; bottom: 6px; width: 2px; background: var(--c-border-strong); }
.bg-midnight .stepper-rail { background: #2C4A6B; }
.stepper-rail-fill { position: absolute; left: 0; top: 0; width: 100%; background: var(--c-exec-blue); height: 0%; transition: height 120ms linear; }
.stepper-step { position: relative; padding-bottom: 3rem; opacity: 0.45; transition: opacity 300ms ease; }
.stepper-step:last-child { padding-bottom: 0; }
.stepper-step.is-active { opacity: 1; }
.stepper-step::before {
  content: ""; position: absolute; left: -2.75rem; top: 0.15rem; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c-border-strong); transition: border-color 300ms ease, background 300ms ease; box-sizing: border-box;
}
.bg-midnight .stepper-step::before { background: var(--c-midnight); border-color: #3E5B7A; }
.stepper-step.is-active::before { border-color: var(--c-exec-blue); background: var(--c-exec-blue); }
.stepper-step .step-day { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-exec-blue); }
.bg-midnight .stepper-step .step-day { color: var(--c-sand); }

/* Meeting cost calculator */
.calc-widget { border: 1px solid var(--c-border); border-radius: 8px; padding: clamp(1.5rem, 3vw, 2.5rem); background: #fff; }
.calc-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
@media (max-width: 700px) { .calc-inputs { grid-template-columns: 1fr; } }
.calc-field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.5rem; color: var(--c-midnight); }
.calc-field .calc-range-value { font-family: var(--font-serif); font-weight: 700; color: var(--c-exec-blue); float: right; }
.calc-field input[type="range"] { width: 100%; accent-color: var(--c-exec-blue); }
.calc-output { border-top: 1px solid var(--c-border); padding-top: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 700px) { .calc-output { grid-template-columns: 1fr; } }
.calc-output .num { font-family: var(--font-serif); font-weight: 700; font-size: var(--step-3); color: var(--c-midnight); display: block; }
.calc-output .label { color: var(--c-steel); font-size: 0.88rem; }
.calc-note { font-size: 0.78rem; color: var(--c-steel); margin-top: 1.25rem; margin-bottom: 0; }

/* Range proof band: before/after figures with a minimal accent line,
   used where a single number is not enough context (see range_proof_band()). */
.range-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 900px) { .range-proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .range-proof-grid { grid-template-columns: 1fr; } }
.range-proof-figures { font-family: var(--font-serif); font-weight: 700; font-size: var(--step-2); color: #fff; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; line-height: 1.15; }
.range-proof-arrow { color: var(--c-sand); font-size: 0.8em; font-weight: 400; }
.range-proof-accent { width: 42px; height: 3px; background: var(--c-sand); border-radius: 2px; margin: 0.9rem 0 0.9rem; }
.range-proof-label { color: var(--c-border-strong); font-size: 0.88rem; margin-bottom: 0; }

/* Six-node operating-system diagram (system_diagram()): flat SVG lines and
   circles with HTML label overlays so long labels wrap cleanly. */
.system-diagram { position: relative; max-width: 620px; margin: 0 auto; }
.system-diagram-svg { width: 100%; height: auto; display: block; }
.system-diagram-label {
  position: absolute; transform: translate(-50%, -50%); text-align: center;
  font-size: 0.72rem; font-weight: 600; color: var(--c-midnight); max-width: 108px; line-height: 1.25; pointer-events: none;
}
.system-diagram-center { color: #fff; font-size: 0.76rem; font-weight: 700; max-width: 92px; }
@media (max-width: 640px) {
  .system-diagram-label { font-size: 0.6rem; max-width: 82px; }
  .system-diagram-center { font-size: 0.64rem; max-width: 70px; }
}

/* Examine panel (examine_panel()): a vertical row list paired with a single
   detail panel that swaps on hover (desktop, via data-hover-switch on the
   generic switcher engine) or tap (touch, via the switcher's click
   fallback). A warmer, less flat alternative to a plain card grid. */
.examine-panel { display: grid; grid-template-columns: minmax(230px, 320px) 1fr; border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
@media (max-width: 800px) { .examine-panel { grid-template-columns: 1fr; } }
.examine-rows { display: flex; flex-direction: column; background: var(--c-cloud); border-right: 1px solid var(--c-border); }
@media (max-width: 800px) { .examine-rows { border-right: none; border-bottom: 1px solid var(--c-border); } }
.examine-row {
  display: flex; align-items: center; gap: 0.9rem; text-align: left; width: 100%;
  background: none; border: none; border-left: 3px solid transparent; border-bottom: 1px solid var(--c-border);
  padding: 1.05rem 1.25rem; cursor: pointer; transition: background var(--transition), border-color var(--transition);
}
.examine-row:last-child { border-bottom: none; }
.examine-row:hover, .examine-row.is-active { background: #fff; border-left-color: var(--c-exec-blue); }
.examine-row.is-active .examine-num { background: linear-gradient(135deg, var(--c-exec-blue), var(--c-midnight)); color: #fff; }
.examine-row h4 { margin-bottom: 0; font-size: 0.96rem; transition: color var(--transition); }
.examine-row.is-active h4 { color: var(--c-exec-blue); }
.examine-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 0.82rem; color: var(--c-exec-blue);
  background: var(--c-pale-blue); transition: background var(--transition), color var(--transition);
}
.examine-detail-panel {
  position: relative; padding: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(160deg, #fff 0%, var(--c-pale-blue) 145%); min-height: 260px;
}
/* display is set only on .is-active so it never fights the generic
   [data-switch-panel] { display: none } hide rule from initSwitchers(). */
.examine-detail-panel.is-active { display: flex; flex-direction: column; justify-content: center; }
.examine-detail-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--c-sand), var(--c-exec-blue)); }
.examine-detail-num { display: block; font-family: var(--font-serif); font-weight: 700; font-size: var(--step-1); color: var(--c-sand); margin-bottom: 0.4rem; }
.examine-detail-panel h3 { margin-bottom: 0.6rem; }
.examine-detail-panel p { color: var(--c-steel); margin-bottom: 0; font-size: 1.02rem; }
.examine-detail-panel ul.examine-detail-list { margin: 0.85rem 0 1.35rem; padding-left: 1.15rem; color: var(--c-steel); font-size: 1rem; }
.examine-detail-panel ul.examine-detail-list li { margin-bottom: 0.45rem; }
.examine-detail-panel ul.examine-detail-list li:last-child { margin-bottom: 0; }
.examine-detail-panel p.examine-detail-reframe { color: var(--c-midnight); font-weight: 600; margin-bottom: 1.1rem; }

/* Homepage operating-model graphic (operating_model_graphic()): one
   continuous SVG spine rather than four boxed cards, paired with a plain
   (borderless) 4-column text grid underneath for the fuller stage copy. */
.model-wrap { margin: 2.5rem auto 0; max-width: 1160px; }
.model-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.model-svg { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .model-svg { width: 820px; } }
.model-stages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.25rem; margin-top: 2.75rem; }
@media (max-width: 900px) { .model-stages-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } }
@media (max-width: 560px) { .model-stages-grid { grid-template-columns: 1fr; } }
.model-stage-num { display: block; font-family: var(--font-serif); font-weight: 700; color: var(--c-exec-blue); font-size: 0.85rem; margin-bottom: 0.4rem; }
.model-stages-grid h3 { margin-bottom: 0.5rem; font-size: 1.08rem; }
.model-stages-grid p { color: var(--c-steel); margin-bottom: 0; font-size: 0.94rem; }
.model-closing {
  margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid var(--c-border); max-width: 620px;
  text-align: center; font-family: var(--font-serif); font-style: italic; font-weight: 600;
  color: var(--c-midnight); font-size: var(--step-1);
}

/* Gear/cog line-art system (gear_icon(), service_model_graphic(),
   engagement_gears_graphic(), flexibility_paths_graphic()) -- Services
   overview rebuild. Same wrap/scroll/svg pattern as the other SVG
   diagrams (horizontal-scroll fallback on narrow screens). Gears spin
   very slowly and continuously; meshing gears alternate direction. */
.gear-wrap { margin: 2.5rem auto 0; max-width: 1160px; }
.gear-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gear-svg { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .gear-svg { width: 820px; } }
.gear-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; }
.gear-center-statement {
  margin: 1.75rem auto 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-weight: 600;
  color: var(--c-midnight); font-size: var(--step-1);
}
/* transform-origin on each gear group is set inline in absolute SVG
   user-space coordinates (matching cx/cy), so this intentionally leaves
   transform-box at its SVG default of view-box rather than fill-box --
   fill-box would reinterpret those coordinates as relative to each
   gear's own local bounding box and rotate it wildly off-origin. */
.gear-rotate-cw { animation: gearSpinCW 48s linear infinite; }
.gear-rotate-ccw { animation: gearSpinCCW 40s linear infinite; }
@keyframes gearSpinCW { to { transform: rotate(360deg); } }
@keyframes gearSpinCCW { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gear-rotate-cw, .gear-rotate-ccw { animation: none; }
}

/* Capabilities overview rebuild (expertise_puzzle_strip(),
   capability_puzzle_model(), capability_flow_diagram()) -- puzzle-piece
   visual language: individual capabilities read as pieces of one
   operating system rather than nine isolated cards. */
.puzzle-static-wrap { margin: 2.5rem auto 0; max-width: 760px; }
.puzzle-static-strip { display: flex; }
.puzzle-static-piece {
  position: relative; flex: 1; aspect-ratio: 1 / 1; max-width: 84px;
  background: var(--c-cloud); border: 1.5px solid var(--c-border-strong);
}
.puzzle-static-piece + .puzzle-static-piece { border-left: none; }
.puzzle-static-piece::before {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-cloud); border: 1.5px solid var(--c-border-strong);
}
.puzzle-static-piece:nth-child(even)::before { top: auto; bottom: -8px; }
.puzzle-static-caption { margin-top: 1.5rem; text-align: center; color: var(--c-steel); font-size: 0.88rem; letter-spacing: 0.01em; }

.puzzle-model-wrap { margin: 2.5rem auto 0; max-width: 1160px; }
.puzzle-model-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.puzzle-model-svg { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .puzzle-model-svg { width: 820px; } }

.puzzle-regions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; margin-top: 1.5rem; }
@media (max-width: 900px) { .puzzle-regions { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; } }
@media (max-width: 560px) { .puzzle-regions { grid-template-columns: 1fr; } }
.puzzle-region-head { display: block; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; font-weight: 700; color: var(--c-exec-blue); margin-bottom: 0.85rem; }
.puzzle-region-tiles { display: flex; flex-direction: column; gap: 0.6rem; }
.puzzle-piece {
  position: relative; display: block; text-decoration: none; color: var(--c-midnight);
  background: #fff; border: 1.5px solid var(--c-border); border-radius: 6px;
  padding: 0.65rem 0.9rem 0.65rem 1.1rem; font-size: 0.92rem; font-weight: 600;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.puzzle-piece-notch {
  position: absolute; top: 50%; left: -6px; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: #fff;
  border: 1.5px solid var(--c-border); border-right: none;
  transition: border-color var(--transition), background var(--transition);
}
.puzzle-piece:hover, .puzzle-piece.is-active { border-color: var(--c-exec-blue); background: var(--c-pale-blue); color: var(--c-exec-blue); }
.puzzle-piece:hover .puzzle-piece-notch, .puzzle-piece.is-active .puzzle-piece-notch { border-color: var(--c-exec-blue); background: var(--c-pale-blue); }
.puzzle-detail {
  grid-column: 1 / -1; margin-top: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border);
  min-height: 3.2em; display: flex; align-items: center; justify-content: center; text-align: center;
}
.puzzle-detail-text { display: none; color: var(--c-steel); font-size: 1rem; max-width: 640px; margin: 0; }
.puzzle-detail-text.is-active { display: block; }

.flow-diagram { max-width: 620px; margin: 2.75rem auto 0; text-align: center; }
.flow-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0.7rem 0; }
@media (max-width: 640px) { .flow-branches { grid-template-columns: 1fr; gap: 0.6rem; } }
.flow-branch { border-top: 2px solid var(--c-sand); padding-top: 0.7rem; }
.flow-branch p { margin: 0; font-family: var(--font-serif); font-weight: 600; color: var(--c-midnight); font-size: 0.98rem; }

/* Operating Performance Systems opening section (operating_signal_strip()):
   a restrained horizontal conceptual statement, not another diagram --
   one larger arrow-linked row (Visible -> Predictable -> Responsive), one
   smaller supporting arrow-linked row underneath. */
.signal-strip { max-width: 760px; margin: 2.75rem auto 0; text-align: center; }
.signal-strip-primary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.85rem; }
.signal-strip-primary span:not(.signal-strip-arrow) {
  font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  color: var(--c-midnight); letter-spacing: 0.01em;
}
.signal-strip-arrow { color: var(--c-sand); font-size: 1.15rem; }
.signal-strip-secondary {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.55rem;
  margin-top: 0.85rem;
}
.signal-strip-secondary span:not(.signal-strip-sub-arrow) { font-size: 0.86rem; color: var(--c-steel); }
.signal-strip-sub-arrow { color: var(--c-border-strong); font-size: 0.8rem; }

/* Operating experience cluster (operating_experience_cluster()): six
   capability words as soft overlapping circles rather than six boxes, for
   the homepage "What Lasting Progress Does" section's narrative_split()
   side column. mix-blend-mode:multiply makes the overlap between rows
   read as a gentle blend instead of a hard edge. */
.operating-experience-cluster { max-width: 340px; margin: 0 auto; text-align: center; }
.oe-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-sand); margin-bottom: 1.75rem; }
.oe-row { display: flex; justify-content: center; }
.oe-row-2 { margin-top: -40px; }
.oe-circle {
  width: 116px; height: 116px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 42, 68, 0.13); mix-blend-mode: multiply;
  margin: 0 -16px;
}
.oe-circle span { font-family: var(--font-sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em; color: var(--c-midnight); text-align: center; padding: 0 0.65rem; line-height: 1.25; }
.oe-caption { margin-top: 2.5rem; }
.oe-caption p { max-width: 280px; margin: 0.35rem auto 0; color: var(--c-steel); font-size: 0.92rem; line-height: 1.5; }
.oe-caption p:first-child { margin-top: 0; }
@media (max-width: 900px) { .oe-circle { width: 100px; height: 100px; margin: 0 -12px; } .oe-row-2 { margin-top: -34px; } .oe-circle span { font-size: 0.68rem; } }
@media (max-width: 560px) { .operating-experience-cluster { max-width: 300px; } .oe-circle { width: 90px; height: 90px; margin: 0 -10px; } .oe-row-2 { margin-top: -30px; } .oe-circle span { font-size: 0.63rem; } }

/* Engagement steps panel (engagement_steps_panel()): three expandable step
   cards with a mini week-range indicator. Hover expands on desktop
   (initStepCards mirrors initFlipCards); click/keyboard toggles
   .is-expanded for touch and accessibility. */
/* auto-fit (not a fixed repeat(3,...)) so a 4-phase timeline (e.g. the
   Transformation and Turnaround page) lays out as a clean single row
   instead of leaving an orphan card on its own line; 3-item pages are
   unaffected since the empty 4th track collapses and the three still
   split the row evenly. */
.step-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .step-cards { grid-template-columns: 1fr; } }
.step-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: 8px; padding: 1.5rem;
  cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition);
}
.step-card:hover, .step-card.is-expanded, .step-card:focus-visible { border-color: var(--c-exec-blue); box-shadow: var(--shadow-md); outline: none; }
.step-card-head { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1rem; }
.step-card-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 0.9rem; color: #fff;
  background: linear-gradient(135deg, var(--c-exec-blue), var(--c-midnight));
}
.step-card-week { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-exec-blue); margin-bottom: 0.15rem; }
.step-card-head h4 { margin-bottom: 0; }
.step-range-track { height: 4px; background: var(--c-border); border-radius: 2px; position: relative; margin-bottom: 1rem; overflow: hidden; }
.step-range-fill { position: absolute; top: 0; bottom: 0; background: var(--c-sand); border-radius: 2px; }
.step-card-teaser { color: var(--c-steel); margin-bottom: 0; font-size: 0.94rem; }
.step-card-detail-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms ease; }
.step-card.is-expanded .step-card-detail-wrap, .step-card:hover .step-card-detail-wrap, .step-card:focus-visible .step-card-detail-wrap { grid-template-rows: 1fr; }
.step-card-detail-wrap > div { overflow: hidden; min-height: 0; }
.step-card-detail { padding-top: 0.9rem; }
.step-card-detail ul { margin: 0; padding-left: 1.1rem; color: var(--c-steel); font-size: 0.9rem; }
.step-card-detail li { margin-bottom: 0.45rem; }
.step-card-detail li:last-child { margin-bottom: 0; }
.step-card-hint { display: block; margin-top: 0.9rem; font-size: 0.75rem; color: var(--c-border-strong); transition: color var(--transition); }
.step-card.is-expanded .step-card-hint, .step-card:hover .step-card-hint { color: var(--c-exec-blue); }

/* Diagnostic pairs (diagnostic_pairs()): question/signal paired rows
   replacing a bullet-list + bordered-card split. No cards, no borders —
   a thin rule and a small sand dot connecting each pair is the device. */
.diagnostic-pairs { max-width: 960px; margin: 0 auto; }
.diagnostic-pairs-labels { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1.22fr); gap: 1.5rem; margin-bottom: 1.25rem; }
.diagnostic-pairs-labels span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-steel); }
@media (max-width: 800px) { .diagnostic-pairs-labels { display: none; } }
.diagnostic-pair { border-top: 1px solid var(--c-border); padding: 2.1rem 0; }
.diagnostic-pair:first-of-type { border-top: none; padding-top: 0; }
.diagnostic-pair-row { display: grid; grid-template-columns: minmax(0,1fr) 32px minmax(0,1.22fr); gap: 1.5rem; align-items: center; }
@media (max-width: 800px) { .diagnostic-pair-row { grid-template-columns: 1fr; gap: 0; } }
.diagnostic-num { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 0.85rem; color: var(--c-sand); margin-bottom: 0.4rem; }
.diagnostic-question { font-weight: 700; color: var(--c-midnight); font-size: 1.08rem; line-height: 1.45; margin-bottom: 0; }
.diagnostic-connector { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 56px; }
.diagnostic-connector::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--c-border-strong); }
.diagnostic-connector::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-sand); position: relative; z-index: 1; }
@media (max-width: 800px) { .diagnostic-connector { display: none; } }
.diagnostic-signal { color: var(--c-steel); font-size: 1rem; line-height: 1.65; margin-bottom: 0; }
@media (max-width: 800px) {
  .diagnostic-signal { padding-top: 0.75rem; margin-top: 0.6rem; border-top: 1px dashed var(--c-border); }
}

/* Question chain (question_chain()): a single vertical, unanimated line of
   questions for the Organizational Assessment "A useful test" section --
   deliberately not a bullet list or a card grid. */
.question-chain { max-width: 620px; margin: 2.75rem auto 0; text-align: center; }
.question-chain-item { font-family: var(--font-serif); font-weight: 600; font-size: 1.28rem; color: var(--c-midnight); line-height: 1.5; margin: 0; }
.question-chain-arrow { color: var(--c-sand); font-size: 1.15rem; line-height: 1; margin: 0.7rem 0; }
.question-chain-closing { max-width: 620px; margin: 2.25rem auto 0; text-align: center; color: var(--c-steel); font-size: 1.02rem; line-height: 1.65; }

/* Process stage stack (process_stage_stack()): a full-width vertical stack
   of substantial, hairline-separated stages -- for a process explained in
   real paragraphs rather than a one-line-per-step chain or an animated
   step panel. */
.process-stage-stack { margin-top: 2.5rem; }
.process-stage { border-top: 1px solid var(--c-border); padding: 2.75rem 0; }
.process-stage:first-child { border-top: none; padding-top: 0; }
.process-stage-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.process-stage-num { font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--c-sand); flex: none; }
.process-stage-head h3 { margin: 0; max-width: 640px; }
.process-stage p { color: var(--c-steel); font-size: 1rem; line-height: 1.7; max-width: 700px; margin: 0 0 1rem; }
.process-stage p:last-of-type { margin-bottom: 0; }
.process-stage-question { font-family: var(--font-serif); font-style: italic; color: var(--c-midnight) !important; font-size: 1.05rem !important; max-width: 660px; }

/* Narrative split (narrative_split()): a wide editorial-copy column beside
   a narrower supporting column -- for a page that wants the prose to carry
   most of the width rather than an even two-up grid. Generic layout
   primitive, first used on the Transformation and Turnaround "When
   Something Is No Longer Working" revision. */
.narrative-split { display: grid; grid-template-columns: minmax(320px, 58%) 1fr; gap: 3.5rem; align-items: start; margin-top: 2.5rem; }
.narrative-split-copy p { max-width: 620px; }
@media (max-width: 800px) { .narrative-split { grid-template-columns: 1fr; gap: 2.25rem; } }

/* Diagnostic sequence (diagnostic_sequence()): a vertical, unnumbered list
   of questions that reads as narrowing from a broad symptom question to a
   specific decision question -- indent and the left rule's color both
   step subtly from pale steel toward sand as the sequence descends. No
   cards, no numbers, no hover -- per the Transformation and Turnaround
   "A few questions worth asking" revision brief. */
.diagnostic-sequence-item { border-left: 2px solid var(--c-border); padding: 1rem 0 1rem 1.5rem; }
.diagnostic-sequence-item:not(:first-child) { margin-top: 0.15rem; }
.diagnostic-sequence-item p { font-family: var(--font-serif); font-weight: 600; color: var(--c-midnight); font-size: 1.05rem; line-height: 1.5; margin: 0; }

/* Recovery stage chain (recovery_stage_chain()): the 90-day recovery
   sequence as one continuous, unanimated vertical model -- a day-range
   tag, heading, plain action list, and a bolded outcome line per stage,
   joined by the same downward-arrow motif as question_chain(). Replaces a
   hover/tap step panel per the Transformation and Turnaround brief. */
.recovery-stage-chain { max-width: 760px; margin: 2.75rem auto 0; }
.recovery-stage-chain .question-chain-arrow { text-align: center; }
.recovery-stage { border-top: 1px solid var(--c-border); padding: 2.5rem 0; }
.recovery-stage:first-child { border-top: none; padding-top: 0; }
.recovery-stage-tag { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-exec-blue); margin-bottom: 0.6rem; }
.recovery-stage h3 { margin-bottom: 0.9rem; }
.recovery-stage-outcome { margin-top: 1.1rem; color: var(--c-midnight); font-size: 0.98rem; line-height: 1.6; }

/* Leave-with panel (leave_with_panel()): a static numbered deliverables
   manifest (no scroll-reveal) paired with a "What to Expect" pull-quote
   panel, replacing a flat two-column bullet list and plain paragraph. */
.leave-with-list { max-width: 760px; }
.leave-with-row { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.35rem 0; border-top: 1px solid var(--c-border); }
.leave-with-row:first-child { border-top: none; padding-top: 0; }
.leave-with-num { flex: none; width: 28px; padding-top: 0.15rem; font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; color: var(--c-sand); }
.leave-with-copy { flex: 1; min-width: 0; }
.leave-with-statement { font-weight: 700; color: var(--c-midnight); font-size: 1.05rem; line-height: 1.45; margin-bottom: 0.3rem; }
.leave-with-caption { color: var(--c-steel); font-size: 0.88rem; margin-bottom: 0; }
.expect-panel {
  margin-top: 3rem; max-width: 820px; border-left: 3px solid var(--c-sand); border-radius: 0 8px 8px 0;
  background: linear-gradient(155deg, var(--c-cloud) 0%, var(--c-pale-blue) 130%);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.expect-panel .eyebrow { margin-bottom: 0.75rem; }
.expect-panel-quote { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.4; color: var(--c-midnight); margin-bottom: 0.9rem; letter-spacing: -0.01em; }
.expect-panel-body { color: var(--c-steel); font-size: 0.98rem; margin-bottom: 0; max-width: 640px; }

/* Shared dark-panel "chrome" for original vector graphics dropped into a
   service page in place of a photo (recovery_trend_graphic(),
   cycle_graphic(), and any future one) -- same card treatment everywhere
   for brand consistency, even though the diagram inside varies page to
   page on purpose (line chart, ring diagram, etc.) so the pages don't all
   feel identical. */
.graphic-panel {
  background: linear-gradient(160deg, #15334F 0%, #0F2A44 55%, #0A1F33 100%);
  border-radius: 10px; padding: clamp(2rem, 4vw, 3rem); color: #fff;
}
.graphic-panel-head { max-width: 640px; }
.graphic-panel .eyebrow { color: var(--c-sand); }
.graphic-panel-note { color: var(--c-border-strong); font-size: 0.95rem; margin: 0.5rem 0 0; }

/* Illustrative recovery trend graphic (recovery_trend_graphic()): original
   vector line chart, not a photo. */
.trend-graphic-svg { width: 100%; height: auto; display: block; margin-top: 2rem; }
.trend-graphic-daylabel { fill: var(--c-border-strong); font-size: 15px; font-family: var(--font-sans); }
.trend-graphic-stages {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem;
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.12);
}
.trend-graphic-stages span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-border-strong);
}
.trend-graphic-stages span i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-sand); display: inline-block; }


/* Page-scoped spacing rhythm: tightens vertical whitespace between sections
   without changing the global section padding used site-wide. Applied via a
   wrapper class on individual pages per their own revision brief. */
.rhythm-cozy section:not(.hero) { padding: clamp(2.5rem, 5vw, 4.75rem) 0; }

/* Pull quote (Executive Advisory) */
.pull-quote { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.4; color: var(--c-midnight); max-width: 780px; letter-spacing: -0.01em; }
.pull-quote cite { display: block; font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 0.85rem; color: var(--c-steel); margin-top: 1.25rem; }

/* Strategy Into Execution flow (strategy_flow()): one continuous
   horizontal process -- not six cards -- for the Strategic Planning page.
   Each stage is an equal-width flex item; fixed-width connector strips
   sit between them as ordinary siblings (not absolutely positioned), so
   getting the connecting line to meet the dot is just a shared top
   margin, not cross-element position math. h3 gets a fixed min-height so
   dots line up regardless of how many lines a stage name wraps to. */
.strategy-flow { margin-top: 2.75rem; }
.strategy-flow-stages { display: flex; align-items: flex-start; }
.strategy-flow-stage { flex: 1 1 0; min-width: 0; text-align: center; padding: 0 0.5rem; }
.strategy-flow-stage h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--c-midnight);
  letter-spacing: -0.01em; margin: 0 0 0.9rem; min-height: 3rem; display: flex; align-items: flex-end; justify-content: center;
}
.strategy-flow-dot {
  display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--c-sand);
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c-border-strong); margin: 0 auto 0.9rem;
}
.strategy-flow-stage p { color: var(--c-steel); font-size: 0.82rem; line-height: 1.45; margin: 0; }
.strategy-flow-connector { flex: 0 0 32px; height: 2px; margin-top: calc(3rem + 0.9rem + 4px); }
@media (max-width: 900px) {
  .strategy-flow-stages { flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .strategy-flow-connector { display: none; }
  .strategy-flow-stage { text-align: left; padding: 1.5rem 0 0; border-top: 1px dashed var(--c-border); }
  .strategy-flow-stage:first-child { padding-top: 0; border-top: none; }
  .strategy-flow-stage h3 { min-height: 0; justify-content: flex-start; margin-bottom: 0.6rem; }
  .strategy-flow-dot { margin: 0 0 0.6rem; }
}

/* Planning-cycle ring graphic (planning_cycle_graphic()): a closed circle,
   not a hub-and-spoke or arrowed "process diagram" -- reads as an
   operating architecture. Light-background treatment (sits directly on
   the section, no dark card) per the "restrained navy/slate, generous
   spacing" brief. Desktop is the SVG ring; mobile swaps to a vertical
   sequence with its own connecting line (see below) since a 5-point ring
   has no legible small-screen equivalent. */
.plan-cycle-wrap { position: relative; width: 100%; max-width: 860px; margin: 3.5rem auto 0; aspect-ratio: 1 / 1; }
.plan-cycle-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-cycle-label { position: absolute; transform: translate(-50%, -50%); width: 150px; text-align: center; }
.plan-cycle-label h3 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--c-midnight); letter-spacing: -0.01em; margin: 0 0 0.35rem; }
.plan-cycle-label p { color: var(--c-steel); font-size: 0.82rem; line-height: 1.45; margin: 0; }
.plan-cycle-label-active h3 { color: var(--c-exec-blue); }
.plan-cycle-callout {
  display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-exec-blue); border: 1px solid var(--c-sand); border-radius: 999px; padding: 0.2rem 0.65rem; margin-bottom: 0.5rem;
}
.plan-cycle-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 220px; }
.plan-cycle-center span {
  display: block; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--c-midnight); letter-spacing: -0.01em; position: relative; padding-top: 1.2rem;
}
.plan-cycle-center span::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34px; height: 2px; background: var(--c-sand);
}
.plan-cycle-mobile { display: none; }
@media (max-width: 760px) {
  .plan-cycle-wrap { display: none; }
  .plan-cycle-mobile { display: block; position: relative; margin-top: 2.75rem; padding-left: 2rem; }
  .plan-cycle-mobile::before {
    content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
    background: linear-gradient(180deg, var(--c-border-strong), var(--c-sand));
  }
  .plan-cycle-mobile-row { position: relative; padding-bottom: 2rem; }
  .plan-cycle-mobile-row:last-child { padding-bottom: 0; }
  .plan-cycle-mobile-dot {
    position: absolute; left: -2rem; top: 0.35rem; width: 12px; height: 12px; border-radius: 50%;
    background: #0F2A44; border: 2px solid #DCC6A6;
  }
  .plan-cycle-mobile-row.is-active .plan-cycle-mobile-dot { background: #DCC6A6; border-color: #0F2A44; }
  .plan-cycle-mobile-row h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; color: var(--c-midnight); margin: 0 0 0.3rem; }
  .plan-cycle-mobile-row p { color: var(--c-steel); font-size: 0.88rem; margin: 0; }
  .plan-cycle-mobile-row .plan-cycle-callout { margin-bottom: 0.4rem; }
}

/* Two-column editorial with a thin divider instead of cards (session /
   after-session on Strategic Planning). */
.session-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; margin-top: 3.5rem; }
.session-columns > div:last-child { border-left: 1px solid var(--c-border); padding-left: 3.5rem; }
.session-columns h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; color: var(--c-midnight); margin: 0 0 0.9rem; }
.session-columns p { color: var(--c-steel); }
@media (max-width: 800px) {
  .session-columns { grid-template-columns: 1fr; gap: 2.5rem; }
  .session-columns > div:last-child { border-left: none; padding-left: 0; border-top: 1px solid var(--c-border); padding-top: 2rem; }
}

/* Minimal dot list -- lighter-weight than a bulleted <ul>, used where a
   page wants a short list without card or bullet-glyph styling. */
.minimal-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.minimal-list li { position: relative; padding: 0.45rem 0 0.45rem 1.25rem; color: var(--c-steel); font-size: 0.95rem; line-height: 1.5; }
.minimal-list li::before {
  content: ""; position: absolute; left: 0; top: 0.85rem; width: 6px; height: 6px; border-radius: 50%; background: var(--c-sand);
}

/* Engagement progression (engagement_progression()): a single horizontal
   flow of numbered stages -- used on Interim Executive Leadership in place
   of the tabs/comparison-card "Not the Same Thing" section. The connector
   between stages gets visibly heavier left to right (see inline gradient +
   height ramp below) to suggest increasing operating structure toward a
   deliberate handoff. One stage (.is-emphasis) is rendered larger and in
   the accent blue since it is the conceptual center of the offer. */
.engage-flow-stages { display: flex; align-items: flex-start; margin-top: 3rem; }
.engage-flow-stage { flex: 1 1 0; min-width: 0; padding: 0 1.5rem; }
.engage-flow-stage:first-child { padding-left: 0; }
.engage-flow-stage:last-child { padding-right: 0; }
.engage-flow-num {
  display: block; font-family: var(--font-serif); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.08em; color: var(--c-sand); margin-bottom: 0.6rem;
}
.engage-flow-stage h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; color: var(--c-midnight); letter-spacing: -0.01em; margin: 0 0 0.75rem; }
.engage-flow-lead { font-weight: 700; color: var(--c-midnight); font-size: 0.92rem; line-height: 1.4; margin: 0 0 0.6rem; }
.engage-flow-body { color: var(--c-steel); font-size: 0.85rem; line-height: 1.55; margin: 0 0 0.75rem; }
.engage-flow-close { color: var(--c-steel); font-size: 0.8rem; font-style: italic; line-height: 1.5; margin: 0; }
.engage-flow-stage.is-emphasis { flex: 1.3 1 0; }
.engage-flow-stage.is-emphasis .engage-flow-num { color: var(--c-exec-blue); font-size: 0.92rem; }
.engage-flow-stage.is-emphasis h3 { font-size: 1.5rem; }
.engage-flow-stage.is-emphasis .engage-flow-lead { font-size: 1rem; color: var(--c-exec-blue); }
.engage-flow-connector { flex: 0 0 36px; margin-top: 2.15rem; border-radius: 2px; align-self: flex-start; }
.engage-flow-connector-1 { height: 2px; }
.engage-flow-connector-2 { height: 3px; }
.engage-flow-connector-3 { height: 4px; }
.engage-flow-connector-4 { height: 5px; }
@media (max-width: 900px) {
  .engage-flow-stages { flex-direction: column; align-items: stretch; gap: 2.25rem; }
  .engage-flow-connector { display: none; }
  .engage-flow-stage { padding: 1.75rem 0 0; border-top: 1px dashed var(--c-border); }
  .engage-flow-stage:first-child { padding-top: 0; border-top: none; }
  .engage-flow-stage.is-emphasis { flex: 1 1 0; }
}

/* Thin "what to expect" band (expect_strip()): plain-text items divided by
   hairline rules, not boxed cards -- sits directly beneath engage-flow. */
.expect-strip-label {
  font-family: var(--font-serif); font-weight: 600; font-size: 1rem; color: var(--c-midnight);
  margin: 3.5rem 0 1.25rem;
}
.expect-strip { display: flex; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.expect-strip-item { flex: 1 1 0; min-width: 0; padding: 1.4rem 1.5rem; border-left: 1px solid var(--c-border); }
.expect-strip-item:first-child { border-left: none; padding-left: 0; }
.expect-strip-item:last-child { padding-right: 0; }
.expect-strip-item h4 { font-family: var(--font-sans); font-weight: 700; font-size: 0.88rem; color: var(--c-midnight); margin: 0 0 0.4rem; }
.expect-strip-item p { color: var(--c-steel); font-size: 0.8rem; line-height: 1.45; margin: 0; }
@media (max-width: 900px) {
  .expect-strip { flex-direction: column; border-bottom: none; }
  .expect-strip-item { border-left: none; border-top: 1px solid var(--c-border); padding: 1.25rem 0; }
  .expect-strip-item:first-child { border-top: none; padding-top: 0; }
}

/* Editorial "when it fits" layout (fits_editorial()): a large statement on
   the left and stacked, rule-separated scenarios on the right -- executive
   search / advisory-firm tone, deliberately not a card grid. */
.fits-editorial { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 3.5rem; margin-top: 3rem; align-items: start; }
.fits-editorial-statement {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.7rem, 2.9vw, 2.3rem);
  line-height: 1.22; color: var(--c-midnight); letter-spacing: -0.01em;
}
.fits-editorial-item { padding: 2rem 0; border-top: 1px solid var(--c-border); }
.fits-editorial-item:first-child { border-top: none; padding-top: 0; }
.fits-editorial-num { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--c-sand); margin-bottom: 0.5rem; }
.fits-editorial-item h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; color: var(--c-midnight); margin: 0 0 0.6rem; }
.fits-editorial-item p { color: var(--c-steel); font-size: 0.95rem; line-height: 1.6; margin: 0; max-width: 620px; }
.fits-editorial-close {
  margin-top: 2.5rem; padding-top: 2.25rem; border-top: 1px solid var(--c-border);
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--c-midnight); max-width: 820px; line-height: 1.5;
}
.fits-editorial-sequence {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem;
  margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--c-border);
}
.fits-editorial-sequence span { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-steel); }
.fits-editorial-sequence .fits-arrow { color: var(--c-sand); font-weight: 400; font-size: 0.85rem; text-transform: none; letter-spacing: 0; }
@media (max-width: 860px) {
  .fits-editorial { grid-template-columns: 1fr; gap: 2rem; }
}

/* Advisory situations editorial (situations_editorial()): narrow headline
   column beside a wider stack of hairline-separated situations, each
   number set beside its heading rather than above it. Used on Executive
   Advisory in place of the two-column questions/signals list. */
.advisory-editorial { display: grid; grid-template-columns: minmax(240px, 35%) 1fr; gap: 4rem; align-items: start; }
.advisory-editorial-left h2 { max-width: 420px; }
.advisory-editorial-left .lede { margin-top: 1rem; }
.advisory-editorial-left p + p { margin-top: 1rem; }
.advisory-editorial-tag { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.05rem; color: var(--c-steel); margin: 0 0 1.5rem; }
.advisory-editorial-subhead { font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; color: var(--c-midnight); margin: 0 0 1.25rem; }
.advisory-editorial-item { padding: 1.85rem 0; border-top: 1px solid var(--c-border); }
.advisory-editorial-item:first-child { border-top: none; padding-top: 0; }
.advisory-editorial-item-head { display: flex; align-items: baseline; gap: 0.85rem; margin-bottom: 0.6rem; }
.advisory-editorial-num { font-family: var(--font-serif); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--c-sand); flex: none; }
.advisory-editorial-item h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; color: var(--c-midnight); margin: 0; }
.advisory-editorial-item p { color: var(--c-steel); font-size: 0.95rem; line-height: 1.6; margin: 0; max-width: 640px; }
.advisory-editorial-close {
  margin-top: 2.5rem; padding-top: 2.25rem; border-top: 1px solid var(--c-border);
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--c-midnight); line-height: 1.5; max-width: 720px;
}
@media (max-width: 900px) {
  .advisory-editorial { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* Relationship columns (relationship_columns()): evenly spaced vertical
   columns separated by hairline rules -- deliberately not cards, no
   hover/tap interaction -- for a service meant to feel like a senior,
   ongoing relationship rather than a packaged, structured offering. */
.relwork-cols { display: flex; margin-top: 3rem; }
.relwork-col { flex: 1 1 0; min-width: 0; padding: 0 2rem; border-left: 1px solid var(--c-border); }
.relwork-col:first-child { border-left: none; padding-left: 0; }
.relwork-col:last-child { padding-right: 0; }
.relwork-cat {
  display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--c-exec-blue);
  margin-bottom: 1.1rem; padding-bottom: 0.85rem; position: relative;
}
.relwork-cat::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--c-sand); }
.relwork-col .relwork-lead { font-weight: 700; color: var(--c-midnight); font-size: 1.02rem; line-height: 1.45; margin: 0 0 0.85rem; }
.relwork-col .relwork-body { color: var(--c-steel); font-size: 0.87rem; line-height: 1.6; margin: 0; }
.relwork-closing { margin-top: 3rem; padding-top: 2.25rem; border-top: 1px solid var(--c-border); max-width: 820px; }
@media (max-width: 900px) {
  .relwork-cols { flex-direction: column; gap: 2.25rem; }
  .relwork-col { border-left: none; padding: 1.75rem 0 0; border-top: 1px solid var(--c-border); }
  .relwork-col:first-child { padding-top: 0; border-top: none; }
}

/* Execution chain (execution_chain()): a horizontal sequence like
   strategy_flow(), but with a bold lead statement plus a supporting line
   per stage rather than a single one-liner -- used where a page's
   organizing metaphor is priorities linking into an executable system. */
.exec-chain-stages { display: flex; align-items: flex-start; margin-top: 2.5rem; }
.exec-chain-stage { flex: 1 1 0; min-width: 0; padding: 0 1rem; }
.exec-chain-stage:first-child { padding-left: 0; }
.exec-chain-stage:last-child { padding-right: 0; }
.exec-chain-num { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--c-sand); margin-bottom: 0.5rem; }
.exec-chain-stage h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.08rem; color: var(--c-midnight); margin: 0 0 0.65rem; }
.exec-chain-lead { font-weight: 700; color: var(--c-midnight); font-size: 0.86rem; line-height: 1.42; margin: 0 0 0.5rem; }
.exec-chain-body { color: var(--c-steel); font-size: 0.8rem; line-height: 1.55; margin: 0; }
.exec-chain-connector { flex: 0 0 24px; height: 2px; margin-top: 2.35rem; align-self: flex-start; }
@media (max-width: 960px) {
  .exec-chain-stages { flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .exec-chain-connector { display: none; }
  .exec-chain-stage { padding: 1.5rem 0 0; border-top: 1px dashed var(--c-border); }
  .exec-chain-stage:first-child { padding-top: 0; border-top: none; }
}

/* Execution intersections graphic (execution_intersections_graphic()): a
   single horizontal SVG path with friction motifs crossing the four
   middle points, resolving into one clean line by the last point.
   Architectural and understated -- no icons, no boxes, no hover. Scrolls
   horizontally at a fixed legible width on narrow viewports rather than
   shrinking the labels into illegibility. */
.exec-intersect-wrap { margin: 3rem auto 0; max-width: 1100px; }
.exec-intersect-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.exec-intersect-svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  .exec-intersect-svg { width: 760px; }
}

/* Performance architecture graphic (performance_architecture_graphic()): a
   wide connected value-stream diagram -- an outcome anchor, a seven-stage
   chain, enterprise outcomes above, sparse measures below, an owner
   marker under every stage. Same horizontal-scroll-on-mobile treatment as
   .exec-intersect-*, at a wider fixed width since it carries more stages
   and two additional label rows. */
.perf-arch-wrap { margin: 3rem auto 0; max-width: 1160px; }
.perf-arch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.perf-arch-svg { width: 100%; height: auto; display: block; }
.perf-arch-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; }
@media (max-width: 760px) {
  .perf-arch-svg { width: 980px; }
}

/* Economics visibility graphic (economics_visibility_graphic()): a result
   row (Revenue, Margin, Cash) above a seven-stage operating chain that
   reveals one stage at a time. Same horizontal-scroll-on-mobile treatment
   as .perf-arch-* since it carries a long stage label ("Labor /
   Materials") across seven points. */
.econ-visibility-wrap { margin: 3rem auto 0; max-width: 1160px; }
.econ-visibility-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.econ-visibility-svg { width: 100%; height: auto; display: block; }
.econ-visibility-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; }
@media (max-width: 760px) {
  .econ-visibility-svg { width: 980px; }
}

/* System fragmentation graphic (system_fragmentation_graphic()): a radial
   diagram, center system with eight surrounding activities revealed one
   at a time. All labels are embedded SVG <text> that scale with the
   viewBox, so -- like .org-network-svg -- it needs no separate mobile
   width override. The legend and caption sit below as plain HTML. */
.fragment-wrap { margin: 3rem auto 0; max-width: 720px; }
.fragment-svg { width: 100%; height: auto; display: block; }
.fragment-legend { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 1rem; font-size: 0.82rem; color: var(--c-steel); }
.fragment-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.fragment-swatch { display: inline-block; width: 20px; height: 0; border-top: 2px solid var(--c-steel); }
.fragment-swatch-core { border-top: 2.5px solid var(--c-midnight); }
.fragment-swatch-connected { border-top: 2px dashed var(--c-steel); }
.fragment-swatch-outside { border-top: 1.5px dotted var(--c-steel); opacity: 0.6; }
.fragment-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; text-align: center; margin-left: auto; margin-right: auto; }

/* Practice questions (practice_questions()): large uppercase questions in
   evenly spaced columns separated by hairline rules -- not cards -- each
   resolving to a short sand-accented outcome word. Reuses
   .fits-editorial-sequence for the bottom arrow-linked strip. */
.practice-q-cols { display: flex; margin-top: 3rem; }
.practice-q-col { flex: 1 1 0; min-width: 0; padding: 0 2rem; border-left: 1px solid var(--c-border); }
.practice-q-col:first-child { border-left: none; padding-left: 0; }
.practice-q-col:last-child { padding-right: 0; }
.practice-q-question {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  color: var(--c-midnight); letter-spacing: -0.005em; line-height: 1.28; text-transform: uppercase;
  margin: 0 0 1rem;
}
.practice-q-arrow { display: block; color: var(--c-sand); font-size: 1.05rem; line-height: 1; margin-bottom: 0.55rem; }
.practice-q-label { display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-exec-blue); margin-bottom: 1rem; }
.practice-q-body { color: var(--c-steel); font-size: 0.92rem; line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
  .practice-q-cols { flex-direction: column; gap: 2.25rem; }
  .practice-q-col { border-left: none; padding: 1.75rem 0 0; border-top: 1px solid var(--c-border); }
  .practice-q-col:first-child { padding-top: 0; border-top: none; }
}

/* Operating performance system diagram (operating_system_diagram()): a
   hub-and-spoke systems diagram -- four elements around a central
   "Performance" label, connected by spokes plus a diamond perimeter and
   one curved cross-connection -- not a cycle, not clickable cards. */
.perf-system-wrap { position: relative; width: 100%; max-width: 960px; margin: 3.5rem auto 0; aspect-ratio: 1 / 1; }
.perf-system-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.perf-system-label { position: absolute; transform: translate(-50%, -50%); width: 160px; text-align: center; }
.perf-system-label h3 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--c-midnight); letter-spacing: -0.005em; margin: 0 0 0.4rem; }
.perf-system-label .perf-system-q { font-style: italic; color: var(--c-exec-blue); font-size: 0.8rem; margin: 0 0 0.5rem; line-height: 1.4; }
.perf-system-label .perf-system-desc { color: var(--c-steel); font-size: 0.78rem; line-height: 1.5; margin: 0; }
.perf-system-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 180px; }
.perf-system-center span {
  display: block; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  color: var(--c-midnight); letter-spacing: -0.01em; position: relative; padding-top: 1.1rem;
}
.perf-system-center span::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 2px; background: var(--c-sand); }
.perf-system-mobile { display: none; }
@media (max-width: 820px) {
  .perf-system-wrap { display: none; }
  .perf-system-mobile { display: block; margin-top: 2.75rem; }
  .perf-system-mobile-row { padding: 1.75rem 0; border-top: 1px solid var(--c-border); }
  .perf-system-mobile-row:first-child { padding-top: 0; border-top: none; }
  .perf-system-mobile-row h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; color: var(--c-midnight); margin: 0 0 0.4rem; }
  .perf-system-mobile-row .perf-system-q { font-style: italic; color: var(--c-exec-blue); font-size: 0.85rem; margin: 0 0 0.5rem; }
  .perf-system-mobile-row .perf-system-desc { color: var(--c-steel); font-size: 0.88rem; margin: 0; }
}

/* -- Digital Operations rebuild: transition list, benefit grid, question
   grid, layered-architecture graphic -- */
.transition-list { margin-top: 3rem; }
.transition-item { padding: 1.85rem 0; border-top: 1px solid var(--c-border); }
.transition-item:first-child { border-top: none; padding-top: 0; }
.transition-fn { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; color: var(--c-midnight); margin: 0 0 0.9rem; letter-spacing: -0.005em; }
.transition-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.transition-tag { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-steel); margin-bottom: 0.4rem; }
.transition-tag-after { color: var(--c-exec-blue); }
.transition-before { color: var(--c-steel); font-size: 0.92rem; line-height: 1.6; margin: 0; }
.transition-after { color: var(--c-midnight); font-size: 0.92rem; line-height: 1.6; margin: 0; }
@media (max-width: 760px) {
  .transition-pair { grid-template-columns: 1fr; gap: 1.25rem; }
}

.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2.25rem; margin-top: 3rem; }
.benefit-item h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; color: var(--c-midnight); margin: 0 0 0.6rem; letter-spacing: -0.005em; }
.benefit-item p { color: var(--c-steel); font-size: 0.88rem; line-height: 1.6; margin: 0; }
.benefit-item:nth-child(n+4) { padding-top: 2.25rem; border-top: 1px solid var(--c-border); }
.benefit-grid-4 { grid-template-columns: repeat(4, 1fr); }
.benefit-grid-4 .benefit-item:nth-child(n+4) { padding-top: 0; border-top: none; }
.benefit-grid-4 .benefit-item:nth-child(n+5) { padding-top: 2.25rem; border-top: 1px solid var(--c-border); }
@media (max-width: 860px) {
  .benefit-grid, .benefit-grid-4 { grid-template-columns: 1fr; gap: 0; margin-top: 2.5rem; }
  .benefit-item { padding: 1.75rem 0 !important; border-top: 1px solid var(--c-border) !important; }
  .benefit-item:first-child { border-top: none !important; padding-top: 0 !important; }
}

.question-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2.75rem; border-top: 1px solid var(--c-border); }
.question-item { padding: 1.6rem 2.25rem; border-bottom: 1px solid var(--c-border); }
.question-item:nth-child(odd) { border-right: 1px solid var(--c-border); padding-left: 0; }
.question-item:nth-child(even) { padding-right: 0; }
.question-item p { font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; color: var(--c-midnight); margin: 0; line-height: 1.5; }
@media (max-width: 760px) {
  .question-grid { grid-template-columns: 1fr; }
  .question-item { border-right: none !important; padding: 1.5rem 0 !important; }
}
.question-grid-1 { grid-template-columns: 1fr; max-width: 720px; }
.question-grid-1 .question-item { border-right: none !important; padding-left: 0; padding-right: 0; }
.question-grid-1 .question-item p { font-size: 1.15rem; }

.stmt-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2.75rem; border-top: 1px solid var(--c-border); }
.stmt-item { padding: 1.3rem 1.75rem; border-bottom: 1px solid var(--c-border); }
.stmt-item:not(:nth-child(3n)) { border-right: 1px solid var(--c-border); }
.stmt-item p { font-family: var(--font-serif); font-weight: 500; font-size: 1rem; color: var(--c-midnight); margin: 0; line-height: 1.5; }
@media (max-width: 760px) {
  .stmt-grid { grid-template-columns: 1fr; }
  .stmt-item { border-right: none !important; padding: 1.25rem 0; }
}

.org-network-wrap { margin-top: 3rem; }
.org-network-svg { width: 100%; height: auto; display: block; }
.org-network-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; }

.growth-strip { display: flex; align-items: center; margin-top: 3rem; gap: 0.75rem; }
.growth-panel { flex: 1 1 0; min-width: 0; text-align: center; }
.growth-panel svg { width: 100%; max-width: 150px; height: auto; }
.growth-panel p { margin: 0.85rem 0 0; font-family: var(--font-sans); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-steel); }
.growth-arrow { color: var(--c-sand); font-size: 1.1rem; flex: 0 0 auto; }
@media (max-width: 760px) {
  .growth-strip { flex-direction: column; }
  .growth-arrow { transform: rotate(90deg); margin: 0.1rem 0; }
  .growth-panel svg { max-width: 120px; }
}

.layer-diagram { display: flex; align-items: center; gap: 3.5rem; margin-top: 3rem; }
.layer-rings { position: relative; width: 386px; height: 386px; flex: 0 0 386px; display: flex; align-items: center; justify-content: center; }
.layer-ring { border-radius: 50%; border: 1px solid var(--c-border-strong); display: flex; align-items: center; justify-content: center; }
.layer-ring-1 { width: 154px; height: 154px; }
.layer-ring-2 { width: 212px; height: 212px; border-color: var(--c-border); }
.layer-ring-3 { width: 270px; height: 270px; border-color: var(--c-border); }
.layer-ring-4 { width: 328px; height: 328px; border-color: var(--c-border); }
.layer-ring-5 { width: 386px; height: 386px; border: 1px dashed var(--c-sand); }
.layer-core { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--c-midnight); color: #fff; font-family: var(--font-serif); font-weight: 600; font-size: 0.66rem; line-height: 1.3; text-align: center; padding: 0.35rem; overflow: hidden; word-break: break-word; }
.layer-legend { flex: 1 1 0; min-width: 0; display: grid; gap: 1.35rem; }
.layer-legend-item { display: flex; gap: 0.9rem; align-items: flex-start; }
.layer-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; margin-top: 0.4rem; background: var(--c-midnight); }
.layer-dot-1 { background: var(--c-exec-blue); }
.layer-dot-2 { background: var(--c-exec-blue); opacity: 0.75; }
.layer-dot-3 { background: var(--c-steel); }
.layer-dot-4 { background: var(--c-steel); opacity: 0.75; }
.layer-dot-5 { background: var(--c-sand); border: 1px solid var(--c-midnight); }
.layer-legend-item h4 { font-family: var(--font-serif); font-weight: 600; font-size: 1rem; color: var(--c-midnight); margin: 0 0 0.3rem; }
.layer-legend-item p { color: var(--c-steel); font-size: 0.85rem; line-height: 1.55; margin: 0; }
@media (max-width: 860px) {
  .layer-diagram { flex-direction: column; gap: 2.25rem; }
  .layer-rings { width: 280px; height: 280px; flex-basis: 280px; }
  .layer-ring-1 { width: 112px; height: 112px; }
  .layer-ring-2 { width: 154px; height: 154px; }
  .layer-ring-3 { width: 196px; height: 196px; }
  .layer-ring-4 { width: 238px; height: 238px; }
  .layer-ring-5 { width: 280px; height: 280px; }
  .layer-core { width: 78px; height: 78px; font-size: 0.56rem; padding: 0.3rem; }
}

/* -- Process Improvement rebuild: transformation rows, TQM-style system
   graphic -- */
.transform-rows { margin-top: 3rem; max-width: 760px; }
.transform-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.25rem; padding: 1.15rem 0; border-top: 1px solid var(--c-border); }
.transform-row:first-child { border-top: none; padding-top: 0; }
.transform-from { text-align: right; font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; color: var(--c-steel); }
.transform-to { text-align: left; font-family: var(--font-serif); font-weight: 600; font-size: 1.08rem; color: var(--c-midnight); }
.transform-bar { display: block; width: 100px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--c-border-strong), var(--c-midnight)); }
@media (max-width: 620px) {
  .transform-row { grid-template-columns: 1fr; text-align: center; gap: 0.5rem; padding: 1.5rem 0; }
  .transform-from, .transform-to { text-align: center; }
  .transform-bar { width: 60px; margin: 0 auto; }
}

.improve-system-wrap { margin: 3rem auto 0; max-width: 720px; }
.improve-system-svg { width: 100%; height: auto; display: block; }

/* Executive accountability graphic (executive_accountability_graphic()):
   a five-stage mandate-to-review progression with a single gradient line
   beneath reading greater clarity to greater autonomy. Short labels, so
   -- like .improve-system-* -- it scales with the viewBox and needs no
   separate mobile width override. */
.exec-acc-wrap { margin: 3rem auto 0; max-width: 900px; }
.exec-acc-svg { width: 100%; height: auto; display: block; }

/* Economic potential graphic (economic_potential_graphic()): a current
   output / performance gap / available potential bar with six named
   losses itemized inside the gap. Same horizontal-scroll-on-mobile
   treatment as .perf-arch-* since six loss labels packed across the gap
   need real width to stay legible. */
.econ-potential-wrap { margin: 3rem auto 0; max-width: 1160px; }
.econ-potential-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.econ-potential-svg { width: 100%; height: auto; display: block; }
.econ-potential-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; }
@media (max-width: 760px) {
  .econ-potential-svg { width: 980px; }
}

/* Value / resource matrix graphic (value_resource_matrix_graphic()): a
   plain scatter of activities by value created against resources
   consumed, split only by a diagonal reference line. Embedded SVG text
   scales with the viewBox like .org-network-svg, so no separate mobile
   width override is needed. */
.value-matrix-wrap { margin: 3rem auto 0; max-width: 640px; }
.value-matrix-svg { width: 100%; height: auto; display: block; }

/* Founder network graphic (founder_network_graphic()): a founder-centered
   radial network that gains an inner ring, an outer ring, and a second
   layer of indirect connections. Embedded SVG text scales with the
   viewBox like .org-network-svg, so no separate mobile width override. */
.founder-network-wrap { margin-top: 3rem; }
.founder-network-svg { width: 100%; height: auto; display: block; }
.founder-network-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; }

/* Preserve / build graphic (preserve_build_graphic()): five paired rows
   flowing from strengths on the left to structural additions on the
   right, revealed top to bottom. */
.preserve-build-wrap { margin: 3rem auto 0; max-width: 1000px; }
.preserve-build-svg { width: 100%; height: auto; display: block; }

/* Founder dependency continuum (founder_dependency_continuum_graphic()):
   a five-stage chain with a founder node whose connection to each stage
   grows progressively fainter left to right. Long stage labels across
   five points need real width, so it shares the horizontal-scroll-on-
   mobile treatment used by .perf-arch-* and .econ-potential-*. */
.founder-continuum-wrap { margin: 3rem auto 0; max-width: 1160px; }
.founder-continuum-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.founder-continuum-svg { width: 100%; height: auto; display: block; }
.founder-continuum-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; }
@media (max-width: 760px) {
  .founder-continuum-svg { width: 1000px; }
}

/* Centralization / local-autonomy spectrum (enterprise_local_spectrum_graphic()),
   Growth & Multi-Site page: eight business activities plotted along one
   enterprise-to-local axis. Wide horizontal diagram, shares the
   horizontal-scroll-on-mobile treatment. */
.enterprise-local-wrap { margin: 3rem auto 0; max-width: 1160px; }
.enterprise-local-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.enterprise-local-svg { width: 100%; height: auto; display: block; }
.enterprise-local-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; }
@media (max-width: 760px) {
  .enterprise-local-svg { width: 980px; }
}

/* Three-direction information-flow network (three_direction_flow_graphic()),
   Growth & Multi-Site page: an enterprise node connected to five site
   nodes by three distinct line styles (direction down, knowledge up,
   learning across). Wide horizontal diagram, shares the
   horizontal-scroll-on-mobile treatment, plus a plain-HTML legend below
   matching the .fragment-legend pattern. */
.info-flow-wrap { margin: 3rem auto 0; max-width: 1160px; }
.info-flow-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.info-flow-svg { width: 100%; height: auto; display: block; }
.info-flow-legend { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 1.25rem; font-size: 0.82rem; color: var(--c-steel); }
.info-flow-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.info-flow-swatch { display: inline-block; width: 20px; height: 0; border-top: 2px solid var(--c-midnight); }
.info-flow-swatch-down { border-top: 2px solid var(--c-midnight); }
.info-flow-swatch-up { border-top: 2px dashed var(--c-steel); }
.info-flow-swatch-across { border-top: 2px dotted var(--c-sand); }
@media (max-width: 760px) {
  .info-flow-svg { width: 980px; }
}

/* Investment lifecycle backbone (investment_lifecycle_graphic()), Private
   Equity page: one five-stage line under the hero. Wide horizontal
   diagram, shares the horizontal-scroll-on-mobile treatment. */
.lifecycle-wrap { margin: 0 auto; max-width: 1160px; }
.lifecycle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lifecycle-svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  .lifecycle-svg { width: 900px; }
}

/* Compact reuse of the same five stages (lifecycle_strip()), threaded
   through each Private Equity page section as a "you are here" wayfinding
   device. Plain flex row, wraps naturally on narrow screens. */
.lifecycle-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin: 1.75rem 0 0; }
.lifecycle-node { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; color: var(--c-steel); opacity: 0.45; }
.lifecycle-node.is-active { color: var(--c-midnight); opacity: 1; font-weight: 700; }
.lifecycle-arrow { color: var(--c-border-strong); font-size: 0.85rem; }

/* Operating-scale spectrum (operating_scale_graphic()), About page: four
   evenly weighted stages of organizational scale (deliberately not
   ranked as maturity levels) sitting above one continuous "foundation"
   bar labeled People / Systems / Performance / Execution, showing the
   same foundation runs underneath every stage. Wide horizontal diagram,
   shares the horizontal-scroll-on-mobile treatment. */
.scale-wrap { margin: 3rem auto 0; max-width: 1160px; }
.scale-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scale-svg { width: 100%; height: auto; display: block; }
.scale-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; }
@media (max-width: 760px) {
  .scale-svg { width: 900px; }
}

/* Expertise network graphic (expertise_network_graphic()), About page:
   Lasting Progress at the center with six expertise areas arranged
   evenly around it, connected by thin lines -- a network, not an
   employee roster or headshot grid. Embedded SVG text scales with the
   viewBox, so no separate mobile width override. */
.expertise-network-wrap { margin: 3rem auto 0; max-width: 640px; }
.expertise-network-svg { width: 100%; height: auto; display: block; }
.expertise-network-caption { margin-top: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--c-steel); font-size: 0.95rem; max-width: 640px; text-align: center; }

/* Compact founder strip, About page: substantially smaller than a full
   hero-grid section, per the page brief (the company is the subject of
   the page; the founder appears only briefly near the bottom). */
.founder-strip-grid { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: center; max-width: 880px; }
.founder-strip-figure { aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; }
@media (max-width: 700px) {
  .founder-strip-grid { grid-template-columns: 1fr; }
  .founder-strip-figure { max-width: 220px; }
}