/* ==========================================================================
   GHG Property Investments LLC — site styles (redesign 2026-09-21)
   Plain CSS, no framework, no build step. Mobile-first. Bento-panel layout,
   vivid orange + near-black system, self-hosted variable type, motion-first
   but fully disabled under prefers-reduced-motion and never load-bearing
   for content visibility.
   ========================================================================== */

/* ---------- Self-hosted font ---------- */
@font-face {
  font-family: "GHGSans";
  src: url("fonts/display-variable.woff2") format("woff2-variations"), url("fonts/display-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color tokens — vivid orange + near-black + warm light gray, bento feel */
  --orange-500: #f97b2b;
  --orange-600: #e3651a;
  --orange-700: #c25415;
  --orange-tint: #fff1e5;
  --ink-950: #14110f;
  --ink-900: #1d1a17;
  --ink-800: #2a2521;
  --bg: #f3f1ec;
  --bg-panel-alt: #ece8e0;
  --surface: #ffffff;
  --surface-border: #e7e2d8;
  --text: #221e1a;
  --text-muted: #675f56;
  --text-on-orange: #fff6ee;
  --text-on-dark: #f6f3ee;
  --text-on-dark-muted: #c7bfb3;
  --focus-ring: #1a73a8;
  --success-bg: #e9f5ec;
  --success-text: #1e5c34;
  --success-border: #a9d8b7;

  --radius-panel: 28px;
  --radius-card: 20px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(20, 17, 15, 0.08);
  --shadow-md: 0 10px 30px rgba(20, 17, 15, 0.10);
  --shadow-lg: 0 24px 60px rgba(20, 17, 15, 0.16);

  --max-width: 1360px;
  --gutter: 0.75rem;

  --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: 4.5rem;

  --font-display: "GHGSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "GHGSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-md: 650ms;
  --dur-lg: 850ms;
}

@media (min-width: 640px) {
  :root {
    --gutter: 1.1rem;
  }
}

@media (min-width: 1040px) {
  :root {
    --gutter: 1.5rem;
  }
}

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

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--orange-700);
}

h1,
h2,
h3,
h4 {
  line-height: 1.08;
  margin: 0 0 var(--space-4);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-950);
  font-family: var(--font-display);
}

h3,
h4 {
  letter-spacing: -0.01em;
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-4);
}

ul,
ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
}

button {
  font-family: inherit;
}

/* ---------- Focus states (accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-950);
  color: var(--text-on-dark);
  padding: var(--space-3) var(--space-4);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--orange-500);
  transform: scaleX(0);
  transform-origin: 0 0;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-progress__bar {
    transition: transform 120ms linear;
  }
}

/* ---------- Layout helpers ---------- */
.shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding-block: calc(var(--gutter) * 0.6);
}

.panel {
  border-radius: var(--radius-panel);
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 4.5vw, 3.5rem);
  margin-block-end: calc(var(--gutter) * 1.3);
  position: relative;
}

.panel:last-child {
  margin-block-end: 0;
}

.panel--surface {
  background: var(--surface);
}

.panel--alt {
  background: var(--bg-panel-alt);
}

.panel--orange {
  background: var(--orange-500);
  color: var(--text-on-orange);
  overflow: hidden;
}

.panel--orange h1,
.panel--orange h2,
.panel--orange p {
  color: var(--text-on-orange);
}

.panel--dark {
  background: var(--ink-950);
  color: var(--text-on-dark);
  overflow: hidden;
}

.panel--dark h1,
.panel--dark h2,
.panel--dark h3,
.panel--dark p {
  color: var(--text-on-dark);
}

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

.panel--tight {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 92%);
  pointer-events: none;
}

.section-head {
  max-width: 46rem;
  margin: 0 0 var(--space-6);
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.4em;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.eyebrow--onorange,
.eyebrow--ondark {
  color: var(--text-on-orange);
}

.eyebrow--ondark {
  color: #ffb583;
}

.display-heading {
  font-weight: 300;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  letter-spacing: -0.03em;
}

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

/* ---------- Motion: entrance reveal ----------
   Default state is always fully visible — content must never depend on JS
   running. JS (initReveal in site.js) adds "reveal-pending" ONLY to
   elements it confirms are not yet in the viewport when it runs, then
   removes it (adding "is-visible") the moment each one scrolls into view.
   If JS never runs, or the IntersectionObserver callback is slow/never
   fires (e.g. a static headless capture), everything simply stays in its
   default visible state — it never gets stuck invisible either way. */
.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal.reveal-pending {
    opacity: 0;
    transform: translateY(28px);
  }
  .reveal {
    transition: opacity var(--dur-md) var(--ease-smooth), transform var(--dur-md) var(--ease-smooth);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .reveal--left.reveal-pending {
    transform: translate3d(-36px, 0, 0);
  }
  .reveal--right.reveal-pending {
    transform: translate3d(36px, 0, 0);
  }
  .reveal--scale.reveal-pending {
    transform: scale(0.94);
  }
  .reveal--clip {
    clip-path: inset(0 0 0% 0 round var(--radius-panel));
    transition: clip-path var(--dur-lg) var(--ease-smooth);
  }
  .reveal--clip.reveal-pending {
    clip-path: inset(0 0 100% 0 round var(--radius-panel));
  }
}

/* Hero headline word reveal. This is a self-running CSS @keyframes
   animation (animation-fill-mode: both), not a JS-triggered transition —
   it starts the instant the word spans exist in the DOM and advances on
   its own, so it can't get stuck in its hidden state waiting on a JS
   callback (e.g. during a static headless capture). JS only wraps the
   text into these spans; see wrapHeroWords() in site.js. */
.word-reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.word-reveal .word > span {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .word-reveal .word > span {
    animation: word-in 900ms var(--ease-smooth) both;
    animation-delay: calc(var(--w, 0) * 55ms);
  }
}

@keyframes word-in {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 180ms var(--ease-out),
    color 180ms var(--ease-out);
  touch-action: manipulation;
}

.btn__arrow {
  display: inline-block;
  transition: transform 260ms var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

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

.btn:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--orange-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--orange-600);
  color: #fff;
}

.btn-dark {
  background: var(--ink-950);
  color: #fff;
}

.btn-dark:hover {
  background: var(--ink-800);
  color: #fff;
}

.btn-white {
  background: #fff;
  color: var(--ink-950);
}

.btn-white:hover {
  background: var(--ink-950);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  border-color: currentColor;
  color: var(--ink-950);
}

.btn-secondary:hover {
  background: rgba(20, 17, 15, 0.06);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  min-height: 56px;
  font-size: 1.08rem;
  padding: 1rem 1.85rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 150;
  padding-block: var(--space-4);
  transition: padding-block 320ms var(--ease-out);
  /* Belt-and-suspenders: the bar below already clips, but this guarantees
     nothing in the header (pill, CTA, blur layer) can ever force a
     horizontal scrollbar or spill past the viewport edge. */
  overflow-x: clip;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: nowrap;
  overflow: hidden;
}

.site-header__blur {
  position: absolute;
  inset: 0;
  background: rgba(243, 241, 236, 0);
  backdrop-filter: saturate(140%) blur(0px);
  transition: background-color 320ms var(--ease-out), backdrop-filter 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  z-index: -1;
}

.site-header.is-scrolled {
  padding-block: var(--space-2);
}

.site-header.is-scrolled .site-header__blur {
  background: rgba(243, 241, 236, 0.88);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 6px 24px rgba(20, 17, 15, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink-950);
  flex: none;
}

.brand__mark {
  width: 40px;
  height: 40px;
  flex: none;
  transition: transform 260ms var(--ease-out);
}

.brand:hover .brand__mark {
  transform: rotate(-8deg);
}

.brand__name {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-family: var(--font-display);
  white-space: nowrap;
}

.brand__name small {
  display: block;
  font-weight: 500;
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 0.15rem;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 0.35rem;
  box-shadow: var(--shadow-sm);
  /* Never the reason the header overflows: this pill shrinks (and, as a
     last resort, clips) before it pushes the lang toggle or CTA off the
     edge of very wide OR awkwardly-narrow-desktop viewports. flex-grow:0
     (not 1) so the pill never stretches past its own content width on an
     extra-wide bar either — space-between on the bar handles spacing. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 1080px) {
  .site-nav {
    display: inline-flex;
  }
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-pill);
  color: var(--ink-800);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  flex: none;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

.site-nav a:hover {
  background: var(--orange-tint);
  color: var(--orange-700);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  min-width: 0;
}

.header-actions > * {
  flex: none;
}

.header-call {
  display: none;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-900);
  font-size: 0.92rem;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .header-call {
    display: inline-flex;
  }
}

.lang-toggle {
  display: inline-flex;
  background: #fff;
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  padding: 0.2rem;
}

.lang-toggle button {
  border: 0;
  background: transparent;
  color: var(--ink-800);
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 40px;
  min-width: 40px;
  border-radius: var(--radius-pill);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

.lang-toggle button[aria-pressed="true"] {
  background: var(--ink-950);
  color: #fff;
}

.header-cta {
  display: none;
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 780px) {
  .header-cta {
    display: inline-flex;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding-block-start: var(--space-3);
}

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

.hero-panel__inner {
  max-width: 52rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero__h1 {
  font-size: clamp(2.1rem, 6vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  margin-block: 0 var(--space-4);
}

.hero__lede {
  font-size: 1.08rem;
  color: var(--text-on-orange);
  opacity: 0.92;
  max-width: 36rem;
  margin: 0 auto var(--space-5);
}

.hero__actions {
  margin-bottom: var(--space-6);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85rem;
  color: var(--text-on-orange);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem;
}

.hero__trust svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.hero-media {
  position: relative;
  width: 100%;
  margin-block-end: calc(var(--gutter) * 1.3);
}

.hero-media__photo {
  width: 100%;
  border-radius: var(--radius-panel);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-panel-alt);
  box-shadow: var(--shadow-md);
}

@media (min-width: 720px) {
  .hero-media__photo {
    aspect-ratio: 21 / 9;
    max-height: 620px;
  }
}

.hero-media__photo img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

.hero-media__photo img,
.hero-media__photo .bg-video {
  /* Keep the roofline in frame once the panel is cropped to a wide
     21:9 band on desktop, instead of centering on the sky/lawn. */
  object-position: 50% 60%;
}

/* ---------- Form card ----------
   A full-width panel that sits directly below the hero media, with the
   same --gutter-based gap above it (between the hero media and the form)
   as the gap above the hero media (between the orange panel and the hero
   media) — no overlap. On wide screens the intro (title + sub-line) sits
   in a left column next to the fields; below 900px it stacks above the
   form. */
.form-card {
  position: relative;
  z-index: 2;
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  scroll-margin-top: 110px;
  max-height: none;
}

@media (min-width: 480px) {
  .form-card {
    padding: var(--space-6);
  }
}

@media (min-width: 900px) {
  .form-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-6);
    align-items: start;
  }
}

.form-card__intro {
  margin-bottom: var(--space-5);
}

@media (min-width: 900px) {
  .form-card__intro {
    margin-bottom: 0;
  }
}

.form-card h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.form-card__sub {
  color: var(--text-muted);
  margin-bottom: 0;
  font-size: 0.92rem;
}

/* ---------- Form fields grid ----------
   Named grid areas so the same markup order can be single-column (mobile),
   a simple 2-column grid (480-1199px, with a wider "2 columns on tablet"
   layout from 900px once the intro sits beside it), or the asymmetric
   4-column arrangement (address spans 2, situation/consent/submit share a
   row) on wide desktop screens. */
.form-card__fields {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "addr"
    "city"
    "zip"
    "name"
    "phone"
    "email"
    "situ"
    "consent"
    "submit";
  gap: var(--space-4) var(--space-3);
}

.form-card__fields .field {
  margin-bottom: 0;
}

.field--address {
  grid-area: addr;
}

.field--city {
  grid-area: city;
}

.field--zip {
  grid-area: zip;
}

.field--name {
  grid-area: name;
}

.field--phone {
  grid-area: phone;
}

.field--email {
  grid-area: email;
}

.field--situation {
  grid-area: situ;
}

.form-card__fields .consent-row {
  grid-area: consent;
  margin-bottom: 0;
}

.form-card__submit {
  grid-area: submit;
}

@media (min-width: 480px) {
  .form-card__fields {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "addr addr"
      "city zip"
      "name name"
      "phone phone"
      "email email"
      "situ situ"
      "consent consent"
      "submit submit";
  }
}

@media (min-width: 900px) {
  .form-card__fields {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "addr addr"
      "city zip"
      "name phone"
      "email situ"
      "consent consent"
      "submit submit";
  }
}

@media (min-width: 1200px) {
  .form-card__fields {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "addr addr city zip"
      "name phone email ."
      "situ consent consent submit";
  }

  .form-card__submit {
    align-self: end;
  }
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
  color: var(--ink-950);
}

.field .hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.field input:focus,
.field select:focus {
  border-color: var(--orange-500);
}

.field input:invalid[data-touched="true"] {
  border-color: var(--orange-700);
}

.field-error {
  color: var(--orange-700);
  font-size: 0.83rem;
  margin-top: 0.3rem;
  min-height: 1.1em;
}

.required-star {
  color: var(--orange-600);
}

/* Honeypot field — hidden from sighted users and keyboard tab order, but
   present in the DOM for simple bots that fill every field. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-bottom: var(--space-5);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.consent-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
  flex: none;
  accent-color: var(--orange-600);
}

.consent-row label {
  font-size: 0.83rem;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.5;
}

.consent-row a {
  font-weight: 700;
}

.form-status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: none;
}

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

.form-status--error {
  background: #fbe9e4;
  color: var(--orange-700);
  border: 1px solid #f0c3b3;
}

.form-status--success {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.form-fineprint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: var(--space-4);
}

/* ---------- Why-us (photo + numbered features) ---------- */
.why-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .why-grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
  }
}

.why-grid__photo {
  border-radius: var(--radius-panel);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-md);
}

.why-grid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-list {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

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

.feature__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-border);
  color: var(--orange-600);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
}

.feature h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}

.feature p {
  color: var(--text-muted);
  font-size: 0.94rem;
  margin-bottom: 0;
}

/* ---------- Stats band ---------- */
.stats-band {
  display: grid;
  gap: var(--space-6);
  text-align: center;
}

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

.stat__num {
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  color: var(--ink-950);
  font-family: var(--font-display);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat__num span.stat__suffix {
  color: var(--orange-600);
}

.stat__label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---------- Situations (photo band + white cards) ---------- */
.situations-band {
  position: relative;
  border-radius: var(--radius-panel);
  overflow: hidden;
  color: #fff;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.1rem, 4vw, 2.5rem);
}

.situations-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.situations-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.situations-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 15, 0.86) 0%, rgba(20, 17, 15, 0.72) 45%, rgba(20, 17, 15, 0.88) 100%);
  z-index: 1;
}

.situations-band__content {
  position: relative;
  z-index: 2;
}

.situations-band .section-head h2,
.situations-band .section-head p {
  color: #fff;
}

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

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

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

.situation-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  color: var(--text);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

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

.situation-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--orange-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  color: var(--orange-600);
}

.situation-card h3 {
  font-size: 1.02rem;
  margin-bottom: var(--space-2);
}

.situation-card p {
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: 0.92rem;
}

.situation-card .btn {
  padding: 0.5rem 1rem;
  min-height: 38px;
  font-size: 0.82rem;
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  gap: var(--space-5);
}

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

.step {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.step__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.step__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  flex: none;
}

.step:nth-child(odd) .step__chip {
  background: var(--ink-950);
}

.step:nth-child(even) .step__chip {
  background: var(--orange-500);
}

.step__num {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.step h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}

/* ---------- Dark CTA panel ---------- */
/* "More time" section (owner content 2026-09-21): orange callout + real-example card */
.more-time__callout {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--orange-500);
  background: var(--orange-tint);
  border-radius: var(--radius-sm);
}

.more-time__callout p {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.more-time__example {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.more-time__example .eyebrow {
  margin-bottom: var(--space-3);
}

.more-time__example p {
  margin-bottom: var(--space-3);
}

.more-time__fine {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 0 !important;
}

.cta-panel {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-panel {
    grid-template-columns: 1fr 1fr;
  }
}

.cta-panel__photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  order: -1;
}

@media (min-width: 900px) {
  .cta-panel__photo {
    order: 2;
    aspect-ratio: 3 / 4;
  }
}

.cta-panel__photo img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

.cta-panel__body .btn {
  margin-top: var(--space-2);
}

/* ---------- Promise / testimonial carousel ---------- */
.promise-panel {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 860px) {
  .promise-panel {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
  }
}

.promise-panel__photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.promise-panel__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel {
  position: relative;
}

.carousel__viewport {
  position: relative;
  min-height: 11rem;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(24px, 0, 0);
  transition: opacity 520ms var(--ease-smooth), transform 520ms var(--ease-smooth), visibility 0s linear 520ms;
}

.carousel__slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 520ms var(--ease-smooth), transform 520ms var(--ease-smooth);
}

.carousel__quote-mark {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--orange-500);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.carousel__slide h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-2);
}

.carousel__slide p {
  color: var(--text-muted);
  font-size: 1.02rem;
}

.carousel__slide cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--ink-950);
  margin-top: var(--space-3);
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-border);
  background: #fff;
  cursor: pointer;
  color: var(--ink-950);
  transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.carousel__arrow:hover {
  background: var(--ink-950);
  color: #fff;
  border-color: var(--ink-950);
  transform: translateY(-2px);
}

.carousel__dots {
  display: flex;
  gap: 0.4rem;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-border);
  cursor: pointer;
  padding: 0;
  transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.carousel__dot[aria-current="true"] {
  background: var(--orange-500);
  transform: scale(1.3);
}

/* ---------- FAQ (two-column accordion) ---------- */
.faq-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 800px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    align-items: start;
  }
}

.accordion-item {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.accordion-item__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  background: transparent;
  border: 0;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink-950);
  font-family: inherit;
}

.accordion-item__icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--orange-600);
  transition: transform 320ms var(--ease-out);
}

.accordion-item__trigger[aria-expanded="true"] .accordion-item__icon {
  transform: rotate(135deg);
}

.accordion-item__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 420ms var(--ease-smooth);
}

.js .accordion-item__panel {
  grid-template-rows: 0fr;
}

.js .accordion-item__panel.is-open {
  grid-template-rows: 1fr;
}

.accordion-item__panel-inner {
  overflow: hidden;
}

.accordion-item__panel p {
  margin: 0 var(--space-5) var(--space-5);
  color: var(--text-muted);
}

/* ---------- About / contact ---------- */
.about-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 860px) {
  .about-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

.about-grid__art {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: linear-gradient(135deg, var(--orange-tint), var(--bg-panel-alt));
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.contact-list a {
  color: inherit;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  transition: background-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.contact-list li:hover {
  background: rgba(255, 255, 255, 0.11);
  transform: translateX(4px);
}

.contact-list svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--orange-500);
}

/* ---------- Footer ---------- */
.site-footer {
  color: var(--text-on-dark-muted);
  font-size: 0.9rem;
}

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

@media (min-width: 780px) {
  .footer-grid {
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-on-dark);
  font-weight: 800;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
}

.footer-brand svg,
.footer-brand img {
  width: 32px;
  height: 32px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.footer-links li {
  margin-bottom: 0.5em;
}

.footer-links a {
  transition: color 180ms var(--ease-out), padding-left 180ms var(--ease-out);
}

.footer-links a:hover {
  color: var(--orange-500);
}

.footer h4 {
  color: var(--text-on-dark);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  align-items: center;
}

.footer-legal-links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-disclaimer {
  color: var(--text-on-dark-muted);
  font-size: 0.8rem;
  max-width: 60rem;
  margin: var(--space-4) 0 0;
}

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(243, 241, 236, 0.98) 70%, rgba(243, 241, 236, 0));
}

.mobile-cta .btn {
  box-shadow: var(--shadow-md);
}

@media (min-width: 780px) {
  .mobile-cta {
    display: none;
  }
}

body {
  padding-bottom: 92px;
}

@media (min-width: 780px) {
  body {
    padding-bottom: 0;
  }
}

/* ---------- Legal pages ---------- */
.legal-layout {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .legal-layout {
    grid-template-columns: 15rem 1fr;
    align-items: start;
  }
}

.legal-toc {
  position: static;
  background: var(--bg-panel-alt);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

@media (min-width: 900px) {
  .legal-toc {
    position: sticky;
    top: 6.5rem;
  }
}

.legal-toc h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.legal-toc a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.legal-toc a:hover {
  background: rgba(249, 123, 43, 0.08);
  color: var(--orange-700);
}

.legal-toc a.is-active {
  color: var(--orange-700);
  border-left-color: var(--orange-500);
  background: rgba(249, 123, 43, 0.1);
}

.legal {
  max-width: 46rem;
}

.legal h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: var(--space-7);
  scroll-margin-top: 6.5rem;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal .callout {
  background: var(--orange-tint);
  border-left: 4px solid var(--orange-500);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
}

.legal .effective-date {
  color: var(--text-muted);
  font-weight: 600;
}

/* ---------- Thanks page ---------- */
.thanks-box {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

.thanks-box .check {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--space-5);
  color: var(--success-text);
}

@media (prefers-reduced-motion: no-preference) {
  .thanks-box .check {
    animation: pop-in 620ms var(--ease-smooth) both;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Background video (hero + dark CTA panel) ----------
   The <img> is always present underneath and is what renders if the video
   file is missing, blocked, or prefers-reduced-motion/Save-Data is on —
   the video only fades in (opacity) once JS confirms it can actually
   play, so a 404 or slow network never shows a broken/black box. */
.bg-media {
  position: relative;
}

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

@media (prefers-reduced-motion: no-preference) {
  .bg-media .bg-video {
    transition: opacity 700ms var(--ease-smooth);
  }
}

.bg-media .bg-video.is-ready {
  opacity: 1;
}

.bg-media__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 17, 15, 0) 42%, rgba(20, 17, 15, 0.4) 100%);
}

/* ---------- Texas 2D map ----------
   Replaces the CSS-3D tilted tile (removed 2026-09-21 per the owner:
   "maybe simple is better and a 3d image isn't it because its too much.
   maybe a motion graphic of a texas logo with pinpoints of the cities,
   on a 2d form is better"). A single flat SVG shape (radial-gradient
   fill + a subtle dotted texture + a 2px darker outline that doubles as
   the scroll-in "draw" animation), six pin buttons and label chips
   overlaid in the same projected coordinate space as the SVG (see
   assets/texas-map.js TexasMath.VIEWBOX), joined to their pins by short
   leader lines. Everything here is visible with no JS: the shape,
   gradient, outline, and every pin/leader/label position are all plain
   markup + CSS. JS only measures the outline's real length so it has
   something to animate, nudges labels (and their leader line) off each
   other when their real rendered size would overlap, and adds the
   hover/tap highlight. */
.texasmap__panel {
  padding-block: var(--space-4);
}

.texasmap__stage {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 600 / 589.7;
  margin: 0 auto;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.4));
}

@media (max-width: 480px) {
  .texasmap__stage {
    max-width: 300px;
  }
}

.texasmap__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.texasmap__fillgroup {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .texasmap__fillgroup {
    transition: opacity 400ms ease 850ms;
  }
  .texasmap.reveal-pending .texasmap__fillgroup {
    opacity: 0;
  }
}

.texasmap__fill {
  fill: url(#texasmap-glow);
}

.texasmap__texture {
  fill: url(#texasmap-dots);
  pointer-events: none;
}

.texasmap__outline {
  fill: none;
  stroke: #c25415;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: no-preference) {
  .texasmap__outline {
    stroke-dasharray: var(--outline-len, none);
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1100ms var(--ease-smooth);
  }
  .texasmap.reveal-pending .texasmap__outline {
    stroke-dashoffset: var(--outline-len, 0);
  }
}

.texasmap__leader {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  .texasmap__leader {
    opacity: 1;
    transition: opacity 260ms var(--ease-out) calc(1250ms + var(--i, 0) * 140ms);
  }
  .texasmap.reveal-pending .texasmap__leader {
    opacity: 0;
  }
}

.texasmap__pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.texasmap__pin {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: block;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: filter 200ms ease, transform 200ms var(--ease-out);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.texasmap__pin:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 50%;
}

.texasmap__pin.is-active {
  transform: translate(-50%, -50%) scale(1.15);
}

.texasmap.is-engaged .texasmap__pin:not(.is-active) {
  filter: brightness(0.6) saturate(0.75);
}

@media (prefers-reduced-motion: no-preference) {
  .texasmap__pin {
    opacity: 1;
    transition: opacity 260ms var(--ease-out) calc(1150ms + var(--i, 0) * 140ms), filter 200ms ease,
      transform 200ms var(--ease-out);
  }
  .texasmap.reveal-pending .texasmap__pin {
    opacity: 0;
    pointer-events: none;
  }
}

.texasmap__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: var(--orange-500);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
  .texasmap__ring {
    transform: scale(1);
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(1150ms + var(--i, 0) * 140ms);
  }
  .texasmap.reveal-pending .texasmap__ring {
    transform: scale(0);
  }
}

.texasmap__halo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange-500);
  opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
  .texasmap__halo {
    opacity: 0.55;
    animation: texasmap-halo-pulse 2.4s ease-out infinite;
    animation-play-state: paused;
    animation-delay: calc(1470ms + var(--i, 0) * 140ms);
  }
  .texasmap:not(.reveal-pending) .texasmap__halo {
    animation-play-state: running;
  }
  .texasmap.reveal-pending .texasmap__halo {
    opacity: 0;
  }
  @keyframes texasmap-halo-pulse {
    0% {
      transform: scale(1);
      opacity: 0.55;
    }
    100% {
      transform: scale(2.3);
      opacity: 0;
    }
  }
}

.texasmap__label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: clamp(11px, 2.4vw, 12px);
  font-weight: 700;
  color: var(--ink-950);
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.texasmap__label.is-active {
  background: var(--orange-500);
  color: var(--text-on-orange);
}

.texasmap.is-engaged .texasmap__label:not(.is-active) {
  filter: opacity(0.55);
}

@media (prefers-reduced-motion: no-preference) {
  .texasmap__label {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0);
    transition: opacity 360ms var(--ease-out) calc(1410ms + var(--i, 0) * 140ms),
      transform 360ms var(--ease-out) calc(1410ms + var(--i, 0) * 140ms), left 150ms linear, top 150ms linear,
      background-color 180ms ease, color 180ms ease, filter 200ms ease;
  }
  .texasmap.reveal-pending .texasmap__label {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px));
  }
}

.texasmap__caption {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 0.8rem;
}

/* ?static=texas screenshot mode: force the resting end state instantly,
   regardless of whether the real scroll observer has fired yet, and
   freeze every transition/animation so a headless capture is repeatable. */
.is-static-preview .texasmap,
.is-static-preview .texasmap * {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}
.is-static-preview .texasmap.reveal-pending {
  opacity: 1 !important;
  transform: none !important;
}
.is-static-preview .texasmap.reveal-pending .texasmap__fillgroup,
.is-static-preview .texasmap.reveal-pending .texasmap__pin,
.is-static-preview .texasmap.reveal-pending .texasmap__leader,
.is-static-preview .texasmap.reveal-pending .texasmap__label {
  opacity: 1 !important;
}
.is-static-preview .texasmap.reveal-pending .texasmap__pin {
  pointer-events: auto !important;
}
.is-static-preview .texasmap.reveal-pending .texasmap__outline {
  stroke-dashoffset: 0 !important;
}
.is-static-preview .texasmap.reveal-pending .texasmap__ring {
  transform: scale(1) !important;
}
.is-static-preview .texasmap.reveal-pending .texasmap__label {
  transform: translate(-50%, -50%) !important;
}
.is-static-preview .texasmap__halo {
  animation-play-state: running !important;
}

/* ---------- Timeline ---------- */
.timeline__track {
  position: relative;
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-4);
  padding-left: 1.5rem;
}

@media (min-width: 800px) {
  .timeline__track {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    padding-left: 0;
  }
}

.timeline__line {
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 4px;
  background: var(--surface-border);
  overflow: hidden;
}

@media (min-width: 800px) {
  .timeline__line {
    left: 0;
    right: 0;
    top: 9px;
    bottom: auto;
    height: 3px;
    width: auto;
  }
}

.timeline__fill {
  position: absolute;
  inset: 0;
  background: var(--orange-500);
  transform: scaleY(1);
  transform-origin: top;
}

@media (min-width: 800px) {
  .timeline__fill {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* Default (above) is the fully-filled line — safe if JS never runs. JS
   only adds "reveal-pending" to .timeline when it confirms the element
   isn't in view yet, which this hides down to scale 0; removing that
   class (scrolled into view) transitions back to the filled default. */
@media (prefers-reduced-motion: no-preference) {
  .timeline__fill {
    transition: transform 1400ms var(--ease-smooth);
  }
  .timeline.reveal-pending .timeline__fill {
    transform: scaleY(0);
  }
  @media (min-width: 800px) {
    .timeline.reveal-pending .timeline__fill {
      transform: scaleX(0);
    }
  }
}

.timeline__step {
  position: relative;
  padding-left: 1.75rem;
}

@media (min-width: 800px) {
  .timeline__step {
    padding-left: 0;
    padding-top: 2rem;
    text-align: center;
  }
}

.timeline__dot {
  position: absolute;
  left: 1px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--orange-500);
  border: 3px solid var(--bg-panel-alt);
  box-shadow: 0 0 0 2px var(--orange-500);
}

@media (min-width: 800px) {
  .timeline__dot {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
}

.timeline__when {
  font-weight: 700;
  color: var(--orange-600);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}

.timeline__what {
  margin-bottom: 0;
  font-weight: 600;
  color: var(--ink-950);
}

/* ---------- Comparison table ---------- */
.comparison-table {
  display: grid;
  gap: 1px;
  background: var(--surface-border);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.comparison-table__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  background: var(--surface);
}

.comparison-table__row--head {
  background: var(--bg-panel-alt);
}

.comparison-table__label,
.comparison-table__col {
  padding: var(--space-3) var(--space-3);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

@media (min-width: 620px) {
  .comparison-table__label,
  .comparison-table__col {
    padding: var(--space-3) var(--space-4);
    font-size: 0.94rem;
  }
}

.comparison-table__row--head .comparison-table__label,
.comparison-table__row--head .comparison-table__col {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.comparison-table__label {
  font-weight: 700;
  color: var(--ink-950);
}

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

.comparison-table__col--ghg {
  color: var(--ink-950);
  font-weight: 600;
  background: var(--orange-tint);
}

.check-draw {
  flex: none;
}

.check-draw path {
  fill: none;
  stroke: var(--orange-600);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .check-draw path {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    transition: stroke-dashoffset 500ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .comparison.is-visible .check-draw path {
    stroke-dashoffset: 0;
  }
}

.comparison__footnote {
  margin-top: var(--space-4);
  font-size: 0.85rem;
}

/* ---------- Recent purchases (hidden until CONFIG.recentPurchases has
   entries — see site.js) ---------- */
.purchase-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

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

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

.purchase-card {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

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

.purchase-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.purchase-card__body {
  padding: var(--space-4);
}

.purchase-card__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange-600);
  background: var(--orange-tint);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
  margin-bottom: var(--space-2);
}

/* ---------- Utility ---------- */
.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

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

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

[hidden] {
  display: none !important;
}

/* language visibility is controlled entirely via JS text swap (data-i18n),
   not via duplicated DOM blocks, so no [lang] display rules are needed here */