/* ==========================================================================
   Growmax Property — Design Tokens & Base Styles
   Direction: Modern Trust (Navy & Gold) · Lexend + Source Sans 3
   ========================================================================== */

:root {
  /* --- Color: Navy scale --- */
  --navy-950: #05070d;
  --navy-900: #0b1220;
  --navy-850: #0e1626;
  --navy-800: #131e33;
  --navy-700: #1c2c4a;
  --navy-600: #2a3f66;
  --navy-500: #3e5686;

  /* --- Color: Neutral / paper --- */
  --paper: #faf8f4;
  --paper-alt: #f3f0e8;
  --white: #ffffff;
  --ink: #0f172a;
  --ink-soft: #33405a;
  --muted: #5b6478;
  --muted-2: #838a9c;
  --border: #e7e2d6;
  --border-dark: rgba(255, 255, 255, 0.12);
  --border-dark-soft: rgba(255, 255, 255, 0.07);

  /* --- Color: Gold accent --- */
  --gold-300: #ecdfb4;
  --gold-400: #d7bd7c;
  --gold-500: #bf9a4f;
  --gold-600: #a17f3b;
  --gold-700: #7f632c;

  /* --- Semantic --- */
  --color-primary: var(--navy-900);
  --color-on-primary: var(--white);
  --color-accent: var(--gold-500);
  --color-on-accent: var(--navy-900);
  --color-danger: #b3261e;
  --color-success: #2f6b4f;

  /* --- Typography --- */
  --font-head: "Lexend", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --fs-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
  --fs-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --fs-md: clamp(1.15rem, 1.1rem + 0.25vw, 1.3rem);
  --fs-lg: clamp(1.35rem, 1.25rem + 0.5vw, 1.65rem);
  --fs-xl: clamp(1.7rem, 1.5rem + 1vw, 2.25rem);
  --fs-2xl: clamp(2.1rem, 1.8rem + 1.5vw, 3rem);
  --fs-3xl: clamp(2.6rem, 2.1rem + 2.5vw, 4.2rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* --- Spacing (4/8pt scale) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* --- Shadow (navy-tinted) --- */
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06), 0 1px 1px rgba(11, 18, 32, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 18, 32, 0.08), 0 2px 6px rgba(11, 18, 32, 0.05);
  --shadow-lg: 0 24px 60px rgba(11, 18, 32, 0.14), 0 8px 20px rgba(11, 18, 32, 0.08);
  --shadow-gold: 0 10px 30px rgba(191, 154, 79, 0.28);

  /* --- Layout --- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 84px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

@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;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

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

h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.01em;
}

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

/* Visible focus states — accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--dur-fast) var(--ease-out);
}

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

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

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

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

.section--dark {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.88);
}

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

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

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

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

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

.stack {
  display: flex;
  flex-direction: column;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--gold-500);
  display: inline-block;
}

.section--dark .eyebrow {
  color: var(--gold-400);
}

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

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

.lede {
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: var(--lh-snug);
  margin-top: var(--space-4);
}

.section--dark .lede {
  color: rgba(255, 255, 255, 0.72);
}

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

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

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease-out);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--navy-900);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background: var(--navy-800);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900);
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(191, 154, 79, 0.38);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}

.btn-outline:hover {
  border-color: var(--navy-900);
  background: var(--navy-900);
  color: var(--white);
}

.section--dark .btn-outline {
  color: var(--white);
  border-color: var(--border-dark);
}

.section--dark .btn-outline:hover {
  background: var(--white);
  color: var(--navy-900);
  border-color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding-inline: 0.25rem;
}

.btn-ghost:hover {
  color: var(--gold-700);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 1.1rem 2.25rem;
  font-size: var(--fs-base);
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    height var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.site-header.is-scrolled {
  height: 68px;
  background: var(--white);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--navy-900);
}

.brand-mark {
  height: 42px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  transition: height var(--dur-med) var(--ease-out);
}

.site-header.is-scrolled .brand-mark {
  height: 34px;
}

.brand-name {
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

/* The X in GROWMAX is the brand's arrow-and-tick device, lifted from the
   logo artwork. It is gold in both contexts, so one asset serves the light
   header and the navy footer. Sized in em so it tracks the wordmark. */
.brand-x {
  /* Overrides the global `img { display: block }` — this one sits inline,
     mid-word, between GROWMA and PROPERTY. */
  display: inline-block;
  height: 1.34em;
  width: auto;
  vertical-align: -0.34em;
  /* The X's crossing only begins ~43% into the artwork; everything left of
     that is the tick's tail, which belongs *under* the A. Pull back by that
     much so the visible X sits at normal letter spacing. */
  margin-left: -0.47em;
  margin-right: -0.04em;
}

.brand-name span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-top: 2px;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.nav-links a {
  position: relative;
  padding-block: 6px;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold-500);
  transition: right var(--dur-med) var(--ease-out);
}

.nav-links a:hover {
  color: var(--navy-900);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  right: 0;
}

.nav-links a[aria-current="page"] {
  color: var(--navy-900);
}

.nav-cta {
  display: none;
}

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

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
}

.menu-toggle span {
  position: relative;
  width: 22px;
  height: 2px;
  background: var(--navy-900);
  display: block;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--navy-900);
  transition: transform var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out);
}

.menu-toggle span::before {
  top: -7px;
}

.menu-toggle span::after {
  top: 7px;
}

.menu-toggle[aria-expanded="true"] span {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--paper);
  z-index: 90;
  padding: var(--space-6) var(--container-pad) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility var(--dur-med);
  overflow-y: auto;
}

.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.mobile-nav a {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--ink);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.mobile-nav .btn {
  margin-top: var(--space-4);
}

@media (min-width: 960px) {
  .nav-links {
    display: flex;
  }
  .nav-cta {
    display: inline-flex;
  }
  .menu-toggle {
    display: none;
  }
  .mobile-nav {
    display: none;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.68);
  padding-block: var(--space-9) var(--space-6);
}

.footer-top {
  display: grid;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-dark-soft);
}

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

.footer-brand .brand {
  color: var(--white);
}

.footer-brand p {
  margin-top: var(--space-4);
  max-width: 320px;
  font-size: var(--fs-sm);
}

.footer-heading {
  font-family: var(--font-head);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.footer-links a {
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-links a:hover {
  color: var(--gold-400);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Cards
   ========================================================================== */

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

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.icon-tile {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
  color: var(--navy-900);
  margin-bottom: var(--space-5);
}

.icon-tile svg {
  width: 26px;
  height: 26px;
  stroke: var(--navy-900);
}

.card:hover .icon-tile {
  background: var(--navy-900);
}

.card:hover .icon-tile svg {
  stroke: var(--gold-400);
}

.card h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-3);
}

.card p {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--space-9));
  padding-bottom: var(--space-9);
  background: var(--navy-900);
  color: var(--white);
  overflow: hidden;
}

/* Layer order inside the hero:
   0 = SVG skyline (fallback, shows when no video file is present)
   1 = background video
   2 = scrim (keeps headline legible over any footage)
   3 = grain texture
   4 = content */

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.9;
}

.hero-bg svg {
  width: 100%;
  height: 100%;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Single gradient, not stacked — stacked layers compound and go near-black.
   Darkest behind the headline (left), clearing to the right so the footage
   is genuinely visible. Even the 0.85 end holds ~12:1 contrast for white
   text against worst-case (pure white) video frames. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    rgba(11, 18, 32, 0.80) 0%,
    rgba(11, 18, 32, 0.66) 42%,
    rgba(11, 18, 32, 0.26) 70%,
    rgba(11, 18, 32, 0.06) 100%
  );
}

/* Belt-and-braces legibility: a soft shadow means the headline stays readable
   even where the scrim is light, so the scrim itself can stay subtle. */
.hero h1,
.hero .lede,
.hero-trust-item {
  text-shadow: 0 1px 12px rgba(5, 7, 13, 0.55), 0 1px 3px rgba(5, 7, 13, 0.4);
}

/* Below 1024px the text spans the full width, so a left-to-right fade would
   leave the tail of each line sitting on bare footage. Use a vertical fade. */
@media (max-width: 1023px) {
  .hero-scrim {
    background: linear-gradient(
      to bottom,
      rgba(11, 18, 32, 0.74) 0%,
      rgba(11, 18, 32, 0.64) 50%,
      rgba(11, 18, 32, 0.58) 100%
    );
  }
}

.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.hero-inner {
  position: relative;
  z-index: 4;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero {
    min-height: 78vh;
    display: flex;
    align-items: center;
  }
  .hero h1 {
    max-width: 19ch;
  }
  .hero .lede {
    max-width: 56ch;
  }
}

/* Users who prefer reduced motion shouldn't get looping footage */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

.hero-eyebrow {
  color: var(--gold-400);
}

.hero h1 {
  font-size: var(--fs-3xl);
  color: var(--white);
  margin-top: var(--space-4);
  max-width: 15ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--gold-400);
}

.hero .lede {
  color: rgba(255, 255, 255, 0.74);
  max-width: 46ch;
  font-size: var(--fs-md);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.hero-trust {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
}

.hero-trust-item svg {
  width: 20px;
  height: 20px;
  stroke: var(--gold-400);
  flex-shrink: 0;
}

/* Page header (non-home hero, shorter) */

.page-header {
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-8);
  background: var(--navy-900);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.page-header .container {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.page-header h1 {
  color: var(--white);
  font-size: var(--fs-2xl);
  margin-top: var(--space-4);
}

.page-header .lede {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-md);
}

/* ==========================================================================
   Value strip
   ========================================================================== */

.value-strip {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
}

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

.value-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.value-item h4 {
  font-size: var(--fs-base);
}

.value-item p {
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Stat band
   ========================================================================== */

.stat-band {
  display: grid;
  gap: var(--space-6);
}

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

.stat-card {
  border: 1px solid var(--border-dark-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.03);
}

.stat-card .stat-value {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  color: var(--gold-400);
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.stat-card h4 {
  color: var(--white);
  margin-top: var(--space-3);
  font-size: var(--fs-base);
}

.stat-card p {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================================
   Process timeline
   ========================================================================== */

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}

@media (min-width: 900px) {
  .timeline::before {
    left: 50%;
    transform: translateX(-1px);
  }
}

.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
}

@media (min-width: 900px) {
  .timeline-step {
    grid-template-columns: 1fr 56px 1fr;
    align-items: start;
  }
  .timeline-step .timeline-card {
    grid-column: 1;
  }
  .timeline-step .timeline-index {
    grid-column: 2;
  }
  .timeline-step:nth-child(even) .timeline-card {
    grid-column: 3;
  }
  .timeline-step:nth-child(even) .timeline-body {
    text-align: left;
  }
}

.timeline-index {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-400);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 6px var(--paper);
}

.timeline-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.timeline-card .tag {
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  color: var(--gold-700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.timeline-card h3 {
  margin-top: var(--space-2);
  font-size: var(--fs-lg);
}

.timeline-card p {
  margin-top: var(--space-3);
  color: var(--muted);
}

.timeline-card ul {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.timeline-card li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.timeline-card li svg {
  width: 18px;
  height: 18px;
  stroke: var(--gold-600);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ==========================================================================
   Pricing / Service tiers
   ========================================================================== */

.tier-grid {
  display: grid;
  gap: var(--space-6);
}

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

.tier-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.tier-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.tier-card.is-featured {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
  position: relative;
}

.tier-card.is-featured h3,
.tier-card.is-featured .tier-desc {
  color: var(--white);
}

.tier-card.is-featured .tier-desc {
  color: rgba(255, 255, 255, 0.7);
}

.tier-badge {
  position: absolute;
  top: -14px;
  left: var(--space-6);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-full);
}

.tier-name {
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-700);
  font-weight: 600;
}

.tier-card.is-featured .tier-name {
  color: var(--gold-400);
}

.tier-card h3 {
  margin-top: var(--space-2);
  font-size: var(--fs-lg);
}

.tier-desc {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.tier-list {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-grow: 1;
}

.tier-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.tier-list li svg {
  width: 18px;
  height: 18px;
  stroke: var(--gold-600);
  flex-shrink: 0;
  margin-top: 2px;
}

.tier-card.is-featured .tier-list li svg {
  stroke: var(--gold-400);
}

.tier-card .btn {
  margin-top: var(--space-6);
}

/* Honeypot: off-screen rather than display:none, which bots detect. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.25);
  color: var(--color-danger);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Section icons (process steps, value strip, service tiers)
   Gold line icons in the same stroke style as the inline check marks.
   No tile background: the value strip sits on the alt paper tone and the
   featured tier card is navy, so a single flat treatment reads consistently
   on every surface.
   ========================================================================== */

.step-icon,
.value-icon,
.tier-icon {
  display: block;
  color: var(--gold-600);
  margin-bottom: var(--space-3);
}

.step-icon svg,
.value-icon svg,
.tier-icon svg {
  width: 30px;
  height: 30px;
}

/* On the navy featured card the darker gold goes muddy — lift it. */
.tier-card.is-featured .tier-icon {
  color: var(--gold-400);
}

.tier-note {
  margin-top: var(--space-8);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 820px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
}

.faq-question .plus {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.faq-question .plus::before,
.faq-question .plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}

.faq-question .plus::before {
  width: 10px;
  height: 1.5px;
}

.faq-question .plus::after {
  width: 1.5px;
  height: 10px;
}

.faq-item[data-open="true"] .plus {
  background: var(--navy-900);
  border-color: var(--navy-900);
  transform: rotate(180deg);
}

.faq-item[data-open="true"] .plus::before,
.faq-item[data-open="true"] .plus::after {
  background: var(--white);
}

.faq-item[data-open="true"] .plus::after {
  transform: scaleY(0);
}

.faq-answer {
  height: 0;
  overflow: hidden;
  transition: height var(--dur-med) var(--ease-out);
}

.faq-answer-inner {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 62ch;
}

/* ==========================================================================
   Forms
   ========================================================================== */

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

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

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
}

.field .req {
  color: var(--gold-700);
}

.field input,
.field select,
.field textarea {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--white);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  min-height: 48px;
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(191, 154, 79, 0.18);
}

.field-hint {
  font-size: var(--fs-xs);
  color: var(--muted-2);
}

.field-error {
  font-size: var(--fs-xs);
  color: var(--color-danger);
  display: none;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--color-danger);
}

.field.has-error .field-error {
  display: block;
}

.form-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--muted-2);
  margin-top: var(--space-4);
}

.form-note svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  stroke: var(--gold-600);
}

.form-success {
  display: none;
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.form-success.is-visible {
  display: block;
}

.form-success .icon-tile {
  margin-inline: auto;
  background: rgba(47, 107, 79, 0.12);
}

.form-success .icon-tile svg {
  stroke: var(--color-success);
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.cta-band::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(191, 154, 79, 0.28), transparent 70%);
}

.cta-band h2 {
  color: var(--white);
  font-size: var(--fs-xl);
  max-width: 28ch;
}

.cta-band p {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.7);
  max-width: 46ch;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Coverage / map band
   ========================================================================== */

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

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

.coverage-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

.coverage-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.coverage-list li svg {
  width: 16px;
  height: 16px;
  stroke: var(--gold-600);
  flex-shrink: 0;
}

/* ==========================================================================
   Values / pledge list
   ========================================================================== */

.pledge-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pledge-item {
  display: flex;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.pledge-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pledge-index {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  color: var(--gold-500);
  flex-shrink: 0;
  width: 3ch;
}

.pledge-item h3 {
  font-size: var(--fs-base);
}

.pledge-item p {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Reveal utility (JS-driven, GSAP sets initial state only when motion allowed)
   ========================================================================== */

.reveal-group {
  will-change: transform, opacity;
}

/* Utility badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  background: var(--paper-alt);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink-soft);
}

/* Breadcrumb-ish back link on page headers */
.back-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
}

.back-link svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Booking modal
   Every "Book a Free Consult" link points at the Microsoft Bookings page.
   js/main.js intercepts the click and shows the calendar in this overlay
   instead. With JS off the links still work as ordinary links.
   ========================================================================== */

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(5, 7, 13, 0.72);
}

.booking-modal.is-open {
  display: flex;
}

.booking-modal-panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  height: min(86vh, 780px);
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.booking-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.booking-modal-close:hover {
  background: var(--paper-alt);
}

.booking-modal-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.booking-modal-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.booking-modal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.booking-modal.is-loaded .booking-modal-loading {
  display: none;
}

/* A calendar squeezed into a small box is the usual failure of these.
   On phones give it the whole screen. */
@media (max-width: 640px) {
  .booking-modal {
    padding: 0;
  }
  .booking-modal-panel {
    max-width: none;
    height: 100%;
    border-radius: 0;
  }
}

/* Anchor targets under the sticky header */
[id] {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* Responsive container tweaks */
@media (max-width: 640px) {
  .coverage-list {
    grid-template-columns: 1fr;
  }
  .cta-band {
    padding: var(--space-6);
  }
  .footer-bottom {
    flex-direction: column;
  }
}