/* =========================================================
   Blue Hills Blinds — design system
   Theme: equestrian-estate
   Palette: chalk canvas + peat ink + harbour teal-grey accent
            (wiki/design/colour-system.md — Chalk & Peat / Harbour)
   Fonts: Libre Caslon Text (display) + Karla (body/UI)
   ========================================================= */

:root{
  --ink:#29271F;          /* peat ink — headings, nav-solid, footer */
  --ink-2:#3A372C;        /* peat mid */
  --ink-deep:#1C1A14;     /* darkest peat — CTA band */
  --paper:#F9F7F2;        /* chalk — base background */
  --paper-soft:#F0EDE5;   /* chalk, deeper — alternating sections */
  --paper-line:#E1DDD1;   /* hairline on chalk */
  --white:#FFFFFF;
  --accent:#5E7A76;       /* harbour teal-grey accent */
  --accent-deep:#3A524E;  /* harbour deep — hover/active */
  --accent-soft:#8FA5A1;  /* harbour tint — accent on dark grounds */
  --ink-soft:#5B564A;     /* muted body text, warm grey */
  --ink-faint:#6F6A5E;   /* legible small print — POPIA lines must clear AA */

  --font-display:'Libre Caslon Text', Georgia, 'Iowan Old Style', serif;
  --font-body:'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --section-pad: 6.5rem;
  --container-w: 1240px;
  --radius: 3px;
  --ease: cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark){
  /* Network sites are intentionally not dark-mode adaptive — the estate
     photography and the chalk/peat/harbour palette are the brand. Kept light. */
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  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; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; font-size:1rem; }

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

.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:1.6em;
  height:1px;
  background:var(--accent);
  display:inline-block;
}

.rule{
  height:1px;
  width:100%;
  background:var(--paper-line);
  transform-origin:left center;
}
.rule.draw{ transform:scaleX(0); }
.rule.draw.in-view{ transform:scaleX(1); transition:transform 1.1s var(--ease); }

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

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.95rem 1.9rem;
  border-radius:var(--radius);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.03em;
  border:1.5px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  position:relative;
}
.btn-primary{ background:var(--accent); color:var(--white); }
.btn-primary:hover{ background:var(--accent-deep); }
.btn-outline{ border-color:currentColor; color:var(--white); background:transparent; }
.btn-outline:hover{ background:rgba(255,255,255,.14); }
.btn-outline.on-light{ color:var(--ink); border-color:var(--ink); }
.btn-outline.on-light:hover{ background:rgba(41,39,31,.06); }
.btn-block{ width:100%; justify-content:center; }

/* ================= NAV ================= */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:1.35rem 0;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-nav.is-solid{
  background:var(--paper);
  padding:.85rem 0;
  box-shadow:0 6px 24px rgba(28,26,20,.09);
}
.nav-brand{ display:flex; align-items:center; gap:.65rem; }
.nav-brand__mark{ width:34px; height:34px; flex:none; color:var(--white); transition:color .35s var(--ease); }
.nav-brand__word{
  font-family:var(--font-display);
  font-size:1.28rem;
  letter-spacing:-0.01em;
  color:var(--white);
  transition:color .35s var(--ease);
}
.site-nav.is-solid .nav-brand__word{ color:var(--ink); }
.site-nav.is-solid .nav-brand__mark{ color:var(--ink); }
.footer__brand .nav-brand__mark{ color:var(--paper); }
.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--white);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.site-nav.is-solid .nav-links a{ color:var(--ink); }
.nav-links a:hover{ border-color:var(--accent); color:var(--accent); }
.nav-cta{ display:flex; align-items:center; gap:1.2rem; }
.nav-cta .btn{ padding:.7rem 1.4rem; font-size:.82rem; }
.nav-toggle{
  display:none; background:none; border:none; padding:.4rem;
  width:40px; height:40px; position:relative;
}
.nav-toggle span{
  position:absolute; left:8px; right:8px; height:2px; background:var(--white);
  transition:transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.site-nav.is-solid .nav-toggle span{ background:var(--ink); }
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ top:26px; }
.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:1.6rem; padding:2rem 2.4rem;
    transform:translateX(100%); transition:transform .4s var(--ease);
    z-index:199;
  }
  .nav-open .nav-links{ transform:translateX(0); }
  .nav-links a{ color:var(--white); font-size:1.05rem; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
}

/* ================= HERO ================= */
.hero{
  position:relative;
  height:min(92vh, 900px);
  min-height:560px;
  overflow:hidden;
  background:var(--ink);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 62%;
  transform:scale(1.06);
  will-change:transform;
}
/* Scrims are deliberately light: the paddock photograph is the hero, not a
   texture behind a headline. Measured — nav text sits at ~6:1 over the top
   band, the ink headline at ~9.7:1 over the chalk fade. */
.hero__scrim-top{
  position:absolute; inset:0 0 auto 0; height:34%;
  background:linear-gradient(to bottom, rgba(28,26,20,.44), rgba(28,26,20,.16) 62%, transparent);
}
.hero__scrim-fade{
  position:absolute; inset:auto 0 0 0; height:42%;
  background:linear-gradient(to top, var(--paper) 0%, rgba(249,247,242,.66) 38%, transparent 100%);
}
.hero__inner{
  position:relative; z-index:5; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:0;
}
.hero__headline-wrap{
  padding:0 clamp(1.25rem, 4vw, 3rem);
  max-width:1140px;
}
/* The eyebrow sits INSIDE the chalk fade, not on the dark part of the photo —
   so it takes ink, never white (white here measured 1.8:1 and was invisible). */
.hero__eyebrow{
  color:var(--ink);
  margin-bottom:1.1rem;
}
.hero__eyebrow::before{ background:var(--accent); }
.hero__headline{
  font-size:clamp(2.5rem, 3.6vw + 1.2rem, 4.6rem);
  color:var(--ink);
  margin:0 0 0 -.03em;
  text-shadow:0 2px 26px rgba(249,247,242,.42);
}
.hero__headline .word{ display:inline-block; }
.hero__body{
  position:relative; z-index:5;
  background:var(--paper);
  padding:1.6rem clamp(1.25rem, 4vw, 3rem) var(--section-pad);
}
.hero__sub{
  max-width:46ch; color:var(--ink-soft); font-size:1.08rem; margin:0 0 2.1rem;
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }
.hero__ctas .btn-outline{ color:var(--ink); border-color:var(--ink); }
.hero__ctas .btn-outline:hover{ background:rgba(41,39,31,.06); }

.trust-row{
  display:flex; flex-wrap:wrap; gap:1.8rem 2.6rem;
  border-top:1px solid var(--paper-line);
  padding-top:2rem;
}
.trust-row__item{
  display:flex; align-items:flex-start; gap:.65rem;
  font-size:.92rem; color:var(--ink); font-weight:700; max-width:22ch;
}
.trust-row__item svg{ flex:none; width:20px; height:20px; margin-top:1px; color:var(--accent); }

/* ================= MARQUEE ================= */
.marquee{
  background:var(--ink); color:var(--paper);
  overflow:hidden; white-space:nowrap;
  padding:.95rem 0;
  border-top:1px solid rgba(249,247,242,.14);
  border-bottom:1px solid rgba(249,247,242,.14);
}
.marquee__track{
  display:inline-flex;
  animation:marquee 34s linear infinite;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.marquee__item{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  padding:0 2.4rem;
  color:var(--paper);
  opacity:.9;
}
.marquee__item::after{ content:'—'; margin-left:2.4rem; color:var(--accent-soft); }

/* ================= SECTION SHELL ================= */
.section{ padding:var(--section-pad) 0; }
.section--soft{ background:var(--paper-soft); }
.section__head{ max-width:640px; margin-bottom:3rem; }
.section__title{
  font-size:clamp(2rem, 1.6vw + 1.3rem, 2.9rem);
  margin-top:.9rem;
}
.section__intro{ color:var(--ink-soft); font-size:1.04rem; margin-top:1.1rem; max-width:56ch; }
/* Reveal targets only start hidden once JS has confirmed it is running (the
   inline head script stamps html.js). No JS, blocked CDN or a script error and
   every section is simply visible — the page never renders blank. */
.js .reveal{ opacity:0; transform:translateY(28px); }
.js .reveal.in-view{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }

/* ================= PRODUCT GRID ================= */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--paper-line);
  border:1px solid var(--paper-line);
}
.product-card{
  background:var(--paper);
  padding:2.4rem 1.9rem;
  display:flex; flex-direction:column; gap:1.1rem;
  transition:background .3s var(--ease);
}
.product-card:hover{ background:var(--white); }
.product-card__icon{ width:52px; height:52px; color:var(--ink); }
.product-card__icon svg{ width:100%; height:100%; }
.product-card__name{ font-family:var(--font-display); font-size:1.22rem; }
.product-card__benefit{ color:var(--ink-soft); font-size:.94rem; flex:1; }
.product-card__link{
  font-size:.82rem; font-weight:700; letter-spacing:.03em; color:var(--accent);
  display:inline-flex; align-items:center; gap:.4rem;
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.product-card__link svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.product-card:hover .product-card__link{ gap:.65rem; color:var(--accent-deep); }
.product-card:hover .product-card__link svg{ transform:translateX(3px); }

@media (max-width:1080px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .product-grid{ grid-template-columns:1fr; } }

/* ================= EDITORIAL PHOTO SECTION ================= */
.editorial{ padding:var(--section-pad) 0; }
.editorial__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:1.5rem;
}
.editorial__col{ display:flex; flex-direction:column; gap:1.5rem; }
.editorial__figure{ position:relative; overflow:hidden; border-radius:var(--radius); }
.editorial__figure img{ width:100%; height:100%; object-fit:cover; }
.editorial__figure.tall{ aspect-ratio:4/5; }
.editorial__figure.wide{ aspect-ratio:16/10; }
.editorial__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem 1.5rem;
  background:linear-gradient(to top, rgba(28,26,20,.76), transparent);
  color:var(--white); font-size:.86rem; letter-spacing:.02em;
}
.editorial__note{
  background:var(--ink); color:var(--paper);
  padding:2.4rem 2.2rem; border-radius:var(--radius);
  display:flex; flex-direction:column; justify-content:center; gap:1rem;
}
.editorial__note p{ font-family:var(--font-display); font-size:1.35rem; line-height:1.4; margin:0; }
.editorial__note span{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); }

@media (max-width:860px){
  .editorial__grid{ grid-template-columns:1fr; }
}

/* ================= LOCALE / FENCE SIGNATURE ================= */
.locale{ position:relative; background:var(--paper); overflow:hidden; }
.locale__fence{ width:100%; height:auto; display:block; margin-bottom:2.6rem; }
.locale__fence path,
.locale__fence line{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  pathLength:1;
}
.locale__fence.draw path,
.locale__fence.draw line{
  transition:stroke-dashoffset 1.6s var(--ease);
}
.locale__fence.draw.in-view path,
.locale__fence.draw.in-view line{
  stroke-dashoffset:0;
}
.locale__grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:3.5rem; align-items:start;
}
.locale__col p{ color:var(--ink-soft); margin:0 0 1.2rem; max-width:52ch; }
.locale__col p:last-child{ margin-bottom:0; }
.locale__col strong{ color:var(--ink); }
@media (max-width:860px){ .locale__grid{ grid-template-columns:1fr; gap:2rem; } }

/* ================= PROCESS ================= */
.process__list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2.2rem;
  counter-reset:step;
}
.process__step{ position:relative; padding-top:1.6rem; border-top:1px solid var(--paper-line); }
.process__num{
  font-family:var(--font-display); font-size:1rem; color:var(--accent);
  display:block; margin-bottom:1rem;
}
.process__step h3{ font-size:1.28rem; margin-bottom:.6rem; }
.process__step p{ color:var(--ink-soft); font-size:.95rem; }
@media (max-width:900px){ .process__list{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .process__list{ grid-template-columns:1fr; } }

/* ================= AREA CHIPS ================= */
.areas-strip__list{ display:flex; flex-wrap:wrap; gap:1rem; }
.area-chip{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:1rem 1.5rem; border:1px solid var(--paper-line); border-radius:40px;
  font-weight:700; font-size:.94rem; background:var(--paper);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.area-chip svg{ width:16px; height:16px; color:var(--accent); }
.area-chip:hover{ border-color:var(--accent); background:var(--white); transform:translateY(-2px); }

/* ================= FAQ ================= */
.faq__list{ max-width:800px; }
.faq__item{
  border-bottom:1px solid var(--paper-line);
  padding:1.6rem 0;
}
.faq__summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  cursor:pointer; list-style:none; font-family:var(--font-display); font-size:1.2rem;
}
.faq__summary::-webkit-details-marker{ display:none; }
.faq__icon{ position:relative; width:22px; height:22px; flex:none; }
.faq__icon::before, .faq__icon::after{
  content:''; position:absolute; background:var(--ink);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq__icon::before{ width:14px; height:2px; }
.faq__icon::after{ width:2px; height:14px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
details[open] .faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq__answer{ color:var(--ink-soft); margin-top:1rem; max-width:64ch; font-size:.98rem; }

/* ================= CLOSING CTA ================= */
.cta-band{
  position:relative; overflow:hidden;
  background:var(--ink-deep); color:var(--paper);
  padding:6.5rem 0; text-align:center;
}
.cta-band__glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(46% 60% at 22% 30%, rgba(94,122,118,.55), transparent 65%),
    radial-gradient(50% 60% at 78% 70%, rgba(143,165,161,.32), transparent 65%);
  filter:blur(10px);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform:translate(-3%,-2%) scale(1); }
  100%{ transform:translate(3%,4%) scale(1.12); }
}
.cta-band__inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
.cta-band .eyebrow{ color:var(--accent-soft); justify-content:center; }
.cta-band .eyebrow::before{ background:var(--accent-soft); }
.cta-band h2{ color:var(--white); font-size:clamp(2rem, 2vw + 1.2rem, 3.1rem); margin:1rem 0 1.4rem; }
.cta-band p{ color:rgba(249,247,242,.80); max-width:48ch; margin:0 auto 2.2rem; }
.cta-band .btn-primary{ position:relative; }

/* ================= FORM ================= */
.enquire{ background:var(--paper-soft); }
.enquire__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; }
.enquire__col p{ color:var(--ink-soft); max-width:46ch; }
.enquire__list{ margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
.enquire__list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.94rem; color:var(--ink); }
.enquire__list svg{ width:18px; height:18px; color:var(--accent); flex:none; margin-top:2px; }

.form{ background:var(--white); padding:2.6rem; border-radius:var(--radius); border:1px solid var(--paper-line); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form__field{ margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.form__field label{ font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--ink); }
.form__field input, .form__field select, .form__field textarea{
  border:1.5px solid var(--paper-line); border-radius:var(--radius);
  padding:.85rem 1rem; background:var(--paper); color:var(--ink);
  transition:border-color .25s var(--ease);
}
.form__field input:focus, .form__field select:focus, .form__field textarea:focus{
  border-color:var(--accent); outline:none;
}
.form__field textarea{ resize:vertical; min-height:110px; }
.form__popia{ font-size:.82rem; color:var(--ink-faint); margin:1.2rem 0 1.4rem; line-height:1.6; }
.form__status{ font-size:.9rem; margin-top:1rem; color:var(--accent-deep); font-weight:700; }
@media (max-width:860px){ .enquire__grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } .form{ padding:1.8rem; } }

/* ================= FOOTER ================= */
.site-footer{ background:var(--ink); color:var(--paper); padding:4.5rem 0 2rem; }
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:3rem; border-bottom:1px solid rgba(249,247,242,.16);
}
.footer__brand{ display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.footer__brand .nav-brand__word{ color:var(--paper); }
.footer__statement{ color:rgba(249,247,242,.70); font-size:.94rem; max-width:32ch; }
.footer h4{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:1.1rem; }
.footer__links{ display:flex; flex-direction:column; gap:.7rem; }
.footer__links a{ color:rgba(249,247,242,.84); font-size:.92rem; transition:color .25s var(--ease); }
.footer__links a:hover{ color:var(--white); }
.footer__bottom{ padding-top:2rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }
.footer__popia{ color:rgba(249,247,242,.58); font-size:.82rem; max-width:56ch; line-height:1.6; }
.footer__copy{ color:rgba(249,247,242,.54); font-size:.82rem; }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }

/* ================= PAGE HERO (products / areas) ================= */
.page-hero{
  position:relative; padding:9.5rem 0 4rem; background:var(--ink); color:var(--white); overflow:hidden;
}
.page-hero__bg{ position:absolute; inset:0; opacity:.46; overflow:hidden; }
.page-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.page-hero__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(28,26,20,.42), var(--ink) 97%); }
.page-hero__inner{ position:relative; z-index:2; }
.breadcrumb{ font-size:.82rem; color:rgba(249,247,242,.70); margin-bottom:1.4rem; display:flex; gap:.5rem; align-items:center; }
.breadcrumb a{ color:rgba(249,247,242,.88); }
.breadcrumb a:hover{ color:var(--accent-soft); }
.page-hero h1{ color:var(--white); font-size:clamp(2.2rem, 2.6vw + 1.2rem, 3.6rem); max-width:760px; }
.page-hero__lead{ color:rgba(249,247,242,.84); max-width:56ch; margin-top:1.2rem; font-size:1.05rem; }

.content{ padding:var(--section-pad) 0; }
.content__grid{ display:grid; grid-template-columns:1.3fr .8fr; gap:3.5rem; }
.content__col p{ color:var(--ink-soft); margin:0 0 1.3rem; }
.content__col h2{ font-size:1.7rem; margin:2.2rem 0 1rem; }
.content__col h2:first-child{ margin-top:0; }
.spec-card{ background:var(--paper-soft); border-radius:var(--radius); padding:2rem; height:fit-content; }
.spec-card h3{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1.2rem; }
.spec-card dl{ margin:0; }
.spec-card dt{ font-weight:700; font-size:.88rem; color:var(--ink); margin-top:1rem; }
.spec-card dt:first-child{ margin-top:0; }
.spec-card dd{ margin:.25rem 0 0; color:var(--ink-soft); font-size:.9rem; }
.spec-card .btn{ margin-top:1.6rem; }
@media (max-width:900px){ .content__grid{ grid-template-columns:1fr; } }

.related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.related-card{
  border:1px solid var(--paper-line); border-radius:var(--radius); padding:1.8rem;
  background:var(--paper); transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.related-card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.related-card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.related-card p{ color:var(--ink-soft); font-size:.88rem; margin:0 0 1rem; }
.related-card a{ font-size:.8rem; font-weight:700; color:var(--accent); }
@media (max-width:900px){ .related-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .related-grid{ grid-template-columns:1fr; } }

.area-photo{ border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; margin-bottom:2.5rem; }
.area-photo img{ width:100%; height:100%; object-fit:cover; }

/* ================= CHAT WIDGET ================= */
.chat-launcher{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:300;
  width:60px; height:60px; border-radius:50%;
  background:var(--accent); color:var(--white); border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(28,26,20,.32);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.chat-launcher:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.chat-launcher svg{ width:26px; height:26px; }
.chat-launcher .chat-launcher__close{ display:none; }
.chat-open .chat-launcher .chat-launcher__chat{ display:none; }
.chat-open .chat-launcher .chat-launcher__close{ display:block; }

.chat-panel{
  position:fixed; right:1.6rem; bottom:5.6rem; z-index:300;
  width:min(370px, calc(100vw - 2.4rem)); max-height:min(560px, calc(100vh - 8rem));
  background:var(--white); border-radius:10px; overflow:hidden;
  box-shadow:0 24px 60px rgba(28,26,20,.26);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.chat-open .chat-panel{ opacity:1; transform:none; pointer-events:auto; }
.chat-panel__header{
  background:var(--ink); color:var(--paper); padding:1.1rem 1.3rem;
  display:flex; align-items:center; gap:.7rem;
}
.chat-panel__header svg{ width:26px; height:26px; flex:none; }
.chat-panel__header strong{ display:block; font-family:var(--font-display); font-size:1.02rem; color:var(--white); }
.chat-panel__header span{ display:block; font-size:.76rem; color:rgba(249,247,242,.70); }
.chat-panel__body{
  flex:1; overflow-y:auto; padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:.8rem;
  background:var(--paper);
}
.chat-msg{ max-width:85%; padding:.7rem .95rem; border-radius:12px; font-size:.9rem; line-height:1.5; }
.chat-msg--bot{ background:var(--white); border:1px solid var(--paper-line); align-self:flex-start; border-bottom-left-radius:3px; }
.chat-msg--user{ background:var(--accent); color:var(--white); align-self:flex-end; border-bottom-right-radius:3px; }
.chat-popia{ font-size:.72rem; color:var(--ink-faint); align-self:flex-start; max-width:92%; }
.chat-chips{ display:flex; flex-wrap:wrap; gap:.5rem; padding:.2rem 1.3rem 1rem; background:var(--paper); }
.chat-chip{
  border:1.5px solid var(--accent); color:var(--accent); background:var(--white);
  padding:.5rem .9rem; border-radius:30px; font-size:.8rem; font-weight:700;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.chat-chip:hover{ background:var(--accent); color:var(--white); }
.chat-panel__form{
  display:flex; gap:.6rem; padding:1rem 1.1rem; border-top:1px solid var(--paper-line); background:var(--white);
}
.chat-panel__form input{
  flex:1; border:1.5px solid var(--paper-line); border-radius:30px; padding:.6rem 1rem; font-size:.88rem;
  background:var(--paper);
}
.chat-panel__form input:focus{ outline:none; border-color:var(--accent); }
.chat-panel__form button{
  width:38px; height:38px; border-radius:50%; border:none; background:var(--accent); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.chat-panel__form button:hover{ background:var(--accent-deep); }
.chat-panel__form button svg{ width:16px; height:16px; }
.chat-hidden{ display:none !important; }

@media (max-width:480px){
  .chat-panel{ right:.8rem; left:.8rem; width:auto; bottom:5.2rem; }
  .chat-launcher{ right:1rem; bottom:1rem; }
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal, .reveal{ opacity:1 !important; transform:none !important; }
  .rule.draw{ transform:scaleX(1) !important; }
  .locale__fence path, .locale__fence line{ stroke-dashoffset:0 !important; }
  .hero__media img{ transform:none; }
  .marquee__track{ animation:none; }
  .cta-band__glow{ animation:none; }
  .hero__headline .word{ opacity:1 !important; transform:none !important; }
}

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


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


/* =========================================================
   REVIEW PASS — craft layer
   Added in the senior-review pass. Everything below is scoped
   to this site's own classes; nothing here changes the
   equestrian identity, only how tightly it is built.
   ========================================================= */

/* --- pthumb is a CARD wrapper; it must never own an absolutely
       positioned hero. Those keep their own box. --- */
.hero__media.pthumb,
.page-hero__bg.pthumb{
  position:absolute; inset:0;
  width:auto!important; height:auto!important;
  aspect-ratio:auto; margin:0; background:none;
}
.area-photo.pthumb{ aspect-ratio:16/9; margin:0 0 2.5rem; background:var(--paper-soft); }
.lead-figure.pthumb{ aspect-ratio:3/2; margin:0 0 2.4rem; border-radius:var(--radius); }

/* --- thin accent rules that draw themselves in --- */
.rule{ background:var(--paper-line); }
.rule--accent{
  height:2px; width:clamp(56px, 8vw, 104px); background:var(--accent);
  margin:0 0 1.6rem;
}
.section__head .rule--accent,
.locale__col .rule--accent,
.cta-band__inner .rule--accent,
.enquire__col .rule--accent{ margin:1.15rem 0 0; }
.cta-band__inner .rule--accent{ margin-left:auto; margin-right:auto; }
.rule.draw{ transform:scaleX(0); }
.rule.draw.in-view{ transform:scaleX(1); transition:transform 1.1s var(--ease); }
.section-rule{ padding:0; }
.section-rule .rule{ height:1px; }

/* --- nav: underline that grows from the left, not a border flick --- */
.nav-links a{ position:relative; border-bottom:0; }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform .28s var(--ease);
}
.nav-links a:hover{ color:var(--accent); }
.site-nav.is-solid .nav-links a:hover{ color:var(--accent-deep); }
.nav-links a:hover::after,
.nav-links a:focus-visible::after{ transform:scaleX(1); }
.nav-brand:hover .nav-brand__mark{ transform:translateY(-1px); }
.nav-brand__mark{ transition:color .35s var(--ease), transform .35s var(--ease); }
.site-nav.is-solid{ border-bottom:1px solid var(--paper-line); }

/* --- buttons: lift + shadow, and a magnetic wrapper that does not
       fight the CSS transform --- */
.btn-primary{ box-shadow:0 1px 0 rgba(28,26,20,.06); }
.btn-primary:hover{ box-shadow:0 8px 22px rgba(58,82,78,.28); }
.btn:active{ transform:translateY(1px); }
.magnetic{ will-change:transform; }

/* --- product cards: whole card is the hit area, arrow answers --- */
.product-card{ position:relative; }
.product-card__link::after{
  content:''; position:absolute; inset:0; border-radius:2px;
}
.product-card:focus-within{ background:var(--white); }
.product-card:focus-within .product-card__link{ color:var(--accent-deep); }

/* --- area chips + related cards get the same 200-300ms language --- */
.related-card{ display:block; }
.related-card a{ display:inline-flex; align-items:center; gap:.35rem; transition:gap .25s var(--ease), color .25s var(--ease); }
.related-card:hover a{ gap:.6rem; color:var(--accent-deep); }
.spec-card{ border:1px solid var(--paper-line); }

/* --- FAQ: summary hover + focus, indicator already animates --- */
.faq__summary{ transition:color .25s var(--ease); }
.faq__summary:hover{ color:var(--accent-deep); }
.faq__summary:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
.faq__icon::before, .faq__icon::after{ background:var(--accent-deep); }
.faq__answer{ animation:faqIn .35s var(--ease); }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* --- signature: the paddock rail. The posts drop in, then the two
       rails run left to right the way a fence gets built. --- */
.locale__fence{ overflow:visible; }
.locale__rail{ stroke:var(--accent); }
.locale__post{ stroke:var(--ink); opacity:.5; }

/* --- form polish --- */
.form__field input::placeholder, .form__field textarea::placeholder{ color:var(--ink-faint); }
.form__field select{ appearance:none; background-image:
  linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
  linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(1.15rem), calc(100% - 15px) calc(1.15rem);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:2.6rem; }
.form__hint{ font-size:.8rem; color:var(--ink-faint); margin:-.2rem 0 0; }
.form__status:empty{ display:none; }

/* --- chat: typing dots + a scrollable, keyboard-reachable panel --- */
.chat-typing{ display:inline-flex; gap:4px; align-items:center; }
.chat-typing i{
  width:5px; height:5px; border-radius:50%; background:var(--ink-faint); display:block;
  animation:chatDot 1s infinite ease-in-out;
}
.chat-typing i:nth-child(2){ animation-delay:.15s; }
.chat-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes chatDot{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-3px); opacity:1; } }
.chat-msg--bot strong{ font-weight:700; }
.chat-chip:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.chat-launcher:focus-visible{ outline:3px solid var(--accent-deep); outline-offset:3px; }
.chat-panel__body{ scrollbar-width:thin; }

/* --- lead figure on product pages --- */
.lead-figure{ position:relative; overflow:hidden; }
.lead-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.lead-figure__caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.2rem 1.4rem;
  background:linear-gradient(to top, rgba(28,26,20,.76), transparent);
  color:var(--white); font-size:.85rem; letter-spacing:.02em;
}

/* --- keep long words from forcing a sideways scroll on small screens --- */
h1,h2,h3{ overflow-wrap:break-word; }
@media (max-width:400px){
  .nav-brand__word{ font-size:1.08rem; }
}

/* --- product cards rise one after another once the grid is revealed.
       Pure CSS so it can never strand a card at opacity 0 — the grid's
       own .reveal (and its 2.5s failsafe) is the single switch. --- */
.js .product-grid .product-card{ opacity:0; transform:translateY(18px); }
.js .product-grid.in-view .product-card{
  opacity:1; transform:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease), background .3s var(--ease);
}
.js .product-grid.in-view .product-card:nth-child(1){ transition-delay:.00s,.00s,0s }
.js .product-grid.in-view .product-card:nth-child(2){ transition-delay:.05s,.05s,0s }
.js .product-grid.in-view .product-card:nth-child(3){ transition-delay:.10s,.10s,0s }
.js .product-grid.in-view .product-card:nth-child(4){ transition-delay:.15s,.15s,0s }
.js .product-grid.in-view .product-card:nth-child(5){ transition-delay:.20s,.20s,0s }
.js .product-grid.in-view .product-card:nth-child(6){ transition-delay:.25s,.25s,0s }
.js .product-grid.in-view .product-card:nth-child(7){ transition-delay:.30s,.30s,0s }
.js .product-grid.in-view .product-card:nth-child(8){ transition-delay:.35s,.35s,0s }
.js .product-grid.in-view .product-card:nth-child(9){ transition-delay:.40s,.40s,0s }
.js .product-grid.in-view .product-card:nth-child(10){ transition-delay:.45s,.45s,0s }
.js .product-grid.in-view .product-card:nth-child(11){ transition-delay:.50s,.50s,0s }
.js .product-grid.in-view .product-card:nth-child(12){ transition-delay:.55s,.55s,0s }
@media (prefers-reduced-motion: reduce){
  .js .product-grid .product-card{ opacity:1 !important; transform:none !important; transition-delay:0s !important; }
}

/* --- contrast pass ---------------------------------------------------
   #5E7A76 on the chalk canvas measures 4.34:1 — fine for a graphic, short
   of AA for the small bold type we set in it (eyebrows, card links, step
   numbers). Text-bearing accent therefore takes accent-deep (7.4:1) and
   accent stays for rules, icons and fills. --- */
.eyebrow{ color:var(--accent-deep); }
.product-card__link{ color:var(--accent-deep); }
.process__num{ color:var(--accent-deep); }
.spec-card h3{ color:var(--accent-deep); }
.related-card a{ color:var(--accent-deep); }
.breadcrumb a:hover{ color:var(--accent-soft); }

/* CTA fill at rest is the deep harbour (7.9:1 with white), lifting to the
   mid tone on hover — both states clear AA. */
.btn-primary{ background:var(--accent-deep); }
.btn-primary:hover{ background:var(--accent); }
.chat-launcher{ background:var(--accent-deep); }
.chat-launcher:hover{ background:var(--accent); }
.chat-panel__form button{ background:var(--accent-deep); }
.chat-panel__form button:hover{ background:var(--accent); }
.chat-msg--user{ background:var(--accent-deep); }
.chat-chip{ color:var(--accent-deep); border-color:var(--accent-deep); }
.chat-chip:hover{ background:var(--accent-deep); color:var(--white); }

/* dark grounds keep the light harbour tint */
.cta-band .eyebrow,
.editorial__note span,
.site-footer h4{ color:var(--accent-soft); }
.footer h4{ color:var(--accent-soft); }

/* --- cascade corrections after the contrast pass ---------------------
   The generic .eyebrow rule above would otherwise recolour the hero
   eyebrow, which sits on the pale chalk fade and needs ink. --- */
.hero .hero__eyebrow{ color:var(--ink); }

/* Over the photo the nav is white on a darkened band — recolouring a link
   on hover kills it (harbour on that band measures 1.5:1). The underline
   carries the hover instead, and only the solid nav changes text colour. */
.site-nav .nav-links a:hover,
.site-nav .nav-links a:focus-visible{ color:var(--white); }
.site-nav .nav-links a::after{ background:var(--accent-soft); }
.site-nav.is-solid .nav-links a:hover,
.site-nav.is-solid .nav-links a:focus-visible{ color:var(--accent-deep); }
.site-nav.is-solid .nav-links a::after{ background:var(--accent-deep); }
@media (max-width: 900px){
  /* the drawer is peat-dark in both nav states */
  .site-nav .nav-links a:hover,
  .site-nav.is-solid .nav-links a:hover{ color:var(--accent-soft); }
  .site-nav .nav-links a::after,
  .site-nav.is-solid .nav-links a::after{ background:var(--accent-soft); }
}

/* --- mobile drawer: the burger must stay ON TOP of the panel it opens.
       .site-nav makes a stacking context at z-index 200, and the drawer is
       199 inside it — without this the open menu covered its own close
       button. Bars go white because the drawer ground is peat either way. --- */
@media (max-width: 900px){
  .nav-toggle{ position:relative; z-index:201; }
  /* must out-specify .site-nav.is-solid .nav-toggle span, which would
     otherwise paint ink bars onto the peat drawer */
  body.nav-open .site-nav .nav-toggle span,
  body.nav-open .site-nav.is-solid .nav-toggle span{ background:var(--white); }
  .nav-open{ overflow:hidden; }
  .nav-links{ padding-top:5.5rem; }
}

/* the eyebrow already carries a short dash; suppress it where a full accent
   rule sits directly beneath, so the stack reads as one mark not two */
.eyebrow:has(+ .rule--accent)::before{ display:none; }
.eyebrow:has(+ .rule--accent){ padding-left:0; }

/* The drawer ground is peat in BOTH nav states, so its links are always
   white — .site-nav.is-solid .nav-links a would otherwise win on
   specificity and paint ink text onto a dark panel (invisible menu). */
@media (max-width: 900px){
  .site-nav .nav-links a,
  .site-nav.is-solid .nav-links a{ color:var(--white); }
  .site-nav .nav-links a:hover,
  .site-nav.is-solid .nav-links a:hover,
  .site-nav .nav-links a:focus-visible,
  .site-nav.is-solid .nav-links a:focus-visible{ color:var(--accent-soft); }
}

/* Product and area page heroes are peat-dark: their eyebrow takes the light
   harbour tint (5.6:1) — accent-deep measured 1.9:1 there and vanished. */
.page-hero .eyebrow{ color:var(--accent-soft); }
.page-hero .eyebrow::before{ background:var(--accent-soft); }


/* =========================================================
   THE LEAD LADDER — "The Blue Hills Elevation Report"
   Rung 1  guide.html, the area sun-control report
   Rung 2  the ballpark window table (#ballpark)
   Rung 3  the free expert measure (the dominant CTA)
   Built entirely on this site's existing tokens: chalk canvas,
   peat ink, harbour accent, Libre Caslon + Karla, 3px radius.
   ========================================================= */

/* ---------- guide hero: photo with the display type lapping
     over the bottom edge of the image (this site's layout DNA) ---------- */
.guide-hero{ position:relative; padding:8.5rem 0 0; background:var(--ink); }
.guide-hero__media{
  position:relative; overflow:hidden; border-radius:var(--radius);
  width:100%; aspect-ratio:16/9; max-height:min(62vh,620px);
}
.guide-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.guide-hero__media::after{
  content:''; position:absolute; inset:auto 0 0 0; height:58%;
  background:linear-gradient(to top, rgba(28,26,20,.86), rgba(28,26,20,.28) 46%, transparent);
}
.guide-hero__type{
  position:relative; z-index:3; margin-top:-5.2rem; padding:0 0 3.4rem;
  max-width:min(760px, 100%);
}
.guide-hero__type .eyebrow{ color:var(--accent-soft); }
.guide-hero__type .eyebrow::before{ background:var(--accent-soft); }
.guide-hero h1{
  color:var(--white); margin:1rem 0 0;
  font-size:clamp(2.3rem, 3.2vw + 1.2rem, 4.1rem);
}
.guide-hero__lead{
  color:rgba(249,247,242,.86); max-width:54ch; margin:1.3rem 0 0; font-size:1.06rem;
}
.guide-hero__ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.guide-hero__ctas .btn-outline{ color:var(--white); border-color:rgba(249,247,242,.62); }
.guide-hero .breadcrumb{ position:relative; z-index:3; margin:0 0 1.2rem; }
@media (max-width:860px){
  .guide-hero{ padding-top:7rem; }
  .guide-hero__type{ margin-top:-2.6rem; max-width:none; padding-bottom:2.6rem; }
}

/* ---------- the contents strip ---------- */
.guide-index{ background:var(--ink-deep); padding:2.2rem 0; }
.guide-index ol{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem 2rem;
  counter-reset:gi; margin:0; padding:0; list-style:none;
}
.guide-index li{ counter-increment:gi; }
.guide-index a{
  display:block; color:rgba(249,247,242,.82); font-size:.9rem; line-height:1.45;
  padding-top:.7rem; border-top:1px solid rgba(249,247,242,.2);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.guide-index a::before{
  content:counter(gi,decimal-leading-zero); display:block;
  font-family:var(--font-display); font-size:.8rem; color:var(--accent-soft); margin-bottom:.35rem;
}
.guide-index a:hover{ color:var(--white); border-color:var(--accent-soft); }
@media (max-width:860px){ .guide-index ol{ grid-template-columns:1fr 1fr; } }

/* ---------- guide body ---------- */
.guide-section{ padding:var(--section-pad) 0; }
.guide-section.tinted{ background:var(--paper-soft); }
.guide-section.dark{ background:var(--ink); color:var(--paper); }
.guide-section.dark h2, .guide-section.dark h3{ color:var(--white); }
.guide-section.dark p{ color:rgba(249,247,242,.80); }
.guide-section.dark .eyebrow{ color:var(--accent-soft); }
.guide-section.dark .eyebrow::before{ background:var(--accent-soft); }
.guide-prose{ max-width:66ch; }
.guide-prose p{ color:var(--ink-soft); margin:0 0 1.25rem; }
.guide-prose p:last-child{ margin-bottom:0; }
.guide-prose strong{ color:var(--ink); font-weight:700; }
.guide-section.dark .guide-prose p{ color:rgba(249,247,242,.80); }
.guide-section.dark .guide-prose strong{ color:var(--white); }
.guide-prose h3{ font-size:1.35rem; margin:2.2rem 0 .85rem; }
.guide-prose a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
.guide-section.dark .guide-prose a{ color:var(--accent-soft); }
.guide-figure{ position:relative; overflow:hidden; border-radius:var(--radius); margin:0 0 2.6rem; }
.guide-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.guide-figure figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.2rem 1.4rem;
  background:linear-gradient(to top, rgba(28,26,20,.78), transparent);
  color:var(--white); font-size:.85rem; letter-spacing:.02em;
}
.guide-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:start; }
.guide-split .guide-figure{ margin:0; }
@media (max-width:860px){ .guide-split{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- the sun-path signature (draws itself in) ---------- */
.sunpath{ width:100%; height:auto; display:block; margin:.4rem 0 2.2rem; }
.js .sunpath path, .js .sunpath line{ stroke-dasharray:1; stroke-dashoffset:1; }
.js .sunpath.in-view path, .js .sunpath.in-view line{
  stroke-dashoffset:0; transition:stroke-dashoffset 1.9s var(--ease);
}
.js .sunpath.in-view .sunpath__winter{ transition-delay:.55s; }
.sunpath text{
  font-family:var(--font-body); font-size:15px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; fill:rgba(249,247,242,.66);
}
.sunpath__sky{ stroke:rgba(249,247,242,.24); }
.sunpath__summer{ stroke:var(--accent-soft); }
.sunpath__winter{ stroke:var(--accent-soft); opacity:.72; }

/* ---------- fact strip ---------- */
.fact-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--paper-line); border:1px solid var(--paper-line); margin:2.4rem 0 0;
}
.guide-section.dark .fact-row{ background:rgba(249,247,242,.18); border-color:rgba(249,247,242,.18); }
.fact{ background:var(--paper); padding:1.7rem 1.5rem; }
.guide-section.dark .fact{ background:var(--ink); }
.fact b{
  display:block; font-family:var(--font-display); font-weight:400; font-size:1.9rem;
  line-height:1; color:var(--ink); margin-bottom:.5rem;
}
.guide-section.dark .fact b{ color:var(--white); }
.fact span{ display:block; font-size:.88rem; color:var(--ink-soft); }
.guide-section.dark .fact span{ color:rgba(249,247,242,.74); }
@media (max-width:720px){ .fact-row{ grid-template-columns:1fr; } }

/* ---------- elevation cards ---------- */
.elev-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.6rem; }
.elev{ border:1px solid var(--paper-line); border-radius:var(--radius); padding:1.9rem 1.7rem; background:var(--paper); }
.elev__tag{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.9rem;
}
.elev__tag svg{ width:15px; height:15px; }
.elev h3{ font-size:1.3rem; margin-bottom:.7rem; }
.elev p{ color:var(--ink-soft); font-size:.95rem; margin:0 0 .8rem; }
.elev p:last-child{ margin-bottom:0; }
@media (max-width:720px){ .elev-grid{ grid-template-columns:1fr; } }

/* ---------- recommendations ---------- */
.rec-list{ display:flex; flex-direction:column; gap:1.4rem; margin-top:2.6rem; }
.rec{
  border:1px solid var(--paper-line); border-radius:var(--radius); background:var(--paper);
  padding:2rem 1.9rem; display:grid; grid-template-columns:1fr auto; gap:.6rem 2rem; align-items:start;
}
.rec__body{ max-width:64ch; }
.rec h3{ font-size:1.32rem; margin-bottom:.3rem; }
.rec__where{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-deep); margin:0 0 .9rem;
}
.rec p{ color:var(--ink-soft); font-size:.96rem; margin:0 0 .8rem; }
.rec p:last-of-type{ margin-bottom:0; }
.rec__trade{
  border-left:2px solid var(--accent); padding:.15rem 0 .15rem .95rem;
  font-size:.92rem; color:var(--ink-soft); margin-top:1rem;
}
.rec__trade b{ color:var(--ink); font-weight:700; }
.rec-add{
  align-self:start; white-space:nowrap;
  border:1.5px solid var(--accent-deep); background:var(--white); color:var(--accent-deep);
  border-radius:30px; padding:.6rem 1.15rem; font-size:.8rem; font-weight:700; letter-spacing:.02em;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.rec-add:hover{ background:var(--accent-deep); color:var(--white); }
.rec-add.is-added{ background:var(--paper-soft); border-color:var(--paper-line); color:var(--ink-soft); cursor:default; }
.rec__adds{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
@media (max-width:720px){
  .rec{ grid-template-columns:1fr; }
  .rec-add{ justify-self:start; }
}

/* ---------- what we would still check on site ---------- */
.check-list{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 2.4rem; margin-top:2.4rem; counter-reset:chk; }
.check{ counter-increment:chk; padding-top:1.2rem; border-top:1px solid rgba(249,247,242,.2); }
.check h3{ font-size:1.18rem; margin:.5rem 0; }
.check h3::before{
  content:counter(chk,decimal-leading-zero); display:block;
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.2em; color:var(--accent-soft);
  margin-bottom:.6rem;
}
.check p{ font-size:.94rem; margin:0; }
@media (max-width:720px){ .check-list{ grid-template-columns:1fr; } }

/* ---------- the ladder hand-off ---------- */
.ladder-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; align-items:start; }
.ladder-side p{ color:var(--ink-soft); max-width:44ch; margin:0 0 1.1rem; }
.guide-section.dark .ladder-side p{ color:rgba(249,247,242,.80); }
.promise{ display:flex; flex-direction:column; gap:.9rem; margin:1.8rem 0 0; }
.promise-item{ display:flex; gap:.7rem; align-items:flex-start; font-size:.94rem; }
.promise-item svg{ width:19px; height:19px; flex:none; margin-top:2px; color:var(--accent-soft); }
.guide-section:not(.dark) .promise-item svg{ color:var(--accent); }
.capacity-note{
  margin:1.8rem 0 0; padding-top:1.2rem; border-top:1px solid rgba(249,247,242,.2);
  font-size:.9rem; color:rgba(249,247,242,.74);
}
.form-card{ background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius); padding:2.4rem; }
.form-card .field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.2rem; }
.form-card label, .form-card .legend{ font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--ink); }
.form-card input[type=text], .form-card input[type=tel], .form-card input[type=email],
.form-card select, .form-card textarea{
  border:1.5px solid var(--paper-line); border-radius:var(--radius);
  padding:.85rem 1rem; background:var(--paper); color:var(--ink); width:100%;
  transition:border-color .25s var(--ease);
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{ outline:none; border-color:var(--accent); }
.form-card textarea{ resize:vertical; min-height:104px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.popia{ font-size:.82rem; color:var(--ink-faint); margin:1.1rem 0 0; line-height:1.6; }
.legend{ display:block; margin-bottom:.7rem; }
.interest-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.2rem 1.2rem; }
.interest-grid label{
  display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; font-weight:400;
  color:var(--ink-soft); padding:.32rem 0; cursor:pointer;
}
.interest-grid input{ width:16px; height:16px; flex:none; margin-top:3px; accent-color:var(--accent-deep); }
.interest-grid input:checked + span{ color:var(--ink); font-weight:700; }
.carry-note{ font-size:.84rem; color:var(--ink-soft); margin:.6rem 0 0; line-height:1.55; }
.carry-note strong{ color:var(--ink); }
.form-success{ display:none; margin-top:1.4rem; border-top:1px solid var(--paper-line); padding-top:1.4rem; }
.form-success.show{ display:block; }
.form-success h3, .lead-thanks h3{ font-size:1.2rem; margin-bottom:.6rem; }
.form-success p, .lead-thanks p{ color:var(--ink-soft); font-size:.94rem; margin:0 0 .7rem; }
.form-success p:last-child, .lead-thanks p:last-child{ margin-bottom:0; }
.form-success a, .lead-thanks a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
.lead-thanks{
  margin-top:1.4rem; background:var(--white); border:1px solid var(--paper-line);
  border-radius:var(--radius); padding:1.6rem;
}
@media (max-width:860px){ .ladder-grid{ grid-template-columns:1fr; gap:2.2rem; } }
@media (max-width:560px){
  .form-row{ grid-template-columns:1fr; }
  .form-card{ padding:1.7rem; }
  .interest-grid{ grid-template-columns:1fr; }
}

/* ---------- Rung 2: the ballpark window table ---------- */
.ballpark{ border:1px solid var(--paper-line); border-radius:var(--radius); background:var(--paper); margin:0 0 1.4rem; }
.ballpark > summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.2rem; cursor:pointer; list-style:none;
  font-size:.9rem; font-weight:700; color:var(--ink);
  transition:color .25s var(--ease);
}
.ballpark > summary::-webkit-details-marker{ display:none; }
.ballpark > summary:hover{ color:var(--accent-deep); }
.ballpark > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
.ballpark .chev{ width:15px; height:15px; flex:none; transition:transform .3s var(--ease); }
.ballpark[open] > summary .chev{ transform:rotate(180deg); }
.bp-inner{ padding:0 1.2rem 1.4rem; }
.bp-pairing{ font-size:.88rem; color:var(--ink-soft); margin:0 0 1.1rem; max-width:64ch; }
.bp-pairing strong{ color:var(--ink); }
.bp-scroll{ overflow-x:auto; }
.bp-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.bp-table th{
  text-align:left; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); padding:0 .5rem .5rem 0; border-bottom:1px solid var(--paper-line);
}
.bp-table td{ padding:.45rem .5rem .45rem 0; vertical-align:middle; }
.bp-table input, .bp-table select{
  width:100%; min-width:96px; border:1.5px solid var(--paper-line); border-radius:var(--radius);
  padding:.5rem .6rem; background:var(--white); color:var(--ink); font-size:.86rem;
}
.bp-table input:focus, .bp-table select:focus{ outline:none; border-color:var(--accent); }
.bp-table td.bp-rm{ width:34px; padding-right:0; }
.bp-remove{
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--paper-line);
  background:var(--white); color:var(--ink-soft); font-size:1rem; line-height:1;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.bp-remove:hover{ border-color:var(--accent-deep); color:var(--accent-deep); }
.bp-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.1rem; }
.bp-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1.5px solid var(--paper-line); background:var(--white); color:var(--ink);
  border-radius:30px; padding:.55rem 1.05rem; font-size:.8rem; font-weight:700;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.bp-btn:hover{ border-color:var(--accent-deep); color:var(--accent-deep); }
.bp-btn svg{ width:14px; height:14px; }
.bp-count{ font-size:.82rem; color:var(--ink-soft); margin:.9rem 0 0; }
.bp-foot{ font-size:.79rem; color:var(--ink-faint); margin:.8rem 0 0; line-height:1.6; }
.bp-print-head{ display:none; }
.bp-holder{ display:none; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width:640px){
  .bp-scroll{ overflow-x:visible; }
  .bp-table, .bp-table tbody, .bp-table tr, .bp-table td{ display:block; width:100%; }
  .bp-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .bp-table tr.bp-row{
    position:relative; border:1px solid var(--paper-line); border-radius:var(--radius);
    padding:.9rem .9rem .3rem; margin-bottom:.8rem; background:var(--white);
  }
  .bp-table td{ padding:0 0 .7rem; }
  .bp-table td[data-lbl]::before{
    content:attr(data-lbl); display:block; font-size:.68rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.3rem;
  }
  .bp-table td.bp-rm{ position:absolute; top:.6rem; right:.6rem; width:auto; padding:0; }
  .bp-table td.bp-rm::before{ content:none; }
  .bp-table input, .bp-table select{ background:var(--paper); }
}

/* ---------- sources ---------- */
.sources ol{ list-style:decimal; padding-left:1.3rem; max-width:76ch; }
.sources li{ font-size:.9rem; color:var(--ink-soft); margin-bottom:.9rem; line-height:1.6; }
.sources a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; word-break:break-word; }

/* ---------- the report promo, on the homepage and area pages ---------- */
.guide-promo{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.guide-promo__fig{ position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:16/10; }
.guide-promo__fig img{ width:100%; height:100%; object-fit:cover; }
.guide-promo p{ color:var(--ink-soft); max-width:52ch; }
.guide-promo ul{ margin:1.6rem 0 2rem; display:flex; flex-direction:column; gap:.7rem; }
.guide-promo li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.94rem; color:var(--ink); }
.guide-promo li svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--accent); }
.guide-link-inline{
  display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.9rem;
  color:var(--accent-deep); border-bottom:1.5px solid currentColor; padding-bottom:2px;
  transition:gap .25s var(--ease);
}
.guide-link-inline:hover{ gap:.7rem; }
.guide-link-inline svg{ width:14px; height:14px; }
.spec-card__guide{ margin:1.1rem 0 0; font-size:.86rem; color:var(--ink-soft); line-height:1.6; }
.spec-card__guide .guide-link-inline{ font-size:.86rem; display:inline; border-bottom-width:1px; }
.spec-card__guide .guide-link-inline svg{ display:none; }
.guide-section.dark .guide-promo li{ color:rgba(249,247,242,.86); }
.guide-section.dark .guide-promo li svg{ color:var(--accent-soft); }
.guide-section.dark .guide-promo p{ color:rgba(249,247,242,.80); }
.guide-section.dark .section__title{ color:var(--white); }
.guide-section.dark .section__intro{ color:rgba(249,247,242,.78); }
.guide-section.dark .rule{ background:rgba(249,247,242,.22); }
.guide-section.dark .rule--accent{ background:var(--accent-soft); }
.guide-section.dark .breadcrumb a:hover{ color:var(--accent-soft); }
@media (max-width:860px){ .guide-promo{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- print: the ballpark becomes a paper window list ---------- */
@media print{
  .site-nav, .site-footer, .chat-launcher, .chat-panel, .marquee, .guide-index,
  .guide-hero, .cta-band, .bp-actions, .bp-remove, .ballpark > summary,
  .bp-pairing, .popia, .bp-count, .bp-foot, .legal-links{ display:none !important; }
  .ballpark{ border:none; background:#fff; margin:0; }
  .bp-inner{ padding:0; }
  .bp-print-head{ display:block; margin-bottom:1rem; }
  .bp-print-head h2{ font-size:1.5rem; margin-bottom:.4rem; }
  .bp-print-head p{ font-size:.86rem; }
  .bp-table input, .bp-table select{ border:1px solid #999; background:#fff; }
  .bp-table th{ border-bottom:1px solid #666; }
  body.bp-printing .guide-section, 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 .form-row, body.bp-printing .interest-grid,
  body.bp-printing .field:not(.bp-holder), body.bp-printing .form-success,
  body.bp-printing .lead-thanks, body.bp-printing .rule, body.bp-printing .fact-row,
  body.bp-printing .guide-figure, body.bp-printing .sunpath, body.bp-printing .guide-promo,
  body.bp-printing form > button{ display:none !important; }
  body.bp-printing main > section{ display:none !important; }
  body.bp-printing main > section#measure,
  body.bp-printing main > section#enquire{ display:block !important; }
  body.bp-printing .hero, body.bp-printing .hero__body, body.bp-printing .editorial,
  body.bp-printing .enquire__col{ display:none !important; }
  body.bp-printing .enquire__grid{ display:block !important; }
  body.bp-printing .ladder-grid{ display:block !important; }
  body.bp-printing .form-card{ border:none; padding:0; }
}

/* ---------- reduced motion: the drawn sun path is simply there ---------- */
@media (prefers-reduced-motion: reduce){
  .js .sunpath path, .js .sunpath line,
  .js .sunpath.in-view path, .js .sunpath.in-view line{
    stroke-dasharray:none !important; stroke-dashoffset:0 !important; transition:none !important;
  }
}