/* Comfortable reading, shorter journeys, and accessible brand text. */
@media (min-width: 801px) {
  .hero h1 { font-size: clamp(44px, 4.4vw, 64px); }
}
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus { outline-color: var(--green); }

@media (max-width: 800px) {
  .section { padding-top: 40px; padding-bottom: 40px; }
  .hero { padding-top: 26px; padding-bottom: 36px; gap: 30px; }
  .hero .eyebrow { margin-bottom: 18px; }
  .hero h1 { margin-bottom: 20px; }
  .hero-intro { margin-top: 0; margin-bottom: 22px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { gap: 10px; }
  .hero-foot { margin-top: 20px; }
  .portrait { height: 360px; }
  .audience-inner { padding-top: 18px; padding-bottom: 18px; gap: 12px; }

  .mineo-film { padding-top: 40px !important; padding-bottom: 40px; }
  .film-copy { margin-bottom: 22px; }
  .film-copy .eyebrow { margin-bottom: 12px; }
  .film-intro { margin-top: 16px; }
  .film-intro p { margin-bottom: 0; }
  .film-media > .text-link { margin-top: 14px; }
  .film-media > details { margin-top: 10px; }

  .section-heading, .section-heading-wide { margin-bottom: 24px; }
  .services { gap: 20px; }
  .service-visual { aspect-ratio: 1.5; }
  .service-visual img { top: calc(50% + 8px); }
  .service-body { padding: 20px; }
  .service h3 { margin: 14px 0 12px; }
  .service .service-description { margin-bottom: 16px; }
  .service-details { margin-bottom: 8px; }
  .illustration-caption { margin-top: 18px; }

  .benefits-intro { margin-bottom: 22px; }
  .benefits-purpose { margin-bottom: 22px; }
  .benefits-grid { gap: 20px; margin-bottom: 16px; }
  .benefit { padding-top: 16px; }
  .benefit h3 { margin-bottom: 6px; }
  .training-audiences { margin-top: 18px; margin-bottom: 18px; }
  .approach-intro { gap: 20px; }
  .brand-story { padding: 14px 18px; max-width: 340px; }
  .logo-motion { max-width: 210px; }
  .visual-steps { gap: 22px; margin-top: 26px; }
  .visual-steps h3 { margin-bottom: 5px; }

  .about-grid { gap: 26px; }
  .experience-panel { padding: 22px; }
  .experience-number { font-size: 86px; }
  .experience-number sup { font-size: 36px; }
  .experience-panel .eyebrow { margin-bottom: 6px; }
  .experience-panel p { margin-top: 6px; }
  .about-copy > p { margin-bottom: 18px; }

  .prices { gap: 12px; }
  .price { padding: 18px 20px; }
  .price-index { display: none; }
  .price h3 { margin: 0 0 12px; min-height: 0; }
  .price .price-amount { font-size: 46px; }
  .price .price-unit { margin: 0; }
  .price-format { margin-top: 12px; padding-top: 10px; }
  .price-footer { gap: 12px; margin-top: 20px; }

  .faq { gap: 18px; }
  .faq h2 { margin-bottom: 0; }
  .contact { padding: 40px 0; }
  .contact-intro .contact-links { margin-top: 22px; }
  .contact-links > a { padding-top: 18px; padding-bottom: 18px; }
  .contact-links i { top: 30px; }
  .contact-links > p { margin-top: 18px; margin-bottom: 8px; }
  .contact-grid { gap: 28px !important; }
  .contact-form-card { padding: 24px 20px; }
  .contact-form-heading p { margin-bottom: 18px; }
  .contact-form-card label { margin-top: 16px; }
}