/* Inner pages (services, areas, reviews, contact): shared page-level layout.
   Builds on tokens/base/components; home.css supplies the edge line, hero, FAQ panel, quote and night surface. */

/* Shorter, single-image hero */
.hero--inner { min-height: min(38rem, 85svh); padding-block: 13rem 6.5rem; }
.hero--inner .hero__slide.is-active img { animation: none; transform: scale(1.02); }
.hero--inner .hero__title { max-width: 22ch; }

/* Intro: sticky heading/copy left, dual-image group (the homepage About pattern) right */
.intro__layout { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 950px) {
  .intro__layout { grid-template-columns: 6fr 5fr; gap: var(--sp-6); }
  .intro__layout .section-head { margin-bottom: 0; }
}
.intro .about__media { margin-bottom: 0; }

/* Test list: sticky title left, hairline-separated entries right */
.tests { padding-bottom: var(--sp-6); }
.tests h2, .tests h3 { color: #fff; }
.tests__layout { display: grid; gap: var(--sp-5); }
@media (min-width: 950px) {
  .tests__layout { grid-template-columns: 4fr 7fr; gap: var(--sp-6); align-items: start; }
  .tests__head { position: sticky; top: calc(var(--header-h) - 1rem); }
}
.test { padding: var(--sp-4) 0 var(--sp-3); border-top: 1px solid var(--bd-dark); }
.test:first-child { border-top: 1px solid var(--hl-dark); padding-top: 0; border-top-color: transparent; }
.test h3::after { margin-bottom: .8em; }
.test p { max-width: 62ch; color: var(--on-dark); margin: 0; }
.test__cta { margin-top: var(--sp-3); }

/* Sticky image stack under the section heading: crossfades to the image for the test currently in view */
.tests__media, .test__img { display: none; }
.test__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 var(--sp-3); border-radius: var(--r-m); border: 1px solid var(--bd-dark); }
@media (max-width: 949px) { .test__img { display: block; } }
@media (min-width: 950px) {
  .tests__media { display: block; position: relative; aspect-ratio: 4 / 3; margin-top: var(--sp-4); overflow: hidden; border-radius: var(--r-m); border: 1px solid var(--bd-dark); border-top-color: var(--hl-dark); background: var(--ink-900); }
  .tests__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .8s ease, transform 1.4s var(--ease); }
  .tests__media img.is-active { opacity: 1; transform: scale(1); }
}

/* ---------- Electrical Rewires: extra section layouts ---------- */
.tests__intro-cta { margin-top: var(--sp-3); }
.tests__head > p { color: var(--on-dark); max-width: 62ch; }
.test .test__img + p { margin-top: 0; }
.test p + p { margin-top: 1em; }

/* "What are rewires": heading left, copy right (light) */
.rw-what { padding-top: 0; }
.rw-what__layout { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 950px) { .rw-what__layout { grid-template-columns: 5fr 6fr; gap: var(--sp-6); } .rw-what__head { position: sticky; top: calc(var(--header-h) - 1rem); } }
.rw-what__copy p { max-width: 62ch; }
.rw-what__copy p:last-child { margin-bottom: 0; }

/* "Why invest": heading + copy left, four benefits as a staggered 2x2 grid */
.rw-why { padding-top: var(--sp-6); }
.rw-why h2 { color: #fff; }
.rw-why__layout { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 950px) { .rw-why__layout { grid-template-columns: 5fr 7fr; gap: var(--sp-6); } }
.rw-why__head > p { color: var(--on-dark); max-width: 62ch; }
.rw-why__cta { margin-top: var(--sp-3); }
.rw-why__list { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .rw-why__list { grid-template-columns: 1fr 1fr; } .rw-why__list li:nth-child(even) { margin-top: 2.5rem; } }
.rw-why__list li { padding: var(--sp-4); background: var(--ink-900); color: var(--on-dark); border: 1px solid var(--bd-dark); border-top: 3px solid var(--blue); border-radius: var(--r-m); }
.rw-why__list strong { display: block; margin-bottom: .5rem; font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: .02em; line-height: 1.1; color: #fff; }

/* Process section with only two entries: show each entry's photo inline on every screen size instead of the sticky stack */
.tests--inline .test__img { display: block; }
.tests--inline .test { padding-top: 0; border-top: 0; }
.tests--inline .test + .test { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--bd-dark); }