/* ==========================================================================
   Sandra Oluchi Relocation Concierge — Design tokens & component styles
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-500italic.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-700.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-700.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */

:root {
  --color-ink: #242321;
  --color-charcoal: #343330;
  --color-charcoal-strong: #1c1b19;
  --color-gold: #b38a43;
  --color-gold-dark: #8d682e;
  --color-gold-soft: #d6af70;
  --color-ivory: #fbfaf7;
  --color-warm-white: #ffffff;
  --color-sand: #f2ede3;
  --color-border: #ddd6c9;
  --color-success: #2e6b4f;
  --color-error: #9a332b;

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --content-max: 1280px;
  --content-reading: 720px;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 5.5rem;
  --space-3xl: 7.5rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(36, 35, 33, 0.06);
  --shadow-md: 0 12px 32px rgba(36, 35, 33, 0.1);
  --shadow-lg: 0 24px 64px rgba(36, 35, 33, 0.16);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-med: 320ms;

  --header-height: 84px;
}

@media (max-width: 640px) {
  :root {
    --header-height: 68px;
    --space-xl: 3rem;
    --space-2xl: 3.75rem;
    --space-3xl: 4.5rem;
  }
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-warm-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

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

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

a {
  color: inherit;
}

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

table {
  border-collapse: collapse;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Skip link & focus ---------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--color-charcoal-strong);
  color: var(--color-warm-white);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--duration-fast) var(--ease-out);
}

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

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

/* ---------- Typography ---------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: var(--color-charcoal-strong);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
}

h2 {
  font-size: clamp(2rem, 1.65rem + 1.6vw, 2.9rem);
}

h3 {
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
}

h4 {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

p {
  max-width: var(--content-reading);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-gold);
  flex-shrink: 0;
}

.section-lede {
  font-size: 1.1rem;
  color: var(--color-charcoal);
  margin-top: var(--space-sm);
}

.text-muted {
  color: #5c5a55;
}

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

/* ---------- Layout helpers ---------- */

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.section {
  padding-block: var(--space-2xl);
}

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

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

.section-dark {
  background: var(--color-charcoal-strong);
  color: var(--color-sand);
}

.section-dark h2,
.section-dark h3 {
  color: var(--color-warm-white);
}

.section-head {
  max-width: 760px;
  margin-bottom: var(--space-lg);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head--center .eyebrow::before {
  display: none;
}

.section-foot-cta {
  margin-top: var(--space-lg);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.85em 1.7em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

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

.btn-primary {
  background: var(--color-charcoal-strong);
  color: var(--color-warm-white);
  border-color: var(--color-charcoal-strong);
}

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

.btn-secondary {
  background: transparent;
  color: var(--color-charcoal-strong);
  border-color: var(--color-charcoal-strong);
}

.btn-secondary:hover {
  background: var(--color-charcoal-strong);
  color: var(--color-warm-white);
}

.btn-on-dark {
  color: var(--color-warm-white);
  border-color: rgba(251, 250, 247, 0.55);
}

.btn-on-dark:hover {
  background: var(--color-warm-white);
  color: var(--color-charcoal-strong);
  border-color: var(--color-warm-white);
}

.btn-gold {
  background: var(--color-gold);
  color: var(--color-charcoal-strong);
  border-color: var(--color-gold);
}

.btn-gold:hover {
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}

.btn-white {
  background: var(--color-warm-white);
  color: var(--color-charcoal-strong);
  border-color: var(--color-warm-white);
}

.btn-white:hover {
  background: var(--color-sand);
  border-color: var(--color-sand);
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 500;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-med) var(--ease-out),
    box-shadow var(--duration-med) var(--ease-out),
    border-color var(--duration-med) var(--ease-out);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header.menu-open {
  background: var(--color-warm-white);
  border-bottom-color: var(--color-border);
  /* backdrop-filter on a fixed-position ancestor creates a new containing
     block for fixed-position descendants — it would trap .mobile-nav's
     own fixed positioning inside the header's own box instead of the
     viewport, so it must be off whenever the menu (a fixed-position
     child of this header) is open. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-md);
}

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  flex-shrink: 0;
}

.brand-logo {
  height: 40px;
  width: auto;
}

/* The header background is always light now (see .site-header above), so
   the dark/black logo is used at every breakpoint and in every scroll
   state — the white logo variant is kept in the DOM only as a decorative
   fallback and stays hidden. */
.brand-logo--light {
  display: none;
}

.brand-logo--dark {
  position: static;
  max-width: none;
  opacity: 1;
}

.primary-nav {
  display: none;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.primary-nav a {
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-charcoal-strong);
  position: relative;
  padding-block: 0.25rem;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--color-gold-dark);
  transition: right var(--duration-med) var(--ease-out);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  right: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header-cta {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.nav-toggle-bars {
  position: relative;
  width: 22px;
  height: 16px;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-warm-white);
  border-radius: 1px;
  transition: transform var(--duration-med) var(--ease-out), opacity var(--duration-fast) var(--ease-out), top var(--duration-med) var(--ease-out), background-color var(--duration-med) var(--ease-out);
}

.site-header.is-scrolled .nav-toggle-bars span,
.site-header.menu-open .nav-toggle-bars span {
  background: var(--color-charcoal-strong);
}

.nav-toggle-bars span:nth-child(1) {
  top: 0;
}

.nav-toggle-bars span:nth-child(2) {
  top: 7px;
}

.nav-toggle-bars span:nth-child(3) {
  top: 14px;
}

.menu-open .nav-toggle-bars span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.menu-open .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.menu-open .nav-toggle-bars span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 400;
  background: var(--color-warm-white);
  padding: var(--space-lg) clamp(1.25rem, 4vw, 3rem) var(--space-xl);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-med) var(--ease-out), transform var(--duration-med) var(--ease-out), visibility var(--duration-med);
}

.mobile-nav[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.mobile-nav a {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-charcoal-strong);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav .btn {
  margin-top: var(--space-lg);
  /* .mobile-nav a (class + type selector) otherwise outranks
     .btn-primary's white text and centered content — .mobile-nav .btn
     (two classes) is more specific and wins both back. Its display:block
     also overrides .btn's inline-flex centering, so text-align needs
     restating explicitly here. */
  color: var(--color-warm-white);
  text-align: center;
}

/* Below 960px the header has no room for the nav/CTA, so it relies on the
   hamburger menu instead — the logo just runs slightly larger there than
   on desktop for extra legibility at a glance. The nav-toggle bars still
   need an explicit override since the base rule is white (it has no
   scroll-state trigger to key off below 960px the way the desktop
   header's own icon states do). */
@media (max-width: 959px) {
  .brand {
    height: 48px;
  }

  .brand-logo--dark {
    height: 48px;
    max-width: 55vw;
  }

  .nav-toggle-bars span {
    background: var(--color-charcoal-strong);
  }
}

@media (min-width: 960px) {
  .brand {
    height: 44px;
  }

  .brand-logo--dark {
    height: 44px;
  }

  .primary-nav {
    display: block;
  }
  .header-cta {
    display: inline-flex;
  }
  .nav-toggle,
  .mobile-nav {
    display: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;

  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-block-start: calc(var(--header-height) + clamp(1.5rem, 5vw, 2.5rem));
  padding-block-end: clamp(1.5rem, 6vw, 3.5rem);

  /* Light grounding gradient + photo as stacked background layers — no
     <img> element, so a solid background-color still shows before the
     photo loads (or if it fails). The headline now lives in the card
     below, not on the image, so the overlay only needs a faint assist
     near the very bottom rather than darkening the whole photo.
     Swapped for a larger file at wider breakpoints below, mirroring the
     old srcset breakpoints; matching <link rel="preload" media="..."> tags
     in <head> keep only the right one fetched eagerly per viewport. */
  background-color: var(--color-charcoal-strong);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 22%;
  background-image: linear-gradient(
      180deg,
      rgba(20, 19, 17, 0) 0%,
      rgba(20, 19, 17, 0) 55%,
      rgba(20, 19, 17, 0.16) 100%
    ),
    url("/assets/images/north-dallas-family-relocation-640w.webp");
}

@media (min-width: 640px) {
  .hero {
    min-height: 680px;
    justify-content: flex-end;
    background-image: linear-gradient(
        180deg,
        rgba(20, 19, 17, 0) 0%,
        rgba(20, 19, 17, 0) 55%,
        rgba(20, 19, 17, 0.16) 100%
      ),
      url("/assets/images/north-dallas-family-relocation-960w.webp");
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: 800px;
    /* At this width the card sits beside the person on the right rather
       than below them, so it no longer needs to hug the bottom edge —
       centering it keeps the whole card (including both CTA buttons)
       inside the first viewport on common laptop heights (720-900px)
       instead of being pinned against an 800px-tall section that's
       taller than the visible window. */
    align-items: center;
    background-image: linear-gradient(
        180deg,
        rgba(20, 19, 17, 0) 0%,
        rgba(20, 19, 17, 0) 55%,
        rgba(20, 19, 17, 0.16) 100%
      ),
      url("/assets/images/north-dallas-family-relocation.webp");
  }
}

/* ---------- Hero content card ---------- */

.hero-card {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--color-ivory);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 6vw, 2.25rem) clamp(1.5rem, 6vw, 2rem);
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hero-card {
    width: min(480px, 70%);
  }
}

@media (min-width: 1024px) {
  .hero-card {
    width: 46%;
    min-width: 420px;
    max-width: 620px;
    padding: clamp(2.5rem, 3.5vw, 3.25rem);
  }
}

.hero-card h1 {
  font-size: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
}

.hero-card .hero-body {
  margin-top: var(--space-md);
  font-size: 1.05rem;
  color: var(--color-charcoal);
}

.hero-card .hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.hero-card .hero-actions .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .hero-card .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero-card .hero-actions .btn {
    width: auto;
  }
}

/* ---------- Reveal animation ---------- */

.reveal {
  transition: opacity var(--duration-med) var(--ease-out), transform var(--duration-med) var(--ease-out);
}

.reveal.reveal-armed {
  opacity: 0;
  transform: translateY(18px);
}

.reveal.reveal-armed.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Feature / value grid ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.feature-card {
  padding: var(--space-md);
  background: var(--color-warm-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.section-alt .feature-card {
  background: var(--color-warm-white);
}

.feature-card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-sm);
  color: var(--color-gold-dark);
}

.feature-card h4 {
  margin-bottom: 0.4rem;
}

.feature-card p {
  font-size: 0.94rem;
  color: var(--color-charcoal);
}

.challenge-copy {
  max-width: var(--content-reading);
}

.concierge-difference {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

/* ---------- Service cards ---------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.service-card {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-warm-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out);
}

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

.service-index {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-sm);
}

.service-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.service-card p {
  color: var(--color-charcoal);
  font-size: 0.96rem;
}

/* ---------- Process ---------- */

.process-list {
  margin-top: var(--space-lg);
  display: grid;
  gap: 0;
  counter-reset: step;
}

.process-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.process-step:last-child {
  border-bottom: 1px solid var(--color-border);
}

.process-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--color-gold-dark);
  line-height: 1;
}

.process-step h3 {
  margin-bottom: 0.35rem;
}

.process-step p {
  color: var(--color-charcoal);
}

/* ---------- Communities ---------- */

.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.community-card {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--color-warm-white) 0%, var(--color-sand) 130%);
}

.community-card .community-index {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-border);
}

.community-card h3 {
  margin-bottom: 0.5rem;
}

.community-card p {
  font-size: 0.94rem;
  color: var(--color-charcoal);
}

.community-note {
  margin-top: var(--space-md);
  font-size: 0.92rem;
}

/* ---------- Media + copy split (Lifestyle / Playbook) ---------- */

.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.split-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-media--tall {
  aspect-ratio: 4 / 5;
}

.split-media--wide {
  aspect-ratio: 3 / 2;
}

.split-list {
  margin-top: var(--space-md);
  display: grid;
  gap: 0.65rem;
}

.split-list li {
  display: flex;
  gap: 0.65em;
  font-size: 0.98rem;
  color: var(--color-charcoal);
}

.split-list li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 0.55em;
  background: var(--color-gold);
  border-radius: 50%;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
  .split--media-right .split-media {
    order: 2;
  }
}

/* ---------- Playbook ---------- */

.playbook-card {
  background: var(--color-charcoal-strong);
  color: var(--color-sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.playbook-inner {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-lg);
}

.playbook-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  max-width: 280px;
  margin-inline: auto;
}

.playbook-topics {
  margin-top: var(--space-md);
  display: grid;
  gap: 0.55rem;
}

.playbook-topics li {
  display: flex;
  gap: 0.65em;
  font-size: 0.96rem;
  color: rgba(242, 237, 227, 0.92);
}

.playbook-topics li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  background: var(--color-gold-soft);
  border-radius: 50%;
}

.playbook-inner .btn {
  margin-top: var(--space-lg);
}

@media (min-width: 800px) {
  .playbook-inner {
    grid-template-columns: 280px 1fr;
    align-items: center;
    padding: var(--space-2xl);
  }
}

/* ---------- Trust / testimonials ---------- */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.trust-card {
  padding: var(--space-md);
  border-left: 2px solid var(--color-gold);
}

.trust-card h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.35rem;
}

.trust-card p {
  font-size: 0.92rem;
  color: var(--color-charcoal);
}

.trust-note {
  margin-top: var(--space-lg);
  font-size: 0.88rem;
  font-style: italic;
  color: #6b6862;
}

/* ---------- Client experiences (testimonials) ---------- */

.client-experiences {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.client-experiences-heading {
  margin-bottom: var(--space-2xs);
}

/* 1-2 approved testimonials: static cards, no carousel */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
  max-width: 900px;
}

.testimonial-card {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.testimonial-quote-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-gold);
  margin-bottom: 0.15rem;
}

.testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--color-charcoal-strong);
}

.testimonial-rating {
  margin-top: var(--space-sm);
  color: var(--color-gold-dark);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}

.testimonial-attribution {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: var(--color-charcoal);
}

.testimonial-attribution strong {
  color: var(--color-charcoal-strong);
  font-weight: 600;
}

/* 3+ approved testimonials: accessible carousel */

.testimonial-carousel {
  position: relative;
  margin-top: var(--space-md);
  max-width: 780px;
}

.testimonial-viewport {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.testimonial-track {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--space-md);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.testimonial-track::-webkit-scrollbar {
  display: none;
}

.testimonial-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}

.testimonial-slide .testimonial-card {
  height: 100%;
}

@media (min-width: 900px) {
  .testimonial-slide {
    flex-basis: calc(50% - (var(--space-md) / 2));
  }
}

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.testimonial-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-warm-white);
  color: var(--color-charcoal-strong);
  flex-shrink: 0;
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.testimonial-arrow:hover {
  border-color: var(--color-gold);
}

.testimonial-arrow:active {
  transform: scale(0.94);
}

.testimonial-arrow svg {
  width: 18px;
  height: 18px;
}

.testimonial-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.testimonial-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--color-border);
  transition: width var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.testimonial-dot[aria-current="true"] {
  width: 22px;
  background: var(--color-gold-dark);
}

/* ---------- FAQ ---------- */

.faq-list {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 1.3rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-charcoal-strong);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-gold-dark);
  transform: translate(-50%, -50%);
  transition: transform var(--duration-med) var(--ease-out), opacity var(--duration-med) var(--ease-out);
}

.faq-icon::before {
  width: 16px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 16px;
}

.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-answer {
  padding-bottom: 1.4rem;
  color: var(--color-charcoal);
  max-width: var(--content-reading);
}

/* ---------- Consultation form ---------- */

.consultation-layout {
  display: grid;
  gap: var(--space-2xl);
}

.consultation-layout > * {
  /* Grid items default to min-width:auto, which lets a wide child (like
     a select with a long option) push the whole track past the viewport
     instead of shrinking. min-width:0 lets the grid track — and this
     content — actually respect the container width. */
  min-width: 0;
}

.consultation-intro {
  max-width: var(--content-reading);
}

.consultation-points {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}

.consultation-point {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.consultation-point-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-dark);
}

.consultation-point p {
  font-size: 0.94rem;
  color: var(--color-charcoal);
}

.consultation-contact {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 0.4rem;
  font-size: 0.95rem;
}

.consultation-contact a {
  text-decoration: none;
  color: var(--color-charcoal-strong);
  font-weight: 600;
}

.consultation-contact a:hover {
  color: var(--color-gold-dark);
}

.form-card {
  background: var(--color-warm-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}

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

.form-grid > * {
  /* Same fix as .consultation-layout above: a plain 1fr track still
     defers to its items' min-content width unless they can shrink. */
  min-width: 0;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-field--full {
    grid-column: 1 / -1;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-charcoal-strong);
}

.form-field .optional-tag {
  font-weight: 400;
  color: #7a776f;
  text-transform: none;
  letter-spacing: 0;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-warm-white);
  font-size: 0.98rem;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-gold-dark);
  box-shadow: 0 0 0 3px rgba(179, 138, 67, 0.18);
  outline: none;
}

.form-field textarea {
  resize: vertical;
  min-height: 96px;
}

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3e%3cpath d='M1 1l6 6 6-6' stroke='%23343330' stroke-width='1.6' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}

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

.field-error {
  font-size: 0.82rem;
  color: var(--color-error);
  min-height: 1.1em;
}

.consent-field {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  grid-column: 1 / -1;
}

.consent-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--color-charcoal-strong);
  flex-shrink: 0;
}

.consent-field label {
  font-size: 0.88rem;
  color: var(--color-charcoal);
  font-weight: 400;
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit-row {
  grid-column: 1 / -1;
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-fineprint {
  font-size: 0.8rem;
  color: #7a776f;
}

.form-status {
  grid-column: 1 / -1;
  font-size: 0.92rem;
  border-radius: var(--radius-sm);
  padding: 0.1rem;
}

.form-status[data-state="error"] {
  color: var(--color-error);
  padding: 0.85rem 1rem;
  background: rgba(154, 51, 43, 0.08);
  border: 1px solid rgba(154, 51, 43, 0.3);
  border-radius: var(--radius-sm);
}

.form-status:empty {
  display: none;
}

.form-success {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.form-success-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  color: var(--color-success);
}

.form-success h3 {
  margin-bottom: var(--space-2xs);
}

.form-success p {
  margin-inline: auto;
  color: var(--color-charcoal);
}

[hidden] {
  display: none !important;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-charcoal-strong);
  color: var(--color-sand);
  padding-block: var(--space-2xl) var(--space-lg);
}

.footer-grid {
  display: grid;
  gap: var(--space-lg);
}

.footer-brand-logo {
  height: 46px;
  width: auto;
  margin-bottom: var(--space-sm);
}

.footer-tagline {
  font-size: 0.92rem;
  color: rgba(242, 237, 227, 0.75);
  max-width: 320px;
}

.footer-nav h3,
.footer-contact h3 {
  font-family: var(--font-body);
  color: var(--color-warm-white);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.footer-nav ul,
.footer-contact ul {
  display: grid;
  gap: 0.6rem;
}

.footer-nav a,
.footer-contact a {
  text-decoration: none;
  color: rgba(242, 237, 227, 0.85);
  font-size: 0.94rem;
}

.footer-nav a:hover,
.footer-contact a:hover {
  color: var(--color-gold-soft);
}

.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(242, 237, 227, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(242, 237, 227, 0.6);
}

.footer-bottom a {
  color: rgba(242, 237, 227, 0.75);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--color-gold-soft);
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* ---------- Error page ---------- */

.error-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

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

.text-center .eyebrow {
  justify-content: center;
}

.text-center p.section-lede {
  margin-inline: auto;
}

.error-brand {
  display: inline-flex;
  margin-bottom: var(--space-lg);
}

.error-logo {
  height: 44px;
  width: auto;
  margin-inline: auto;
}

.actions-center {
  justify-content: center;
  margin-top: var(--space-lg);
}

/* ---------- Static interior pages (privacy, 404) ---------- */

.page-main {
  padding-top: calc(var(--header-height) + var(--space-xl));
}

.policy-body {
  max-width: var(--content-reading);
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
}

.policy-body h3 {
  margin-bottom: 0.5rem;
}

.policy-body p {
  color: var(--color-charcoal);
}

/* ---------- Chatbot launcher ----------
   Only the launcher lives here (always loaded) so it renders styled
   immediately. Everything else about the chatbot (panel, messages,
   carousel) is in chatbot.css, which loads lazily on first interaction
   or browser idle time — see script.js initChatbotLoader(). */

.chatbot-launcher {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 600;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-charcoal-strong);
  color: var(--color-warm-white);
  border: 1px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  opacity: 0;
  transform: scale(0.6);
  animation: chatbot-launcher-in 480ms var(--ease-out) 900ms forwards;
}

.chatbot-launcher:hover {
  transform: scale(1.06);
  box-shadow: 0 28px 60px rgba(36, 35, 33, 0.28);
}

.chatbot-launcher-icon {
  width: 26px;
  height: 26px;
}

@keyframes chatbot-launcher-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-launcher {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .chatbot-launcher {
    width: 54px;
    height: 54px;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .chatbot-launcher-icon {
    width: 24px;
    height: 24px;
  }
}

/* ---------- Responsive section spacing ---------- */

@media (max-width: 640px) {
  .section {
    padding-block: var(--space-xl);
  }
  .process-step {
    grid-template-columns: 44px 1fr;
  }
}