/* =================================================================
/* (long line stripped) */
   Shademaster-inspired premium charcoal with 7 gradient sections
   ================================================================= */

/* ---------------------------------------------------------------
   1. Tokens
--------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg-primary:     #1A1A1A;
  --bg-elevated:    #242424;
  --bg-light:       #F4F1EC;

/* (long line stripped) */
  --ink:            #1A1A1A;
  --ink-soft:       #2D2D2D;
  --ink-muted:      #595959;
  --paper:          #FAFAF7;
  --paper-bright:   #FFFFFF;
  --paper-muted:    rgba(26, 26, 26, 0.85);
  --paper-faint:    rgba(26, 26, 26, 0.65);
  --paper-thin:     rgba(26, 26, 26, 0.40);
  --terracotta:     #B8694A;
  --bg-canvas:      #FAFAF7;   /* near-white off-white page bg */
  --frost-bg:       rgba(250, 250, 247, 0.65);

  /* Accents */
  --accent-warm:    #C9A961;
  --accent-warm-hi: #E0C485;
  --accent-deep:    #8B7355;

  /* Lines */
  --border-light:   rgba(255, 255, 255, 0.12);
  --border-strong-light: rgba(255, 255, 255, 0.22);
  --border-dark:    rgba(0, 0, 0, 0.12);

  /* Type */
  --font-display:   "Cinzel", "Trajan Pro", Georgia, serif;
  --font-sans:      "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii */
  --r-sharp:        4px;
  --r-pill:         999px;

  /* Easing */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --container:      1320px;
  --gutter-x:       clamp(1.5rem, 6vw, 6rem);
  --section-y:      clamp(4.5rem, 9vw, 8rem);
  --sticky-nav-h:   64px;

  /* Shadows (gold-tinted, not black) */
  --shadow-warm:    0 30px 80px -30px rgba(201, 169, 97, 0.25);
  --shadow-card:    0 18px 48px -28px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------
   2. Reset + base
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  /* Paint-blob canvas (.paint-bg, position:fixed, z-index:-10) sits behind everything.
     Body is the near-white off-white base; canvas blobs blend via mix-blend-mode: multiply. */
  background: var(--bg-canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent-warm); color: var(--bg-primary); }

.skip-link {
  position: absolute; top: -40px; left: 1rem;
  background: var(--accent-warm); color: var(--bg-primary);
  padding: 0.5rem 1rem; z-index: 10000;
  border-radius: var(--r-sharp);
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------
   3. Typography
--------------------------------------------------------------- */
.h-hero, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h-section, h2.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h-sub, h3.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.body-lg {
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 400;
}
.body {
  font-size: 1rem;
  line-height: 1.6;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-warm);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent-warm);
  flex-shrink: 0;
}
.eyebrow.no-rule::before { display: none; }

.caption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-muted);
}

/* ---------------------------------------------------------------
   4. Layout primitives
--------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
}
section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
/* CRITICAL: keep main and its descendants transparent so the scroll-tied
   body backgroundColor shows through. Solid section bgs would hide it. */
main, .site-main { background: transparent; }

/* ---------------------------------------------------------------
/* (long line stripped) */
--------------------------------------------------------------- */
/* Top-bar: dark strip with phone + Book Now on the right only (no nav links) */

/* (long line stripped) */

.site-nav-brand-link { /* legacy click-target selector kept for compat */ }

.site-nav-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-bright);
  position: relative;
  padding: 0.4rem 0;
  transition: color 200ms var(--ease-out);
}
.site-nav-link:hover, .site-nav-link.is-active { color: var(--accent-warm-hi); }
.site-nav-link.is-active::after,
.site-nav-link:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent-warm);
}
.site-nav-phone {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--paper-bright);
  transition: color 180ms var(--ease-out);
}
.site-nav-phone:hover { color: var(--accent-warm-hi); }

/* ---------------------------------------------------------------
   6. Buttons (gold CTA + ghost)
--------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.9rem 1.7rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-sharp);
  border: 1px solid transparent;
  transition: background-color 250ms var(--ease-out),
              color 250ms var(--ease-out),
              border-color 250ms var(--ease-out),
              transform 250ms var(--ease-out),
              box-shadow 250ms var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent-warm);
  color: var(--bg-primary);
  border-color: var(--accent-warm);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover {
  background: var(--accent-warm-hi);
  border-color: var(--accent-warm-hi);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 8px 24px rgba(201, 169, 97, 0.28);
}

.btn-ghost-light {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper-thin);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--paper-muted); transform: translateY(-2px); }

.btn-ghost-dark {
  background: transparent;
  color: var(--ink);
  border-color: rgba(0, 0, 0, 0.18);
}
.btn-ghost-dark:hover { background: rgba(0, 0, 0, 0.04); border-color: var(--ink); transform: translateY(-2px); }

.btn-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-warm);
  position: relative;
  transition: color 200ms var(--ease-out);
}
.btn-link::after {
/* (long line stripped) */
  display: inline-block;
  margin-left: 0.25rem;
  transition: transform 250ms var(--ease-out);
}
.btn-link:hover { color: var(--accent-warm-hi); }
.btn-link:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------
   7. Hero (home)
--------------------------------------------------------------- */

/* ----------------------------------------------------------
   8. Top-bar + Logo Band + Sticky product nav -- see block at end.
--------------------------------------------------------------- */

/* All home-page product sections offset for sticky nav when scroll-anchored */
.product-section { scroll-margin-top: calc(var(--sticky-nav-h) + 12px); }

/* ---------------------------------------------------------------
/* (long line stripped) */
--------------------------------------------------------------- */
.product-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
  isolation: isolate;
}
.product-section::after {
  content: "";
  position: absolute;
  left: var(--gutter-x);
  right: var(--gutter-x);
  bottom: 0;
  height: 1px;
  background: var(--border-light);
}
.product-section:last-of-type::after { display: none; }

.product-section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
  width: 100%;
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.product-section-figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sharp);
  background: rgba(255, 255, 255, 0.04);
}
.product-section-figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.product-section-figure:hover img { transform: scale(1.02); }

.product-section-text > * + * { margin-top: 1.25rem; }
.product-section-text .eyebrow { margin-bottom: 1rem; }
.product-section-text h2 { margin-bottom: 1rem; color: var(--paper); }
.product-section-text .intro {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--paper-muted);
  margin-bottom: 1.5rem;
}
.product-section-text .feature-list {
  display: grid;
  gap: 0.85rem;
  margin: 1.5rem 0 2rem;
  max-width: 460px;
}
.product-section-text .feature-list li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--paper-muted);
}
.product-section-text .feature-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent-warm);
  margin-top: 0.55rem;
}

/* Product sections sit transparent over the paint-blob background. */
.product-section { position: relative; background: transparent !important; }
.product-section > * { position: relative; z-index: 1; }

/* (long line stripped) */
.product-hero.gradient-plantation   { background: linear-gradient(135deg, #2C2825 0%, #3D362F 50%, #4A4138 100%); }
.product-hero.gradient-blinds       { background: linear-gradient(135deg, #1F2832 0%, #2B3744 50%, #34404D 100%); }
.product-hero.gradient-shades       { background: linear-gradient(135deg, #2D3437 0%, #3D4549 50%, #4D565A 100%); }
.product-hero.gradient-roller       { background: linear-gradient(135deg, #3A2F26 0%, #4D3D2F 50%, #5C4838 100%); }
.product-hero.gradient-zebra        { background: linear-gradient(135deg, #1E1E1E 0%, #2D2D2D 50%, #3C3C3C 100%); }
.product-hero.gradient-drapes       { background: linear-gradient(135deg, #2C2A2E 0%, #3D3A40 50%, #4D4951 100%); }
.product-hero.gradient-consultation { background: linear-gradient(135deg, #1F2A24 0%, #2A3830 50%, #34453B 100%); }

/* ---------------------------------------------------------------
/* (long line stripped) */
--------------------------------------------------------------- */
.product-hero {
  padding: clamp(5rem, 9vw, 7rem) 0;
  background: var(--bg-primary);
}
.product-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.product-hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-sharp);
}
.product-hero-text > * + * { margin-top: 1.25rem; }
.product-hero-text .eyebrow { margin-bottom: 1rem; }
.product-hero-text h1 { color: var(--paper); margin-bottom: 1rem; }
.product-hero-text .intro {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.6;
  color: var(--paper-muted);
  max-width: 52ch;
  margin-bottom: 2rem;
}
.spec-list {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.85rem 1.5rem;
  border-top: 1px solid var(--border-light);
  padding-top: 1.5rem;
  margin: 1.75rem 0 2rem;
  max-width: 520px;
}
.spec-list dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-warm);
}
.spec-list dd {
  font-size: 0.9375rem;
  color: var(--paper);
  margin: 0;
}

/* ---------------------------------------------------------------
   11. Light section (cream block on product pages)
--------------------------------------------------------------- */
.section-light {
  background: var(--bg-light);
  color: var(--ink);
}
.section-light .eyebrow { color: var(--accent-deep); }
.section-light .eyebrow::before { background: var(--accent-deep); }
.section-light h2, .section-light h3 { color: var(--ink); }
.section-light p, .section-light .body { color: var(--ink-muted); }
.section-light .feature-list li { color: var(--ink-muted); }
.section-light .feature-list li::before { background: var(--accent-deep); }

/* Section heading block */
.section-head {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: 1.25rem; justify-content: center; }
.section-head .eyebrow::before { display: none; }
.section-head h2 { text-wrap: balance; }
.section-head p { color: var(--ink-muted); margin-top: 1rem; font-size: 1.0625rem; line-height: 1.6; }
.section-dark .section-head p { color: var(--paper-muted); }
.section-dark .section-head .eyebrow { color: var(--accent-warm); }

/* 3-col features grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
}
.feature-card .feature-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 0.85rem;
}
.feature-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: var(--ink);
}
.feature-card p { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.6; }

/* What's included list (5 bullets editorial) */
.included-list {
  display: grid;
  gap: 1.25rem;
  max-width: 760px;
  margin: 2rem auto 0;
}
.included-list li {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-light);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper-muted);
}
.included-list li:last-child { border-bottom: 0; }
.included-list strong {
  color: var(--paper);
  font-weight: 500;
}
.section-light .included-list li { color: var(--ink-muted); border-bottom-color: rgba(0, 0, 0, 0.08); }
.section-light .included-list strong { color: var(--ink); }

/* (long line stripped) */
.install-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 2rem;
}
.install-grid figure { margin: 0; }
.install-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-sharp);
  background: rgba(0, 0, 0, 0.04);
}
.install-grid figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* Dark variants of generic helpers */
.section-dark { background: var(--bg-primary); color: var(--paper); }
.section-dark h2, .section-dark h3 { color: var(--paper); }

/* ---------------------------------------------------------------
   12. FAQ accordion
--------------------------------------------------------------- */
.faq-list {
  max-width: 760px;
  margin: 2rem auto 0;
  border-top: 1px solid var(--border-light);
}
.section-light .faq-list { border-top-color: rgba(0, 0, 0, 0.08); }
.faq-item { border-bottom: 1px solid var(--border-light); }
.section-light .faq-item { border-bottom-color: rgba(0, 0, 0, 0.08); }
.faq-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 1rem;
  align-items: center;
  text-align: left;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper);
  transition: color 200ms var(--ease-out);
  list-style: none;
  cursor: pointer;
}
.faq-trigger::-webkit-details-marker { display: none; }
.section-light .faq-trigger { color: var(--ink); }
.faq-trigger:hover { color: var(--accent-warm); }
.section-light .faq-trigger:hover { color: var(--accent-deep); }
.faq-icon {
  position: relative;
  width: 18px; height: 18px;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 240ms var(--ease-out);
}
.faq-icon::before { top: 8px; left: 0; right: 0; height: 1.5px; }
.faq-icon::after  { left: 8px; top: 0; bottom: 0; width: 1.5px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-answer {
  padding: 0 0 1.75rem;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--paper-muted);
}
.section-light .faq-answer { color: var(--ink-muted); }

/* ---------------------------------------------------------------
   13. CTA strip (recurring)
--------------------------------------------------------------- */
.cta-strip {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  text-align: center;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.cta-strip .eyebrow { margin-bottom: 1.5rem; justify-content: center; }
.cta-strip .eyebrow::before { display: none; }
.cta-strip h2 { color: var(--paper); max-width: 18ch; margin: 0 auto; }
.cta-strip-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

/* ---------------------------------------------------------------
   14. Book + FAQ heroes (smaller hero variant)
--------------------------------------------------------------- */
.subhero {
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 5vw, 4rem);
  background: var(--bg-primary);
  position: relative;
  isolation: isolate;
}
.subhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 30%, rgba(201, 169, 97, 0.08) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
}
.subhero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
}
.subhero .eyebrow { margin-bottom: 1.5rem; }
.subhero h1 { margin-bottom: 1.5rem; max-width: 18ch; }
.subhero .intro {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--paper-muted);
  max-width: 580px;
  line-height: 1.6;
}

/* Book grid */
.book-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.book-list {
  counter-reset: steps;
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}
.book-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-light);
}
.book-list li:last-child { border-bottom: 0; }
.book-list li::before {
  content: counter(steps, decimal-leading-zero);
  counter-increment: steps;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent-warm);
  padding-top: 0.25rem;
}
.book-list strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 0.35rem;
}
.book-list span { color: var(--paper-muted); font-size: 0.9375rem; line-height: 1.55; }

.calendly-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sharp);
  padding: 2rem;
  min-height: 480px;
}
.calendly-wrap iframe { width: 100%; height: 600px; border: 0; display: block; }
.contact-form { display: grid; gap: 1.25rem; }
.contact-form label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--paper);
  display: block;
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sharp);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--paper);
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-warm);
  background: rgba(255, 255, 255, 0.03);
}
.contact-form textarea { min-height: 140px; resize: vertical; }

/* ---------------------------------------------------------------
   15. FAQ page category headings
--------------------------------------------------------------- */
.faq-category {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin: 3rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
  max-width: 760px;
}
.faq-category:first-of-type { margin-top: 0; }
.section-light .faq-category { color: var(--accent-deep); border-bottom-color: rgba(0, 0, 0, 0.08); }

/* ---------------------------------------------------------------
   16. Footer
--------------------------------------------------------------- */
.site-footer {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-light);
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
}
.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.footer-brand img { height: 56px; width: auto; margin-bottom: 1.25rem; }
.footer-brand .footer-card {
  height: auto;
  width: clamp(220px, 18vw, 320px);
  border-radius: var(--r-sharp);
  margin-bottom: 1.5rem;
}
.footer-brand p { color: var(--paper-muted); font-size: 0.9375rem; max-width: 30ch; line-height: 1.55; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 1.25rem;
}
.footer-col ul li { margin-bottom: 0.65rem; }
.footer-col a {
  color: var(--paper-muted);
  font-size: 0.9375rem;
  transition: color 200ms var(--ease-out);
}
.footer-col a:hover { color: var(--paper); }
.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--paper-muted);
  line-height: 1.7;
}
.footer-bottom {
  max-width: var(--container);
  margin: 4rem auto 0;
  padding: 1.5rem var(--gutter-x) 0;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p, .footer-bottom a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--paper-faint);
  text-transform: uppercase;
}
.footer-bottom a:hover { color: var(--paper); }
.footer-legal a + a { margin-left: 1rem; }

/* ---------------------------------------------------------------
   17. Mobile nav
--------------------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--paper);
  position: relative;
  transition: transform 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: var(--paper);
  transition: transform 240ms var(--ease-out), top 240ms var(--ease-out);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top:  7px; }
[aria-expanded="true"].nav-toggle span { background: transparent; }
[aria-expanded="true"].nav-toggle span::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"].nav-toggle span::after  { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 6rem 1.5rem 2rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  overflow-y: auto;
}
.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-light);
}
.mobile-nav-sub-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin: 1.5rem 0 0.5rem;
}
.mobile-nav-bottom {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ---------------------------------------------------------------
   18. Reveal animation (subtle fade-up on scroll)
--------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------
   19. Responsive
--------------------------------------------------------------- */
@media (max-width: 1024px) {
  .product-section-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .product-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .install-grid { grid-template-columns: 1fr 1fr; }
  .book-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 720px) {
  .site-nav-links { display: none; }
  .site-nav-right { display: none; }
  .nav-toggle { display: inline-flex; }
  .features-grid, .install-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .product-section { min-height: auto; }
  .hero { min-height: 70vh; }
  .spec-list { grid-template-columns: 95px 1fr; gap: 0.65rem 1rem; }
}

/* ---------------------------------------------------------------
   20. Reduced motion
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .product-section-figure:hover img { transform: none; }
}

/* (long comment line stripped) */
/* (long line stripped) */
   html paints #FAFAF7 (the lowest layer)
   body is transparent so the canvas is visible behind body content
   canvas sits at z-index 0 (above html bg, below content)
   content sits at z-index 1+ (above canvas)
   NOTE: do NOT include sticky-nav in the position:relative list
/* (long line stripped) */
/* (long comment line stripped) */
html { background: #FAFAF7; }
body { background: transparent; }
canvas.paint-bg, .paint-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  display: block;
  mix-blend-mode: multiply;
}
/* Lift content above the canvas (but NOT the sticky nav) */
.skip-link,
main,
.site-main,
.cta-strip,
.site-footer,
.mobile-nav,
section {
  position: relative;
  z-index: 1;
}

/* (long comment line stripped) */
/* (long line stripped) */
/* (long comment line stripped) */
h1, h2, h3, h4, h5, h6,
.h-hero, h1.display, .h-section, h2.display, .h-sub, h3.display {
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.4);
}
.hero h1, .hero h1.display, .subhero h1, .subhero h1.display,

p, li {
  color: var(--ink-soft);
}
.product-section p, .product-section li {
  color: var(--ink-soft);
}
.eyebrow, .section-eyebrow { color: var(--accent-warm); }
.section-light h1, .section-light h2, .section-light h3 { text-shadow: none; }

/* Force Browse Products + similar secondary CTAs to filled gold */
.hero .btn-ghost-light,
.btn-ghost-light.browse-cta,
a.btn-ghost-light[href^="#"] {
  background: var(--accent-warm);
  color: var(--ink);
  border-color: var(--accent-warm);
}
.hero .btn-ghost-light:hover,
.btn-ghost-light.browse-cta:hover {
  background: var(--accent-warm-hi);
  border-color: var(--accent-warm-hi);
  color: var(--ink);
}

/* (long comment line stripped) */
/* (long line stripped) */
/* (long comment line stripped) */
.btn-glow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --glow-x: 50%;
  --glow-y: 50%;
}
.btn-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 80px at var(--glow-x) var(--glow-y),
    rgba(255, 230, 150, 0.45),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
  z-index: 0;
}
.btn-glow:hover::before { opacity: 1; }
.btn-glow > * { position: relative; z-index: 1; }

/* Footer card pulse */
.footer-brand .footer-card,
.footer-logo img {
  filter: drop-shadow(0 0 18px rgba(201, 169, 97, 0.35));
  animation: card-pulse 4s ease-in-out infinite;
}
@keyframes card-pulse {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(201, 169, 97, 0.35)); }
  50%      { filter: drop-shadow(0 0 28px rgba(201, 169, 97, 0.55)); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-brand .footer-card,
  .footer-logo img { animation: none; }
}

/* (long comment line stripped) */
/* (long line stripped) */
/* (long comment line stripped) */
.book-page-hero {
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 3rem) 2.5rem;
  text-align: center;
}
.book-page-hero h1 {
  margin: 0 auto 1rem;
  max-width: 18ch;
}
.book-page-hero p.intro {
  max-width: 620px;
  margin: 0 auto;
}

.expect-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 5rem;
  padding: 0 clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 768px) {
  .expect-cards { grid-template-columns: repeat(2, 1fr); }
}
.expect-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 350ms var(--ease-out), border-color 350ms var(--ease-out);
}
.expect-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 97, 0.45);
}
.expect-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.15);
  color: var(--accent-warm);
  margin-bottom: 1rem;
}
.expect-card-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; }
.expect-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--paper-bright);
  margin-bottom: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.expect-card-desc {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--paper-muted);
  line-height: 1.55;
}

.book-form-section {
  padding: 1rem clamp(1.5rem, 3vw, 3rem) clamp(4rem, 8vw, 6rem);
}
.book-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 900px) {
  .book-form-grid { grid-template-columns: 1fr; }
  .book-form-image { order: 2; }
  .book-form-card { order: 1; }
}
.book-form-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.book-form-card {
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  padding: 2.5rem;
  border-radius: 8px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.45);
}
.book-form-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--ink);
  margin-bottom: 1.5rem;
  text-shadow: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.book-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.book-form .form-field { margin-bottom: 1rem; }
.book-form label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 0.375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.book-form .req { color: var(--terracotta); }
.book-form input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: #FFFFFF;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.book-form input:focus {
  outline: none;
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}
.form-submit {
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;
  font-size: 1rem;
}

/* (long comment line stripped) */
/* (long line stripped) */
/* (long comment line stripped) */

/* Top-bar stays dark with white text */

.top-bar .site-nav-link:hover, .top-bar .site-nav-link.is-active,

/* Sticky product nav stays dark with white chips */

/* Footer stays dark with white text */
.site-footer {
  background: #1A1A1A;
  color: #FFFFFF;
  border-top-color: rgba(255, 255, 255, 0.12);
}
.site-footer h2, .site-footer h3, .site-footer h4,
.site-footer p, .site-footer a, .site-footer li {
  color: #FFFFFF;
  text-shadow: none;
}
.site-footer .footer-col h4 { color: var(--accent-warm); }
.site-footer .footer-meta,
.site-footer .footer-col a {
  color: rgba(255, 255, 255, 0.72);
}
.site-footer .footer-col a:hover { color: #FFFFFF; }
.site-footer .footer-bottom p,
.site-footer .footer-bottom a {
  color: rgba(255, 255, 255, 0.55);
}

/* Mobile nav stays dark */
.mobile-nav { background: #1A1A1A; color: #FFFFFF; }
.mobile-nav a { color: #FFFFFF; }

/* Buttons get gold drop-shadow visible on light bg */
.btn, .btn-primary {
  box-shadow: 0 4px 14px rgba(201, 169, 97, 0.30);
}
.btn:hover, .btn-primary:hover {
  box-shadow: 0 6px 18px rgba(201, 169, 97, 0.45);
  transform: translateY(-1px);
}
.btn-primary {
  color: #1A1A1A;
}

/* (long line stripped) */
.product-section,
.section-dark,
.section-light,
.subhero,
.cta-strip,
.book-page-hero,
.book-form-section,
.expect-cards-wrap {
  background: var(--frost-bg) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Hero gets a slightly stronger overlay since it usually has a bg image */

/* (long line stripped) */
.section-dark {
  background: rgba(26, 26, 26, 0.92) !important;
  color: #FFFFFF;
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark p, .section-dark li {
  color: #FFFFFF;
  text-shadow: none;
}
.section-dark .eyebrow { color: var(--accent-warm); }
.section-dark .included-list li { color: rgba(255, 255, 255, 0.85); }
.section-dark .included-list strong { color: #FFFFFF; }
.section-dark .faq-trigger { color: #FFFFFF; }
.section-dark .faq-answer { color: rgba(255, 255, 255, 0.78); }

/* CTA strip stays dark elevated */
.cta-strip {
  background: rgba(36, 36, 36, 0.92) !important;
  color: #FFFFFF;
}
.cta-strip h2, .cta-strip p { color: #FFFFFF; text-shadow: none; }

/* (long line stripped) */
.product-hero { background: var(--frost-bg) !important; }
.product-hero h1, .product-hero .intro, .product-hero .body {
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.45);
}
.product-hero .body { color: var(--ink-soft); }
.product-hero .spec-list dd { color: var(--ink); }
.product-hero .spec-list { border-top-color: rgba(0, 0, 0, 0.12); }
.product-hero .btn-ghost-light {
  color: var(--ink);
  border-color: rgba(0, 0, 0, 0.18);
}
.product-hero .btn-ghost-light:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--ink);
}
.product-hero-text .feature-list li { color: var(--ink-soft); }

/* (long line stripped) */
.product-hero.gradient-plantation,
.product-hero.gradient-blinds,
.product-hero.gradient-shades,
.product-hero.gradient-roller,
.product-hero.gradient-zebra,
.product-hero.gradient-drapes,
.product-hero.gradient-consultation {
  background: var(--frost-bg) !important;
}

/* Reveal helpers should still fade in even with z-index */
[data-reveal] { z-index: 1; }

/* (long comment line stripped) */
/* (long line stripped) */
        EXCEPT the section-dark/cta-strip islands.
/* (long comment line stripped) */
main, .site-main { background: transparent !important; }
section,
.page-section,
.product-section,
section[data-product],
.subhero,
.book-page-hero,
.book-form-section,
.expect-cards-wrap,
.product-hero,
.section-light,
.content-section {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Home hero keeps its photo background (set inline as background-image url) */

/* Dark inverted islands keep their dark backdrop */
.section-dark,
.cta-strip {
  background: rgba(26, 26, 26, 0.92) !important;
}
/* Cards within sections keep frosted/light bg for legibility */
.product-card,
.feature-card,
.expect-card,
.testimonial-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Footer keeps its dark theme */
footer, .site-footer {
  background: #1A1A1A !important;
}

/* (long comment line stripped) */
   27. HERO SUBHEAD READABILITY
/* (long comment line stripped) */
/* (orphaned hero-* selectors removed — hero deleted) */

/* (long comment line stripped) */
/* (long line stripped) */
/* (long comment line stripped) */
.expect-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(26, 26, 26, 0.15);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 350ms,
              border-color 350ms;
}
.expect-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 97, 0.55);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.10),
    0 4px 8px rgba(0, 0, 0, 0.06);
}
.expect-card-title { color: var(--ink); }
.expect-card-desc  { color: var(--ink-soft); }
.expect-card-icon {
  background: rgba(201, 169, 97, 0.15);
  color: var(--accent-warm);
}

.book-form-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1280px;
  margin: 0 auto;
  align-items: stretch;
}
.book-form-image { position: relative; }
.book-form-image img {
  width: 100%;
  height: 100%;
  min-height: 600px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.25);
  display: block;
}
@media (max-width: 900px) {
  .book-form-grid { grid-template-columns: 1fr; }
  .book-form-image img { min-height: 400px; }
}

/* (long comment line stripped) */
/* (long line stripped) */
/* (long comment line stripped) */
body,
main,
main p,
main li,
main h1, main h2, main h3, main h4, main h5, main h6,
.product-description,
.feature-description,
.product-card p,
.product-card li {
  color: var(--ink, #1A1A1A);
}
main p, main li { color: var(--ink-soft, #2D2D2D); }
.eyebrow, .section-eyebrow { color: var(--accent-warm); }

/* Inside dark inverted islands (section-dark, cta-strip), restore white */
.section-dark, .section-dark p, .section-dark li,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4,
.cta-strip, .cta-strip p, .cta-strip h2 {
  color: #FFFFFF;
}
.section-dark .eyebrow, .cta-strip .eyebrow { color: var(--accent-warm); }
.section-dark .included-list strong { color: #FFFFFF; }
.section-dark .faq-trigger { color: #FFFFFF; }
.section-dark .faq-answer { color: rgba(255, 255, 255, 0.82); }

/* Footer text stays white (nav handled in block at end of file) */
footer, footer * { color: #FFFFFF; }
footer a:hover { color: var(--accent-warm); }
.site-footer .footer-col h4 { color: var(--accent-warm); }

/* (long comment line stripped) */
   30. HERO SECTION (home page only) + sticky-friendly parents
/* (long comment line stripped) */

/* Sticky needs: html scrollable on Y; body and main MUST NOT be
   overflow:hidden on Y. overflow-x:hidden is fine. main must be
   overflow:visible so its sticky descendants can stick. */
html { overflow-x: hidden; }
body { overflow-x: hidden; overflow-y: visible; }
main, .site-main { overflow: visible !important; }

/* (orphaned selectors removed) */

/* (long line stripped) */
   31. TOP BAR + SITE LOGO BAND + STICKY PRODUCT NAV
/* (long line stripped) */

/* TOP BAR */
.top-bar {
  position: relative;
  width: 100%;
  height: 56px;
  background: #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 3vw, 3rem);
  z-index: 10;
}
.top-bar-left { display: flex; align-items: center; }
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}
.top-bar-phone {
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.top-bar-phone:hover { color: var(--accent-warm, #C9A961); }
.top-bar .nav-cta {
  padding: 0.55rem 1.1rem !important;
  font-size: 0.75rem !important;
}

/* SITE LOGO BAND (transparent rightheader.png) — v3: cumulative move-up. Prior run halved top padding (1rem → 0.5rem); this run adds margin-top: -28px to pull the band ~28px closer to the top-bar. */
.site-logo-band {
  position: relative;
  width: 100%;
  padding: 0.5rem 1rem 1rem;
  margin-top: -28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 5;
}
.site-logo {
  height: 340px;
  width: auto;
  max-width: 95vw;
  display: block;
  object-fit: contain;
}
@media (max-width: 1024px) {
  .site-logo { height: 260px; }
}
@media (max-width: 768px) {
  .site-logo { height: 195px; }
}
@media (max-width: 480px) {
  .site-logo { height: 150px; }
}

/* STICKY PRODUCT NAV */
.sticky-product-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: #1A1A1A;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  height: 64px;
}
.sticky-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.sticky-nav-logo-img {
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(201, 169, 97, 0.35));
  animation: nav-logo-glow 3s ease-in-out infinite;
}
@keyframes nav-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(201, 169, 97, 0.35)); }
  50%      { filter: drop-shadow(0 0 20px rgba(201, 169, 97, 0.6)); }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-nav-logo-img { animation: none; }
}
.sticky-nav-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2rem);
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sticky-nav-chips a,
.sticky-nav-chips .sticky-nav-item {
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0;
  transition: color 200ms var(--ease-out);
}
.sticky-nav-chips a:hover,
.sticky-nav-chips a.is-active,
.sticky-nav-chips .sticky-nav-item:hover,
.sticky-nav-chips .sticky-nav-item.is-active {
  color: var(--accent-warm, #C9A961);
}

/* STICKY SUPPORT: clean parent overflow */
html { overflow-x: hidden; overflow-y: auto; }
body { overflow-x: hidden; overflow-y: visible; }
main, .site-main { overflow: visible !important; }
/* (long line stripped) */
/* 32. MOBILE — logo sizing + hamburger + drawer */
/* (long line stripped) */

/* Logo sizing on smaller screens — spec: 240 / 180 / 140 */
@media (max-width: 768px) {
  .site-logo-band { padding: 0.5rem 1rem; }
}

/* Hamburger button (existing .nav-toggle in .top-bar-left) */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #FFFFFF;
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #FFFFFF;
  transition: transform 240ms var(--ease-out), top 240ms var(--ease-out);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top:  7px; }
[aria-expanded="true"].nav-toggle span { background: transparent; }
[aria-expanded="true"].nav-toggle span::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"].nav-toggle span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .sticky-nav-chips { display: none !important; }
  .sticky-nav-logo { margin-right: auto; }
  .sticky-product-nav { justify-content: flex-start; }
}

/* Full-screen mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: rgba(26, 26, 26, 0.97);
  z-index: 2000;
  display: none;
  opacity: 0;
  transition: opacity 300ms ease;
  padding: 5rem 2rem 2rem;
  overflow-y: auto;
}
.mobile-nav.is-open {
  display: block;
  opacity: 1;
}
.mobile-nav a {
  display: block;
  padding: 1rem 0;
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav a:hover { color: var(--accent-warm, #C9A961); }
.mobile-nav-sub-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin: 1.75rem 0 0.5rem;
}
.mobile-nav-bottom {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mobile-nav-bottom a { border-bottom: 0; }
.mobile-nav-bottom .btn {
  text-align: center;
}
/* ---------------------------------------------------------------
   33. HOMEPAGE HERO (underlogo + overlay form) + HOW WE DO IT
   --------------------------------------------------------------- */

/* HOMEPAGE HERO */
.home-hero {
  position: relative;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
}
.home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.10) 40%,
    rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}
.home-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 3rem clamp(1.5rem, 4vw, 4rem);
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.home-hero-form-card {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 2.25rem;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4);
  color: var(--ink, #1A1A1A);
}
.home-hero-form-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  color: var(--ink, #1A1A1A);
  margin: 0 0 0.5rem;
  letter-spacing: 0.04em;
  text-shadow: none;
}
.home-hero-form-sub {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-soft, #2D2D2D);
  margin: 0 0 1.5rem;
  text-shadow: none;
}
.home-hero-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.home-hero-form .form-field {
  margin-bottom: 0.875rem;
}
.home-hero-form label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-hero-form .req { color: #B8694A; }
.home-hero-form input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink);
  background: #FFFFFF;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.home-hero-form input:focus {
  outline: none;
  border-color: var(--accent-warm, #C9A961);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}
.home-hero-form .form-submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.875rem;
  font-size: 0.875rem;
}
@media (max-width: 900px) {
  .home-hero-inner {
    justify-content: center;
    padding: 2rem 1rem;
  }
  .home-hero-form-card { max-width: 100%; }
  .home-hero { min-height: 700px; }
}

/* HOW WE DO IT */
.how-we-do-it {
  padding: 5rem clamp(1.5rem, 4vw, 4rem);
  background: transparent;
}
.how-we-do-it-inner {
  max-width: 1320px;
  margin: 0 auto;
}
.how-we-do-it-header {
  text-align: center;
  margin-bottom: 3rem;
}
.how-we-do-it-header .eyebrow {
  display: block;
  color: var(--accent-warm, #C9A961);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.how-we-do-it-header .eyebrow::before { display: none; }
.how-we-do-it-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--ink, #1A1A1A);
  margin: 0;
  letter-spacing: 0.04em;
  text-shadow: none;
}
.how-we-do-it-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .how-we-do-it-grid { grid-template-columns: repeat(2, 1fr); }
}

/* PRODUCT GALLERY (used on each product detail page) */
.product-gallery {
  padding: 4rem clamp(1.5rem, 4vw, 4rem);
}
.product-gallery-header {
  text-align: center;
  margin-bottom: 3rem;
}
.product-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1320px;
  margin: 0 auto;
}
.product-gallery-grid figure { margin: 0; }
.product-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
  display: block;
}
.product-gallery-grid figcaption {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-muted, #595959);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════════
   34. 21-FIX PASS — sticky-nav center, home form sizing, dark
       body text, luxury borders, tightened gaps, product spotlight
   ═══════════════════════════════════════════════════════════════ */

/* --- Fix 2C: Sticky nav recentered (logo + consultation chip gone) --- */
.sticky-product-nav { justify-content: center !important; }
.sticky-nav-chips,
.sticky-nav-list {
  justify-content: center !important;
  flex: 0 1 auto !important;
}

/* --- Fix 3B: Home hero form pushed right + 25% bigger --- */
.home-hero-form-card {
  padding: 2.75rem;
  max-width: 575px !important;     /* was 460 — 25% bigger */
}
.home-hero-inner {
  padding-right: clamp(0.5rem, 2vw, 2rem);
}
@media (max-width: 900px) {
  .home-hero-form-card { max-width: 100% !important; }
}

/* --- Fix 4: Dark body text site-wide --- */
main, main p, main li,
main h1, main h2, main h3, main h4, main h5, main h6,
.product-description, .product-section p, .product-section li,
.product-section h1, .product-section h2, .product-section h3,
.feature-description, .product-card p, .product-card li,
.product-card h2, .product-card h3,
.home-hero-form-title, .home-hero-form-sub,
.how-we-do-it-title, .expect-card-title, .expect-card-desc {
  color: var(--ink, #1A1A1A) !important;
}
main p, main li,
.product-description, .product-section p,
.product-section-text .intro,
.product-section-text .feature-list li,
.feature-description, .expect-card-desc {
  color: var(--ink-soft, #2D2D2D) !important;
}
.eyebrow, .section-eyebrow {
  color: var(--accent-warm, #C9A961) !important;
}
.btn, .btn-primary {
  color: var(--ink, #1A1A1A) !important;
  background: var(--accent-warm, #C9A961) !important;
}
.btn-primary:hover, .btn:hover {
  background: var(--accent-warm-hi, #E0C485) !important;
}
.top-bar, .top-bar *,
.sticky-product-nav, .sticky-product-nav *,
footer, footer *, .site-footer, .site-footer * {
  color: #FFFFFF !important;
}
.sticky-product-nav a:hover,
.sticky-product-nav a.is-active,
.sticky-nav-chips a:hover,
.sticky-nav-chips a.is-active {
  color: var(--accent-warm, #C9A961) !important;
}
footer a:hover, .site-footer a:hover,
.top-bar a:hover {
  color: var(--accent-warm, #C9A961) !important;
}

/* --- Fix 5B: Product image 30% bigger --- */
.product-section-figure img,
.product-section-image-link img {
  width: 100%;
  height: auto;
  max-height: 715px;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .product-section-figure img,
  .product-section-image-link img { max-height: none; }
}

/* --- Fix 5C: Luxury gold border on home product cards --- */
.product-section {
  position: relative;
  padding: 2.5rem;
  border: 1.5px solid var(--accent-warm, #C9A961);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 32px -12px rgba(201, 169, 97, 0.18);
  min-height: 0;
}
.product-section-image-link {
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 6px;
  overflow: hidden;
  display: block;
}

/* --- Fix 5D: Tightened gap between product sections --- */
.product-section + .product-section,
section[data-product] + section[data-product] {
  margin-top: calc(1.25rem + 60px) !important;   /* v2: +60px additional gap between adjacent product sections */
}
/* v2: +60px additional gap between How We Do It and the first product section on the home page */
.how-we-do-it + main .product-section:first-of-type,
.how-we-do-it + main section[data-product]:first-of-type {
  margin-top: 60px !important;
}
main { padding: 0; }
main > section.product-section ~ section:not(.product-section) { padding-block: var(--section-y); }

/* --- Fix 5E: Tightened gap below how-we-do-it --- */
.how-we-do-it {
  padding-bottom: 1.5rem !important;
}

/* --- Fix 6: Luxury border on expect-cards (home + book) --- */
.expect-card {
  border: 1.5px solid var(--accent-warm, #C9A961) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px -12px rgba(201, 169, 97, 0.18) !important;
}
.expect-card:hover {
  border-color: var(--accent-warm-hi, #E0C485) !important;
  box-shadow: 0 12px 40px -14px rgba(201, 169, 97, 0.30) !important;
}

/* --- Fix 7A: Bigger product detail spotlight image --- */
.product-hero-figure img,
.product-hero-image,
.product-detail-hero img {
  width: 100%;
  max-height: 720px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--accent-warm, #C9A961);
  box-shadow: 0 16px 48px -20px rgba(0, 0, 0, 0.3);
}

/* --- Fix 8B: /book/ page hero-to-cards gap tightened --- */
.book-page-hero {
  padding-bottom: 1.5rem !important;
  margin-bottom: 0 !important;
}
.book-page-hero + .expect-cards-wrap,
.book-page-hero + .how-we-do-it {
  padding-top: 0.5rem !important;
  margin-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
   35. 3-FIX PASS — form flush right + scoped product CSS
   ═══════════════════════════════════════════════════════════════ */

/* --- Fix 2: home hero form nearly flush right --- */
.home-hero-inner {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 3rem 0.75rem 3rem 0 !important;
}
.home-hero-form-card {
  border-radius: 8px 0 0 8px !important;
  margin-right: 40px !important;
}
@media (max-width: 900px) {
  .home-hero-inner {
    justify-content: center !important;
    padding: 2rem 1rem !important;
  }
  .home-hero-form-card {
    max-width: 100% !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
  }
}

/* --- Fix 3C: Replace blanket text rule with scoped, context-aware version ---
   The aggressive 21-fix !important rules forced dark text everywhere,
   which broke product-page dark sections (.section-dark, .cta-strip).
   We KEEP dark text on light backgrounds (home page, .section-light)
   but allow white text on dark surfaces.
*/

/* Home page + light sections: dark text */
body.page-home main, body.page-home main p, body.page-home main li,
body.page-home main h1, body.page-home main h2, body.page-home main h3,
.section-light h1, .section-light h2, .section-light h3,
.section-light p, .section-light li,
.product-description, .product-section-text .intro,
.feature-card p, .feature-card h3 {
  color: var(--ink, #1A1A1A) !important;
}
body.page-home main p, body.page-home main li,
.section-light p, .section-light li {
  color: var(--ink-soft, #2D2D2D) !important;
}

/* Product detail pages dark sections (.section-dark, .cta-strip):
   text stays WHITE. */
.section-dark, .section-dark p, .section-dark li,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4,
.section-dark strong,
.cta-strip, .cta-strip p, .cta-strip h2,
.section-dark .faq-trigger, .section-dark .faq-answer,
.section-dark .included-list li, .section-dark .included-list strong {
  color: #FFFFFF !important;
  text-shadow: none !important;
}
.section-dark .eyebrow, .cta-strip .eyebrow {
  color: var(--accent-warm, #C9A961) !important;
}

/* Product detail hero text (over gradient) stays light */
.product-hero h1, .product-hero p, .product-hero .intro,
.product-hero .body, .product-hero .spec-list dt, .product-hero .spec-list dd,
.product-hero-text h1, .product-hero-text p,
.product-hero-text .feature-list li {
  color: #FFFFFF !important;
}
.product-hero .eyebrow,
.product-hero .spec-list dt {
  color: var(--accent-warm, #C9A961) !important;
}

/* Top-bar / sticky-nav / footer still white */
.top-bar, .top-bar *,
.sticky-product-nav, .sticky-product-nav *,
footer, footer *, .site-footer, .site-footer * {
  color: #FFFFFF !important;
}
.sticky-nav-chips a:hover, .sticky-nav-chips a.is-active,
.top-bar a:hover, footer a:hover, .site-footer a:hover {
  color: var(--accent-warm, #C9A961) !important;
}

/* --- Fix 3E: Product detail pages breathing room from sticky nav --- */
main { padding-top: 1.5rem; }
body.page-home main { padding-top: 0; }

/* --- Fix 3G: Luxury border scoped to home page only ---
   Cancel the inherited luxury border on product detail page sections.
*/
body:not(.page-home) .product-section,
body:not(.page-home) section.product-section {
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: var(--section-y, 4rem) 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
body.page-home .product-section {
  border: 1.5px solid var(--accent-warm, #C9A961);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 32px -12px rgba(201, 169, 97, 0.18);
}

/* Spotlight image 720px still enforced */
.product-hero-figure img,
.product-hero-image,
.product-detail-hero img {
  max-height: 720px;
}
/* === RESTORATION PASS === */
/* Cancel home-only luxury card styling on product pages */
body.product-page .product-section,
body.product-page section.product-section {
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: clamp(4.5rem, 9vw, 8rem) 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
body.product-page main { padding-top: 1.5rem; }
body.product-page .how-we-do-it,
body.product-page .home-hero,
body.product-page .home-hero-form-card { display: none !important; }

/* Home form sits 40px from the right viewport edge */
body.page-home .home-hero-form-card {
  margin-right: 40px !important;
  border-radius: 8px !important;
}
body.page-home .home-hero-inner {
  padding-right: 40px !important;
}
@media (max-width: 900px) {
  body.page-home .home-hero-form-card { margin-right: 0 !important; }
  body.page-home .home-hero-inner { padding-right: 1rem !important; }
}

/* Restoration: scope blanket dark-text rule to home only */
body.product-page main p,
body.product-page main li,
body.product-page main h1,
body.product-page main h2,
body.product-page main h3,
body.product-page main h4 {
  color: revert !important;
}
/* ═══════════════════════════════════════════════════════════
   PRODUCT PAGE TEXT CONTRAST FIX — surgical override
   Appended at end so it wins specificity.
   ═══════════════════════════════════════════════════════════ */

/* All product pages: default dark text on light paint-blob bg */
body.product-page,
body[class*="product"],
main:has(.product-detail-hero),
.product-detail,
.product-detail * {
  color: #1A1A1A;
}

/* Product hero headlines */
.product-detail h1,
.product-detail-hero h1,
.product-hero h1,
.product-hero-title,
body.product-page main h1,
body.product-page main h2 {
  color: #1A1A1A !important;
}

/* Product hero body description */
.product-detail-hero p,
.product-hero p,
.product-detail .product-description,
body.product-page main p,
body.product-page main li {
  color: #2D2D2D !important;
}

/* Spec labels / values (STYLES / LIGHT MODES / etc.) */
.product-spec-label, .product-spec-value,
.product-specs dt, .product-specs dd,
.product-detail dl, .product-detail dl *,
body.product-page main dt,
body.product-page main dd {
  color: #1A1A1A !important;
}
.product-spec-label,
.product-specs dt,
body.product-page main dt {
  color: #C9A961 !important;
}

/* Eyebrows always gold */
.eyebrow, .section-eyebrow,
.product-detail .eyebrow,
body.product-page .eyebrow {
  color: #C9A961 !important;
}

/* DARK SECTIONS on product pages — white text */
.section-dark, .section-dark *,
.whats-included, .whats-included *,
.common-questions, .common-questions *,
section.dark, section.dark *,
section[data-bg="dark"], section[data-bg="dark"] *,
section[style*="background: #1A1A1A"],
section[style*="background: #1A1A1A"] *,
section[style*="background:#1A1A1A"],
section[style*="background:#1A1A1A"] *,
section[style*="background-color: #1A1A1A"],
section[style*="background-color: #1A1A1A"] *,
.product-detail .dark-section,
.product-detail .dark-section * {
  color: #FFFFFF !important;
}

.section-dark .eyebrow,
.whats-included .eyebrow,
.common-questions .eyebrow,
section.dark .eyebrow,
section[data-bg="dark"] .eyebrow {
  color: #C9A961 !important;
}

.section-dark .feature-num,
.dark-section .feature-num,
section[data-bg="dark"] .feature-num,
.whats-included .feature-num {
  color: #C9A961 !important;
}

/* FAQ on dark bg — white text */
.section-dark .faq-trigger, .section-dark .faq-answer,
.common-questions h2, .common-questions h3,
.common-questions summary, .common-questions p,
.section-dark .faq-item, .section-dark .faq-item *,
details summary, details p {
  color: #FFFFFF !important;
}

/* Product detail hero gradient sections (.product-hero) — white over gradient */
.product-hero h1, .product-hero h2, .product-hero p, .product-hero li,
.product-hero .intro, .product-hero .body,
.product-hero .spec-list dd,
.product-hero-text .feature-list li {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.product-hero .eyebrow,
.product-hero .spec-list dt {
  color: #C9A961 !important;
}

/* CTA buttons stay dark on gold */
.btn, .btn-primary, .product-detail .btn {
  color: #1A1A1A !important;
  background: #C9A961 !important;
}

/* Top-bar, sticky-nav, footer keep white */
.top-bar, .top-bar *,
.sticky-product-nav, .sticky-product-nav *,
footer, footer *, .site-footer, .site-footer * {
  color: #FFFFFF !important;
}
footer a:hover, .site-footer a:hover {
  color: #C9A961 !important;
}

/* ═══════════════════════════════════════════════════════════
   STICKY NAV CLEANUP — hide consultation chip + left logo on
   rolled-back product pages so they match the rest of the site
   ═══════════════════════════════════════════════════════════ */

.sticky-nav-chips a[href*="in-home-consultation"],
.sticky-nav-chips a[href*="consultation"],
.sticky-nav-chips li:has(a[href*="in-home-consultation"]),
.sticky-nav-chips li:has(a[href*="consultation"]) {
  display: none !important;
}

.sticky-nav-logo,
.sticky-product-nav .nav-logo,
.sticky-product-nav > a:first-child img {
  display: none !important;
}

.sticky-product-nav, .sticky-nav-chips, .sticky-nav-list {
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — MOBILE REPAIR
   Appended at end of file; later rules win the cascade.

   NOTE: Home page hides sticky-nav-chips at <768px and uses the
   .mobile-nav hamburger drawer instead (see earlier rule at line
   ~1674: ".sticky-nav-chips { display: none !important }"). The
   sticky-nav fixes here are scoped accordingly.
   ═══════════════════════════════════════════════════════════════ */

/* Touch behavior + horizontal-scroll prevention (global) */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
a, button, summary {
  -webkit-tap-highlight-color: rgba(201, 169, 97, 0.2);
}

/* Sticky nav (home page version, when shown ≥768px): safe-area + z-index */
.sticky-nav.sticky-product-nav {
  position: -webkit-sticky;
  z-index: 100;
  padding-top: max(0px, env(safe-area-inset-top));
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* Paint-blob: lower opacity on mobile, kill entirely for reduced-motion */
@media (max-width: 768px) {
  canvas.paint-bg, .paint-bg { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  canvas.paint-bg, .paint-bg { display: none !important; }
  html { background-color: var(--bg-canvas, #FAFAF7) !important; }
}

/* ─── HOME — LARGE MOBILE / SMALL TABLET (≤768px) ─────────────── */
@media (max-width: 768px) {
  /* Section padding: trim desktop bloat */
  .how-we-do-it { padding: 3rem 1rem; }
  .cta-strip { padding: 3rem 1rem; }
  .site-footer { padding-top: 3rem; padding-bottom: 1.5rem; }

  /* Footer 1-col (some upstream rules don't trigger until 720px) */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; max-width: 100%; }

  /* Product spotlight sections: stack image-on-top, content below */
  .product-section {
    min-height: auto;
    padding: 3rem 0;
  }
  .product-section-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .product-section-figure { order: 1; }
  .product-section-text { order: 2; }
  .product-section-figure img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
  }

  /* How We Do It: 2×2 grid on mobile (NOT 1 col) */
  .how-we-do-it-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* CTA strip buttons: keep side by side, trim padding */
  .cta-strip-actions {
    gap: 0.75rem;
    flex-wrap: nowrap;
  }
  .cta-strip-actions .btn,
  .cta-strip-actions .btn-primary,
  .cta-strip-actions .btn-ghost-light {
    padding: 0.875rem 1.25rem;
    font-size: 0.8rem;
  }
}

/* ─── HOME — PHONE (≤480px) ───────────────────────────────────── */
@media (max-width: 480px) {
  .how-we-do-it { padding: 2.5rem 1rem; }
  .cta-strip { padding: 2.5rem 1rem; }
  .site-footer { padding-top: 2.5rem; }

  /* Footer phone gap tighten */
  .footer-grid { gap: 1.5rem; }

  /* How We Do It: 1 col at phone widths */
  .how-we-do-it-grid { grid-template-columns: 1fr !important; }

  /* CTA strip buttons: stack full-width for thumb tap */
  .cta-strip-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: 0.75rem;
  }
  .cta-strip-actions .btn,
  .cta-strip-actions .btn-primary,
  .cta-strip-actions .btn-ghost-light {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.8rem;
  }

  /* Reduce product spotlight padding to maximize phone screen width */
  .product-section { padding: 2rem 0; }
  .product-section-inner { padding: 0 1rem; }

  /* Eyebrow min readable */
  .eyebrow { font-size: 0.7rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — FOOTER + READY WHEN YOU ARE → PAINT-BLOB
   Scoped to body.page-home only. Wins over earlier dark-bg rules
   (some !important) via specificity + cascade order. Other pages
   that load styles.css (/book/, /faq/, /privacy/, /terms/) use
   plain <body> and KEEP their existing dark footer.
   ═══════════════════════════════════════════════════════════════ */

/* Home footer: paint-blob (transparent) + dark text */
body.page-home .site-footer,
body.page-home footer.site-footer {
  background: transparent !important;
  color: var(--ink, #1A1A1A) !important;
  border-top: 1px solid rgba(26, 26, 26, 0.12) !important;
}
body.page-home .site-footer h2,
body.page-home .site-footer h3,
body.page-home .site-footer p,
body.page-home .site-footer a,
body.page-home .site-footer li {
  color: var(--ink, #1A1A1A) !important;
  text-shadow: none !important;
}
/* Gold eyebrow stays gold */
body.page-home .site-footer .footer-col h4 {
  color: var(--accent-warm, #C9A961) !important;
}
/* Muted body / link tone on light bg */
body.page-home .site-footer .footer-brand p,
body.page-home .site-footer .footer-meta,
body.page-home .site-footer .footer-col a {
  color: rgba(26, 26, 26, 0.72) !important;
}
body.page-home .site-footer .footer-col a:hover {
  color: var(--accent-warm, #C9A961) !important;
}
body.page-home .site-footer .footer-bottom {
  border-top: 1px solid rgba(26, 26, 26, 0.12) !important;
}
body.page-home .site-footer .footer-bottom p,
body.page-home .site-footer .footer-bottom a {
  color: rgba(26, 26, 26, 0.55) !important;
}
body.page-home .site-footer .footer-bottom a:hover {
  color: var(--accent-warm, #C9A961) !important;
}

/* Home Ready When You Are: paint-blob + dark text. Gold eyebrow stays. */
body.page-home .cta-strip {
  background: transparent !important;
  color: var(--ink, #1A1A1A) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
body.page-home .cta-strip h2,
body.page-home .cta-strip p,
body.page-home .cta-strip .display {
  color: var(--ink, #1A1A1A) !important;
  text-shadow: none !important;
}
body.page-home .cta-strip .eyebrow {
  color: var(--accent-warm, #C9A961) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — MOBILE NAV FIX
   Restores the horizontally-scrolling chip row on mobile. A prior
   rule at line ~1674 set `.sticky-nav-chips { display: none
   !important }` at <=768px in favor of the .top-bar hamburger
   drawer. The hamburger lives in a separate .top-bar element and
   can coexist with the chip row, so we un-hide the chips here.
   Scoped to body.page-home so the override is home-only; product
   pages already render the chip row correctly via product-page.css.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.page-home .sticky-nav-chips,
  body.page-home .sticky-nav-list,
  body.page-home .sticky-product-nav .sticky-nav-chips,
  body.page-home .sticky-product-nav .sticky-nav-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: clamp(1rem, 3vw, 1.75rem) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-snap-type: x mandatory;
    padding: 0 1rem !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
  body.page-home .sticky-nav-chips::-webkit-scrollbar,
  body.page-home .sticky-nav-list::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  body.page-home .sticky-nav-chips li,
  body.page-home .sticky-nav-list li {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    list-style: none !important;
  }
  body.page-home .sticky-nav-chips a,
  body.page-home .sticky-nav-chips .sticky-nav-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.5rem 0;
    font-size: clamp(0.7rem, 2.4vw, 0.8rem);
    letter-spacing: 0.1em;
  }
  body.page-home .sticky-nav-chips a.is-active,
  body.page-home .sticky-nav-chips a[aria-current="page"],
  body.page-home .sticky-nav-chips .sticky-nav-item.is-active {
    scroll-margin-inline-start: 1rem;
  }
  /* Sticky-nav container itself: ensure it's a flex row with the
     chip row stretching across full mobile width. */
  body.page-home .sticky-product-nav {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE SCROLL FIX — iOS scroll snap-back repair
   The prior MOBILE REPAIR run added `html, body { overflow-x: hidden;
   max-width: 100vw }`. The `max-width: 100vw` constraint fights iOS
   Safari's rubber-band momentum scroll and causes the page to snap
   back to the top mid-scroll. We:
   - drop max-width: 100vw entirely
   - prefer `overflow-x: clip` (iOS 16+, doesn't break scroll context)
   - fall back to `overflow-x: hidden` on older iOS via @supports
   Same selector specificity as earlier rules; later cascade order wins.
   ═══════════════════════════════════════════════════════════════ */
html {
  overflow-x: clip;
  max-width: none;
}
body {
  overflow-x: clip;
  max-width: none;
}
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; max-width: none; }
  body { overflow-x: hidden; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV FIX — defensive reinforcement
   Belt-and-suspenders for the home page chip row at <=768px:
   explicit color, visibility, and opacity so the chips are
   guaranteed visible even if a downstream rule weakens them.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.page-home .sticky-product-nav .sticky-nav-chips a,
  body.page-home .sticky-product-nav .sticky-nav-list a,
  body.page-home .sticky-product-nav .sticky-nav-item {
    color: #FFFFFF !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-shadow: none !important;
    display: inline-flex !important;
  }
  body.page-home .sticky-product-nav .sticky-nav-chips a.is-active,
  body.page-home .sticky-product-nav .sticky-nav-chips a[aria-current="page"],
  body.page-home .sticky-product-nav .sticky-nav-item.is-active {
    color: var(--accent-warm, #C9A961) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HOME — READY WHEN YOU ARE → DARK SECTIONAL
   Replaces the prior paint-blob (transparent + dark text) treatment
   with the same dark slate-950 + radial gradient pattern used on
   product-page.css .whats-included and .faq. Sectional (::before
   at z-index: -1, position: absolute) — NOT fixed. Scoped to
   body.page-home so product pages are unaffected.

   EXACT values replicated from product-page.css:475-490:
     background-color: #020617
     background-image: radial-gradient(circle 560px at 50% 200px,
                       #525252, transparent)
   ═══════════════════════════════════════════════════════════════ */
body.page-home .cta-strip {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: transparent !important;
  color: #FFFFFF !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
body.page-home .cta-strip::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background-color: #020617 !important;
  background-image: radial-gradient(circle 560px at 50% 200px, #525252, transparent) !important;
  pointer-events: none !important;
}
body.page-home .cta-strip h2,
body.page-home .cta-strip p,
body.page-home .cta-strip .display {
  color: #FFFFFF !important;
  text-shadow: none !important;
}
body.page-home .cta-strip .eyebrow {
  color: var(--accent-warm, #C9A961) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOME — FOOTER CONTAINER ALIGNMENT
   Ensures all 4 footer columns (and the bottom copyright row) sit
   inside the same centered max-width container with consistent
   gutter padding. Defensive against tablet-tier breakpoints where
   .footer-brand spans full width without margin:auto and visually
   drifts left of the other columns.
   ═══════════════════════════════════════════════════════════════ */
body.page-home .site-footer .footer-grid,
body.page-home .site-footer .footer-bottom {
  max-width: var(--container, 1320px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter-x, clamp(1.5rem, 6vw, 6rem)) !important;
  padding-right: var(--gutter-x, clamp(1.5rem, 6vw, 6rem)) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
body.page-home .site-footer .footer-brand {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   BOOKING PAGE — FOOTER → PAINT-BLOB (match home page treatment)
   The booking page now carries body.page-book. Rules mirror the
   body.page-home footer overrides so /book/ renders a paint-blob
   footer with dark text + gold eyebrows + centered container, just
   like the home page. Product page footers and other static pages
   (/faq/, /privacy/, /terms/) are untouched — they keep the
   unscoped dark footer styling.
   ═══════════════════════════════════════════════════════════════ */
body.page-book .site-footer,
body.page-book footer.site-footer {
  background: transparent !important;
  color: var(--ink, #1A1A1A) !important;
  border-top: 1px solid rgba(26, 26, 26, 0.12) !important;
}
body.page-book .site-footer h2,
body.page-book .site-footer h3,
body.page-book .site-footer p,
body.page-book .site-footer a,
body.page-book .site-footer li {
  color: var(--ink, #1A1A1A) !important;
  text-shadow: none !important;
}
body.page-book .site-footer .footer-col h4 {
  color: var(--accent-warm, #C9A961) !important;
}
body.page-book .site-footer .footer-brand p,
body.page-book .site-footer .footer-meta,
body.page-book .site-footer .footer-col a {
  color: rgba(26, 26, 26, 0.72) !important;
}
body.page-book .site-footer .footer-col a:hover {
  color: var(--accent-warm, #C9A961) !important;
}
body.page-book .site-footer .footer-bottom {
  border-top: 1px solid rgba(26, 26, 26, 0.12) !important;
}
body.page-book .site-footer .footer-bottom p,
body.page-book .site-footer .footer-bottom a {
  color: rgba(26, 26, 26, 0.55) !important;
}
body.page-book .site-footer .footer-bottom a:hover {
  color: var(--accent-warm, #C9A961) !important;
}

/* Container alignment — match home page so paragraph isn't flush left */
body.page-book .site-footer .footer-grid,
body.page-book .site-footer .footer-bottom {
  max-width: var(--container, 1320px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter-x, clamp(1.5rem, 6vw, 6rem)) !important;
  padding-right: var(--gutter-x, clamp(1.5rem, 6vw, 6rem)) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
body.page-book .site-footer .footer-brand {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE — MOBILE LOGO FIX v3 (definitive)

   Two prior attempts (margin-top: -56px → -48px pull-up) did not
   produce the desired visual result. The .top-bar above the logo
   band still consumes 56px of vertical chrome, and the prior
   negative-margin approach allowed the logo image to overlap that
   chrome but did not eliminate the underlying chrome height.

   Strategy (per spec template):
   1. Hide .top-bar entirely on mobile home page. Sticky chip nav
      below the logo serves as primary mobile navigation; the
      phone number is still reachable via the footer Get in Touch.
   2. Zero out any incidental padding/margin on body and main.
   3. Set .site-logo-band padding-top to a deterministic 50px for
      a known gap from viewport top to logo image top.
   4. Force the logo image to be display:block with margin:0 auto
      and width:auto for guaranteed horizontal centering.

   Every declaration carries !important because this is the third
   attempt — we are deliberately winning the cascade by force.
   Every selector starts with body.page-home so booking, faq,
   privacy, terms, 404, and product pages are unaffected.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.page-home .top-bar {
    display: none !important;
  }
  body.page-home {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  body.page-home main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  body.page-home .site-logo-band {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  body.page-home .site-logo-band img,
  body.page-home .site-logo-band .site-logo {
    display: block !important;
    margin: 0 auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 240px !important;
    padding: 0 !important;
  }
}
@media (max-width: 480px) {
  body.page-home .site-logo-band {
    padding-top: 8px !important;
  }
  body.page-home .site-logo-band img,
  body.page-home .site-logo-band .site-logo {
    max-width: 200px !important;
  }
}

/* ============================================== */
/* LOGO TOP FIX — APPEND-AT-END BRUTE FORCE       */
/* Mobile home page only. Forces logo to top.     */
/* ============================================== */

@media (max-width: 768px) {
  html body.page-home,
  html body.page-home main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Hide EVERYTHING that could be above the logo on mobile home page */
  html body.page-home > .top-bar,
  html body.page-home > div.top-bar,
  html body.page-home .top-bar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  /* Skip link should not consume space when not focused */
  html body.page-home > a.skip-link,
  html body.page-home a.skip-link {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }

  /* The logo band itself — no top space at all */
  html body.page-home .site-logo-band,
  html body.page-home > .site-logo-band,
  html body.page-home div.site-logo-band {
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }

  html body.page-home .site-logo-band img,
  html body.page-home .site-logo-band > img {
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 240px !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    position: static !important;
  }
}

@media (max-width: 480px) {
  html body.page-home .site-logo-band {
    padding-top: 6px !important;
  }

  html body.page-home .site-logo-band img {
    max-width: 200px !important;
  }
}

/* ============================================== */
/* END LOGO TOP FIX                               */
/* ============================================== */

/* ═══════════════════════════════════════════════════════════════
   STICKY NAV — ACTIVE STATE FIX

   Rule: HOME chip is NEVER gold. On the home page, NO chip is gold
   (the JS scroll-spy in app.js toggles .is-active as the user
   scrolls past product sections, but we override it visually so
   no chip shows the gold active treatment on /).

   Existing CSS at lines 1620, 1977-81 colors .is-active and
   [aria-current="page"] chips gold. This block sits AFTER those
   rules in the cascade and uses higher specificity + !important
   to win.
   ═══════════════════════════════════════════════════════════════ */

/* 1. HOME chip (href="/" or data-target="home") is never gold,
      regardless of page. Belt-and-suspenders override. */
.sticky-product-nav a[href="/"],
.sticky-product-nav a[href="/"].is-active,
.sticky-product-nav a[href="/"][aria-current="page"],
.sticky-nav-chips a[href="/"],
.sticky-nav-chips a[href="/"].is-active,
.sticky-nav-chips a[href="/"][aria-current="page"],
.sticky-nav-chips a[data-target="home"],
.sticky-nav-chips a[data-target="home"].is-active,
.sticky-nav-chips a[data-target="home"][aria-current="page"] {
  color: #FFFFFF !important;
}
.sticky-nav-chips a[href="/"]::after,
.sticky-nav-chips a[href="/"].is-active::after,
.sticky-nav-chips a[href="/"][aria-current="page"]::after,
.sticky-nav-chips a[data-target="home"]::after,
.sticky-nav-chips a[data-target="home"].is-active::after,
.sticky-nav-chips a[data-target="home"][aria-current="page"]::after {
  display: none !important;
  content: none !important;
}

/* 2. On the home page itself, suppress gold on EVERY chip even when
      app.js scroll-spy adds .is-active dynamically. /book/, /faq/,
      /privacy/, /terms/, /404 use plain <body> so they're unaffected;
      product pages don't load styles.css. */
body.page-home .sticky-product-nav a,
body.page-home .sticky-product-nav a.is-active,
body.page-home .sticky-product-nav a[aria-current="page"],
body.page-home .sticky-nav-chips a,
body.page-home .sticky-nav-chips a.is-active,
body.page-home .sticky-nav-chips a[aria-current="page"],
body.page-home .sticky-nav-chips .sticky-nav-item,
body.page-home .sticky-nav-chips .sticky-nav-item.is-active,
body.page-home .sticky-nav-chips .sticky-nav-item[aria-current="page"] {
  color: #FFFFFF !important;
}
body.page-home .sticky-nav-chips a::after,
body.page-home .sticky-nav-chips a.is-active::after,
body.page-home .sticky-nav-chips a[aria-current="page"]::after,
body.page-home .sticky-nav-chips .sticky-nav-item.is-active::after,
body.page-home .sticky-nav-chips .sticky-nav-item[aria-current="page"]::after {
  display: none !important;
  content: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   STICKY NAV — id-scoped reinforcement
   The home page nav carries id="sticky-nav". Using that id in the
   selector forces highest practical specificity so the JS-added
   .is-active class on a chip (added dynamically by app.js scroll-
   spy) cannot color any chip gold on body.page-home.
   ═══════════════════════════════════════════════════════════════ */
body.page-home nav#sticky-nav a,
body.page-home nav#sticky-nav a.is-active,
body.page-home nav#sticky-nav a[aria-current="page"],
body.page-home nav#sticky-nav .sticky-nav-item,
body.page-home nav#sticky-nav .sticky-nav-item.is-active,
body.page-home nav#sticky-nav .sticky-nav-item[aria-current="page"] {
  color: #FFFFFF !important;
}
body.page-home nav#sticky-nav a::after,
body.page-home nav#sticky-nav a.is-active::after,
body.page-home nav#sticky-nav a[aria-current="page"]::after,
body.page-home nav#sticky-nav .sticky-nav-item.is-active::after,
body.page-home nav#sticky-nav .sticky-nav-item[aria-current="page"]::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* ============================================== */
/* MOBILE HERO FORM HIDE + MOBILE-ONLY CTA        */
/* ============================================== */

/* Default-hide the mobile CTA on all viewports / all pages */
.mobile-only-cta {
  display: none;
}

@media (max-width: 768px) {
  /* Hide the hero "Book Your Free Consultation" form-card on mobile.
     The .home-hero-bg sibling stays so the background image still shows. */
  body.page-home .home-hero-form-card,
  body.page-home .home-hero .home-hero-inner {
    display: none !important;
  }

  /* Show the mobile-only CTA below How We Do It */
  body.page-home .mobile-only-cta {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 1.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    box-sizing: border-box !important;
  }

  /* Style the mobile CTA button — gold-filled, full-width */
  body.page-home .mobile-only-cta .mobile-cta-button {
    display: inline-block !important;
    background-color: #C9A961 !important;
    color: #1A1A1A !important;
    padding: 1rem 2rem !important;
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: center !important;
    border: 1.5px solid #C9A961 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 4px 14px rgba(201, 169, 97, 0.30) !important;
    transition: background-color 200ms ease, box-shadow 200ms ease !important;
  }
  body.page-home .mobile-only-cta .mobile-cta-button:hover,
  body.page-home .mobile-only-cta .mobile-cta-button:active {
    background-color: #E0C485 !important;
    border-color: #E0C485 !important;
    color: #1A1A1A !important;
    box-shadow: 0 6px 18px rgba(201, 169, 97, 0.42) !important;
  }
}
/* ============================================== */
/* END MOBILE HERO FORM HIDE + MOBILE-ONLY CTA    */
/* ============================================== */

/* ============================================== */
/* HOME — MOBILE HERO IMAGE: SHOW FULL IMAGE      */
/* The base rule uses object-fit: cover which     */
/* crops on mobile. Switch to contain on <=768px  */
/* so the entire shot is visible. Relax the       */
/* container's min-height and let the image's     */
/* natural aspect ratio drive section height.     */
/* ============================================== */
@media (max-width: 768px) {
  body.page-home section.home-hero,
  body.page-home .home-hero {
    min-height: auto !important;
    height: auto !important;
  }
  body.page-home .home-hero-bg {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
  }
  body.page-home .home-hero-img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
  }
}

/* ============================================== */
/* BOOKING PAGE — MOBILE NAV CHIPS + LOGO SPACING */
/* Mirror of the home page mobile fixes, scoped    */
/* to body.page-book so booking page mobile gets   */
/* the same chrome treatment.                      */
/* ============================================== */
@media (max-width: 768px) {
  /* Un-hide the sticky chip row on booking page mobile
     (base rule at line 1674 hides .sticky-nav-chips for all
     non-page-home pages — we override here for body.page-book). */
  body.page-book .sticky-nav-chips,
  body.page-book .sticky-nav-list,
  body.page-book .sticky-product-nav .sticky-nav-chips,
  body.page-book .sticky-product-nav .sticky-nav-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: clamp(1rem, 3vw, 1.75rem) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-snap-type: x mandatory;
    padding: 0 1rem !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
  body.page-book .sticky-nav-chips::-webkit-scrollbar,
  body.page-book .sticky-nav-list::-webkit-scrollbar {
    display: none !important;
  }
  body.page-book .sticky-nav-chips li,
  body.page-book .sticky-nav-list li {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    list-style: none !important;
  }
  body.page-book .sticky-nav-chips a,
  body.page-book .sticky-nav-chips .sticky-nav-item {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 0.5rem 0 !important;
    font-size: clamp(0.7rem, 2.4vw, 0.8rem) !important;
    letter-spacing: 0.12em !important;
    color: #FFFFFF !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.page-book .sticky-product-nav {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  /* Hide top-bar on booking page mobile and tighten logo spacing
     to match home page mobile. */
  body.page-book .top-bar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
  body.page-book .site-logo-band {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.page-book .site-logo-band img,
  body.page-book .site-logo-band .site-logo {
    display: block !important;
    margin: 0 auto !important;
    max-width: 240px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  body.page-book .site-logo-band {
    padding-top: 8px !important;
  }
  body.page-book .site-logo-band img,
  body.page-book .site-logo-band .site-logo {
    max-width: 200px !important;
  }
}
/* ============================================== */
/* END BOOKING PAGE MOBILE FIXES                  */
/* ============================================== */

/* ============================================== */
/* MOBILE-ONLY HERO IMAGE WATERMARK CROP          */
/* Hides bottom 50px of nano-banana watermark on  */
/* the home hero <img>. clip-path masks the       */
/* rendered output without modifying the file.    */
/* margin-bottom: -50px pulls subsequent content  */
/* up so no empty gap remains where the cropped   */
/* pixels used to sit. Desktop untouched.         */
/* ============================================== */
@media (max-width: 768px) {
  body.page-home .home-hero-img {
    clip-path: inset(0 0 50px 0) !important;
    -webkit-clip-path: inset(0 0 50px 0) !important;
    margin-bottom: -50px !important;
  }
}
/* ============================================== */
/* END WATERMARK CROP                             */
/* ============================================== */

/* ============================================== */
/* BADGE TRIO — STYLE C GLASS-MORPHISM SHIMMER    */
/* ============================================== */
body.page-home .badge-trio {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.25rem !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 1.5rem auto !important;
  padding: 0 2rem !important;
  flex-wrap: wrap !important;
}

body.page-home .badge-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0.85rem 1.7rem !important;
  background-color: rgba(201,169,97,0.95) !important;
  color: #1A1A1A !important;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(140, 118, 65, 0.6) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transform: translateX(150px);
  opacity: 0;
  animation-fill-mode: forwards !important;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  animation-duration: 700ms !important;
  cursor: default !important;
  user-select: none !important;
}

body.page-home .badge-button::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%) !important;
  background-size: 200% 100% !important;
  background-position: -200% 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: shimmer-sweep 4s ease-in-out infinite !important;
}

body.page-home .badge-button svg,
body.page-home .badge-button span {
  position: relative !important;
  z-index: 2 !important;
}

body.page-home .badge-1 { animation-name: badge-slide-in !important; animation-delay: 200ms !important; }
body.page-home .badge-1::before { animation-delay: 1.5s !important; }
body.page-home .badge-2 { animation-name: badge-slide-in !important; animation-delay: 500ms !important; }
body.page-home .badge-2::before { animation-delay: 2.5s !important; }
body.page-home .badge-3 { animation-name: badge-slide-in !important; animation-delay: 800ms !important; }
body.page-home .badge-3::before { animation-delay: 3.5s !important; }

@keyframes badge-slide-in {
  0% { transform: translateX(150px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes shimmer-sweep {
  0% { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}

@media (max-width: 768px) {
  body.page-home .badge-trio {
    gap: 0.5rem !important;
    margin: 1rem auto !important;
    padding: 0 0.75rem !important;
  }
  body.page-home .badge-button {
    padding: 0.5rem 0.9rem !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
    gap: 6px !important;
  }
  body.page-home .badge-button svg {
    width: 12px !important;
    height: 12px !important;
  }
}

@media (max-width: 480px) {
  body.page-home .badge-trio {
    gap: 0.3rem !important;
    padding: 0 0.5rem !important;
  }
  body.page-home .badge-button {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.1em !important;
    gap: 4px !important;
  }
  body.page-home .badge-button svg {
    width: 10px !important;
    height: 10px !important;
  }
}
/* END BADGE TRIO ================================= */

/* ============================================== */
/* NOBODY BEATS MESSAGE                           */
/* ============================================== */

/* ============================================== */
/* PROMISE STRIP — Direction A Editorial          */
/* Transparent background, blends into paint-blob */
/* ============================================== */
.promise-strip {
  width: 100% !important;
  padding: 4rem 1.5rem !important;
  background: transparent !important;
  text-align: center !important;
}

.promise-strip-inner {
  max-width: 760px !important;
  margin: 0 auto !important;
  position: relative !important;
}

.promise-rule {
  width: 80% !important;
  max-width: 600px !important;
  height: 1px !important;
  background: #C9A961 !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  animation: promise-rule-fade 800ms ease-out forwards !important;
}

.promise-rule-top {
  margin-bottom: 1.75rem !important;
  animation-delay: 100ms !important;
}

.promise-rule-bottom {
  margin-top: 1.75rem !important;
  animation-delay: 1400ms !important;
}

.promise-eyebrow {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  letter-spacing: 0.4em !important;
  color: #C9A961 !important;
  text-transform: uppercase !important;
  margin-bottom: 1.5rem !important;
  opacity: 1 !important;
  animation: promise-fade-up 1000ms ease-out 400ms forwards !important;
}

.promise-headline {
  font-family: var(--serif, "Cormorant Garamond", Georgia, "Times New Roman", serif) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  line-height: 1.4 !important;
  color: #1A1A1A !important;
  font-weight: 400 !important;
  margin: 0 !important;
  letter-spacing: 0.005em !important;
  opacity: 1 !important;
  animation: promise-fade-up 1000ms ease-out 700ms forwards !important;
}

.promise-accent {
  color: #C9A961 !important;
  font-style: italic !important;
}

.promise-ornament-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-top: 1.25rem !important;
  opacity: 1 !important;
  animation: promise-fade-up 1000ms ease-out 1100ms forwards !important;
}

.promise-mini-line {
  width: 60px !important;
  height: 1px !important;
  background: #C9A961 !important;
  opacity: 0.5 !important;
}

.promise-glyph {
  color: #C9A961 !important;
  font-size: 14px !important;
  opacity: 0.7 !important;
}

@keyframes promise-fade-up {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes promise-rule-fade {
  0% { opacity: 0; transform: scaleX(0.6); }
  100% { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 768px) {
  .promise-strip {
    padding: 2.5rem 1rem !important;
  }
  .promise-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.3em !important;
    margin-bottom: 1rem !important;
  }
  .promise-headline {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important;
  }
  .promise-rule {
    width: 90% !important;
  }
  .promise-rule-top {
    margin-bottom: 1.25rem !important;
  }
  .promise-rule-bottom {
    margin-top: 1.25rem !important;
  }
  .promise-mini-line {
    width: 40px !important;
  }
}
/* END PROMISE STRIP =============================== */

/* ============================================== */
/* PROMISE STRIP — TYPEWRITER UPGRADE              */
/* ============================================== */
.promise-headline {
  font-family: var(--serif, "Cormorant Garamond", Georgia, "Times New Roman", serif) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  line-height: 1.3 !important;
  color: #1A1A1A !important;
  font-weight: 500 !important;
  margin: 0 !important;
  letter-spacing: 0.005em !important;
  opacity: 1 !important;
  min-height: 1.5em !important;
  text-align: center !important;
}

.promise-cursor {
  display: inline-block !important;
  color: #C9A961 !important;
  font-weight: 400 !important;
  animation: promise-cursor-blink 0.8s steps(2) infinite !important;
  margin-left: 0.05em !important;
}

@keyframes promise-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.promise-ornament-row,
.promise-rule-top,
.promise-rule-bottom {
  opacity: 0 !important;
  transition: opacity 1s ease-out !important;
}

.promise-strip.typewriter-complete .promise-ornament-row {
  opacity: 1 !important;
  transition-delay: 0.3s !important;
}

.promise-strip.typewriter-complete .promise-rule-top {
  opacity: 1 !important;
}

.promise-strip.typewriter-complete .promise-rule-bottom {
  opacity: 1 !important;
  transition-delay: 0.5s !important;
}

.promise-strip.typewriter-complete .promise-glyph {
  animation: promise-glyph-pulse 2.5s ease-in-out infinite !important;
}

@keyframes promise-glyph-pulse {
  0%, 100% {
    text-shadow: 0 0 0 rgba(201,169,97,0);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 12px rgba(201,169,97,0.8), 0 0 24px rgba(201,169,97,0.4);
    transform: scale(1.15);
  }
}

@media (max-width: 768px) {
  .promise-headline {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
}
/* END PROMISE STRIP TYPEWRITER ==================== */

/* ============================================== */
/* VIDEO DEMO SECTION (home page only)             */
/* ============================================== */
.video-demo {
  width: 100% !important;
  padding: 4rem 1.5rem !important;
  background: transparent !important;
  text-align: center !important;
}

.video-demo-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.video-demo-eyebrow {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  letter-spacing: 0.4em !important;
  color: #C9A961 !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
}

.video-demo-heading {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  color: #1A1A1A !important;
  font-weight: 500 !important;
  margin: 0 0 2rem 0 !important;
  letter-spacing: 0.005em !important;
}

.video-player {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #0A0A0A !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
}

.vp-video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

.vp-play-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: none !important;
  color: #FAFAF7 !important;
  transition: opacity 400ms ease, background 300ms ease !important;
  z-index: 5 !important;
}

.vp-play-overlay:hover {
  background: rgba(0,0,0,0.55) !important;
}

.vp-play-overlay svg {
  width: 80px !important;
  height: 80px !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)) !important;
}

.vp-play-overlay.vp-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.vp-controls {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1rem !important;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  opacity: 0 !important;
  transition: opacity 300ms ease !important;
  z-index: 4 !important;
}

.video-player.vp-started:hover .vp-controls,
.video-player.vp-started .vp-controls:focus-within {
  opacity: 1 !important;
}

.vp-btn {
  background: transparent !important;
  border: none !important;
  color: #FAFAF7 !important;
  cursor: pointer !important;
  padding: 0.4rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  transition: background 200ms ease !important;
}

.vp-btn:hover {
  background: rgba(201,169,97,0.2) !important;
}

.vp-btn svg:not([style*="display:none"]):not([style*="display: none"]) {
  display: block !important;
}

.vp-progress-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.vp-progress-bar {
  position: relative !important;
  width: 100% !important;
  height: 4px !important;
  background: rgba(255,255,255,0.2) !important;
  border-radius: 2px !important;
  cursor: pointer !important;
}

.vp-progress-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 0 !important;
  background: #C9A961 !important;
  border-radius: 2px !important;
}

.vp-progress-handle {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 12px !important;
  height: 12px !important;
  background: #C9A961 !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

.vp-time {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #FAFAF7 !important;
  letter-spacing: 0.1em !important;
}

@media (max-width: 768px) {
  .video-demo {
    padding: 2.5rem 1rem !important;
  }
  .vp-controls {
    gap: 0.4rem !important;
    padding: 0.6rem !important;
  }
  .vp-btn {
    padding: 0.3rem !important;
  }
  .vp-time {
    font-size: 10px !important;
  }
  .vp-progress-handle {
    width: 10px !important;
    height: 10px !important;
  }
}
/* END VIDEO DEMO ================================== */

/* ============================================== */
/* VOLUME SLIDER POPUP                             */
/* ============================================== */
.vp-volume-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.vp-volume-slider-popup {
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-8px) !important;
  background: rgba(10,10,10,0.92) !important;
  padding: 0.75rem 0.5rem !important;
  border-radius: 6px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 200ms ease !important;
  z-index: 10 !important;
}

.vp-volume-wrap:hover .vp-volume-slider-popup,
.vp-volume-wrap:focus-within .vp-volume-slider-popup,
.vp-volume-slider-popup:hover {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.vp-volume-slider {
  -webkit-appearance: slider-vertical !important;
  appearance: slider-vertical !important;
  width: 8px !important;
  height: 80px !important;
  background: rgba(255,255,255,0.2) !important;
  cursor: pointer !important;
  writing-mode: vertical-lr !important;
  direction: rtl !important;
  accent-color: #C9A961 !important;
}

.vp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #C9A961 !important;
  cursor: pointer !important;
}

.vp-volume-slider::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #C9A961 !important;
  border: none !important;
  cursor: pointer !important;
}
/* END VOLUME SLIDER ============================== */

/* ============================================== */
/* HOME PAGE SPEC TABLE                            */
/* Matches product page spec table format          */
/* ============================================== */
body.page-home .home-spec-table {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 1.5rem 0 2rem !important;
  max-width: 460px !important;
  width: 100% !important;
}

body.page-home .home-spec-row {
  display: grid !important;
  grid-template-columns: 130px 1fr !important;
  gap: 1.5rem !important;
  padding: 0.875rem 0 !important;
  border-top: 1px solid rgba(201,169,97,0.3) !important;
  align-items: start !important;
}

body.page-home .home-spec-row:last-child {
  border-bottom: 1px solid rgba(201,169,97,0.3) !important;
}

body.page-home .home-spec-label {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  color: #C9A961 !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
}

body.page-home .home-spec-value {
  font-family: var(--sans, "DM Sans", "Inter Tight", sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #1A1A1A !important;
}

@media (max-width: 768px) {
  body.page-home .home-spec-row {
    grid-template-columns: 110px 1fr !important;
    gap: 1rem !important;
    padding: 0.75rem 0 !important;
  }
  body.page-home .home-spec-label {
    font-size: 10px !important;
  }
  body.page-home .home-spec-value {
    font-size: 13px !important;
  }
}
/* END HOME SPEC TABLE ============================ */

/* ============================================== */
/* HOME SPOTLIGHT MOBILE CENTERING                 */
/* Desktop untouched; scoped to body.page-home     */
/* ============================================== */
@media (max-width: 768px) {
  body.page-home .product-section-text {
    text-align: center !important;
  }

  body.page-home .product-section-text .eyebrow,
  body.page-home .product-section-text h2,
  body.page-home .product-section-text .display,
  body.page-home .product-section-text .intro,
  body.page-home .product-section-text p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-home .product-section-figure img,
  body.page-home .product-section-image-link img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-home .product-section-text .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.page-home .home-spec-table {
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.page-home .home-spec-row {
    text-align: left !important;
  }
}
/* END HOME SPOTLIGHT MOBILE CENTERING ============ */

/* ============================================== */
/* HOME SPOTLIGHT MOBILE CENTERING — SCORCHED EARTH */
/* Wrapper: section.product-section (all 6 spotlights) */
/* Forces center on ALL spotlight descendants, and    */
/* neutralizes the max-width left-offset on h2/.intro  */
/* (the actual root cause — a constrained block with   */
/* no auto margin sits left even with text-align center)*/
/* ============================================== */
@media (max-width: 768px) {

  /* Universal centering on ALL descendants of the spotlight wrapper */
  body.page-home .product-section,
  body.page-home .product-section *:not(.home-spec-row):not(.home-spec-label):not(.home-spec-value) {
    text-align: center !important;
  }

  /* Root-cause fix: center the constrained text blocks themselves.
     h2 has max-width:12ch and .intro has max-width:480px — without
     auto margins they hug the left edge. Reset width + auto-center. */
  body.page-home .product-section-text,
  body.page-home .product-section-text > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.page-home .product-section-text h2,
  body.page-home .product-section-text .display,
  body.page-home .product-section-text .intro {
    max-width: 100% !important;
  }

  /* Images centered as block elements */
  body.page-home .product-section img,
  body.page-home .product-section picture {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Buttons — flex center */
  body.page-home .product-section a.btn,
  body.page-home .product-section button,
  body.page-home .product-section [class*="button"],
  body.page-home .product-section [class*="cta"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Defensive explicit centering (placed last → wins specificity ties) */
  body.page-home .product-section h1,
  body.page-home .product-section h2,
  body.page-home .product-section h3,
  body.page-home .product-section h4,
  body.page-home .product-section p,
  body.page-home .product-section span,
  body.page-home .product-section .eyebrow,
  body.page-home .product-section .intro {
    text-align: center !important;
  }

  /* Spec table itself centered as a block */
  body.page-home .home-spec-table {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 92% !important;
  }

  /* Preserve spec table label-left / value-right (override universal + defensive) */
  body.page-home .home-spec-row,
  body.page-home .home-spec-row > *,
  body.page-home .home-spec-label,
  body.page-home .home-spec-value {
    text-align: left !important;
  }
}
/* END HOME SPOTLIGHT SCORCHED-EARTH CENTERING ===== */

/* ============================================== */
/* MOBILE-GRID-COLLAPSE                            */
/* Root cause: .product-section-inner stays a 2-col */
/* grid on mobile, pinning the text to the right    */
/* half. Force single-column stack at <=768px.      */
/* ============================================== */
@media (max-width: 768px) {
  body.page-home .product-section-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    align-items: center !important;
    justify-items: center !important;
  }

  body.page-home .product-section-figure {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-home .product-section-figure img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  body.page-home .product-section-text {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body.page-home .product-section-text h2,
  body.page-home .product-section-text h3,
  body.page-home .product-section-text .intro,
  body.page-home .product-section-text p {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}
/* END MOBILE-GRID-COLLAPSE ======================= */

/* ============================================================ */
/* FINAL-MOBILE-CENTER-FIX-2026-06-08                            */
/* Adds auto margins + center to .product-section-text h2/intro */
/* at mobile breakpoints. Targets the actual root cause: max-w   */
/* without auto margins pinning text to left edge.               */
/* ============================================================ */
@media (max-width: 1024px) {
  body.page-home .product-section-text {
    text-align: center !important;
  }
  body.page-home .product-section-text h2,
  body.page-home .product-section-text h3,
  body.page-home .product-section-text .intro,
  body.page-home .product-section-text p {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  body.page-home .product-section-text .eyebrow {
    justify-content: center !important;
  }
  body.page-home .product-section-text .feature-list {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 480px !important;
  }
  body.page-home .home-spec-table {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.page-home .home-spec-row {
    text-align: left !important;
  }
}
/* END FINAL-MOBILE-CENTER-FIX-2026-06-08 ==================== */

/* ============================================================ */
/* CENTER-IMAGES-FIX-2026-06-08                                 */
/* Centers the home spotlight image (figure + img + link) on    */
/* mobile. Bug: image hugged the right edge with a large left   */
/* margin. Force block-level + full-width + auto margins.       */
/* ============================================================ */
@media (max-width: 1024px) {
  body.page-home .product-section-figure {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.page-home .product-section-figure img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.page-home .product-section-image-link {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
}
/* END CENTER-IMAGES-FIX-2026-06-08 ========================== */

/* IMAGE-OVERFLOW-FIX-2026-06-08 */
@media (max-width: 1024px) {
  body.page-home .product-section-figure {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    height: auto !important;
    overflow: hidden !important;
  }
  body.page-home .product-section-figure img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  body.page-home .product-section-image-link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.page-home .product-section-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}
/* END IMAGE-OVERFLOW-FIX-2026-06-08 */

/* CENTER-VERIFIED-2026-06-08 */
/* Root cause (measured via WebKit DOM): the collapsed mobile grid uses    */
/* grid-template-columns: 1fr (= minmax(auto,1fr)). A wide spotlight image's */
/* automatic minimum size blows the single track wider than its container   */
/* (plantation track=317px, drapes=340px vs 278px container) so the figure  */
/* overflows right and looks off-center. Cap the track at minmax(0,1fr) and */
/* zero the grid items' automatic minimum so they can't exceed the track.   */
@media (max-width: 1024px) {
  body.page-home .product-section-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.page-home .product-section-figure,
  body.page-home .product-section-image-link,
  body.page-home .product-section-figure img {
    min-width: 0 !important;
  }
}
/* END CENTER-VERIFIED-2026-06-08 */

/* ===================================================================
   Client sale image (visual only, non-clickable). Homepage window-shades:
   to the right of the spec block, image TOP aligned to the gold rule above
   the STYLES row (positioned off the spec table's top). A right-lane is
   reserved so the specs never sit under the image.
   =================================================================== */
@media (min-width: 769px) {
  #window-shades .product-section-text { padding-right: 305px; }
}
#window-shades .home-spec-table { position: relative; }
#window-shades .sale-img {
  position: absolute;
  top: -25px; /* shift up so the visible navy box top (54/213 of the png) lands on the gold rule */
  left: calc(100% + 20px);
  width: 265px;
  height: auto;
  z-index: 5;
}
@media (max-width: 768px) {
  #window-shades .product-section-text { padding-right: 0; }
  #window-shades .sale-img {
    position: static;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(340px, 82%);
    height: auto;
    margin: 1.25rem auto 0;
    left: auto;
  }
}