@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700;900&family=Lato:wght@400;700&display=swap');

/* ==========================================================================
   Rowlett TX Plumbing Pros - single stylesheet.
   Visual identity is the supplied D19 reference, preserved: paper-stack
   palette, Fraunces + Lato, rotated hero/CTA/cards, dog-ear card corners,
   torn-paper footer edge, reading-progress bar, staggered card reveal.
   Everything the reference carried as an inline style now lives here.
   ========================================================================== */

:root{
  --base:#E8E0D4;
  --paper1:#FFFDF8;
  --paper2:#FFF5E4;
  --paper3:#F0EBE0;
  --terracotta:#A63F15;
  --olive:#3D6B4F;
  --ink:#2A2116;
  --muted:#5a4d3a;
  --muted2:#6b5d4a;
  --rule:#ddd3c0;
  --maxw:1120px;
  --prose:72ch;
  --card-col:880px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Lato',sans-serif;color:var(--ink);background:var(--base);line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:var(--terracotta)}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px}

.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--terracotta);color:#fff;padding:.6rem 1rem;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}

/* reading progress: was JS-injected inline styles in the reference */
.reading-progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--terracotta);z-index:300;clip-path:polygon(0 0,98% 0,100% 100%,2% 100%)}

/* --------------------------------------------------------------- masthead */
.masthead{background:var(--paper3);position:relative;z-index:70}
.masthead-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.25rem;flex-wrap:wrap}
.brand{font-family:'Fraunces',serif;font-weight:900;font-size:1.15rem;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.brand span{color:var(--terracotta)}
.brand-mark{display:block;width:34px;height:34px;flex:0 0 34px;border-radius:8px;object-fit:contain}
.masthead-tag{font-size:.8rem;color:var(--muted2)}
.masthead-phone{font-weight:700;font-size:.9rem;color:var(--terracotta);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}

/* -------------------------------------------------------------------- nav */
/* z-index above .nav-overlay (50) so the hamburger and the open drawer stay
   tappable while the overlay dims the page behind them. Without this the
   overlay covers the toggle and the menu can only be closed by tapping the
   dimmed area, which is not discoverable. */
.nav{background:var(--paper3);border-bottom:1px solid var(--rule);position:relative;z-index:70}
.nav-in{max-width:var(--maxw);margin:0 auto;display:flex;padding:0 1.25rem;position:relative}
.nav-toggle{display:none}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex:1}
.nav-item{position:relative;display:flex}
.nav-item.has-dropdown>.nav-link{padding-right:.6rem}
.nav-link{padding:.7rem .85rem;color:var(--ink);text-decoration:none;font-size:.82rem;font-weight:700;border:0;background:none;cursor:pointer;font-family:'Lato',sans-serif;min-height:44px;display:inline-flex;align-items:center;gap:.3rem}
.nav-link:hover{color:var(--terracotta)}
.nav-caret{font-size:.6rem;line-height:1;transition:transform .2s}
.nav-item.open>.nav-link .nav-caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:0;z-index:60;min-width:260px;background:var(--paper1);border:1px solid var(--rule);box-shadow:0 14px 30px rgba(0,0,0,.1);padding:.3rem;display:none;list-style:none;margin:0}
/* reference bug: only :hover revealed the dropdown, so it never opened on
   touch. Both states now reveal it, and focus-within covers keyboard. */
.nav-item:hover>.dropdown,
.nav-item:focus-within>.dropdown,
.nav-item.open>.dropdown{display:block}
.dropdown a{display:block;padding:.6rem;color:var(--ink);text-decoration:none;font-size:.85rem;font-weight:700;min-height:44px;display:flex;align-items:center}
.dropdown a:hover{background:var(--paper2)}
.dropdown a.view-all{border-top:1px solid var(--rule);color:var(--terracotta);margin-top:.2rem}
.nav-phone{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--terracotta);color:#fff;text-decoration:none;font-weight:700;min-height:44px}
.nav-phone-icon{font-size:1rem;line-height:1}
.nav-phone-label{font-size:.85rem;letter-spacing:.02em}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(42,33,22,.45);z-index:50}
.nav-overlay.open{display:block}

/* ----------------------------------------------------------------- layout */
.container{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
.section{padding:3rem 0}
.crumbs{font-size:.85rem;padding:.9rem 0 0;color:var(--muted2)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--rule)}
.crumbs a{color:var(--terracotta);text-decoration:none}

/* ------------------------------------------------------------------- hero */
.hero{padding:3.5rem 0}
.hero .container{background:var(--paper1);box-shadow:0 8px 40px rgba(0,0,0,.12);border-radius:4px;padding:2.5rem;transform:rotate(-.4deg);position:relative}
.hero .eyebrow{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);font-weight:700;margin:0}
h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(30px,5vw,52px);line-height:1.1;margin:.4rem 0 .9rem;color:var(--ink);max-width:22ch}
.hero p{max-width:58ch;font-size:1.08rem;color:#4a3f2f;margin:0 0 1.2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:1.2rem;margin:1.3rem 0 0;padding:0;list-style:none;font-size:.86rem;color:var(--muted2)}
.hero-trust li{display:flex;align-items:center;gap:.45rem}
.hero-trust .ht-icon{color:var(--olive);font-weight:700}

/* -------------------------------------------------------------- typography */
h2{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(1.4rem,2.6vw,1.7rem);color:var(--ink);margin:0 0 .7rem}
h2.ruled{border-bottom:1px solid var(--rule);padding-bottom:.5rem}
h3{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(1.02rem,1.8vw,1.1rem);margin:0 0 .4rem;color:var(--ink)}
p{margin:0 0 1.2rem}
.prose{max-width:var(--prose)}
.prose h2,.prose h3{max-width:none}
.lede{font-size:1.05rem;color:#4a3f2f;max-width:62ch}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.5rem;text-decoration:none;font-weight:700;min-height:48px;border:2px solid transparent;font-family:'Lato',sans-serif}
.btn-accent{background:var(--terracotta);color:#fff}
.btn-ghost{background:transparent;color:var(--olive);border-color:var(--olive)}
.section .btn-ghost{color:var(--olive);border-color:var(--olive)}
.cta-inline{margin:1.8rem 0;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.cta-inline p{margin:0;font-weight:700;font-size:.95rem}

/* ----------------------------------------------------------------- grids */
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* ----------------------------------------------------------------- cards */
.card{background:var(--paper1);padding:1.2rem;box-shadow:0 6px 20px rgba(0,0,0,.08);border-radius:2px;position:relative;transform:rotate(.3deg);transition:transform .2s,box-shadow .2s}
.card:nth-child(even){transform:rotate(-.3deg)}
.card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.14)}
.card::after{content:"";position:absolute;bottom:6px;right:6px;width:14px;height:14px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.card h3 a{color:var(--ink);text-decoration:none}
.card p{font-size:.94rem;color:var(--muted)}
.card .card-link{margin-top:.6rem;font-weight:700;font-size:.88rem;color:var(--terracotta);text-decoration:none;display:inline-block}

/* long-form body copy, checklists and callouts render as distinct cards,
   constrained to a readable centred column on wide viewports
   (site-quality-fix section 1) */
.panel{background:var(--paper1);box-shadow:0 6px 20px rgba(0,0,0,.07);border-radius:2px;padding:1.5rem 1.6rem;max-width:var(--card-col);margin:0 auto 1.4rem}
.panel>:last-child{margin-bottom:0}
.checklist{background:var(--paper1);border-left:4px solid var(--olive);box-shadow:0 6px 20px rgba(0,0,0,.07);padding:1.4rem 1.6rem;max-width:var(--card-col);margin:0 auto 1.4rem}
.checklist ul{list-style:none;margin:.4rem 0 0;padding:0}
.checklist li{position:relative;padding-left:1.6rem;margin-bottom:.6rem;font-size:.96rem}
.checklist li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--olive);font-weight:700}
.callout{background:var(--paper2);border:1px solid #e3d5bd;border-radius:2px;padding:1.3rem 1.5rem;max-width:var(--card-col);margin:0 auto 1.4rem}
.callout h3{color:var(--terracotta)}
.callout>:last-child{margin-bottom:0}
.steps{counter-reset:step;list-style:none;margin:.6rem auto 1.4rem;padding:0;max-width:var(--card-col)}
.steps li{counter-increment:step;position:relative;padding:0 0 .9rem 2.6rem;font-size:.96rem}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;border:1px solid var(--rule);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:.85rem;color:var(--terracotta);background:var(--paper1)}

.band{background:var(--paper2);border-top:1px solid #e3d5bd;border-bottom:1px solid #e3d5bd}
.feature{margin:0 0 1.4rem;max-width:var(--card-col)}

/* ------------------------------------------------------------ image slots */
.image-slot{margin:1.5rem auto;border-radius:4px;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%}
.image-slot-label{padding:1rem;text-align:center;color:#6b7280;font-size:.875rem}

/* -------------------------------------------------------------- map, table */
.map-wrap{position:relative;padding-bottom:56.25%;height:0;max-width:var(--card-col);margin:1.5rem auto;border:1px solid var(--rule);background:var(--paper1)}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:var(--card-col);margin:1.2rem auto}
.table-wrap table{border-collapse:collapse;width:100%;background:var(--paper1);font-size:.94rem}
.table-wrap th,.table-wrap td{border:1px solid var(--rule);padding:.65rem .8rem;text-align:left;vertical-align:top}
.table-wrap th{background:var(--paper2);font-family:'Fraunces',serif}
.table-wrap td.range{font-weight:700;color:var(--olive)}

/* ------------------------------------------------------------------- faq */
.faq details{border:1px solid var(--rule);padding:.2rem;margin:0 auto .7rem;background:var(--paper1);max-width:var(--card-col)}
.faq summary{cursor:pointer;padding:.85rem 1rem;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:'Fraunces',serif;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--terracotta);flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq .faq-body{padding:.85rem 1rem 0}
.faq .faq-body>:last-child{margin-bottom:.85rem}

/* ----------------------------------------------------------------- areas */
.area-cols{columns:2;column-gap:2rem}
.area-cols ul{list-style:none;margin:0;padding:0}
.area-cols li{margin-bottom:.45rem}
.area-cols a{color:var(--terracotta);text-decoration:none;font-weight:700;font-size:.92rem}
.zip-card{background:var(--paper1);border:1px dashed var(--rule);padding:1.2rem 1.4rem;max-width:var(--card-col);margin:1.4rem auto}
.zip-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.6rem 0 0}
.zip-list li{background:var(--paper2);border:1px solid #e3d5bd;padding:.3rem .7rem;font-weight:700;font-size:.9rem}

/* -------------------------------------------------------------- cta band */
.cta-band{background:var(--paper3)}
.cta-band .container{background:var(--olive);color:#fff;box-shadow:0 8px 40px rgba(0,0,0,.14);padding:2.4rem;transform:rotate(.3deg)}
.cta-band h2{color:#fff}
.cta-band p{color:#e2ecdf}
.cta-band .btn-ghost{color:#fff;border-color:#fff}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--paper3);color:var(--ink);position:relative}
.site-footer::before{content:"";display:block;height:12px;background:var(--paper3);clip-path:polygon(0 100%,3% 0,6% 100%,9% 0,12% 100%,15% 0,18% 100%,21% 0,24% 100%,27% 0,30% 100%,33% 0,36% 100%,39% 0,42% 100%,45% 0,48% 100%,51% 0,54% 100%,57% 0,60% 100%,63% 0,66% 100%,69% 0,72% 100%,75% 0,78% 100%,81% 0,84% 100%,87% 0,90% 100%,93% 0,96% 100%,99% 0,100% 100%)}
.site-footer .container{padding-top:2rem;padding-bottom:1.4rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.6rem}
.footer-brand .brand{color:var(--ink)}
.footer-brand p{font-size:.9rem;color:var(--muted2);margin:.7rem 0}
.site-footer h3{color:var(--terracotta);font-size:.85rem;text-transform:uppercase;font-family:'Fraunces',serif;letter-spacing:.04em}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.4rem}
.site-footer a{color:var(--muted2);text-decoration:none;font-size:.88rem}
.site-footer a:hover{color:var(--terracotta)}
.footer-phone{display:inline-block;font-family:'Fraunces',serif;font-weight:900;font-size:1.15rem;color:var(--terracotta);text-decoration:none;min-height:44px;line-height:44px}
.footer-email{display:inline-block;font-size:.88rem;color:var(--muted2);text-decoration:none}
.footer-nap{font-size:.88rem;color:var(--muted2);margin:.4rem 0 0;font-style:normal}
.footer-legal{border-top:1px solid var(--rule);margin-top:1.4rem;padding-top:1rem;font-size:.78rem;color:var(--muted);line-height:1.6}
.footer-legal p{margin:0 0 .6rem}
.footer-legal p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ sticky cta */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--terracotta)}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem;color:#fff;text-decoration:none;font-weight:700;min-height:48px}

/* ----------------------------------------------------------- reveal state */
.reveal{opacity:0;transform:translateY(60px);transition:opacity .5s ease,transform .5s ease}
.reveal.shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card,.hero .container,.cta-band .container{transform:none!important}
  .reading-progress{display:none}
}

/* ----------------------------------------------------------------- mobile */
@media (max-width:767px){
  .hero{padding:2.2rem 0}
  .hero .container{transform:none;padding:1.6rem}
  .card{transform:none!important}
  .masthead-in{gap:.4rem}
  .masthead-tag{flex:1 1 100%;order:3}
  .nav-in{flex-wrap:wrap}
  .nav-toggle{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;color:var(--ink);font-family:'Lato',sans-serif;font-weight:700;padding:.75rem 0;min-height:44px;cursor:pointer}
  .nav-list{display:none;flex-direction:column;flex:1 1 100%;border-top:1px solid var(--rule)}
  .nav-list.open{display:flex}
  .nav-item{display:block}
  .nav-item>.nav-link{width:100%;justify-content:space-between}
  .dropdown{position:static;box-shadow:none;border:0;border-left:3px solid var(--rule);margin:0 0 .4rem .85rem;min-width:0}
  .nav-item:hover>.dropdown{display:none}
  .nav-item.open>.dropdown{display:block}
  .nav-phone{margin-left:0;order:2}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .area-cols{columns:1}
  .footer-grid{grid-template-columns:1fr;gap:1.4rem}
  .sticky-cta{display:block}
  body{padding-bottom:56px}
  .cta-band .container{transform:none;padding:1.6rem}
  .panel,.checklist,.callout{padding:1.1rem 1.2rem}
  .panel,.checklist,.callout,.steps,.map-wrap,.table-wrap,.faq details{max-width:none}
}
@media (min-width:768px) and (max-width:900px){
  .nav-link{padding:.7rem .55rem;font-size:.78rem}
  .nav-phone{padding:.5rem .7rem}
}

/* hub coverage map (rules 12) */
.cm-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem;align-items:start}
.cm-places{columns:2;list-style:none;padding:0;margin:1rem 0}
.cm-places li{padding:.25rem 0;break-inside:avoid}
.cm-zips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.5rem 0 1rem}
.cm-zips li{border:1px solid var(--rule);background:var(--paper1);padding:.3rem .7rem;font-weight:600}
.cm-callout{border-left:4px solid var(--accent);background:var(--paper1);padding:.75rem 1rem}
.cm-callout p{margin:0}
.covermap{width:100%;height:auto;display:block;border:1px solid var(--rule);background:var(--paper1)}
.cm-grid line{stroke:var(--rule);stroke-width:1;opacity:.6}
.cm-dot{fill:var(--accent);stroke:#fff;stroke-width:2}
.cm-city .cm-dot{fill:var(--ink)}
.cm-hit{fill:transparent}
.covermap text{font:600 14px system-ui,sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--paper1);stroke-width:4px}
.cm-pin:focus{outline:none}
.cm-pin:focus-visible .cm-hit{stroke:var(--ink);stroke-width:3;fill:rgba(0,0,0,.06)}
.cm-cap{font-size:.875rem;margin:.5rem 0}
@media(max-width:760px){.cm-wrap{grid-template-columns:minmax(0,1fr)}.covermap text{display:none}}
@media(max-width:760px){.cm-hit{r:34px}}
.cm-list{min-width:0}.cm-map{min-width:0}.cm-zhead{margin:1rem 0 .25rem}
.brand-logo{display:block;height:60px;width:auto}.brand-logo-foot{height:65px}@media(max-width:600px){.brand-logo{height:44px}.brand-logo-foot{height:56px}}

/* Stage 2 real photographs */
.photo{margin:1.5rem auto;width:100%}
.photo img{display:block;width:100%;height:auto;border-radius:4px;background:var(--paper1)}
.photo figcaption{font-size:.875rem;line-height:1.45;color:var(--ink-soft,#5b5348);padding:.5rem .15rem 0}
.hero,.cta-band{overflow-x:clip}