/* Each content section owns one viewport; longer content extends the page naturally.
   The approved video hero, its geometry and playback remain in styles.css. */
html { scroll-padding-top: 0; }
.media-hero,
.tuning,
.services-section,
.about,
.journal,
.contact {
  --screen-padding: 64px;
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  max-height: none;
  scroll-margin-top: 0;
}
.media-hero,
.tuning,
.services-section,
.journal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--screen-padding) var(--page-inset);
  overflow: visible;
}
/* Center the complete composition, including the reserved comparison area. */
.tuning { justify-content: center; overflow-anchor: none; }
#tuning-results { overflow-anchor: none; }
#tuning-results .tune-card {
  animation: tuning-card-in 420ms cubic-bezier(.2, .7, .2, 1) both;
}
#tuning-results .tune-card:nth-child(2) { animation-delay: 80ms; }
@keyframes tuning-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #tuning-results .tune-card { animation: none; }
}
.media-hero > *,
.tuning > *,
.services-section > *,
.journal > * { flex-shrink: 0; min-width: 0; }
.section-heading,
.tuning .section-heading {
  padding-top: 32px;
  gap: 24px;
  margin-bottom: 32px;
}
.section-heading > h2,
.tuning .section-heading > h2 {
  font-size: clamp(48px, 4.296875vw, 88px);
  line-height: 1.02;
}
.section-heading > p:last-child,
.tuning .section-heading > p:last-child { font-size: var(--type-body); line-height: 1.6; }
.services-section { background: #1d1d1d; border-top: 1px solid var(--line); }
.services-section .services { margin-top: 0; }
.services-section .services article { display: flex; flex-direction: column; padding-top: 32px; }
.services-section .services p { min-height: 0; margin-bottom: 32px; }
.services-section .service-link { margin-top: auto; }
.media-heading { margin-bottom: 32px; }
.media-heading h2 { font-size: clamp(40px, 3.125vw, 64px); }
.media-track { width: 100%; }
.media-footer { margin-top: 16px; }
.about { align-items: stretch; }
.about-copy { padding-block: var(--screen-padding); align-self: center; }
.about-copy h2 { font-size: clamp(48px, 4.296875vw, 88px); }
.about-image { min-height: 400px; }
.journal-heading { margin-bottom: 32px; }
.journal-heading h2 { font-size: clamp(48px, 4.296875vw, 88px); }
.journal-heading .eyebrow { margin-bottom: 16px; }
.journal-list { width: 100%; }
.contact { padding-block: var(--screen-padding); align-items: center; }
.contact h2 { font-size: clamp(48px, 4.296875vw, 88px); }
.contact-note { margin-top: 32px; }

/* The catalogue has two states: compact selection, then a complete comparison.
   Selection/results never get a fixed height or their own vertical scrollbar. */
@media (min-width: 701px) {
  .tuning { --screen-padding: 48px; }
  #tuning-results { display: flex; flex-direction: column; min-height: clamp(528px, 26.5625vw, 600px); }
  #tuning-results .tune-grid { flex: 1; }
  .tuning .section-heading { margin-bottom: 24px; }
  .tuning .section-heading > h2 { font-size: clamp(48px, 3.515625vw, 72px); }
  .vehicle-finder { padding: 24px; }
  .finder-heading { margin-bottom: 16px; }
  .finder-heading h3 { font-size: clamp(28px, 1.5625vw, 36px); }
  .vehicle-fields { gap: 24px; }
  .vehicle-fields label { font-size: 14px; }
  .vehicle-fields select { height: 48px; min-height: 48px; margin-top: 8px; font-size: 16px; }
  .finder-help { margin-top: 16px; gap: 16px; }
  .finder-help a, #reset-vehicle, #retry-catalogue { min-height: 48px; }
  .tuning-empty { min-height: 128px; padding-block: 24px; }
  .result-heading { margin: 24px 0 16px; gap: 24px; }
  .result-heading h3 { font-size: clamp(32px, 1.953125vw, 40px); margin-bottom: 8px; }
  .result-heading .eyebrow { margin-bottom: 8px; }
  .result-heading .eyebrow { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .selected-engine { font-size: 16px; }
  .tune-grid { gap: 24px; }
  .tune-card { padding: 24px; }
  .tune-card-top { margin-bottom: 16px; }
  .tune-card h4 { font-size: clamp(30px, 1.7578125vw, 36px); }
  .tune-metrics { margin-bottom: 16px; }
  .tune-metrics thead th { padding-bottom: 8px; }
  .tune-metrics tbody th { padding-block: 12px; }
  .stage-description { font-size: 16px; line-height: 1.5; margin-bottom: 16px; min-height: 3em; }
  .tune-card .button { padding: 12px 16px; min-height: 48px; font-size: 14px; }
  .unavailable-copy { font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
  .catalogue-note { padding: 16px 0 0; gap: 24px; font-size: 12px; line-height: 1.6; }
  .catalogue-note p { max-width: 78ch; }
  .contact { --screen-padding: 48px; }
  .enquiry label { margin-bottom: 16px; }
  .enquiry input, .enquiry select { min-height: 48px; padding-block: 12px; }
  .enquiry textarea { padding-block: 12px; }
  .enquiry .button { min-height: 48px; padding-block: 12px; }
}
@media (min-width: 1100px) {
  .tuning { --screen-padding: 32px; }
  .tuning .section-heading { grid-template-columns: 1.9fr 1fr; }
  .tuning .section-heading h2 br { display: none; }
  .tuning .section-heading h2 span::before { content: ' '; }
  .tuning .section-heading h2 { font-size: clamp(40px, 3.125vw, 64px); }
}
@media (min-width: 701px) and (max-height: 740px) {
  .media-hero,
  .tuning,
  .services-section,
  .about,
  .journal,
  .contact { --screen-padding: 48px; }
}
@media (max-width: 700px) {
  .tuning { justify-content: flex-start; }
  .media-hero,
  .tuning,
  .services-section,
  .about,
  .journal,
  .contact { --screen-padding: 48px; }
  .section-heading,
  .tuning .section-heading { padding-top: 32px; margin-bottom: 24px; }
  .section-heading > h2,
  .tuning .section-heading > h2,
  .about-copy h2,
  .journal-heading h2,
  .contact h2 { font-size: clamp(44px, 11.7vw, 70px); }
  .section-heading > h2 { margin-bottom: 24px; }
  .media-heading { margin-bottom: 24px; }
  .media-heading h2 { font-size: 38px; }
  .services-section .services article,
  .services-section .services article + article { padding: 24px 0; }
  .services-section .services p { margin-bottom: 24px; }
  .about-image { min-height: 380px; }
  .journal-heading { margin-bottom: 24px; }
  .contact { display: block; }
  .contact-note { margin: 32px 0 40px; }
}