/* Whole hero photographs with a little space below the masthead; no breadcrumbs. */
@media(min-width:901px){
 body{--hero-visible-height:max(380px,calc(100svh - 155px))}
 body main :is(.service-hero.service-hero,.meth-hero.meth-hero){
  width:100cqw;max-width:none;margin:32px calc(50% - 50cqw) 0;
  min-height:min(47.84cqw,var(--hero-visible-height));padding:64px var(--hero-page-gutter) 72px;
 }
 body main .pm-hero.pm-hero.pm-hero{min-height:min(42.5cqw,var(--hero-visible-height));margin-top:32px}
 body main :is(.service-hero,.meth-hero) :is(.service-hero-image,.meth-hero-photo){
  inset:0;width:100%;max-width:none;height:100%;margin:0;overflow:visible;
  aspect-ratio:auto;
 }
 body main :is(.service-hero,.meth-hero) :is(.service-hero-image,.meth-hero-photo) picture{
  display:block;width:100%;height:100%;
 }
 body main :is(.service-hero,.meth-hero) :is(.service-hero-image,.meth-hero-photo) img{
  position:absolute;inset:0 0 auto auto;width:85%;max-width:85%;height:auto;
  max-height:var(--hero-visible-height);margin:0;
  object-fit:contain;object-position:right top;
 }
 body main .ka-background-hero .service-hero-image{left:0;right:0}
 body main .service-hero-faded .service-hero-image img,
 body main .meth-hero .meth-hero-photo img{
  mask-image:linear-gradient(to right,transparent 8%,rgba(0,0,0,.06) 32%,rgba(0,0,0,.25) 45%,#000 68%);
  -webkit-mask-image:linear-gradient(to right,transparent 8%,rgba(0,0,0,.06) 32%,rgba(0,0,0,.25) 45%,#000 68%);
 }
 body main .service-hero-faded .service-hero-image figcaption,
 body main .meth-hero .meth-hero-photo figcaption{left:var(--hero-page-gutter);width:40%;max-width:40%}
 /* Full-width testing room, with a gentler fade behind the text. */
 body main .service-hero-mould-testing.service-hero-mould-testing{
  --testing-copy-width:min(32rem,calc((100cqw - 2 * var(--hero-page-gutter)) * .36));
  min-height:56.28cqw;
 }
 body main .service-hero-mould-testing .service-hero-copy{width:var(--testing-copy-width)}
 body main .service-hero-mould-testing .service-hero-image{
  left:0;width:100%;
 }
 body main .service-hero-mould-testing .service-hero-image img{
  width:100%;max-width:100%;max-height:none;
  mask-image:linear-gradient(to right,rgba(0,0,0,.28),rgba(0,0,0,.3) 34%,rgba(0,0,0,.65) 43%,#000 55%);
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.28),rgba(0,0,0,.3) 34%,rgba(0,0,0,.65) 43%,#000 55%);
 }
}
@media(min-width:901px) and (max-width:1100px){body{--hero-visible-height:max(380px,calc(100svh - 113px))}}
@media(min-width:1101px){
 /* Homepage labels begin 130px beneath the masthead: 32px gap + 98px padding. */
 body main :is(.service-hero.service-hero.service-hero,.meth-hero.meth-hero.meth-hero){padding-top:98px}
 body main .hero-background{margin-top:0}
 body main .hero-background::before{
  background-size:85% auto;background-position:right top;
  mask-image:linear-gradient(to right,transparent 25%,rgba(0,0,0,.06) 33%,rgba(0,0,0,.35) 48%,#000 68%);
  -webkit-mask-image:linear-gradient(to right,transparent 25%,rgba(0,0,0,.06) 33%,rgba(0,0,0,.35) 48%,#000 68%);
 }
 body main .hero-background::after{content:none}
}
@media(max-width:900px){
 body main :is(.service-hero,.meth-hero).mobile-service-sequence.mobile-service-sequence{
  display:block;min-height:0;height:auto;padding:0 0 32px;margin-top:24px;overflow:visible;
 }
 body main :is(.ka-background-hero,.pm-hero).mobile-service-sequence.mobile-service-sequence{padding-inline:var(--hero-page-gutter)}
 body main .mobile-service-sequence .service-mobile-copy{display:block;position:relative;width:100%;max-width:none;margin:0}
 body main .mobile-service-sequence::after{display:none}
 body main .mobile-service-sequence :is(.service-hero-image,.meth-hero-photo){
  display:block;position:relative;inset:auto;width:100cqw;max-width:none;height:auto;
  aspect-ratio:auto;margin:0 calc(50% - 50cqw) 24px;z-index:auto;overflow:visible;
 }
 body main .mobile-service-sequence :is(.service-hero-image,.meth-hero-photo)::before{display:none}
 body main .mobile-service-sequence :is(.service-hero-image,.meth-hero-photo) picture{display:block;height:auto}
 body main .mobile-service-sequence :is(.service-hero-image,.meth-hero-photo) img{
  display:block;position:static;width:100%;max-width:100%;height:auto;object-fit:contain;
  mask-image:none;-webkit-mask-image:none;border-radius:0;margin:0;
 }
 body main .mobile-service-sequence :is(.service-hero-image,.meth-hero-photo) figcaption{
  position:static;width:auto;max-width:none;margin:0;padding:8px var(--hero-page-gutter);background:transparent;
 }
}
@media(max-width:1100px){
 body main .hero-background .hero.hero{padding-top:0}
 body main .hero-background .hero-intro>.mobile-home-hero{margin-top:0;margin-bottom:24px}
}

/* The original compact service mosaic: wide and narrow tiles form three rows. */
body main .service-image-grid{
 grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;
 grid-auto-rows:clamp(210px,18vw,260px);gap:14px;
}
body main .service-image-grid>:is(a,.service-payment-card){
 grid-column:auto;grid-row:auto;border:0;border-radius:0;
 background:var(--ink);color:#fff;min-height:0;
}
body main .service-image-grid>:is(a,.service-payment-card)>a,
body main .service-image-grid>a{display:block;flex:none;aspect-ratio:auto;height:100%;min-height:0}
body main .service-image-grid>:nth-child(1),
body main .service-image-grid>:nth-child(4),
body main .service-image-grid>:nth-child(7),
body main .service-image-grid>:nth-child(8){grid-column:span 2;grid-row:auto}
body main .service-image-grid .service-image-media{
 position:absolute;inset:0;aspect-ratio:auto;background:var(--ink);
}
body main .service-image-grid .service-image-media::after{
 content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,transparent 35%,rgba(16,25,26,.12) 55%,rgba(16,25,26,.88) 100%);
}
body main .service-image-grid .service-image-media img{
 width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:none;
}
body main .service-image-grid a[href="/mould-testing/"] .service-image-media img{object-position:center top}
body main .service-image-grid a[href="/mould-assessments/"] .service-image-media img{object-position:74% center}
body main .service-image-grid a[href="/property-management-services/"] .service-image-media img{object-position:80% center}
body main .service-image-grid a[href="/water-damage-repairs/"] .service-image-media img{object-position:right center}
body main .service-image-grid a[href="/meth-decontamination/"] .service-image-media img{object-position:right 35%}
body main .service-image-grid .service-image-title{
 position:absolute;inset:auto 20px 18px;padding:0;color:#fff;
 font-size:1.15rem;min-height:0;align-items:flex-end;
}
body main .service-image-grid .service-image-title::after{
 background:transparent url('service-arrow.svg') center no-repeat;mask:none;-webkit-mask:none;
}
@media(hover:hover){
 body main .service-image-grid a:hover .service-image-media img{transform:scale(1.025)}
}
@media(prefers-reduced-motion:reduce){
 body main .service-image-grid a:hover .service-image-media img{transform:none}
}
@media(min-width:761px) and (max-width:1100px){
 body main .service-image-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:250px}
 body main .service-image-grid>:nth-child(n){grid-column:auto;grid-row:auto}
}
@media(max-width:760px){
 body main .service-image-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:260px;gap:16px}
 body main .service-image-grid>:nth-child(n){grid-column:auto;grid-row:auto}
}

/* Job evidence remains whole even when a fixed frame is used for alignment. */
body main .before-after-grid img{object-fit:contain}
body main .care-image img{aspect-ratio:auto;height:auto;object-fit:contain}
body main .meth-help-row .meth-work-photo img{max-height:none;height:auto;object-fit:contain}