/* ==========================================================================
   V2 Fixes — Cargonomics Website
   Loaded AFTER tokens-cargonomics.css. Contains only V2-specific overrides.
   Source: visual-ux-audit-2026-04-11.md
   ========================================================================== */

/* --- Fix 7: About page 2-column company profile --- */
.company-profile__layout-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl, 48px);
  align-items: start;
}

@media (max-width: 767px) {
  .company-profile__layout-v2 {
    grid-template-columns: 1fr;
  }
}

.company-profile__image-v2 img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* --- Fix 8: Leadership card equal heights --- */
/* Works WITH the grid in style.css, not against it */
.leadership__grid {
  align-items: stretch;
}

.leader-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.leader-card__info {
  flex: 1;
}

/* --- Fix 13: Contact inquiry section differentiation --- */
.form-section--inquiry-v2 {
  background: var(--color-stone, #F0EBE0) !important;
  border-top: 2px solid rgba(var(--color-accent-navy-rgb, 17, 41, 75), 0.08);
}

/* --- Fix 14: Social proof line near submit buttons --- */
.form__social-proof {
  text-align: center;
  margin-top: var(--space-md, 16px);
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.85rem;
  color: var(--color-text-muted, #6c757d);
  font-style: italic;
}

/* --- Partner placeholder card styling --- */
/* Now uses .leader-card__photo--placeholder from style.css
   with inline styles on the img. No custom class needed. */

/* ============================================================
   PRD 15: Social & Messaging Icons
   - Footer social row (LinkedIn, Facebook, Instagram)
   - Floating contact buttons (WhatsApp, Zalo) bottom-right
   URLs read from docs/infra/site-config.md (PRD 25 SoT).
   Markup in public/index.html. Icons in public/img/icons/.
   ============================================================ */

/* Footer social row */
.footer__social {
  margin-top: var(--space-lg);
}

.footer__social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  text-decoration: none;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.18);
}

.footer__social-icon {
  width: var(--icon-size-social);
  height: var(--icon-size-social);
  /* Icons are loaded as <img src="*.svg"> with fill="currentColor".
     Force-white via filter so the white-on-Flexed-Blue contrast holds
     regardless of the SVG file's default fill. */
  filter: brightness(0) invert(1);
}

.footer__social-link[data-status="pending-marilyn"] {
  /* Marilyn-pending placeholders (#TBD-* hrefs). Slight desaturation cue
     so the placement is visible to reviewers but doesn't read as live. */
  opacity: 0.65;
}

/* Floating contact buttons (PRD 15 A). Fixed cluster bottom-right.
   WhatsApp goes to the live wa.me URL; Zalo carries the #TBD placeholder. */
.floating-contact {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 100;
}

.floating-contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.floating-contact__btn:hover,
.floating-contact__btn:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.floating-contact__btn--whatsapp { background: var(--color-whatsapp); }
.floating-contact__btn--zalo     { background: var(--color-zalo); }

.floating-contact__btn[data-status="pending-marilyn"] {
  /* Same visual cue as footer pending-marilyn placeholders. The Zalo button
     stays visibly present so Marilyn sees the placement and supplies the URL. */
  opacity: 0.85;
}

.floating-contact__icon {
  width: 1.5rem;
  height: 1.5rem;
  /* Force white over the colored brand backgrounds. */
  filter: brightness(0) invert(1);
}

@media (max-width: 480px) {
  .floating-contact {
    bottom: var(--space-md);
    right: var(--space-md);
  }
  .floating-contact__btn {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ============================================================
   PRD 22 v7 inline-style extraction (mobile audit closure)
   Moves inline styles on common chrome (logo, footer version,
   tagline, mission) to class-based rules so WordPress/Elementor
   migration binds them to ACF fields without rewriting HTML.
   ============================================================ */

/* Logo sizing: was inline style="height: 50px; width: auto;"
   D61 2026-05-04: enlarged per Marilyn + Vasso, then reined in after the
   D63 cropped-asset swap. The cropped logo file has the same 280x125 canvas
   but the letterforms fill the canvas edge-to-edge (no internal whitespace),
   so at the same CSS height it reads ~25% bigger than the original. Clamp
   reduced from (64, 7vw, 96) to (48, 5vw, 64) to bring the visual letter
   size back down to roughly the original 50px-asset proportions while still
   delivering on Marilyn's "logo bigger". Mobile floor 48px stays clear of
   the burger toggle at 360px. */
.nav__logo img {
  height: clamp(48px, 5vw, 64px);
  width: auto;
  display: block;
}

/* Footer logo sizing: was inline style="height: 40px; width: auto; margin-bottom: 1rem;" */
.footer__logo {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 1rem;
}

/* Footer version badge. The version string is the literal text in the
   <span class="footer__version">v1</span> on each page (Flexed "Version
   Management" convention: the span IS the single version artifact). The
   Cloudflare Pages middleware appends the commit SHA after it. */
.footer__version {
  opacity: 0.5;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  font-family: var(--font-body);
}

/* Commit SHA suffix injected by functions/_middleware.js on Cloudflare Pages.
   Absent on local dev and the GH Pages mirror. See docs/deferred-items.md D33. */
.footer__commit {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* Company-profile tagline (About page): was inline on <p> */
.company-profile__tagline {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--color-secondary);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.05em;
}

/* Company-profile mission box (About page): was inline on <div> */
.company-profile__mission {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: rgba(var(--color-primary-rgb), 0.04);
  border-left: 3px solid var(--color-secondary);
}

.company-profile__mission p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}

.company-profile__mission strong {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* Company-profile address note: was inline on <div> */
.company-profile__address {
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* PRD 22: nav links must have at least 44x44px touch target on mobile for WCAG AA */
.nav__links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* PRD 22: Trusted Partners tile uniformity at desktop (was variable based on text length).
   Setting min-height prevents ragged grid heights across 4 columns. */
.trusted-partners__tile {
  min-height: 80px;
}

@media (min-width: 1024px) {
  .trusted-partners__tile {
    min-height: 96px;
  }
}

/* ============================================================
   v7 placeholder cards (reinstated 2026-04-16 per Vasso)
   Second trainer / second leader cards carry a visible "Coming
   soon" badge so they read as intentional pre-announcements
   rather than missing data. Applies to both .trainer-card-v2
   and .leader-card via shared modifier + badge class names.
   ============================================================ */

.trainer-card-v2--placeholder,
.leader-card--placeholder {
  position: relative;
}

/* Subtle gold-dashed outline on the placeholder card so it reads
   as a distinct "reserved slot" rather than a normal profile card
   with a missing photo. White background to match the sibling
   regular card on the same row (D34, 2026-04-17). The dashed gold
   border + Coming soon badge alone carry the "reserved" signal. */
.trainer-card-v2--placeholder,
.leader-card--placeholder {
  border: 1px dashed rgba(var(--color-accent-gold-rgb, 212, 180, 104), 0.45);
  background: var(--color-white);
}

.trainer-card-v2__coming-soon-badge,
.leader-card__coming-soon-badge {
  position: absolute;
  top: var(--space-md, 16px);
  right: var(--space-md, 16px);
  background: var(--color-secondary);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.15);
}

/* Placeholder photo treatment: logo centered at reduced size + opacity.
   Same visual cue as the archived version but with a proper badge so
   it reads as intentional. */
.trainer-card-v2--placeholder .trainer-placeholder-logo,
.leader-card--placeholder .leader-card__photo--placeholder {
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 240px;
}

.trainer-card-v2--placeholder .trainer-placeholder-logo img,
.leader-card--placeholder .leader-card__photo--placeholder img {
  width: 45%;
  max-width: 140px;
  height: auto;
  opacity: 0.25;
  object-fit: contain;
}

/* Body copy slightly muted so the card is clearly pre-announcement */
.trainer-card-v2--placeholder .trainer-card-v2__bio,
.leader-card--placeholder .leader-card__bio {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ==========================================================================
   TRAINER CARD v3 — Placeholder + coming-soon badge
   Mirrors the v2 pattern (dashed gold border, navy logo panel, gold badge).
   Each variant sets its own aspect ratio on `.trainer-card-v3__media`,
   the placeholder uses the same rules regardless of variant modifier.
   ========================================================================== */

.trainer-card-v3--placeholder {
  position: relative;
  border: 1px dashed rgba(var(--color-secondary-rgb), 0.55);
  background: var(--color-white);
}

.trainer-card-v3--placeholder .trainer-card-v3__media {
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.trainer-placeholder-logo-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.trainer-placeholder-logo-v3 img {
  width: 45%;
  max-width: 140px;
  height: auto;
  opacity: 0.25;
  object-fit: contain;
}

.trainer-card-v3__coming-soon-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--color-secondary);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 10px;
  z-index: 3;
  line-height: 1;
}

.trainer-card-v3--placeholder .trainer-card-v3__bio,
.trainer-card-v3--placeholder .trainer-card-v3__teaches,
.trainer-card-v3--placeholder .trainer-card-v3__tagline {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ==========================================================================
   STYLEGUIDE — Deprecated component badge (new pattern, 2026-04-17)
   Marks a styleguide section as deprecated but still rendered in-page.
   Used for components replaced but not yet archived (one-cohort grace).
   Once the replacement is stable, the deprecated entry migrates to
   docs/archived-components.md and this badge is removed.
   ========================================================================== */

.sg-deprecated-badge {
  display: block;
  background: rgba(var(--color-secondary-rgb), 0.12);
  border-left: 3px solid var(--color-secondary);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}

.sg-deprecated-badge strong {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-right: 8px;
}

.sg-deprecated-badge a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* ==========================================================================
   STYLEGUIDE — Collapsible technical details (new pattern, 2026-04-17)
   Each sg-section wraps its explainer paragraph + <dl class="sg-meta"> in a
   native <details class="sg-details"> block, default collapsed, so the page
   reads as a visual catalogue for non-technical reviewers (Marilyn, Elias)
   while still exposing class names, tokens, and Elementor targets on demand.
   ========================================================================== */

.sg-details {
  background: rgba(var(--color-primary-rgb), 0.03);
  border: 1px solid rgba(var(--color-primary-rgb), 0.08);
  padding: 0 16px;
  margin: 0 0 var(--space-lg);
}

.sg-details[open] {
  padding: 0 16px 16px;
  background: rgba(var(--color-primary-rgb), 0.04);
}

.sg-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 0;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sg-details > summary::-webkit-details-marker { display: none; }

.sg-details > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-secondary);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.sg-details[open] > summary::before {
  content: "\2212"; /* minus sign */
}

.sg-details > summary:hover {
  color: var(--color-secondary);
}

.sg-details > summary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

.sg-details > .sg-desc,
.sg-details > .sg-meta {
  margin-top: var(--space-sm);
}

.sg-details > .sg-desc:first-of-type {
  margin-top: 0;
}

/* ============================================================
   v9 (2026-04-21): Form label font parity with legend.
   Vasso feedback: Full Name / field labels should share the
   "Personal Information" legend's font family.
   ============================================================ */

.form__label {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.02em;
}

/* ============================================================
   Leader card --timeline variant (D52/D53 explored, D55 reverted)
   Lede paragraph + 5-row career timeline + degree/location footer.
   Briefly live on about.html via commits 1ebfca7 (Elias, D52) and
   8442921 (Anthony parity, D53), then reverted same session in
   D55 in favour of the paragraph .leader-card__bio default for
   visual symmetry.
   These rules are KEPT so the timeline variant remains usable as
   a styleguide-only reference (sg-leader-card-timeline section in
   styleguide.html). Do not delete unless the styleguide entry is
   also removed.
   ============================================================ */
.leader-card__lede {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(var(--color-primary-rgb, 17, 41, 75), 0.78);
  margin: 0 0 var(--space-md, 16px);
}

.leader-card__timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md, 16px);
  display: flex;
  flex-direction: column;
}

.leader-card__timeline-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-sm, 12px);
  align-items: center;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(var(--color-primary-rgb, 17, 41, 75), 0.08);
  font-size: 0.88rem;
}

.leader-card__timeline-row:first-child {
  border-top-color: rgba(var(--color-primary-rgb, 17, 41, 75), 0.14);
}

.leader-card__timeline-period {
  font-family: var(--font-body, "Open Sans"), sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.4px;
  color: var(--color-primary, #000F9F);
  background: rgba(var(--color-accent-gold-rgb, 212, 180, 104), 0.18);
  padding: 0.22rem 0.55rem;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
  justify-self: start;
  align-self: center;
}

.leader-card__timeline-role {
  color: var(--color-primary, #000F9F);
  line-height: 1.4;
}

.leader-card__meta {
  font-size: 0.8rem;
  color: rgba(var(--color-primary-rgb, 17, 41, 75), 0.62);
  margin: 0;
  padding-top: var(--space-sm, 12px);
  border-top: 1px solid rgba(var(--color-primary-rgb, 17, 41, 75), 0.12);
}

/* Mobile: stack period above role for narrow widths so role text
   doesn't squash to 2-3 word column. */
@media (max-width: 480px) {
  .leader-card__timeline-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .leader-card__timeline-period {
    justify-self: start;
  }
}

/* ============================================================
   D62 2026-05-04: Mobile fallback for .nav__brand
   Desktop renders Coaching / Connecting / Consulting as a 3-row
   stacked lockup beside the (bigger) logo. On mobile that would
   make the header tall and cramp the burger toggle, so we revert
   to: logo on top, tagline collapsed to a single bulleted line
   underneath (matches the prior MVP layout).
   ============================================================ */
@media (max-width: 767px) {
  .nav__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .nav__tagline {
    flex-direction: row;
    font-size: 0.7rem;
    line-height: 1.15;
    margin-top: 1px;
  }
  .nav__tagline-word + .nav__tagline-word::before {
    content: " \2022 ";
    margin: 0 4px;
    color: var(--color-secondary);
  }
}

/* ==========================================================================
   FLEXED HOMEPAGE COMPONENTS (added 2026-05-18, client-demo pass)
   New BEM blocks specific to Flexed page-level work. All values bind to
   tokens-flexed.css; no hardcoded hex / font / spacing above 4px.
   Reuses style.css for nav, footer, button base, container, skip-link.
   ========================================================================== */

/* --- NAV: Flexed override (white surface, no underline accent on hover) --- */
.nav {
  background: var(--color-surface-header);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
}

.nav__brand {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.nav__brand-text {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Override the gold underline accent from style.css with a solid Flexed Blue
   underline (we are not using gold as primary brand). */
.nav__links a::after {
  background: var(--color-primary);
}

.nav__links a {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.nav__links a:hover {
  color: var(--color-primary);
}

/* Nav CTA pill — Flexed Blue, white text. Overrides .nav__cta from style.css
   (which used gold). */
.nav__cta {
  padding: 10px 18px;
  background: var(--color-primary);
  color: var(--color-white) !important;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.nav__cta:hover {
  background: var(--color-primary-dark);
  color: var(--color-white) !important;
  transform: translateY(-1px);
}

.nav__cta::after {
  display: none;
}

/* Mobile fallback: stack burger toggle nicely, reset the Cargonomics-era
   column-stacked nav__brand. */
@media (max-width: 767px) {
  .nav__brand {
    flex-direction: row;
    align-items: center;
  }
}

/* --- BUTTONS: Flexed primary + secondary --- */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--btn-radius);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--btn-radius);
  /* No padding override: secondary must share the .btn / .btn--large padding
     cascade with .btn--primary so the paired hero CTAs match height. A smaller
     padding here (fixes.css loads after style.css) would beat .btn--large's
     18px 40px and leave the secondary 12px shorter than the primary. */
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* --- HERO: empty-space centred variant for Flexed --- */
.hero.hero--center {
  display: block;
  background: var(--color-surface-body);
  padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 10vw, 140px);
  min-height: 0;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
  position: relative;
  overflow: hidden;
}

/* Decorative corner accent (olive warmth tone) — empty space rather than
   stock photo, keeps the "premium" reading per Phase A. */
.hero.hero--center::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 38vw;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  background: var(--color-accent-warmth);
  opacity: 0.10;
  transform: translate(35%, -45%);
  border-radius: 50%;
  pointer-events: none;
}

.hero.hero--center::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28vw;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  background: var(--color-accent-navy);
  opacity: 0.06;
  transform: translate(-50%, 60%);
  border-radius: 50%;
  pointer-events: none;
}

.hero.hero--center .hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
  padding: 0;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent-warmth);
  margin: 0 0 var(--space-lg);
}

.hero.hero--center .hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 var(--space-xl);
  max-width: 18ch;
}

.hero.hero--center .hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent-warmth);
}

.hero.hero--center .hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-text);
  max-width: 60ch;
  margin: 0 0 var(--space-2xl);
}

.hero.hero--center .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* --- SECTION DEFAULTS --- */
.brand-statement,
.spaces,
.amenities,
.memberships,
.tenants,
.location,
.cta-strip {
  padding: clamp(56px, 7vw, 96px) 0;
}

/* --- BRAND STATEMENT --- */
.brand-statement {
  background: var(--color-surface-header);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.06);
}

.brand-statement__inner {
  max-width: 760px;
  margin: 0 auto;
}

.brand-statement__overline {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent-warmth);
  margin: 0 0 var(--space-lg);
}

.brand-statement__body {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

/* --- SPACES --- */
.spaces {
  background: var(--color-surface-body);
}

.spaces__header,
.amenities__header,
.memberships__header,
.tenants__header {
  margin: 0 0 var(--space-3xl);
  max-width: 720px;
}

.spaces__title,
.amenities__title,
.memberships__title,
.tenants__title,
.location__title,
.cta-strip__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  margin: var(--space-sm) 0 0;
}

.memberships__lede {
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: var(--space-md) 0 0;
  max-width: 56ch;
}

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

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

.space-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-primary-rgb), 0.10);
  border-radius: var(--card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.space-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-primary-rgb), 0.22);
  box-shadow: 0 18px 40px -22px rgba(var(--color-primary-rgb), 0.35);
}

.space-card--featured {
  border-color: var(--color-primary);
  border-width: 2px;
}

.space-card__badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 3px;
}

.space-card__media {
  aspect-ratio: 16 / 10;
  background: var(--color-secondary-dark);
  position: relative;
  overflow: hidden;
}

.space-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-primary-rgb), 0) 60%);
}

/* Per-variant geometric pattern so each card reads visually distinct even
   before the real space photos land (PRD 14). Uses tokens only. */
.space-card__media--hot {
  background:
    repeating-linear-gradient(45deg, rgba(var(--color-primary-rgb), 0.07) 0 12px, transparent 12px 28px),
    var(--color-secondary);
}

.space-card__media--dedicated {
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--color-primary-rgb), 0.10) 0 4px, transparent 5px) 0 0 / 32px 32px,
    var(--color-secondary-dark);
}

.space-card__media--private {
  background:
    linear-gradient(var(--color-primary) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.16) 1px, transparent 1px) 0 0 / 28px 100%,
    rgba(var(--color-primary-rgb), 0.04);
  opacity: 0.55;
}

.space-card__body {
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.space-card__name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.space-card__desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
  flex: 1;
}

.space-card__price {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0;
}

.space-card__price strong {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

.space-card__link {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--space-sm);
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.space-card__link:hover {
  border-bottom-color: var(--color-primary);
}

.spaces__footnote,
.memberships__footnote {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: var(--space-xl) 0 0;
  font-style: italic;
}

/* --- AMENITIES --- */
.amenities {
  background: var(--color-surface-header);
}

.amenities__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
}

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

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

.amenity {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  border-top: 2px solid var(--color-primary);
  background: var(--color-surface-body);
}

.amenity__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: var(--color-surface-header);
  border-radius: 4px;
  margin-bottom: var(--space-xs);
}

.amenity__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  letter-spacing: -0.005em;
}

.amenity__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}

/* --- MEMBERSHIPS --- */
.memberships {
  background: var(--color-surface-body);
}

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

@media (min-width: 768px) {
  .memberships__grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.tier-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-primary-rgb), 0.10);
  border-radius: var(--card-radius);
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.tier-card--featured {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.tier-card--featured .tier-card__kicker,
.tier-card--featured .tier-card__name,
.tier-card--featured .tier-card__amount,
.tier-card--featured .tier-card__unit,
.tier-card--featured .tier-card__list li {
  color: var(--color-white);
}

.tier-card__badge {
  position: absolute;
  top: -14px;
  left: var(--space-xl);
  background: var(--color-accent-warmth);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
}

.tier-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.10);
}

.tier-card--featured .tier-card__head {
  border-bottom-color: rgba(var(--color-white-rgb), 0.2);
}

.tier-card__kicker {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-warmth);
  margin: 0;
}

.tier-card__name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.tier-card__price {
  margin: var(--space-sm) 0 0;
}

.tier-card__amount {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

.tier-card__unit {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-left: 4px;
}

.tier-card--featured .tier-card__unit {
  color: rgba(var(--color-white-rgb), 0.7);
}

.tier-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.tier-card__list li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);
  padding-left: var(--space-lg);
  position: relative;
}

.tier-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--color-accent-warmth);
  border-radius: 50%;
}

.tier-card--featured .tier-card__list li::before {
  background: var(--color-accent-gold);
}

.tier-card__cta {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.tier-card--featured .tier-card__cta {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}

.tier-card--featured .tier-card__cta:hover {
  background: var(--color-secondary);
  color: var(--color-primary);
  border-color: var(--color-secondary);
}

/* --- TENANTS / TENANT PROFILE --- */
.tenants {
  background: var(--color-surface-header);
}

.tenant-profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
  background: var(--color-surface-body);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-2xl);
  border-radius: var(--card-radius);
}

@media (min-width: 768px) {
  .tenant-profile {
    grid-template-columns: 220px 1fr;
    padding: var(--space-3xl);
    gap: var(--space-3xl);
  }
}

.tenant-profile__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 220px;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--card-radius);
  overflow: hidden;
}

.tenant-profile__monogram {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -0.05em;
}

.tenant-profile__name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.01em;
}

.tenant-profile__role {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--color-text);
  line-height: 1.55;
  margin: 0 0 var(--space-lg);
}

.tenant-profile__quote {
  margin: 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.12);
}

.tenant-profile__quote p {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-primary);
  margin: 0 0 var(--space-md);
}

.tenant-profile__attribution {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.tenant-profile__attribution cite {
  font-style: normal;
  font-weight: 600;
  color: var(--color-text);
}

/* --- LOCATION --- */
.location {
  background: var(--color-surface-body);
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 768px) {
  .location__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

.location__address {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: var(--space-md) 0 var(--space-lg);
}

.location__notes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.location__notes li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  padding-left: var(--space-lg);
  position: relative;
}

.location__notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--color-accent-warmth);
}

.location__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  aspect-ratio: 4 / 3;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--card-radius);
  position: relative;
  overflow: hidden;
}

.location__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(var(--color-white-rgb), 0.10) 0 80px, transparent 100px),
    radial-gradient(circle at 30% 80%, rgba(var(--color-white-rgb), 0.08) 0 60px, transparent 80px);
}

.location__panel-label {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  z-index: 1;
}

.location__panel-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  opacity: 0.8;
  z-index: 1;
}

/* --- CTA STRIP --- */
/* Navy invitation band (accent use of --color-accent-navy). Deliberately more
   spacious than sibling sections (those run clamp(56px, 7vw, 96px)): the larger
   fluid padding below gives the closing CTA room to breathe, the way a good
   coworking foyer does. */
.cta-strip {
  background: var(--color-accent-navy);
  color: var(--color-white);
  padding: clamp(72px, 9vw, 120px) 0;
}

.cta-strip__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 768px) {
  .cta-strip__inner {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-3xl);
  }
}

.cta-strip__title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.13;
  color: var(--color-white);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.015em;
}

.cta-strip__body {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(var(--color-white-rgb), 0.85);
  max-width: 50ch;
  margin: 0;
}

.cta-strip__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .cta-strip__actions {
    align-items: flex-end;
  }
}

.cta-strip .btn--primary {
  background: var(--color-white);
  color: var(--color-accent-navy);
  border-color: var(--color-white);
}

.cta-strip .btn--primary:hover {
  background: var(--color-accent-gold);
  color: var(--color-accent-navy);
  border-color: var(--color-accent-gold);
}

/* The global .btn--primary:focus-visible only swaps the background (no ring),
   which reads poorly for this white-on-navy button. Add an explicit gold ring
   so keyboard focus stays clearly visible against the dark CTA ground (AA). */
.cta-strip .btn--primary:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}

.cta-strip__link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(var(--color-white-rgb), 0.85);
  border-bottom: 1px solid rgba(var(--color-white-rgb), 0.4);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.cta-strip__link:hover {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

/* --- FOOTER additions (nav list + Flexed wordmark) ---
   Footer stays Flexed Blue (the locked --footer-bg / --color-primary). Navy is
   an accent only in this brand, so the page does not close on a navy band; it
   closes on the primary blue. The navy CTA strip sits directly above, and a
   thin gold hairline (the documented "dividers" use of --color-accent-gold)
   marks that boundary, turning what was a hard navy -> blue seam into an
   intentional divider. The bottom row reserves a right-hand gutter (see
   .footer__bottom) so the copyright / version line clears the fixed WhatsApp +
   Zalo floating cluster at full scroll. */
.footer {
  background: var(--color-primary);
  border-top: 1px solid rgba(var(--color-accent-gold-rgb), 0.28);
  padding: var(--space-3xl) 0;
}

/* Reserve a right gutter on the bottom row so the copyright + version (plus the
   middleware-injected commit SHA) clear the fixed WhatsApp + Zalo cluster, which
   is ~3rem wide and sits at var(--space-lg) from the viewport edge. The cluster
   is two buttons tall, so a bottom-padding approach would not reliably clear it;
   the horizontal gutter does, on every viewport. */
.footer__bottom {
  padding-right: calc(var(--space-3xl) + var(--space-xl));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
}

/* Footer credit link (third item on the bottom row, between copyright and
   version). Muted white that warms to gold on hover, matching the footer
   nav-list interaction. */
.footer__credit {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(var(--color-white-rgb), 0.6);
  transition: color var(--transition-fast);
}

.footer__credit:hover,
.footer__credit:focus-visible {
  color: var(--color-accent-gold);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  align-items: center;
}

@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.footer__brand-text {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--color-white);
  display: block;
}

.footer__tagline {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(var(--color-white-rgb), 0.7);
  margin: var(--space-xs) 0 0;
}

.footer__nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
  padding: 0;
  margin: 0;
}

.footer__nav-list a {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(var(--color-white-rgb), 0.75);
  transition: color var(--transition-fast);
}

.footer__nav-list a:hover {
  color: var(--color-accent-gold);
}

/* ==========================================================================
   FLEXED HOMEPAGE — Client-demo pass (2026-05-18b)
   New BEM blocks for the photo-led homepage rework. Reference patterns:
   WeWork (hero overlay card), The Hive Thao Dien (alternating editorial
   blocks, named-host card, photo-led tier cards), Toong (display-heading
   editorial moment, photo-backed location).
   All values bind to tokens-flexed.css. No hardcoded hex / font / spacing.
   ========================================================================== */

/* --- HERO photo + overlay card variant ---------------------------------- */
.hero.hero--photo {
  position: relative;
  background: var(--color-surface-body);
  padding: 0;
  min-height: clamp(560px, 80vh, 760px);
  overflow: hidden;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
}

.hero.hero--photo .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero.hero--photo .hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark gradient overlay so the white card has contrast against the photo. */
.hero.hero--photo .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(var(--color-primary-rgb), 0.55) 0%,
    rgba(var(--color-primary-rgb), 0.30) 45%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.hero.hero--photo .container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.hero__card {
  background: var(--color-surface-header);
  padding: clamp(28px, 4vw, 48px);
  max-width: 600px;
  border-radius: var(--card-radius);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.35);
  position: relative;
}

.hero__card .hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent-warmth);
  margin: 0 0 var(--space-md);
}

.hero__card .hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3.8vw, 2.9rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 var(--space-lg);
  max-width: 22ch;
}

.hero__card .hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent-warmth);
}

.hero__card .hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 var(--space-xl);
}

.hero__card .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.hero__pills {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.08);
  padding-top: var(--space-md);
}

.hero__pill {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: 4px 0;
  position: relative;
}

.hero__pill + .hero__pill::before {
  content: "\00B7";
  display: inline-block;
  margin: 0 var(--space-sm) 0 0;
  color: var(--color-accent-warmth);
}

@media (max-width: 640px) {
  .hero__card {
    max-width: 100%;
  }
}

/* --- SPACES alternating editorial blocks (Hive pattern) ----------------- */
.space-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  margin: 0 0 var(--space-3xl);
}

.space-block:last-of-type {
  margin-bottom: 0;
}

@media (min-width: 860px) {
  .space-block {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    margin-bottom: clamp(56px, 7vw, 96px);
  }

  .space-block--reverse .space-block__media {
    order: 2;
  }

  .space-block--reverse .space-block__body {
    order: 1;
  }
}

.space-block__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--color-secondary-dark);
}

.space-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.space-block:hover .space-block__media img {
  transform: scale(1.03);
}

.space-block__media-tag {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 3px;
}

.space-block__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.space-block__number {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--color-accent-warmth);
  margin: 0 0 var(--space-sm);
}

.space-block__name {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}

.space-block__desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: var(--space-sm) 0 var(--space-md);
  max-width: 50ch;
}

.space-block__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.space-block__list li {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
  padding-left: var(--space-lg);
  position: relative;
}

.space-block__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 1px;
  background: var(--color-accent-warmth);
}

.space-block__price {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
}

.space-block__price strong {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
}

.space-block__link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--space-sm);
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.space-block__link:hover {
  border-bottom-color: var(--color-primary);
}

/* --- BRAND STATEMENT — Toong-style editorial display heading ------------ */
.brand-statement {
  background: var(--color-surface-body);
}

.brand-statement__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}

.brand-statement__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-primary);
  margin: var(--space-md) 0 var(--space-xl);
}

.brand-statement__heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent-warmth);
}

.brand-statement .brand-statement__body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text);
  max-width: 60ch;
  letter-spacing: 0;
  margin: 0;
}

/* --- AMENITIES feature photo + caption ---------------------------------- */
.amenities__feature {
  margin: 0 0 var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.amenities__feature img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--card-radius);
}

.amenities__feature-caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0;
  letter-spacing: 0.01em;
}

/* --- MEMBERSHIPS: tier card with media (Hive pattern) ------------------- */
.tier-card {
  padding: 0;
  overflow: hidden;
}

.tier-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-secondary-dark);
}

.tier-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tier-card__inner {
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  flex: 1;
}

.tier-card--featured {
  border-color: var(--color-accent-warmth);
  border-width: 2px;
  background: var(--color-white);
  color: var(--color-text);
}

.tier-card--featured .tier-card__kicker,
.tier-card--featured .tier-card__name,
.tier-card--featured .tier-card__amount,
.tier-card--featured .tier-card__unit,
.tier-card--featured .tier-card__list li {
  color: inherit;
}

.tier-card--featured .tier-card__name,
.tier-card--featured .tier-card__amount {
  color: var(--color-primary);
}

.tier-card--featured .tier-card__unit {
  color: var(--color-text-muted);
}

.tier-card--featured .tier-card__head {
  border-bottom-color: rgba(var(--color-primary-rgb), 0.10);
}

.tier-card--featured .tier-card__list li::before {
  background: var(--color-accent-warmth);
}

/* Replace the old btn-as-CTA with a pill-style learn-more link (Hive). */
.tier-card__cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding: 12px 22px;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  align-self: flex-start;
  margin-top: auto;
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tier-card__cta:hover,
.tier-card__cta:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
}

.tier-card--featured .tier-card__cta {
  color: var(--color-accent-warmth);
  border-color: var(--color-accent-warmth);
  background: transparent;
}

.tier-card--featured .tier-card__cta:hover,
.tier-card--featured .tier-card__cta:focus-visible {
  background: var(--color-accent-warmth);
  color: var(--color-white);
  border-color: var(--color-accent-warmth);
}

/* --- HOST SECTION (Hive's named-host hospitality moment) ---------------- */
.host-section {
  background: var(--color-surface-header);
  padding: clamp(56px, 7vw, 96px) 0;
}

.host-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .host-card {
    grid-template-columns: 280px 1fr;
    gap: var(--space-3xl);
  }
}

.host-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--color-secondary-dark);
}

.host-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.host-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.host-card__overline {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-warmth);
  margin: 0;
}

.host-card__name {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  color: var(--color-primary);
  margin: var(--space-xs) 0 0;
  letter-spacing: -0.01em;
}

.host-card__role {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

.host-card__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
  max-width: 50ch;
  border-left: 3px solid var(--color-accent-warmth);
  padding-left: var(--space-lg);
}

.host-card__cta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding: 12px 22px;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  align-self: flex-start;
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.host-card__cta:hover,
.host-card__cta:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
}

/* --- TENANT PROFILE: photo variant -------------------------------------- */
.tenants {
  background: var(--color-surface-body);
}

.tenant-profile--photo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--color-surface-header);
  border-left: 0;
  padding: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid rgba(var(--color-primary-rgb), 0.08);
}

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

.tenant-profile--photo .tenant-profile__media {
  width: 100%;
  height: 100%;
  min-height: 320px;
  aspect-ratio: auto;
  max-width: none;
  background: var(--color-secondary-dark);
  display: block;
  border-radius: 0;
  border-left: 4px solid var(--color-primary);
  overflow: hidden;
}

.tenant-profile--photo .tenant-profile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 320px;
}

.tenant-profile--photo .tenant-profile__body {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- LOCATION: photo background variant --------------------------------- */
.location.location--photo {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: clamp(440px, 60vh, 580px);
  display: flex;
  align-items: center;
}

.location.location--photo .location__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.location.location--photo .location__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.location.location--photo .location__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--color-primary-rgb), 0.78) 0%,
    rgba(var(--color-primary-rgb), 0.55) 50%,
    rgba(var(--color-primary-rgb), 0.20) 100%
  );
}

.location.location--photo .container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.location__overlay {
  max-width: 540px;
  color: var(--color-white);
}

.location__overlay .section-label {
  color: rgba(var(--color-white-rgb), 0.85);
}

.location__overlay .location__title {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-white);
  letter-spacing: -0.015em;
  margin: var(--space-sm) 0 var(--space-md);
}

.location__overlay .location__address {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(var(--color-white-rgb), 0.92);
  margin: 0 0 var(--space-lg);
}

.location__overlay .location__notes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.location__overlay .location__notes li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(var(--color-white-rgb), 0.92);
  padding-left: var(--space-lg);
  position: relative;
}

.location__overlay .location__notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--color-accent-gold);
}

.location.location--photo .btn--primary.location__cta {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}

.location.location--photo .btn--primary.location__cta:hover,
.location.location--photo .btn--primary.location__cta:focus-visible {
  background: var(--color-accent-gold);
  color: var(--color-accent-navy);
  border-color: var(--color-accent-gold);
}

/* --- CTA STRIP overline ------------------------------------------------- */
.cta-strip__overline {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent-gold);
  margin: 0 0 var(--space-md);
}

/* --- SECTION LABEL shared helper (used by overlines that already exist) - */
.section-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent-warmth);
  margin: 0 0 var(--space-sm);
}

/* --- SPACES section background distinction (sits between hero + brand) -- */
.spaces {
  background: var(--color-surface-header);
}

/* --- BRAND LOGO (nav + footer): SVG wordmark replaces the text lockup ---- */
.nav__brand-logo {
  height: 38px;
  width: auto;
  display: block;
}

.footer__brand-logo {
  height: 46px;
  width: auto;
  display: block;
  margin-bottom: var(--space-sm);
}

@media (max-width: 767px) {
  .nav__brand-logo {
    height: 32px;
  }
}

/* ==========================================================================
   DEVTOOL — REMOVE BEFORE PRODUCTION  (PRD 06 — Brand Colour Picker)
   --------------------------------------------------------------------------
   Styles for the dev-only brand colour picker. EVERY selector below is scoped
   under [data-devtool="color-picker"] so nothing leaks into the production
   cascade. The container is `hidden` by default (set in index.html) and is
   only revealed by the footer bootstrap when a trigger fires (?devtool=1,
   Ctrl+Shift+C, or the localStorage flag). When disabled, zero selectors here
   match anything visible.

   This block uses literal colour / size values on purpose: it is dev-only
   chrome that is stripped before the WordPress migration, and it must stay
   legible WHILE the brand tokens are being mutated by the picker (so it cannot
   itself depend on those tokens). This is the documented exception to the
   project token-discipline rule. The fixed `--fxdt-*` custom properties below
   are namespaced to the tool and never collide with brand tokens.

   REMOVAL (under 5 min): delete this entire block, the
   [data-devtool="color-picker"] container + bootstrap <script> in index.html,
   and public/js/devtool-color-picker.js. See docs/devtools.md.
   ========================================================================== */
[data-devtool="color-picker"] {
  --fxdt-bg: #14161c;
  --fxdt-surface: #1d2029;
  --fxdt-line: #2c303c;
  --fxdt-fg: #f4f5f7;
  --fxdt-fg-muted: #a6abba;
  --fxdt-accent: #4f8cff;
  --fxdt-warn: #e7b54f;
  --fxdt-radius: 10px;
  --fxdt-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6);
  --fxdt-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  --fxdt-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000; /* above any site chrome / floating buttons */
  font-family: var(--fxdt-sans);
  line-height: 1.4;
}

/* When the bootstrap leaves the container hidden, the attribute does the work;
   this is belt-and-braces in case `hidden` is stripped by a future edit. */
[data-devtool="color-picker"][hidden] {
  display: none !important;
}

/* ---- Floating toggle pill ---- */
[data-devtool="color-picker"] .fxdt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--fxdt-line);
  border-radius: 999px;
  background: var(--fxdt-bg);
  color: var(--fxdt-fg);
  font-family: var(--fxdt-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--fxdt-shadow);
  transition: transform 0.15s ease, background 0.15s ease;
}

[data-devtool="color-picker"] .fxdt-toggle:hover {
  transform: translateY(-1px);
  background: var(--fxdt-surface);
}

[data-devtool="color-picker"] .fxdt-toggle:focus-visible {
  outline: 2px solid var(--fxdt-accent);
  outline-offset: 2px;
}

[data-devtool="color-picker"] .fxdt-toggle__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #000f9f 0 50%, #d4b468 50% 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) inset;
}

/* Hide the toggle while the panel is open (the panel has its own close). */
[data-devtool="color-picker"].is-open .fxdt-toggle {
  display: none;
}

/* ---- Panel ---- */
[data-devtool="color-picker"] .fxdt-panel {
  display: none;
  width: min(380px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  overflow-y: auto;
  background: var(--fxdt-bg);
  color: var(--fxdt-fg);
  border: 1px solid var(--fxdt-line);
  border-radius: var(--fxdt-radius);
  box-shadow: var(--fxdt-shadow);
  padding: 16px;
}

[data-devtool="color-picker"].is-open .fxdt-panel {
  display: block;
}

[data-devtool="color-picker"] .fxdt-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

[data-devtool="color-picker"] .fxdt-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

[data-devtool="color-picker"] .fxdt-panel__title strong {
  font-weight: 700;
}

[data-devtool="color-picker"] .fxdt-panel__tag {
  font-family: var(--fxdt-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fxdt-bg);
  background: var(--fxdt-warn);
  padding: 2px 6px;
  border-radius: 4px;
}

[data-devtool="color-picker"] .fxdt-panel__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fxdt-fg-muted);
  font-size: 24px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
}

[data-devtool="color-picker"] .fxdt-panel__close:hover {
  color: var(--fxdt-fg);
  background: var(--fxdt-surface);
}

[data-devtool="color-picker"] .fxdt-panel__close:focus-visible {
  outline: 2px solid var(--fxdt-accent);
  outline-offset: 2px;
}

[data-devtool="color-picker"] .fxdt-panel__intro {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--fxdt-fg-muted);
}

/* ---- Token groups + swatches ---- */
[data-devtool="color-picker"] .fxdt-group {
  margin-bottom: 16px;
}

[data-devtool="color-picker"] .fxdt-group__label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fxdt-fg-muted);
  border-bottom: 1px solid var(--fxdt-line);
  padding-bottom: 5px;
}

[data-devtool="color-picker"] .fxdt-group__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-devtool="color-picker"] .fxdt-swatch {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
}

[data-devtool="color-picker"] .fxdt-swatch:hover {
  border-color: var(--fxdt-line);
  background: var(--fxdt-surface);
}

[data-devtool="color-picker"] .fxdt-swatch--constrained {
  border-left: 2px solid var(--fxdt-warn);
}

[data-devtool="color-picker"] .fxdt-swatch__chip {
  grid-row: 1 / 3;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--fxdt-chip, #000);
  cursor: pointer;
  padding: 0;
}

[data-devtool="color-picker"] .fxdt-swatch__chip:focus-visible {
  outline: 2px solid var(--fxdt-accent);
  outline-offset: 2px;
}

[data-devtool="color-picker"] .fxdt-swatch__moddot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fxdt-warn);
  border: 2px solid var(--fxdt-bg);
}

[data-devtool="color-picker"] .fxdt-swatch__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

[data-devtool="color-picker"] .fxdt-swatch__name {
  font-family: var(--fxdt-mono);
  font-size: 11px;
  color: var(--fxdt-fg);
  word-break: break-all;
}

[data-devtool="color-picker"] .fxdt-swatch__hex {
  font-family: var(--fxdt-mono);
  font-size: 11px;
  color: var(--fxdt-fg-muted);
}

[data-devtool="color-picker"] .fxdt-swatch__desc {
  font-size: 11px;
  color: var(--fxdt-fg-muted);
}

[data-devtool="color-picker"] .fxdt-swatch__note {
  font-size: 10px;
  font-weight: 600;
  color: var(--fxdt-warn);
}

[data-devtool="color-picker"] .fxdt-swatch__ctrl {
  grid-column: 2 / 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

[data-devtool="color-picker"] .fxdt-swatch__input {
  width: 44px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--fxdt-line);
  border-radius: 6px;
  background: var(--fxdt-surface);
  cursor: pointer;
}

[data-devtool="color-picker"] .fxdt-swatch__verdict {
  font-family: var(--fxdt-mono);
  font-size: 10px;
  color: var(--fxdt-fg-muted);
}

/* ---- Actions ---- */
[data-devtool="color-picker"] .fxdt-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--fxdt-line);
}

[data-devtool="color-picker"] .fxdt-btn {
  appearance: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--fxdt-line);
  border-radius: 7px;
  background: var(--fxdt-surface);
  color: var(--fxdt-fg);
  font-family: var(--fxdt-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

[data-devtool="color-picker"] .fxdt-btn:hover {
  background: #262a35;
}

[data-devtool="color-picker"] .fxdt-btn:focus-visible {
  outline: 2px solid var(--fxdt-accent);
  outline-offset: 2px;
}

[data-devtool="color-picker"] .fxdt-btn--primary {
  background: var(--fxdt-accent);
  border-color: var(--fxdt-accent);
  color: #fff;
}

[data-devtool="color-picker"] .fxdt-btn--primary:hover {
  background: #3f7af0;
}

/* ---- Transient status line ---- */
[data-devtool="color-picker"] .fxdt-panel__status {
  margin: 10px 0 0;
  min-height: 16px;
  font-size: 11px;
  color: var(--fxdt-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

[data-devtool="color-picker"] .fxdt-panel__status.is-visible {
  opacity: 1;
}

/* Respect reduced-motion preferences for the tool's own transitions. */
@media (prefers-reduced-motion: reduce) {
  [data-devtool="color-picker"] .fxdt-toggle,
  [data-devtool="color-picker"] .fxdt-panel__status {
    transition: none;
  }
}
/* ===================== END DEVTOOL — REMOVE BEFORE PRODUCTION ===================== */

/* ==========================================================================
   ENQUIRY FORM (PRD 12 markup + PRD 13 backend wiring, 2026-06-04)
   Token-driven contact form on the one-pager (#contact-form-section).
   Ported from the Cargonomics form component, re-pointed to Flexed tokens.
   NB: the submit reuses .btn.btn--primary (Flexed Blue). Cargonomics filled
   .form__submit with --color-secondary, which in Flexed is the warm off-white
   SURFACE, so a verbatim port would render an invisible white-on-white button.
   ========================================================================== */
.form-section {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--color-surface-body);
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.06);
}
.form-section__header { max-width: 720px; margin: 0 0 var(--space-2xl); }
.form-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  margin: var(--space-sm) 0 0;
}
.form-section__subtitle {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: var(--space-md) 0 0;
  max-width: 56ch;
}
.form { max-width: 640px; }
.form__fieldset { border: none; padding: 0; margin: 0 0 var(--space-2xl); }
.form__legend {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.14);
  width: 100%;
}
.form__group { margin-bottom: var(--space-lg); }
/* base label props; an earlier .form__label rule sets the heading font-family — both apply */
.form__label { display: block; margin-bottom: var(--space-xs); font-size: 0.9rem; color: var(--color-text); }
.form__label--required::after { content: " *"; color: var(--color-signal); }
.form__optional { color: var(--color-text-muted); font-weight: 400; }
.form__input,
.form__select,
.form__textarea {
  display: block;
  width: 100%;
  padding: var(--input-padding);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}
.form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000F9F' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.form__textarea { min-height: 130px; resize: vertical; }
.form--submitted .form__input:invalid,
.form--submitted .form__select:invalid,
.form--submitted .form__textarea:invalid { border-color: var(--color-signal); }
.form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.5;
  cursor: pointer;
}
.form__consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}
.form--submitted .form__consent input[type="checkbox"]:invalid { outline: 2px solid var(--color-signal); outline-offset: 2px; }
/* submit reuses .btn.btn--primary for fill/hover; this only sets width + spacing */
.form__submit { width: 100%; margin-top: var(--space-xs); }
.form__privacy {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  line-height: 1.4;
  font-family: var(--font-body);
}
.form__success,
.form__error { padding: var(--space-2xl); margin-top: var(--space-lg); border-radius: var(--card-radius); font-family: var(--font-body); }
.form__success { background: rgba(var(--color-primary-rgb), 0.06); border: 1px solid rgba(var(--color-primary-rgb), 0.2); }
.form__success h2,
.form__success h3 { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.2rem; margin: 0 0 var(--space-sm); color: var(--color-primary); }
.form__error { background: rgba(var(--color-signal-rgb, 220, 38, 38), 0.06); border: 1px solid rgba(var(--color-signal-rgb, 220, 38, 38), 0.25); }
.form__error h2,
.form__error h3 { font-family: var(--font-heading); font-weight: var(--font-weight-heading); font-size: 1.2rem; margin: 0 0 var(--space-sm); color: var(--color-signal); }
.form__success p, .form__error p { margin: 0; color: var(--color-text); font-size: 0.95rem; }
.form__error a { color: var(--color-signal); text-decoration: underline; }