.air-guide-hero {
  display: grid;
  isolation: isolate;
}
.air-guide-hero-image, .air-guide-hero-copy { grid-area: 1 / 1; }
.air-guide-hero-image { position: relative; margin: 0; }
.air-guide-hero-image img { display: block; width: 100%; height: auto; }
.air-guide-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, var(--page) 22%, transparent 44%);
  pointer-events: none;
}
.air-guide-hero-copy {
  z-index: 1;
  align-self: center;
  justify-self: end;
  width: 36%;
  padding: clamp(1.5rem, 4vw, 4rem) clamp(1.25rem, 4vw, 4rem) clamp(1.5rem, 4vw, 4rem) 0;
}
.air-guide-hero h1 {
  max-width: 17ch;
  font-size: clamp(2.1rem, 4vw, 4.05rem);
}
.air-guide-hero .button { white-space: normal; }
.air-guide-image-note { margin-block: .5rem 0; }
.air-guide-intro { max-width: 65ch; }
.air-guide-captioned-photo { margin: 0; }
.air-guide-captioned-photo figcaption {
  margin: 0;
  padding: .65rem 1rem;
}

.ventilation-buying-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 1px solid var(--rule);
  border-radius: .75rem;
  overflow: hidden;
  background: var(--paper);
}
.ventilation-buying-copy {
  align-self: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.ventilation-buying-copy ul { padding-inline-start: 1.2em; }
.ventilation-buying-copy li {
  padding-block: .7rem;
  border-bottom: 1px solid var(--rule);
}
.ventilation-buying-copy > :last-child { margin-bottom: 0; }
.ventilation-buying-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ventilation-equipment-photo {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.ventilation-buying-card .wall-insulation-example {
  align-self: start;
  margin: 0;
}
.wall-insulation-example img {
  height: auto;
  aspect-ratio: 648 / 594;
  object-position: center bottom;
}
.wall-insulation-example figcaption {
  margin: 0;
  padding: .65rem 1rem;
}
@media (max-width: 760px) {
  .ventilation-buying-card { grid-template-columns: 1fr; }
  .ventilation-buying-card img { height: auto; }
}
.air-signs, .air-system-grid, .air-next-steps {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
}
.air-signs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.air-system-grid, .air-next-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.air-signs article, .air-system-card {
  border: 1px solid var(--rule);
  border-radius: .4rem;
  padding: clamp(1rem, 2.5vw, 1.8rem);
  background: var(--paper);
}
.air-signs article p, .air-system-card p { margin-bottom: 0; }
#condensation-signs h4 { margin: .5rem 0; font-size: 1rem; }
#condensation-signs article p + .fine { margin-top: 1rem; }
@media (min-width: 761px) {
  #airflow-checks .air-signs,
  #condensation-signs .air-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  #condensation-signs .air-signs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.air-system-card figure { margin: .75rem 0; }
.air-system-card img { display: block; width: 100%; height: auto; }
.air-system-grid + .fine { margin-top: 1rem; }
@media (max-width: 960px) {
  .air-guide-hero-image, .air-guide-hero-copy { grid-area: auto; }
  .air-guide-hero-image::after { display: none; }
  .air-guide-hero-copy { width: min(100% - 2.5rem, 72rem); margin-inline: auto; padding: 1.5rem 0 0; }
}
@media (max-width: 760px) {
  .air-signs, .air-system-grid, .air-next-steps { grid-template-columns: 1fr; }
}

.air-hvac-definition {
  max-width: 72ch;
  margin-bottom: 2rem;
  border-inline-start: 3px solid var(--gold);
  padding-inline-start: clamp(.875rem, 2vw, 1.5rem);
}
.air-diagram-key {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
}
.air-diagram-key li { display: flex; align-items: center; gap: .5rem; }
.air-diagram-key li::before {
  content: "";
  width: 1.25rem;
  height: .25rem;
  border-radius: .25rem;
  background: var(--air-key-colour);
}
.air-key-fresh { --air-key-colour: #246b86; }
.air-key-cold { --air-key-colour: #2766a6; }
.air-key-warm { --air-key-colour: #a3442d; }
.air-key-stale { --air-key-colour: #596760; }
.air-system-summary { font-weight: 600; }

.air-faq-group { margin-top: var(--space-content); }
.air-faq-group > .eyebrow { margin-bottom: var(--space-label); }

#airflow-checks .air-signs article {
  padding: 0;
  overflow: hidden;
}

.airflow-card-copy { padding: clamp(1rem, 2.5vw, 1.8rem); }

#airflow-checks .air-signs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ventilation-callback-panel {
  max-width: 46rem;
  margin-top: 1.5rem;
  scroll-margin-top: calc(var(--masthead-height, 96px) + 1rem);
}

.moisture-guide-intro-row {
  display: grid;
  align-items: start;
  gap: .75rem 1.5rem;
  margin-block: 1.5rem 2rem;
}
.moisture-guide-intro-row .air-guide-intro { margin: 0; }
.moisture-guide-share { max-width: 32rem; }

@media (min-width: 761px) {
  .moisture-guide-intro-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    align-items: center;
  }
  .moisture-guide-share { text-align: right; }
  .moisture-guide-share .share-link-fallback { text-align: left; }
}
.moisture-guide-share .button {
  min-height: 44px;
  max-width: 100%;
  text-align: left;
}

.bathroom-moisture-layout {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
}
.bathroom-moisture-photo,
.bedroom-moisture-photo { margin: 0; }
.bathroom-moisture-photo img,
.bedroom-moisture-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .4rem;
}
.bedroom-moisture-photo { position: relative; }
.bedroom-moisture-photo .bedroom-photo-logo {
  position: absolute;
  right: 1.25%;
  bottom: 19.5%;
  width: 19%;
  border-radius: 0;
  filter: contrast(1.2);
  pointer-events: none;
}
.bedroom-moisture-tips,
.bathroom-moisture-tips { margin: 0; padding-inline-start: 1.5rem; }
.bedroom-moisture-tips { margin-block: 1.25rem 1.5rem; }
.bedroom-moisture-tips li + li,
.bathroom-moisture-tips li + li { margin-top: .7rem; }
.bedroom-moisture-tips li::marker,
.bathroom-moisture-tips li::marker { color: var(--gold-text); font-weight: 700; }
.bathroom-moisture-layout + .bathroom-extractor-enquiry { margin-top: 1.5rem; }
.bathroom-extractor-enquiry + .fine { margin-top: 1.5rem; }

.bathroom-moisture-photo { position: relative; }
.bathroom-moisture-marker,
.bedroom-moisture-marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(1.35rem, 3vw, 1.8rem);
  aspect-ratio: 1;
  border: 1px solid black;
  border-radius: 50%;
  background: rgb(255 255 255 / 15%);
  backdrop-filter: blur(.5px);
  color: black;
  font-size: .8rem;
  font-weight: 700;
}
