/* Keep the navigation in flow so the hero always starts below it. */
.site-header,
.site-header.scrolled {
  position: sticky;
  top: 0;
  padding-block: 12px;
  min-height: 70px;
}
.site-header nav { gap: clamp(14px, 2.2vw, 32px); }

.product-hero.cinema {
  display: grid;
  align-items: center;
  isolation: isolate;
  height: auto;
  min-height: clamp(520px, calc(100svh - 97px), 920px);
  max-height: none;
  padding: clamp(60px, 9vh, 110px) clamp(24px, 5vw, 96px) 80px;
  background: #222621;
}
.product-hero .hero-product { z-index: -2; object-position: 60% 52%; }
.product-hero .cinema-shade {
  z-index: -1;
  background: linear-gradient(90deg, #131712e8 0%, #131712a3 31%, #1317121c 62%, transparent 82%),
    linear-gradient(0deg, #13171294, transparent 27%);
}
.product-hero .cinema-copy {
  position: static;
  width: min(100%, 550px);
  max-width: none;
}
.product-hero h1 {
  font-size: clamp(51px, min(5.25vw, 12svh), 102px);
  line-height: .98;
  margin-bottom: 24px;
  text-wrap: balance;
}
.product-hero .eyebrow { margin-bottom: 20px; }
.product-hero .hero-intro { margin-bottom: 24px; }
.product-hero .hero-explore {
  min-height: 48px;
  background: #fffdf8;
  color: #252622;
  font-size: 14px;
  text-shadow: none;
}
.product-hero .cinema-bottom a { min-height: 44px; }

@media (max-width: 820px) {
  .site-header { gap: 10px; }
  .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    padding: 12px 5%;
    background: #fffdf8;
    color: #252622;
    flex-wrap: wrap;
  }
  .site-header nav.open { display: flex; }
  .site-header nav a, .site-header .nav-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
  }
}

@media (max-width: 680px) {
  .site-header, .site-header.scrolled { min-height: 64px; padding-block: 9px; }
  .site-header .wordmark { font-size: clamp(25px, 7.4vw, 31px); }
  .header-actions { gap: 10px; }
  .product-hero.cinema {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
  }
  .product-hero .hero-product {
    position: static;
    z-index: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 74% center;
  }
  .product-hero .cinema-shade { display: none; }
  .product-hero .cinema-copy { padding: 28px 6% 30px; text-shadow: none; }
  .product-hero h1 {
    font-size: clamp(38px, 9.6vw, 64px);
    text-wrap: initial;
    margin-bottom: 16px;
  }
  .product-hero .eyebrow { margin-bottom: 14px; }
  .product-hero .hero-intro { margin-bottom: 18px; }
  .product-hero .cinema-bottom { display: none; }
  .collection-grid { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; }
  .product-visual { height: auto; aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.studio-gallery { margin: 0; }
.studio-gallery figcaption { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.studio-gallery figcaption button { min-width:48px; min-height:44px; font-size:19px; }
.studio-gallery figcaption span { font-size:12px; letter-spacing:.1em; }
.studio-gallery .product-visual img { transform:none; }
.roof-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:20px; }
.roof-grid figure { margin:0; background:#e7e5de; padding:clamp(18px,3vw,40px); }
.roof-grid svg { width:100%; max-height:135px; margin-bottom:20px; }
.roof-grid h3 { margin-bottom:10px; }
.simple-steps details { padding:20px 0; border-top:1px solid var(--line); }
.simple-steps details p { margin:12px 0; }
.simple-steps details summary::after { content:'+'; }
.simple-steps details[open] summary::after { content:'−'; }
.portal-lengths { flex-wrap:wrap; }
@media (max-width:680px) { .roof-grid { grid-template-columns:1fr; } }