/* ============================================================
   BRANDYWINE BLINDS — "CINEMA DAYLIGHT"
   Light, directed. (bright edition)
   Cabinet Grotesk (display) + General Sans (body)
   Warm paper · ink text · sun-amber · brandywine accents
   ============================================================ */

/* ============================================================
   FONTS — self-hosted, deliberately.

   These used to load from api.fontshare.com, which cost a DNS lookup, a TLS
   handshake and two serialised round trips to a third-party origin before a
   single character could paint: the CSS had to arrive before the browser even
   learned the font URLs, and those live on a *different* host again
   (cdn.fontshare.com), so that was a second connection. On a phone on mobile
   data that is most of a second of blank page.

   Now they are six woff2 files on our own origin, discovered from this
   stylesheet, which the browser is already fetching. The two faces used above
   the fold (Cabinet Grotesk 800 for the h1, General Sans 400 for body copy) are
   preloaded from the HTML so they start downloading in parallel with this file.

   font-display: swap — text paints immediately in the fallback and reflows when
   the webfont lands. A flash of the wrong font beats a blank hero.

   Licensing: Cabinet Grotesk and General Sans are by the Indian Type Foundry,
   distributed free for personal and commercial use via Fontshare, which
   includes self-hosting the web fonts. See site/fonts/NOTICE.txt.
   ============================================================ */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/fonts/cabinet-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/fonts/cabinet-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/fonts/cabinet-grotesk-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/fonts/general-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --paper: #faf6ee;
  --paper-2: #f2ebdc;
  --card: #ffffff;
  --ink: #241e14;
  --ink-2: #14110c;
  --ink-soft: #4c4335;
  --sun: #e9a83b;
  --sun-deep: #c98a1d;
  --wine: #6d2233;
  --cream-text: #f6f1e7;
  --muted: #857a66;            /* muted on paper */
  --muted-on-paper: #7a6f5c;
  --line: rgba(36, 30, 20, 0.13);
  --line-strong: rgba(36, 30, 20, 0.25);
  --font-d: "Cabinet Grotesk", "Arial Black", Impact, sans-serif;
  --font-b: "General Sans", "Segoe UI", system-ui, sans-serif;
  --radius: 20px;
  --header-h: 76px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-lg: 0 26px 60px rgba(52, 40, 20, 0.16);
  --shadow-sm: 0 10px 30px rgba(52, 40, 20, 0.1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-b);
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-d); line-height: 1.04; margin: 0 0 0.6em; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
p { margin: 0 0 1em; }
em { font-style: normal; color: var(--sun-deep); }
:focus-visible { outline: 2.5px solid var(--sun-deep); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: fixed; top: -60px; left: 1rem; z-index: 200;
  background: var(--sun); color: var(--ink); font-weight: 600;
  padding: 0.7rem 1.2rem; border-radius: 0 0 12px 12px; text-decoration: none;
  transition: top 0.25s;
}
.skip-link:focus { top: 0; }

.container { width: min(1180px, 100% - 3rem); margin-inline: auto; }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }

/* ---------- Film grain (very subtle on light) ---------- */
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Curtain entrance (soft cream) ---------- */
.curtain { display: none; }
.motion .curtain { display: block; position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.motion .curtain-bar {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--paper-2);
  transition: transform 1.1s var(--ease-out) 0.15s;
}
.motion .curtain-top { top: 0; transform-origin: top; }
.motion .curtain-bottom { bottom: 0; transform-origin: bottom; }
.motion .is-loaded .curtain-top, .motion.is-loaded .curtain-top { transform: translateY(-101%); }
.motion .is-loaded .curtain-bottom, .motion.is-loaded .curtain-bottom { transform: translateY(101%); }

/* ---------- Scroll timeline ---------- */
.timeline { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 140; pointer-events: none; }
.timeline span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sun), var(--sun-deep)); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
}
.site-header.is-solid {
  background: rgba(250, 246, 238, 0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.header-inner {
  width: min(1360px, 100% - 2.5rem); margin-inline: auto;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-text strong { font-family: var(--font-d); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.01em; }
.brand-text small { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); }

.primary-nav ul { display: flex; align-items: center; gap: 1.7rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a:not(.btn) {
  text-decoration: none; font-size: 0.94rem; font-weight: 500; color: var(--ink);
  opacity: 0.85; transition: opacity 0.2s, color 0.2s;
}
.primary-nav a:not(.btn):hover { opacity: 1; color: var(--sun-deep); }
.nav-cta-row { display: none; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-phone {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--ink);
  opacity: 0.9; transition: color 0.2s;
}
.header-phone:hover { color: var(--sun-deep); }
.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-b); font-weight: 600; font-size: 0.98rem;
  padding: 0.85rem 1.7rem; border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sun { background: var(--sun); color: var(--ink); box-shadow: 0 10px 26px rgba(233, 168, 59, 0.35); }
.btn-sun:hover { background: var(--sun-deep); color: #fff; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: rgba(255, 255, 255, 0.55); }
.btn-ghost:hover { border-color: var(--sun-deep); color: var(--sun-deep); }
.btn-ghost-solid { border-color: var(--line-strong); color: var(--ink); background: rgba(255, 255, 255, 0.85); }
.btn-ink { background: var(--ink); color: var(--cream-text); }
.btn-ink:hover { background: #3a3124; }
.btn-ink-ghost { border-color: rgba(36, 30, 20, 0.4); color: var(--ink); }
.btn-ink-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 1.05rem 2.1rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ============================================================
   HERO — scroll-scrubbed "tilt the louvers" (daylight edition)
   --p (0..1) set on .hero-wrap by script.js
   ============================================================ */
.hero-wrap { --p: 0; position: relative; }
html.js.motion .hero-wrap { height: 300vh; }
html:not(.motion) .hero-wrap, html:not(.js) .hero-wrap { --p: 0.22; }

.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
html.js.motion .hero { position: sticky; top: 0; height: 100svh; min-height: 0; }

.hero-scene { position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, #f6efdf, #efe6d2 70%); }
.hero-photo { width: 100%; height: 100%; object-fit: cover; }

/* Closing louvers: crisp white shutter slats */
.hero-slats { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(12, 1fr); }
.slat {
  --open: clamp(0, (var(--p) - var(--d)) * 2.1, 1);
  transform-origin: top center;
  transform: scaleY(calc(0.06 + var(--open) * 0.94));
  background-color: #3a3128;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='80'%3E%3Cfilter id='wg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.3' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='420' height='80' filter='url(%23wg)'/%3E%3C/svg%3E");
  background-size: 420px 100%;
  background-blend-mode: soft-light;
  border-bottom: 1px solid rgba(50, 45, 38, 0.45);
  box-shadow: 0 1px 4px rgba(40, 36, 30, 0.3);
  will-change: transform;
}

/* Day → cozy evening grade (never gloomy: capped warm) */
.hero-dusk {
  position: absolute; inset: 0;
  background: #4a3a20;
  opacity: calc(var(--p) * 0.34);
}
/* A warm lamp blooms bottom-left as light softens */
.hero-lamp {
  position: absolute; inset: 0;
  background: radial-gradient(42% 38% at 16% 82%, rgba(255, 186, 90, 0.55), rgba(255, 160, 60, 0.15) 45%, transparent 70%);
  opacity: clamp(0, (var(--p) - 0.45) * 2.2, 1);
  mix-blend-mode: screen;
}
/* Constant left scrim for copy legibility (light) */
.hero-scrim { display: none; }

.hero-copy {
  position: relative; z-index: 2;
  max-width: 46rem;
  margin-left: max(calc((100% - 1360px) / 2), 1.25rem);
  margin-right: 1.25rem;
  margin-top: var(--header-h);
  background: rgba(250, 246, 238, 0.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}
.hero-eyebrow {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--sun-deep); margin-bottom: 1.6rem;
}
.hero-eyebrow .dot { margin: 0 0.6em; color: var(--muted); }
.hero-title {
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92;
  margin: 0 0 1.4rem;
}
.hero-title .line { display: block; }
.hero-title .w { display: inline-block; }
.hero-title em { color: var(--ink); }
.line-outline .w {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--sun-deep);
  paint-order: stroke;
}
@supports not (-webkit-text-stroke: 2px black) { .line-outline .w { color: var(--sun-deep); } }

/* Load-in: words rise, then lede/CTAs fade up (motion only) */
.motion .hero-title .line { overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.motion .hero-title .w { transform: translateY(115%); animation: word-rise 0.9s var(--ease-out) forwards; }
.motion .hero-title .line:nth-child(2) .w { animation-delay: 0.12s; }
.motion .hero-title .line:nth-child(3) .w { animation-delay: 0.3s; }
@keyframes word-rise { to { transform: translateY(0); } }

.motion .hero-eyebrow,
.motion .hero-lede,
.motion .hero-actions,
.motion .hero-trust { opacity: 0; transform: translateY(22px); animation: fade-up 0.8s var(--ease-out) forwards; }
.motion .hero-eyebrow { animation-delay: 0.05s; }
.motion .hero-lede { animation-delay: 0.55s; }
.motion .hero-actions { animation-delay: 0.7s; }
.motion .hero-trust { animation-delay: 0.85s; }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }

.hero-lede { max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--ink-soft); }
.hero-lede strong { color: var(--sun-deep); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.9rem 0 1.6rem; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.6rem; list-style: none; margin: 0; padding: 0;
  font-size: 0.92rem; color: var(--ink-soft); font-weight: 500;
}
.hero-trust .stars { color: var(--sun-deep); letter-spacing: 0.1em; margin-right: 0.3rem; }

/* Live daylight readout */
.hero-readout {
  position: absolute; right: clamp(1.1rem, 4vw, 2.5rem); bottom: 2.4rem; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; text-align: right;
  background: rgba(250, 246, 238, 0.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 0.9rem 1.1rem; border-radius: 16px; border: 1px solid var(--line);
}
.readout-label { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.readout-num { font-family: var(--font-d); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; color: var(--sun-deep); }
.readout-num sup { font-size: 0.4em; margin-left: 0.05em; }
.readout-word { font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.readout-bar { width: 130px; height: 3px; background: rgba(36, 30, 20, 0.15); border-radius: 3px; overflow: hidden; }
.readout-fill { display: block; height: 100%; width: 100%; background: var(--sun-deep); border-radius: 3px; transform-origin: left; }
html:not(.js) .hero-readout, html:not(.motion) .hero-readout { display: none; }

/* Scroll cue */
.hero-cue {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted);
  transition: opacity 0.4s;
}
.cue-ring { width: 22px; height: 34px; border: 1.5px solid rgba(36, 30, 20, 0.4); border-radius: 12px; position: relative; }
.cue-ring::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 3px; background: var(--sun-deep); }
.motion .cue-ring::after { animation: cue-drop 1.6s ease-in-out infinite; }
@keyframes cue-drop { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.hero-cue.hidden { opacity: 0; }
html:not(.js) .hero-cue, html:not(.motion) .hero-cue { display: none; }

@media (max-width: 760px) {
  html.js.motion .hero-wrap { height: 220vh; }
  .hero-readout { right: 1.1rem; bottom: 4.9rem; }
  .readout-num { font-size: 2.1rem; }
  .readout-bar { width: 90px; }
  .hero-cue { display: none; }
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker { border-block: 1px solid var(--line); padding: 1.05rem 0; overflow: hidden; background: var(--paper-2); }
.ticker-track { display: flex; width: max-content; gap: 3rem; }
.motion .ticker-track { animation: ticker 36s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-group { display: flex; align-items: center; gap: 3rem; white-space: nowrap; }
.ticker-group span {
  font-family: var(--font-d); font-weight: 700; font-size: 0.98rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.ticker-group i { color: var(--sun-deep); font-style: normal; font-size: 0.8rem; }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--sun-deep); margin: 0 0 1.1rem;
}
.eyebrow .tick { width: 26px; height: 1.5px; background: currentColor; display: inline-block; }
.eyebrow--dark { color: var(--wine); }
.section-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(2.3rem, 5vw, 3.9rem); text-transform: uppercase; }
.section-head--left { text-align: left; margin-inline: 0; }
.section-head--split {
  display: grid; gap: 2rem; text-align: left; max-width: none;
  grid-template-columns: 1fr; align-items: end;
}
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1.2fr 1fr; } }
.section-sub { color: var(--muted-on-paper); font-size: 1.05rem; }

/* ============================================================
   SCENES — sticky-stacked service panels (bright)
   ============================================================ */
.scenes { background: var(--paper); }
.scenes-head {
  width: min(1180px, 100% - 3rem); margin-inline: auto;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
  text-align: left; max-width: none;
}
.scenes-head h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); text-transform: uppercase; max-width: 14em; }
.scenes-head .section-sub { max-width: 38rem; }

.scene {
  position: sticky; top: 0;
  height: 100svh; min-height: 620px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
/* Dwell time: each pinned scene holds for an extra ~80vh of scroll
   before the next panel slides over it */
.scene:not(:last-child) { margin-bottom: 80vh; }
@media (max-width: 760px) { .scene:not(:last-child) { margin-bottom: 60vh; } }
.scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.motion .scene-img { transform: scale(1.06); transition: transform 1.4s var(--ease-out); }
.motion .scene.is-visible .scene-img { transform: scale(1); }
.scene-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(250, 246, 238, 0.94) 0%, rgba(250, 246, 238, 0.35) 45%, rgba(250, 246, 238, 0.05) 100%),
    linear-gradient(90deg, rgba(250, 246, 238, 0.5) 0%, rgba(250, 246, 238, 0) 55%);
}
.scene-body {
  position: relative;
  width: min(1180px, 100% - 3rem); margin-inline: auto;
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  max-width: 40rem; margin-left: max(calc((100% - 1180px) / 2), 1.5rem);
}
.scene-marker {
  font-family: var(--font-d); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--sun-deep); margin-bottom: 0.8rem;
}
.scene-body h3 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); text-transform: uppercase; }
.scene-body p { color: var(--ink-soft); max-width: 32rem; }
.scene-points { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.scene-points li {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.42rem 0.95rem; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink); background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ============================================================
   CRAFT — macro triptych
   ============================================================ */
.craft { background: var(--paper-2); color: var(--ink); }
.craft .section-sub { color: var(--muted-on-paper); }
.craft em { color: var(--wine); }
.craft-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .craft-grid { grid-template-columns: repeat(3, 1fr); } }
.craft-card {
  margin: 0; border-radius: var(--radius); overflow: hidden; position: relative;
  box-shadow: var(--shadow-lg); background: var(--card);
}
.craft-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.motion .craft-card img { transition: transform 0.9s var(--ease-out); }
.motion .craft-card:hover img { transform: scale(1.045); }
.craft-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.3rem 1.15rem;
  background: linear-gradient(0deg, rgba(20, 17, 12, 0.8), rgba(20, 17, 12, 0));
  color: var(--cream-text); font-size: 0.94rem; line-height: 1.45;
}
.craft-card figcaption strong {
  display: block; font-family: var(--font-d); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--sun); margin-bottom: 0.15rem;
}

/* ============================================================
   LIGHT LAB v2
   ============================================================ */
.lab { background: var(--paper); }
.lab-recipes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.4rem; }
.recipe {
  font-family: var(--font-b); font-weight: 600; font-size: 0.9rem;
  padding: 0.55rem 1.25rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.recipe:hover { border-color: var(--sun-deep); color: var(--sun-deep); }
.recipe.is-active { background: var(--sun); border-color: var(--sun); color: var(--ink); }

.compare { --x: 60%; }
.compare-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; min-height: 340px; box-shadow: var(--shadow-lg);
  touch-action: pan-y;
}
.compare-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-dark { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.compare-dark .compare-img { filter: brightness(0.32) saturate(0.75) sepia(0.2); }
.compare-dark-grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(42% 46% at 22% 84%, rgba(255, 165, 60, 0.32), transparent 65%),
    linear-gradient(180deg, rgba(20, 17, 12, 0.22), rgba(14, 11, 7, 0.36));
}
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px;
  background: var(--sun); transform: translateX(-1px);
}
.handle-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--sun); color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(52, 40, 20, 0.35);
}
.compare-tag {
  position: absolute; top: 1.1rem; z-index: 2;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  background: rgba(250, 246, 238, 0.85); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.compare-tag--left { left: 1.1rem; }
.compare-tag--right { right: 1.1rem; background: rgba(20, 17, 12, 0.62); color: var(--cream-text); }
.compare-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}
.compare-caption { text-align: center; margin-top: 1rem; font-size: 0.88rem; color: var(--muted); }

/* ============================================================
   INTERLUDE — ultrawide parallax (one intentional dusk moment)
   ============================================================ */
.interlude { position: relative; height: clamp(340px, 55vh, 560px); overflow: hidden; display: grid; place-items: center; }
.interlude-img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
.interlude-scrim { position: absolute; inset: 0; background: rgba(20, 15, 8, 0.38); }
.interlude-quote { position: relative; margin: 0; text-align: center; padding: 0 1.5rem; }
.interlude-quote p {
  font-family: var(--font-d); font-weight: 700; font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; margin: 0;
  color: var(--cream-text);
}
.interlude-quote em { color: var(--sun); }

/* ============================================================
   WHY US + STATS
   ============================================================ */
.why { background: var(--paper); color: var(--ink); }
.why em { color: var(--wine); }
.why .section-sub, .why-list p { color: var(--muted-on-paper); }
.why-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .why-grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; } }
.why-list { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.why-list li { display: flex; gap: 1.1rem; align-items: flex-start; }
.why-list h3 { font-size: 1.22rem; margin-bottom: 0.25em; text-transform: none; letter-spacing: 0; }
.why-list p { margin: 0; font-size: 0.98rem; }
.why-num {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-d); font-weight: 700; font-size: 1.1rem;
  background: var(--sun); color: var(--ink);
}
.why-photo {
  margin: 0; border-radius: var(--radius); overflow: hidden; position: relative;
  box-shadow: var(--shadow-lg);
}
.why-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.why-photo-tag {
  position: absolute; left: 1.1rem; bottom: 1.1rem; right: 1.1rem;
  background: rgba(250, 246, 238, 0.88); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 0.85rem 1.1rem; border-radius: 14px; font-size: 0.92rem;
}
.why-photo-tag strong { color: var(--sun-deep); font-family: var(--font-d); font-size: 1.15em; text-transform: uppercase; letter-spacing: 0.04em; }

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5px;
  background: var(--line); border: 1.5px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--card); padding: 1.7rem 1.4rem; text-align: center; }
.stat dt { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-on-paper); margin-bottom: 0.45rem; }
.stat dd { margin: 0; font-family: var(--font-d); font-weight: 800; font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--ink); }
.stat-suffix { color: var(--wine); font-size: 0.7em; margin-left: 0.08em; }
.stat-word { text-transform: uppercase; letter-spacing: 0.02em; }

/* ============================================================
   PROCESS — four acts
   ============================================================ */
.process { background: var(--paper-2); }
.acts {
  list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding: 0;
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .acts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .acts { grid-template-columns: repeat(4, 1fr); } }
.act {
  position: relative; padding: 1.9rem 1.6rem 1.7rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.act:hover { border-color: rgba(201, 138, 29, 0.5); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.act-index {
  display: block; font-family: var(--font-d); font-weight: 800;
  font-size: 2.6rem; line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px var(--sun-deep);
  margin-bottom: 1.1rem;
}
.act h3 { font-size: 1.28rem; text-transform: none; letter-spacing: 0; }
.act p { margin: 0; font-size: 0.96rem; color: var(--muted-on-paper); }

.process-photo {
  margin: 0 auto; border-radius: var(--radius); overflow: hidden;
  max-width: 900px; aspect-ratio: 4 / 3; position: relative; box-shadow: var(--shadow-lg);
}
@media (min-width: 860px) { .process-photo { aspect-ratio: 16 / 9; } }
.process-photo img { width: 100%; height: 100%; object-fit: cover; }
.process-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 1.6rem 1.2rem 1.05rem;
  font-family: var(--font-d); font-weight: 600; font-size: 1rem; color: var(--cream-text);
  background: linear-gradient(0deg, rgba(20, 17, 12, 0.72), rgba(20, 17, 12, 0));
}

/* ============================================================
   SERVICE AREA + SPOTLIGHT
   ============================================================ */
.areas { background: var(--paper); color: var(--ink); }
.areas em { color: var(--wine); }
.areas .section-sub { color: var(--muted-on-paper); }
.areas-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .areas-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; } }
.areas-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.areas-list li {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1.05rem 0; border-bottom: 1.5px solid var(--line);
}
.areas-list strong { font-family: var(--font-d); font-weight: 700; font-size: 1.18rem; }
.areas-list span { color: var(--muted-on-paper); font-size: 0.94rem; }

/* Nearby-town links on the location pages. Chips rather than a bullet list —
   there are four of them on every page and a stack of bullets reads as filler. */
.areas-inline {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.areas-inline a {
  display: inline-block; text-decoration: none;
  font-family: var(--font-d); font-weight: 500; font-size: 0.95rem;
  color: var(--ink); background: var(--paper-2, rgba(10, 9, 8, 0.045));
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0.5rem 1.05rem;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.areas-inline a:hover,
.areas-inline a:focus-visible {
  background: var(--sun); border-color: var(--sun); transform: translateY(-1px);
}

.spotlight {
  background: var(--wine); color: var(--cream-text);
  border-radius: var(--radius); padding: clamp(1.8rem, 3.5vw, 2.6rem);
  box-shadow: 0 26px 60px rgba(109, 34, 51, 0.3);
  position: sticky; top: calc(var(--header-h) + 1.5rem);
}
.spotlight-flag {
  display: inline-block; background: var(--sun); color: var(--ink);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.spotlight h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--cream-text); }
.spotlight p { color: rgba(246, 241, 231, 0.92); }
.spotlight strong { color: var(--sun); }
.spotlight-points { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.55rem; }
.spotlight-points li { padding-left: 1.4rem; position: relative; font-size: 0.96rem; }
.spotlight-points li::before { content: "✦"; position: absolute; left: 0; color: var(--sun); font-size: 0.8rem; }
.spotlight .btn-ink { background: var(--ink-2); }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews { background: var(--paper-2); }
.reviews-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
  margin: 0; padding: 1.9rem 1.7rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 1rem;
}
.review-card .stars { color: var(--sun-deep); letter-spacing: 0.14em; }
.review-card blockquote { margin: 0; }
.review-card blockquote p { margin: 0; font-size: 0.99rem; color: var(--ink-soft); }
.review-card figcaption { margin-top: auto; display: flex; flex-direction: column; }
.review-card figcaption strong { font-family: var(--font-d); font-weight: 700; }
.review-card figcaption span { font-size: 0.85rem; color: var(--muted); }
.reviews-note { text-align: center; margin: 2rem 0 0; font-size: 0.82rem; color: var(--muted); opacity: 0.85; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--paper); color: var(--ink); }
.faq em { color: var(--wine); }
.faq .section-sub { color: var(--muted-on-paper); }
.faq .section-sub a { color: var(--wine); font-weight: 600; }
.faq-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } }
.faq-grid .section-head { position: sticky; top: calc(var(--header-h) + 1.5rem); margin-bottom: 0; }
.faq-list { display: grid; gap: 0.9rem; }
.faq-item {
  border: 1.5px solid var(--line); border-radius: 16px;
  background: var(--card); overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq-item[open] { border-color: var(--wine); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem; font-family: var(--font-d); font-weight: 700; font-size: 1.08rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { flex: 0 0 auto; width: 14px; height: 14px; position: relative; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--wine); border-radius: 2px;
  transition: transform 0.3s var(--ease-out);
}
.faq-icon::before { width: 14px; height: 2.5px; }
.faq-icon::after { width: 2.5px; height: 14px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); }
.faq-item p { padding: 0 1.35rem 1.25rem; margin: 0; color: var(--muted-on-paper); font-size: 0.99rem; }

/* ============================================================
   QUOTE FORM
   ============================================================ */
.quote { background: var(--paper-2); position: relative; overflow: hidden; }
.quote::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 85% 15%, rgba(233, 168, 59, 0.16), transparent 70%);
}
.quote-grid { position: relative; display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .quote-grid { grid-template-columns: 0.95fr 1.05fr; gap: 4rem; } }
.quote-copy h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); text-transform: uppercase; }
.quote-lede { color: var(--muted-on-paper); }
.quote-lede a { color: var(--sun-deep); font-weight: 600; }
.quote-points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.quote-points li { padding-left: 1.5rem; position: relative; color: var(--ink-soft); }
.quote-points li::before { content: "✦"; position: absolute; left: 0; color: var(--sun-deep); font-size: 0.85rem; }
.quote-points strong { color: var(--sun-deep); }

.quote-form {
  position: relative;
  background: var(--card); color: var(--ink);
  border-radius: var(--radius); padding: clamp(1.8rem, 3.5vw, 2.6rem);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.form-title { font-size: 1.7rem; margin-bottom: 1.4rem; }
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.4rem; }
.req { color: var(--wine); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-b); font-size: 1rem; color: var(--ink);
  padding: 0.85rem 1rem; border-radius: 12px;
  border: 1.5px solid var(--line-strong); background: var(--paper);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sun-deep); box-shadow: 0 0 0 3px rgba(233, 168, 59, 0.28);
}
.field textarea { resize: vertical; min-height: 96px; }
.field-error { color: #a4283c; font-size: 0.84rem; margin: 0.35rem 0 0; }
.field.is-invalid input { border-color: #a4283c; }
.form-fineprint { text-align: center; font-size: 0.82rem; color: var(--muted-on-paper); margin: 0.9rem 0 0; }

/* Submit failed and the lead is NOT in the CRM — say so loudly, with the phone number. */
.form-error {
  margin: 0.9rem 0 0; padding: 0.75rem 0.9rem; border-radius: 6px;
  background: rgba(164, 40, 60, 0.09); border: 1px solid rgba(164, 40, 60, 0.35);
  color: #7d1c2d; font-size: 0.88rem; text-align: center;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.form-success { text-align: center; padding: 2rem 0.5rem; }
.form-success h3 { font-size: 1.6rem; margin: 0.9rem 0 0.4rem; }
.form-success p { color: var(--muted-on-paper); margin: 0; }
.form-success a { color: var(--wine); font-weight: 600; }
.success-icon { display: inline-grid; place-items: center; color: #2c7a3f; }
.motion .success-circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: draw 0.7s var(--ease-out) forwards; }
.motion .success-check { stroke-dasharray: 34; stroke-dashoffset: 34; animation: draw 0.45s var(--ease-out) 0.5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ============================================================
   CTA BAND + FOOTER
   ============================================================ */
.cta-band { background: var(--sun); color: var(--ink); padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.cta-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem; }
.cta-band-text { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.cta-band-text strong { font-family: var(--font-d); font-weight: 800; text-transform: uppercase; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.site-footer { background: var(--ink-2); color: var(--cream-text); padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer .brand { color: var(--cream-text); }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; }
/* Five columns from 1080px; below that the two product columns sit side by side
   under the brand block rather than being squeezed to two words per line. */
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 2.4rem; } }
@media (min-width: 1080px) { .footer-grid { grid-template-columns: 1.25fr 1fr 1fr 1fr 1.05fr; gap: 2rem; } }
.footer-tag { color: rgba(246, 241, 231, 0.6); font-size: 0.95rem; margin-top: 1rem; max-width: 26rem; }
.footer-social { display: flex; gap: 0.7rem; list-style: none; margin: 1.3rem 0 0; padding: 0; }
.footer-social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid rgba(246, 241, 231, 0.18); color: rgba(246, 241, 231, 0.6); transition: color 0.2s, border-color 0.2s;
}
.footer-social a:hover { color: var(--sun); border-color: var(--sun); }
.footer-col h3 {
  font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(246, 241, 231, 0.55); margin-bottom: 1.1rem; font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { text-decoration: none; color: rgba(246, 241, 231, 0.85); font-size: 0.95rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--sun); }
.footer-col h3, .site-footer h3 { color: rgba(246, 241, 231, 0.55); }
.footer-contact address { font-style: normal; }
.footer-contact p { margin-bottom: 0.8rem; font-size: 0.95rem; color: rgba(246, 241, 231, 0.85); }
.footer-contact a { color: var(--sun); text-decoration: none; }
.footer-hours { font-size: 0.9rem; color: rgba(246, 241, 231, 0.6); }
.footer-hours-note { font-size: 0.78rem; opacity: 0.7; }
/* Company / legal row, between the column grid and the copyright line. */
.footer-links {
  border-top: 1px solid rgba(246, 241, 231, 0.14);
  padding-block: 1.2rem;
}
.footer-links ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.footer-links a {
  text-decoration: none; font-size: 0.88rem;
  color: rgba(246, 241, 231, 0.7); transition: color 0.2s;
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--sun); }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem;
  border-top: 1px solid rgba(246, 241, 231, 0.14); padding-block: 1.4rem;
  font-size: 0.82rem; color: rgba(246, 241, 231, 0.6);
}
.footer-bottom p { margin: 0; }

/* ============================================================
   MOBILE CALL BAR
   ============================================================ */
.mobile-callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: 0.7rem; padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(250, 246, 238, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.mobile-callbar .btn { flex: 1; padding: 0.85rem 1rem; }

/* ============================================================
   REVEALS
   ============================================================ */
.motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.motion .reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */
@media (max-width: 1080px) {
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99;
    background: rgba(250, 246, 238, 0.98);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-110%); opacity: 0; visibility: hidden;
    transition: transform 0.4s var(--ease-out), opacity 0.3s, visibility 0.4s;
  }
  .primary-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.5rem 1.5rem; }
  .primary-nav li { border-bottom: 1px solid var(--line); }
  .primary-nav li:last-child { border-bottom: none; }
  .primary-nav a:not(.btn) { display: block; padding: 1rem 0.2rem; font-size: 1.1rem; }
  .nav-cta-row { display: flex; align-items: center; gap: 1rem; padding-top: 1.2rem; }
  .nav-phone { font-weight: 700; text-decoration: none; color: var(--sun-deep); }
  .header-phone span { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 46px; height: 46px; padding: 0 11px;
    background: transparent; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease-out); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
}
@media (max-width: 760px) {
  .btn-header { display: none; }
  .mobile-callbar { display: flex; }
  body { padding-bottom: 68px; }
  .scene-body { margin-left: 1.5rem; margin-right: 1.5rem; }
}

@media (min-width: 1400px) {
  .hero-copy, .header-inner { width: min(1360px, 100% - 4rem); }
}

/* =========================================================================
   INTERIOR PAGES
   The home page opens on the scroll-scrubbed louver hero. Interior pages get
   a shorter, cheaper banner instead — they are usually the landing page for a
   search or an ad click, so they must paint fast and put the h1 up top.
   ========================================================================= */

.page-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(340px, 46vh, 520px);
  padding: clamp(5.5rem, 12vh, 8rem) 0 clamp(2.5rem, 6vh, 4rem);
  background: var(--ink);
  overflow: hidden;
}
.page-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.72) 0%, rgba(10, 9, 8, 0.36) 42%, rgba(10, 9, 8, 0.88) 100%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 {
  color: var(--paper);
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.03;
  margin: 0.5rem 0 0.9rem;
  max-width: 18ch;
}
.page-hero h1 em { font-style: normal; color: var(--sun); }
.page-hero .page-lede {
  color: rgba(250, 246, 238, 0.82);
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  max-width: 56ch;
  margin: 0 0 1.6rem;
}
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The secondary button is styled for the paper background it normally sits on.
   Over the dark hero it reads as a muddy grey pill, so invert it here. */
.page-hero-actions .btn-ghost {
  color: var(--paper);
  border-color: rgba(250, 246, 238, 0.45);
  background: rgba(250, 246, 238, 0.08);
}
.page-hero-actions .btn-ghost:hover { border-color: var(--sun); color: var(--sun); }

/* ---- Header over a dark hero ----
   The header is transparent until it gains .is-solid on scroll, and its text is
   ink-dark because the home page hero is bright paper. Interior heroes are dark,
   which left the whole nav invisible until you scrolled. Light it up until the
   solid background arrives. */
.has-dark-hero .site-header:not(.is-solid) .brand,
.has-dark-hero .site-header:not(.is-solid) .header-phone { color: var(--paper); }
.has-dark-hero .site-header:not(.is-solid) .brand-text small { color: rgba(250, 246, 238, 0.62); }
.has-dark-hero .site-header:not(.is-solid) .nav-toggle { border-color: rgba(250, 246, 238, 0.4); }
.has-dark-hero .site-header:not(.is-solid) .nav-toggle span { background: var(--paper); }

/* Only above the nav breakpoint — below it the links live in a cream drop-down
   panel and must stay dark. */
@media (min-width: 1081px) {
  .has-dark-hero .site-header:not(.is-solid) .primary-nav a:not(.btn) { color: var(--paper); }
  .has-dark-hero .site-header:not(.is-solid) .primary-nav a:not(.btn):hover { color: var(--sun); }
}

/* Breadcrumb — also feeds BreadcrumbList structured data on each page. */
.crumbs { position: relative; z-index: 1; font-size: 0.82rem; letter-spacing: 0.04em; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.crumbs li { color: rgba(250, 246, 238, 0.55); }
.crumbs li + li::before { content: "/"; margin-right: 0.45rem; opacity: 0.5; }
.crumbs a { color: rgba(250, 246, 238, 0.72); text-decoration: none; }
.crumbs a:hover { color: var(--sun); }

/* Body copy blocks on interior pages. */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1.05rem; }
.prose p:last-child { margin-bottom: 0; }

/* Product variant cards ("kinds of shade", "kinds of shutter"). */
.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.1rem;
  margin-top: 2.2rem;
}
.type-card {
  background: rgba(36, 30, 20, 0.04);
  border: 1px solid rgba(36, 30, 20, 0.1);
  border-radius: 10px;
  padding: 1.35rem 1.4rem;
}
.type-card h3 { font-size: 1.12rem; margin: 0 0 0.5rem; }
.type-card p { margin: 0; color: var(--muted-on-paper); font-size: 0.94rem; line-height: 1.6; }
.type-card .type-tag {
  display: inline-block; margin-bottom: 0.7rem;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wine); font-weight: 600;
}

/* Dark-background variant, so alternating sections don't all read the same. */
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark p, .section--dark li { color: rgba(250, 246, 238, 0.78); }
.section--dark .type-card {
  background: rgba(250, 246, 238, 0.05);
  border-color: rgba(250, 246, 238, 0.14);
}
.section--dark .type-card p { color: rgba(250, 246, 238, 0.7); }
/* Wine on ink is unreadable — the tag needs the amber here. */
.section--dark .type-card .type-tag { color: var(--sun); }

/* Contact page detail blocks. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}
.contact-card h3 { font-size: 1rem; letter-spacing: 0.03em; margin: 0 0 0.5rem; }
.contact-card p, .contact-card address {
  margin: 0; font-style: normal; line-height: 1.7; color: var(--muted-on-paper);
}
.contact-card a { color: inherit; }

/* Thank-you page. */
.ty { text-align: center; padding: clamp(7rem, 16vh, 11rem) 0 clamp(4rem, 9vh, 7rem); }
.ty h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 1rem 0 0.8rem; }
.ty-next {
  list-style: none; margin: 2.4rem auto 0; padding: 0;
  max-width: 640px; text-align: left;
  display: grid; gap: 0.9rem;
}
.ty-next li {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: rgba(36, 30, 20, 0.04);
  border: 1px solid rgba(36, 30, 20, 0.09);
  border-radius: 9px; padding: 1rem 1.15rem;
}
.ty-next .ty-step {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--sun); color: var(--ink);
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 700;
}
.ty-next p { margin: 0; font-size: 0.95rem; color: var(--muted-on-paper); }
.ty-next strong { display: block; color: var(--ink); font-size: 0.98rem; margin-bottom: 0.15rem; }