/* ============================================================
   refine.css — loads after styles-v6.css
   Layout / hierarchy pass. V17 establishes the final steel-blue / orange / gray-mist design system.
   ============================================================ */

/* ---------- 1. Keystone mark ---------- */
.mark{gap:8px}
.mark .keystone{
  width:15px;height:auto;flex:none;
  transform:translateY(1px);
  color:var(--copper);
}
.mark .keystone path{fill:currentColor}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- 2. Top strip: right slot is now the phone ---------- */
.strip a.strip-call{
  color:#fff;font-weight:600;border-bottom:1px solid rgba(215,104,54,.9);
}
.strip a.strip-call:hover{color:var(--copper)}

/* ---------- 3. Mobile menu ---------- */
.mnav{display:none;position:relative}
.mnav summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:44px;height:40px;border-radius:3px;
  background:rgba(255,255,255,.09);
}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::marker{content:''}
.mnav summary:hover{background:rgba(255,255,255,.16)}
.mnav .bars{position:relative;display:block;width:19px;height:2px;background:#fff;border-radius:2px}
.mnav .bars::before,.mnav .bars::after{
  content:'';position:absolute;left:0;width:19px;height:2px;background:#fff;border-radius:2px;
  transition:transform .18s ease,top .18s ease;
}
.mnav .bars::before{top:-6px}
.mnav .bars::after{top:6px}
.mnav[open] .bars{background:transparent}
.mnav[open] .bars::before{top:0;transform:rotate(45deg)}
.mnav[open] .bars::after{top:0;transform:rotate(-45deg)}

.mnav-panel{
  position:absolute;top:calc(100% + 11px);right:0;z-index:80;
  width:min(280px,calc(100vw - 28px));
  background:var(--deep);
  border:1px solid rgba(255,255,255,.16);
  border-top:3px solid var(--copper);
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  padding:8px;
}
.mnav-panel a{
  display:block;padding:12px 13px;border-radius:3px;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:#d6e1e5;
}
.mnav-panel a:hover,.mnav-panel a:focus-visible{background:rgba(255,255,255,.09);color:#fff}
.mnav-panel hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:8px 6px}
.mnav-panel a.mnav-call{
  background:var(--copper);color:#fff;font-weight:600;text-align:center;margin-top:2px;
}
.mnav-panel a.mnav-call:hover{background:var(--copper-dk);color:#fff}

@media(max-width:860px){
  .navlinks a:not(.cta){display:none}
  .mnav-panel a{display:block!important}
  .mnav{display:block}
  .nav .wrap{gap:10px}
  .navlinks{gap:8px}
}
@media(max-width:400px){
  .navlinks a.cta{display:none}
}

/* ---------- 4. Hero carries the request form ---------- */
.hero,.page-hero{padding-bottom:clamp(30px,3.6vw,46px)}
.hero{padding-top:clamp(30px,4vw,52px)}
.page-hero{padding-top:clamp(22px,3vw,38px)}

.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,3.4vw,50px);align-items:start;
}
.hero-grid .hero-main{min-width:0}
.hero-grid .hero-form{min-width:0}

.hero h1{max-width:24ch;font-size:clamp(2.05rem,3.9vw,3.4rem);margin-bottom:clamp(18px,2.4vw,28px)}
.page-hero h1{max-width:26ch;font-size:clamp(1.85rem,3.2vw,2.8rem);margin-bottom:clamp(16px,2vw,24px)}
.hero-grid .hero-row,
.hero-grid .page-hero-row{
  grid-template-columns:1fr;gap:16px;margin-top:0;padding-top:0;border-top:0;
}
.hero-grid .lede{max-width:52ch;font-size:1.02rem}
.hero-grid .hero-act .btn{flex:0 1 auto}

/* the form card, sitting on the dark hero */
.hero-form .form{
  background:var(--white);border:1px solid rgba(255,255,255,.2);
  border-top:3px solid var(--copper);
  box-shadow:0 22px 50px rgba(0,0,0,.26);
  padding:clamp(18px,2vw,24px);
}
.hero-form,.hero-form .form{color:var(--ink)}
.hero-form .form h2{font-size:1.24rem;line-height:1.18;color:var(--ink)}
.hero-form .form>p{font-size:.88rem;margin-bottom:14px;color:var(--muted)}
.hero-form .form label{color:var(--muted)}
.hero-form .form .fnote{color:var(--muted)}
.hero-form .form .fnote a{color:var(--ink)}
.hero-form .form input,.hero-form .form select,.hero-form .form textarea{color:var(--ink)}
.hero-form .context-line{
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--copper-dk);
  margin-bottom:8px;display:block;
}
.hero-form .f{margin-bottom:10px}
.hero-form .fnote{font-size:.75rem}

/* ---------- 5. Steps live in the hero's left column ---------- */
.hero-steps{margin-top:clamp(22px,2.6vw,30px);padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid rgba(255,255,255,.16)}
.hero-steps .quick-steps{display:grid;gap:14px}
.hero-steps .quick-step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:11px;align-items:start}
.hero-steps .quick-step .n{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;font-weight:600;color:var(--copper);
}
.hero-steps .quick-step strong{display:block;font-size:.9rem;line-height:1.3;margin-bottom:1px;color:#fff}
.hero-steps .quick-step span span{font-size:.83rem;color:#b7c7cd;line-height:1.45;display:block}

/* ---------- 6. Photos: sized to each source, not one blanket crop ----------
   Sources: truck 3:2, septic 3:2, handwashing 1.41:1, interior 2:3 portrait.
   The old blanket 16:10 crop chopped the portrait shot badly. */

/* 3:2 sources shown at 3:2 — nothing lost */
.proof-photo img,
.town-real-photo img,
.service-photo-split .service-photo-card img{
  aspect-ratio:3/2;object-fit:cover;object-position:center;height:auto;
}

/* the side-by-side pair: matched heights, framed on the subject */
.photo-duo{gap:18px;align-items:start}
.photo-duo .service-photo-card img{
  aspect-ratio:4/3;object-fit:cover;object-position:center 52%;height:auto;
}
.photo-duo img[src*="portable-toilet-interior"]{object-position:center 47%}

.service-photo-split{align-items:start}

/* ---------- 7. Downplayed blocks ---------- */
.local-board,
.sec--quiet{background:var(--paper)}
.sec--quiet .head h2{font-size:clamp(1.3rem,2.1vw,1.7rem)}
.local-board .head h2{font-size:clamp(1.3rem,2.1vw,1.7rem)}
.local-board,
.sec--quiet{padding-block:clamp(34px,4vw,52px)}

/* ---------- 8. Bottom request keeps its weight ---------- */
.bottom-request .form{border-top:3px solid var(--copper)}

/* ---------- 9. Responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero h1,.page-hero h1{max-width:24ch}
  .steps-strip .wrap{grid-template-columns:1fr;gap:12px;padding-block:16px}
}
@media(max-width:720px){
  .hero{padding-top:26px;padding-bottom:26px}
  .page-hero{padding-top:20px;padding-bottom:24px}
  .hero h1{font-size:clamp(1.75rem,7vw,2.2rem);max-width:100%;margin-bottom:16px}
  .page-hero h1{font-size:clamp(1.6rem,6.2vw,2rem);max-width:100%;margin-bottom:14px}
  .hero-grid .lede{font-size:.96rem}
  /* form ahead of the supporting copy on a phone */
  .hero-grid{display:flex;flex-direction:column}
  .hero-grid .hero-form{order:-1}
  .hero-grid .hero-main .lede{margin-top:4px}
  .hero-act{display:grid;grid-template-columns:1fr;gap:8px}
  .hero-act .btn{width:100%}
  .refer .proof-photo img,.town-real-photo img{max-height:260px}
}

/* ============================================================
   10. Per-town local copy + emergency septic block
   ============================================================ */
.local-copy{padding-block:clamp(34px,4.2vw,56px)}
.local-copy-in{max-width:76ch}
.local-copy p{font-size:1.02rem;line-height:1.68;color:#3e4d54}
.local-copy .head{margin-bottom:18px}
.local-copy .head h2{font-size:clamp(1.35rem,2.3vw,1.85rem)}

.urgent-inline{
  margin-top:20px;padding:14px 16px;background:var(--white);
  border:1px solid var(--rule);border-left:3px solid var(--copper);
  font-size:.94rem;line-height:1.55;
}
.urgent-inline strong{color:var(--ever)}
.urgent-inline a{border-bottom:1px solid var(--copper);font-weight:600}

/* the emergency section on the septic pillar */
.sec--urgent{background:var(--ever);color:#fff;padding-block:clamp(40px,5vw,68px)}
.sec--urgent h2,.sec--urgent h3{color:#fff}
.sec--urgent .head .mono{color:var(--copper);display:block;margin-bottom:10px}
.sec--urgent .head p{color:#b7c7cd}
.sec--urgent h3{font-size:1.05rem;margin:24px 0 10px}
.sec--urgent h3:first-child{margin-top:0}
.sec--urgent p,.sec--urgent li{color:#d7e1e5}
.sec--urgent .marks li::before{background:var(--copper)}
.steps-ol{padding-left:20px;margin:0}
.steps-ol li{margin-bottom:10px;line-height:1.55;font-size:.97rem}
.steps-ol strong{color:#fff}

.urgent-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);
  border-top:3px solid var(--copper);padding:20px;
}
.urgent-card .record-hd{border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:12px;margin-bottom:14px}
.urgent-card .record-hd .mono{color:var(--copper)}
.urgent-card p{font-size:.93rem}
.urgent-card .btn{margin-top:12px}
.urgent-card .btn.line-dk{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);background:transparent}
.urgent-card .btn.line-dk:hover{background:rgba(255,255,255,.1)}
.urgent-note{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;color:#b7c7cd}
.urgent-aside{margin-top:18px;padding:18px 20px;background:rgba(0,0,0,.16);border-left:3px solid rgba(255,255,255,.24)}
.urgent-aside h3{margin-top:0;font-size:1rem}
.urgent-aside p{font-size:.9rem;margin:0}

.emergency-jump{margin:0 0 18px}
.emergency-jump a{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#fff;
  background:var(--copper-dk);padding:9px 14px;border-radius:3px;
}
.emergency-jump a:hover{background:var(--copper)}

.pillar-backlink{
  background:var(--cream);border-bottom:1px solid var(--rule);margin:0;
  padding:12px var(--gut);text-align:center;font-size:.88rem;color:var(--muted);
}
.pillar-backlink a{color:var(--ever);font-weight:600;border-bottom:1px solid var(--copper)}

@media(max-width:720px){
  .local-copy p{font-size:.97rem}
  .urgent-card{padding:16px}
}

/* ============================================================
   11. Titan flow — info first, one provider block at the end
   ============================================================ */

/* hero: headline, lede, two buttons. No form. */
.hero-lead{max-width:none}
.hero-lead .lede{margin:0;max-width:56ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-cta .btn{flex:0 1 auto}
.hero .hero-row{grid-template-columns:1.3fr .7fr;align-items:center}
.hero .hero-row .hero-cta{justify-content:flex-end}
.page-hero .hero-cta{margin-top:clamp(16px,2vw,22px)}
@media(min-width:981px){.page-hero-row{grid-template-columns:1.4fr .6fr}}

/* the continuous side-scrolling band, as on the Titan site */
.ticker--marquee{overflow:hidden}
.ticker--marquee .ticker-in{width:max-content;flex-wrap:nowrap;animation:ticker-scroll 46s linear infinite}
.ticker--marquee:hover .ticker-in,
.ticker--marquee:focus-within .ticker-in{animation-play-state:paused}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
@media(prefers-reduced-motion:reduce){
  .ticker--marquee{overflow-x:auto}
  .ticker--marquee .ticker-in{animation:none;width:auto}
}

/* provider block */
.provider-block{padding-block:clamp(44px,5.4vw,74px)}
.provider-head{max-width:60ch;margin-bottom:clamp(26px,3.2vw,40px)}
.provider-head .mono{color:var(--copper);display:block;margin-bottom:10px}
.provider-head h2{color:#fff;margin-bottom:12px}
.provider-head p{color:#b7c7cd;margin:0}
.provider-block .split{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:start;gap:clamp(26px,3.4vw,52px)}
.provider-col>span.mono{color:var(--copper);display:block;margin-bottom:10px}
.provider-col h2{color:#fff;margin-bottom:12px;font-size:clamp(1.45rem,2.3vw,1.95rem);max-width:18ch}
.provider-col p{color:#d7e1e5}
.provider-col .record{margin-top:22px}
.provider-col .refer-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.provider-stars{color:var(--copper);font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.06em;margin-top:14px}

.provider-steps{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-left:3px solid var(--copper);padding:16px 18px;margin-bottom:16px}
.provider-steps .quick-steps{display:grid;gap:11px}
.provider-steps .quick-step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start}
.provider-steps .quick-step .n{font-family:'IBM Plex Mono',monospace;font-size:.66rem;font-weight:600;color:var(--copper)}
.provider-steps .quick-step strong{display:block;font-size:.87rem;color:#fff;line-height:1.3}
.provider-steps .quick-step span span{display:block;font-size:.8rem;color:#b7c7cd;line-height:1.45}

.provider-form .form{background:var(--white);color:var(--ink);border:1px solid rgba(255,255,255,.2);border-top:3px solid var(--copper);box-shadow:0 22px 50px rgba(0,0,0,.28)}
.provider-form .form h2,.provider-form .form h3{color:var(--ink)}
.provider-form .form p{color:var(--muted)}
.provider-form .form label{color:var(--muted)}
.provider-form .form input,.provider-form .form select,.provider-form .form textarea{color:var(--ink)}
.provider-form .form .fnote{color:var(--muted)}
.provider-form .form .fnote a{color:var(--ink)}
.provider-form .context-line{font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--copper-dk);display:block;margin-bottom:8px}

@media(max-width:980px){
  .provider-block .split{grid-template-columns:1fr}
  .provider-form{order:-1}
  .page-hero-row,.hero .hero-row{grid-template-columns:1fr}
  .hero .hero-row .hero-cta{justify-content:flex-start}
}
@media(max-width:720px){
  .hero-cta{display:grid;grid-template-columns:1fr;gap:8px}
  .hero-cta .btn{width:100%}
  .ticker--marquee .ticker-in{animation-duration:32s}
}

/* ============================================================
   12. Hero photo, provider logo, and a single spacing scale
   ============================================================ */

/* ---- one vertical rhythm for every band ---- */
:root{
  --band:clamp(46px,6vw,86px);      /* standard section */
  --band-sm:clamp(34px,4.2vw,58px); /* quieter section */
  --band-lg:clamp(56px,7vw,100px);  /* hero + provider */
}
.sec{padding-block:var(--band)}
.sec--tight,.sec--quiet,.local-board{padding-block:var(--band-sm)}
.local-copy{padding-block:var(--band)}
.sec--urgent{padding-block:var(--band)}
.provider-block{padding-block:var(--band-lg)}
.hero{padding-block:var(--band-lg) var(--band)}
.page-hero{padding-block:clamp(30px,3.6vw,48px) var(--band-sm)}
.related,.refer{padding-block:var(--band)}

/* consistent heading block spacing everywhere */
.head{margin-bottom:clamp(22px,2.6vw,34px)}
.head h2{margin-bottom:10px}
.head p{margin:0}

/* ---- hero photograph (homepage + septic pages) ---- */
.hero--photo{position:relative;isolation:isolate;overflow:hidden}
.hero--photo>*{position:relative;z-index:2}
.hero--photo::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:url('hero-septic-pumping-sm.jpg');
  background-size:cover;background-position:center 58%;
  opacity:.62;
}
@media(min-width:721px){
  .hero--photo::before{background-image:url('hero-septic-pumping.jpg')}
}
/* keeps the type legible over the photo at any crop */
.hero--photo::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,
      rgba(54,91,106,.97) 0%,
      rgba(54,91,106,.94) 34%,
      rgba(54,91,106,.72) 58%,
      rgba(54,91,106,.46) 100%),
    linear-gradient(to bottom,rgba(23,44,53,.45),rgba(23,44,53,0) 40%,rgba(23,44,53,.55));
}
.page-hero.hero--photo::before{opacity:.46;background-position:center 62%}
@media(prefers-reduced-motion:no-preference){
  .hero--photo::before{transition:opacity .4s ease}
}

/* ---- provider logo plate ---- */
.provider-logo{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid rgba(255,255,255,.22);
  padding:14px 20px;margin-bottom:18px;border-radius:2px;
  max-width:280px;
}
.provider-logo img{display:block;width:100%;height:auto;max-height:86px;object-fit:contain}

/* ---- proportion fixes ---- */
.provider-col>span.mono{margin-bottom:8px}
.provider-col h2{max-width:20ch}
.provider-block .split{gap:clamp(26px,3.4vw,54px)}
.duo,.trio{gap:clamp(16px,2vw,22px)}
.svc{padding:clamp(22px,2.8vw,34px)}
.gcard{padding:clamp(20px,2.4vw,26px)}
.record{padding:clamp(20px,2.4vw,28px)}
.form{padding:clamp(20px,2.4vw,28px)}

@media(max-width:720px){
  .provider-logo{max-width:210px;padding:11px 15px;margin-bottom:15px}
  .provider-logo img{max-height:64px}
  .hero--photo::before{opacity:.34}
  .svc,.gcard,.record,.form{padding:18px}
}

/* ---- proportion corrections ---- */
/* .wrap.wrap-narrow centred its own 760px, so the FAQ block sat 180px inboard
   of every other section. One left rail sitewide. */
.wrap.wrap-narrow{width:min(var(--max),100% - (var(--gut) * 2));margin-inline:auto}
.wrap.wrap-narrow>*{max-width:78ch}

/* .refer came later in the cascade and was flattening the provider band */
.refer.provider-block{padding-block:var(--band-lg)}

/* the 96px footer tail exists to clear the mobile action bar — only needed
   where that bar actually shows */
.foot{padding-bottom:var(--band)}
@media(max-width:720px){.foot{padding-bottom:96px}}

/* article body shares the same left rail as every other section */
.article{width:min(var(--max),100% - (var(--gut) * 2));margin-inline:auto}
.article>*{max-width:74ch}
.article>.tscroll,.article>.spec,.article>.surface-grid,.article>.split{max-width:100%}

/* ============================================================
   13. Ken Burns hero, provider block v2, mobile strip
   ============================================================ */

/* ---- slow looping Ken Burns on the hero photograph ---- */
.hero--photo::before{
  transform-origin:58% 55%;
  will-change:transform;
  animation:kenburns 34s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.4%,-1.6%,0)}
}
@media(prefers-reduced-motion:reduce){
  .hero--photo::before{animation:none;transform:none}
}

/* ---- top strip sits flush to the viewport edge on mobile ---- */
@media(max-width:720px){
  .strip .wrap{
    display:flex;align-items:center;min-height:36px;
    padding-block:7px;
  }
  .strip .strip-area{display:flex;align-items:center;width:100%}
  .mobile-season{display:flex;align-items:center;width:100%}
}

/* ---- provider block v2 ---- */
.provider-layout{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(24px,3.2vw,48px);align-items:start;
}
.provider-id{display:grid;gap:16px;align-content:start}

/* the supplied logo has a white background, so the plate is white and
   seamless rather than a visible card */
.provider-logo{
  background:#fff;padding:16px 18px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  max-width:250px;margin:0;border:0;
}
.provider-logo img{display:block;width:100%;height:auto;max-height:78px;object-fit:contain}

.provider-id h3{color:#fff;font-size:1.28rem;margin:0}
.provider-blurb{color:#d7e1e5;font-size:.95rem;line-height:1.6;margin:0}
.provider-facts{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.provider-facts li{
  position:relative;padding-left:18px;color:#d7e1e5;font-size:.9rem;line-height:1.45;
}
.provider-facts li::before{
  content:'';position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--copper);
}
.provider-reviews{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);padding:14px 16px;
}
.provider-reviews .mono{color:var(--copper);display:block;margin-bottom:10px}
.provider-id .proof-photo{margin:0;border:1px solid rgba(255,255,255,.16);overflow:hidden}
.provider-id .proof-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.provider-id .proof-photo figcaption{
  padding:9px 12px;font-size:.76rem;color:#9db3bc;border-top:1px solid rgba(255,255,255,.16);
}
.provider-act{display:grid;gap:8px}
.provider-act .btn{width:100%}

.provider-form .form{
  background:var(--white);color:var(--ink);border:0;border-top:3px solid var(--copper);
  box-shadow:0 24px 54px rgba(0,0,0,.3);padding:clamp(22px,2.6vw,32px);
}

@media(max-width:980px){
  .provider-layout{grid-template-columns:1fr}
  .provider-form{order:-1}
  .provider-logo{max-width:210px}
}
@media(max-width:720px){
  .provider-layout{gap:22px}
  .provider-id{gap:14px}
}

/* the map column carries the municipal drawer so it no longer trails off into
   empty space beside a long prose column */
.split>figure.map{position:sticky;top:78px}
.split .map+.info-drawer{margin-top:14px}
.map iframe{aspect-ratio:4/3;height:auto}
@media(max-width:980px){
  .split>figure.map{position:static}
  .map iframe{aspect-ratio:16/10}
}
.split-side{position:sticky;top:78px;display:grid;gap:14px;align-content:start}
.split>figure.map{position:static}
.map iframe{aspect-ratio:4/3;height:auto;min-height:0}
@media(max-width:980px){
  .split-side{position:static}
  .map iframe{aspect-ratio:16/10}
}

/* ============================================================
   14. Mobile: shorter, calmer pages. No content removed — the
   longer lists are trimmed to a preview with the full set one
   tap away, and the blocks are tightened.
   ============================================================ */
@media(max-width:720px){

  /* section rhythm a touch tighter */
  :root{--band:42px;--band-sm:32px;--band-lg:48px}

  /* guides: show two, let the button carry the rest */
  .sec--sage .duo .gcard:nth-child(n+3){display:none}
  .gcard h3{font-size:1.02rem}
  .gcard p{font-size:.86rem}

  /* service cards: tighter type, less air */
  .svc{padding:20px}
  .svc h2{font-size:1.5rem}
  .svc p{font-size:.92rem;margin-bottom:.8em}
  .svc .mono{margin-bottom:10px}

  /* town pills read as a wrapped list rather than a wall of chips */
  .pills{gap:6px}
  .pills a{padding:8px 10px;font-size:.72rem}

  /* the seasonal board's options table is reference, not headline */
  .local-board .record{padding:16px}
  .local-board .row{padding:9px 0}
  .local-board .row dt{font-size:.6rem}
  .local-board .row dd{font-size:.88rem}

  /* headings shouldn't shout on a phone */
  .head h2,.sec h2{font-size:clamp(1.3rem,5.6vw,1.6rem)}
  .head p{font-size:.92rem}
  .provider-head h2{font-size:clamp(1.35rem,5.8vw,1.7rem)}

  /* footer: three stacked blocks, not three stacked essays */
  .foot{padding-top:32px}
  .foot-grid{gap:22px}
  .foot p{font-size:.84rem}
  .legal{font-size:.72rem;padding-top:16px;margin-top:22px}

  /* provider block: form first, supporting detail after */
  .provider-id{gap:12px}
  .provider-id .proof-photo img{aspect-ratio:16/9}
  .provider-reviews{padding:12px 14px}
  .provider-form .form{padding:18px}
  .f{margin-bottom:9px}
  .f input,.f select,.f textarea{padding:10px 11px}
  .f textarea{min-height:88px}
}

/* ============================================================
   15. Modern finish — same palette, same fonts, new surface
   language: soft radii, layered shadows, quieter borders.
   ============================================================ */
:root{
  --r-card:16px;
  --r-btn:9px;
  --r-input:9px;
  --shadow-1:0 1px 2px rgba(23,44,53,.05),0 4px 14px rgba(23,44,53,.06);
  --shadow-2:0 2px 4px rgba(23,44,53,.06),0 14px 34px rgba(23,44,53,.10);
  --shadow-3:0 24px 60px rgba(0,0,0,.30);
  --line:rgba(54,91,106,.10);
}

/* surfaces */
.svc,.gcard,.record,.form,.agency,.urgent-inline,.local-board .record,
.info-drawer,.map,.urgent-card,.urgent-aside,.provider-reviews,
.provider-id .proof-photo{
  border-radius:var(--r-card);
  border-color:var(--line);
  box-shadow:var(--shadow-1);
}
.svc--fill{border-color:transparent}
.record{border-top-width:3px}
.form{border:1px solid var(--line);border-top:3px solid var(--copper)}
.map{overflow:hidden}
.map iframe{border-radius:0}

/* cards respond */
.gcard,.svc{transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line)}
.svc:not(.svc--fill):hover{box-shadow:var(--shadow-2)}

/* buttons */
.btn{border-radius:var(--r-btn);transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(184,79,38,.28)}
.btn.solid:hover,.btn.line:hover,.btn.line-dk:hover{box-shadow:0 6px 16px rgba(23,44,53,.2)}
.btn:active{transform:translateY(0)}

/* inputs */
.f input,.f select,.f textarea{border-radius:var(--r-input);border-color:var(--line);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.f input:focus,.f select:focus,.f textarea:focus{box-shadow:0 0 0 3px rgba(215,104,54,.18);border-color:var(--copper)}

/* pills become chips */
.pills a{border-radius:999px;padding:8px 14px;border-color:var(--line);transition:all .16s ease}
.pills a:hover{transform:translateY(-1px)}

/* nav: subtle depth + blur */
.nav{background:rgba(54,91,106,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(23,44,53,.18)}
.navlinks a{border-radius:8px}
.navlinks a.cta{border-radius:var(--r-btn)}
.mnav summary{border-radius:10px}
.mnav-panel{border-radius:14px;overflow:hidden}
.mnav-panel a{border-radius:8px}

/* accordions */
.qa details,.info-drawer{border-radius:14px}
.info-drawer{border:1px solid var(--line);background:var(--white)}
.qa summary{transition:color .16s ease}
.qa summary:hover{color:var(--copper-dk)}

/* dark-section panels */
.record--dk,.urgent-card,.urgent-aside,.provider-reviews{border-radius:var(--r-card);border-color:rgba(255,255,255,.14)}

/* ---------- hero with the returning top form ---------- */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,3.6vw,56px);align-items:center;
}
.hero-grid .hero-main{min-width:0}
.hero-grid .hero-lead{max-width:none}
.hero-grid .hero-row{grid-template-columns:1fr;gap:0;border:0;padding:0;margin:0}
.hero-grid .lede{max-width:50ch}
.hero-grid .hero-cta{display:none}          /* the form IS the call to action */
.hero-grid .hero-steps{border-top:1px solid rgba(255,255,255,.14)}

.hero-form .form{
  background:var(--white);color:var(--ink);
  border:0;border-top:3px solid var(--copper);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-3);
  padding:clamp(20px,2.3vw,28px);
}
.hero-form .form h2{color:var(--ink);font-size:1.3rem;margin-bottom:6px}
.hero-form .form label{color:var(--muted)}
.hero-form .form input,.hero-form .form select{color:var(--ink)}
.hero-form .form .fnote{color:var(--muted)}
.hero-form .form .fnote a{color:var(--ink)}
.hero-form .disclose{
  font-size:.85rem;color:var(--muted);line-height:1.5;margin:0 0 16px;
  padding:9px 12px;background:var(--cream);border-radius:9px;
}

/* the provider logo is white artwork — straight onto the dark panel */
.provider-logo{background:transparent;border:0;padding:0;max-width:250px;margin:0;box-shadow:none}
.provider-logo img{max-height:70px;width:auto}
.provider-proof{display:grid;gap:16px;align-content:start}
.provider-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
.provider-act{display:flex;flex-wrap:wrap;gap:9px}
.provider-act .btn{width:auto;flex:1 1 auto}

/* marquee: gradient fade at the edges */
.ticker--marquee{position:relative}
.ticker--marquee::before,.ticker--marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none;
}
.ticker--marquee::before{left:0;background:linear-gradient(to right,var(--deep),transparent)}
.ticker--marquee::after{right:0;background:linear-gradient(to left,var(--deep),transparent)}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:24px;align-items:start}
}
@media(max-width:720px){
  .hero-grid{display:flex;flex-direction:column}
  .hero-grid .hero-form{order:-1;width:100%}
  .hero-form .form{padding:18px}
  .provider-act .btn{flex:1 1 100%}
  .ticker--marquee::before,.ticker--marquee::after{width:36px}
}

/* hero balance: left column anchors to the top and carries substance */
.hero-grid{align-items:start}
.hero-grid .hero-main{padding-top:6px}
.hero-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.hero-points li{
  position:relative;padding-left:26px;color:#d7e1e5;font-size:.96rem;line-height:1.5;
}
.hero-points li::before{
  content:'';position:absolute;left:0;top:.32em;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--copper) 0 45%,transparent 46%),rgba(215,104,54,.22);
}
.page-hero .hero-points li{font-size:.92rem}
@media(max-width:720px){
  .hero-points{margin-top:16px;gap:10px}
  .hero-points li{font-size:.9rem}
}

/* ============================================================
   16. Hero and featured-block proportion, desktop
   ============================================================ */
/* short copy centres against the form instead of hanging in a void */
.hero-grid{align-items:center}
.hero-grid .hero-main{padding-top:0}
.page-hero .hero-grid{align-items:center}

/* featured block: two even columns, photo capped so the right side
   stops towering over the identity column */
.provider-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.provider-id{gap:18px}
.provider-proof .proof-photo img{max-height:250px;object-fit:cover;object-position:center 45%}
.provider-reviews{min-height:64px}
.provider-blurb{max-width:44ch}

/* hero form: keep the card compact so it never dwarfs the copy */
.hero-form .form .f{margin-bottom:10px}
.hero-form .form .fnote{margin-top:9px}

@media(max-width:980px){
  .provider-layout{grid-template-columns:1fr;align-items:start}
  .hero-grid,.page-hero .hero-grid{align-items:start}
}

/* homepage hero: lede reads directly under the headline; the photograph
   carries the space below it */
.hero.hero--photo .hero-grid{align-items:start}
.hero.hero--photo .hero-main .lede{margin-top:2px;max-width:46ch}

/* ============================================================
   17. FINAL LOCAL-PAGE FLOW + DESKTOP GRID LOCK
   One alignment system. No competing percentage splits.
   ============================================================ */

/* Shared local page measure */
@media (min-width:981px){
  .page-hero>.wrap,
  .local-copy>.wrap,
  .bottom-request>.wrap,
  .provider-block>.wrap,
  .sec--cream>.wrap,
  .sec--sage>.wrap{max-width:1120px}

  /* Hero: a real 50/50 composition keeps the page centered. */
  .page-hero .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:56px;
    align-items:center;
  }

  /* Local narrative gets a centered readable measure rather than hanging left. */
  .local-copy-in{max-width:920px;margin-inline:auto}

  /* Planning sections use equal columns. This overrides the old 1.15/.85 system. */
  .sec .split,
  .sec .split--even,
  .sec .split--flip{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:48px;
    align-items:start;
  }

  /* Keep the informational two-column sections visually centered. */
  .sec--cream .split{max-width:1040px;margin-inline:auto}
  .sec--sage .duo{max-width:1040px;margin-inline:auto}

  /* FAQ width is intentional but no longer dramatically narrower. */
  .wrap-narrow{width:min(900px,100% - (var(--gut) * 2))}

  /* Provider is a true balanced two-column finish. */
  .provider-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:52px;
    align-items:center;
  }
}

/* Consistent local-page vertical cadence */
.page-hero{padding-block:44px 54px}
.local-copy,.sec{padding-block:68px}
.sec--sage,.sec--cream{padding-block:68px}
.provider-block{padding-block:76px}
.local-copy .head,.sec .head{margin-bottom:24px}
.local-copy p:last-child,.sec p:last-child{margin-bottom:0}

/* ----- immediate trust inside the top quick form ----- */
.form-trust{
  display:grid;
  grid-template-columns:128px minmax(0,1fr);
  gap:14px;
  align-items:center;
  margin:0 0 16px;
  padding:11px 12px;
  border-radius:10px;
  background:var(--ever);
  overflow:hidden;
}
.form-trust-logo{display:flex;align-items:center;justify-content:flex-start;min-width:0}
.form-trust-logo img{display:block;width:118px;max-width:100%;height:auto;max-height:38px;object-fit:contain;object-position:left center}
.form-trust-review{min-width:0;overflow:hidden}
.form-trust-review>.mono{display:block;margin-bottom:5px;color:#dbe6ea;font-size:.58rem;letter-spacing:.1em}
.form-trust-review [class*="elfsight-app-"]{min-height:28px}
.hero-form .disclose{margin-bottom:12px}

/* ----- lower conversion section on every local service page ----- */
.bottom-request{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.bottom-request-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:center;
  max-width:1040px;
  margin-inline:auto;
}
.bottom-request-copy{max-width:470px}
.bottom-kicker{display:block;color:var(--copper-dk);margin-bottom:10px}
.bottom-request-copy h2{font-size:clamp(1.65rem,2.8vw,2.25rem);margin:0 0 14px;max-width:18ch}
.bottom-request-copy>p{font-size:1rem;line-height:1.65;color:var(--muted)}
.bottom-points{list-style:none;padding:0;margin:22px 0;display:grid;gap:11px}
.bottom-points li{position:relative;padding-left:25px;line-height:1.45}
.bottom-points li::before{content:'✓';position:absolute;left:0;top:0;color:var(--copper-dk);font-weight:800}
.bottom-call{margin-top:22px!important;font-weight:600;color:var(--ink)!important}
.bottom-call a{border-bottom:1px solid var(--copper)}
.bottom-lead-form{border:0;border-top:3px solid var(--copper);border-radius:var(--r-card);box-shadow:var(--shadow-2);padding:28px;background:var(--white)}
.bottom-lead-form h3{font-size:1.35rem;margin:0 0 5px}
.bottom-lead-form>p{font-size:.9rem;color:var(--muted);margin:0 0 17px}
.bottom-lead-form textarea{width:100%;resize:vertical;min-height:108px}

/* Prevent tall cards from making two-column rows look accidental. */
.duo{align-items:stretch}
.duo>.gcard{height:100%}
.provider-proof .proof-photo img{max-height:235px}

@media(max-width:980px){
  .page-hero,.local-copy,.sec,.sec--sage,.sec--cream,.provider-block{padding-block:52px}
  .bottom-request-grid{grid-template-columns:1fr;gap:28px;max-width:760px}
  .bottom-request-copy{max-width:none}
  .bottom-request-copy h2{max-width:none}
}
@media(max-width:720px){
  .page-hero{padding-block:24px 30px}
  .local-copy,.sec,.sec--sage,.sec--cream,.provider-block{padding-block:42px}
  .form-trust{grid-template-columns:96px minmax(0,1fr);gap:10px;padding:10px}
  .form-trust-logo img{width:90px;max-height:30px}
  .form-trust-review>.mono{font-size:.52rem}
  .bottom-lead-form{padding:18px}
}


/* ============================================================
   18. V17 FINAL VISUAL SYSTEM
   Forged Steel Blue Metallic + existing orange + Modern Gray Mist.
   One 1200px desktop rail, one spacing rhythm, intentional 50/50 grids.
   This block is the authoritative desktop/layout layer.
   ============================================================ */

:root{
  --steel:#365b6a;
  --steel-mid:#466f7f;
  --steel-deep:#203a46;
  --steel-ink:#172c35;
  --mist:#e5eaec;
  --mist-soft:#f3f5f6;
  --surface:#ffffff;
  --text:#1d2a30;
  --text-soft:#65747a;
  --orange:#d76836;
  --orange-dark:#b84f26;
  --max:1200px;
  --gut:clamp(22px,3vw,34px);
  --section-space:72px;
}

html{background:var(--paper)}
body{background:var(--paper);color:var(--text)}
.wrap,
.wrap.wrap-narrow{
  width:min(1200px,calc(100% - (var(--gut) * 2)));
  max-width:1200px;
  margin-inline:auto;
}

/* Cool, metallic shell — no evergreen/beige cast. */
.strip{background:var(--steel-ink);color:#c3d0d5;border-bottom:1px solid rgba(255,255,255,.08)}
.nav{background:rgba(32,58,70,.96);box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 28px rgba(23,44,53,.22)}
.mark span,.hero-tag,.crumb,.at-glance dt{color:#b8c8ce}
.page-hero,.hero{
  background:#365b6a;
  background:linear-gradient(135deg,#203a46 0%,#365b6a 52%,#294c59 100%);
  color:#fff;
}
.hero--photo::after{
  background:
    linear-gradient(100deg,rgba(32,58,70,.98) 0%,rgba(32,58,70,.94) 35%,rgba(54,91,106,.75) 62%,rgba(54,91,106,.48) 100%),
    linear-gradient(to bottom,rgba(23,44,53,.34),rgba(23,44,53,0) 42%,rgba(23,44,53,.50));
}
.ticker{background:var(--steel-deep)}
.ticker--marquee{overflow-x:auto;scrollbar-width:none}
.ticker--marquee .ticker-in{animation:none!important;width:max-content;transform:none!important}
.ticker--marquee::before,.ticker--marquee::after{display:none}
.refer,.provider-block{background:#203a46;background:linear-gradient(135deg,#203a46 0%,#294c59 54%,#1b333e 100%)}
.foot{background:var(--steel-ink);color:#b8c8ce}
.mbar{background:var(--steel-deep)}

/* Alternating bands: white, gray mist, soft mist. */
.sec{background:var(--surface)}
.local-copy{background:var(--surface)}
.sec--cream{background:var(--mist-soft)}
.sec--sage{background:var(--mist)}
.sec--ever,.sec--urgent{background:var(--steel-deep)}
.pillar-backlink{background:var(--mist-soft)}

/* All desktop bands share the exact same 1200px inner rail. */
.page-hero>.wrap,
.hero>.wrap,
.local-copy>.wrap,
.sec>.wrap,
.bottom-request>.wrap,
.provider-block>.wrap,
.refer>.wrap,
.foot>.wrap{
  width:min(1200px,calc(100% - (var(--gut) * 2)));
  max-width:1200px;
  margin-inline:auto;
}

/* One vertical rhythm. */
.page-hero{padding-block:56px 60px}
.hero{padding-block:64px}
.local-copy,.sec,.sec--cream,.sec--sage,.sec--ever,.sec--urgent{padding-block:var(--section-space)}
.provider-block,.refer.provider-block{padding-block:78px}
.foot{padding-top:58px;padding-bottom:58px}
.head{margin-bottom:28px;max-width:760px}
.head p{margin-top:10px}

/* Desktop geometry: every major split is deliberately 50/50. */
@media(min-width:981px){
  .page-hero .hero-grid,
  .hero .hero-grid,
  .sec .split,
  .sec .split--even,
  .sec .split--flip,
  .bottom-request-grid,
  .provider-layout,
  .provider-block .split{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:56px;
  }

  .page-hero .hero-grid,.hero .hero-grid{align-items:start}
  .sec .split,.sec .split--even,.sec .split--flip{align-items:start}
  .bottom-request-grid{align-items:stretch;max-width:1200px}
  .provider-layout,.provider-block .split{align-items:center}

  .sec--cream .split,
  .sec--sage .duo,
  .duo,
  .trio{max-width:1200px;margin-inline:auto}

  .duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}

/* Hero: balanced content blocks, not two unrelated columns. */
.page-hero h1{font-size:clamp(2.2rem,3.35vw,3.15rem);max-width:22ch;margin-bottom:28px}
.hero h1{font-size:clamp(2.55rem,4vw,3.7rem);max-width:20ch}
.hero-grid .hero-main{width:100%;max-width:560px;padding-top:4px}
.hero-grid .hero-form{width:100%;max-width:540px;justify-self:end}
.page-hero .lede,.hero-grid .lede{max-width:54ch;color:#d7e1e5}
.page-hero-row{display:block!important}
.page-hero-row .at-glance{margin-top:22px;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
.page-hero-row .at-glance div{padding-top:9px;border-top:1px solid rgba(255,255,255,.14)}

/* Top request card: compact trust first, then the form. */
.hero-form .form{
  background:#fff;border:1px solid rgba(255,255,255,.14);border-top:4px solid var(--orange);
  border-radius:14px;box-shadow:0 24px 58px rgba(18,38,47,.30);padding:24px;
}
.form-trust{
  grid-template-columns:88px minmax(0,1fr);gap:12px;padding:9px 10px;margin-bottom:14px;
  background:var(--mist-soft);border:1px solid #dce3e6;border-radius:10px;
}
.form-trust-logo img{width:80px!important;max-height:28px!important;object-fit:contain;object-position:left center}
.form-trust-review>.mono{color:var(--text-soft);font-size:.56rem;margin-bottom:3px}
.form-trust-review [class*="elfsight-app-"]{min-height:24px}
.hero-form .disclose{background:transparent;padding:0;margin:0 0 14px;font-size:.84rem}
.hero-form .form h2{font-size:1.35rem}

/* Modern gray-mist surfaces with steel instead of green. */
.svc,.gcard,.record,.form,.map,.info-drawer,.agency,.urgent-inline,.provider-reviews,.provider-id .proof-photo{
  border-color:#d7dfe2;box-shadow:0 1px 2px rgba(23,44,53,.04),0 8px 24px rgba(23,44,53,.06);
}
.svc--fill{background:var(--steel-deep);border-color:transparent}
.pills a{background:#fff;border-color:#d7dfe2}
.pills a:hover{background:var(--steel);border-color:var(--steel);color:#fff}
.f input,.f select,.f textarea{background:#f7f9f9;border-color:#d7dfe2}
.f input:focus,.f select:focus,.f textarea:focus{background:#fff;border-color:var(--orange);box-shadow:0 0 0 3px rgba(215,104,54,.14)}
.btn.solid{background:var(--steel-deep)}
.btn.solid:hover{background:var(--steel)}
.btn.line-dk{color:var(--steel-deep)}

/* Local narrative is intentionally centered on the same rail. */
.local-copy-in{max-width:940px;margin-inline:auto}
.local-copy .head{max-width:940px}
.local-copy p{color:#3e4d54;line-height:1.72}

/* Planning block: equal-width information and location columns. */
.split-side{position:static;display:grid;gap:18px;align-content:start}
.map{width:100%;margin:0;background:#fff}
.map iframe{width:100%;height:360px;aspect-ratio:auto;filter:grayscale(.12)}
.info-drawer{width:100%;margin-top:0;background:#fff}
.friendly-note{background:rgba(255,255,255,.64);border:1px solid #d9e1e4;border-left:3px solid var(--orange);padding:13px 15px;border-radius:10px}

/* FAQ: wide section rail with centered readable accordion. */
.wrap.wrap-narrow>*{max-width:940px;margin-left:auto;margin-right:auto}
.wrap.wrap-narrow .head{margin-bottom:24px}
.qa{margin-top:0;border-top:1px solid #d6dee1}
.qa details{border-bottom:1px solid #d6dee1}
.qa summary{padding:19px 2px}

/* Guide cards: true 2x2 symmetry on desktop. */
.gcard{padding:26px;min-height:176px;height:100%}
.sec--sage .duo{align-items:stretch}
.sec--sage .duo .gcard{display:block}
.sec--sage .duo .gcard p{margin-top:0;padding-top:10px}

/* Bottom conversion band: equal columns, equal visual weight. */
.bottom-request{border-block:1px solid #d7dfe2}
.bottom-request-grid{max-width:1200px;margin-inline:auto}
.bottom-request-copy{max-width:none;align-self:center;padding:28px 22px 28px 0}
.bottom-request-copy h2{max-width:19ch;font-size:clamp(1.8rem,2.75vw,2.45rem)}
.bottom-form-wrap{display:flex}
.bottom-lead-form{width:100%;height:100%;padding:30px;border-top:4px solid var(--orange);box-shadow:0 14px 36px rgba(23,44,53,.10)}

/* Featured provider: clean 50/50 finish, smaller logo, contained proof. */
.provider-head{max-width:720px;margin-bottom:34px}
.provider-layout{max-width:1200px;margin-inline:auto}
.provider-id{gap:16px}
.provider-logo{max-width:180px!important}
.provider-logo img{max-height:54px!important;width:auto!important}
.provider-blurb{max-width:48ch}
.provider-proof{gap:16px}
.provider-reviews{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.16);box-shadow:none}
.provider-proof .proof-photo img{width:100%;max-height:280px;aspect-ratio:16/9;object-fit:cover}

/* Footer also obeys the shared rail and balanced columns. */
.foot-grid{grid-template-columns:1.35fr 1fr 1fr;gap:48px}
.legal{color:#91a5ad}

/* Typography refinements keep sections calmer and more proportional. */
h2{font-size:clamp(1.7rem,2.45vw,2.25rem)}
.sec--quiet .head h2,.local-board .head h2,.local-copy .head h2{font-size:clamp(1.55rem,2.2vw,2rem)}
.lede{color:#415159}

@media(max-width:980px){
  :root{--section-space:54px}
  .page-hero,.hero{padding-block:42px}
  .hero-grid .hero-main,.hero-grid .hero-form{max-width:none}
  .hero-grid .hero-form{justify-self:stretch}
  .bottom-request-copy{padding:0}
  .map iframe{height:320px}
  .provider-layout{align-items:start}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
  :root{--gut:18px;--section-space:42px}
  .page-hero{padding-block:28px 34px}
  .hero{padding-block:34px}
  .page-hero h1{font-size:clamp(1.85rem,8vw,2.3rem);margin-bottom:20px}
  .hero h1{font-size:clamp(2rem,9vw,2.55rem)}
  .page-hero-row .at-glance{grid-template-columns:1fr}
  .form-trust{grid-template-columns:76px minmax(0,1fr);padding:8px}
  .form-trust-logo img{width:68px!important;max-height:24px!important}
  .hero-form .form,.bottom-lead-form{padding:18px}
  .map iframe{height:260px}
  .gcard{min-height:0;padding:20px}
  .provider-logo{max-width:150px!important}
  .provider-logo img{max-height:46px!important}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot{padding-bottom:96px}
}

/* V17.1 visual alignment corrections after desktop render review. */
.page-hero-row{margin-top:0!important;padding-top:0!important;border-top:0!important}
@media(min-width:981px){
  .bottom-request-grid{align-items:start}
  .bottom-request-copy{align-self:start;padding:30px 28px 30px 0}
}

/* ============================================================
   19. V18 STRUCTURE RESET
   True two-column heroes, visible Smith's trust, unified provider/request,
   and consistent left alignment across the site.
   ============================================================ */

/* ---------- Global alignment: content is left-aligned by default ---------- */
.page-hero .wrap,
.hero .wrap,
.sec .wrap,
.local-copy .wrap,
.provider-block .wrap,
.refer .wrap,
.article,
.head,
.head--mid,
.wrap.wrap-narrow{
  text-align:left;
}
.head--mid{margin-left:0;margin-right:0;text-align:left}
.review-note{text-align:left!important}

/* ---------- Desktop hero rebuilt as one coherent 50/50 system ---------- */
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
}
.hero-grid .hero-main,
.hero-grid .hero-form{
  width:100%;
  max-width:none;
  min-width:0;
  justify-self:stretch;
}
.hero-grid .hero-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero-grid .hero-form{align-self:start}

/* Everything that identifies the page now belongs to the left hero column. */
.hero-grid .crumb{margin:0 0 16px}
.hero-grid .hero-tag{margin:0 0 18px}
.hero-grid h1{
  margin:0 0 22px;
  max-width:100%;
  text-align:left;
}
.page-hero .hero-grid h1{font-size:clamp(2.35rem,3.2vw,3.25rem);line-height:1.02}
.hero .hero-grid h1{font-size:clamp(2.75rem,4vw,4rem);line-height:1.01}
.hero-grid .hero-lead{width:100%;max-width:none}
.hero-grid .page-hero-row,
.hero-grid .hero-row{
  display:block!important;
  width:100%;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.hero-grid .lede{
  margin:0;
  max-width:58ch;
  font-size:1.04rem;
  line-height:1.62;
}
.hero-grid .at-glance{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 22px;
  width:100%;
  margin-top:24px;
}
.hero-grid .at-glance div{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:10px;
  align-items:baseline;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero-grid .hero-cta{
  display:flex;
  justify-content:flex-start!important;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px;
}
.hero-grid .hero-cta .btn{flex:0 0 auto}

/* Breadcrumb pages: align the form visually with the H1 rather than the breadcrumb. */
@media(min-width:1101px){
  .page-hero .hero-form{margin-top:34px}
}

/* ---------- Hero form / trust treatment ---------- */
.hero-form .form{
  width:100%;
  border-radius:12px;
  padding:24px;
}
.hero-form .form-trust{
  display:grid;
  grid-template-columns:122px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:8px;
  margin:0 0 16px;
  background:var(--mist-soft);
  border:1px solid #d8e0e3;
  border-radius:9px;
}
.hero-form .form-trust-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:7px 9px;
  border-radius:7px;
  background:var(--steel-deep);
}
.hero-form .form-trust-logo img{
  display:block;
  width:104px!important;
  max-width:100%!important;
  height:auto!important;
  max-height:34px!important;
  object-fit:contain;
  object-position:center;
}
.hero-form .form-trust-review{
  min-width:0;
  overflow:hidden;
  text-align:left;
}
.hero-form .form-trust-review>.mono{
  display:block;
  margin:0 0 4px;
  color:var(--text-soft);
  font-size:.55rem;
  letter-spacing:.08em;
}
.hero-form .context-line{margin-top:0}
.hero-form .form h2{font-size:1.38rem;margin-bottom:7px;text-align:left}
.hero-form .form>p{text-align:left}

/* ---------- Unified Smith's + request section on local pages ---------- */
.provider-request-block{
  padding-block:76px;
}
.provider-request-block .provider-head{
  max-width:720px;
  margin:0 0 34px;
  text-align:left;
}
.provider-request-block .provider-layout{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;
  align-items:start;
}
.provider-request-block .provider-id{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  min-width:0;
}
.provider-request-block .provider-logo{
  width:220px;
  max-width:220px!important;
  margin:0;
}
.provider-request-block .provider-logo img{
  width:auto!important;
  max-width:100%!important;
  max-height:64px!important;
  object-fit:contain;
  object-position:left center;
}
.provider-request-block .provider-blurb{max-width:54ch;margin:0}
.provider-request-block .provider-facts{margin:0;padding-left:20px}
.provider-request-block .provider-reviews{
  width:100%;
  margin:4px 0 0;
  padding:14px 16px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  text-align:left;
}
.provider-request-block .provider-reviews .mono{margin-bottom:8px}
.provider-request-block .provider-act{
  display:flex;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-top:2px;
}
.provider-request-block .provider-request-form{
  min-width:0;
  width:100%;
}
.provider-request-block .provider-request-form .form{
  width:100%;
  margin:0;
  padding:28px;
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.16);
  border-top:4px solid var(--orange);
  border-radius:12px;
  box-shadow:0 22px 50px rgba(0,0,0,.24);
  text-align:left;
}
.provider-request-block .provider-request-form .form h3{
  color:var(--ink);
  font-size:clamp(1.45rem,2vw,1.9rem);
  margin-bottom:8px;
  text-align:left;
}
.provider-request-block .provider-request-form .form>p{color:var(--muted);text-align:left}
.provider-request-block .provider-request-form .form .context-line{color:var(--orange-dark)}
.provider-request-block .provider-request-form .form label{color:var(--muted);text-align:left}
.provider-request-block .provider-request-form .form .fnote{color:var(--muted);text-align:left}

/* Old standalone bottom conversion band is no longer part of local page flow. */
.provider-request-block + .bottom-request,
.bottom-request + .provider-request-block{border-top:0}

/* ---------- Keep ordinary sections visually consistent ---------- */
.sec .head,
.local-copy .head,
.wrap.wrap-narrow .head{
  margin-left:0;
  margin-right:0;
  text-align:left;
}
.local-copy-in{
  margin-left:0;
  margin-right:0;
  max-width:940px;
}
.wrap.wrap-narrow>*{
  margin-left:0;
  margin-right:0;
  max-width:940px;
}

/* ---------- Breakpoints ---------- */
@media(max-width:1100px){
  .hero-grid,
  .provider-request-block .provider-layout{
    grid-template-columns:1fr;
    gap:30px;
  }
  .page-hero .hero-form{margin-top:0}
  .hero-grid .hero-main,
  .hero-grid .hero-form{
    max-width:760px;
  }
  .provider-request-block .provider-id,
  .provider-request-block .provider-request-form{
    max-width:760px;
  }
}

@media(max-width:720px){
  .hero-grid{display:flex;flex-direction:column;gap:22px}
  .hero-grid .hero-main{order:0}
  .hero-grid .hero-form{order:1}
  .hero-grid .at-glance{grid-template-columns:1fr;margin-top:18px}
  .hero-grid .hero-cta{display:grid;width:100%;grid-template-columns:1fr;gap:8px;margin-top:18px}
  .hero-grid .hero-cta .btn{width:100%}
  .hero-form .form{padding:18px}
  .hero-form .form-trust{grid-template-columns:104px minmax(0,1fr);padding:7px}
  .hero-form .form-trust-logo{min-height:42px;padding:6px 8px}
  .hero-form .form-trust-logo img{width:90px!important;max-height:30px!important}
  .provider-request-block{padding-block:48px}
  .provider-request-block .provider-head{margin-bottom:26px}
  .provider-request-block .provider-layout{gap:26px}
  .provider-request-block .provider-logo{max-width:190px!important}
  .provider-request-block .provider-request-form .form{padding:18px}
}

/* V18.1 laptop guard: never squeeze major content splits into awkward half-columns. */
@media(max-width:1100px){
  .sec .split,
  .sec .split--even,
  .sec .split--flip,
  .local-board .split,
  .service-photo-split{
    grid-template-columns:1fr!important;
    gap:30px;
  }
}

/* Reference/jump bars follow the same left edge as the 1200px content rail. */
.pillar-backlink{
  text-align:left;
  padding-left:max(var(--gut),calc((100vw - 1200px)/2 + var(--gut)));
  padding-right:max(var(--gut),calc((100vw - 1200px)/2 + var(--gut)));
}

/* ============================================================
   20. V19 PORTA POTTY HERO IMAGE
   User-supplied image hardcoded locally across all porta potty pages.
   ============================================================ */
.hero--porta-photo::before{
  background-image:url('porta-potty-hero-central-pa-sm.webp')!important;
  background-position:center 52%!important;
  opacity:.72!important;
}
@media(min-width:721px){
  .hero--porta-photo::before{
    background-image:url('porta-potty-hero-central-pa.webp')!important;
    background-position:center 54%!important;
    opacity:.74!important;
  }
}
/* Keep copy crisp while allowing the blue units to remain clearly visible. */
.hero--porta-photo::after{
  background:
    linear-gradient(100deg,rgba(32,58,70,.97) 0%,rgba(32,58,70,.92) 35%,rgba(54,91,106,.64) 62%,rgba(32,58,70,.34) 100%),
    linear-gradient(to bottom,rgba(23,44,53,.24),rgba(23,44,53,0) 42%,rgba(23,44,53,.38))!important;
}


/* ========== V20 CONVERSION FLOW ========== */
/* Top-form trust is intentionally vertical: Smith's first, Google proof second. */
.hero-form .form-trust{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:9px!important;
  padding:10px!important;
}
.hero-form .form-trust-logo{
  width:152px!important;
  min-height:44px!important;
  padding:7px 10px!important;
  justify-content:flex-start!important;
}
.hero-form .form-trust-logo img{
  width:126px!important;
  max-height:34px!important;
  object-position:left center!important;
}
.hero-form .form-trust-review{
  width:100%!important;
  min-width:0!important;
  padding:2px 2px 0!important;
  text-align:left!important;
  overflow:visible!important;
}
.hero-form .form-trust-review>.mono{
  margin:0 0 5px!important;
  color:var(--text-soft)!important;
  font-size:.57rem!important;
}
.hero-form .form-trust-review [class*="elfsight-app-"]{min-height:30px!important}

/* One provider flow, in the order people actually need it. */
.provider-request-block{padding-block:76px}
.provider-request-block .provider-head{
  width:100%;
  max-width:780px;
  margin:0 0 28px;
  text-align:left;
}
.provider-request-block .provider-flow{
  width:100%;
  max-width:1200px;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:20px;
}
.provider-request-block .provider-trust-stack{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.provider-request-block .provider-logo{
  width:220px!important;
  max-width:220px!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}
.provider-request-block .provider-logo img{
  display:block;
  width:auto!important;
  max-width:100%!important;
  max-height:66px!important;
  object-fit:contain;
  object-position:left center;
}
.provider-request-block .provider-reviews{
  width:100%;
  min-height:72px;
  margin:0!important;
  padding:14px 16px!important;
  text-align:left!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:10px;
}
.provider-request-block .provider-reviews .mono{display:block;margin:0 0 8px!important;color:var(--orange)}
.provider-request-block .provider-service-photo{
  width:100%;
  margin:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.provider-request-block .provider-service-photo img{
  display:block;
  width:100%;
  height:clamp(260px,31vw,390px)!important;
  max-height:390px!important;
  aspect-ratio:auto!important;
  object-fit:cover;
  object-position:center 48%;
}
.provider-request-block .provider-service-photo figcaption{
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.14);
  color:#b7c7ce;
  text-align:left;
}
.provider-request-block .provider-act{
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center;
  gap:10px!important;
  flex-wrap:wrap;
  margin:0!important;
}
.provider-request-block .provider-act .btn{width:auto!important;flex:0 0 auto!important;min-width:190px}
.provider-request-block .provider-request-form{
  width:100%;
  max-width:none;
  margin:2px 0 0;
}
.provider-request-block .provider-request-form .form{
  width:100%;
  margin:0;
  padding:30px;
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.16);
  border-top:4px solid var(--orange);
  border-radius:12px;
  box-shadow:0 22px 50px rgba(0,0,0,.24);
  text-align:left;
}
.provider-request-block .provider-request-form .form h3,
.provider-request-block .provider-request-form .form>p,
.provider-request-block .provider-request-form .form label,
.provider-request-block .provider-request-form .form .fnote{text-align:left!important}
.provider-request-block .provider-request-form .form h3{color:var(--ink);font-size:clamp(1.5rem,2vw,1.95rem);margin-bottom:8px}
.provider-request-block .provider-request-form .form>p,
.provider-request-block .provider-request-form .form label,
.provider-request-block .provider-request-form .form .fnote{color:var(--muted)}
.provider-request-block .provider-request-form .context-line{color:var(--orange-dark)}

/* Keep every form and content section aligned to the same left edge. */
.form,.form h2,.form h3,.form p,.form label,.form .fnote,.form .context-line,
.provider-block,.provider-block h2,.provider-block p,.provider-block .mono{text-align:left}

@media(max-width:720px){
  .hero-form .form-trust{padding:8px!important;gap:8px!important}
  .hero-form .form-trust-logo{width:136px!important;min-height:40px!important;padding:6px 9px!important}
  .hero-form .form-trust-logo img{width:112px!important;max-height:31px!important}
  .provider-request-block{padding-block:48px}
  .provider-request-block .provider-head{margin-bottom:24px}
  .provider-request-block .provider-flow{gap:16px}
  .provider-request-block .provider-logo{max-width:190px!important}
  .provider-request-block .provider-service-photo img{height:220px!important;max-height:220px!important}
  .provider-request-block .provider-act{display:grid!important;grid-template-columns:1fr;width:100%}
  .provider-request-block .provider-act .btn{width:100%!important;min-width:0}
  .provider-request-block .provider-request-form .form{padding:18px}
}


/* ============================================================
   21. V21 MOBILE HERO / FEATURED PROOF / GUIDE LIBRARY
   Mobile quick forms are visually separate from the hero.
   Main service planning sections are consolidated.
   ============================================================ */

/* Featured provider gets an intentional orange frame sitewide. */
.provider-request-block{border-top:0!important;border-bottom:0!important;padding-inline:var(--gut)}
.provider-request-block>.wrap{
  width:min(1200px,100%)!important;
  max-width:1200px!important;
  border:2px solid var(--orange);
  border-radius:16px;
  padding:clamp(28px,4vw,46px);
}
.provider-reasons{
  list-style:none;padding:0;margin:20px 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.provider-reasons li{
  position:relative;margin:0;padding:13px 14px 13px 34px;
  border:1px solid rgba(255,255,255,.14);border-radius:10px;
  background:rgba(255,255,255,.055);color:#e2eaed;
  font-size:.9rem;line-height:1.48;
}
.provider-reasons li::before{
  content:'✓';position:absolute;left:13px;top:13px;color:var(--orange);font-weight:800;
}

/* The provider flow remains exactly: logo -> reviews -> image -> actions -> form. */
.provider-request-block .provider-flow{gap:18px}
.provider-request-block .provider-service-photo{margin-top:2px}
.provider-request-block .provider-act{margin-top:2px!important}

/* Main anchor pages: one efficient two-column planning band. */
.planning-two{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start;
}
.planning-panel{min-width:0}
.planning-panel--accent{padding-left:34px;border-left:3px solid var(--orange)}
.planning-kicker{display:block;color:var(--orange-dark);margin-bottom:9px}
.planning-panel h2{margin:0 0 18px;max-width:21ch}
.planning-panel p{line-height:1.68;color:#3e4d54}
.planning-panel .info-drawer{margin-top:20px}

/* A deliberate brand-blue band in the middle of the porta potty anchor page. */
.sec--brand-blue{
  background:linear-gradient(135deg,var(--steel-deep) 0%,var(--steel) 100%)!important;
  color:#fff;
}
.sec--brand-blue .head .mono{color:var(--orange)}
.sec--brand-blue .head h2{color:#fff}
.sec--brand-blue .head p{color:#d9e4e8}
.sec--brand-blue .svc{background:#fff;color:var(--text);border-color:rgba(255,255,255,.18);box-shadow:0 16px 34px rgba(18,38,47,.18)}
.sec--brand-blue .svc h3{color:var(--steel-deep)}
.sec--brand-blue .svc p{color:var(--text-soft)}

/* Mobile sticky call needs a hard edge against the steel bar. */
.mbar a[href^="tel:"]{
  border:2px solid #fff!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12)!important;
}

/* Guides: one library, modal details, no lead forms. */
.guides-hero .guides-hero-copy{max-width:820px}
.guides-hero .guide-kicker{display:block;color:var(--orange);margin:0 0 12px}
.guides-library .head{max-width:760px}
.guide-group{margin-top:38px}
.guide-group:first-of-type{margin-top:30px}
.guide-group-title{font-size:1.18rem;margin:0 0 16px;color:var(--steel-deep)}
.guide-card{
  width:100%;text-align:left;appearance:none;-webkit-appearance:none;cursor:pointer;
  font:inherit;color:inherit;
}
.guide-card:hover,.guide-card:focus-visible{transform:translateY(-2px);border-color:var(--steel);box-shadow:0 14px 30px rgba(23,44,53,.11)}
.guide-open-cue{display:block;margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dark);font-weight:600}
.guide-modal{position:fixed;inset:0;z-index:200;display:none}
.guide-modal.is-open{display:block}
.guide-modal-backdrop{position:absolute;inset:0;background:rgba(13,27,33,.72);backdrop-filter:blur(3px)}
.guide-modal-dialog{
  position:relative;z-index:1;width:min(820px,calc(100% - 36px));max-height:calc(100vh - 56px);
  margin:28px auto;background:#fff;border-radius:14px;border-top:4px solid var(--orange);
  box-shadow:0 28px 80px rgba(0,0,0,.38);overflow:auto;padding:clamp(24px,4vw,42px);
}
.guide-modal-close{
  position:sticky;float:right;top:0;z-index:2;width:42px;height:42px;margin:-8px -8px 8px 16px;
  border:1px solid #d7dfe2;border-radius:50%;background:#fff;color:var(--steel-deep);font-size:1.65rem;line-height:1;cursor:pointer;
}
.guide-modal-head{padding-right:42px;margin-bottom:22px}
.guide-modal-head .mono{display:block;color:var(--orange-dark);margin-bottom:8px}
.guide-modal-head h2{font-size:clamp(1.75rem,3vw,2.35rem);margin:0;line-height:1.12}
.guide-modal-content .article{width:100%;max-width:none;margin:0}
.guide-modal-content .article>*{max-width:none}
.guide-modal-content .article h2{font-size:1.25rem;margin:28px 0 10px;color:var(--steel-deep)}
.guide-modal-content .article p,.guide-modal-content .article li{line-height:1.68;color:#3e4d54}
.guide-modal-content .article .lede{font-size:1.04rem;color:var(--text)}
body.guide-modal-open{overflow:hidden}
.provider-no-form .provider-flow{max-width:860px}
.provider-no-form .provider-service-photo img{height:clamp(260px,34vw,380px)!important}

@media(max-width:980px){
  .planning-two{grid-template-columns:1fr;gap:30px}
  .planning-panel--accent{padding:28px 0 0;border-left:0;border-top:3px solid var(--orange)}
  .provider-reasons{grid-template-columns:1fr}
}

/* MOBILE ONLY: the hero image ends before the quick form begins. */
@media(max-width:720px){
  .hero--mobile-split{
    padding:0!important;background:#fff!important;color:var(--text)!important;overflow:visible!important;
  }
  .hero--mobile-split::before,.hero--mobile-split::after{display:none!important}
  .hero--mobile-split>.wrap{
    width:100%!important;max-width:none!important;margin:0!important;
  }
  .hero--mobile-split .hero-grid{display:flex!important;flex-direction:column!important;gap:0!important}
  .hero--mobile-split .hero-main{
    position:relative;isolation:isolate;overflow:hidden;width:100%!important;max-width:none!important;
    padding:30px var(--gut) 28px!important;color:#fff!important;
    background:linear-gradient(135deg,var(--steel-deep),var(--steel));
  }
  .hero--mobile-split.hero--photo .hero-main::before{
    content:'';position:absolute;inset:0;z-index:-2;
    background:url('hero-septic-pumping-sm.jpg') center 58%/cover no-repeat;
    transform:none!important;animation:none!important;opacity:.62;
  }
  .hero--mobile-split.hero--porta-photo .hero-main::before{
    background-image:url('porta-potty-hero-central-pa-sm.webp')!important;
    background-position:center 54%!important;opacity:.78!important;
  }
  .hero--mobile-split.hero--photo .hero-main::after{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(105deg,rgba(32,58,70,.94),rgba(32,58,70,.69)),linear-gradient(to bottom,rgba(23,44,53,.2),rgba(23,44,53,.54));
  }
  .hero--mobile-split .hero-main h1,
  .hero--mobile-split .hero-main h2,
  .hero--mobile-split .hero-main .lede,
  .hero--mobile-split .hero-main .crumb,
  .hero--mobile-split .hero-main .crumb a{color:#fff!important}
  .hero--mobile-split .hero-form{
    order:1!important;width:100%!important;max-width:none!important;
    padding:20px var(--gut) 26px!important;background:#fff!important;color:var(--text)!important;
  }
  .hero--mobile-split .hero-form .form{
    margin:0!important;box-shadow:0 10px 26px rgba(23,44,53,.09)!important;border-color:#d7dfe2!important;
  }
  .hero--mobile-split .hero-form::before{
    content:'Quick Request';display:block;margin:0 0 9px;font-family:'IBM Plex Mono',monospace;
    font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--orange-dark);
  }
  .provider-request-block{padding-inline:12px!important}
  .provider-request-block>.wrap{padding:24px 18px!important;border-radius:13px}
  .provider-reasons{gap:8px;margin-top:16px}
  .provider-reasons li{padding:11px 12px 11px 31px;font-size:.86rem}
  .provider-reasons li::before{left:11px;top:11px}
  .guide-modal-dialog{width:calc(100% - 20px);max-height:calc(100vh - 20px);margin:10px auto;padding:22px 18px}
  .guide-modal-close{margin:-4px -2px 8px 12px}
}

/* Keep sticky navigation from covering conversion targets. */
#provider,#request-bottom{scroll-margin-top:92px}

/* ============================================================
   22. V22 FINAL COMPONENT PASS
   Desktop proportion + clean provider flow + tablet/mobile hero split.
   This is the authoritative layout layer for the remaining shared components.
   ============================================================ */

/* ---------- Consistent editorial alignment ---------- */
section,
section .head,
section .head--mid,
section h1,
section h2,
section h3,
section p,
section li,
section summary,
section label{
  text-align:left;
}

/* ---------- Top quick-form trust: logo OVER reviews and centered ---------- */
.hero-form .form-trust{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:12px!important;
}
.hero-form .form-trust-logo{
  width:164px!important;
  min-height:46px!important;
  margin:0 auto!important;
  padding:7px 11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--steel-deep)!important;
}
.hero-form .form-trust-logo img{
  width:132px!important;
  max-height:35px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0 auto!important;
}
.hero-form .form-trust-review{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  overflow:visible!important;
}
.hero-form .form-trust-review>.mono{
  width:100%;text-align:center!important;margin:0 0 6px!important;
}
.hero-form .form-trust-review [class*="elfsight-app-"]{
  width:100%!important;min-height:32px!important;text-align:center!important;
}
.septic-request-type{margin-top:2px}

/* ---------- Main service planning: two equal cards + one full-width reference row ---------- */
.service-planning-combined{background:var(--mist-soft)!important}
.service-planning-combined .planning-two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.service-planning-combined .planning-card{
  min-width:0;
  height:100%;
  padding:28px;
  background:#fff;
  border:1px solid #d7dfe2;
  border-top:3px solid var(--orange);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(23,44,53,.055);
}
.service-planning-combined .planning-panel--accent{
  padding-left:28px;
  border-left:1px solid #d7dfe2;
}
.service-planning-combined .planning-panel h2{max-width:22ch;margin-bottom:16px}
.service-planning-combined .planning-panel p:last-child{margin-bottom:0}
.service-planning-combined .planning-reference{
  grid-column:1 / -1;
  width:100%;
  margin:0;
  background:#fff;
  border:1px solid #d7dfe2;
  border-radius:11px;
  box-shadow:0 5px 16px rgba(23,44,53,.04);
}
.service-planning-combined .planning-reference summary{
  padding:17px 18px;
  color:var(--steel-deep);
}
.service-planning-combined .planning-reference .drawer-body{padding:0 18px 18px}

/* ---------- Septic backup: two obvious steps + one clear action band ---------- */
.emergency-modern .emergency-head{max-width:820px;margin-bottom:28px}
.emergency-modern .emergency-head p{color:#d7e1e5;max-width:72ch}
.emergency-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.emergency-step-card{
  padding:26px;
  border:1px solid rgba(255,255,255,.16);
  border-top:3px solid var(--orange);
  border-radius:12px;
  background:rgba(255,255,255,.06);
}
.emergency-step-card>.mono{display:block;color:var(--orange);margin-bottom:8px}
.emergency-step-card h3{color:#fff;margin:0 0 14px;font-size:1.28rem}
.emergency-step-card li{color:#e2eaed}
.emergency-step-card .marks,.emergency-step-card .steps-ol{margin-bottom:0}
.emergency-step-card .steps-ol li{padding-bottom:9px}
.emergency-action-band{
  margin-top:24px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:28px;
  align-items:center;
  padding:24px 26px;
  background:rgba(9,23,29,.22);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
}
.emergency-action-copy>.mono{display:block;color:var(--orange);margin-bottom:7px}
.emergency-action-copy h3{color:#fff;margin:0 0 8px;font-size:1.25rem}
.emergency-action-copy p{color:#d7e1e5;margin:0;max-width:70ch}
.emergency-actions{display:grid;gap:9px}
.emergency-actions .btn{width:100%;text-align:center}

/* ---------- Featured provider: proof/media left, long form right on desktop ---------- */
.provider-request-block .provider-head{max-width:860px!important;margin-bottom:26px!important}
.provider-request-block .provider-reasons{margin-top:18px!important}
.provider-request-block .provider-flow{
  display:grid!important;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;
  gap:46px!important;
  align-items:start!important;
  max-width:1200px!important;
}
.provider-request-block .provider-media{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
}
.provider-request-block .provider-trust-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
}
.provider-request-block .provider-logo{
  width:220px!important;
  max-width:220px!important;
  margin:0 auto!important;
  display:flex!important;
  justify-content:center!important;
}
.provider-request-block .provider-logo img{
  display:block!important;
  margin:0 auto!important;
  width:auto!important;
  max-width:100%!important;
  max-height:66px!important;
  object-position:center!important;
}
.provider-request-block .provider-reviews{
  width:100%!important;
  min-height:74px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.provider-request-block .provider-reviews .mono{width:100%;text-align:center!important}
.provider-request-block .provider-reviews [class*="elfsight-app-"]{width:100%!important;text-align:center!important}
.provider-request-block .provider-service-photo{margin:0!important}
.provider-request-block .provider-service-photo img{
  width:100%!important;
  height:290px!important;
  max-height:290px!important;
  object-fit:cover!important;
  object-position:center 46%!important;
}
.provider-request-block .provider-service-photo--porta img{
  object-position:center 40%!important;
}
.provider-request-block .provider-service-photo figcaption{text-align:left!important}
.provider-request-block .provider-act{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px!important;
  width:100%;
}
.provider-request-block .provider-act .btn{
  width:100%!important;
  min-width:0!important;
  text-align:center!important;
}
.provider-request-block .provider-request-form{
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  align-self:start!important;
}
.provider-request-block .provider-request-form .form{
  width:100%!important;
  margin:0!important;
  padding:28px!important;
}
.provider-no-form .provider-flow{
  display:block!important;
  max-width:760px!important;
}
.provider-no-form .provider-media{max-width:760px}

/* ---------- Guide modal: the OVERLAY scrolls on phones, so the bottom is always reachable ---------- */
.guide-modal.is-open{
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:1px 0;
}
.guide-modal-backdrop{position:fixed!important}
.guide-modal-dialog{
  max-height:none!important;
  overflow:visible!important;
  margin:28px auto 40px!important;
}

/* ---------- Tablet/phone: hero image ends BEFORE the quick-form section ---------- */
@media(max-width:900px){
  .hero--mobile-split{
    padding:0!important;background:#fff!important;color:var(--text)!important;overflow:visible!important;
  }
  .hero--mobile-split::before,.hero--mobile-split::after{display:none!important}
  .hero--mobile-split>.wrap{width:100%!important;max-width:none!important;margin:0!important}
  .hero--mobile-split .hero-grid{display:flex!important;flex-direction:column!important;gap:0!important}
  .hero--mobile-split .hero-main{
    position:relative;isolation:isolate;overflow:hidden;width:100%!important;max-width:none!important;
    padding:34px var(--gut) 30px!important;color:#fff!important;
    background:linear-gradient(135deg,var(--steel-deep),var(--steel));
  }
  .hero--mobile-split.hero--photo .hero-main::before{
    content:'';position:absolute;inset:0;z-index:-2;
    background:url('hero-septic-pumping-sm.jpg') center 58%/cover no-repeat;
    transform:none!important;animation:none!important;opacity:.62;
  }
  .hero--mobile-split.hero--porta-photo .hero-main::before{
    background-image:url('porta-potty-hero-central-pa-sm.webp')!important;
    background-position:center 54%!important;opacity:.78!important;
  }
  .hero--mobile-split.hero--photo .hero-main::after{
    content:'';position:absolute;inset:0;z-index:-1;
    background:linear-gradient(105deg,rgba(32,58,70,.94),rgba(32,58,70,.69)),linear-gradient(to bottom,rgba(23,44,53,.2),rgba(23,44,53,.54));
  }
  .hero--mobile-split .hero-main h1,
  .hero--mobile-split .hero-main h2,
  .hero--mobile-split .hero-main .lede,
  .hero--mobile-split .hero-main .crumb,
  .hero--mobile-split .hero-main .crumb a{color:#fff!important}
  .hero--mobile-split .hero-form{
    order:1!important;width:100%!important;max-width:none!important;
    padding:22px var(--gut) 28px!important;background:#fff!important;color:var(--text)!important;
  }
  .hero--mobile-split .hero-form .form{
    margin:0 auto!important;max-width:680px!important;
    box-shadow:0 10px 26px rgba(23,44,53,.09)!important;border-color:#d7dfe2!important;
  }
  .hero--mobile-split .hero-form::before{
    content:'Quick Request';display:block;max-width:680px;margin:0 auto 9px;
    font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.11em;
    text-transform:uppercase;font-weight:600;color:var(--orange-dark);
  }
  .provider-request-block .provider-flow{grid-template-columns:1fr!important;gap:22px!important}
  .provider-request-block .provider-media{order:1}
  .provider-request-block .provider-request-form{order:2}
  .provider-request-block .provider-logo{margin-inline:auto!important}
  .service-planning-combined .planning-two{grid-template-columns:1fr;gap:18px}
  .service-planning-combined .planning-reference{grid-column:1}
  .emergency-grid{grid-template-columns:1fr;gap:16px}
  .emergency-action-band{grid-template-columns:1fr;gap:18px}
}

@media(max-width:720px){
  .provider-request-block .provider-head{margin-bottom:22px!important}
  .provider-request-block .provider-flow{gap:16px!important}
  .provider-request-block .provider-service-photo img{height:220px!important;max-height:220px!important}
  .provider-request-block .provider-act{grid-template-columns:1fr}
  .provider-request-block .provider-logo{max-width:195px!important}
  .provider-request-block .provider-reviews{min-height:68px!important;padding:12px!important}
  .service-planning-combined .planning-card{padding:20px}
  .service-planning-combined .planning-panel--accent{padding-left:20px}
  .emergency-step-card{padding:20px}
  .emergency-action-band{padding:20px}
  .guide-modal{padding:0 10px 18px!important}
  .guide-modal-dialog{
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    margin:10px auto max(28px,env(safe-area-inset-bottom))!important;
    padding:22px 18px calc(28px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }
  .guide-modal-close{top:8px!important}
}

/* V22.1 provider-head correction: copy stays readable, three proof cards use the full 1200px rail. */
.provider-request-block .provider-head{width:100%!important;max-width:none!important}
.provider-request-block .provider-head>p{max-width:820px!important}
.provider-request-block .provider-reasons{width:100%!important;max-width:none!important}

/* ============================================================
   23. V23 FINAL TIGHTENING PASS
   Compact desktop hero, balanced provider proof, explicit porta
   sanitation options, and symmetrical local rental planning.
   ============================================================ */

/* ---------- Local/page heroes: keep the quick form compact on desktop ---------- */
@media(min-width:901px){
  .page-hero.hero--mobile-split{
    padding-block:38px 42px!important;
  }
  .page-hero .hero-grid{
    gap:44px!important;
    align-items:start!important;
  }
  .page-hero .hero-form{
    margin-top:6px!important;
  }
  .page-hero .hero-form .form{
    padding:19px 21px!important;
  }
  /* Preserve logo-over-reviews, but compress the trust treatment so it
     no longer makes the entire hero as tall as the form. */
  .page-hero .hero-form .form-trust{
    gap:4px!important;
    padding:7px 9px!important;
    margin-bottom:10px!important;
  }
  .page-hero .hero-form .form-trust-logo{
    width:126px!important;
    min-height:34px!important;
    padding:5px 8px!important;
  }
  .page-hero .hero-form .form-trust-logo img{
    width:105px!important;
    max-height:26px!important;
  }
  .page-hero .hero-form .form-trust-review>.mono{
    display:none!important;
  }
  .page-hero .hero-form .form-trust-review{
    min-height:28px!important;
    padding:0!important;
  }
  .page-hero .hero-form .form-trust-review [class*="elfsight-app-"]{
    min-height:28px!important;
  }
  .page-hero .hero-form .context-line{margin-bottom:5px!important}
  .page-hero .hero-form .form h2{font-size:1.25rem!important;margin-bottom:10px!important}
  .page-hero .hero-form .disclose{display:none!important}
  .page-hero .hero-form .f{margin-bottom:8px!important}
  .page-hero .quick-form input,
  .page-hero .quick-form select{
    min-height:42px!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
  }
  .page-hero .hero-form .fnote{font-size:.7rem!important;margin-top:8px!important}
}

/* ---------- Featured provider intro + 3 reasons = deliberate 50/50 top row ---------- */
.provider-request-block .provider-head{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:54px!important;
  row-gap:0!important;
  align-items:start!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 30px!important;
}
.provider-request-block .provider-head>.mono{
  grid-column:1!important;
  grid-row:1!important;
  margin-bottom:9px!important;
}
.provider-request-block .provider-head>h2{
  grid-column:1!important;
  grid-row:2!important;
  margin-bottom:12px!important;
}
.provider-request-block .provider-head>p{
  grid-column:1!important;
  grid-row:3!important;
  max-width:56ch!important;
  margin:0!important;
}
.provider-request-block .provider-head>.provider-reasons{
  grid-column:2!important;
  grid-row:1 / span 3!important;
  width:100%!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
  align-self:center!important;
}
.provider-request-block .provider-reasons li{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  min-height:46px;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#e2eaed!important;
  font-size:.92rem!important;
  line-height:1.45!important;
}
.provider-request-block .provider-reasons li::before{
  content:'✓'!important;
  position:static!important;
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:var(--orange)!important;
  color:#fff!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:0 0 0 4px rgba(215,104,54,.12)!important;
}

/* Featured proof now reads: Google proof -> Smith's logo -> real service photo. */
.provider-request-block .provider-trust-stack{gap:12px!important}
.provider-request-block .provider-reviews{order:1!important}
.provider-request-block .provider-logo{order:2!important;margin:2px auto 0!important}

/* Real Smith's porta photo has a wider composition than the truck photo. */
.provider-request-block .provider-service-photo--porta img{
  object-position:center 51%!important;
}

/* ---------- Local porta planning: two equal cards, one optional local reference row ---------- */
.local-porta-planning .local-porta-planning-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:stretch!important;
}
.local-porta-planning .planning-card{
  height:100%!important;
  display:flex;
  flex-direction:column;
}
.local-porta-planning .planning-card h2{
  max-width:none!important;
}
.local-porta-planning .local-rental-services{
  margin-top:16px!important;
  margin-bottom:0!important;
}
.local-porta-planning .local-rental-plan .pills{
  margin-top:auto!important;
  padding-top:18px!important;
}
.local-porta-planning .planning-reference{
  grid-column:1 / -1!important;
  margin-top:0!important;
}

/* Tablet/mobile: keep provider intro and reasons in a simple, readable sequence. */
@media(max-width:900px){
  .provider-request-block .provider-head{
    display:block!important;
    margin-bottom:24px!important;
  }
  .provider-request-block .provider-head>.provider-reasons{
    margin-top:18px!important;
  }
  .local-porta-planning .local-porta-planning-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .local-porta-planning .planning-reference{grid-column:1!important}
}

@media(max-width:720px){
  .provider-request-block .provider-reasons li{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:10px!important;
    font-size:.87rem!important;
  }
  .provider-request-block .provider-reasons li::before{
    width:30px!important;height:30px!important;
  }
}


/* ==========================================================
   V24 FINAL QUICK-FORM TRUST + CTA
   Desktop: Smith's logo and Google proof share one compact row.
   Mobile/tablet intentionally retain the stacked trust treatment.
   ========================================================== */
@media(min-width:901px){
  .page-hero .hero-form .form-trust{
    display:grid!important;
    grid-template-columns:132px minmax(0,1fr)!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:14px!important;
    padding:8px 10px!important;
    margin-bottom:10px!important;
  }
  .page-hero .hero-form .form-trust-logo{
    width:132px!important;
    min-height:46px!important;
    margin:0!important;
    padding:6px 9px!important;
  }
  .page-hero .hero-form .form-trust-logo img{
    width:112px!important;
    max-height:31px!important;
  }
  .page-hero .hero-form .form-trust-review{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 4px!important;
  }
  .page-hero .hero-form .form-trust-review>.mono{display:none!important}
  .page-hero .hero-form .form-trust-review [class*="elfsight-app-"]{
    width:100%!important;
    min-height:32px!important;
    text-align:center!important;
  }
}


/* ==========================================================
   V25 FINAL CONTENT + FORM + MOBILE WIDTH PASS
   ========================================================== */

/* Desktop hero trust must be truly horizontal. V24's rule was malformed in
   the packaged CSS; this last layer is authoritative. */
@media(min-width:901px){
  .page-hero .hero-form .form-trust{
    display:grid!important;
    grid-template-columns:136px minmax(0,1fr)!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:12px!important;
    padding:8px 10px!important;
    margin-bottom:10px!important;
  }
  .page-hero .hero-form .form-trust-logo{
    width:136px!important;
    min-width:136px!important;
    min-height:44px!important;
    margin:0!important;
    padding:6px 9px!important;
  }
  .page-hero .hero-form .form-trust-logo img{
    width:114px!important;
    max-width:114px!important;
    max-height:30px!important;
    margin:0 auto!important;
  }
  .page-hero .hero-form .form-trust-review{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .page-hero .hero-form .form-trust-review>.mono{display:none!important}
  .page-hero .hero-form .form-trust-review [class*="elfsight-app-"]{
    width:100%!important;
    min-width:0!important;
    min-height:32px!important;
    text-align:center!important;
  }
}

/* One additional genuinely local content block per town page. */
.local-unique-note{
  margin-top:20px;
  padding:18px 20px;
  max-width:100%;
  background:var(--mist-soft);
  border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;
}
.local-unique-note .mono{display:block;margin-bottom:6px;color:var(--orange-dark)}
.local-unique-note h3{margin:0 0 8px;font-size:1.08rem;line-height:1.3;color:var(--steel-deep)}
.local-unique-note p{margin:0!important;color:var(--ink);max-width:82ch}

/* Septic long form address structure. */
.address-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(90px,.55fr) minmax(110px,.75fr);
  gap:12px;
  min-width:0;
}
.address-grid>*{min-width:0}
.bottom-lead-form input[readonly]{background:#eef2f3;color:#52626a;cursor:default}

/* Hard guard against Local Reference Information forcing document width.
   Wide reference tables may scroll INSIDE the drawer; the page never does. */
.info-drawer,
details.info-drawer,
.local-detail-drawer,
.planning-reference{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.info-drawer>summary,
.local-detail-drawer>summary,
.planning-reference>summary{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow-wrap:anywhere!important;
}
.info-drawer .drawer-body,
.local-detail-drawer .drawer-body,
.planning-reference .drawer-body{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}
.info-drawer .drawer-body dl,
.local-detail-drawer .drawer-body dl,
.info-drawer .drawer-body .row,
.local-detail-drawer .drawer-body .row,
.info-drawer .drawer-body dt,
.info-drawer .drawer-body dd,
.local-detail-drawer .drawer-body dt,
.local-detail-drawer .drawer-body dd{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.service-planning-combined .planning-two,
.local-porta-planning .local-porta-planning-grid{min-width:0!important}
.service-planning-combined .planning-two>*,
.local-porta-planning .local-porta-planning-grid>*{min-width:0!important}

@media(max-width:720px){
  .address-grid{grid-template-columns:1fr!important;gap:0!important}
  .local-unique-note{padding:16px;margin-top:18px}
  .local-detail-drawer .drawer-body{overflow-x:hidden!important}
  .local-detail-drawer .drawer-body dl{width:100%!important}
  /* Main-service reference tables remain available with contained horizontal scroll. */
  .service-planning-combined .planning-reference .drawer-body{overflow-x:auto!important;padding:12px!important}
  .service-planning-combined .planning-reference .spec{min-width:640px!important}
}


/* ==========================================================
   V26 FINAL SIMPLIFICATION + PROVIDER BALANCE PASS
   ========================================================== */

/* Every form-bearing hero, including the homepage, uses one compact
   horizontal trust row on desktop. */
@media(min-width:901px){
  .hero-form .form-trust{
    display:grid!important;
    grid-template-columns:138px minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
    width:100%!important;
    padding:8px 10px!important;
    margin:0 0 10px!important;
  }
  .hero-form .form-trust-logo{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:138px!important;
    min-width:138px!important;
    min-height:44px!important;
    margin:0!important;
    padding:6px 9px!important;
  }
  .hero-form .form-trust-logo img{
    width:114px!important;
    max-width:114px!important;
    max-height:30px!important;
    margin:0 auto!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .hero-form .form-trust-review{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 4px!important;
  }
  .hero-form .form-trust-review>.mono{display:none!important}
  .hero-form .form-trust-review [class*="elfsight-app-"]{
    width:100%!important;
    min-width:0!important;
    min-height:32px!important;
    text-align:center!important;
  }
}
@media(max-width:900px){
  .hero-form .form-trust{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:8px!important;
  }
  .hero-form .form-trust-logo{
    width:136px!important;
    min-width:0!important;
    margin:0 auto!important;
    justify-content:center!important;
  }
  .hero-form .form-trust-logo img{object-position:center!important;margin:0 auto!important}
  .hero-form .form-trust-review{width:100%!important;justify-content:center!important;text-align:center!important}
}

/* The proof list belongs with provider proof/media, directly above reviews.
   Long form owns the second desktop column. */
.provider-request-block .provider-head{
  display:block!important;
  width:100%!important;
  max-width:760px!important;
  margin:0 0 24px!important;
}
.provider-request-block .provider-head>p{max-width:62ch!important}
.provider-request-block .provider-flow{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:42px!important;
  align-items:start!important;
}
.provider-request-block .provider-media{
  display:flex!important;
  flex-direction:column!important;
  gap:18px!important;
  min-width:0!important;
}
.provider-request-block .provider-media>.provider-reasons{
  order:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  width:100%!important;
  margin:0 0 2px!important;
  padding:0!important;
}
.provider-request-block .provider-media>.provider-reasons li{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  gap:11px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#e2eaed!important;
  font-size:.9rem!important;
  line-height:1.4!important;
}
.provider-request-block .provider-media>.provider-reasons li::before{
  content:'✓'!important;
  position:static!important;
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:var(--orange)!important;
  color:#fff!important;
  font-weight:800!important;
  box-shadow:0 0 0 4px rgba(215,104,54,.12)!important;
}
.provider-request-block .provider-trust-stack{order:1!important}
.provider-request-block .provider-service-photo{order:2!important}
.provider-request-block .provider-act{order:3!important}
.provider-request-block .provider-form{min-width:0!important}

@media(max-width:900px){
  .provider-request-block .provider-flow{grid-template-columns:1fr!important;gap:20px!important}
  .provider-request-block .provider-media{order:1!important}
  .provider-request-block .provider-form{order:2!important}
  .provider-request-block .provider-media>.provider-reasons{margin-bottom:2px!important}
}

/* Legal/About is intentionally plain and non-conversion-oriented. */
.legal-hero{padding:clamp(48px,6vw,76px) 0 30px;background:var(--mist-soft)}
.legal-hero .mono{display:block;color:var(--orange);margin:18px 0 8px}
.legal-hero h1{margin-bottom:14px}
.legal-hero .lede{max-width:760px;color:var(--muted)}
.legal-article{max-width:860px}
.legal-article h2{margin-top:38px}
.legal-article h2:first-child{margin-top:0}
.legal-update{margin-top:42px;color:var(--muted)}


/* ==========================================================
   V27 LAUNCH PASS — surgical scope correction
   - Featured-provider rebalance is septic-only on desktop.
   - Homepage/porta provider headers retain the balanced pre-V26 presentation.
   - Town local copy + Local Planning Note are true equal desktop columns.
   - About/legal copy is left-aligned to the shared 1200px page rail.
   ========================================================== */

/* About page: intentionally plain, and aligned to the SAME left rail as the site. */
.legal-page .legal-hero,
.legal-page .legal-hero *,
.legal-page .legal-article,
.legal-page .legal-article *{text-align:left!important}
.legal-page .legal-hero .wrap-narrow,
.legal-page .legal-article{
  width:min(860px,calc(100% - (var(--gut) * 2)))!important;
  max-width:860px!important;
  margin-left:max(var(--gut),calc((100vw - var(--max)) / 2))!important;
  margin-right:auto!important;
}

/* Town-local section: main service context LEFT, Local Planning Note RIGHT. */
.local-copy-in{max-width:none!important;width:100%!important;margin-inline:0!important}
.local-copy-grid{min-width:0;width:100%}
.local-copy-main,.local-copy-grid>.local-unique-note{min-width:0}
@media(min-width:901px){
  .local-copy-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:clamp(34px,4vw,52px)!important;
    align-items:stretch!important;
  }
  .local-copy-main{padding:2px 0!important}
  .local-copy-main .head,
  .local-copy-main .head h2{max-width:none!important;width:100%!important}
  .local-copy-grid>.local-unique-note{
    margin:0!important;
    height:100%!important;
    align-self:stretch!important;
    padding:24px 26px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    border-left:0!important;
    border-top:3px solid var(--orange)!important;
    border-radius:12px!important;
    background:var(--mist-soft)!important;
  }
  .local-copy-grid>.local-unique-note p{max-width:none!important}
}
@media(max-width:900px){
  .local-copy-grid{display:grid!important;grid-template-columns:1fr!important;gap:18px!important}
  .local-copy-grid>.local-unique-note{margin-top:0!important}
}

/* IMPORTANT: V26 provider-media rebalance applies ONLY to septic pages on desktop. */
@media(min-width:901px){
  /* Septic: intro stays above; proof points live over reviews in LEFT info/media column,
     balancing the taller septic long form in the RIGHT column. */
  .provider-request-block--septic .provider-head{
    display:block!important;
    width:100%!important;
    max-width:760px!important;
    margin:0 0 24px!important;
  }
  .provider-request-block--septic .provider-head>p{max-width:62ch!important}
  .provider-request-block--septic .provider-flow{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:42px!important;
    align-items:start!important;
  }
  .provider-request-block--septic .provider-media>.provider-reasons{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    margin:0 0 2px!important;
    padding:0!important;
    order:0!important;
  }

  /* Porta + homepage: restore the balanced provider intro/reasons row that was
     already working before the septic-only rebalance was introduced. */
  .provider-request-block--porta .provider-head,
  .provider-request-block--general .provider-head{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:54px!important;
    row-gap:0!important;
    align-items:start!important;
    width:100%!important;
    max-width:none!important;
    margin:0 0 30px!important;
  }
  .provider-request-block--porta .provider-head>.mono,
  .provider-request-block--general .provider-head>.mono{
    grid-column:1!important;grid-row:1!important;margin-bottom:9px!important;
  }
  .provider-request-block--porta .provider-head>h2,
  .provider-request-block--general .provider-head>h2{
    grid-column:1!important;grid-row:2!important;margin-bottom:12px!important;
  }
  .provider-request-block--porta .provider-head>p,
  .provider-request-block--general .provider-head>p{
    grid-column:1!important;grid-row:3!important;max-width:56ch!important;margin:0!important;
  }
  .provider-request-block--porta .provider-head>.provider-reasons,
  .provider-request-block--general .provider-head>.provider-reasons{
    grid-column:2!important;
    grid-row:1 / span 3!important;
    align-self:center!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  .provider-request-block--porta .provider-flow,
  .provider-request-block--general .provider-flow{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:42px!important;
    align-items:start!important;
  }
}

/* Under desktop, retain the already-approved stacked provider sequence. */
@media(max-width:900px){
  .provider-request-block--porta .provider-head,
  .provider-request-block--general .provider-head,
  .provider-request-block--septic .provider-head{display:block!important;margin-bottom:24px!important}
  .provider-request-block--porta .provider-head>.provider-reasons,
  .provider-request-block--general .provider-head>.provider-reasons{margin-top:18px!important}
}

/* V28 — actual desktop-only persistent service dock. */
.desktop-service-dock{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:68;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  background:var(--ever, #203A46);
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(18,35,43,.24);
}
.desktop-service-dock a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 15px;
  border-radius:9px;
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.desktop-service-dock .dock-request{
  background:var(--copper, #D76836);
  color:#fff;
  border:1px solid var(--copper, #D76836);
}
.desktop-service-dock .dock-call{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.82);
}
.desktop-service-dock .dock-request:hover,
.desktop-service-dock .dock-request:focus-visible{filter:brightness(1.07)}
.desktop-service-dock .dock-call:hover,
.desktop-service-dock .dock-call:focus-visible{background:#fff;color:var(--ever, #203A46)}
@media(max-width:900px){
  .desktop-service-dock{display:none!important}
}


/* ==========================================================
   V29 FINAL DESKTOP PROVIDER ALIGNMENT
   True 50/50 composition for SEPTIC pages + HOMEPAGE only.
   The form begins at the same top line as Featured Provider;
   porta provider layouts and all mobile layouts are untouched.
   ========================================================== */
@media(min-width:901px){
  .page-septic .provider-request-block>.wrap,
  .page-home .provider-request-block>.wrap{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:42px!important;
    row-gap:20px!important;
    align-items:start!important;
  }

  .page-septic .provider-request-block .provider-head,
  .page-home .provider-request-block .provider-head{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    min-width:0!important;
  }
  .page-septic .provider-request-block .provider-head h2,
  .page-home .provider-request-block .provider-head h2,
  .page-septic .provider-request-block .provider-head>p,
  .page-home .provider-request-block .provider-head>p{
    width:100%!important;
    max-width:none!important;
  }

  /* Let the existing media + form children participate directly in the
     outer 50/50 grid so the right form no longer starts below the intro. */
  .page-septic .provider-request-block .provider-flow,
  .page-home .provider-request-block .provider-flow{
    display:contents!important;
  }

  .page-septic .provider-request-block .provider-media,
  .page-home .provider-request-block .provider-media{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  .page-septic .provider-request-block .provider-form,
  .page-home .provider-request-block .provider-form{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    align-self:start!important;
  }
  .page-septic .provider-request-block .provider-form .form,
  .page-home .provider-request-block .provider-form .form{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
}