/* ═══════════════════════════════════════════════════════════════
   Mr. Plumber, Inc.
   Light-dominant. Navy anchors, brick red acts, copper connects.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* surface */
  --paper:#FFFFFF;
  --mist:#F3F6FA;
  --line:rgba(31,45,58,.10);
  --line-strong:rgba(31,45,58,.16);

  /* anchor */
  --navy:#1F2D3A;
  --navy-2:#2A3C4C;
  --navy-3:#3A5063;

  /* act */
  --brick:#C1503F;
  --brick-deep:#A8422F;
  /* buttons: white on --red is 6.6:1, on --red-deep 8.6:1 (WCAG AA) */
  --red:#B3261E;
  --red-deep:#951F19;

  /* connect: the heritage line */
  --copper:#B4713C;
  --copper-lt:#D9A063;
  --copper-hi:#F0C795;
  --copper-dk:#7E4B22;

  /* ink */
  --ink:#2B2E33;
  --ink-mid:#5E6874;
  --ink-soft:#8791A0;

  /* type */
  --display:'Manrope',system-ui,sans-serif;
  --body:'Montserrat',system-ui,-apple-system,sans-serif;

  /* form */
  --r-card:20px;
  --r-panel:28px;
  --shadow-s:0 2px 8px rgba(31,45,58,.05);
  --shadow-m:0 14px 40px -18px rgba(31,45,58,.22);
  --shadow-l:0 40px 90px -40px rgba(31,45,58,.42);

  --nav-h:74px;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:104px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);color:var(--navy);line-height:1.08;letter-spacing:-.02em}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}

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

.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
  font-family:var(--display);font-weight:700;text-decoration:none;
}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}

/* ── section rhythm ─────────────────────────────────────────── */
.sec{padding-block:104px;position:relative}
.sec--mist{background:var(--mist)}
.sec__head{max-width:660px;margin-bottom:52px}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head--center .eyebrow{justify-content:center}

/* ── type scale ─────────────────────────────────────────────── */
.h2{font-size:clamp(2rem,1.35rem + 2.6vw,3.1rem);font-weight:800}
.h2--sm{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.h2--light{color:#fff}

.lede{margin-top:18px;font-size:1.06rem;line-height:1.72;color:var(--ink-mid);max-width:60ch}
.lede--light{color:rgba(255,255,255,.76)}

/* eyebrow: copper hairline, used everywhere as the connective tissue */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--copper);
  margin-bottom:20px;
}
.eyebrow__rule{width:34px;height:2px;background:var(--copper);border-radius:2px;flex:none}
.eyebrow--light{color:var(--copper-hi)}
.eyebrow--light .eyebrow__rule{background:var(--copper-hi)}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:.94rem;letter-spacing:-.005em;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .25s,color .25s,border-color .25s;
}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn--lg{padding:17px 32px;font-size:1rem}
.btn--sm{padding:10px 18px;font-size:.85rem}
.btn--block{width:100%}

.btn--brick{background:var(--red);color:#fff;box-shadow:0 10px 26px -12px rgba(179,38,30,.75)}
.btn--brick:hover,.btn--brick:active{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(179,38,30,.72)}

.btn--glass{
  background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.34);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.btn--glass:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}

.btn--outline{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn--outline:hover{border-color:var(--copper);color:var(--copper);transform:translateY(-2px)}

/* ═══════════════ NAV ═══════════════ */
.nav{position:fixed;inset:14px 0 auto;z-index:90;pointer-events:none}
.nav__inner{
  width:calc(100% - 32px);max-width:var(--wrap);margin-inline:auto;pointer-events:auto;
  height:var(--nav-h);display:flex;align-items:center;gap:20px;
  padding:0 12px 0 18px;border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 12px 34px -18px rgba(31,45,58,.4);
  transition:background .3s,box-shadow .3s;
}
.nav.is-stuck .nav__inner{background:rgba(255,255,255,.93);box-shadow:0 14px 40px -20px rgba(31,45,58,.5)}

.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand__mark{display:flex;align-items:center;height:50px}
.brand__mark img{display:block;height:100%;width:auto;max-width:none;object-fit:contain}

.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__links a{
  font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--navy);
  text-decoration:none;padding:9px 14px;border-radius:999px;position:relative;
  transition:color .2s,background .2s;
}
.nav__links a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--copper);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__actions{display:flex;align-items:center;gap:10px;flex:none}

.burger{
  display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:12px;
}
.burger span{width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .3s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed;z-index:89;top:calc(var(--nav-h) + 22px);left:16px;right:16px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--line);border-radius:24px;padding:14px;
  box-shadow:var(--shadow-l);
  animation:drop .32s cubic-bezier(.2,.8,.3,1);
}
@keyframes drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.drawer nav{display:flex;flex-direction:column;margin-bottom:12px}
.drawer nav a{
  font-family:var(--display);font-weight:600;font-size:1rem;color:var(--navy);
  text-decoration:none;padding:14px 12px;border-radius:14px;
  border-bottom:1px solid var(--line);
}
.drawer nav a:last-child{border-bottom:0}
.drawer__note{text-align:center;font-size:.78rem;color:var(--ink-soft);margin-top:10px;letter-spacing:.04em}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;min-height:min(94svh,880px);
  display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 90px) 0 76px;
  overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:-4%;z-index:-2}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  filter:saturate(106%);
  transform:scale(1.06);
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{from{transform:scale(1.06)}to{transform:scale(1.12)}}

/* navy-tinted glass over the fleet: deep enough for AA text, light enough to read the trucks */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(16,24,32,.62) 0%,rgba(22,32,42,.5) 34%,rgba(26,38,49,.78) 100%),
    linear-gradient(100deg,rgba(31,45,58,.66) 0%,rgba(31,45,58,.18) 62%);
}
.hero__inner{position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}

.hero__h1{
  color:#fff;font-size:clamp(2.5rem,1.5rem + 4.4vw,4.6rem);font-weight:800;
  letter-spacing:-.032em;text-shadow:0 2px 30px rgba(10,16,22,.45);
  max-width:16ch;
}
.hero__h1-alt{font-weight:500;color:rgba(255,255,255,.9)}

.hero__sub{
  margin-top:22px;max-width:46ch;font-size:clamp(1.02rem,.96rem + .3vw,1.19rem);
  color:rgba(255,255,255,.86);line-height:1.62;text-shadow:0 1px 16px rgba(10,16,22,.4);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}

.creds{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:38px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.2);
}
.creds li{
  font-family:var(--display);font-weight:600;font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
  display:flex;align-items:center;gap:10px;
}
.creds li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--copper-lt);flex:none}

/* ═══════════════ TANKLESS ═══════════════ */
.sec--tankless{padding-block:96px}
.tank{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  border-radius:var(--r-panel);overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 52%,#33495B 100%);
  box-shadow:var(--shadow-l);position:relative;
}
/* faint copper pipework glow, top-right */
.tank::after{
  content:'';position:absolute;top:-40%;right:-14%;width:52%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(217,160,99,.24),transparent 68%);
  pointer-events:none;
}
.tank__copy{padding:clamp(34px,4vw,62px);position:relative;z-index:1}
.tank__copy .lede{margin-bottom:30px}
.tank__copy .btn{margin-top:34px}

.ticks{display:grid;gap:13px}
.ticks li{
  position:relative;padding-left:32px;color:rgba(255,255,255,.9);font-size:1rem;line-height:1.5;
}
.ticks li::before{
  content:'';position:absolute;left:0;top:.36em;width:18px;height:18px;border-radius:50%;
  background:rgba(217,160,99,.16);border:1.5px solid var(--copper-lt);
}
.ticks li::after{
  content:'';position:absolute;left:6px;top:.62em;width:6px;height:3px;
  border-left:2px solid var(--copper-hi);border-bottom:2px solid var(--copper-hi);
  transform:rotate(-45deg);
}
.ticks--dark li{color:var(--ink)}
.ticks--dark li::before{background:rgba(180,113,60,.1);border-color:var(--copper)}
.ticks--dark li::after{border-color:var(--copper-dk)}

.tank__card{
  padding:clamp(30px,3vw,44px);position:relative;z-index:1;
  background:rgba(255,255,255,.08);
  border-left:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;
}
.tank__card-kicker{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--copper-hi);margin-bottom:24px;
}
.spec{display:grid;gap:0}
.spec__row{padding:17px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.spec__row:first-child{padding-top:0}
.spec dt{
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.52);margin-bottom:5px;
}
.spec dd{color:#fff;font-size:.97rem;line-height:1.5}
.tank__card-foot{
  margin-top:auto;padding-top:22px;font-size:.85rem;line-height:1.6;
  color:rgba(255,255,255,.62);
}

/* ═══════════════ SERVICE CARDS ═══════════════ */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-m);
  border-radius:var(--r-card);padding:30px 26px 32px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 56px -24px rgba(31,45,58,.32)}
.card__icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:linear-gradient(150deg,rgba(180,113,60,.14),rgba(180,113,60,.05));
  border:1px solid rgba(180,113,60,.2);margin-bottom:22px;
}
.card__icon svg{
  width:26px;height:26px;fill:none;stroke:var(--copper);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.card h3{font-size:1.09rem;font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
.card p{font-size:.94rem;color:var(--ink-mid);line-height:1.6}

/* ═══════════════ EMERGENCY BANNER: dominant CTA ═══════════════ */
.emergency{
  display:flex;align-items:center;justify-content:space-between;gap:28px 40px;flex-wrap:wrap;
  margin-bottom:64px;padding:clamp(24px,3.2vw,40px) clamp(22px,3.4vw,46px);
  border-radius:var(--r-panel);
  background:linear-gradient(135deg,var(--brick) 0%,var(--brick-deep) 100%);
  box-shadow:0 30px 70px -30px rgba(168,66,47,.7);
  position:relative;overflow:hidden;isolation:isolate;
}
.emergency::after{
  content:'';position:absolute;inset:-40% -10% auto auto;width:46%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);
}
.emergency__kicker{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:10px;
}
.emergency__h{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;color:#fff;
  font-size:clamp(1.5rem,1.15rem + 1.7vw,2.3rem);line-height:1.1;
}
.emergency__sub{margin-top:10px;max-width:44ch;color:rgba(255,255,255,.85);font-size:.97rem;line-height:1.55}

.emergency__cta{
  position:relative;flex:none;display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  padding:20px 40px;border-radius:999px;background:#fff;color:var(--red-deep);
  text-decoration:none;font-family:var(--display);
  box-shadow:0 16px 40px -12px rgba(16,24,32,.5);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s;
}
.emergency__cta svg{width:22px;height:22px;fill:var(--red);margin-bottom:2px}
.emergency__cta-label{font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.emergency__cta-num{font-weight:800;font-size:clamp(1.4rem,1.1rem + 1.1vw,1.9rem);letter-spacing:-.02em;line-height:1}
.emergency__cta:hover{transform:translateY(-4px);box-shadow:0 24px 54px -14px rgba(16,24,32,.55)}
.emergency__cta::before{
  content:'';position:absolute;inset:0;border-radius:999px;z-index:-1;
  box-shadow:0 0 0 0 rgba(255,255,255,.55);
  animation:siren 2.4s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes siren{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}
  70%{box-shadow:0 0 0 22px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* ═══════════════ RESIDENTIAL SERVICE GRID ═══════════════ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-m);
  border-radius:var(--r-card);padding:26px 24px 28px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
}
.svc:hover{transform:translateY(-5px);box-shadow:0 26px 56px -24px rgba(31,45,58,.3)}
.svc h3{
  font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px;
  text-align:center;
}
.svc p{font-size:.92rem;color:var(--ink-mid);line-height:1.6}
.svc p a{color:var(--brick);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(193,80,63,.3)}
.svc p a:hover{border-color:var(--brick)}

/* facility-maintenance callout inside commercial split */
.fm-note{
  margin-top:24px;padding:22px 24px;border-radius:var(--r-card);
  background:var(--navy);color:rgba(255,255,255,.86);
}
.fm-note__tag{
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper-hi);margin-bottom:10px;
}
.fm-note p:not(.fm-note__tag){font-size:.95rem;line-height:1.62}
.fm-note strong{color:#fff}

/* tankless dual CTA */
.tank__cta{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:34px}
.tank__cta .btn{margin-top:0}
.tank__cta .btn svg{width:16px;height:16px;stroke:currentColor;fill:none}

/* ═══════════════ SIGNATURE: THE COPPER LINE ═══════════════ */
.sec--rail{padding-block:110px;overflow:hidden}

.rail{position:relative;margin-top:8px}

/* the pipe: a cylinder, drawn with a vertical gradient highlight */
.rail__pipe{
  position:absolute;top:70px;left:calc(12.5% - 2px);right:calc(12.5% - 2px);height:9px;
  border-radius:9px;background:rgba(31,45,58,.07);overflow:hidden;
}
.rail__flow{
  display:block;height:100%;width:100%;border-radius:9px;transform-origin:left center;
  transform:scaleX(0);transition:transform 1.8s cubic-bezier(.35,.6,.2,1);
  background:linear-gradient(180deg,
    var(--copper-dk) 0%,var(--copper) 26%,var(--copper-hi) 48%,
    var(--copper-lt) 62%,var(--copper-dk) 100%);
}
.rail.is-flowing .rail__flow{transform:scaleX(1)}

.rail__list{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}

.gen{position:relative;padding-top:104px;text-align:center;padding-inline:8px}

/* soldered coupling at each generation */
.gen__joint{
  position:absolute;top:63px;left:50%;transform:translateX(-50%);
  width:30px;height:23px;border-radius:5px;
  background:linear-gradient(180deg,var(--copper-dk),var(--copper) 30%,var(--copper-hi) 50%,var(--copper) 68%,var(--copper-dk));
  box-shadow:
    inset 5px 0 0 -3.5px rgba(255,255,255,.4),
    inset -5px 0 0 -3.5px rgba(255,255,255,.4),
    0 4px 12px -4px rgba(126,75,34,.65);
  opacity:0;transition:opacity .4s ease,transform .5s cubic-bezier(.2,1.5,.4,1);
}
.rail.is-flowing .gen__joint{opacity:1;transform:translateX(-50%) scale(1)}
.rail .gen:nth-child(1) .gen__joint{transition-delay:.15s}
.rail .gen:nth-child(2) .gen__joint{transition-delay:.55s}
.rail .gen:nth-child(3) .gen__joint{transition-delay:.95s}
.rail .gen:nth-child(4) .gen__joint{transition-delay:1.35s}

.gen--now .gen__joint{
  box-shadow:
    inset 5px 0 0 -3.5px rgba(255,255,255,.45),
    inset -5px 0 0 -3.5px rgba(255,255,255,.45),
    0 0 0 5px rgba(180,113,60,.15),
    0 4px 14px -4px rgba(126,75,34,.7);
}

.gen__num{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,1.9rem + 2.4vw,3.7rem);line-height:1;
  color:var(--navy);letter-spacing:-.04em;
}
.gen__num sup{font-size:.36em;font-weight:700;top:-1.15em;position:relative;color:var(--copper);margin-left:2px}
.gen--now .gen__num{color:var(--copper)}

.gen__label{
  margin-top:11px;font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);
}
.gen--now .gen__label{color:var(--brick)}
.gen__body{margin-top:15px;font-size:.93rem;line-height:1.62;color:var(--ink-mid)}

.heritage__foot{
  display:flex;align-items:center;gap:26px;margin-top:78px;padding:26px 32px;
  background:var(--mist);border-radius:var(--r-card);
  border-left:3px solid var(--copper);
}
.heritage__mascot{flex:none;display:flex;align-items:center}
.heritage__mascot img{display:block;width:190px;height:auto;max-width:none}
.heritage__quote{
  font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,1rem + .8vw,1.6rem);
  color:var(--navy);letter-spacing:-.02em;
}
.heritage__meta{margin-top:8px;font-size:.87rem;color:var(--ink-mid)}

/* ═══════════════ COMMERCIAL ═══════════════ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.split__copy .btn{margin-top:32px}
.split__note{
  margin-top:20px;padding-left:18px;border-left:2px solid var(--copper);
  font-size:.95rem;color:var(--ink-mid);line-height:1.62;
}
.split__aside{
  background:rgba(255,255,255,.78);border:1px solid #fff;border-radius:var(--r-panel);
  padding:36px 34px;box-shadow:var(--shadow-m);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.chips__title{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--copper);margin-bottom:20px;
}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{
  font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--navy);
  padding:11px 18px;border-radius:999px;background:var(--mist);
  border:1px solid var(--line);transition:border-color .25s,color .25s,transform .25s;
}
.chips li:hover{border-color:var(--copper);color:var(--copper);transform:translateY(-2px)}

/* ═══════════════ WHY + FINANCING ═══════════════ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.duo__why .ticks{margin-top:28px}
.duo__fin{
  background:var(--mist);border-radius:var(--r-panel);padding:clamp(30px,3vw,44px);
  border:1px solid var(--line);
}
.duo__fin .btn{margin-top:28px}
.lenders{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.lenders li{
  font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--navy);
  padding:10px 18px;background:#fff;border-radius:12px;border:1px solid var(--line);
}

/* ═══════════════ REVIEWS ═══════════════ */
.sec--reviews{padding-block:88px}
.review__links{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:32px}
.review__links .btn--outline{background:#fff}
.review__links .btn--brick{background:var(--red);color:#fff}
.review__links .btn--brick:hover{background:var(--red-deep)}
.review__links .btn--glass{background:rgba(255,255,255,.13)}

/* ═══════════════ CONTACT ═══════════════ */
.sec--contact{
  background:linear-gradient(160deg,var(--navy) 0%,#243542 58%,#1A2732 100%);
  padding-block:100px;
}
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}

.callout{
  display:block;margin-top:36px;padding:26px 30px;border-radius:var(--r-card);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  text-decoration:none;transition:background .25s,border-color .25s,transform .25s;
}
.callout:hover{background:rgba(255,255,255,.12);border-color:var(--copper-lt);transform:translateY(-2px)}
.callout__label{
  display:block;font-family:var(--display);font-weight:700;font-size:.7rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--copper-hi);
}
.callout__num{
  display:block;margin-top:8px;font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.35rem);color:#fff;letter-spacing:-.02em;
}
.callout__sub{display:block;margin-top:4px;font-size:.86rem;color:rgba(255,255,255,.6)}

/* emergency-flavoured call box: signals "call us for emergencies";
   the form stays the calm, default path for everything else */
.callout--sos{
  background:linear-gradient(135deg,var(--brick),var(--brick-deep));
  border-color:rgba(255,255,255,.28);
  box-shadow:0 20px 50px -22px rgba(168,66,47,.75);
}
.callout--sos .callout__label{color:#fff}
.callout--sos .callout__sub{color:rgba(255,255,255,.85)}
.callout--sos:hover{border-color:#fff;background:linear-gradient(135deg,var(--brick-deep),#8f3826)}
.callout__label-row{display:flex;align-items:center;gap:9px}
.callout__label-row svg{width:16px;height:16px;fill:#fff;flex:none}

.info{margin-top:34px;display:grid;gap:0}
.info>div{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.11)}
.info>div:last-child{border-bottom:0}
.info dt{
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:5px;
}
.info dd{color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.55}

/* ── the form card ──────────────────────────────────────────── */
.formcard{
  background:rgba(255,255,255,.97);border-radius:var(--r-panel);
  padding:clamp(28px,3vw,44px);box-shadow:var(--shadow-l);
  border:1px solid rgba(255,255,255,.6);
}
.form__title{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--navy);letter-spacing:-.02em}
.form__sub{margin-top:8px;margin-bottom:28px;font-size:.93rem;color:var(--ink-mid);line-height:1.6}

.field{margin-bottom:18px;display:flex;flex-direction:column}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{
  font-family:var(--display);font-weight:700;font-size:.79rem;letter-spacing:.04em;
  color:var(--navy);margin-bottom:8px;
}
.opt{font-weight:500;color:var(--ink-soft);letter-spacing:0}

.field input,.field textarea,.select select{
  width:100%;font-family:var(--body);font-size:.97rem;color:var(--ink);
  padding:14px 16px;border-radius:13px;background:var(--mist);
  border:1.5px solid transparent;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:104px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-soft)}
.field input:focus,.field textarea:focus,.select select:focus{
  outline:none;background:#fff;border-color:var(--copper);
  box-shadow:0 0 0 4px rgba(180,113,60,.14);
}
.field input:focus-visible,.field textarea:focus-visible,.select select:focus-visible{outline:none}

.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px}
.select svg{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}

.err{font-size:.79rem;color:var(--brick);margin-top:6px;min-height:0;display:none;font-weight:500}
.field.is-bad input,.field.is-bad textarea,.field.is-bad .select select{
  border-color:var(--brick);background:rgba(193,80,63,.05);
}
.field.is-bad .err{display:block}

.check{display:flex;align-items:center;gap:12px;cursor:pointer;margin:6px 0 26px;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  width:22px;height:22px;border-radius:7px;background:var(--mist);
  border:1.5px solid var(--line-strong);flex:none;position:relative;transition:all .2s;
}
.check__box::after{
  content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;
  border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(45deg) scale(0);transition:transform .2s cubic-bezier(.2,1.4,.4,1);
}
.check input:checked + .check__box{background:var(--brick);border-color:var(--brick)}
.check input:checked + .check__box::after{transform:rotate(45deg) scale(1)}
.check input:focus-visible + .check__box{outline:3px solid var(--copper);outline-offset:3px}
.check__text{font-size:.92rem;color:var(--ink)}

.form__foot{margin-top:18px;text-align:center;font-size:.85rem;color:var(--ink-mid);line-height:1.6}
.form__foot a{color:var(--brick);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(193,80,63,.3)}
.form__foot a:hover{border-color:var(--brick)}

.btn.is-busy{opacity:.72;pointer-events:none}

/* success panel */
.sent{text-align:center;padding:26px 6px 12px;animation:drop .4s cubic-bezier(.2,.8,.3,1)}
.sent__tick{
  display:grid;place-items:center;width:62px;height:62px;margin:0 auto 22px;
  border-radius:50%;background:rgba(180,113,60,.12);border:1.5px solid var(--copper);
}
.sent__tick svg{width:28px;height:28px;fill:none;stroke:var(--copper-dk);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sent__h{font-family:var(--display);font-weight:800;font-size:1.45rem;color:var(--navy);letter-spacing:-.02em}
.sent__p{margin:12px auto 26px;max-width:38ch;font-size:.95rem;color:var(--ink-mid);line-height:1.62}
.sent__p a{color:var(--brick);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(193,80,63,.3)}

/* ═══════════════ FOOTER ═══════════════ */
.foot{background:#16212B;color:rgba(255,255,255,.7);padding:64px 0 30px}
.foot__top{
  display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;
  padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1);
}
.foot__word{
  font-family:var(--display);font-weight:800;font-size:1.6rem;color:#fff;letter-spacing:-.03em;
}
.foot__word span{color:var(--copper-lt)}
.foot__tag{
  margin-top:10px;font-family:var(--display);font-weight:600;font-size:.8rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--copper-lt);
}
.foot__nav{display:grid;grid-template-columns:repeat(2,minmax(140px,auto));gap:10px 44px;align-content:start}
.foot__nav a{
  font-size:.9rem;color:rgba(255,255,255,.68);text-decoration:none;transition:color .2s;
}
.foot__nav a:hover{color:var(--copper-lt)}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;
  padding-top:24px;font-size:.8rem;color:rgba(255,255,255,.45);
}

/* ═══════════════ MOBILE CALL BAR ═══════════════ */
.fab{
  position:fixed;z-index:88;left:16px;right:16px;bottom:16px;display:none;
  align-items:center;justify-content:center;gap:10px;
  padding:16px;border-radius:999px;background:var(--red);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1rem;text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(179,38,30,.8);
}
.fab svg{width:19px;height:19px;fill:currentColor}

/* ═══════════════ MOTION ═══════════════ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.3,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.3,1) var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1080px){
  .nav__links{display:none}
  .nav__actions{margin-left:auto}
  .burger{display:flex}
  .tank{grid-template-columns:1fr}
  .tank__card{border-left:0;border-top:1px solid rgba(255,255,255,.13)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr;gap:40px}
  .contact__aside{order:2}
  .formcard{order:1}
}

@media (max-width:900px){
  .split,.duo{grid-template-columns:1fr;gap:40px}
  .rail__pipe{display:none}
  .rail__list{grid-template-columns:1fr;gap:0}
  .gen{
    text-align:left;padding-top:0;padding-left:46px;padding-bottom:34px;padding-inline-end:0;
    border-left:2px solid rgba(31,45,58,.09);margin-left:14px;
  }
  .gen:last-child{border-left-color:transparent;padding-bottom:0}
  .gen__joint{
    top:6px;left:-16px;transform:none;width:30px;height:23px;opacity:1;
  }
  .rail.is-flowing .gen__joint{transform:none}
  .gen__num{font-size:2.3rem}
  .gen__label{margin-top:6px}
  .heritage__foot{flex-direction:column;text-align:center;gap:18px;padding:30px 24px;border-left:0;border-top:3px solid var(--copper)}
}

@media (max-width:720px){
  body{font-size:16px}
  .sec,.sec--tankless,.sec--rail,.sec--contact,.sec--reviews{padding-block:68px}
  .wrap{padding-inline:18px}
  .hero{min-height:auto;padding:calc(var(--nav-h) + 74px) 0 64px}
  .hero__bg img{filter:saturate(106%)}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .creds{gap:8px 18px;margin-top:30px}
  .creds li{font-size:.68rem}
  .cards{grid-template-columns:1fr;gap:16px}
  .svc-grid{grid-template-columns:1fr;gap:14px}
  .emergency{flex-direction:column;align-items:stretch;text-align:center;margin-bottom:48px}
  .emergency__sub{margin-inline:auto}
  .emergency__cta{width:100%}
  .tank__cta{flex-direction:column;align-items:stretch}
  .tank__cta .btn{width:100%}
  .field-row{grid-template-columns:1fr;gap:0}
  .foot__nav{grid-template-columns:1fr}
  .brand__mark{height:42px}
  .heritage__mascot img{width:170px}
  .fab{display:flex}
  .sec--contact{padding-bottom:110px}
  .foot{padding-bottom:100px}
  .sec__head{margin-bottom:36px}
  .heritage__foot{margin-top:44px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{opacity:1;transform:none}
  .rail__flow{transform:scaleX(1)}
  .gen__joint{opacity:1}
  .hero__bg img{animation:none}
  .lift,.lift:hover,
  .card:hover,.svc:hover,.feature:hover,.cmx-step:hover,.cmx-ind:hover,.cmx-fact:hover,
  .stat:hover,.teaser:hover,.tile:hover,.svc-row:hover,.ind:hover,.ind:focus-within,
  .cmx-hero__panel:hover,.split__aside:hover,.duo__fin:hover,.chips li:hover,.lenders li:hover{
    transform:none!important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-PAGE SHELL + FLOAT-ON-HOVER INTERACTION LAYER
   ═══════════════════════════════════════════════════════════════ */

/* ── page-load entrance ─────────────────────────────────────── */
/* page-load fade: OPACITY ONLY.
   Never animate transform on <body>: a transform (even a finished one with
   fill-mode both) makes <body> the containing block for position:fixed,
   which breaks the fixed nav, the call FAB and the mobile drawer. */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.page-fade{animation:pageIn .45s ease both}

/* hero: stacked sub-CTA row */
.hero__cta--sub{margin-top:14px}
.hero__cta--sub .btn svg{width:16px;height:16px;stroke:currentColor;fill:none}

/* ── universal float-on-hover ───────────────────────────────────
   Anything that should "pop up like it's floating" gets .lift.
   Cards, chips, links, list items, callouts, teasers all opt in. */
.lift{
  transition:
    transform .34s cubic-bezier(.2,.75,.25,1),
    box-shadow .34s cubic-bezier(.2,.75,.25,1),
    border-color .34s, background .34s, color .34s;
  will-change:transform;
}
.lift:hover,.lift:focus-visible{
  transform:translateY(-8px);
  box-shadow:0 34px 70px -28px rgba(31,45,58,.4);
}
.lift--sm:hover,.lift--sm:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-m)}

/* buttons: a touch more pop than before */
.btn{will-change:transform}
.btn--brick:hover{transform:translateY(-3px)}
.btn--glass:hover,.btn--outline:hover{transform:translateY(-3px)}

/* every card-like surface on the site floats on hover.
   translate only (never scale) so type stays pixel-crisp. */
.card,.svc,.feature,.cmx-step,.cmx-ind,.cmx-fact,.stat,.teaser,.tile,
.split__aside,.duo__fin,.callout,.tank__card,.chips li,.lenders li,.review__links .btn{
  transition:transform .34s cubic-bezier(.2,.75,.25,1),box-shadow .34s cubic-bezier(.2,.75,.25,1),border-color .3s,color .3s,background .3s;
}
.card:hover,.svc:hover{transform:translateY(-8px);box-shadow:0 34px 70px -28px rgba(31,45,58,.4)}
.feature:hover,.cmx-step:hover,.cmx-ind:hover,.stat:hover,.teaser:hover,.tile:hover{
  transform:translateY(-8px);box-shadow:0 34px 70px -28px rgba(31,45,58,.4);
}
.cmx-ind:hover{border-color:rgba(180,113,60,.5)}
.cmx-fact:hover{transform:translateY(-5px)}
.split__aside:hover,.duo__fin:hover{transform:translateY(-6px);box-shadow:0 34px 70px -30px rgba(31,45,58,.36)}
.chips li:hover,.lenders li:hover{transform:translateY(-4px);border-color:var(--copper);color:var(--copper)}
.nav__links a{transition:color .2s,background .2s,transform .2s}
.nav__links a:hover{transform:translateY(-1px)}
.foot__nav a{display:inline-block;transition:color .2s,transform .2s}
.foot__nav a:hover{transform:translateX(3px)}

/* ── shared inner-page hero ─────────────────────────────────── */
.subhero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--nav-h) + 92px) 0 68px;
  background:linear-gradient(160deg,var(--navy) 0%,#243542 58%,#1A2732 100%);
  color:#fff;
}
.subhero::after{
  content:'';position:absolute;inset:-30% -8% auto auto;width:42%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(217,160,99,.2),transparent 70%);
}
.subhero__inner{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.subhero h1{
  color:#fff;font-size:clamp(2.2rem,1.5rem + 3vw,3.5rem);font-weight:800;
  letter-spacing:-.03em;max-width:20ch;
}
.subhero__sub{margin-top:18px;max-width:56ch;color:rgba(255,255,255,.82);font-size:clamp(1rem,.95rem + .3vw,1.16rem);line-height:1.64}
.subhero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.crumb{
  display:flex;gap:8px;align-items:center;margin-bottom:22px;
  font-family:var(--display);font-weight:600;font-size:.8rem;color:rgba(255,255,255,.6);
}
.crumb a{color:rgba(255,255,255,.82);text-decoration:none}
.crumb a:hover{color:var(--copper-hi)}

/* ── landing: who we are ───────────────────────────────────── */
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.story__media{
  position:relative;border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--shadow-l);
  background:var(--mist);aspect-ratio:4/3;
}
.story__media img{width:100%;height:100%;object-fit:cover}
.story__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 18px;text-align:center;box-shadow:var(--shadow-s);
}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--navy);letter-spacing:-.02em}
.stat span{display:block;margin-top:4px;font-size:.78rem;color:var(--ink-mid);line-height:1.4}

/* ── landing: section teasers → their own pages ─────────────── */
.teasers{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.teaser{
  display:flex;flex-direction:column;gap:12px;text-decoration:none;
  padding:32px 30px 28px;border-radius:var(--r-panel);
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-m);
  position:relative;overflow:hidden;
}
.teaser::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--copper);
  transform:scaleY(0);transform-origin:top;transition:transform .34s cubic-bezier(.2,.75,.25,1);
}
.teaser:hover::before,.teaser:focus-visible::before{transform:scaleY(1)}
.teaser__icon{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(180,113,60,.16),rgba(180,113,60,.05));
  border:1px solid rgba(180,113,60,.22);
}
.teaser__icon svg{width:26px;height:26px;fill:none;stroke:var(--copper);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.teaser h3{font-size:1.2rem;font-weight:800;letter-spacing:-.01em}
.teaser p{font-size:.95rem;color:var(--ink-mid);line-height:1.6}
.teaser__go{
  margin-top:auto;font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--brick);
  display:inline-flex;align-items:center;gap:7px;
}
.teaser__go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.teaser:hover .teaser__go svg{transform:translateX(4px)}

/* ── generic content sections for inner pages ──────────────── */
.prose{max-width:66ch}
.prose p + p{margin-top:16px}
.prose h3{margin-top:34px;margin-bottom:10px;font-size:1.2rem}
.prose strong{color:var(--navy)}
.prose ul{display:grid;gap:10px;margin-top:16px}
.prose ul li{position:relative;padding-left:26px;color:var(--ink-mid);line-height:1.6}
.prose ul li::before{content:'';position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:rgba(180,113,60,.16);border:1.5px solid var(--copper)}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 24px;box-shadow:var(--shadow-m);
}
.sec--mist .feature{background:#fff}
.feature h3{font-size:1.06rem;font-weight:700;margin-bottom:8px;text-align:center}
.feature p{font-size:.92rem;color:var(--ink-mid);line-height:1.6}

/* ── COMMERCIAL PAGE: full redesign ───────────────────────── */
.cmx-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
.cmx-hero__panel{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-panel);
  padding:28px 30px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:transform .34s cubic-bezier(.2,.75,.25,1),box-shadow .34s,border-color .3s;
}
.cmx-hero__panel:hover{
  transform:translateY(-6px);border-color:rgba(240,199,149,.4);
  box-shadow:0 30px 62px -28px rgba(10,16,22,.7);
}
.cmx-hero__panel dt{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--copper-hi)}
.cmx-hero__panel dd{margin:6px 0 18px;color:#fff;font-size:1rem;line-height:1.5}
.cmx-hero__panel dd:last-child{margin-bottom:0}

/* priority partner band */
.cmx-priority{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:var(--r-panel);overflow:hidden;
  box-shadow:var(--shadow-l);background:linear-gradient(135deg,var(--navy),var(--navy-2) 60%,#33495B);
}
.cmx-priority__copy{padding:clamp(30px,3.6vw,52px);color:#fff}
.cmx-priority__copy .eyebrow{color:var(--copper-hi)}
.cmx-priority__copy .eyebrow__rule{background:var(--copper-hi)}
.cmx-priority__copy h2{color:#fff}
.cmx-priority__copy p{margin-top:16px;color:rgba(255,255,255,.82);line-height:1.65}
.cmx-priority__facts{
  padding:clamp(30px,3.6vw,52px);background:rgba(255,255,255,.06);
  border-left:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:22px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.cmx-fact b{
  display:block;font-family:var(--display);font-weight:800;font-size:1.9rem;color:#fff;letter-spacing:-.02em;line-height:1;
}
.cmx-fact span{display:block;margin-top:8px;font-size:.9rem;color:rgba(255,255,255,.62);line-height:1.5}

/* industries as a clean gallery */
.cmx-industries{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cmx-ind{
  display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:var(--r-card);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s);
}
.cmx-ind svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--copper);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cmx-ind span{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--navy);letter-spacing:-.01em}
.cmx-ind--star{background:var(--navy);border-color:var(--navy)}
.cmx-ind--star svg{stroke:var(--copper-hi)}
.cmx-ind--star span{color:#fff}

/* how we work: steps */
.cmx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.cmx-step{position:relative;padding:30px 26px;border-radius:var(--r-card);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-m)}
.cmx-step::before{
  counter-increment:step;content:counter(step);
  font-family:var(--display);font-weight:800;font-size:1.1rem;color:#fff;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--brick);box-shadow:0 8px 20px -8px rgba(193,80,63,.7);margin-bottom:16px;
}
.cmx-step h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.cmx-step p{font-size:.92rem;color:var(--ink-mid);line-height:1.6}

.cmx-billing{
  margin-top:28px;padding:24px 26px;border-radius:var(--r-card);
  background:var(--mist);border:1px solid var(--line);border-left:3px solid var(--copper);
}
.cmx-billing p{font-size:.96rem;color:var(--ink);line-height:1.62}
.cmx-billing strong{color:var(--navy)}

/* ── responsive for the new layer ─────────────────────────── */
@media (max-width:1080px){
  .teasers{grid-template-columns:1fr}
  .feature-grid,.cmx-industries,.cmx-steps{grid-template-columns:repeat(2,1fr)}
  .cmx-hero__grid,.cmx-priority{grid-template-columns:1fr}
  .cmx-priority__facts{border-left:0;border-top:1px solid rgba(255,255,255,.12);flex-direction:row;flex-wrap:wrap}
  .cmx-fact{flex:1 1 40%}
}
@media (max-width:900px){
  .story{grid-template-columns:1fr;gap:36px}
  .story__media{aspect-ratio:16/10}
}
@media (max-width:720px){
  .subhero{padding:calc(var(--nav-h) + 74px) 0 56px}
  .subhero__cta{flex-direction:column;align-items:stretch}
  .subhero__cta .btn{width:100%}
  .feature-grid,.cmx-industries,.cmx-steps,.story__stats{grid-template-columns:1fr}
  .lift:hover,.card:hover,.svc:hover{transform:translateY(-5px)}
}

/* tighten the nav on small screens so the burger never clips */
@media (max-width:560px){
  .nav__inner{gap:8px;padding:0 8px 0 12px}
  .brand__mark{height:38px}
  .nav__actions .btn--sm span{display:none}
  .nav__actions .btn--sm{padding:10px;gap:0}
  .nav__actions .btn--sm svg{width:18px;height:18px}
}
@media (max-width:380px){
  .brand__mark{height:34px}
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENT LAYER 3
   Photo heroes · stacked landing services · nav emergency number
   footer lockup · commercial industries · account form
   ═══════════════════════════════════════════════════════════════ */

/* ── nav / drawer phone: "Emergency?" sits above the number ──── */
.navphone{padding:8px 20px;align-items:center}
.navphone__stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1.08}
.navphone__tag{
  font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.navphone__num{font-size:.88rem;font-weight:700;letter-spacing:-.01em}

.drawer__call{flex-direction:column;gap:2px;padding-block:13px}
.drawer__call .navphone__tag{letter-spacing:.18em}
.drawer__call .navphone__num{font-size:1.02rem}

/* ── footer: the same lockup as the header ──────────────────── */
.foot__logo{
  display:inline-flex;align-items:center;background:#fff;
  padding:13px 18px;border-radius:16px;box-shadow:0 12px 30px -18px rgba(0,0,0,.6);
  margin-bottom:18px;
}
.foot__logo img{height:46px;width:auto;max-width:none;object-fit:contain}
.foot__brand{max-width:340px}

/* ── inner-page hero with a photograph behind the scrim ─────── */
.subhero--photo .subhero__bg{position:absolute;inset:0;z-index:-3}
.subhero--photo .subhero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 56%;
  filter:saturate(104%);transform:scale(1.03);
}
.subhero--photo .subhero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(16,24,32,.72) 0%,rgba(22,32,42,.66) 40%,rgba(26,38,49,.86) 100%),
    linear-gradient(100deg,rgba(31,45,58,.78) 0%,rgba(31,45,58,.3) 66%);
}
.subhero--photo{padding-bottom:78px}

/* ── landing: the three services, stacked and centred ───────── */
.svc-stack{
  display:flex;flex-direction:column;gap:24px;
  max-width:940px;margin-inline:auto;counter-reset:svcrow;
}
.svc-row{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  border-radius:var(--r-panel);overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-m);
  text-decoration:none;position:relative;
  transition:transform .34s cubic-bezier(.2,.75,.25,1),box-shadow .34s cubic-bezier(.2,.75,.25,1),border-color .3s;
}
.svc-row:hover,.svc-row:focus-visible{
  transform:translateY(-8px);
  box-shadow:0 38px 76px -30px rgba(31,45,58,.42);
  border-color:rgba(180,113,60,.35);
}
.svc-row__media{position:relative;overflow:hidden;min-height:228px;background:var(--mist)}
.svc-row__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.75,.25,1);
}
.svc-row:hover .svc-row__media img{transform:scale(1.07)}
.svc-row__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(31,45,58,.34) 0%,rgba(31,45,58,.06) 62%,transparent 100%);
}
.svc-row__n{
  position:absolute;left:18px;top:16px;z-index:2;
  font-family:var(--display);font-weight:800;font-size:.74rem;letter-spacing:.18em;
  color:#fff;text-shadow:0 2px 10px rgba(10,16,22,.6);
}
.svc-row__body{
  padding:32px 36px;display:flex;flex-direction:column;gap:11px;justify-content:center;
}
.svc-row__body h3{font-size:1.32rem;font-weight:800;letter-spacing:-.015em}
.svc-row__body p{font-size:.95rem;color:var(--ink-mid);line-height:1.62}
.svc-row__go{
  margin-top:6px;font-family:var(--display);font-weight:700;font-size:.87rem;color:var(--brick);
  display:inline-flex;align-items:center;gap:8px;
}
.svc-row__go svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;
}
.svc-row:hover .svc-row__go svg{transform:translateX(5px)}
.svc-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--copper);z-index:3;
  transform:scaleY(0);transform-origin:top;transition:transform .36s cubic-bezier(.2,.75,.25,1);
}
.svc-row:hover::before,.svc-row:focus-visible::before{transform:scaleY(1)}

@media (max-width:760px){
  .svc-row{grid-template-columns:1fr}
  .svc-row__media{min-height:190px}
  .svc-row__body{padding:26px 24px 28px}
}

/* ── commercial: who we serve, as an expanding vertical list ── */
.ind-list{display:flex;flex-direction:column;gap:14px;max-width:860px;margin-inline:auto}
.ind{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-s);overflow:hidden;
  transition:transform .34s cubic-bezier(.2,.75,.25,1),box-shadow .34s cubic-bezier(.2,.75,.25,1),border-color .3s;
}
.ind:hover,.ind:focus-within{
  transform:translateY(-6px);
  box-shadow:0 30px 62px -28px rgba(31,45,58,.38);
  border-color:rgba(180,113,60,.42);
}
.ind__head{display:flex;align-items:center;gap:16px;padding:20px 22px}
.ind__icon{
  width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(180,113,60,.16),rgba(180,113,60,.05));
  border:1px solid rgba(180,113,60,.22);
}
.ind__icon svg{width:23px;height:23px;fill:none;stroke:var(--copper);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ind__name{
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy);
  letter-spacing:-.01em;flex:1 1 auto;
}
.ind__more{
  flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.04em;
  color:var(--red);background:rgba(179,38,30,.07);border:1px solid rgba(179,38,30,.22);
  padding:9px 15px;border-radius:999px;transition:background .22s,border-color .22s,color .22s;
}
.ind__more:hover{background:rgba(179,38,30,.13);border-color:rgba(179,38,30,.45)}
.ind__more svg{
  width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.2,.75,.25,1);
}
.ind__more[aria-expanded="true"] svg{transform:rotate(180deg)}
.ind__panel{
  padding:0 22px 22px 82px;border-top:1px solid var(--line);margin-top:2px;
  animation:indOpen .32s cubic-bezier(.2,.8,.3,1);
}
@keyframes indOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ind__panel p{padding-top:18px;font-size:.93rem;color:var(--ink-mid);line-height:1.66}
.ind__what{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ind__what li{
  font-family:var(--display);font-weight:600;font-size:.79rem;color:var(--navy);
  padding:7px 13px;border-radius:999px;background:var(--mist);border:1px solid var(--line);
}
/* the priority partner reads as the anchor of the list */
.ind--star{background:var(--navy);border-color:var(--navy)}
.ind--star .ind__name{color:#fff}
.ind--star .ind__icon{background:rgba(240,199,149,.14);border-color:rgba(240,199,149,.3)}
.ind--star .ind__icon svg{stroke:var(--copper-hi)}
.ind--star .ind__more{
  color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);
}
.ind--star .ind__more:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55)}
.ind--star .ind__panel{border-top-color:rgba(255,255,255,.15)}
.ind--star .ind__panel p{color:rgba(255,255,255,.8)}
.ind--star .ind__what li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}

@media (max-width:620px){
  .ind__head{flex-wrap:wrap;gap:12px}
  .ind__name{flex:1 1 60%}
  .ind__more{margin-left:60px}
  .ind__panel{padding-left:22px}
}

/* ── commercial: open-an-account form ───────────────────────── */
.acct{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.acct__aside .info{margin-top:30px}
.acct__list{display:grid;gap:13px;margin-top:28px}
.acct__list li{
  position:relative;padding-left:30px;color:rgba(255,255,255,.84);
  font-size:.96rem;line-height:1.55;
}
.acct__list li::before{
  content:'';position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:50%;
  background:rgba(217,160,99,.16);border:1.5px solid var(--copper-lt);
}
.acct__list li::after{
  content:'';position:absolute;left:5.5px;top:.66em;width:6px;height:3px;
  border-left:2px solid var(--copper-hi);border-bottom:2px solid var(--copper-hi);
  transform:rotate(-45deg);
}
@media (max-width:1080px){
  .acct{grid-template-columns:1fr;gap:38px}
  .acct__aside{order:2}
  .acct .formcard{order:1}
}

/* ── story: fleet photograph behind the page header ─────────── */
.subhero--photo .crumb a:hover{color:var(--copper-hi)}

/* ═══════════════════════════════════════════════════════════════
   SITE EDITS · 2026-09-23
   Home nav link · home hero CTAs · Midlands reviews band · peeking
   Mr. Plumber on contact forms · page-level card and CTA tweaks
   ═══════════════════════════════════════════════════════════════ */

/* ── nav: room for the Home link without wrapping ─────────────── */
@media (min-width:1081px) and (max-width:1240px){
  .nav__links{gap:2px}
  .nav__links a{padding:9px 11px}
  .nav__links a::after{left:11px;right:11px}
}

/* ── home hero ─────────────────────────────────────────────────── */
.hero .hero__h1{font-size:clamp(2.05rem,1.3rem + 3.3vw,3.55rem);max-width:21ch}

.btn--orange{
  background:var(--red);color:#fff;
  box-shadow:0 12px 30px -12px rgba(179,38,30,.8);
}
.btn--orange:hover,.btn--orange:active{background:var(--red-deep);transform:translateY(-3px);box-shadow:0 18px 38px -12px rgba(179,38,30,.78)}
.btn--xl{padding:21px 42px;font-size:1.16rem}
.btn--xl svg{width:20px;height:20px}

.hero__cta--stack{flex-direction:column;align-items:flex-start}
.hero__cta-row{display:flex;flex-wrap:wrap;gap:13px}
.hero__cta-row .btn svg{width:16px;height:16px}
.hero__cta-row .btn--arrow svg{stroke:currentColor;fill:none}

.hero .creds{justify-content:center}

@media (max-width:720px){
  .hero__cta--stack{align-items:stretch}
  .hero__cta-row{flex-direction:column;align-items:stretch}
  .hero__cta-row .btn{width:100%}
  /* phones: every hero button is the same size */
  .hero__cta--stack .btn--xl{padding:17px 32px;font-size:1rem}
  .hero__cta--stack .btn--xl svg{width:17px;height:17px}
}

/* ── reviews band over the Midlands photo (home + our story) ─── */
.sec--midlands{
  background:#1A2732 url("assets/midlands-bg.jpg") center/cover no-repeat;
  isolation:isolate;
}
.sec--midlands::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,24,32,.78) 0%,rgba(16,24,32,.7) 50%,rgba(16,24,32,.8) 100%);
}
.sec--midlands .h2{color:#fff;text-shadow:0 2px 24px rgba(10,16,22,.45)}
.sec--midlands .lede{color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(10,16,22,.6)}
.sec--midlands .eyebrow{color:var(--copper-hi)}
.sec--midlands .eyebrow__rule{background:var(--copper-hi)}

/* home version: Our Story on top, the two review links side by side below */
.review__links--stack{flex-direction:column;align-items:center;gap:14px}
.review__links--stack .review__main{padding:19px 58px;font-size:1.1rem}
.review__sub{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
@media (max-width:560px){
  .review__sub{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .review__sub .btn{white-space:normal;text-align:center;line-height:1.25;padding:12px 10px;font-size:.82rem}
}

/* ── Mr. Plumber peeking out from behind the contact form ──────
   --peek-w is the rendered image width. The flat cut on the left of
   the artwork sits 5.11% in from the image edge; that cut lines up
   with the card's right edge so his fingers wrap around the card. */
.formcard--peek,.peek-host{position:relative;--peek-w:clamp(150px,14vw,190px)}
.peek{
  position:absolute;top:44px;left:calc(100% - var(--peek-w) * .0511);
  width:var(--peek-w);height:auto;max-width:none;z-index:2;pointer-events:none;
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
@media (min-width:768px){
  /* reserve the room he peeks into so the card never slides under him.
     --peek-out lets him use the empty page margin on wide screens. */
  .formcard--peek{margin-right:calc(var(--peek-w) * .949 - var(--peek-out,0px))}
}
@media (min-width:1081px){
  .formcard--peek{--peek-w:165px;--peek-out:clamp(0px,(100vw - 1180px) / 2,var(--peek-w) * .9)}
  .contact--peek{grid-template-columns:.8fr 1.2fr;gap:48px}
  .acct--peek{grid-template-columns:.66fr 1.34fr;gap:48px}
}
@media (max-width:767px){
  .peek{display:none}
  .formcard--peek{margin-right:0}
}

/* ── commercial ────────────────────────────────────────────────── */
.cmx-steps__cta{display:flex;justify-content:center;margin-top:34px}


/* ── tankless page cards ───────────────────────────────────────── */
.sec__head--wide{max-width:none}
.feature-grid--lg .feature h3{font-size:1.22rem}
.cmx-steps--plain .cmx-step::before{content:none}
.cmx-steps--plain .cmx-step h3{text-align:center;font-size:1.22rem}

/* ── financing ─────────────────────────────────────────────────── */
/* a lone CTA stretches across the space the two-button row used */
.btn--fill{width:100%;max-width:var(--fill-w,27.75rem)}
.fin-ask__head{text-align:center}
.fin-ask__head .eyebrow{justify-content:center}

/* ═══════════════════════════════════════════════════════════════
   SITE EDITS · ROUND 3
   ═══════════════════════════════════════════════════════════════ */

/* ── home hero: tagline reads as a subheading under a short rule ── */
.hero__h1 .hero__h1-alt{
  display:block;font-size:.5em;font-weight:600;letter-spacing:-.015em;
  color:rgba(255,255,255,.88);
}
.hero__h1 .hero__h1-alt::before{
  content:'';display:block;width:56px;height:2px;border-radius:2px;
  background:rgba(240,199,149,.75);margin:22px 0 18px;
}
@media (max-width:720px){
  .hero__h1 .hero__h1-alt{font-size:.58em}
  .hero__h1 .hero__h1-alt::before{width:48px;margin:18px 0 14px}
}

/* ── home contact: section header sits above the form on mobile ── */
.contact{grid-template-areas:"head form" "aside form";grid-template-rows:auto 1fr;row-gap:0}
.contact__head{grid-area:head}
.contact__aside{grid-area:aside}
.contact .formcard{grid-area:form}
@media (max-width:1080px){
  .contact{grid-template-areas:"head" "form" "aside";grid-template-rows:none;row-gap:40px}
}
.info dd a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.info dd a:hover{border-color:var(--copper-hi)}

/* ── mobile header: Contact button replaces the phone button ──── */
.navcontact{display:none}
@media (max-width:1080px){
  .nav__actions .navphone{display:none}
  .nav__actions .navcontact{display:inline-flex;padding:10px 18px}
}

/* ── footer: Follow Us column ──────────────────────────────────── */
.foot__social-h{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper-lt);margin-bottom:14px;
}
.foot__social-icons{display:flex;gap:18px;align-items:center}
.foot__social-icons a{
  display:inline-flex;color:rgba(255,255,255,.68);
  transition:color .2s,transform .2s;
}
.foot__social-icons a:hover,.foot__social-icons a:focus-visible{color:var(--copper-lt);transform:translateY(-2px)}
.foot__social-icons svg{width:26px;height:26px}
.foot__social-icons .fill{fill:currentColor}
.foot__social-icons .stroke{fill:none;stroke:currentColor;stroke-width:1.9}
@media (max-width:720px){
  .foot__social{width:100%;text-align:center}
  .foot__social-icons{justify-content:center}
}

/* ── Read More cards: optional one-liner under the name ─────────── */
.ind__text{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
.ind__line{font-size:.88rem;color:var(--ink-mid);line-height:1.45}
@media (max-width:620px){
  .ind__text{flex:1 1 60%}
}

/* ── Mr. Plumber peeking beside cards (emergency, financing) ─
   Same artwork and cut-line maths as the contact forms. The host
   reserves room on its right so he never overlaps the card's text. */
.peek-host--sos{--peek-w:150px}
.peek-host--sos .peek{top:12px}
.peek-host--fin{--peek-w:150px}
.peek-host--fin .peek{top:34px}

@media (min-width:768px){
  .peek-host--sos,.peek-host--fin{margin-right:calc(var(--peek-w) * .949 - var(--peek-out,0px))}
}
@media (min-width:1081px){
  .peek-host--sos,.peek-host--fin{--peek-out:clamp(0px,(100vw - 1180px) / 2,var(--peek-w) * .9)}
}
/* phones: a smaller Mr. Plumber, tucked into a slim gutter on the right */
@media (max-width:767px){
  .peek-host{--peek-w:74px}
  .peek-host--sos,.peek-host--fin{margin-right:calc(var(--peek-w) * .949)}
  .peek-host--sos .peek{top:18px}
  .peek-host--fin .peek{top:22px}
  .peek-host .peek{display:block}
  .emergency__cta{padding:18px 16px}
}
@media (max-width:767px){
  /* narrowed financing card: let its long button label wrap instead of overflowing */
  .peek-host--fin .fin-apply .btn{white-space:normal;text-align:center;line-height:1.3}
  .split{grid-template-columns:minmax(0,1fr)}
}

/* ── service card grid (residential + commercial) ───────────── */
.scard-grid{
  --gap:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);margin:0;padding:0;list-style:none;
}
.scard-grid>.scard{flex:0 0 calc((100% - 2 * var(--gap)) / 3);max-width:calc((100% - 2 * var(--gap)) / 3);min-width:0}
/* four cards: a centered 2x2 block at the same card width */
.scard-grid--four{max-width:calc((100% - 2 * var(--gap)) * 2 / 3 + var(--gap));margin-inline:auto}
.scard-grid--four>.scard{flex-basis:calc((100% - var(--gap)) / 2);max-width:calc((100% - var(--gap)) / 2)}
.scard{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-s);
  transition:box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease;
}
.scard:hover,.scard:focus-within{box-shadow:var(--shadow-m);transform:translateY(-4px);border-color:var(--line-strong)}
.scard__img{
  aspect-ratio:16/9;width:100%;height:auto;object-fit:cover;background:var(--mist);
  border-radius:calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
}
.scard__body{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 24px 24px}
.scard__title{font-size:1.2rem;font-weight:800;line-height:1.25;color:var(--navy)}
.scard__desc{margin:10px 0 0;font-size:.93rem;line-height:1.6;color:var(--ink-mid)}
.scard__rule{border:0;border-top:1px solid var(--line);margin:18px 0 16px}
.scard__tags{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  margin:0 0 20px;padding:0;list-style:none;
}
.scard__tags li{
  font-size:.8rem;font-weight:600;line-height:1.3;color:var(--navy-2);
  background:var(--mist);border:1px solid var(--line);border-radius:10px;
  padding:7px 11px;
}
.scard__link{
  margin-top:auto;align-self:flex-start;font-weight:700;font-size:.92rem;
  color:var(--red);text-decoration:none;
}
.scard__link span{display:inline-block;transition:transform .25s ease}
.scard__link:hover span,.scard__link:focus-visible span{transform:translateX(4px)}
.scard__link:hover{color:var(--red-deep)}

/* emergency highlight: card #1 only */
.scard--alert{background:#FEF2F2;border-color:#FCA5A5}
.scard--alert:hover,.scard--alert:focus-within{border-color:#F87171}
.scard--alert .scard__rule{border-top-color:#FCA5A5}
.scard--alert .scard__tags li{background:#fff;border-color:#FECACA;color:var(--red-deep)}
.scard__flag{
  align-self:flex-start;margin-bottom:10px;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--red);
  background:#fff;border:1px solid #FCA5A5;border-radius:999px;padding:4px 10px;
}

.scard-credits{margin-top:28px;text-align:center;font-size:.75rem;color:var(--ink-soft)}
.scard-credits a{color:inherit}

@media (max-width:960px){
  .scard-grid>.scard,.scard-grid--four>.scard{flex-basis:calc((100% - var(--gap)) / 2);max-width:calc((100% - var(--gap)) / 2)}
  .scard-grid--four{max-width:none}
}
@media (max-width:640px){
  .scard-grid{--gap:18px}
  .scard-grid>.scard,.scard-grid--four>.scard{flex-basis:100%;max-width:100%}
}
@media (prefers-reduced-motion:reduce){.scard,.scard__link span{transition:none}.scard:hover,.scard:focus-within{transform:none}}

/* ═══════════════════════════════════════════════════════════════
   SITE EDITS · 2026-10-07 · service sub pages
   Clear hero photos · service card buttons · sub page sections
   ═══════════════════════════════════════════════════════════════ */

/* ── heroes: no blur on the photo. A dark gradient sits behind the
   text instead, kept at 0.66+ opacity wherever text can land so white
   copy holds WCAG AA even over the brightest part of a photo. ───── */
.hero__scrim{
  background:
    linear-gradient(180deg,rgba(12,19,26,.5) 0%,rgba(12,19,26,0) 26%,rgba(12,19,26,0) 46%,rgba(12,19,26,.74) 100%),
    linear-gradient(90deg,rgba(12,19,26,.86) 0%,rgba(12,19,26,.7) 58%,rgba(12,19,26,.36) 100%);
}
.subhero--photo .subhero__scrim{
  background:
    linear-gradient(180deg,rgba(12,19,26,.46) 0%,rgba(12,19,26,0) 30%,rgba(12,19,26,0) 62%,rgba(12,19,26,.5) 100%),
    linear-gradient(90deg,rgba(12,19,26,.88) 0%,rgba(12,19,26,.7) 60%,rgba(12,19,26,.34) 100%);
}
.hero__h1,.subhero--photo h1{text-shadow:0 2px 18px rgba(8,12,18,.55)}
.subhero--photo .subhero__sub,.subhero--photo .crumb{text-shadow:0 1px 12px rgba(8,12,18,.6)}
.subhero--photo .subhero__sub{color:rgba(255,255,255,.92)}
.subhero--photo .crumb{color:rgba(255,255,255,.8)}
.subhero--photo .crumb a{color:#fff}
/* text runs the full width on narrow screens, so the overlay does too */
@media (max-width:760px){
  .hero__scrim,.subhero--photo .subhero__scrim{
    background:linear-gradient(180deg,rgba(12,19,26,.74) 0%,rgba(12,19,26,.68) 50%,rgba(12,19,26,.8) 100%);
  }
}

/* ── Unsplash credits: kept in the markup, white so they disappear ─ */
.scard-credits,.scard-credits a{color:#fff}

/* ── service cards: centered title, two buttons pinned to the bottom ─ */
.scard__title{text-align:center}
.scard__flag{align-self:center}
.scard__call{
  align-self:center;margin:0 0 14px;font-weight:700;font-size:.92rem;
  color:var(--red);text-decoration:none;
}
.scard__call:hover{color:var(--red-deep)}
.scard__actions{
  margin-top:auto;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
}
.scard__actions .btn{flex:1 1 0;min-width:0;max-width:170px}
.scard__actions--one .btn{flex:0 1 auto;max-width:none;padding-inline:30px}
.scard__actions .btn--outline{background:#fff}
@media (max-width:640px){
  .scard__actions{flex-direction:column;align-items:stretch}
  .scard__actions .btn{max-width:none;flex:none;width:100%}
}

/* ── sub service cards: two short lists above the quote button ────── */
.scard--sub .scard__rule{margin:16px 0 14px}
.scard__label{
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--copper-dk);margin:0 0 8px;
}
.scard__list{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:6px}
.scard__list li{
  position:relative;padding-left:22px;font-size:.88rem;line-height:1.5;color:var(--ink);
}
.scard__list--inc li::before{
  content:'';position:absolute;left:2px;top:.42em;width:10px;height:6px;
  border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg);
}
.scard__list--sign li::before{
  content:'';position:absolute;left:4px;top:.55em;width:6px;height:6px;border-radius:50%;
  background:var(--red);
}
.scard--sub .scard__list--sign{margin-bottom:22px}

/* ── sub page sections ─────────────────────────────────────────────── */
.sec--tight{padding-block:80px}
@media (max-width:720px){.sec--tight{padding-block:56px}}

.sp-intro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sp-intro__col{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:28px 28px 30px;box-shadow:var(--shadow-s);
}
.sp-intro__col .eyebrow{margin-bottom:14px}
.sp-intro__col p{font-size:.97rem;line-height:1.68;color:var(--ink-mid)}
.sp-list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.sp-list li{position:relative;padding-left:22px;font-size:.97rem;line-height:1.55;color:var(--ink-mid)}
.sp-list li::before{
  content:'';position:absolute;left:4px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--copper);
}
@media (max-width:960px){.sp-intro{grid-template-columns:1fr}}

.sp-why{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none;
}
.sp-why__item{
  display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--copper);border-radius:14px;padding:20px 22px;
}
.sp-why__item strong{font-family:var(--display);font-weight:800;color:var(--navy);font-size:1rem}
.sp-why__item span{font-size:.9rem;line-height:1.55;color:var(--ink-mid)}
@media (max-width:960px){.sp-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sp-why{grid-template-columns:1fr}}

.chips--center{justify-content:center;max-width:860px;margin-inline:auto}

/* ── main service cards: one large More Info button ───────────────── */
.scard__more{padding:15px 44px;font-size:1.02rem}
.scard__actions--two{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:8px}
.scard__actions--two .btn{flex:none;width:100%;min-width:0;max-width:none;padding:15px 10px;font-size:.92rem;white-space:nowrap;justify-content:center;text-align:center}
.sec__cta{display:flex;justify-content:center;margin-top:48px}

/* ── info cards (industries, tankless benefits): image, title, text ─ */
.scard--info .scard__desc{margin-top:10px;text-align:center}
.scard__lead{margin:8px 0 0;text-align:center;font-weight:700;font-size:.95rem;color:var(--copper-dk)}
.scard--info .scard__lead + .scard__desc{margin-top:8px}

/* ── sub page "Why Mr. Plumber" over the Columbia skyline ─────────── */
.sec--midlands .sp-why__item{
  background:rgba(255,255,255,.96);
}

/* ── featured industry card: full grid width, image left, text right ─ */
.scard--feature{flex-direction:row;margin-bottom:24px}
.scard--feature .scard__img{
  flex:0 0 46%;width:46%;height:auto;aspect-ratio:auto;min-height:300px;align-self:stretch;
  border-radius:calc(var(--r-card) - 1px) 0 0 calc(var(--r-card) - 1px);
}
.scard--feature .scard__body{flex:1 1 0;min-width:0;justify-content:center;padding:34px 38px}
.scard--feature .scard__title{text-align:left;font-size:1.45rem}
.scard--feature .scard__desc{margin:12px 0 18px}
.scard__list--cols{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}
@media (max-width:760px){
  .scard--feature{flex-direction:column;margin-bottom:18px}
  .scard--feature .scard__img{flex:none;width:100%;min-height:0;aspect-ratio:16/9;border-radius:calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0}
  .scard--feature .scard__body{padding:22px 24px 24px}
  .scard--feature .scard__title{text-align:center;font-size:1.2rem}
}
@media (max-width:420px){.scard__list--cols{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   Mega menus · Residential and Commercial
   Panel hangs off .nav__inner so it matches the header's width and
   sits inside the nav's stacking context, above hero images.
   ═══════════════════════════════════════════════════════════════ */
.nav__inner{position:relative}

.nav__item{display:flex;align-items:center}
.nav__item .nav__link{padding-right:4px}
.nav__item .nav__link::after{right:4px}
.nav__links > a[aria-current="page"]::after,
.nav__item.is-active .nav__link::after{transform:scaleX(1)}

.nav__caret{
  width:26px;height:36px;margin-right:2px;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--navy);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.nav__caret svg{width:12px;height:12px;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.nav__caret:hover{background:rgba(31,45,58,.07)}
.nav__caret[aria-expanded="true"]{color:var(--copper)}
.nav__caret[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__caret:focus-visible,.nav__link:focus-visible,.mega a:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

.mega{
  position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:2;
  display:grid;grid-template-columns:1fr 290px;
  grid-template-areas:"cols feature" "foot feature";
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 30px 70px -28px rgba(31,45,58,.45),0 8px 24px -12px rgba(31,45,58,.18);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s cubic-bezier(.2,.7,.3,1),visibility 0s linear .18s;
}
.mega::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px} /* hover bridge */
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}

.mega__cols{grid-area:cols;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 28px;padding:30px 32px 22px}
.mega__col ul{list-style:none;margin:0;padding:0}
.mega__h{
  margin:0 0 12px;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--copper);line-height:1.3;
}
.nav__links .mega a{
  display:block;padding:7px 0;border-radius:0;
  font-family:var(--display);font-weight:600;font-size:.92rem;line-height:1.35;color:var(--navy);
  transition:color .18s,transform .18s;
}
.nav__links .mega a::after{display:none}
.nav__links .mega a:hover{color:var(--copper);transform:translateX(4px)}

.mega__foot{
  grid-area:foot;display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:0 32px;padding:14px 0 18px;border-top:1px solid var(--line);
}
.nav__links .mega a.mega__all{display:inline-block;padding:4px 0;font-weight:700;color:var(--navy)}
.nav__links .mega a.mega__more{display:inline-block;padding:4px 0;font-weight:600;color:var(--ink-mid)}

.mega__feature{
  grid-area:feature;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:30px 28px;background:var(--mist);border-radius:0 var(--r-card) var(--r-card) 0;
}
.mega__feature__h{margin:0;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--navy);line-height:1.15}
.mega__feature__t{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-mid)}
.nav__links .mega a.btn{display:inline-flex;padding:11px 22px;color:#fff;font-size:.88rem;margin-top:4px}
.nav__links .mega a.btn:hover{color:#fff;transform:translateY(-2px)}
.nav__links .mega a.mega__feature__tel{display:inline-block;padding:2px 0;font-weight:800;font-size:1.05rem;letter-spacing:-.01em}

/* tighter on small desktops */
@media (max-width:1240px){
  .mega{grid-template-columns:1fr 250px}
  .mega__cols{padding:26px 24px 18px;gap:8px 20px}
  .mega__foot{margin:0 24px}
}

/* ── mobile drawer accordions ─────────────────────────────────── */
.drawer{max-height:calc(100svh - var(--nav-h) - 40px);overflow-y:auto;overscroll-behavior:contain}
.drawer .acc{border-bottom:1px solid var(--line)}
.drawer .acc__row{display:flex;align-items:stretch}
.drawer .acc__row a{flex:1;border-bottom:0;min-height:48px;display:flex;align-items:center}
.acc__btn{
  flex:none;width:48px;min-height:48px;border:0;border-radius:14px;background:transparent;
  color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.acc__btn svg{width:14px;height:14px;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.acc__btn[aria-expanded="true"]{color:var(--copper)}
.acc__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.acc.is-active .acc__row > a{box-shadow:inset 3px 0 0 var(--copper)}
.acc__panel{padding:2px 12px 16px 20px;animation:drop .22s cubic-bezier(.2,.8,.3,1)}
.acc__panel[hidden]{display:none}
.acc__h{
  margin:12px 0 2px;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--copper);
}
.drawer .acc__panel a{
  display:flex;align-items:center;min-height:44px;padding:8px 4px;border-bottom:0;border-radius:10px;
  font-size:.95rem;font-weight:600;
}
.drawer .acc__panel a.acc__all{margin-top:6px;font-weight:700;border-top:1px solid var(--line);border-radius:0}
.acc__feature{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:14px;
  padding:18px;background:var(--mist);border-radius:var(--r-card);
}
.acc__feature__h{margin:0;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--navy);line-height:1.2}
.acc__feature__t{margin:0;font-size:.88rem;line-height:1.5;color:var(--ink-mid)}
.drawer .acc__feature a.btn{
  display:inline-flex;justify-content:center;min-height:46px;padding:12px 24px;border:1.5px solid transparent;
  border-radius:999px;color:#fff;font-size:.92rem;
}
.drawer .acc__feature a.acc__feature__tel{padding:8px 0;font-weight:800;font-size:1.05rem}

@media (prefers-reduced-motion:reduce){
  .mega,.nav__caret svg,.acc__btn svg{transition:none}
  .acc__panel{animation:none}
}