/* ══════════════════════════════════════════════════════════════════
   PEDRO'S PLUMBING
   Palette + type lifted straight off the badge: signwriter's red,
   aged cream, near-black ink, straw gold from the sombrero.
   ══════════════════════════════════════════════════════════════ */

:root{
  --red:        #C8102E;
  --red-dk:     #94081F;
  --red-lt:     #E0223F;
  --ink:        #16150F;
  --ink-2:      #262319;
  --cream:      #F7F2E7;
  --cream-2:    #EFE7D4;
  --cream-3:    #E2D8C0;
  --straw:      #C79A4B;
  --body:       #3A362C;
  --body-lt:    #6B6555;

  --wrap: 1180px;
  --r: 14px;

  --shadow-sticker: 4px 4px 0 var(--ink);
  --shadow-card: 0 2px 0 var(--cream-3), 0 14px 30px -18px rgba(22,21,15,.45);

  --font-display: 'Bevan', Georgia, serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;

  /* Sombrero zigzag band, used as a section divider */
  --zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 18' preserveAspectRatio='none'%3E%3Crect width='40' height='18' fill='%23C8102E'/%3E%3Cpath d='M0 14 L10 4 L20 14 L30 4 L40 14' fill='none' stroke='%23F7F2E7' stroke-width='4.5'/%3E%3C/svg%3E");
  /* Faint paper grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(16px,.55vw + 14.5px,17.5px);
  line-height:1.65;
  color:var(--body);
  background:var(--cream);
  overflow-x:hidden;
}
/* Paper grain over the whole page, purely decorative */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background-image:var(--grain); opacity:.035; mix-blend-mode:multiply;
}

img{ max-width:100%; height:auto; display:block }
a{ color:var(--red); text-underline-offset:3px }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto }

.skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:var(--cream); padding:.7rem 1.2rem;
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.06em;
}
.skip:focus{ left:.5rem; top:.5rem }

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--red); outline-offset:3px; border-radius:4px;
}

/* ── Type ─────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:400;
  color:var(--ink); line-height:1.02; letter-spacing:-.005em;
  margin:0 0 .5em; text-wrap:balance;
}
h1{ font-size:clamp(2.35rem,5vw,3.75rem); line-height:1 }
h2{ font-size:clamp(1.95rem,3.9vw,3rem) }
h3{ font-size:1.22rem; line-height:1.15 }
p{ margin:0 0 1rem }

.eyebrow{
  font-family:var(--font-cond); font-weight:700; font-size:.94rem;
  text-transform:uppercase; letter-spacing:.16em; color:var(--red);
  margin:0 0 .85rem; display:flex; align-items:center; gap:.5rem;
}
.eyebrow span{ font-size:.8rem; line-height:1 }
.eyebrow--light{ color:var(--red-lt) }
.sec--dark .eyebrow--light,.band .eyebrow--light{ color:var(--cream) }
.sec__hd{ text-align:center; max-width:56ch; margin:0 auto 3rem }
.sec__hd .eyebrow{ justify-content:center }
.sec__sub{ font-size:1.09rem; color:var(--body-lt); margin:0 }
.sec__sub--left{ margin-bottom:1.6rem }
.on-dark{ color:var(--cream) }
.hl{ color:var(--red-lt) }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn{
  --bg:var(--red); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--font-cond); font-weight:700; font-size:1.06rem;
  text-transform:uppercase; letter-spacing:.05em; text-decoration:none;
  padding:.72rem 1.35rem; border:3px solid var(--ink); border-radius:10px;
  box-shadow:var(--shadow-sticker); cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink) }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink) }
.btn--red:hover{ background:var(--red-lt) }
.btn--cream{ --bg:var(--cream); --fg:var(--ink) }
.btn--cream:hover{ background:#fff }
.btn--lg{ font-size:1.25rem; padding:.92rem 1.75rem }
.btn--block{ width:100%; font-size:1.2rem; padding:.95rem 1.5rem }
.btn .i{ width:1.15em; height:1.15em; flex:none }
@media (prefers-reduced-motion:reduce){ .btn,.btn:hover,.btn:active{ transform:none; transition:none } }

.i{ width:1.1em; height:1.1em; fill:currentColor; flex:none }

/* ── Zigzag divider ───────────────────────────────────────────── */
.zig{ height:18px; background:var(--zigzag) repeat-x center/40px 18px }
.zig--bottom{ position:absolute; left:0; right:0; bottom:0 }
.zig--top{ position:relative }

/* ── Top bar ──────────────────────────────────────────────────── */
.topbar{ background:var(--ink); color:var(--cream-2); font-family:var(--font-cond) }
.topbar__in{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  min-height:38px; font-size:.95rem; letter-spacing:.05em; text-transform:uppercase;
}
.topbar__item{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap }
.topbar__item .i{ color:var(--red-lt) }
.topbar__dot{ color:var(--red); font-size:.7rem }
@media (max-width:760px){
  .topbar__dot,.topbar__item--last{ display:none }
  .topbar__in{ gap:1.5rem; font-size:.85rem }
}
@media (max-width:420px){ .topbar__in :nth-child(3){ display:none } }

/* ── Header ───────────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:3px solid var(--ink);
}
.hdr__in{ display:flex; align-items:center; gap:1.5rem; min-height:74px; padding-block:.5rem }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto }
.brand__mark{ width:54px; height:auto }
.brand__txt{ display:flex; flex-direction:column; line-height:.9 }
.brand__txt strong{
  font-family:var(--font-display); font-weight:400; font-size:1.45rem;
  color:var(--ink); letter-spacing:-.01em;
}
.brand__txt em{
  font-family:var(--font-cond); font-style:normal; font-weight:700; font-size:.95rem;
  letter-spacing:.3em; color:var(--red); text-transform:uppercase; padding-left:.15em;
}

.nav{ display:flex; gap:1.6rem; font-family:var(--font-cond); font-weight:600 }
.nav a{
  color:var(--ink); text-decoration:none; text-transform:uppercase;
  letter-spacing:.07em; font-size:1.02rem; position:relative; padding-block:.35rem;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.nav a:hover::after{ transform:scaleX(1) }

.hdr__call{ padding:.5rem 1.1rem; text-align:left }
.hdr__call-txt{ display:flex; flex-direction:column; line-height:1.05 }
.hdr__call-txt small{ font-size:.68rem; letter-spacing:.14em; opacity:.85; font-weight:600 }
.hdr__call-txt{ font-size:1.12rem }

@media (max-width:980px){ .nav{ display:none } }
@media (max-width:560px){
  .hdr__call{ display:none }
  .hdr__in{ min-height:64px }
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero{
  position:relative; color:var(--cream);
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(200,16,46,.28), transparent 62%),
    linear-gradient(180deg, var(--ink-2), var(--ink) 70%);
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(4rem,8vw,6rem);
  overflow:hidden;
}
/* faint concentric badge rings behind the logo */
.hero::after{
  content:""; position:absolute; right:-8%; top:50%; translate:0 -50%;
  width:min(760px,80vw); aspect-ratio:1; border-radius:50%;
  border:2px solid rgba(247,242,231,.07);
  box-shadow:0 0 0 40px rgba(247,242,231,.035), inset 0 0 0 34px rgba(200,16,46,.07);
  pointer-events:none;
}
.hero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.2fr .8fr; align-items:center;
  gap:clamp(2rem,5vw,4rem);
}
.hero h1{ color:var(--cream); text-shadow:3px 3px 0 rgba(0,0,0,.45) }
.lede{ font-size:clamp(1.05rem,1.3vw,1.22rem); color:#D8D2C3; max-width:52ch; margin-bottom:1.9rem }

.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2rem }
.cta-row .btn--red{ border-color:var(--cream); box-shadow:4px 4px 0 var(--cream) }
.cta-row .btn--red:hover{ box-shadow:2px 2px 0 var(--cream) }
.cta-row .btn--red:active{ box-shadow:0 0 0 var(--cream) }

.hero__pills{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem;
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em; font-size:.92rem;
}
.hero__pills li{
  border:2px solid rgba(247,242,231,.28); border-radius:999px;
  padding:.28rem .85rem; color:#CFC9BA;
}
.hero__pills li::before{ content:"★ "; color:var(--red-lt) }

.hero__badge img{
  width:100%; max-width:440px; margin-inline:auto;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.55));
}

@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; text-align:center }
  .hero__copy{ order:2 }
  .hero__badge{ order:1 }
  .hero__badge img{ max-width:270px }
  .hero .eyebrow,.cta-row,.hero__pills{ justify-content:center }
  .lede{ margin-inline:auto }
  .hero::after{ display:none }
}

/* ── Sections ─────────────────────────────────────────────────── */
.sec{ padding:clamp(3.5rem,7vw,5.75rem) 0 }
.sec--alt{ background:var(--cream-2); border-block:3px solid var(--ink) }
.sec--dark{
  background:linear-gradient(180deg,var(--ink),var(--ink-2));
  color:#CFC9BA; border-block:3px solid var(--ink);
}

/* ── Service cards ────────────────────────────────────────────── */
.grid{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.card{
  background:#FCF9F1; border:3px solid var(--ink); border-radius:var(--r);
  padding:1.6rem 1.5rem 1.45rem; box-shadow:var(--shadow-card);
  transition:transform .16s ease, box-shadow .16s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 2px 0 var(--cream-3), 0 22px 34px -20px rgba(22,21,15,.6) }
.card__ico{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:1rem;
  background:var(--red); color:var(--cream);
  border:3px solid var(--ink); border-radius:12px; box-shadow:3px 3px 0 var(--ink);
}
.card__ico .i{ width:26px; height:26px }
.card h3{ margin-bottom:.45rem }
.card p{ margin:0; font-size:.98rem; color:var(--body-lt) }
.card--alert{ background:var(--ink); border-color:var(--ink) }
.card--alert h3{ color:var(--cream) }
.card--alert p{ color:#B8B2A3 }
.card--alert .card__ico{ background:var(--cream); color:var(--red); box-shadow:3px 3px 0 var(--red) }
@media (prefers-reduced-motion:reduce){ .card,.card:hover{ transform:none; transition:none } }

/* ── Emergency band ───────────────────────────────────────────── */
.band{
  background:var(--red); color:var(--cream);
  border-block:3px solid var(--ink);
  padding:clamp(2.25rem,4.5vw,3.25rem) 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 14px, transparent 14px 28px);
}
.band__in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap }
.band__h{ color:var(--cream); margin-bottom:.35rem; text-shadow:2px 2px 0 rgba(0,0,0,.28) }
.band__p{ margin:0; color:#F3E3E4; max-width:46ch }

/* ── Why ──────────────────────────────────────────────────────── */
.why{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(2rem,5vw,3.5rem); align-items:start }
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem }
.checks li{ position:relative; padding-left:2.4rem; font-size:1.02rem }
.checks li::before{
  content:"★"; position:absolute; left:0; top:.05em;
  display:grid; place-items:center; width:1.7rem; height:1.7rem; font-size:.8rem;
  background:var(--red); color:var(--cream); border:2px solid var(--ink); border-radius:50%;
}
.checks strong{ color:var(--ink); font-weight:600 }

.stats{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.stat{
  background:var(--ink); color:var(--cream); border:3px solid var(--ink);
  border-radius:var(--r); padding:1.15rem 1rem; text-align:center;
  box-shadow:4px 4px 0 var(--red);
}
.stat b{ display:block; font-family:var(--font-display); font-size:1.85rem; line-height:1; color:var(--cream) }
.stat span{
  display:block; margin-top:.4rem; font-family:var(--font-cond);
  text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; color:#A9A395;
}
@media (max-width:860px){ .why{ grid-template-columns:1fr } }

/* ── Service area chips ───────────────────────────────────────── */
.chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
}
.chips li{
  font-family:var(--font-cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; font-size:1rem;
  background:#FCF9F1; border:3px solid var(--ink); border-radius:999px;
  padding:.4rem 1.1rem; box-shadow:3px 3px 0 var(--cream-3); color:var(--ink);
}
.chips li::before{ content:"★"; color:var(--red); margin-right:.45rem; font-size:.75rem; vertical-align:.1em }
.chips__more{ background:var(--red)!important; color:var(--cream)!important; box-shadow:3px 3px 0 var(--ink)!important }
.chips__more::before{ color:var(--cream)!important }

/* ── Reviews ──────────────────────────────────────────────────── */
.quotes{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)) }
.quote{
  margin:0; background:var(--cream); border:3px solid var(--cream);
  border-radius:var(--r); padding:1.5rem; box-shadow:6px 6px 0 var(--red);
}
.quote__stars{ color:var(--red); letter-spacing:.15em; font-size:1.05rem; margin:0 0 .6rem }
.quote blockquote{ margin:0 0 1rem; color:var(--body); font-size:1rem; line-height:1.6 }
.quote blockquote::before{ content:"\201C" } .quote blockquote::after{ content:"\201D" }
.quote figcaption{
  font-family:var(--font-cond); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.92rem; color:var(--ink);
}
.quote figcaption span{ font-weight:400; color:var(--body-lt) }

/* ── Contact ──────────────────────────────────────────────────── */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start }

.deets{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem }
.deets li{ display:flex; gap:1rem; align-items:flex-start }
.deets__ico{
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  background:var(--ink); color:var(--cream); border-radius:11px; box-shadow:3px 3px 0 var(--red);
}
.deets__ico .i{ width:21px; height:21px }
.deets small{
  display:block; font-family:var(--font-cond); text-transform:uppercase;
  letter-spacing:.13em; font-size:.78rem; color:var(--body-lt);
}
.deets a{ font-weight:600; text-decoration:none }
.deets a:hover{ text-decoration:underline }
.deets li > span:last-child{ font-size:1.05rem; color:var(--ink) }

.form{
  background:#FCF9F1; border:3px solid var(--ink); border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2rem); box-shadow:6px 6px 0 var(--red);
}
.form__h{ margin-bottom:1.25rem; font-size:1.5rem }
.field{ margin-bottom:1rem }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
label{
  display:block; font-family:var(--font-cond); font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; font-size:.88rem;
  color:var(--ink); margin-bottom:.3rem;
}
.opt{ color:var(--body-lt); font-weight:400; text-transform:none; letter-spacing:0 }
input,select,textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--cream); border:2px solid var(--cream-3); border-radius:9px;
  padding:.62rem .8rem; transition:border-color .15s ease, background .15s ease;
}
input:focus,select:focus,textarea:focus{ border-color:var(--ink); background:#fff }
textarea{ resize:vertical; min-height:96px }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:2.2rem }
.field--bad input,.field--bad select,.field--bad textarea{ border-color:var(--red) }
.err{ display:block; color:var(--red-dk); font-family:var(--font-cond); font-weight:600; font-size:.88rem; margin-top:.25rem }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form__note{ margin:.85rem 0 0; font-size:.92rem; color:var(--body-lt); text-align:center }
.form__note--ok{ color:#1D6B33; font-weight:600 }
.form__note--bad{ color:var(--red-dk); font-weight:600 }
.btn[aria-busy="true"]{ opacity:.65; pointer-events:none }

@media (max-width:860px){ .contact{ grid-template-columns:1fr } }
@media (max-width:460px){ .field-row{ grid-template-columns:1fr } }

/* ── Footer ───────────────────────────────────────────────────── */
.ftr{ background:var(--ink); color:#A9A395 }
.ftr__in{
  display:grid; grid-template-columns:280px 1fr; gap:clamp(2rem,5vw,4rem);
  padding:clamp(2.75rem,5vw,4rem) 0 2rem; align-items:start;
}
.ftr__brand img{ width:150px }
.ftr__tag{
  font-family:var(--font-cond); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:.95rem; color:var(--red-lt); margin:1rem 0 0; max-width:20ch;
}
.ftr__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2rem }
.ftr__cols h4{
  font-family:var(--font-cond); font-weight:700; font-size:.95rem; color:var(--cream);
  text-transform:uppercase; letter-spacing:.14em; margin:0 0 .85rem;
}
.ftr__cols a,.ftr__cols span{ display:block; color:#A9A395; text-decoration:none; font-size:.98rem; padding:.2rem 0 }
.ftr__cols a:hover{ color:var(--cream) }
.ftr__legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  border-top:1px solid rgba(247,242,231,.12); padding:1.25rem 0 1.75rem;
  font-family:var(--font-cond); letter-spacing:.05em; font-size:.9rem;
}
.ftr__legal p{ margin:0 }
@media (max-width:760px){ .ftr__in{ grid-template-columns:1fr } }

/* ── Sticky mobile call bar ───────────────────────────────────── */
.callbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:200;
  align-items:center; justify-content:center; gap:.6rem;
  background:var(--red); color:var(--cream); text-decoration:none;
  font-family:var(--font-cond); font-weight:700; font-size:1.18rem;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  border-top:3px solid var(--ink);
}
@media (max-width:560px){
  .callbar{ display:flex }
  body{ padding-bottom:64px }
}

@media print{
  .topbar,.hdr,.callbar,.form,.hero::after{ display:none }
  body{ background:#fff; color:#000 }
}