/* ==========================================================================
   TrueFlow Plumbing Co. — design system + site styles
   Single stylesheet, vanilla CSS. Mobile-first, then min-width breakpoints.
   ========================================================================== */

:root{
  /* Brand palette — "water + copper" residential trades identity */
  --tf-ink:        #03182C;
  --tf-ink-soft:   #526C80;
  --tf-water:      #05223B;
  --tf-water-2:    #08314F;
  --tf-copper:     #1FA9FF;
  --tf-copper-dark:#078CDD;
  --tf-copper-soft:#DDF3FF;
  --tf-brass:      #45BBFF;
  --tf-paper:      #F7FBFF;
  --tf-paper-2:    #EDF5FA;
  --tf-wash:       #E5F2F9;
  --tf-white:      #FFFFFF;
  --tf-line:       #D5E5F0;
  --tf-white-soft: rgba(255,255,255,0.92);

  /* Semantic */
  --bg:            var(--tf-paper);
  --bg-alt:        var(--tf-paper-2);
  --ink:           var(--tf-ink);
  --ink-soft:      var(--tf-ink-soft);
  --brand:         var(--tf-water);
  --brand-dark:    var(--tf-ink);
  --accent:        var(--tf-copper);
  --ring:          #3B7E93;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  /* Chamfered-plate corner language — cut top-left / bottom-right corners
     instead of rounding. This is the site's signature shape motif and the
     main thing that separates it from a soft, all-rounded-corner template. */
  --notch-sm: polygon(var(--radius-sm) 0, 100% 0, 100% calc(100% - var(--radius-sm)), calc(100% - var(--radius-sm)) 100%, 0 100%, 0 var(--radius-sm));
  --notch-md: polygon(var(--radius-md) 0, 100% 0, 100% calc(100% - var(--radius-md)), calc(100% - var(--radius-md)) 100%, 0 100%, 0 var(--radius-md));
  --notch-lg: polygon(var(--radius-lg) 0, 100% 0, 100% calc(100% - var(--radius-lg)), calc(100% - var(--radius-lg)) 100%, 0 100%, 0 var(--radius-lg));
  --notch-xl: polygon(var(--radius-xl) 0, 100% 0, 100% calc(100% - var(--radius-xl)), calc(100% - var(--radius-xl)) 100%, 0 100%, 0 var(--radius-xl));

  --shadow-sm: 0 1px 2px rgba(20,35,43,0.06), 0 1px 1px rgba(20,35,43,0.04);
  --shadow-md: 0 8px 24px rgba(20,35,43,0.09);
  --shadow-lg: 0 20px 48px rgba(20,35,43,0.14);

  /* filter-based equivalents — needed on any clip-path/notched element,
     since box-shadow is clipped away by clip-path but drop-shadow is not */
  --fshadow-sm: drop-shadow(0 1px 2px rgba(20,35,43,0.07));
  --fshadow-md: drop-shadow(0 10px 22px rgba(20,35,43,0.1));
  --fshadow-lg: drop-shadow(0 22px 44px rgba(20,35,43,0.16));

  /* Content widths — two tiers */
  --container: 1240px;
  --container-wide: 1600px;
  --gutter: clamp(20px, 5vw, 48px);

  /* Typography scale */
  --heading-xl: clamp(2.6rem, 4.4vw, 4.4rem);
  --heading-lg: clamp(1.8rem, 2.5vw, 2.6rem);
  --body-lg: clamp(1.12rem, 1.35vw, 1.42rem);
  --body-base: 1.0625rem;

  /* Section rhythm */
  --section-space: clamp(68px, 9vw, 128px);
  --card-padding: clamp(26px, 3vw, 38px);

  --font-head: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --header-h: 74px;

  color-scheme: light;
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                            */
/* ---------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--tf-brass); color:var(--tf-ink); }

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; letter-spacing:-0.01em; color:var(--tf-ink); }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-wide{ width:100%; max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter); }

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
  border-radius:6px;
}

.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--tf-ink); color:var(--tf-paper);
  padding:12px 18px; border-radius:0 0 10px 10px;
  z-index:200; transition:top .15s ease;
  font-weight:700;
}
.skip-link:focus{ top:0; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:16px 30px;
  clip-path:var(--notch-sm);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.01em;
  transition:transform .18s ease, filter .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
  line-height:1.2;
}
.btn-primary{
  background:var(--accent);
  color:var(--tf-white);
  filter:drop-shadow(0 8px 18px rgba(20,35,43,0.24));
}
.btn-primary:hover{ transform:translateY(-2px); filter:drop-shadow(0 14px 26px rgba(20,35,43,0.3)); background:var(--tf-copper-dark); }
.btn-primary:active{ transform:translateY(0); }

.btn-secondary{
  background:transparent;
  color:var(--tf-white);
  border:2px solid rgba(255,255,255,0.55);
}
.btn-secondary:hover{ background:rgba(255,255,255,0.12); border-color:var(--tf-white); }

.btn-outline{
  background:transparent;
  color:var(--tf-water);
  border:2px solid var(--tf-water);
}
.btn-outline:hover{ background:var(--tf-water); color:var(--tf-white); }

.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn-block{ width:100%; }
.btn-lg{ padding:20px 40px; font-size:1.08rem; }

.hero__ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }

/* ---------------------------------------------------------------------- */
/* Header / nav                                                            */
/* ---------------------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  backdrop-filter:none;
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-block:14px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-head); font-weight:700; font-size:1.28rem; color:var(--tf-white);
  line-height:1.05;
}
.brand__mark{ width:42px; height:42px; flex:none; }
.brand__name{ display:flex; flex-direction:column; }
.brand__name small{ font-family:var(--font-body); font-weight:600; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,0.82); margin-top:2px; }

.site-header .brand, .header-cta, .nav-toggle{ flex-shrink:0; }
.main-nav{ display:none; }
.main-nav > ul{ display:flex; align-items:center; gap:4px; }
.main-nav a.nav-link{
  display:flex; align-items:center; gap:4px; white-space:nowrap;
  padding:10px 14px; border-radius:10px; font-weight:600; font-size:.95rem; color:rgba(255,255,255,0.9);
  transition:background-color .15s ease, color .15s ease;
}
.main-nav a.nav-link:hover, .main-nav a.nav-link[aria-current="page"]{ background:rgba(255,255,255,0.14); color:var(--tf-white); }
.main-nav a.nav-link svg{ width:14px; height:14px; transition:transform .15s ease; }

/* Dropdown menu */
.nav-item-dropdown{ position:relative; }
.nav-item-dropdown > .nav-link::after{ content:"▼"; font-size:.6rem; margin-left:6px; }
.nav-item-dropdown .dropdown{
  display:none; position:absolute; top:100%; left:0; min-width:200px; background:var(--tf-water-2); border:1px solid rgba(255,255,255,.1); border-top:none; border-radius:0 0 10px 10px; z-index:1000; list-style:none; margin:0; padding:8px 0;
}
.nav-item-dropdown:hover .dropdown{ display:block; }
.nav-item-dropdown:focus-within .dropdown{ display:block; }
.main-nav .nav-item-dropdown .dropdown{ width:280px; }
.mobile-nav .nav-item-dropdown .dropdown{ display:flex; position:static; min-width:0; width:100%; border:0; border-radius:0; background:transparent; padding:0 0 12px; }
.mobile-nav .nav-item-dropdown .dropdown a{ min-height:44px; padding:12px 16px; }
.nav-item-dropdown .dropdown li{ padding:0; }
.nav-item-dropdown .dropdown a{
  display:block; padding:12px 16px; color:rgba(255,255,255,.85); text-decoration:none; font-weight:500; font-size:.93rem; transition:background-color .15s ease, color .15s ease;
}
.nav-item-dropdown .dropdown a:hover{ background:rgba(69,187,255,.15); color:var(--tf-white); }

.header-cta{ display:none; align-items:center; gap:12px; }
.header-phone{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--tf-white); white-space:nowrap; }
.header-phone svg{ width:18px; height:18px; }
.header-cta .btn{ padding:12px 22px; font-size:.92rem; }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; clip-path:var(--notch-sm); background:rgba(255,255,255,0.14); color:var(--tf-white);
  border:1px solid rgba(255,255,255,0.24);
}
.nav-toggle svg{ width:22px; height:22px; }
.nav-toggle .icon-close{ display:none; }
.nav-open .nav-toggle .icon-open{ display:none; }
.nav-open .nav-toggle .icon-close{ display:block; }

.mobile-nav{
  display:none;
  position:fixed; inset:0; top:var(--header-h);
  background:var(--tf-paper);
  z-index:90;
  overflow-y:auto;
  padding:20px var(--gutter) 40px;
}
.nav-open .mobile-nav{ display:block; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:4px; }
.mobile-nav > ul > li{ border-bottom:1px solid var(--tf-line); }
.mobile-nav a.nav-link{ display:flex; justify-content:space-between; align-items:center; padding:16px 4px; font-weight:700; font-size:1.05rem; color:var(--tf-ink); }
.mobile-cta{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.mobile-cta .header-phone{ justify-content:center; padding:14px; background:var(--tf-white); clip-path:var(--notch-sm); color:var(--tf-ink); filter:var(--fshadow-sm); }
.mobile-cta .header-phone svg{ color:var(--tf-copper); }

@media (min-width:1200px){
  .main-nav{ display:block; }
  .header-cta{ display:flex; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* Scrolled / solid header state */
.site-header.is-scrolled,
.nav-open .site-header{
  background:var(--tf-white-soft);
  border-bottom-color:var(--tf-line);
  box-shadow:0 6px 24px rgba(20,35,43,.08);
  backdrop-filter:saturate(150%) blur(14px);
}
.site-header.is-scrolled .brand,
.site-header.is-scrolled .header-phone,
.nav-open .site-header .brand{ color:var(--tf-ink); }
.site-header.is-scrolled .brand small,
.nav-open .site-header .brand small{ color:var(--tf-ink-soft); }

.site-header.is-scrolled .header-phone svg{ color:var(--tf-copper); }
.site-header.is-scrolled .nav-toggle{ background:var(--tf-wash); color:var(--tf-ink); border-color:var(--tf-line); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer{ background:var(--tf-ink); color:#B9C4C8; }
.footer-top{ padding-block:clamp(52px,7vw,88px); display:grid; gap:44px; }
@media (min-width:820px){ .footer-top{ grid-template-columns:1.35fr 1fr 1fr 1.1fr; gap:36px; } }
.footer-brand .brand{ color:var(--tf-white); }
.footer-brand p{ margin-top:16px; color:#A9B5B9; font-size:.98rem; max-width:34ch; }
.footer-heading{ font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tf-brass); margin-bottom:18px; }
.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links a{ font-size:.98rem; color:#B9C4C8; transition:color .15s ease; }
.footer-links a:hover{ color:var(--tf-white); }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:.98rem; margin-bottom:13px; }
.footer-contact svg{ width:18px; height:18px; margin-top:2px; color:var(--tf-copper); flex:none; }
.footer-contact a{ color:#DCE3E5; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);
  padding-block:20px;
  display:flex; flex-direction:column; gap:10px;
  font-size:.8rem; color:#8B989D;
}
@media (min-width:720px){ .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; } }
.footer-bottom a{ color:#C7D0D3; font-weight:600; }
.footer-bottom a:hover{ color:var(--tf-white); text-decoration:underline; }
.footer-disclosure{ max-width:640px; line-height:1.5; }
.footer-credit{ font-size:.76rem; opacity:.85; }

/* ---------------------------------------------------------------------- */
/* Section scaffolding                                                     */
/* ---------------------------------------------------------------------- */
main > section{ padding-block:var(--section-space); }
main{ position:relative; isolation:isolate; overflow:hidden; }
main > section > .container{ position:relative; z-index:2; }
.flow-line{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; overflow:visible; }
.flow-line path{ fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.flow-line__track{ stroke:rgba(20,86,107,.16); stroke-width:1.5; }
.flow-line__active{ stroke:#3B7E93; stroke-width:2; }
.flow-line__branches path{ stroke:rgba(20,86,107,.22); stroke-width:1.25; stroke-dasharray:4 8; }
.section-alt{ background:var(--bg-alt); }
.section-deep{ background:var(--tf-water); color:var(--tf-white); }
.section-wash{ background:var(--tf-wash); }

.section-head{ max-width:820px; margin-bottom:clamp(40px,5vw,64px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center{ position:relative; background:var(--bg); }
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tf-copper-dark); margin-bottom:16px;
}
.kicker::before{ content:"//"; font-weight:700; color:var(--tf-copper); }
.section-deep .kicker{ color:var(--tf-brass); }
.section-head h2{ font-size:var(--heading-xl); line-height:1.06; }
.section-head p{ margin-top:18px; font-size:var(--body-lg); color:var(--ink-soft); line-height:1.55; }
.section-deep .section-head h2{ color:var(--tf-white); }
.section-deep .section-head p{ color:#BCD0D5; }

/* ---------------------------------------------------------------------- */
/* Mobile sticky Request Service CTA                                       */
/* ---------------------------------------------------------------------- */
.mobile-sticky-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  align-items:center; justify-content:center; gap:.5em;
  padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--tf-copper); color:var(--tf-white);
  font-weight:800; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 -10px 24px rgba(20,35,43,0.22);
}
.mobile-sticky-cta svg{ width:18px; height:18px; flex:none; }
.nav-open .mobile-sticky-cta{ display:none !important; }
@media (max-width:959px){
  body.has-sticky-cta{ padding-bottom:62px; }
  .mobile-sticky-cta{ display:flex; }
}

/* ---------------------------------------------------------------------- */
/* Utility                                                                 */
/* ---------------------------------------------------------------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .flow-line__active{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
  .benefit-item__node,.cta-band__flow-end{ opacity:1; transform:none; }
}

/* Keep the mobile overlay anchored to the viewport. */
@media (max-width:1199px){
  .site-header, .site-header.is-scrolled, .nav-open .site-header{
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .mobile-nav{
    position:fixed; top:var(--header-h); right:0; bottom:0; left:0;
    height:calc(100dvh - var(--header-h));
    background:var(--tf-paper);
  }
}
/* ---------------------------------------------------------------------- */
/* Page hero (inner + home)                                                */
/* ---------------------------------------------------------------------- */
.page-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:var(--tf-white);
  background:var(--tf-water); /* shows while image loads */
  padding-top:var(--header-h);
  padding-bottom:clamp(40px,6vw,64px);
}
.page-hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
}
.page-hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    180deg,
    rgba(14,58,71,0.55) 0%,
    rgba(14,58,71,0.82) 55%,
    rgba(20,35,43,0.94) 100%
  );
}
.page-hero__content{ position:relative; z-index:2; width:100%; }
.page-hero__content .kicker{
  color:var(--tf-brass);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  padding:8px 14px 8px 10px;
  clip-path:var(--notch-sm);
}
.page-hero__content .kicker::before{ color:var(--tf-brass); }
.page-hero h1{ color:var(--tf-white); font-size:clamp(2.5rem,5.5vw,4.2rem); max-width:18ch; line-height:1.04; }
.page-hero p{ margin-top:20px; color:#CBDDE2; font-size:var(--body-lg); max-width:56ch; }
.page-hero .hero__ctas{ margin-top:30px; }

/* ---------------------------------------------------------------------- */
/* Home hero — split panel: copy left, framed photo + stat badge right     */
/* ---------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  color:var(--tf-white);
  background:var(--tf-water);
  padding-block:calc(var(--header-h) + 48px) 64px;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 88%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 88%);
}
.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr); gap:48px; align-items:center; }
@media (min-width:960px){ .hero__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:64px; } }
.hero__copy,.hero__media{ min-width:0; }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tf-brass); margin-bottom:22px;
  padding:8px 14px 8px 10px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  clip-path:var(--notch-sm);
}
.hero__eyebrow svg{ width:20px; height:20px; flex:none; }
.hero__copy h1{ color:var(--tf-white); font-size:clamp(2.6rem,4.6vw,4.2rem); max-width:14ch; line-height:1.03; }
.hero__copy p{ margin-top:20px; color:#CBDDE2; font-size:clamp(1.08rem,1.25vw,1.28rem); max-width:52ch; }
.hero .hero__ctas{ margin-top:32px; }
.hero__trust{
  margin-top:36px; display:flex; flex-wrap:wrap; gap:12px 28px;
  font-size:1rem; font-weight:600; color:#D5E2E6;
}
.hero__trust li{ display:flex; align-items:center; gap:9px; }
.hero__trust svg{ width:18px; height:18px; color:var(--tf-brass); flex:none; }

.hero__media{ position:relative; }
.hero__photo-frame{
  clip-path:var(--notch-xl);
  border:1px solid rgba(255,255,255,0.16);
  aspect-ratio:6/5.2;
  filter:drop-shadow(0 24px 50px rgba(6,20,26,0.45));
}
.hero__photo-frame img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.hero__badge{
  position:absolute; left:-16px; bottom:-24px;
  display:flex; flex-direction:column; gap:2px;
  background:var(--tf-copper); color:var(--tf-white);
  padding:18px 24px;
  clip-path:var(--notch-md);
  filter:drop-shadow(0 16px 30px rgba(6,20,26,0.4));
}
.hero__badge strong{ font-family:var(--font-head); font-size:2.1rem; line-height:1; }
.hero__badge span{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.35; }

@media (max-width:959px){
  .hero{ padding-block:calc(var(--header-h) + 32px) 56px; }
  .hero__copy h1{ font-size:clamp(2.3rem,9vw,3rem); }
  .hero__copy p{ font-size:1.05rem; margin-top:16px; }
  .hero .hero__ctas{ flex-direction:column; align-items:stretch; margin-top:24px; }
  .hero .hero__ctas .btn-lg{ width:100%; min-height:56px; }
  .hero__trust{ margin-top:26px; font-size:.9rem; gap:8px 20px; }
  .hero__media{ margin-top:8px; max-width:420px; margin-inline:auto; }
  .hero__badge{ padding:14px 18px; left:-10px; bottom:-18px; }
  .hero__badge strong{ font-size:1.6rem; }
}

/* ---------------------------------------------------------------------- */
/* Trust strip — chip row overlapping the section below, not a flat bar    */
/* ---------------------------------------------------------------------- */
.trust-strip{ position:relative; z-index:3; padding-block:0; margin-bottom:calc(-1 * clamp(34px,5vw,54px)); }
.trust-strip__inner{
  display:grid; gap:14px;
  transform:translateY(calc(-1 * clamp(34px,5vw,54px)));
}
.trust-strip__item{
  display:flex; align-items:center; gap:14px;
  padding:18px clamp(16px,2.2vw,24px);
  background:var(--tf-white);
  border:1px solid var(--tf-line);
  clip-path:var(--notch-md);
  filter:drop-shadow(0 10px 24px rgba(20,35,43,0.1));
  font-weight:600; font-size:.85rem; line-height:1.3; color:var(--ink-soft);
}
.trust-strip__item svg{ width:26px; height:26px; color:var(--tf-copper); flex:none; }
.trust-strip__item strong{ display:block; color:var(--tf-ink); font-family:var(--font-head); font-size:1.05rem; font-weight:700; line-height:1.2; }
@media (min-width:720px){ .trust-strip__inner{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .trust-strip__inner{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:719px){
  .trust-strip{ margin-bottom:calc(-1 * clamp(24px,7vw,36px)); }
  .trust-strip__inner{ grid-template-columns:1fr; transform:translateY(calc(-1 * clamp(24px,7vw,36px))); gap:10px; }
}

/* ---------------------------------------------------------------------- */
/* Service cards                                                           */
/* ---------------------------------------------------------------------- */
.card-grid{ display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:640px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } }

.service-card{
  position:relative;
  background:var(--tf-white);
  border:1px solid var(--tf-line);
  clip-path:var(--notch-lg);
  padding:var(--card-padding);
  display:flex; flex-direction:column; gap:20px; align-items:center; text-align:center; min-width:0;
  filter:var(--fshadow-sm);
  overflow:hidden; min-height:254px;
  transition:transform .32s ease, filter .32s ease, border-color .32s ease;
}
.service-card:hover,.service-card:focus-within{ transform:translateY(-4px); filter:var(--fshadow-md); border-color:#8EAAB2; }
.service-card__image{
  position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(90deg,rgba(14,58,71,.97),rgba(14,58,71,.9) 52%,rgba(14,58,71,.6)),var(--service-image);
  background-position:center 58%; background-size:cover; opacity:0;
  transform:translateX(7%) scale(1.035); clip-path:inset(0 0 0 30%);
  transition:opacity .36s ease,transform .42s cubic-bezier(.2,.75,.2,1),clip-path .42s cubic-bezier(.2,.75,.2,1);
}
.service-card__image--drain{ background-position:center 76%; }
.service-card__image--leak{ background-position:center 45%; }
.service-card__image--fixture{ background-position:center 68%; }
.service-card__image--repipe{ background-position:center 42%; }
.service-card:hover .service-card__image,.service-card:focus-within .service-card__image{ opacity:1; transform:none; clip-path:inset(0); }
.service-card > :not(.service-card__image){ position:relative; z-index:1; }
.service-card__num{
  position:absolute; top:16px; right:20px;
  font-family:var(--font-mono); font-size:.76rem; font-weight:700; letter-spacing:.03em;
  color:var(--ink-soft); opacity:.4;
}
.service-card__icon{
  width:56px; height:56px; flex:none;
  clip-path:var(--notch-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--tf-wash); color:var(--tf-water);
}
.service-card__icon svg{ width:27px; height:27px; }
.service-card__body{ display:flex; flex:1; flex-direction:column; align-items:center; gap:14px; width:100%; min-width:0; }
.service-card > .service-card__num{ position:absolute; }
.service-card h3,.service-card p{ width:100%; overflow-wrap:break-word; }
.service-card .service-card__link{ justify-content:center; padding-top:8px; }
.service-card h3{ font-size:1.32rem; }
.service-card p{ color:var(--ink-soft); font-size:1.02rem; line-height:1.56; }
.service-card__link{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--tf-copper-dark); font-size:1rem; }
.service-card__link svg{ width:16px; height:16px; transition:transform .15s ease; }
.service-card:hover .service-card__link svg,.service-card:focus-within .service-card__link svg{ transform:translateX(5px); }
@media (hover:hover) and (pointer:fine){
  .service-card:hover .service-card__num,.service-card:focus-within .service-card__num,
  .service-card:hover h3,.service-card:focus-within h3{ color:var(--tf-white); }
  .service-card:hover p,.service-card:focus-within p{ color:#D6E4E7; }
  .service-card:hover .service-card__link,.service-card:focus-within .service-card__link{ color:#F2B65B; }
  .service-card:hover .service-card__icon,.service-card:focus-within .service-card__icon{ background:rgba(255,255,255,.13); color:var(--tf-brass); }
}

/* ---------------------------------------------------------------------- */
/* Benefit / split + feature list                                          */
/* ---------------------------------------------------------------------- */
.split{ display:grid; gap:44px; align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:68px; } }
.benefit-list{ position:relative; display:flex; flex-direction:column; gap:26px; margin-top:10px; padding-left:42px; }
.benefit-list::before{ content:""; position:absolute; left:11px; top:27px; bottom:27px; width:1px; background:rgba(20,86,107,.22); }
.benefit-item{ position:relative; display:flex; gap:18px; }
.benefit-item__node{
  position:absolute; left:-42px; top:18px; width:23px; height:23px; border-radius:50%; display:grid; place-items:center;
  background:var(--tf-wash); border:1px solid rgba(20,86,107,.38); box-shadow:0 0 0 5px var(--tf-wash); color:var(--tf-water);
  opacity:.48; transform:scale(.82); transition:opacity .35s ease,transform .35s ease,background-color .35s ease;
}
.benefit-item__node span{ font-family:var(--font-mono); font-size:.47rem; font-weight:700; }
.benefit-item.is-flow-active .benefit-item__node{ opacity:1; transform:scale(1); background:var(--tf-brass); border-color:var(--tf-water); }
.benefit-item__icon{
  flex:none; width:54px; height:54px;
  clip-path:var(--notch-sm);
  background:var(--tf-water); color:var(--tf-brass);
  display:flex; align-items:center; justify-content:center;
}
.benefit-item__icon svg{ width:26px; height:26px; }
.benefit-item h3{ font-size:1.32rem; margin-bottom:5px; }
.benefit-item p{ color:var(--ink-soft); font-size:1.04rem; line-height:1.55; }
.art-panel{
  clip-path:var(--notch-xl);
  border:1px solid var(--tf-line);
  filter:var(--fshadow-md);
}
.art-panel--photo{ padding:0; aspect-ratio:6/5; }
.art-panel--photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------------------------------------------------------------- */
/* Steps                                                                  */
/* ---------------------------------------------------------------------- */
.steps{ display:grid; gap:36px; }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); gap:52px; } }
.step{ position:relative; padding-top:8px; }
.step__num{
  display:flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:50%;
  background:var(--tf-water); color:var(--tf-brass);
  font-family:var(--font-head); font-weight:700; font-size:1.5rem;
  margin-bottom:22px;
}
.step h3{ font-size:1.4rem; margin-bottom:8px; }
.step p{ color:var(--ink-soft); font-size:1.03rem; line-height:1.55; }
@media (min-width:820px){
  .step:not(:last-child)::after{
    content:""; position:absolute; top:30px; left:calc(50% + 52px); width:calc(100% - 44px);
    height:2px; background:repeating-linear-gradient(90deg,var(--tf-wash) 0 10px,transparent 10px 18px);
  }
}

/* ---------------------------------------------------------------------- */
/* Testimonials                                                           */
/* ---------------------------------------------------------------------- */
.testi-grid{ display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:720px){ .testi-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .testi-grid.cols-3{ grid-template-columns:repeat(3,1fr); } }
.testi-card{
  background:var(--tf-white); border:1px solid var(--tf-line); clip-path:var(--notch-lg);
  padding:var(--card-padding); display:flex; flex-direction:column; gap:18px; filter:var(--fshadow-sm);
}
.testi-stars{ display:flex; gap:3px; color:var(--tf-brass); }
.testi-stars svg{ width:18px; height:18px; }
.testi-card p{ color:var(--ink-soft); font-size:1.06rem; line-height:1.6; }
.testi-person{ display:flex; align-items:center; gap:13px; margin-top:auto; }
.testi-avatar{
  width:50px; height:50px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--tf-white); font-weight:700; font-family:var(--font-head); font-size:1.1rem;
}
.testi-name{ font-weight:700; font-size:1rem; color:var(--tf-ink); }
.testi-loc{ font-size:.88rem; color:var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* CTA band                                                               */
/* ---------------------------------------------------------------------- */
.cta-band{
  background:radial-gradient(120% 160% at 15% 0%, var(--tf-water-2) 0%, var(--tf-water) 55%, var(--tf-ink) 100%);
  color:var(--tf-white); text-align:center; position:relative; overflow:hidden;
}
.cta-band__inner{ position:relative; z-index:1; max-width:800px; margin-inline:auto; }
.cta-band h2{ color:var(--tf-white); font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1.08; }
.cta-band p{ margin-top:20px; font-size:var(--body-lg); color:#C4D6DB; }
.cta-band .hero__ctas{ justify-content:center; margin-top:36px; gap:16px; }
.cta-band__flow-end{
  display:block; width:14px; height:14px; margin:0 auto 28px; border-radius:50%;
  background:#3B7E93; border:3px solid var(--tf-water); box-shadow:0 0 0 1px rgba(210,231,235,.45);
  opacity:.45; transform:scale(.75); transition:opacity .4s ease,transform .4s ease,background-color .4s ease;
}
.cta-band.is-flow-active .cta-band__flow-end{ opacity:1; transform:scale(1); background:var(--tf-brass); }

@media (max-width:959px){
  .flow-line__branches{ display:none; }
  .flow-line__track,.flow-line__active{ transform:translateX(-480px); }
}
@media (max-width:639px){
  .service-card{ min-height:0; }
  .service-card__image{ display:none; }
  .benefit-list{ padding-left:34px; }
  .benefit-item__node{ left:-34px; }
}

/* ---------------------------------------------------------------------- */
/* Form + contact                                                          */
/* ---------------------------------------------------------------------- */
.form-card{
  background:var(--tf-white); border:1px solid var(--tf-line); clip-path:var(--notch-xl);
  padding:clamp(28px,4vw,50px); filter:var(--fshadow-md);
}
.form-grid{ display:grid; gap:22px; }
@media (min-width:640px){ .form-grid.two{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-weight:700; font-size:.96rem; color:var(--tf-ink); }
.field .req{ color:var(--tf-copper); }
.field input,.field select,.field textarea{
  padding:15px 17px; border-radius:12px; border:1.5px solid var(--tf-line);
  background:var(--tf-paper); font-size:1.03rem; color:var(--tf-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--tf-water-2); box-shadow:0 0 0 4px rgba(20,86,107,0.12);
}
.field textarea{ resize:vertical; min-height:120px; }
.field-hint{ font-size:.86rem; color:var(--ink-soft); }
.field-error{ font-size:.82rem; color:#B4433A; display:none; }
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:#B4433A; }
.field.has-error .field-error{ display:block; }
.form-foot{ margin-top:18px; color:var(--ink-soft); font-size:.86rem; line-height:1.5; }

.success-card{
  background:var(--tf-white); border:1px solid var(--tf-line); clip-path:var(--notch-xl);
  filter:var(--fshadow-md);
  text-align:center; padding:clamp(36px,6vw,64px);
}
.success-icon{
  width:88px; height:88px; clip-path:var(--notch-sm); margin-inline:auto; margin-bottom:20px;
  background:var(--tf-wash); color:var(--tf-water);
  display:flex; align-items:center; justify-content:center;
}
.success-icon svg{ width:44px; height:44px; }
.success-card h2{ font-size:2.15rem; }
.success-card p{ margin-top:16px; color:var(--ink-soft); font-size:1.1rem; max-width:48ch; margin-inline:auto; }

.contact-layout{ display:grid; gap:44px; }
.contact-main{ overflow:visible; }
@media (min-width:960px){
  .contact-layout{ grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; }
  .contact-info-card{ position:sticky; top:calc(var(--header-h) + 24px); }
}
.contact-info-card{
  background:var(--tf-water); color:#DCE7EA; clip-path:var(--notch-xl);
  padding:clamp(30px,5vw,46px); display:flex; flex-direction:column; gap:24px; height:fit-content;
  filter:var(--fshadow-lg);
}
.contact-info-card h2{ color:var(--tf-white); font-size:1.8rem; }
.contact-card-kicker{ color:var(--tf-brass); font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.contact-info-item{ display:flex; gap:15px; align-items:flex-start; }
.contact-info-item svg{ width:24px; height:24px; color:var(--tf-brass); flex:none; margin-top:2px; }
.contact-info-item strong{ display:block; font-size:1.03rem; margin-bottom:2px; color:var(--tf-white); }
.contact-info-item span, .contact-info-item a{ color:#C7D8DC; font-size:1rem; }
.contact-hours{ border-top:1px solid rgba(255,255,255,0.16); padding-top:18px; }
.contact-hours table{ width:100%; border-collapse:collapse; }
.contact-hours td{ border:none; padding:5px 0; color:#C7D8DC; font-size:.9rem; }
.contact-hours td:last-child{ text-align:right; font-weight:700; color:var(--tf-white); }
.contact-form-head{ margin-bottom:28px; }
.contact-form-head .kicker{ margin-bottom:8px; }
.contact-form-head h2{ font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.08; }
.contact-form-head p{ margin-top:10px; color:var(--ink-soft); }

/* ---------------------------------------------------------------------- */
/* Breadcrumbs                                                             */
/* ---------------------------------------------------------------------- */
.breadcrumbs{ padding-block:16px; font-size:.85rem; color:var(--ink-soft); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.breadcrumbs li{ display:flex; align-items:center; gap:6px; }
.breadcrumbs a{ font-weight:600; color:var(--tf-water); }
.breadcrumbs a:hover{ text-decoration:underline; }
.breadcrumbs li[aria-current]{ color:var(--ink-soft); }
.breadcrumbs svg{ width:12px; height:12px; opacity:.6; }

/* ====================================================================== */
/* 2026 TrueFlow water / midnight visual system                           */
/* ====================================================================== */
body{ background:var(--tf-paper); }
h1,h2,h3,h4{ letter-spacing:-.035em; }
.btn{ border-radius:7px; clip-path:none; text-transform:uppercase; letter-spacing:.035em; }
.btn-primary{ background:#169FF2; box-shadow:0 12px 30px rgba(0,139,221,.24); filter:none; }
.btn-primary:hover{ background:#3AB5FF; filter:none; transform:translateY(-2px); }
.btn-secondary{ border-color:#1FA9FF; color:#fff; }
.btn-secondary:hover{ background:rgba(31,169,255,.12); border-color:#75CCFF; }

.site-header{ background:rgba(3,24,44,.78); border-bottom:1px solid rgba(255,255,255,.1); backdrop-filter:none; }
.site-header.is-scrolled,.nav-open .site-header{ background:rgba(3,24,44,.96); border-bottom-color:rgba(255,255,255,.12); box-shadow:0 12px 34px rgba(0,8,18,.25); }
.site-header.is-scrolled .brand,.site-header.is-scrolled .header-phone,.nav-open .site-header .brand{ color:#fff; }
.site-header.is-scrolled .brand small,.nav-open .site-header .brand small{ color:#9CB4C7; }
.main-nav > ul > li > a.nav-link,
.mobile-nav > ul > li > a.nav-link{
  font-family:var(--font-body); font-weight:600; line-height:1.5;
  color:#C8D8E5; opacity:1; filter:none; mix-blend-mode:normal;
  transition:color .15s ease, box-shadow .15s ease;
}
.main-nav > ul > li > a.nav-link{ font-size:.95rem; border-radius:0; }
.mobile-nav > ul > li > a.nav-link{ font-size:1.05rem; }
.main-nav > ul > li > a.nav-link:visited,
.mobile-nav > ul > li > a.nav-link:visited{ color:#C8D8E5; }
.main-nav > ul > li > a.nav-link:is(:hover,:focus-visible,[aria-current="page"]),
.mobile-nav > ul > li > a.nav-link:is(:hover,:focus-visible,[aria-current="page"]){ background:transparent; color:#45BBFF; box-shadow:inset 0 -2px #1FA9FF; }
.header-phone svg{ color:#45BBFF!important; }
.nav-toggle,.site-header.is-scrolled .nav-toggle{ background:rgba(31,169,255,.1); color:#fff; border-color:rgba(69,187,255,.35); }
.mobile-nav{ background:#03182C; }
.mobile-nav > ul > li{ border-color:rgba(255,255,255,.12); }

.mobile-cta .header-phone{ background:#05223B; color:#fff; border:1px solid rgba(255,255,255,.12); filter:none; clip-path:none; }

.hero{ min-height:780px; display:flex; align-items:center; background:#03182C; padding-block:calc(var(--header-h) + 70px) 150px; }
.hero::before{ background-image:linear-gradient(rgba(69,187,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(69,187,255,.07) 1px,transparent 1px),radial-gradient(circle at 76% 40%,rgba(31,169,255,.2),transparent 35%); background-size:54px 54px,54px 54px,auto; mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.75)); }
.hero::after{ content:""; position:absolute; z-index:2; left:-3%; right:-3%; bottom:-1px; height:90px; background:var(--tf-paper); clip-path:ellipse(58% 42% at 52% 100%); }
.hero__grid{ grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr); gap:50px; }
.hero__eyebrow{ padding:0; border:0; background:transparent; clip-path:none; color:#A9BFD1; letter-spacing:.19em; font-size:.79rem; }
.hero__eyebrow::before{ content:""; width:52px; height:1px; background:#45BBFF; }
.hero__eyebrow svg{ display:none; }
.hero__copy h1{ font-size:clamp(4rem,6.5vw,6.8rem); max-width:10ch; text-transform:uppercase; line-height:.88; letter-spacing:-.065em; }
.hero__copy h1 span{ color:#45BBFF; }
.hero__copy p{ color:#fff; font-size:clamp(1.25rem,2vw,2rem); max-width:28ch; line-height:1.35; }
.hero__trust{ display:grid; grid-template-columns:repeat(2,max-content); color:#DCE9F2; text-transform:uppercase; letter-spacing:.055em; font-size:.8rem; }
.hero__trust svg{ color:#45BBFF; border:1px solid #1FA9FF; border-radius:50%; padding:3px; width:25px; height:25px; }
.hero__media{ align-self:stretch; display:flex; align-items:center; }
.hero__photo-frame{ width:100%; height:min(590px,65vw); aspect-ratio:auto; border:0; clip-path:polygon(11% 0,100% 0,100% 91%,88% 100%,0 100%,0 12%); box-shadow:-30px 30px 0 rgba(31,169,255,.08); filter:none; }
.hero__photo-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#03182C 0%,rgba(3,24,44,.15) 44%,transparent 72%),linear-gradient(0deg,rgba(3,24,44,.7),transparent 45%); pointer-events:none; }
.hero__photo-frame img{ object-position:center 28%; filter:saturate(.78) contrast(1.08) hue-rotate(8deg); }
.hero__badge{ left:auto; right:-10px; bottom:22px; background:#1FA9FF; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); filter:none; }

.trust-strip{ background:var(--tf-paper); margin-bottom:0; padding-bottom:0; }
.trust-strip__inner{ grid-template-columns:repeat(5,1fr)!important; transform:translateY(-52px); gap:0; background:#fff; border:1px solid #D5E5F0; box-shadow:0 20px 45px rgba(3,24,44,.12); }
.trust-strip__item{ justify-content:center; min-height:128px; padding:22px 16px; border:0; border-right:1px solid #D5E5F0; background:#fff; clip-path:none; filter:none; text-align:center; flex-direction:column; color:#526C80; transition:background .25s ease,color .25s ease; }
.trust-strip__item:last-child{ border-right:0; }
.trust-strip__item svg{ width:34px; height:34px; color:#078CDD; }
.trust-strip__item strong{ color:#03182C; font-size:1rem; }
.trust-strip__item:hover{ background:#EAF7FF; color:#08314F; }

#services{ background:#05223B; color:#fff; padding-top:clamp(80px,9vw,125px); clip-path:polygon(0 40px,100% 0,100% 100%,0 100%); }
#services .section-head.center{ background:transparent; }
#services .section-head h2{ color:#fff; text-transform:uppercase; }
#services .section-head p{ color:#A9BFD1; }
.kicker{ color:#45BBFF; letter-spacing:.16em; }
.hero__eyebrow,.contact-card-kicker{ font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.service-copy{ margin-top:18px; color:var(--ink-soft); font-size:var(--body-lg); line-height:1.65; }
.service-detail .page-hero h1{ max-width:16ch; overflow-wrap:break-word; }
.service-detail .service-card{ min-width:0; }
.kicker::before{ color:#1FA9FF; }
.card-grid{ gap:18px; }
.service-card{ background:#08314F; border:1px solid rgba(117,204,255,.16); min-height:300px; clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); filter:none; }
.service-card:hover,.service-card:focus-within{ border-color:#45BBFF; box-shadow:0 18px 44px rgba(0,8,18,.3),inset 0 0 0 1px rgba(69,187,255,.2); filter:none; transform:translateY(-3px); }
.service-card__num{ color:#75CCFF; opacity:.6; }
.service-card__icon{ background:rgba(31,169,255,.1); color:#45BBFF; }
.service-card h3{ color:#fff; font-size:1.45rem; }
.service-card p{ color:#A9BFD1; }
.service-card__link{ color:#45BBFF; text-transform:uppercase; font-size:.83rem; letter-spacing:.05em; }
.service-card__image{ background-image:linear-gradient(90deg,rgba(3,24,44,.97),rgba(5,34,59,.87) 58%,rgba(5,34,59,.48)),var(--service-image); }

.section-wash{ position:relative; background:#F7FBFF; }
.section-wash::before{ content:""; position:absolute; inset:0 0 auto; height:8px; background:linear-gradient(90deg,#1FA9FF 0 18%,transparent 18% 21%,#08314F 21% 100%); }
.benefit-list::before{ background:linear-gradient(#1FA9FF,rgba(31,169,255,.18)); width:2px; }
.benefit-item__node{ background:#F7FBFF; border-color:#1FA9FF; box-shadow:0 0 0 5px #F7FBFF; color:#03182C; }
.benefit-item.is-flow-active .benefit-item__node{ background:#1FA9FF; border-color:#1FA9FF; }
.benefit-item__icon{ background:#05223B; color:#45BBFF; }
.art-panel{ border-color:#BFD5E3; box-shadow:18px 18px 0 #DDECF5; filter:none; }

.water-break{ position:relative; min-height:520px; display:flex; align-items:center; overflow:hidden; background:#03182C; color:#fff; padding-block:100px; }
.water-break__media{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,24,44,.98) 0%,rgba(3,24,44,.78) 46%,rgba(3,24,44,.28)),url('/assets/images/service-leak.jpg') center 46%/cover; filter:saturate(.8) contrast(1.12); }
.water-break::after{ content:""; position:absolute; inset:auto -5% -45px; height:100px; background:#05223B; clip-path:ellipse(56% 38% at 50% 100%); }
.water-break__content{ position:relative; z-index:1; }
.water-break__content p{ font-family:var(--font-head); font-size:clamp(3.5rem,8vw,7.5rem); font-weight:800; line-height:.82; letter-spacing:-.06em; }
.water-break__content p span{ color:#45BBFF; }
.water-break__content small{ display:block; margin-top:30px; color:#C0D4E3; font-size:1.05rem; max-width:46ch; }

.cta-band{ background:#05223B; }
.cta-band::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(69,187,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(69,187,255,.06) 1px,transparent 1px); background-size:50px 50px; mask-image:linear-gradient(90deg,transparent,#000,transparent); }
.cta-band h2{ text-transform:uppercase; font-size:clamp(2.8rem,5.5vw,5rem); letter-spacing:-.055em; }
.cta-band__flow-end{ background:#1FA9FF; border-color:#05223B; box-shadow:0 0 0 1px #45BBFF,0 0 28px rgba(31,169,255,.35); }

.page-hero{ min-height:620px; background:#03182C; }
.page-hero__overlay{ background:linear-gradient(90deg,#03182C 4%,rgba(3,24,44,.92) 42%,rgba(3,24,44,.22) 78%),linear-gradient(0deg,#03182C,transparent 50%); }
.page-hero::after{ content:""; position:absolute; inset:auto 0 0; height:5px; background:#1FA9FF; }
.page-hero__content .kicker{ padding:0; border:0; background:transparent; clip-path:none; }
.page-hero h1{ text-transform:uppercase; font-size:clamp(3.5rem,7vw,6.8rem); line-height:.9; letter-spacing:-.06em; max-width:11ch; }

.section-alt{ background:#EAF3F8; }
.split h2{ font-size:clamp(2rem,4vw,3.6rem); text-transform:uppercase; line-height:.95; }
.form-card{ background:#fff; border-color:#C9DDEA; box-shadow:18px 18px 0 #DDECF5; filter:none; }
.field input,.field select,.field textarea{ border-radius:5px; background:#F7FBFF; border-color:#C9DDEA; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:#1FA9FF; box-shadow:0 0 0 4px rgba(31,169,255,.12); }
.field .req,.contact-card-kicker,.contact-info-item svg{ color:#45BBFF; }
.contact-info-card{ background:#05223B; box-shadow:18px 18px 0 #DDECF5; filter:none; }
.contact-info-item span,.contact-info-item a,.contact-hours td{ color:#AFC5D5; }

.site-footer{ background:#031423; color:#8FA8BA; border-top:1px solid rgba(69,187,255,.16); }
.footer-heading{ color:#45BBFF; }
.footer-links a{ color:#A9BFD1; }
.footer-contact svg{ color:#1FA9FF; }
.footer-contact a{ color:#D7E5EF; }
.mobile-sticky-cta{ background:#169FF2; }
.flow-line__track{ stroke:rgba(69,187,255,.2); }
.flow-line__active{ stroke:#1FA9FF; filter:drop-shadow(0 0 3px rgba(31,169,255,.35)); }
.flow-line__branches path{ stroke:rgba(69,187,255,.32); }

@media (max-width:959px){
  .hero{ min-height:auto; padding-block:calc(var(--header-h) + 44px) 125px; }
  .hero__grid{ grid-template-columns:1fr; gap:34px; }
  .hero__copy h1{ font-size:clamp(3rem,13vw,5.2rem); }
  .hero__copy p{ font-size:1.2rem; }
  .hero__trust{ grid-template-columns:repeat(2,1fr); }
  .hero__media{ width:100%; max-width:620px; }
  .hero__photo-frame{ height:min(520px,95vw); }
  .trust-strip__inner{ grid-template-columns:repeat(5,minmax(170px,1fr))!important; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:var(--gutter); padding:0; }
  .trust-strip .container{ width:auto; }
  .trust-strip__item{ scroll-snap-align:start; }
  #services{ clip-path:polygon(0 22px,100% 0,100% 100%,0 100%); }
}
@media (max-width:639px){
  .hero__trust{ grid-template-columns:1fr 1fr; gap:12px; }
  .hero__trust li{ align-items:flex-start; }
  .hero__photo-frame{ height:350px; }
  .hero__badge{ right:8px; }
  .trust-strip__inner{ transform:translateY(-34px); }
  .water-break{ min-height:440px; }
  .water-break__content p{ font-size:clamp(3rem,18vw,5rem); }
  .page-hero{ min-height:540px; }
  .page-hero h1{ font-size:clamp(3rem,16vw,4.8rem); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
  .flow-line__active{ stroke-dasharray:none!important; stroke-dashoffset:0!important; }
}

/* Image focal points preserve the existing frames and card layout. */
.page-hero__bg, .art-panel--photo img{ object-fit:cover; }
.art-panel--photo img{ object-position:var(--photo-position, center); }
.service-card__image{ background-position:var(--service-position, center); background-size:cover; }

/* Reassurance cards use the existing service-card geometry and typography. */
.service-card--trust .service-card__num{ font-size:.78rem; letter-spacing:.12em; opacity:1; }