/* Layout follows the available viewport, including rotation and browser zoom. */
:root{--page-gutter:clamp(18px,3vw,64px)}
html{scroll-padding-top:100px}
img{max-width:100%}
.nav{padding-inline:var(--page-gutter);gap:24px}
.brand,.modal-close{flex-shrink:0}
.nav-links{gap:clamp(12px,2vw,26px)}
.hero{height:100svh;min-height:0}
.hero-copy{padding:100px var(--page-gutter) clamp(28px,5svh,64px)}
.hero h1{font-size:clamp(3.5rem,min(14vw,19svh),13.8rem);line-height:.95}
.hero-scroll{right:var(--page-gutter)}
.intro,.collections,.films,.services,.contact,.xp-block{padding-inline:var(--page-gutter)}
.intro,.services,.contact-inner,.xp-head,.quote-shell,.access-shell{min-width:0}
.intro>*,.services>*,.contact-inner>*,.xp-head>*,.quote-shell>*,.access-shell>*,.form-grid>*,.package-grid>*,.stories-grid>*,.proof-grid>*{min-width:0}
.collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.package-grid,.proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.quote-line{flex-wrap:wrap;gap:6px 18px}
.quote-line span{overflow-wrap:anywhere}
.field input,.field select,.access-form input{min-width:0;max-width:100%;font-size:1rem}
.xp-head h2,.package-card h3,.quote-summary h3,.story-copy h3{line-height:1.02}
.modal-bar{gap:16px}.modal-bar>div,.modal-bar h3{min-width:0;overflow-wrap:anywhere}
.viewer img{max-height:90svh;object-fit:contain}
.video-wrap{min-height:calc(100svh - 80px)}
.video-wrap iframe{max-height:calc(100svh - 110px)}
.faq-q{gap:20px}.faq-q span:last-child{flex-shrink:0}
.contact-actions a,.quote-wa{max-width:100%;text-align:center;overflow-wrap:anywhere}
@media(max-width:1050px){
  .nav{flex-wrap:wrap;gap:8px;padding-block:12px}
  .nav-links{width:100%;justify-content:space-between;gap:12px;overflow-x:auto}
  .nav-links a{display:inline-flex!important;white-space:nowrap;align-items:center;min-height:44px;font-size:.875rem;letter-spacing:.04em}
  .intro,.services,.contact-inner{grid-template-columns:1fr;gap:40px}
  .package-grid,.proof-grid{grid-template-columns:1fr}
  .package-card{min-height:420px}
}
@media(max-width:900px){
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-count,.hero-scroll{display:none}
  .hero-copy{display:block}
  .xp-head h2{font-size:clamp(2.5rem,9vw,5rem)}
}
@media(max-width:650px){
  .logo-intro-wordmark{font-size:clamp(2rem,12vw,4.5rem)}
  .hero h1{font-size:clamp(2.6rem,min(15vw,16svh),6rem);max-width:10ch}
  .kicker{font-size:.875rem;letter-spacing:.07em}
  .collection-grid,.film-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .collection-card,.collection-card:nth-child(6n+1),.collection-card:nth-child(6n+4){grid-column:span 1;min-height:0;aspect-ratio:3/4}
  .film-card,.film-card:nth-child(5n+1){grid-column:span 1;min-height:0;aspect-ratio:3/4}
  .collection-meta{gap:6px}
  .collection-meta h3{font-size:1rem;line-height:1.15;overflow-wrap:anywhere}
  .collection-meta small{font-size:.75rem;letter-spacing:.02em}
  .film-meta{left:10px;right:10px;bottom:12px}
  .film-meta b{font-size:1rem;line-height:1.15}
  .film-meta small{font-size:.75rem;letter-spacing:.02em}
  .film-number{font-size:2.5rem;right:10px;top:12px}
  .play{width:36px;height:36px;left:10px;top:12px}
  .hover-hint{display:none}
  .collections,.films,.services,.contact,.xp-block{padding-block:64px}
  .intro{padding-block:64px}
  .section-head h2,.films h2,.services h2,.contact h2{font-size:clamp(2.6rem,12vw,4.5rem);line-height:1.02}
  .category-filters{flex-wrap:wrap;overflow:visible;gap:8px}
  .category-filter{white-space:normal;text-align:left;font-size:.875rem}
  .collection-meta{padding:12px;flex-wrap:wrap}
  .package-card{padding:26px;min-height:380px}
  .quote-form,.quote-summary{padding:18px}
  .grade-shell{height:56svh;min-height:280px}
  .service{grid-template-columns:24px minmax(0,1fr);gap:10px}
  .service span:last-child{grid-column:2}
  .gallery-hero-copy h4{font-size:clamp(2.5rem,12vw,4.5rem);line-height:1.02}
  .modal-bar h3{font-size:1.3rem;line-height:1.15}
  .contact-copy p{font-size:1rem}
  footer{overflow-wrap:anywhere;font-size:.875rem}
  .field label,.xp-kicker,.package-price,.quote-note{font-size:.875rem}
  .date-chip small{font-size:.75rem}
}
@media(orientation:landscape) and (max-height:600px){
  .hero-copy{padding-top:110px;padding-bottom:20px}
  .hero h1{font-size:clamp(2rem,13svh,5rem);max-width:18ch;line-height:1.02}
  .kicker{margin-bottom:8px}
  .hero-count,.hero-scroll{display:none}
  .gallery-hero{height:85svh}
  .gallery-hero-copy h4{font-size:clamp(2rem,11svh,4rem)}
}
@media(hover:none){
  .package-card:hover,.film-card:hover,.film-card.reveal.in-view:hover,.collection-card.reveal.in-view:hover{transform:none;box-shadow:none}
  .collection-card:hover .collection-meta{transform:none}
}