/* Northcliff Blinds — stylesheet
   Theme: view-ridge / split hero, vertical rhythm
   Palette: olive + ivory + rust
   Fonts: Crimson Pro (display) + Public Sans (body)
------------------------------------------------------------------ */

:root{
  --ink:#242918;
  --olive:#57623A;
  --olive-deep:#3A4326;
  --olive-soft:#8B9569;
  --rust:#B6552E;
  --rust-deep:#8F3F22;
  --ivory:#FAF6EC;
  --ivory-warm:#F1E9D6;
  --paper:#FFFDF7;
  --line: rgba(36,41,24,.16);
  --line-soft: rgba(36,41,24,.09);
  --ink-70: rgba(36,41,24,.72);
  --ink-55: rgba(36,41,24,.55);
  --shadow: 0 20px 50px rgba(36,41,24,.14);
  --font-display: "Crimson Pro", Georgia, serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
}

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

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

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.08;
  margin:0;
  color:var(--ink);
}
h2{ font-size:clamp(2rem, 3.4vw, 3.1rem); }
h3{ font-size:clamp(1.3rem, 2vw, 1.7rem); }
p{ margin:0; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--rust-deep);
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--rust-deep);
  display:inline-block;
}

.rule{
  height:2px;
  width:64px;
  background:var(--olive);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .8s cubic-bezier(.16,.84,.44,1);
}
.rule.in-view{ transform:scaleX(1); }

.max-measure{ max-width:62ch; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:16px 30px;
  border-radius:2px;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.03em;
  border:1.5px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  will-change:transform;
}
.btn-solid{ background:var(--rust-deep); color:var(--ivory); border-color:var(--rust-deep); }
.btn-solid:hover{ background:var(--rust); border-color:var(--rust); box-shadow:0 10px 24px rgba(143,63,34,.32); }
.btn-outline{ background:transparent; color:var(--ink); border-color:rgba(36,41,24,.32); }
.btn-outline:hover{ background:rgba(36,41,24,.06); border-color:var(--ink); }
.btn-outline.on-dark{ color:var(--ivory); border-color:rgba(250,246,236,.5); }
.btn-outline.on-dark:hover{ background:rgba(250,246,236,.1); border-color:var(--ivory); }
.btn-dark{ background:var(--olive-deep); color:var(--ivory); border-color:var(--olive-deep); }
.btn-dark:hover{ background:var(--olive); border-color:var(--olive); }
.btn:focus-visible{ outline:2px solid var(--rust-deep); outline-offset:3px; }

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:20px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(250,246,236,.92) 0%, rgba(250,246,236,0) 100%);
  z-index:-1;
  opacity:1;
  transition:opacity .35s ease;
}
.site-header.solid{
  background:rgba(250,246,236,.95);
  backdrop-filter:blur(10px);
  padding:13px 0;
  border-bottom-color:var(--line-soft);
  box-shadow:0 8px 24px rgba(36,41,24,.08);
}
.site-header.solid::before{ opacity:0; }
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:inline-flex; align-items:center; gap:12px; color:var(--ink); }
.brand-mark{ width:36px; height:36px; flex:none; }
.brand-word{
  font-family:var(--font-display); font-weight:600; font-size:1.2rem;
  letter-spacing:-0.01em; white-space:nowrap;
}
.site-nav{ display:flex; align-items:center; gap:30px; }
.site-nav a{
  font-size:.86rem; font-weight:700; letter-spacing:.02em; color:var(--ink);
  opacity:.82; position:relative; padding:4px 0;
  transition:opacity .25s ease;
}
.site-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
  background:var(--rust-deep); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.site-nav a:not(.nav-cta):hover{ opacity:1; }
.site-nav a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-cta{
  background:var(--rust-deep); color:var(--ivory) !important; padding:11px 20px;
  border-radius:2px; opacity:1 !important;
  transition:background .25s ease, transform .25s ease;
}
.nav-cta:hover{ background:var(--olive-deep); transform:translateY(-1px); }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; padding:0;
}
.nav-toggle span{ display:block; height:2px; width:100%; background:var(--ink); transition:background .35s ease, transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero (split: text left / full-height photo right) ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns: minmax(400px,45%) 1fr;
  background:var(--ivory);
}
.hero-panel-text{
  display:flex; flex-direction:column; justify-content:center;
  padding: 160px clamp(28px,5vw,72px) 72px;
  position:relative; z-index:2;
}
.hero-content{ max-width:560px; }
.hero-eyebrow{ margin-bottom:20px; }
.hero h1{
  font-size:clamp(2.5rem, 3.6vw, 3.6rem);
  line-height:1.08;
  max-width:13ch;
}
.hero h1 .word{ display:inline-block; }
.hero-sub{ margin-top:24px; max-width:44ch; font-size:1.1rem; line-height:1.65; color:var(--ink-70); }
.hero-ctas{ margin-top:38px; display:flex; flex-wrap:wrap; gap:16px; }
.trust-row{ margin-top:46px; display:flex; flex-direction:column; gap:16px; }
.trust-row li{ display:flex; align-items:center; gap:11px; font-size:.92rem; font-weight:700; color:var(--ink); }
.trust-row svg{ width:19px; height:19px; flex:none; color:var(--rust-deep); }

.hero-panel-photo{ position:relative; overflow:hidden; min-height:44vh; }
.hero-panel-photo img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  transform:scale(1.06); will-change:transform;
}
.hero-panel-photo::after{
  content:"";
  position:absolute; inset:0;
  /* Light scrim only — nothing sits on this photograph, so it stays legible.
     Just enough to seat the left edge against the ivory text panel. */
  background:
    linear-gradient(90deg, rgba(36,41,24,.16) 0%, rgba(36,41,24,0) 13%),
    linear-gradient(0deg, rgba(36,41,24,.18) 0%, rgba(36,41,24,0) 22%);
}
.hero-panel-photo .top-fade{
  position:absolute; left:0; right:0; top:0; height:170px;
  background:linear-gradient(180deg, rgba(250,246,236,.55) 0%, rgba(250,246,236,0) 100%);
  z-index:1;
}

@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; }
  .hero-panel-photo{ order:1; min-height:52vh; }
  .hero-panel-text{ order:2; padding:64px clamp(20px,5vw,40px) 64px; }
}

/* ---------- marquee ---------- */
.marquee{
  background:var(--olive-deep); color:var(--ivory-warm); overflow:hidden; padding:15px 0;
  border-top:1px solid rgba(250,246,236,.14); border-bottom:1px solid rgba(250,246,236,.14);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 42s linear infinite; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; overflow-x:auto; } }
.marquee-track span{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; padding:0 28px; white-space:nowrap; opacity:.94; }
.marquee-track span::after{ content:"—"; margin-left:28px; color:var(--rust); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- section shell ---------- */
.section{ padding:100px 0; position:relative; }
.section-shell{ background:var(--ivory); }
.section-paper{ background:var(--paper); }
.section-ink{ background:var(--olive-deep); color:var(--ivory); }
.section-warm{ background:var(--ivory-warm); }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head p{ margin-top:18px; font-size:1.05rem; color:var(--ink-70); }
.section-ink .section-head p{ color:rgba(250,246,236,.78); }

/* ---------- product grid ---------- */
.product-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.product-card{
  background:var(--paper); padding:34px 26px 28px; position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, background .3s ease;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); background:var(--ivory); z-index:2; }
.product-icon{ width:52px; height:52px; color:var(--olive-deep); margin-bottom:18px; }
.product-icon *{ vector-effect:non-scaling-stroke; }
.product-card h3{ font-size:1.06rem; margin-bottom:8px; }
.product-card p{ font-size:.92rem; color:var(--ink-70); margin-bottom:14px; }
.product-link{ font-weight:700; font-size:.82rem; letter-spacing:.02em; color:var(--rust-deep); display:inline-flex; align-items:center; gap:6px; }
.product-link svg{ width:14px; height:14px; transition:transform .25s ease; }
.product-link:hover svg{ transform:translateX(4px); }
.product-link:hover{ color:var(--olive-deep); }

/* product photo: slow zoom as the card lifts */
.pthumb{
  position:relative; overflow:hidden; border-radius:2px;
  margin:0 0 20px; background:var(--ivory-warm);
}
.pthumb img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transform:scale(1.005); transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.product-card:hover .pthumb img{ transform:scale(1.07); }

/* the repairs card runs the full width of the last grid row */
.product-card--wide{
  grid-column:1 / -1;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
  gap:clamp(22px,3vw,40px); align-items:center; padding:30px 30px 30px 30px;
}
.product-card--wide .pthumb{ margin:0; }
.product-card--wide .pthumb img{ aspect-ratio:16/10; }
.product-card--wide h3{ font-size:1.24rem; }
.product-card--wide p{ max-width:56ch; }
@media (max-width: 720px){
  .product-card--wide{ grid-template-columns:1fr; gap:20px; padding:26px; }
  .product-card--wide .pthumb img{ aspect-ratio:4/3; }
}

/* ---------- editorial photo section ---------- */
.editorial{ display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start; }
.editorial-stack{ display:flex; flex-direction:column; gap:26px; }
.photo-card{ position:relative; overflow:hidden; border-radius:2px; box-shadow:var(--shadow); transition:transform .4s cubic-bezier(.2,.7,.3,1); }
.photo-card:hover{ transform:translateY(-6px); }
.photo-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.photo-card:hover img{ transform:scale(1.045); }
.editorial-main .photo-card img{ aspect-ratio:4/5; }
.editorial-sub .photo-card img{ aspect-ratio:16/10; }
.photo-caption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 24px;
  background:linear-gradient(0deg, rgba(36,41,24,.86) 0%, rgba(36,41,24,0) 100%);
  color:var(--ivory); font-size:.88rem; font-weight:700; letter-spacing:.01em;
}

/* ---------- locale / story + signature ridge moment ---------- */
.story{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.story-list{ margin-top:30px; display:flex; flex-direction:column; gap:26px; }
.story-item{ display:flex; gap:18px; }
.story-index{ font-family:var(--font-display); font-size:1.3rem; color:var(--rust-deep); flex:none; width:40px; }
.story-item h4{ font-size:1.05rem; margin-bottom:6px; }
.story-item p{ font-size:.96rem; color:var(--ink-70); }
.story-quote{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.35rem, 2.2vw, 1.8rem);
  line-height:1.4; color:var(--ink); border-left:3px solid var(--rust); padding-left:28px;
}
.story-quote cite{ display:block; margin-top:18px; font-family:var(--font-body); font-style:normal; font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-55); }

.ridge-scene{ margin-top:44px; }
.ridge-scene svg{ width:100%; height:auto; display:block; }
.ridge-fill{ fill:var(--ivory-warm); }
.ridge-line{ fill:none; stroke:var(--olive-deep); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ridge-sun{ fill:var(--rust); }
.ridge-slats line{ stroke:var(--paper); stroke-width:3.4; stroke-linecap:round; }
.ridge-caption{
  margin-top:14px; font-size:.86rem; font-weight:700; letter-spacing:.01em;
  color:var(--ink-55); max-width:44ch;
}

/* ---------- process ---------- */
.process{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:20px; }
.process-step{ background:var(--paper); padding:36px 26px; }
.process-num{ font-family:var(--font-display); font-size:2.4rem; color:var(--rust); line-height:1; margin-bottom:16px; }
.process-step h4{ font-size:1.05rem; margin-bottom:8px; }
.process-step p{ font-size:.92rem; color:var(--ink-70); }

/* ---------- area chips ---------- */
.area-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:30px; }
.area-chip{
  display:block; padding:26px 22px; border:1.5px solid var(--line); border-radius:2px; background:var(--paper);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.area-chip:hover{ transform:translateY(-3px); border-color:var(--rust); box-shadow:var(--shadow); }
.area-chip .eyebrow{ margin-bottom:10px; color:var(--olive); }
.area-chip .eyebrow::before{ background:var(--olive); }
.area-chip h4{ font-size:1.1rem; margin-bottom:8px; font-family:var(--font-display); font-weight:600; }
.area-chip p{ font-size:.88rem; color:var(--ink-70); }
.area-chip .area-go{ margin-top:14px; display:inline-block; font-weight:700; font-size:.82rem; color:var(--rust-deep); }

/* ---------- FAQ ---------- */
.faq-list{ margin-top:10px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:26px 4px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; font-family:var(--font-display); font-size:1.14rem; font-weight:600;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary{ transition:color .25s ease; }
.faq-item summary:hover{ color:var(--rust-deep); }
.faq-icon{ position:relative; width:22px; height:22px; flex:none; }
.faq-icon::before, .faq-icon::after{ content:""; position:absolute; background:var(--rust-deep); transition:transform .35s cubic-bezier(.4,0,.2,1); }
.faq-icon::before{ left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); }
.faq-icon::after{ top:0; left:50%; height:100%; width:2px; transform:translateX(-50%); }
.faq-item[open] .faq-icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-item[open] summary{ color:var(--olive-deep); }
.faq-answer{ padding:0 4px 26px; max-width:66ch; font-size:.98rem; color:var(--ink-70); }

/* ---------- closing CTA (animated glow) ---------- */
.cta-close{ position:relative; background:var(--olive-deep); color:var(--ivory); 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(182,85,46,.42), transparent 70%),
    radial-gradient(34% 40% at 82% 68%, rgba(139,149,105,.4), transparent 70%);
  filter:blur(10px);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{ 0%{ transform:translate(-3%, -2%) scale(1); } 100%{ transform:translate(3%, 3%) scale(1.08); } }
@media (prefers-reduced-motion: reduce){ .cta-glow{ animation:none; } }
.cta-close .container{ position:relative; z-index:1; }
.cta-close h2{ color:var(--ivory); max-width:16ch; margin:0 auto; }
.cta-close p{ margin:20px auto 0; max-width:48ch; color:rgba(250,246,236,.82); }
.cta-close .hero-ctas{ justify-content:center; margin-top:38px; }

/* ---------- enquiry form ---------- */
.enquire-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; }
.form-card{ background:var(--paper); border:1px solid var(--line); padding:40px; box-shadow:var(--shadow); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-55); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:2px; background:var(--ivory);
  font-family:var(--font-body); font-size:.98rem; color:var(--ink); transition:border-color .25s ease, background .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--olive); background:var(--paper); }
.field textarea{ resize:vertical; min-height:110px; }
.form-submit{ width:100%; }
.field-err{
  display:none; margin-top:7px; font-size:.8rem; font-weight:700;
  letter-spacing:.01em; text-transform:none; color:var(--rust-deep);
}
.field.invalid .field-err{ display:block; }
.field.invalid input, .field.invalid select, .field.invalid textarea{
  border-color:var(--rust); background:rgba(182,85,46,.055);
}
.form-popia{ margin-top:18px; font-size:.82rem; color:var(--ink-55); line-height:1.6; }
.form-success{ display:none; padding:20px; border:1.5px solid var(--olive); background:rgba(87,98,58,.08); color:var(--olive-deep); font-weight:700; font-size:.95rem; }
.form-success.show{ display:block; }
.form-card.is-sent form{ display:none; }

/* ---------- footer ---------- */
.site-footer{ background:var(--olive-deep); color:var(--ivory); padding:70px 0 34px; }
.footer-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.site-footer .brand{ color:var(--ivory); }
.footer-tag{ max-width:52ch; color:rgba(250,246,236,.82); font-size:.98rem; }
.footer-popia{ max-width:60ch; color:rgba(250,246,236,.62); font-size:.84rem; line-height:1.6; }
.footer-copy{ margin-top:20px; font-size:.8rem; color:rgba(250,246,236,.5); }
.site-footer .brand{ transition:opacity .25s ease; }
.site-footer .brand:hover{ opacity:.82; }

/* ---------- footer sitemap (product + area mesh) ---------- */
.footer-sitemap{ display:flex; flex-wrap:wrap; gap:36px 64px; margin:10px 0 4px; }
.footer-col-head{ font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:#D98A5E; margin:0 0 14px; }
.footer-sitemap-col ul{ display:flex; flex-direction:column; gap:9px; }
.footer-sitemap-col a{ font-size:.88rem; color:rgba(250,246,236,.82); transition:color .2s ease; }
.footer-sitemap-col a:hover{ color:var(--ivory); text-decoration:underline; }

/* ---------- product-page "where we fit these" area strip ---------- */
.areas-served-strip{ margin-top:44px; padding-top:34px; border-top:1px solid var(--line); }
.areas-served-strip p{ color:var(--ink-70); }
.area-pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.area-pill{ padding:9px 18px; border:1.5px solid var(--line); border-radius:999px; font-size:.85rem; font-weight:700; color:var(--olive-deep); background:var(--paper); transition:border-color .25s ease, background .25s ease, color .25s ease; }
.area-pill:hover{ border-color:var(--rust); color:var(--rust-deep); background:var(--ivory-warm); }
.legal-links a{ transition:color .25s ease; }
.legal-links a:hover{ color:var(--rust); }
.area-chip .area-go{ transition:transform .25s ease; }
.area-chip:hover .area-go{ transform:translateX(4px); }

/* ---------- reveal animation base ---------- */
.reveal{ opacity:1; }
.js-anim .reveal{ opacity:0; transform:translateY(34px); }
.js-anim .reveal.in{ opacity:1; transform:translateY(0); transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1); }

/* ---------- chat widget ---------- */
.chat-widget{ position:fixed; right:24px; bottom:24px; z-index:400; }
.chat-toggle{
  width:60px; height:60px; border-radius:50%; background:var(--rust-deep); color:var(--ivory); border:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px rgba(36,41,24,.32);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), background .25s ease;
}
.chat-toggle:hover{ transform:scale(1.06); background:var(--olive); }
.chat-toggle svg{ width:26px; height:26px; }
.chat-toggle .icon-close{ display:none; }
.chat-widget.open .chat-toggle .icon-chat{ display:none; }
.chat-widget.open .chat-toggle .icon-close{ display:block; }
.chat-panel{
  position:absolute; bottom:76px; right:0; width:360px; max-width:calc(100vw - 32px); height:min(520px, 70vh);
  background:var(--paper); border-radius:6px; box-shadow:0 24px 60px rgba(36,41,24,.35);
  display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.chat-widget.open .chat-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.chat-head{ background:var(--olive-deep); color:var(--ivory); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.chat-head-title{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; }
.chat-head-sub{ display:block; font-family:var(--font-body); font-size:.72rem; color:rgba(250,246,236,.6); font-weight:600; }
.chat-close{ background:none; border:none; color:var(--ivory); font-size:1.3rem; line-height:1; padding:4px; }
.chat-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; background:var(--ivory); }
.chat-msg{ max-width:86%; padding:11px 14px; border-radius:12px; font-size:.89rem; line-height:1.5; }
.chat-msg.bot{ background:var(--paper); border:1px solid var(--line); border-bottom-left-radius:2px; align-self:flex-start; color:var(--ink); }
.chat-msg.user{ background:var(--olive-deep); color:var(--ivory); border-bottom-right-radius:2px; align-self:flex-end; }
.chat-msg.popia{ font-size:.78rem; color:var(--ink-55); background:transparent; border:none; padding:0 2px; }
.chat-msg.summary{ background:rgba(87,98,58,.1); border:1px solid rgba(87,98,58,.3); color:var(--olive-deep); font-weight:600; font-size:.84rem; }
.chat-typing{ display:inline-flex; align-items:center; gap:5px; padding:13px 15px; }
.chat-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--olive-soft);
  animation:chatdot 1.15s ease-in-out infinite;
}
.chat-typing span:nth-child(2){ animation-delay:.16s; }
.chat-typing span:nth-child(3){ animation-delay:.32s; }
@keyframes chatdot{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .chat-typing span{ animation:none; opacity:.6; } }
.chat-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 12px; background:var(--ivory); }
.chip{ border:1.5px solid var(--olive); color:var(--olive-deep); background:var(--paper); padding:8px 13px; border-radius:20px; font-size:.82rem; font-weight:700; transition:background .2s ease, color .2s ease; }
.chip:hover{ background:var(--olive); color:var(--ivory); }
.chat-input-row{ display:flex; gap:8px; padding:14px; border-top:1px solid var(--line); background:var(--paper); }
.chat-input-row input{ flex:1; border:1.5px solid var(--line); border-radius:20px; padding:10px 16px; font-size:.88rem; font-family:var(--font-body); background:var(--ivory); }
.chat-input-row input:focus{ outline:none; border-color:var(--olive); }
.chat-input-row button{ width:38px; height:38px; border-radius:50%; background:var(--rust-deep); color:var(--ivory); border:none; font-size:1rem; flex:none; }
.chat-input-row button:hover{ background:var(--olive); }

/* ---------- inner pages (products / areas) ---------- */
.page-hero{ background:var(--olive-deep); color:var(--ivory); padding:168px 0 88px; position:relative; overflow:hidden; }
.page-hero::after{
  content:""; position:absolute; right:-8%; top:-30%; width:60%; height:160%;
  background:radial-gradient(circle, rgba(182,85,46,.22), transparent 68%); pointer-events:none;
}
.breadcrumb{ display:flex; flex-wrap:wrap; gap:8px; font-size:.82rem; font-weight:700; color:rgba(250,246,236,.62); margin-bottom:22px; position:relative; z-index:1; }
.breadcrumb a{ color:rgba(250,246,236,.86); transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--rust); }
.page-hero h1{ color:var(--ivory); font-size:clamp(2.2rem, 4.2vw, 3.4rem); max-width:19ch; position:relative; z-index:1; }
.page-hero .hero-sub{ color:rgba(250,246,236,.85); position:relative; z-index:1; }

.content-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:start; }
.content-grid h2{ font-size:clamp(1.7rem, 2.6vw, 2.2rem); }
.content-block{ margin-bottom:44px; }
.content-block:last-child{ margin-bottom:0; }
.content-block p{ color:var(--ink-70); margin-top:14px; }
.content-block p + p{ margin-top:14px; }

.tick-list{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.tick-list li{ display:flex; gap:12px; font-size:.98rem; color:var(--ink-70); }
.tick-list svg{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--olive); }

.side-card{ background:var(--ivory-warm); border:1px solid var(--line); padding:32px; position:sticky; top:110px; }
.side-card h4{ font-size:1.05rem; margin-bottom:12px; }
.side-card p{ font-size:.92rem; color:var(--ink-70); margin-bottom:20px; }
.side-card .btn{ width:100%; }
.side-links{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.side-links a{ font-size:.88rem; font-weight:700; color:var(--olive-deep); display:flex; align-items:center; gap:8px; transition:color .25s ease; }
.side-links a svg{ width:13px; height:13px; transition:transform .25s ease; }
.side-links a:hover{ color:var(--rust-deep); }
.side-links a:hover svg{ transform:translateX(4px); }

/* product / area page lead photograph */
.page-figure{
  margin:0 0 40px; position:relative; overflow:hidden; border-radius:2px;
  box-shadow:var(--shadow); background:var(--ivory-warm);
}
.page-figure img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; }
.page-figure figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:20px 22px;
  background:linear-gradient(0deg, rgba(36,41,24,.86) 0%, rgba(36,41,24,0) 100%);
  color:var(--ivory); font-size:.86rem; font-weight:700; letter-spacing:.01em;
}
.page-figure--inline{ margin:24px 0 0; box-shadow:none; border:1px solid var(--line); }
.page-figure--inline img{ aspect-ratio:16/9; }

.limit-note{ margin-top:14px; padding:18px 20px; border-left:3px solid var(--rust); background:var(--ivory-warm); font-size:.92rem; color:var(--ink-70); }

.related-strip{ margin-top:60px; padding-top:40px; border-top:1px solid var(--line); }
.related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; }
.related-card{ padding:20px; border:1.5px solid var(--line); background:var(--paper); font-size:.9rem; font-weight:700; transition:border-color .25s ease, transform .25s ease; }
.related-card:hover{ border-color:var(--rust); transform:translateY(-3px); }
.related-card span{ display:block; margin-top:8px; font-weight:600; font-size:.82rem; color:var(--ink-70); }

@media (max-width: 1080px){
  .content-grid{ grid-template-columns:1fr; }
  .side-card{ position:static; }
  .related-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){ .related-grid{ grid-template-columns:1fr; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .product-grid{ grid-template-columns:repeat(3, 1fr); }
  .process{ grid-template-columns:repeat(2, 1fr); }
  .area-grid{ grid-template-columns:repeat(2, 1fr); }
  .editorial, .story, .enquire-wrap{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .site-nav{
    position:fixed; top:0; right:0; bottom:0; width:min(320px, 84vw); background:var(--olive-deep);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px; padding:40px var(--pad);
    transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.7,.3,1);
  }
  .site-nav.open{ transform:translateX(0); }
  .site-nav a{ color:var(--ivory) !important; font-size:1.05rem; }
  .nav-toggle{ display:flex; }
  .nav-cta{ margin-top:10px; }
}
@media (max-width: 720px){
  .product-grid{ grid-template-columns:repeat(2, 1fr); }
  .process{ grid-template-columns:1fr; }
  .area-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .section{ padding:72px 0; }
  .form-card{ padding:26px; }
  .chat-panel{ right:-8px; }
  .hero-panel-text{ padding-top:56px; }
}
@media (max-width: 480px){
  .product-grid{ grid-template-columns:1fr 1fr; }
}

/* focus states */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--rust-deep); outline-offset:3px;
}

/* body lock while the mobile drawer is open */
body.nav-open{ overflow:hidden; }
.nav-scrim{
  position:fixed; inset:0; z-index:150; background:rgba(36,41,24,.44);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.nav-scrim.show{ opacity:1; pointer-events:auto; }
@media (min-width: 861px){ .nav-scrim{ display:none; } }

/* reduced motion overrides — content must always be visible and static */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero-panel-photo img{ transform:none !important; }
  .reveal, .js-anim .reveal{ opacity:1 !important; transform:none !important; }
  .rule{ transform:scaleX(1) !important; }
  .product-card, .photo-card, .area-chip, .related-card{ transform:none !important; }
  .pthumb img, .photo-card img{ transform:none !important; }
  .hero h1 .word{ opacity:1 !important; transform:none !important; }
  .ridge-line, .ridge-sun, .ridge-slats, .ridge-slats line{ stroke-dashoffset:0 !important; opacity:1 !important; transform:none !important; }
}


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

/* =========================================================================
   THE LEAD LADDER — guide.html (Rung 1), the ballpark window list (Rung 2)
   and the free-measure form additions (Rung 3). See engine/config/
   lead-ladder-spec.md. Mechanics live in js/ladder.js; these are the styles
   the markup on guide.html and the homepage enquiry section rely on.
   ========================================================================= */

/* ---------- homepage hero secondary link + guide teaser section ---------- */
.hero-guide-link{ margin-top:22px; font-size:.9rem; color:var(--ink-70); max-width:46ch; }
.hero-guide-link em{ font-family:var(--font-display); font-style:italic; color:var(--olive-deep); }
.hero-guide-link a{ color:var(--rust-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.hero-guide-link a:hover{ color:var(--rust); }

.guide-tease{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.guide-tease-photo{ position:relative; overflow:hidden; border-radius:2px; box-shadow:var(--shadow); }
.guide-tease-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block; }
.guide-tease-highlights{ margin-top:24px; display:flex; flex-direction:column; gap:13px; }
.guide-tease-highlights li{ display:flex; gap:11px; font-size:.94rem; color:var(--ink-70); }
.guide-tease-highlights svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--rust-deep); }
.guide-tease-meta{ margin-top:22px; font-size:.82rem; color:var(--ink-55); }
.guide-tease-ctas{ margin-top:26px; display:flex; flex-wrap:wrap; gap:16px; }
@media (max-width:1080px){ .guide-tease{ grid-template-columns:1fr; } .guide-tease-photo{ order:-1; } }

.footer-link{ margin-top:2px; }
.footer-link a{ color:var(--ivory); font-weight:700; text-decoration:underline; text-underline-offset:2px; opacity:.92; }
.footer-link a:hover{ opacity:1; color:var(--ivory-warm); }

/* ---------- guide hero (full-bleed photo, dark scrim) ---------- */
.guide-hero{ position:relative; min-height:86vh; display:flex; align-items:flex-end; overflow:hidden; }
.guide-hero-media{ position:absolute; inset:0; }
.guide-hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); }
.guide-hero-scrim{ position:absolute; inset:0; background:
  linear-gradient(0deg, rgba(36,41,24,.94) 0%, rgba(36,41,24,.6) 40%, rgba(36,41,24,.22) 70%, rgba(36,41,24,.06) 100%); }
.guide-hero-inner{ position:relative; z-index:2; padding:168px 0 68px; color:var(--ivory); width:100%; }
.guide-hero .breadcrumb{ color:rgba(250,246,236,.62); }
.guide-hero .breadcrumb a{ color:rgba(250,246,236,.88); }
.guide-hero .breadcrumb a:hover{ color:var(--rust); }
.guide-hero h1{ color:var(--ivory); font-size:clamp(2.3rem,4.6vw,3.9rem); max-width:17ch; }
.guide-hero h1 .lede{ display:block; font-family:var(--font-body); font-weight:800; font-size:clamp(.95rem,1.5vw,1.14rem);
  letter-spacing:.01em; color:#D98A5E; margin-top:14px; }
.guide-hero .sub{ margin-top:22px; max-width:56ch; font-size:1.06rem; line-height:1.65; color:rgba(250,246,236,.88); }
.guide-meta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:9px 22px; }
.guide-meta span{ font-size:.79rem; font-weight:700; letter-spacing:.02em; color:rgba(250,246,236,.68); display:flex; align-items:center; gap:8px; }
.guide-meta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--rust); flex:none; }
.guide-hero .hero-ctas{ margin-top:34px; }

/* ---------- in-page contents strip ---------- */
.guide-contents{ background:var(--paper); border-bottom:1px solid var(--line); padding:20px 0; position:relative; z-index:5; }
.guide-contents .container{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.guide-contents .lbl{ font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-55); margin-right:4px; }
.guide-contents a{ font-size:.8rem; font-weight:700; color:var(--ink-70); padding:8px 14px; border:1px solid var(--line); border-radius:20px;
  transition:border-color .25s ease, color .25s ease, background .25s ease; white-space:nowrap; }
.guide-contents a:hover{ border-color:var(--rust); color:var(--rust-deep); background:var(--ivory-warm); }
@media (max-width:860px){ .guide-contents .container{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; } }

/* ---------- prose ---------- */
.guide-prose{ max-width:68ch; }
.guide-prose p{ color:var(--ink-70); margin-bottom:18px; font-size:1.01rem; }
.guide-prose p:last-child{ margin-bottom:0; }
.guide-prose p strong{ color:var(--ink); font-weight:700; }
.guide-prose h3{ font-size:1.22rem; margin:34px 0 14px; }
.guide-prose ul{ margin:0 0 18px; }
.guide-prose ul li{ position:relative; padding-left:24px; margin-bottom:13px; color:var(--ink-70); font-size:.97rem; line-height:1.6; }
.guide-prose ul li::before{ content:""; position:absolute; left:0; top:11px; width:12px; height:2px; background:var(--rust); }
.guide-prose sup{ font-size:.66em; color:var(--rust-deep); font-weight:700; }

/* ---------- full-bleed photo band between sections ---------- */
.photo-band{ position:relative; margin:0; background:var(--olive-deep); overflow:hidden; }
.photo-band img{ width:100%; height:clamp(280px,46vw,540px); object-fit:cover; display:block; }
.photo-band figcaption{ position:absolute; left:0; right:0; bottom:0; padding:30px 0 26px;
  background:linear-gradient(0deg, rgba(36,41,24,.88) 0%, rgba(36,41,24,0) 100%); }
.photo-band figcaption span{ display:block; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); color:var(--ivory); font-size:.92rem; font-weight:600; max-width:54ch; }
.photo-band figcaption b{ font-family:var(--font-display); font-weight:600; font-style:italic; }

/* ---------- elevation cards ---------- */
.elev-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:12px; }
.elev-card{ background:var(--paper); padding:32px 30px; }
.elev-card .compass{ display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.elev-card .compass svg{ width:27px; height:27px; flex:none; color:var(--rust-deep); }
.elev-card .compass b{ font-family:var(--font-display); font-size:1.08rem; font-weight:600; }
.elev-card p{ color:var(--ink-70); font-size:.94rem; line-height:1.64; margin-bottom:12px; }
.elev-card p:last-of-type{ margin-bottom:0; }
.elev-card .verdict{ border-top:1px solid var(--line); margin-top:14px; padding-top:13px; font-size:.88rem; color:var(--ink-70); }
.elev-card .verdict em{ font-family:var(--font-display); font-style:italic; font-weight:600; color:var(--olive-deep); }

/* ---------- recommendation cards ---------- */
.rec-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:12px; }
.rec{ background:var(--paper); padding:30px clamp(22px,3vw,34px); display:grid; grid-template-columns:1fr auto; gap:8px 30px; }
.rec-head{ grid-column:1 / -1; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.rec-head h3{ font-size:1.16rem; }
.rec-head .where{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--rust-deep); }
.rec-body{ grid-column:1; }
.rec-body p{ color:var(--ink-70); font-size:.94rem; line-height:1.66; margin-bottom:12px; }
.rec-body p:last-child{ margin-bottom:0; }
.rec-trade{ border-left:2px solid var(--olive); background:var(--ivory-warm); padding:14px 18px; margin-top:14px; }
.rec-trade b{ display:block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--olive-deep); margin-bottom:6px; }
.rec-trade p{ font-size:.88rem; margin:0; color:var(--ink-70); }
.rec-side{ grid-column:2; grid-row:2; align-self:start; }
.rec-add{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1.5px solid var(--olive); border-radius:20px;
  background:transparent; color:var(--olive-deep); font-weight:700; font-size:.8rem; white-space:nowrap; transition:background .2s ease, color .2s ease; }
.rec-add:hover{ background:var(--olive); color:var(--ivory); }
.rec-add::before{ content:"+"; font-size:1.05rem; line-height:1; }
.rec-add.is-added{ background:var(--ivory-warm); border-color:var(--line); color:var(--ink-55); cursor:default; }
.rec-add.is-added::before{ content:"\2713"; font-size:.84rem; }
@media (max-width:720px){ .rec{ grid-template-columns:1fr; } .rec-side{ grid-column:1; grid-row:auto; margin-top:8px; } }

/* ---------- on-site checklist ---------- */
.check-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:12px; }
.check-item{ background:var(--paper); padding:30px 30px 28px; }
.check-item h4{ font-size:1.01rem; margin-bottom:9px; font-family:var(--font-display); font-weight:600; }
.check-item p{ color:var(--ink-70); font-size:.91rem; line-height:1.64; }

/* ---------- sources ---------- */
.sources{ background:var(--paper); border:1px solid var(--line); padding:32px clamp(22px,4vw,38px); margin-top:12px; }
.sources ol{ margin:0; padding-left:22px; color:var(--ink-70); font-size:.89rem; line-height:1.64; }
.sources li{ margin-bottom:12px; }
.sources a{ color:var(--rust-deep); text-decoration:underline; text-underline-offset:2px; }
.sources a:hover{ color:var(--rust); }
.sources .note{ font-size:.85rem; color:var(--ink-55); margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }

/* ---------- ladder split layout (mid-page capture / measure / end capture) ---------- */
.ladder-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
.ladder-side p{ color:var(--ink-70); margin-top:16px; }
.promise{ margin-top:26px; display:flex; flex-direction:column; gap:15px; }
.promise-item{ display:flex; gap:11px; align-items:flex-start; font-size:.91rem; color:var(--ink-70); }
.promise-item svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--rust-deep); }
.capacity{ margin-top:26px; padding:16px 18px; background:var(--ivory-warm); border-left:2px solid var(--olive); font-size:.87rem; color:var(--ink-70); }
@media (max-width:1080px){ .ladder-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- interest checkbox grid on the measure form ---------- */
.interest-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; margin-top:2px; }
.interest-grid label{ display:flex; align-items:flex-start; gap:9px; padding:8px 0; font-size:.87rem; color:var(--ink-70); cursor:pointer; }
.interest-grid input{ width:16px; height:16px; flex:none; margin-top:2px; accent-color:var(--olive); }
.interest-grid input:checked + span{ color:var(--ink); font-weight:700; }
.legend{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-55); margin-bottom:10px; }
.carry-note{ font-size:.82rem; color:var(--ink-70); background:var(--ivory-warm); padding:11px 14px; margin-top:10px; line-height:1.55; border-left:2px solid var(--rust); }
.carry-note strong{ color:var(--ink); }
@media (max-width:720px){ .interest-grid{ grid-template-columns:1fr; } }

/* ---------- Rung 2 — the ballpark window list ---------- */
.ballpark{ margin-top:20px; border:1.5px dashed var(--line); background:var(--ivory-warm); }
.ballpark > summary{ list-style:none; cursor:pointer; padding:17px 20px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; font-weight:700; font-size:.9rem; color:var(--olive-deep); }
.ballpark > summary::-webkit-details-marker{ display:none; }
.ballpark > summary:hover{ color:var(--rust-deep); }
.ballpark > summary .chev{ width:15px; height:15px; flex:none; color:var(--rust-deep); transition:transform .3s ease; }
.ballpark[open] > summary .chev{ transform:rotate(180deg); }
.bp-inner{ padding:0 20px 20px; }
.bp-pairing{ font-size:.87rem; color:var(--ink-70); line-height:1.64; margin-bottom:18px; max-width:64ch; }
.bp-pairing strong{ color:var(--ink); font-weight:700; }
.bp-scroll{ overflow-x:auto; }
.bp-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.bp-table th{ text-align:left; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-55);
  padding:0 8px 8px 0; border-bottom:1px solid var(--line); white-space:nowrap; }
.bp-table td{ padding:7px 8px 7px 0; vertical-align:middle; }
.bp-table input, .bp-table select{ width:100%; min-width:96px; padding:9px 10px; border:1.5px solid var(--line); border-radius:2px;
  background:var(--paper); font-family:var(--font-body); font-size:.85rem; color:var(--ink); }
.bp-table input:focus, .bp-table select:focus{ outline:none; border-color:var(--olive); }
.bp-table td.bp-rm{ width:34px; padding-right:0; }
.bp-remove{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper); color:var(--ink-55);
  font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease, background .2s ease; }
.bp-remove:hover{ border-color:var(--rust); color:var(--rust-deep); background:var(--ivory-warm); }
.bp-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; }
.bp-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1.5px solid var(--line); border-radius:2px;
  background:var(--paper); font-weight:700; font-size:.8rem; color:var(--ink-70); transition:border-color .2s ease, color .2s ease, background .2s ease; }
.bp-btn:hover{ border-color:var(--olive); color:var(--olive-deep); background:var(--ivory-warm); }
.bp-btn svg{ width:14px; height:14px; }
.bp-count{ font-size:.8rem; color:var(--ink-55); margin-top:14px; }
.bp-foot{ font-size:.77rem; color:var(--ink-55); margin-top:10px; 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; }

@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{ background:var(--paper); border:1px solid var(--line); padding:14px 14px 4px; margin-bottom:12px; position:relative; }
  .bp-table td{ padding:0 0 12px; }
  .bp-table td[data-lbl]::before{ content:attr(data-lbl); display:block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-55); margin-bottom:5px; }
  .bp-table td.bp-rm{ position:absolute; top:8px; right:8px; width:auto; padding:0; }
  .bp-table td.bp-rm::before{ content:none; }
  .sources{ padding:24px 20px; }
}

/* richer .form-success content (guide/measure forms return HTML, not plain text) */
.form-success h3{ font-size:1.14rem; margin-bottom:10px; font-family:var(--font-display); font-weight:600; }
.form-success p{ color:var(--ink-70); font-weight:400; font-size:.92rem; line-height:1.6; margin-bottom:10px; }
.form-success p:last-child{ margin-bottom:0; }
.form-success a{ color:var(--rust-deep); text-decoration:underline; text-underline-offset:2px; font-weight:700; }

/* ---------- print stylesheet: the ballpark list prints as a blank form ---------- */
@media print{
  .site-header, .nav-scrim, .marquee, .guide-contents, .guide-hero, .photo-band, .hero-ctas,
  .bp-actions, .bp-remove, .ballpark > summary, .bp-pairing, .form-popia, .popia-line, .site-footer,
  .chat-widget, .cta-close, .legal-links, .rule{ display:none !important; }
  .ballpark{ border:none; background:#fff; margin:0; }
  .bp-inner{ padding:0; }
  .bp-print-head{ display:block; margin-bottom:16px; }
  .bp-print-head h2{ font-size:1.4rem; margin-bottom:6px; font-family:var(--font-display); }
  .bp-print-head p{ font-size:.8rem; color:#444; }
  .bp-table input, .bp-table select{ border:1px solid #999; background:#fff; }
  .bp-table th{ border-bottom:1px solid #666; }
  .form-card{ border:none; box-shadow:none; padding:0; }
  body.bp-printing .section{ padding:0 !important; }
  body.bp-printing .guide-prose, body.bp-printing .rec-list, body.bp-printing .elev-grid,
  body.bp-printing .check-list, body.bp-printing .sources, body.bp-printing .section-head,
  body.bp-printing .ladder-side, body.bp-printing .field-row, body.bp-printing .interest-grid,
  body.bp-printing .field:not(.bp-holder), body.bp-printing .form-success,
  body.bp-printing form > button{ display:none !important; }
  body.bp-printing .ladder-grid{ display:block !important; }
}