/* ==========================================================================
   Smart Plumbing — Brand Stylesheet
   Palette extracted from client logo: navy / red / warm cream / steel blue
   ========================================================================== */

:root{
  /* --- Brand palette (from logo) --- */
  --navy-950:#052C4E;
  --navy-900:#073F6E;
  --navy-800:#0C4E82;
  --navy-100:#E3ECF3;

  --red-700:#A80805;
  --red-600:#D20B06;
  --red-500:#E23A32;
  --red-50:#FCE9E7;

  --cream-50:#FBFAF1;
  --cream-100:#F6F3E2;
  --cream-200:#EFEACB;
  --cream-300:#E4DCAF;

  --steel-200:#D3E0E9;
  --steel-300:#C9D8E3;
  --steel-400:#8FA8BD;
  --steel-600:#4F7191;

  --ink-900:#0B2540;
  --ink-700:#294863;
  --ink-500:#587488;

  --paper:#FCFBF5;
  --white:#ffffff;

  /* --- Type --- */
  --font-display:'Bebas Neue', 'Oswald', sans-serif;
  --font-heading:'Oswald', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', system-ui, sans-serif;

  /* --- Effects --- */
  --shadow-soft:0 20px 50px -24px rgba(5,44,78,.45);
  --shadow-card:0 14px 34px -18px rgba(5,44,78,.28);
  --shadow-btn:0 12px 24px -10px rgba(210,11,6,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  --notch:22px;
}

/* ==========================================================================
   Base
   ========================================================================== */
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red-600); color:var(--white); }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--navy-950);
  font-weight:600;
  letter-spacing:.01em;
  margin:0;
}

.section{ padding:6rem 0; position:relative; }
.section-sm{ padding:3.5rem 0; }
@media (max-width:767.98px){
  .section{ padding:4rem 0; }
}

.container-xl{ max-width:1240px; }

.text-navy{ color:var(--navy-900) !important; }
.text-red{ color:var(--red-600) !important; }
.text-steel{ color:var(--steel-600) !important; }
.text-ink-500{ color:var(--ink-500) !important; }
.bg-navy{ background-color:var(--navy-900) !important; }
.bg-navy-950{ background-color:var(--navy-950) !important; }
.bg-cream{ background-color:var(--cream-100) !important; }
.bg-cream-200{ background-color:var(--cream-200) !important; }
.bg-paper{ background-color:var(--paper) !important; }

/* Focus visibility (accessibility floor) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible{
  outline:3px solid var(--red-600);
  outline-offset:3px;
  border-radius:2px;
}

/* ==========================================================================
   Eyebrow / labels — echoes the two dots flanking "PLUMBING" on the logo
   ========================================================================== */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red-600);
  margin-bottom:.9rem;
}
.eyebrow::before,
.eyebrow::after{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--red-600);
  flex:none;
}
.eyebrow.eyebrow-light{ color:var(--cream-200); }
.eyebrow.eyebrow-light::before,
.eyebrow.eyebrow-light::after{ background:var(--cream-200); }
.eyebrow.eyebrow-navy{ color:var(--navy-900); }
.eyebrow.eyebrow-navy::before,
.eyebrow.eyebrow-navy::after{ background:var(--navy-900); }

.display-headline{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.01em;
  line-height:.95;
  text-transform:uppercase;
}

.section-head{ max-width:640px; margin-bottom:3rem; }
.section-head.mx-auto{ margin-left:auto; margin-right:auto; text-align:center; }
.section-lead{ color:var(--ink-700); font-size:1.05rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  font-family:var(--font-heading);
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:.85rem;
  padding:.85rem 1.6rem;
  border-radius:6px;
  border:2px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn i{ font-size:1.05em; }

.btn-call{
  background:var(--red-600);
  color:var(--white);
  box-shadow:var(--shadow-btn);
}
.btn-call:hover,
.btn-call:focus-visible{
  background:var(--red-700);
  color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 18px 30px -12px rgba(210,11,6,.55);
}

.btn-outline-navy{
  background:transparent;
  border-color:var(--navy-900);
  color:var(--navy-900);
}
.btn-outline-navy:hover,
.btn-outline-navy:focus-visible{
  background:var(--navy-900);
  color:var(--white);
  transform:translateY(-2px);
}

.btn-outline-cream{
  background:transparent;
  border-color:rgba(251,250,241,.55);
  color:var(--cream-50);
}
.btn-outline-cream:hover,
.btn-outline-cream:focus-visible{
  background:var(--cream-50);
  color:var(--navy-950);
  border-color:var(--cream-50);
  transform:translateY(-2px);
}

.btn-navy-solid{
  background:var(--navy-900);
  color:var(--white);
}
.btn-navy-solid:hover,
.btn-navy-solid:focus-visible{
  background:var(--navy-950);
  color:var(--white);
  transform:translateY(-2px);
}

.btn-lg-cta{
  padding:1.05rem 2.1rem;
  font-size:.95rem;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1050;
  background:rgba(252,251,245,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(7,63,110,.08);
  transition:box-shadow .3s var(--ease), padding .3s var(--ease);
  padding:.65rem 0;
}
.site-header.is-scrolled{
  box-shadow:0 10px 30px -18px rgba(5,44,78,.35);
  padding:.35rem 0;
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:.65rem;
}
.brand-lockup img{
  height:64px;
  width:auto;
  transition:height .3s var(--ease);
}
.site-header.is-scrolled .brand-lockup img{ height:50px; }
.brand-wordmark{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand-wordmark .b1{
  font-family:var(--font-display);
  font-size:1.35rem;
  color:var(--navy-950);
  letter-spacing:.03em;
}
.brand-wordmark .b2{
  font-family:var(--font-heading);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.24em;
  color:var(--red-600);
  text-transform:uppercase;
}

.main-nav .nav-link{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:.86rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink-700);
  padding:.5rem .9rem !important;
  position:relative;
}
.main-nav .nav-link:hover,
.main-nav .nav-link:focus-visible{ color:var(--navy-950); }
.main-nav .nav-link::after{
  content:"";
  position:absolute;
  left:.9rem; right:.9rem; bottom:.25rem;
  height:2px;
  background:var(--red-600);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}
.main-nav .nav-link:hover::after{ transform:scaleX(1); }

.header-emergency-tag{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-heading);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--red-600);
}
.pulse-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--red-600);
  position:relative;
  flex:none;
}
.pulse-dot::after{
  content:"";
  position:absolute; top:-5px; right:-5px; bottom:-5px; left:-5px;
  border-radius:50%;
  border:2px solid var(--red-600);
  animation:pulseRing 1.8s var(--ease) infinite;
}

@keyframes pulseRing{
  0%{ transform:scale(.6); opacity:.9; }
  100%{ transform:scale(1.9); opacity:0; }
}

.navbar-toggler{
  border:2px solid var(--navy-900);
  border-radius:6px;
  padding:.4rem .55rem;
}
.navbar-toggler:focus{ box-shadow:none; }
.navbar-toggler-icon{
  background-image:none;
  width:20px; height:16px;
  position:relative;
}
.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  display:block;
  background:var(--navy-900);
  height:2px;
  border-radius:2px;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:"";
  position:absolute; left:0; right:0;
}
.navbar-toggler-icon::before{ top:-6px; }
.navbar-toggler-icon::after{ top:6px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  padding:9.5rem 0 5rem;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(7,63,110,.06) 0%, rgba(7,63,110,0) 55%),
    var(--paper);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:520px;
  background-image:
    linear-gradient(rgba(7,63,110,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,63,110,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
  pointer-events:none;
}
@media (max-width:991.98px){
  .hero{ padding:8rem 0 3.5rem; }
}

.hero-eyebrow-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--navy-950);
  color:var(--cream-100);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.5rem 1rem;
  border-radius:999px;
  margin-bottom:1.6rem;
}
.hero-eyebrow-pill i{ color:var(--red-500); }

.hero h1{
  font-size:clamp(2.9rem, 5.6vw, 4.6rem);
  color:var(--navy-950);
}
.hero h1 span{ color:var(--red-600); }

.hero-lead{
  font-size:1.12rem;
  color:var(--ink-700);
  max-width:540px;
  margin:1.4rem 0 2.1rem;
}

.hero-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:2.3rem;
}

.hero-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1.1rem;
}
.hero-chip{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--font-heading);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--ink-700);
}
.hero-chip i{ color:var(--red-600); font-size:1rem; }

/* --- Hero illustrated cutaway visual --- */
.hero-visual{
  position:relative;
  padding:1rem;
}
.blueprint-card{
  position:relative;
  background:var(--cream-100);
  border:1px solid var(--cream-300);
  border-radius:18px;
  padding:2.4rem 1.8rem;
  clip-path:polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  box-shadow:var(--shadow-soft);
  background-image:radial-gradient(rgba(7,63,110,.14) 1px, transparent 1px);
  background-size:16px 16px;
}
.blueprint-card::before{
  content:"";
  position:absolute; top:0; right:0; bottom:0; left:0;
  border:2px solid var(--navy-900);
  clip-path:inherit;
  pointer-events:none;
  opacity:.12;
}
.blueprint-tilt{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .4s var(--ease);
  will-change:transform;
}
.blueprint-svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 18px 26px rgba(5,44,78,.16)); }

.bp-wall{ transition:opacity .3s var(--ease); }
.bp-roof{ }
.bp-fixture rect, .bp-fixture path{ }

.bp-pipe{
  fill:none;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1000;
  stroke-dashoffset:0;
}
.blueprint-card.will-draw .bp-pipe{
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.8s var(--ease);
}
.blueprint-card.is-drawn .bp-pipe{ stroke-dashoffset:0; }

.bp-node{ fill:var(--navy-900); stroke:var(--cream-100); stroke-width:2; }
.bp-node--leak{ fill:var(--red-600); }
.bp-node--main{ fill:var(--navy-950); }
.bp-check{ opacity:0; transition:opacity .4s var(--ease) .3s; }
.blueprint-card.is-drawn .bp-check{ opacity:1; }

.bp-pulse{
  fill:none;
  stroke:var(--red-600);
  stroke-width:2;
  opacity:0;
  transform-origin:147px 392px;
}
.blueprint-card.is-drawn .bp-pulse{
  animation:bpPulse 2.4s var(--ease) 1.6s infinite;
}
@keyframes bpPulse{
  0%{ opacity:.85; transform:scale(.4); }
  80%{ opacity:0; transform:scale(2.6); }
  100%{ opacity:0; transform:scale(2.6); }
}

.bp-tag{
  position:absolute;
  display:flex;
  align-items:center;
  gap:.4rem;
  background:var(--white);
  color:var(--navy-950);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.02em;
  padding:.5rem .8rem;
  border-radius:999px;
  box-shadow:var(--shadow-card);
  opacity:0;
  transform:translateY(8px) scale(.9);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  white-space:nowrap;
  pointer-events:none;
}
.blueprint-card.is-drawn .bp-tag{ opacity:1; transform:none; }
.bp-tag--leak{
  left:2%; top:60%;
  color:var(--red-600);
  transition-delay:.2s;
}
.bp-tag--leak i{ color:var(--red-600); }
.bp-tag--fixed{
  right:4%; top:60%;
  transition-delay:.9s;
}
.bp-tag--fixed i{ color:var(--navy-900); }
@media (max-width:575.98px){
  .bp-tag{ font-size:.64rem; padding:.4rem .65rem; }
  .bp-tag--leak{ left:0; }
  .bp-tag--fixed{ right:0; }
}

.blueprint-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px dashed var(--steel-400);
  font-family:var(--font-heading);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-700);
}
.blueprint-caption strong{ color:var(--navy-950); font-family:var(--font-display); font-size:1rem; letter-spacing:.03em; }

.floating-badge{
  position:absolute;
  right:6px;
  top:-16px;
  background:var(--white);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:.75rem 1.1rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  font-family:var(--font-heading);
  white-space:nowrap;
  z-index:2;
}
.floating-badge i{ color:var(--red-600); font-size:1.3rem; flex:none; }
.floating-badge .fb-text{ display:flex; flex-direction:column; line-height:1.15; }
.floating-badge .fb-num{ font-family:var(--font-display); font-size:1.2rem; color:var(--navy-950); }
.floating-badge .fb-label{ font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); }
@media (max-width:575.98px){
  .floating-badge{ right:2px; top:-14px; padding:.55rem .8rem; }
}

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar{
  background:var(--navy-950);
  color:var(--cream-100);
}
.trust-bar-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1.4rem 1rem;
  padding:1.6rem 0;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:.65rem;
  flex:1 1 180px;
}
.trust-item i{
  font-size:1.4rem;
  color:var(--red-500);
  flex:none;
}
.trust-item span{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:.82rem;
  letter-spacing:.02em;
  line-height:1.2;
}

/* ==========================================================================
   Badge card (service / stat / testimonial shared motif)
   Notched corner echoes the logo's hexagon silhouette.
   ========================================================================== */
.badge-card{
  background:var(--white);
  border:1px solid rgba(7,63,110,.08);
  border-radius:16px;
  clip-path:polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
  box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  height:100%;
}
.badge-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 46px -20px rgba(5,44,78,.32);
}

/* ==========================================================================
   Services
   ========================================================================== */
.service-card{
  padding:2.1rem 1.7rem 1.9rem;
  position:relative;
}
.service-icon{
  width:52px; height:52px;
  border-radius:12px;
  background:var(--navy-900);
  color:var(--cream-100);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  margin-bottom:1.15rem;
  transition:background-color .3s var(--ease);
}
.service-card:hover .service-icon{ background:var(--red-600); }
.service-card h3{
  font-size:1.14rem;
  margin-bottom:.55rem;
}
.service-card p{
  color:var(--ink-500);
  font-size:.92rem;
  margin-bottom:1rem;
}
.service-link{
  font-family:var(--font-heading);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--navy-900);
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.service-link i{ transition:transform .25s var(--ease); }
.service-card:hover .service-link i{ transform:translateX(4px); }
.service-tag{
  position:absolute;
  top:1.1rem; right:1.3rem;
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--cream-300);
  letter-spacing:.02em;
}

/* --- Service category filters --- */
.service-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin-bottom:2.6rem;
}
.service-filter{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.03em;
  color:var(--ink-700);
  background:var(--white);
  border:1.5px solid var(--steel-300);
  border-radius:999px;
  padding:.55rem 1.15rem;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.service-filter:hover{ border-color:var(--navy-900); color:var(--navy-950); }
.service-filter.is-active{
  background:var(--navy-900);
  border-color:var(--navy-900);
  color:var(--white);
  transform:translateY(-1px);
}
[data-category].is-hidden{ display:none; }
@keyframes filterFadeIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}
[data-category].filter-fade-in{ animation:filterFadeIn .5s var(--ease); }

/* ==========================================================================
   Emergency callout
   ========================================================================== */
.emergency{
  background:linear-gradient(120deg, var(--red-700) 0%, var(--red-600) 55%, #C10A05 100%);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.emergency::before{
  content:"";
  position:absolute; top:0; right:0; bottom:0; left:0;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 14px, transparent 14px, transparent 28px);
  pointer-events:none;
}
.emergency-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2.5rem;
  flex-wrap:wrap;
  padding:3.4rem 0;
}
.emergency-icon-wrap{
  width:68px; height:68px;
  border-radius:16px;
  background:rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  font-size:1.9rem;
  margin-bottom:1.1rem;
  border:1px solid rgba(255,255,255,.25);
}
.emergency h2{
  color:var(--white);
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  max-width:600px;
}
.emergency p{
  color:rgba(255,255,255,.88);
  max-width:520px;
  margin-top:.85rem;
  font-size:1.02rem;
}
.emergency-cta{
  text-align:center;
  flex:none;
  max-width:100%;
}
.emergency-cta .btn{
  white-space:normal;
}
@media (max-width:767.98px){
  .emergency-inner{ flex-direction:column; align-items:stretch; }
  .emergency-cta{ width:100%; }
  .emergency-cta .btn{ width:100%; justify-content:center; }
}
.emergency-cta .btn{
  background:var(--white);
  color:var(--red-600);
  font-size:1.05rem;
  padding:1.15rem 2.1rem;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.35);
}
.emergency-cta .btn:hover{
  background:var(--navy-950);
  color:var(--white);
  transform:translateY(-3px);
}
.emergency-cta small{
  display:block;
  margin-top:.85rem;
  font-family:var(--font-heading);
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
}

/* ==========================================================================
   Why choose us
   ========================================================================== */
.why-visual{
  position:relative;
}
.why-panel{
  background:var(--navy-900);
  border-radius:20px;
  clip-path:polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
  padding:3rem 2.4rem;
  color:var(--cream-100);
  position:relative;
  overflow:hidden;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.why-panel::after{
  content:"";
  position:absolute; right:-40px; bottom:-40px;
  width:220px; height:220px;
  border:1px dashed rgba(246,243,226,.25);
  border-radius:50%;
}
.why-panel .wp-quote{ font-size:2.6rem; color:var(--red-500); line-height:1; font-family:Georgia, serif; }
.why-panel h3{ color:var(--white); font-size:1.5rem; max-width:340px; }
.why-panel .wp-stat{
  display:flex;
  align-items:baseline;
  gap:.6rem;
}
.why-panel .wp-stat .num{ font-family:var(--font-display); font-size:3.6rem; color:var(--white); line-height:1; }
.why-panel .wp-stat .lbl{ font-size:.85rem; color:var(--steel-300); max-width:150px; line-height:1.25; }

.why-item{
  display:flex;
  gap:1rem;
  padding:1.2rem 0;
  border-bottom:1px solid rgba(7,63,110,.1);
}
.why-item:last-child{ border-bottom:none; }
.why-icon{
  flex:none;
  width:44px; height:44px;
  border-radius:10px;
  background:var(--cream-100);
  color:var(--navy-900);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
}
.why-item h3{
  font-size:1.02rem;
  margin-bottom:.3rem;
}
.why-item p{
  color:var(--ink-500);
  font-size:.91rem;
  margin:0;
}

/* ==========================================================================
   Before / After compare widget
   ========================================================================== */
.compare-widget{
  max-width:880px;
  margin:0 auto;
}
.compare-frame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--cream-300);
  aspect-ratio:16/9;
  background:var(--cream-100);
}
.compare-layer{ position:absolute; inset:0; }
.compare-svg{ width:100%; height:100%; display:block; }
.compare-layer--after{
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.compare-tag{
  position:absolute;
  top:16px;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .85rem;
  border-radius:999px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.02em;
  box-shadow:var(--shadow-card);
}
.compare-tag--before{ left:16px; background:var(--red-50); color:var(--red-700); }
.compare-tag--after{ right:16px; background:var(--navy-900); color:var(--white); }
.compare-handle{
  position:absolute;
  top:0; bottom:0;
  left:var(--pos);
  width:0;
  pointer-events:none;
}
.compare-handle::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-1.5px;
  width:3px;
  background:var(--white);
  box-shadow:0 0 0 1px rgba(5,44,78,.15);
}
.compare-handle i{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:var(--white);
  color:var(--navy-900);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card);
  font-size:1.1rem;
}
.compare-range{
  width:100%;
  margin-top:1.2rem;
  accent-color:var(--red-600);
  height:6px;
  cursor:ew-resize;
}
.compare-hint{
  text-align:center;
  margin-top:.7rem;
  font-family:var(--font-heading);
  font-size:.76rem;
  letter-spacing:.02em;
  color:var(--ink-500);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
}

/* ==========================================================================
   Process
   ========================================================================== */
.process-track{
  position:relative;
}
.process-track::before{
  content:"";
  position:absolute;
  top:calc(34px + 3rem); left:0; right:0;
  height:2px;
  background-image:repeating-linear-gradient(90deg, var(--steel-400) 0, var(--steel-400) 10px, transparent 10px, transparent 18px);
  display:none;
}
@media (min-width:992px){
  .process-track::before{ display:block; }
}
.process-step{
  text-align:center;
  padding:0 .5rem;
  position:relative;
}
.process-num{
  width:68px; height:68px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--navy-900);
  color:var(--navy-900);
  font-family:var(--font-display);
  font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.1rem;
  position:relative;
  z-index:1;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.process-step:hover .process-num{
  background:var(--red-600);
  border-color:var(--red-600);
  color:var(--white);
}
.process-step h3{ font-size:1rem; margin-bottom:.4rem; }
.process-step p{ font-size:.87rem; color:var(--ink-500); margin:0; }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats-band{
  background:var(--navy-950);
  color:var(--cream-100);
  background-image:radial-gradient(60% 140% at 15% 20%, rgba(210,11,6,.14), transparent 60%);
}
.stat-block{
  text-align:center;
  padding:1.2rem 1rem;
  border-left:1px solid rgba(246,243,226,.14);
}
.stat-block:first-child{ border-left:none; }
@media (max-width:767.98px){
  .stat-block{ border-left:none; border-top:1px solid rgba(246,243,226,.14); }
  .stat-block:first-child{ border-top:none; }
}
.stat-num{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 4.4vw, 3.4rem);
  color:var(--white);
  line-height:1;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:.2rem;
}
.stat-label{
  font-family:var(--font-heading);
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--steel-300, var(--steel-300));
  margin-top:.6rem;
  color:#B8CBD9;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-card{
  padding:2.1rem 1.9rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.t-quote-mark{
  font-family:Georgia, serif;
  font-size:3rem;
  color:var(--red-600);
  line-height:1;
  margin-bottom:.4rem;
}
.t-stars{ color:var(--red-600); font-size:.85rem; margin-bottom:.7rem; letter-spacing:.15em; }
.testimonial-card p{
  color:var(--ink-700);
  font-size:.97rem;
  line-height:1.6;
}
.t-person{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-top:1.3rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(7,63,110,.08);
}
.t-avatar{
  width:42px; height:42px;
  border-radius:50%;
  background:var(--navy-900);
  color:var(--cream-100);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.95rem;
  flex:none;
}
.t-person strong{ display:block; font-size:.9rem; color:var(--navy-950); }
.t-person span{ font-size:.78rem; color:var(--ink-500); }

/* --- Testimonial carousel --- */
.testimonial-carousel{
  position:relative;
  padding:0 3.4rem;
}
.testimonial-track{
  display:flex;
  gap:1.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:.4rem .1rem 1.2rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.testimonial-track::-webkit-scrollbar{ display:none; }
.testimonial-track .testimonial-card{
  flex:0 0 calc(33.333% - 1rem);
  scroll-snap-align:start;
  min-width:280px;
}
@media (max-width:991.98px){
  .testimonial-track .testimonial-card{ flex-basis:calc(50% - .75rem); }
}
@media (max-width:575.98px){
  .testimonial-carousel{ padding:0 2.6rem; }
  .testimonial-track .testimonial-card{ flex-basis:88%; min-width:240px; }
}
.t-arrow{
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:var(--white);
  border:1px solid rgba(7,63,110,.12);
  color:var(--navy-900);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card);
  font-size:1.1rem;
  z-index:2;
  transition:background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.t-arrow:hover{ background:var(--red-600); color:var(--white); }
.t-arrow--prev{ left:0; }
.t-arrow--next{ right:0; }
.testimonial-dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-top:.4rem;
}
.testimonial-dots button{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--steel-300);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.testimonial-dots button.is-active{
  background:var(--red-600);
  transform:scale(1.3);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-side{
  position:sticky;
  top:110px;
}
.faq-cta-card{
  background:var(--navy-900);
  color:var(--cream-100);
  border-radius:16px;
  clip-path:polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
  padding:1.8rem 1.6rem;
  margin-top:1.8rem;
}
.faq-cta-card h4{ color:var(--white); font-size:1.05rem; margin-bottom:.6rem; }
.faq-cta-card p{ font-size:.87rem; color:var(--steel-300); margin-bottom:1.1rem; }

.accordion-item{
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(7,63,110,.14);
}
.accordion-item:first-of-type,
.accordion-item:last-of-type{ border-radius:0; }
.accordion-button{
  background:transparent;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:1rem;
  color:var(--navy-950);
  padding:1.25rem .25rem;
  box-shadow:none !important;
}
.accordion-button:not(.collapsed){ color:var(--red-600); background:transparent; }
.accordion-button::after{
  background-image:none;
  content:"\2b";
  font-family:'bootstrap-icons';
  font-size:1.1rem;
  color:var(--navy-900);
  transition:transform .3s var(--ease), color .3s var(--ease);
  width:auto; height:auto;
}
.accordion-button:not(.collapsed)::after{
  content:"\2212";
  color:var(--red-600);
}
.accordion-body{
  padding:0 .25rem 1.4rem;
  color:var(--ink-500);
  font-size:.93rem;
  line-height:1.65;
}


.contact-info-card{
  background:var(--navy-900);
  color:var(--cream-100);
  border-radius:18px;
  clip-path:polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
  padding:2.4rem 2rem;
}
.contact-info-card h3{ color:var(--white); font-size:1.3rem; margin-bottom:1.4rem; }
.contact-row{
  display:flex;
  gap:.9rem;
  margin-bottom:1.2rem;
  align-items:flex-start;
}
.contact-row i{
  width:38px; height:38px;
  border-radius:9px;
  background:rgba(246,243,226,.12);
  display:flex; align-items:center; justify-content:center;
  color:var(--red-500);
  flex:none;
  font-size:1.05rem;
}
.contact-row .cr-label{
  font-family:var(--font-heading);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--steel-300);
  margin-bottom:.15rem;
}
.contact-row .cr-value{
  font-size:.95rem;
  color:var(--white);
}
.contact-row a.cr-value:hover{ color:var(--red-500); }

.contact-form-card{
  background:var(--white);
  border-radius:18px;
  box-shadow:var(--shadow-card);
  padding:2.4rem 2rem;
  border:1px solid rgba(7,63,110,.06);
}
.form-label{
  font-family:var(--font-heading);
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-700);
  margin-bottom:.4rem;
}
.form-control,
.form-select{
  border:1.5px solid var(--steel-300);
  border-radius:8px;
  padding:.7rem .9rem;
  font-size:.94rem;
  color:var(--ink-900);
}
.form-control:focus,
.form-select:focus{
  border-color:var(--navy-900);
  box-shadow:0 0 0 .18rem rgba(7,63,110,.14);
}
.form-note{
  font-size:.78rem;
  color:var(--ink-500);
  margin-top:.9rem;
}
#formSuccess{
  display:none;
}
#formSuccess.is-shown{
  display:flex;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: radial-gradient(circle at 50% 0%, #0d2c4b 0%, var(--navy-950) 80%);
  color:var(--steel-300);
  padding-top:4.5rem;
  border-top: 2px solid rgba(246,243,226,0.03);
  box-shadow: inset 0 12px 36px rgba(0,0,0,0.3);
}
.footer-brand img{ height:52px; margin-bottom:1rem; filter:brightness(0) invert(1); opacity:.95; }
.footer-blurb{ font-size:.9rem; line-height:1.6; max-width:280px; color:var(--steel-300); }
.footer-social{
  display:flex; gap:.6rem;
  margin-top:1.3rem;
}
.footer-social a{
  width:38px; height:38px;
  border-radius:9px;
  border:1px solid rgba(246,243,226,.18);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.footer-social a:hover{
  background:var(--red-600);
  border-color:var(--red-600);
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(210,11,6,0.3);
}

.footer-heading{
  font-family:var(--font-heading);
  color:var(--white);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:1.3rem;
}
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.7rem; }
.footer-links a{
  font-size:.9rem;
  color:var(--steel-300);
  transition:color .25s var(--ease), padding-left .25s var(--ease), text-shadow .25s var(--ease);
}
.footer-links a:hover{
  color:var(--white);
  padding-left:6px;
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.footer-links li i {
  color: var(--red-500);
  transition: transform .25s var(--ease);
  display: inline-block;
}
.footer-links li:hover i {
  transform: scale(1.2) rotate(-5deg);
}

.footer-bottom{
  margin-top:3.5rem;
  padding:2rem 0;
  border-top:1px solid rgba(246,243,226,0.07);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-size:.8rem;
  color:var(--steel-400);
  text-align:center;
}
.footer-bottom a{ color:var(--steel-400); transition: color .2s var(--ease); }
.footer-bottom a:hover{ color:var(--white); }
.footer-legal-links{ display:none; }

/* ==========================================================================
   Back to top + mobile sticky call bar
   ========================================================================== */
.back-to-top{
  position:fixed;
  right:1.4rem;
  bottom:1.4rem;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--navy-900);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  box-shadow:var(--shadow-card);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
  z-index:1040;
  border:none;
}
.back-to-top.is-visible{
  opacity:1; visibility:visible; transform:none;
}
.back-to-top:hover{ background:var(--red-600); }

.mobile-cta-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1045;
  display:flex;
  background:var(--white);
  box-shadow:0 -10px 24px -14px rgba(5,44,78,.35);
  padding:.6rem .8rem;
  gap:.6rem;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
}
.mobile-cta-bar .btn{ flex:1; font-size:.8rem; padding:.75rem .5rem; }
@media (min-width:992px){
  .mobile-cta-bar{ display:none; }
}
body{ padding-bottom:0; }
@media (max-width:991.98px){
  body{ padding-bottom:70px; }
}

/* ==========================================================================
   Scroll reveal (progressive enhancement — see main.js)
   ========================================================================== */
.reveal-ready [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-ready [data-reveal].is-visible{
  opacity:1;
  transform:none;
}
[data-reveal-stagger] > *{
  transition-delay:calc(var(--stagger-i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
  .pulse-dot::after,
  .blueprint-card.is-drawn .bp-pulse,
  .bp-pipe{ animation:none !important; transition:none !important; }
  .bp-pipe{ stroke-dashoffset:0; }
}

/* ==========================================================================
   Divider dots (brand motif)
   ========================================================================== */
.dot-divider{
  display:flex;
  align-items:center;
  gap:.4rem;
  justify-content:center;
  margin:0 auto 1.4rem;
}
.dot-divider span{
  width:5px; height:5px; border-radius:50%; background:var(--steel-400);
}
.dot-divider .line{
  width:46px; height:2px; background:var(--steel-400); border-radius:2px;
}