/* ═══════════════════════════════════════════════════════════════
   Go Tankless SC: a Mr. Plumber, Inc. mini-site
   Subdomain-ready (point gotanklesssc.com here later).
   Shares the Mr. Plumber design language: navy anchors, brick acts,
   copper connects, with its own "Go Tankless SC" wordmark.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#FFFFFF;
  --mist:#F3F6FA;
  --line:rgba(31,45,58,.10);
  --line-strong:rgba(31,45,58,.16);
  --navy:#1F2D3A;
  --navy-2:#2A3C4C;
  --brick:#C1503F;
  --brick-deep:#A8422F;
  --copper:#B4713C;
  --copper-lt:#D9A063;
  --copper-hi:#F0C795;
  --copper-dk:#7E4B22;
  --ink:#2B2E33;
  --ink-mid:#5E6874;
  --ink-soft:#8791A0;
  --display:'Manrope',system-ui,sans-serif;
  --body:'Montserrat',system-ui,-apple-system,sans-serif;
  --r-card:20px;
  --r-panel:28px;
  --shadow-m:0 14px 40px -18px rgba(31,45,58,.22);
  --shadow-l:0 40px 90px -40px rgba(31,45,58,.42);
  --nav-h:70px;
  --wrap:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
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.1;letter-spacing:-.02em}
p{margin:0}
ul,ol{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}

/* ── wordmark ─────────────────────────────────────────────────── */
.wordmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display)}
.wordmark__drop{
  width:26px;height:26px;flex:none;border-radius:8px;
  background:linear-gradient(150deg,var(--copper-lt),var(--copper-dk));
  display:grid;place-items:center;
}
.wordmark__drop svg{width:14px;height:14px;fill:#fff}
.wordmark__text{font-weight:800;letter-spacing:-.02em;color:var(--navy);font-size:1.05rem}
.wordmark__text b{color:var(--brick);font-weight:800}
.wordmark--light .wordmark__text{color:#fff}
.wordmark--light .wordmark__text b{color:var(--copper-hi)}

/* ── nav ──────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line)}
.nav__inner{max-width:var(--wrap);margin-inline:auto;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:22px}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__back{font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--navy);
  text-decoration:none;padding:8px 12px;border-radius:999px}
.nav__back:hover{color:var(--copper)}

/* ── buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:.94rem;
  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--brick{background:var(--brick);color:#fff;box-shadow:0 10px 26px -12px rgba(193,80,63,.75)}
.btn--brick:hover{background:var(--brick-deep);transform:translateY(-2px)}
.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)}

/* ── eyebrow / type ───────────────────────────────────────────── */
.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:18px}
.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)}
.h2{font-size:clamp(1.9rem,1.3rem + 2.3vw,2.8rem);font-weight:800}
.lede{margin-top:16px;font-size:1.05rem;line-height:1.7;color:var(--ink-mid);max-width:62ch}

.sec{padding-block:88px}
.sec--mist{background:var(--mist)}
.sec__head{max-width:640px;margin-bottom:44px}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{
  background:linear-gradient(160deg,var(--navy) 0%,#243542 60%,#1A2732 100%);
  color:#fff;padding:76px 0 88px;position:relative;overflow:hidden;isolation:isolate;
}
.hero::after{content:'';position:absolute;inset:-30% -10% auto auto;width:44%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(217,160,99,.22),transparent 70%)}
.hero__badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;padding:7px 14px;
  border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  font-family:var(--display);font-weight:600;font-size:.78rem;color:rgba(255,255,255,.9)}
.hero h1{color:#fff;font-size:clamp(2.2rem,1.4rem + 3.4vw,3.6rem);font-weight:800;letter-spacing:-.03em;max-width:18ch}
.hero__sub{margin-top:20px;max-width:52ch;color:rgba(255,255,255,.82);font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.62}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.hero__note{margin-top:22px;font-size:.85rem;color:rgba(255,255,255,.6)}

/* ── plain prose ──────────────────────────────────────────────── */
.prose p + p{margin-top:16px}
.prose strong{color:var(--navy)}

/* ── option / benefit cards ───────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 24px;box-shadow:var(--shadow-m)}
.tile h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;padding-left:20px;position:relative}
.tile h3::before{content:'';position:absolute;left:0;top:.44em;width:11px;height:11px;border-radius:50%;
  background:rgba(180,113,60,.16);border:1.5px solid var(--copper)}
.tile p{font-size:.92rem;color:var(--ink-mid);line-height:1.6}
.sec--mist .tile{background:#fff}
.tile{transition:transform .34s cubic-bezier(.2,.75,.25,1),box-shadow .34s cubic-bezier(.2,.75,.25,1),border-color .3s}
.tile:hover{transform:translateY(-8px);box-shadow:0 34px 70px -28px rgba(31,45,58,.4);border-color:rgba(180,113,60,.35)}

/* ── tank vs tankless: a head-to-head diagram ─────────────────
   Two columns either side of a copper spine. Each row states the
   same attribute for both, flagged pro or con, so the trade-off is
   readable at a glance instead of buried in a table. */
.vs{position:relative;--vs-axis:190px;--vs-gap:16px}
.vs::before{
  content:'';position:absolute;left:50%;top:78px;bottom:14px;width:2px;
  transform:translateX(-1px);border-radius:2px;
  background:linear-gradient(180deg,var(--copper-lt),rgba(180,113,60,.18));
}
.vs__heads{
  display:grid;grid-template-columns:1fr var(--vs-axis) 1fr;
  gap:var(--vs-gap);align-items:center;margin-bottom:22px;
}
.vs__head{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px 26px;text-align:center;box-shadow:var(--shadow-m);
  transition:transform .34s cubic-bezier(.2,.75,.25,1),box-shadow .34s;
}
.vs__head:hover{transform:translateY(-6px);box-shadow:0 30px 62px -28px rgba(31,45,58,.4)}
.vs__head--alt{border-color:rgba(180,113,60,.42);box-shadow:0 22px 50px -26px rgba(180,113,60,.55)}
.vs__icon{
  display:grid;place-items:center;width:54px;height:54px;margin:0 auto 14px;border-radius:16px;
  background:linear-gradient(150deg,rgba(180,113,60,.16),rgba(180,113,60,.05));
  border:1px solid rgba(180,113,60,.22);
}
.vs__icon svg{width:28px;height:28px;fill:none;stroke:var(--copper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vs__who{font-family:var(--display);font-weight:800;font-size:1.22rem;color:var(--navy);letter-spacing:-.02em}
.vs__what{margin-top:7px;font-size:.87rem;color:var(--ink-mid);line-height:1.5}
.vs__tally{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--display);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
}
.vs__tally b{color:var(--navy);font-size:1rem;font-weight:800}
.vs__badge{
  display:grid;place-items:center;width:60px;height:60px;margin:0 auto;border-radius:50%;
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:800;
  font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 14px 30px -14px rgba(31,45,58,.8);
}

.vs__rows{display:grid;gap:12px}
.vs__row{
  display:grid;grid-template-columns:1fr var(--vs-axis) 1fr;
  gap:var(--vs-gap);align-items:stretch;
}
.vs__axis{
  display:grid;place-items:center;text-align:center;padding:12px 10px;
  font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.04em;
  color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;
  align-self:center;position:relative;z-index:1;line-height:1.25;
}
.vs__cell{
  display:flex;flex-direction:column;gap:9px;padding:18px 20px;border-radius:var(--r-card);
  border:1px solid var(--line);background:#fff;
  transition:transform .34s cubic-bezier(.2,.75,.25,1),box-shadow .34s,border-color .3s;
}
.vs__cell:hover{transform:translateY(-5px);box-shadow:0 26px 54px -26px rgba(31,45,58,.36)}
.vs__cell p{font-size:.9rem;line-height:1.55;color:var(--ink-mid)}
.vs__flag{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 11px 5px 8px;border-radius:999px;
}
.vs__flag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vs__cell--pro{border-color:rgba(31,122,77,.28);background:rgba(31,122,77,.045)}
.vs__cell--pro .vs__flag{color:#1B6B43;background:rgba(31,122,77,.13)}
.vs__cell--con{border-color:rgba(168,66,47,.24);background:rgba(168,66,47,.04)}
.vs__cell--con .vs__flag{color:var(--brick-deep);background:rgba(168,66,47,.12)}

.vs__verdict{
  margin-top:28px;padding:22px 26px;border-radius:var(--r-card);
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--copper);
  font-size:.95rem;line-height:1.66;color:var(--ink-mid);
}
.vs__verdict strong{color:var(--navy)}

@media (max-width:860px){
  .vs{--vs-axis:150px;--vs-gap:12px}
  .vs__what{display:none}
}
@media (max-width:700px){
  /* the spine collapses: each attribute becomes its own stacked pair, so
     each half has to name which unit it is talking about */
  .vs::before{display:none}
  .vs__cell::before{
    content:attr(data-for);
    font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-soft);
  }
  .vs__cell{gap:6px}
  .vs__heads{grid-template-columns:1fr 1fr;gap:12px}
  .vs__badge{display:none}
  .vs__what{display:block}
  .vs__row{grid-template-columns:1fr;gap:8px}
  .vs__axis{
    order:-1;border-radius:12px;background:var(--navy);color:#fff;border-color:var(--navy);
    padding:11px 14px;justify-self:stretch;
  }
}

/* ── final CTA ────────────────────────────────────────────────── */
.cta-band{
  background:linear-gradient(135deg,var(--brick) 0%,var(--brick-deep) 100%);
  color:#fff;border-radius:var(--r-panel);padding:clamp(30px,4vw,52px);text-align:center;
  box-shadow:0 30px 70px -30px rgba(168,66,47,.65);
}
.cta-band h2{color:#fff}
.cta-band p{margin:14px auto 26px;max-width:46ch;color:rgba(255,255,255,.9)}
.cta-band__row{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
.cta-band .btn--outline{color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .btn--outline:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.cta-band .btn--light{background:#fff;color:var(--brick-deep)}
.cta-band .btn--light:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(16,24,32,.5)}

/* ── footer ───────────────────────────────────────────────────── */
.foot{background:#16212B;color:rgba(255,255,255,.62);padding:52px 0 32px}
.foot__top{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot__back{font-family:var(--display);font-weight:600;font-size:.9rem;color:#fff;text-decoration:none}
.foot__back:hover{color:var(--copper-lt)}
.foot__bar{padding-top:22px;font-size:.8rem;color:rgba(255,255,255,.45);line-height:1.6}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .sec{padding-block:60px}
  /* the header has three things and a phone's width: keep it on one line */
  .nav__inner{gap:10px;padding-inline:14px}
  .nav__right{gap:6px}
  .wordmark__text{white-space:nowrap;font-size:.95rem}
  .wordmark{gap:8px}
  .nav__back{padding:8px 4px;font-size:.78rem;white-space:nowrap}
  .nav__back span{display:none}
  .nav__right .btn{padding:11px;gap:0}
  .nav__right .btn span{display:none}
  .grid{grid-template-columns:1fr;gap:14px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .tile:hover,.vs__head:hover,.vs__cell:hover{transform:none!important}
}