/* Home inspection page — only what is unique to this page.
   Requires styles.min.css and services-common.css to be loaded first
   (colour variables --navy, --ink, --muted, --line and --pale-sage come from services-common.css). */

:root {
  --inspection-blue: #293b86;
}

/* Hero background (position, size and overlay are in services-common.css) */
.inspection-hero-image {
  background-image:
    url('../images/gallery/home-inspection/photo_2026-09-24_17-47-03.webp'),
    linear-gradient(135deg, #646c7c, #17245a);
}

/* Desktop split hero: blue panel on the left, photo filling the right half.
   On mobile (850px and below) the shared full-image hero from
   services-common.css is used instead. */
@media (min-width: 851px) {
  .inspection-hero {
    background: var(--navy);
    padding-right: 50%; /* keeps the text inside the blue half */
  }

  .inspection-hero-image {
    inset: 0 0 0 auto;
    width: 50%;
    background-position: center;
  }

  /* soft fade from the blue panel into the photo */
  .inspection-hero-overlay {
    inset: 0 auto 0 50%;
    width: 120px;
    background: linear-gradient(90deg, var(--navy), rgba(15, 26, 69, 0));
  }
}

.inspection-intro {
  background: #fff;
}

.inspection-intro-grid,
.inspection-note-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(45px, 8vw, 120px);
  align-items: start;
}

.inspection-intro h2,
.what-to-expect h2,
.systems-copy h2,
.inspection-note h2 {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.inspection-intro-copy p {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.8;
}

.inspection-services {
  background: var(--pale-sage);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Overrides the shared section heading for this page */
.section-heading {
  margin-bottom: 42px;
}

.section-heading h2 {
  max-width: 690px;
  margin: 10px 0 0;
  color: var(--ink);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.08;
}

/* Card layout, colours and responsive behaviour come from the shared
   service-card block at the end of services-common.css. */

.inspection-toggle span {
  transition: transform .2s ease;
}

.inspection-service-card.is-open .inspection-toggle span {
  transform: rotate(45deg);
}

.inspection-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}

.inspection-panel > ul {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.inspection-service-card.is-open .inspection-panel {
  grid-template-rows: 1fr;
}

.what-to-expect {
  background: #fff;
}

.what-to-expect-heading {
  text-align: center;
}

.what-to-expect-heading h2 {
  margin-inline: auto;
}

.inspection-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 58px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.inspection-steps li {
  padding: 0 28px 0 0;
}

.inspection-steps li + li {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.inspection-steps > li > span {
  display: block;
  margin-bottom: 35px;
  color: var(--inspection-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.inspection-steps h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 600;
}

.inspection-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.inspection-systems {
  padding: 0;
  background: var(--navy);
  color: #fff;
}

.systems-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: stretch;
}

.systems-image {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #17245a;
}

.systems-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: luminosity;
  opacity: .9;
}

.systems-copy {
  padding: clamp(55px, 7vw, 100px);
}

.systems-copy .eyebrow {
  color: #dde1e7;
}

.systems-copy h2 {
  color: #fff;
}

.systems-copy > p:not(.eyebrow) {
  max-width: 620px;
  color: #eceef2;
  line-height: 1.8;
}

.systems-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 35px 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.systems-list span {
  padding: 14px;
  border-right: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 13px;
}

.systems-copy .text-link {
  color: #dde1e7;
}

.inspection-note {
  background: #f5f6f8;
  border-bottom: 1px solid var(--line);
}

.inspection-note .eyebrow {
  margin-top: 8px;
}

.inspection-note p:not(.eyebrow) {
  max-width: 700px;
  color: var(--muted);
  line-height: 1.8;
}

@media (max-width: 900px) {
  .inspection-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 0;
  }

  .inspection-steps li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .systems-grid {
    grid-template-columns: 1fr;
  }

  .systems-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
    max-height: 260px;
  }
}

@media (max-width: 650px) {
  .inspection-intro-grid,
  .inspection-note-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .inspection-steps {
    grid-template-columns: 1fr;
    margin-top: 42px;
  }

  .inspection-steps li,
  .inspection-steps li + li,
  .inspection-steps li:nth-child(3) {
    padding: 0 0 27px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .inspection-steps li + li {
    padding-top: 27px;
  }

  .inspection-steps > li > span {
    margin-bottom: 15px;
  }

  .systems-copy {
    padding: 55px 24px;
  }

  .systems-list {
    grid-template-columns: 1fr;
  }
}


/* video */
.inspection-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.inspection-video-copy {
  max-width: 640px;
}

.inspection-video-media {
  width: min(100%, 340px);
  justify-self: center;
  overflow: hidden;
  border-radius: 18px;
  background: #0a1230;
}

.inspection-video-media video {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  .inspection-video-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   "A whole-property view" — fits one window height. Spacing follows the
   window height; the photo fills the left column on desktop and becomes a
   short band on phones.
   ========================================================================== */
.systems-copy {
  min-width: 0;
  padding: clamp(24px, 5.5vh, 76px) clamp(20px, 4vw, 64px);
}

.systems-copy h2 {
  margin-top: 6px;
  overflow-wrap: break-word;
}

.systems-copy > p:not(.eyebrow) {
  margin: clamp(10px, 1.8vh, 20px) 0 0;
}

.systems-list {
  margin: clamp(14px, 2.8vh, 32px) 0 clamp(12px, 2.4vh, 28px);
}

.systems-list span {
  padding: clamp(7px, 1.3vh, 13px) 12px;
  line-height: 1.35;
}

/* Tablets and phones: photo band on top, sized from the window height */
@media (max-width: 900px) {
  .systems-image {
    aspect-ratio: auto;
    height: clamp(120px, 24vh, 260px);
    max-height: none;
  }
}

@media (max-width: 650px) {
  .systems-copy {
    padding: 20px 16px 22px;
  }

  /* two columns keep the six-item checklist short */
  .systems-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .systems-list span {
    padding: 8px 10px;
  }
}

@media (max-width: 650px) and (max-height: 760px) {
  .systems-image {
    height: clamp(88px, 14vh, 150px);
  }

  .systems-copy {
    padding: 16px 16px 18px;
  }
}

/* ==========================================================================
   "Why inspections matter" video — the whole section fits one window.
   The portrait video (464x848) takes its height from the window and keeps
   its own proportions; spacing scales with the window height.
   ========================================================================== */
.inspection-video.section {
  padding: clamp(24px, 6vh, 96px) 0;
}

.inspection-video-grid {
  gap: clamp(1.5rem, 5vw, 5rem);
}

.inspection-video-media {
  /* wraps the video exactly, so no dark band shows beside it */
  width: fit-content;
  max-width: 100%;
}

.inspection-video-media video {
  --video-h: clamp(260px, calc(100svh - 88px - 12vh - 8px), 620px);
  /* width comes from the target height; if the column is narrower, the
     height follows the width so the player never shows black bars */
  width: calc(var(--video-h) * 464 / 848);
  max-width: 100%;
  height: auto;
  aspect-ratio: 464 / 848;
}

/* Phones: text above, video below, both in one screen */
@media (max-width: 760px) {
  .inspection-video.section {
    padding: 22px 0;
  }

  .inspection-video-grid {
    gap: 16px;
  }

  .inspection-video-media video {
    --video-h: clamp(220px, calc(100svh - 88px - 300px), 560px);
  }
}

/* ==========================================================================
   "An important note" — Inspection Scope panel image on the left, note on
   the right (stacked on phones). The section colour matches the image's own
   background so the panel blends in. Fits one window height.
   ========================================================================== */
.inspection-note {
  padding: clamp(32px, 8vh, 110px) 0;
  background: #f2f6fa;
}

.inspection-note-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.inspection-note-panel {
  margin: 0;
}

.inspection-note-panel img {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  /* never taller than the window allows */
  max-height: calc(100svh - 88px - 16vh);
  object-fit: contain;
  object-position: left center;
}

.inspection-note-copy {
  min-width: 0;
}

.inspection-note .inspection-note-copy .eyebrow {
  margin: 0 0 clamp(10px, 1.8vh, 16px);
}

.inspection-note .inspection-note-copy h2 {
  margin: 0 0 clamp(12px, 2.4vh, 24px);
  overflow-wrap: break-word;
}

.inspection-note .inspection-note-copy p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
}

@media (max-width: 820px) {
  .inspection-note-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .inspection-note-panel img {
    max-width: 560px;
    max-height: none;
    margin-inline: auto;
  }
}

@media (max-width: 650px) {
  .inspection-note {
    padding: 22px 0;
  }
}