/* ==========================================================================
   Responsive layers for the base, header and opening film
   (section layouts carry their own media queries in sections.css)
   ========================================================================== */

/* Very small phones */
@media (max-width: 359px) {
  .btn { padding-inline: 18px; letter-spacing: 0.12em; }
  .intro__actions .btn, .cta__actions .btn { flex: 1 1 100%; }
}

/* Phones */
@media (max-width: 767px) {
  .brand img { height: 58px; }
  .cine-copy { top: calc(var(--header-h) + 7vh); }
  .cine-chapter__rule { margin: 20px 0 16px; }
  .cine-figure { left: var(--edge); right: auto; justify-items: start; text-align: left; bottom: calc(clamp(20px, 4vh, 40px) + 64px); }
  .cine-figure__label::before { display: none; }
  .cine-seg { padding-top: 14px; }
  .cine-seg__label { display: none; }
  .cinematic__cue { display: none; }
}

/* Touch screens: thumb-sized targets (44 px) without changing how things look */
@media (pointer: coarse) {
  a, button, [role='tab'], summary, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(11, 37, 69, 0.12); }
  .cap__link, .site-footer .link-underline { display: inline-block; padding-block: 12px; }
  .site-footer__nav ul { gap: 0; }
  .site-footer__bottom ul { gap: 0 20px; }
  .contact__email { display: inline-flex; align-items: center; min-height: 44px; }
  .cine-seg { padding-bottom: 12px; }
}

/* ≥ 900 px — tablets landscape / small laptops */
@media (min-width: 900px) {
  :root { --header-h: 80px; }
  .section-head--split { grid-template-columns: 1.3fr 1fr; gap: 64px; }
}

/* ≥ 1100 px — desktop navigation */
@media (min-width: 1100px) {
  .nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* ≥ 1600 px — large and ultrawide */
@media (min-width: 1600px) {
  :root { --container: 1480px; }
}

@media print {
  .site-header, .scroll-progress, .cinematic, .mobile-menu { display: none !important; }
  body, .section, .section--light, .story, .cta, .gallery { background: #fff !important; color: #000 !important; }
  .story.is-pinned { height: auto; }
  [data-reveal], [data-mask], .w__i, .story__step { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
