/* =========================================================
   Waterfall Blinds — design system
   Theme: mega-estate | dark-first ink canvas, glowing frames, light breaks
   Palette: petrol + chalk-pink undertone + walnut
   Fonts: Newsreader (display) + Sora (body/UI)
   ========================================================= */

/* ---------------------------------------------------------
   PALETTE — one warm family against a petrol ink.

   Ink is the canvas (petrol/teal, hue ~184). The accents are a single
   warm ramp running from clay (chalk-pink-deep, hue 11) through walnut
   (hue 20) to a lighter walnut (hue 22), so eyebrows, rules, step numbers
   and CTAs all read as ONE colour family rather than three unrelated ones.
   Every accent sits inside the network colour law: saturation 12–45%,
   lightness 35–62%, and clear of the mud-brown band (hue 20–45 at S 35–70%
   AND L 25–45%) — the walnut ramp is deliberately held at S ≈ 30%, which is
   what makes it read as soft walnut rather than the flat mud it was before.
   --------------------------------------------------------- */
:root {
  --ink: #0a2223;
  --ink-2: #0f2f31;
  --ink-3: #133a3c;
  --petrol: #144548;
  --petrol-light: #3c7377;
  --chalk-pink: #ecd8d2;
  --chalk-pink-deep: #c58374;   /* H11 S41% L61% — clay, the light-on-dark accent */
  --walnut: #7d5744;            /* H20 S30% L38% — the CTA / on-light accent      */
  --walnut-deep: #5e4032;       /* H19 S31% L28% — hover + pressed                */
  --walnut-light: #a8785c;      /* H22 S30% L51% — glow + subtle strokes          */
  --walnut-rgb: 125, 87, 68;
  --paper: #f7f0ea;
  --paper-2: #efe2d8;
  --paper-3: #e6d5c8;
  --text-dark: #201810;
  --text-dark-muted: #5c5049;
  --text-light: #f5efe9;
  --text-light-muted: #c7b9b3;

  --font-display: "Newsreader", serif;
  --font-body: "Sora", sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-pad: clamp(64px, 9vw, 104px);
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  interpolate-size: allow-keywords;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
svg { display: block; }

body {
  background: var(--paper);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: inherit;
}

h1 { font-size: clamp(2.6rem, 5.6vw, 4.5rem); font-weight: 500; }
h2 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--chalk-pink-deep);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--chalk-pink-deep);
  display: inline-block;
}
.on-light .eyebrow, section.light .eyebrow { color: var(--walnut); }
.on-light .eyebrow::before, section.light .eyebrow::before { background: var(--walnut); }

.lede {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 62ch;
  color: var(--text-light-muted);
}
section.light .lede { color: var(--text-dark-muted); }

/* self-drawing accent rule */
.rule {
  height: 1px;
  width: 100%;
  background: currentColor;
  opacity: 0.18;
  transform-origin: left;
}
.rule-draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease);
}
.rule-draw.is-visible { transform: scaleX(1); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  cursor: pointer;
  will-change: transform;
}
.btn-primary {
  background: var(--walnut);
  color: var(--text-light);
  box-shadow: 0 10px 26px -14px rgba(var(--walnut-rgb), 0.9);
}
.btn-primary:hover { background: var(--walnut-deep); box-shadow: 0 16px 34px -14px rgba(var(--walnut-rgb), 0.95); }
.btn-primary:active { background: var(--walnut-deep); box-shadow: 0 4px 12px -8px rgba(var(--walnut-rgb), 0.9); }
.btn:hover svg { transform: translateX(3px); }
.btn svg { transition: transform 0.25s var(--ease); }
.btn-outline {
  background: transparent;
  border-color: rgba(245, 239, 233, 0.45);
  color: var(--text-light);
}
.btn-outline:hover { border-color: var(--text-light); background: rgba(245,239,233,0.08); }
section.light .btn-outline { border-color: rgba(32,24,16,0.3); color: var(--text-dark); }
section.light .btn-outline:hover { border-color: var(--text-dark); background: rgba(32,24,16,0.06); }
.btn svg { width: 16px; height: 16px; }

.btn-magnetic { position: relative; }

/* ---------- nav ---------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 22px 0;
  transition: background-color 0.4s var(--ease), padding 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; }
.site-nav.is-scrolled {
  background: rgba(10, 34, 35, 0.92);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: -0.01em;
  color: var(--text-light);
}
.brand-mark rect { transition: fill 0.3s var(--ease); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}
.nav-links a {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-light-muted);
  position: relative;
  padding: 4px 0;
  transition: color 0.25s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text-light); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--chalk-pink-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  padding: 10px 20px;
  font-size: 0.82rem;
  border: 1px solid rgba(245,239,233,0.4);
  border-radius: var(--radius);
  color: var(--text-light);
  transition: all 0.25s var(--ease);
}
.nav-cta:hover { background: var(--text-light); color: var(--ink); }

.nav-toggle {
  display: none;
  width: 34px; height: 24px;
  position: relative;
  z-index: 101;
}
.nav-toggle span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--text-light);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), top 0.3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { top: 20px; }
.nav-toggle.is-open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.hero-media {
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
}
/* Scrim tuned so the photograph stays clearly readable through the top two
   thirds — the room, the glass and the sunset are the whole point of the shot —
   while the bottom band still carries enough density for white type. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,34,35,0.34) 0%,
      rgba(10,34,35,0.06) 26%,
      rgba(10,34,35,0.30) 52%,
      rgba(10,34,35,0.66) 74%,
      rgba(10,34,35,0.90) 100%),
    linear-gradient(90deg,
      rgba(10,34,35,0.48) 0%,
      rgba(10,34,35,0.10) 48%,
      rgba(10,34,35,0) 72%);
}
.hero-content {
  position: relative;
  /* the horizontal value must stay var(--gutter): this shorthand overrides
     .container's own padding, and a bare 0 put the headline, the CTAs and the
     trust row hard against the screen edge on anything under 1240px wide. */
  padding: clamp(120px, 18vw, 220px) var(--gutter) clamp(56px, 8vw, 96px);
  width: 100%;
}
.hero-content .eyebrow { color: var(--chalk-pink); }
.hero-content .eyebrow::before { background: var(--chalk-pink); }
.hero h1 {
  color: var(--text-light);
  max-width: 15ch;
  margin-top: 18px;
  text-shadow: 0 2px 26px rgba(10, 34, 35, 0.55);
}
.hero h1 .word { display: inline-block; overflow: hidden; padding-bottom: 0.06em; }
.hero h1 .word span { display: inline-block; }
.hero-content .eyebrow, .hero-sub, .trust-item { text-shadow: 0 1px 16px rgba(10, 34, 35, 0.6); }
.hero-sub {
  color: #e6dcd6;
  font-size: 1.12rem;
  max-width: 46ch;
  margin-top: 22px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 44px);
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid rgba(245,239,233,0.18);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-light-muted);
  font-size: 0.9rem;
}
.trust-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--chalk-pink-deep); }

/* ---------------------------------------------------------
   SIGNATURE MOMENT — "the fall"
   The site is called Waterfall, and a blind is a controlled fall of
   material. Ten slats drop in sequence out of the hero like a blind being
   let down, and three thin light-lines run down through them the way water
   finds a ledge. Scroll-triggered, one shot, entirely CSS + GSAP.
   --------------------------------------------------------- */
.slat-cascade {
  position: relative;
  height: clamp(96px, 15vw, 172px);
  background: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.slat-cascade .slat {
  flex: 1;
  background: var(--ink-2);
  border-top: 1px solid rgba(245,239,233,0.06);
  transform-origin: top;
}
html.motion .slat-cascade .slat { transform: scaleY(0); }
.slat-cascade .slat:nth-child(odd) { background: var(--ink-3); }
.slat-cascade .drip {
  position: absolute;
  top: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, rgba(197,131,116,0) 0%, var(--chalk-pink-deep) 45%, rgba(236,216,210,0.95) 100%);
  opacity: 0;
  pointer-events: none;
}
.slat-cascade .drip-a { left: 14%; }
.slat-cascade .drip-b { left: 47%; }
.slat-cascade .drip-c { left: 78%; }
@media (prefers-reduced-motion: reduce) {
  .slat-cascade .slat, html.motion .slat-cascade .slat { transform: none; }
  .slat-cascade .drip { display: none; }
}

/* ---------- marquee ---------- */
.marquee {
  background: var(--petrol);
  color: var(--text-light);
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid rgba(245,239,233,0.1);
  border-bottom: 1px solid rgba(245,239,233,0.1);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.marquee-track span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--chalk-pink);
  padding: 0 2.2em;
  white-space: nowrap;
}
.marquee-track span::after { content: "—"; margin-left: 2.2em; color: var(--petrol-light); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
section { position: relative; padding: var(--section-pad) 0; }
section.dark { background: var(--ink); color: var(--text-light); }
section.light { background: var(--paper); color: var(--text-dark); }
section.paper2 { background: var(--paper-2); color: var(--text-dark); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.section-head h2 { margin-top: 14px; }
.section-head .lede { margin-top: 14px; }

/* Reveal targets are VISIBLE by default and only hidden once the inline head
   script has confirmed that (a) JS runs and (b) the visitor has not asked for
   reduced motion. No script, a blocked CDN, a thrown error or reduce-motion all
   leave the page fully readable — content is never stranded at opacity 0. */
.reveal { opacity: 1; transform: none; }
html.motion .reveal { opacity: 0; transform: translateY(34px); }
html.motion .reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal, html.motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--paper-3);
  border: 1px solid var(--paper-3);
}
.product-card {
  position: relative;
  background: var(--paper);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background-color 0.3s var(--ease);
}
.product-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--walnut);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.product-card:hover { background: var(--paper-2); }
.product-card:hover::after, .product-card:focus-within::after { transform: scaleX(1); }
.product-icon {
  width: 52px; height: 52px;
  color: var(--petrol);
}
.product-icon svg { width: 100%; height: 100%; }
.product-card:hover .product-icon { color: var(--chalk-pink-deep); }
.product-card h3 { font-size: 1.1rem; }
.product-card p { font-size: 0.94rem; color: var(--text-dark-muted); flex-grow: 1; }
.product-link {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--walnut);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.product-link:hover { color: var(--walnut-deep); gap: 12px; }
.product-link svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.product-card:hover .product-link svg { transform: translateX(5px); }

/* honest coverage note under the range grid */
.range-note {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 26px;
  border-top: 1px solid rgba(32,24,16,0.14);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
}
.range-note .eyebrow { margin-top: 4px; }
.range-note p { font-size: 0.96rem; color: var(--text-dark-muted); max-width: 74ch; }
.range-note p + p { margin-top: 12px; }
@media (max-width: 680px) { .range-note { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- editorial photo section (glowing frames) ---------- */
.editorial {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
}
.frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(245,239,233,0.12), 0 40px 80px -30px rgba(197,131,116,0.35), 0 20px 50px -20px rgba(0,0,0,0.5);
  transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.frame:hover { box-shadow: 0 0 0 1px rgba(245,239,233,0.2), 0 48px 92px -28px rgba(197,131,116,0.5), 0 24px 56px -20px rgba(0,0,0,0.55); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(.2,.7,.2,1); }
.frame:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .frame, .frame img { transition: none; }
  .frame:hover img { transform: none; }
}
.frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 22px;
  background: linear-gradient(0deg, rgba(10,34,35,0.85), transparent);
  color: var(--text-light);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}
.editorial-col { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 32px); }
.frame-tall { aspect-ratio: 3 / 4; }
.frame-wide { aspect-ratio: 4 / 3; }

/* ---------- locale section ---------- */
.locale {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.locale-facts {
  display: grid;
  gap: 22px;
}
.locale-fact {
  position: relative;
  padding: 20px 0 0;
  border-top: 1px solid rgba(32,24,16,0.14);
}
/* thin accent rule that draws itself in — visible by default, animated only
   when the motion class is present */
.locale-fact::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--walnut);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}
html.motion .locale-fact::before { transform: scaleX(0); }
html.motion .locale.is-visible .locale-fact::before { transform: scaleX(1); }
.locale-fact:nth-child(2)::before { transition-delay: 0.1s; }
.locale-fact:nth-child(3)::before { transition-delay: 0.2s; }
.locale-fact:nth-child(4)::before { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .locale-fact::before, html.motion .locale-fact::before { transform: scaleX(1); transition: none; }
}
.locale-fact .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--walnut);
  display: block;
  margin-bottom: 6px;
}

/* ---------- process ---------- */
.process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.process-step { position: relative; border-top: 1px solid rgba(245,239,233,0.2); padding-top: 22px; }
.process-step::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--chalk-pink-deep);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
}
html.motion .process-step::before { transform: scaleX(0); }
html.motion .process-list.is-visible .process-step::before { transform: scaleX(1); }
.process-step:nth-child(2)::before { transition-delay: 0.12s; }
.process-step:nth-child(3)::before { transition-delay: 0.24s; }
.process-step:nth-child(4)::before { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .process-step::before, html.motion .process-step::before { transform: scaleX(1); transition: none; }
}
.process-step .step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--chalk-pink-deep);
  display: block;
  margin-bottom: 14px;
}
.process-step h3 { color: var(--text-light); margin-bottom: 8px; }
.process-step p { color: var(--text-light-muted); font-size: 0.94rem; }

/* ---------- area chips ---------- */
.area-chips { display: flex; flex-wrap: wrap; gap: 14px; }
.area-chip {
  padding: 13px 24px;
  border: 1px solid rgba(32,24,16,0.22);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s var(--ease);
}
.area-chip:hover { border-color: var(--walnut); background: var(--walnut); color: var(--text-light); }
.area-chip svg { width: 14px; height: 14px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; }
.faq-item {
  border-bottom: 1px solid rgba(32,24,16,0.16);
}
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  transition: color 0.25s var(--ease);
}
.faq-item summary:hover { color: var(--walnut); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute; background: var(--walnut);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.faq-icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faq-item[open] .faq-icon::before { transform: translateY(-50%) rotate(180deg); }
.faq-item[open] .faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-item p { padding: 0 0 26px; max-width: 62ch; color: var(--text-dark-muted); }
/* content slides open rather than snapping; harmless where unsupported */
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.4s var(--ease), content-visibility 0.4s;
  transition-behavior: allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content { transition: none; }
}

/* ---------- closing CTA ---------- */
.cta-close {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-glow {
  position: absolute; inset: -20%;
  z-index: 0;
  filter: blur(60px);
  opacity: 0.55;
}
.cta-glow span {
  position: absolute;
  border-radius: 50%;
  animation: drift 22s ease-in-out infinite;
}
.cta-glow span:nth-child(1) { width: 42vw; height: 42vw; background: var(--petrol-light); top: -10%; left: -6%; animation-delay: 0s; }
.cta-glow span:nth-child(2) { width: 34vw; height: 34vw; background: var(--chalk-pink-deep); bottom: -12%; right: -4%; animation-delay: -7s; }
.cta-glow span:nth-child(3) { width: 26vw; height: 26vw; background: var(--walnut-light); top: 30%; right: 22%; animation-delay: -14s; }
@keyframes drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(4%, -6%) scale(1.12); }
  66% { transform: translate(-5%, 5%) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) { .cta-glow span { animation: none; } }
.cta-close .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.cta-close h2 { color: var(--text-light); max-width: 16ch; }
.cta-close .lede { text-align: center; }

/* ---------- form ---------- */
.enquiry {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.form-card {
  background: var(--paper);
  border: 1px solid rgba(32,24,16,0.12);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text-dark-muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(32,24,16,0.22);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.96rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(32,24,16,0.4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--walnut);
  box-shadow: 0 0 0 3px rgba(var(--walnut-rgb), 0.16);
}
.field textarea { resize: vertical; min-height: 110px; }
.field .hint { display: block; font-size: 0.78rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--text-dark-muted); margin-top: 6px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-status { font-size: 0.9rem; margin-top: 14px; min-height: 1.2em; color: var(--walnut-deep); }
.form-status.is-error { color: #9c3a2c; }
.popia-note {
  font-size: 0.82rem;
  color: var(--text-dark-muted);
  margin-top: 18px;
  line-height: 1.6;
}
.form-success {
  display: none;
  padding: 18px 20px;
  background: var(--paper-2);
  border-left: 3px solid var(--walnut);
  font-size: 0.94rem;
  margin-top: 18px;
}
.form-success.is-visible { display: block; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--text-light-muted); padding: 72px 0 32px; }
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(245,239,233,0.14);
}
.footer-brand { max-width: 340px; }
.footer-brand .brand { margin-bottom: 14px; }
.footer-cols { display: flex; gap: clamp(32px, 6vw, 80px); flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chalk-pink-deep);
  margin-bottom: 16px;
}
.footer-col a, .footer-col span { display: block; font-size: 0.9rem; margin-bottom: 10px; color: var(--text-light-muted); transition: color 0.25s var(--ease); }
.footer-col a:hover { color: var(--text-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
  font-size: 0.8rem;
  color: var(--text-light-muted);
}
.footer-bottom .popia-note { color: var(--text-light-muted); margin: 0; max-width: 60ch; }

/* ---------- chat widget ---------- */
.chat-launcher {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--walnut);
  color: var(--text-light);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px -8px rgba(10,34,35,0.55);
  z-index: 200;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.chat-launcher:hover { transform: scale(1.06); background: var(--walnut-deep); }
.chat-launcher svg { width: 26px; height: 26px; }
.chat-launcher .icon-close { display: none; }
.chat-launcher.is-open .icon-chat { display: none; }
.chat-launcher.is-open .icon-close { display: block; }

.chat-panel {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(88px, 12vw, 108px);
  width: min(370px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 140px));
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.45);
  z-index: 199;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.chat-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-head {
  background: var(--ink);
  color: var(--text-light);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-head .brand-mark { width: 26px; height: 26px; }
.chat-head-text { flex-grow: 1; }
.chat-head-text strong { display: block; font-family: var(--font-display); font-size: 1rem; }
.chat-head-text span { font-size: 0.76rem; color: var(--text-light-muted); }
.chat-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 18px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.chat-msg.bot { background: var(--paper-2); align-self: flex-start; border-bottom-left-radius: 3px; }
.chat-msg.user { background: var(--petrol); color: var(--text-light); align-self: flex-end; border-bottom-right-radius: 3px; }
.chat-popia {
  font-size: 0.72rem;
  color: var(--text-dark-muted);
  align-self: flex-start;
  padding: 0 4px;
  line-height: 1.5;
}
.chat-typing { display: flex; gap: 5px; align-items: center; padding: 14px; }
.chat-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--walnut-light);
  animation: chatdot 1.1s ease-in-out infinite;
}
.chat-typing i:nth-child(2) { animation-delay: 0.16s; }
.chat-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes chatdot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; opacity: 0.6; } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 14px; }
.chat-chip {
  padding: 8px 14px;
  border: 1px solid rgba(32,24,16,0.22);
  border-radius: 999px;
  font-size: 0.8rem;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.chat-chip:hover { background: var(--walnut); border-color: var(--walnut); color: var(--text-light); transform: translateY(-1px); }
.chat-launcher .chat-ping {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--walnut-light);
  opacity: 0;
  animation: ping 3.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes ping {
  0% { transform: scale(0.92); opacity: 0.65; }
  55%, 100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .chat-launcher .chat-ping { animation: none; display: none; } }
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(32,24,16,0.12);
  background: #fff;
}
.chat-input-row input {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 0.9rem;
  padding: 8px 4px;
  background: transparent;
}
.chat-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--walnut);
  color: var(--text-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-send svg { width: 16px; height: 16px; }

/* ---------- page hero (interior pages) ---------- */
.page-hero {
  background: var(--ink);
  color: var(--text-light);
  padding: clamp(140px, 20vw, 190px) 0 clamp(56px, 8vw, 80px);
}
.page-hero .eyebrow { color: var(--chalk-pink); }
.page-hero .eyebrow::before { background: var(--chalk-pink); }
.page-hero h1 { color: var(--text-light); max-width: 20ch; margin-top: 16px; }
.page-hero .lede { margin-top: 18px; }
.breadcrumb {
  font-size: 0.82rem;
  color: var(--text-light-muted);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--text-light-muted); }
.breadcrumb a:hover { color: var(--text-light); }

.spec-list { display: grid; gap: 18px; }
.spec-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid rgba(32,24,16,0.12); }
.spec-item svg { width: 22px; height: 22px; color: var(--walnut); flex-shrink: 0; margin-top: 3px; }
/* a spec row is a text row — never let a stray photo blow the layout open */
.spec-item > img { width: 22px !important; height: 22px !important; aspect-ratio: 1 !important; object-fit: cover; border-radius: 2px; flex: 0 0 auto; margin-top: 3px; }
.spec-item h4 { font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; margin-bottom: 4px; }
.spec-item p { font-size: 0.92rem; color: var(--text-dark-muted); margin: 0; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }

.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.related-card {
  border: 1px solid rgba(32,24,16,0.14);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.related-card:hover { border-color: var(--walnut); transform: translateY(-4px); }
.related-card .product-icon { width: 38px; height: 38px; margin-bottom: 14px; }
.related-card h4 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 8px; }
.related-card p { font-size: 0.86rem; color: var(--text-dark-muted); }

/* ---------- area page specific ---------- */
.fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fit-card {
  padding: 26px;
  background: var(--paper-2);
  border-radius: var(--radius);
}
.fit-card h4 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 10px; }
.fit-card p { font-size: 0.9rem; color: var(--text-dark-muted); }
.fit-card h4 a, .fit-card p a { color: var(--walnut); text-decoration: underline; text-underline-offset: 3px; }
.fit-card h4 a:hover, .fit-card p a:hover { color: var(--walnut-deep); }

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--walnut);
  outline-offset: 3px;
  border-radius: 2px;
}
/* on the ink sections the warm walnut disappears — switch to chalk */
.hero a:focus-visible, .site-nav a:focus-visible, .site-nav button:focus-visible,
section.dark a:focus-visible, .site-footer a:focus-visible,
.chat-launcher:focus-visible, .chat-head a:focus-visible {
  outline-color: var(--chalk-pink);
}

/* skip link */
.skip-link {
  position: fixed;
  left: 16px; top: -60px;
  z-index: 300;
  background: var(--walnut);
  color: var(--text-light);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 600;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .fit-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .nav-links {
    position: fixed; inset: 0;
    background: var(--ink);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 30px;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
  }
  .nav-links.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform 0.4s var(--ease), visibility 0s; }
  .nav-links a { font-size: 1.2rem; }
  .nav-toggle { display: block; }
  .nav-cta { display: inline-flex; margin-top: 10px; }
  .editorial, .locale, .enquiry, .two-up { grid-template-columns: 1fr; }
  .editorial-col.frame-tall, .editorial > .frame-tall { order: 2; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 880px) {
  .nav-links { transition: none; }
}
@media (max-width: 680px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .process-list { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .fit-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; }
  .hero { align-items: flex-end; }
  .trust-row { flex-direction: column; gap: 14px; }
}

/* pthumb-injected */
/* --- product photo thumbnails (replaced the old line-drawn icons) --- */
.pthumb{width:100%!important;height:auto!important;max-width:none!important;
  aspect-ratio:4/3;overflow:hidden;display:block;margin:0 0 18px;
  background:rgba(0,0,0,.04)}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.product-card:hover .pthumb img,.cell:hover .pthumb img,.card:hover .pthumb img,
.related-card:hover .pthumb img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){
  .pthumb img{transition:none}
  .product-card:hover .pthumb img,.cell:hover .pthumb img,.card:hover .pthumb img,
  .related-card:hover .pthumb img{transform:none}}


/* roller shutters are shading products, not security products — see design-brief.md */
.rs-note{font-size:.94rem;line-height:1.6;opacity:.85;margin:14px 0 0;
  padding:12px 14px;border-left:2px solid currentColor}
.rs-note strong{font-weight:600}

/* =========================================================
   CRAFT APPENDIX — the 200–300ms detail layer
   ========================================================= */

/* the hero photo lives inside .hero-media; it must never inherit the
   product-thumbnail box rules */
.hero-media.pthumb { width: 100% !important; height: 100% !important; aspect-ratio: auto; margin: 0; background: var(--ink); }

/* brand mark: the slats keep falling a hair further on hover, and the last one
   — the one already carrying the accent — catches the light */
.brand-mark rect { transition: fill 0.3s var(--ease), transform 0.45s var(--ease); }
.brand:hover .brand-mark rect:nth-of-type(3) { transform: translate(1px, 1px); }
.brand:hover .brand-mark rect:nth-of-type(4) { transform: translate(2px, 1.5px); }
.brand:hover .brand-mark rect:last-of-type { transform: translate(3px, 2px); fill: var(--chalk-pink); }
@media (prefers-reduced-motion: reduce) {
  .brand-mark rect { transition: fill 0.3s var(--ease); }
  .brand:hover .brand-mark rect { transform: none; }
}

/* marquee: hold still when someone is reading it */
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }

/* area chips lift a hair */
.area-chip:hover { transform: translateY(-2px); }
.area-chip svg { transition: transform 0.25s var(--ease); }
.area-chip:hover svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .area-chip:hover { transform: none; }
  .area-chip:hover svg { transform: none; }
}

/* related cards read as links */
.related-card { display: block; }
.related-card h4 { transition: color 0.25s var(--ease); }
.related-card:hover h4 { color: var(--walnut); }
@media (prefers-reduced-motion: reduce) { .related-card:hover { transform: none; } }

/* fit cards (area pages) */
.fit-card { transition: transform 0.3s var(--ease), background-color 0.3s var(--ease); }
.fit-card:hover { background: var(--paper-3); }
@media (prefers-reduced-motion: reduce) { .fit-card { transition: none; } }

/* footer links: an underline that hugs the words, not the whole column */
.footer-col a { text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease); }
.footer-col a:hover { color: var(--text-light); text-decoration: underline; text-decoration-color: var(--chalk-pink-deep); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* chat panel: quiet scrollbar, and never taller than the viewport on a phone */
.chat-body { scrollbar-width: thin; scrollbar-color: rgba(32,24,16,0.28) transparent; }
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(32,24,16,0.24); border-radius: 3px; }
.chat-launcher { position: fixed; }

/* the intro column tracks the form on wide screens (the form itself never sticks) */
.enquiry > .reveal:first-child { position: sticky; top: 120px; }
@media (max-width: 880px) { .enquiry > .reveal:first-child { position: static; } }

/* honest, human error/empty states never shift the layout */
.form-card { position: relative; }

/* print: no one prints a lead-gen page, but if they do, show everything */
@media print {
  .reveal, html.motion .reveal { opacity: 1 !important; transform: none !important; }
  .chat-widget, .site-nav, .marquee, .slat-cascade { display: none !important; }
}

/* =========================================================
   THE LEAD LADDER — added 6 Aug 2026
   Rung 1  guide.html ("The Waterfall Glass & Light Dossier")
   Rung 2  the ballpark window list (#ballpark)
   Rung 3  the free expert measure, with timeframe routing
   Built from the same tokens as the rest of the site: petrol ink,
   chalk-pink on dark, walnut on light. No new colours.
   ========================================================= */

/* paper2 was only ever used behind the FAQ; the dossier leans on it,
   so it now gets the same on-light treatment as section.light */
section.paper2 .eyebrow { color: var(--walnut); }
section.paper2 .eyebrow::before { background: var(--walnut); }
section.paper2 .lede { color: var(--text-dark-muted); }
section.paper2 .btn-outline { border-color: rgba(32,24,16,0.3); color: var(--text-dark); }
section.paper2 .btn-outline:hover { border-color: var(--text-dark); background: rgba(32,24,16,0.06); }

/* ---------- dossier hero ---------- */
.guide-hero .lede { max-width: 54ch; }
.guide-hero .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.guide-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid rgba(245,239,233,0.18);
}
.guide-jump a {
  font-size: 0.84rem;
  color: var(--text-light-muted);
  position: relative;
  padding: 5px 0 4px;
  transition: color 0.25s var(--ease);
}
.guide-jump a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--chalk-pink-deep);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.guide-jump a:hover { color: var(--text-light); }
.guide-jump a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .guide-jump a::after { transition: none; } }

/* ---------- dossier prose ---------- */
.guide-prose > * + * { margin-top: 18px; }
.guide-prose p { max-width: 68ch; }
.guide-prose.wide p { max-width: 74ch; }
.guide-prose h2 { margin-top: 14px; max-width: 22ch; }
.guide-prose h3 { margin-top: 26px; }
section.dark .guide-prose p { color: var(--text-light-muted); }
section.light .guide-prose p, section.paper2 .guide-prose p { color: var(--text-dark-muted); }
.guide-prose em { font-style: italic; }
.guide-prose strong { font-weight: 600; }
section.light .guide-prose strong, section.paper2 .guide-prose strong { color: var(--text-dark); }
section.dark .guide-prose strong { color: var(--text-light); }

.guide-lead { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.guide-figure figcaption { font-size: 0.84rem; }

.guide-aside {
  margin-top: 28px;
  padding: 20px 22px;
  border-left: 2px solid var(--chalk-pink-deep);
  background: rgba(197,131,116,0.08);
  font-size: 0.95rem;
}
section.light .guide-aside, section.paper2 .guide-aside {
  border-left-color: var(--walnut);
  background: rgba(var(--walnut-rgb), 0.07);
}

/* ---------- sun-path diagram ---------- */
.sun-fig { margin-bottom: clamp(36px, 5vw, 56px); }
.sun-fig figure { max-width: 780px; }
.sun-diagram {
  width: 100%; height: auto;
  color: var(--text-light);
  background: var(--ink-2);
  border: 1px solid rgba(245,239,233,0.12);
  border-radius: var(--radius);
  padding: 8px;
}
.sun-diagram text { font-family: var(--font-body); letter-spacing: 0.01em; }
.sun-fig figcaption { margin-top: 14px; font-size: 0.88rem; color: var(--text-light-muted); max-width: 62ch; }

/* ---------- fact row (dark) ---------- */
.fact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 34px); margin-bottom: clamp(36px, 5vw, 56px); }
.fact-row .locale-fact { border-top-color: rgba(245,239,233,0.2); }
.fact-row .locale-fact::before, html.motion .fact-row .locale-fact::before { background: var(--chalk-pink-deep); }
.fact-row .locale-fact .num { color: var(--chalk-pink-deep); font-size: 1.5rem; }
.fact-row .locale-fact p { color: var(--text-light-muted); font-size: 0.92rem; }
html.motion .fact-row.is-visible .locale-fact::before { transform: scaleX(1); }

/* ---------- elevation cards ---------- */
.elev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--paper-3); border: 1px solid var(--paper-3); }
.elev-card { background: var(--paper); padding: clamp(24px, 3.4vw, 36px); }
.elev-tag {
  display: inline-block;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--walnut);
  padding: 5px 12px;
  border: 1px solid rgba(var(--walnut-rgb), 0.4);
  border-radius: 999px;
  margin-bottom: 16px;
}
.elev-tag.alt { color: var(--petrol); border-color: rgba(20,69,72,0.35); }
.elev-card h3 { font-size: 1.25rem; margin-bottom: 12px; max-width: 24ch; }
.elev-card p { font-size: 0.95rem; color: var(--text-dark-muted); max-width: 56ch; }

.elev-extra { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; margin-top: clamp(32px, 5vw, 52px); }

/* ---------- recommendation cards ---------- */
.rec-list { display: grid; gap: clamp(18px, 2.6vw, 26px); }
.rec {
  background: var(--paper);
  border: 1px solid rgba(32,24,16,0.12);
  border-radius: var(--radius);
  padding: clamp(24px, 3.2vw, 38px);
  position: relative;
  transition: border-color 0.3s var(--ease);
}
.rec:hover { border-color: rgba(var(--walnut-rgb), 0.45); }
@media (prefers-reduced-motion: reduce) { .rec { transition: none; } }
.rec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 16px; }
.rec-head h3 { font-size: 1.45rem; }
.rec-where {
  order: -1;
  width: 100%;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--walnut);
}
.rec p { font-size: 0.97rem; color: var(--text-dark-muted); max-width: 76ch; }
.rec p + p { margin-top: 14px; }
.rec p strong { color: var(--text-dark); font-weight: 600; }
.rec-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rec-add {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  padding: 11px 20px;
  border: 1px solid rgba(var(--walnut-rgb), 0.45);
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--walnut);
  background: transparent;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.rec-btns .rec-add { margin-top: 0; }
.rec-add::before { content: "+"; font-size: 1.05rem; line-height: 1; }
.rec-add:hover { background: var(--walnut); border-color: var(--walnut); color: var(--text-light); }
.rec-add.is-added {
  background: var(--paper-2);
  border-color: rgba(32,24,16,0.16);
  color: var(--text-dark-muted);
  cursor: default;
}
.rec-add.is-added::before { content: "\2713"; font-size: 0.86rem; }
.rec-add:disabled { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rec-add { transition: none; } }

.rec-figures { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 26px); }
.rec-figures .frame { box-shadow: 0 0 0 1px rgba(32,24,16,0.1), 0 26px 54px -28px rgba(32,24,16,0.4); }
.rec-figures .frame:hover { box-shadow: 0 0 0 1px rgba(var(--walnut-rgb),0.35), 0 32px 64px -26px rgba(32,24,16,0.45); }

/* ---------- what only a visit settles ---------- */
.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3.2vw, 40px); }
.check-item { border-top: 1px solid rgba(32,24,16,0.16); padding-top: 20px; }
.check-num {
  font-family: var(--font-display); font-style: italic;
  font-size: 2rem; color: var(--walnut);
  display: block; margin-bottom: 10px;
}
.check-item h3 { font-size: 1.12rem; margin-bottom: 8px; }
.check-item p { font-size: 0.93rem; color: var(--text-dark-muted); }

/* ---------- the close ---------- */
.ladder-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.promise { display: grid; gap: 14px; margin-bottom: 24px; }
.promise-item { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; color: var(--text-dark-muted); }
.promise-item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--walnut); margin-top: 1px; }
.capacity-note {
  font-size: 0.92rem;
  color: var(--text-dark-muted);
  padding: 16px 18px;
  border-left: 2px solid var(--walnut);
  background: rgba(var(--walnut-rgb), 0.07);
}
.ladder-alt { margin-top: 20px; font-size: 0.95rem; color: var(--text-dark-muted); max-width: 60ch; scroll-margin-top: 110px; }
.ladder-alt strong { color: var(--text-dark); font-weight: 600; }
.ladder-fig { margin-top: 26px; }

/* ---------- interest checkboxes ---------- */
.interest-field { border: 0; padding: 0; margin: 0 0 20px; }
.legend {
  display: block;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dark-muted);
  margin-bottom: 10px; padding: 0;
}
.interest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.interest-grid label {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.88rem; color: var(--text-dark-muted);
  padding: 5px 0; cursor: pointer;
  line-height: 1.45;
}
.interest-grid input { width: 16px; height: 16px; flex: none; margin-top: 3px; accent-color: var(--walnut); }
.interest-grid input:checked + span { color: var(--text-dark); font-weight: 600; }
.carry-note { font-size: 0.84rem; color: var(--text-dark-muted); margin: 8px 0 0; line-height: 1.55; }
.carry-note strong { color: var(--text-dark); }

/* ---------- thank-you panels ---------- */
.form-success h3, .lead-thanks h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 8px; }
.form-success p, .lead-thanks p { color: var(--text-dark-muted); font-size: 0.94rem; margin: 0 0 10px; }
.form-success p:last-child, .lead-thanks p:last-child { margin-bottom: 0; }
.form-success a, .lead-thanks a { color: var(--walnut-deep); text-decoration: underline; text-underline-offset: 3px; }
.lead-thanks {
  margin-top: 18px; padding: 18px 20px;
  background: var(--paper-2);
  border-left: 3px solid var(--walnut);
  font-size: 0.94rem;
}
form.is-sent button:disabled { opacity: 0.75; cursor: default; }

/* ---------- inline dossier capture ---------- */
.guide-capture {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  padding: clamp(26px, 3.6vw, 42px);
  background: var(--paper-2);
  border: 1px solid rgba(32,24,16,0.12);
  border-radius: var(--radius);
}
.guide-capture--wide { margin-top: 0; }
.guide-capture__copy h3 { font-size: 1.4rem; margin: 12px 0 10px; }
.guide-capture__copy p { font-size: 0.95rem; color: var(--text-dark-muted); max-width: 46ch; }
.guide-capture__copy p + p { margin-top: 12px; }
.gc-links a { color: var(--walnut); text-decoration: underline; text-underline-offset: 3px; }
.gc-links a:hover { color: var(--walnut-deep); }
.gc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gc-row .field { margin-bottom: 14px; }
.gc-submit { display: flex; align-items: flex-end; }
.gc-submit .btn { width: 100%; justify-content: center; }
.guide-capture .popia-note { margin-top: 4px; }
.guide-capture .form-success { grid-column: 1 / -1; }

/* ---------- Rung 2: the ballpark window list ---------- */
.ballpark {
  border: 1px solid rgba(32,24,16,0.16);
  border-radius: var(--radius);
  background: var(--paper-2);
  margin: 0 0 20px;
}
.ballpark > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  font-size: 0.9rem; font-weight: 600;
  transition: color 0.25s var(--ease);
}
.ballpark > summary::-webkit-details-marker { display: none; }
.ballpark > summary:hover { color: var(--walnut); }
.ballpark .chev { width: 15px; height: 15px; flex: none; transition: transform 0.3s var(--ease); }
.ballpark[open] > summary .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ballpark .chev { transition: none; } }
.bp-inner { padding: 0 18px 20px; }
.bp-pairing { font-size: 0.88rem; color: var(--text-dark-muted); margin: 0 0 16px; max-width: 66ch; }
.bp-pairing strong { color: var(--text-dark); font-weight: 600; }
.bp-scroll { overflow-x: auto; }
.bp-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.bp-table th {
  text-align: left; font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dark-muted);
  padding: 0 8px 8px 0; white-space: nowrap;
  border-bottom: 1px solid rgba(32,24,16,0.16);
}
.bp-table td { padding: 6px 8px 6px 0; vertical-align: middle; }
.bp-table input, .bp-table select {
  width: 100%; min-width: 92px;
  padding: 9px 10px;
  border: 1px solid rgba(32,24,16,0.22);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.86rem;
  transition: border-color 0.25s var(--ease);
}
.bp-table input:focus, .bp-table select:focus { outline: none; border-color: var(--walnut); box-shadow: 0 0 0 3px rgba(var(--walnut-rgb), 0.16); }
.bp-table td.bp-rm { width: 40px; padding-right: 0; }
.bp-remove {
  width: 32px; height: 32px; line-height: 1;
  border: 1px solid rgba(32,24,16,0.22);
  border-radius: 50%;
  color: var(--text-dark-muted);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.bp-remove:hover { border-color: var(--walnut-deep); color: var(--walnut-deep); }
.bp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(32,24,16,0.22);
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-dark);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.bp-btn:hover { border-color: var(--walnut); color: var(--walnut); }
.bp-btn svg { width: 14px; height: 14px; }
.bp-count { font-size: 0.82rem; color: var(--text-dark-muted); margin: 14px 0 0; }
.bp-foot { font-size: 0.79rem; color: var(--text-dark-muted); margin: 10px 0 0; line-height: 1.6; }
.bp-print-head { display: none; }
.bp-holder { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- sources ---------- */
.sources ol { counter-reset: src; max-width: 84ch; }
.sources li {
  counter-increment: src;
  position: relative;
  padding: 0 0 16px 44px;
  font-size: 0.9rem;
  color: var(--text-light-muted);
  line-height: 1.65;
}
.sources li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 0.95rem;
  color: var(--chalk-pink-deep);
}
.sources a { color: var(--chalk-pink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sources a:hover { color: var(--text-light); }
.sources-note { margin-top: 18px; font-size: 0.86rem; color: var(--text-light-muted); max-width: 80ch; opacity: 0.9; }

/* ---------- homepage dossier promo ---------- */
.guide-promo { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(26px, 4.5vw, 60px); align-items: center; }
.guide-promo h2 { margin-top: 14px; max-width: 18ch; }
.guide-promo p { color: var(--text-dark-muted); margin-top: 16px; max-width: 54ch; }
.guide-promo .btn { margin-top: 26px; }
.guide-promo-list { margin-top: 22px; display: grid; gap: 9px; }
.guide-promo-list li { position: relative; padding-left: 22px; font-size: 0.93rem; color: var(--text-dark-muted); }
.guide-promo-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 1px; background: var(--walnut);
}
.hero-guide-link {
  display: inline-flex; align-items: center; gap: 9px;
  max-width: 100%;
  margin-top: 22px;
  font-size: 0.9rem; font-weight: 500;
  color: var(--chalk-pink);
  border-bottom: 1px solid rgba(236,216,210,0.4);
  padding-bottom: 3px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.hero-guide-link span { min-width: 0; }
.hero .hero-guide-link { text-shadow: 0 1px 16px rgba(10, 34, 35, 0.72); }
.hero-guide-link:hover { color: var(--text-light); border-color: var(--text-light); gap: 13px; }
.hero-guide-link svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .hero-guide-link { transition: none; } }

/* ---------- area-page dossier note ---------- */
.area-guide {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--paper-2);
  border-left: 3px solid var(--walnut);
  border-radius: var(--radius);
}
.area-guide h3 { font-size: 1.2rem; margin-bottom: 8px; }
.area-guide p { font-size: 0.94rem; color: var(--text-dark-muted); max-width: 58ch; }
.area-guide .btn { flex-shrink: 0; }

/* ---------- ladder responsive ---------- */
@media (max-width: 1080px) {
  .fact-row { grid-template-columns: 1fr 1fr; }
  .check-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .guide-lead, .elev-extra, .ladder-grid, .guide-capture, .guide-promo { grid-template-columns: 1fr; }
  .elev-grid { grid-template-columns: 1fr; }
  .rec-figures { grid-template-columns: 1fr; }
  .guide-lead .guide-figure { order: -1; }
}
@media (max-width: 680px) {
  .fact-row { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .interest-grid { grid-template-columns: 1fr; }
  .gc-row { grid-template-columns: 1fr; }
  .guide-jump { gap: 8px 18px; }
}

/* ---------- the ballpark rows become stacked cards when space is tight ----------
   The panel lives inside the enquiry form column, which is narrower than the
   viewport, so the decision is made on the CONTAINER's width, not the window's.
   The viewport media query below is the fallback for engines without container
   queries — it guarantees the stacked layout on a phone either way, and print
   puts the real table back so the paper list reads as a grid.               */
.bp-inner { container-type: inline-size; }

@container (max-width: 640px) {
  .bp-scroll { overflow-x: visible; }
  .bp-table, .bp-table tbody, .bp-table tr, .bp-table td { display: block; width: 100%; }
  .bp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bp-table tr.bp-row {
    position: relative;
    border: 1px solid rgba(32,24,16,0.16);
    border-radius: var(--radius);
    padding: 14px 44px 4px 14px;
    margin-bottom: 12px;
    background: var(--paper);
  }
  .bp-table td { padding: 0 0 12px; }
  .bp-table td[data-lbl]::before {
    content: attr(data-lbl);
    display: block;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-dark-muted);
    margin-bottom: 5px;
  }
  .bp-table td.bp-rm { position: absolute; top: 12px; right: 12px; width: auto; padding: 0; }
  .bp-table td.bp-rm::before { content: none; }
}

@media (max-width: 640px) {
  .bp-scroll { overflow-x: visible; }
  .bp-table, .bp-table tbody, .bp-table tr, .bp-table td { display: block; width: 100%; }
  .bp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bp-table tr.bp-row {
    position: relative;
    border: 1px solid rgba(32,24,16,0.16);
    border-radius: var(--radius);
    padding: 14px 44px 4px 14px;
    margin-bottom: 12px;
    background: var(--paper);
  }
  .bp-table td { padding: 0 0 12px; }
  .bp-table td[data-lbl]::before {
    content: attr(data-lbl);
    display: block;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-dark-muted);
    margin-bottom: 5px;
  }
  .bp-table td.bp-rm { position: absolute; top: 12px; right: 12px; width: auto; padding: 0; }
  .bp-table td.bp-rm::before { content: none; }
}

/* ---------- print: the ballpark becomes a paper window list ---------- */
@media print {
  .skip-link, .guide-jump, .cta-close { display: none !important; }
  .sources a { text-decoration: none; }
}
@media print {
  body.bp-printing section { display: none !important; }
  body.bp-printing section#measure,
  body.bp-printing section#enquiry { display: block !important; padding: 0 !important; }
  body.bp-printing .page-hero, body.bp-printing .hero, body.bp-printing .site-footer,
  body.bp-printing .section-head, body.bp-printing .ladder-side,
  body.bp-printing .enquiry > .reveal:first-child, body.bp-printing .guide-capture,
  body.bp-printing .two-col, body.bp-printing .interest-field,
  body.bp-printing .field:not(.bp-holder), body.bp-printing form > button,
  body.bp-printing .popia-note, body.bp-printing .form-success,
  body.bp-printing .lead-thanks, body.bp-printing .ballpark > summary,
  body.bp-printing .bp-pairing, body.bp-printing .bp-actions,
  body.bp-printing .bp-count, body.bp-printing .bp-foot,
  body.bp-printing .bp-remove, body.bp-printing td.bp-rm { display: none !important; }
  body.bp-printing .ladder-grid, body.bp-printing .enquiry { display: block !important; }
  body.bp-printing .form-card { border: none !important; padding: 0 !important; background: #fff !important; }
  body.bp-printing .ballpark { border: none !important; background: #fff !important; margin: 0 !important; }
  body.bp-printing .bp-inner { padding: 0 !important; }
  body.bp-printing .bp-print-head { display: block !important; margin-bottom: 14px; }
  body.bp-printing .bp-print-head h2 { font-size: 1.4rem; margin-bottom: 6px; }
  body.bp-printing .bp-print-head p { font-size: 0.85rem; max-width: none; }
  body.bp-printing .bp-scroll { overflow: visible !important; }
  /* on paper it goes back to being a table, whatever it did on screen */
  body.bp-printing .bp-inner { container-type: normal !important; }
  body.bp-printing .bp-table { display: table !important; width: 100% !important; }
  body.bp-printing .bp-table thead { display: table-header-group !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; }
  body.bp-printing .bp-table tbody { display: table-row-group !important; }
  body.bp-printing .bp-table tr.bp-row {
    display: table-row !important; border: 0 !important; padding: 0 !important;
    margin: 0 !important; background: none !important; position: static !important;
  }
  body.bp-printing .bp-table td { display: table-cell !important; padding: 5px 8px 5px 0 !important; width: auto !important; }
  body.bp-printing .bp-table td[data-lbl]::before { content: none !important; }
  body.bp-printing .bp-table input, body.bp-printing .bp-table select {
    border: 1px solid #999 !important; background: #fff !important;
  }
  body.bp-printing .bp-table th { border-bottom: 1px solid #666 !important; }
  body.bp-printing .reveal { opacity: 1 !important; transform: none !important; }
}