:root {
  --yt-space-section: clamp(4rem, 3rem + 2.2vw, 5rem);
  --yt-space-section-compact: clamp(3rem, 2.5rem + 1.5vw, 4rem);
  --yt-type-hero: clamp(2.625rem, 2rem + 2.4vw, 5rem);
  --yt-type-section: clamp(2rem, 1.5rem + 1.8vw, 3.625rem);
  --yt-type-subsection: clamp(1.5rem, 1.2rem + 1.25vw, 2.75rem);
  --yt-leading-display: 1.14;
  --yt-leading-copy: 1.65;
  --yt-measure-copy: 34rem;
}

main :is(h1, h2, h3) {
  text-wrap: balance;
}

main :is(h1, h2, h3) br {
  display: none;
}

main :is(p, li) {
  text-wrap: pretty;
}

main p {
  max-inline-size: min(100%, var(--yt-measure-copy)) !important;
  line-height: var(--yt-leading-copy);
}

.hero h1,
.product-hero h1,
.cp-hero-copy h1,
.solution-hero h1,
.campus-hero h1,
.commercial-hero h1,
.park-hero h1,
.field-hero h1 {
  font-size: var(--yt-type-hero);
  line-height: 1.02;
}

.section-title h2,
.chain-copy h2,
.scene-lead h2,
.service-photo h2,
.tech-title h2,
.trust h2,
.contact h2,
.product-title h2,
.path-heading h2,
.capability-lead h2,
.delivery-title h2,
.safety-copy h2,
.faq-title h2,
.product-contact h2,
.cp-title,
.feature-copy h2,
.contact-panel h2,
.solution-title h2,
.diagnosis-heading h2,
.capability-intro h2,
.delivery-heading h2,
.factory-boundary h2,
.factory-faq > header h2,
.factory-contact h2,
.campus-heading h2,
.after-hours-copy h2,
.mobile-heading h2,
.capability-title h2,
.campus-boundary h2,
.campus-contact h2,
.commercial-heading h2,
.closing-copy h2,
.commercial-contact h2,
.park-heading h2,
.operations-copy h2,
.park-contact h2,
.field-heading h2,
.boundary-title h2,
.field-contact h2 {
  font-size: var(--yt-type-section);
  line-height: var(--yt-leading-display);
}

.hardware-copy h3,
.platform-copy h3,
.scene h3,
.scene-text h3,
.cap-copy h3,
.factory-cap-copy h3,
.field-check-copy h3,
.component h3 {
  font-size: var(--yt-type-subsection);
  line-height: 1.12;
}

.section-pad,
.section-pad-dark,
.product-section,
.cp-section,
.solution-section,
.campus-pad,
.commercial-pad,
.park-pad,
.land-section,
.field-pad,
.boundary-sheet {
  padding-block: var(--yt-space-section);
}

.scenes {
  padding-top: var(--yt-space-section);
}

.scene {
  display: block;
  color: #fff;
}

.scene h3 {
  color: #fff;
}

.scene::after {
  background: linear-gradient(180deg, rgba(3, 12, 24, .08) 28%, rgba(3, 10, 20, .92));
}

body.corporate-page .industry-card,
body.corporate-page .industry-card h2 {
  color: #fff;
}

.operating-path,
.safety-section {
  padding-block: var(--yt-space-section) calc(var(--yt-space-section) + 1rem);
}

.contact,
.product-contact,
.factory-contact,
.campus-contact {
  min-height: auto;
  padding-block: var(--yt-space-section);
}

.contact > .contact-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.contact > div:not(.contact-glow),
.product-contact > div:not(.product-contact-glow) {
  grid-column: 1;
}

.contact > aside,
.product-contact > aside {
  grid-column: 2;
}

.capability-row,
.factory-cap-row,
.field-check-row {
  min-height: auto;
  padding-block: var(--yt-space-section);
}

.feature-split {
  min-height: auto;
}

.feature-split .feature-copy,
.service-hero,
.about-hero {
  padding-block: var(--yt-space-section);
}

.contact-panel,
.diagnosis-path,
.factory-boundary {
  padding-block: var(--yt-space-section);
}

.retail-cap,
.commercial-contact,
.park-contact,
.field-contact {
  padding-block: var(--yt-space-section);
}

.cap-card,
.about-principles article,
.service-stage article {
  min-height: 15rem;
}

.cap-card h3,
.about-principles h3,
.service-stage h3,
.condition-cards h3,
.energy-flow h3,
.note-wall h3,
.field-service h3,
.park-pains h3,
.cap-leaves h3,
.dayline h3,
.retail-service h3,
.day-schedule h3,
.campus-map h3 {
  margin-top: 4rem;
}

.steps-line article,
.trust-grid article {
  min-height: 11rem;
}

/* Keep section labels, headlines and explanations inside one reading cluster. */
@media (min-width: 901px) {
  .chain-copy {
    grid-template-columns: minmax(0, 1.22fr) minmax(18rem, .78fr);
    grid-template-areas:
      "chain-label ."
      "chain-title chain-summary";
    column-gap: clamp(3rem, 7vw, 7rem);
    row-gap: clamp(1.25rem, 2vw, 1.75rem);
    align-items: end;
  }

  .chain-copy > .kicker {
    grid-area: chain-label;
  }

  .chain-copy > h2 {
    grid-area: chain-title;
  }

  .chain-copy > p:last-child {
    grid-area: chain-summary;
    padding-bottom: .35rem;
  }

  .chain-visual {
    margin-top: clamp(3.5rem, 5vw, 4.5rem);
  }

  body.product-page :is(.product-title, .path-heading, .delivery-title, .safety-copy),
  body.manufacturing-page :is(.solution-title, .diagnosis-heading, .delivery-heading) {
    column-gap: 7vw;
    row-gap: clamp(1.25rem, 2vw, 1.75rem);
  }

  .trust {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
    grid-template-areas:
      "trust-label ."
      "trust-title trust-note"
      "trust-line trust-line";
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: end;
  }

  .trust > .kicker {
    grid-area: trust-label;
  }

  .trust > h2 {
    grid-area: trust-title;
  }

  .trust > .trust-line {
    grid-area: trust-line;
    width: 100%;
    margin-top: clamp(3.5rem, 5vw, 4.5rem);
  }

  .trust > p:last-child {
    grid-area: trust-note;
    align-self: end;
    margin: 0 0 .4rem;
  }
}

@media (max-width: 767px) {
  :root {
    --yt-space-section: 4rem;
    --yt-space-section-compact: 3rem;
  }

  .contact > div:not(.contact-glow),
  .product-contact > div:not(.product-contact-glow),
  .contact > aside,
  .product-contact > aside {
    grid-column: auto;
  }

  .cp-hero-copy,
  .feature-split .feature-copy,
  .service-hero,
  .about-hero {
    padding-block: var(--yt-space-section);
  }

  .cap-card h3,
  .about-principles h3,
  .service-stage h3,
  .condition-cards h3,
  .energy-flow h3,
  .note-wall h3,
  .field-service h3,
  .park-pains h3,
  .cap-leaves h3,
  .dayline h3,
  .retail-service h3,
  .day-schedule h3,
  .campus-map h3 {
    margin-top: 3rem;
  }

  .trust {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "trust-label"
      "trust-title"
      "trust-note"
      "trust-line";
  }

  .trust > .kicker {
    grid-area: trust-label;
  }

  .trust > h2 {
    grid-area: trust-title;
  }

  .trust > p:last-child {
    grid-area: trust-note;
    margin: 1.5rem 0 0;
  }

  .trust > .trust-line {
    grid-area: trust-line;
    margin-top: 2.5rem;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .trust {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "trust-label"
      "trust-title"
      "trust-note"
      "trust-line";
  }

  .trust > .kicker { grid-area: trust-label; }
  .trust > h2 { grid-area: trust-title; }
  .trust > p:last-child { grid-area: trust-note; margin: 1.5rem 0 0; }
  .trust > .trust-line { grid-area: trust-line; margin-top: 2.5rem; }
}