/* Motion is optional: HTML remains visible before JavaScript and without it. */
:root { --motion-ease:cubic-bezier(.22,1,.36,1) }
.nav-shell { height:88px;background:var(--white) }
.site-nav { width:100%;z-index:30 }
.site-nav.is-floating { position:fixed;inset:0 0 auto;height:64px;background:var(--white) }
.nav-location { display:none }
.nav-links a { transition:color 180ms ease,background-color 180ms ease }
.nav-links>a:not(.nav-download)[aria-current="location"] { color:var(--rose) }
.nav-links>a:not(.nav-download) { position:relative;min-height:44px;display:inline-flex;align-items:center }
.nav-links>a:not(.nav-download)::after { content:'';position:absolute;bottom:3px;left:0;right:0;height:2px;background:var(--rose);transform:scaleX(0);transition:transform 220ms var(--motion-ease) }
.nav-links>a[aria-current="location"]::after { transform:scaleX(1) }
.redesign section[id] { scroll-margin-top:88px }

/* Inactive panels still contribute to the grid height, preventing tab jumps.
   hidden + visibility + inert keep their content out of reading/focus order. */
.data-panels.is-enhanced { display:grid }
.data-panels.is-enhanced>.data-panel { grid-area:1 / 1;margin-top:0;min-width:0 }
.data-panels.is-enhanced>.data-panel[hidden] { display:grid!important;visibility:hidden;pointer-events:none }
.data-panels.is-enhanced>.data-panel>* { min-width:0 }

.button, .nav-download, .film-toggle { transition:transform 180ms var(--motion-ease),background-color 180ms ease,filter 180ms ease }
.button>span[aria-hidden], .text-link>span, .hero-bottom-v2>a>span, .button>svg { transition:transform 220ms var(--motion-ease) }
.film-toggle { min-width:44px;min-height:44px }
.button:active, .nav-download:active { transform:scale(.98) }
.text-link, .nav-download { min-height:44px }
.faq details { overflow:hidden }
.faq summary { min-height:54px }
.faq summary:focus-visible { outline-offset:-3px;border-radius:8px }
.faq summary::after, .faq details[open] summary::after { content:'+';transition:transform 220ms var(--motion-ease);transform-origin:center }
.faq details[open] summary::after { transform:rotate(45deg) }
.gallery-pagination { display:none }

/* Keep the compact hero subtitle consistent across the existing breakpoints. */
.redesign .hero-copy-v2 h2 { font:500 22px/1.6 var(--sans);letter-spacing:-.5px }
@media(min-width:901px) and (max-width:1250px) {
  .redesign .hero-copy-v2 h2 { font-size:19px }
}
@media(min-width:701px) and (max-width:900px) {
  .redesign .hero-copy-v2 h2 { font-size:16px }
}
@media(hover:hover) and (pointer:fine) {
  .button:not(:disabled):hover, .nav-download:hover { transform:translateY(-2px) }
  .button:hover>span[aria-hidden], .text-link:hover>span { transform:translate(2px,-2px) }
  .hero-bottom-v2>a:hover>span, .button:hover>svg { transform:translateY(3px) }
  .collection-card img { transition:transform 320ms var(--motion-ease) }
  .collection-card:hover img { transform:translateY(-4px) }
  .film-toggle:hover { transform:scale(1.05) }
}
@media(max-width:700px) {
  .nav-shell { height:76px }
  .site-nav.is-floating { height:calc(60px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top) }
  .site-nav.is-floating .nav-inner { height:60px;gap:10px }
  .site-nav.is-floating .brand { flex:none;gap:7px }
  .site-nav.is-floating .wordmark { font-size:24px }
  .site-nav.is-floating .brand img { width:28px;height:28px }
  .site-nav.is-floating .nav-location { display:block;flex:1;min-width:0;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
  .site-nav.is-floating .nav-download { min-height:44px;display:flex;align-items:center;padding:9px 12px;white-space:nowrap }
  .nav-links>a:not(.nav-download) { display:none }
  .redesign section[id] { scroll-margin-top:calc(80px + env(safe-area-inset-top)) }
  .data-panels.is-enhanced>.data-panel[hidden] { display:flex!important }
  .data-panels.is-enhanced>.data-panel>.data-visual { flex:1 }
  .redesign .hero-copy-v2 h2 { font-size:19px;line-height:1.65 }
  .screen-gallery { touch-action:pan-x pan-y pinch-zoom;overscroll-behavior-x:contain;position:relative }
  .gallery-pagination { display:flex;align-items:center;justify-content:center;gap:0;margin-top:3px }
  .gallery-pagination button { display:grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;border-radius:8px }
  .gallery-pagination button::after { content:'';width:6px;height:6px;border-radius:6px;background:var(--muted);transition:width 220ms var(--motion-ease),background-color 220ms ease }
  .gallery-pagination button[aria-current="true"]::after { width:20px;background:var(--rose) }
  .gallery-page-count { font-size:10px;letter-spacing:1px;color:var(--muted);margin-left:13px;min-width:49px }
  .mobile-swipe { margin-top:14px }
  .film-toggle { min-width:44px;min-height:44px }
  .button:hover { filter:none }
}
@media(max-width:360px) {
  .site-nav.is-floating .wordmark { display:none }
  .redesign .hero-copy-v2 h2 { font-size:16px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .redesign *, .redesign *::before, .redesign *::after { animation:none!important;transition:none!important }
  .button:active, .nav-download:active, .collection-card:hover img, .button:hover, .nav-download:hover, .film-toggle:hover { transform:none }
  .text-link:hover>span, .hero-bottom-v2>a:hover>span, .button:hover>span[aria-hidden], .button:hover>svg { transform:none }
}