/* ============================================================
   SPIRIT OF TEXAS — RED-FORWARD BRAND LAYER
   Loads AFTER styles.css. Turns the site punchy, Marlboro-grade RED,
   driven entirely by the IG badge: the vermilion ring, the white star,
   the vaquero-on-horse mascot, the varsity block wordmark, the rooflines.
   "Cheap fades. Quality stays." — loud, confident, unmistakably Texan.
   ============================================================ */

/* ---------- Brand mascot mark: paint the vaquero silhouette any color ---------- */
.mascot {
  display: inline-block; background: currentColor;
  -webkit-mask: var(--mascot-mask) center / contain no-repeat;
          mask: var(--mascot-mask) center / contain no-repeat;
}
/* Big ghosted watermark version, absolutely placed by its parent */
.mascot-wm {
  position: absolute; pointer-events: none; z-index: 0;
  background: currentColor;
  -webkit-mask: var(--mascot-mask) center / contain no-repeat;
          mask: var(--mascot-mask) center / contain no-repeat;
}

/* Roofline motif (the two house peaks from the badge) — a crisp brand edge.
   A row of small peaks drawn with a repeating conic gradient. */
.roofline-edge { position: relative; }
.roofline-edge::before {
  content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; z-index: 2;
  background:
    repeating-linear-gradient(135deg, var(--sot-red) 0 10px, transparent 10px 20px) top left / 20px 14px repeat-x;
  -webkit-mask: repeating-linear-gradient(90deg,#000 0 20px,#000 20px 20px);
}

/* Eyebrows go RED on light surfaces — the brand's loud little flag */
.eyebrow { color: var(--sot-red); }
.section--cream .eyebrow, .section--white .eyebrow, .estimator .eyebrow { color: var(--sot-red); }

/* Varsity headline punch — heavier, tighter, a touch of collegiate weight */
h1, h2, h3, .estimator-range, .finance-from, .stat-num {
  letter-spacing: -0.015em;
}
.section-head h2 { font-weight: 700; }
/* Tighten the type system so interior sections match the hero/estimator polish */
.eyebrow { font-weight: 800; }
.stat-label { font-weight: 600; font-size: 1.02rem; letter-spacing: 0.005em; }
.range-row .cell .lbl, .roi-card .roi-name, .filter-group__label { font-weight: 700; }
body { font-weight: 400; }

/* ============================================================
   HEADER — solid Branding-Iron red bar, cream badge ring, white type
   ============================================================ */
.site-header {
  background: linear-gradient(180deg, var(--sot-red) 0%, var(--sot-red-deep) 140%);
  border-bottom: 3px solid var(--sot-gold);
  backdrop-filter: none;
}
.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(88,10,6,0.35); }
/* Crisp mini brand seal in the header — legible where the detailed logo went muddy */
.brand-badge-seal {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--sot-red-hot) 0%, var(--sot-red) 60%, var(--sot-red-deep) 100%);
  border: 2px solid var(--sot-cream);
  box-shadow: 0 0 0 1.5px var(--sot-gold), var(--shadow-sm);
  display: grid; place-items: center;
}
.brand-badge-seal .mascot { width: 34px; height: 27px; color: var(--sot-cream); }
.brand-wordmark { color: #fff; text-shadow: 0 1px 0 rgba(88,10,6,0.35); }
.brand-wordmark small { color: var(--sot-gold); }
.nav-links a { color: rgba(255,255,255,0.92); }
.nav-links a:hover { color: var(--sot-gold); }

/* Header "Services" dropdown — CSS-only hover/focus reveal, matches nav-links styling */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-drop__btn {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  color: rgba(255,255,255,0.92); display: inline-flex; align-items: center; gap: 0.3rem;
}
.nav-drop__btn:hover, .nav-drop:hover .nav-drop__btn, .nav-drop:focus-within .nav-drop__btn { color: var(--sot-gold); }
.nav-drop__caret { width: 9px; height: 6px; }
.nav-drop__caret path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-drop__menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 0.9rem; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 0.4rem; min-width: 150px; z-index: 60;
  display: none; flex-direction: column;
}
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu { display: flex; }
.nav-drop__menu a {
  display: block; padding: 0.5rem 0.7rem; border-radius: var(--r-sm); white-space: nowrap;
  color: var(--sot-navy) !important; font-weight: var(--fw-medium); font-size: 0.92rem;
}
.nav-drop__menu a:hover { background: var(--sot-cream); color: var(--sot-red) !important; }

/* ============================================================
   MOBILE NAV — hamburger + full-nav drawer (injected by app.js on every
   page so phone users can reach Services/Pricing/Reviews/FAQ/Contact).
   Visible below 1000px, where .nav-links is hidden.
   ============================================================ */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px; flex: none;
  background: none; border: 0; cursor: pointer; padding: 0; border-radius: var(--r-sm);
}
.nav-burger span {
  display: block; width: 22px; height: 3px; border-radius: 2px; background: #fff;
  transition: transform var(--dur-fast) var(--ease-settle), opacity var(--dur-fast) var(--ease-settle);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 999px) { .nav-burger { display: flex; } }

.mobile-nav {
  display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
  background: linear-gradient(180deg, var(--sot-red-deep) 0%, var(--sot-red-ink) 100%);
  border-bottom: 3px solid var(--sot-gold);
  box-shadow: 0 22px 44px rgba(60,8,4,0.45);
  padding: 0.5rem 0 0.9rem;
  max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; padding: 0.85rem var(--gutter); color: #fff; font-weight: 700;
  font-size: 1.02rem; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--sot-gold); }
.mobile-nav__group {
  margin: 0; padding: 0.85rem var(--gutter) 0.3rem;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sot-gold);
}
.mobile-nav__sub a { padding-left: calc(var(--gutter) + 1.1rem); font-weight: 600; }
.mobile-nav__tel { color: var(--sot-gold) !important; }
@media (min-width: 1000px) { .mobile-nav { display: none !important; } }

/* Footer-band divider dot, sourced from the repeated inline style="color:var(--sot-gold)" sweep */
.dot--gold { color: var(--sot-gold); }

/* Gated "Watch a real install" video slot — honest empty state until the real
   30-60s phone-shot walkthrough exists. Do not replace with a generated video. */
.video-placeholder {
  max-width: 760px; margin: 0 auto; aspect-ratio: 16 / 9;
  background: var(--sot-cream); border: 2px dashed var(--sot-gold);
  border-radius: var(--r-lg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-3); text-align: center; padding: var(--sp-5);
}
.video-placeholder__icon {
  width: 60px; height: 60px; border-radius: 50%; background: var(--sot-red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex: none;
}
.video-placeholder__label { margin: 0; font-weight: 700; color: var(--sot-navy); }
.video-placeholder__sub { margin: 0; font-size: var(--fs-small); color: var(--text-muted); max-width: 42ch; }
.nav-tel { color: #fff; }
.lang-toggle { color: #fff; border-color: rgba(255,255,255,0.6); }
.lang-toggle:hover { border-color: #fff; color: var(--sot-gold); background: rgba(0,0,0,0.12); }
/* Nav CTA inverts: cream chip with red type on the red bar */
.site-header .btn--primary {
  background: var(--sot-cream); color: var(--sot-red-deep);
  box-shadow: 0 2px 0 rgba(88,10,6,0.45);
}
.site-header .btn--primary:hover { background: #fff; color: var(--sot-red-deep); }

/* ============================================================
   HERO — the big Marlboro-red hit, ghosted vaquero, framed real photo
   ============================================================ */
/* Full-bleed photographic hero: real architecture behind a branded red scrim */
.hero {
  background:
    /* strong behind the text column (legible copy), clears fast so architecture stays crisp on the right */
    linear-gradient(90deg, rgba(80,10,5,0.95) 0%, rgba(94,11,6,0.92) 30%, rgba(110,14,8,0.72) 46%, rgba(138,17,9,0.30) 64%, rgba(138,17,9,0.05) 82%, transparent 94%),
    /* subtle bottom anchor for depth (keeps the CTA area grounded) */
    linear-gradient(180deg, transparent 55%, rgba(60,8,4,0.42) 100%),
    url("../img/hero-bg.jpg") center 42% / cover no-repeat,
    var(--sot-red-black);
  color: #fff;
}
/* single-column copy: the hero is a full-bleed photo background (hero-bg.jpg),
   so there is no separate framed hero photo / brand-seal slot in the markup
   (removed — it was hidden by this same CSS and eager-loading a dead 361KB image). */
.hero__grid { grid-template-columns: 1fr !important; }
.hero__copy { max-width: 640px; }
@media (max-width: 760px) {
  /* heavier scrim on narrow screens so text stays legible over the photo */
  .hero { background:
    linear-gradient(180deg, rgba(138,17,9,0.86) 0%, rgba(138,17,9,0.72) 55%, rgba(60,8,4,0.7) 100%),
    url("../img/hero-bg.jpg") center / cover no-repeat, var(--sot-red-black); }
}
@media (min-width: 900px) {
  .hero { min-height: 86vh; display: flex; align-items: center; }
  .hero .wrap { width: 100%; }
}
/* NOTE: the giant ghosted-vaquero hero watermark was removed — at 0.2 opacity it
   overlapped the person in hero-bg.jpg and read as a ghost/AI artifact. The
   mascot lives on in the header seal, dividers and footer; the hero photo
   stays clean. */
/* Kill the old star watermark; the photo now carries the hero */
.hero__watermark { display: none; }
.hero__eyebrow { color: var(--sot-gold); }
/* Brand tagline now sits BELOW the benefit headline as a gold accent line */
.hero__statement {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--sot-gold); text-transform: uppercase; letter-spacing: 0.06em;
  -webkit-text-stroke: 0; font-size: clamp(1.05rem, 2.3vw, 1.4rem);
  margin: var(--sp-2) 0 var(--sp-4);
}
.hero__statement .star { width: 18px; height: 18px; color: var(--sot-gold); flex: none; }
.hero h1 { color: #fff; text-shadow: 0 2px 14px rgba(60,8,4,0.35); }
.hero__sub { color: rgba(255,255,255,0.96); text-shadow: 0 1px 6px rgba(60,8,4,0.5); }
.hero__eyebrow, .hero__restraint, .hero__trustline { text-shadow: 0 1px 5px rgba(60,8,4,0.45); }
.hero__restraint { color: #fff; }
.hero__restraint .star { color: var(--sot-gold); }
.hero__trustline { color: rgba(255,255,255,0.85); }
/* Hero CTAs invert onto red */
.hero .btn--primary { background: var(--sot-cream); color: var(--sot-red-deep); box-shadow: 0 3px 0 rgba(60,8,4,0.4); }
.hero .btn--primary:hover { background: #fff; color: var(--sot-red-deep); transform: translateY(-1px); }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.75); }
.hero .btn--ghost:hover { background: #fff; color: var(--sot-red-deep); border-color:#fff; }
/* ============================================================
   TRUST BAR — deepen to charred red so it reads as one brand system
   ============================================================ */
.trustbar {
  background: var(--sot-navy);
  border-top: 3px solid var(--sot-gold); border-bottom: 3px solid var(--sot-gold);
}
.trustbar__line .dot { color: var(--sot-gold); }
.badge-chip { border-color: rgba(224,168,63,0.5); background: rgba(255,255,255,0.05); }
.badge-chip .star { color: var(--sot-gold); }

/* Rating chip in the trust bar */
.badge-chip--rating { background: rgba(255,255,255,0.09); border-color: var(--sot-gold); }
.badge-chip--rating .chip-stars { color: var(--sot-gold); letter-spacing: 1px; }
.badge-chip--rating strong { color: #fff; }

/* Aggregate rating badge under the reviews headline */
.rating-badge {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.7rem;
  justify-content: center; margin-top: var(--sp-4);
  background: var(--sot-white); border: 1px solid var(--n-100); border-radius: var(--r-pill);
  padding: 0.6rem 1.1rem; box-shadow: var(--shadow-sm);
}
.rating-badge__stars { color: var(--sot-gold); letter-spacing: 2px; font-size: 1.1rem; }
.rating-badge__score { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--sot-navy); }
.rating-badge__meta { color: var(--text-secondary); font-size: var(--fs-small); }
.rating-badge__src {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sot-red-deep); border: 1px solid var(--sot-red); border-radius: var(--r-pill);
  padding: 0.15rem 0.55rem;
}

/* No per-card "Verified" badge until reviews are pulled live from a real
   GBP/Facebook source with permission. See .review-wall__disclaimer below. */

/* ============================================================
   TRUST STACK (S7) — flip navy → BOLD RED band, ghosted vaquero, gold numerals
   ============================================================ */
.section--navy#trust, #trust.section--navy {
  background:
    radial-gradient(120% 130% at 80% 0%, var(--sot-red) 0%, var(--sot-red-ink) 65%, var(--sot-red-black) 100%);
  position: relative; overflow: hidden;
  padding-block: calc(var(--section-y) + 1.5rem);  /* more breathing room so the big stats never jam under the sticky header */
}
#trust::before {
  content: ""; position: absolute; left: -3%; top: 50%; transform: translateY(-50%);
  width: min(64vw, 640px); height: min(46vw, 440px);
  background: #fff; opacity: 0.14; z-index: 0;
  -webkit-mask: var(--mascot-mask) center / contain no-repeat;
          mask: var(--mascot-mask) center / contain no-repeat;
}
#trust .stat-num { margin-top: var(--sp-3); }
#trust .wrap { position: relative; z-index: 1; }
#trust .eyebrow { color: var(--sot-gold); }
#trust .stat-num { color: #fff; }
#trust .stat-node .star { color: var(--sot-gold); }
#trust .stat-node::before, #trust .stat-node::after { background-image: repeating-linear-gradient(90deg, var(--sot-gold) 0 6px, transparent 6px 11px); }
#trust .stat-label { color: var(--sot-cream); }
#trust .warranty-card {
  background: rgba(13,20,31,0.55); border: 1.5px solid var(--sot-gold);
  backdrop-filter: blur(2px);
}
#trust .warranty-card h3 { color: #fff; }
#trust .warranty-card p { color: var(--sot-cream); }
#trust .warranty-card p strong { color: var(--sot-gold); }
#trust .warranty-card .star { color: var(--sot-gold); }
#trust h2, #trust h3 { color: #fff; }

/* ============================================================
   FULL-BLEED BRAND BAND — cinematic dark photographic anchor (tonal range)
   ============================================================ */
.brand-band {
  position: relative; isolation: isolate;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter);
  background: #1a0a07;
  border-top: 4px solid var(--sot-gold); border-bottom: 4px solid var(--sot-gold);
  overflow: hidden; text-align: center; color: #fff;
}
.brand-band::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/band.jpg") center 38% / cover no-repeat;
  transform: scale(1.04);
}
/* Deep NAVY/charcoal wash — a distinct dark register (echoes the estimator), not another red */
.brand-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13,20,31,0.78) 0%, rgba(22,33,47,0.66) 45%, rgba(13,20,31,0.88) 100%),
    radial-gradient(80% 70% at 50% 38%, rgba(224,168,63,0.14), transparent 70%);
}
.brand-band__inner { max-width: 760px; margin-inline: auto; position: relative; }
.brand-band__mascot { width: 92px; height: 74px; color: var(--sot-gold); margin: 0 auto var(--sp-4); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.brand-band__eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sot-gold); margin-bottom: var(--sp-3);
}
.brand-band__title {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; margin-bottom: var(--sp-4);
  text-shadow: 0 3px 18px rgba(0,0,0,0.45);
}
.brand-band__sub { font-size: var(--fs-body-lg); color: rgba(255,255,255,0.92); max-width: 56ch; margin: 0 auto var(--sp-6); }
.brand-band .btn--primary { background: var(--sot-cream); color: var(--sot-red-deep); box-shadow: 0 4px 0 rgba(0,0,0,0.35); }
.brand-band .btn--primary:hover { background: #fff; transform: translateY(-1px); }

/* ============================================================
   ESTIMATOR — dark charcoal "tool" section for tonal rhythm; white card pops
   ============================================================ */
.estimator {
  background: radial-gradient(130% 100% at 50% -10%, #1e2a3a 0%, var(--sot-navy) 55%, var(--sot-navy-ink) 100%) !important;
}
.estimator .eyebrow { color: var(--sot-gold); }
.estimator .section-head h2 { color: #fff; }
.estimator .section-head .lead { color: var(--sot-cream); opacity: 0.94; }
.estimator .section-head .lead strong { color: #fff; }
.estimator > .wrap > .fineprint { color: var(--n-300) !important; }

/* ============================================================
   SEASONAL BAND — pure Branding-Iron red, gold star
   ============================================================ */
.seasonal-band {
  background: linear-gradient(90deg, var(--sot-red) 0%, var(--sot-red-deep) 100%);
  color: #fff; border-top: 3px solid var(--sot-gold); border-bottom: 3px solid var(--sot-gold);
}
.seasonal-band .star { color: var(--sot-gold); }

/* ============================================================
   RImops — rope-divider node + process numerals lean red/gold brand
   ============================================================ */
.rope-divider .node { background: var(--sot-red); box-shadow: 0 3px 10px rgba(138,17,9,0.4); }
.rope-divider .node .star { color: #fff; }
.pain-list li::before { color: var(--sot-red); }
.process__num {
  background: radial-gradient(circle at 50% 34%, var(--sot-red) 0%, var(--sot-red-deep) 70%, var(--sot-red-ink) 100%);
  border-color: var(--sot-gold); color: #fff;
}
.process__reassure { border-left-color: var(--sot-red); }

/* ============================================================
   BEFORE / AFTER — real draggable slider (during install → finished)
   ============================================================ */
.ba-slider {
  position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  border: 4px solid var(--sot-cream); outline: 2px solid var(--sot-gold); outline-offset: -6px;
  --pos: 50%; user-select: none; touch-action: pan-y;
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-slider .ba-after-wrap { position: absolute; inset: 0; }
/* clip-path reveals the left portion of the full-size "before" image — no squish */
.ba-slider .ba-before-wrap {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff;
  transform: translateX(-1.5px); z-index: 4; box-shadow: 0 0 0 1px rgba(88,10,6,0.25);
}
.ba-handle::after {
  content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%; background: var(--sot-red); color: #fff;
  display: grid; place-items: center; font-size: 1.1rem; box-shadow: var(--shadow-md); border: 2px solid #fff;
}
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 5;
}
.ba-label {
  position: absolute; bottom: 10px; z-index: 4; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  background: rgba(13,20,31,0.72); padding: 0.28rem 0.6rem; border-radius: var(--r-pill);
}
.ba-label--before { left: 10px; }
.ba-label--after { right: 10px; background: var(--sot-red); }

/* Honest two-image "During → Finished" static comparison — used instead of a
   drag slider until a real matched before/after pair (same house, same angle)
   exists. See LAUNCH-CHECKLIST.txt. */
.ba-static { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
/* Equal 3:4 aspect on both panels (pre-cropped source photos to match) so the
   comparison reads as deliberate, not two randomly-shaped photos side by side. */
.ba-static__panel { position: relative; aspect-ratio: 3 / 4; }
.ba-static__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-static__arrow { display: none; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--sot-gold); }
@media (min-width: 500px) { .ba-static { grid-template-columns: 1fr auto 1fr; align-items: center; } .ba-static__arrow { display: flex; } }

/* ============================================================
   CREW — real crew-at-work photos, honest captions, branded frame
   ============================================================ */
.crew-grid { grid-template-columns: 1fr; }
.crew-card { border: 1px solid var(--n-100); }
.crew-card .slot { min-height: 300px; }
.crew-card__body { padding: var(--sp-5); }
.crew-card__role { color: var(--sot-red); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.72rem; }
@media (min-width: 760px) { .crew-grid { grid-template-columns: repeat(3, 1fr); } }
/* Owner card gets a gold rule + red quote already; add mascot chip */
.owner-card__badge {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: var(--sp-4);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; color: var(--sot-red);
}
.owner-card__badge .mascot { width: 34px; height: 28px; color: var(--sot-red); }

/* ============================================================
   MEET THE MOWLERS — epic family feature + team banner
   ============================================================ */
.family-feature {
  display: grid; gap: var(--sp-6); align-items: center; margin-bottom: var(--sp-8);
}
@media (min-width: 900px) { .family-feature { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-8); } }
.family-feature__photo { position: relative; }
.family-feature__photo img {
  width: 100%; border-radius: var(--r-lg); display: block;
  border: 6px solid var(--sot-cream);
  box-shadow: 0 26px 60px rgba(60,8,4,0.32), 0 0 0 2px var(--sot-gold);
}
/* Years badge — branded red seal stamped on the family photo */
.years-badge {
  position: absolute; right: -18px; bottom: -18px; z-index: 2;
  width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, var(--sot-red-hot), var(--sot-red) 60%, var(--sot-red-deep));
  color: #fff; border: 3px solid var(--sot-cream); box-shadow: 0 0 0 2px var(--sot-gold), var(--shadow-lg);
  display: grid; place-items: center; text-align: center; transform: rotate(-6deg);
  font-family: var(--font-body); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
}
.years-badge strong { font-family: var(--font-display); font-size: 2.6rem; line-height: 0.9; display: block; letter-spacing: -0.02em; }
.years-badge strong em { font-style: normal; color: var(--sot-gold); }
.years-badge span { display: block; margin-top: 3px; color: var(--sot-cream); }
/* Small screens: pull the badge inside the photo edge so it can't push
   horizontal overflow past the viewport. */
@media (max-width: 599px) {
  .years-badge { right: 8px; bottom: -14px; width: 104px; height: 104px; }
  .years-badge strong { font-size: 2.05rem; }
}
.family-feature__quote {
  font-family: var(--font-display); font-weight: 700; color: var(--sot-navy);
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; margin: var(--sp-2) 0 var(--sp-4);
}
.family-signature { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--sot-red); margin: var(--sp-4) 0 0; }
.family-signature__sub { font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 0; }
.family-feature__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.team-banner { margin: 0 0 var(--sp-6); position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 3px solid var(--sot-gold); }
.team-banner img { width: 100%; display: block; height: 340px; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 760px) { .team-banner img { height: 420px; } }
.team-banner figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(13,20,31,0.85));
  color: #fff; padding: var(--sp-6) var(--sp-5) var(--sp-4); font-weight: 600;
  display: flex; align-items: center; gap: 0.6rem;
}
.team-banner figcaption .mascot { width: 30px; height: 24px; color: var(--sot-gold); flex: none; }

/* ============================================================
   FILTER CHIPS / FOOTER — brand-red accents, footer mascot mark
   ============================================================ */
.filter-chip.active { background: var(--sot-red); border-color: var(--sot-red); }
.site-footer { border-top: 5px solid var(--sot-red); position: relative; overflow: hidden; }
.site-footer::before {
  content: ""; position: absolute; right: -3%; bottom: -10%; width: min(46vw, 420px); height: min(34vw, 300px);
  background: var(--sot-gold); opacity: 0.05; z-index: 0;
  -webkit-mask: var(--mascot-mask) center / contain no-repeat;
          mask: var(--mascot-mask) center / contain no-repeat;
}
.site-footer .wrap { position: relative; z-index: 1; }
.footer-wordmark small { color: var(--sot-gold); }

/* sticky mobile bar: the estimate control is now a <button> */
.sticky-cta .sc-estimate {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: var(--sticky-cta-h); border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.95rem;
  background: var(--sot-red); color: #fff;
}
.sticky-cta .sc-estimate:hover { background: var(--sot-red-deep); }

/* ============================================================
   FRICTIONLESS CTAs — floating pill + vertical edge tab
   ============================================================ */
.floating-cta {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: linear-gradient(180deg, var(--sot-red-hot), var(--sot-red-deep));
  color: #fff; border: 2px solid var(--sot-cream); cursor: pointer;
  font-family: var(--font-body); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.95rem;
  padding: 0.85rem 1.3rem; border-radius: var(--r-pill);
  box-shadow: 0 0 0 2px var(--sot-gold), 0 12px 28px rgba(60,8,4,0.45);
  animation: fcta-pulse 2.6s var(--ease-settle) infinite;
}
.floating-cta .mascot { width: 30px; height: 24px; color: var(--sot-cream); flex: none; }
.floating-cta:hover { transform: translateY(-2px); }
@keyframes fcta-pulse { 0%,100%{ box-shadow: 0 0 0 2px var(--sot-gold), 0 12px 28px rgba(60,8,4,0.45);} 50%{ box-shadow: 0 0 0 2px var(--sot-gold), 0 12px 34px rgba(240,51,37,0.6);} }
@media (prefers-reduced-motion: reduce){ .floating-cta{ animation: none; } }
/* Mobile already has the sticky bottom CTA bar — the pill would be a SECOND
   floating CTA stacked on top of it (and it covered section headings/ticker).
   One floating CTA per viewport: bar on mobile, pill on desktop. */
@media (max-width: 899px){ .floating-cta{ display: none; } }
/* Desktop: give the last section on every page bottom clearance so the pill
   never sits on top of text at the end of the page. */
@media (min-width: 900px){
  main > section:last-of-type, body > section:last-of-type {
    padding-bottom: calc(var(--section-y) + 76px);
  }
}

/* NOTE: the vertical right-edge "Free Estimate in 90s" tab (.edge-cta) was
   removed sitewide — three simultaneous "get a price" CTAs competed with each
   other, and the tab left a sliver artifact on /faq and /financing. The
   floating pill (desktop) / sticky bar (mobile) is now the ONE floating CTA. */

/* ============================================================
   LEAD-FORM POPUP MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--sp-4); }
.modal[hidden] { display: none; }
.modal__overlay { position: absolute; inset: 0; background: rgba(13,20,31,0.72); backdrop-filter: blur(3px); animation: modal-fade var(--dur-med) var(--ease-settle); }
.modal__card {
  position: relative; z-index: 1; width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  background: var(--sot-white); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 30px 80px rgba(13,20,31,0.5); border-top: 6px solid var(--sot-red);
  animation: modal-pop var(--dur-med) var(--ease-settle);
}
@keyframes modal-fade { from{ opacity:0; } to{ opacity:1; } }
@keyframes modal-pop { from{ opacity:0; transform: translateY(16px) scale(0.98);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .modal__overlay,.modal__card{ animation: none; } }
.modal__close {
  position: absolute; top: 10px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  background: var(--sot-cream); border: none; color: var(--sot-navy); font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.modal__close:hover { background: var(--sot-red); color: #fff; }
.modal__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.modal__head .brand-badge-seal { width: 54px; height: 54px; }
.modal__head .brand-badge-seal .mascot { width: 40px; height: 32px; }
.modal__head h2 { margin: 0; font-size: var(--fs-h2); }
.modal__head .eyebrow { margin: 0; }
.modal__sub { color: var(--text-secondary); margin-bottom: var(--sp-5); }
.lead-form--modal { background: none; border: none; padding: 0; box-shadow: none; }
body.modal-open { overflow: hidden; }

/* ============================================================
   BRAND LOADER — red field, cream lasso, white star (was cream/gold)
   ============================================================ */
.brand-loader { background: var(--sot-red); }
.brand-loader .loader-rope { stroke: var(--sot-cream); }
.brand-loader .loader-star { color: #fff; }

/* ============================================================
   SECTION-LEVEL RED ACCENTS on cream/white surfaces
   ============================================================ */
.stat-card .big { color: var(--sot-red); }
a { color: var(--sot-red); }
a:hover { color: var(--sot-red-deep); }

/* ============================================================
   FINAL POLISH PASS
   ============================================================ */
/* 1) Review-card stars: bold, filled gold to match the star treatment everywhere else */
.review-card .stars { color: var(--sot-gold); font-size: 1.2rem; letter-spacing: 3px; line-height: 1; }

/* 2) Nav wordmark anchors the top-left — bump scale/weight above the CTA pill */
.brand-wordmark { font-size: 1.22rem; letter-spacing: 0.015em; }
.brand-wordmark small { font-size: 0.62rem; }

/* 3) Financing card: give it weight — vaquero watermark + a payment micro-mock */
.finance-card { position: relative; overflow: hidden; }
.finance-card::after {
  content: ""; position: absolute; right: -6%; bottom: -18%; width: 300px; height: 240px;
  background: var(--sot-gold); opacity: 0.07; pointer-events: none; z-index: 0;
  -webkit-mask: var(--mascot-mask) center / contain no-repeat;
          mask: var(--mascot-mask) center / contain no-repeat;
}
.finance-card > * { position: relative; z-index: 1; }
.finance-breakdown {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
  margin: var(--sp-5) auto 0; max-width: 520px;
}
.finance-breakdown .fb {
  flex: 1 1 140px; background: var(--sot-cream); border: 1px solid var(--n-100);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-3);
}
.finance-breakdown .fb .fb-n { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--sot-navy); display: block; }
.finance-breakdown .fb .fb-l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.finance-checks {
  display: grid; gap: var(--sp-2); max-width: 420px; margin: var(--sp-5) auto 0; text-align: left;
}
.finance-checks li { display: flex; align-items: baseline; gap: 0.6rem; color: var(--text-secondary); font-weight: 500; }
.finance-checks .chk { color: var(--success); font-weight: 800; }

/* 4) Crew cards lock to a clean baseline; every card carries a consistent footer tag */
.crew-card { display: flex; flex-direction: column; }
.crew-card__body { display: flex; flex-direction: column; flex: 1; }
.crew-card__detail { flex: 1; }
.crew-card__tag {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--sp-4);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sot-gold-deep);
}
.crew-card__tag .star { width: 13px; height: 13px; color: var(--sot-gold); }

/* ============================================================
   PLACEHOLDER-ASSET FLAG — visible ribbon for any unverified /
   AI-generated / awaiting-real-photo image. Never ship a placeholder
   silently; this makes the gate visible on the rendered page itself.
   ============================================================ */
.placeholder-flag {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: rgba(13,20,31,0.82); color: var(--sot-cream);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 0.45rem 0.8rem; text-align: center; line-height: 1.3;
}
.placeholder-flag strong { color: var(--sot-gold); }

/* ============================================================
   REVIEW WALL — honest disclaimer banner (replaces per-card fake badge)
   ============================================================ */
.review-wall__disclaimer {
  max-width: 720px; margin: var(--sp-4) auto var(--sp-6); text-align: center;
  background: var(--sot-cream); border: 1px solid var(--sot-gold); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5); font-size: var(--fs-small); color: var(--sot-navy); font-weight: 600;
}
/* Real-quote badge: small honest tag instead of a specific unconfirmed date */
.review-card__verified {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sot-green, #2f6b3a); background: rgba(47,107,58,0.09);
  border: 1px solid rgba(47,107,58,0.35); border-radius: var(--r-pill); padding: 0.2rem 0.6rem;
  width: fit-content;
}
.review-card__verified::before { content: "✓"; font-weight: 800; }
/* Sample cards: kept for layout/design demo only — visually demoted below the
   real quotes and diagonally watermarked so nobody mistakes them for real
   reviews. */
.review-card--sample { background: var(--n-50); opacity: 0.86; }
.review-card--sample::after { display: none; } /* no gold star mark on sample cards */
.review-sample-tag {
  position: absolute; top: 14px; right: -30px; z-index: 2;
  transform: rotate(32deg); background: var(--sot-red-deep); color: #fff;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.2rem 2.2rem; box-shadow: var(--shadow-sm); pointer-events: none;
}
.review-samples-head {
  max-width: 720px; margin: var(--sp-7) auto var(--sp-4); text-align: center;
  font-size: var(--fs-small); color: var(--text-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* Google-reviews CTA tile, styled to sit inside the review-grid */
.review-cta-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); text-align: center; text-decoration: none;
  background: var(--sot-navy); color: #fff; border-radius: var(--r-lg);
  border: 2px solid var(--sot-gold); padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-sm); transition: transform var(--dur-med) var(--ease-settle);
}
.review-cta-tile:hover, .review-cta-tile:focus-visible { transform: translateY(-3px); }
.review-cta-tile .g-logo { width: 34px; height: 34px; }
.review-cta-tile__title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.review-cta-tile__sub { color: var(--sot-cream); font-size: var(--fs-small); opacity: 0.85; }
.review-cta-tile__link { color: var(--sot-gold); font-weight: 700; font-size: 0.9rem; }

/* Rating-badge chip — proper pill with a real Google "G" mark, not a bare link */
.rating-badge__g { flex: none; width: 22px; height: 22px; }
.rating-badge a.rating-badge__meta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; color: var(--sot-navy); font-weight: 700;
}
.rating-badge a.rating-badge__meta:hover, .rating-badge a.rating-badge__meta:focus-visible { color: var(--sot-red); }

/* ============================================================
   FAQ ACCORDION — homepage section + /faq page
   ============================================================ */
.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: var(--sp-3); }
.faq-item { border: 1px solid var(--n-100); border-radius: var(--r-md); background: var(--sot-white); overflow: hidden; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: var(--sp-4) var(--sp-5); font-weight: 700; color: var(--sot-navy);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.4rem; color: var(--sot-red); flex: none; line-height: 1; font-weight: 400;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-secondary); margin: 0; }
.faq-item[open] summary { border-bottom: 1px solid var(--n-100); }

/* ============================================================
   COMPARISON STRIP / TABLE — "the big chains" vs "us"
   ============================================================ */
.compare-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4); max-width: 900px; margin: 0 auto;
}
@media (min-width: 760px) { .compare-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
.compare-col { border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); }
.compare-col--them { background: var(--n-50); border: 1px solid var(--n-100); }
.compare-col--us { background: var(--sot-navy); color: #fff; border: 2px solid var(--sot-gold); }
.compare-col h3 { margin-top: 0; }
.compare-col--them h3 { color: var(--text-secondary); }
.compare-col--us h3 { color: #fff; }
.compare-col ul { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.compare-col--them li::before { content: "✕ "; color: var(--sot-red); font-weight: 800; }
.compare-col--us li::before { content: "✓ "; color: var(--sot-gold); font-weight: 800; }

/* ============================================================
   INTERIOR PAGE HERO — service pages / city pages / about
   (compact red band, no full-bleed photo needed)
   ============================================================ */
.page-hero {
  background: linear-gradient(120deg, var(--sot-red) 0%, var(--sot-red-deep) 100%);
  color: #fff; padding: clamp(3rem, 8vw, 5rem) var(--gutter) clamp(2.2rem, 6vw, 3rem);
  border-bottom: 3px solid var(--sot-gold); position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; right: -4%; bottom: -12%; width: min(50vw, 420px); height: min(38vw, 320px);
  background: #fff; opacity: 0.08; z-index: 0;
  -webkit-mask: var(--mascot-mask) center / contain no-repeat;
          mask: var(--mascot-mask) center / contain no-repeat;
}
.page-hero .wrap { position: relative; z-index: 1; }
/* Photographic variant: a real project photo behind a red scrim — used on
   project case-study pages ("real job, real photos" should open on the real
   photo, not a flat template block). Set the photo per page with
   style="--hero-photo:url('/img/…')". */
.page-hero--photo {
  background:
    linear-gradient(90deg, rgba(80,10,5,0.92) 0%, rgba(110,14,8,0.78) 45%, rgba(138,17,9,0.45) 75%, rgba(138,17,9,0.28) 100%),
    linear-gradient(180deg, transparent 40%, rgba(60,8,4,0.5) 100%),
    var(--hero-photo) center 35% / cover no-repeat,
    var(--sot-red-deep);
}
.page-hero--photo::before { display: none; }
.page-hero--photo h1, .page-hero--photo .lead { text-shadow: 0 2px 12px rgba(60,8,4,0.5); }
@media (max-width: 760px) {
  .page-hero--photo {
    background:
      linear-gradient(180deg, rgba(110,14,8,0.88) 0%, rgba(80,10,5,0.82) 100%),
      var(--hero-photo) center 35% / cover no-repeat,
      var(--sot-red-deep);
  }
}
.page-hero .eyebrow { color: var(--sot-gold); }
/* Primary CTA on the red page-hero: cream, matching the homepage fold — a red
   button on the red band was visually recessive (owner blocker, v3 r2). */
.page-hero .btn--primary { background: var(--sot-cream); color: var(--sot-red-deep); box-shadow: 0 3px 0 rgba(60,8,4,0.4); }
.page-hero .btn--primary:hover { background: #fff; color: var(--sot-red-deep); transform: translateY(-1px); }
.page-hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.75); }
.page-hero .btn--ghost:hover { background: #fff; color: var(--sot-red-deep); border-color: #fff; }
.page-hero h1 { color: #fff; max-width: 46rem; }
.page-hero .lead { color: rgba(255,255,255,0.94); max-width: 56rem; }
/* Split-hero: copy left, a real job photo right at desktop; on mobile the same
   photo becomes a scrimmed background (money pages: /windows, /doors, /about). */
.page-hero--split .page-hero__grid { display: grid; gap: var(--sp-6); align-items: center; }
.page-hero__media { margin: 0; display: none; }
@media (min-width: 900px) {
  .page-hero--split .page-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); }
  .page-hero__media { display: block; position: relative; }
  .page-hero__media img {
    width: 100%; height: auto; display: block; border-radius: var(--r-lg);
    border: 5px solid var(--sot-cream);
    box-shadow: 0 20px 48px rgba(60,8,4,0.35), 0 0 0 2px var(--sot-gold);
    aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--hero-focus, center 32%);
  }
  .page-hero__media figcaption {
    position: absolute; left: 12px; bottom: 12px; z-index: 2;
    background: rgba(60,8,4,0.78); color: var(--sot-cream);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.35rem 0.7rem; border-radius: var(--r-pill);
  }
}
@media (max-width: 899px) {
  .page-hero--split {
    background:
      linear-gradient(180deg, rgba(110,14,8,0.9) 0%, rgba(80,10,5,0.87) 100%),
      var(--hero-photo) center 30% / cover no-repeat,
      var(--sot-red-deep);
  }
  .page-hero--split::before { display: none; }
  .page-hero--split h1, .page-hero--split .lead { text-shadow: 0 2px 12px rgba(60,8,4,0.5); }
}
.breadcrumb { font-size: 0.8rem; color: rgba(255,255,255,0.75); margin-bottom: var(--sp-3); }
.breadcrumb a { color: rgba(255,255,255,0.9); text-decoration: underline; }

/* Material/glass explainer table (service pages) */
.explainer-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .explainer-grid { grid-template-columns: repeat(3, 1fr); } }
.explainer-card { background: var(--sot-cream); border: 1px solid var(--n-100); border-radius: var(--r-md); padding: var(--sp-5); }
.explainer-card h3 { margin-top: 0; color: var(--sot-navy); }
/* Two-up variant: a labeled second row (e.g. glass packages) that centers
   instead of leaving an orphaned pair rattling in a 3-col grid. */
.explainer-grid--2 { max-width: 780px; margin-inline: auto; }
@media (min-width: 760px) { .explainer-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.explainer-row-label {
  text-align: center; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sot-red); margin: var(--sp-6) 0 var(--sp-4);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
}
.explainer-row-label::before, .explainer-row-label::after {
  content: ""; flex: 0 1 90px; height: 2px; opacity: 0.55;
  background-image: repeating-linear-gradient(90deg, var(--sot-gold) 0 7px, transparent 7px 12px);
}
.explainer-row-label:first-of-type { margin-top: 0; }

/* City-page intro split: copy on the left, a real job photo filling the right
   half (fixes the empty-right-half layout on /austin). */
.city-split { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .city-split { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-8); } }
.city-split .section-head { margin-bottom: 0; }
.city-split__photo { position: relative; }
.city-split__photo img {
  width: 100%; height: auto; display: block; border-radius: var(--r-lg);
  border: 5px solid var(--sot-cream);
  box-shadow: 0 20px 48px rgba(60,8,4,0.24), 0 0 0 2px var(--sot-gold);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.city-split__photo figcaption {
  margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-muted); text-align: center;
}

/* City-page quick-facts row */
.city-facts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0; }
.city-facts .fact { background: var(--sot-cream); border: 1px solid var(--n-100); border-radius: var(--r-pill); padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--sot-navy); }

/* Booking / calendar embed (gracias pages) */
.booking-embed { max-width: 720px; margin: var(--sp-6) auto 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--n-100); box-shadow: var(--shadow-sm); }
.booking-embed iframe { display: block; width: 100%; min-height: 620px; border: 0; }
.booking-fallback {
  max-width: 560px; margin: var(--sp-6) auto 0; text-align: center; background: var(--sot-cream);
  border: 1px solid var(--sot-gold); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5);
}
.booking-fallback p { margin: 0 0 var(--sp-4); }

/* Case-study cards (real-project proof units) */
.case-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }
.case-card { background: var(--sot-white); border: 1px solid var(--n-100); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
/* Uniform 4:5 crop on every case-study card thumbnail (owner blocker, v3 r2):
   all three cards share one aspect so heights match — no white void under the
   landscape source photo. */
.case-card img { width: 100%; height: auto; display: block; aspect-ratio: 4/5; object-fit: cover; }
.case-card__body { padding: var(--sp-5); }
.case-card__meta { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sot-red); margin-bottom: var(--sp-2); }
/* Price band ON the card — the number is the hook (owner polish, v3 r2). */
.case-card__band {
  display: inline-block; margin: 0 0 var(--sp-3);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--sot-navy);
  background: var(--sot-cream); border: 1px solid var(--sot-gold); border-radius: var(--r-pill);
  padding: 0.25rem 0.8rem;
}
/* Divider between the filterable photo grid and the (unfiltered) case-study
   cards, so the chips visibly govern only the grid above (owner polish, v3 r2). */
.case-divider {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  margin: var(--sp-7) 0 var(--sp-5);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sot-red);
}
.case-divider::before, .case-divider::after {
  content: ""; flex: 0 1 120px; height: 2px; opacity: 0.55;
  background-image: repeating-linear-gradient(90deg, var(--sot-gold) 0 7px, transparent 7px 12px);
}

/* Blog / article prose */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { margin-top: var(--sp-7); font-size: 1.5rem; }
.prose h3 { margin-top: var(--sp-5); font-size: 1.15rem; }
.prose p { margin: var(--sp-4) 0; line-height: 1.7; }
.prose ul, .prose ol { margin: var(--sp-4) 0; padding-left: 1.3em; line-height: 1.7; }
.prose li { margin-bottom: 0.5em; }
.prose .fineprint { margin-top: var(--sp-3); }
.blog-meta { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--sp-2); }
.blog-index-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-top: var(--sp-6); }
@media (min-width: 700px) { .blog-index-grid { grid-template-columns: repeat(2, 1fr); } }
.blog-index-card { background: var(--sot-white); border: 1px solid var(--n-100); border-radius: var(--r-lg); padding: 0; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: block; overflow: hidden; }
.blog-index-card__img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; }
.blog-index-card__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.blog-index-card h3 { margin: 0.3rem 0 0.6rem; color: var(--sot-navy); }
.blog-index-card p { margin: 0; color: var(--text-secondary); }
.blog-index-card__tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sot-red); }

/* ============================================================
   ABOUT — family timeline (2006 → today) + service-area panel
   ============================================================ */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); grid-template-columns: 1fr; counter-reset: tl; }
.timeline__node { position: relative; background: var(--sot-white); border: 1px solid var(--n-100); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); border-top: 4px solid var(--sot-red); }
.timeline__year { display: inline-block; font-family: var(--font-display, 'Zilla Slab', serif); font-weight: 700; font-size: 1.05rem; color: var(--sot-red); letter-spacing: 0.02em; margin-bottom: 0.35rem; }
.timeline__node h3 { margin: 0 0 0.5rem; color: var(--sot-navy); }
.timeline__node p { margin: 0; color: var(--text-secondary); }
.timeline__node::before { content: ""; position: absolute; top: -9px; left: var(--sp-6); width: 14px; height: 14px; background: var(--sot-gold); -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat; }
@media (min-width: 860px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); position: relative; padding-top: var(--sp-4); }
  .timeline::before { content: ""; position: absolute; top: 0; left: 4%; right: 4%; height: 2px; background: repeating-linear-gradient(90deg, var(--sot-gold) 0 10px, transparent 10px 18px); }
  .timeline__node::before { top: -27px; left: 50%; transform: translateX(-50%); }
}
.area-panel { max-width: 640px; background: var(--sot-white); border: 1px solid var(--n-100); border-left: 4px solid var(--sot-red); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.area-panel__head { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--sot-navy); margin: 0 0 var(--sp-4); display: flex; align-items: center; gap: 0.45rem; }
.area-panel__head .star { width: 16px; height: 16px; color: var(--sot-gold); }
.area-panel__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-4); }
.area-panel__chips a { display: inline-block; padding: 0.35rem 0.8rem; border: 1px solid var(--n-100); border-radius: var(--r-pill); background: var(--sot-cream); color: var(--sot-navy); font-weight: 600; font-size: 0.85rem; text-decoration: none; }
.area-panel__chips a:hover { border-color: var(--sot-red); color: var(--sot-red); }
.area-panel__note { color: var(--text-secondary); margin: 0 0 var(--sp-4); }

/* Service-page hero figure (windows/doors): one real job photo above the fold
   so mobile doesn't open text-only (owner polish, v3 r2). */
.service-hero-figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.service-hero-figure img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }
.service-hero-figure figcaption { font-size: 0.8rem; color: var(--text-secondary); padding: 0.6rem 0.9rem; background: var(--sot-white); border-top: 3px solid var(--sot-red); }

/* ============================================================
   HOMEPAGE HERO MOTION (owner missing-item 1, v3 r2)
   Slow 20s Ken Burns on the hero photo, 400ms-staggered fade-up on
   eyebrow → headline → subhead → CTAs, and a one-time gold shimmer
   across "CHEAP FADES. QUALITY STAYS." All gated behind
   prefers-reduced-motion: no-preference — reduced-motion users get the
   original static hero.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--sot-red-black);
  }
  /* photo layer — the only thing that moves */
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: url("../img/hero-bg.jpg") center 42% / cover no-repeat;
    animation: hero-kenburns 20s ease-out both;
    will-change: transform;
  }
  /* scrim layer — static, same gradients as the no-motion hero */
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(90deg, rgba(80,10,5,0.95) 0%, rgba(94,11,6,0.92) 30%, rgba(110,14,8,0.72) 46%, rgba(138,17,9,0.30) 64%, rgba(138,17,9,0.05) 82%, transparent 94%),
      linear-gradient(180deg, transparent 55%, rgba(60,8,4,0.42) 100%);
  }
  @media (max-width: 760px) {
    .hero { background: var(--sot-red-black); }
    .hero::before { background: url("../img/hero-bg.jpg") center / cover no-repeat; }
    .hero::after {
      background: linear-gradient(180deg, rgba(138,17,9,0.86) 0%, rgba(138,17,9,0.72) 55%, rgba(60,8,4,0.7) 100%);
    }
  }
  /* Owner priority 2 (v3 r6): slow 20s Ken Burns, scale 1.0 -> 1.06 exactly. */
  @keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }

  /* Choreographed entrance — compressed (owner priority 1, v3 r9): the full
     hero, CTAs and trustline included, completes by ~1.1s so the primary
     conversion element is never invisible past the first second. Stagger
     feel kept; delays/durations roughly halved from r8. */
  .hero__eyebrow, .hero__statement, .hero__sub,
  .hero__restraint, .hero__ctas, .hero__trustline {
    opacity: 0;
    animation: hero-fade-up 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  /* Owner priority 2 (v3 r6): 3-line staggered headline reveal on load —
     each .hl line fades up on its own. The h1 itself stays
     static so the lines carry the motion. */
  .hero h1 .hl {
    display: inline-block;
    opacity: 0;
    animation: hero-fade-up 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero h1 .hl:nth-child(1) { animation-delay: 0.04s; }
  .hero h1 .hl:nth-child(2) { animation-delay: 0.08s; }
  .hero h1 .hl:nth-child(3) { animation-delay: 0.12s; }
  .hero__eyebrow   { animation-delay: 0s; }
  .hero__statement { animation-delay: 0.18s; }
  .hero__sub       { animation-delay: 0.22s; }
  .hero__restraint { animation-delay: 0.26s; }
  .hero__ctas      { animation-delay: 0.3s; }
  .hero__trustline { animation-delay: 0.35s; }
  @keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* One-time gold shimmer sweep across the brand statement */
  .hero__statement {
    background: linear-gradient(110deg,
      var(--sot-gold) 0%, var(--sot-gold) 42%, #fff8e6 50%, var(--sot-gold) 58%, var(--sot-gold) 100%)
      100% 0 / 260% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--sot-gold);
    animation: hero-fade-up 0.45s 0.18s cubic-bezier(0.22,0.61,0.36,1) both,
               hero-shimmer 1.3s 0.75s ease-in-out 1 both;
  }
  @keyframes hero-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
}

/* Mobile hero headline: one sentence per line for punch (owner polish, v3 r2). */
@media (max-width: 480px) {
  .hero h1 .hl { display: block; }
  /* ES mobile hero (owner priority 5, v3 r10): the three Spanish headline
     segments run longer than the English ones and wrapped to 5 lines at 390,
     pushing "VER SU PRECIO" to the very fold edge. Size the ES headline so
     each segment holds a single line (longest: "Baje su Factura de Verano."
     fits 350px at ~30.8px) — 3 lines total, primary CTA clearly above the
     fold on a 390x844 viewport. English pages are untouched. */
  html[lang="es"] .hero h1 { font-size: clamp(1.5rem, 7.9vw, 2.55rem); }
}

/* ============================================================
   PER-FIELD FORM VALIDATION (owner blocker 6, v3 r2)
   Inline errors that name only the actually-missing fields; the consent
   checkbox is highlighted when it alone blocks submit.
   ============================================================ */
.field--error input, .field--error textarea {
  border-color: var(--sot-red) !important;
  box-shadow: 0 0 0 3px rgba(225, 43, 30, 0.14);
}
.field-err {
  display: block; margin-top: 0.3rem;
  color: var(--sot-red-deep); font-size: 0.78rem; font-weight: 700;
}
.consent--error {
  outline: 2px solid var(--sot-red); outline-offset: 3px;
  border-radius: var(--r-sm); background: rgba(225, 43, 30, 0.06);
}

/* ============================================================
   ESTIMATOR RESULT REVEAL — count-up + gold-star flourish
   (owner polish 6, v3 r2). Static under reduced motion.
   ============================================================ */
.range-flourish {
  display: flex; justify-content: center; align-items: flex-end; gap: 0.55rem;
  margin-bottom: 0.4rem; min-height: 26px;
}
.range-flourish .star { width: 15px; height: 15px; color: var(--sot-gold); }
.range-flourish .star:nth-child(2) { width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .range-flourish .star {
    opacity: 0; transform: scale(0) rotate(-30deg);
    animation: star-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .range-flourish .star:nth-child(1) { animation-delay: 0.15s; }
  .range-flourish .star:nth-child(2) { animation-delay: 0.3s; }
  .range-flourish .star:nth-child(3) { animation-delay: 0.45s; }
  @keyframes star-pop {
    from { opacity: 0; transform: scale(0) rotate(-30deg); }
    70%  { opacity: 1; transform: scale(1.25) rotate(6deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
  }
}

/* ============================================================
   404 — big red vaquero badge instead of the tiny dark mark
   (owner polish 7, v3 r2)
   ============================================================ */
.notfound-badge {
  width: 96px; height: 96px; margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--sot-red-hot) 0%, var(--sot-red) 60%, var(--sot-red-deep) 100%);
  border: 3px solid var(--sot-cream);
  box-shadow: 0 0 0 2px var(--sot-gold), var(--shadow-md);
  display: grid; place-items: center;
}
.notfound-badge .mascot { width: 66px; height: 53px; color: var(--sot-cream); }

/* ============================================================
   REVIEWS PAGE — quote beside a real job photo (owner action 7, v3 r2)
   ============================================================ */
.review-feature {
  display: grid; gap: var(--sp-5); align-items: center;
  max-width: 980px; margin: 0 auto var(--sp-7);
}
@media (min-width: 820px) {
  .review-feature { grid-template-columns: 0.95fr 1.05fr; gap: var(--sp-7); }
  .review-feature--flip .review-feature__photo { order: 2; }
}
.review-feature__photo { margin: 0; position: relative; }
.review-feature__photo img {
  width: 100%; height: auto; display: block; border-radius: var(--r-lg);
  aspect-ratio: 4 / 3; object-fit: cover;
  border: 5px solid var(--sot-cream);
  box-shadow: 0 18px 44px rgba(60, 8, 4, 0.22), 0 0 0 2px var(--sot-gold);
}
.review-feature__photo figcaption {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(60, 8, 4, 0.78); color: var(--sot-cream);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.32rem 0.7rem; border-radius: var(--r-pill);
}
.review-feature .review-card { height: auto; }

/* ============================================================
   /BOOK — inline estimate form beside the call/text card
   (owner blocker 3 / action 5, v3 r2)
   ============================================================ */
.book-grid { display: grid; gap: var(--sp-6); align-items: start; max-width: 1040px; margin: var(--sp-7) auto 0; }
@media (min-width: 900px) { .book-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-7); } }
.book-grid .booking-fallback { margin: 0; max-width: none; }

/* ============================================================
   FINANCING — payment-slider mini-app (owner polish 5, v3 r2)
   Illustrative-only: same guardrails as the static example.
   ============================================================ */
.pay-slider { max-width: 640px; margin: var(--sp-6) auto 0; text-align: center; }
.pay-slider label { display: block; font-weight: 700; color: var(--sot-navy); margin-bottom: var(--sp-3); }
.pay-slider input[type="range"] { width: 100%; accent-color: var(--sot-red); }
.pay-slider .finance-breakdown { margin-top: var(--sp-4); }

/* ============================================================
   V3 R3 — OWNER ROUND: motion layer 2, slider branding, city split,
   hero cap for full-page renders, mobile height trims.
   ============================================================ */

/* ---- ESTIMATOR RANGE SLIDER → BRAND RED (owner polish 1) ----
   The siding sq-ft slider rendered browser-default blue against the dark
   estimator card. Match the financing slider: brand-red accent + explicit
   webkit track/thumb so it holds in headless/older engines too. */
.estimator__card input[type="range"] {
  accent-color: var(--sot-red);
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--sot-red), var(--sot-red-deep));
  outline-offset: 4px;
}
.estimator__card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sot-red);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(60,8,4,0.4);
  cursor: pointer; margin-top: 0;
}
.estimator__card input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sot-red); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(60,8,4,0.4); cursor: pointer;
}
.estimator__card input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--sot-red), var(--sot-red-deep));
}

/* ---- HERO HEIGHT PIN (owner polish 6) ----
   min-height was 86vh, which balloons to 2700px+ in tall full-page
   capture/print windows. Cap it so full-page renders look intentional;
   real 900px-tall desktop viewports render exactly as before. */
@media (min-width: 900px) {
  .hero { min-height: min(86vh, 820px); }
}

/* ---- MOTION LAYER 2 (owner priority 2) ----
   Scroll-triggered reveals. Every initial-hidden state is double-gated:
   the .sot-motion class only exists when JS ran, IO is available AND the
   user prefers motion — so no-JS / reduced-motion always see content. */
@media (prefers-reduced-motion: no-preference) {
  /* Section eyebrows / headlines / leads: 300ms fade-up, staggered */
  .sot-motion .section-head .eyebrow,
  .sot-motion .section-head h2,
  .sot-motion .section-head h3,
  .sot-motion .section-head .lead {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.3s var(--ease-settle, ease-out), transform 0.3s var(--ease-settle, ease-out);
  }
  .sot-motion .section-head h2, .sot-motion .section-head h3 { transition-delay: 0.12s; }
  .sot-motion .section-head .lead { transition-delay: 0.24s; }
  .sot-motion .section-head.in .eyebrow,
  .sot-motion .section-head.in h2,
  .sot-motion .section-head.in h3,
  .sot-motion .section-head.in .lead { opacity: 1; transform: none; }

  /* Case cards: stagger in 120ms apart */
  .sot-motion .case-grid .case-card {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.45s var(--ease-settle, ease-out), transform 0.45s var(--ease-settle, ease-out);
  }
  .sot-motion .case-grid .case-card:nth-child(2) { transition-delay: 0.12s; }
  .sot-motion .case-grid .case-card:nth-child(3) { transition-delay: 0.24s; }
  .sot-motion .case-grid.in .case-card { opacity: 1; transform: none; }

  /* Comparison-table checkmarks: tick in sequentially on first scroll-into-view */
  .compare-col--us li::before { display: inline-block; }
  .sot-motion .compare-col--us ul li::before {
    opacity: 0; transform: scale(0.3);
    transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .sot-motion .compare-col--us ul li:nth-child(1)::before { transition-delay: 0.05s; }
  .sot-motion .compare-col--us ul li:nth-child(2)::before { transition-delay: 0.17s; }
  .sot-motion .compare-col--us ul li:nth-child(3)::before { transition-delay: 0.29s; }
  .sot-motion .compare-col--us ul li:nth-child(4)::before { transition-delay: 0.41s; }
  .sot-motion .compare-col--us ul li:nth-child(5)::before { transition-delay: 0.53s; }
  .sot-motion .compare-col--us ul li:nth-child(6)::before { transition-delay: 0.65s; }
  .sot-motion .compare-col--us ul.in li::before { opacity: 1; transform: scale(1); }
}

/* ---- CITY PAGES (owner polish 3): every city page's "Local work" intro now
   uses the existing .city-split two-column pattern (text + real job photo)
   that /austin already had — see the markup change in each city .html. */

/* ---- MOBILE HEIGHT TRIMS (owner polish 4 / priority 10) ----
   Card grids that stacked into ~30 phone screens become horizontal
   snap scrollers on phones: same content, one card of height each.
   Scroll containers clip themselves — document.scrollWidth stays 390.
   v3 r7 (owner polish 2 / priority 3): cards resized to ~85vw so the next
   card always PEEKS at the right edge, plus a sticky right-edge fade —
   the swipe affordance is now obvious and text never appears to clip
   mid-word against a hard viewport edge. */
@media (max-width: 759px) {
  .section--cream { --scroll-fade: var(--bg-canvas); }
  .section--white { --scroll-fade: var(--bg-elevated); }
  .section--navy  { --scroll-fade: var(--bg-inverse); }
  .crew-grid, .review-grid, .case-grid, .roi-grid, .timeline {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; gap: var(--sp-4);
    padding-bottom: var(--sp-3); margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  /* Right-edge fade: a zero-footprint sticky flex item pinned to the visible
     right edge of the scroller. It rides the scrollport (so cards fade out
     under it instead of hard-clipping) and comes to rest at the end of the
     row, so the last card is never veiled once you've scrolled there. */
  .crew-grid::after, .review-grid::after, .case-grid::after, .roi-grid::after, .timeline::after {
    content: ""; position: sticky; right: 0; z-index: 2;
    flex: 0 0 44px; margin-left: calc(-44px - var(--sp-4)); align-self: stretch;
    background: linear-gradient(to right, transparent, var(--scroll-fade, var(--bg-elevated)));
    pointer-events: none;
  }
  .crew-grid > *, .review-grid > *, .case-grid > *, .roi-grid > *, .timeline > * {
    flex: 0 0 85vw; max-width: 85vw; scroll-snap-align: start;
  }
  .review-grid > .review-cta-tile { flex-basis: 85vw; }
  /* keep the tall portrait crew/team imagery in check on phones */
  .team-banner img { max-height: 340px; object-fit: cover; }
  .crew-card .slot { min-height: 220px; max-height: 240px; }
  .crew-card .slot .slot__img { height: 100%; object-fit: cover; }
}

/* ============================================================
   SPIRIT SWAP BALANCE (owner blocker 3 / priority 2, v3 r7)
   The swap row's right column stacks TWO detail figures (Craftsmanship +
   Materials). At >1100px they stretch to fill the slider's full height —
   killing the ~600px of dead whitespace beside the tall 3:4 slider that
   made the homepage read unbalanced at 1440px.
   ============================================================ */
.craft-stack { display: flex; flex-direction: column; gap: var(--sp-5); justify-content: center; min-width: 0; }
@media (min-width: 1100px) {
  .results-duo { align-items: stretch; }
  .craft-stack { justify-content: stretch; }
  .craft-stack .craft-figure--compact { flex: 1 1 0; min-height: 0; justify-content: flex-start; }
  /* full-width slots that share the slider's height; craft.jpg (900w) and
     g4.jpg (862w) both display <=~560px wide here, so nothing upscales */
  .craft-stack .craft-figure--compact .slot {
    flex: 1 1 auto; width: 100%; max-width: none; margin: 0; aspect-ratio: auto; min-height: 200px;
  }
  .craft-stack .craft-figure--compact figcaption { max-width: none; margin: 0; text-align: left; }
}

/* ============================================================
   ESTIMATOR RANGE -> PERSISTENT CTA (owner polish 5, v3 r7)
   After a visitor computes a range, the sticky mobile bar and the desktop
   floating pill carry "Your range: $X–$Y — book free estimate" for the
   rest of the session (sessionStorage; wired in app.js).
   ============================================================ */
.sticky-cta .sc-estimate--range { flex-direction: column; gap: 1px; line-height: 1.2; padding-block: 6px; }
.sticky-cta .sc-estimate--range .sc-range {
  display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--sot-cream); text-transform: uppercase;
}
.sticky-cta .sc-estimate--range .sc-book { display: block; font-size: 0.88rem; }
.floating-cta--range { text-align: left; }
.floating-cta--range .floating-cta__label { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.floating-cta--range .fc-range { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--sot-cream); }
.floating-cta--range .fc-book { font-size: 0.92rem; }

/* ============================================================
   INSTALL VIDEO SLOT (owner priority 3, v3 r8)
   The homepage wow component for the client's 30-60s install clip.
   Hidden ([hidden] attr) until public/video/spirit-swap-install.mp4
   exists — app.js probes the path and reveals + autoplays (muted, loop,
   playsinline) on success. Poster = golden-hour A-frame finish photo.
   ============================================================ */
.video-slot { margin: 0 auto var(--sp-7); max-width: 960px; }
.video-slot[hidden] { display: none; }
.video-slot__frame {
  position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 16 / 9; background: var(--sot-red-black);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(224, 168, 63, 0.35); /* thin frontier-gold frame */
}
.video-slot__frame video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.video-slot__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--sot-red); color: #fff;
  font-weight: var(--fw-bold); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.35rem 0.65rem; border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.video-slot__badge .star { width: 12px; height: 12px; color: var(--sot-gold); }
.video-slot__cap {
  margin-top: var(--sp-3); text-align: center;
  font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5;
}

/* Reserve the approved chat-widget corner without changing widget settings. */
@media(min-width:900px){.floating-cta{right:auto;left:20px}}