/* Useful service information shares the site's editorial visual language. */
.service-overview, .faq-section {
  padding: clamp(56px,7vw,104px) var(--pad);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px,6vw,96px);
}
.service-overview { border-bottom: 1px solid var(--line); }
.service-overview h1, .faq-section h2 {
  font-size: clamp(30px,3.6vw,58px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.service-overview > p { font-size: 16px; line-height: 1.8; max-width: 58ch; align-self: center; }
.faq-section { border-top: 1px solid var(--line); }
.faq-list { min-width: 0; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 500; line-height: 1.5;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { flex: 0 0 auto; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-list p { font-size: 15px; line-height: 1.8; padding: 0 0 24px; max-width: 64ch; }
.company-contact { display: grid; gap: 5px; font-size: 12px; font-style: normal; scroll-margin-top: 100px; }
.company-contact a { overflow-wrap: anywhere; }
.company-contact a:hover { text-decoration: underline; }
.site-footer { flex-wrap: wrap; }
.site-footer .footer-links { flex-wrap: wrap; }
.breadcrumbs { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: '/'; margin-right: 14px; }
.breadcrumbs a:hover { text-decoration: underline; }

/* Hero copy stays visually identical while the descriptive heading is H1. */
.gateway-bottom .hero-slogan, .cover-intro .cover-slogan, .social-masthead, .cinema-title {
  color: var(--ink); font-family: var(--head); font-weight: 700;
}
.gateway-bottom .hero-slogan { font-size: clamp(34px,3.7vw,58px); line-height: 1.06; letter-spacing: -.045em; max-width: none; justify-self: start; }
.cover-intro .cover-slogan { font-size: clamp(38px,4.1vw,68px); line-height: 1.06; letter-spacing: -.045em; margin: 0; max-width: none; }
.cinema-title { color: #f4f4f4; }

/* Progressive enhancement: content and contact remain usable without scripts. */
.no-js .site-header { position: relative; }
.no-js .motion-toggle, .no-js .menu-toggle, .no-js .work-controls, .no-js .director-dots { display: none; }
.no-js .reveal { opacity: 1; transform: none; }
.no-js .work-track { display: grid; grid-template-columns: 1fr; width: 100%; height: auto; gap: 24px; padding: 0 var(--pad); }
.no-js .references-sequence .reference-card { width: 100%; max-width: 1100px; margin: auto; }
.no-js .work-window { overflow: visible; min-height: 0; }
.no-js .work-bottom, .no-js .scene-progress { display: none; }
.no-js .reference-preview { max-width: 260px; }
.no-js .cinema-video { display: none; }
.film-native-fallback { padding: 32px var(--pad); }
.film-native-fallback video { max-width: 1100px; margin: auto; aspect-ratio: 16/9; object-fit: contain; background: #111; }
.no-js .ribbon-frame button { cursor: default; }
.no-js .director-step { visibility: visible; }

@media (max-width:1100px) {
  .gateway-bottom .hero-slogan { font-size: 36px; }
}
@media (max-width:760px), (max-width:1000px) and (max-height:500px) {
  .service-overview, .faq-section { grid-template-columns: 1fr; gap: 24px; padding-block: 52px; }
  .service-overview h1, .faq-section h2 { font-size: clamp(28px,7.6vw,42px); }
  .service-overview > p, .faq-list p { font-size: 16px; line-height: 1.7; }
  .faq-list summary { font-size: 16px; }
  .company-contact { font-size: 14px; gap: 8px; }
  .company-contact a { min-height: 36px; display: flex; align-items: center; }
  .new-home .gateway-bottom .hero-slogan { grid-column: 1; font-size: clamp(26px,7.2vw,34px); line-height: 1.04; max-width: none; }
  .new-social .cover-intro .cover-slogan {
    grid-column: 1; grid-row: 3; align-self: start; margin-top: 30px;
    font-size: clamp(24px,6.8vw,48px); line-height: 1.12; max-width: none;
    position: relative; z-index: 4;
  }
  .no-js .site-header { height: auto; flex-wrap: wrap; padding-top: 20px; padding-bottom: 16px; }
  .no-js .site-header .navigation {
    display: flex; position: static; order: 3; width: 100%; max-height: none;
    flex-direction: row; flex-wrap: wrap; gap: 4px 18px; padding: 14px 0 0;
    margin-top: 14px; border-bottom: 0;
  }
  .no-js .site-header .navigation a { width: auto; min-height: 44px; font-size: 16px; }
  .no-js .references-sequence .reference-card { grid-template-columns: 1fr; }
  .no-js .reference-preview { width: min(100%,260px); justify-self: center; }
}
@media (max-width:1000px) and (max-height:500px) {
  .new-home .gateway-bottom .hero-slogan { font-size: clamp(26px,5.5vw,34px); }
}