/* Big Easy Pressure Washing v1.0.0 · Design A "Clean Slate" + Parish Map hero */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button,input,select{font:inherit}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',sans-serif;color:#12283a;background:#f4f7f8;overflow-x:hidden}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* buttons + shared atoms */
.a-btn{display:inline-block;background:#f5a524;color:#241a04;font-weight:700;padding:12px 22px;border-radius:10px;border:0;cursor:pointer;font-size:15px;transition:.18s;box-shadow:0 4px 14px rgba(245,165,36,.35)}
.a-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(245,165,36,.45)}
.a-btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);box-shadow:none}
.a-btn.ghost:hover{background:#fff;color:#0a2233}
.a-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0fa3b1;margin-bottom:12px}
.a-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.a-chip{font-size:12.5px;font-weight:600;color:#0a2233;background:#e7f2f4;border:1px solid #c9e2e6;padding:6px 12px;border-radius:999px}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.26s}.rise.d4{animation-delay:.36s}
@media(prefers-reduced-motion:reduce){.rise{animation:none}}

/* nav */
.a-nav{position:sticky;top:0;z-index:50;background:rgba(244,247,248,.92);backdrop-filter:blur(10px);border-bottom:1px solid #dde6e9}
.a-nav-in{display:flex;align-items:center;gap:28px;padding:14px 24px}
.a-logo img{height:44px;width:auto}
.a-links{display:flex;gap:22px;font-weight:600;font-size:14.5px;color:#33506a}
.a-links a:hover{color:#0fa3b1}
.a-call{margin-left:auto;display:flex;align-items:center;gap:10px}
.a-call-num{font-weight:700;font-size:15px;color:#0a2233}
.a-nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.a-nav-toggle span{width:24px;height:2.5px;background:#0a2233;border-radius:2px;transition:.2s}

.a-drop{position:relative;display:flex;align-items:center;gap:3px}
.a-drop-toggle{display:flex;align-items:center;background:none;border:0;padding:2px;margin:0;cursor:pointer;color:#33506a}
.a-drop-toggle svg{transition:transform .15s}
.a-drop.open .a-drop-toggle svg{transform:rotate(180deg)}
.a-submenu{display:none;position:absolute;top:100%;left:0;padding-top:12px;min-width:230px;z-index:60}
.a-submenu-inner{list-style:none;margin:0;background:#fff;border:1px solid #dde6e9;border-radius:10px;box-shadow:0 18px 30px rgba(10,34,51,.14);padding:8px}
.a-drop:hover .a-submenu,.a-drop:focus-within .a-submenu,.a-drop.open .a-submenu{display:block}
.a-submenu-inner li a{display:block;padding:9px 12px;font-weight:500;font-size:14px;color:#33506a;border-radius:6px;white-space:nowrap}
.a-submenu-inner li a:hover{background:#f4f7f8;color:#0fa3b1}

/* hero: parish map */
#hero-map{position:relative;background:#0a2233;overflow:hidden}
.f6-bg{position:absolute;inset:0}
.f6-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.95)}
.f6-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(6,24,38,.93) 24%,rgba(6,24,38,.55) 62%,rgba(6,24,38,.3))}
.f6-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:80px 24px 92px;display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.f6-copy .a-eyebrow{color:#5ee1ec}
.f6-copy h1{font-size:clamp(32px,4.2vw,50px);font-weight:800;line-height:1.06;letter-spacing:-.01em;color:#fff}
.f6-copy h1 em{font-style:normal;color:#5ee1ec}
.f6-copy>p{margin:16px 0 26px;font-size:16.5px;line-height:1.6;color:#c4d6e2;max-width:30em}
.f6-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.f6-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.f6-chips .a-chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#e8f2f8;backdrop-filter:blur(4px)}
.f6-map{position:relative;background:#fff;border-radius:22px;padding:22px;box-shadow:0 24px 60px rgba(10,34,51,.14)}
.f6-map img{width:100%}
.f6-pin{position:absolute;background:#0a2233;color:#fff;font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(10,34,51,.3);white-space:nowrap}
.f6-pin.c{background:#0fa3b1}
.f6-cap{margin-top:14px;text-align:center;font-weight:600;font-size:13.5px;color:#3c576f;border-top:1px solid #e2ebee;padding-top:14px}

/* sections */
.a-sec{padding:84px 0}
.a-sec.alt{background:#fff}

/* ===== dark section band =====
   The page ran almost entirely white and #f4f7f8. This inverts a whole section
   so the light run gets broken up. Every component that can appear inside one
   is covered below, otherwise dark text lands on dark ground. */
.a-sec.dark{background:#0a2233;color:#a9c2d2}
.a-sec.dark h2,.a-sec.dark h3,.a-sec.dark h4{color:#fff}
.a-sec.dark .a-kicker{color:#5ee1ec}
.a-sec.dark .lead,.a-sec.dark p{color:#a9c2d2}
.a-sec.dark .d-num{border-top-color:rgba(255,255,255,.15)}
.a-sec.dark .d-num .r{border-bottom-color:rgba(255,255,255,.15)}
.a-sec.dark .d-num .r b{color:#5ee1ec}
.a-sec.dark .d-num .r p{color:#a9c2d2}
/* review cards */
.a-sec.dark .a-rev{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.a-sec.dark .a-rev p{color:#c3d7e2}
.a-sec.dark .a-rev .who b{color:#fff}
.a-sec.dark .a-rev .who span{color:#8fb0c1}
/* Needs the .who in the selector: `.a-sec.dark .a-rev .who span` above is more
   specific and was painting this light grey on a light cyan circle. */
.a-sec.dark .a-rev .who .a-revinitial{background:#5ee1ec;color:#06232a}
.a-sec.dark .a-revbtn{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.a-sec.dark .a-revbtn:hover{background:#fff;border-color:#fff;color:#0a2233}
.a-sec.dark .a-revbtn:disabled:hover{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
/* crew */
/* The card itself must invert too. It is background:#fff by default, so setting
   only the name to white put white text on a white card. */
.a-sec.dark .a-crew-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.a-sec.dark .a-crew-card:hover{box-shadow:0 14px 30px rgba(0,0,0,.28)}
.a-sec.dark .a-crew-card b{color:#fff}
.a-sec.dark .a-crew-card img{filter:grayscale(.18)}
/* generic cards and buttons that may land inside a dark band */
.a-sec.dark .a-btn.ghost,.a-sec.dark .a-btn.ghost.dark{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.a-sec.dark .a-btn.ghost:hover,.a-sec.dark .a-btn.ghost.dark:hover{background:#fff;border-color:#fff;color:#0a2233}
.a-sec.dark .a-stat,.a-sec.dark .d-stats{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.a-sec.dark .d-stats div{background:#0a2233}
.a-sec.dark .d-stats b{color:#fff}
.a-sec.dark .d-stats span{color:#8fb0c1}
.a-kicker{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0fa3b1;margin-bottom:10px}
.a-sec h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.01em;color:#0a2233;max-width:620px}
.a-sec .lead{margin-top:12px;color:#3c576f;font-size:16.5px;line-height:1.6;max-width:620px}

/* gallery */
.a-gallery{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px;margin-top:38px}
.a-gcard{position:relative;border-radius:16px;overflow:hidden;background:#0a2233;min-height:300px}
.a-gcard img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .5s}
.a-gcard:hover img{transform:scale(1.05)}
.a-gcap{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(transparent,rgba(4,18,29,.85));color:#fff;font-weight:600;font-size:14.5px}

/* problem cards */
.a-probs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.a-prob{background:#fff;border:1px solid #dde6e9;border-radius:16px;padding:26px 22px;transition:.2s}
.a-prob:hover{border-color:#0fa3b1;transform:translateY(-4px);box-shadow:0 14px 30px rgba(10,34,51,.08)}
.a-prob .ico{width:44px;height:44px;border-radius:12px;background:#e7f2f4;color:#0fa3b1;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.a-prob h3{font-size:16.5px;font-weight:700;color:#0a2233;margin-bottom:8px}
.a-prob p{font-size:14px;line-height:1.55;color:#4b6578}

/* services tabs */
.a-tabs{display:inline-flex;background:#e2ecef;border-radius:12px;padding:5px;margin-top:34px}
.a-tab{padding:10px 26px;border-radius:9px;border:0;background:transparent;font-weight:700;font-size:14.5px;color:#41607a;cursor:pointer;transition:.18s}
.a-tab.on{background:#0a2233;color:#fff}
.a-svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.a-svc{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #dde6e9;border-radius:13px;padding:15px 18px;font-weight:600;font-size:15px;color:#12283a;transition:.18s}
.a-svc:hover{border-color:#0fa3b1;box-shadow:0 8px 20px rgba(10,34,51,.07)}
.a-svc svg{flex:none;color:#0fa3b1}
.a-svc .arr{margin-left:auto;color:#9db4c0;transition:.18s}
.a-svc:hover .arr{color:#0fa3b1;transform:translateX(3px)}
#a-com{display:none}

/* process steps */
.a-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px;counter-reset:astep}
.a-step{background:#fff;border:1px solid #dde6e9;border-radius:16px;padding:28px 24px;transition:.2s}
.a-step::before{counter-increment:astep;content:"0" counter(astep);font-family:'Bricolage Grotesque',sans-serif;font-size:44px;font-weight:800;color:transparent;-webkit-text-stroke:1.5px #0fa3b1;line-height:1;display:block;margin-bottom:14px}
.a-step h3{font-size:17px;font-weight:700;color:#0a2233;margin-bottom:8px}
.a-step p{font-size:14.5px;line-height:1.6;color:#4b6578}
.a-step:hover{transform:translateY(-4px);border-color:#0fa3b1;box-shadow:0 14px 30px rgba(10,34,51,.08)}

/* reviews */
.a-revs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:38px}
.a-rev{background:#f4f7f8;border:1px solid #dde6e9;border-radius:18px;padding:28px}
.a-rev .stars{color:#f5a524;letter-spacing:2px;font-size:15px;margin-bottom:12px}
.a-rev p{font-size:15px;line-height:1.62;color:#3c576f}
.a-rev .who{display:flex;align-items:center;gap:12px;margin-top:18px}
.a-rev .who img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.a-rev .who b{display:block;font-size:14.5px;color:#0a2233}
.a-rev .who span{font-size:12.5px;color:#7b91a1}

/* interactive service area map */
.bepw-map{height:420px;width:100%;border-radius:14px;overflow:hidden;background:#eaf0f2;z-index:0}
.bepw-map .leaflet-container{font:inherit}
.bepw-pin span{display:block;width:16px;height:16px;border-radius:50%;background:#0fa3b1;border:3px solid #fff;box-shadow:0 2px 6px rgba(10,34,51,.35)}
.bepw-pin.hq span{width:20px;height:20px;background:#f5a524;margin:-2px 0 0 -2px}
.bepw-pop{display:block;min-width:150px;text-decoration:none}
.bepw-pop b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:14.5px;color:#0a2233;margin-bottom:2px}
.bepw-pop span{display:block;font-size:12px;color:#7b91a1}
.bepw-pop:hover b{color:#0fa3b1}
.leaflet-popup-content{margin:11px 14px}
.leaflet-popup-content-wrapper{border-radius:12px}
@media(max-width:900px){.bepw-map{height:320px}}

/* ===== Homepage: Direction D "Editorial Split" (2026-08-06) ===== */

/* hero: solid navy copy column beside a full-bleed photo column */
.d-hero{display:grid;grid-template-columns:1.02fr .98fr;min-height:600px}
/* Left padding aligns the copy with the content column below, but the raw calc
   keeps growing on wide screens (355px of empty navy at 1843px). Clamped. */
.d-hero-copy{background:#0a2233;color:#fff;display:flex;align-items:center;padding:78px 56px 78px clamp(24px,calc((100vw - 1180px)/2 + 24px),96px)}
.d-hero-copy .a-eyebrow{color:#5ee1ec}
.d-hero-copy h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(32px,3.9vw,56px);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:#fff}
.d-hero-copy h1 em{font-style:normal;color:#5ee1ec}
.d-hero-copy>div>p{margin:17px 0 26px;font-size:16.5px;line-height:1.6;color:#bcd3de;max-width:32em}
.d-hero-shot{position:relative;background:#0a2233;min-height:420px}
/* object-position biased UP because between roughly 495px and 1850px the panel is
   narrower than the image ratio of 1.50, so cover crops HEIGHT. That bites hardest
   below 1000px, where the hero stacks into a wide strip and loses about half its
   height; a centre crop beheaded the nozzle there.
   The vertical value is NOT universally inert. Measured vertical crop: 0% at 1400,
   0.8% at 1852, 4.3% at 1920, 28.2% at 2560. Above ~1850px the panel grows wider
   than 1.50 and cover starts cropping height again, so on a 1080p or 4K monitor
   this value does act. It is safe there (the frame still reads), but do not assume
   it only affects mobile. */
.d-hero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.d-hero-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,34,51,.55),rgba(10,34,51,0) 42%)}
.d-badge{position:absolute;right:30px;bottom:30px;z-index:2;background:#fff;border-radius:16px;padding:17px 21px;box-shadow:0 18px 44px rgba(0,0,0,.26);min-width:196px}
.d-badge .stars{color:#f5a524;letter-spacing:2px;font-size:14px;display:block}
.d-badge b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:32px;color:#0a2233;line-height:1.05}
.d-badge .sub{font-size:12.5px;color:#7b91a1}

/* editorial two-column row: sticky heading left, content right */
.d-row{display:grid;grid-template-columns:.36fr .64fr;gap:54px;align-items:start}
.d-side{position:sticky;top:96px}
.d-side h2{font-size:clamp(26px,2.5vw,35px)}
.d-side .lead{font-size:15.5px}
.d-side-cta{margin-top:22px;display:flex;gap:11px;flex-wrap:wrap}
.d-side-cta .a-btn{white-space:nowrap}

/* stat band inside an editorial side column */
.d-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#dde6e9;border:1px solid #dde6e9;border-radius:16px;overflow:hidden;margin-top:26px}
.d-stats div{background:#fff;padding:20px 18px}
.d-stats b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:30px;color:#0a2233;line-height:1}
.d-stats span{display:block;font-size:12.5px;color:#7b91a1;margin-top:5px;line-height:1.4}
.a-sec.alt .d-stats div{background:#fff}
.d-side-img{margin-top:24px;border-radius:16px;overflow:hidden;line-height:0}
.d-side-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

/* numbered hairline rows, replacing bordered cards */
.d-num{border-top:1px solid #dde6e9}
.d-num .r{display:grid;grid-template-columns:66px 1fr;gap:20px;padding:25px 0;border-bottom:1px solid #dde6e9}
/* #e2ebee was near invisible against the #f4f7f8 band. */
.d-num .r b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;color:#0fa3b1;line-height:1}
.d-num .r h3{font-size:18px;color:#0a2233;margin-bottom:5px}
.d-num .r p{font-size:15px;line-height:1.62;color:#3c576f}

/* asymmetric gallery */
/* Proof-section header. h2 and .lead carry max-width:620px, so on their own they
   left the right 44% of an 1132px row empty. minmax(0,..) on both tracks so a long
   word can never push a track past the container. The stacking rule sits directly
   below, after the definitions, since equal specificity is decided by source order. */
.p-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:48px;align-items:end}
.p-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-end;text-align:right}
.p-cta p{margin:0;font-size:14.5px;color:#5b7286;max-width:30ch}
.p-cta .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:860px){
	.p-head{grid-template-columns:1fr;gap:24px;align-items:start}
	.p-cta{align-items:flex-start;text-align:left}
	.p-cta .row{justify-content:flex-start}
}

.d-gal{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:36px}
.d-gal figure{position:relative;border-radius:4px;overflow:hidden;background:#dde6e9}
.d-gal figure:nth-child(1){grid-column:span 7}
.d-gal figure:nth-child(2){grid-column:span 5}
.d-gal figure:nth-child(3){grid-column:span 12}
.d-gal img{width:100%;height:300px;object-fit:cover;display:block}
.d-gal figure:nth-child(3) img{height:230px}
.d-gal figcaption{position:absolute;left:0;bottom:0;background:#0a2233;color:#fff;font-size:12px;font-weight:600;padding:8px 14px}

/* estimate band */
/* The copy column STRETCHES to the form's height and its social row is pushed to
   the bottom edge (margin-top:auto), so the leftover height is absorbed into one
   deliberate gap instead of floating the whole column with equal dead space above
   and below it. Centring left 89px dead at each end once the form became a fixed
   660px pane. On mobile the column has no constrained height, so margin-top:auto
   resolves to zero and the stack is unaffected. */
.d-form{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:stretch}
.d-form>div:first-child{display:flex;flex-direction:column}
.d-form>div:first-child .a-social-lab{margin-top:auto;padding-top:24px}
/* Reassurance list beside the estimate form. Fills the height the 660px form
   creates in that row, so the copy column no longer floats in dead space. */
.d-form-notes{list-style:none;margin:24px 0 4px;padding:0;border-top:1px solid #dde6e9}
.d-form-notes li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid #dde6e9;font-size:15px;line-height:1.55;color:#3c576f}
.d-form-notes li svg{margin-top:3px;color:#0fa3b1;flex:none}
.d-num-tel{display:inline-block;margin-top:20px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:30px;color:#0a2233;letter-spacing:-.02em}
.d-num-tel:hover{color:#0fa3b1}
.d-hours{font-size:13.5px;color:#7b91a1;margin-top:4px}
/* Social row. Hover lift is gated to real pointers: on a phone an ungated
   hover transform fires on tap and sticks. */
.a-social-lab{margin-top:24px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7b91a1}
.a-social{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 0;padding:0}
.a-social a{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid #dde6e9;color:#0a2233;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.a-social a:focus-visible{outline:3px solid #0fa3b1;outline-offset:2px}
@media(hover:hover) and (pointer:fine){
	.a-social a:hover{background:#0fa3b1;border-color:#0fa3b1;color:#fff;transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){
	.a-social a{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
	.a-social a:hover{transform:none}
}
/* Footer sits on navy, so the light chip inverts to a translucent one. */
.a-foot .a-social{margin-top:18px}
.a-foot .a-social a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
@media(hover:hover) and (pointer:fine){
	.a-foot .a-social a:hover{background:#0fa3b1;border-color:#0fa3b1;color:#fff}
}
/* Five 50px circles plus four 12px gaps need 298px, and the column is 297px at a
   360px viewport, so the row wrapped and orphaned one icon. Stepped down to keep
   all five on one line. Both steps stay at or above the 44px minimum tap target. */
@media(max-width:600px){
	.a-social{gap:10px}
	.a-social a{width:46px;height:46px}
}
@media(max-width:380px){
	.a-social{gap:8px}
	.a-social a{width:44px;height:44px}
}
/* Coverage: two columns instead of heading + 3 columns + map row + CTA stacked,
   which ran 1181px tall on its own. */
.d-covx{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:start}
.d-covx-l .f6-map{position:relative;margin-top:26px;max-width:420px}
.d-covx-l .f6-map img{width:100%;height:auto}
.d-covx-r{display:grid;gap:0;border-top:1px solid #dde6e9}
.d-covrow{display:grid;grid-template-columns:.62fr 1.38fr;gap:18px;align-items:start;padding:18px 0;border-bottom:1px solid #dde6e9}
.d-covrow .hd h3{font-size:15.5px;color:#0a2233;margin-bottom:2px}
.d-covrow .hd span{font-size:11.5px;color:#7b91a1;letter-spacing:.04em;text-transform:uppercase}
.d-covx-r .a-cov-base{margin-top:24px}
.d-covx-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.d-covx-cta .a-btn{white-space:nowrap}

@media(max-width:1000px){
	.d-hero{grid-template-columns:1fr}
	.d-hero-copy{padding:56px 24px}
	.d-hero-shot{min-height:320px}
	.d-row,.d-form,.d-covx{grid-template-columns:1fr;gap:28px}
	.d-side{position:static}
	.d-covrow{grid-template-columns:1fr;gap:10px}
	.d-covx-l .f6-map{max-width:100%}
	.d-stats{grid-template-columns:1fr 1fr}
	/* Stacks the gallery full-width on tablet. Kept as-is: scoping it with
	   :not(.m-car) also stripped it between 701 and 1000px, where the swipe
	   track is NOT active and the figures need this. The 700px block beats
	   it with its own !important instead. */
	.d-gal figure{grid-column:span 12 !important}
	.d-gal img,.d-gal figure:nth-child(3) img{height:240px}
	.d-badge{right:18px;bottom:18px;padding:14px 17px;min-width:168px}
}

/* testimonials page: static crawlable grid, not the carousel */
.i-revgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.i-revgrid .a-rev{display:flex;flex-direction:column}
.i-revgrid .a-rev p{flex:1}
@media(max-width:900px){.i-revgrid{grid-template-columns:1fr}}

/* single pull-quote inside an editorial side column */
.d-quote{margin:26px 0 0;background:#fff;border:1px solid #dde6e9;border-radius:16px;padding:24px}
.d-quote .stars{color:#f5a524;letter-spacing:2px;font-size:15px;margin-bottom:10px}
.d-quote blockquote{margin:0;font-size:15px;line-height:1.62;color:#3c576f}
.d-quote figcaption{display:flex;align-items:center;gap:11px;margin-top:16px}
.d-quote figcaption img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.d-quote figcaption b{display:block;font-size:14px;color:#0a2233}
.d-quote figcaption span span{font-size:12px;color:#7b91a1}
.d-quote .a-revinitial{width:40px;height:40px;font-size:16px}
.a-sec.dark .d-quote{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.a-sec.dark .d-quote blockquote{color:#c3d7e2}
.a-sec.dark .d-quote figcaption b{color:#fff}
.a-sec.dark .d-quote figcaption span span{color:#8fb0c1}
.a-sec.dark .d-quote .a-revinitial{background:#5ee1ec;color:#06232a}

/* homepage coverage */
.a-cov{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:start}
.a-cov-base{margin-top:28px;display:grid;gap:2px;background:#fff;border:1px solid #dde6e9;border-radius:16px;padding:6px}
.a-cov-base .row{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border-radius:11px}
.a-cov-base .row:hover{background:#f4f7f8}
.a-cov-base svg{color:#0fa3b1;flex:none;margin-top:2px}
.a-cov-base span{display:block;font-size:13px;color:#7b91a1;line-height:1.5}
.a-cov-base b{display:block;font-size:14.5px;color:#0a2233;font-weight:700}
.a-cov-base b a{color:inherit}
.a-cov-base b a:hover{color:#0fa3b1}
.a-cov-grid{display:grid;gap:14px}
.a-cov-group{background:#fff;border:1px solid #dde6e9;border-radius:18px;padding:22px 24px}
.a-cov-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.a-cov-head h3{font-size:16px;color:#0a2233;font-family:'Bricolage Grotesque',sans-serif;font-weight:800}
.a-cov-head span{font-size:12px;color:#7b91a1;letter-spacing:.03em}
.a-cov-links{display:flex;flex-wrap:wrap;gap:9px}
.a-cov-links a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid #dde6e9;border-radius:999px;font-size:13.5px;font-weight:600;color:#33506a;background:#f9fbfb;transition:.16s}
.a-cov-links a svg{opacity:0;margin-left:-16px;transition:.16s;color:#0fa3b1}
.a-cov-links a:hover{border-color:#0a2233;background:#0a2233;color:#fff}
.a-cov-links a:hover svg{opacity:1;margin-left:0;color:#5ee1ec}
/* full-width variant used on inner pages */
/* Two columns, not three. With four parishes holding 6/5/1/1 cities, a 3-col
   grid left one card alone on a second row with a wide gap beside it. Paired
   with the count sort in bepw_coverage_groups(), 2 cols puts the two large
   groups on one row and the two small ones on the next. */
.a-cov-grid.cols{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.a-cov-grid.cols .a-cov-group{display:flex;flex-direction:column}
.a-cov-grid.cols .a-cov-links{align-content:flex-start;flex:1}
@media(max-width:820px){.a-cov-grid.cols{grid-template-columns:1fr}}

/* Coverage on a dark band. .a-sec.dark did not reach these, so the cards
   rendered white-on-navy and the pills kept their light borders. */
.a-sec.dark .a-cov-group{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.a-sec.dark .a-cov-head h3{color:#fff}
.a-sec.dark .a-cov-head h3 a{color:#fff;text-decoration:none}
.a-sec.dark .a-cov-head h3 a:hover{color:#5ee1ec}
.a-sec.dark .a-cov-head span{color:#8fb0c1}
.a-sec.dark .a-cov-links a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#dceaf2}
.a-sec.dark .a-cov-links a svg{color:#5ee1ec}
.a-sec.dark .a-cov-links a:hover{background:#5ee1ec;border-color:#5ee1ec;color:#06232a}
.a-sec.dark .a-cov-links a:hover svg{color:#06232a}

/* Related-service / more-guides cards on a dark band. Without these the card
   keeps background:#fff and h3 color:#0a2233, i.e. white card on navy. */
.a-sec.dark .i-relcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.a-sec.dark .i-relcard:hover{border-color:#5ee1ec;box-shadow:0 14px 30px rgba(0,0,0,.28)}
.a-sec.dark .i-relcard .ico{background:rgba(94,225,236,.14);color:#5ee1ec}
.a-sec.dark .i-relcard h3{color:#fff}
.a-sec.dark .i-relcard p{color:#a9c2d2}
.a-sec.dark .i-relcard .cta{color:#fff}
.a-sec.dark .i-relcard:hover .cta{color:#5ee1ec}
@media(max-width:900px){.a-cov{grid-template-columns:1fr;gap:32px}}

/* centred button pair closing a section */
.a-seccta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.a-btn.ghost.dark{border:1px solid #cfdde3;color:#0a2233;background:transparent}
.a-btn.ghost.dark:hover{background:#0a2233;border-color:#0a2233;color:#fff}

/* reviews carousel */
.a-revhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.a-revnav{display:flex;gap:10px;flex:none}
.a-revbtn{width:44px;height:44px;border-radius:50%;border:1px solid #cfdde3;background:#fff;color:#0a2233;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.18s}
.a-revbtn:hover{background:#0a2233;border-color:#0a2233;color:#fff}
.a-revbtn:disabled{opacity:.35;cursor:default}
.a-revbtn:disabled:hover{background:#fff;border-color:#cfdde3;color:#0a2233}
.a-revtrack{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/3);gap:18px;margin-top:34px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none}
.a-revtrack::-webkit-scrollbar{display:none}
.a-revtrack:focus-visible{outline:2px solid #0fa3b1;outline-offset:4px}
.a-revtrack .a-rev{scroll-snap-align:start;display:flex;flex-direction:column}
.a-revtrack .a-rev p{flex:1}
.a-revinitial{width:44px;height:44px;border-radius:50%;background:#0a2233;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;flex:none}
@media(max-width:900px){.a-revtrack{grid-auto-columns:calc((100% - 18px)/2)}}
@media(max-width:640px){
	.a-revtrack{grid-auto-columns:88%}
	.a-revhead{align-items:flex-start}
	.a-revnav{order:2}
}

/* crew */
.a-crew{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;align-items:stretch}
/* The photo frame is pinned to 8:9 (0.889), which is wider than the widest crew
   source (Brian at 0.878), so object-fit:cover trims nothing off the sides and
   the crossed arms stay whole at every column width. Keep any replacement
   portrait at 0.889 or narrower and that stays true. Letting the photo stretch
   to the row height instead, as it did before, drove the frame to 0.56 and cut
   15 to 18 percent off each side, which took the arms with it. Any trimming now
   comes off the bottom, which is empty torso.
   The grid also spans the FULL wrap now. It used to sit in the 0.64 track of a
   two-column row, which capped each card at 216px wide and is why an uncropped
   photo looked small; at full width the same 8:9 photo renders 364x409. The
   heading and the review share the row above it instead of beside it. */
/* h2 and .lead carry their own max-width:620px, so text-align alone would centre
   the text inside a 620px box that itself sits left. margin-inline centres the box. */
.crew-head-c{max-width:720px;margin:0 auto;text-align:center}
.crew-head-c h2,.crew-head-c .lead{margin-inline:auto}
/* The review rides along as a fourth tile beside the three faces. */
.a-crew.four{grid-template-columns:repeat(4,1fr)}
.a-crew.four .d-quote{margin:0;display:flex;flex-direction:column;justify-content:center}
/* Below ~1174px the four tracks get narrow enough that the review, at 252
   characters the longest of the 17, grows TALLER than a photo card. Grid rows
   size to their tallest item, so every photo card stretched with it and carried
   up to 139px of dead space under the name. Give the review its own full-width
   row from here down and the photos are never sized by it. Measured worst case
   after this: 6px. */
@media(max-width:1173px){
	.a-crew.four{grid-template-columns:repeat(3,1fr)}
	.a-crew.four .d-quote{grid-column:1/-1;align-items:center;text-align:center}
	.a-crew.four .d-quote blockquote{max-width:68ch}
	.a-crew.four .d-quote figcaption{justify-content:center}
}
/* .a-crew.four is (0,2,0) and BEATS the plain .a-crew rules in the 960px and
   600px blocks regardless of source order, so the row would otherwise survive
   down to 320px. Specificity, not source order, is what bites here. */
@media(max-width:960px){
	.a-crew.four{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
	.a-crew.four{grid-template-columns:1fr}
	.a-crew.four .d-quote{max-width:340px;margin-inline:auto;width:100%}
}
.a-crew-card{display:flex;flex-direction:column}
.a-crew-card{background:#fff;border:1px solid #dde6e9;border-radius:18px;overflow:hidden;text-align:center;transition:.2s}
.a-crew-card img{width:100%;height:auto;aspect-ratio:8/9;object-fit:cover;object-position:top}
.a-crew-card b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:700;color:#0a2233;padding:16px 10px}
.a-crew-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(10,34,51,.1)}

/* coverage */
.a-cities{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.a-city{background:#f4f7f8;border:1px solid #dde6e9;padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;color:#12283a;transition:.18s;display:inline-flex;align-items:center;gap:7px}
.a-city:hover{border-color:#0fa3b1;color:#0fa3b1}
.a-city.hq{background:#0a2233;color:#fff;border-color:#0a2233}
.a-city.hq:hover{color:#5ee1ec}

/* faq */
.a-faq{margin-top:34px;max-width:820px}
.a-faq details{background:#fff;border:1px solid #dde6e9;border-radius:14px;margin-bottom:10px}
.a-faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;font-weight:700;font-size:15.5px;color:#0a2233}
.a-faq summary::-webkit-details-marker{display:none}
.a-faq summary::after{content:"+";font-family:'Bricolage Grotesque',sans-serif;font-size:22px;color:#0fa3b1;transition:.2s;flex:none}
.a-faq details[open] summary::after{transform:rotate(45deg)}
.a-faq details[open]{border-color:#0fa3b1}
.a-faq .ans{padding:0 22px 18px;font-size:14.5px;line-height:1.65;color:#3c576f}

/* estimate band */
.a-act{background:#0a2233;color:#fff;border-radius:26px;padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.a-act h2{color:#fff}
.a-act p{color:#a9c2d2;margin-top:12px;font-size:16px;line-height:1.6}
.a-act p.hours{margin-top:6px;font-size:13.5px}
.a-act .num{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(26px,3vw,34px);font-weight:800;color:#5ee1ec;margin-top:20px}
/* .a-form removed 2026-08-10: the homepage static demo form it styled was
   replaced by the live GHL embed, leaving these rules with no markup. */

/* blog */
.a-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.a-post{background:#fff;border:1px solid #dde6e9;border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:12px;transition:.2s}
.a-post:hover{border-color:#0fa3b1;transform:translateY(-4px);box-shadow:0 14px 30px rgba(10,34,51,.08)}
.a-post .cat{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0fa3b1;background:#e7f2f4;padding:5px 10px;border-radius:999px}
.a-post h3{font-size:17px;font-weight:700;line-height:1.35;color:#0a2233}
.a-post p{font-size:14px;line-height:1.55;color:#4b6578}
.a-post .rm{margin-top:auto;font-weight:700;font-size:13.5px;color:#0a2233;display:flex;align-items:center;gap:7px}
.a-post:hover .rm{color:#0fa3b1}
.a-blog-all{margin-top:26px;text-align:center}
.a-blog-all a{font-weight:700;font-size:14.5px;color:#0a2233;border-bottom:2px solid #f5a524}
.a-blog-all a:hover{color:#0fa3b1}

/* instagram band */
.a-ig{background:#0a2233;border-radius:26px;padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.a-ig-l{display:flex;align-items:center;gap:18px}
.a-ig-l svg{color:#5ee1ec;flex:none}
.a-ig b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;color:#fff}
.a-ig span{color:#a9c2d2;font-size:14.5px}
/* prose left, photo right */
.i-split,.i-faqsplit{display:grid;grid-template-columns:1.3fr .9fr;gap:46px;align-items:start}
.i-aside-img{position:sticky;top:104px;border-radius:16px;overflow:hidden;line-height:0}
.i-aside-img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.i-faqsplit .a-faq{max-width:none;margin-top:0}
.i-faqsplit .i-aside-img{top:104px}
@media(max-width:900px){
	.i-split,.i-faqsplit{grid-template-columns:1fr;gap:28px}
	.i-aside-img{position:static;max-width:600px;margin:0 auto;width:100%}
}
.a-ig-feed{margin-top:26px;min-height:120px}
.a-ig-feed .eapps-instagram-feed-title-container{display:none}

/* footer */
.a-foot{background:#071827;color:#9db4c0;padding:56px 0 30px;margin-top:84px}
.a-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.a-foot img{height:50px;width:auto;margin-bottom:14px}
.a-foot-blurb{font-size:14px;line-height:1.7}
.a-foot h4{color:#fff;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;font-family:'Instrument Sans',sans-serif}
.a-foot li{margin-bottom:9px;font-size:14px}
.a-foot a:hover{color:#5ee1ec}
.a-foot .base{border-top:1px solid #16334a;margin-top:44px;padding-top:20px;font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* generic inner-page fallback */
.a-page{padding:64px 0}
.a-page h1{font-size:clamp(28px,3.6vw,42px);font-weight:800;color:#0a2233;margin-bottom:22px}
.a-page-content{font-size:16px;line-height:1.7;color:#3c576f;max-width:760px}
.a-page-content p{margin-bottom:16px}

/* ===== INNER TEMPLATES (page.php / single.php / archive.php) v1.1.0 ===== */

/* inner hero */
.i-hero{background:#0a2233;padding:38px 0 52px;position:relative;overflow:hidden}
.i-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 260px at 88% -10%,rgba(15,163,177,.28),transparent 70%)}
.i-hero.has-bg::after{display:none}
.i-hero-bg{position:absolute;inset:0;z-index:0}
.i-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.95)}
.i-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,24,38,.92) 38%,rgba(6,24,38,.62) 72%,rgba(6,24,38,.38))}
.i-hero .wrap{position:relative;z-index:2}
.i-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#8fa8ba;margin-bottom:20px;flex-wrap:wrap}
.i-crumb a{color:#8fa8ba;font-weight:500}
.i-crumb a:hover{color:#5ee1ec}
.i-crumb .sep{opacity:.5}
.i-crumb .cur{color:#c4d6e2}
.i-hero .a-eyebrow{color:#5ee1ec}
.i-hero h1{font-size:clamp(28px,3.6vw,42px);font-weight:800;color:#fff;letter-spacing:-.01em;max-width:760px;line-height:1.12}
.i-hero p.sub{margin-top:14px;font-size:16px;line-height:1.6;color:#c4d6e2;max-width:620px}
.i-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* trust strip */
.i-trust{background:#fff;border-bottom:1px solid #dde6e9}
.i-trust ul{display:flex;flex-wrap:wrap}
.i-trust li{flex:1;min-width:170px;display:flex;align-items:center;gap:9px;justify-content:center;padding:15px 10px;font-weight:600;font-size:13px;color:#33506a;border-right:1px solid #eef3f5}
.i-trust li:last-child{border-right:0}
.i-trust .stars{color:#f5a524;letter-spacing:1px}
.i-trust svg{color:#0fa3b1;flex:none}

/* content + aside */
.i-bleed{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
.i-prose{font-size:16px;line-height:1.75;color:#3c576f}
.i-prose h2{font-family:'Bricolage Grotesque',sans-serif;font-size:23px;color:#0a2233;margin:26px 0 12px}
.i-prose h2:first-child{margin-top:0}
.i-prose h3{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;color:#0a2233;margin:20px 0 10px}
.i-prose p{margin-bottom:16px}
.i-prose ul,.i-prose ol{margin:0 0 16px 22px}
.i-prose ul{list-style:disc}
.i-prose ol{list-style:decimal}
.i-prose li{margin-bottom:8px}
.i-prose li>ul,.i-prose li>ol{margin-top:8px;margin-bottom:0}
.i-prose table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:15px}
.i-prose th,.i-prose td{padding:10px 14px;border:1px solid #dde6e9;text-align:left}
.i-prose thead th{background:#eef4f6;color:#0a2233;font-weight:700}
.i-prose tbody tr:nth-child(even){background:#f8fafb}
.i-prose img{width:100%;height:auto;border-radius:14px;margin:8px 0 20px;display:block}

/* why/stats dark band */
.i-why{background:#0a2233;border-radius:26px;padding:52px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.i-why h2{color:#fff}
.i-why .a-kicker{color:#5ee1ec}
.i-why .lead{color:#a9c2d2}
.i-why-list{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.i-why-list li{display:flex;gap:10px;align-items:flex-start;color:#dbe8ef;font-size:14.5px}
.i-why-list svg{color:#5ee1ec;flex:none;margin-top:2px}
.i-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.i-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:22px 16px;text-align:center}
.i-stat b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:26px;color:#5ee1ec}
.i-stat span{font-size:12px;color:#a9c2d2}

/* icon-card grid (services / related / areas) */
.i-relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.i-relcard{background:#fff;border:1px solid #dde6e9;border-radius:16px;padding:24px;transition:.2s}
.i-relcard:hover{border-color:#0fa3b1;transform:translateY(-4px);box-shadow:0 14px 30px rgba(10,34,51,.08)}
.i-relcard .ico{width:44px;height:44px;border-radius:12px;background:#e7f2f4;color:#0fa3b1;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.i-relcard h3{font-size:16px;font-weight:700;color:#0a2233;margin-bottom:6px}
.i-relcard p{font-size:13.5px;color:#4b6578;line-height:1.5;margin-bottom:14px}
.i-relcard .cta{font-weight:700;font-size:13px;color:#0a2233;display:flex;align-items:center;gap:6px}
.i-relcard:hover .cta{color:#0fa3b1}

/* simple CTA band (no form) */
.i-cta{background:#0a2233;border-radius:26px;padding:52px;text-align:center}
.i-cta h2{color:#fff}
.i-cta p{color:#a9c2d2;margin-top:10px;font-size:15.5px}
.i-cta .btns{margin-top:24px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* CTA band with a photo: copy left, image bleeding to the right edge */
.i-cta.has-img{display:grid;grid-template-columns:1.05fr .95fr;gap:0;padding:0;text-align:left;overflow:hidden;align-items:stretch}
.i-cta.has-img .i-cta-copy{padding:52px 44px;align-self:center}
.i-cta.has-img .btns{justify-content:flex-start}
.i-cta-img{position:relative;min-height:290px}
.i-cta-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* keep the seam soft against the navy panel */
.i-cta-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#0a2233 0%,rgba(10,34,51,.55) 22%,rgba(10,34,51,0) 62%)}
@media(max-width:820px){
	.i-cta.has-img{grid-template-columns:1fr}
	.i-cta.has-img .i-cta-copy{padding:38px 28px;text-align:center}
	.i-cta.has-img .btns{justify-content:center}
	.i-cta-img{min-height:210px;order:-1}
	.i-cta-img::before{background:linear-gradient(180deg,rgba(10,34,51,0) 40%,#0a2233 100%)}
}

/* contact page */
.i-contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.i-cinfo{background:#fff;border:1px solid #dde6e9;border-radius:18px;padding:30px}
.i-cinfo h3{font-size:19px;margin-bottom:6px;color:#0a2233}
.i-cinfo .row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #eef3f5}
.i-cinfo .row:last-of-type{border-bottom:0}
.i-cinfo .row .ico{color:#0fa3b1;flex:none;width:20px}
.i-cinfo .row b{display:block;font-size:14px;color:#0a2233;margin-bottom:2px}
.i-cinfo .row span{font-size:13.5px;color:#4b6578;line-height:1.5}
.i-cinfo .row a{color:inherit}
.i-cinfo .map{margin-top:18px;height:160px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#e7f2f4,#d8ecee);display:flex;align-items:center;justify-content:center;color:#0fa3b1;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:10px}
.i-cform{background:#0a2233;border-radius:18px;padding:32px;color:#fff}
/* The .i-cform heading/field/button rules were removed 2026-08-10 with the
   contact page's static demo form. The card is now a frame around the GHL
   embed, which styles its own fields inside the iframe. */

/* gallery grid */
.i-ggrid{columns:3 240px;column-gap:14px;margin-top:0}
.i-gitem{break-inside:avoid;margin-bottom:14px;border-radius:14px;overflow:hidden;position:relative;background:#0a2233}
.i-gitem img{width:100%;display:block;transition:.4s}
.i-gitem:hover img{transform:scale(1.04)}
.i-gitem .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(4,18,29,.85));color:#fff;font-size:13px;font-weight:600}

/* thank you */
.i-ty{text-align:center;padding:16px 0 70px}
.i-ty .chk{width:76px;height:76px;border-radius:50%;background:#e7f2f4;color:#0fa3b1;display:flex;align-items:center;justify-content:center;margin:0 auto 26px}
.i-ty h1{font-size:clamp(26px,3.4vw,36px);color:#0a2233;margin-bottom:14px}
.i-ty-next{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:820px;margin:40px auto 0;text-align:left}
.i-ty-next a{background:#fff;border:1px solid #dde6e9;border-radius:14px;padding:18px;display:block;font-weight:700;font-size:14px;color:#0a2233}
.i-ty-next a span{display:block;font-weight:500;color:#7b91a1;font-size:12.5px;margin-top:4px}

/* blog post layout */
.i-post-layout{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start}
.i-post-main{font-size:16px;line-height:1.75;color:#3c576f}
.i-post-main img{border-radius:16px;margin-bottom:24px}
.i-post-main h2{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;color:#0a2233;margin:26px 0 12px}
.i-post-main h3{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;color:#0a2233;margin:20px 0 10px}
.i-post-main p{margin-bottom:16px}
.i-post-main ul,.i-post-main ol{margin:0 0 16px 22px}
.i-post-main ul{list-style:disc}
.i-post-main ol{list-style:decimal}

/* Table of contents: an index, not prose. Its entries already carry their own
   numbering inside the link text, so no list markers here. */
.i-toc,.i-toc ul,.i-prose .i-toc,.i-prose .i-toc ul,.i-post-main .i-toc,.i-post-main .i-toc ul{list-style:none;margin-left:0}
.i-toc{background:#f4f7f8;border:1px solid #dde6e9;border-radius:16px;padding:22px 26px;margin:0 0 26px}
.i-toc li{margin:0 0 9px}
.i-toc li:last-child{margin-bottom:0}
.i-toc ul{margin:9px 0 4px 18px;padding-left:0;border-left:2px solid #dde6e9}
.i-toc ul li{padding-left:14px;font-size:14.5px}
.i-toc a{color:#33506a;font-weight:600}
.i-toc a:hover{color:#0fa3b1}
.i-toc > li > a{font-weight:700;color:#0a2233}
.i-post-main li{margin-bottom:8px}
.i-post-main li>ul,.i-post-main li>ol{margin-top:8px;margin-bottom:0}
.i-post-main table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:15px}
.i-post-main th,.i-post-main td{padding:10px 14px;border:1px solid #dde6e9;text-align:left}
.i-post-main thead th{background:#eef4f6;color:#0a2233;font-weight:700}
.i-post-main tbody tr:nth-child(even){background:#f8fafb}
.i-post-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.i-aside-card{background:#fff;border:1px solid #dde6e9;border-radius:16px;padding:22px}
.i-aside-card.cta{background:#0a2233;color:#fff}
.i-aside-card.cta h3{font-size:17px;margin-bottom:8px}
.i-aside-card.cta p{font-size:13.5px;color:#a9c2d2;margin-bottom:16px;line-height:1.5}
.i-aside-card h3{font-size:15px;color:#0a2233;margin-bottom:12px}
.i-aside-list li{margin-bottom:10px}
.i-aside-list a{font-size:13.5px;font-weight:600;color:#33506a;display:flex;gap:8px}
.i-aside-list a:hover{color:#0fa3b1}

/* blog post cards w/ thumbnail (archive + related; homepage .a-post stays text-only) */
.a-pcard{background:#fff;border:1px solid #dde6e9;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.a-pcard:hover{border-color:#0fa3b1;transform:translateY(-4px);box-shadow:0 14px 30px rgba(10,34,51,.08)}
.a-pcard .thumb{height:150px;background:#dde6e9;overflow:hidden}
.a-pcard .thumb img{width:100%;height:100%;object-fit:cover}
.a-pcard .bd{padding:20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.a-pcard .cat{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0fa3b1;background:#e7f2f4;padding:5px 10px;border-radius:999px}
.a-pcard h3{font-size:16px;font-weight:700;line-height:1.35;color:#0a2233}
.a-pcard p{font-size:13.5px;line-height:1.55;color:#4b6578}
.a-pcard .rm{margin-top:auto;font-weight:700;font-size:13px;color:#0a2233;display:flex;align-items:center;gap:7px}
.a-pcard:hover .rm{color:#0fa3b1}

/* WP default pagination, styled to match the design system */
/* The links live in .nav-links, not directly in .pagination, and each .page-numbers
   is display:flex (block level). Flexing the wrapper is what keeps them on one row. */
.pagination{margin-top:44px}
.pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pagination .page-numbers{min-width:38px;height:38px;padding:0 12px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:700;font-size:13.5px;border:1px solid #dde6e9;color:#33506a;background:#fff}
.pagination .page-numbers.current{background:#0a2233;color:#fff;border-color:#0a2233}
.pagination .page-numbers.dots{border-color:transparent;background:transparent}
.pagination a.page-numbers:hover{border-color:#0fa3b1;color:#0fa3b1}

/* responsive */
@media(max-width:1020px){
	.a-links,.a-call .a-call-num{display:none}
	/* Hamburger hard right, past the CTA. It sits second in the DOM (right
	   after the logo) so the auto margin used to land on IT, leaving the
	   toggle mid-header with the CTA outboard of it. All four live sister
	   sites put the toggle at the edge; BEPW was the only one that did not.
	   order:1 moves it last visually, and the auto margin moves to .a-call so
	   the CTA and toggle travel right together as a group. DOM order is
	   unchanged, so tab order still reaches the menu button early. */
	.a-nav-toggle{display:flex;order:1;margin-left:0}
	.a-call{margin-left:auto}
	.a-nav-in{gap:14px}
	/* "Free Estimate" was breaking onto two lines and making the header 61px
	   tall. At 15px with 22px side padding it needs 143px, and the space left
	   between the logo and the toggle is only 123px at 320. nowrap alone would
	   just overflow, so the face comes down with it. */
	.a-call .a-btn{white-space:nowrap}
	.a-nav.open .a-links{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:10px 24px 16px;border-bottom:1px solid #dde6e9;box-shadow:0 18px 30px rgba(10,34,51,.12)}
	.a-nav.open .a-links a{padding:11px 0;border-bottom:1px solid #eef3f5}
	.a-nav.open .a-drop{flex-wrap:wrap;justify-content:space-between;border-bottom:1px solid #eef3f5}
	.a-nav.open .a-drop a{border-bottom:0}
	.a-nav.open .a-drop-toggle{padding:11px 4px}
	.a-drop:hover .a-submenu,.a-drop:focus-within .a-submenu{display:none}
	.a-drop.open .a-submenu{display:block}
	.a-submenu{position:static;flex-basis:100%;width:100%;min-width:0;padding-top:0}
	.a-submenu-inner{box-shadow:none;border:0;border-radius:0;padding:0 0 8px 14px;margin:0;background:transparent}
	.a-submenu-inner li a{padding:8px 0;color:#4a6a80}
}
@media(max-width:960px){
	.f6-in{grid-template-columns:1fr;gap:44px;padding:48px 24px 60px}
	.a-gallery,.a-probs,.a-svcs{grid-template-columns:1fr 1fr}
	.a-steps,.a-crew,.a-blog{grid-template-columns:1fr 1fr}
	.a-act{grid-template-columns:1fr;padding:34px}
	.a-foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
	.a-gallery,.a-probs,.a-svcs,.a-revs,.a-steps,.a-crew,.a-blog,.a-foot-grid{grid-template-columns:1fr}
	.a-ig{padding:30px 24px}
	/* One card per row would otherwise stretch the portrait past 600px tall and
	   turn three headshots into three screens of scrolling. Cap the card and
	   centre it; the photo stays uncropped, it just stops being enormous. */
	.a-crew-card{max-width:340px;margin-inline:auto;width:100%}
}

/* inner templates responsive */
@media(max-width:1020px){
	.i-trust li{min-width:50%;flex:none;width:50%}
	.i-trust li:nth-child(2n){border-right:0}
	.i-trust li:nth-child(5){width:100%;border-right:0}
}
@media(max-width:900px){
	.i-bleed{grid-template-columns:1fr}
	.i-why{grid-template-columns:1fr;padding:34px}
	.i-relgrid{grid-template-columns:1fr 1fr}
	.i-contact{grid-template-columns:1fr}
	.i-post-layout{grid-template-columns:1fr}
	.i-post-aside{position:static}
	.i-ggrid{columns:2 200px}
	.i-ty-next{grid-template-columns:1fr}
}
@media(max-width:600px){
	.i-relgrid,.i-stats{grid-template-columns:1fr}
	.i-trust li{width:100%}
	.i-cta,.i-why{padding:30px 22px}
	.i-hero{padding-bottom:40px}
}

/* ============================================================
   GHL (LeadConnector) forms + estimate popup
   ------------------------------------------------------------
   NOTHING here caps a form iframe's height with !important.
   form_embed.js sets an exact inline height once it loads, and an
   !important rule would beat that inline style and cut the form off
   mid address block, hiding both consent checkboxes and Submit.
   The heights below are FALLBACKS for a failed script load only, so
   they deliberately clear the measured natural height at every width
   (measured 2026-08-10: 1212px @1440, 1428 @560, 1450 @480, 1546 @360).
   ============================================================ */
.bepw-ghl{display:block;width:100%;border:0;background:#fff;border-radius:14px;height:1500px}
@media(max-width:900px){.bepw-ghl{height:1600px}}
@media(max-width:600px){.bepw-ghl{height:1750px}}

/* Inline forms scroll inside a fixed-height pane so a ~1,400px form does not
   dominate its section. The SCROLL IS ON THE WRAPPER and the iframe keeps its
   full natural height, which is the whole difference from the sister theme:
   nothing is hidden inside a clipped iframe, and no !important is needed, so
   form_embed.js can still size the iframe correctly.
   The visible border makes the pane read as a window rather than as the end of
   the form, which is how the sister site's cut-off reads as finished. */
.bepw-ghl-scroll{height:660px;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid #d7e3e8;border-radius:14px;background:#fff;scrollbar-width:thin;scrollbar-color:#9ab4c1 #eef4f6}
.bepw-ghl-scroll::-webkit-scrollbar{width:12px}
.bepw-ghl-scroll::-webkit-scrollbar-track{background:#eef4f6;border-radius:0 14px 14px 0}
.bepw-ghl-scroll::-webkit-scrollbar-thumb{background:#9ab4c1;border-radius:8px;border:3px solid #eef4f6}
.bepw-ghl-scroll::-webkit-scrollbar-thumb:hover{background:#7d9dac}
.bepw-ghl-scroll .bepw-ghl{border-radius:0}
/* Touch: a nested scroll pane fights the page scroll, and a single column has
   room for the form anyway, so below the stacking breakpoint it runs full height.
   The two contexts collapse at DIFFERENT widths (.d-form at 1000px, .i-contact at
   900px), so each drops its pane at its own breakpoint. A single shared 1000px
   rule left the contact form running ~1,400px tall inside a still-two-column
   layout between 901px and 1000px. */
@media(max-width:1000px){
	.d-form .bepw-ghl-scroll{height:auto;overflow:visible;border:0}
	.d-form .bepw-ghl-scroll .bepw-ghl{border-radius:14px}
}
@media(max-width:900px){
	.i-cform .bepw-ghl-scroll{height:auto;overflow:visible;border:0}
	.i-cform .bepw-ghl-scroll .bepw-ghl{border-radius:14px}
}

/* Contact page: the navy card is a frame around the form's own white card. */
.i-cform--ghl{padding:16px}

/* --- Estimate popup --- */
.bepw-modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(6,22,34,.72);padding:24px 16px;display:none;align-items:center;justify-content:center}
.bepw-modal-overlay.is-open{display:flex}
.bepw-modal-overlay[hidden]{display:none}
.bepw-modal{position:relative;width:100%;max-width:620px;max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.34);animation:bepw-modal-in .22s ease}
@keyframes bepw-modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* The BODY scrolls, never the iframe, so every field stays reachable. */
.bepw-modal-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:16px}
.bepw-modal-iframe{border-radius:16px}
.bepw-modal-close{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#12283a;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.bepw-modal-close:hover{background:#fff}
.bepw-modal-close:focus-visible{outline:3px solid #1aa7c7;outline-offset:2px}
body.bepw-modal-open{overflow:hidden}
@media(max-width:600px){
	.bepw-modal-overlay{padding:12px 8px}
	.bepw-modal{max-height:92vh}
}
@media(prefers-reduced-motion:reduce){
	.bepw-modal{animation:none}
}

/* ==== mobile: repeating groups become swipe tracks =====================
   The homepage ran 19.4 screens at 390px. The reviews carousel was already
   the LEANEST section on the page (710px), so the fix is to apply the same
   pattern to every other repeating group rather than invent anything: a
   grid that flows in one column-row, snaps, and hides its scrollbar. This
   is the .a-revtrack engine, generalised.

   Opt in by adding .m-car to a wrapper. Nothing above 700px changes.
   Card width is under 100% ON PURPOSE so the next card peeks and the row
   reads as swipeable without a "swipe me" label.
   ==================================================================== */
@media(max-width:700px){
	/* .i-relgrid and .a-cov-grid.cols get this WITHOUT an opt-in class,
	   because they are only ever used for related-card rows and parish
	   cards, on every inner template. That covers 12 call sites with no
	   markup edits. Deliberately NOT applied to the blog archive's .a-blog
	   or the gallery's .i-ggrid: those are listings people scan and page
	   through, and a horizontal track would hide most of the content. */
	.m-car,.i-relgrid,.a-cov-grid.cols{
		display:grid;
		grid-auto-flow:column;
		grid-auto-columns:82%;
		gap:14px;
		overflow-x:auto;
		/* contain stops a horizontal swipe from dragging the whole page.
		   It does NOT affect vertical scrolling, so the page still scrolls
		   normally through the section. */
		overscroll-behavior-x:contain;
		scroll-snap-type:x mandatory;
		scroll-behavior:smooth;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		/* Bleed to the screen edge so the peeking card is not clipped by
		   .wrap's 24px padding, then pad the ends back so the first card
		   still lines up with the heading above it. */
		margin-inline:-24px;
		padding:2px 24px 10px;
		/* The track is itself a grid item in .d-row. A grid item defaults to
		   min-width:auto, which is min-content, so the longest service label
		   ("Dumpsters & Floor Mats") pushed the whole track 29px past the
		   viewport at 320px. Only bites at the narrowest widths, which is
		   exactly why it is easy to miss. */
		min-width:0;
	}
	/* A 1fr grid track is minmax(auto,1fr), and that auto floor is the item's
	   min-content. Several of these rows wrap their content in an unclassed
	   div, so min-width:0 on .m-car alone never reached the actual grid item
	   and the whole row sat 29px wider than its column at 320px. */
	.d-row>*,.d-covx>*,.d-form>*,.p-head>*{min-width:0}
	.m-car::-webkit-scrollbar,
	.i-relgrid::-webkit-scrollbar,
	.a-cov-grid.cols::-webkit-scrollbar{display:none}
	.m-car>*,.i-relgrid>*,.a-cov-grid.cols>*{scroll-snap-align:start;min-width:0}
	.m-car:focus-visible,
	.i-relgrid:focus-visible,
	.a-cov-grid.cols:focus-visible{outline:2px solid #0fa3b1;outline-offset:4px}
	/* both carry their own 1fr templates from the 770/778 blocks */
	.i-relgrid,.a-cov-grid.cols{grid-template-columns:none}

	/* These wrappers all carry a grid-template-columns of their own from the
	   960px and 600px blocks. An explicit template would size the FIRST card
	   and let the rest auto-flow, giving one odd-width card. Compound
	   selectors (0,2,0) so this cannot lose to those rules. */
	.d-num.m-car,.a-svcs.m-car,.d-gal.m-car,
	.d-covx-r.m-car,.a-crew.m-car,.a-blog.m-car{grid-template-columns:none}

	/* climate cards: the stacked rule set becomes standalone cards */
	.d-num.m-car{border-top:0;margin-top:26px}
	.d-num.m-car .r{
		border-bottom:0;background:#fff;border:1px solid #dde6e9;border-radius:14px;
		padding:20px 18px;grid-template-columns:1fr;gap:8px;height:100%;
	}
	.a-sec.dark .d-num.m-car .r{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}

	/* services: 11 short links waste a full-width card each, so run TWO rows
	   and swipe the pairs */
	.a-svcs.m-car{grid-template-rows:repeat(2,auto);grid-auto-columns:72%;gap:10px 12px}

	/* gallery: drop the 12-column spans, uniform card height.
	   !important is required, not lazy: the 1000px block declares
	   .d-gal figure{grid-column:span 12 !important}, and !important beats
	   any specificity. Without this every card sized to 12 columns and the
	   three photos became a 10,197px swipe. */
	.d-gal.m-car{margin-top:26px}
	.d-gal.m-car figure{grid-column:auto !important}
	.d-gal.m-car img,
	.d-gal.m-car figure:nth-child(3) img{height:240px}

	/* coverage: each parish becomes a card */
	.d-covx-r.m-car{border-top:0;margin-top:22px}
	/* align-items:start, NOT stretch. Orleans Parish lists one city and
	   Jefferson lists several, so a stretched card left a big dead gap under
	   the single pill. Cards now hug their own content and top-align. */
	.d-covx-r.m-car{align-items:start}
	.d-covx-r.m-car .d-covrow{
		background:#fff;border:1px solid #dde6e9;border-radius:14px;
		padding:18px;height:auto;align-content:start;border-bottom:1px solid #dde6e9;
	}

	/* crew: the review tile is grid-column:1/-1 from the 1173px ladder, which
	   would swallow the whole track */
	.a-crew.four.m-car{grid-template-columns:none}
	.a-crew.four.m-car .d-quote{grid-column:auto;text-align:left;align-items:flex-start}
	.a-crew.four.m-car .d-quote blockquote{max-width:none}
	/* the 600px cap centres a 340px card, which fights a full-width track */
	.m-car .a-crew-card{max-width:none;margin-inline:0}

	/* blog cards keep their own styling, they just ride the track */
	.a-blog.m-car{margin-top:26px}

	/* ---- trust strip: horizontal, not a 240px stacked list -------------
	   The 600px block set .i-trust li{width:100%}, so five signals became
	   five full-width rows. Five items need ~550px and the screen has 375,
	   so "horizontal" here means a scroll strip, which is exactly what
	   bigeasypatios does with its badge bar. */
	.i-trust ul{
		flex-wrap:nowrap;
		overflow-x:auto;
		scroll-snap-type:x proximity;
		overscroll-behavior-x:contain;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.i-trust ul::-webkit-scrollbar{display:none}
	.i-trust li{
		width:auto;
		min-width:0;
		flex:0 0 auto;
		white-space:nowrap;
		scroll-snap-align:start;
		padding:13px 16px;
		font-size:12.5px;
	}
	.i-trust li:nth-child(2n){border-right:1px solid #eef3f5}
	.i-trust li:nth-child(5){width:auto}
	.i-trust li:last-child{border-right:0}

	/* ---- the two CTAs sit on one line ---------------------------------
	   183px + 189px + 11px gap = 383 in a 327px row, so they wrapped. Equal
	   flex tracks plus a smaller face fits both. Stays stacked under 360px,
	   where "Call (504) 688-3995" genuinely cannot fit in half a screen. */
	.d-side-cta{flex-wrap:nowrap;gap:9px}
	.d-side-cta .a-btn{
		flex:1 1 0;
		min-width:0;
		text-align:center;
		font-size:13.5px;
		padding:12px 6px;
	}

	/* ---- proof section: its two CTAs share a line too -----------------
	   Same wrap-onto-two-lines problem as .d-side-cta, same fix, so the two
	   button pairs on the page read as one pattern instead of two. */
	.p-cta .row{flex-wrap:nowrap;gap:9px;width:100%}
	.p-cta .row .a-btn{
		flex:1 1 0;
		min-width:0;
		text-align:center;
		font-size:13.5px;
		padding:12px 6px;
		white-space:nowrap;
	}

	/* ---- services: CTA pair sits BELOW the service cards --------------
	   The buttons live inside .d-side (kicker, h2, tabs, CTA), so `order`
	   alone cannot move them out of that parent. display:contents promotes
	   .d-side's children to be grid items of the row itself, which lets the
	   CTA take order:1 and land after the cards. Scoped to .d-svc-row so the
	   other three .d-row sections are untouched.

	   gap:0 because the row's 28px gap would otherwise appear between every
	   promoted child (kicker, h2, tabs). Their own margins already space
	   them, and those still apply: display:contents removes the BOX, not the
	   element, so `.d-side h2` and friends keep matching. */
	.d-svc-row{gap:0}
	.d-svc-row .d-side{display:contents}
	.d-svc-row .d-side-cta{order:1;margin-top:26px}
	/* Promoting .d-side made .a-tabs a grid ITEM, so its min-content now sets
	   the track width instead of being quietly clipped inside .d-side. Two
	   nowrap tabs measure 276 against a 257 column, and that 19px widened the
	   row, then .wrap, then every -24px bleed track, which read as a page-wide
	   overflow at 320px. Equal shrinkable tracks instead. */
	.d-svc-row .a-tabs{min-width:0}
	.d-svc-row .a-tab{flex:1 1 0;min-width:0;text-align:center}

	/* ---- coverage cards: equal height, no bare gap --------------------
	   align-items:start let short cards hug their content, which moved the
	   dead space OUT of the card and onto the section background: 146px of
	   nothing under Orleans Parish, because the track still reserves the
	   tallest card (St. Tammany, 5 cities, 257px). Whitespace inside a
	   bordered card reads as a card. Bare background reads as broken. */
	.d-covx-r.m-car{align-items:stretch}
	.d-covx-r.m-car .d-covrow{height:auto;align-content:start}
	.d-covx-r.m-car .a-cov-links{flex:1;align-content:flex-start}
	/* tighter pills shrink the tallest card, so every card gets shorter */
	.d-covx-r.m-car .a-cov-links a{padding:7px 11px;font-size:12.5px}

	/* The estimate form is the single tallest thing on the page: the GHL
	   iframe runs its full natural ~1,500px and the section came to 2,313px,
	   14% of the entire page. The 1000px block un-scrolls the pane for
	   mobile; below 700px we put it back at 520px.

	   This is NOT the sister-site mistake. bigeasypatios caps the IFRAME, so
	   the cut lands mid-form and hides the Message field, both consent boxes
	   and Submit. Here the scroll is on the WRAPPER and the iframe keeps its
	   full height inside, so every field stays reachable, just in a window.
	   Still no !important anywhere, so form_embed.js can size the iframe. */
	.d-form .bepw-ghl-scroll{
		height:520px;
		overflow-y:auto;
		border:1px solid #d7e3e8;
		border-radius:14px;
	}
	.d-form .bepw-ghl-scroll .bepw-ghl{border-radius:0}

	/* Sections still carried the full desktop 84px top AND bottom on a 390px
	   screen: 1,848px across 11 sections, 16% of the whole page, spent on
	   whitespace. 52px still reads as a section break at this width. */
	.a-sec{padding:52px 0}

	/* The footer's 4 columns stack into a single 1,014px column. Two columns
	   halves it and the link lists are short enough to sit side by side. */
	.a-foot-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
	.a-foot-grid>*:first-child{grid-column:1/-1}
}

/* Below 480 the header CTA has to shrink to hold one line: 13.5px text is
   89px, plus 24px padding is 113, inside the 123px budget at 320. Above 480
   there is room for the full 15px face, so it keeps it. */
@media(max-width:480px){
	.a-call .a-btn{font-size:13.5px;padding:11px 12px}
}

/* The pair was forcing .d-side 29px past its column at 320px. They now share
   one line at every width, but at 320 the 13.5px face still overflowed its
   own box by 8px ("Call (504) 688-3995" needs 135 in a 125 box), and
   white-space:nowrap means overflow, not wrap. One step smaller clears it. */
@media(max-width:360px){
	.d-side,.d-side-cta{min-width:0}
	.d-side-cta .a-btn,.p-cta .row .a-btn{font-size:12px;padding:12px 4px}
	/* "Residential" needs 129px and half a 257px row is 123, so the tabs need
	   one step down too or the label clips inside its own button. */
	.d-svc-row .a-tab{font-size:12.5px;padding-inline:6px}
}