/* ============================================================
   CAMPE TRAVEL HAUS — site.css
   Public marketing site styles.
   Mobile-first, base targeting 375px minimum viewport.

   Typography rules (spec §1):
     --font-display : 'Wish Shore', serif   → all h1s every page, CTA banner script line
     --font-body    : 'Outfit', sans-serif  → everything else (h2+, body, nav, forms)
     Amertha → SVG/image wordmarks only. Never in HTML text.
   ============================================================ */

/* ── Google Fonts (loaded here so public pages only need site.css link) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── Custom fonts ────────────────────────────────────────────── */
@font-face {
  font-family: 'Wish Shore';
  src: url('/assets/fonts/WishShore.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  /* Typography */
  --font-display: 'Wish Shore', Georgia, serif;
  --font-body:    'Outfit', system-ui, sans-serif;

  /* Brand palette */
  --color-cream:      #F7F4EF;
  --color-white:      #FFFFFF;
  --color-dark-khaki: #3F3A14;
  --color-dust-grey:  #E0D8CE;
  --color-blue-slate: #4A7683;
  --color-pale-sky:   #AEC8D6;
  --color-sky-reflect:#7DB0CF; /* sky-reflection is marketing-site-only — not a portal brand color */
  --color-sidebar-bg: #3F3A14;

  /* Functional */
  --color-success: #2E7D53;
  --color-danger:  #C0392B;

  /* Spacing scale */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   32px;
  --space-lg:   64px;
  --space-xl:   96px;
  --space-2xl:  120px;

  /* Section padding */
  --section-pad-desktop: 52px;
  --section-pad-mobile:  36px;

  /* Container widths */
  --container-max:        1100px;
  --container-text-max:   860px;
  --container-narrow-max: 700px;
  --container-pad:        40px;
  --container-pad-mobile: 20px;

  /* Card grid */
  --card-gap:        32px;
  --card-gap-mobile: 16px;

  /* Layout (legacy alias kept for portal/admin pages) */
  --site-max-width: 1160px;
  --site-padding:   0 1rem;     /* mobile */

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 99px;

  /* Nav */
  --nav-height:        88px;
  --nav-height-mobile: 72px;
  --sticky-nav-height: 60px;

  /* Typography tokens */
  --h1-size:         clamp(52px, 6vw, 80px);
  --h1-tracking:    -0.01em;
  --h2-size:         32px;
  --h3-size:         22px;
  --body-line-height: 1.75;
  --body-max-width:  62ch;
  --eyebrow-tracking: 0.16em;

  /* Transitions */
  --transition-base: all 280ms ease;

  /* Semantic aliases (spec v2) */
  --color-background-primary:   #FFFFFF;
  --color-background-secondary: #F7F4EF;
  --color-background-info:      rgba(174, 200, 214, 0.15);
  --color-background-success:   rgba(46, 125, 83, 0.10);
  --color-background-warning:   rgba(180, 120, 0, 0.10);
  --color-text-primary:         #3F3A14;
  --color-text-secondary:       rgba(63, 58, 20, 0.65);
  --color-text-tertiary:        rgba(63, 58, 20, 0.45);
  --color-text-info:            #4A7683;
  --color-text-success:         #2E7D53;
  --color-text-warning:         #B45309;
  --color-border-secondary:     rgba(224, 216, 206, 0.7);
  --color-border-tertiary:      #E0D8CE;
  --color-border-info:          #7DB0CF;
  --border-radius-md:           8px;
  --border-radius-lg:           12px;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-dark-khaki);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: var(--font-body); cursor: pointer; }
input, textarea, select { font-family: var(--font-body); }

input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-blue-slate);
  cursor: pointer;
  flex-shrink: 0;
}
input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-blue-slate);
  outline-offset: 2px;
}

/* ── Typography scale ────────────────────────────────────────── */
h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  font-weight: normal;
  line-height: 1.05;
  letter-spacing: var(--h1-tracking);
  color: var(--color-dark-khaki);
}

/* H1 on dark sections (hero overlays, CTA banners) */
.section--dark h1 {
  color: var(--color-cream);
}

@media (max-width: 768px) {
  h1 {
    font-size: clamp(40px, 10vw, 56px);
    line-height: 1.08;
  }
}

h2 {
  font-family: var(--font-body);
  font-size: var(--h2-size);
  font-weight: 500;
  line-height: 1.2;
}

/* Wish Shore brand/statement h2 */
h2.display,
.h2--display {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: normal;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

@media (max-width: 768px) {
  h2, h2.display, .h2--display {
    font-size: 26px;
  }
}

h3 {
  font-family: var(--font-body);
  font-size: var(--h3-size);
  font-weight: 500;
  line-height: 1.35;
}
h4 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}
p {
  font-size: 15px;
  font-weight: 400;
  line-height: var(--body-line-height);
  color: var(--color-dark-khaki);
  max-width: var(--body-max-width);
}

@media (max-width: 768px) {
  p {
    font-size: 14px;
    line-height: 1.7;
    max-width: 100%;
  }
}

small, .text-small { font-size: 12px; font-weight: 400; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-blue-slate);
  display: block;
  margin-bottom: 12px;
}

/* ── Section header spacing — three-level rule ─────────────────
   eyebrow:      margin-bottom 1.25rem
   h1/h2:        margin-bottom 1rem
   sub/descriptor: margin-bottom 3.5rem
   ────────────────────────────────────────────────────────────── */
.section-header .orn-divider  { margin-bottom: 1.25rem; }
.section-header h1,
.section-header h2            { margin-bottom: 1.25rem; }
.section-header .section-sub  { margin-bottom: 2rem; }

/* Eyebrow on dark backgrounds */
.section--dark .eyebrow {
  color: rgba(247, 244, 239, 0.55);
}

/* ── h2 Wish Shore variant — use for brand/statement headings ── */
/* judgment rule: "could it appear on a boutique hotel sign?" → use .h2--display */
.h2--display {
  font-family: var(--font-display);
  font-weight: normal;
}

/* ── Decorative Wish Shore script lines (CTA banners, mission) ── */
/* aria-hidden="true" required on all .script-line elements */
.script-line {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: 0.01em;
  display: block;
}

@media (max-width: 768px) {
  .script-line {
    font-size: clamp(36px, 9vw, 48px);
    text-align: center;
  }
}

/* ── Layout helpers ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.container--text {
  max-width: var(--container-text-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

@media (max-width: 768px) {
  .container,
  .container--text,
  .container--narrow {
    padding: 0 var(--container-pad-mobile);
  }
}

/* Section base padding */
section {
  padding: var(--section-pad-desktop) 0;
}

@media (max-width: 768px) {
  section {
    padding: var(--section-pad-mobile) 0;
  }
}

/* Legacy section helper classes */
.section { padding: var(--section-pad-desktop) 0; }
.section--sm { padding: 32px 0; }
.section--lg { padding: 80px 0; }
.section--white { background: #FFFFFF; }
.section--alt   { background: #F7F4EF; }

/* Section padding overrides per spec */
/* .site-hero padding is defined in the hero block below (~line 725) */
.section--cta     { padding: 80px 0; }
.section--social-proof { padding: 28px 0; }
.section--how-it-works-steps { padding: 64px 0; }

@media (max-width: 768px) {
  .section--cta     { padding: 52px 0; }
  .section--social-proof { padding: 20px 0; }
  .section--how-it-works-steps { padding: 48px 0; }
}

/* All interactive elements — no scale transforms, shift/opacity only */
a, button, .card, input, select, textarea {
  transition: var(--transition-base);
}

/* ── Buttons (spec §4) ───────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border: none;
}

.btn--primary {
  background: var(--color-blue-slate);
  color: var(--color-cream);
  border: none;
}
.btn--primary:hover {
  background: var(--color-dark-khaki);
}

.btn--ghost {
  background: transparent;
  color: var(--color-cream);
  border: 1px solid rgba(247, 244, 239, 0.4);
}
.btn--ghost:hover {
  border-color: rgba(247, 244, 239, 0.75);
  background: rgba(247, 244, 239, 0.06);
}

.btn--ghost-dark {
  background: transparent;
  color: var(--color-dark-khaki);
  border: 1px solid rgba(63, 58, 20, 0.3);
}
.btn--ghost-dark:hover {
  border-color: rgba(63, 58, 20, 0.6);
}

@media (max-width: 768px) {
  .btn {
    padding: 12px 22px;
    width: 100%;
    justify-content: center;
  }
}

/* ── Buttons (legacy) ────────────────────────────────────────── */
.btn-site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s;
  min-height: 44px;
}
.btn-site:hover { opacity: 0.88; }
.btn-site:active { transform: scale(0.98); }

.btn-primary-site {
  background: var(--color-blue-slate);
  color: var(--color-white);
}
.btn-ghost-site {
  background: transparent;
  color: var(--color-dark-khaki);
  border: 1.5px solid var(--color-dust-grey);
}
.btn-ghost-site:hover {
  border-color: var(--color-blue-slate);
  color: var(--color-blue-slate);
  opacity: 1;
}

/* ── Site header / nav ───────────────────────────────────────── */
.site-header {
  background: var(--color-dark-khaki);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

.site-nav {
  width: 100%;
}

.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.nav-links--right {
  justify-content: flex-end;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(247, 244, 239, 0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: rgba(247, 244, 239, 1);
}

.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 64px;
  width: auto;
  display: block;
}

.nav-divider {
  width: 1px;
  height: 16px;
  background: rgba(247,244,239,0.15);
}

.nav-cta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  background: var(--color-cream);
  color: var(--color-dark-khaki) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.nav-cta:hover {
  background: var(--color-white);
  color: var(--color-dark-khaki) !important;
}

/* "Enter the Haus →" resident link in nav */
.nav-resident-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: rgba(247,244,239,0.6);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}
.nav-resident-link:hover { color: rgba(247,244,239,0.9); }

/* Hamburger — shown on mobile only */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: rgba(247,244,239,0.6);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
}

/* ── Bottom sheet (mobile menu) ──────────────────────────────── */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(63, 58, 20, 0.55);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sheet-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-dark-khaki);
  border-radius: 20px 20px 0 0;
  padding: 12px 1.5rem 2rem;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.bottom-sheet.open {
  transform: translateY(0);
}

.sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(247,244,239,0.25);
  border-radius: 2px;
  margin: 0 auto 1.25rem;
}

.sheet-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.sheet-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 0.5px solid rgba(247,244,239,0.12);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-cream);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.sheet-links li a::after {
  content: '\2192';
  font-size: 14px;
  color: rgba(247,244,239,0.4);
}

.sheet-links li:last-child a {
  border-bottom: none;
}

.sheet-divider {
  border-top: 0.5px solid rgba(247,244,239,0.12);
  margin: 4px 0;
}

.sheet-resident {
  color: rgba(247,244,239,0.45) !important;
  font-size: 13px !important;
}

.sheet-cta {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--color-cream);
  color: var(--color-dark-khaki);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-md);
  margin-top: 8px;
}


/* ── Site footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--color-dark-khaki);
  color: rgba(247,244,239,0.75);
  padding: 28px 0 20px;
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.site-footer__brand-logo { height: 44px; width: auto; opacity: 1; }
.site-footer__brand-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-cream);
  opacity: 0.9;
}
.site-footer__tagline { font-size: 12px; line-height: 1.6; max-width: 240px; }
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.site-footer__nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.45);
  margin-bottom: 4px;
}
.site-footer__nav a {
  font-size: 13px;
  color: rgba(247,244,239,0.7);
  text-decoration: none;
  transition: color 0.15s;
  min-height: 28px;
  display: flex;
  align-items: center;
}
.site-footer__nav a:hover { color: var(--color-cream); }
.site-footer__bottom {
  border-top: 1px solid rgba(247,244,239,0.1);
  margin-top: 4px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: rgba(247,244,239,0.55);
}

/* ── Hero sections ───────────────────────────────────────────── */
.site-hero {
  background: var(--color-cream);
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
/* Text-only heroes: tighter bottom padding (no image weight) */
.site-hero:has(.site-hero__inner--text-only) { padding-bottom: 40px; }
.site-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column-reverse; /* image above text on mobile (≤768px) */
  gap: 12px;
}

/* Text-only hero (no image): column layout, left-aligned on desktop */
.site-hero__inner--text-only {
  flex-direction: column;
  align-items: flex-start;
}
.site-hero__eyebrow { margin-bottom: 4px; }
.site-hero__sub {
  font-size: 16px;
  line-height: 1.55;
  max-width: 580px;
  opacity: 0.75;
}
.site-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.site-hero__ctas .btn-site { width: 100%; }

.site-hero__image {
  width: 100%;
  height: 260px;
  min-height: 260px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-top: 24px;
  background: var(--color-dust-grey);
}

/* ── Card grids ──────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.site-card {
  background: var(--color-white);
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.25rem;
}
.site-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(74,118,131,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.site-card__icon svg { width: 20px; height: 20px; color: var(--color-blue-slate); }

/* ── Tier/pricing cards ──────────────────────────────────────── */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.tier-card-pub {
  background: var(--color-white);
  border: 1.5px solid var(--color-dust-grey);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  position: relative;
}
.tier-card-pub--highlighted {
  border-color: var(--color-blue-slate);
  box-shadow: 0 4px 20px rgba(74,118,131,0.15);
}
.tier-card-pub__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-blue-slate);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 99px;
  white-space: nowrap;
}
.tier-card-pub__name { font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.tier-card-pub__tagline { font-size: 13px; opacity: 0.6; margin-bottom: 20px; }
.tier-card-pub__price { font-size: 32px; font-weight: 500; line-height: 1; margin-bottom: 4px; }
.tier-card-pub__price sup { font-size: 18px; vertical-align: top; margin-top: 4px; }
.tier-card-pub__price span { font-size: 14px; font-weight: 400; opacity: 0.5; }
.tier-card-pub__split { font-size: 12px; opacity: 0.55; margin-bottom: 20px; }
.tier-card-pub__features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.tier-card-pub__features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.tier-card-pub__features li::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A7683' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ── Blog newsletter signup ──────────────────────────────────── */
.newsletter-signup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}
.newsletter-signup__row {
  display: flex;
  gap: 8px;
}
.newsletter-signup__input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-sm);
  color: var(--color-dark-khaki);
  transition: border-color 0.15s;
}
.newsletter-signup__input:focus {
  outline: none;
  border-color: var(--color-sky-reflect);
}
.newsletter-signup__btn {
  height: 44px;
  padding: 0 28px;
  border-radius: 99px;
  background: var(--color-blue-slate);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.newsletter-signup__btn:hover { opacity: 0.88; }

/* ── Skeleton loading ────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
.skeleton {
  background: var(--color-dust-grey);
  border-radius: var(--radius-sm);
  animation: pulse 1.4s ease-in-out infinite;
}
.skeleton-card {
  background: var(--color-white);
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-md);
  padding: 20px;
}

/* ── Forms ───────────────────────────────────────────────────── */
.site-form { display: flex; flex-direction: column; gap: 16px; }
.site-form__group { display: flex; flex-direction: column; gap: 6px; }
.site-form__group > label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark-khaki);
  opacity: 0.6;
}
.site-form__group input:not([type="radio"]):not([type="checkbox"]),
.site-form__group textarea,
.site-form__group select {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--color-white);
  border: 1.5px solid var(--color-dust-grey);
  border-radius: var(--radius-sm);
  color: var(--color-dark-khaki);
  transition: border-color 0.15s;
  min-height: 44px;
}
.site-form__group input:not([type="radio"]):not([type="checkbox"]):focus,
.site-form__group textarea:focus,
.site-form__group select:focus {
  outline: none;
  border-color: var(--color-blue-slate);
}
.site-form__group textarea { resize: vertical; min-height: 100px; }
.site-form__error {
  font-size: 12px;
  color: var(--color-danger);
  margin-top: 4px;
  display: none;
}

/* ── Blog cards ──────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.blog-card {
  background: var(--color-white);
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}
.blog-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.blog-card__thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  background: var(--color-dust-grey);
}
.blog-card__body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.blog-card__excerpt { font-size: 13px; opacity: 0.65; line-height: 1.6; flex: 1; }
.blog-card__read-more { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 500; color: var(--color-blue-slate); }
.blog-card__category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue-slate);
  margin-bottom: 6px;
}
.blog-card__title { font-size: 16px; font-weight: 500; margin-bottom: 6px; line-height: 1.35; }
.blog-card__meta { font-size: 11px; opacity: 0.4; margin-top: 10px; }

/* Category filter pills */
.category-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  flex-wrap: nowrap;
  margin-bottom: 24px;
}
.category-filters::-webkit-scrollbar { display: none; }
.category-filter-pill {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 7px 16px;
  border-radius: 99px;
  border: 1.5px solid var(--color-dust-grey);
  background: transparent;
  color: var(--color-dark-khaki);
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 36px;
}
.category-filter-pill:hover { opacity: 1; border-color: var(--color-blue-slate); color: var(--color-blue-slate); }
.category-filter-pill.active { background: var(--color-blue-slate); border-color: var(--color-blue-slate); color: var(--color-white); opacity: 1; }

/* ── Agent-type ("who thrives") cards ───────────────────────── */
.agent-type-card {
  min-height: 200px;
  background: var(--color-white);
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-type-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(74,118,131,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.agent-type-card__icon svg { width: 22px; height: 22px; color: var(--color-blue-slate); }
.agent-type-card__title { font-size: 16px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-type-card__body  { font-size: 14px; opacity: 0.7; line-height: 1.55; }

/* ── About page values cards ─────────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.value-card {
  background: var(--color-white);
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.value-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(74,118,131,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.value-card__icon svg { width: 22px; height: 22px; color: var(--color-blue-slate); }
.value-card__title { font-size: 16px; font-weight: 500; }
.value-card__body  { font-size: 14px; opacity: 0.7; line-height: 1.55; }

/* ── Step cards (how-it-works) ───────────────────────────────── */
.steps-list {
  display: flex;
  flex-direction: column;
  /* no gap — .step-row uses padding + border-bottom for separation */
}
.step-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.step-card__number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(74,118,131,0.8);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-card__content h3 { margin-bottom: 4px; }
.step-card__content p { font-size: 13px; opacity: 0.7; }

/* ── How It Works: card-treated step ────────────────────────── */
.hiw-step {
  background: var(--color-white);
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.hiw-step__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(74,118,131,0.8);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-step__title  { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.hiw-step__body   { font-size: 14px; opacity: 0.7; line-height: 1.6; }

/* ── Social proof bar ────────────────────────────────────────── */
.social-proof-bar {
  background: var(--color-cream);
  border-top: 1px solid var(--color-dust-grey);
  border-bottom: 1px solid var(--color-dust-grey);
  padding: 20px 0;
}
.social-proof-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 40px;
  padding: 0 24px;
  max-width: 960px;
  margin: 0 auto;
}
.social-proof-bar__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.social-proof-bar__stat-num {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-dark-khaki);
  line-height: 1;
}
.social-proof-bar__stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-dark-khaki);
  opacity: 0.45;
}
.social-proof-bar__divider {
  width: 1px;
  height: 36px;
  background: var(--color-dust-grey);
  flex-shrink: 0;
}
.social-proof-bar__badges {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.social-proof-bar__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-dark-khaki);
  opacity: 0.6;
}
.social-proof-bar__badge img {
  height: 24px;
  width: auto;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(1);
}

/* ── Homepage value props tiled panel ────────────────────────── */
.value-props-panel {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--color-dust-grey);
  display: grid;
  grid-template-columns: 1fr;
}
.value-prop-cell {
  padding: 32px 28px;
  border-bottom: 1px solid var(--color-dust-grey);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.value-prop-cell:last-child { border-bottom: none; }
.value-prop-cell__icon {
  width: 48px;
  height: 48px;
  background: var(--color-cream);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.value-prop-cell__icon svg { width: 24px; height: 24px; color: var(--color-blue-slate); }
.value-prop-cell__title { font-size: 18px; font-weight: 500; color: var(--color-dark-khaki); }
.value-prop-cell__body  { font-size: 14px; opacity: 0.65; line-height: 1.55; }

/* ── Blog empty state ────────────────────────────────────────── */
.blog-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  text-align: center;
  color: var(--color-dark-khaki);
}
.blog-empty-state__icon {
  width: 32px;
  height: 32px;
  color: var(--color-blue-slate);
  margin-bottom: 16px;
  opacity: 0.7;
}
.blog-empty-state__msg {
  font-size: 15px;
  opacity: 0.55;
  margin-bottom: 12px;
}
.blog-empty-state__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-blue-slate);
  text-decoration: none;
}
.blog-empty-state__link:hover { text-decoration: underline; }

/* ── Apply sidebar step eyebrow ──────────────────────────────── */
.apply-step-num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue-slate);
  display: block;
  margin-bottom: 2px;
}
.apply-step-title {
  font-size: 16px;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
.apply-step-body {
  font-size: 14px;
  opacity: 0.65;
  margin: 0;
  line-height: 1.5;
}

/* ── Apply form layout ───────────────────────────────────────── */
.apply-layout {
  display: flex;
  flex-direction: column-reverse;
  gap: 32px;
}
.apply-sidebar {
  background: var(--color-white);
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-md);
  padding: 24px;
}
.apply-sidebar__title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.apply-sidebar__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-dust-grey);
  font-size: 13px;
}
.apply-sidebar__item:last-child { border-bottom: none; }

/* ── Portal entry card ───────────────────────────────────────── */
.portal-entry-card {
  background: var(--color-white);
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.portal-entry-divider {
  border: none;
  border-top: 1px solid var(--color-dust-grey);
  margin: 24px 0;
}

/* ── Thank-you page ──────────────────────────────────────────── */
.thankyou-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 24px;
}
.thankyou-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(46,125,83,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.thankyou-icon svg { width: 32px; height: 32px; color: var(--color-success); }

/* ── Notice/alert ────────────────────────────────────────────── */
.site-notice {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  display: none;
}
.site-notice--error { background: rgba(192,57,43,0.08); color: var(--color-danger); border: 1px solid rgba(192,57,43,0.2); }
.site-notice--success { background: rgba(46,125,83,0.08); color: var(--color-success); border: 1px solid rgba(46,125,83,0.2); }
.site-notice--info { background: rgba(74,118,131,0.08); color: var(--color-blue-slate); border: 1px solid rgba(74,118,131,0.2); }

/* ── Tier feature highlight badge ────────────────────────────── */
.plaque--highlight {
  background: var(--color-blue-slate);
  color: #fff;
  font-size: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Feature matrix (pricing page) ──────────────────────────── */
.feature-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 32px; }
.feature-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  font-size: 13px;
}
.feature-matrix th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-khaki);
  opacity: 0.5;
  padding: 10px 16px;
  text-align: center;
  border-bottom: 2px solid var(--color-dust-grey);
}
.feature-matrix th:first-child { text-align: left; width: 160px; }
.feature-matrix td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-dust-grey);
  text-align: center;
  color: var(--color-dark-khaki);
}
.feature-matrix td:first-child {
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  width: 160px;
}
.feature-matrix tbody tr:nth-child(even) td { background: var(--color-cream); }
.feature-matrix tr:last-child td { border-bottom: none; }
.feature-matrix .check { color: var(--color-blue-slate); font-size: 16px; }
.feature-matrix .dash  { opacity: 0.25; }

/* ─────────────────────────────────────────────────────────────
   BREAKPOINT: mobile — nav adjustments below 768px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-inner {
    padding: 0 var(--container-pad-mobile);
    height: var(--nav-height-mobile);
    justify-content: space-between;
  }

  .nav-links {
    display: none;
  }

  .nav-logo img {
    height: 54px;
  }

  .nav-hamburger {
    display: flex;
  }

  /* Align hero inner and footer with container on mobile */
  .site-hero__inner,
  .site-footer__inner {
    padding: 0 var(--container-pad-mobile);
  }

  /* Reduce hero top/bottom padding on mobile */
  .site-hero {
    padding: 3rem 0;
  }

  /* ── Mobile centering ────────────────────────────────────────
     All text-only heroes and section headers center on mobile.
     ──────────────────────────────────────────────────────────── */

  /* Text-only heroes: center content */
  .site-hero__inner--text-only {
    align-items: center;
    text-align: center;
  }
  .site-hero__inner--text-only .site-hero__sub,
  .site-hero__inner--text-only .eyebrow {
    max-width: 100%;
  }

  /* Image+text hero: center the text content panel */
  .site-hero__content {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .site-hero__ctas {
    justify-content: center;
  }

  /* Section headers */
  .section-header {
    text-align: center;
  }
  .section-header .orn-divider {
    justify-content: center;
  }

  /* Eyebrows anywhere inside sections — descendant covers .fade-up wrappers */
  .section .eyebrow {
    text-align: center;
  }

  /* All h2 inside sections */
  .section h2 {
    text-align: center;
  }

  /* h3 inside sections (card headings, pillars, etc.) */
  .section h3 {
    text-align: center;
  }

  /* Override: icon+text row components stay left-aligned */
  .feature-row,
  .feature-row h3,
  .feature-row p {
    text-align: left;
  }

  /* Body paragraphs: direct children of container OR one wrapper div deep
     (covers fade-up wrappers, max-width constraint divs, etc.)
     Excludes site-cards, forms, and apply sidebar */
  .section .container > p,
  .section .container > div > p {
    text-align: center;
  }

  /* Agent type card */
  .agent-type-card {
    text-align: center;
  }
  .agent-type-card__label {
    text-align: center;
  }

  /* Value props panel */
  .value-prop-cell {
    text-align: center;
    align-items: center;
  }
  .value-prop-cell__icon {
    margin: 0 auto;
  }

  /* Banner inner */
  .banner-inner {
    text-align: center;
  }

  /* Center inline CTA links that sit below section copy */
  .section .container > div > a.btn-site {
    display: block;
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────────────
   BREAKPOINT: 480px — large mobile / small tablet
   ───────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  :root { --site-padding: 0 1.5rem; }

  .site-hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .site-hero__ctas .btn-site { width: auto; }

  .card-grid      { grid-template-columns: repeat(2, 1fr); }
  .blog-grid      { grid-template-columns: repeat(2, 1fr); }
  .tier-grid      { grid-template-columns: repeat(2, 1fr); }

  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   BREAKPOINT: 768px — tablet and up
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  :root { --site-padding: 0 2rem; }

  /* Show desktop nav, hide mobile elements */
  .nav-hamburger  { display: none; }
  .sheet-backdrop { display: none !important; }
  .bottom-sheet   { display: none !important; }

  .site-hero { padding: 68px 0 52px; }
  .site-hero__inner { flex-direction: row; align-items: center; gap: 48px; }
  .site-hero__content { flex: 1; }
  .site-hero__image { width: 45%; height: 460px; min-height: 460px; flex-shrink: 0; margin-top: 0; }

  .card-grid  { grid-template-columns: repeat(3, 1fr); }
  .tier-grid  { grid-template-columns: repeat(2, 1fr); }
  .blog-grid  { grid-template-columns: repeat(2, 1fr); }

  .apply-layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .apply-layout .apply-form-col { flex: 1; }
  .apply-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: calc(var(--nav-height) + 16px); }

  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 28px;
  }
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  .steps-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* ─────────────────────────────────────────────────────────────
   BREAKPOINT: 1024px — desktop
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root { --site-padding: 0 2.5rem; }

  .site-hero__sub { font-size: 17px; }

  .card-grid         { grid-template-columns: repeat(3, 1fr); }
  .tier-grid         { grid-template-columns: repeat(4, 1fr); }
  .blog-grid         { grid-template-columns: repeat(3, 1fr); }
  .values-grid       { grid-template-columns: repeat(3, 1fr); }
  .value-props-panel { grid-template-columns: repeat(3, 1fr); }
  .value-props-panel .value-prop-cell {
    border-bottom: none;
    border-right: 1px solid var(--color-dust-grey);
  }
  .value-props-panel .value-prop-cell:last-child { border-right: none; }
}

/* ══════════════════════════════════════════════════════════════
   SPEC 2.3 — PART 14: HOTEL DESIGN LAYER
   ══════════════════════════════════════════════════════════════ */

/* ── 14A: Pricing card room tab header ───────────────────────── */
/* Override card to be padding-free so tab bleeds edge-to-edge */
.tier-card-pub {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
}
/* Wrapper holds the "Most Popular" badge so it clears overflow:hidden */
.tier-card-wrapper {
  position: relative;
}
.tier-card-wrapper .tier-card-pub__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
/* Room label tab — dark strip at top of card */
.pricing-card__tab {
  background: var(--color-dark-khaki);
  padding: 6px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.6);
  white-space: nowrap;
  gap: 8px;
}
/* Card body replaces old card padding */
.pricing-card__body {
  padding: 24px;
}
/* Penthouse — inverted dark card */
.pricing-card--penthouse {
  background: var(--color-dark-khaki);
}
.pricing-card--penthouse .tier-card-pub__name,
.pricing-card--penthouse .tier-card-pub__price,
.pricing-card--penthouse .tier-card-pub__tagline,
.pricing-card--penthouse .tier-card-pub__split {
  color: var(--color-cream);
}
.pricing-card--penthouse .tier-card-pub__features li {
  color: var(--color-cream);
}
.pricing-card--penthouse .tier-card-pub__features li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(247%2C244%2C239%2C0.75)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.pricing-card--penthouse .plaque--highlight {
  background: rgba(247,244,239,0.18);
  color: var(--color-cream);
}
/* Alternating stripe footer on penthouse */
.pricing-card__stripe-footer {
  height: 5px;
  display: flex;
  width: 100%;
  overflow: hidden;
}
.pricing-card__stripe-footer span { flex: 1; }
.pricing-card__stripe-footer span:nth-child(odd)  { background: var(--color-blue-slate); }
.pricing-card__stripe-footer span:nth-child(even) { background: var(--color-dark-khaki); }

/* ── 14B: Diamond key fob illustration ───────────────────────── */
.site-hero__image-wrap {
  /* Mobile: replicate the .site-hero__image layout */
  width: 100%;
  min-height: 260px;
  border-radius: var(--radius-md);
  margin-top: 24px;
  background: var(--color-dust-grey);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.site-hero__image-wrap .site-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  min-height: unset;
  background: transparent;
}
.fob-illustration {
  width: 140px;
  height: 182px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.fob-illustration svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Apply page — decorative corner fob */
.apply-fob-wrap {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.15;
  pointer-events: none;
  overflow: hidden;
}
.apply-fob-wrap .fob-illustration {
  width: 160px;
  height: 208px;
}
@media (max-width: 767px) {
  .apply-fob-wrap { display: none; }
}
@media (min-width: 768px) {
  .site-hero__image-wrap {
    width: 45%;
    height: 460px;
    min-height: 460px;
    margin-top: 0;
    border-radius: var(--radius-md);
  }
  .fob-illustration {
    width: 200px;
    height: 260px;
  }
}

/* ── 14C: Ornamental diamond section dividers ─────────────────── */
.orn-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.orn-line {
  flex: 1;
  height: 0.5px;
  background: #AEC8D6;
}
.orn-diamond {
  width: 5px;
  height: 5px;
  background: #AEC8D6;
  transform: rotate(45deg);
  flex-shrink: 0;
}
/* Dark section variant — for CTA banners on dark-khaki bg */
.orn-divider--dark .orn-line    { background: rgba(247,244,239,0.2); }
.orn-divider--dark .orn-diamond { background: rgba(247,244,239,0.7); opacity: 0.5; }
.orn-divider--dark .eyebrow     { color: rgba(247,244,239,0.5); }

/* ── 14D: Credential stamp seal ──────────────────────────────── */
.credential-seal {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid rgba(74,118,131,0.35);
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.credential-seal::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 0.5px solid rgba(74,118,131,0.15);
  pointer-events: none;
}
.credential-seal__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.credential-seal__est {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue-slate);
  opacity: 0.6;
  line-height: 1;
}
.credential-seal__year {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-dark-khaki);
  line-height: 1.1;
}
.credential-seal__cred {
  font-family: var(--font-body);
  font-size: 5.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue-slate);
  opacity: 0.5;
  line-height: 1;
}
/* Footer variant — smaller, inverted for dark bg */
.credential-seal--sm {
  width: 56px;
  height: 56px;
}
.credential-seal--sm::after { inset: 8px; }
.credential-seal--sm .credential-seal__year { font-size: 11px; }
.credential-seal--sm .credential-seal__est  { font-size: 6px; }
.credential-seal--sm .credential-seal__cred { font-size: 5px; }
.site-footer .credential-seal {
  border-color: rgba(247,244,239,0.2);
}
.site-footer .credential-seal::after {
  border-color: rgba(247,244,239,0.1);
}
.site-footer .credential-seal__year {
  color: rgba(247,244,239,0.8);
}
.site-footer .credential-seal__est,
.site-footer .credential-seal__cred {
  color: rgba(247,244,239,0.4);
  opacity: 1;
}

/* ── 14E: Tonal stripe section background ────────────────────── */
.section--stripe-bg {
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-cream) 0px,
    var(--color-cream) 40px,
    var(--color-dust-grey) 40px,
    var(--color-dust-grey) 80px
  ) !important;
}

/* ── 14F: Apply confirmation key card sleeve ──────────────────── */
.keycard-sleeve {
  border-radius: 12px;
  overflow: hidden;
  border: 0.5px solid rgba(63,58,20,0.12);
  background: var(--color-cream);
  max-width: 420px;
  margin: 0 auto 32px;
}
.keycard-sleeve__tab {
  background: var(--color-blue-slate);
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.85);
  text-align: center;
}
.keycard-sleeve__body {
  padding: 20px 20px 16px;
  background: var(--color-cream);
  text-align: center;
}
.keycard-sleeve__credential {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(63,58,20,0.35);
  margin-bottom: 12px;
}
.keycard-sleeve__inner {
  border: 0.5px solid rgba(63,58,20,0.18);
  border-radius: 6px;
  padding: 14px 16px;
}
.keycard-sleeve__name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark-khaki);
}
.keycard-sleeve__sub {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: rgba(63,58,20,0.55);
  margin-top: 4px;
  line-height: 1.5;
}
.keycard-sleeve__stripe {
  height: 6px;
  display: flex;
  overflow: hidden;
}
.keycard-sleeve__stripe span { flex: 1; }
.keycard-sleeve__stripe span:nth-child(odd)  { background: var(--color-blue-slate); }
.keycard-sleeve__stripe span:nth-child(even) { background: var(--color-dark-khaki); }

/* ── 14G: CTA banner type contrast ──────────────────────────── */
.site-cta-banner .script-line {
  font-size: clamp(40px, 4vw, 56px);
  margin-bottom: 4px;
  display: block;
}
.site-cta-banner h2 {
  font-size: 36px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.site-cta-banner .banner-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.site-cta-banner .orn-divider { justify-content: center; }
.site-cta-banner .banner-inner p {
  margin-bottom: 32px;
}

/* ── 14H: Scroll entrance animations ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger for 3-col card grids */
  .card-grid .fade-up:nth-child(3n+1),
  .values-grid .fade-up:nth-child(3n+1),
  .value-props-panel .fade-up:nth-child(3n+1) { transition-delay: 0ms; }
  .card-grid .fade-up:nth-child(3n+2),
  .values-grid .fade-up:nth-child(3n+2),
  .value-props-panel .fade-up:nth-child(3n+2) { transition-delay: 80ms; }
  .card-grid .fade-up:nth-child(3n+3),
  .values-grid .fade-up:nth-child(3n+3),
  .value-props-panel .fade-up:nth-child(3n+3) { transition-delay: 160ms; }
  /* Stagger for 4-col tier grid (desktop) */
  .tier-grid .fade-up:nth-child(4n+1) { transition-delay: 0ms; }
  .tier-grid .fade-up:nth-child(4n+2) { transition-delay: 80ms; }
  .tier-grid .fade-up:nth-child(4n+3) { transition-delay: 160ms; }
  .tier-grid .fade-up:nth-child(4n+4) { transition-delay: 240ms; }
  /* How It Works steps */
  #steps-list .fade-up:nth-child(1) { transition-delay: 0ms; }
  #steps-list .fade-up:nth-child(2) { transition-delay: 80ms; }
  #steps-list .fade-up:nth-child(3) { transition-delay: 160ms; }
  #steps-list .fade-up:nth-child(4) { transition-delay: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT SPEC — PARTS 5–9
   Page-level layout, card base, footer, mobile signals, forms
   ══════════════════════════════════════════════════════════════ */

/* ── 5A: Homepage hero (full-bleed photo, text overlay) ───────── */
.site-hero--fullbleed {
  position: relative;
  height: 680px;
  overflow: hidden;
  padding: 0;
}

.site-hero__bg {
  position: absolute;
  inset: 0;
  background: var(--color-dust-grey);
  background-size: cover;
  background-position: center;
}

.site-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(63, 58, 20, 0.62) 0%,
    rgba(63, 58, 20, 0.35) 50%,
    rgba(63, 58, 20, 0) 80%
  );
}

.site-hero__content--overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
}

.site-hero__text {
  max-width: 560px;
}

.site-hero--fullbleed h1 {
  color: var(--color-cream);
  margin-bottom: 16px;
}

.site-hero__sub--overlay {
  font-size: 17px;
  color: rgba(247, 244, 239, 0.85);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 46ch;
}

.site-hero__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Diamond fob — floated right of hero */
.site-hero__fob {
  position: absolute;
  right: calc(var(--container-pad) + 40px);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.18;
  width: 200px;
  pointer-events: none;
}

@media (max-width: 768px) {
  .site-hero--fullbleed {
    height: 480px;
  }

  .site-hero--fullbleed .site-hero__overlay {
    background: rgba(63, 58, 20, 0.55);
  }

  .site-hero__content--overlay {
    align-items: flex-end;
    padding-bottom: 48px;
    padding-left: var(--container-pad-mobile);
    padding-right: var(--container-pad-mobile);
  }

  .site-hero__text {
    max-width: 100%;
  }

  .site-hero__sub--overlay {
    font-size: 15px;
  }

  .site-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .site-hero__fob {
    display: none;
  }
}

/* ── 5A: Value props tiled panel (spec grid variant) ──────────── */
.value-props-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--color-dust-grey);
  border-radius: 20px;
  overflow: hidden;
}

.value-props-grid .value-prop-cell {
  padding: 40px 32px;
  border-right: 1px solid var(--color-dust-grey);
  border-bottom: none;
}

.value-props-grid .value-prop-cell:last-child {
  border-right: none;
}

@media (max-width: 768px) {
  .value-props-grid {
    grid-template-columns: 1fr;
    border-radius: 12px;
  }

  .value-props-grid .value-prop-cell {
    border-right: none;
    border-bottom: 1px solid var(--color-dust-grey);
    padding: 28px 24px;
  }

  .value-props-grid .value-prop-cell:last-child {
    border-bottom: none;
  }
}

/* ── 5A: About teaser (text left 55%, photo right 45%) ────────── */
.about-teaser {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 64px;
  align-items: center;
}

.about-teaser__photo {
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-dust-grey);
}

.about-teaser__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .about-teaser {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-teaser__photo {
    order: -1;
    aspect-ratio: 3/2;
    border-radius: var(--radius-lg);
  }
}

/* ── 5A: How It Works teaser (2×2 grid) ───────────────────────── */
.hiw-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap);
}

@media (max-width: 768px) {
  .hiw-teaser-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap-mobile);
  }
}

/* ── 5B–5G: Inner page hero (shared across all pages) ────────── */
.page-hero {
  padding: 80px 0;
  min-height: 320px;
  display: flex;
  align-items: center;
}

.page-hero__text {
  max-width: var(--container-narrow-max);
}

.page-hero h1 {
  margin-top: 8px;
  margin-bottom: 16px;
  color: var(--color-dark-khaki);
}

.page-hero__sub {
  font-size: 17px;
  color: rgba(63, 58, 20, 0.65);
  max-width: 52ch;
  line-height: 1.65;
}

@media (max-width: 768px) {
  .page-hero {
    padding: 48px 0;
    min-height: 0;
  }

  .page-hero__sub {
    font-size: 15px;
  }
}

/* ── 5B: Founder section (photo left sticky, bio right) ───────── */
.founder-section {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 72px;
  align-items: start;
}

.founder-section__photo {
  aspect-ratio: 3/4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-dust-grey);
  min-height: 360px;
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.founder-section__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-section__bio {
  padding-top: 8px;
}

.founder-section__quote {
  font-size: 17px;
  font-style: italic;
  color: rgba(63, 58, 20, 0.65);
  line-height: 1.65;
  margin: 24px 0;
  padding-left: 20px;
  border-left: 2px solid var(--color-blue-slate);
}

.founder-section__attribution {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(63, 58, 20, 0.45);
  margin-top: 20px;
}

@media (max-width: 768px) {
  .founder-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .founder-section__photo {
    order: -1;
    aspect-ratio: 4/3;
    min-height: 0;
    position: static;
    border-radius: var(--radius-lg);
  }

  .founder-section__quote {
    font-size: 15px;
  }
}

/* ── 5B: Credentials section ──────────────────────────────────── */
.credentials-section {
  text-align: center;
}

.credentials-section .credential-seal {
  margin: 0 auto 40px;
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  text-align: left;
}

@media (max-width: 768px) {
  .credentials-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap-mobile);
  }

  .credentials-section .credential-seal {
    margin-bottom: 28px;
  }
}

/* ── 5C: Benefits grid (6 cards, 3×2) ────────────────────────── */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
}

@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap-mobile);
  }
}

/* ── 5C: Comparison table ────────────────────────────────────── */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
  width: 40%;
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  width: 60%;
}

.comparison-table td {
  padding: 10px 16px;
  font-size: 14px;
  vertical-align: middle;
}

.comparison-table tr:nth-child(even) td {
  background: var(--color-cream);
}

.comparison-table .col-negative {
  color: var(--color-dark-khaki);
  opacity: 0.55;
}

.comparison-table .col-positive {
  color: var(--color-dark-khaki);
  font-weight: 500;
}

@media (max-width: 768px) {
  .comparison-table {
    display: block;
  }

  .comparison-table thead {
    display: none;
  }

  .comparison-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 0.5px solid var(--color-dust-grey);
  }

  .comparison-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* ── 5D: How It Works steps (2×2 grid) ───────────────────────── */
.hiw-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap);
}

.hiw-step-card {
  background: #fff;
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hiw-step__number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-blue-slate);
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-cream);
  flex-shrink: 0;
}

.hiw-step__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-dark-khaki);
  line-height: 1.3;
}

.hiw-step__body {
  font-size: 14px;
  color: rgba(63, 58, 20, 0.65);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .hiw-steps-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap-mobile);
  }

  .hiw-step-card {
    padding: 20px;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .hiw-step__body-wrap {
    flex: 1;
  }

  .hiw-step__title {
    font-size: 16px;
    margin-bottom: 4px;
  }
}

/* ── 5D: Requirements grid ───────────────────────────────────── */
.requirements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  margin-top: 40px;
}

@media (max-width: 768px) {
  .requirements-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap-mobile);
  }
}

/* ── 5E: Pricing grid ────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}

.pricing-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 0.5px solid rgba(63, 58, 20, 0.12);
}

.pricing-card--penthouse-spec .pricing-card__body {
  padding-top: calc(24px + 8px);
}

.pricing-card--featured-spec {
  border: 2px solid var(--color-blue-slate);
  position: relative;
}

.pricing-card--featured-spec .pricing-card__popular {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-blue-slate);
  color: var(--color-cream);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap-mobile);
  }
}

/* ── 5F: Blog grid ───────────────────────────────────────────── */
/* (blog-grid already exists; this adds the spec's aspect ratio override) */
@media (max-width: 768px) {
  .blog-card__image {
    aspect-ratio: 16/7;
  }
}

/* ── 5G: Apply layout (60/40 form/sidebar) ───────────────────── */
.apply-layout--spec {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 64px;
  align-items: start;
}

.apply-sidebar--spec {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  background: #fff;
  border: 0.5px solid var(--color-dust-grey);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
}

.apply-sidebar__title--spec {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue-slate);
  margin-bottom: 20px;
}

.apply-sidebar__step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 0.5px solid var(--color-dust-grey);
}

.apply-sidebar__step:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.apply-sidebar__step-num {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue-slate);
  min-width: 24px;
  padding-top: 2px;
}

.apply-sidebar__step-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark-khaki);
  margin-bottom: 3px;
}

.apply-sidebar__step-body {
  font-size: 12px;
  color: rgba(63, 58, 20, 0.6);
  line-height: 1.55;
}

@media (max-width: 768px) {
  .apply-layout--spec {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .apply-sidebar--spec {
    position: static;
    order: 2;
  }

  .apply-layout--spec .apply-form-col--spec {
    order: 1;
  }
}

/* ── 5H: CTA banner ─────────────────────────────────────────── */
.section--cta {
  background: var(--color-dark-khaki);
  text-align: center;
}

.section--cta .container {
  max-width: 560px;
}

.cta-banner__script {
  color: rgba(247, 244, 239, 0.85);
  margin-bottom: 4px;
}

.cta-banner__heading {
  font-family: var(--font-body);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-cream);
  line-height: 1.1;
  margin-bottom: 32px;
}

.cta-banner__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .cta-banner__heading {
    font-size: 26px;
    text-align: center;
    letter-spacing: 0.02em;
  }

  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

/* ── Part 6: Card base styles ────────────────────────────────── */
.card {
  background: #fff;
  border: 0.5px solid rgba(63, 58, 20, 0.10);
  border-radius: var(--radius-xl);
  padding: 28px;
  transition: var(--transition-base);
}

.card:hover {
  border-color: rgba(63, 58, 20, 0.22);
}

.card--value-prop {
  border: none;
  border-radius: 0;
  padding: 40px 32px;
}

.card--step {
  border-radius: var(--radius-lg);
  padding: 24px;
}

.card--pricing {
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
}

@media (max-width: 768px) {
  .card {
    padding: 20px;
    border-width: 0.5px;
  }

  .card--value-prop {
    padding: 28px 24px;
  }

  .card--step {
    padding: 16px 20px;
  }
}

/* ── Part 7: Footer layout (spec) ────────────────────────────── */
.site-footer__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 48px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.site-footer__nav-col-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.35);
  margin-bottom: 16px;
  display: block;
}

.site-footer__nav-link {
  display: block;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(247, 244, 239, 0.6);
  text-decoration: none;
  margin-bottom: 10px;
  transition: var(--transition-base);
}

.site-footer__nav-link:hover {
  color: rgba(247, 244, 239, 0.9);
}

@media (max-width: 768px) {
  .site-footer__main {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 36px;
    padding-left: var(--container-pad-mobile);
    padding-right: var(--container-pad-mobile);
  }
}

/* ── Part 8: Mobile hotel signals ────────────────────────────── */
@media (max-width: 768px) {
  /* Eyebrow — slight tracking reduce but stay generous */
  .eyebrow {
    letter-spacing: 0.14em;
  }

  /* Section headings stay left-aligned — never center */
  h2, h2.display, .h2--display {
    text-align: left;
  }

  /* Ornamental dividers scale down */
  .orn-divider {
    margin-bottom: 12px;
  }

  .orn-line {
    max-width: 40px;
  }

  /* CTA banner heading stays uppercase, center */
  .cta-banner__heading {
    text-align: center;
  }

  /* Credential seal never hidden */
  .credential-seal {
    display: flex;
  }

  /* Penthouse stripe footer stays */
  .pricing-card--penthouse .pricing-card__stripe-footer {
    display: flex;
  }
}

/* ── Part 9: Apply form styles ───────────────────────────────── */
.apply-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.apply-form__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(63, 58, 20, 0.6);
}

.apply-form__input,
.apply-form__select,
.apply-form__textarea {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-dark-khaki);
  background: #fff;
  border: 1px solid var(--color-dust-grey);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  height: 44px;
  transition: border-color 280ms ease;
  width: 100%;
}

.apply-form__textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

.apply-form__input:focus,
.apply-form__select:focus,
.apply-form__textarea:focus {
  outline: none;
  border-color: var(--color-blue-slate);
}

.apply-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .apply-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* ══════════════════════════════════════════════════════════════
   NEW COMPONENTS — Redesign spec
   ══════════════════════════════════════════════════════════════ */

/* ── Feature rows (Why Join benefits) ─────────────────────────
   Replaces the 6-card grid. Open horizontal list with icon circles.
   ──────────────────────────────────────────────────────────── */
.feature-rows {
  display: flex;
  flex-direction: column;
}
.feature-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-bottom: 0.5px solid #E0D8CE;
}
.feature-row:last-child { border-bottom: none; }
.feature-row__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: #FFFFFF;
  border: 0.5px solid #AEC8D6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-row__icon svg {
  width: 20px;
  height: 20px;
  color: #4A7683;
}
.feature-row__text h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: #1E1C00;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.feature-row__text p {
  font-size: 14px;
  color: rgba(63,58,20,0.65);
  line-height: 1.75;
  margin: 0;
}
.feature-row__pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4A7683;
  background: rgba(174,200,214,0.2);
  border: 0.5px solid #AEC8D6;
  border-radius: 99px;
  padding: 2px 8px;
  vertical-align: middle;
}

/* ── Four pillars grid (Why Join) ─────────────────────────────
   2×2 desktop grid with 1px separator between cells.
   ──────────────────────────────────────────────────────────── */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #E0D8CE; /* creates 1px lines between cells */
  border-radius: 12px;
  overflow: hidden;
}
.pillars-grid__cell {
  background: #FFFFFF;
  padding: 2rem;
}
.pillars-grid__num {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #7DB0CF;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
.pillars-grid__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: #1E1C00;
  margin-bottom: 0.6rem;
}
.pillars-grid__body {
  font-size: 14px;
  color: rgba(63,58,20,0.65);
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 768px) {
  .pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Quote band (Why Join) ────────────────────────────────────
   Blue Slate background, large centred blockquote.
   ──────────────────────────────────────────────────────────── */
.quote-band {
  background: #4A7683;
}
.quote-band__quote {
  text-align: center;
  margin: 0;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.quote-band__text {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-style: italic;
  color: #F7F4EF;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}
.quote-band__cite {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: #AEC8D6;
  letter-spacing: 0.04em;
  font-style: normal;
}

/* ── Agent-type card label (Who thrives) ──────────────────────
   Small label above card title in Sky Reflection.
   ──────────────────────────────────────────────────────────── */
.agent-type-card__label {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7DB0CF;
  margin-bottom: 6px;
}
/* Tighten agent-type card border to spec */
.agent-type-card {
  border: 0.5px solid #E0D8CE;
  border-radius: 12px;
}

/* ── Open vertical timeline (How It Works) ────────────────────
   Left vertical line with numbered nodes per step.
   ──────────────────────────────────────────────────────────── */
.hiw-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-left: 0;
}
.hiw-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: #AEC8D6;
}
.hiw-timeline-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  position: relative;
}
.hiw-timeline-step__num {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: #4A7683;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.hiw-timeline-step__content {
  padding-top: 4px;
  flex: 1;
}
.hiw-timeline-step__timing {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7DB0CF;
  margin: 0 0 0.35rem;
  display: block;
}
.hiw-timeline-step__title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: #1E1C00;
  margin-bottom: 0.5rem;
}
.hiw-timeline-step__body {
  font-size: 14px;
  color: rgba(63,58,20,0.65);
  line-height: 1.75;
  margin: 0 0 0.75rem;
}
.hiw-timeline-step__pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: #4A7683;
  background: rgba(174,200,214,0.18);
  border: 0.5px solid #AEC8D6;
  border-radius: 99px;
  padding: 3px 12px;
}

/* ── FAQ accordion ────────────────────────────────────────────
   Borderless full-width items with +/− toggle.
   ──────────────────────────────────────────────────────────── */
.faq-accordion {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-bottom: 0.5px solid #E0D8CE;
}
.faq-item:first-child {
  border-top: 0.5px solid #E0D8CE;
}
.faq-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: none;
  border: none;
  padding: 1rem 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: #1E1C00;
  line-height: 1.4;
}
.faq-toggle:hover { color: #4A7683; }
.faq-toggle__icon {
  font-size: 18px;
  color: #4A7683;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.faq-answer {
  padding: 0.75rem 0 1rem;
}
.faq-answer p {
  font-size: 14px;
  color: rgba(63,58,20,0.65);
  line-height: 1.75;
  margin: 0;
}

/* ── Apply steps intro line ──────────────────────────────────── */
.apply-steps-intro {
  font-size: 14px;
  color: rgba(63,58,20,0.65);
  line-height: 1.6;
  margin: 4px 0 1rem;
}

/* ── Pricing: Penthouse qualifier ──────────────────────────── */
.tier-card-pub__qualifier {
  font-size: 12px;
  color: rgba(247,244,239,0.6);
  line-height: 1.5;
  margin: 0.5rem 0;
  font-style: italic;
}
/* Light version for non-penthouse — only applies on dark card */
.tier-card-pub:not(.pricing-card--penthouse) .tier-card-pub__qualifier {
  color: rgba(30,28,0,0.5);
}

/* ═══════════════════════════════════════════════════════════════
   SPEC v2 COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── .plaque variants ─────────────────────────────────────────── */
.plaque--step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-background-info);
  color: var(--color-text-info);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plaque--good {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 10px 12px;
}
.plaque--good .plaque__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-background-success);
  color: var(--color-text-success);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.plaque--good .plaque__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}
.plaque--good .plaque__desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ── .card base + modifiers ───────────────────────────────────── */
.card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 1rem 1.25rem;
}
.card--featured {
  border: 2px solid var(--color-border-info);
}

/* ── .form-row utility ────────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ── .link-secondary ──────────────────────────────────────────── */
.link-secondary {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.link-secondary:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

/* ── Stat strip (About page) ──────────────────────────────────── */
.stat-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.stat-pill {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 10px 16px;
  flex: 1;
  min-width: 80px;
  text-align: center;
}
.stat-pill__value {
  display: block;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: var(--font-body);
}
.stat-pill__label {
  display: block;
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Testimonials (About page) ────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.testimonial-card__quote {
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin: 0 0 12px;
}
.testimonial-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-card__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}
.testimonial-card__role {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin: 0;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-background-info);
  color: var(--color-text-info);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Step rows ────────────────────────────────────────────────── */
.step-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.step-row:last-child { border-bottom: none; }
.step-row__body { flex: 1; }
.step-row__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0 0 4px;
  font-family: var(--font-body);
  line-height: 1.4;
}
.step-row__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ── Info callout ─────────────────────────────────────────────── */
.info-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-background-info);
  border-radius: var(--border-radius-md);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.info-callout__icon {
  color: var(--color-text-info);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.info-callout__text {
  font-size: 13px;
  color: var(--color-text-info);
  line-height: 1.5;
  margin: 0;
}

/* ── Form label helpers ───────────────────────────────────────── */
.form-label__optional {
  font-weight: 400;
  color: var(--color-text-tertiary);
  font-size: 11px;
}
.form-hint {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin: 4px 0 0;
}

/* ── Tag strip + pills (Blog) ─────────────────────────────────── */
.tag-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.tag {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 0.5px solid var(--color-border-secondary);
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  transition: background 0.1s, color 0.1s;
  font-family: var(--font-body);
}
.tag--active,
.tag:hover {
  background: var(--color-background-info);
  color: var(--color-text-info);
  border-color: transparent;
}

/* ── Post grid + cards (Blog) ─────────────────────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 2.5rem;
}
.post-tag {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: var(--border-radius-md);
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--font-body);
}
.post-tag--haus-updates  { color: var(--color-text-warning); background: var(--color-background-warning); }
.post-tag--supplier-news { color: var(--color-text-success); background: var(--color-background-success); }
.post-tag--agent-tips    { color: var(--color-text-info);    background: var(--color-background-info); }
.post-card__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0 0 6px;
  line-height: 1.4;
  font-family: var(--font-body);
}
.post-card__excerpt {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 10px;
}
.post-card__meta {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin: 0;
}

/* ── Pricing: startup fee note ────────────────────────────────── */
.price-startup {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin: 0 0 10px;
}

/* ── Pricing: popular badge ───────────────────────────────────── */
.popular-badge {
  background: var(--color-background-info);
  color: var(--color-text-info);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--border-radius-md);
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--font-body);
}

/* ── Benefit card data point ──────────────────────────────────── */
.benefit-card__data {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-success);
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
}

/* ── Mobile: step-row / plaque--step centering exceptions ─────── */
@media (max-width: 767px) {
  .step-row { text-align: left; }
  .step-row .step-row__title,
  .step-row .step-row__desc { text-align: left; }
  .plaque--good .plaque__title,
  .plaque--good .plaque__desc { text-align: left; }
}