/* Rootwater Plumbing Co. · flagship concept site (Marlon Jimenez)
   Direction "Water, handled.": the page is water. Live GPU water in the hero, an editorial serif, copper as the one
   warm accent, dark water sections alternating with clean light ones. One signature moment per section. */
/* T3 (fix round 2): metric-matched fallbacks, so the swap to the web fonts doesn't move text. Size-adjust measured
   in Chrome on 2026-11-10 against Liberation Serif and Sans (metric-compatible with Times New Roman and Arial) on a
   line of the site's own words; ascent and descent from Instrument's metrics (serif 990/310, sans 970/250 per 1000). */
@font-face{font-family:"Instrument Serif Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif"),local("Tinos");size-adjust:83.50%;ascent-override:118.56%;descent-override:37.13%;line-gap-override:0%}
@font-face{font-family:"Instrument Serif Fallback";font-style:italic;src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Liberation Serif Italic"),local("Tinos Italic");size-adjust:87.16%;ascent-override:113.58%;descent-override:35.57%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback";font-weight:400;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:101.22%;ascent-override:95.83%;descent-override:24.70%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback";font-weight:500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:102.64%;ascent-override:94.51%;descent-override:24.36%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans Fallback";font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:97.11%;ascent-override:99.89%;descent-override:25.74%;line-gap-override:0%}
/* House port: Cabin (labels) gets a fallback matched the same way, measured 2026-11-11 (width 92.58% of Liberation Sans) */
@font-face{font-family:"Cabin Fallback";font-weight:500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:92.58%;ascent-override:105.31%;descent-override:27.00%;line-gap-override:0%}
:root{
  --ink:#04201c; --ink-2:#062a25; --ink-3:#0b3b34; --line-dark:rgba(244,239,230,.14);
  --paper:#ffffff; --paper-2:#f5f2ec; --ground:#f5f2ec; --card:#ffffff; --line:#d9d6cf; --fg:#10241f; --muted:#4a5c56;
  --cream:#f4efe6; --mist:#c9dbd4; --aqua:#7fe0c9;
  --copper:#d9773a; --copper-hi:#f2b07e; --copper-deep:#9a4a1c; --brand:#1f5e4b;
  --f-display:"Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
  --f-text:"Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", system-ui, sans-serif;
  --f-label:"Gill Sans", "Gill Sans MT", Cabin, "Cabin Fallback", sans-serif;
  --t-hero:clamp(3.6rem, 2rem + 9vw, 10.5rem);
  --t-1:clamp(2.4rem, 1.4rem + 4.2vw, 5.4rem);
  --t-2:clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem);
  --t-statement:clamp(1.9rem, 1.1rem + 3.4vw, 4.4rem);
  --t-body:clamp(1.05rem, 1rem + .25vw, 1.2rem);
  --gutter:clamp(20px, 4vw, 56px); --max:1240px; --section:clamp(5rem, 3.5rem + 7vw, 10rem);
  --r:0px; --r-piece:8px; --house:cubic-bezier(.19,1,.22,1); --focus:var(--fg); --ease:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--fg);font:400 var(--t-body)/1.6 var(--f-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
em{font-style:italic}
::selection{background:var(--mist);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:is(.hero,.statement,.numbers,.call,.section--dark,.foot,.bar,.dark){--focus:var(--cream)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-80px;z-index:100;background:var(--fg);color:#fff;padding:12px 16px;font:500 .95rem/1.2 var(--f-label);text-decoration:none}
.skip-link:focus{top:12px}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.kicker{font:500 .8125rem/1.3 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
:is(.hero,.statement,.numbers,.call,.section--dark,.dark) .kicker{color:var(--mist)}
.lede{color:var(--muted);font-size:clamp(1.1rem,1rem + .4vw,1.3rem);max-width:36em}
.ph{border-bottom:1.5px dashed currentColor;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.badge{display:inline-flex;align-items:center;font:500 .75rem/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;padding:.6em .8em;border:1px solid currentColor;white-space:nowrap}

/* ---------- buttons (House style, H1): an ink rectangle on light grounds, a white pill on the water and dark bands.
   Hover changes colour only, over .5 s on the House curve; nothing moves toward the pointer. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 1.6em;border-radius:2px;border:1px solid transparent;font:400 1rem/1 var(--f-display);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:background-color .5s var(--house),color .5s var(--house),border-color .5s var(--house)}
.btn--sm{min-height:46px;padding:0 1.2em}
.btn--lg{min-height:48px;font-size:1.06rem}
.btn--ink{background:var(--fg);color:#fff}
.btn--ink:hover{background:var(--brand)}
.btn--line{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn--line:hover{background:var(--fg);color:#fff}
.btn .arrow{font-family:var(--f-text)}
/* on artwork: the white pill */
:is(.hero,.call,.section--dark,.bar,.dark) .btn{border-radius:40px}
:is(.hero,.call,.section--dark,.bar,.dark) .btn--ink{background:#fff;color:var(--fg)}
:is(.hero,.call,.section--dark,.bar,.dark) .btn--ink:hover{background:var(--mist)}
:is(.hero,.call,.section--dark,.bar,.dark) .btn--line{color:var(--cream);border-color:rgba(244,239,230,.6)}
:is(.hero,.call,.section--dark,.bar,.dark) .btn--line:hover{background:rgba(244,239,230,.14);color:#fff}

/* ---------- the frame (H2): a black strip, then a quiet header with the name centred and text links at both sides */
.strip{margin:0;background:#000;text-align:center}
.strip a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 16px;color:#fff;font:500 .75rem/1.3 var(--f-label);letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.strip a:hover{text-decoration-thickness:2px}
@media (max-width:400px){.strip a{letter-spacing:.06em;padding-inline:10px}}
.top{--focus:var(--fg);position:fixed;inset:0 0 auto;z-index:50;color:var(--fg);background:#fff;box-shadow:0 1px 0 var(--line);transition:background-color .5s var(--house),color .5s var(--house),box-shadow .5s var(--house),transform .3s var(--ease)}
.top__in{max-width:1400px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px;padding:8px max(var(--gutter),env(safe-area-inset-right)) 8px max(var(--gutter),env(safe-area-inset-left))}
.is-scrolled .top{transform:translateY(calc(-1 * var(--strip, 44px)))}
/* home, with JavaScript: the header sits on the water until you scroll */
.js .is-home .top{--focus:var(--cream);color:var(--cream);background:linear-gradient(rgba(4,32,28,.55),rgba(4,32,28,0));box-shadow:none}
.js.is-scrolled .is-home .top,.js.menu-open .is-home .top{--focus:var(--fg);color:var(--fg);background:#fff;box-shadow:0 1px 0 var(--line)}
.js .is-home .top .strip a{color:#fff}
.js:not(.is-scrolled):not(.menu-open) .is-home .top .btn--ink{border-radius:40px;background:#fff;color:var(--fg)}
.js:not(.is-scrolled):not(.menu-open) .is-home .top .btn--ink:hover{background:var(--mist)}
.brand{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;gap:10px;text-decoration:none;min-height:46px;color:inherit}
.brand__mark{width:34px;height:34px;flex:none}
.brand__drop{fill:var(--copper)}
.brand__shine{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.7}
.brand__roots{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.brand__word{font:400 1.55rem/1 var(--f-display);letter-spacing:-.01em}
.brand__word small{display:block;margin-top:3px;font:500 .62rem/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
@media (max-width:370px){.brand__word small{letter-spacing:.12em}}
.top__nav{grid-column:1;grid-row:1;justify-self:start}
.top__list{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.top__list a,.top__phone,.top__call{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:46px;color:inherit;font:500 .95rem/1 var(--f-label);letter-spacing:.02em;text-decoration:none;text-underline-offset:.35em;text-decoration-thickness:1px}
.top__list a:hover,.top__phone:hover,.top__call:hover,.top__list a[aria-current="page"]{text-decoration-line:underline}
.top__phone{font-variant-numeric:tabular-nums}
.top__end{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:22px}
.top__call{display:none;text-decoration-line:underline}
.top__menu-cta{display:none}
.top__toggle{grid-column:1;grid-row:1;justify-self:start;display:none;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:0;background:none;color:inherit;cursor:pointer}
.top__toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.top__toggle .i-close,.menu-open .top__toggle .i-open{display:none}
.menu-open .top__toggle .i-close{display:inline}
@media (max-width:980px){
  .top__phone{display:none}
  /* without JavaScript the links sit on a second row; with it they live in a full-screen gallery panel */
  .top__nav{grid-column:1/-1;grid-row:2;justify-self:center}.top__list{flex-wrap:wrap;justify-content:center;gap:0 20px}
  .js .top__toggle{display:inline-grid}
  .js .top__nav{position:fixed;inset:0;z-index:-1;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--menu-top,76px) + 18px) max(var(--gutter),env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
    background:var(--ground);color:var(--fg);opacity:0;visibility:hidden;transition:opacity .5s var(--house),visibility 0s linear .5s}
  .js.menu-open .top__nav{opacity:1;visibility:visible;transition-delay:0s}
  .js .top__nav{justify-self:stretch;width:auto}
  .menu-open .top{transform:none}
  .js .top__list{flex-direction:column;gap:0}
  .js .top__list a{display:flex;justify-content:flex-start;min-height:68px;border-bottom:1px solid var(--line);font:400 clamp(2rem,1.4rem + 3vw,2.8rem)/1 var(--f-display);letter-spacing:-.015em}
  .js .top__menu-cta{display:grid;gap:14px;margin-top:32px;color:var(--muted)}
  .js .top__menu-cta .btn{width:100%}
  .menu-open,.menu-open body{overflow:hidden}
}
@media (max-width:560px){.top .top__cta{display:none}.top__call{display:inline-flex}.brand__word{font-size:1.4rem}.brand__mark{width:30px;height:30px}}

/* ---------- 1. hero: the water */
.hero{position:relative;isolation:isolate;min-height:max(680px,100svh);display:grid;grid-template-rows:1fr auto;color:var(--cream);background:var(--ink);overflow:hidden}
.hero__water{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero__paint{position:absolute;inset:0;z-index:-3;background:
  radial-gradient(60% 50% at 75% 30%,rgba(127,224,201,.18),transparent 70%),
  radial-gradient(50% 60% at 20% 90%,rgba(11,59,52,.9),transparent 70%),
  linear-gradient(160deg,#0b3b34,#04201c 60%)}
.no-water .hero__paint{z-index:-1}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:32%;z-index:-1;background:linear-gradient(to top,rgba(4,32,28,.85),transparent);pointer-events:none}
.hero__in{align-self:center;justify-self:center;display:grid;justify-items:center;text-align:center;max-width:1100px;width:100%;margin-inline:auto;padding:clamp(132px,18vh,190px) max(var(--gutter),env(safe-area-inset-right)) 40px max(var(--gutter),env(safe-area-inset-left))}
.hero__kicker{color:var(--mist)}
@media (max-width:400px){.hero__kicker{letter-spacing:.05em}}
.hero__title{margin-top:18px;font:400 var(--t-hero)/.9 var(--f-display);letter-spacing:-.035em;color:var(--cream)}
.hero__title em{padding-right:.06em}
/* phones: "handled." always gets its own line, so the swap from the fallback serif to Instrument Serif never moves the hero (CLS) */
.br-sm{display:none}
@media (max-width:560px){.br-sm{display:inline}}
.hero__lede{margin-top:26px;max-width:34em;color:var(--mist);font-size:clamp(1.08rem,1rem + .5vw,1.35rem);line-height:1.55}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
/* the promises: one hairline row, no boxes */
.proof{list-style:none;margin:0;padding:0 max(var(--gutter),env(safe-area-inset-right)) 28px max(var(--gutter),env(safe-area-inset-left));max-width:1400px;width:100%;margin-inline:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.proof li{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;padding:18px 16px;border-top:1px solid rgba(244,239,230,.22);font:500 .9rem/1.3 var(--f-label);letter-spacing:.02em;color:var(--cream)}
.proof li+li{border-left:1px solid rgba(244,239,230,.22)}
.proof svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--cream);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:980px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}.proof li:nth-child(3){border-left:0}}
/* F1: phones get a static 2-column hairline grid (no sideways scroller, nothing cut mid-word) */
@media (max-width:560px){.proof{grid-template-columns:1fr 1fr;padding-bottom:22px}.proof li{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;padding:14px 12px;font-size:.85rem}.proof li:nth-child(odd){border-left:0}.proof li:nth-child(even){border-left:1px solid rgba(244,239,230,.22)}}
.hero__cue{position:absolute;left:50%;bottom:0;width:44px;height:70px;transform:translateX(-50%);display:grid;place-items:end center;z-index:1}
.hero__cue span{width:1px;height:46px;background:linear-gradient(to bottom,transparent,rgba(244,239,230,.6));position:relative;overflow:hidden}
.hero__cue span::after{content:"";position:absolute;left:-1px;top:-12px;width:3px;height:12px;background:var(--cream);animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{to{transform:translateY(64px)}}
.hero__cue{display:none}
/* the drop that wakes the water (site.js turns its landing into a ripple) */
.hero__drop{position:absolute;left:66%;top:44%;width:16px;z-index:0;opacity:0;fill:var(--aqua);filter:drop-shadow(0 0 10px rgba(127,224,201,.8))}
.js .hero__drop{animation:fall .9s cubic-bezier(.55,0,1,.45) .35s both}
@keyframes fall{0%{opacity:0;transform:translateY(-46vh) scaleY(1.3)}12%{opacity:1}96%{opacity:1;transform:translateY(0) scaleY(1.25)}100%{opacity:0;transform:translateY(0) scale(1.6,.3)}}
@media (max-width:760px){.hero__drop{left:72%;top:30%}}
/* P8: the headline and lede are painted from the first frame (the LCP never waits); the ripple passes behind them as light,
   and only the actions and promises rise in after the drop lands */
.js .hero__actions,.js .hero__phone,.js .hero__jobs,.js .proof li{opacity:0;transform:translateY(14px)}
.js .hero.is-landed .hero__actions,.js .hero.is-landed .hero__phone,.js .hero.is-landed .hero__jobs,.js .hero.is-landed .proof li{opacity:1;transform:none;transition:opacity 1s var(--house),transform 1s var(--house)}
.js .hero.is-landed .hero__actions{transition-delay:.15s}
.js .hero.is-landed .hero__phone,.js .hero.is-landed .hero__jobs{transition-delay:.25s}
/* the number on the first screen (C2) and the guided first question (C5) */
.hero__phone{margin-top:16px;color:var(--cream);font-size:1.05rem}
.hero__phone a{display:inline-flex;align-items:center;min-height:44px;color:var(--cream);font-weight:600;font-variant-numeric:tabular-nums;text-underline-offset:.25em}
/* the guided first question: one row of underlined text links (each opens the price sheet first, with JavaScript) */
.hero__jobs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 18px;margin-top:4px;font:500 .95rem/1.2 var(--f-label);letter-spacing:.02em;color:var(--mist)}
.hero__jobs span{flex-basis:100%;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase}
.hero__jobs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--cream);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .5s var(--house)}
.hero__jobs a:hover{color:#fff;text-decoration-thickness:2px}
/* H6 phones: a short first screen (the middle sentence of the lede waits for wider screens; the services list it below) */
@media (max-width:560px){
  .hero__lede-more{display:none}
  .hero__lede{margin-top:18px}
  .hero__actions{margin-top:24px;width:100%}.hero__actions .btn{width:100%}
  .hero__actions .btn--line{display:none}   /* F2 */
  .hero__jobs{gap:0 14px}
}
.proof__sub{display:block;margin-top:2px;color:var(--mist);font-weight:400}
.proof li{text-align:left}
.proof .ph{white-space:nowrap}
.js .hero.is-landed .proof li{transition-delay:calc(.35s + var(--i, 0) * 70ms)}

/* ---------- 2. statement: words light up as you read */
.statement{background:var(--ink);color:var(--cream);padding:var(--section) max(var(--gutter),env(safe-area-inset-right)) var(--section) max(var(--gutter),env(safe-area-inset-left))}
.statement__text{max-width:20em;margin-inline:auto;font:400 var(--t-statement)/1.12 var(--f-display);letter-spacing:-.015em}
.js .statement__text .w2{opacity:clamp(.14, calc(var(--fill, 99) - var(--i)), 1);transition:opacity .2s linear}

/* ---------- 3. the story, pinned while you scroll */
.story{--s1:1;--s2:1;--s3:1;--s4:1;--drip:0;--pud:0;background:var(--paper)}
.js .story{--s1:0;--s2:0;--s3:0;--s4:0;--pud:0}
.story__track{position:relative}
.js .story__track{height:460vh}
.story__stage{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(24px,5vw,80px);max-width:var(--max);margin-inline:auto;padding:var(--section) max(var(--gutter),env(safe-area-inset-right)) var(--section) max(var(--gutter),env(safe-area-inset-left))}
.js .story__stage{position:sticky;top:0;height:100svh;padding-top:96px;padding-bottom:32px}
.story__title{margin-top:14px;font:400 var(--t-1)/.98 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.story__caps{list-style:none;margin:36px 0 0;padding:0;display:grid}
.cap{grid-area:1/1;max-width:30em}
.cap__n{font:500 .8125rem/1 var(--f-label);letter-spacing:.1em;color:var(--muted)}
.cap h3{margin-top:10px;font:400 clamp(1.7rem,1.3rem + 1.4vw,2.5rem)/1.05 var(--f-display);color:var(--ink)}
.cap p{margin-top:12px;color:var(--muted)}
.no-js .cap,.story__caps:not(.is-live) .cap{grid-area:auto}
.js .story__caps.is-live .cap{opacity:0;transform:translateY(-14px);transition:opacity .22s ease-out,transform .3s ease-out;pointer-events:none}
.js .story[data-step="0"] .cap[data-i="0"],.js .story[data-step="1"] .cap[data-i="1"],.js .story[data-step="2"] .cap[data-i="2"],.js .story[data-step="3"] .cap[data-i="3"]{opacity:1;transform:none;pointer-events:auto;transition:opacity .6s var(--ease) .22s,transform .8s var(--ease) .22s}
.js .story__caps.is-live .cap:not(:first-child){transform:translateY(22px)}
.js .story[data-step="1"] .cap[data-i="0"],.js .story[data-step="2"] .cap[data-i="0"],.js .story[data-step="2"] .cap[data-i="1"],.js .story[data-step="3"] .cap:not([data-i="3"]){transform:translateY(-14px)}
.story__bars{display:flex;gap:8px;margin-top:34px}
.story__bars i{height:1px;flex:1;background:var(--line);overflow:hidden;position:relative}
.story__bars i::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--b,1))}
.js .story__bars i:nth-child(1)::after{--b:var(--s1)}.js .story__bars i:nth-child(2)::after{--b:var(--s2)}
.js .story__bars i:nth-child(3)::after{--b:var(--s3)}.js .story__bars i:nth-child(4)::after{--b:var(--s4)}
.story__art{width:100%;max-height:78svh;overflow:visible}
.art__cab{fill:var(--card);stroke:var(--line);stroke-width:2}
/* inside the cabinet it's dark until the job is done: the flashlight finds the leak, then the lights come on */
.art__dark{fill:#0c2622;opacity:calc(1 - var(--s4))}
.art__basin{fill:var(--paper-2);stroke:#c9d4cf;stroke-width:2;opacity:calc(.35 + .65 * var(--s4))}
.art__shelf{stroke:#d6dfda;stroke-width:3}
.art__pipe{fill:none;stroke:url(#cu);stroke-width:22;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--s1))}
.art__pipe--shade{stroke:#7a3e1a;opacity:.25}
.art__pipe--hi{stroke:#ffe1c2;stroke-width:4;opacity:.75}
.art__supply{fill:none;stroke:#a7b6b0;stroke-width:9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--s1))}
.art__valve{fill:#8fa29b;opacity:var(--s1)}
.art__coupling{fill:var(--copper-deep);opacity:clamp(0, calc(var(--s1) * 3 - 1), 1)}
.art__flow{fill:none;stroke:var(--aqua);stroke-width:7;stroke-linecap:round;stroke-dasharray:10 18;opacity:var(--s4);animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-56}}
.art__drip{fill:#48b8a6;transform:translateY(calc(var(--drip) * 170px));opacity:calc(clamp(0, var(--s1) * 4 - 3, 1) * (1 - var(--s3)) * (1 - var(--drip) * .7))}
.art__puddle{transform-box:fill-box;transform-origin:center;transform:scale(var(--pud),calc(var(--pud) * .9 + .1));opacity:min(1, calc(var(--pud) * 2))}
.art__beam{transform-box:view-box;transform-origin:612px 640px;transform:rotate(calc((1 - var(--s1)) * -16deg));opacity:calc(var(--s1) * (1 - var(--s2)))}
.art__phone{transform:translateY(calc((1 - var(--s2)) * 46px + var(--s3) * 20px));opacity:calc(var(--s2) * (1 - var(--s3)))}
.art__phone > rect:first-child{fill:#0e2a24}
.art__phone-shot{fill:#1d3d36}
.art__phone-pipe{fill:none;stroke:var(--copper);stroke-width:5;stroke-linecap:round}
.art__phone-dot{fill:var(--aqua)}
.art__phone-line{fill:#2b4b43}
.art__phone-price{fill:var(--copper-hi);font:600 19px var(--f-text)}
.art__phone-btn{fill:var(--copper)}
.art__phone-btntext{fill:var(--ink);font:600 12px var(--f-text)}
.art__wrench{fill:none;stroke:#8fa29b;stroke-linecap:round;transform-box:view-box;transform-origin:380px 332px;transform:rotate(calc(-75deg + var(--s3) * 75deg));opacity:calc(clamp(0, var(--s3) * 3, 1) * (1 - var(--s4) * .45))}
.art__wrench path:first-child{stroke-width:10}.art__wrench path:nth-child(2){stroke-width:13}.art__wrench circle{fill:var(--card);stroke:none}
.art__seal{fill:none;stroke:var(--aqua);stroke-width:4;transform-box:fill-box;transform-origin:center;transform:scale(calc(.6 + var(--s4) * 1.5));opacity:calc(var(--s4) * (1 - var(--s4)) * 4)}
.art__done{transform-box:fill-box;transform-origin:center;transform:scale(calc(.5 + var(--s4) * .5));opacity:var(--s4)}
.art__done circle{fill:var(--brand)}.art__done path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .js .story__stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:8px;padding-top:84px}
  .story__art{order:-1;max-height:36svh;justify-self:center}
  .story__title{margin-top:8px;font-size:clamp(1.7rem,1.3rem + 2vw,2.4rem)}
  .story__caps{margin-top:14px!important}
  .story__caps{margin-top:6px}.story__bars{margin-top:18px}
  .js .story__track{height:420vh}
}
@media (max-width:900px) and (max-height:700px){.story__art{max-height:38svh}.cap p{font-size:.98rem}}

/* ---------- 4. services: bento of cards that tilt toward the pointer */
.services{padding:var(--section) 0;background:var(--paper)}
.head{max-width:44rem;display:grid;gap:16px;margin-bottom:clamp(36px,5vw,64px)}
.head h2,.area h2,.reviews h2{font:400 var(--t-1)/.98 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{position:relative;min-width:0;display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.4vw,34px);background:var(--card);border:1px solid var(--line);transition:background-color .5s var(--house),border-color .5s var(--house)}
.card:hover{border-color:var(--fg)}
.card--lg{--focus:var(--cream);grid-column:span 2;background:var(--ink);border-color:var(--ink);color:var(--cream)}
.card--lg:hover{border-color:var(--ink);background:var(--ink-2)}
.card.card--lg p,.card.card--lg .card__signs{color:var(--mist)}
.card--lg .card__signs{border-color:rgba(244,239,230,.18)}
.card--lg .card__icon{color:var(--cream)}
.card--wide{grid-column:1/-1}
@media (min-width:901px){
  .card--wide{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"icon title signs" "icon text signs" "icon facts link";column-gap:32px;row-gap:12px;align-items:start}
  .card--wide .card__icon{grid-area:icon}.card--wide h3{grid-area:title}.card--wide p:not(.card__signs){grid-area:text}.card--wide .card__facts{grid-area:facts}
  .card--wide .card__signs{grid-area:signs;margin-top:0;border-top:0;padding-top:0;border-left:1px solid var(--line);padding-left:28px}
  .card--wide .card__link{grid-area:link;padding-left:28px;align-self:end}
}
.card h3{font:400 clamp(1.6rem,1.2rem + 1vw,2.2rem)/1.05 var(--f-display)}
.card--lg h3{font-size:clamp(2rem,1.4rem + 1.8vw,3.1rem)}
.card p{color:var(--muted)}
.card__icon{width:52px;height:52px;color:var(--brand);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card__icon .ic-b{stroke:var(--brand);stroke-dasharray:80;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease)}
.card:hover .card__icon .ic-b{animation:redraw 1.1s var(--ease)}
@keyframes redraw{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
.card__signs{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:.96rem;line-height:1.5}
.card__signs b{display:block;margin-bottom:6px;font:500 .8125rem/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card--lg .card__signs b{color:var(--mist)}
.card--lg .card__icon .ic-b{stroke:var(--aqua)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:1fr}.card--lg{grid-column:auto}}

/* ---------- 5. numbers */
.numbers{background:var(--ink);color:var(--cream);padding:clamp(4rem,3rem + 4vw,7rem) 0}
.numbers__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.num{min-width:0;padding-top:18px;border-top:1px solid var(--line-dark)}
.num__v{font:400 clamp(4rem,3rem + 4vw,7.5rem)/.9 var(--f-display);color:var(--cream);font-variant-numeric:tabular-nums}
.num__u{margin-left:.35em;font:italic 400 clamp(1.4rem,1.1rem + 1vw,2rem)/1 var(--f-display);color:var(--cream)}
.num p{margin-top:12px;color:var(--mist);font-size:.98rem}
@media (max-width:900px){.numbers__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}}

/* ---------- 6. area */
.area{padding:var(--section) 0;background:var(--paper)}
.area__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.area .lede{margin-top:18px}
.chips{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:9px 14px;background:var(--card);border:1px solid var(--line);font:500 .9rem/1.2 var(--f-label);letter-spacing:.02em}
.map{margin:0;border-radius:var(--r-piece);overflow:hidden}
.map svg{width:100%;height:auto}
.map figcaption{padding:12px 18px;font-size:.85rem;color:var(--mist);background:var(--ink-2)}
.map__land{fill:#123f37;stroke:rgba(127,224,201,.35);stroke-width:1.5}
.map__swell path{fill:none;stroke:rgba(127,224,201,.18);stroke-width:1.5;stroke-linecap:round;animation:swell 6s ease-in-out infinite alternate}
.map__swell path:nth-child(2){animation-delay:-2s}.map__swell path:nth-child(3){animation-delay:-4s}
@keyframes swell{to{transform:translateX(18px)}}
.map__route{fill:none;stroke:var(--copper-hi);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 9}
.js .map__route{stroke-dasharray:6 9;clip-path:inset(0 0 100% 0);transition:clip-path 2.4s var(--ease-io) .2s}
.js .map.in .map__route{clip-path:inset(0 0 0 0)}
.map__towns circle{fill:var(--copper-hi)}
.map__towns .home circle:last-of-type{fill:var(--cream)}
.map__towns text{fill:var(--cream);font:500 15px var(--f-text)}
.map__towns .home text{font:400 22px var(--f-display);fill:var(--cream)}
.map__towns .pulse{fill:none;stroke:var(--cream);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{from{transform:scale(.6);opacity:.9}to{transform:scale(3.2);opacity:0}}
.js .map__towns g{opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(.6s + var(--d) * .28s)}
.js .map.in .map__towns g{opacity:1;transform:none}
.map__sea{fill:rgba(201,219,212,.55);font:600 13px var(--f-text);letter-spacing:.4em}
@media (max-width:900px){.area__grid{grid-template-columns:1fr}}

/* ---------- 7. reviews */
.reviews{padding:0 0 var(--section);background:var(--paper)}
.reviews__in{display:grid;gap:18px;justify-items:start}
.quote{margin:12px 0 0;padding:clamp(28px,4vw,52px);border-radius:var(--r-piece);border:1px dashed #9a978f;max-width:52rem;background:var(--ground)}
.quote p{font:italic 400 clamp(1.6rem,1.2rem + 1.4vw,2.6rem)/1.2 var(--f-display);color:var(--ink)}
.quote footer{margin-top:18px;color:var(--muted);font-weight:500}
.reviews__note{color:var(--muted);font-size:.95rem}

/* ---------- 8. call */
.call{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(80% 70% at 50% 110%,#0f4c43,var(--ink) 70%);color:var(--cream);padding:var(--section) 0;text-align:center}
.call__in{display:grid;justify-items:center;gap:20px}
.call__title{font:400 var(--t-1)/.95 var(--f-display);letter-spacing:-.02em}
.call__phone{display:inline-flex;align-items:center;min-height:64px;padding:0 .2em;color:var(--cream);text-decoration:none;font:400 clamp(2.6rem,2rem + 3vw,4.6rem)/1 var(--f-display);font-variant-numeric:tabular-nums;border-bottom:1px dashed rgba(244,239,230,.45);transition:border-color .5s var(--house)}
a.call__phone:hover{border-bottom-color:currentColor}
.top__menu-phone{color:inherit}
.call__meta{color:var(--mist)}
.call__note{color:var(--mist);font-size:.88rem;opacity:.85}
.call__rings{position:absolute;left:50%;top:58%;z-index:-1;width:0;height:0}
.call__rings i{position:absolute;left:-40vmax;top:-40vmax;width:80vmax;height:80vmax;border-radius:50%;border:1.5px solid rgba(127,224,201,.22);animation:ring 9s var(--ease) infinite;opacity:0}
.call__rings i:nth-child(2){animation-delay:3s}.call__rings i:nth-child(3){animation-delay:6s}
@keyframes ring{from{transform:scale(.08);opacity:0}15%{opacity:1}to{transform:scale(1);opacity:0}}

/* ---------- footer, phone bar */
.foot{background:#0b0b0b;color:#a3a3a3;font-size:.9rem}
.foot__in{display:grid;gap:12px;padding-block:44px 52px}
.foot__brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--cream);margin-bottom:6px}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--ink);border-top:1px solid var(--line-dark);transform:translateY(110%);transition:transform .5s var(--house)}
.bar .btn{width:100%}
.is-scrolled .bar{transform:none}
@media (min-width:761px){.bar{display:none}}
/* the phone bar's room lives inside the dark footer, so no pale strip shows under it (A6) */
@media (max-width:760px){.foot__in{padding-bottom:calc(52px + 76px + env(safe-area-inset-bottom))}}

/* ---------- shared by every page: card links, footer columns, the call band's quiet link */
.prose a,.link{color:var(--fg);text-decoration-thickness:1px;text-underline-offset:.2em}
.card__link{margin-top:auto;display:inline-flex;align-items:center;gap:.45em;min-height:44px;font:500 .95rem/1.2 var(--f-label);letter-spacing:.02em;color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.card--lg .card__link{color:var(--cream)}
.card__link::after{content:"";position:absolute;inset:0;z-index:1}
.card__link .arrow{transition:transform .35s var(--ease)}
.card:hover .card__link .arrow{transform:translateX(4px)}
.card:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.card__link:focus-visible{outline:none}
html{interpolate-size:allow-keywords}
.call__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.foot__grid{display:grid;gap:22px 48px;padding:14px 0 18px;border-block:1px solid #2a2a2a;margin-bottom:6px}
@media (min-width:760px){.foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}}
.foot__nap{font-style:normal;line-height:1.7;color:#d4d4d4}
.foot__nav ul{list-style:none;margin:0;padding:0}
.foot__nav a{display:inline-flex;align-items:center;min-height:48px;min-width:48px;color:#fff;font:400 1.35rem/1.1 var(--f-display);text-decoration:none}
.foot__nav a:hover{text-decoration:underline;text-underline-offset:.25em}
.call__quiet{display:inline-flex;align-items:center;gap:.4em;min-height:44px;color:var(--mist);font:500 .95rem/1.2 var(--f-label);text-decoration:underline;text-underline-offset:.25em}
.call__quiet:hover{color:var(--cream)}
.area__more,.head .link{margin-top:14px}
.link{display:inline-flex;align-items:center;gap:.35em;min-height:44px;font:500 .95rem/1.2 var(--f-label);letter-spacing:.02em}
.section--dark .link,.section--dark .sources a{color:var(--cream)}
.foot__nav{display:grid;gap:18px 32px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.foot__nav ul{display:grid;gap:0}
.foot__title{margin-bottom:4px;font:500 .8125rem/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:#a3a3a3}
.foot__ph{display:inline-flex;align-items:center;min-height:48px;border-bottom:0;color:#a3a3a3}

/* ---------- the price sheet (home, change 2): a bottom sheet on phones, a small panel on wider screens.
   Square corners and a hairline; it rises in .5 s on the House curve. */
.sheet{width:min(100% - 32px,520px);max-width:none;max-height:calc(100svh - 32px);margin:auto;padding:0;border:1px solid var(--line);border-radius:0;background:#fff;color:var(--fg);overflow:auto}
.sheet::backdrop{background:rgba(4,32,28,.6)}
.sheet[open]{animation:sheet-in .5s var(--house)}
@keyframes sheet-in{from{opacity:0;transform:translateY(24px)}}
.sheet__in{position:relative;display:grid;gap:14px;padding:clamp(24px,4vw,40px)}
.sheet__title{padding-right:44px;font:400 clamp(2rem,1.6rem + 1.6vw,2.8rem)/1 var(--f-display);letter-spacing:-.02em}
.sheet__price{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:14px 0;border-block:1px solid var(--line)}
.sheet__name{font:500 .95rem/1.3 var(--f-label);letter-spacing:.02em}
.sheet__value{font-weight:600}
.sheet__confirm{font:400 1.25rem/1.3 var(--f-display)}
.sheet__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.sheet__note{font-size:.88rem;color:var(--muted)}
.sheet__close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--fg);cursor:pointer}
.sheet__close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.sheet__close:hover{color:var(--brand)}
@media (max-width:560px){
  .sheet{width:100%;margin:auto 0 0;border-width:1px 0 0;max-height:85svh}
  .sheet__in{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .sheet__actions{grid-template-columns:1fr}
  .sheet__price{flex-direction:column;justify-content:flex-start}   /* F6 */
}

/* ---------- reveals */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- reduced motion: everything rests in its final state */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .hero__drop{display:none}
}