/* ─── tokens.css ─── */
/* ============================================================
   RichenQuest Design Tokens — the single source of visual truth.
   Every color, size, space, shadow, and motion value in the UI
   comes from here (File 10 §4). Components never hardcode values.

   PROVISIONAL BRAND: palette pending founder brand assets (R6).
   Rebranding = editing this file only.

   Breakpoints (CSS vars can't be used in @media — use these
   literals, documented here as the only allowed values):
     ≥ 40em (640px)  — tablet
     ≥ 64em (1024px) — desktop
     ≥ 80em (1280px) — wide
   ============================================================ */
:root {
  /* ---------- Color: brand ---------- */
  --color-brand: #1d4ed8;          /* primary actions, links            */
  --color-brand-strong: #1e40af;   /* hover / active                    */
  --color-brand-deep: #1e3a8a;     /* dark bands, emphasis surfaces     */
  --color-brand-soft: #dbe5fb;     /* tinted backgrounds, selected      */
  --color-accent: #b45309;         /* sparing highlights (AA on white)  */
  --color-accent-soft: #fdeeda;    /* accent tint background            */

  /* ---------- Color: neutrals ---------- */
  --color-ink: #16233a;            /* headings, primary text            */
  --color-ink-soft: #46536e;       /* secondary text (≥4.5:1 on white)  */
  --color-ink-faint: #6b7691;      /* placeholders, disabled text       */
  --color-surface: #ffffff;
  --color-surface-alt: #f3f6fb;    /* alternate section background      */
  --color-surface-sunken: #e9edf5; /* wells, pressed states             */
  --color-border: #d8dfeb;
  --color-border-strong: #aeb9cf;  /* form control borders (3:1 contrast) */

  /* ---------- Color: inverse (dark bands, footer) ---------- */
  --color-inverse-surface: #16233a;
  --color-inverse-ink: #ffffff;
  --color-inverse-ink-soft: #c4cede;
  --color-inverse-border: rgb(255 255 255 / 0.15);

  /* ---------- Hero (premium dark, from legacy visual language) ---------- */
  --gradient-hero: linear-gradient(135deg, #101a30 0%, #1e3a8a 60%, #3f3d9e 100%);
  --color-hero-accent: #93b4f8; /* serif accent word on dark */

  /* ---------- Color: semantic ---------- */
  --color-success: #166534;
  --color-success-soft: #dcf3e4;
  --color-warning: #92400e;
  --color-warning-soft: #fdeeda;
  --color-danger: #b42318;
  --color-danger-soft: #fbe3e0;
  --color-info: #1e40af;
  --color-info-soft: #dbe5fb;
  --color-focus: #1d4ed8;

  /* ---------- Typography ---------- */
  /* System stacks (zero webfont bytes). Serif display carries the premium
     accent inherited from the legacy brand (File 12 KEEP verdict). */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-serif-display: "Charter", "Iowan Old Style", "Palatino", Georgia, Cambria, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);
  --text-3xl: clamp(1.9rem, 1.4rem + 2.6vw, 2.75rem);
  --text-display: clamp(2.2rem, 1.5rem + 3.6vw, 3.5rem);

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-body: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-wide: 0.08em;         /* kickers, uppercase labels         */

  /* ---------- Spacing: 4px base scale ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* ---------- Shape ---------- */
  --radius-sm: 0.375rem;           /* buttons, inputs                   */
  --radius-md: 0.75rem;            /* cards                             */
  --radius-lg: 1.25rem;            /* feature panels                    */
  --radius-full: 999px;            /* pills, badges                     */

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgb(22 35 58 / 0.08);
  --shadow-md: 0 4px 16px rgb(22 35 58 / 0.10);
  --shadow-lg: 0 12px 32px rgb(22 35 58 / 0.14);

  /* ---------- Motion (see styleguide: Animation guidelines) ---------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;          /* hovers, toggles                   */
  --duration-base: 200ms;          /* most transitions                  */
  --duration-slow: 300ms;          /* panels, reveals                   */

  /* ---------- Layers ---------- */
  --z-header: 10;
  --z-dropdown: 20;
  --z-sticky-bar: 30;
  --z-overlay: 40;

  /* ---------- Layout ---------- */
  --container-max: 72rem;
  --container-narrow: 46rem;       /* prose-heavy pages                 */
  --container-pad: var(--space-4);
}

/* ─── base.css ─── */
/* Base — minimal reset + global typography + layout primitives. Mobile-first. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* WCAG 2.2 SC 2.4.11 (Focus Not Obscured) + anchor landing.
     The header is sticky at the top and the mobile action bar is fixed at the
     bottom, so anything scrolled to a viewport edge — a tabbed-to control, the
     skip link's #main target, an in-page anchor — lands underneath them.
     body padding reserves end-of-document space only; scroll-padding is what
     keeps scroll targets clear. Bottom inset applies only where the bar shows. */
  scroll-padding-block-start: 5rem;
  scroll-padding-block-end: 6rem;
}

@media (min-width: 64em) {
  html {
    /* sticky-bar is display:none from 64em up */
    scroll-padding-block-end: 0;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-surface);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

h1,
h2,
h3,
h4 {
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p {
  max-width: 65ch;
}

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

a {
  color: var(--color-brand);
}

a:hover {
  color: var(--color-brand-strong);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

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

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-inverse-surface);
  color: var(--color-inverse-ink);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* a11y exception to the no-!important rule */
    transition-duration: 0.01ms !important;
  }
}

/* ─── components/badge.css ─── */
/* component: badge — small status/category pills (destination tiers,
   intake status, "signed partner"). Text stays ≥ AA on its soft background. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  background: var(--color-surface-sunken);
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.badge--info {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.badge--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.badge--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.badge--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* ─── components/button.css ─── */
/* component: button — .btn + variants, sizes, states.
   Markup patterns documented in /styleguide/. Works on <a> and <button>. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    translate var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

/* Micro-interaction: subtle lift on hover, grounded on press */
@media (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):hover {
    translate: 0 -1px;
    box-shadow: var(--shadow-sm);
  }

  .btn:not(:disabled):active {
    translate: 0 0;
    box-shadow: none;
  }
}

/* Variants */
.btn--primary {
  background: var(--color-brand);
  color: var(--color-inverse-ink);
}

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

.btn--ghost {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: transparent;
}

.btn--ghost:hover {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.btn--quiet {
  color: var(--color-brand);
  background: transparent;
}

.btn--quiet:hover {
  background: var(--color-surface-alt);
  color: var(--color-brand-strong);
}

/* Ghost on dark bands (hero, cta-band) — unified in the cross-site audit */
.btn--ghost-inverse {
  border-color: rgb(255 255 255 / 0.4);
  color: var(--color-inverse-ink);
  background: transparent;
}

.btn--ghost-inverse:hover {
  background: rgb(255 255 255 / 0.1);
  color: var(--color-inverse-ink);
}

.btn--inverse {
  background: var(--color-surface);
  color: var(--color-ink);
}

.btn--inverse:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

/* Sizes */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
}

/* Full width (mobile CTAs, sticky bar) */
.btn--block {
  display: flex;
  width: 100%;
}

/* States */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-surface-sunken);
  border-color: transparent;
  color: var(--color-ink-faint);
  cursor: not-allowed;
}

/* Icon inside a button inherits size/color */
.btn .icon {
  flex: none;
}

/* ─── components/card.css ─── */
/* component: card — surfaces for collections. Base .card + purpose variants:
   destination cards, package (service) cards, testimonials, and stat tiles
   (proof strip). Markup patterns in /styleguide/. */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.card__kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.card__title {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.card__body {
  color: var(--color-ink-soft);
}

.card__meta {
  margin-block-start: auto; /* pins to bottom for equal-height rows */
  padding-block-start: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

/* Whole-card link affordance: .card--interactive wraps its title in a link
   with a stretched pseudo-element (keeps markup semantic, one tab stop). */
.card--interactive {
  position: relative;
  transition: box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.card--interactive:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.card--interactive .card__link {
  color: inherit;
  text-decoration: none;
}

.card--interactive .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card--interactive .card__link:focus-visible {
  outline: none;
}

.card--interactive:has(.card__link:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Featured emphasis (e.g., flagship destination, recommended package) */
.card--featured {
  border-color: var(--color-brand);
  border-width: 2px;
}

/* Package (service) card */
.card--package .card__price {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.card--package .card__price-note {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

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

.card__list li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.card__list .icon {
  flex: none;
  margin-block-start: 0.2em;
  color: var(--color-success);
}

/* Testimonial card (ships only with consented content — File 11 C2) */
.card--testimonial .card__quote {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.card--testimonial .card__quote::before {
  content: "\201C";
  color: var(--color-brand);
  font-weight: var(--weight-bold);
}

.card__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
}

.card__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.card__person-name {
  font-weight: var(--weight-semibold);
}

.card__person-meta {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

/* Stat tile — proof strip numbers (claims.json values only).
   Airy, not boxy: a thin brand rule and a large number breathe better
   than a filled tile (benchmarked against Stripe-style stat rows). */
.stat-tile {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-brand);
}

.stat-tile__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.stat-tile__label {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.section--inverse .stat-tile {
  background: rgb(255 255 255 / 0.06);
}

.section--inverse .stat-tile__label {
  color: var(--color-inverse-ink-soft);
}

/* ─── components/cta-band.css ─── */
/* component: cta-band — sitewide conversion band. */
.cta-band {
  margin-top: var(--space-12);
  background: var(--gradient-hero);
  color: var(--color-inverse-ink);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding-block: var(--space-10);
}

.cta-band__text {
  font-size: var(--text-lg);
  color: var(--color-inverse-ink-soft);
}

.cta-band__phones {
  font-size: var(--text-sm);
  color: var(--color-inverse-ink-soft);
}

.cta-band__phones a {
  color: var(--color-inverse-ink);
}

/* ─── components/faq.css ─── */
/* component: faq — accessible accordion on native <details>/<summary>.
   No JS required; works everywhere. Markup pattern in /styleguide/. */
.faq {
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.faq__item[open] {
  border-color: var(--color-border-strong);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q .icon {
  flex: none;
  color: var(--color-ink-soft);
  transition: rotate var(--duration-fast) var(--ease-out);
}

.faq__item[open] .faq__q .icon {
  rotate: 180deg;
}

.faq__a {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-ink-soft);
}

/* ─── components/footer.css ─── */
/* component: footer — sitewide. Columns collapse to one on mobile;
   legal strip carries the registered identity (CIN etc. added in M2
   when the founder provides them). */
.site-footer {
  margin-top: var(--space-12);
  background: var(--color-inverse-surface);
  color: var(--color-inverse-ink);
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.site-footer__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.site-footer__tagline {
  margin-block-start: var(--space-2);
  color: var(--color-inverse-ink-soft);
  max-width: 28rem;
}

.site-footer__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-inverse-ink-soft);
  margin-block-end: var(--space-3);
}

.site-footer__links {
  display: grid;
  gap: var(--space-2);
}

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

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer__contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.site-footer__contact-row .icon {
  margin-block-start: 0.2em;
  color: var(--color-inverse-ink-soft);
}

.site-footer__legal {
  border-top: 1px solid var(--color-inverse-border);
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  color: var(--color-inverse-ink-soft);
}

@media (min-width: 40em) {
  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* ─── components/form.css ─── */
/* component: form — fields, labels, inputs, selects, textareas, choices,
   hints, and error states. Native elements, styled; validation styling keys
   off [aria-invalid="true"] so accessibility and appearance stay in sync.
   The Zoho qualifying form is an embed; these styles serve on-site forms
   (contact page) and future branded forms (M6 form proxy). */

.form {
  display: grid;
  gap: var(--space-5);
}

.form-fieldset {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  border: 0;
}

.form-legend {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  padding: 0;
  margin-block-end: var(--space-2);
}

.form-field {
  display: grid;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.form-label__optional {
  font-weight: var(--weight-regular);
  color: var(--color-ink-faint);
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.form-input::placeholder {
  color: var(--color-ink-faint);
}

.form-input:hover {
  border-color: var(--color-ink-soft);
}

.form-input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 0;
  border-color: var(--color-brand);
}

textarea.form-input {
  min-height: 7.5rem;
  resize: vertical;
}

/* Select: custom chevron, self-contained data URI (no external asset) */
select.form-input {
  appearance: none;
  padding-inline-end: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346536e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1.25rem;
}

/* Checkboxes & radios */
.form-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  cursor: pointer;
}

.form-choice input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 0.15rem;
  accent-color: var(--color-brand);
  cursor: pointer;
}

.form-choice input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Hints & errors */
.form-hint {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.form-error {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-danger);
}

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

/* Disabled */
.form-input:disabled,
.form-choice input:disabled {
  background: var(--color-surface-sunken);
  color: var(--color-ink-faint);
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

/* ─── components/header.css ─── */
/* component: header — masthead + responsive nav with dropdown support.
   Mobile: hamburger opens a full-width panel (modules/nav.js).
   Desktop: horizontal nav; groups (e.g., Destinations) open on click via
   modules/disclosure.js — click beats hover for touch + a11y. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

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

.site-header__brand {
  display: grid;
  line-height: var(--leading-tight);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  text-decoration: none;
}

.site-header__tagline {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
  letter-spacing: 0.04em;
}

.site-header__toggle {
  display: inline-flex;
  padding: var(--space-2);
  background: none;
  border: 0;
  color: var(--color-ink);
  cursor: pointer;
}

.site-header__toggle .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Toggle swaps menu/close icons via aria-expanded */
.site-header__toggle[aria-expanded="true"] .site-header__icon-open,
.site-header__toggle[aria-expanded="false"] .site-header__icon-close {
  display: none;
}

.site-nav {
  display: none;
  width: 100%;
}

.site-nav.is-open {
  display: block;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

.site-nav__link {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-brand);
}

/* Dropdown group (Destinations menu) */
.site-nav__group-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  cursor: pointer;
}

.site-nav__group-toggle .icon {
  transition: rotate var(--duration-fast) var(--ease-out);
}

.site-nav__group-toggle[aria-expanded="true"] .icon {
  rotate: 180deg;
}

.site-nav__dropdown {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
}

.site-nav__dropdown[hidden] {
  display: none;
}

.site-nav__dropdown-link {
  display: block;
  padding: var(--space-1) 0;
  color: var(--color-ink-soft);
  text-decoration: none;
}

.site-nav__dropdown-link:hover {
  color: var(--color-brand);
}

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

@media (min-width: 64em) {
  .site-header__toggle {
    display: none;
  }

  .site-nav {
    display: block;
    width: auto;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    padding-block: 0;
  }

  .site-nav__item {
    position: relative;
  }

  .site-nav__dropdown {
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 50%;
    translate: -50% 0;
    z-index: var(--z-dropdown);
    min-width: 14rem;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }

  .site-nav__cta {
    margin-block-start: 0;
  }
}

/* ─── components/icon.css ─── */
/* component: icon — inline SVG sprite usage (assets/img/icons.svg).
   Icons are stroke-based, inherit currentColor, and size with text.
   Markup: <svg class="icon" aria-hidden="true"><use href="/assets/img/icons.svg#icon-check"></use></svg>
   Decorative icons: aria-hidden="true". Meaningful icons: role="img" + <title>. */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}

.icon--sm {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.icon--lg {
  width: 1.75em;
  height: 1.75em;
}

/* Feature icon in a tinted disc (journey steps, service highlights) */
.icon-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.icon-disc .icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: 0;
}

/* ─── components/layout.css ─── */
/* component: layout — containers, sections, grid system, spacing primitives.
   The grid is content-driven (auto-fit) for card collections plus fixed
   12-col-style splits for page layouts. Mobile-first throughout. */

/* Containers (.container base lives in base.css) */
.container--narrow {
  max-width: var(--container-narrow);
}

/* Vertical page rhythm — generous by default; premium reads as whitespace */
.section {
  padding-block: var(--space-10);
}

.section--tight {
  padding-block: var(--space-6);
}

.section--roomy {
  padding-block: var(--space-10);
}

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

.section--inverse {
  background: var(--color-inverse-surface);
  color: var(--color-inverse-ink);
}

.section__head {
  display: grid;
  gap: var(--space-2);
  margin-block-end: var(--space-8);
  max-width: var(--container-narrow);
}

/* Grid — card collections: as many columns as fit, each ≥ the min width */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.grid--wide-items {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* Grid — fixed splits (collapse to one column below tablet) */
.grid--2,
.grid--3,
.grid--4 {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 40em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

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

/* Split — asymmetric two-column (content + aside), stacks on mobile */
.split {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 64em) {
  .split {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }

  .split--even {
    grid-template-columns: 1fr 1fr;
  }
}

/* Stack — vertical spacing between siblings without margins on components */
.stack > * + * {
  margin-block-start: var(--space-4);
}

.stack--tight > * + * {
  margin-block-start: var(--space-2);
}

.stack--loose > * + * {
  margin-block-start: var(--space-6);
}

/* Cluster — horizontal wrapping row (tags, actions, meta) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Inline CTA row at the end of a value section (UX contract: CTA cadence) */
.section__cta {
  margin-block-start: var(--space-6);
}

/* ─── components/page-hero.css ─── */
/* component: page-hero — slim dark header for interior pages.
   Carries the brand gradient from the homepage hero at reduced height,
   keeping every page unmistakably RichenQuest. */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
  color: var(--color-inverse-ink);
}

.page-hero::before {
  content: "";
  position: absolute;
  width: 34rem;
  height: 34rem;
  right: -12rem;
  top: -20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(147 180 248 / 0.18), transparent 65%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding-block: var(--space-8) var(--space-10);
}

.page-hero .kicker {
  color: var(--color-hero-accent);
}

.page-hero__lede {
  font-size: var(--text-lg);
  color: var(--color-inverse-ink-soft);
  max-width: 58ch;
}

/* ─── components/steps.css ─── */
/* component: steps — numbered process steps (homepage journey, contact flow,
   future destination timelines). Promoted from page CSS in the cross-site
   audit: any pattern used on 2+ pages lives in the components layer. */
.step {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.step__badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.step__title {
  font-size: var(--text-xl);
}

.step__text {
  color: var(--color-ink-soft);
}

/* ─── components/sticky-bar.css ─── */
/* component: sticky-bar — mobile thumb-zone action bar (UX contract, File 11 §7).
   Fixed to the bottom on mobile; hidden on desktop where header + CTA band serve.
   Reserves body space so the footer is never obscured. */
.sticky-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky-bar);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.sticky-bar__btn {
  flex: 1;
}

@media (max-width: 63.99em) {
  body {
    /* keep page content clear of the fixed bar */
    padding-block-end: 5rem;
  }
}

@media (min-width: 64em) {
  .sticky-bar {
    display: none;
  }

  body {
    padding-block-end: 0;
  }
}

/* ─── components/utilities.css ─── */
/* component: utilities — typography helpers + motion utilities.
   Loaded last in the components layer so single-purpose helpers win. */

/* Kicker — uppercase eyebrow above headings (F-pattern: meaning up front) */
.kicker {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.section--inverse .kicker {
  color: var(--color-inverse-ink-soft);
}

/* Lede — opening paragraph, slightly larger */
.lede {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
}

.section--inverse .lede {
  color: var(--color-inverse-ink-soft);
}

.text-soft {
  color: var(--color-ink-soft);
}

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

.text-center {
  text-align: center;
}

/* Telephone numbers — keep a number on one line so it is never split across a
   line break. Done here, in the presentation layer, because the numbers in
   data/site.json also feed JSON-LD and must stay plain (real spaces). */
.tel {
  white-space: nowrap;
}

/* Scroll reveal (modules/reveal.js adds .is-revealed; see Animation guidelines).
   Elements without JS — or with reduced motion — render fully visible. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal].reveal-ready {
    opacity: 0;
    translate: 0 12px;
    transition: opacity var(--duration-slow) var(--ease-out),
      translate var(--duration-slow) var(--ease-out);
  }

  [data-reveal].is-revealed {
    opacity: 1;
    translate: 0 0;
  }
}

/* ─── pages/home.css ─── */
/* page: home — premium hero + narrative + journey + destinations + integrity.
   All colors/sizes from tokens; layout primitives from components/layout.css. */

/* Hero — premium dark (legacy visual language, File 12 KEEP verdict) */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
  color: var(--color-inverse-ink);
}

/* Decorative glows — pure CSS, no assets, no layout impact */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  width: 44rem;
  height: 44rem;
  right: -14rem;
  top: -18rem;
  background: radial-gradient(circle, rgb(147 180 248 / 0.22), transparent 65%);
}

.hero::after {
  width: 30rem;
  height: 30rem;
  left: -12rem;
  bottom: -16rem;
  background: radial-gradient(circle, rgb(63 61 158 / 0.55), transparent 70%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-10) var(--space-12);
}

.hero__content {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

@media (min-width: 64em) {
  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

/* Glass consultation panel */
.hero__panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  max-width: 26rem;
}

/* Older browsers without backdrop blur get a solid readable panel */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .hero__panel {
    background: rgb(16 26 48 / 0.7);
  }
}

.hero__panel-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.hero__panel-list {
  display: grid;
  gap: var(--space-3);
}

.hero__panel-list li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--color-inverse-ink-soft);
}

.hero__panel-list .icon {
  flex: none;
  margin-block-start: 0.2em;
  color: var(--color-hero-accent);
}

.hero__panel-note {
  font-size: var(--text-sm);
  color: var(--color-inverse-ink-soft);
  border-top: 1px solid rgb(255 255 255 / 0.15);
  padding-block-start: var(--space-3);
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-inverse-ink-soft);
}

.hero__chip .icon {
  color: var(--color-hero-accent);
}

.hero h1 {
  font-size: var(--text-display);
  max-width: 18ch;
}

.hero h1 em {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--color-hero-accent);
}

.hero__lede {
  font-size: var(--text-lg);
  color: var(--color-inverse-ink-soft);
  max-width: 58ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.hero__note {
  font-size: var(--text-sm);
  color: var(--color-inverse-ink-soft);
}

/* Proof strip — sits directly under the hero */
.proof {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.proof__inner {
  padding-block: var(--space-8);
}

/* Journey steps + inline section CTAs: promoted to components/steps.css and
   components/layout.css (cross-site audit — used on multiple pages). */

/* Integrity band */
.integrity {
  background: var(--color-inverse-surface);
  color: var(--color-inverse-ink);
}

.integrity__inner {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding-block: var(--space-10);
}

.integrity__inner p {
  color: var(--color-inverse-ink-soft);
}

.integrity__inner p strong {
  color: var(--color-inverse-ink);
}

/* Founder signature — credibility block, no photo until consent/assets */
.integrity__founder {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-5);
  border-top: 1px solid var(--color-inverse-border);
  width: 100%;
  max-width: 34rem;
}

.integrity__avatar {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.25);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

.integrity__founder-name {
  font-weight: var(--weight-bold);
  color: var(--color-inverse-ink);
}

.integrity__founder-role {
  font-size: var(--text-sm);
}

/* ─── pages/styleguide.css ─── */
/* page: styleguide — the living design-system gallery (/styleguide/).
   Demo scaffolding only; production components must never depend on
   .sg-* classes. */
.sg-section {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.sg-note {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  max-width: 65ch;
}

/* Color swatches — one class per token so no inline styles are needed */
.sg-swatches {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.sg-swatch {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--text-xs);
}

.sg-swatch__chip {
  height: 3.5rem;
}

.sg-swatch__name {
  display: block;
  padding: var(--space-2) var(--space-3);
}

.sg-swatch--brand .sg-swatch__chip { background: var(--color-brand); }
.sg-swatch--brand-strong .sg-swatch__chip { background: var(--color-brand-strong); }
.sg-swatch--brand-deep .sg-swatch__chip { background: var(--color-brand-deep); }
.sg-swatch--brand-soft .sg-swatch__chip { background: var(--color-brand-soft); }
.sg-swatch--accent .sg-swatch__chip { background: var(--color-accent); }
.sg-swatch--accent-soft .sg-swatch__chip { background: var(--color-accent-soft); }
.sg-swatch--ink .sg-swatch__chip { background: var(--color-ink); }
.sg-swatch--ink-soft .sg-swatch__chip { background: var(--color-ink-soft); }
.sg-swatch--ink-faint .sg-swatch__chip { background: var(--color-ink-faint); }
.sg-swatch--surface .sg-swatch__chip { background: var(--color-surface); }
.sg-swatch--surface-alt .sg-swatch__chip { background: var(--color-surface-alt); }
.sg-swatch--surface-sunken .sg-swatch__chip { background: var(--color-surface-sunken); }
.sg-swatch--border .sg-swatch__chip { background: var(--color-border); }
.sg-swatch--success .sg-swatch__chip { background: var(--color-success); }
.sg-swatch--warning .sg-swatch__chip { background: var(--color-warning); }
.sg-swatch--danger .sg-swatch__chip { background: var(--color-danger); }
.sg-swatch--info .sg-swatch__chip { background: var(--color-info); }

/* Type scale specimens */
.sg-type-display { font-size: var(--text-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.sg-type-3xl { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.sg-type-2xl { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.sg-type-xl { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.sg-type-lg { font-size: var(--text-lg); }
.sg-type-base { font-size: var(--text-base); }
.sg-type-sm { font-size: var(--text-sm); }
.sg-type-xs { font-size: var(--text-xs); }

/* Spacing scale bars */
.sg-space {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

.sg-space__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sg-space__bar {
  height: 1rem;
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand);
  border-radius: 2px;
}

.sg-space__bar--1 { width: var(--space-1); }
.sg-space__bar--2 { width: var(--space-2); }
.sg-space__bar--3 { width: var(--space-3); }
.sg-space__bar--4 { width: var(--space-4); }
.sg-space__bar--5 { width: var(--space-5); }
.sg-space__bar--6 { width: var(--space-6); }
.sg-space__bar--8 { width: var(--space-8); }
.sg-space__bar--10 { width: var(--space-10); }
.sg-space__bar--12 { width: var(--space-12); }

/* Grid demo boxes */
.sg-box {
  display: grid;
  place-items: center;
  min-height: 4rem;
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

/* Icon gallery */
.sg-icons {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.sg-icon-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

.sg-icon-cell .icon {
  color: var(--color-ink);
}

/* Motion demo */
.sg-motion-chip {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: translate var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.sg-motion-chip:hover {
  translate: 0 -3px;
  box-shadow: var(--shadow-md);
}