/* ============================================================================
   DHS PLUMBING — Homepage prototype
   Direction: Trade-Catalog Americana.
   Warm paper ground · blue-derived ink · copper as material · one signal red.
   ========================================================================== */

:root{
  /* paper */
  --bone:oklch(96.5% .012 82); --bone-deep:oklch(93% .016 82); --bone-lift:oklch(98.5% .008 82);
  /* ink — carries a real blue chroma at hue 265. The flag's whisper. */
  --ink:oklch(21% .018 265); --ink-deep:oklch(15.5% .020 265); --ink-muted:oklch(46% .014 265);
  /* material + action */
  --copper:oklch(63% .115 48); --copper-lift:oklch(74% .105 55);
  --signal:oklch(53% .190 27); --signal-lift:oklch(64% .190 28);
  --valley:oklch(52% .045 120);
  /* lines. almost no shadows in this system. */
  --rule:oklch(21% .018 265 / .14); --rule-ink:oklch(96.5% .012 82 / .16);
  --shadow-bar:0 -1px 0 var(--rule), 0 -12px 32px oklch(15.5% .02 265 / .10);
  --shadow-float:0 2px 4px oklch(15.5% .02 265 / .10), 0 12px 28px oklch(15.5% .02 265 / .16);

  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Public Sans",system-ui,sans-serif;
  --font-spec:"Archivo",ui-monospace,monospace;

  /* Height-aware. Scaling on width alone made the headline 104px on a 1366x768
     laptop, which pushed the hero to 863px in a 768px viewport. The vh term
     caps it on short screens without shrinking it on tall ones. */
  --t-display-xl:clamp(2.75rem,min(1.4rem + 6.1vw,1.5rem + 6.4vh),6.5rem);
  --t-display-l:clamp(2.25rem,1.5rem + 3.6vw,4rem);
  --t-h2:clamp(1.75rem,1.35rem + 1.8vw,2.5rem);
  --t-h3:clamp(1.3rem,1.15rem + .75vw,1.65rem);
  --t-body-l:clamp(1.0625rem,1rem + .28vw,1.1875rem);
  --t-spec:.75rem;

  --section-y:clamp(4.5rem,3rem + 6.5vw,9rem);
  --section-y-tight:clamp(2.5rem,2rem + 2vw,4rem);
  --section-y-loud:clamp(6rem,4rem + 9vw,11rem);
  --container:1240px; --gutter:clamp(1.25rem,.75rem + 2vw,2.5rem);
  /* Long-form reading measure for legal + utility pages. From docs/tokens.css. */
  --container-long:720px; --measure-long:72ch;
  --header-h:100px;
  /* Trust bar height (106px) plus an 8px sliver. The hero is sized off this so
     the bar's bottom edge lands just above the fold. */
  --trust-peek:114px;

  /* Lifts the floating chat launcher and back-to-top button off the bottom
     edge. One token so the two stay in their stack order automatically. */
  --fixed-lift:180px;

  --radius:2px; --radius-tile:8px;
  --ease-enter:cubic-bezier(.22,1,.36,1); --ease-move:cubic-bezier(.25,1,.5,1);
  --d-state:140ms; --d-panel:200ms; --d-drawer:280ms;

  --z-header:900; --z-bar:1000; --z-chat-btn:1100; --z-top:1150; --z-chat:1200; --z-drawer:1300;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* Firefox. Tokens, so it follows dark mode automatically. */
  scrollbar-color:var(--copper) var(--bone-deep);scrollbar-width:thin}
/* Chromium / Safari */
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:var(--bone-deep)}
::-webkit-scrollbar-thumb{background:var(--copper);border:3px solid var(--bone-deep);
  border-radius:var(--radius)}
::-webkit-scrollbar-thumb:hover{background:var(--ink)}
::-webkit-scrollbar-corner{background:var(--bone-deep)}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--font-body);font-size:1rem;line-height:1.65;
  overflow-x:hidden;
}
/* Paper grain. Near-imperceptible. It's the difference between off-white and paper. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.h1{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:var(--radius)}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
.spec{font-family:var(--font-spec);font-size:var(--t-spec);letter-spacing:.12em;text-transform:uppercase;font-weight:500;line-height:1.4;font-variation-settings:"wdth" 100}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);padding:12px 20px;z-index:2000}
.skip:focus{left:12px;top:12px}

/* ---- Buttons. 2px radius. No pills anywhere. ---------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:0 1.75rem;border-radius:var(--radius);
  font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color var(--d-state) var(--ease-enter),
             color var(--d-state) var(--ease-enter),
             border-color var(--d-state) var(--ease-enter);
}
.btn--fill{background:var(--signal);color:var(--bone)}
.btn--fill:hover{background:oklch(47% .19 27)}
.btn--ghost-light{border-color:oklch(96.5% .012 82 / .40);color:var(--bone)}
.btn--ghost-light:hover{border-color:var(--bone);background:oklch(96.5% .012 82 / .08)}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{background:var(--ink-deep)}
.link-arrow{
  position:relative;
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:600;
  font-family:var(--font-display);color:var(--ink);
  border-bottom:1px solid var(--copper);padding-bottom:2px;
  transition:border-color var(--d-state) var(--ease-enter)
}
/* WCAG 2.2 SC 2.5.8. Extend the hit area past the visual bounds so the
   underline stays tight to the text but the target clears 44px. */
.link-arrow::after{content:"";position:absolute;inset:-13px -6px}
.link-arrow svg{transition:transform var(--d-state) var(--ease-enter)}
@media(hover:hover) and (pointer:fine){
  .link-arrow:hover{border-bottom-width:2px;padding-bottom:1px}
  .link-arrow:hover svg{transform:translateX(4px)}
}

/* ---- Thirteen-stripe rule. Seventh in signal red. Never explained. ------ */
.stripes{display:flex;gap:8px;justify-content:center;align-items:flex-end}
.stripes i{display:block;width:2px;height:22px;background:var(--rule)}
.stripes i:nth-child(7){background:var(--signal)}
.stripes--ink i{background:oklch(96.5% .012 82 / .26)}
.stripes--ink i:nth-child(7){background:var(--signal-lift)}

/* ---- Scroll reveal ------------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity 500ms var(--ease-enter),transform 500ms var(--ease-enter)}
[data-reveal].in{opacity:1;transform:none}

/* ============================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:fixed;inset:0 0 auto;height:var(--header-h);z-index:var(--z-header);
  display:flex;align-items:center;
  background:transparent;color:var(--bone);
  border-bottom:1px solid transparent;
  transition:background-color var(--d-panel) var(--ease-enter),
             color var(--d-panel) var(--ease-enter),
             border-color var(--d-panel) var(--ease-enter);
}
.hdr.solid{background:var(--bone);color:var(--ink);border-bottom-color:var(--rule)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;width:100%;
  max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);gap:1rem}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0;min-height:44px}
/* brandmark-red-cut.png is a flat 600x600 mark with the house glyph filling
   nearly the full frame (no glow falloff, unlike the old artwork), so it
   renders at its stated box with no cropping margin. content-box here
   (overriding the global border-box) so the padding below adds breathing
   room around the artwork instead of shrinking it. */
.mark__glyph{width:64px;height:64px;max-width:none;flex-shrink:0;display:block;
  box-sizing:content-box;padding-block:10px}
/* Header-only: 15% smaller than the footer's 64px mark, per direct request. */
.hdr .mark__glyph{width:54px;height:54px}
/* DHS 20% larger (1.05rem->1.26rem), PLUMBING 10% larger (.58rem->.638rem), per direct request. */
.mark__txt{font-family:var(--font-display);font-weight:700;letter-spacing:.01em;font-size:1.26rem;
  line-height:1;font-variation-settings:"wdth" 112}
.mark__txt small{display:block;font-weight:500;font-size:.638rem;letter-spacing:.16em;opacity:.7;margin-top:3px}
.nav{display:none;gap:1.15rem;align-items:center}
@media(min-width:1240px){.nav{gap:1.75rem}}
.nav a{text-decoration:none;font-family:var(--font-display);font-weight:500;font-size:.95rem;
  opacity:.9;transition:opacity var(--d-state)}
.nav a:hover{opacity:1}
.nav a.is-spec{color:var(--copper);opacity:1}
.hdr__act{display:flex;align-items:center;gap:.65rem}
.hdr__tel{display:none;text-decoration:none;font-family:var(--font-spec);font-weight:600;
  font-size:.9rem;letter-spacing:.02em}
.hdr .btn{min-height:44px;padding:0 1.15rem;font-size:.9rem}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;
  cursor:pointer;border-radius:var(--radius)}
@media(min-width:1024px){
  .nav{display:flex}
  .hdr__tel{display:block}
  .icon-btn.burger{display:none}
  .icon-btn.tel-ico{display:none}
}

/* ============================================================================
   HERO — full bleed, asymmetric, clip-path entrance
   ========================================================================== */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero__track{display:flex;will-change:transform;
  transition:transform 600ms var(--ease-move)}
.hero.noanim .hero__track{transition:none}
.slide{flex:0 0 100%;min-width:100%;position:relative;display:flex;align-items:flex-end;
  overflow:hidden;
  min-height:clamp(520px,calc(100svh - var(--header-h) - var(--trust-peek)),820px)}
/* The fixed header overlays the hero rather than stacking above it, so it is
   NOT subtracted here. Hero = viewport minus the trust bar, which parks the
   bar's bottom edge just above the browser bottom. */
@media(min-width:1024px){
  .slide{min-height:min(calc(100svh - var(--trust-peek)),1400px)}
}
.slide__media{position:absolute;inset:0;z-index:0;clip-path:inset(0 0 100% 0)}
.hero.go .slide__media{clip-path:inset(0 0 0 0);transition:clip-path 700ms var(--ease-enter)}
.slide__media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
/* The flag reads as material and atmosphere, not as a waving flag. Desaturated
   slightly and carried under the same scrim as every other slide. */
.slide--flag .slide__media img{object-position:50% 45%;filter:saturate(.80) contrast(1.03)}
/* Scrim: dark and calm on the text side, transparent over the material side. */
.slide__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    oklch(15.5% .02 265 / .93) 0%,
    oklch(15.5% .02 265 / .86) 32%,
    oklch(15.5% .02 265 / .55) 58%,
    oklch(15.5% .02 265 / .22) 82%)}
.slide--flag .slide__scrim{
  background:linear-gradient(100deg,
    oklch(15.5% .02 265 / .95) 0%,
    oklch(15.5% .02 265 / .90) 34%,
    oklch(15.5% .02 265 / .66) 60%,
    oklch(15.5% .02 265 / .38) 85%)}
@media(max-width:767px){
  .slide__scrim{background:linear-gradient(to top,
    oklch(15.5% .02 265 / .95) 0%, oklch(15.5% .02 265 / .82) 45%,
    oklch(15.5% .02 265 / .45) 78%, oklch(15.5% .02 265 / .30) 100%)}
}
/* Bottom padding reserves room for the absolutely positioned control row, so
   it can never sit on top of the license line. */
.slide__in{padding-block:clamp(2rem,1.25rem + 3vw,3rem) clamp(5rem,4.5rem + 1.5vw,5.75rem);
  padding-top:calc(var(--header-h) + clamp(2rem,1.25rem + 3vw,3rem));width:100%}
.hero__col{max-width:620px;color:var(--bone)}
.hero .eyebrow{color:var(--copper-lift);margin-bottom:1rem}
/* Optical alignment. At display sizes the glyph sidebearing makes the headline
   read as inset against the body copy below it. -0.02em pulls it back onto the
   same optical edge. Scales with the type, so it holds at every breakpoint. */
/* Only slide 1 carries the real <h1>. Slides 2 and 3 use .h1 so the page keeps
   a single document heading, which is what crawlers and screen readers read. */
.hero h1,.hero .h1{font-size:var(--t-display-xl);font-weight:700;letter-spacing:-.035em;line-height:.94;
  margin-bottom:1.1rem;font-variation-settings:"wdth" 100;margin-left:-.02em;max-width:none}
.hero__sub{font-size:var(--t-body-l);color:oklch(96.5% .012 82 / .84);max-width:52ch;margin-bottom:1.5rem}
.hero__actions{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.15rem}
.hero__actions .btn{width:100%}
.hero__lic{color:oklch(96.5% .012 82 / .68)}

/* ---- Carousel controls. Left aligned with the content, not floating. ---- */
.hero__ctl{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.hero__nav{display:flex;gap:.5rem}
.hero__nav button,.hero__pause{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid oklch(96.5% .012 82 / .34);
  border-radius:var(--radius);color:var(--bone);
  transition:border-color var(--d-state) var(--ease-enter),
             background-color var(--d-state) var(--ease-enter)}
@media(hover:hover) and (pointer:fine){
  .hero__nav button:hover,.hero__pause:hover{
    border-color:var(--copper-lift);background:oklch(96.5% .012 82 / .08)}
}
.hero__dots{display:flex;gap:10px;align-items:center}
.hero__dots button{position:relative;width:36px;height:3px;padding:0;border:0;cursor:pointer;
  background:oklch(96.5% .012 82 / .30);
  transition:background-color var(--d-state) var(--ease-enter)}
/* Extend the hit area past the 3px visual bar. WCAG 2.2 SC 2.5.8. */
.hero__dots button::after{content:"";position:absolute;inset:-21px -5px}
.hero__dots button[aria-selected="true"]{background:var(--copper-lift)}
.hero__pause{margin-left:.25rem}
.hero__ctlwrap{position:absolute;left:0;right:0;bottom:1rem;z-index:3}

/* ---- Scroll cue. Bottom centre, floating above the carousel. ----------- */
.scrollcue{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  padding:.4rem .8rem;min-height:44px;background:none;border:0;cursor:pointer;color:var(--bone)}
.scrollcue .spec{color:oklch(96.5% .012 82 / .76);
  transition:color var(--d-state) var(--ease-enter)}
.scrollcue__rail{position:relative;width:1px;height:34px;overflow:hidden;
  background:oklch(96.5% .012 82 / .22);
  transition:background-color var(--d-state) var(--ease-enter)}
.scrollcue__rail i{position:absolute;left:-1px;top:0;width:3px;height:12px;
  background:var(--copper-lift);
  animation:cue 2.1s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{
  0%{transform:translateY(-14px);opacity:0}
  22%{opacity:1}
  74%{opacity:1}
  100%{transform:translateY(34px);opacity:0}
}
@media(hover:hover) and (pointer:fine){
  .scrollcue:hover .spec{color:var(--bone)}
  .scrollcue:hover .scrollcue__rail{background:oklch(96.5% .012 82 / .42)}
}
/* Narrow screens: the control row spans most of the width, so stack the cue
   beneath it rather than letting the two collide at the same baseline. */
@media(max-width:767px){
  /* Cue occupies 16-88px off the hero floor, so the controls clear it at 100px. */
  .hero__ctlwrap{bottom:6.25rem}
  .slide__in{padding-bottom:10rem}
}
@media(prefers-reduced-motion:reduce){
  .scrollcue__rail i{animation:none;opacity:1;transform:translateY(11px)}
}
/* Short viewports: tighten the hero so the trust bar still clears the fold. */
@media(max-height:840px){
  .slide__in{padding-top:calc(var(--header-h) + 1.75rem);padding-bottom:5.25rem}
  .hero .eyebrow{margin-bottom:.8rem}
  .hero__sub{margin-bottom:1.15rem}
  .hero__actions{margin-bottom:.9rem}
}
/* Mobile leads with CALL. Desktop leads with BOOK. This inversion is worth money. */
.hero__actions .b-call{order:1;background:var(--signal);color:var(--bone);border-color:transparent}
.hero__actions .b-book{order:2;border-color:oklch(96.5% .012 82 / .40);background:transparent;color:var(--bone)}
@media(min-width:768px){
  .hero__actions{flex-direction:row;gap:.85rem}
  .hero__actions .btn{width:auto}
  .hero__actions .b-book{order:1;background:var(--signal);border-color:transparent;color:var(--bone)}
  .hero__actions .b-call{order:2;background:transparent;color:var(--bone);border-color:oklch(96.5% .012 82 / .40)}
}
.slide [data-stag]{opacity:0;transform:translateY(12px)}
.hero.go .slide.on [data-stag]{opacity:1;transform:none;
  transition:opacity 500ms var(--ease-enter),transform 500ms var(--ease-enter);
  transition-delay:var(--dl,0ms)}

/* ============================================================================
   TRUST BAR
   ========================================================================== */
.trust{background:var(--ink);color:var(--bone);position:relative;z-index:2}
.trust__in{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.trust__in::-webkit-scrollbar{display:none}
.trust__i{flex:0 0 auto;scroll-snap-align:start;min-width:min(74vw,290px);
  padding:1.3rem clamp(1.25rem,3vw,2rem);border-right:1px solid var(--rule-ink);
  display:flex;gap:.75rem;align-items:center}
.trust__i:last-child{border-right:0}
.trust__i b{display:block;font-family:var(--font-display);font-weight:600;font-size:.9rem}
.trust__i span{display:block;font-size:.8125rem;color:oklch(96.5% .012 82 / .66);line-height:1.4}
.trust__i .spec{color:var(--copper-lift)}
.trust__i .mk-accent{fill:var(--copper-lift)}
.stars{display:flex;gap:2px;color:var(--copper-lift)}
/* Red hover. Copper accents inside have to move to bone, or they go muddy
   against the red. Bone on --signal is 6.5:1, so the text stays AA. */
@media(hover:hover) and (pointer:fine){
  .trust__i{transition:background-color var(--d-state) var(--ease-enter)}
  .trust__i:hover{background:var(--signal)}
  .trust__i:hover span{color:oklch(96.5% .012 82 / .90)}
  .trust__i:hover .spec,.trust__i:hover .stars{color:var(--bone)}
  .trust__i:hover .mk-accent{fill:var(--bone)}
}
/* Hold the scroll row until 1280. Below that, five equal columns are only
   ~140px wide and every label wraps to three lines, which pushed the bar to
   144px tall and shoved it under the fold. */
@media(min-width:1280px){
  .trust__in{overflow:visible;justify-content:space-between}
  .trust__i{flex:1 1 0;min-width:0}
}

/* ============================================================================
   SECTIONS
   ========================================================================== */
.sec{padding-block:var(--section-y);position:relative;z-index:2}
.sec--tight{padding-block:var(--section-y-tight)}
.sec--deep{background:var(--bone-deep)}
.sec__head{max-width:56ch;margin-bottom:clamp(2.5rem,2rem + 3vw,4.5rem)}
.sec__head h2{font-size:var(--t-h2)}
.sec__head p{color:var(--ink-muted);font-size:var(--t-body-l);margin-top:1rem;max-width:52ch}
.sec__headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}

/* ---- Tankless feature band: 2.5x the weight of anything below it -------- */
.feat{display:grid;gap:clamp(2rem,1rem + 4vw,3.5rem);align-items:center;
  margin-bottom:clamp(3rem,2rem + 4vw,5rem)}
@media(min-width:900px){.feat{grid-template-columns:5fr 7fr}}
.feat__fig{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  background:var(--bone-lift);aspect-ratio:4/3}
.feat__fig img{width:100%;height:100%;object-fit:cover}
.feat .spec.lbl{color:var(--copper);margin-bottom:1rem}
.feat h3{font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);font-weight:700;letter-spacing:-.03em;margin-bottom:1.1rem}
.feat p{color:var(--ink-muted);font-size:var(--t-body-l);max-width:46ch;margin-bottom:1.6rem}
.speclist{display:flex;flex-wrap:wrap;gap:0;margin-bottom:1.9rem;border-top:1px solid var(--copper);
  border-bottom:1px solid var(--copper);padding-block:.7rem}
.speclist li{list-style:none;padding-right:1.1rem;margin-right:1.1rem;border-right:1px solid var(--rule);
  color:var(--ink)}
.speclist li:last-child{border-right:0;margin-right:0;padding-right:0}

/* ---- Service rows. Alternating. No card grid. --------------------------- */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;gap:clamp(1.25rem,1rem + 2vw,2.5rem);align-items:center;
  padding-block:clamp(1.5rem,1rem + 2vw,2.25rem);border-bottom:1px solid var(--rule);
  transition:background-color var(--d-state) var(--ease-enter);
  margin-inline:calc(var(--gutter) * -.5);padding-inline:calc(var(--gutter) * .5)}
@media(hover:hover) and (pointer:fine){.row:hover{background:var(--bone-lift)}}
@media(min-width:900px){
  .row{grid-template-columns:7fr 5fr}
  .row:nth-child(even) .row__fig{order:-1}
}
.row__fig{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius)}
.row__fig img{width:100%;height:100%;object-fit:cover}
.row h3{font-size:var(--t-h3);margin-bottom:.5rem}
.row p{color:var(--ink-muted);max-width:48ch;margin-bottom:.9rem}
.row .spec{color:var(--copper);margin-bottom:1rem}

/* ---- Process: 3 steps, connecting rule draws in ------------------------- */
.steps{display:grid;gap:clamp(2rem,1.5rem + 3vw,3rem);position:relative}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding-right:1.5rem}
.step__n{font-family:var(--font-spec);font-weight:700;font-size:2.6rem;line-height:1;
  color:var(--copper);letter-spacing:-.02em;margin-bottom:1.1rem;display:block}
.step h3{font-size:var(--t-h3);margin-bottom:.6rem}
.step p{color:var(--ink-muted);max-width:38ch}

/* ---- Before / after slider --------------------------------------------- */
.proof{display:grid;gap:clamp(2rem,1.5rem + 3vw,3.5rem);align-items:start}
@media(min-width:1000px){.proof{grid-template-columns:4fr 8fr}}
.ba{position:relative;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--rule);
  border-radius:var(--radius);touch-action:pan-y;user-select:none;background:var(--ink-deep)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba__tag{position:absolute;top:12px;padding:.3rem .55rem;background:oklch(15.5% .02 265 / .55);
  color:var(--bone);border-radius:var(--radius);z-index:3}
.ba__tag--b{left:12px}.ba__tag--a{right:12px}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--bone);
  z-index:4;cursor:ew-resize;transform:translateX(-1px);border:0;padding:0}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;background:var(--bone);border-radius:var(--radius);
  display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow-float)}
.ba__cap{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;color:var(--ink-muted)}
.thumbs{display:flex;gap:.65rem;margin-top:1rem;overflow-x:auto;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{flex:0 0 auto;width:88px;height:60px;padding:0;border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;background:none;cursor:pointer;
  transition:border-color var(--d-state)}
.thumbs button[aria-current="true"]{border-color:var(--copper);border-width:2px}
.thumbs img{width:100%;height:100%;object-fit:cover}
.proof h2{font-size:var(--t-h2);margin-bottom:1rem}
.proof__note{color:var(--ink-muted);margin-bottom:1.75rem;max-width:40ch}
.proof__meta{border-top:1px solid var(--rule);padding-top:1.1rem}
.proof__meta dt{color:var(--copper);margin-bottom:.2rem}
.proof__meta dd{margin:0 0 .9rem;font-weight:500}

/* ============================================================================
   COMMUNITY — ink drench + parallax. The emotional center.
   ========================================================================== */
.comm{position:relative;overflow:hidden;background:var(--ink-deep);color:var(--bone);
  padding-block:var(--section-y-loud);z-index:2}
.comm__bg{position:absolute;inset:-12% 0;z-index:0;opacity:.22;will-change:transform}
.comm__bg img{width:100%;height:100%;object-fit:cover}
.comm .wrap{position:relative;z-index:1}
.comm .stripes{margin-bottom:2.75rem}
.comm__col{max-width:660px}
.comm h1,.comm h2{font-size:var(--t-display-l);font-weight:700;letter-spacing:-.03em;margin-bottom:1.75rem}
.comm p{color:oklch(96.5% .012 82 / .84);font-size:var(--t-body-l);margin-bottom:1.25rem;max-width:60ch}
.pledge{list-style:none;padding:0;margin:2.5rem 0 1.75rem;border-top:1px solid var(--rule-ink)}
.pledge li{padding-block:1.05rem;border-bottom:1px solid var(--rule-ink);
  display:grid;gap:.15rem .9rem}
@media(min-width:640px){.pledge li{grid-template-columns:100px 1fr;align-items:baseline}}
.pledge .spec{color:var(--copper-lift)}
.pledge span:last-child{color:oklch(96.5% .012 82 / .84)}
.comm__sig{color:var(--copper-lift)}

/* ============================================================================
   TESTIMONIALS — hairline blocks, not floating panels
   ========================================================================== */
.quotes{display:grid;gap:1.25rem}
@media(min-width:760px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.quotes{grid-template-columns:repeat(3,1fr)}}
.q{border:1px solid var(--rule);border-radius:var(--radius);background:var(--bone-lift);
  padding:clamp(1.5rem,1.2rem + 1vw,2rem);display:flex;flex-direction:column;gap:1.1rem}
.q blockquote{margin:0;flex:1}
.q__foot{border-top:1px solid var(--rule);padding-top:1.1rem;display:flex;
  align-items:center;gap:.75rem}
.q__ava{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bone-deep)}
.q__who b{display:block;font-family:var(--font-display);font-weight:600;font-size:.95rem}
.q__who .spec{color:var(--ink-muted);margin-top:.15rem}
.q__src{margin-left:auto;color:var(--ink-muted);font-size:.7rem;font-family:var(--font-spec);
  letter-spacing:.1em;text-transform:uppercase;flex-shrink:0}

/* ============================================================================
   MAP
   ========================================================================== */
.map{display:grid;gap:clamp(2rem,1.5rem + 3vw,3.5rem)}
@media(min-width:1000px){.map{grid-template-columns:4fr 8fr}}
.cities{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1rem;list-style:none;padding:0;margin:1.5rem 0 0;
  border-top:1px solid var(--rule)}
.cities li{border-bottom:1px solid var(--rule)}
.cities a,.cities button{display:block;width:100%;padding:.55rem 0;text-decoration:none;color:var(--ink);
  font-family:var(--font-spec);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  transition:color var(--d-state);background:none;border:0;text-align:left;cursor:pointer;font-weight:500}
.cities a:hover,.cities button:hover{color:var(--copper)}
.mapfig{position:relative;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--bone-lift);padding:1rem;min-height:340px}
.mapfig svg{width:100%;height:auto;display:block}
.pin{cursor:pointer}
.pin circle{transition:r var(--d-panel) var(--ease-enter),fill var(--d-panel) var(--ease-enter)}
.pin:hover circle,.pin:focus-visible circle,.pin[aria-current="true"] circle{r:8;fill:var(--copper)}
.pin text{font-family:var(--font-spec);font-size:9px;letter-spacing:.08em;fill:var(--ink-muted);
  text-transform:uppercase}
.pin:hover text,.pin[aria-current="true"] text{fill:var(--ink);font-weight:700}
.mapcard{position:absolute;left:1rem;bottom:1rem;right:1rem;background:var(--bone);
  border:1px solid var(--rule);border-radius:var(--radius);padding:1rem 1.15rem;
  box-shadow:var(--shadow-float)}
@media(min-width:640px){.mapcard{right:auto;max-width:320px}}
.mapcard b{font-family:var(--font-display);font-size:1.05rem;display:block;margin-bottom:.15rem}
.mapcard .spec{color:var(--copper);margin-bottom:.5rem}
.mapcard p{font-size:.875rem;color:var(--ink-muted)}

/* ============================================================================
   BLOG — asymmetric feature + 3 compact rows
   ========================================================================== */
.posts{display:grid;gap:clamp(2rem,1.5rem + 2vw,3rem)}
@media(min-width:900px){.posts{grid-template-columns:1fr 1fr}}
.post-f__fig{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);margin-bottom:1.25rem}
.post-f__fig img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease-enter)}
@media(hover:hover){.post-f:hover .post-f__fig img{transform:scale(1.03)}}
.post-f h3{font-size:var(--t-h3);margin-bottom:.6rem}
.post-f p{color:var(--ink-muted);margin-bottom:.9rem;max-width:46ch}
.post-cat{color:var(--copper);margin-bottom:.55rem;display:block}
.post-meta{color:var(--ink-muted)}
.post-list{border-top:1px solid var(--rule)}
.post-c{display:grid;grid-template-columns:88px 1fr;gap:1.1rem;align-items:center;
  padding-block:1.15rem;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:background-color var(--d-state)}
@media(hover:hover){.post-c:hover{background:var(--bone-lift)}}
.post-c img{width:88px;height:66px;object-fit:cover;border-radius:var(--radius)}
.post-c b{font-family:var(--font-display);font-weight:600;font-size:1.02rem;display:block;
  line-height:1.3;margin-block:.3rem}

/* ============================================================================
   LEAD CAPTURE — the second and final ink drench
   ========================================================================== */
.lead{background:var(--ink-deep);color:var(--bone);padding-block:var(--section-y);position:relative;z-index:2}
.lead__grid{display:grid;gap:clamp(2.5rem,2rem + 3vw,4rem)}
@media(min-width:960px){.lead__grid{grid-template-columns:1fr 1fr;align-items:start}}
.lead h2{font-size:var(--t-display-l);font-weight:700;letter-spacing:-.03em;margin-bottom:1.25rem}
.lead__sub{color:oklch(96.5% .012 82 / .84);font-size:var(--t-body-l);margin-bottom:2rem;max-width:46ch}
.assure{list-style:none;padding:0;margin:0 0 2.25rem;border-top:1px solid var(--rule-ink)}
.assure li{padding-block:.85rem;border-bottom:1px solid var(--rule-ink);display:flex;gap:.75rem;
  align-items:flex-start;color:oklch(96.5% .012 82 / .88)}
.assure svg{flex-shrink:0;color:var(--copper-lift);margin-top:3px}
.lead__tel{text-decoration:none;display:block}
.lead__tel span{color:oklch(96.5% .012 82 / .70);display:block;margin-bottom:.35rem}
.lead__tel b{font-family:var(--font-spec);font-weight:700;font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem);
  letter-spacing:-.02em;line-height:1}
.form{background:var(--bone);color:var(--ink);border-radius:var(--radius);
  padding:clamp(1.5rem,1.2rem + 1.8vw,2.5rem)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--font-display);font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.75rem .9rem;font:inherit;font-size:1rem;
  background:var(--bone-lift);border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink);
  transition:border-color var(--d-state)}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--copper);outline-offset:1px}
.field small{display:block;color:var(--ink-muted);font-size:.8125rem;margin-top:.35rem}
.form .btn{width:100%;margin-top:.4rem}
.form__fine{color:var(--ink-muted);font-size:.8125rem;margin-top:.9rem}
.form__ok{display:none;text-align:left;padding:1rem 0}
.form.done .form__body{display:none}
.form.done .form__ok{display:block}
.form__ok b{font-family:var(--font-display);font-size:1.3rem;display:block;margin-bottom:.5rem}

/* ============================================================================
   FILE DROPZONE — resume attach, careers application form
   Click or drag. Border goes solid + copper once a file is attached; the
   prompt swaps for a filename row with a remove control. No upload actually
   happens, this is a static prototype.
   ========================================================================== */
.filedrop{position:relative;border:1px dashed var(--rule);border-radius:var(--radius);
  background:var(--bone-lift);padding:1.35rem 1rem;text-align:center;cursor:pointer;
  transition:border-color var(--d-state) var(--ease-enter),background var(--d-state) var(--ease-enter)}
.filedrop:hover,.filedrop:focus-within{border-color:var(--copper)}
.filedrop.drag{border-color:var(--copper);background:oklch(63% .115 48 / .08)}
.filedrop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.filedrop__prompt svg{color:var(--copper);margin-bottom:.5rem}
.filedrop__prompt b{display:block;font-family:var(--font-display);font-weight:600;font-size:.9375rem}
.filedrop__prompt span{display:block;color:var(--ink-muted);font-size:.8125rem;margin-top:.3rem}
.filedrop__file{display:none;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--ink)}
.filedrop.has-file{border-style:solid;border-color:var(--copper);background:var(--bone)}
.filedrop.has-file .filedrop__prompt{display:none}
.filedrop.has-file .filedrop__file{display:flex}
.filedrop__x{position:relative;z-index:1;background:none;border:0;color:var(--ink-muted);
  cursor:pointer;padding:.25rem;border-radius:var(--radius);display:inline-flex;
  transition:color var(--d-state) var(--ease-enter)}
.filedrop__x:hover{color:var(--signal)}

/* ============================================================================
   NEWSLETTER BAND — every page, directly above the footer
   ========================================================================== */
.news{background:var(--bone-deep);border-top:1px solid var(--rule);
  padding-block:clamp(3rem,2.5rem + 2.5vw,4.5rem);position:relative;z-index:2}
.news__grid{display:grid;gap:2rem}
@media(min-width:960px){.news__grid{grid-template-columns:7fr 5fr;align-items:center;gap:4rem}}
.news h2{font-size:var(--t-h3);margin-bottom:.85rem}
.news p{color:var(--ink-muted);max-width:56ch;margin-bottom:1rem}
.news__inc{display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline}
.news__inc .spec{color:var(--copper)}
.news__inc span:last-child{font-size:.9375rem}
.nform__row{display:flex;flex-wrap:wrap;gap:.6rem}
.nform__row input{flex:1 1 200px;min-height:52px;padding:.75rem .9rem;font:inherit;
  background:var(--bone-lift);border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink)}
.nform__row .btn{min-height:52px;flex:0 0 auto}
.opt{display:flex;gap:.6rem;align-items:center;margin-top:.35rem;padding-block:.7rem;
  min-height:44px;font-size:.875rem;cursor:pointer}
.opt input{width:20px;height:20px;margin-top:2px;accent-color:var(--copper);flex-shrink:0}
/* Progressive disclosure. grid-template-rows, never height. */
.reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-panel) var(--ease-enter)}
.reveal.open{grid-template-rows:1fr}
.reveal > div{overflow:hidden}
.consent{color:var(--ink-muted);font-size:.75rem;line-height:1.5;margin-top:.75rem}
.news__fine{color:var(--ink-muted);font-size:.8125rem;margin-top:.85rem}

/* ============================================================================
   FOOTER
   ========================================================================== */
.ft{background:var(--ink-deep);color:var(--bone);padding-block:clamp(3.5rem,3rem + 3vw,5rem) 0;
  position:relative;z-index:2}
.ft__grid{display:grid;gap:2.5rem;padding-bottom:3rem}
@media(min-width:640px){.ft__grid{grid-template-columns:repeat(2,1fr)}}
/* Column 1 holds the six 44px social buttons, which need 304px on one line.
   At 1.4fr it was only 245px at this breakpoint and the row wrapped. */
@media(min-width:1000px){.ft__grid{grid-template-columns:2.15fr 1fr 1fr 1.2fr;gap:2.5rem}}
.ft h3{font-family:var(--font-spec);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper-lift);margin-bottom:1.1rem;font-weight:600}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.ft a{text-decoration:none;color:oklch(96.5% .012 82 / .82);font-size:.9375rem;
  transition:color var(--d-state)}
.ft a:hover{color:var(--bone)}
.ft__intro{color:oklch(96.5% .012 82 / .70);font-size:.9375rem;margin:1.1rem 0;max-width:34ch}
/* Must out-specify `.ft ul { display: grid }` (0,1,1), or the icons stack into
   a single column. `.ft .social` is (0,2,0), so it wins. */
.ft .social{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  gap:.5rem;margin-top:1.25rem;padding:0;list-style:none}
.ft .social li{flex:0 0 auto;width:44px;height:44px}
.social a{width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--rule-ink);border-radius:var(--radius);
  color:oklch(96.5% .012 82 / .78);
  transition:border-color var(--d-state) var(--ease-enter),
             color var(--d-state) var(--ease-enter),
             background-color var(--d-state) var(--ease-enter)}
@media(hover:hover) and (pointer:fine){
  .social a:hover{border-color:var(--copper-lift);color:var(--copper-lift);
    background:oklch(96.5% .012 82 / .06)}
}
.ft__tel{font-family:var(--font-spec);font-weight:700;font-size:1.35rem;letter-spacing:-.01em;
  color:var(--bone) !important;display:block;margin-bottom:.4rem;padding-block:10px}
.ft__areas{border-top:1px solid var(--rule-ink);padding-block:1.6rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.1rem}
.ft__areas a{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase}
.ft__bot{border-top:1px solid var(--rule-ink);padding-block:1.5rem;display:flex;
  flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;align-items:center;
  color:oklch(96.5% .012 82 / .60);font-size:.8125rem}
.ft__bot nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.ft__bot nav a{padding-block:10px}

/* ============================================================================
   FIXED UI — action bar, chat, scroll to top, drawer
   ========================================================================== */
.actbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:flex;
  background:var(--bone);box-shadow:var(--shadow-bar);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);transition:transform 250ms var(--ease-move)}
.actbar.show{transform:none}
.actbar a{flex:1;min-height:56px;display:flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;font-family:var(--font-display);font-weight:600}
.actbar .a-call{color:var(--ink);border-right:1px solid var(--rule)}
.actbar .a-book{background:var(--signal);color:var(--bone)}
@media(min-width:1024px){.actbar{display:none}}

.chatbtn{position:fixed;right:20px;bottom:calc(20px + var(--fixed-lift) + env(safe-area-inset-bottom));
  z-index:var(--z-chat-btn);width:56px;height:56px;border-radius:var(--radius-tile);
  background:var(--ink-deep);color:var(--copper-lift);border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;place-content:center;box-shadow:var(--shadow-float)}
/* 60px frame inside the 56px tile puts the visible mark at ~29px. The outer
   frame pixels are fully transparent, so the 2px overhang never shows. */
/* max-width:none, or the global img{max-width:100%} squashes it to the tile. */
.chatbtn__mark{width:60px;height:60px;max-width:none;display:block;pointer-events:none}
.chatbtn .dot{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;
  background:var(--signal);border:2px solid var(--bone)}
/* ---- Dispatch: the branded chat panel -------------------------------- */
.chat{
  position:fixed;right:20px;bottom:calc(88px + var(--fixed-lift) + env(safe-area-inset-bottom));
  z-index:var(--z-chat);width:380px;max-width:calc(100vw - 40px);
  height:min(560px,calc(100svh - var(--fixed-lift) - 150px));
  background:var(--bone);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow-float);display:flex;flex-direction:column;overflow:hidden;
  /* Emerges from the launcher it was opened from, not from nowhere. */
  transform-origin:bottom right;opacity:0;transform:scale(.92);
  visibility:hidden;pointer-events:none;
  transition:opacity var(--d-drawer) var(--ease-enter),
             transform var(--d-drawer) var(--ease-enter),
             visibility 0s linear var(--d-drawer)}
.chat.open{opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition-delay:0s,0s,0s}

.chat__head{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;
  background:var(--ink-deep);color:var(--bone);flex-shrink:0}
/* Same glow-bleed treatment as the header lockup: 64px frame, negative margin
   so it occupies a 32px footprint and the falloff bleeds instead of clipping. */
.chat__mark{width:41px;height:41px;max-width:none;margin:-10px;flex-shrink:0;display:block}
.chat__id b{display:block;font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.2}
.chat__id .spec{display:flex;align-items:center;gap:.35rem;color:oklch(96.5% .012 82 / .70);margin-top:2px}
.chat__dot{width:7px;height:7px;border-radius:50%;background:var(--copper-lift);flex-shrink:0}
.chat__dot.off{background:oklch(96.5% .012 82 / .40)}
.chat__close{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;color:var(--bone);cursor:pointer;border-radius:var(--radius);
  transition:background-color var(--d-state) var(--ease-enter)}
.chat__close:hover{background:oklch(96.5% .012 82 / .10)}

.chat__log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;
  gap:.6rem;background:var(--bone);scroll-behavior:smooth}
/* Squared bubbles, no tails, no pills. Same system as the rest of the site. */
.msg{max-width:86%;padding:.7rem .85rem;border-radius:var(--radius);
  font-size:.9375rem;line-height:1.55;white-space:pre-line}
.msg--bot{align-self:flex-start;background:var(--bone-lift);border:1px solid var(--rule);color:var(--ink)}
.msg--me{align-self:flex-end;background:var(--ink);color:var(--bone)}
.msg--alert{align-self:stretch;max-width:100%;background:var(--signal);color:var(--bone);
  border:1px solid transparent;font-weight:500}
.msg--typing{color:var(--ink-muted);font-style:normal}
.msg__act{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.msg__act a,.msg__act button{display:inline-flex;align-items:center;gap:.4rem;
  min-height:40px;padding:0 .8rem;border-radius:var(--radius);cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:.8125rem;text-decoration:none;
  border:1px solid var(--rule);background:var(--bone);color:var(--ink);position:relative;
  transition:border-color var(--d-state) var(--ease-enter),
             background-color var(--d-state) var(--ease-enter)}
.msg__act a::after,.msg__act button::after{content:"";position:absolute;inset:-2px}
.msg__act .go{background:var(--signal);border-color:transparent;color:var(--bone)}
.msg--alert .msg__act a{background:var(--bone);border-color:transparent;color:var(--signal)}
@media(hover:hover) and (pointer:fine){
  .msg__act a:hover,.msg__act button:hover{border-color:var(--copper)}
}

.chat__chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .8rem;background:var(--bone);flex-shrink:0}
.chat__chips button{position:relative;min-height:36px;padding:.4rem .7rem;cursor:pointer;
  border:1px solid var(--rule);background:var(--bone-lift);border-radius:var(--radius);
  font-size:.8125rem;color:var(--ink);text-align:left;
  transition:border-color var(--d-state) var(--ease-enter)}
/* 36px visual, 44px target. */
.chat__chips button::after{content:"";position:absolute;inset:-4px}
.chat__chips button:hover{border-color:var(--copper)}

.chat__composer{display:flex;gap:.5rem;padding:.7rem;background:var(--bone-deep);
  border-top:1px solid var(--rule);flex-shrink:0}
.chat__composer input{flex:1;min-height:44px;padding:.6rem .75rem;font:inherit;font-size:1rem;
  background:var(--bone-lift);border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink)}
.chat__composer input:focus{border-color:var(--copper)}
.chat__composer button{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;
  background:var(--copper);color:var(--bone);border:0;border-radius:var(--radius);cursor:pointer;
  transition:background-color var(--d-state) var(--ease-enter)}
.chat__composer button:hover{background:var(--ink)}

.chat__foot{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;
  padding:.6rem 1rem;background:var(--ink-deep);color:var(--bone);text-decoration:none;
  font-family:var(--font-spec);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;flex-shrink:0;transition:color var(--d-state) var(--ease-enter)}
.chat__foot:hover{color:var(--copper-lift)}

/* Greeting bubble. Anchored to the launcher, dismissible, once per session. */
.greet{position:fixed;right:20px;
  bottom:calc(88px + var(--fixed-lift) + env(safe-area-inset-bottom));
  z-index:var(--z-chat-btn);width:290px;max-width:calc(100vw - 40px);
  background:var(--bone);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow-float);padding:.9rem 1rem;
  opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;
  transition:opacity var(--d-panel) var(--ease-enter),transform var(--d-panel) var(--ease-enter),
             visibility 0s linear var(--d-panel)}
.greet.show{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s,0s,0s}
.greet p{font-size:.875rem;line-height:1.5;margin-right:1.5rem}
.greet b{font-family:var(--font-display);display:block;margin-bottom:.2rem;font-size:.9375rem}
.greet__x{position:absolute;top:2px;right:2px;width:36px;height:36px;display:grid;
  place-items:center;background:none;border:0;cursor:pointer;color:var(--ink-muted)}
.greet__x::after{content:"";position:absolute;inset:-4px}

.chat__scrim{position:fixed;inset:0;background:oklch(15.5% .02 265 / .55);
  z-index:calc(var(--z-chat) - 1);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--d-drawer) var(--ease-enter),visibility 0s linear var(--d-drawer)}

/* Mobile: full-height sheet rising from the bottom. */
@media(max-width:640px){
  .chat{right:0;left:0;bottom:0;width:100%;max-width:none;height:92svh;
    border-radius:0;border-left:0;border-right:0;border-bottom:0;
    transform-origin:bottom center;transform:translateY(100%);
    padding-bottom:env(safe-area-inset-bottom);
    transition:transform var(--d-drawer) var(--ease-move),visibility 0s linear var(--d-drawer)}
  .chat.open{transform:none}
  .chat__scrim.show{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s,0s}
  .chat__grab{display:block;width:36px;height:4px;border-radius:2px;
    background:oklch(96.5% .012 82 / .35);margin:.5rem auto -.25rem}
}
.chat__grab{display:none}

.totop{position:fixed;right:20px;bottom:calc(88px + var(--fixed-lift) + env(safe-area-inset-bottom));
  z-index:var(--z-top);width:44px;height:44px;border-radius:var(--radius);
  /* Off state: brand red. Hover and active invert to paper. Both directions
     land at 6.5:1, so the chevron stays legible either way. */
  background:var(--signal);border:1px solid transparent;color:var(--bone);
  display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity 140ms var(--ease-enter),transform 140ms var(--ease-enter),
             background-color var(--d-state) var(--ease-enter),
             color var(--d-state) var(--ease-enter),
             border-color var(--d-state) var(--ease-enter)}
/* The global focus ring is copper, which is near-invisible on red. */
.totop:focus-visible{outline-color:var(--bone)}
.totop.show{opacity:1;transform:none;pointer-events:auto;
  transition-duration:200ms}
.totop svg{transition:transform var(--d-state) var(--ease-enter)}
.totop:active{background:var(--bone);color:var(--signal);border-color:var(--signal)}
@media(hover:hover) and (pointer:fine){
  .totop:hover{background:var(--bone);color:var(--signal);border-color:var(--signal)}
  .totop:hover svg{transform:translateY(-2px)}
}
@media(max-width:1023px){
  body.bar-on .chatbtn{bottom:calc(76px + var(--fixed-lift) + env(safe-area-inset-bottom))}
  body.bar-on .totop{bottom:calc(144px + var(--fixed-lift) + env(safe-area-inset-bottom))}
}

.scrim{position:fixed;inset:0;background:oklch(15.5% .02 265 / .55);z-index:var(--z-drawer);
  opacity:0;pointer-events:none;transition:opacity var(--d-drawer) var(--ease-enter)}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(100%,420px);z-index:calc(var(--z-drawer) + 1);
  background:var(--ink-deep);color:var(--bone);overflow-y:auto;
  transform:translateX(100%);transition:transform var(--d-drawer) var(--ease-move);
  padding:1rem var(--gutter) 2.5rem;padding-top:calc(var(--header-h) + 1rem)}
.drawer.open{transform:none}
.drawer .btn{width:100%;margin-bottom:.6rem}
.drawer hr{border:0;border-top:1px solid var(--rule-ink);margin:1.4rem 0}
.dnav{list-style:none;padding:0;margin:0}
.dnav > li{border-bottom:1px solid var(--rule-ink)}
.dnav a,.dnav button{display:flex;width:100%;align-items:center;justify-content:space-between;
  padding:1rem 0;background:none;border:0;text-align:left;text-decoration:none;color:var(--bone);
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;cursor:pointer}
.dnav .tag{font-family:var(--font-spec);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--copper-lift);font-weight:600}
.sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-panel) var(--ease-enter)}
.sub.open{grid-template-rows:1fr}
.sub > div{overflow:hidden}
.sub ul{list-style:none;padding:0 0 .9rem;margin:0;display:grid;gap:.15rem}
.sub a{font-family:var(--font-body);font-weight:400;font-size:.95rem;padding:.45rem 0;
  color:oklch(96.5% .012 82 / .78)}
.drawer__ft{margin-top:2rem;color:oklch(96.5% .012 82 / .55)}
.drawer__ft div{margin-bottom:.35rem}

/* ============================================================================
   REDUCED MOTION
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  [data-reveal],.slide.on [data-stag]{opacity:1 !important;transform:none !important}
  .slide__media{clip-path:none !important}
  .comm__bg{transform:none !important}
  .lgl-sec,.smap__grp,.toc,.note,.lgl-mast [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ============================================================================
   LEGAL & UTILITY PAGES — privacy · terms · cookies · accessibility · sitemap
   Long-form, single column, 72ch measure, hairline dividers, no cards.
   The ink masthead gives the fixed transparent header a dark ground to sit on,
   the same way the hero does on the homepage.
   ========================================================================== */
.lgl-mast{background:var(--ink-deep);color:var(--bone);position:relative;z-index:2;
  padding-top:calc(var(--header-h) + clamp(2.5rem,2rem + 3.5vw,5rem));
  padding-bottom:clamp(2.5rem,2rem + 3vw,4rem)}
.lgl-mast .eyebrow{color:var(--copper-lift);margin-bottom:1.1rem}
.lgl-mast h1{font-size:var(--t-display-l);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  max-width:20ch;margin-left:-.02em}
.lgl-mast__sub{color:oklch(96.5% .012 82 / .84);font-size:var(--t-body-l);margin-top:1.35rem;max-width:60ch}
.lgl-mast__meta{margin-top:1.7rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--copper-lift)}

.lgl{padding-block:clamp(3rem,2.5rem + 3vw,5rem);position:relative;z-index:2}
.lgl__wrap{max-width:1040px;margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
.lgl__intro{color:var(--ink-muted);font-size:var(--t-body-l);max-width:var(--measure-long);
  margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)}

/* Table of contents — hairline-delimited list, not a card. */
.toc{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-block:1.4rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)}
.toc h2{font-family:var(--font-spec);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper);margin-bottom:1rem;font-weight:600}
.toc ol{list-style:none;counter-reset:toc;margin:0;padding:0;display:grid;gap:.5rem}
@media(min-width:640px){.toc ol{grid-template-columns:1fr 1fr;gap:.5rem 2rem}}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:.7rem;align-items:baseline;text-decoration:none;color:var(--ink);
  padding:.2rem 0;transition:color var(--d-state) var(--ease-enter)}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-spec);
  font-size:.72rem;letter-spacing:.06em;color:var(--copper);flex-shrink:0}
.toc a:hover{color:var(--copper)}

/* Section anchors clear the fixed header when jumped to. */
.lgl-sec,.smap__grp{scroll-margin-top:calc(var(--header-h) + 1.25rem)}

/* Two-column layout: a sticky section rail on desktop and tablet, the same TOC
   inline and stacked on narrow viewports. Mirrors brand.html's numbered rail. */
.lgl__cols{}
.lgl__body{}
@media(min-width:900px){
  .lgl__cols{display:grid;grid-template-columns:200px minmax(0,var(--container-long));
    column-gap:clamp(1.75rem,1rem + 2.5vw,3.5rem);align-items:start}
  .lgl__body{min-width:0}
  .lgl__rail{position:sticky;top:calc(var(--header-h) + 1.5rem);
    max-height:calc(100svh - var(--header-h) - 2.5rem);overflow-y:auto}
  /* The TOC drops its boxed treatment and becomes a vertical numbered rail. */
  .lgl__rail .toc{border:0;padding:0;margin:0}
  .lgl__rail .toc h2{margin-bottom:.85rem}
  .lgl__rail .toc ol{grid-template-columns:1fr;gap:0}
  .lgl__rail .toc li{border-top:1px solid var(--rule)}
  .lgl__rail .toc li:last-child{border-bottom:1px solid var(--rule)}
  .lgl__rail .toc a{padding:.5rem 0;color:var(--ink-muted)}
  .lgl__rail .toc a:hover{color:var(--ink)}
  .lgl__rail .toc a[aria-current="true"]{color:var(--ink)}
  .lgl__rail .toc a[aria-current="true"]::before{color:var(--signal)}
}

/* ============================================================================
   LANDING PAGES — /refer and /reviews
   Built on the shared prototype components (.sec .wrap .btn .field .rows .steps
   .q .news .ft). Only the genuinely new patterns live here so future pages can
   reuse them.
   ========================================================================== */

/* ---- Full-bleed opener: warm photo placeholder under a functional scrim -- */
.lp-hero{position:relative;overflow:hidden;isolation:isolate;color:var(--bone);
  background:var(--ink-deep);display:flex;align-items:flex-end;
  min-height:clamp(400px,58svh,600px);z-index:2}
.lp-hero__ph{position:absolute;inset:0;z-index:0;
  /* PLACEHOLDER: warm, slightly desaturated neighborhood photograph, 3:2 or
     21:9 crop, per docs/01 photography direction. Replace before launch. */
  background:radial-gradient(130% 130% at 72% 22%,#9a7d5c 0%,#5a4c39 42%,#2c2418 100%)}
.lp-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,oklch(15.5% .02 265 / .92) 0%,
    oklch(15.5% .02 265 / .82) 34%,oklch(15.5% .02 265 / .5) 62%,oklch(15.5% .02 265 / .2) 84%)}
@media(max-width:767px){.lp-hero__scrim{background:linear-gradient(to top,
  oklch(15.5% .02 265 / .94) 0%,oklch(15.5% .02 265 / .78) 48%,oklch(15.5% .02 265 / .4) 100%)}}
.lp-hero__in{position:relative;z-index:2;width:100%;
  padding-block:clamp(2.5rem,2rem + 3vw,4rem);
  padding-top:calc(var(--header-h) + clamp(2.5rem,2rem + 3vw,4rem))}
.lp-hero__col{max-width:640px}
.lp-hero .eyebrow{color:var(--copper-lift);margin-bottom:1rem}
.lp-hero h1{font-size:var(--t-display-l);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:1.1rem}
.lp-hero p{font-size:var(--t-body-l);color:oklch(96.5% .012 82 / .86);max-width:52ch}

/* ---- The referral offer, stated once, amounts in the spec voice --------- */
.offer{border-top:1px solid var(--copper);border-bottom:1px solid var(--copper);
  padding-block:clamp(1.6rem,1.2rem + 2vw,2.6rem)}
.offer p{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.5rem,1.1rem + 2.2vw,2.5rem);line-height:1.15;max-width:22ch;margin:0}
.offer .amt{font-family:var(--font-spec);font-weight:700;color:var(--copper);letter-spacing:.01em;
  font-variation-settings:"wdth" 100}
.offer__cond{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.6rem;max-width:56ch}
.offer__cond li{display:flex;gap:.6rem;color:var(--ink-muted)}
.offer__cond .spec{color:var(--copper);flex-shrink:0;margin-top:.15rem}

/* ---- Three ways to refer: rule-separated rows, never a card grid -------- */
.ways{border-top:1px solid var(--rule)}
.way{display:grid;gap:clamp(1.1rem,.8rem + 2vw,2.25rem);
  padding-block:clamp(1.75rem,1.25rem + 2vw,2.75rem);border-bottom:1px solid var(--rule)}
@media(min-width:840px){.way{grid-template-columns:5fr 7fr;align-items:start}}
.way__lead .n{font-family:var(--font-spec);font-weight:700;font-size:2.3rem;color:var(--copper);
  line-height:1;display:block;margin-bottom:.6rem}
.way__lead h3{font-size:var(--t-h3);margin-bottom:.5rem}
.way__lead p{color:var(--ink-muted);max-width:40ch}
.way__do{min-width:0}

/* ---- Copy-your-link field ---------------------------------------------- */
.copylink{display:flex;gap:.5rem;flex-wrap:wrap}
.copylink input{flex:1 1 240px;min-width:0;min-height:52px;padding:.75rem .9rem;font:inherit;
  font-family:var(--font-spec);letter-spacing:.02em;font-size:.9375rem;color:var(--ink);
  background:var(--bone-lift);border:1px solid var(--rule);border-radius:var(--radius)}
.copylink .btn{min-height:52px;padding-inline:1.25rem}
.copymsg{margin-top:.6rem;min-height:1.2em;color:var(--copper);font-family:var(--font-spec);
  font-size:var(--t-spec);letter-spacing:.1em;text-transform:uppercase}

/* ---- Referral status list ---------------------------------------------- */
.status{border-top:1px solid var(--rule)}
.status__row{display:grid;grid-template-columns:1fr auto;gap:.75rem 1rem;align-items:center;
  padding-block:1rem;border-bottom:1px solid var(--rule)}
.status__who b{font-family:var(--font-display);font-weight:600;display:block}
.status__who span{color:var(--ink-muted);font-size:.875rem}
.stage{font-family:var(--font-spec);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;padding:.35rem .6rem;border-radius:var(--radius);border:1px solid var(--rule);
  background:var(--bone-lift);color:var(--ink-muted);white-space:nowrap}
.stage--booked{color:var(--copper);border-color:color-mix(in oklch,var(--copper) 40%,transparent)}
.stage--completed{color:var(--valley);border-color:color-mix(in oklch,var(--valley) 45%,transparent)}
.stage--paid{color:var(--signal);border-color:color-mix(in oklch,var(--signal) 40%,transparent);
  background:color-mix(in oklch,var(--signal) 8%,var(--bone-lift))}
.status__legend{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-bottom:1.25rem}
.status__legend span{font-family:var(--font-spec);font-size:var(--t-spec);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted)}
.status__note{color:var(--ink-muted);margin-top:1.1rem;font-size:.9375rem}

/* ---- Reviews: split intent selector, two equal-weight targets ---------- */
.pick{display:grid;gap:1rem}
@media(min-width:640px){.pick{grid-template-columns:1fr 1fr}}
.pick a{display:flex;flex-direction:column;gap:.4rem;justify-content:flex-end;min-height:130px;
  padding:clamp(1.4rem,1.1rem + 1.5vw,2rem);text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--bone-lift);
  transition:border-color var(--d-state) var(--ease-enter),background-color var(--d-state) var(--ease-enter)}
.pick a:hover{border-color:var(--copper);background:var(--bone)}
.pick a .spec{color:var(--copper)}
.pick a b{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3)}
.pick a .sub{color:var(--ink-muted)}

/* ---- "How did it go?" two equal buttons. Both paths stay equal-weight. -- */
.howd{display:grid;gap:1rem;margin-bottom:.5rem}
@media(min-width:640px){.howd{grid-template-columns:1fr 1fr}}
.howd a{display:flex;flex-direction:column;gap:.35rem;min-height:94px;justify-content:center;
  padding:clamp(1.1rem,.9rem + 1vw,1.6rem);text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--bone-lift);
  transition:border-color var(--d-state) var(--ease-enter)}
.howd a:hover{border-color:var(--copper)}
.howd a b{font-family:var(--font-display);font-weight:600;font-size:1.15rem}
.howd a span{color:var(--ink-muted);font-size:.9375rem}

/* Positive and negative paths share one class so they cannot drift in weight. */
.path{padding-top:clamp(1.5rem,1.25rem + 1.5vw,2.25rem);border-top:1px solid var(--rule);
  margin-top:clamp(1.75rem,1.4rem + 1.5vw,2.5rem)}
.path > h3{font-size:var(--t-h3);margin-bottom:.5rem;scroll-margin-top:calc(var(--header-h) + 1rem)}
.path__hint{color:var(--ink-muted);margin-bottom:1.25rem;max-width:58ch}

/* ---- Platform buttons: text, not fake logo images ---------------------- */
.platforms{display:flex;gap:.6rem;flex-wrap:wrap}
.platforms a{display:inline-flex;align-items:center;gap:.5rem;min-height:52px;padding:0 1.2rem;
  text-decoration:none;font-family:var(--font-display);font-weight:600;color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--bone-lift);
  transition:border-color var(--d-state) var(--ease-enter),color var(--d-state) var(--ease-enter)}
.platforms a:hover{border-color:var(--copper);color:var(--copper)}
.platforms a .spec{color:var(--ink-muted)}

/* ---- Reviews aggregate, filters, and list ------------------------------ */
.rev-stat{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-bottom:.6rem}
.rev-stat__score{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2.5rem,1.8rem + 3vw,4rem)}
.rev-stat__meta{display:grid;gap:.3rem}
.rev-stat__count{color:var(--ink-muted)}
.rating{display:inline-flex;gap:2px;color:var(--copper);vertical-align:middle}
.rating svg{width:18px;height:18px;display:block}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.filters label{position:absolute;left:-9999px}
.filters select{min-height:48px;padding:.5rem 2.2rem .5rem .8rem;font:inherit;font-size:.9375rem;
  color:var(--ink);background-color:var(--bone-lift);border:1px solid var(--rule);border-radius:var(--radius);
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6069' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center}
.filters select:focus{border-color:var(--copper);outline-offset:1px}
.reviews-list{border-top:1px solid var(--rule);margin-top:1.75rem}
.review{padding-block:clamp(1.5rem,1.2rem + 1.5vw,2.25rem);border-bottom:1px solid var(--rule)}
.review__top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:.85rem}
.review__src{margin-left:auto;font-family:var(--font-spec);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted)}
.review blockquote{margin:0 0 .9rem;max-width:64ch;font-size:var(--t-body-l);line-height:1.55}
.review__who{display:flex;flex-wrap:wrap;gap:.35rem 1rem;align-items:baseline;color:var(--ink-muted);font-size:.875rem}
.review__who b{color:var(--ink);font-family:var(--font-display);font-weight:600}
.review__who .spec{color:var(--copper)}
.owner-reply{margin-top:1.1rem;padding:clamp(1rem,.85rem + .6vw,1.35rem);
  background:var(--bone-deep);border:1px solid var(--rule);border-radius:var(--radius)}
.owner-reply .spec{display:flex;align-items:center;gap:.5rem;color:var(--copper);margin-bottom:.5rem}
.owner-reply p{color:var(--ink-muted);max-width:60ch;margin:0}

/* Sections — hairline dividers between subsections. */
.lgl-sec{padding-block:clamp(1.9rem,1.4rem + 2vw,2.9rem);border-top:1px solid var(--rule)}
.lgl-sec:first-of-type{border-top:0;padding-top:0}
.lgl-sec > h2{font-size:var(--t-h3);margin-bottom:1.1rem;scroll-margin-top:calc(var(--header-h) + 1rem);
  display:flex;gap:.9rem;align-items:baseline}
.lgl-sec > h2 .n{font-family:var(--font-spec);font-size:.78rem;letter-spacing:.06em;color:var(--copper);
  font-weight:600;flex-shrink:0;padding-top:.2rem}
.lgl-sec h3{font-family:var(--font-display);font-weight:600;font-size:1.08rem;margin:1.7rem 0 .55rem}
.lgl-sec p{color:var(--ink);max-width:var(--measure-long);margin-bottom:1rem;line-height:1.72}
.lgl-sec p.lead{font-size:var(--t-body-l);color:var(--ink-muted)}
.lgl-sec p.muted{color:var(--ink-muted)}
.lgl-sec ul,.lgl-sec ol{margin:0 0 1.15rem;padding-left:1.3rem;max-width:var(--measure-long);
  display:grid;gap:.55rem}
.lgl-sec li{line-height:1.6}
.lgl-sec li::marker{color:var(--copper)}
.lgl-sec strong{font-weight:600}
.lgl-sec a.tlink{color:var(--ink);border-bottom:1px solid var(--copper);text-decoration:none;
  padding-bottom:1px;transition:border-color var(--d-state) var(--ease-enter),color var(--d-state)}
.lgl-sec a.tlink:hover{border-bottom-width:2px;color:var(--copper);padding-bottom:0}
.lgl-sec .spec{color:var(--copper)}

/* Definition rows for data categories and CCPA rights. Full hairlines only. */
.deflist{border-top:1px solid var(--rule);margin:1.25rem 0 1.4rem;max-width:var(--measure-long)}
.deflist > div{padding-block:1rem;border-bottom:1px solid var(--rule)}
@media(min-width:620px){.deflist > div{display:grid;grid-template-columns:190px 1fr;gap:.35rem 1.75rem;align-items:baseline}}
.deflist dt{font-family:var(--font-display);font-weight:600;font-size:.98rem}
.deflist dd{margin:0;color:var(--ink-muted)}

/* Emphasis block — full hairline border, no one-sided colored edge. */
.note{border:1px solid var(--rule);background:var(--bone-lift);border-radius:var(--radius);
  padding:clamp(1.15rem,.9rem + 1vw,1.6rem);margin:1.6rem 0;max-width:var(--measure-long)}
.note .spec{display:block;color:var(--copper);margin-bottom:.55rem}
.note p{margin-bottom:.65rem}
.note p:last-child{margin-bottom:0}

.updated-foot{border-top:1px solid var(--rule);margin-top:clamp(2rem,1.5rem + 2vw,3rem);
  padding-top:1.4rem;color:var(--ink-muted);font-size:.9375rem;display:flex;flex-wrap:wrap;
  gap:.6rem 1.5rem;align-items:baseline;max-width:var(--measure-long)}
.updated-foot .spec{color:var(--copper)}

/* ---- Sitemap page ------------------------------------------------------- */
.smap__legend{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;align-items:center;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:1rem;
  margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)}
.smap__key{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--ink-muted)}
.smap__key i{width:22px;height:2px;display:block}
.smap__key .k-live{background:var(--copper)}
.smap__key .k-plan{background:var(--rule)}
.smap__grp{padding-block:clamp(1.6rem,1.25rem + 1.5vw,2.4rem);border-top:1px solid var(--rule)}
.smap__grp:first-of-type{border-top:0;padding-top:0}
.smap__grp > h2{font-size:var(--t-h3);margin-bottom:.35rem}
.smap__grp > h2 a{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--copper);padding-bottom:1px}
.smap__grp > h2 a:hover{color:var(--copper)}
.smap__note{color:var(--ink-muted);margin-bottom:1.1rem;max-width:var(--measure-long)}
.smap ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.smap li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;
  padding:.62rem 0;border-bottom:1px solid var(--rule)}
.smap .nm{font-family:var(--font-display);font-weight:600;font-size:1rem}
.smap a.live{text-decoration:none;color:var(--ink);transition:color var(--d-state) var(--ease-enter)}
.smap a.live .nm{border-bottom:1px solid var(--copper);padding-bottom:1px}
.smap a.live:hover{color:var(--copper)}
.smap span.planned .nm{color:var(--ink-muted);font-weight:500}
.smap .pth{font-family:var(--font-spec);font-size:.72rem;letter-spacing:.05em;color:var(--ink-muted)}
.smap .tag{margin-left:auto;font-family:var(--font-spec);font-size:.62rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-muted);flex-shrink:0}
.smap .tag.tag-live{color:var(--copper)}
.smap .lvl-2{padding-left:1.25rem}
.smap .lvl-3{padding-left:2.5rem}
@media(max-width:520px){.smap .lvl-2{padding-left:.75rem}.smap .lvl-3{padding-left:1.5rem}}

/* ============================================================================
   CONTENT PAGES — /about · /services · /community
   Built on the shared prototype components (.sec .wrap .feat .rows .row .btn
   .news .ft .comm). Only genuinely new patterns live here so future pages can
   reuse them. Rule-separated rows, never card grids, for services + credentials.
   ========================================================================== */

/* ---- Full-bleed page opener carrying a real photograph ------------------ */
.pg-hero{position:relative;overflow:hidden;isolation:isolate;color:var(--bone);
  background:var(--ink-deep);display:flex;align-items:flex-end;
  min-height:clamp(440px,66svh,700px);z-index:2}
.pg-hero__media{position:absolute;inset:0;z-index:0}
.pg-hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  filter:saturate(.85) contrast(1.02)}
.pg-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,oklch(15.5% .02 265 / .92) 0%,
    oklch(15.5% .02 265 / .82) 34%,oklch(15.5% .02 265 / .5) 62%,oklch(15.5% .02 265 / .2) 84%)}
@media(max-width:767px){.pg-hero__scrim{background:linear-gradient(to top,
  oklch(15.5% .02 265 / .94) 0%,oklch(15.5% .02 265 / .78) 48%,oklch(15.5% .02 265 / .4) 100%)}}
.pg-hero__in{position:relative;z-index:2;width:100%;
  padding-block:clamp(2.5rem,2rem + 3vw,4rem);
  padding-top:calc(var(--header-h) + clamp(2.5rem,2rem + 3vw,4rem))}
.pg-hero__col{max-width:640px}
.pg-hero .eyebrow{color:var(--copper-lift);margin-bottom:1rem}
.pg-hero h1{font-size:var(--t-display-l);font-weight:700;letter-spacing:-.03em;
  line-height:1.02;margin-bottom:1.1rem;margin-left:-.02em}
.pg-hero__lead{font-size:var(--t-body-l);color:oklch(96.5% .012 82 / .86);max-width:54ch}

/* ---- Opening prose block (bone ground) ---------------------------------- */
.prose{max-width:var(--measure-long)}
.prose p{color:var(--ink);font-size:var(--t-body-l);line-height:1.72;margin-bottom:1.15rem}
.prose p:last-child{margin-bottom:0}

/* ---- Crew portraits. A portrait grid, not a service/credentials card grid. */
.crew{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem);margin-top:.5rem}
@media(min-width:640px){.crew{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.crew{grid-template-columns:repeat(4,1fr)}}
.crew__fig{margin:0}
.crew__ph{aspect-ratio:4/5;border-radius:var(--radius);border:1px solid var(--rule);
  overflow:hidden;display:grid;place-items:center;margin-bottom:1rem;
  /* PLACEHOLDER crew portrait, warm + desaturated per docs/01 §1.6. Replace with real. */
  background:radial-gradient(120% 120% at 50% 22%,#9a7d5c 0%,#6a5942 48%,#3a3122 100%)}
.crew__ph span{font-family:var(--font-spec);font-weight:700;font-size:2rem;
  color:oklch(96.5% .012 82 / .5)}
.crew__fig h3{font-size:1.15rem;margin-bottom:.15rem}
.crew__role{color:var(--copper);font-family:var(--font-spec);font-size:var(--t-spec);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:.4rem;display:block}
.crew__meta{color:var(--ink-muted);font-size:.9375rem}

/* ---- Credentials. Rule-separated rows in the spec voice. No badge grid. -- */
.creds{border-top:1px solid var(--rule);margin-top:.5rem;max-width:var(--measure-long)}
.creds > div{padding-block:1rem;border-bottom:1px solid var(--rule)}
@media(min-width:620px){.creds > div{display:grid;grid-template-columns:190px 1fr;
  gap:.35rem 1.75rem;align-items:baseline}}
.creds dt{font-family:var(--font-spec);font-size:var(--t-spec);letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--copper)}
.creds dd{margin:0;color:var(--ink)}

/* ---- Compact service-area strip ---------------------------------------- */
.areastrip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-block:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:baseline}
.areastrip .spec{color:var(--ink-muted);width:100%;margin-bottom:.35rem}
.areastrip a{font-family:var(--font-spec);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  transition:color var(--d-state) var(--ease-enter)}
.areastrip a:hover{color:var(--copper)}

/* ---- Sub-items noted under a service row (Sewer Services hub) ------------ */
.row__sub{list-style:none;padding:0;margin:.2rem 0 .9rem;display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.row__sub li{font-family:var(--font-spec);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-muted)}
.row__sub li::before{content:"·";color:var(--copper);margin-right:.5rem}
.row__sub li:first-child::before{content:none}

/* ---- "Not sure which one?" help block ---------------------------------- */
.helpcta{border:1px solid var(--rule);background:var(--bone-lift);border-radius:var(--radius);
  padding:clamp(1.5rem,1.2rem + 1.8vw,2.5rem);display:grid;gap:1.5rem;align-items:center}
@media(min-width:820px){.helpcta{grid-template-columns:1.5fr 1fr}}
.helpcta h2{font-size:var(--t-h3);margin-bottom:.6rem}
.helpcta p{color:var(--ink-muted);max-width:54ch}
.helpcta__act{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.helpcta__tel{font-family:var(--font-spec);font-weight:700;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2rem);letter-spacing:-.01em;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;padding-block:8px}
.helpcta__tel:hover{color:var(--copper)}
.helpcta__note{color:var(--ink-muted);font-size:.875rem}

/* ---- Community commitment image placeholder ---------------------------- */
.commit-ph{
  /* PLACEHOLDER community photograph, warm + desaturated per docs/01 §1.6. No flag,
     eagle, or patriotic cliche imagery, per brand rule. Replace with real. */
  background:radial-gradient(120% 120% at 68% 26%,#9a7d5c 0%,#5f5038 46%,#2c2418 100%);
  border:1px solid var(--rule)}

/* ---- Closing call band -------------------------------------------------- */
.closing{max-width:62ch}
.closing h2{font-size:var(--t-h2);margin-bottom:1rem}
.closing p{color:var(--ink-muted);font-size:var(--t-body-l);margin-bottom:1.4rem;max-width:56ch}
.closing__act{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ==========================================================================
   Blog index
   ========================================================================== */
.catfilter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)}
.catfilter button{position:relative;min-height:44px;padding:.55rem 1rem;cursor:pointer;
  border:1px solid var(--rule);background:var(--bone-lift);border-radius:var(--radius);
  font-family:var(--font-spec);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);transition:border-color var(--d-state) var(--ease-enter),
  color var(--d-state) var(--ease-enter),background var(--d-state) var(--ease-enter)}
.catfilter button:hover{border-color:var(--copper);color:var(--ink)}
.catfilter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}

.post-f--lg .post-f__fig{aspect-ratio:16/9}
.post-f--lg h3{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.25rem);margin:.7rem 0 .6rem}
.post-f--lg p{color:var(--ink-muted);max-width:64ch;font-size:var(--t-body-l)}

.postgrid{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.25rem);margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
.postgrid[hidden]{display:none}
@media(min-width:640px){.postgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.postgrid{grid-template-columns:1fr 1fr 1fr}}
.postcard{border:1px solid var(--rule);border-radius:var(--radius);background:var(--bone-lift);
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:border-color var(--d-state) var(--ease-enter)}
@media(hover:hover) and (pointer:fine){
  .postcard:hover{border-color:var(--copper)}
  .postcard:hover h3{color:var(--copper)}
}
.postcard__fig{aspect-ratio:3/2;overflow:hidden}
.postcard__fig img{width:100%;height:100%;object-fit:cover;display:block}
.postcard__body{padding:clamp(1.1rem,.95rem + .6vw,1.5rem);display:flex;flex-direction:column;gap:.5rem;flex:1}
.postcard h3{font-size:1.0625rem;line-height:1.3;transition:color var(--d-state) var(--ease-enter)}
.postcard p{color:var(--ink-muted);font-size:.9375rem;line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.postcard__meta{margin-top:auto;padding-top:.35rem;color:var(--ink-muted)}

.pager{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:clamp(2rem,1.5rem + 2vw,3rem);
  padding-top:clamp(1.5rem,1.2rem + 1vw,2rem);border-top:1px solid var(--rule)}
.pager button{min-width:44px;min-height:44px;padding:.5rem .8rem;cursor:pointer;
  border:1px solid var(--rule);background:var(--bone-lift);border-radius:var(--radius);
  font-family:var(--font-spec);font-size:.8125rem;color:var(--ink);
  transition:border-color var(--d-state) var(--ease-enter)}
.pager button:hover{border-color:var(--copper)}
.pager button[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone);cursor:default}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager button:disabled:hover{border-color:var(--rule)}
.emptycat{padding-block:3rem;color:var(--ink-muted);text-align:left}

/* ==========================================================================
   Blog article
   ========================================================================== */
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:1.5rem;
  font-family:var(--font-spec);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.crumbs a{color:oklch(96.5% .012 82 / .68);text-decoration:none}
.crumbs a:hover{color:var(--copper-lift)}
.crumbs span{color:oklch(96.5% .012 82 / .4)}
.crumbs b{color:var(--copper-lift);font-weight:600}

.artmeta{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-bottom:1.1rem}
.artmeta .post-cat{margin:0;color:var(--copper-lift)}

.byline{display:flex;align-items:center;gap:.85rem;margin-top:1.75rem;padding-top:1.5rem;
  border-top:1px solid var(--rule-ink)}
.byline__ava{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:oklch(96.5% .012 82 / .1);border:1px solid var(--rule-ink);
  font-family:var(--font-spec);font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--copper-lift)}
.byline__id{display:flex;flex-direction:column;gap:.15rem;font-size:.875rem}
.byline__id b{font-family:var(--font-display);font-weight:600;color:var(--bone)}
.byline__meta{color:oklch(96.5% .012 82 / .68);display:flex;gap:.4em;flex-wrap:wrap}
.byline__meta span+span::before{content:"\00B7";margin-right:.4em}

.article__lead{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bone-deep)}
@media(min-width:768px){.article__lead{aspect-ratio:21/9}}
.article__lead img{width:100%;height:100%;object-fit:cover;display:block}

.article__cols{display:grid;gap:clamp(2rem,1.5rem + 2vw,3rem)}
@media(min-width:1024px){
  .article__cols{grid-template-columns:minmax(0,var(--measure-long)) minmax(240px,300px);align-items:start}
  .article__body{grid-column:1;grid-row:1}
  .article__rail{grid-column:2;grid-row:1;position:sticky;
    top:calc(var(--header-h) + 1.5rem);max-height:calc(100svh - var(--header-h) - 2.5rem);overflow-y:auto}
  .related{grid-column:1/-1}
}
.article__body{min-width:0}
/* Neutralize the standalone-page sticky/overflow rules on the nested .lgl__rail
   so it doesn't double up with the outer .article__rail's own sticky container. */
.article__rail .lgl__rail{position:static;max-height:none;overflow:visible}

.railcta{border:1px solid var(--rule);background:var(--bone-lift);border-radius:var(--radius);
  padding:clamp(1.1rem,1rem + .5vw,1.4rem);margin-bottom:1.75rem}
.railcta .spec{color:var(--copper);display:block;margin-bottom:.6rem}
.railcta p{color:var(--ink-muted);font-size:.9375rem;margin-bottom:1rem}
.railcta .btn{width:100%;justify-content:center;margin-bottom:.6rem}
.railcta__tel{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  min-height:48px;border:1px solid var(--rule);border-radius:var(--radius);
  font-family:var(--font-spec);font-weight:600;color:var(--ink);text-decoration:none;
  transition:border-color var(--d-state) var(--ease-enter),color var(--d-state) var(--ease-enter)}
.railcta__tel:hover{border-color:var(--copper);color:var(--copper)}
.railcta__tel svg{flex-shrink:0}

.artcta{border:1px solid var(--rule);background:var(--bone-lift);border-radius:var(--radius);
  padding:clamp(1.5rem,1.2rem + 1.5vw,2rem);margin:clamp(2rem,1.5rem + 1.5vw,2.75rem) 0;max-width:var(--measure-long)}
.artcta .spec{color:var(--copper);display:block;margin-bottom:.6rem}
.artcta h3{font-size:1.25rem;margin-bottom:.6rem}
.artcta p{color:var(--ink-muted);margin-bottom:1.2rem}

.related{border-top:1px solid var(--rule);padding-top:clamp(2rem,1.5rem + 2vw,3rem);
  margin-top:clamp(2.5rem,2rem + 2vw,3.5rem);max-width:calc(var(--measure-long) * 1.3)}
.related h2{font-size:var(--t-h3);margin-bottom:1.5rem}
.related__grid{display:grid;gap:1.5rem}
@media(min-width:768px){.related__grid{grid-template-columns:1fr 1fr 1fr}}

/* ---- 404 popular-pages link tiles ---------------------------------------- */
.pagecards{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media(min-width:640px){.pagecards{grid-template-columns:repeat(4,1fr)}}
.pagecard{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:1rem 1.1rem;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--bone-lift);text-decoration:none;color:var(--ink);font-weight:600;
  font-family:var(--font-display);
  transition:border-color var(--d-state) var(--ease-enter),color var(--d-state) var(--ease-enter)}
.pagecard svg{flex-shrink:0;transition:transform var(--d-state) var(--ease-enter)}
@media(hover:hover) and (pointer:fine){
  .pagecard:hover{border-color:var(--copper);color:var(--copper)}
  .pagecard:hover svg{transform:translateX(3px)}
}

/* ============================================================================
   NAV DROPDOWN — desktop "Service Areas" panel (header nav)
   ========================================================================== */
.navdrop{position:relative}
.navdrop__trigger{display:inline-flex;align-items:center;gap:.3rem;padding:0;
  background:none;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--font-display);font-weight:500;font-size:.95rem;color:inherit;
  opacity:.9;transition:opacity var(--d-state)}
.navdrop__trigger:hover{opacity:1}
.navdrop__trigger svg{transition:transform var(--d-state) var(--ease-enter)}
.navdrop__trigger[aria-expanded="true"] svg{transform:rotate(180deg)}

.navdrop__panel{position:absolute;top:calc(100% + 14px);left:50%;
  min-width:520px;max-width:min(560px,calc(100vw - 2 * var(--gutter)));
  background:var(--bone);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow-float);padding:1.35rem 1.5rem 1.15rem;
  z-index:calc(var(--z-header) + 10);
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px);
  transition:opacity var(--d-panel) var(--ease-enter),
             transform var(--d-panel) var(--ease-enter),
             visibility 0s linear var(--d-panel)}
.navdrop__panel.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  transition-delay:0s,0s,0s}

.navdrop__cities{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem 1.5rem}
.navdrop__cities a{text-decoration:none;color:var(--ink);font-size:.85rem;
  transition:color var(--d-state) var(--ease-enter)}
.navdrop__cities a:hover{color:var(--copper)}

/* ============================================================================
   TANKLESS SERVICE CLUSTER — pillar + installation + repair/maintenance
   /services/tankless-water-heaters and its two children. Built on the shared
   components (.pg-hero .sec .wrap .creds .quotes .ba .related). Only genuinely
   new patterns live here: the breadcrumb-on-ink, the hero dual CTA, the plain-
   language works diagram, the sizing helper, the cost drivers, the brand rows,
   the readiness checklist, the visit stepper, and the FAQ accordion.
   ========================================================================== */

/* ---- Breadcrumb on the ink hero ---------------------------------------- */
.pg-hero .crumbs{margin-bottom:1.4rem}

/* ---- Hero dual CTA. Mobile leads with CALL, desktop leads with BOOK. ---- */
.pg-hero__cta{display:flex;flex-direction:column;gap:.75rem;margin-top:1.9rem}
.pg-hero__cta .btn{width:100%}
.pg-hero__cta .c-call{order:1;background:var(--signal);color:var(--bone);border-color:transparent}
.pg-hero__cta .c-call:hover{background:oklch(47% .19 27)}
.pg-hero__cta .c-book{order:2;border-color:oklch(96.5% .012 82 / .40);background:transparent;color:var(--bone)}
.pg-hero__cta .c-book:hover{border-color:var(--bone);background:oklch(96.5% .012 82 / .08)}
.pg-hero__note{margin-top:1.1rem;color:var(--copper-lift)}
@media(min-width:640px){
  .pg-hero__cta{flex-direction:row;flex-wrap:wrap;gap:.85rem}
  .pg-hero__cta .btn{width:auto}
  .pg-hero__cta .c-book{order:1;background:var(--signal);border-color:transparent;color:var(--bone)}
  .pg-hero__cta .c-book:hover{background:oklch(47% .19 27)}
  .pg-hero__cta .c-call{order:2;background:transparent;color:var(--bone);border-color:oklch(96.5% .012 82 / .40)}
  .pg-hero__cta .c-call:hover{border-color:var(--bone);background:oklch(96.5% .012 82 / .08)}
}

/* ---- How tankless works: prose beside a plain-language SVG diagram ------- */
.works{display:grid;gap:clamp(2rem,1.4rem + 3vw,3.5rem);align-items:center}
@media(min-width:920px){.works{grid-template-columns:5fr 7fr}}
.works__lead p{color:var(--ink-muted);font-size:var(--t-body-l);max-width:44ch;margin-bottom:1.15rem}
.works__lead p:last-child{margin-bottom:0}
.diagram{border:1px solid var(--rule);border-radius:var(--radius);background:var(--bone-lift);
  padding:clamp(1.25rem,1rem + 1.5vw,2rem)}
.diagram svg{width:100%;height:auto;display:block}
.diagram figcaption{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--rule);
  color:var(--ink-muted);font-size:.9375rem}
/* Diagram semantic strokes/fills, all from tokens. */
.dg-pipe{stroke:var(--copper);stroke-width:3;fill:none;stroke-linecap:round}
.dg-cold{stroke:var(--valley)}
.dg-hot{stroke:var(--signal)}
.dg-unit{fill:var(--bone);stroke:var(--ink);stroke-width:1.5}
.dg-coil{stroke:var(--copper);stroke-width:2;fill:none}
.dg-flame{fill:var(--signal)}
.dg-lbl{font-family:var(--font-spec);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  fill:var(--ink-muted)}
.dg-num{font-family:var(--font-spec);font-size:11px;font-weight:700;fill:var(--copper)}
/* One-directional draw of the flow arrows on reveal. */
.dg-flow{stroke-dasharray:6 7;animation:dgflow 2.4s linear infinite}
@keyframes dgflow{to{stroke-dashoffset:-26}}
@media(prefers-reduced-motion:reduce){.dg-flow{animation:none}}

/* ---- Sizing helper: four questions, immediate result, no email gate ----- */
.sizer{border:1px solid var(--rule);background:var(--bone-lift);border-radius:var(--radius);
  padding:clamp(1.4rem,1.1rem + 2vw,2.5rem)}
.sizer__grid{display:grid;gap:clamp(1.4rem,1.1rem + 1.5vw,2rem)}
@media(min-width:720px){.sizer__grid{grid-template-columns:1fr 1fr}}
.sizer__q > .spec{color:var(--copper);display:block;margin-bottom:.7rem}
.segset{display:flex;flex-wrap:wrap;gap:.5rem}
.segset button{position:relative;min-height:44px;padding:.55rem .9rem;cursor:pointer;
  border:1px solid var(--rule);background:var(--bone);border-radius:var(--radius);
  font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--ink);
  transition:border-color var(--d-state) var(--ease-enter),
             background-color var(--d-state) var(--ease-enter),color var(--d-state) var(--ease-enter)}
.segset button:hover{border-color:var(--copper)}
.segset button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.sizer__foot{margin-top:clamp(1.5rem,1.2rem + 1.5vw,2.1rem);padding-top:1.4rem;
  border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.sizer__hint{color:var(--ink-muted);font-size:.875rem;max-width:44ch}
/* The result reveals in place under the questions once all four are answered. */
.sizer__result{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--d-panel) var(--ease-enter)}
.sizer__result.open{grid-template-rows:1fr;margin-top:clamp(1.5rem,1.2rem + 1.5vw,2.1rem)}
.sizer__result > div{overflow:hidden}
.sizer__card{border:1px solid var(--copper);border-radius:var(--radius);
  padding:clamp(1.25rem,1rem + 1.5vw,1.85rem);background:var(--bone)}
.sizer__gpm{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  border-bottom:1px solid var(--rule);padding-bottom:1rem;margin-bottom:1rem}
.sizer__gpm b{font-family:var(--font-spec);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(2.25rem,1.6rem + 3vw,3.5rem);line-height:1;color:var(--ink)}
.sizer__gpm .unit{font-family:var(--font-spec);font-size:var(--t-spec);letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper)}
.sizer__verdict{color:var(--ink);max-width:56ch;margin-bottom:.75rem}
.sizer__verdict:last-child{margin-bottom:0}
.sizer__verdict .em{color:var(--copper);font-weight:600}
/* Optional "email me this" appears only after the answer. */
.sizer__email{margin-top:1.25rem;padding-top:1.15rem;border-top:1px solid var(--rule)}
.sizer__email .spec{color:var(--copper);display:block;margin-bottom:.6rem}
.sizer__mailrow{display:flex;flex-wrap:wrap;gap:.6rem}
.sizer__mailrow input{flex:1 1 220px;min-width:0;min-height:52px;padding:.75rem .9rem;font:inherit;
  background:var(--bone-lift);border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink)}
.sizer__mailrow input:focus{border-color:var(--copper)}
.sizer__mailrow .btn{min-height:52px;flex:0 0 auto}
.sizer__sent{color:var(--copper);font-family:var(--font-spec);font-size:var(--t-spec);
  letter-spacing:.1em;text-transform:uppercase;margin-top:.7rem}

/* ---- Cost band. Big published range, then rule-separated drivers. ------- */
.costhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem;
  border-bottom:1px solid var(--copper);padding-bottom:1.1rem;margin-bottom:1.6rem}
.costhead b{font-family:var(--font-spec);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(2rem,1.4rem + 3vw,3.25rem);line-height:1;color:var(--ink)}
.costhead .spec{color:var(--copper)}

/* ---- Brand rows. Named, with the reason. Reuses the .creds hairline row. - */
.brands{border-top:1px solid var(--rule);margin-top:.5rem;max-width:var(--measure-long)}
.brands > div{padding-block:1.15rem;border-bottom:1px solid var(--rule)}
@media(min-width:640px){.brands > div{display:grid;grid-template-columns:180px 1fr;
  gap:.4rem 1.75rem;align-items:baseline}}
.brands dt{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.brands dt .spec{display:block;color:var(--copper);font-weight:600;margin-top:.25rem}
.brands dd{margin:0;color:var(--ink-muted)}

/* ---- Readiness checklist (child pages). Copper checks, hairline rows. ---- */
.check{list-style:none;padding:0;margin:.5rem 0 0;border-top:1px solid var(--rule);
  max-width:var(--measure-long)}
.check li{display:flex;gap:.85rem;align-items:flex-start;padding-block:.9rem;
  border-bottom:1px solid var(--rule);color:var(--ink)}
.check li svg{flex-shrink:0;color:var(--copper);margin-top:2px}

/* ---- Visit stepper (child pages). Numbered, connecting hairline. --------- */
.visit{list-style:none;padding:0;margin:0;counter-reset:visit;
  border-top:1px solid var(--rule)}
.visit li{counter-increment:visit;position:relative;padding:1.25rem 0 1.25rem 3.4rem;
  border-bottom:1px solid var(--rule)}
.visit li::before{content:counter(visit,decimal-leading-zero);position:absolute;left:0;top:1.3rem;
  font-family:var(--font-spec);font-weight:700;font-size:1.05rem;color:var(--copper);letter-spacing:.02em}
.visit h3{font-size:1.1rem;margin-bottom:.35rem}
.visit p{color:var(--ink-muted);max-width:58ch}

/* ---- FAQ accordion. Marked up as FAQPage. Hairline rows, no cards. ------- */
.faq{border-top:1px solid var(--rule);max-width:var(--measure-long)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{display:flex;width:100%;gap:1rem;align-items:baseline;justify-content:space-between;
  padding:1.15rem 0;background:none;border:0;text-align:left;cursor:pointer;color:var(--ink);
  font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.35;
  transition:color var(--d-state) var(--ease-enter)}
.faq__q:hover{color:var(--copper)}
.faq__q svg{flex-shrink:0;color:var(--copper);margin-top:.2rem;
  transition:transform var(--d-panel) var(--ease-enter)}
.faq__q[aria-expanded="true"] svg{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--d-panel) var(--ease-enter)}
.faq__a.open{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{color:var(--ink-muted);max-width:64ch;padding-bottom:1.2rem;line-height:1.7}
.faq__a p:first-child{padding-top:.1rem}

/* ---- Service card grid (service-area pages). Bordered tiles, no shadow,
   matches .postcard/.q hover language rather than a generic SaaS card. ----- */
.svc-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:640px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc-card{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--bone-lift);
  text-decoration:none;color:inherit;transition:border-color var(--d-state) var(--ease-enter)}
@media(hover:hover) and (pointer:fine){
  .svc-card:hover{border-color:var(--copper)}
  .svc-card:hover h3{color:var(--copper)}
  .svc-card:hover .svc-card__ico{color:var(--copper)}
}
.svc-card__ico{color:var(--ink-muted);transition:color var(--d-state) var(--ease-enter)}
.svc-card h3{font-size:1.05rem;margin:0;transition:color var(--d-state) var(--ease-enter)}
.svc-card p{color:var(--ink-muted);font-size:.9375rem;line-height:1.55;margin:0;flex:1}
.svc-card .link-arrow{margin-top:.15rem}

/* ---- Cross-links into the two child pages (pillar) ---------------------- */
.subnav{display:grid;gap:1rem}
@media(min-width:680px){.subnav{grid-template-columns:1fr 1fr}}
.subnav a{display:flex;flex-direction:column;gap:.4rem;justify-content:flex-end;min-height:150px;
  padding:clamp(1.4rem,1.1rem + 1.5vw,2rem);text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--bone-lift);
  transition:border-color var(--d-state) var(--ease-enter),background-color var(--d-state) var(--ease-enter)}
.subnav a:hover{border-color:var(--copper);background:var(--bone)}
.subnav a .spec{color:var(--copper)}
.subnav a b{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);letter-spacing:-.01em}
.subnav a .sub{color:var(--ink-muted);font-size:.9375rem}
.subnav a .go{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);
  font-family:var(--font-display);font-weight:600;font-size:.9375rem;margin-top:.35rem}
.subnav a .go svg{transition:transform var(--d-state) var(--ease-enter)}
@media(hover:hover) and (pointer:fine){.subnav a:hover .go svg{transform:translateX(4px)}}

/* ---- Closing booking CTA band on the tankless pages -------------------- */
.svc-cta{background:var(--ink-deep);color:var(--bone);padding-block:var(--section-y);
  position:relative;z-index:2}
.svc-cta .stripes{margin-bottom:2.25rem}
.svc-cta h2{font-size:var(--t-display-l);font-weight:700;letter-spacing:-.03em;margin-bottom:1.1rem;
  max-width:18ch}
.svc-cta p{color:oklch(96.5% .012 82 / .84);font-size:var(--t-body-l);max-width:52ch;margin-bottom:2rem}
.svc-cta__act{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.svc-cta__tel{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--font-spec);font-weight:700;font-size:clamp(1.25rem,1rem + 1.4vw,1.75rem);
  letter-spacing:-.01em;color:var(--copper-lift);padding-block:8px}
.svc-cta__tel:hover{color:var(--bone)}