/* Shared page framing. Text remains in normal flow; only media is sized to
   the space left by the actual heading, controls and captions. */
:root {
  --pad: max(clamp(24px, 5vw, 88px), calc((100vw - 1600px) / 2));
  --header-clearance: calc(max(28px, env(safe-area-inset-top)) + 78px);
  --panel-bottom: clamp(28px, 4svh, 56px);
}
html { scroll-padding-top: 0; scroll-behavior: auto; }
section, #main { scroll-margin-top: 0; }
.section-space,
.power-section,
.system-overview.section-space {
  padding-top: var(--header-clearance);
  padding-bottom: var(--panel-bottom);
  scroll-margin-top: 0;
}
.chapter,
.system-overview > .chapter {
  padding-top: 12px;
  margin-bottom: clamp(20px, 3svh, 32px);
}
.section-heading { margin-bottom: 0; gap: 7%; }
.section-heading > h2, .section-lead, .insight-copy,
.service-intro > *, .system-heading > * { min-width: 0; }
.section-lead { max-width: 440px; flex-basis: 440px; }
.section-heading, .system-heading, .service-intro { align-items: end; }
.exchange-film-layout { gap: 40px; margin-top: 28px; }
.film-wrap { width: min(100%, var(--exchange-width, 100%)); }
.film-wrap video { object-fit: contain; }
.exchange-sequence > div { padding: 16px 0 18px 36px; }
.exchange-sequence > div > span { top: 21px; }
.exchange-sequence h3 { font-size: 1.35rem; }
.exchange-sequence p { max-width: 360px; }
.power-section { overflow: visible; }
.power-image {
  width: min(100%, var(--power-width, 1600px));
  margin: 62px auto 0;
}
.power-heading .eyebrow { margin-bottom: 18px; }
.power-figure figcaption { padding-top: 20px; }
.power-path { margin-top: 28px; }
.concept-caption { margin-top: 20px; }
/* Preserve the accepted V04 landing composition, independent of content limits below. */
.hero { --pad: clamp(24px, 5vw, 88px); }
.system-stage {
  --scene-height: var(--system-height, clamp(220px, calc(100svh - 440px), 680px));
}
.system-heading h2 br:first-of-type { display: initial; }
.economics { padding-top: 24px; scroll-margin-top: var(--header-clearance); }
.experience-label { margin-top: 32px; }
.experience-logos { padding: 20px 0; }
.contact-banner { padding-top: 30px; }
/* The supplied wordmark has no left inset; match the nearby text optically. */
.footer .footer-brand { transform: translateX(3px); }

@media (min-width: 1001px) {
  h2, .superwagon .section-heading h2,
  .power-heading h2, .system-heading h2 {
    font-size: clamp(2.4rem, min(4.2vw, 5.5svh), 3.7rem);
    line-height: 1.06;
  }
  .superwagon-title-break { display: none; }
  .system-heading h2 br:first-of-type { display: none; }
  .section-lead, .system-heading > p { font-size: 1.05rem; }
  .section-lead p+p { margin-top: 14px; }
  .service-contract { margin-top: 36px; }
  .customer-side h3 { font-size: clamp(4rem, 9svh, 7rem); }
  .economics { margin-top: 60px; }
  .cost-bars { height: clamp(180px, 30svh, 360px); }
  .cost-chart { margin-top: 50px; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .chapter, .system-overview > .chapter { margin-bottom: 18px; }
  .section-lead { font-size: 1rem; line-height: 1.45; }
  .section-lead p { line-height: 1.45; }
  .exchange-film-layout { margin-top: 22px; gap: 32px; }
  .exchange-sequence > div { padding-top: 12px; padding-bottom: 13px; }
  .exchange-sequence > div > span { top: 17px; }
  .exchange-sequence h3 { font-size: 1.2rem; margin-bottom: 5px; }
  .exchange-sequence p { font-size: .95rem; line-height: 1.45; }
  .power-image { margin-top: 54px; }
  .power-path { margin-top: 20px; }
  .power-figure figcaption { padding-top: 16px; }
  .power-figure figcaption p { font-size: 1rem; }
  .concept-caption { margin-top: 16px; }
}
/* Readable columns take priority over trying to fit a panel onto a screen. */
@media (max-width: 1000px) {
  .section-heading, .system-heading, .service-intro { display: block; }
  .section-lead, .system-heading > p, .service-intro > p {
    margin-top: 24px;
    max-width: 560px;
  }
  .exchange-film-layout { grid-template-columns: 1fr; gap: 32px; }
  .film-wrap { width: 100%; }
  .exchange-sequence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .exchange-sequence > div { padding-left: 0; }
  .exchange-sequence > div > span { display: block; position: static; margin-bottom: 12px; }
  .exchange-sequence h3 { font-size: 1.25rem; }
  .system-stage { width: 100%; }
  .power-heading { align-items: start; }
}
@media (max-width: 800px) {
  .insight-grid { grid-template-columns: 1fr; gap: 26px; }
  .power-heading { display: block; }
  .power-selector { display: inline-flex; margin-top: 24px; }
  .service-contract { grid-template-columns: 1fr; }
  .customer-side { padding-right: 0; }
  .ailit-side { border-left: 0; border-top: 1px solid #aebac3; padding: 24px 0 4px; }
  .experience-logos { grid-template-columns: repeat(3, 1fr); }
  .economics-heading { display: block; }
  .economics-heading > p { margin-top: 24px; }
}
@media (max-width: 600px) {
  .hero { --pad: 24px; }
  :root { --header-clearance: calc(max(16px, env(safe-area-inset-top)) + 82px); --pad: 24px; }
  .exchange-sequence { grid-template-columns: 1fr; gap: 0; }
  .exchange-sequence > div { padding-left: 36px; }
  .exchange-sequence > div > span { position: absolute; top: 21px; }
  .system-stage { width: calc(100% + var(--pad) * 2); }
  .power-image { margin-top: 80px; width: calc(100% + var(--pad) * 2); margin-left: calc(var(--pad) * -1); }
  .power-figure figcaption { display: block; }
  .economics { padding-top: 0; }
}