/* Bryanston Blinds — brass + bone + charcoal ink.
   Display: Crimson Pro. Text: Public Sans.
   Signature layout: oversized display type overlapping the edge of the hero photograph. */

:root{
  --canvas:#F6F5F2;
  --ink:#232323;
  --accent:#A98F55;
  --deep:#6D5C3B;
  --white:#FFFFFF;
  --bone:#EFEBE3;
  --muted:#6B665E;
  --line:rgba(35,35,35,.15);
  --line-soft:rgba(35,35,35,.08);
  --shadow:0 26px 54px -30px rgba(35,35,35,.45);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: `hidden` makes body a scroll container and kills position:sticky.
     Older engines fall back to the first declaration. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:'Crimson Pro','Crimson Text',Georgia,serif;
  font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0;
}
p{margin:0}
ul{margin:0}

.wrap{max-width:1180px;margin:0 auto;padding:0 30px}
.eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--deep);margin:0 0 18px;
}
.rule{height:1px;background:var(--accent);transform-origin:left;width:82px;margin:0 0 26px}
.lede{font-size:1.09rem;color:var(--muted);max-width:64ch;line-height:1.75}
.sec{padding:clamp(74px,9vw,104px) 0}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.2rem);max-width:19ch}
.bone{background:var(--bone)}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:1px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:inherit;font-size:.83rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 30px;border:1.4px solid var(--ink);background:var(--ink);color:var(--canvas);
  text-decoration:none;cursor:pointer;border-radius:0;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease),transform .26s var(--ease);
}
.btn:hover{background:var(--deep);border-color:var(--deep);color:var(--white)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(35,35,35,.35)}
.btn.ghost:hover{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.btn .ar{transition:transform .26s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}

.arrowlink{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:.79rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--deep);
  transition:gap .24s var(--ease),color .24s var(--ease);
}
.arrowlink:hover{gap:15px;color:var(--ink)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:80;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .38s var(--ease),border-color .38s var(--ease),box-shadow .38s var(--ease),backdrop-filter .38s;
}
.nav.solid{
  background:rgba(246,245,242,.94);backdrop-filter:blur(11px);
  border-bottom-color:var(--line-soft);box-shadow:0 12px 30px -26px rgba(35,35,35,.6);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo-mark{width:40px;height:40px;flex:none;border-radius:9px;object-fit:cover;display:block;box-shadow:0 2px 8px rgba(35,35,35,.28)}
.brand b{
  font-family:'Crimson Pro',Georgia,serif;font-weight:600;font-size:1.28rem;
  letter-spacing:-.01em;line-height:1;
}
.brand b i{font-style:normal;color:var(--deep)}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks a{
  text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);position:relative;padding:6px 0;transition:color .24s var(--ease);
}
.navlinks a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.4px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.navlinks a:hover{color:var(--deep)}
.navlinks a:hover::after{transform:scaleX(1)}
.navlinks .navcta{
  border:1.4px solid var(--ink);padding:11px 20px;
  transition:background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.navlinks .navcta::after{display:none}
.navlinks .navcta:hover{background:var(--ink);color:var(--canvas)}
.burger{
  display:none;background:none;border:1.4px solid var(--line);padding:11px 12px;
  cursor:pointer;line-height:0;transition:border-color .24s var(--ease),background .24s var(--ease);
}
.burger:hover{border-color:var(--ink)}
.burger span{display:block;width:19px;height:1.6px;background:var(--ink);margin:4px 0;transition:transform .3s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
.mobmenu{
  display:none;position:fixed;top:78px;left:0;right:0;z-index:79;
  background:var(--canvas);border-bottom:1px solid var(--line-soft);padding:14px 30px 26px;
  box-shadow:0 26px 40px -30px rgba(35,35,35,.7);
}
.mobmenu.open{display:block}
.mobmenu a{
  display:block;padding:14px 0;text-decoration:none;border-bottom:1px solid var(--line-soft);
  font-size:.82rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  transition:color .22s var(--ease),padding-left .22s var(--ease);
}
.mobmenu a:hover{color:var(--deep);padding-left:6px}

/* ---------- hero: type overlapping the photograph ---------- */
.hero{position:relative;padding:clamp(122px,15vh,178px) 0 clamp(56px,7vw,86px);overflow:hidden}
.hero .shot{
  position:absolute;right:0;top:clamp(104px,13vh,156px);
  width:min(58vw,780px);aspect-ratio:16/11;overflow:hidden;
}
.hero .shot img{width:100%;height:100%;object-fit:cover}
/* the photograph stays clearly visible — the wash only fades its LEFT edge into the
   canvas so the overlapping display type reads. No dark scrim anywhere. */
.hero .shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--canvas) 0%,rgba(246,245,242,.9) 24%,rgba(246,245,242,.34) 50%,rgba(246,245,242,0) 74%),
    linear-gradient(0deg,var(--canvas) 0%,rgba(246,245,242,0) 26%);
}
.hero .wrap{position:relative;z-index:2}
.hero h1{
  font-size:clamp(2.65rem,7vw,5.3rem);max-width:15.5ch;font-weight:400;
  margin:0 0 26px;
}
.hero h1 em{font-style:italic;color:var(--deep)}
.hero .lede{max-width:48ch;margin-bottom:34px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:38px}
.trust{display:flex;flex-wrap:wrap;gap:12px 30px;padding-top:24px;border-top:1px solid var(--line-soft);max-width:60ch}
.trust span,.trust a{
  display:inline-flex;align-items:flex-start;gap:9px;font-size:.86rem;color:var(--muted);
  text-decoration:none;transition:color .22s var(--ease);
}
.trust a:hover{color:var(--deep)}
.trust svg{width:15px;height:15px;flex:none;margin-top:4px;stroke:var(--accent);fill:none;stroke-width:2.1}

/* ---------- ticker ---------- */
.ticker{background:var(--ink);color:var(--canvas);overflow:hidden;padding:15px 0}
.ticker .track{display:flex;gap:0;white-space:nowrap;will-change:transform}
.ticker span{
  font-family:'Crimson Pro',Georgia,serif;font-style:italic;font-size:1.02rem;
  letter-spacing:.012em;padding-right:44px;opacity:.9;
}
.ticker i{font-style:normal;color:var(--accent);padding-right:44px}

/* ---------- product collection ---------- */
.collection .grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:38px 30px;margin-top:52px;
}
.pcard{display:flex;flex-direction:column}
.pthumb{
  position:relative;overflow:hidden;background:var(--bone);
  aspect-ratio:4/3;margin-bottom:18px;
}
.pthumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .72s var(--ease),filter .5s var(--ease);
}
.pcard:hover .pthumb img,.pcard:focus-within .pthumb img{transform:scale(1.065)}
.pthumb::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.pcard:hover .pthumb::after,.pcard:focus-within .pthumb::after{transform:scaleX(1)}
.pcard h3{font-size:1.34rem;margin-bottom:9px}
.pcard p{font-size:.93rem;color:var(--muted);margin-bottom:15px;flex:1}
.pcard .note{
  font-size:.82rem;color:var(--muted);border-left:2px solid var(--accent);
  padding:2px 0 2px 12px;margin:-5px 0 15px;line-height:1.55;
}

/* ---------- editorial gallery ---------- */
.gallery .grid{display:grid;grid-template-columns:1.35fr .95fr;gap:26px;align-items:start;margin-top:52px}
.gallery figure{position:relative;margin:0;overflow:hidden;background:var(--bone)}
.gallery figure img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery .tall{aspect-ratio:4/3}
.gallery .stack{display:grid;gap:26px}
.gallery .stack figure{aspect-ratio:3/2}
.gallery figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:44px 24px 20px;color:var(--white);
  background:linear-gradient(0deg,rgba(24,22,19,.82) 0%,rgba(24,22,19,.34) 52%,rgba(24,22,19,0) 100%);
  font-size:.86rem;letter-spacing:.02em;
}
.gallery figcaption b{
  display:block;font-family:'Crimson Pro',Georgia,serif;font-weight:600;font-size:1.14rem;
  letter-spacing:-.005em;margin-bottom:3px;
}

/* ---------- locale + signature awning ---------- */
/* no overflow:hidden here — it would neuter the sticky photo. The glow layer
   clips its own blobs instead. */
.locale{position:relative;background:var(--ink);color:var(--canvas)}
.locale .glow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.locale .glow i{
  position:absolute;display:block;border-radius:50%;filter:blur(78px);opacity:.34;
  background:radial-gradient(circle,var(--accent) 0%,rgba(169,143,85,0) 70%);
}
.locale .glow i:nth-child(1){width:430px;height:430px;left:-90px;top:-110px}
.locale .glow i:nth-child(2){width:380px;height:380px;right:4%;bottom:-130px;opacity:.26}
.locale .wrap{position:relative;z-index:2}
.locale .eyebrow{color:var(--accent)}
.locale .rule{background:var(--accent)}
.locale h2{font-size:clamp(2.1rem,4.4vw,3.2rem);max-width:17ch;margin-bottom:30px}
.locale .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.locale p{color:rgba(246,245,242,.8);max-width:56ch;margin-bottom:18px;font-size:1.02rem}
.locale p b{color:var(--canvas);font-weight:600}
/* the photo stays pinned while the locale copy scrolls past it, so the shade-sweep
   plays out in step with what you're reading */
.awning-stage{position:sticky;top:126px}
.shade-photo{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--deep)}
.shade-photo img{width:100%;height:100%;object-fit:cover;display:block}
.shade-sweep{
  position:absolute;inset:0;transform-origin:left center;
  background:linear-gradient(100deg,rgba(35,35,35,.5) 0%,rgba(35,35,35,.18) 46%,rgba(35,35,35,0) 72%);
}
.awning-cap{
  margin-top:16px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}

/* ---------- process ---------- */
.process .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:34px;margin-top:54px}
.step{border-top:1px solid var(--line);padding-top:22px}
.step .n{
  font-family:'Crimson Pro',Georgia,serif;font-size:2.5rem;font-weight:300;
  color:var(--accent);line-height:1;display:block;margin-bottom:14px;
}
.step h3{font-size:1.18rem;margin-bottom:9px}
.step p{font-size:.92rem;color:var(--muted)}

/* ---------- areas ---------- */
.areas .chips{display:flex;flex-wrap:wrap;gap:13px;margin-top:40px}
.chips a{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  border:1.3px solid var(--line);padding:14px 22px;font-size:.87rem;font-weight:600;
  background:var(--white);
  transition:border-color .26s var(--ease),transform .26s var(--ease),box-shadow .26s var(--ease);
}
.chips a span{color:var(--accent);transition:transform .26s var(--ease)}
.chips a:hover{border-color:var(--deep);transform:translateY(-2px);box-shadow:0 16px 26px -22px rgba(35,35,35,.8)}
.chips a:hover span{transform:translateX(4px)}

/* ---------- FAQ ---------- */
.faq .list{margin-top:44px;max-width:80ch;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:'Crimson Pro',Georgia,serif;font-size:1.24rem;font-weight:500;letter-spacing:-.01em;
  transition:color .24s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--deep)}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;background:var(--accent);
  transition:transform .34s var(--ease),background .24s var(--ease);
}
.faq summary::before{width:15px;height:1.6px;margin-top:-.8px;transform:translateY(0)}
.faq summary::after{width:1.6px;height:15px;right:12.7px;margin-top:-7.5px}
.faq details[open] summary::after{transform:rotate(90deg);opacity:0}
.faq details[open] summary{color:var(--deep)}
.faq .ans{padding:0 20px 26px 0}
.faq .ans p{color:var(--muted);font-size:.97rem;max-width:70ch;margin-bottom:12px}

/* ---------- closing CTA ---------- */
.close{position:relative;background:var(--bone);overflow:hidden;text-align:center}
.close .aur{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.close .aur i{
  position:absolute;display:block;border-radius:50%;filter:blur(88px);opacity:.5;
  background:radial-gradient(circle,var(--accent) 0%,rgba(169,143,85,0) 70%);
}
.close .aur i:nth-child(1){width:460px;height:460px;left:6%;top:-160px}
.close .aur i:nth-child(2){width:400px;height:400px;right:8%;bottom:-170px;opacity:.4}
.close .wrap{position:relative;z-index:2}
.close h2{font-size:clamp(2.2rem,5vw,3.6rem);max-width:18ch;margin:0 auto 22px}
.close .lede{margin:0 auto 34px;text-align:center}
.close .rule{margin:0 auto 26px}

/* ---------- enquiry form ---------- */
.enquire .cols{display:grid;grid-template-columns:.86fr 1.14fr;gap:60px;align-items:start;margin-top:16px}
.enquire .side p{color:var(--muted);margin-bottom:16px;max-width:44ch}
.enquire .side ul{list-style:none;padding:0;margin-top:22px}
.enquire .side li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--muted);margin-bottom:12px}
.enquire .side li svg{width:15px;height:15px;flex:none;margin-top:4px;stroke:var(--accent);fill:none;stroke-width:2.1}
form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form .row{margin-bottom:18px}
form label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
form input,form select,form textarea{
  width:100%;font:inherit;font-size:.97rem;color:var(--ink);background:var(--white);
  border:1.3px solid var(--line);padding:14px 15px;border-radius:0;
  transition:border-color .24s var(--ease),box-shadow .24s var(--ease);
}
form textarea{resize:vertical;min-height:118px}
form input:focus,form select:focus,form textarea:focus{
  outline:none;border-color:var(--deep);box-shadow:0 0 0 3px rgba(169,143,85,.17);
}
form .popia{font-size:.81rem;color:var(--muted);margin-top:16px;line-height:1.6;max-width:62ch}
#leadResult{
  margin-top:20px;padding:18px 20px;background:var(--white);border-left:3px solid var(--accent);
  font-size:.93rem;color:var(--muted);line-height:1.65;
}
#leadResult b{display:block;color:var(--ink);font-weight:600;margin-bottom:5px;font-size:1rem}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(246,245,242,.74);padding:70px 0 40px;font-size:.9rem}
footer .wrap{max-width:1180px}
footer .ftop{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;align-items:flex-start}
footer .brand{color:var(--canvas);margin-bottom:16px}
footer .brand b i{color:var(--accent)}
footer p{max-width:52ch;margin-bottom:10px}
footer a{color:rgba(246,245,242,.86)}
footer .fnav{display:flex;flex-wrap:wrap;gap:10px 26px;max-width:420px}
footer .fnav a{
  text-decoration:none;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  transition:color .22s var(--ease);
}
footer .fnav a:hover{color:var(--accent)}
.legal-links a{transition:color .22s var(--ease)}
.legal-links a:hover{color:var(--accent)}

/* ---------- interior pages ---------- */
.phero{padding:clamp(132px,16vh,180px) 0 clamp(40px,5vw,60px)}
.phero h1{font-size:clamp(2.3rem,5.2vw,3.9rem);max-width:18ch;margin-bottom:22px}
.phero .lede{max-width:62ch}
.crumb{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:20px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;
}
.crumb a{text-decoration:none;transition:color .22s var(--ease)}
.crumb a:hover{color:var(--deep)}
.crumb i{font-style:normal;color:var(--accent)}
.lead-shot{position:relative;overflow:hidden;margin:0 0 clamp(40px,5vw,58px);aspect-ratio:21/9;background:var(--bone)}
.lead-shot img{width:100%;height:100%;object-fit:cover}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:44px 0 16px}
.prose h3{font-size:1.22rem;margin:30px 0 12px}
.prose p{margin-bottom:17px;color:var(--muted)}
.prose p.first{color:var(--ink);font-size:1.09rem}
.prose ul{padding-left:0;list-style:none;margin:8px 0 22px}
.prose li{position:relative;padding-left:24px;margin-bottom:11px;color:var(--muted);font-size:.97rem}
.prose li::before{
  content:"";position:absolute;left:0;top:11px;width:11px;height:1.6px;background:var(--accent);
}
.rs-note{
  font-size:.93rem;line-height:1.65;color:var(--muted);
  padding:16px 20px;background:var(--white);border-left:3px solid var(--accent);margin:24px 0;
}
.rs-note strong{font-weight:600;color:var(--ink)}
.sidecard{
  background:var(--white);border:1px solid var(--line);padding:30px;position:sticky;top:104px;
}
.sidecard h3{font-size:1.28rem;margin-bottom:12px}
.sidecard p{font-size:.92rem;color:var(--muted);margin-bottom:20px}
.playout{display:grid;grid-template-columns:1.5fr .8fr;gap:56px;align-items:start}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;margin-top:22px}

/* ---------- reveal targets ----------
   opacity:0 is applied ONLY when the page has decided to animate (html.anim, set by
   an inline script that checks prefers-reduced-motion). No JS, reduced motion, or a
   failed GSAP load => every .gs-rv stays fully visible. */
.anim .gs-rv{opacity:0}
.anim .rule{transform:scaleX(0)}
.anim #heroTitle{opacity:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .gs-rv,#heroTitle{opacity:1!important;transform:none!important}
  .rule{transform:scaleX(1)!important}
}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .locale .cols{grid-template-columns:1fr;gap:40px}
  .awning-stage{position:static}
  .enquire .cols{grid-template-columns:1fr;gap:40px}
  .playout{grid-template-columns:1fr;gap:38px}
  .sidecard{position:static}
  .gallery .grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .navlinks{display:none}
  .burger{display:block}
  /* photo first, flush under the nav, then the type — no dead space above it */
  .hero{display:flex;flex-direction:column;padding:78px 0 clamp(46px,8vw,66px)}
  .hero .shot{
    position:relative;top:auto;right:auto;width:100%;margin:0;aspect-ratio:3/2;order:1;
  }
  .hero .shot::after{
    background:linear-gradient(0deg,var(--canvas) 0%,rgba(246,245,242,0) 26%);
  }
  .hero .wrap{order:2;padding-top:30px}
  .hero h1{max-width:100%;margin-bottom:22px}
  .hero .lede{max-width:100%}
  .gallery .tall{aspect-ratio:3/2}
}
@media(max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 22px}
  form .grid2{grid-template-columns:1fr}
  .trust{gap:10px 20px}
  .cta-row .btn{width:100%;justify-content:center}
}

/* ==========================================================================
   THE LEAD LADDER — guide.html, the ballpark window list, the free measure
   Rung 1 the field guide · Rung 2 the ballpark table · Rung 3 the free measure
   Built only from the tokens declared at the top of this file.
   ========================================================================== */

/* ---------- guide hero: display type, then a wide plate, then the contents
     card riding up over the plate's bottom edge (this site's overlap signature) */
.ghero{padding:clamp(122px,15vh,168px) 0 0;position:relative;overflow:hidden}
.ghero h1{font-size:clamp(2.5rem,6.4vw,4.9rem);max-width:13ch;font-weight:400;margin:0 0 10px}
.ghero h1 em{font-style:italic;color:var(--deep)}
.ghero .subtitle{
  font-family:'Crimson Pro',Georgia,serif;font-size:clamp(1.25rem,2.4vw,1.7rem);
  font-style:italic;color:var(--muted);line-height:1.25;margin:0 0 26px;max-width:28ch;
}
.ghero .lede{max-width:58ch;margin-bottom:30px}
.gmeta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.gmeta span{
  display:inline-flex;align-items:center;gap:9px;background:var(--white);
  border:1px solid var(--line);padding:9px 16px;font-size:.78rem;color:var(--muted);
}
.gmeta span::before{content:"";width:5px;height:5px;background:var(--accent);flex:none}
.gplate{
  margin-top:clamp(36px,5vw,54px);width:100%;aspect-ratio:21/9;
  overflow:hidden;background:var(--bone);
}
.gplate img{width:100%;height:100%;object-fit:cover}
.gcontents{
  position:relative;z-index:3;max-width:1120px;margin:-54px auto 0;
  background:var(--bone);border:1px solid var(--line);padding:24px 30px;
  display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;
  box-shadow:var(--shadow);
}
.gcontents .lbl{
  font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--deep);margin-right:6px;
}
.gcontents a{
  text-decoration:none;font-size:.84rem;color:var(--muted);
  border:1px solid var(--line);background:var(--white);padding:9px 16px;
  transition:border-color .24s var(--ease),color .24s var(--ease),transform .24s var(--ease);
}
.gcontents a:hover{border-color:var(--deep);color:var(--ink);transform:translateY(-2px)}

/* ---------- guide prose ---------- */
.gprose{max-width:70ch}
.gprose p{margin-bottom:18px;color:var(--muted)}
.gprose p.first{color:var(--ink);font-size:1.09rem}
.gprose p strong,.gprose li strong{color:var(--ink);font-weight:600}
.gprose h3{font-size:1.3rem;margin:36px 0 14px}
.gprose ul{list-style:none;padding:0;margin:8px 0 22px}
.gprose li{position:relative;padding-left:24px;margin-bottom:12px;color:var(--muted)}
.gprose li::before{content:"";position:absolute;left:0;top:12px;width:11px;height:1.6px;background:var(--accent)}
.gprose sup{font-size:.66em;color:var(--deep);font-weight:700;letter-spacing:.02em}
.gprose sup a{text-decoration:none}
.gprose sup a:hover{text-decoration:underline}

/* ---------- figures ---------- */
.gfig{position:relative;margin:44px 0 0;overflow:hidden;background:var(--bone)}
.gfig img{width:100%;height:auto;display:block}
.gfig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:52px 26px 22px;color:var(--white);
  background:linear-gradient(0deg,rgba(24,22,19,.86) 0%,rgba(24,22,19,.36) 54%,rgba(24,22,19,0) 100%);
  font-size:.88rem;line-height:1.6;
}
.gfig figcaption b{
  display:block;font-family:'Crimson Pro',Georgia,serif;font-weight:600;font-size:1.16rem;
  letter-spacing:-.005em;margin-bottom:4px;
}

/* ---------- elevation cards ---------- */
.elev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.elev-card{background:var(--white);border:1px solid var(--line);padding:30px 28px}
.elev-card .compass{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.elev-card .compass svg{width:32px;height:32px;flex:none;color:var(--accent)}
.elev-card .compass b{font-family:'Crimson Pro',Georgia,serif;font-size:1.2rem;font-weight:600;letter-spacing:-.01em}
.elev-card p{font-size:.94rem;color:var(--muted);margin-bottom:12px}
.elev-card p:last-of-type{margin-bottom:0}
.elev-card .verdict{
  border-top:1px solid var(--line-soft);margin-top:16px;padding-top:14px;
  font-size:.9rem;color:var(--muted);
}
.elev-card .verdict em{
  font-family:'Crimson Pro',Georgia,serif;font-style:italic;color:var(--deep);font-weight:600;
}

/* ---------- product recommendations ---------- */
.rec-list{display:flex;flex-direction:column;gap:20px;margin-top:48px}
.rec{
  display:grid;grid-template-columns:1fr auto;gap:14px 30px;align-items:start;
  background:var(--white);border:1px solid var(--line);padding:30px 30px 28px;
  transition:border-color .26s var(--ease),box-shadow .26s var(--ease);
}
.rec:hover{border-color:rgba(35,35,35,.28);box-shadow:0 20px 38px -32px rgba(35,35,35,.7)}
.rec-head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.rec-head h3{font-size:1.3rem}
.rec-head .where{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--deep);
}
.rec-body{grid-column:1}
.rec-body p{font-size:.95rem;color:var(--muted);margin-bottom:13px}
.rec-body p:last-child{margin-bottom:0}
.rec-trade{background:var(--canvas);border-left:2px solid var(--accent);padding:14px 18px;margin-top:15px}
.rec-trade b{
  display:block;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--deep);margin-bottom:6px;
}
.rec-trade p{font-size:.89rem;margin:0}
.rec-side{grid-column:2;grid-row:2;align-self:start}
.rec-add{
  font:inherit;font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:transparent;color:var(--ink);border:1.3px solid var(--line);
  padding:12px 18px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;
  transition:background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease);
}
.rec-add::before{content:"+";font-size:1.05rem;line-height:1;color:var(--accent)}
.rec-add:hover{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.rec-add.is-added{background:var(--bone);border-color:var(--line);color:var(--muted);cursor:default}
.rec-add.is-added::before{content:"\2713";font-size:.82rem}
.rec-add[disabled]{opacity:1}

/* ---------- what we would check on site ---------- */
.check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 30px;margin-top:46px}
.check-item{border-top:1px solid var(--line);padding-top:22px}
.check-item .n{
  font-family:'Crimson Pro',Georgia,serif;font-size:2.1rem;font-weight:300;color:var(--accent);
  line-height:1;display:block;margin-bottom:12px;
}
.check-item h4{
  font-family:'Crimson Pro',Georgia,serif;font-size:1.14rem;font-weight:500;
  letter-spacing:-.01em;line-height:1.2;margin:0 0 8px;
}
.check-item p{font-size:.92rem;color:var(--muted)}

/* ---------- sources ---------- */
.sources{background:var(--white);border:1px solid var(--line);padding:34px 36px;margin-top:38px}
.sources ol{margin:0;padding-left:22px;color:var(--muted);font-size:.89rem;line-height:1.65}
.sources li{margin-bottom:12px}
.sources a{color:var(--deep);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.sources a:hover{color:var(--ink)}
.sources .note{
  font-size:.86rem;color:var(--muted);margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
}

/* ---------- the ladder hand-off blocks ---------- */
.ladder-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:56px;align-items:start;margin-top:14px}
.ladder-side p{color:var(--muted);margin-bottom:16px;max-width:46ch}
.promise{list-style:none;padding:0;margin:24px 0 0}
.promise li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--muted);margin-bottom:13px}
.promise li svg{width:15px;height:15px;flex:none;margin-top:4px;stroke:var(--accent);fill:none;stroke-width:2.1}
.capacity{
  margin-top:24px;padding:16px 20px;background:var(--white);border-left:3px solid var(--accent);
  font-size:.9rem;color:var(--muted);line-height:1.6;
}
.formcard{background:var(--white);border:1px solid var(--line);padding:clamp(24px,3vw,34px)}
.formcard .btn{width:100%;justify-content:center}
.legend{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;padding:0;
}
.interest-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.interest-grid label{
  display:flex;gap:10px;align-items:flex-start;font-size:.89rem;color:var(--muted);
  cursor:pointer;padding:3px 0;
}
.interest-grid input{width:16px;height:16px;flex:none;margin:3px 0 0;accent-color:var(--deep)}
.interest-grid input:checked + span{color:var(--ink);font-weight:600}
.carry-note{
  font-size:.83rem;color:var(--muted);margin-top:9px;line-height:1.55;
  border-left:2px solid var(--accent);padding-left:11px;
}
.carry-note strong{color:var(--ink);font-weight:600}
.lead-thanks{
  margin-top:20px;padding:22px 24px;background:var(--white);border-left:3px solid var(--accent);
  font-size:.93rem;color:var(--muted);line-height:1.65;
}
.lead-thanks h3,#leadResult h3{font-size:1.2rem;margin-bottom:9px;color:var(--ink)}
.lead-thanks p,#leadResult p{margin-bottom:11px}
.lead-thanks p:last-child,#leadResult p:last-child{margin-bottom:0}
.lead-thanks a,#leadResult a{color:var(--deep);text-decoration:underline;text-underline-offset:2px;font-weight:600}
form.is-sent{display:none}

/* ---------- Rung 2: the ballpark window list ---------- */
.ballpark{margin:22px 0 18px;border:1px dashed var(--line);background:var(--canvas)}
.ballpark > summary{
  list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-size:.93rem;font-weight:600;color:var(--ink);
  transition:color .24s var(--ease);
}
.ballpark > summary::-webkit-details-marker{display:none}
.ballpark > summary:hover{color:var(--deep)}
.ballpark > summary .chev{
  width:15px;height:15px;flex:none;color:var(--accent);
  transition:transform .3s var(--ease);
}
.ballpark[open] > summary .chev{transform:rotate(180deg)}
.bp-inner{padding:0 22px 24px}
.bp-pairing{font-size:.88rem;color:var(--muted);margin-bottom:18px;max-width:66ch;line-height:1.65}
.bp-pairing strong{color:var(--ink);font-weight:600}
.bp-scroll{overflow-x:auto}
.bp-table{width:100%;border-collapse:collapse;font-size:.86rem}
.bp-table th{
  text-align:left;font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:0 9px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
.bp-table td{padding:8px 9px 8px 0;vertical-align:middle}
.bp-table input,.bp-table select{
  width:100%;min-width:96px;font:inherit;font-size:.85rem;color:var(--ink);background:var(--white);
  border:1.2px solid var(--line);padding:10px 11px;border-radius:0;
  transition:border-color .22s var(--ease);
}
.bp-table input:focus,.bp-table select:focus{outline:none;border-color:var(--deep)}
.bp-table td.bp-rm{width:36px;padding-right:0}
.bp-remove{
  width:30px;height:30px;border:1.2px solid var(--line);background:var(--white);
  color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .22s var(--ease),color .22s var(--ease);
}
.bp-remove:hover{border-color:var(--deep);color:var(--deep)}
.bp-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.bp-btn{
  font:inherit;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--white);border:1.2px solid var(--line);color:var(--ink);padding:11px 18px;
  cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transition:border-color .22s var(--ease),color .22s var(--ease);
}
.bp-btn:hover{border-color:var(--deep);color:var(--deep)}
.bp-btn svg{width:14px;height:14px;flex:none}
.bp-count{font-size:.82rem;color:var(--muted);margin-top:14px}
.bp-foot{font-size:.79rem;color:var(--muted);margin-top:12px;line-height:1.6;max-width:66ch}
.bp-print-head{display:none}
.bp-holder{display:none}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- homepage / area-page hand-off to the field guide ---------- */
.guide-line{
  display:inline-block;text-decoration:none;
  font-size:.88rem;color:var(--muted);border-bottom:1px solid var(--line);
  padding-bottom:6px;margin-top:24px;max-width:60ch;line-height:1.65;
  transition:color .24s var(--ease),border-color .24s var(--ease);
}
.guide-line em{font-family:'Crimson Pro',Georgia,serif;font-style:italic;color:var(--ink)}
.guide-line span{color:var(--accent);display:inline-block;transition:transform .24s var(--ease)}
.guide-line:hover{color:var(--ink);border-color:var(--deep)}
.guide-line:hover span{transform:translateX(4px)}
.guide-pitch .cols{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.guide-pitch .shotwrap{overflow:hidden;background:var(--bone);aspect-ratio:16/9}
.guide-pitch .shotwrap img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.guide-pitch .shotwrap:hover img{transform:scale(1.04)}
.guide-pitch ul{list-style:none;padding:0;margin:24px 0 30px}
.guide-pitch li{position:relative;padding-left:24px;margin-bottom:11px;color:var(--muted);font-size:.95rem}
.guide-pitch li::before{content:"";position:absolute;left:0;top:12px;width:11px;height:1.6px;background:var(--accent)}

/* ---------- ladder responsive ---------- */
@media(max-width:1000px){
  .ladder-grid{grid-template-columns:1fr;gap:40px}
  .elev-grid,.check-list{grid-template-columns:1fr}
  .guide-pitch .cols{grid-template-columns:1fr;gap:36px}
  .navlinks{gap:22px}
  .navlinks a{font-size:.74rem}
}
@media(max-width:860px){
  .ghero{padding-top:104px}
  .gcontents{margin:-30px 22px 0;padding:20px 22px}
  .gplate{aspect-ratio:16/9}
}
@media(max-width:720px){
  .rec{grid-template-columns:1fr;padding:24px 22px}
  .rec-side{grid-column:1;grid-row:auto}
  .rec-add{width:100%;justify-content:center}
  .sources{padding:26px 22px}
  .interest-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* window rows become stacked cards */
  .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(--white);border:1px solid var(--line);padding:16px 16px 8px;
    margin-bottom:12px;position:relative;
  }
  .bp-table td{padding:0 0 11px}
  .bp-table td[data-lbl]::before{
    content:attr(data-lbl);display:block;font-size:.62rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-bottom:6px;
  }
  .bp-table td.bp-rm{position:absolute;top:10px;right:10px;width:auto;padding:0}
  .bp-table td.bp-rm::before{content:none}
  .bp-inner{padding:0 14px 18px}
  .ballpark > summary{padding:16px 14px}
  .gcontents{margin:-24px 16px 0}
}

/* ---------- print: walk the house with paper ---------- */
@media print{
  body{background:#fff;color:#000}
  .nav,.mobmenu,.ticker,.close,footer,.cw-launch,.cw-panel,
  .gcontents,.ghero,.gplate,.gfig,.cta-row,.bp-actions,.bp-remove,
  .ballpark > summary,.bp-pairing,.popia,.guide-line{display:none!important}
  .ballpark{border:none;background:#fff;margin:0}
  .bp-inner{padding:0}
  .bp-print-head{display:block;margin-bottom:18px}
  .bp-print-head h2{font-size:1.5rem;margin-bottom:6px}
  .bp-print-head p{font-size:.86rem;color:#444}
  .bp-table input,.bp-table select{border:1px solid #999;background:#fff}
  .bp-table th{border-bottom:1px solid #666}
  .formcard{border:none;padding:0}
  body.bp-printing .sec{padding:0!important}
  body.bp-printing .gprose,body.bp-printing .rec-list,body.bp-printing .elev-grid,
  body.bp-printing .check-list,body.bp-printing .sources,body.bp-printing .sec-head,
  body.bp-printing .ladder-side,body.bp-printing .grid2,body.bp-printing .interest-grid,
  body.bp-printing .row,body.bp-printing fieldset,body.bp-printing .rule,
  body.bp-printing #leadResult,body.bp-printing .lead-thanks,
  body.bp-printing form > button{display:none!important}
  body.bp-printing .ladder-grid{display:block!important}
}