/* ============================================================
   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;
  /* Labels on the cream ground. --sun-deep is only 2.73:1 there, far under the
     4.5:1 small text needs; this is 4.77:1 and still reads amber, not brown.
     On dark sections the bright --sun is used instead — see .eyebrow below. */
  --label-on-paper: #96630c;
  --wine: #6d2233;
  --cream-text: #f6f1e7;
  --muted: #6f6551;            /* muted on paper — darkened from #857a66, which was 3.92:1 */
  --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
   ============================================================ */
/* The header is ink, always — not transparent-then-cream on scroll.

   Two reasons. The nav and the logo now hold a constant contrast against a known
   ground instead of depending on whatever photograph happens to be behind them,
   and it removes a whole class of bug: the old build had a .has-dark-hero
   override existing purely to re-light the nav on interior pages, because the
   transparent header assumed a bright hero that only the home page has.

   One state, one set of colours, nothing to invert. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(20, 17, 12, 0.90);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(246, 241, 231, 0.10);
  transition: background 0.35s, box-shadow 0.35s;
}
/* Scrolled: fractionally more opaque and a shadow, so the bar separates from
   content passing beneath it. */
.site-header.is-solid {
  background: rgba(20, 17, 12, 0.96);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.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;
}
/* Cream, which the inline logo SVG picks up through currentColor — the mark
   re-colours itself for the dark bar with no second asset. */
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--cream-text); }
.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.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(246, 241, 231, 0.66); }

.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: 1.02rem; font-weight: 500; color: var(--cream-text);
  opacity: 0.88; transition: opacity 0.2s, color 0.2s;
}
.primary-nav a:not(.btn):hover { opacity: 1; color: var(--sun); }
.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(--cream-text);
  opacity: 0.92; transition: color 0.2s;
}
.header-phone:hover { color: var(--sun); }
.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.92rem; font-weight: 700; letter-spacing: 0.15em; 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: 1rem; 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.82rem; letter-spacing: 0.14em; 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.9rem; letter-spacing: 0.13em; 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.8rem; letter-spacing: 0.16em; 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.9rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--label-on-paper); margin: 0 0 1.1rem;
}
/* Anything sitting on ink gets the bright amber back. Keyed off the section
   rather than a modifier class, so an eyebrow that forgot its modifier still
   renders legibly — several on the home page had. */
.section--dark .eyebrow, .site-footer .eyebrow, .cta-band .eyebrow,
.page-hero .eyebrow, .spotlight .eyebrow { color: var(--sun); }
.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%);
}
/* The blinds photo is the one scene whose window sits behind the text column
   rather than off to one side, so it needs more scrim than the rest. Scoped
   to that scene — raising it globally flattened the shutters and motorized
   photos to near-white. */
#blinds .scene-scrim {
  background:
    linear-gradient(0deg, rgba(250, 246, 238, 0.96) 0%, rgba(250, 246, 238, 0.6) 48%, rgba(250, 246, 238, 0.1) 100%),
    linear-gradient(90deg, rgba(250, 246, 238, 0.66) 0%, rgba(250, 246, 238, 0) 58%);
}
.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 01–05" used to sit here. Five products are a list, not a sequence —
   the numbering implied an order the reader was meant to follow and there
   isn't one, so it went. */
.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.92rem; 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: 1rem; 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 / .recipe removed with the preset buttons — the drag handle
   already does what they did, and the section no longer needs a sentence
   explaining a control. */

/* --x is the handle position (0% = all blackout, 100% = all sheer).
   --dark is the same thing inverted and unitless, 0..1, so CSS can ramp the
   depth with the drag. Both are set together in script.js. The default here
   matches --x: 60% so the section still looks right with JS disabled. */
.compare { --x: 60%; --dark: 0.4; }
.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)); }
/* The blackout half. Two things make this read as a genuinely dark room
   rather than a dim photograph: the base goes properly low, and the warm
   radial pool is left ALONE. Darkening everything uniformly just makes mud
   — it is the surviving lamp glow against a near-black room that sells it,
   so the contrast between the two is doing the work, not the brightness
   number on its own. */
.compare-dark .compare-img { filter: brightness(0.30) saturate(0.68) sepia(0.22) contrast(1.06); }
.compare-dark-grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(42% 46% at 22% 84%, rgba(255, 168, 66, 0.34), transparent 66%),
    linear-gradient(180deg, rgba(18, 15, 10, 0.28), rgba(12, 9, 6, 0.44));
}
/* The depth that ramps with the drag. Transparent over the lamp and opaque
   everywhere else, so at full left the room goes near-black but still reads
   as a room with a lamp on rather than a failed image. */
.compare-dark-deep {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 56% at 22% 84%,
    rgba(4, 3, 2, 0) 0%, rgba(4, 3, 2, 0.55) 42%, rgba(3, 2, 1, 0.95) 78%);
  /* NO transition here, deliberately. The handle already emits a continuous
     stream of input events, so a transition adds nothing but lag — and it
     actively broke: the transition sat "running" at currentTime 0 and never
     advanced, pinning opacity at 0.352 no matter where the handle went. The
     value is driven directly instead, which is both correct and simpler. */
  opacity: var(--dark);
}
.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.82rem; font-weight: 700; letter-spacing: 0.14em; 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.95rem; 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: 1rem;
}
.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.86rem; font-weight: 600; letter-spacing: 0.13em; 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: 1rem; }

/* 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.82rem; font-weight: 700; letter-spacing: 0.14em; 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.92rem; color: var(--muted); }
.reviews-note { text-align: center; margin: 2rem 0 0; font-size: 0.9rem; 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: 1rem; 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.92rem; margin: 0.35rem 0 0; }
.field.is-invalid input { border-color: #a4283c; }
.form-fineprint { text-align: center; font-size: 0.9rem; 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.95rem; 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.9rem; letter-spacing: 0.14em; 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.96rem; color: rgba(246, 241, 231, 0.6); }
.footer-hours-note { font-size: 0.86rem; 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.94rem;
  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.88rem; 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(20, 17, 12, 0.98);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(246, 241, 231, 0.12);
    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 rgba(246, 241, 231, 0.12); }
  .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); }
  .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 rgba(246, 241, 231, 0.34); border-radius: 12px; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--cream-text); 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); }

/* The header-over-dark-hero overrides that used to live here are gone: the
   header is ink on every page now, so there is nothing left to invert. */

/* Breadcrumb — also feeds BreadcrumbList structured data on each page. */
.crumbs { position: relative; z-index: 1; font-size: 0.9rem; 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: 1.02rem; line-height: 1.6; }
.type-card .type-tag {
  display: inline-block; margin-bottom: 0.7rem;
  font-size: 0.82rem; letter-spacing: 0.12em; 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; }

/* ============================================================
   TRUST STRIP, PARTNERS, BADGES
   Added 2026-08-03 after reviewing Bumble Bee, 3 Day, Budget and
   Made in the Shade. Three of those four put a trust row directly under the
   hero, and every one of them turns social proof into a graphic element
   rather than a line of small text. Ours were doing neither.

   The strip also does structural work: a pale card overlapping the dark hero
   is the hard colour edge the page was missing, and it stops the run of six
   consecutive cream sections starting immediately.
   ============================================================ */

.trust-strip {
  position: relative; z-index: 3;
  margin-top: clamp(-5rem, -6vw, -3.5rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.trust-strip-inner {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr; gap: 0;
  overflow: hidden;
}
@media (min-width: 700px) { .trust-strip-inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .trust-strip-inner { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) {
  .trust-item { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
  .trust-item:nth-child(2n) { border-right: none; }
}
@media (min-width: 1040px) {
  .trust-item { border-bottom: none; border-right: 1px solid var(--line); }
  .trust-item:nth-child(2n) { border-right: 1px solid var(--line); }
  .trust-item:last-child { border-right: none; }
}
.trust-item:last-child { border-bottom: none; }
.trust-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(233, 168, 59, 0.16); color: var(--label-on-paper);
}
.trust-copy strong {
  display: block; font-family: var(--font-d); font-weight: 700;
  font-size: 1.02rem; line-height: 1.2; margin-bottom: 0.16rem;
}
.trust-copy span { font-size: 0.9rem; color: var(--muted-on-paper); line-height: 1.4; }

/* ---- Partner band ------------------------------------------------------
   Graber and Norman are names homeowners recognise from shopping around, and
   we had them as one line of 13px text in the footer. Set as a band on the
   deeper cream, which also breaks the cream run.
   NOTE: these are typographic wordmarks, not the manufacturers' logo files.
   Real assets are available to dealers and would look better — worth doing. */
.partners {
  background: var(--paper-2);
  border-block: 1.5px solid var(--line);
  padding: clamp(2.6rem, 5vw, 3.6rem) 0;
}
.partners-label {
  text-align: center; font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted-on-paper); margin-bottom: 1.5rem;
}
/* Boxed tiles rather than a loose row of words. Until we have the
   manufacturers' real logo files these are typographic, and a plain row of
   names read as body copy instead of as brands — a bordered card gives each
   one the visual weight a logo would have. */
.partners-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.partners-row li {
  display: grid; place-items: center; text-align: center;
  min-height: 84px; padding: 1rem 1.1rem;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(0.98rem, 1.5vw, 1.2rem);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--ink);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.partners-row li:hover {
  border-color: var(--sun); transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.partners-note {
  text-align: center; font-size: 0.9rem; color: var(--muted-on-paper);
  margin: 1.4rem 0 0;
}

/* ---- Warranty seal ----------------------------------------------------
   Budget Blinds built a badge around a FIVE YEAR warranty. Ours is for life
   and was a clause in a sentence. */
.seal { display: block; width: clamp(128px, 15vw, 168px); height: auto; flex: none; }
.seal-row {
  display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem);
  flex-wrap: wrap;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.seal-copy { flex: 1 1 16rem; }
.seal-copy h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 0.4rem; }
.seal-copy p { margin: 0; color: var(--muted-on-paper); font-size: 0.98rem; }

/* ---- Google rating badge ---------------------------------------------- */
.rating-badge {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 0.5rem 1.05rem 0.5rem 0.6rem;
  text-decoration: none; color: var(--ink);
}
.rating-badge .g {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--paper-2);
  font-family: var(--font-d); font-weight: 800; font-size: 0.95rem; color: var(--label-on-paper);
}
.rating-badge b { font-family: var(--font-d); font-weight: 800; font-size: 1.05rem; line-height: 1; }
.rating-badge .rb-stars { color: var(--sun-deep); letter-spacing: 0.06em; font-size: 0.9rem; line-height: 1; }
.rating-badge small { display: block; font-size: 0.8rem; color: var(--muted-on-paper); line-height: 1.2; }

/* ============================================================
   SCENES — alternating dark panels

   The five pinned scenes all carried the same cream scrim, so the whole stack
   read as one continuous light stretch: five full screens with no tonal change
   between them. Every other scene now takes a dark scrim instead, which gives
   the stack a light / dark / light / dark / light rhythm and puts a hard break
   between each product.

   Keyed off :nth-child(even) rather than a modifier class so it survives
   reordering the scenes — the alternation is a property of position in the
   stack, not of the product.
   ============================================================ */

.scene:nth-child(even) .scene-scrim {
  background:
    linear-gradient(0deg, rgba(14, 11, 8, 0.94) 0%, rgba(14, 11, 8, 0.62) 45%, rgba(14, 11, 8, 0.22) 100%),
    linear-gradient(90deg, rgba(14, 11, 8, 0.6) 0%, rgba(14, 11, 8, 0) 60%);
}
.scene:nth-child(even) .scene-body h3 { color: var(--cream-text); }
.scene:nth-child(even) .scene-body h3 em { color: var(--sun); }
.scene:nth-child(even) .scene-body p { color: rgba(246, 241, 231, 0.86); }

.scene:nth-child(even) .scene-points li {
  color: var(--cream-text);
  background: rgba(246, 241, 231, 0.1);
  border-color: rgba(246, 241, 231, 0.34);
}

/* The dark panels sit slightly darker at the very bottom edge so the seam into
   the next scene reads as deliberate rather than as a gradient running out. */
.scene:nth-child(even)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: var(--ink-2);
}

/* Hero rating — deliberately NOT the boxed .rating-badge treatment. That badge
   works on a plain ground; nested inside the frosted hero card it read as a box
   within a box and left dead space. Here it is just an emphasised line item. */
.hero-rating a {
  display: inline-flex; align-items: baseline; gap: 0.42rem;
  text-decoration: none; color: inherit;
}
.hero-rating a:hover .rb-stars { color: var(--sun); }
.hero-rating .rb-stars { color: var(--sun-deep); letter-spacing: 0.04em; }
.hero-rating b { font-family: var(--font-d); font-weight: 800; font-size: 1.05em; }

/* ============================================================
   MID-PAGE TONAL BREAK — reviews on ink, FAQ as dark pills

   Even after the trust strip and the partner band, the middle of the page
   still ran five sections on cream: why us, service area, reviews, FAQ, quote
   form. Five screens of dark text on the same warm ground reads as flat no
   matter how good the copy is.

   Reviews take the ink ground — they carry the most weight on the page and
   deserve it — and the FAQ rows become dark pills on cream, which is the
   device Bumble Bee uses and Dave singled out. That gives:

     why(cream) → areas(paper-2) → reviews(INK) → faq(cream, dark rows)
     → quote(cream) → CTA(amber) → footer(ink)

   Colour now returns every second section instead of every sixth.
   ============================================================ */

/* ---- service area: a half-step down, not a full break ---- */
.areas { background: var(--paper-2); }

/* ---- reviews: full ink ---- */
.reviews { background: var(--ink-2); color: var(--cream-text); }
.reviews h2 { color: var(--cream-text); }
.reviews h2 em { color: var(--sun); }
.reviews .eyebrow { color: var(--sun); }
.reviews .review-card {
  background: rgba(246, 241, 231, 0.05);
  border-color: rgba(246, 241, 231, 0.16);
  box-shadow: none;
  backdrop-filter: blur(2px);
}
.reviews .review-card .stars { color: var(--sun); }
.reviews .review-card blockquote p { color: rgba(246, 241, 231, 0.9); }
.reviews .review-card figcaption strong { color: var(--cream-text); }
.reviews .review-card figcaption span { color: rgba(246, 241, 231, 0.6); }
.reviews-note { color: rgba(246, 241, 231, 0.62); opacity: 1; }

/* ---- FAQ: dark rows on cream ----
   The row itself carries the colour, so the section stays light while the
   content supplies the rhythm — the same trick Bumble Bee uses for its
   accordion. Opening a row switches it to amber-on-ink rather than merely
   changing a border colour, so the open state is unmissable. */
.faq-item {
  background: var(--ink-2);
  border-color: transparent;
  border-radius: 12px;
}
.faq-item summary { color: var(--cream-text); }
.faq-item[open] { border-color: var(--sun); box-shadow: var(--shadow-sm); }
.faq-item[open] summary { color: var(--sun); }
.faq-icon::before, .faq-icon::after { background: var(--sun); }
.faq-item p { color: rgba(246, 241, 231, 0.78); }
.faq-item summary:hover { color: var(--sun); }

/* ============================================================
   SPLIT HERO — ink panel beside the photograph

   The hero was a frosted card floating on a full-bleed photo. Pleasant, and
   soft: no hard edge anywhere on the first screen, which is why the top of
   the page felt weightless next to the mid-page after reviews went to ink.
   Bumble Bee and Made in the Shade both open on a solid colour block beside
   an image, and that is the structure being borrowed.

   The scroll-scrubbed louvers are KEPT — the team explicitly liked them — but
   they now play inside the right-hand panel instead of behind the copy, so
   the animation reads as a window rather than as a background effect. --p is
   still driven from .hero-wrap, so no JS changed.

   Below 1000px it stacks: ink panel, then photo. The split only earns its
   keep when there is width for both halves.
   ============================================================ */

@media (min-width: 1000px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    align-items: stretch;
  }

  /* the scene stops being a full-bleed backdrop and becomes the right panel */
  .hero .hero-scene { position: relative; inset: auto; grid-column: 2; }

  .hero .hero-copy {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; justify-content: center;
    /* .hero-copy shares the container width rule with .header-inner further
       up. In the split it must fill its grid column instead, or a 4rem sliver
       of page background shows between the ink panel and the photo. */
    width: auto;
    max-width: none; margin: 0; border: 0; border-radius: 0;
    background: var(--ink-2);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
    padding: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem))
             clamp(2rem, 3vw, 3.25rem) clamp(2rem, 4vw, 3.5rem)
             /* Line up with the 1360px container the header uses, but stop
                there. The gutter is measured against the whole viewport while
                this panel is only 44% of it, so past ~1500px the raw gutter
                eats the column and the headline clips. */
             min(max(calc((100vw - 1360px) / 2), 1.5rem), 6vw);
  }

  /* The display size was set against the full viewport. In one column it has
     roughly 40% of that to work with, so it needs its own scale. */
  .hero .hero-title { font-size: clamp(2.5rem, 3.6vw, 4.6rem); }
  .hero .hero-eyebrow { font-size: 0.82rem; letter-spacing: 0.13em; margin-bottom: 1.2rem; }
  .hero .hero-lede { max-width: 32rem; }
  .hero .hero-actions { margin: 1.6rem 0 1.4rem; }
  .hero .hero-trust { gap: 0.5rem 1.4rem; font-size: 0.95rem; }

  /* invert the copy for the ink ground */
  .hero .hero-eyebrow { color: var(--sun); }
  .hero .hero-eyebrow .dot { color: rgba(246, 241, 231, 0.45); }
  .hero .hero-title em { color: var(--cream-text); }
  .hero .line-outline .w { -webkit-text-stroke-color: var(--sun); }
  @supports not (-webkit-text-stroke: 2px black) {
    .hero .line-outline .w { color: var(--sun); }
  }
  .hero .hero-lede { color: rgba(246, 241, 231, 0.82); }
  .hero .hero-lede strong { color: var(--sun); }
  .hero .hero-trust { color: rgba(246, 241, 231, 0.8); }
  .hero .hero-rating .rb-stars { color: var(--sun); }
  .hero .hero-trust strong { color: var(--cream-text); }

  /* the ghost button was drawn for paper and goes muddy on ink */
  .hero .btn-ghost {
    color: var(--cream-text);
    border-color: rgba(246, 241, 231, 0.42);
    background: rgba(246, 241, 231, 0.07);
  }
  .hero .btn-ghost:hover { border-color: var(--sun); color: var(--sun); }

  /* the daylight readout sat over the photo; keep it inside the photo panel */
  .hero-readout { right: clamp(1.25rem, 2.5vw, 2.5rem); }
}

/* The tall scroll track existed to give the louvers room to close. 220vh is
   still ample for the full tilt and takes roughly a screen and a half out of
   the page, which is the direction the whole home page is moving. */
html.js.motion .hero-wrap { height: 220vh; }