/* Pro Plastering (9 Nov 2026): the few things that differ from the LifeProof look (css/site.css, recoloured by content/recolour.py). */

/* hero + feature card are photos, not LifeProof's videos (the <img> keeps .hero-vid / .svc-vid, so the same cover + shade apply) */
.hero picture{display:contents}
img.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 40%;z-index:-2}
img.svc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 30%}
@media (max-width:700px){img.hero-vid{object-position:50% 30%}}

/* problem tiles + service cards without a photo: a big line icon on the dark tile instead (no job photos yet) */
.sym.noimg{background:radial-gradient(120% 90% at 85% 10%,#2C3B42 0%,var(--ink) 60%)}
.sym.noimg .sym-ic{position:absolute;right:18px;top:16px;width:clamp(72px,7vw,104px);height:auto;color:var(--cyan);opacity:.9;transition:transform .4s}
.sym.noimg:hover .sym-ic{transform:translateY(-4px) rotate(-4deg)}
.svc.noimg{background:radial-gradient(110% 80% at 85% 0%,#31434B 0%,var(--ink-2) 55%,var(--ink) 100%)}
.svc.noimg .svc-ic{position:absolute;left:clamp(22px,2.6vw,34px);top:clamp(22px,2.6vw,34px);width:clamp(84px,8vw,120px);color:rgba(0,155,227,.6);z-index:-1}
.svc.noimg .svc-ic svg{width:100%;height:auto;display:block}
.sym.noimg .sym-ic svg{width:100%;height:auto;display:block}

/* why: a photo where LifeProof had Ryan's video */
.why-photo img{width:100%;height:100%;object-fit:cover;object-position:40% 30%;display:block}

/* logo: the PRO / PLASTERING lockup is wider than LifeProof's */
.site-header .logo img{height:50px;width:auto}
@media (max-width:440px){.site-header .logo img{height:40px}}
.foot-brand img{height:64px;width:auto}

/* before/after pairs come from customers' review photos (small), so keep the tiles small and crisp */
.gallery.ba{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;max-width:960px;margin-inline:auto}
.gallery.ba .g-item{aspect-ratio:3/5}
.gallery.ba .g-item:nth-child(2n) figcaption{background:var(--cyan);color:var(--ink)}
@media (max-width:700px){.gallery.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin-right:0;padding-right:0}.gallery.ba .g-item{height:auto;flex:none}}

/* quote form / number pool placeholders until Jarryd sends them */
.form-pending{display:grid;gap:8px;place-content:center;min-height:420px;padding:32px;text-align:center;border:2px dashed rgba(255,255,255,.35);border-radius:12px;color:#fff}
.form-pending b{font-family:var(--cond);font-size:28px;text-transform:uppercase;letter-spacing:.04em}

/* four Melbourne regions, not LifeProof's five */
@media (min-width:1101px){.area-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* process: two photos under the steps (quote on site, job done) */
.step-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(24px,3vw,40px)}
.step-photos figure{margin:0;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/2;background:var(--line)}
.step-photos img{width:100%;height:100%;object-fit:cover;display:block}
.step-photos figcaption{position:absolute;left:12px;bottom:12px;background:var(--ink);color:#fff;font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px;padding:6px 12px;border-radius:30px;border-left:4px solid var(--green)}
@media (max-width:700px){.step-photos{grid-template-columns:minmax(0,1fr);gap:10px}}

/* hero video (Jarryd's 10s montage): the people are centre-frame, so on desktop the video sits right of the headline
   and fades into the dark hero background on its left edge */
video.hero-vid{object-position:50% 40%}
@media (min-width:1000px){
  video.hero-vid{left:30%;width:70%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(90deg,transparent 0,#000 28%)}
}

/* quote card: the GHL form brings its own 30px top / 26px bottom padding (custom CSS in GHL), so no extra padding under it */
.enq-card,.enq-card.ghl-mob{padding-bottom:0}