/* Precision Pools & Spas - draft redesign. One stylesheet, mobile-first. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin-var.woff2) format("woff2")}
:root{
  --ink:#0f1c2e;--text:#334155;--muted:#64748b;--line:#e6ebf1;--soft:#f5f8fb;--white:#fff;
  --accent:#0284c7;--accent-ink:#0369a1;--accent-soft:#e8f4fb;
  --radius:14px;--radius-sm:10px;--shadow:0 1px 2px rgba(15,28,46,.04),0 8px 30px rgba(15,28,46,.07);
  --wrap:1180px;--gap:clamp(1rem,3vw,2rem);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-underline-offset:3px}
a:hover{color:var(--accent)}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;letter-spacing:-.02em;margin:0 0 .6em;font-weight:750}
h1{font-size:clamp(2rem,5.2vw,3.35rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{padding-left:1.2em}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{width:min(100% - 2*var(--gap),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.9rem}
.lead{font-size:clamp(1.08rem,1.6vw,1.22rem);color:var(--text);max-width:60ch}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-weight:650;font-size:1rem;line-height:1;padding:.95rem 1.4rem;border-radius:999px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink);color:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn-block{width:100%}

/* Header */
.topbar{background:var(--ink);color:#cbd5e1;font-size:.85rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar .hide-sm{display:none}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.logo img{width:200px;height:auto}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:20px;height:2px;background:var(--ink);position:relative;content:"";transition:transform .2s}
.nav-toggle span::before{position:absolute;top:-6px}.nav-toggle span::after{position:absolute;top:6px}
.site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:1rem var(--gap) 1.5rem}
.site-nav.open{display:block}
.site-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.site-nav a{display:block;padding:.65rem .25rem;color:var(--ink);text-decoration:none;font-weight:550}
.site-nav a[aria-current="page"]{color:var(--accent-ink)}
.site-nav .btn{margin-top:.5rem;color:#fff}
.header-call{display:none}

/* Sections */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-soft{background:var(--soft)}
.section-head{max-width:720px;margin-bottom:2.5rem}
.section-head.center{text-align:center;margin-inline:auto}
.grid{display:grid;gap:var(--gap)}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
.rounded{border-radius:var(--radius);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}

/* Hero */
.hero{position:relative;padding:clamp(2rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem);background:linear-gradient(180deg,#f2f8fc 0%,#fff 100%);overflow:hidden}
.hero-grid{display:grid;gap:2rem;align-items:start}
.hero-copy h1 span{color:var(--accent-ink)}
.hero-points{list-style:none;padding:0;margin:1.5rem 0 1.75rem;display:grid;gap:.6rem}
.hero-points li{display:flex;gap:.65rem;align-items:flex-start;color:var(--ink);font-weight:550}
.tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:inline-grid;place-items:center;font-size:.8rem;font-weight:800;margin-top:.15rem}
.hero-media{margin-top:1.75rem;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.trust-row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.25rem;font-size:.9rem;color:var(--muted)}
.trust-row strong{color:var(--ink)}

/* Form */
.quote-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:clamp(1.25rem,3vw,2rem)}
.quote-card h2{font-size:1.45rem;margin-bottom:.25rem}
.quote-card .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.25rem}
.form-grid{display:grid;gap:.9rem}
.field label{display:block;font-size:.85rem;font-weight:650;color:var(--ink);margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.8rem .9rem;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:110px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(2,132,199,.15)}
.form-note{font-size:.8rem;color:var(--muted);margin:.75rem 0 0;text-align:center}
.hp{position:absolute;left:-9999px}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card-body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.card-body p{color:var(--text);font-size:.98rem}
.card-link{margin-top:auto;font-weight:650;text-decoration:none}
.card-link::after{content:" →"}
.icon-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.icon-card .num{font-size:.8rem;font-weight:750;color:var(--accent-ink);letter-spacing:.1em}

/* Stats / badges */
.badges{display:flex;flex-wrap:wrap;gap:.75rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:600;color:var(--ink);background:#fff}

/* Steps */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1rem;counter-reset:s}
.steps li{position:relative;padding:1.25rem 1.25rem 1.25rem 4rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:1.2rem;top:1.25rem;font-weight:800;color:var(--accent-ink)}
.steps h3{font-size:1.05rem;margin-bottom:.3rem}
.steps p{margin:0;font-size:.97rem}

/* Reviews */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;margin:0;display:flex;flex-direction:column}
.review blockquote{margin:0 0 1rem;color:var(--ink);font-size:1.02rem}
.review figcaption{margin-top:auto;font-size:.9rem;color:var(--muted)}
.review figcaption strong{color:var(--ink)}
.stars{color:#f5a524;letter-spacing:2px;font-size:.95rem;margin-bottom:.6rem}

/* FAQ */
.faq{display:grid;gap:.75rem;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:0 1.25rem}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;font-weight:650;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--accent-ink);font-weight:500}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 0 1.1rem}
.faq h3{display:inline;font-size:1.02rem;margin:0}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:520px}
th,td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
th{background:var(--soft);color:var(--ink);font-weight:650}
tr:last-child td{border-bottom:0}
caption{text-align:left;padding:.8rem 1rem;font-weight:650;color:var(--ink)}

/* Gallery */
.gallery{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
.gallery figure{margin:0}
.gallery img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:var(--radius-sm)}
.gallery figcaption{font-size:.82rem;color:var(--muted);padding:.4rem .1rem 0}

/* Page header */
.page-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem);background:linear-gradient(180deg,#f2f8fc,#fff)}
.breadcrumbs ol{list-style:none;padding:0;margin:0 0 1.25rem;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.85rem;color:var(--muted)}
.breadcrumbs li+li::before{content:"/";margin-right:.4rem;color:#cbd5e1}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.prose{max-width:760px}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.checklist{list-style:none;padding:0;display:grid;gap:.55rem}
.checklist li{padding-left:1.9rem;position:relative}
.checklist li::before{content:"✓";position:absolute;left:0;top:.05rem;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:.75rem;font-weight:800;display:grid;place-items:center}
.aside-card{background:var(--soft);border-radius:var(--radius);padding:1.5rem}
.placeholder{background:#fff7d6;border:1px dashed #e0b400;padding:.05rem .35rem;border-radius:4px;font-size:.92em}

/* CTA */
.cta{background:var(--ink);color:#cbd5e1;border-radius:22px;padding:clamp(2rem,5vw,3.5rem);display:grid;gap:1.5rem;align-items:center}
.cta h2{color:#fff;margin-bottom:.4rem}
.cta p{margin:0}
.cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cta-actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* Footer */
.site-footer{background:#0b1522;color:#94a3b8;padding:4rem 0 2rem;font-size:.95rem;margin-top:0}
.site-footer h2{color:#fff;font-size:1rem;letter-spacing:0;margin-bottom:1rem}
.site-footer a{color:#e2e8f0;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.footer-grid{display:grid;gap:2rem}
.footer-logos{display:flex;gap:1.25rem;align-items:center;margin-top:1.25rem;flex-wrap:wrap}
.footer-logos img{height:34px;width:auto;opacity:.85}
.footer-bottom{border-top:1px solid #1e2a3a;margin-top:2.5rem;padding-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.85rem}
address{font-style:normal}

/* Mobile sticky call bar */
.callbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.6rem;background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
.callbar .btn{padding:.85rem 1rem}
body{padding-bottom:72px}

@media (min-width:600px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .form-grid.two{grid-template-columns:1fr 1fr}
  .form-grid .full{grid-column:1/-1}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .topbar .hide-sm{display:inline}
}
@media (min-width:960px){
  body{padding-bottom:0}
  .callbar{display:none}
  .nav-toggle{display:none}
  .site-nav{display:block;position:static;padding:0;border:0;background:none}
  .site-nav ul{display:flex;align-items:center;gap:.25rem}
  .site-nav a{padding:.5rem .7rem;font-size:.95rem}
  .site-nav .btn{margin:0 0 0 .5rem;padding:.75rem 1.15rem}
  .header-call{display:inline-flex;font-weight:700;color:var(--ink);text-decoration:none;margin-left:.5rem;white-space:nowrap}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1fr 1fr}
  .split.wide-left{grid-template-columns:1.25fr 1fr}
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:3.5rem}
  .hero-copy{padding-top:1.5rem}
  .steps{grid-template-columns:repeat(2,1fr)}
  .cta{grid-template-columns:1.5fr auto}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .layout-aside{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:4rem;align-items:start}
  .layout-aside .sticky{position:sticky;top:96px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Stretched card links (whole card clickable, single link for a11y) */
.card{position:relative}
.card h2 a,.card h3 a{color:inherit;text-decoration:none}
.stretched::after{content:"";position:absolute;inset:0;z-index:1}
.card h2{font-size:1.3rem}
/* Mobile: keep the quote form high in the hero */
.hero-media{display:none}
@media (min-width:960px){.hero-media{display:block}}
@media (max-width:599px){.hero-points{margin:1.1rem 0 1.25rem}.hero .eyebrow{font-size:.72rem}.trust-row{margin:0 0 1.5rem}}
td,th{white-space:nowrap}
.split .table-wrap table{font-size:.88rem}
.split .table-wrap th,.split .table-wrap td{padding:.55rem .75rem}
/* AA contrast for white-on-blue buttons */
.btn-primary{background:var(--accent-ink)}
.btn-primary:hover{background:#075985}
/* QLD build additions */
.logo img{width:auto;height:58px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo-text{display:none;font-weight:750;color:var(--ink);line-height:1.1;font-size:1rem;letter-spacing:-.01em}
.logo-text small{display:block;font-weight:550;color:var(--muted);font-size:.75rem;letter-spacing:.02em}
@media (min-width:1100px){.logo-text{display:block}}
.site-nav a{white-space:nowrap}
.post-meta{color:var(--muted);font-size:.9rem;margin-bottom:1.5rem}
.stage-list{counter-reset:s}
.contact-grid{display:grid;gap:1rem}
@media (min-width:600px){.contact-grid{grid-template-columns:1fr 1fr}}
.map-embed{border:0;width:100%;height:320px;border-radius:var(--radius)}
@media (max-width:599px){.topbar{font-size:.78rem}.topbar .wrap{gap:.5rem}.topbar .wrap>span{white-space:nowrap}.topbar .wrap>span:first-child{overflow:hidden;text-overflow:ellipsis}}
.form-note a,.content p a,main p a{text-decoration:underline;text-underline-offset:2px}
.site-footer address a{text-decoration:underline;text-underline-offset:2px}

/* ---------- Home hero: full-bleed bright photo, light frosted text panel ---------- */
.hero--photo{background:var(--soft);padding:0 0 2.5rem;isolation:isolate}
.hero--photo .hero-copy{position:relative;padding:15.5rem 0 1.25rem}
.hero-bg{position:absolute;top:0;height:18.5rem;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;background:#7cc4ea;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:28% 50%}
.hero-bg::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(15,28,46,.18),rgba(15,28,46,0))}
.hero-panel{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:1.5rem 1.25rem;box-shadow:0 10px 40px rgba(15,28,46,.12)}
.hero-panel .hero-points{margin:1.1rem 0 1.1rem}
.hero-panel .trust-row{margin:0;color:var(--text)}
.hero-panel h1{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.hero--photo .quote-card{position:relative;margin-top:.5rem;box-shadow:0 10px 40px rgba(15,28,46,.12)}
@media (min-width:960px){
  .hero--photo{position:relative;min-height:max(640px,86vh);display:flex;align-items:center;padding:clamp(3rem,6vh,5rem) 0;background:#7cc4ea}
  .hero--photo .hero-grid{align-items:center;width:min(100% - 2*var(--gap),var(--wrap))}
  .hero--photo .hero-copy{position:static;padding:0}
  .hero--photo .hero-bg{left:0;right:0;bottom:0;height:auto}
  .hero--photo .hero-bg img{object-position:center 55%}
  .hero--photo .hero-bg::after{inset:0;height:auto;background:radial-gradient(ellipse 55% 75% at 22% 50%,rgba(15,28,46,.22),rgba(15,28,46,0) 70%)}
  .hero-panel{padding:2.25rem 2.25rem 2rem;max-width:540px;background:rgba(255,255,255,.78)}
  .hero--photo .quote-card{margin-top:0;border:0;box-shadow:0 24px 60px rgba(15,28,46,.22)}
}

/* ---------- WordPress: Contact Form 7 + core output ---------- */
.wpcf7 form{margin:0}
.wpcf7-form-control-wrap{display:block}
.wpcf7 .screen-reader-response,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.wpcf7-not-valid{border-color:#b91c1c!important}
.wpcf7-not-valid-tip{display:block;color:#b91c1c;font-size:.8rem;margin-top:.3rem}
.wpcf7-response-output{margin:1rem 0 0;padding:.75rem 1rem;border-radius:var(--radius-sm);font-size:.9rem;border:1.5px solid var(--line)}
.wpcf7-response-output:empty{display:none}
.wpcf7 form.sent .wpcf7-response-output{border-color:#15803d;color:#166534;background:#f0fdf4}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.aborted .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{border-color:#b45309;color:#92400e;background:#fffbeb}
.wpcf7-spinner{display:none}
.wpcf7 form.submitting .wpcf7-spinner{display:inline-block;width:18px;height:18px;margin:.5rem auto 0;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:ppspin .8s linear infinite}
@keyframes ppspin{to{transform:rotate(360deg)}}
.wpcf7 input[type=submit],.wpcf7 button[type=submit]{cursor:pointer;border:0;font:inherit}
.site-nav .menu-item{list-style:none}
.alignleft{float:left;margin:0 1.5rem 1rem 0}.alignright{float:right;margin:0 0 1rem 1.5rem}.aligncenter{display:block;margin-inline:auto}
.wp-block-heading{}
.wpcf7 .hidden-fields-container{display:none;border:0;margin:0;padding:0}
.wpcf7 .field textarea{min-height:110px;height:auto}

/* Home mobile: immediately usable concise quote form directly under the hero heading. */
@media(max-width:959px){
 body.home .hero--photo{padding:7.6rem 0 1rem}
 body.home .hero--photo .hero-bg{height:11rem}
 body.home .hero--photo .hero-copy{padding:0}
 body.home .hero--photo .hero-copy .hero-panel{position:absolute;left:0;right:0;top:.5rem;z-index:2;padding:.7rem 1rem .6rem;border-radius:12px;background:rgba(255,255,255,.92)}
 body.home .hero--photo .hero-copy .eyebrow,body.home .hero--photo .hero-copy .hero-points,body.home .hero--photo .hero-copy .trust-row{display:none}
 body.home .hero--photo .hero-copy h1{font-size:1.75rem;margin-bottom:.4rem}
 body.home .hero--photo .hero-copy .lead{font-size:.92rem;line-height:1.35;margin:0}
 body.home .hero--photo>.hero-grid{display:flex;flex-direction:column;gap:0}
 body.home .hero--photo>.hero-grid>#quote{order:-1;width:100%;padding:10.25rem 1rem 1rem;margin:0;background:rgba(255,255,255,.94);box-shadow:0 10px 40px rgba(15,28,46,.12)}
 body.home .hero--photo #quote>h2{font-size:1.35rem;margin-bottom:.3rem}
 body.home .hero--photo #quote>.sub{font-size:.88rem;margin-bottom:.65rem}
 body.home .hero--photo .form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
 body.home .hero--photo .field.full:has(#pp-service),body.home .hero--photo .field.full:has(#pp-message){display:none}
 body.home .hero--photo .quote-card input:not([type='hidden']),body.home .hero--photo .quote-card select{min-height:44px}
}

/* Desktop Home quote card stays fully in the photo frame; mobile rules are unchanged. */
@media (min-width:960px) and (max-height:950px){
 body.home .hero--photo{padding:1.3rem 0}
 body.home .hero-bg .hero-panel{padding:1.75rem 1.75rem 1.5rem}
 body.home .hero--photo #quote .field textarea{min-height:64px;height:64px}
 body.home .hero--photo #quote{padding:1.25rem 1.75rem}
}

/* NOV9 mobile quote-first + IG tile alignment aid */
@media(max-width:959px){
  /* Quote form is the first substantive content under the compact header. */
  body.home .hero--photo{
    padding:0 0 1rem;
    min-height:0;
    background:#fff;
  }
  body.home .hero--photo>.hero-grid{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  body.home .hero--photo>.hero-grid>#quote{
    order:-2;
    width:100%;
    max-width:none;
    margin:0;
    padding:1rem 1rem 1.15rem;
    background:#fff;
    box-shadow:none;
    border:0;
    border-bottom:1px solid var(--line);
    border-radius:0;
  }
  body.home .hero--photo>.hero-grid>.hero-copy{
    order:-1;
    position:relative;
    padding:0;
  }
  /* Photo band sits under the form, not above it. */
  body.home .hero--photo .hero-bg{
    position:relative;
    left:auto;right:auto;top:auto;
    height:12.5rem;
    z-index:0;
  }
  body.home .hero--photo .hero-copy .hero-panel{
    position:static;
    margin:0;
    padding:1rem 1rem 1.1rem;
    border-radius:0;
    background:#fff;
    box-shadow:none;
  }
  body.home .hero--photo .hero-copy .eyebrow,
  body.home .hero--photo .hero-copy .hero-points,
  body.home .hero--photo .hero-copy .trust-row{display:none}
  body.home .hero--photo .hero-copy h1{font-size:1.55rem;margin:0 0 .35rem}
  body.home .hero--photo .hero-copy .lead{font-size:.92rem;line-height:1.4;margin:0}
  body.home .hero--photo #quote>h2{font-size:1.35rem;margin-bottom:.25rem}
  body.home .hero--photo #quote>.sub{font-size:.88rem;margin-bottom:.7rem}
}

/* NOV9 mobile submit label visible */
@media(max-width:959px){
  /* Chrome clips input[type=submit] value text when display:inline-flex. Keep exact label. */
  body.home .hero--photo #quote input.wpcf7-submit.btn{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    white-space:normal;
    overflow:visible;
    text-align:center;
    line-height:1.25;
    padding:.9rem 1rem;
  }
}

/* NOV9b mobile home quote polish */
@media(max-width:959px){
  /* Keep form first; tighten card and remove awkward gap before photo. */
  body.home .hero--photo{
    padding:0;
    min-height:0;
    background:#fff;
  }
  body.home .hero--photo>.hero-grid{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  body.home .hero--photo>.hero-grid>#quote{
    order:-2;
    width:100%;
    max-width:none;
    margin:0;
    padding:.85rem 1rem 1rem;
    background:#fff;
    box-shadow:none;
    border:0;
    border-bottom:0;
    border-radius:0;
  }
  body.home .hero--photo #quote>h2{
    font-size:1.28rem;
    line-height:1.25;
    margin:0 0 .2rem;
  }
  body.home .hero--photo #quote>.sub{
    font-size:.84rem;
    line-height:1.35;
    margin:0 0 .7rem;
  }
  /* Readable single-column fields on phones; desktop unchanged (>=960). */
  body.home .hero--photo #quote .form-grid.two{
    grid-template-columns:1fr;
    gap:.55rem;
  }
  body.home .hero--photo #quote .field label{
    font-size:.78rem;
    margin-bottom:.22rem;
  }
  body.home .hero--photo #quote .field input,
  body.home .hero--photo #quote .field select{
    min-height:44px;
    font-size:16px; /* avoid iOS zoom */
    padding:.65rem .75rem;
  }
  body.home .hero--photo #quote .form-note{
    margin:.55rem 0 0;
    font-size:.75rem;
    line-height:1.35;
  }
  /* Full CTA on one line without clipping. */
  body.home .hero--photo #quote input.wpcf7-submit.btn{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    white-space:nowrap;
    overflow:visible;
    text-align:center;
    font-size:.9rem;
    line-height:1.2;
    padding:.82rem .65rem;
    margin-top:.35rem;
  }
  body.home .hero--photo>.hero-grid>.hero-copy{
    order:-1;
    position:relative;
    padding:0;
    margin:0;
  }
  /* Flush photo under the form. */
  body.home .hero--photo .hero-bg{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    height:11.25rem;
    margin:0;
    z-index:0;
  }
  body.home .hero--photo .hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 45%;
    display:block;
  }
  body.home .hero--photo .hero-copy .hero-panel{
    position:static;
    margin:0;
    padding:.85rem 1rem 1rem;
    border-radius:0;
    background:#fff;
    box-shadow:none;
  }
  body.home .hero--photo .hero-copy .eyebrow,
  body.home .hero--photo .hero-copy .hero-points,
  body.home .hero--photo .hero-copy .trust-row{display:none}
  body.home .hero--photo .hero-copy h1{
    font-size:1.35rem;
    line-height:1.25;
    margin:0 0 .3rem;
  }
  body.home .hero--photo .hero-copy .lead{
    font-size:.88rem;
    line-height:1.4;
    margin:0;
  }
}
@media(max-width:379px){
  body.home .hero--photo #quote{padding:.75rem .85rem .9rem}
  body.home .hero--photo #quote input.wpcf7-submit.btn{
    font-size:.86rem;
    padding:.8rem .55rem;
    letter-spacing:-.01em;
  }
}


/* === editable-seo-restore visual-qa 2026-11-10 ===
   After Gutenberg conversion, WP wraps group children in
   .wp-block-group__inner-container, so pre-conversion grid/flex
   selectors (direct children, #quote order, gallery columns)
   stopped matching. display:contents restores the old tree for layout.
   Do not remove: it keeps page content in native blocks. */
.wp-block-group > .wp-block-group__inner-container {
  display: contents;
}

/* Gallery: 2-col mobile / 4-col desktop square tiles */
.gallery,
.wp-block-group.gallery,
.gallery > .wp-block-group__inner-container {
  display: grid !important;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (min-width: 600px) {
  .gallery,
  .wp-block-group.gallery,
  .gallery > .wp-block-group__inner-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 960px) {
  .gallery,
  .wp-block-group.gallery,
  .gallery > .wp-block-group__inner-container {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
.gallery figure,
.gallery .wp-block-image,
.wp-block-group.gallery figure,
.wp-block-group.gallery .wp-block-image {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}
.gallery img,
.wp-block-group.gallery img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: var(--radius-sm);
  display: block;
}

/* Home hero: form first on mobile; split with form in the second column on desktop */
@media (max-width: 959px) {
  body.home .hero--photo .hero-grid,
  body.home .hero--photo .hero-grid > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  body.home .hero--photo .hero-grid > #quote,
  body.home .hero--photo .hero-grid #quote {
    order: -2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1rem 1rem 1.15rem !important;
    background: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
  }
  body.home .hero--photo .hero-grid > .hero-copy,
  body.home .hero--photo .hero-grid .hero-copy {
    order: -1 !important;
    position: relative;
    padding: 0 !important;
  }
  body.home .hero--photo .hero-bg {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    height: 12.5rem !important;
    z-index: 0;
  }
}
@media (min-width: 960px) {
  body.home .hero--photo .hero-grid,
  body.home .hero--photo .hero-grid > .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: 1.1fr .9fr !important;
    gap: 3.5rem !important;
    align-items: center !important;
  }
  body.home .hero--photo .hero-grid #quote {
    order: 0 !important;
    width: auto !important;
  }
}

/* Hero photo fills the band even when wrapped in figure.wp-block-image */
.hero-bg .wp-block-image,
.hero-bg figure {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  inset: 0;
}
.hero-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
@media (max-width: 959px) {
  body.home .hero--photo .hero-bg .wp-block-image,
  body.home .hero--photo .hero-bg figure {
    position: absolute;
    inset: 0;
  }
}

/* Aside / split layouts: image column constrained, no empty second track */
.layout-aside,
.wrap.layout-aside,
.wp-block-group.layout-aside,
.split,
.wrap.split,
.wp-block-group.split {
  display: grid !important;
}
.media,
.media .wp-block-image,
.media figure {
  margin: 0 0 2rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
}
.media img,
.media .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 32rem;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius);
}
@media (min-width: 960px) {
  .layout-aside,
  .wrap.layout-aside,
  .wp-block-group.layout-aside,
  .layout-aside > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 4rem !important;
    align-items: start !important;
  }
  .split,
  .wrap.split,
  .wp-block-group.split,
  .split > .wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(2rem, 5vw, 4rem) !important;
    align-items: center !important;
  }
  .layout-aside .media img,
  .split .media img {
    max-height: 28rem;
  }
}

/* Instagram mockup: 4-up desktop, horizontal square strip on mobile.
   Tiles may sit in one paragraph after conversion. */
#pp-instagram .pp-ig-grid,
#pp-instagram .pp-ig-grid > .wp-block-group__inner-container,
#pp-instagram .pp-ig-grid > p,
#pp-instagram .pp-ig-grid > .wp-block-paragraph {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .75rem !important;
}
#pp-instagram .pp-ig-tile {
  display: block !important;
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
#pp-instagram .pp-ig-tile figure,
#pp-instagram .pp-ig-tile .wp-block-image {
  margin: 0 !important;
  width: 100%;
  height: 100%;
  position: relative;
}
#pp-instagram .pp-ig-tile img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
@media (max-width: 767px) {
  #pp-instagram .pp-ig-grid,
  #pp-instagram .pp-ig-grid > .wp-block-group__inner-container,
  #pp-instagram .pp-ig-grid > p,
  #pp-instagram .pp-ig-grid > .wp-block-paragraph {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    gap: .75rem !important;
    padding: .2rem 0 .6rem;
    grid-template-columns: none !important;
  }
  #pp-instagram .pp-ig-tile {
    flex: 0 0 calc(70vw - 2rem);
    max-width: 18rem;
    scroll-snap-align: start;
  }
}

/* Mobile top bar: do not clip hours */
@media (max-width: 767px) {
  .topbar { font-size: .75rem; }
  .topbar .wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .2rem .75rem !important;
    align-items: center;
  }
  .topbar .wrap > span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    min-width: 0;
  }
}

/* === editable-seo-restore visual-qa 2026-11-10b ===
   1) Instagram tiles sit in one <p> inside .wp-block-group__inner-container,
      so child-only grid selectors still had a single item. Grid/flex the paragraph.
   2) page.php still injects .pp-band-bg + #pp-inner-photo-banner, but
      str_replace("page-hero") no longer adds .pp-photo-band on block markup,
      so the photo sat in normal flow (oversized portraits / left-aligned empty band).
      Mirror those rules for .page-hero:has(.pp-band-bg). */

#pp-instagram .pp-ig-grid p,
#pp-instagram .pp-ig-grid .wp-block-paragraph,
#pp-instagram .pp-ig-grid .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .75rem !important;
}
@media (max-width: 767px) {
  #pp-instagram .pp-ig-grid p,
  #pp-instagram .pp-ig-grid .wp-block-paragraph,
  #pp-instagram .pp-ig-grid .wp-block-group__inner-container {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    gap: .75rem !important;
    padding: .2rem 0 .6rem;
    grid-template-columns: none !important;
  }
  #pp-instagram .pp-ig-tile {
    flex: 0 0 calc((100% - 1.5rem) / 3);
    max-width: none;
    scroll-snap-align: start;
    aspect-ratio: 1 / 1;
  }
}

.page-hero:has(.pp-band-bg) {
  position: relative;
  isolation: isolate;
  min-height: 320px;
  display: flex !important;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem) 0 !important;
  background: #1d3c53;
}
.page-hero:has(.pp-band-bg) > .wp-block-group__inner-container {
  display: contents;
}
.page-hero:has(.pp-band-bg) .pp-band-bg {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.page-hero:has(.pp-band-bg) .pp-band-bg img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center 48%;
  display: block;
}
.page-hero:has(.pp-band-bg) .pp-band-bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,23,37,.12), rgba(9,23,37,.58)),
              linear-gradient(90deg, rgba(9,23,37,.62), rgba(9,23,37,.25) 68%, rgba(9,23,37,.12));
}
.page-hero:has(.pp-band-bg) .wrap {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--gap), var(--wrap));
  max-width: 1180px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.page-hero:has(.pp-band-bg) .wrap h1 {
  font-size: clamp(2rem, 4.1vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  color: #fff;
  max-width: 700px;
  margin: 0 0 15px;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.page-hero:has(.pp-band-bg) .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  color: #fff;
  margin-bottom: 15px;
}
.page-hero:has(.pp-band-bg) .lead {
  color: #fff;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  max-width: 670px;
  line-height: 1.5;
  margin: 0;
}
.page-hero:has(.pp-band-bg) .breadcrumbs { margin-bottom: 12px; }
.page-hero:has(.pp-band-bg) .breadcrumbs ol { gap: .5rem; margin: 0; }
.page-hero:has(.pp-band-bg) .breadcrumbs a,
.page-hero:has(.pp-band-bg) .breadcrumbs li + li:before { color: #fff; }
.page-hero:has(.pp-band-bg) .breadcrumbs li { font-size: 13px; }
@media (max-width: 599px) {
  .page-hero:has(.pp-band-bg) { min-height: 300px; padding: 30px 0 32px !important; }
  .page-hero:has(.pp-band-bg) .wrap h1 { max-width: 330px; font-size: 32px; line-height: 1.17; margin-bottom: 15px; }
  .page-hero:has(.pp-band-bg) .lead { font-size: 1rem; line-height: 1.45; max-width: 320px; }
  .page-hero:has(.pp-band-bg) .breadcrumbs { margin-bottom: 18px; }
  .page-hero:has(.pp-band-bg) .eyebrow { font-size: 11px; max-width: 290px; }
  .page-hero:has(.pp-band-bg) .pp-band-bg img { object-position: 52% center; }
}

/* === editable-seo-restore visual-qa 2026-11-10c ===
   Root cause: multi-column grid was applied to BOTH a container and its
   .wp-block-group__inner-container or wrapping <p>, so the inner occupied
   only the first track (~25-55% width) and children became tiny.
   One grid per named container; inners use display:contents. */

.wp-block-group > .wp-block-group__inner-container {
  display: contents;
}

/* ----- Home hero: pre-conversion 1.1fr / .9fr split, photo as full-bleed bg ----- */
@media (min-width: 960px) {
  body.home .hero--photo {
    position: relative !important;
    min-height: max(640px, 86vh);
    display: flex !important;
    align-items: center;
    padding: clamp(3rem, 6vh, 5rem) 0;
  }
  body.home .hero--photo .hero-grid {
    display: grid !important;
    grid-template-columns: 1.1fr .9fr !important;
    gap: 3.5rem !important;
    align-items: center !important;
    width: min(100% - 2 * var(--gap), var(--wrap)) !important;
    max-width: 100% !important;
    margin-inline: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  body.home .hero--photo .hero-grid > .wp-block-group__inner-container,
  body.home .hero--photo .hero-copy > .wp-block-group__inner-container {
    display: contents !important;
  }
  body.home .hero--photo .hero-copy {
    position: static !important;
    padding: 0 !important;
    min-width: 0;
  }
  body.home .hero--photo #quote,
  body.home .hero--photo .hero-grid #quote {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    order: 0 !important;
  }
  body.home .hero--photo .hero-bg {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: auto !important;
    z-index: -1;
  }
  body.home .hero--photo .hero-bg > .wp-block-group__inner-container {
    display: contents !important;
  }
}

@media (max-width: 959px) {
  body.home .hero--photo .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }
  body.home .hero--photo .hero-grid > .wp-block-group__inner-container,
  body.home .hero--photo .hero-copy > .wp-block-group__inner-container {
    display: contents !important;
  }
  body.home .hero--photo .hero-grid #quote,
  body.home .hero--photo #quote {
    order: -2 !important;
    width: 100% !important;
    max-width: none !important;
  }
  body.home .hero--photo .hero-grid .hero-copy,
  body.home .hero--photo .hero-copy {
    order: -1 !important;
  }
}

/* ----- Galleries: full content width, 2-col mobile / 4-col desktop, square ----- */
.gallery,
.wp-block-group.gallery {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  gap: .75rem !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.gallery > .wp-block-group__inner-container,
.wp-block-group.gallery > .wp-block-group__inner-container {
  display: contents !important;
}
@media (min-width: 960px) {
  .gallery,
  .wp-block-group.gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
.gallery figure,
.gallery .wp-block-image,
.wp-block-group.gallery figure,
.wp-block-group.gallery .wp-block-image {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}
.gallery img,
.wp-block-group.gallery img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
  border-radius: var(--radius-sm);
}

/* ----- Instagram: 4-up desktop / square scroll strip mobile; grid once ----- */
#pp-instagram .pp-ig-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .75rem !important;
  width: 100% !important;
  max-width: none !important;
}
#pp-instagram .pp-ig-grid > .wp-block-group__inner-container,
#pp-instagram .pp-ig-grid > p,
#pp-instagram .pp-ig-grid > .wp-block-paragraph {
  display: contents !important;
}
#pp-instagram .pp-ig-tile,
#pp-instagram .pp-ig-grid .wp-block-image,
#pp-instagram .pp-ig-grid figure {
  display: block !important;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  min-width: 0;
  text-decoration: none;
}
#pp-instagram .pp-ig-tile img,
#pp-instagram .pp-ig-grid img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  position: absolute;
  inset: 0;
  max-width: none !important;
}
@media (max-width: 767px) {
  #pp-instagram .pp-ig-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    gap: .75rem !important;
    padding: .2rem 0 .6rem;
    grid-template-columns: none !important;
  }
  #pp-instagram .pp-ig-tile,
  #pp-instagram .pp-ig-grid .wp-block-image,
  #pp-instagram .pp-ig-grid figure {
    flex: 0 0 calc((100% - 1.5rem) / 3);
    max-width: none;
    scroll-snap-align: start;
    aspect-ratio: 1 / 1;
  }
}

/* Aside / split: named container is the only grid */
.layout-aside > .wp-block-group__inner-container,
.split > .wp-block-group__inner-container,
.wrap.layout-aside > .wp-block-group__inner-container,
.wrap.split > .wp-block-group__inner-container {
  display: contents !important;
}
.grid > .wp-block-group__inner-container,
.grid-3 > .wp-block-group__inner-container,
.grid-4 > .wp-block-group__inner-container,
.steps > .wp-block-group__inner-container,
.cta > .wp-block-group__inner-container,
.footer-grid > .wp-block-group__inner-container,
.form-grid > .wp-block-group__inner-container {
  display: contents !important;
}

/* === editable-seo-restore visual-qa 2026-11-10d ===
   Do not upscale in-content photos past their intrinsic width.
   .media img{width:100%;height:100%} was stretching 360-508px
   assets to a 760px / 45vw column, which looked soft. */
.media img,
.media .wp-block-image img,
.split .media img,
.layout-aside .media img,
.split img,
.layout-aside .prose img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 32rem;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (min-width: 960px) {
  .layout-aside .media img,
  .split .media img {
    max-height: 28rem;
  }
}
/* Gallery tiles are already capped to their cell; keep cover without
   forcing a 100% height that could stretch a smaller intrinsic. */
.gallery img,
.wp-block-group.gallery img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}


/* === editable-seo-restore visual-qa 2026-11-11 ===
   1) The 10c global rule
   .wp-block-group > .wp-block-group__inner-container { display:contents }
   flattened every group, so children of grid *items* (the text column
   in .split, .card / .card-body, .review, .hero-panel) became items of
   the parent grid. From min-width:960 that squeezed service areas,
   reviews and similar sections into a miniature or narrow column, and
   could collapse other grids including galleries.
   Only named layout containers now flatten their inners.

   2) .trust-row flex+gap was on the group, but the two phone spans sit
   in one paragraph, so Brisbane / Gold Coast numbers ran together as
   9986Gold Coast.

   3) Classic theme has no theme.json layout and dequeues global-styles,
   so unwrapped blocks in #main had no contentSize and sat edge to edge.
   Root padding on #main (clamp 1rem / 4vw / 2rem) plus a wrap-width cap
   contains those blocks. Top-level .section / .hero / .page-hero /
   .alignfull break out so photo bands and section backgrounds stay
   full bleed; inner .wrap still provides the 1180px container.
   No nested alignfull. Gap between top-level sections is zero;
   section spacing stays on padding-block (.section already has it).

   4) 10d width:auto is narrowed to .media images so split columns hold. */
.wp-block-group > .wp-block-group__inner-container,
.wp-block-group > .wp-block-group__inner-container.is-layout-flow {
  display: block;
}

.hero-grid > .wp-block-group__inner-container,
.wrap.hero-grid > .wp-block-group__inner-container,
.gallery > .wp-block-group__inner-container,
.wp-block-group.gallery > .wp-block-group__inner-container,
#pp-instagram .pp-ig-grid > .wp-block-group__inner-container,
.layout-aside > .wp-block-group__inner-container,
.split > .wp-block-group__inner-container,
.wrap.layout-aside > .wp-block-group__inner-container,
.wrap.split > .wp-block-group__inner-container,
.grid > .wp-block-group__inner-container,
.grid-3 > .wp-block-group__inner-container,
.grid-4 > .wp-block-group__inner-container,
.steps > .wp-block-group__inner-container,
.cta > .wp-block-group__inner-container,
.footer-grid > .wp-block-group__inner-container,
.form-grid > .wp-block-group__inner-container,
.hero-bg > .wp-block-group__inner-container,
.page-hero:has(.pp-band-bg) > .wp-block-group__inner-container {
  display: contents !important;
}

/* Groups that are grid/flex items must keep a box so their children
   do not leak into the parent grid. */
.hero-copy > .wp-block-group__inner-container,
.hero-panel > .wp-block-group__inner-container,
.card > .wp-block-group__inner-container,
.card-body > .wp-block-group__inner-container,
.review > .wp-block-group__inner-container,
.media > .wp-block-group__inner-container,
.section-head > .wp-block-group__inner-container,
.trust-row > .wp-block-group__inner-container,
.faq > .wp-block-group__inner-container,
.cta-actions > .wp-block-group__inner-container,
.pp-ig-tile > .wp-block-group__inner-container,
.section > .wp-block-group__inner-container,
.wrap:not(.split):not(.hero-grid):not(.layout-aside) > .wp-block-group__inner-container {
  display: block !important;
}

.trust-row,
.trust-row .wp-block-paragraph,
.trust-row p {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .6rem 1.4rem !important;
  align-items: baseline;
}
.trust-row .wp-block-paragraph,
.trust-row p {
  margin: 0;
}

/* Front-end stand-in for theme.json layout (global-styles stay off so
   the classic header/footer are not inset by body padding). */
#main {
  padding-inline: clamp(1rem, 4vw, 2rem);
}
#main > .alignfull,
#main > .wp-block-group.alignfull,
#main > .hero,
#main > .page-hero,
#main > .section,
#main > section.wp-block-group {
  margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem));
  width: calc(100% + 2 * clamp(1rem, 4vw, 2rem));
  max-width: none;
}
#main > .wp-block-heading,
#main > .wp-block-paragraph,
#main > h1,
#main > h2,
#main > p {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

/* Zero block-gap between stacked full-bleed sections; spacing is
   padding-block on .section / .page-hero / .hero. */
#main > .wp-block-group + .wp-block-group,
#main > section + section,
#main > .hero + .section,
#main > .page-hero + .section,
#main > .section + .section {
  margin-block-start: 0;
}

/* Narrow the 10d .split img { width:auto } rule so only media-column
   photos keep intrinsic width; other images in a split fill their cell. */
.split img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.split .media img,
.layout-aside .media img,
.media img,
.media .wp-block-image img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 32rem;
}
@media (min-width: 960px) {
  .layout-aside .media img,
  .split .media img {
    max-height: 28rem;
  }
}


/* === editable-seo-restore visual-qa 2026-11-11b ===
   1) Home (and other) pool-card photos looked miniature because
      figure.wp-block-image keeps the browser default margin (1em 40px)
      and was not set to fill the card. Images now fill the card 3:2.
   2) Home hero text/form panels sat on the viewport edges: the hero
      inner-container became a flex item after display:block, so the
      1180 wrap width did not always apply. Flatten the hero inner and
      pin .hero-grid to --wrap, with hero padding-inline as a floor.
      The hero photo stays full bleed (absolute inset 0).
   3) Shortcode link-strip sections used inline padding-top:0, so
      "Custom concrete pools" butted the previous section-soft band.
   4) Sticky asides were already classed sticky; reinforce position
      and align-self so a short form sidebar stays in view. Long SEO
      copy is moved out of the aside in content.
   5) Quote-card / sidebar tel links wrapped mid-number. */
.card > .wp-block-image,
.card figure,
.card .wp-block-image,
.card > .wp-block-group__inner-container > .wp-block-image,
.card > .wp-block-group__inner-container > figure {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.card img,
.card .wp-block-image img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.hero > .wp-block-group__inner-container,
.hero--photo > .wp-block-group__inner-container,
.page-hero > .wp-block-group__inner-container {
  display: contents !important;
}
body.home .hero--photo {
  padding-inline: clamp(1rem, 4vw, 2rem);
}
body.home .hero--photo .hero-bg {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
}
body.home .hero--photo .wrap.hero-grid,
body.home .hero--photo .hero-grid {
  width: min(100% - 2 * var(--gap), var(--wrap)) !important;
  max-width: var(--wrap) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

#main > section.section:not(.wp-block-group) {
  padding-top: clamp(3.5rem, 8vw, 6.5rem) !important;
}

.layout-aside .sticky,
.wrap.layout-aside .sticky,
aside.sticky,
.wp-block-group.sticky {
  position: sticky !important;
  top: 96px;
  align-self: start;
  z-index: 2;
}
#main,
#main > .section,
#main > .wp-block-group.section,
#main .wrap.layout-aside {
  overflow: visible;
}

a[href^="tel:"] {
  white-space: nowrap;
}

/* === editable-seo-restore visual-qa 2026-11-11c / 1.0.8 ===
   a) Home mobile: keep the quote form first. Restore a compact set of
      trust bullets in the hero copy under the photo. Make the photo
      band a little taller than 12.5rem.
   d) Leave room at the bottom of the viewport for the fixed callbar.
   e) Show the Gold Coast number in the mobile top bar when it can wrap
      onto its own line with the Brisbane number. QBCC stays hidden. */
@media (max-width: 959px) {
  body.home .hero--photo .hero-bg {
    height: 15rem !important;
  }
  body.home .hero--photo .hero-copy .hero-points {
    display: grid !important;
    gap: .35rem;
    margin: .65rem 0 0;
    padding: 0;
    list-style: none;
  }
  body.home .hero--photo .hero-copy .hero-points li {
    font-size: .82rem;
    line-height: 1.3;
    font-weight: 550;
    gap: .45rem;
  }
}

html {
  scroll-padding-bottom: 80px;
}
body {
  padding-bottom: 80px;
}
@media (min-width: 960px) {
  html { scroll-padding-bottom: 0; }
  body { padding-bottom: 0; }
}

@media (max-width: 599px) {
  .topbar { font-size: .7rem; }
  .topbar .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .15rem .6rem;
  }
  .topbar .wrap > span {
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
  }
  /* Show Gold Coast with Brisbane; leave the hours/QBCC hide-sm alone. */
  .topbar .wrap > span:last-child .hide-sm {
    display: inline;
  }
}

/* === kelly-fixes 2026-11-11 precision 1.0.9: wide and ultra-wide screens ===
   Cause: .hero--photo min-height was max(640px, 86vh) with no ceiling, and the
   layout wrap stayed 1180px at every width, so on 1920/2560/3440 monitors the hero
   became a viewport-tall close-up and the card and form looked tiny. Fix: cap the
   hero height, and scale the root size and the wrap from 1800px up so every
   rem-based element (hero card, form, nav, headings, sections) grows with the screen. */
:root { --wrap: 1180px; }
@media (min-width: 1800px) { :root { --wrap: 1360px; } html { font-size: 106.25%; } }  /* 17px */
@media (min-width: 2200px) { :root { --wrap: 1500px; } html { font-size: 112.5%; } }  /* 18px */
@media (min-width: 3000px) { :root { --wrap: 1760px; } html { font-size: 125%; } }    /* 20px */
@media (min-width: 960px) {
  .hero--photo,
  body.home .hero--photo { min-height: min(max(640px, 86vh), 48rem); }
  .hero-panel { max-width: 34rem; }
}
@media (min-width: 1600px) {
  body.home .hero--photo .hero-bg img { object-position: 50% 55%; }
}

/* === kelly-fixes 2026-11-11 precision 1.0.10: Swimming Pools dropdown (desktop hover/focus, mobile listed under parent) === */
.site-nav .menu-item-has-children>a::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.18em) rotate(45deg)}
.site-nav ul ul{display:grid;gap:0;margin:0 0 .35rem .35rem;padding:0 0 0 .85rem;border-left:2px solid var(--line)}
.site-nav ul ul a{padding:.5rem .25rem;font-weight:500;font-size:.95rem}
@media (min-width:960px){
  .site-nav .menu-item-has-children{position:relative}
  .site-nav .menu-item-has-children>a::after{margin-left:.35em}
  .site-nav ul ul{display:none;position:absolute;top:100%;left:0;min-width:15.5rem;margin:0;padding:.45rem;gap:.1rem;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);z-index:60}
  .site-nav ul ul::before{content:"";position:absolute;left:0;right:0;top:-1.25rem;height:1.25rem}
  .site-nav .menu-item-has-children:hover>ul,.site-nav .menu-item-has-children:focus-within>ul{display:grid}
  .site-nav ul ul a{padding:.55rem .75rem;border-radius:8px;font-weight:550}
  .site-nav ul ul a:hover,.site-nav ul ul a:focus-visible{background:var(--accent-soft);color:var(--accent-ink)}
}