/* ============================================================
   Nova Plumbing Connect - Design System
   Palette: slate-aubergine / parchment / sage / pewter-gold
   AA verified: #FFFFFF on --sage (#4E7857) = 5.06:1
                --sage-300 (#86B48E) on --ink (#2E2833) = 6.09:1
   Pewter-gold (--gold) is DECORATIVE ONLY - never carries small text.
   ============================================================ */

:root{
  /* base - warm dark grey with a clear purple cast */
  --ink:#2E2833;
  --ink-2:#423A4A;
  --ink-3:#5B5165;
  --ink-soft:#7A6F84;

  /* surfaces */
  --parchment:#F4F1EA;
  --parchment-2:#EBE6DC;
  --white:#FFFFFF;

  /* sage - muted mid-green, darkened until white passes AA */
  --sage:#4E7857;
  --sage-700:#3F6347;
  --sage-800:#33513A;
  --sage-300:#86B48E;   /* for use ON dark surfaces only */
  --sage-tint:#E5EDE6;

  /* pewter-gold - badges, hairlines, rules. Decorative. */
  --gold:#C4A96A;
  --gold-soft:#E0D2AE;

  --line:#DED7CA;
  --line-dark:rgba(244,241,234,.16);

  --r-sm:6px; --r-md:8px; --r-lg:10px;
  --sh-1:0 1px 2px rgba(46,40,51,.06), 0 2px 8px rgba(46,40,51,.05);
  --sh-2:0 6px 18px rgba(46,40,51,.10), 0 2px 4px rgba(46,40,51,.06);
  --sh-3:0 14px 40px rgba(46,40,51,.16);

  --ff-head:"Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ff-body:"Public Sans", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;

  --container:1200px;
  --gut:clamp(16px, 4vw, 32px);
  --sect:clamp(52px, 7vw, 104px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--parchment); color:var(--ink);
  font-family:var(--ff-body); font-size:clamp(16.5px,.4vw + 16px,18px);
  line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block}
button{font:inherit; color:inherit}
a{color:var(--sage-700); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; transition:color .18s var(--ease)}
a:hover{color:var(--sage-800)}
:focus-visible{outline:3px solid var(--sage); outline-offset:2px; border-radius:2px}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0; text-decoration:none}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--ff-head); font-weight:600; line-height:1.14; letter-spacing:-.012em; color:var(--ink); margin:0 0 .5em; text-wrap:balance}
h1{font-size:clamp(2.15rem,1.2rem + 3.6vw,4rem); font-variation-settings:"SOFT" 20,"WONK" 1}
h2{font-size:clamp(1.65rem,1rem + 2.1vw,2.7rem); margin-top:0}
h3{font-size:clamp(1.18rem,.95rem + .75vw,1.5rem); line-height:1.25}
h4{font-size:1.05rem; font-family:var(--ff-body); font-weight:700; letter-spacing:.01em}
p{margin:0 0 1.15em; text-wrap:pretty}
.lede{font-size:clamp(1.08rem,.98rem + .5vw,1.32rem); line-height:1.68; color:var(--ink-2)}
.eyebrow{font-family:var(--ff-body); font-size:.775rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px; display:flex; align-items:center; gap:12px}
.eyebrow::after{content:""; height:1px; flex:1; background:var(--gold); opacity:.85; max-width:120px}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:""; height:1px; flex:1; background:var(--gold); max-width:120px}
.rule-gold{width:64px; height:3px; background:var(--gold); border:0; margin:0 0 22px; border-radius:2px}
.rule-gold--center{margin-inline:auto}

/* ---------- layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--sect)}
.section--tight{padding-block:clamp(38px,4.5vw,64px)}
.prose{max-width:68ch}
.prose p,.prose li{line-height:1.78}
.prose h2{margin-top:1.9em}
.prose h3{margin-top:1.6em}
.prose > :first-child{margin-top:0}
.grid{display:grid; gap:clamp(18px,2.2vw,28px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,64px); align-items:center}
.stack{display:flex; flex-direction:column; gap:clamp(14px,1.6vw,20px)}
.row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.center{text-align:center}
.center .rule-gold{margin-inline:auto}
.on-dark{background:var(--ink); color:var(--parchment)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--white)}
.on-dark .lede,.on-dark p{color:#DED8E0}
.on-dark .eyebrow{color:var(--gold-soft)}
.on-dark a{color:var(--sage-300)}
.on-dark a:hover{color:var(--white)}
.on-white{background:var(--white)}
.hair{height:1px; background:var(--line); border:0; margin:0}
.hair--gold{background:linear-gradient(90deg,var(--gold),rgba(196,169,106,0))}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:13px 26px; border-radius:var(--r-sm); border:1px solid transparent;
  font-family:var(--ff-body); font-weight:700; font-size:1rem; letter-spacing:.005em;
  text-decoration:none; cursor:pointer; text-align:center; text-wrap:balance;
  transition:transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn svg{flex:none}
.btn-sage{background:var(--sage); color:#fff; box-shadow:var(--sh-1)}
.btn-sage:hover{background:var(--sage-700); color:#fff; transform:scale(1.025); box-shadow:var(--sh-2)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink-2)}
.btn-ghost:hover{background:var(--ink); color:var(--white); transform:scale(1.025)}
.on-dark .btn-ghost{color:var(--white); border-color:rgba(244,241,234,.42)}
.on-dark .btn-ghost:hover{background:var(--white); color:var(--ink)}
.btn-lg{min-height:60px; padding:16px 34px; font-size:1.06rem}
.btn-block{width:100%}

/* CTA blocks: button + one line of supporting microcopy */
.cta{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin:34px 0}
.cta--center{align-items:center; text-align:center}
.cta__note{font-size:.94rem; color:var(--ink-3); margin:0; max-width:56ch}
.on-dark .cta__note{color:#C9C2D0}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:90; background:var(--parchment);
  border-bottom:1px solid var(--line);
  transition:background-color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.site-head .head-inner{display:flex; align-items:center; gap:clamp(14px,2vw,34px); min-height:82px; transition:min-height .25s var(--ease)}
.site-head.is-stuck{background:var(--ink); border-color:transparent; box-shadow:0 6px 22px rgba(46,40,51,.22)}
.site-head.is-stuck .head-inner{min-height:66px}
.site-head.is-stuck .brand-name{color:var(--white)}
.site-head.is-stuck .brand-sub{color:var(--gold-soft)}
.site-head.is-stuck .nav a{color:#E6E1EA}
.site-head.is-stuck .nav a:hover{color:var(--white)}
.site-head.is-stuck .nav-toggle{color:var(--white); border-color:rgba(244,241,234,.4)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 1 auto; min-width:0}
.brand-mark{width:34px; height:auto; flex:none; color:var(--sage); transition:color .25s var(--ease)}
.site-head.is-stuck .brand-mark{color:var(--sage-300)}
.brand-text{display:flex; flex-direction:column; line-height:1.1; min-width:0}
.brand-name{font-family:var(--ff-head); font-weight:700; font-size:1.12rem; color:var(--ink); letter-spacing:-.01em; transition:color .25s var(--ease); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-sub{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; transition:color .25s var(--ease)}
.nav{margin-left:auto}
.nav ul{display:flex; gap:clamp(14px,2vw,30px); list-style:none; margin:0; padding:0}
.nav a{
  position:relative; text-decoration:none; color:var(--ink-2); font-weight:600; font-size:.98rem;
  padding:10px 2px; display:inline-block; min-height:44px; line-height:24px;
}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:6px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:hover{color:var(--ink)}
.head-call{min-height:48px; padding:10px 20px; font-size:.97rem; white-space:nowrap; flex:none}
.nav-toggle{display:none; align-items:center; justify-content:center; width:48px; height:48px; flex:none; border:1px solid var(--line); background:transparent; border-radius:var(--r-sm); cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--ink); color:var(--parchment); overflow:hidden; isolation:isolate}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{width:100%; height:100%; object-fit:cover}
.hero__scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(46,40,51,.96) 0%, rgba(46,40,51,.90) 42%, rgba(46,40,51,.62) 100%)}
.hero__motif{position:absolute; inset:0; z-index:-1; opacity:.10; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(196,169,106,.9) 0 1px, transparent 1px 34px);
  will-change:transform}
.hero__inner{padding-block:clamp(64px,9vw,132px); max-width:44rem}
.hero h1{color:#fff; margin-bottom:.34em}
.hero .lede{color:#E2DCE7; max-width:38rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero__meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px; padding-top:24px; border-top:1px solid rgba(196,169,106,.4); font-size:.92rem; color:#D6CFDC}
.hero__meta span{display:flex; align-items:center; gap:8px}
.hero__meta svg{color:var(--sage-300); flex:none}

/* ---------- trust strip ---------- */
.trust{background:var(--ink-2); color:var(--parchment); border-top:1px solid rgba(196,169,106,.3)}
.trust ul{list-style:none; margin:0; padding:18px 0; display:grid; grid-template-columns:repeat(5,1fr); gap:8px 20px}
.trust li{display:flex; align-items:center; gap:9px; font-size:.9rem; font-weight:600; color:#E9E3EE}
.trust svg{color:var(--sage-300); flex:none}

/* ---------- cards ---------- */
.card{
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 26px 26px 30px; box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sage); transform:scaleY(0); transform-origin:top; transition:transform .28s var(--ease)}
.card:hover,.card:focus-within{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--gold-soft)}
.card:hover::before,.card:focus-within::before{transform:scaleY(1)}
.card h3{margin-bottom:.4em}
.card p{margin:0; font-size:.97rem; color:var(--ink-3); line-height:1.66}
.card__link{text-decoration:none; color:var(--ink)}
.card__link::after{content:""; position:absolute; inset:0; z-index:1}
.card__more{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:700; font-size:.92rem; color:var(--sage-700)}
.card__more svg{transition:transform .22s var(--ease)}
.card:hover .card__more svg{transform:translateX(4px)}
.card__count{font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:10px}
.card--dark{background:var(--ink-2); border-color:rgba(196,169,106,.28)}
.card--dark h3{color:#fff} .card--dark p{color:#CFC8D6} .card--dark .card__link{color:#fff} .card--dark .card__more{color:var(--sage-300)}

/* ---------- key point / pull quote ---------- */
.keypoint{
  background:var(--sage-tint); border:1px solid #C9DACC; border-left:4px solid var(--sage);
  border-radius:var(--r-sm); padding:22px 26px; margin:30px 0;
}
.keypoint h4{margin:0 0 8px; color:var(--sage-800); letter-spacing:.02em; text-transform:uppercase; font-size:.8rem}
.keypoint p:last-child{margin-bottom:0}
.pullquote{
  font-family:var(--ff-head); font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem); line-height:1.42;
  color:var(--ink); margin:38px 0; padding:6px 0 6px 28px; border-left:3px solid var(--gold); font-weight:500;
}
.on-dark .pullquote{color:#fff}
.note{font-size:.9rem; color:var(--ink-soft)}

/* ---------- region selector ---------- */
.region-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px)}
.region-card{position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:24px; box-shadow:var(--sh-1); transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)}
.region-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sage); transform:scaleY(0); transform-origin:top; transition:transform .28s var(--ease)}
.region-card:hover,.region-card:focus-within{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--gold-soft)}
.region-card:hover::before,.region-card:focus-within::before{transform:scaleY(1)}
.region-card h3{font-size:1.24rem; margin-bottom:.3em}
.region-card h3 a{text-decoration:none; color:var(--ink)}
.region-card h3 a::after{content:""; position:absolute; inset:0}
.region-card p{font-size:.95rem; color:var(--ink-3); margin:0 0 16px; line-height:1.62}
.region-card__stat{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sage-700)}

/* ---------- foundation / seasonal bands ---------- */
.band-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px)}
.band-item{border-top:2px solid var(--gold); padding-top:20px}
.band-item h3{font-size:1.16rem}
.band-item p{font-size:.97rem; line-height:1.7; margin-bottom:0; color:var(--ink-3)}
.on-dark .band-item p{color:#CFC8D6}
.band-item__tag{display:inline-block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:8px}
.on-dark .band-item__tag{color:var(--gold-soft)}
.season-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,26px)}

/* ---------- steps ---------- */
.steps{counter-reset:step; display:grid; gap:clamp(18px,2vw,26px); grid-template-columns:repeat(3,minmax(0,1fr))}
.step{position:relative; padding-top:22px; border-top:1px solid var(--line)}
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--ff-head); font-size:2.1rem; font-weight:600; color:var(--gold); display:block; line-height:1; margin-bottom:12px;
}
.step h3{font-size:1.14rem}
.step p{font-size:.97rem; color:var(--ink-3); margin:0}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.5vw,34px)}
.stat{text-align:center; padding:8px}
.stat__n{font-family:var(--ff-head); font-size:clamp(2.3rem,1.4rem + 2.6vw,3.4rem); font-weight:600; color:var(--gold); line-height:1; letter-spacing:-.02em}
.stat__l{display:block; margin-top:10px; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#D8D1DE}

/* ---------- media placeholder (client supplies final photography) ---------- */
.ph{
  position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    linear-gradient(135deg, rgba(196,169,106,.10), rgba(78,120,87,.10)),
    var(--parchment-2);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; color:var(--ink-soft);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:20px; min-height:220px;
}
.ph::after{content:""; position:absolute; inset:10px; border:1px dashed rgba(196,169,106,.6); border-radius:var(--r-sm); pointer-events:none}
.ph span{max-width:26ch; line-height:1.6}
.ph--hero{min-height:100%; border:0; border-radius:0; background:linear-gradient(135deg,#3A3341,#2E2833 60%,#423A4A); align-items:flex-end; justify-content:flex-end; padding:16px 20px}
.ph--hero::after{display:none}
.ph--hero span{max-width:22ch; text-align:right; font-size:.6rem; letter-spacing:.08em; color:rgba(244,241,234,.20)}
.ph--tall{min-height:360px}
.ph--wide{min-height:280px}
.figure{margin:0}
.figure img{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:var(--r-md)}
.figure figcaption{font-size:.85rem; color:var(--ink-soft); margin-top:10px; line-height:1.5}

/* ---------- table of contents ---------- */
.toc{background:var(--white); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:var(--r-md); padding:22px 26px; box-shadow:var(--sh-1)}
.toc h2{font-family:var(--ff-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px; font-weight:700}
.toc ol{list-style:none; margin:0; padding:0; columns:2; column-gap:34px}
.toc li{break-inside:avoid; margin-bottom:9px}
.toc a{display:block; text-decoration:none; color:var(--ink-2); font-size:.95rem; font-weight:500; padding:4px 0 4px 14px; border-left:2px solid transparent; transition:border-color .2s var(--ease), color .2s var(--ease)}
.toc a:hover{color:var(--sage-800); border-color:var(--gold)}
.toc a.is-active{color:var(--sage-800); border-color:var(--sage); font-weight:700}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%; background:none; border:0; text-align:left; cursor:pointer;
  display:flex; gap:18px; align-items:flex-start; justify-content:space-between;
  padding:20px 0; min-height:44px;
}
.faq__q h3{margin:0; font-size:clamp(1.04rem,.98rem + .3vw,1.22rem); color:var(--ink)}
.faq__icon{flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--gold); position:relative; margin-top:4px; transition:background-color .22s var(--ease), transform .22s var(--ease)}
.faq__icon::before,.faq__icon::after{content:""; position:absolute; left:50%; top:50%; background:var(--ink-2); border-radius:1px; transition:transform .22s var(--ease), background-color .22s var(--ease)}
.faq__icon::before{width:11px; height:1.5px; transform:translate(-50%,-50%)}
.faq__icon::after{width:1.5px; height:11px; transform:translate(-50%,-50%)}
.faq__q[aria-expanded="true"] .faq__icon{background:var(--sage); border-color:var(--sage)}
.faq__q[aria-expanded="true"] .faq__icon::before,.faq__q[aria-expanded="true"] .faq__icon::after{background:#fff}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a{overflow:hidden; height:0; transition:height .3s var(--ease)}
.faq__a > div{padding:0 44px 24px 0; max-width:68ch}
.faq__a p{margin:0; color:var(--ink-3)}

/* ---------- link index (areas hub, footers) ---------- */
.link-index{columns:4; column-gap:30px; list-style:none; margin:0; padding:0; font-size:.94rem}
.link-index li{break-inside:avoid; margin-bottom:7px}
.link-index a{text-decoration:none; color:var(--ink-2)}
.link-index a:hover{color:var(--sage-800); text-decoration:underline}

/* ---------- final CTA band ---------- */
.cta-band{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; inset:0; opacity:.09;
  background-image:repeating-linear-gradient(90deg, rgba(196,169,106,.9) 0 1px, transparent 1px 40px)}
.cta-band .container{position:relative}
.cta-band h2{color:#fff; max-width:20ch}
.cta-band p{color:#D8D1DE; max-width:52ch}
.cta-band__phone{font-family:var(--ff-head); font-size:clamp(1.5rem,1rem + 2vw,2.4rem); color:var(--gold); text-decoration:none; display:inline-block; margin-top:6px}
.cta-band__phone:hover{color:var(--gold-soft)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink-2); color:#D6CFDC; font-size:.94rem; padding-block:clamp(44px,5vw,68px) 0}
.site-foot h4{color:#fff; font-family:var(--ff-body); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; margin:0 0 16px}
.site-foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.site-foot a{color:#D6CFDC; text-decoration:none}
.site-foot a:hover{color:#fff; text-decoration:underline}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,3vw,48px)}
.foot-brand .brand-mark{width:38px; color:var(--sage-300)}
.foot-brand p{margin:16px 0 0; line-height:1.65; max-width:34ch; color:#C4BCCB}
.foot-nap{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-dark); line-height:1.7}
.foot-nap strong{color:#fff; display:block; font-size:1rem}
.foot-nap a{color:var(--sage-300); font-weight:700}
.foot-bottom{margin-top:clamp(34px,4vw,52px); border-top:1px solid var(--line-dark); padding-block:22px 30px; display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; align-items:flex-start; font-size:.85rem; color:#B3AABB}
.foot-disclosure{max-width:68ch; line-height:1.62}

/* ---------- floating call button ---------- */
.fab{
  position:fixed; z-index:120;
  right:calc(18px + env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom));
  width:60px; height:60px; border-radius:50%; background:var(--sage); color:#fff;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 10px 28px rgba(46,40,51,.34);
  opacity:0; transform:translateY(22px) scale(.9); pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), background-color .18s var(--ease);
}
.fab.is-visible{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.fab:hover{background:var(--sage-700); color:#fff; transform:translateY(0) scale(1.06)}
.fab::before{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--sage); animation:fabpulse 2.6s var(--ease) infinite}
@keyframes fabpulse{0%{transform:scale(1); opacity:.55} 70%{transform:scale(1.55); opacity:0} 100%{transform:scale(1.55); opacity:0}}
/* stand down while the closing call-to-action band is on screen (main.js) */
.fab.is-blocked{opacity:0; pointer-events:none; transform:translateY(8px) scale(.9)}
.fab.is-blocked::before{display:none}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.86rem; padding-block:16px; color:var(--ink-soft)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.crumbs li::after{content:"›"; margin-left:8px; color:var(--gold)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--sage-800); text-decoration:underline}
.on-dark .crumbs a{color:#CFC8D6}
.on-dark .crumbs{color:#B3AABB}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .trust ul{grid-template-columns:repeat(3,1fr)}
  .link-index{columns:3}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--ink); padding:10px var(--gut) 22px; box-shadow:var(--sh-3)}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column; gap:0}
  .nav a{color:#E6E1EA; display:block; padding:14px 0; border-bottom:1px solid var(--line-dark); min-height:52px}
  .nav a::after{display:none}
  .nav-toggle{display:inline-flex; margin-left:auto; order:3}
  .head-call{order:2; margin-left:auto}
  .site-head .head-inner{position:relative}
  .g-3,.g-4,.region-grid,.band-grid,.season-grid,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc ol{columns:1}
}
@media (max-width:620px){
  .trust ul{grid-template-columns:1fr 1fr}
  .g-2,.g-3,.g-4,.region-grid,.band-grid,.season-grid,.steps{grid-template-columns:1fr}
  .link-index{columns:2}
  .foot-grid{grid-template-columns:1fr}
  .head-call span.head-call__num{display:none}
  .head-call{padding:10px 14px}
  /* keep the closing CTA clear of the floating call button */
  .cta-band{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .brand-name{font-size:.95rem; white-space:normal; text-overflow:clip}
  .brand-sub{display:none}
  .btn{width:auto}
  .cta{align-items:stretch}
  .cta .btn{width:100%}
}
@media (max-width:380px){
  .link-index{columns:1}
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .fab::before{display:none}
  .fab{opacity:1; transform:none; pointer-events:auto}
}

/* ---------- print ---------- */
@media print{
  .site-head,.fab,.cta-band,.nav-toggle{display:none !important}
  body{background:#fff}
  .faq__a{height:auto !important}
}

/* ---------- service page additions (batch 2) ---------- */
.hero--page .hero__inner{padding-block:clamp(48px,6.5vw,96px)}
.checklist{list-style:none; margin:0 0 1.2em; padding:0; display:grid; gap:12px}
.checklist li{position:relative; padding-left:34px; line-height:1.7}
.checklist li::before{content:""; position:absolute; left:0; top:.42em; width:20px; height:20px; border-radius:50%; background:var(--sage-tint); border:1px solid var(--sage)}
.checklist li::after{content:""; position:absolute; left:6px; top:.72em; width:8px; height:4px; border-left:2px solid var(--sage-800); border-bottom:2px solid var(--sage-800); transform:rotate(-45deg)}
.on-dark .checklist li::before{background:rgba(134,180,142,.18)}
.on-dark .checklist li::after{border-color:var(--sage-300)}
.numlist{list-style:none; counter-reset:nl; margin:0 0 1.2em; padding:0; display:grid; gap:16px}
.numlist li{position:relative; padding-left:46px; line-height:1.72; counter-increment:nl}
.numlist li::before{content:counter(nl); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--gold); color:var(--ink-2); font-family:var(--ff-head); font-size:.92rem; display:flex; align-items:center; justify-content:center}
.on-dark .numlist li::before{color:var(--gold-soft)}
.spec{width:100%; border-collapse:collapse; font-size:.95rem; margin:0 0 1.2em}
.spec caption{text-align:left; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); padding-bottom:12px}
.spec th,.spec td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.62}
.spec thead th{font-family:var(--ff-body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid var(--gold)}
.spec tbody th{font-weight:700; color:var(--ink); width:26%}
.on-dark .spec th,.on-dark .spec td{border-color:var(--line-dark); color:#DED8E0}
.on-dark .spec tbody th{color:#fff}
.spec-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
/* scroll affordance: only while there is more table to the right (toggled in main.js) */
.spec-wrap.is-scrollable{box-shadow:inset -22px 0 18px -16px rgba(46,40,51,.40)}
.on-dark .spec-wrap.is-scrollable{box-shadow:inset -22px 0 18px -14px rgba(0,0,0,.65)}
.warn{background:#FBF3E7; border:1px solid #E6D3AE; border-left:4px solid var(--gold); border-radius:var(--r-sm); padding:22px 26px; margin:30px 0}
.warn h4{margin:0 0 8px; font-size:.8rem; letter-spacing:.02em; text-transform:uppercase; color:#7A5E1E}
.warn p:last-child{margin-bottom:0}
@media (max-width:620px){ .spec tbody th{width:auto} }

/* A split container holding a single column spans the full grid */
.container.split > *:only-child{grid-column:1 / -1;}

/* ---- areas: community link grid + region cards ---- */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.link-grid__item{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:13px 16px;border:1px solid var(--line,#DFD8D2);border-radius:10px;
  background:#fff;text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;}
.link-grid__item span{font-weight:600;color:var(--ink,#2E2833);}
.link-grid__item em{font-style:normal;font-size:.8rem;color:var(--ink-3,#7A7080);}
.link-grid__item:hover{border-color:var(--sage,#86B48E);transform:translateY(-1px);box-shadow:0 4px 14px rgba(46,40,51,.07);}
.link-grid__item:hover span{color:var(--sage-800);}
.section:not(.on-white) .link-grid__item{background:rgba(255,255,255,.55);}
.card__meta{font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3,#7A7080);margin:-4px 0 10px;}
.card--region h3{font-size:1.35rem;}
@media (max-width:560px){.link-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}}

.link-grid__item.is-pending{cursor:default;opacity:.62;background:transparent;border-style:dashed;}
.link-grid__item.is-pending:hover{transform:none;box-shadow:none;border-color:var(--line,#DED7CA);}

.prose__aside{font-size:.92rem;color:var(--ink-3);border-left:2px solid var(--line);padding-left:16px;margin-top:22px;}

.deep{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 30px;}
.deep h3{margin:0 0 12px;font-size:1.18rem;}
.deep p{margin:0 0 12px;}
.deep p:last-child{margin-bottom:0;}
.grid.g-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;}

/* ================================================================
   Editorial pass - stop the long-form sections reading like articles.
   Four components carry nearly every 55-90 word paragraph on the
   site: .prose, .band-item, .deep and .faq__a. Each gets a real
   container, a tighter measure and a scannable entry point, so the
   reference copy reads as a designed page rather than a blog post.
   ================================================================ */

/* ---- prose: narrower measure, a lead-in, marked subheads ---- */
.prose{max-width:60ch}
.prose p,.prose li{line-height:1.72}
/* standfirst: the opening paragraph carries the section, so let it lead.
   Two shapes exist in the markup - prose that opens straight into a
   paragraph, and prose that opens with its own eyebrow + h2 first. */
.prose > p:first-of-type,
.prose > h2:first-of-type + p{
  font-size:clamp(1.05rem,.99rem + .3vw,1.2rem); line-height:1.62;
  color:var(--ink-2); margin-bottom:1.5em;
  border-left:2px solid var(--gold); padding-left:22px;
}
/* an eyebrow is also a <p>, so put it back the way it was */
.prose > p.eyebrow{
  font-size:.775rem; line-height:1.4; color:var(--ink-soft);
  border-left:0; padding-left:0; margin-bottom:10px;
}
/* the section headline sits right under its eyebrow, not a paragraph gap away */
.prose > h2:first-of-type{margin-top:.1em}
/* gold marker turns each subhead into a scan target */
.prose h3{position:relative; padding-left:19px; margin-top:1.85em; font-size:1.13rem}
.prose h3::before{
  content:""; position:absolute; left:0; top:.28em;
  width:5px; height:.88em; background:var(--gold); border-radius:1px;
}
.prose > :last-child{margin-bottom:0}

/* ---- band items: panels, not three columns of running text ---- */
.band-item{
  background:var(--white); border:1px solid var(--line); border-top:2px solid var(--gold);
  border-radius:0 0 var(--r-sm) var(--r-sm); padding:22px 24px 24px;
  display:flex; flex-direction:column;
}
.band-item h3{font-size:1.1rem; margin-bottom:.45em; line-height:1.34}
.band-item p{font-size:.945rem; line-height:1.68; max-width:46ch}
.band-item__tag{margin-bottom:9px; color:var(--sage-700)}
.on-dark .band-item{background:rgba(255,255,255,.055); border-color:rgba(196,169,106,.22); border-top-color:var(--gold)}
.on-dark .band-item__tag{color:var(--gold-soft)}
.on-white .band-item{background:var(--parchment)}

/* ---- deep panels: marked heading, capped measure ---- */
.deep{padding:26px 30px 28px;}
.deep h3{position:relative; padding-left:19px;}
.deep h3::before{
  content:""; position:absolute; left:0; top:.26em;
  width:5px; height:.86em; background:var(--gold); border-radius:1px;
}
.deep p{font-size:.975rem; line-height:1.72; max-width:64ch; color:var(--ink-3)}
.deep p:first-of-type{color:var(--ink-2)}

/* ---- FAQ answers: tighter measure, paragraphs that separate ---- */
.faq__a > div{padding:4px 44px 26px 0; max-width:62ch}
.faq__a p{line-height:1.72}
.faq__a p + p{margin-top:.95em}

@media (max-width:620px){
  .band-item p{max-width:none}
  .faq__a > div{padding-right:8px}
}