/* ============================================================================
   styles.css — Shared components, base layout, and responsive rules
   ----------------------------------------------------------------------------
   VIEW layer of the Content → Engine → View architecture. Every visual value
   (color, type size, spacing, radius, elevation, motion) is referenced through
   a :root design token declared in tokens.css — NO hard-coded hex colors and
   NO px literals for anything that owns a token (R4.2, R5.2). Structural values
   (100%, 0, 1px hairlines, flex/grid ratios, breakpoint widths in media
   queries, and the 44px minimum tap target which has no token) are the only
   raw literals permitted here.

   DOM hooks matched below are the exact contracts documented in js/ui.js and
   js/render.js file headers:
     [data-nav-toggle] [data-nav-menu] .is-open
     img[data-fallback="hide"] + .is-broken
     [data-logo] + .logo-text
     [data-reveal] + .is-visible + html.reveal-enabled  (see animations.css)
     .nav-link  [aria-current="page"]
     .role-card  .testimonial-card  .brand-logo-text
     .placeholder-badge  [data-placeholder]
     .skip-link  #main-content
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. MODERN RESET / NORMALIZE
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);            /* 17px — never below the 16px floor (R13.2) */
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHY — headings use the serif display family
   --------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-primary);
  font-weight: 600;
}

h1 {
  font-size: var(--fs-hero);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  max-width: var(--measure);            /* cap body-text line length (R6.5) */
}

small,
.text-small {
  font-size: var(--fs-small);
}

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

/* ---------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES — .container and .section
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Mobile-first: mobile section padding is the base; desktop padding enhances up. */
.section {
  padding-block: var(--section-pad-mobile);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

/* Dark emphasis bands (testimonials / final CTA) invert the text color. */
.section--dark {
  background-color: var(--color-primary);
  color: var(--color-ink-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--color-ink-inverse);
}

.section--dark a {
  color: var(--color-accent-soft);
}

/* Body-text blocks stay within the readable measure. */
.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--space-sm);
}

/* ---------------------------------------------------------------------------
   4. SECTION HEADER PATTERN — eyebrow + serif h2 + muted subhead
   --------------------------------------------------------------------------- */
.section-header {
  margin-bottom: var(--space-md);
}

.section-header__eyebrow,
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.section-header__heading {
  font-size: var(--fs-h2);
}

.section-header__subhead {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------------------
   5. BUTTONS — one consistent shape; primary out-weighs secondary
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;                     /* ≥44×44 tap target (R11.8) — no token exists */
  min-width: 44px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: var(--lh-heading);
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform var(--motion-fast) var(--easing),
    box-shadow var(--motion-fast) var(--easing),
    background-color var(--motion-fast) var(--easing),
    color var(--motion-fast) var(--easing);
}

.btn:hover {
  text-decoration: none;
}

/* Primary — dominant CTA: accent fill, inverse (near-white) text, hover lift. */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-ink-inverse);
  border-color: var(--color-accent);
  font-weight: 600;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Secondary / ghost — outline, lower weight, never out-weighs the primary. */
.btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 500;
}

.btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-ink-inverse);
}

/* Ghost variant for use on the dark primary band. */
.btn--ghost {
  background-color: transparent;
  color: var(--color-ink-inverse);
  border-color: var(--color-accent-soft);
}

.btn--ghost:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   --------------------------------------------------------------------------- */
.site-header,
header.site-header {
  position: sticky;
  top: var(--header-offset);
  z-index: 100;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container,
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--header-pad-y);
}

/* Brand / logo lockup at the left of the header.
   The supplied logo is a WIDE horizontal lockup (mark + wordmark + tagline),
   so size it by height and cap its width so it never crowds the nav. The
   text-logo fallback keeps its own sizing (below). Reserve space with an
   aspect-ratio hint to minimize layout shift while the image loads. */
.brand-logo,
[data-logo] img {
  height: auto;
  width: auto;
  max-height: 132px;
  max-width: 420px;
  aspect-ratio: 602 / 358;
  object-fit: contain;
}

@media (max-width: 767px) {
  .brand-logo,
  [data-logo] img {
    max-height: 84px;
    max-width: 280px;
  }
}

/* Text-logo fallback: brand name rendered in the heading font (R9.2). */
.brand-logo-text,
.logo-text {
  font-family: var(--font-heading);
  font-size: var(--logo-height);        /* size ~ the logo height slot */
  line-height: 1;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: var(--tracking-heading);
}

/* Nav toggle button — hidden on desktop, shown at/below the mobile breakpoint. */
[data-nav-toggle] {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius);
  color: var(--color-primary);
}

/* The nav menu / link list + persistent CTA.
   Generous gap separates the link group from the standing Contact CTA. */
[data-nav-menu] {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* The link list lays out as an evenly-spaced horizontal row on desktop.
   (Without this, the <li>s fall into a cramped vertical stack.) */
.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
}

.nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  padding-block: var(--space-xs);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* Active-page link (R7.3, R7.4). */
.nav-link[aria-current="page"] {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

/* Persistent Contact CTA styled as an accent button. */
[data-content="nav.cta"],
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  background-color: var(--color-accent);
  color: var(--color-ink-inverse);
  font-weight: 600;
  text-decoration: none;
  transition:
    transform var(--motion-fast) var(--easing),
    box-shadow var(--motion-fast) var(--easing);
}

[data-content="nav.cta"]:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   7. FOOTER — dark primary band, ink-inverse text, collapsing columns
   --------------------------------------------------------------------------- */
.site-footer,
footer.site-footer {
  background-color: var(--color-primary);
  color: var(--color-ink-inverse);
  padding-block: var(--section-pad-mobile);
}

.footer-columns,
[data-content="footer.columns"] {
  display: grid;
  grid-template-columns: 1fr;           /* single column on mobile */
  gap: var(--space-md);
}

.footer-column__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-ink-inverse);
  margin-bottom: var(--space-sm);
}

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

.footer-link {
  color: var(--color-ink-inverse);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--color-accent-soft);
  text-decoration: underline;
}

.footer-legal,
[data-content="footer.legal"] {
  display: block;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-accent-soft);
  color: var(--color-ink-inverse);
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------------
   8. CARDS — feature / step / role cards share one shape and elevation
   --------------------------------------------------------------------------- */
.card,
.role-card,
.step-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--motion-fast) var(--easing),
    box-shadow var(--motion-base) var(--easing);
}

.card:hover,
.role-card:hover,
.step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.role-card__title,
.step-card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-sm);
}

.role-card__description,
.step-card__description {
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   9. TESTIMONIAL CARD — quote + attribution
   --------------------------------------------------------------------------- */
.testimonial-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-base) var(--easing);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-lg);
}

.testimonial-card__image {
  width: var(--space-lg);
  height: var(--space-lg);
  border-radius: 100%;
  object-fit: cover;
  margin-bottom: var(--space-sm);
}

.testimonial-card__quote {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--color-text);
}

.testimonial-card__attribution {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Dark-band testimonials invert their surface + text. */
.section--dark .testimonial-card {
  background-color: transparent;
  border-color: var(--color-accent-soft);
}

.section--dark .testimonial-card__quote {
  color: var(--color-ink-inverse);
}

.section--dark .testimonial-card__attribution {
  color: var(--color-accent-soft);
}

/* ---------------------------------------------------------------------------
   10. FORM FIELDS — base styles (full state styling lands in task 5.5)
   --------------------------------------------------------------------------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.form-label {
  font-weight: 500;
  color: var(--color-text);
}

.form-input,
input[type="text"],
input[type="tel"],
input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--motion-fast) var(--easing);
}

.form-input:hover {
  border-color: var(--color-text-muted);
}

/* Error text + invalid field affordance. */
.form-error,
.field-error {
  color: var(--color-error);
  font-size: var(--fs-small);
}

.form-input[aria-invalid="true"],
.form-field.is-invalid .form-input {
  border-color: var(--color-error);
}

/* ---------------------------------------------------------------------------
   11. SKIP LINK — first focusable element, visually hidden until focused (R11.4)
   --------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-xs);
  top: calc(-1 * var(--space-xxl));     /* off-screen until focused */
  z-index: 1000;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-accent);
  color: var(--color-ink-inverse);
  border-radius: var(--radius);
  text-decoration: none;
  transition: top var(--motion-fast) var(--easing);
}

.skip-link:focus {
  top: var(--space-xs);
}

/* ---------------------------------------------------------------------------
   12. FOCUS VISIBILITY — accent outline with ≥3:1 contrast (R11.6)
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* On the dark primary band use the lighter accent for the ring contrast. */
.section--dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* ---------------------------------------------------------------------------
   13. PLACEHOLDER MARKING — tasteful, visible marker for draft content (R3.3)
   --------------------------------------------------------------------------- */
.placeholder-badge {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius);
  vertical-align: middle;
}

[data-placeholder="true"] {
  outline: 1px dashed var(--color-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   14. BROKEN-IMAGE HIDE — ui.js adds .is-broken to suppress the broken icon
   --------------------------------------------------------------------------- */
img.is-broken {
  display: none;
}

/* ---------------------------------------------------------------------------
   15. UTILITIES
   --------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   16. RESPONSIVE — mobile-first; enhance UP at the token breakpoints.
   Breakpoint widths in media queries mirror --bp-mobile-max (767px) and
   --bp-tablet-max (1023px); custom properties cannot be used in media
   conditions, so the widths are written as the breakpoint literals.
   =========================================================================== */

/* --- Desktop / tablet-up (above the mobile breakpoint, ≥768px) --- */
@media (min-width: 768px) {
  .section {
    padding-block: var(--section-pad-desktop);
  }

  .site-footer,
  footer.site-footer {
    padding-block: var(--section-pad-desktop);
  }

  /* Footer collapses to a single column on mobile; expands here. */
  .footer-columns,
  [data-content="footer.columns"] {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* --- Mobile only (at/below the mobile breakpoint, ≤767px) --- */
@media (max-width: 767px) {
  /* Show the hamburger toggle; it is the only nav control on mobile. */
  [data-nav-toggle] {
    display: inline-flex;
  }

  /* Collapse the menu: hidden until the toggle adds .is-open. */
  [data-nav-menu] {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }

  [data-nav-menu].is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  /* In the collapsed mobile menu, links stack full-width with comfortable spacing. */
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    width: 100%;
  }

  .site-header .container,
  .site-nav {
    position: relative;
  }
}

/* ===========================================================================
   17. HOME PAGE — hero + Home-specific section components
   ---------------------------------------------------------------------------
   Visual layer for the Home page only. Tokens exclusively for color / type /
   spacing / radius / elevation / motion; the sole raw literals are the
   permitted structural ones (0, 100%, 1px hairlines, translateY(-2px),
   gradient stop %, and the media-query breakpoint widths that mirror
   --bp-tablet-max/--bp-mobile-max, which cannot take custom properties).
   =========================================================================== */

/* --- HERO (LCP element) ---------------------------------------------------
   Full-width editorial photo that COVERS the band, a dark navy gradient scrim
   over it (built from --color-primary via color-mix so contrast holds), and
   the eyebrow/headline/subhead/CTA layered above in inverse text. The content
   padding defines the hero height, so the absolutely-positioned image causes
   no layout shift (reserved space). */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-primary);   /* scrim base + fallback if image hidden */
  color: var(--color-ink-inverse);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* photo covers the whole hero band */
}

/* Dark gradient scrim: darkest at the bottom where the headline/CTA sit so
   inverse text keeps >=4.5:1 over the photograph (permitted gradient). */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-primary) 92%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 70%, transparent) 55%,
    color-mix(in srgb, var(--color-primary) 45%, transparent) 100%
  );
}

/* Content sits above the scrim (.container already caps width + side padding). */
.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-xl);
}

.hero__eyebrow {
  color: var(--color-accent-soft);   /* decorative accent tint on the dark scrim */
}

.hero__headline {
  color: var(--color-ink-inverse);   /* override the default navy heading color */
  margin-top: var(--space-xs);
  max-width: var(--measure);
}

.hero__subhead {
  margin-top: var(--space-sm);
  max-width: var(--measure);
  color: var(--color-ink-inverse);
}

.hero__cta {
  margin-top: var(--space-md);
}

/* Enhance the hero rhythm up on larger viewports. */
@media (min-width: 768px) {
  .hero__content {
    padding-block: var(--space-xxl);
  }
}

/* --- Shared Home text helpers --------------------------------------------- */
.section-body {
  margin-top: var(--space-sm);   /* color intentionally inherits (light vs dark bands) */
}

.measure {
  max-width: var(--measure);
}

.link {
  color: var(--color-accent);
  font-weight: 500;
}

/* Inverse section-header treatment on the dark bands (testimonials / final CTA)
   so the eyebrow + subhead keep contrast on navy. */
.section--dark .eyebrow,
.section-header--inverse .eyebrow {
  color: var(--color-accent-soft);
}

.section--dark .section-header__subhead,
.section-header--inverse .section-header__subhead {
  color: var(--color-ink-inverse);
}

/* --- SECTION--SPLIT (welcome): text + media, two-up on desktop ------------- */
.section--split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.section--split__media .section-media,
.section-media {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media (min-width: 1024px) {
  .section--split {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- DIFFERENTIATOR COMPARE: transactional (muted) vs Better Rooms (accent) */
.compare {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.compare__col {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Muted "transactional" column reads as the lesser option. */
.compare__col--muted {
  background-color: var(--color-bg-alt);
}

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

/* Emphasized "Better Rooms way" column: accent border, heading, elevation. */
.compare__col--accent {
  background-color: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.compare__col--accent .compare__title {
  color: var(--color-accent);
}

.compare__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-sm);
}

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

.compare__list li {
  position: relative;
  padding-left: var(--space-md);
}

.compare__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.compare__col--muted .compare__list li::before {
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .compare {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- STEPS (how-it-works preview): 3-up desktop, 1-up mobile --------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.step-card__num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-hero);
  line-height: var(--lh-heading);
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.step-card__body {
  margin-bottom: var(--space-sm);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- TESTIMONIALS LIST: 3-up desktop, 1-up mobile (cards styled in §9) ----- */
.testimonials__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (min-width: 1024px) {
  .testimonials__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- STATEMENTS: exclusivity / belonging pull-quote emphasis --------------- */
.statement {
  margin-top: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--color-accent);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  max-width: var(--measure);
  color: var(--color-primary);
}

.statement--belonging {
  border-left-color: var(--color-accent-soft);
}

/* Inverse variant for the dark bands. */
.statement--inverse {
  color: var(--color-ink-inverse);
  border-left-color: var(--color-accent-soft);
}

/* --- FINAL CTA BAND: centered, constrained, prominent --------------------- */
.final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  max-width: var(--measure);
  text-align: center;
}

.final-cta__inner .section-header {
  margin-bottom: var(--space-xs);
}

.final-cta__inner .section-header__subhead,
.final-cta__inner .section-body {
  margin-inline: auto;
}

/* Centered layout: statements drop the left rule and center as pull quotes. */
.final-cta__inner .statement {
  padding-left: 0;
  border-left: 0;
  text-align: center;
}

.final-cta__cta {
  margin-top: var(--space-md);
}

/* ===========================================================================
   18. CONTACT PAGE — compact hero, two-column layout, and FORM STATES
   ---------------------------------------------------------------------------
   Visual layer for the Contact (primary conversion) page. Tokens exclusively
   for color / type / spacing / radius / elevation / motion. The only raw
   literals are the permitted structural ones: 0, 100%, 1px hairlines, the
   small hover transform, the 44px min tap target (no token exists), the
   media-query breakpoint widths that mirror --bp-tablet-max/--bp-mobile-max
   (custom properties cannot be used in media conditions), the unitless
   opacity used for the disabled affordance, and the spinner keyframe
   percentages/deg. All state hooks below are the exact contracts documented
   in the js/form.js header (data-state, [data-form-status], .is-invalid,
   aria-invalid, [data-form-submit][disabled]).
   =========================================================================== */

/* --- COMPACT HERO ---------------------------------------------------------
   A shorter, text-forward hero for the conversion page: NO photo, NO scrim.
   The base .hero assumes a dark navy background with a gradient overlay and
   inverse text; on the ivory page background that would be unreadable, so the
   compact variant resets the band to the neutral background and restores the
   normal ink colors (headline uses primary, subhead uses muted, eyebrow uses
   the base accent rather than the on-dark accent-soft tint). Padding is lighter
   than the photo hero so the form below stays the visual priority. */
.hero--compact {
  background-color: var(--color-bg);   /* ivory, not the dark primary band */
  color: var(--color-text);            /* normal ink, not inverse */
  border-bottom: 1px solid var(--color-border);
}

.hero--compact .hero__content {
  padding-block: var(--space-lg);      /* shorter than the photo hero's --space-xl */
}

.hero--compact .hero__eyebrow {
  color: var(--color-accent);          /* accent reads on light bg (accent-soft is for dark) */
}

.hero--compact .hero__headline {
  color: var(--color-primary);         /* restore the normal navy heading ink */
}

.hero--compact .hero__subhead {
  color: var(--color-text-muted);      /* muted supporting copy on the light bg */
}

@media (min-width: 768px) {
  /* Still shorter than the photo hero (which grows to --space-xxl here). */
  .hero--compact .hero__content {
    padding-block: var(--space-xl);
  }
}

/* --- CONTACT LAYOUT: supporting aside + dominant form column --------------
   Mobile-first: a single stacked column (aside then form; both full width).
   The form is authored visible (no [data-reveal]) so it is never hidden on the
   no-JS path. At the desktop breakpoint it becomes two columns with the form
   column dominant and the aside narrower. */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;          /* single column on mobile */
  gap: var(--space-lg);
}

.contact-layout__aside,
.contact-layout__main {
  width: 100%;                         /* both full width when stacked */
  min-width: 0;                        /* allow grid children to shrink */
}

@media (min-width: 1024px) {
  .contact-layout {
    /* Aside narrower (4 parts), form column dominant (6 parts). */
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--space-xl);              /* generous gutter between columns */
    align-items: start;
  }
}

/* --- CONTACT FORM ---------------------------------------------------------
   Full-width fields in a single vertical column (R13.4). Field spacing/rhythm
   comes from the base .form-field rules (§10); this just guarantees the form
   fills its column and gives the submit button comfortable separation. */
.contact-form {
  width: 100%;
}

.contact-form .btn {
  margin-top: var(--space-sm);
  width: 100%;                         /* full-width CTA on mobile (R13.4) */
}

@media (min-width: 768px) {
  .contact-form .btn {
    width: auto;                       /* size to content once there is room */
  }
}

/* --- FIELD ERROR STATE (R2.8, R11.11) -------------------------------------
   The invalid border affordance and the --color-error field-error text are
   established in §10/§12; here we reinforce the invalid input's focus ring so
   an errored field keeps a VISIBLE ring, tinted to the error color instead of
   the default accent (the ring itself is never removed — see §12). */
.form-input[aria-invalid="true"]:focus-visible {
  outline-color: var(--color-error);
}

/* Make the per-field alert copy a touch stronger so it reads as an error. */
.field-error {
  font-weight: 500;
}

/* --- FORM STATUS REGION: submitting / success / error ---------------------
   role="status"/role="alert" live region. It carries [hidden] while idle (the
   UA display:none keeps it out of flow — we intentionally set NO display here,
   so hidden stays hidden). form.js mirrors form[data-state] onto it as
   [data-form-status][data-state="…"]. Each state is color-coded with adequate
   contrast: neutral while submitting, success green, error red. */
[data-form-status] {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Submitting — muted / neutral so it reads as "in progress", not an outcome. */
[data-form-status][data-state="submitting"] {
  background-color: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* Success — subtle success-tinted surface with a success border + success ink
   (dark green on a light tint keeps well above the 4.5:1 contrast floor). */
[data-form-status][data-state="success"] {
  background-color: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
  border-color: var(--color-success);
  color: var(--color-success);
}

/* Error — subtle error-tinted surface with an error border + error ink. */
[data-form-status][data-state="error"] {
  background-color: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  border-color: var(--color-error);
  color: var(--color-error);
}

/* --- SUBMIT BUTTON: disabled affordance + in-progress spinner (R1.6) ------
   While submitting, form.js sets [disabled] on the submit button (duplicate
   guard) and form[data-state="submitting"]. Disabled = lowered affordance
   (reduced opacity, not-allowed cursor, no hover lift). The inline spinner is
   a small token-sized ring appended via ::after, animated with a token-timed
   keyframe; prefers-reduced-motion disables the animation (also covered by the
   global reduce rule in animations.css, guarded again here for safety). */
button[data-form-submit][disabled],
.btn[disabled],
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

form[data-state="submitting"] [data-form-submit]::after {
  content: "";
  display: inline-block;
  width: var(--space-sm);
  height: var(--space-sm);
  margin-left: var(--space-xs);
  border: 1px solid color-mix(in srgb, var(--color-ink-inverse) 40%, transparent);
  border-top-color: var(--color-ink-inverse);
  border-radius: 100%;
  animation: br-spin var(--motion-slow) linear infinite;
}

@keyframes br-spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Respect reduced-motion: no spinning ring (still visible, just static). */
@media (prefers-reduced-motion: reduce) {
  form[data-state="submitting"] [data-form-submit]::after {
    animation: none;
  }
}

/* ===========================================================================
   19. HOME WELCOME CONTACT CARD — embedded dark card in the ivory welcome band
   ---------------------------------------------------------------------------
   A deep-navy contact card that sits as the right column of the welcome
   section's .section--split (text left, card right on desktop; stacked with
   the card below the text on mobile). It mirrors the reference's dark contact
   card but IN THE SITE PALETTE: --color-primary navy surface, --color-ink-inverse
   ivory text, and the brass .btn--primary submit. It reuses the shared
   .contact-form / .form-field / [data-form-status] hooks so js/form.js binds
   with no changes. Tokens exclusively for color / type / spacing / radius /
   elevation; the only raw literals are the permitted structural ones (0, 100%,
   1px hairlines, the 44px min tap target, and the media-query breakpoint widths
   that mirror --bp-tablet-max/--bp-mobile-max). Translucent light fills on the
   navy are built with color-mix so no hard-coded hex is introduced.
   =========================================================================== */

/* The dark card surface sitting in the ivory welcome section. */
.contact-card {
  background-color: var(--color-primary);
  color: var(--color-ink-inverse);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);            /* comfortable on mobile */
}

@media (min-width: 768px) {
  .contact-card {
    padding: var(--space-lg);          /* more generous on larger viewports */
  }
}

/* Card eyebrow + heading: readable brass eyebrow, ivory serif heading. */
.contact-card__eyebrow {
  color: var(--color-accent-soft);     /* ~6.5:1 on navy — AA */
}

.contact-card__heading {
  color: var(--color-ink-inverse);     /* override default navy heading ink */
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-md);
}

/* Labels sit on the navy surface — use inverse ink. */
.contact-card .form-label {
  color: var(--color-ink-inverse);
}

/* Inputs/textarea on navy: a subtly lighter translucent fill, ivory text, and
   a low-contrast ivory hairline border (decorative UI edge). */
.contact-card .form-input,
.contact-card__textarea {
  background-color: color-mix(in srgb, var(--color-ink-inverse) 8%, transparent);
  color: var(--color-ink-inverse);
  border: 1px solid color-mix(in srgb, var(--color-ink-inverse) 24%, transparent);
  border-radius: var(--radius);
}

/* Muted ivory placeholder text. */
.contact-card .form-input::placeholder,
.contact-card__textarea::placeholder {
  color: color-mix(in srgb, var(--color-ink-inverse) 60%, transparent);
}

/* Hover + focus: brighten the border; focus moves it to the readable brass. */
.contact-card .form-input:hover,
.contact-card__textarea:hover {
  border-color: color-mix(in srgb, var(--color-ink-inverse) 40%, transparent);
}

.contact-card .form-input:focus,
.contact-card__textarea:focus {
  border-color: var(--color-accent-soft);
  outline: none;                        /* the focus-visible ring below handles keyboard focus */
}

/* Keep the global focus-visible ring VISIBLE and legible on the dark card:
   switch it to the inverse (lighter brass) ring like the dark bands do (§12). */
.contact-card :focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* Textarea: full width, vertical-only resize, comfortable minimum height. */
.contact-card__textarea {
  width: 100%;
  resize: vertical;
  min-height: var(--space-lg);
}

/* Name + Phone row: stacked on mobile, side-by-side from the tablet breakpoint. */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Full-width submit inside the card (overrides the §18 width:auto at ≥768px). */
.contact-card__submit,
.contact-card .contact-card__submit {
  width: 100%;
  margin-top: var(--space-sm);
}

@media (min-width: 768px) {
  .contact-card .contact-card__submit {
    width: 100%;                        /* stay full-width in the card at all sizes */
  }
}

/* Confidentiality note: small, muted ivory, gentle top spacing. */
.contact-card__note {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--color-ink-inverse) 70%, transparent);
}

/* Field error copy must read on navy: use the lighter brass instead of the
   dark --color-error (which is unreadable on the deep navy surface). */
.contact-card .field-error {
  color: var(--color-accent-soft);
}

/* Invalid input border on navy: brass instead of the dark error red. */
.contact-card .form-input[aria-invalid="true"],
.contact-card .form-field.is-invalid .form-input {
  border-color: var(--color-accent-soft);
}

.contact-card .form-input[aria-invalid="true"]:focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* Form-status states restyled for legibility on the navy card: translucent
   light surfaces with ivory / brass ink instead of the light-bg §18 palette. */
.contact-card [data-form-status] {
  border-color: color-mix(in srgb, var(--color-ink-inverse) 24%, transparent);
  color: var(--color-ink-inverse);
}

.contact-card [data-form-status][data-state="submitting"] {
  background-color: color-mix(in srgb, var(--color-ink-inverse) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-ink-inverse) 24%, transparent);
  color: color-mix(in srgb, var(--color-ink-inverse) 80%, transparent);
}

.contact-card [data-form-status][data-state="success"] {
  background-color: color-mix(in srgb, var(--color-ink-inverse) 10%, transparent);
  border-color: var(--color-accent-soft);
  color: var(--color-ink-inverse);
}

.contact-card [data-form-status][data-state="error"] {
  background-color: color-mix(in srgb, var(--color-ink-inverse) 10%, transparent);
  border-color: var(--color-accent-soft);
  color: var(--color-accent-soft);
}

/* ===========================================================================
   BOOKING QUESTION MODAL — js/booking.js
   ---------------------------------------------------------------------------
   A small, accessible dialog shown before every "Book a Conversation" link
   opens the real scheduler. Tokens only for color/type/spacing/radius/
   elevation/motion. Permitted raw literals: 0, 100%, 1px, the 44px min tap
   target (no token exists), and the color-mix alpha percentage for the
   backdrop scrim. html.booking-modal-open locks background scroll while open.
   =========================================================================== */

html.booking-modal-open {
  overflow: hidden;
}

[data-booking-modal][hidden] {
  display: none;
}

[data-booking-modal] {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

/* Dark, semi-transparent scrim built from the primary token via color-mix. */
[data-booking-backdrop] {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.booking-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

@media (min-width: 768px) {
  .booking-modal__panel {
    padding: var(--space-xl) var(--space-lg);
  }
}

.booking-modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: var(--fs-h3);
  line-height: 1;
}

.booking-modal__close:hover {
  color: var(--color-primary);
}

.booking-modal__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.booking-modal__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-primary);
  margin-inline: auto;
  max-width: var(--measure);
}

.booking-modal__subtext {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  max-width: var(--measure);
  margin-inline: auto;
}

.booking-modal__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

@media (min-width: 480px) {
  .booking-modal__options {
    flex-direction: row;
    justify-content: center;
  }
}

.booking-modal__option {
  flex: 1;
}

/* ===========================================================================
   20. BETTER ROOMS METHOD — Relationship Audit, Phases, Future, Pathway
   ---------------------------------------------------------------------------
   Visual layer for the "Better Rooms Method" components (the diagnostic
   audit, numbered method phases, the coming-soon opportunity block, the
   client-journey pathway timeline, and the Home preview helpers). Tokens
   exclusively for color / type / spacing / radius / elevation / motion.
   The only raw literals are the permitted structural ones: 0, 100%, 1px
   hairlines, the small hover transform (translateY(-2px)), the 44px min
   tap target (no token exists), gradient stop percentages, the blueprint
   grid line spacing (a decorative texture size with no token), and the
   media-query breakpoint widths that mirror --bp-tablet-max/--bp-mobile-max
   (custom properties cannot be used in media conditions). Low-alpha tints
   are built with color-mix so no hard-coded hex is introduced. Decorative
   numerals / markers / arrows are safe to mark aria-hidden in the HTML.
   =========================================================================== */

/* --- 20.1 RELATIONSHIP AUDIT — the "blueprint / survey" diagnostic panel ---
   A refined architectural-survey card: a light surface with a subtle
   blueprint graph-paper texture (two layered low-alpha grid gradients),
   an accent top rule, and tasteful corner tick marks. The texture alpha is
   kept low so body-text contrast is never affected. */
.audit__panel {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);            /* comfortable on mobile */
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* Blueprint graph-paper grid: faint --color-border lines ~24px apart on a
     very light sand wash. Low alpha keeps text contrast intact. */
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--color-border) 55%, transparent) 0,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-border) 55%, transparent) 0,
      transparent 1px
    );
  background-size: 24px 24px, 24px 24px;
  background-position: 0 0, 0 0;
}

/* Thin accent top rule — a refined architectural touch across the panel. */
.audit__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-accent);
}

/* Small corner tick mark (top-right) — subtle survey detail, decorative. */
.audit__panel::after {
  content: "";
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: var(--space-sm);
  height: var(--space-sm);
  border-top: 1px solid var(--color-accent);
  border-right: 1px solid var(--color-accent);
}

@media (min-width: 768px) {
  .audit__panel {
    padding: var(--space-lg);          /* more generous on larger viewports */
  }
}

/* "Start Here" badge: brass caps on a soft accent-tinted chip. */
.audit__label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent-soft) 32%, transparent);
  border-radius: var(--radius);
}

.audit__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--color-primary);
}

.audit__intro {
  margin-top: var(--space-sm);
  max-width: var(--measure);
  color: var(--color-text-muted);
}

/* Diagnostic questions: 1 col mobile, 2 cols from the tablet breakpoint. */
.audit__questions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .audit__questions {
    grid-template-columns: 1fr 1fr;
  }
}

/* Each question row: a blueprint "node" — accent left edge + a node dot. */
.audit__question {
  position: relative;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  color: var(--color-text);
  line-height: var(--lh-body);
  background-color: color-mix(in srgb, var(--color-bg-alt) 40%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius);
}

/* Blueprint node dot at the accent edge. */
.audit__question::before {
  content: "";
  position: absolute;
  top: var(--space-md);
  left: 0;
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: 100%;
  background-color: var(--color-accent);
  transform: translateX(-50%);
}

/* Diagnostic blueprint image inside the audit panel — decorative-but-meaningful. */
.audit__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-top: var(--space-md);
}

/* --- 20.2 PHASES — numbered method phases -------------------------------- */
.phases {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.phase {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Alternate-background phase block (opt-in via .phase--alt in the HTML). */
.phase--alt {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

@media (min-width: 768px) {
  .phase--alt {
    padding: var(--space-lg);
  }
}

/* Two-column phase on large viewports: large number/title left, content right. */
@media (min-width: 1024px) {
  .phase {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-lg);
    align-items: start;
  }
}

/* Very large decorative serif numeral (aria-hidden in the HTML). */
.phase__num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-hero);
  line-height: 1;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-accent) 80%, transparent);
}

/* On the dark band a soft-brass numeral reads better on navy. */
.section--dark .phase__num {
  color: color-mix(in srgb, var(--color-accent-soft) 85%, transparent);
}

.phase__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--color-primary);
  margin-top: var(--space-xs);
}

.phase__intro {
  margin-top: var(--space-sm);
  max-width: var(--measure);
  color: var(--color-text-muted);
}

/* Phase 1's two groups: 1 col mobile, 2 cols from the tablet breakpoint. */
.phase__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .phase__cols {
    grid-template-columns: 1fr 1fr;
  }
}

.phase__group-heading {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

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

/* Each item: a custom brass diamond marker + readable body text. */
.phase__item {
  position: relative;
  padding-left: var(--space-md);
  color: var(--color-text);
  line-height: var(--lh-body);
}

/* Diamond tick marker (decorative, safe to hide from AT). */
.phase__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) * 0.5em);
  width: var(--space-xs);
  height: var(--space-xs);
  background-color: var(--color-accent);
  transform: translateY(-50%) rotate(45deg);
}

/* On the dark band, markers/headings shift to the soft brass. */
.section--dark .phase__group-heading,
.section--dark .phase__item::before {
  color: var(--color-accent-soft);
}

.section--dark .phase__item::before {
  background-color: var(--color-accent-soft);
}

.section--dark .phase__title {
  color: var(--color-ink-inverse);
}

.section--dark .phase__item {
  color: var(--color-ink-inverse);
}

/* --- 20.3 FUTURE / COMING SOON — the "on the horizon" opportunity block --- */
.future {
  background-color: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

@media (min-width: 768px) {
  .future {
    padding: var(--space-lg);
  }
}

/* Coming-soon pill: navy caps on a soft-brass fill, AA legible. */
.coming-soon-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-primary);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius);
}

.future__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--color-primary);
  margin-top: var(--space-sm);
}

.future__body {
  margin-top: var(--space-sm);
  max-width: var(--measure);
  color: var(--color-text-muted);
}

/* The guiding principle line: emphasized serif, generous top spacing. */
.future__principle {
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  max-width: var(--measure);
  color: var(--color-primary);
}

/* On the dark band, future block reads as an outline on navy. */
.section--dark .future {
  background-color: color-mix(in srgb, var(--color-ink-inverse) 6%, transparent);
  border-color: var(--color-accent-soft);
}

.section--dark .future__title,
.section--dark .future__principle {
  color: var(--color-ink-inverse);
}

.section--dark .future__body {
  color: var(--color-ink-inverse);
}

/* --- 20.4 PATHWAY — the client journey as a vertical timeline ------------- */
.pathway {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;                              /* connectors provide the vertical rhythm */
  max-width: var(--measure);
  margin-inline: auto;
}

/* Each stage: a raised surface card that lifts on hover. */
.pathway__stage {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  transition:
    transform var(--motion-fast) var(--easing),
    box-shadow var(--motion-base) var(--easing);
}

.pathway__stage:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pathway__stage-name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-primary);
}

.pathway__accomplish {
  margin-top: var(--space-xs);
  max-width: var(--measure);
  color: var(--color-text-muted);
}

/* Downward-flow connector between stages (centered line + arrowhead).
   Rendered as its own element in the HTML; decorative, safe to aria-hide. */
.pathway__connector {
  position: relative;
  align-self: center;
  width: 1px;
  height: var(--space-lg);
  background-color: var(--color-accent);
}

/* Centered arrowhead at the bottom of each connector. */
.pathway__connector::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--space-xs);
  height: var(--space-xs);
  border-right: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  transform: translate(-50%, 50%) rotate(45deg);
}

/* Fallback connector if the HTML omits explicit .pathway__connector nodes:
   draw the flow with an ::after on every stage except the last. */
.pathway__stage:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: var(--space-lg);
  margin-inline: auto;
  background-color: var(--color-accent);
}

/* When explicit connectors are present, suppress the fallback to avoid doubling. */
.pathway__connector + .pathway__stage:not(:last-child)::after,
.pathway__stage:has(+ .pathway__connector)::after {
  content: none;
}

/* Coming-soon stage: de-emphasized dashed outline + reduced-fill surface. */
.pathway__stage--soon {
  background-color: color-mix(in srgb, var(--color-bg-alt) 60%, var(--color-surface));
  border-style: dashed;
  border-color: var(--color-border);
  box-shadow: none;
}

.pathway__stage--soon .pathway__stage-name {
  color: var(--color-text-muted);
}

/* --- 20.5 HOME PREVIEW HELPERS ------------------------------------------- */
/* Responsive grid of phase preview cards (cards reuse the shared .card class):
   1 col mobile, 2 col at the tablet breakpoint, 4 col at desktop. */
.method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .method-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===========================================================================
   19. SPAM HONEYPOT — invisible decoy field (NOT a visual form change)
   ---------------------------------------------------------------------------
   The .form-hp block wraps a decoy "company" input that real users never see
   or focus. It is pulled far off-screen (not display:none, so bots that skip
   hidden fields still fill it). If it arrives non-empty, the server treats the
   submission as spam. Paired with the hidden _ts time-trap input (no styling
   needed — type="hidden" is never rendered).
   =========================================================================== */
.form-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===========================================================================
   STATS BAND — animated "by the numbers" figures (home.stats)
   ---------------------------------------------------------------------------
   Home-only band that counts up when scrolled into view (js/stats.js). Lives on
   a .section--dark navy band, so figures use the soft-brass accent for punch and
   inverse ink for labels. Tokens exclusively; the only raw literals are the
   permitted structural ones (0, grid minmax floor, and 1ch tabular sizing).
   =========================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg) var(--space-md);
  margin: var(--space-lg) 0 0;
  padding: 0;
}

.stat-figure {
  margin: 0;
  text-align: center;
}

.stat-figure__value {
  margin: 0;
}

/* The animated numeral. Tabular figures keep width stable while counting so the
   label below never jitters as digits change. */
.stat-figure__num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-hero);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-accent-soft);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.stat-figure__label {
  margin-top: var(--space-xs);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-inverse);
}

.stats-band__note {
  margin: var(--space-lg) auto 0;
  max-width: var(--measure);
  text-align: center;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

/* Tablet: two columns. */
@media (max-width: 1023px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: keep two compact columns so the band still reads as a set, not a list. */
@media (max-width: 767px) {
  .stats-grid {
    gap: var(--space-md) var(--space-sm);
  }
}

/* ===========================================================================
   MEDIA BREAK — wide supporting image band (How It Works)
   ---------------------------------------------------------------------------
   A full-width image used as a visual rest between text-heavy sections. The
   image is cropped to a wide banner ratio via aspect-ratio + object-fit so a
   tall source photo never dominates the page. Tokens exclusively (the ratio and
   object-fit keyword are permitted structural literals).
   =========================================================================== */
.media-break {
  margin: 0;
}

.media-break__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* On narrow screens a slightly taller crop keeps the subject readable. */
@media (max-width: 767px) {
  .media-break__img {
    aspect-ratio: 4 / 3;
  }
}

/* ===========================================================================
   METHOD SECTION BACKGROUND — faint blended photo (Home "The Method")
   ---------------------------------------------------------------------------
   Reuses images/img1.jpg as a decorative, low-opacity background behind the
   home "The Method" section. A ::before layer holds the image so section
   content stays above it; a vertical mask fades the top/bottom edges so the
   photo dissolves into the page background instead of hard-edging. Kept faint
   so the navy body text keeps well above the contrast floor (R11.1).
   =========================================================================== */
.method-bg {
  position: relative;
  isolation: isolate; /* own stacking context so ::before sits behind content only */
}

.method-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/img1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.08; /* very faint — decorative blend, not a focal image */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

/* Honor reduced-data / print: drop the decorative image. */
@media print {
  .method-bg::before { display: none; }
}