/* Inner pages: about, services, contact, design-inspiration, single service, 404 (live pages 616/617/618/627,
   templates 619/24). Live class map: .page-intro = .bt-content-section25 + .content-section-zulu__content-wrapper,
   .gallery-band = .content-section-zulu.content-grid, .page-services = .bt-content-section25 (services). */
@layer pages {
  /* ---------- intro: tagline + H1 left, copy right (2 cols from ~62rem, stacked below) */
  .page-intro,
  .page-services {
    position: relative;
    padding-block: var(--section-space-l);
    padding-inline: var(--gutter);
    background-color: var(--bg-ultra-dark);
  }
  .page-intro__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: var(--grid-auto-2);
    gap: var(--grid-gap);
  }
  @media (width <= 48rem) {
    .page-intro__grid,
    .page-services__header { margin-block-start: var(--space-xl); }
  }
  .page-intro__heading { display: flex; flex-direction: column; row-gap: var(--content-gap); inline-size: min(54ch, 100%); }
  .page-intro__heading .tagline { margin-block-end: var(--space-m); }
  .page-intro__body { display: flex; flex-direction: column; justify-content: flex-end; row-gap: var(--content-gap); }
  .page-intro__text { color: var(--text-light-muted); }
  .page-intro__text a { color: var(--text-light-muted); text-decoration: none; }
  .page-intro__text :where(a[href^="mailto:"], a[href^="tel:"]) { white-space: nowrap; }
  @media (hover: hover) {
    .page-intro__text a:hover { color: var(--primary); }
  }
  .page-intro__text strong { color: var(--text-light); }
  .page-intro__text ul { padding-inline-start: 2.25rem; }
  .page-intro__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

  /* ---------- about: 20vh band, background image soft-light over the ultra-dark base (#ntqrhr) */
  .about-band {
    position: relative;
    block-size: 20vh;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--bg-ultra-dark);
  }
  .about-band__img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: bottom center;
    mix-blend-mode: soft-light;
  }

  /* ---------- services */
  .page-services__header {
    display: flex;
    flex-direction: column;
    row-gap: var(--content-gap);
    max-inline-size: var(--width-l);
    margin-block-end: var(--space-xxl);
  }
  .page-services__header .tagline { margin-block-end: var(--space-m); }
  .page-services__title { font-size: var(--h1); line-height: 1.04; color: var(--text-light); }
  .page-services__title > span { color: var(--primary); }

  /* ---------- contact map (live #bwcokv: full width, 450px, no padding) */
  .contact-map { display: block; line-height: 0; }
  .contact-map__frame { display: block; inline-size: 100%; block-size: 28.125rem; border: 0; }

  /* ---------- gallery band (design-inspiration + single service): text, marquee, buttons */
  .gallery-band {
    display: flex;
    flex-direction: column;
    gap: var(--section-space-l);
    padding-block: var(--section-space-l) var(--space-s);
    background-color: var(--bg-dark);
  }
  .gallery-band > .container { padding-inline: var(--gutter); max-inline-size: calc(var(--content-width) + var(--gutter) * 2); }
  .gallery-band__slider { display: flex; flex-direction: column; align-items: center; row-gap: var(--space-xs); }
  .gallery-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin-block: var(--space-l);
    padding-inline: var(--gutter);
  }
  @media (width <= 48rem) {
    .gallery-band__actions { margin-block-end: var(--space-xxl); }
  }

  /* service extended content: 2 text columns like live desktop, one readable column on narrow screens (quirk fix 1) */
  .service-extended {
    column-count: 2;
    column-gap: var(--space-xxl);
    color: var(--text-light-muted);
  }
  @media (width <= 40rem) {
    .service-extended { column-count: 1; }
  }
  .service-extended > :first-child { margin-block-start: 0; }
  .service-extended :where(h2, h3, h4) { break-after: avoid; color: var(--primary); }
  .service-extended h3 { font-size: var(--h3); }
  .service-extended h4 { font-size: var(--h4); }
  .service-extended > :where(h3, h4):not(:first-child) { margin-block-start: var(--space-m); }
  .service-extended :where(h3, h4) + * { margin-block-start: var(--space-xs); }
  .service-extended ul { padding-inline-start: 1.25em; }
  .service-extended li { break-inside: avoid; }
  .service-extended li::marker { color: var(--text-light-muted); }
  .service-extended strong { color: var(--text-light); font-weight: 500; }

  /* ---------- 404 */
  .error-404 {
    display: grid;
    place-items: center;
    min-block-size: 40rem;
    padding-block: var(--section-space-l);
    padding-inline: var(--gutter);
    background-color: var(--bg-ultra-dark);
  }
  .error-404__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-m); text-align: center; }
  .error-404__title { font-size: var(--h1); color: var(--text-light); text-wrap: balance; }
}