/* Wilson Levy — components.css
   v3.17 — 18 July 2026
   Fixed AI-BD Readiness Snapshot alignment bug: removed
   #ai-bd-readiness .container's 1040px width override. That override
   widened the section's whole container — including the section label,
   heading and intro paragraph, not just the two-column grid — so this
   section's text rendered in a box centred at a different width than the
   standard 680px box every other section uses, producing a visible
   left-edge mismatch against the rest of the site. .readiness-grid is
   now a single stacked column (card above quiz) inside the ordinary
   680px measure; the now-redundant max-width:900px media query for the
   old two-column layout is removed.
   v3.15 — 18 July 2026
   Added the AI-BD Readiness Snapshot component (§3): .readiness-grid,
   .readiness-card, .readiness-signals, .readiness-question(s)/.readiness-
   option(s), .readiness-result and related rules, for the new
   #ai-bd-readiness section on index.html. Uses only existing tokens
   (--color-accent, --color-surface, --font-display, --space-*, etc.) and
   the shared .btn / .btn--text button classes — no new colour or typeface.
   #ai-bd-readiness .container widened to 1040px using the same technique
   as .site-header .container in §2.
   v3.4 — 17 July 2026
   Nav gap tightened and .nav-cta padding trimmed so all 8 header items
   (incl. Catching Up) stay on one row at ordinary desktop widths instead
   of wrapping. Added hero-specific padding-top/margin overrides (.hero,
   .hero .hero-heading, .hero .hero-subline) to bring the hero's first
   paragraph of body copy above the fold on desktop.
   v3.3 — 16 July 2026
   Added .hero-subline (firm-size/audience qualifier line on the
   homepage hero, sitting between the H1 and the existing .hero-body
   paragraph).
   v3.2 — 15 July 2026
   Added .article-byline (author credit line under the Insights/read-time
   label on article pages, linking to about.html via the existing .text-link
   class for the name itself).
   v3.1 — 12 July 2026
   Rebuilt after receiving the real production style.css.
   Section 1: the site's own original embedded <style> block, carried over
   verbatim in intent but corrected to the real token names (--font-body
   in place of the old --font-sans/Lato fallback chain, --text-base in
   place of --text-body, which do not exist in the real system).
   Section 2: the small number of genuinely new classes needed for pages
   that did not exist before (article pages, insights as standalone pages,
   the advisory panel, related articles) — modelled deliberately on the
   real site's existing patterns (retainer-programme, article-faqs,
   perspectives-grid) rather than introducing a parallel visual language. */

/* ═══ 1. Original embedded classes, corrected ═══════════════ */

.why-now-block {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
  max-width: 52ch;
}
.why-now-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.why-now-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.why-now-list li {
  padding-left: 1.25rem;
  position: relative;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-muted);
}
.why-now-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--color-text-faint);
}
.fluency-who {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
}
.how-it-works {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}
.fluency-definition {
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-8);
  border-left: 2px solid currentColor;
  color: var(--color-text-muted);
  max-width: 56ch;
}
.fluency-definition p {
  font-size: var(--text-base);
  line-height: 1.7;
  margin: 0;
}
.fluency-quote p {
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: 0;
}
.footer-legal {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}
.footer-legal-link {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color var(--transition);
}
.footer-legal-link:hover { color: var(--color-text-muted); }

.privacy-body { max-width: 62ch; }
.privacy-body p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.privacy-subheading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: var(--space-10);
  margin-bottom: var(--space-2);
}
.privacy-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.privacy-list li {
  padding-left: 1.25rem;
  position: relative;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-muted);
}
.privacy-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--color-text-faint);
}

.article-faqs {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.article-faq-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}
.article-faq-item { margin-bottom: var(--space-6); }
.article-faq-q {
  font-size: var(--text-sm);
  font-weight: 400;
  font-style: italic;
  color: var(--color-text);
  margin: 0 0 var(--space-1);
  line-height: 1.5;
}
.article-faq-a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Retainers / programme boxes — reused across Retainers, Services and
   Briefings for every product that has steps and an investment line. */
.retainer-programme {
  margin-top: var(--space-12);
  border: 1px solid var(--color-border);
  max-width: 64ch;
}
.retainer-header {
  padding: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.retainer-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.retainer-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}
.retainer-phases { list-style: none; padding: 0; margin: 0; }
.retainer-phase {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
.retainer-phase:last-child { border-bottom: none; }
.retainer-phase-number {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  padding-top: 0.2rem;
  white-space: nowrap;
}
.retainer-phase-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 400;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.retainer-phase-desc {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}
.retainer-delivery {
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
.retainer-delivery-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  padding-top: 0.2rem;
  white-space: nowrap;
}
.retainer-delivery-desc {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}
.retainer-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}
.retainer-outcome-col { display: flex; flex-direction: column; }
.retainer-invest-amount {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text);
  margin: var(--space-4) 0 var(--space-2);
  line-height: 1.1;
}
.retainer-invest-unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-body);
}
.retainer-invest-desc {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

/* Perspectives / Insights card grid */
.perspectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}
.article-card {
  border-top: 2px solid var(--color-accent);
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  transition: opacity var(--transition);
}
.article-card:hover { opacity: 0.75; }
.article-tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
.article-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0;
}
.article-summary {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}
.article-read-link {
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  align-self: flex-start;
  margin-top: var(--space-2);
}
.article-read-link:hover { opacity: 0.7; }

/* Standalone article page body (article-full retained as the page's
   own content wrapper — max-width, top rule and spacing all still apply
   correctly outside the old show/hide mechanism). */
.article-full {
  max-width: 62ch;
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.article-full-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 var(--space-8);
}
.article-full p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.article-full em { font-style: italic; }

.resources-block {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}
.catching-up-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  max-width: 56ch;
}
.catching-up-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 400;
  margin: 0 0 var(--space-3);
}
.catching-up-desc {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.catching-up-enquire {
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.catching-up-enquire:hover { opacity: 0.7; }

.what-you-gain {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}
.gain-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gain-list li {
  padding-left: 1.25rem;
  position: relative;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-muted);
}
.gain-list li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--color-text-faint);
}
.hero-availability {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-6);
  border-left: 2px solid var(--color-border);
  max-width: 48ch;
}
.hero-availability p {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

/* ═══ 2. New for the multi-page architecture ════════════════ */

/* Header widened independently of the 680px content measure — matching
   the approach already used on catchingup.wilsonlevy.net (full-width
   header, narrow reading column below it). Only .site-header's container
   is affected; every other section keeps the narrow editorial measure. */
.site-header .container {
  max-width: 1440px;
}

/* Align the nav's first item with the body copy's left edge, so the
   widened header reads as a deliberate grid rather than an arbitrary
   stretch. Both the header's container and every section's container
   share the same fluid --content-padding, so that term cancels out of
   the difference between their two centred boxes — what's left is a
   pure function of viewport width and the two max-widths (1440 vs 680):

     offset = max(0, (100vw - 680px)/2) - max(0, (100vw - 1440px)/2)

   This equals 380px once the viewport is wide enough for both boxes to
   sit at their max-width, and tapers smoothly to 0 as the viewport
   narrows past 680px, matching the two containers' actual centring
   behaviour exactly rather than approximating it with a fixed value.
   A 140px floor keeps the wordmark from ever being squeezed narrower
   than its own natural width on the narrower end of that range. */
.header-inner {
  display: grid;
  grid-template-columns:
    max(140px, calc(max(0px, (100vw - 680px) / 2) - max(0px, (100vw - 1440px) / 2)))
    1fr
    auto;
  column-gap: 0;
}
.wordmark { grid-column: 1; }
.site-nav { grid-column: 2; }
.mobile-menu-toggle { grid-column: 3; margin-left: var(--space-4); }

.site-nav {
  gap: clamp(var(--space-2), 1.4vw, var(--space-4));
}

/* Nav overflow fix — the real site-nav rule sets white-space:nowrap on
   links with no wrapping allowed on the row, which pushes items past the
   viewport edge (invisible without horizontal scroll) once there are
   enough items to exceed the available width — as happened once
   Briefings was added as an eighth item within the old 680px header.
   Widening the header above removes this in ordinary use; wrapping is
   kept here as a fallback for narrow windows rather than reverting to
   off-screen overflow. */
.site-nav {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}
.site-nav a {
  white-space: normal;
}

.nav-cta {
  padding-inline: var(--space-4);
}

/* Current-page nav state */
.site-nav a[aria-current="page"],
.footer-links a[aria-current="page"] {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Advisory panel at the foot of each article — modelled on
   .fluency-quote's border-left-plus-surface treatment, kept restrained. */
.advisory-panel {
  margin-top: var(--space-12);
  padding: var(--space-8);
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  max-width: 62ch;
}
.advisory-panel-heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.advisory-panel p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

/* Related articles */
.related-block { margin-top: var(--space-10); max-width: 62ch; }
.related-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.related-list .article-read-link { display: inline-block; }

/* ═══ 3. Mobile navigation ═══════════════════════════════════
   The real style.css hides .site-nav entirely below 600px with no
   replacement — workable for the original single scrolling page, but
   it leaves no way to navigate a multi-page site on mobile. This adds
   a hamburger button and a slide-down panel duplicating the same nav
   links, active only below the site's existing 600px breakpoint. */

.hamburger-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  align-items: center;
  padding: var(--space-1);
  transition: color var(--transition);
  margin-left: var(--space-4);
}
.hamburger-toggle:hover { color: var(--color-text); }
.hamburger-toggle svg { transition: transform var(--transition); }
.hamburger-toggle.is-active svg { transform: rotate(90deg); }

.mobile-nav-panel {
  display: none;
  flex-direction: column;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.mobile-nav-panel a {
  padding: var(--space-4) var(--content-padding);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}
.mobile-nav-panel a:first-child { border-top: none; }
.mobile-nav-panel a[aria-current="page"] { color: var(--color-text); font-weight: 600; }
.mobile-nav-panel a.nav-cta { color: var(--color-accent); font-weight: 600; }

body.mobile-nav-locked { overflow: hidden; }

@media (max-width: 600px) {
  .hamburger-toggle { display: flex; }
  .mobile-nav-panel { display: flex; }
  .mobile-nav-panel.is-open { max-height: 70vh; overflow-y: auto; }
}

/* ─── Article Byline ─────────────────────────────────────────── */
.article-byline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: calc(var(--space-8) * -1 + var(--space-2));
  margin-bottom: var(--space-8);
}
.article-byline .text-link {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ─── Hero Subline ───────────────────────────────────────────── */
.hero-subline {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1.5;
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

/* ─── Hero Vertical Rhythm (fold fix) ────────────────────────── */
.hero {
  padding-top: clamp(var(--space-8), 4vw, var(--space-12));
}
.hero .hero-heading {
  margin-bottom: var(--space-6);
}
.hero .hero-subline {
  margin-bottom: var(--space-4);
}

/* ═══ 3. AI-BD Readiness Snapshot (v3.17, 18 July 2026) ══════════ */

/* No width exception here. v3.15/v3.16 widened #ai-bd-readiness .container
   to 1040px for the two-column layout — but that widened the SECTION'S
   OWN .container, not just the grid, so the section label, heading and
   intro paragraph rendered in a box centred at a different width than
   the standard 680px box every other section on the site uses. That's
   what produced the visible left-edge mismatch against the rest of the
   site (both on this section on index.html and on the standalone
   readiness-snapshot.html page). Fixed by dropping the override entirely
   and stacking the card above the quiz within the ordinary content
   measure, so this section is positioned exactly like every other
   section — no exception, no possibility of drifting out of alignment. */

.readiness-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: clamp(var(--space-8), 3vw, var(--space-10));
}

.readiness-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}

.readiness-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
}

.readiness-signals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.readiness-signals li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.readiness-signals li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-text-faint);
}

.readiness-signals li strong {
  color: var(--color-text);
  font-weight: 700;
}

.readiness-note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.readiness-questions {
  display: grid;
  gap: var(--space-4);
}

.readiness-question {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: var(--space-5);
}

.readiness-question legend {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.4;
  margin-bottom: var(--space-4);
  padding: 0 0.1rem;
}

.readiness-options {
  display: grid;
  gap: var(--space-2);
}

.readiness-option {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--transition);
}

.readiness-option:hover,
.readiness-option:focus-within {
  border-color: var(--color-accent);
}

.readiness-option input {
  margin-top: 0.3rem;
  accent-color: var(--color-accent);
}

.readiness-option span {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.readiness-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.readiness-result {
  display: none;
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
}

.readiness-result.is-active { display: block; }

.readiness-result__meta {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.readiness-result h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-text);
  font-size: var(--text-xl);
  line-height: 1.15;
  margin: var(--space-2) 0 var(--space-3);
}

.readiness-result p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
}

.readiness-capture {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.readiness-capture p {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.readiness-capture-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.readiness-input {
  flex: 1 1 16rem;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.readiness-result-next {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}