/* =============================================================================
   TekFocus — components.css
   Reusable UI patterns shared across pages: buttons, eyebrows, section markers,
   cards, tags, callouts, and the structural accents that carry the brand's
   "architectural / terminal" aesthetic.

   Depends on tokens from base.css and the type treatments in typography.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Eyebrow
   -----------------------------------------------------------------------------
   Mono uppercase label above a heading. The --with-rule variant prefixes a
   short gold tick, echoing the terminal/architectural cue.
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.eyebrow--rule::before {
  content: "";
  inline-size: var(--space-md);
  block-size: var(--border-width-thick);
  background-color: var(--color-accent);
}

.eyebrow--accent {
  color: var(--color-brand);
}

/* On inverse surfaces, gold reads better than muted cream for the eyebrow. */
.is-inverse .eyebrow,
.surface-inverse .eyebrow,
.surface-inverse-deep .eyebrow {
  color: var(--color-gold-400);
}

/* -----------------------------------------------------------------------------
   2. Section marker (01 / )
   -----------------------------------------------------------------------------
   The numbered mono marker called out in the brand visual cues. Pair with a
   heading: <p class="section-marker">01 /</p> or use as a flex prefix.
   -------------------------------------------------------------------------- */

.section-marker {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35ch;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.section-marker__slash {
  color: var(--color-text-faint);
}

/* Marker + label on one baseline, with a hairline trailing to the edge. */
.marker-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.marker-row::after {
  content: "";
  flex: 1;
  block-size: var(--border-width);
  background-color: var(--color-border);
}

/* -----------------------------------------------------------------------------
   3. Buttons
   -----------------------------------------------------------------------------
   .button is the base; modifiers set the visual style. Works on <a> and
   <button>. Sized for comfortable 44px+ touch targets (WCAG 2.5.5).
   -------------------------------------------------------------------------- */

.button {
  --_bg: var(--color-purple-600);
  --_fg: var(--color-cream-100);
  --_border: var(--color-purple-600);
  --_bg-hover: var(--color-purple-700);
  --_border-hover: var(--color-purple-700);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 2.75rem; /* 44px touch target */
  padding-block: 0.7em;
  padding-inline: 1.4em;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--_fg);
  background-color: var(--_bg);
  border: var(--border-width-thick) solid var(--_border);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.button:hover {
  background-color: var(--_bg-hover);
  border-color: var(--_border-hover);
  color: var(--_fg);
}

.button:active {
  transform: translateY(1px);
}

/* Primary = default (purple fill). Explicit class for intent/readability. */
.button--primary {
  --_bg: var(--color-purple-600);
  --_fg: var(--color-cream-100);
  --_border: var(--color-purple-600);
  --_bg-hover: var(--color-purple-700);
  --_border-hover: var(--color-purple-700);
}

/* Secondary = outline on cream. */
.button--secondary {
  --_bg: transparent;
  --_fg: var(--color-purple-600);
  --_border: var(--color-border-strong);
  --_bg-hover: var(--color-purple-600);
  --_border-hover: var(--color-purple-600);
}

.button--secondary:hover {
  color: var(--color-cream-100);
}

/* Gold accent — high-emphasis CTA. Gold + deep purple text clears AA at size. */
.button--accent {
  --_bg: var(--color-gold-500);
  --_fg: var(--color-purple-900);
  --_border: var(--color-gold-500);
  --_bg-hover: var(--color-gold-400);
  --_border-hover: var(--color-gold-400);
}

.button--accent:hover {
  color: var(--color-purple-900);
}

/* Ghost — minimal, for tertiary actions. */
.button--ghost {
  --_bg: transparent;
  --_fg: var(--color-purple-600);
  --_border: transparent;
  --_bg-hover: color-mix(in srgb, var(--color-purple-600) 10%, transparent);
  --_border-hover: transparent;
}

/* On inverse (purple) surfaces. */
.is-inverse .button--secondary,
.surface-inverse .button--secondary,
.surface-inverse-deep .button--secondary {
  --_fg: var(--color-cream-100);
  --_border: var(--color-border-inverse);
  --_bg-hover: var(--color-cream-100);
  --_border-hover: var(--color-cream-100);
}

.is-inverse .button--secondary:hover,
.surface-inverse .button--secondary:hover {
  color: var(--color-purple-900);
}

/* Size & width modifiers. */
.button--sm {
  min-block-size: 2.25rem;
  padding-block: 0.5em;
  padding-inline: 1em;
  font-size: var(--text-sm);
}

.button--lg {
  font-size: var(--text-md);
  padding-inline: 1.75em;
}

.button--block {
  display: flex;
  inline-size: 100%;
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Text link styled as a forward action (→ appears, nudges on hover). */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  color: var(--color-link);
}

.link-cta::after {
  content: "\2192"; /* → */
  transition: transform var(--duration-base) var(--ease-out);
}

.link-cta:hover::after {
  transform: translateX(0.25em);
}

/* -----------------------------------------------------------------------------
   4. Cards
   -----------------------------------------------------------------------------
   Surface block with padding and a hairline border. Container-query aware:
   inside a .cq / .cq-cards wrapper, cards pick up extra padding when their
   container is wide enough — independent of viewport width.
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  block-size: 100%;
}

.card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

.card__body {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Push a footer (link/CTA) to the bottom of an equal-height card. */
.card__footer {
  margin-block-start: auto;
  padding-block-start: var(--space-2xs);
}

/* Interactive card (whole card is a link target). */
.card--link {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-out);
}

.card--link:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Top gold keyline — used for framework / service cards. */
.card--accent {
  border-block-start: var(--border-width-thick) solid var(--color-accent);
}

/* Numbered card: the section-marker sits at the top as an index. */
.card--indexed {
  position: relative;
}

.card__index {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-purple-600); /* gold fails contrast for text on light surfaces ("gold carries text only on purple") */
  font-variant-numeric: tabular-nums;
}

/* Phase 2 placeholder card — lower visual weight than a live card; signals
   "not live yet". Pairs with .tag--phase and a muted "Details coming soon"
   label. Not interactive (there is no page to link to at MVP). */
.card--phase {
  background-color: transparent;
  border-style: dashed;
  box-shadow: none;
}

.card--phase .card__title {
  color: var(--color-text-muted);
}

@container cards (min-width: 30rem) {
  .card {
    padding: var(--space-xl);
  }
}

/* -----------------------------------------------------------------------------
   5. Tags / pills / badges
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding-block: 0.25em;
  padding-inline: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand);
  background-color: color-mix(in srgb, var(--color-purple-600) 8%, transparent);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
}

.tag--accent {
  color: var(--color-purple-900);
  background-color: color-mix(in srgb, var(--color-gold-500) 30%, transparent);
  border-color: color-mix(in srgb, var(--color-gold-600) 45%, transparent);
}

.tag--phase {
  /* "Phase 2" markers for service lines not yet live at MVP. */
  color: var(--color-text-faint);
  background-color: transparent;
  border-style: dashed;
}

/* -----------------------------------------------------------------------------
   6. Dividers & rules
   -------------------------------------------------------------------------- */

.rule {
  border: none;
  block-size: var(--border-width);
  background-color: var(--color-border);
}

.rule--strong {
  background-color: var(--color-border-strong);
}

.rule--accent {
  block-size: var(--border-width-thick);
  inline-size: var(--space-2xl);
  background-color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   7. Media frame
   -----------------------------------------------------------------------------
   For diagrams, portraits, and SVG framework figures. No stock photography —
   the frame is for line work and clean imagery per the brand visual rules.
   -------------------------------------------------------------------------- */

.frame {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.frame--diagram {
  padding: var(--space-lg);
  background-color: var(--color-surface);
}

.aspect-16-9 {
  aspect-ratio: 16 / 9;
}
.aspect-4-3 {
  aspect-ratio: 4 / 3;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}

.frame img,
.frame svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.frame--diagram svg {
  object-fit: contain;
}

/* -----------------------------------------------------------------------------
   8. Callout / note
   -----------------------------------------------------------------------------
   For honesty-habit asides ("What TekFocus will not claim"), federal-language
   notes, and emphasis blocks. Gold keyline carries the accent without using
   gold for text on cream.
   -------------------------------------------------------------------------- */

.callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface-sunken);
  border-inline-start: var(--border-width-thick) solid var(--color-accent);
  border-radius: var(--radius-md);
}

.callout__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.callout--brand {
  border-inline-start-color: var(--color-brand);
}

/* -----------------------------------------------------------------------------
   9. Definition / feature list
   -----------------------------------------------------------------------------
   Framework phases, engagement steps, differentiators — a label paired with a
   description, optionally indexed with a mono number.
   -------------------------------------------------------------------------- */

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.feature__index {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.feature__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

.feature__body {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Ruled variant — gold keyline + indent. For named-record entries: training-era
   customers, federal agencies, sector reach (see the Track Record page). */
.feature--ruled {
  border-inline-start: var(--border-width-thick) solid var(--color-accent);
  padding-inline-start: var(--space-md);
}

/* -----------------------------------------------------------------------------
   10. Stat / credibility figure
   -----------------------------------------------------------------------------
   For the verified-record numbers (14 years, 35+ certifications, since 2002).
   Display serif numeral over a mono caption.
   -------------------------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums lining-nums;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   11. Definition list (key/value rows — e.g. Verified Record entries)
   -------------------------------------------------------------------------- */

.spec {
  display: grid;
  gap: 0;
}

.spec__row {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
  border-block-start: var(--border-width) solid var(--color-border);
}

.spec__row:last-child {
  border-block-end: var(--border-width) solid var(--color-border);
}

.spec__term {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.spec__desc {
  color: var(--color-text);
}

@media (min-width: 48rem) {
  .spec__row {
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: var(--space-lg);
    align-items: baseline;
  }
}

/* -----------------------------------------------------------------------------
   12. Site header & primary navigation
   -----------------------------------------------------------------------------
   Markup: partials/header.html + partials/nav.html.
   Mobile-first and progressive: with no JS the panel is simply visible (nav is
   always usable). scripts/nav.js adds [data-enhanced] to the header, which is
   the ONLY thing that turns on the collapse-behind-toggle behavior — so a JS
   failure degrades to an open, stacked nav rather than an unreachable one.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
  border-block-end: var(--border-width) solid var(--color-border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Keep the focus ring tidy around just the logo. */
  border-radius: var(--radius-sm);
}

.site-header__logo {
  /* The logo art is a stacked mark + wordmark centered in a square canvas with
     ~31% transparent margin top and bottom. Crop those margins (object-fit:
     cover in a ~2.5:1 box) so the mark + wordmark render larger in the header
     without clipping either. */
  block-size: 2.75rem;
  inline-size: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  object-position: center;
}

/* Panel holds the nav + Academy link. Stacked by default (mobile / no-JS). */
.site-header__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  inline-size: 100%;
  padding-block: var(--space-sm) var(--space-md);
}

.site-header__academy {
  align-self: flex-start;
}

/* --- Primary nav list --- */
.primary-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.primary-nav__link {
  display: block;
  padding-block: var(--space-2xs);
  padding-inline: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.primary-nav__link:hover {
  color: var(--color-brand);
  background-color: color-mix(in srgb, var(--color-purple-600) 7%, transparent);
}

/* Current page: gold underline keyline (gold-as-text on cream is avoided). */
.primary-nav__link[aria-current="page"] {
  color: var(--color-brand);
  box-shadow: inset 0 -2px 0 0 var(--color-accent);
}

/* --- Mobile toggle (hamburger → X) --- */
.nav-toggle {
  display: none; /* shown only when enhanced + mobile (see media query) */
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem; /* 44px touch target */
  border-radius: var(--radius-md);
  color: var(--color-brand);
}

.nav-toggle:hover {
  background-color: color-mix(in srgb, var(--color-purple-600) 8%, transparent);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  inline-size: 1.375rem;
  block-size: 2px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before {
  position: absolute;
  inset-block-start: -0.4375rem;
}

.nav-toggle__bars::after {
  position: absolute;
  inset-block-start: 0.4375rem;
}

/* Open state: middle bar fades, outer bars cross into an X. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(0.4375rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

/* --- Enhanced + mobile: collapse the panel behind the toggle --- */
@media (max-width: 47.99rem) {
  .site-header[data-enhanced] .nav-toggle {
    display: inline-flex;
  }

  .site-header[data-enhanced] .site-header__panel {
    display: none;
  }

  .site-header[data-enhanced] .site-header__panel.is-open {
    display: flex;
  }
}

/* --- Desktop: single row, nav inline, Academy pinned right --- */
@media (min-width: 48rem) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .nav-toggle {
    display: none; /* never on desktop, regardless of enhancement */
  }

  .site-header__panel {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    inline-size: auto;
    flex: 1;
    gap: var(--space-lg);
    padding-block: 0;
  }

  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
  }

  .site-header__academy {
    align-self: center;
    margin-inline-start: var(--space-sm);
  }
}

/* --- Dropdown submenus -------------------------------------------------------
   Top-level items with children (About, Services, Approach). Pre-JS the submenus
   render visible (stacked); scripts/nav.js + [data-enhanced] collapse them behind
   a caret toggle on mobile, and desktop reveals them on hover / focus-within.
   -------------------------------------------------------------------------- */

.primary-nav__item {
  position: relative;
}

.primary-nav__head {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

.submenu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  color: inherit;
  border-radius: var(--radius-sm);
}

/* Standalone toggle (no sibling link, e.g. Services) reads like a nav link. */
.submenu-toggle--full {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
}

.submenu-toggle:hover {
  color: var(--color-brand);
}

/* Chevron drawn from two borders; points down, flips up when expanded. */
.submenu-toggle__icon {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-inline-end: var(--border-width-thick) solid currentColor;
  border-block-end: var(--border-width-thick) solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-standard);
}

.submenu-toggle[aria-expanded="true"] .submenu-toggle__icon {
  transform: translateY(0.1em) rotate(-135deg);
}

.submenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  list-style: none;
  margin: 0;
  padding-inline-start: var(--space-md); /* indent under the parent (mobile) */
}

.submenu__link {
  display: block;
  padding-block: var(--space-2xs);
  padding-inline: var(--space-2xs);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.submenu__link:hover {
  color: var(--color-brand);
  background-color: color-mix(in srgb, var(--color-purple-600) 7%, transparent);
}

.submenu__link[aria-current="page"] {
  color: var(--color-brand);
  box-shadow: inset 2px 0 0 0 var(--color-accent);
}

/* "Details coming soon" caption + the muted, non-interactive Phase 2 entries. */
.submenu__caption {
  margin-block-start: var(--space-2xs);
  padding-block-start: var(--space-2xs);
  padding-inline: var(--space-2xs);
  border-block-start: var(--border-width) solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.submenu__item--phase {
  padding-block: var(--space-3xs);
  padding-inline: var(--space-2xs);
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

/* Enhanced + mobile: collapse submenus behind their caret toggle. */
@media (max-width: 47.99rem) {
  .site-header[data-enhanced] .submenu {
    display: none;
  }
  .site-header[data-enhanced] .submenu.is-open {
    display: flex;
  }
}

/* Desktop: submenus become positioned dropdown cards. */
@media (min-width: 48rem) {
  .submenu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-inline-size: 15rem;
    padding: var(--space-2xs);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: var(--z-overlay);
    display: none;
  }
  .submenu__link {
    white-space: nowrap;
  }
  .primary-nav__item--has-submenu:hover > .submenu,
  .primary-nav__item--has-submenu:focus-within > .submenu,
  .submenu.is-open {
    display: flex;
  }
}

/* -----------------------------------------------------------------------------
   13. Site footer
   -----------------------------------------------------------------------------
   Markup: partials/footer.html. Rendered on the deep-purple inverse surface, so
   .surface-inverse-deep re-points the text/heading/link/border roles for it.
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--section-space);
  margin-block-start: auto; /* hold the footer to the bottom on short pages */
}

.site-footer__grid {
  margin-block-end: var(--space-xl);
}

.site-footer__social {
  margin-block-start: var(--space-2xs);
}

.site-footer__nav {
  margin-block: var(--space-lg);
}

.site-footer__legal {
  gap: var(--space-sm);
  row-gap: var(--space-2xs);
  color: var(--color-text-muted);
}

/* The closing tagline reads as a quiet sign-off, not a heading. */
.site-footer__essence {
  margin-block-start: var(--space-xl);
  color: var(--color-text-on-inverse);
}

/* -----------------------------------------------------------------------------
   14. Hero block
   -----------------------------------------------------------------------------
   The home page opener: typography-led, no photograph (per the brand visual
   rules). Mono eyebrow → display headline → supporting paragraph → CTA row →
   founder identifier. Width is capped to a readable measure; the surrounding
   .section / .container supply the band padding and page gutter.
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-inline-size: var(--measure);
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-optical-sizing: auto;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  text-wrap: balance;
}

.hero__sub {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-2xs);
}

.hero__founder-identifier {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
}

/* -----------------------------------------------------------------------------
   15. Audience tile
   -----------------------------------------------------------------------------
   "Who We Serve" routing tiles. At MVP three tiles are non-clickable previews
   (no <a> wrapper — the audience routing pages ship in Phase 2); the Academy
   tile (--academy) is the one live route and is visually differentiated to
   signal a sister-brand destination.
   -------------------------------------------------------------------------- */

.audience-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  block-size: 100%;
}

.audience-tile__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.audience-tile__recognition {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  text-wrap: pretty;
}

/* Static CTA label for the preview tiles — no link affordance at MVP. */
.audience-tile__cta {
  margin-block-start: auto;
  padding-block-start: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-faint);
}

/* The live Academy link is pushed to the tile's bottom edge like the static CTA. */
.audience-tile .link-cta {
  margin-block-start: auto;
  padding-block-start: var(--space-2xs);
}

/* Academy tile — gold keyline + warm tint mark it as the sister-brand route. */
.audience-tile--academy {
  border-color: color-mix(in srgb, var(--color-gold-600) 45%, transparent);
  border-block-start: var(--border-width-thick) solid var(--color-accent);
  background-color: color-mix(in srgb, var(--color-gold-500) 8%, var(--color-surface));
}

/* -----------------------------------------------------------------------------
   16. Engagement CTA section
   -----------------------------------------------------------------------------
   The "Reach the Architect" conversion block — the page's strongest call after
   the hero. Centered, generous, restrained. Pairs with a surface band set in
   the page markup.
   -------------------------------------------------------------------------- */

.engagement-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-inline-size: var(--measure-narrow);
  margin-inline: auto;
  text-align: center;
}

.engagement-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.engagement-cta__headline {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  text-wrap: balance;
}

.engagement-cta__body {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.engagement-cta__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-2xs);
}

.engagement-cta__secondary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   17. Inline bullet-separated list
   -----------------------------------------------------------------------------
   Mono strip with "·" separators between items — used for the credibility floor
   (training-era clients, credentials). Wraps naturally; separators sit between
   items, never before the first. --sm trims the size for the denser credentials
   row; --center centers the strip at md and up (left-aligned on mobile).
   -------------------------------------------------------------------------- */

.inline-bullet-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.inline-bullet-list > li {
  display: inline-flex;
  align-items: baseline;
}

.inline-bullet-list > li + li::before {
  content: "·";
  margin-inline: 0.75ch;
  color: var(--color-text-faint);
}

.inline-bullet-list--sm {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  .inline-bullet-list--center {
    justify-content: center;
  }
}

/* -----------------------------------------------------------------------------
   18. Pull quote
   -----------------------------------------------------------------------------
   Editorial blockquote with a gold keyline — e.g. the family mantra on the
   founder profile. Gold is decorative (the rule); the text stays heading-ink so
   it clears AA contrast on cream.
   -------------------------------------------------------------------------- */

.pull-quote {
  margin: 0;
  border-inline-start: var(--border-width-thick) solid var(--color-accent);
  padding-inline-start: var(--space-lg);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  text-wrap: pretty;
}

.pull-quote cite {
  display: block;
  margin-block-start: var(--space-sm);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   19. Forms
   -----------------------------------------------------------------------------
   The contact form: labelled fields with italic hint microcopy, accessible
   error messaging, an off-screen honeypot, and the inline status panel that
   replaces the form on success (or surfaces an error). Inputs sit on the lifted
   surface so they read clearly on cream.
   -------------------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-inline-size: var(--measure-narrow);
}

.form__intro {
  color: var(--color-text-muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.field__label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.field__req {
  color: var(--color-brand);
  margin-inline-start: 0.15em;
}

.field__hint {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
}

.field__control {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0.65em 0.85em;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.field__control:hover {
  border-color: var(--color-brand);
}

textarea.field__control {
  min-block-size: 9rem;
  line-height: var(--leading-normal);
  resize: vertical;
}

.field__control[aria-invalid="true"] {
  border-color: var(--color-error);
}

.field__count {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.field__error {
  font-size: var(--text-sm);
  color: var(--color-error);
}

/* Off-screen honeypot — not announced to AT, not reachable by keyboard. */
.form__honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Inline status panel — replaces the form on success, or shows a submit error. */
.form-status {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-inline-start: var(--border-width-thick) solid var(--color-accent);
  border-radius: var(--radius-lg);
}

.form-status--error {
  border-inline-start-color: var(--color-error);
}

.form-status__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-heading);
}