/* PRF — sections use the available screen and grow with their content.
   Small viewport units keep the layout stable around mobile browser controls.
   The partner strip and footer retain their natural, compact height. */
:root {
  --prf-header-height: 100px;
  --prf-viewport: 100vh;
  --prf-panel-space: clamp(36px, 7vh, 88px);
  --prf-hero-space: clamp(28px, 5vh, 72px);
}

@supports (height: 100svh) {
  :root {
    --prf-viewport: 100svh;
    --prf-panel-space: clamp(36px, 7svh, 88px);
    --prf-hero-space: clamp(28px, 5svh, 72px);
  }
}

.hero {
  display: flex;
  flex-direction: column;
  min-height: var(--prf-viewport);
  padding-top: var(--prf-header-height);
}

.hero-content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: var(--prf-hero-space);
}

.hero-foot {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  gap: 24px;
  margin-top: auto;
  padding-top: 20px;
  padding-bottom: 24px;
}

.hero-foot > span {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.hero-foot-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.solutions,
.analysis-section,
.process-section,
.about-section,
.closing-section {
  display: flex;
  align-items: center;
  min-height: calc(var(--prf-viewport) - var(--prf-header-height));
  padding-block: var(--prf-panel-space);
}

.faq-section {
  min-height: calc(var(--prf-viewport) - var(--prf-header-height));
  align-content: center;
  padding-block: var(--prf-panel-space);
}

/* Reserve room for the photo caption without forcing a tall image on laptops. */
.about-photo {
  height: clamp(300px, calc(var(--prf-viewport) - var(--prf-header-height) - var(--prf-panel-space) - var(--prf-panel-space) - 50px), 545px);
}

@media (max-width: 1000px) {
  :root { --prf-header-height: 90px; }
}

@media (max-width: 760px) {
  :root {
    --prf-header-height: 83px;
    --prf-panel-space: clamp(32px, 5vh, 56px);
    --prf-hero-space: clamp(28px, 4vh, 48px);
  }

  .hero-foot {
    gap: 16px;
    padding-top: 18px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }

  .hero-foot-controls { gap: 10px; }
  .about-photo { height: clamp(240px, 42vh, 360px); }
}

@supports (height: 100svh) {
  @media (max-width: 760px) {
    :root {
      --prf-panel-space: clamp(32px, 5svh, 56px);
      --prf-hero-space: clamp(28px, 4svh, 48px);
    }

    .about-photo { height: clamp(240px, 42svh, 360px); }
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  :root {
    --prf-panel-space: 32px;
    --prf-hero-space: 24px;
  }
}

/* Printing keeps the document in its natural reading flow. */
@media print {
  .hero,
  .solutions,
  .analysis-section,
  .process-section,
  .about-section,
  .faq-section,
  .closing-section { min-height: 0; }
}