/* ==========================================================================
   Broadacres Blinds — stylesheet
   Theme: security-estate · Palette: midnight navy + sand + terracotta
   Fonts: DM Serif Display (display) + DM Sans (body)
   ========================================================================== */

:root {
  --navy: #0f2138;
  --navy-deep: #081527;
  --navy-mid: #16304f;
  --navy-line: rgba(15, 33, 56, 0.14);
  --sand: #ece1c8;
  --sand-deep: #ddccA4;
  --paper: #faf6ee;
  --paper-warm: #f4ecdb;
  --terracotta: #bd5a38;
  --terracotta-deep: #9c4728;
  --terracotta-soft: #e6b79b;
  --ink: #17263a;
  --white: #ffffff;
  --font-display: "DM Serif Display", Georgia, "Iowan Old Style", serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1280px;
  --gap: 24px;
  --radius: 4px;
}

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

/* Anchored sections must clear the fixed header when jumped to. */
section[id], main[id] { scroll-margin-top: 96px; }

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}
p { margin: 0 0 1em; }
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  z-index: 999;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin-bottom: 14px;
}
.eyebrow--light { color: var(--terracotta-soft); }

.rule {
  height: 1px;
  width: 64px;
  background: var(--terracotta);
  border: 0;
  margin: 22px 0;
  transform-origin: left;
}

h2.section-title {
  font-size: clamp(2rem, 3.4vw, 3rem);
  max-width: 18ch;
}
h3.card-title { font-size: 1.3rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 15px 28px;
  border-radius: 2px;
  border: 1.5px solid transparent;
  transition: transform 240ms ease, background 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--terracotta);
  color: var(--white);
  border-color: var(--terracotta);
}
.btn-primary:hover {
  background: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(157, 71, 40, 0.28);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy-line);
}
.btn-ghost:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}
.btn-block { width: 100%; justify-content: center; }

/* ---------------------------------- Header ---------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding: 22px 0;
  background: transparent;
  transition: background 320ms ease, padding 320ms ease, box-shadow 320ms ease;
}
.site-header.is-solid {
  background: rgba(250, 246, 238, 0.96);
  backdrop-filter: blur(10px);
  padding: 13px 0;
  box-shadow: 0 1px 0 var(--navy-line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark { flex-shrink: 0; color: var(--terracotta-soft); transition: color 320ms ease; }
.brand-mark .mark-ink { fill: var(--white); transition: fill 320ms ease; }
.site-header.is-solid .brand-mark { color: var(--terracotta); }
.site-header.is-solid .brand-mark .mark-ink { fill: var(--navy); }
.brand-word {
  font-family: var(--font-display);
  font-size: 1.32rem;
  color: var(--white);
  transition: color 320ms ease;
  letter-spacing: -0.01em;
}
.site-header.is-solid .brand-word { color: var(--navy); }
.brand-word em { font-style: normal; color: var(--terracotta-soft); }
.site-header.is-solid .brand-word em { color: var(--terracotta); }

.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.88);
  transition: color 240ms ease;
  position: relative;
  padding: 4px 0;
}
.site-header.is-solid .main-nav a { color: var(--navy); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transition: right 240ms ease;
}
.main-nav a:hover::after { right: 0; }
.main-nav a.nav-cta {
  background: var(--terracotta);
  color: var(--white) !important;
  padding: 10px 18px;
  border-radius: 2px;
}
.main-nav a.nav-cta::after { display: none; }
.main-nav a.nav-cta:hover { background: var(--terracotta-deep); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 120;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  position: absolute;
  left: 8px; top: 19px;
  transition: transform 240ms ease, opacity 240ms ease, background 240ms ease;
}
.site-header.is-solid .nav-toggle span, .site-header.is-solid .nav-toggle span::before, .site-header.is-solid .nav-toggle span::after { background: var(--navy); }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); background: var(--navy); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); background: var(--navy); }

/* ---------------------------------- Side dot-nav ---------------------------------- */
.side-nav {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.side-nav .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(15, 33, 56, 0.25);
  transition: background 240ms ease, transform 240ms ease;
}
.side-nav .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 240ms ease, transform 240ms ease;
  background: var(--paper);
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.side-nav a:hover .label,
.side-nav a.is-active .label { opacity: 1; transform: translateX(0); }
.side-nav a.is-active .dot {
  background: var(--terracotta);
  transform: scale(1.35);
}
@media (max-width: 1100px) {
  .side-nav { display: none; }
}

/* ---------------------------------- Hero ---------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-deep);
}
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
/* Scrim is tuned to keep the photograph clearly readable through the top two
   thirds, and only deepens where the white headline and CTAs actually sit. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 21, 39, 0.40) 0%, rgba(8, 21, 39, 0.14) 34%, rgba(8, 21, 39, 0.62) 72%, rgba(8, 21, 39, 0.90) 100%),
    linear-gradient(90deg, rgba(8, 21, 39, 0.44) 0%, rgba(8, 21, 39, 0.03) 54%);
}
.hero-slats {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 5;
  pointer-events: none;
}
.hero-slats span {
  flex: 1;
  background: var(--navy-deep);
  transform-origin: top;
  transform: scaleY(0);
}
.js-anim .hero-slats span {
  transform: scaleY(1);
}
.hero-content {
  position: relative;
  z-index: 6;
  width: 100%;
  padding: 0 32px 88px;
  max-width: var(--max);
  margin: 0 auto;
}
.hero-content .inner { max-width: 660px; }
.hero-title {
  font-size: clamp(2.4rem, 5.4vw, 4.5rem);
  color: var(--white);
  margin-bottom: 22px;
}
.hero-title .word { display: inline-block; opacity: 1; }
.hero-sub {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 46ch;
  margin-bottom: 34px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.trust-row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.trust-row li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}
.trust-row svg { flex-shrink: 0; color: var(--terracotta-soft); }
.hero-scrolldown {
  position: absolute;
  right: 32px;
  bottom: 34px;
  z-index: 6;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scrolldown .line {
  width: 1px;
  height: 46px;
  background: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------- Marquee ---------------------------------- */
.marquee {
  background: var(--navy);
  color: var(--sand);
  overflow: hidden;
  padding: 16px 0;
  position: relative;
  z-index: 20;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  padding: 0 34px;
  white-space: nowrap;
  color: var(--sand);
  opacity: 0.92;
}
.marquee-track span.dot { color: var(--terracotta); opacity: 1; font-style: normal; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------------------------------- Sections ---------------------------------- */
section { position: relative; }
.band {
  padding: 104px 0;
}
.band-tight { padding: 80px 0; }
.band-sand { background: var(--sand); }
.band-paper { background: var(--paper); }
.band-navy { background: var(--navy); color: var(--sand); }
.band-navy h2, .band-navy h3 { color: var(--white); }
.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .rule { margin-left: auto; margin-right: auto; }

.reveal { opacity: 1; }
.js-anim .reveal {
  opacity: 0;
  transform: translateY(34px);
}
.js-anim .rule.js-rule { transform: scaleX(0); }

/* Reduced motion: belt-and-braces — even if a script mis-fires, nothing
   scroll-revealed may ever stay hidden and the hero slats may never cover
   the photograph. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal,
  .js-anim .hero-sub,
  .js-anim .hero-ctas,
  .js-anim .trust-row,
  .js-anim .locale-points li,
  .js-anim .process-step,
  .js-anim .hero-title .word {
    opacity: 1 !important;
    transform: none !important;
  }
  .js-anim .rule.js-rule { transform: scaleX(1) !important; }
  .js-anim .hero-slats span { transform: scaleY(0) !important; }
}

/* ---------------------------------- Product grid ---------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
}
.product-card {
  background: var(--paper);
  padding: 34px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 260ms ease, transform 260ms ease;
}
.product-card:hover {
  background: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(15, 33, 56, 0.08);
  z-index: 2;
}
.product-icon {
  width: 46px; height: 46px;
  color: var(--navy);
  transition: color 240ms ease, transform 240ms ease;
}
.product-card:hover .product-icon { color: var(--terracotta); transform: translateY(-2px); }
.product-card p { font-size: 15px; color: var(--ink); opacity: 0.82; flex-grow: 1; }
.product-link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--terracotta-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.product-link svg { transition: transform 240ms ease; }
.product-card:hover .product-link svg { transform: translateX(4px); }

/* The repairs card is a service CTA rather than a range item — a faint accent
   wash and an accent rule lift it without breaking the grid rhythm. */
.product-card.is-cta {
  background: linear-gradient(180deg, rgba(189, 90, 56, 0.07), rgba(189, 90, 56, 0.02));
  box-shadow: inset 3px 0 0 var(--terracotta);
}
.product-card.is-cta:hover {
  background: linear-gradient(180deg, rgba(189, 90, 56, 0.11), rgba(189, 90, 56, 0.03));
  box-shadow: inset 3px 0 0 var(--terracotta), 0 16px 30px rgba(15, 33, 56, 0.09);
}
.product-card.is-cta .card-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin-top: 12px;
  background: var(--terracotta);
}

@media (max-width: 980px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------- Editorial photo section ---------------------------------- */
.editorial {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--gap);
}
.editorial-figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.editorial-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}
.editorial-figure:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .editorial-figure img { transition: none; }
  .editorial-figure:hover img { transform: none; }
}
.editorial-figure.tall { grid-row: span 2; min-height: 620px; }
.editorial-figure.short { min-height: 300px; }
.figcap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 24px;
  background: linear-gradient(0deg, rgba(8,21,39,0.78), transparent);
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.03em;
}
.editorial-col2 { display: flex; flex-direction: column; gap: var(--gap); }
@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial-figure.tall { min-height: 340px; grid-row: auto; }
}

/* ---------------------------------- Locale storytelling ---------------------------------- */
.locale-band {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
}
.locale-media { position: absolute; inset: 0; }
.locale-media img { width: 100%; height: 100%; object-fit: cover; }
.locale-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,21,39,0.94) 0%, rgba(8,21,39,0.82) 42%, rgba(8,21,39,0.35) 100%);
}
.locale-content { position: relative; z-index: 2; max-width: 620px; }
.locale-points { margin-top: 32px; display: grid; gap: 20px; }
.locale-points li { display: flex; gap: 16px; align-items: flex-start; }
.locale-points .num {
  font-family: var(--font-display);
  color: var(--terracotta-soft);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.locale-points strong { color: var(--white); display: block; margin-bottom: 3px; }
.locale-points span.text { color: rgba(255,255,255,0.78); font-size: 15px; }

/* ---------------------------------- Process ---------------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.process-step { position: relative; padding-top: 8px; }
.process-num {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--terracotta-soft);
  line-height: 1;
  margin-bottom: 18px;
}
.band-paper .process-num, .band-sand .process-num { color: var(--terracotta); opacity: 0.55; }
.process-step h3 { font-size: 1.15rem; margin-bottom: 10px; }
.process-step p { font-size: 14.5px; opacity: 0.85; }
@media (max-width: 900px) {
  .process-grid { grid-template-columns: 1fr 1fr; row-gap: 44px; }
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------- Area chips ---------------------------------- */
.area-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.area-chip {
  border: 1px solid var(--navy-line);
  padding: 30px 24px;
  background: var(--white);
  transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.area-chip:hover {
  border-color: var(--terracotta);
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(15,33,56,0.09);
}
.area-chip .tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  font-weight: 700;
}
.area-chip h3 { font-size: 1.25rem; }
.area-chip p { font-size: 14px; opacity: 0.8; margin-bottom: 4px; }
.area-chip .go { font-size: 13px; font-weight: 700; color: var(--navy); display: inline-flex; gap: 6px; align-items: center; margin-top: auto; }
.area-chip .go svg { transition: transform 240ms ease; }
.area-chip:hover .go svg { transform: translateX(4px); }
@media (max-width: 900px) { .area-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .area-grid { grid-template-columns: 1fr; } }

/* ---------------------------------- FAQ ---------------------------------- */
.faq-list { max-width: 800px; }
.faq-item {
  border-bottom: 1px solid var(--navy-line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle {
  flex-shrink: 0;
  width: 26px; height: 26px;
  position: relative;
}
.faq-toggle::before, .faq-toggle::after {
  content: "";
  position: absolute;
  background: var(--terracotta);
  transition: transform 260ms ease;
}
.faq-toggle::before { left: 3px; right: 3px; top: 50%; height: 2px; transform: translateY(-50%); }
.faq-toggle::after { top: 3px; bottom: 3px; left: 50%; width: 2px; transform: translateX(-50%); }
.faq-item[open] .faq-toggle::after { transform: translateX(-50%) rotate(90deg) scale(0); }
.faq-item .faq-body {
  padding: 0 4px 28px;
  max-width: 68ch;
  font-size: 15.5px;
  opacity: 0.86;
}

/* ---------------------------------- Closing CTA ---------------------------------- */
.cta-close {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  overflow: hidden;
  text-align: center;
  padding: 120px 0;
}
.cta-glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(38% 46% at 22% 30%, rgba(189, 90, 56, 0.34), transparent 68%),
    radial-gradient(30% 40% at 78% 68%, rgba(233, 176, 148, 0.18), transparent 70%);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate(-3%, -2%) scale(1); }
  to { transform: translate(3%, 3%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-glow { animation: none; }
}
.cta-close .container { position: relative; z-index: 1; }
.cta-close h2 { color: var(--white); font-size: clamp(2rem, 4vw, 3.2rem); max-width: 16ch; margin: 0 auto 22px; }
.cta-close p { color: rgba(255,255,255,0.78); max-width: 52ch; margin: 0 auto 40px; }
.cta-close .hero-ctas { justify-content: center; margin-bottom: 0; }
.cta-close .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.5); }

/* ---------------------------------- Form ---------------------------------- */
.enquiry-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.enquiry-form {
  background: var(--white);
  border: 1px solid var(--navy-line);
  padding: 40px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  color: var(--navy);
}
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--navy-line);
  background: var(--paper);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  border-radius: 2px;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(189, 90, 56, 0.14);
  outline: none;
}
.field textarea { resize: vertical; min-height: 110px; }
.popia-note {
  font-size: 12.5px;
  opacity: 0.7;
  line-height: 1.6;
  margin-top: 14px;
}
.form-success {
  display: none;
  padding: 20px;
  border: 1px solid var(--terracotta);
  background: var(--sand);
  font-size: 14.5px;
  margin-top: 18px;
}
.form-success.is-visible { display: block; }
@media (max-width: 900px) {
  .enquiry-wrap { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------------------------------- Footer ---------------------------------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.78);
  padding: 72px 0 36px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 30px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .brand-word { color: var(--white); }
.footer-brand .brand-mark { color: var(--terracotta-soft); }
.footer-brand .brand-mark .mark-ink { fill: var(--white); }
.footer-statement { max-width: 380px; font-size: 14.5px; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-soft);
  margin-bottom: 16px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: 14.5px; transition: color 200ms ease; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  opacity: 0.65;
}
.footer-popia { max-width: 640px; }

/* ---------------------------------- Chat widget ---------------------------------- */
.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(15, 33, 56, 0.35);
  transition: transform 240ms ease, background 240ms ease;
}
.chat-launcher:hover { transform: scale(1.06); background: var(--terracotta-deep); }
.chat-launcher svg { width: 26px; height: 26px; }
.chat-launcher .icon-close { display: none; }
.chat-open .chat-launcher .icon-chat { display: none; }
.chat-open .chat-launcher .icon-close { display: block; }

.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 98px;
  z-index: 200;
  width: 360px;
  max-width: calc(100vw - 40px);
  max-height: min(560px, calc(100vh - 150px));
  background: var(--paper);
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(8, 21, 39, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  /* Keep the closed panel out of the tab order, not just out of sight. */
  visibility: hidden;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.chat-open .chat-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .chat-panel { transition: opacity 1ms linear, visibility 0s linear 1ms; transform: none; }
  .chat-open .chat-panel { transform: none; transition: opacity 1ms linear, visibility 0s linear 0s; }
}
.chat-head {
  background: var(--navy);
  color: var(--white);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-head .brand-mark { width: 26px; height: 26px; color: var(--terracotta-soft); }
.chat-head .brand-mark .mark-ink { fill: var(--white); }
.chat-head strong { display: block; font-family: var(--font-display); font-size: 1.02rem; }
.chat-head span { font-size: 11.5px; opacity: 0.75; }
.chat-body {
  padding: 16px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
}
.chat-msg.bot {
  background: var(--white);
  border: 1px solid var(--navy-line);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.chat-msg.user {
  background: var(--navy);
  color: var(--white);
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}
.chat-msg.popia {
  background: var(--sand);
  font-size: 12px;
  align-self: stretch;
  max-width: 100%;
  opacity: 0.9;
}
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; }
.chat-chip {
  border: 1px solid var(--terracotta);
  color: var(--terracotta-deep);
  background: var(--white);
  padding: 8px 13px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  transition: background 200ms ease, color 200ms ease;
}
.chat-chip:hover { background: var(--terracotta); color: var(--white); }
.chat-form { padding: 12px 16px 16px; border-top: 1px solid var(--navy-line); background: var(--white); }
.chat-form .row { display: flex; gap: 8px; }
.chat-form input {
  flex-grow: 1;
  border: 1px solid var(--navy-line);
  padding: 10px 12px;
  font-size: 13.5px;
  border-radius: 20px;
  font-family: inherit;
}
.chat-form input:focus { outline: none; border-color: var(--terracotta); }
.chat-form button.send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  border: none;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 200ms ease;
}
.chat-form button.send:hover { background: var(--terracotta); }
.chat-form-hidden { display: none; }
.typing { display: flex; gap: 4px; padding: 10px 14px; align-self: flex-start; }
.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--navy-line);
  background: rgba(15,33,56,0.35);
  animation: blink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* ---------------------------------- Simple pages (products/areas) ---------------------------------- */
.page-banner {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-deep);
}
.page-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-banner .hero-scrim { position: absolute; inset: 0; }
.page-banner .hero-content { padding-bottom: 64px; }
.page-banner .hero-title { font-size: clamp(2rem, 4.4vw, 3.4rem); }

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 44px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 16.5px; }
.prose ul { margin: 0 0 1.4em; display: grid; gap: 10px; }
.prose ul li {
  padding-left: 26px;
  position: relative;
  font-size: 16px;
}
.prose ul li::before {
  content: "";
  position: absolute; left: 0; top: 10px;
  width: 8px; height: 1.5px;
  background: var(--terracotta);
}

.two-col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
}
.side-figure { position: sticky; top: 110px; overflow: hidden; border-radius: var(--radius); }
.side-figure img { width: 100%; height: 420px; object-fit: cover; }

.mini-cta {
  background: var(--sand);
  padding: 44px;
  text-align: center;
  margin: 56px 0;
}
.mini-cta h3 { font-size: 1.5rem; margin-bottom: 12px; }
.mini-cta p { max-width: 46ch; margin: 0 auto 24px; opacity: 0.85; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  border: 1px solid var(--navy-line);
  padding: 26px;
  background: var(--white);
  transition: border-color 220ms ease, transform 220ms ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.related-card:hover { border-color: var(--terracotta); transform: translateY(-3px); }
.related-card svg { color: var(--navy); width: 38px; height: 38px; }
.related-card a.product-link { margin-top: auto; }

.breadcrumb {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.6;
  margin-bottom: 20px;
}
.breadcrumb a:hover { text-decoration: underline; }

/* ---------------------------------- Mobile nav ---------------------------------- */
@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--navy-deep);
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    transform: translateX(100%);
    /* Hidden from the tab order and the a11y tree until it is actually open. */
    visibility: hidden;
    pointer-events: none;
    transition: transform 320ms ease, visibility 0s linear 320ms;
    z-index: 110;
  }
  .nav-open .main-nav {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 320ms ease, visibility 0s linear 0s;
  }
  .nav-open, .nav-open body { overflow: hidden; }
  .main-nav a { color: var(--white) !important; font-size: 20px; }
  .main-nav a.nav-cta { color: var(--white) !important; }
  .hero-content .inner { max-width: 100%; }
  .editorial-figure.tall { min-height: 280px; }
  .enquiry-wrap { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .chat-panel { right: 12px; bottom: 90px; width: calc(100vw - 24px); }
  .chat-launcher { right: 16px; bottom: 16px; }
}

@media (max-width: 560px) {
  .band { padding: 72px 0; }
  .container { padding: 0 20px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; }
}

/* 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)}

/* The full-bleed media wells are section backgrounds, not product thumbnails.
   They must fill their section even if the generic .pthumb card sizing is ever
   applied to them again by the thumbnail tooling. */
.hero-media, .locale-media{
  width:100%!important;height:100%!important;aspect-ratio:auto!important;margin:0!important}
.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}


/* ==========================================================================
   BEHIND THE WALL — the Broadacres & Cedar Lakes Shading Casebook
   guide.html + the three-rung lead ladder.
   Rung 1 the casebook · Rung 2 the window schedule · Rung 3 the free measure.
   Same four tokens, same motion vocabulary, no new colours.
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- casebook banner ---------- */
.guide-banner { min-height: 74vh; }
.guide-banner .hero-content { padding-bottom: 72px; }
.guide-banner .hero-content .inner { max-width: 780px; }
.guide-kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terracotta-soft); margin-bottom: 16px;
}
.guide-kicker::before { content: ""; width: 26px; height: 1px; background: var(--terracotta-soft); }
.guide-banner .hero-title { font-size: clamp(2rem, 4.3vw, 3.5rem); margin-bottom: 18px; }
.guide-lede { color: rgba(255,255,255,0.88); font-size: 1.08rem; max-width: 58ch; margin-bottom: 18px; }
.guide-meta { color: rgba(255,255,255,0.62); font-size: 13px; margin: 0; }
.guide-banner .breadcrumb { color: rgba(255,255,255,0.7); opacity: 1; }

/* ---------- contents rail (phones/tablets, where the dot-nav is hidden) ---------- */
.g-rail { background: var(--navy); border-bottom: 1px solid rgba(255,255,255,0.1); }
.g-rail .container {
  display: flex; gap: 10px; overflow-x: auto;
  padding-top: 14px; padding-bottom: 14px; scrollbar-width: thin;
}
.g-rail a {
  flex: none; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  color: var(--sand); border: 1px solid rgba(236,225,200,0.3);
  border-radius: 999px; padding: 7px 15px;
  transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
}
.g-rail a:hover { color: var(--white); border-color: var(--terracotta); background: rgba(189,90,56,0.22); }
@media (min-width: 1101px) { .g-rail { display: none; } }

/* ---------- casebook prose ---------- */
.g-prose { max-width: 66ch; }
.g-prose p { font-size: 16.5px; margin: 0 0 1.15em; }
.g-prose p.first::first-letter {
  font-family: var(--font-display); float: left; font-size: 3.5rem; line-height: 0.82;
  padding: 6px 12px 0 0; color: var(--terracotta);
}
.g-prose h3 { font-size: 1.3rem; margin: 1.8em 0 0.6em; }
.g-prose a { color: var(--terracotta-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.band-navy .g-prose, .band-navy .g-prose p { color: rgba(255,255,255,0.82); }
.band-navy .g-prose strong, .band-navy .g-prose em { color: var(--white); }
.band-navy .g-prose a { color: var(--terracotta-soft); }
.g-note {
  border-left: 2px solid var(--terracotta); padding: 4px 0 4px 18px;
  font-size: 15px; margin: 1.7em 0; max-width: 66ch;
}
.band-navy .g-note { border-left-color: var(--terracotta-soft); color: rgba(255,255,255,0.78); }

/* ---------- signature moment: the two sun arcs draw themselves ---------- */
.sunpath { margin: 40px 0 0; }
.sunpath svg { width: 100%; height: auto; display: block; }
.sun-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; }
.sunpath figcaption { font-size: 13.5px; color: rgba(255,255,255,0.66); padding-top: 14px; max-width: 70ch; }
.sp-ground { stroke: rgba(255,255,255,0.28); }
.sp-house { stroke: var(--sand); }
.sp-glass { stroke: var(--terracotta-soft); }
.sp-wall { stroke: rgba(236,225,200,0.5); }
.arc-dec { stroke: var(--terracotta); }
.arc-jun { stroke: var(--sand-deep); }
.dot-dec { fill: var(--terracotta); }
.dot-jun { fill: var(--sand-deep); }
.lab-dec { fill: var(--terracotta-soft); }
.lab-jun { fill: var(--sand-deep); }
.lab-dim { fill: rgba(255,255,255,0.5); }
/* At rest the curves are fully drawn — a browser without JS, GSAP or motion
   still sees the whole diagram. ladder.js hides and re-draws them on scroll. */
.arc-dec, .arc-jun { stroke-dasharray: 1400; stroke-dashoffset: 0; }

/* ---------- elevation cards ---------- */
.elev-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 760px) { .elev-grid { grid-template-columns: 1fr; } }
.elev { background: var(--navy); padding: 32px 28px; }
.elev .tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--terracotta-soft); margin-bottom: 14px;
}
.elev h3 { font-size: 1.18rem; color: var(--white); margin-bottom: 10px; }
.elev p { font-size: 14.8px; color: rgba(255,255,255,0.78); margin: 0; }
.elev p + p { margin-top: 12px; }
.elev strong { color: var(--white); }

/* ---------- product recommendations ---------- */
.rec-list { display: grid; gap: 1px; background: var(--navy-line); border: 1px solid var(--navy-line); }
.rec { background: var(--white); display: grid; grid-template-columns: 0.82fr 1.18fr; }
@media (max-width: 820px) { .rec { grid-template-columns: 1fr; } }
.rec-media { overflow: hidden; min-height: 250px; background: var(--sand); }
.rec-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
.rec:hover .rec-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .rec-media img { transition: none; }
  .rec:hover .rec-media img { transform: none; }
}
.rec-body { padding: 34px 32px; display: flex; flex-direction: column; gap: 13px; }
.rec-where { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta-deep); margin: 0; }
.rec-body h3 { font-size: 1.35rem; }
.rec-body p { font-size: 15.5px; margin: 0; max-width: 62ch; }
.rec-catch { background: rgba(189,90,56,0.08); border-radius: 3px; padding: 14px 16px; font-size: 14.5px; }
.rec-catch strong { font-weight: 700; }
.rec-add {
  align-self: flex-start; margin-top: 2px; background: transparent;
  border: 1.5px solid var(--terracotta); color: var(--terracotta-deep);
  border-radius: 2px; padding: 11px 20px; font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em;
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.rec-add:hover { background: var(--terracotta); color: var(--white); }
.rec-add.is-added { background: var(--terracotta-deep); border-color: var(--terracotta-deep); color: var(--white); cursor: default; }
.rec-add[disabled] { opacity: 1; }
.rec-more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- what we'd still check on site ---------- */
.onsite { display: grid; counter-reset: chk; max-width: 900px; }
.onsite li { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--navy-line); }
.onsite li:last-child { border-bottom: 0; }
.onsite li::before {
  counter-increment: chk; content: counter(chk, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.15rem; color: var(--terracotta);
  flex: none; padding-top: 3px;
}
.onsite h3 { font-size: 1.08rem; margin-bottom: 8px; }
.onsite p { font-size: 15px; margin: 0; max-width: 64ch; opacity: 0.85; }

/* ---------- the two ways forward ---------- */
.ways { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: start; }
@media (max-width: 820px) { .ways { grid-template-columns: 1fr; } }
.way { border: 1px solid var(--navy-line); background: var(--white); padding: 34px 32px; }
.way-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta-deep); margin-bottom: 14px; }
.way h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-bottom: 12px; }
.way p { font-size: 15.5px; opacity: 0.86; }
.way-main { border: 1.5px solid var(--terracotta); }
.way-alt { background: var(--paper-warm); }
.way-alt .way-tag { color: var(--navy); opacity: 0.62; }
.way-alt h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.capacity-note { font-size: 14px; opacity: 0.75; margin: 18px 0 0; }

/* ---------- capture forms ---------- */
.form-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; gap: 36px; } }
.lead-form { background: var(--white); border: 1px solid var(--navy-line); padding: 38px; }
.band-sand .lead-form { background: var(--white); }
.lead-form .opt { font-weight: 400; opacity: 0.6; }
.chk-set { border: 0; padding: 0; margin: 4px 0 20px; }
.chk-set legend { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; color: var(--navy); padding: 0; margin-bottom: 10px; }
.chk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 520px) { .chk-grid { grid-template-columns: 1fr; } }
.chk {
  display: flex; align-items: flex-start; gap: 9px; font-size: 14px;
  background: var(--paper); border: 1.5px solid var(--navy-line); border-radius: 2px;
  padding: 10px 12px; cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease;
}
.chk:hover { border-color: var(--terracotta); background: var(--white); }
.chk input { margin: 3px 0 0; accent-color: var(--terracotta); flex: none; }
.chk input:checked + span { font-weight: 700; }
.carry-note { font-size: 13px; color: var(--terracotta-deep); margin: 8px 0 0; font-weight: 700; }
.field-error { display: block; font-size: 12.5px; color: var(--terracotta-deep); font-weight: 700; margin-top: 6px; }
.lead-form input.invalid, .lead-form select.invalid, .lead-form textarea.invalid { border-color: var(--terracotta); }

/* ---------- Rung 2: the window schedule ---------- */
.ballpark { border: 1px solid var(--navy-line); background: var(--paper); margin: 4px 0 22px; scroll-margin-top: 100px; }
.ballpark > summary {
  list-style: none; cursor: pointer; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-weight: 700; font-size: 14.5px; color: var(--navy);
}
.ballpark > summary::-webkit-details-marker { display: none; }
.ballpark > summary:hover { color: var(--terracotta-deep); }
.ballpark .ind { position: relative; width: 18px; height: 18px; flex: none; }
.ballpark .ind::before, .ballpark .ind::after {
  content: ""; position: absolute; background: var(--terracotta); transition: transform 280ms ease, opacity 280ms ease;
}
.ballpark .ind::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.ballpark .ind::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
.ballpark[open] .ind::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.bp-inner { padding: 2px 18px 20px; }
.bp-note { font-size: 14px; opacity: 0.8; margin: 0 0 16px; max-width: 66ch; }
.bp-print-head { display: none; }
.bp-scroll { overflow-x: auto; }
.bp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.bp-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy); opacity: 0.7;
  padding: 0 8px 10px; border-bottom: 1px solid var(--navy-line);
}
.bp-table td { padding: 8px; vertical-align: middle; }
.bp-table input, .bp-table select {
  width: 100%; padding: 10px 11px; border: 1.5px solid var(--navy-line);
  background: var(--white); color: var(--ink); font: inherit; font-size: 14px; border-radius: 2px;
}
.bp-table input:focus, .bp-table select:focus { border-color: var(--terracotta); outline: none; }
.bp-rm { width: 46px; text-align: right; }
.bp-remove {
  background: transparent; border: 1.5px solid var(--navy-line); color: var(--navy);
  width: 32px; height: 32px; border-radius: 2px; line-height: 1; font-size: 16px;
  transition: border-color 220ms ease, color 220ms ease;
}
.bp-remove:hover { border-color: var(--terracotta); color: var(--terracotta-deep); }
.bp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.bp-actions .btn { padding: 11px 18px; font-size: 13px; }
.bp-count { font-size: 13.5px; opacity: 0.78; margin: 0; }

/* rows become stacked cards on a phone */
@media (max-width: 640px) {
  .bp-table { min-width: 0; }
  .bp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bp-table tr { display: block; border: 1px solid var(--navy-line); padding: 12px 14px; margin-bottom: 12px; background: var(--white); }
  .bp-table td { display: block; padding: 6px 0; }
  .bp-table td::before {
    content: attr(data-lbl); display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy);
    opacity: 0.65; margin-bottom: 4px;
  }
  .bp-rm { width: auto; text-align: left; }
}

/* ---------- thank-you blocks ---------- */
.lead-thanks {
  background: var(--sand); border: 1px solid var(--navy-line);
  border-left: 3px solid var(--terracotta); padding: 28px 30px; margin-top: 8px;
}
.lead-thanks h3 { font-size: 1.35rem; margin-bottom: 12px; }
.lead-thanks p { font-size: 15.5px; }
.lead-thanks p:last-child { margin-bottom: 0; }
.lead-thanks a { color: var(--terracotta-deep); font-weight: 700; text-decoration: underline; }

/* ---------- sources ---------- */
.sources-list { display: grid; gap: 12px; max-width: 82ch; }
.sources-list li { font-size: 14px; padding-left: 20px; position: relative; line-height: 1.62; opacity: 0.88; }
.sources-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 9px; height: 1.5px; background: var(--terracotta); }
.sources-list a { color: var(--terracotta-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- homepage casebook panel + hero secondary line ---------- */
.cb-panel { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
@media (max-width: 860px) { .cb-panel { grid-template-columns: 1fr; } }
.cb-list { display: grid; gap: 11px; margin: 22px 0 30px; }
.cb-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; }
.cb-list svg { flex: none; width: 17px; height: 17px; color: var(--terracotta); margin-top: 5px; }
.cb-figure { overflow: hidden; border-radius: var(--radius); }
.cb-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.hero-extra { margin: -20px 0 34px; font-size: 14.5px; color: rgba(255,255,255,0.86); }
.hero-extra a { font-weight: 700; color: var(--white); border-bottom: 1px solid var(--terracotta-soft); padding-bottom: 2px; }
.hero-extra a:hover { color: var(--terracotta-soft); }
.area-guide-note { font-size: 15px; margin: 26px 0 0; padding: 16px 18px; background: var(--paper-warm); border-left: 2px solid var(--terracotta); }
.area-guide-note a { color: var(--terracotta-deep); font-weight: 700; text-decoration: underline; }

/* ---------- product page: fitting areas pill row ---------- */
.area-links { margin: 34px 0 0; }
.area-links-label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--terracotta-deep); margin-bottom: 12px; }
.area-links-row { display: flex; flex-wrap: wrap; gap: 10px; }
.area-links-row a {
  display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--navy);
  background: var(--paper-warm); border: 1px solid var(--terracotta-soft); border-radius: 999px;
  padding: 8px 16px; text-decoration: none; transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.area-links-row a:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--white); }

/* ---------- print: walk the house with paper ---------- */
@media print {
  .site-header, .side-nav, .g-rail, .chat-launcher, .chat-panel, .site-footer,
  .marquee, .page-banner, .cta-close { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .rec-add, .bp-actions, .btn { display: none !important; }
}
/* bp-printing only ever changes the PRINTED page, never the screen — a browser
   that swallows afterprint can't leave the visitor looking at a blank page. */
@media print {
  body.bp-printing main > * { display: none !important; }
  body.bp-printing #book { display: block !important; }
  body.bp-printing #book .container,
  body.bp-printing #book .lead-form { display: block !important; }
  body.bp-printing .lead-form > *:not(.ballpark) { display: none !important; }
  body.bp-printing .ballpark { display: block !important; border: 0; }
  body.bp-printing .ballpark > summary { display: none !important; }
  body.bp-printing .bp-inner { display: block !important; padding: 0; }
  body.bp-printing .bp-print-head { display: block !important; margin-bottom: 16px; }
  body.bp-printing .bp-print-head h2 { font-size: 18pt; margin-bottom: 6px; }
  body.bp-printing .bp-print-head p { font-size: 10pt; max-width: none; }
  body.bp-printing .bp-note { display: none !important; }
  body.bp-printing .bp-scroll { overflow: visible; }
  body.bp-printing .bp-table { min-width: 0; width: 100%; }
  body.bp-printing .bp-table th { border-bottom: 1px solid #000; opacity: 1; }
  body.bp-printing .bp-table td { border-bottom: 1px solid #999; height: 34px; }
  body.bp-printing .bp-table input, body.bp-printing .bp-table select { border: 0; background: transparent; }
  body.bp-printing .bp-rm { display: none !important; }
}