/* Home layouts. Current responsive rules only; shared controls live in components.css. */
:root { --hero-height:calc(100svh - var(--header-height)); --intro-overlap:var(--hero-height); }
.hero { overflow:hidden; }
.hero-media { position:absolute; inset:0; overflow:hidden; }
.hero-poster { display:contents; }
.hero-image { width:100%; height:100%; object-fit:cover; }
.hero-media.is-video-ready .hero-image { visibility:hidden; }
.hero-controls { position:absolute; bottom:50px; left:0; right:0; display:flex; align-items:center; }
.intro { background:var(--offwhite); }
.intro-grid { display:grid; grid-template-columns:minmax(0,650fr) minmax(0,605fr); gap:25px; }
.intro-copy { display:flex; flex-direction:column; align-items:flex-start; }
.intro-image { width:100%; height:320px; object-fit:cover; }
.product .eyebrow { margin-bottom:20px; ;font-size:13px;line-height:1.6;}
.product-grid { display:grid; grid-template-columns:minmax(0,900fr) minmax(0,352fr); gap:28px; min-height:502px; }
.product-visual { position:relative; background:var(--color-surface); border:1px solid var(--line); height:502px; overflow:hidden; }
.product-visual #product-image { position:relative; z-index:0; width:100%; height:100%; object-fit:cover; }
.product-empty { width:100%; height:100%; background:var(--offwhite); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:24px; color:var(--gray); gap:12px; font-size:14px; }
.product-empty span { font-size:30px; color:var(--charcoal); }
.product-copy { display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.category { font-size:14px; color:var(--gray); line-height:20px; margin-bottom:4px; }
.product-copy h3 { font-size:30px; font-weight:500; line-height:42px; margin-bottom:20px; }
.product-description { font-size:14px; letter-spacing:-.28px; line-height:20px; color:var(--gray); }
.product-arrows { display:flex; gap:9px; }
.product-navigation { display:contents; }
.product-tab-controls { display:none; }
.brand { border-top:1px solid var(--line); }
.brand .eyebrow { line-height:1.6; margin-bottom:20px; ;font-size:13px;}
.brand h2 { font-size:40px; font-weight:500; line-height:1.4; letter-spacing:-.8px; margin-bottom:20px; }
.brand-visual { position:relative; width:100%; height:560px; overflow:hidden; }
.brand-visual>img { width:100%; height:100%; object-fit:cover; }
.brand-arrow { position:absolute; top:50%; transform:translateY(-50%); --media-control-opacity:0; }
.brand-arrow.previous { left:16px; }
.brand-arrow.next { right:16px; }
.brand-visual:focus-within .brand-arrow { --media-control-opacity:.8; }
@media(hover:hover) and (pointer:fine) {
  .brand-visual:hover .brand-arrow { --media-control-opacity:.8; }
}
@media(hover:none) {
  .brand-arrow { --media-control-opacity:.8; }
}
.brand-copy { margin-top:20px; min-height:110px; }
.brand-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:40px; }
.brand-links a { border:1px solid var(--line); padding:20px; text-align:left; color:var(--gray); font-size:16px; letter-spacing:-.32px; line-height:22px; min-height:90px; }
.brand-links a span { display:block; font-size:13px; font-weight:500; line-height:18px; letter-spacing:0; margin-bottom:8px; }
.brand-links a:hover { border-color:var(--charcoal); color:var(--charcoal); }
.finder { background:var(--charcoal); color:white; text-align:center; }
@media(max-width:1200px) {
  .intro-image { height:300px; }
  .product-grid { grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); }
  .product-visual { height:auto; aspect-ratio:898/500; }
  .product-grid { min-height:380px; }
  .brand-links { gap:16px; }
  .brand-links a { padding:16px; font-size:14px; }
  .brand-visual { height:auto; aspect-ratio:1280/560; }
}
@media(max-width:800px) {
  .hero-controls { bottom:24px; }
  .intro-grid { grid-template-columns:1fr; gap:32px; }
  .intro-image { width:100%; height:auto; aspect-ratio:605/320; }
  .product-grid { grid-template-columns:1fr; gap:24px; min-height:0; }
  .product-copy { gap:20px; }
  .product-copy h3 { font-size:28px; }
  .product-visual { aspect-ratio:898/500; }
  .brand h2 { font-size:30px; letter-spacing:-.6px; }
  .brand-links { grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
  .brand-copy { min-height:0; }
  .brand-arrow { display:none; }
  .product-arrows .icon-button { position:relative; }
  .product-arrows .icon-button { isolation:isolate; border:0; background:transparent; font-size:16px; }
  .product-arrows .icon-button::before { content:""; position:absolute; inset:6px; z-index:-1; border:1px solid currentColor; background:var(--color-white); }
  .product-arrows .icon-button:hover::before { background:var(--color-text); }
}
@media(max-width:420px) {
  .hero-controls { bottom:14px; }
  .brand h2 { font-size:26px; }
  .brand-links a { font-size:12px; padding:14px; }
}
.hero-stage { position:relative; background:var(--charcoal); }
.hero { position:sticky; isolation:isolate; }
.hero-controls { z-index:3; }
.hero-image { position:absolute; inset:0; z-index:0; }
.intro { position:relative; z-index:2; box-shadow:0 -18px 40px rgba(0,0,0,.08); }
.product-actions { display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
@media(max-width:800px) {
  .hero { aspect-ratio:auto; }
  .product-actions { gap:20px; }
  .intro { box-shadow:0 -12px 25px rgba(0,0,0,.08); }
}
#product-details { margin-top:24px; }
.finder-submit:not(.header-finder)>img { flex:0 0 21px; width:21px; height:20px; object-fit:contain; }
#product-previous { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; transition:none; pointer-events:none; }
#product-previous.is-fading { opacity:0; transition:opacity 1.4s cubic-bezier(.4,0,.2,1); }
#product-previous { z-index:1; }






.product-pagination[hidden] { display:none; }
@media(prefers-reduced-motion:reduce) {
  #product-previous.is-fading { transition:none; }
}
.hero-stage { height:calc(var(--hero-height) * 2); }
.hero { top:var(--header-height); height:var(--hero-height); min-height:0; max-height:none; }
.intro { min-height:var(--hero-height); display:flex; align-items:center; margin-top:calc(-1 * var(--hero-height)); }
.intro-grid { align-items:center; }
@media(max-width:800px) {
  .intro-image { max-height:30svh; object-fit:cover; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-stage { height:var(--hero-height); }
  .hero { position:relative; top:0; }
  .intro { margin-top:0; box-shadow:none; }
}
.intro.section { padding:0; display:flex; flex-direction:column; align-items:stretch; }
.intro>.intro-image { aspect-ratio:auto; flex-shrink:0; }
.intro-sticky>.intro-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.intro-copy { gap:32px; }
.intro h1 { font-size:clamp(40px,3.75vw,60px); line-height:1.22; letter-spacing:-.04em; }
.intro-details { display:flex; flex-direction:column; align-items:flex-start; gap:30px; min-width:0; }
.intro-details .body-copy { font-size:15px; line-height:1.5; letter-spacing:-.3px; }
.intro-actions { display:flex; gap:30px; flex-wrap:wrap; }
.intro-actions svg { flex-shrink:0; }
@media(max-width:1100px) {
  .intro-sticky>.intro-grid { gap:28px; }
  .intro-details .body-copy br { display:none; }
  .intro-actions { gap:16px; }
}
@media(max-width:800px) {
  .intro-sticky>.intro-grid { grid-template-columns:1fr; }
  .intro-copy { gap:22px; }
  .intro h1 { font-size:36px; }
  .intro-details { gap:24px; }
  .intro-actions { gap:16px; }
}
@media(max-width:380px) {
  .intro h1 { font-size:32px; }
  .intro-actions { gap:12px; }
}
.intro.section { position:relative; isolation:isolate; justify-content:flex-end; overflow:hidden; background:#42392f; color:#fff; }
.intro>.intro-image { position:absolute; inset:0; width:100%; height:100%; min-height:0; max-height:none; object-fit:cover; object-position:center; z-index:-2; }
.intro-sticky::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(to bottom,transparent 32%,rgba(34,34,33,.48) 65%,rgba(34,34,33,.64)); }
.intro-sticky>.intro-grid { min-height:0; padding:40px 0 80px; align-items:end; }
.intro .slogan, .intro .body-copy { color:#fff; }
@media(max-width:800px) {
  .intro>.intro-image { height:100%; min-height:0; object-position:70% center; }
  .intro-sticky>.intro-grid { padding:64px 0 48px; gap:28px; }
  .intro-sticky::before { background:linear-gradient(to bottom,rgba(34,34,33,.06),rgba(34,34,33,.55) 50%,rgba(34,34,33,.68)); }
}
.hero-controls { gap:14px; flex-wrap:nowrap; }
.hero-controls .hero-product { min-height:56px; padding:14px 22px; font-size:18px; font-weight:600; line-height:26px; white-space:nowrap; }
.video-control { display:grid; place-items:center; flex:0 0 56px; width:56px; height:56px; border:1px solid currentColor; }
.video-sound svg { width:22px; height:22px; }
.video-sound .sound-waves, .video-sound.is-sound-on .sound-muted { display:none; }
.video-sound.is-sound-on .sound-waves { display:block; }
#hero-youtube { position:absolute; top:50%; left:50%; width:max(100%,calc(var(--hero-height) * 16 / 9)); height:max(100%,56.25vw); transform:translate(-50%,-50%); border:0; z-index:1; opacity:0; pointer-events:none; }
#hero-youtube.is-ready { opacity:1; pointer-events:auto; }
@media (max-width:800px) {
  .hero-controls { gap:10px; }
  .hero-controls .hero-product { min-height:44px; padding:10px 14px; font-size:14px; line-height:22px; }
  .video-control { flex-basis:44px; width:44px; height:44px; }
}
@media (max-width:380px) {
  .hero-controls .hero-product { padding:10px; font-size:12px; }
}
@media (max-width:1100px) {
  .hero-stage { height:auto; }
  .hero { position:relative; top:0; height:auto; aspect-ratio:auto; background:var(--color-white); }
  .hero-media { position:relative; inset:auto; width:100%; aspect-ratio:16 / 9; background:var(--color-text); }
  .hero-image { width:100%; height:100%; object-fit:contain; }
  #hero-youtube { inset:0; width:100%; height:100%; transform:none; }
  .hero-controls { position:static; min-height:64px; padding:10px 0; gap:8px; flex-wrap:nowrap; }
  .hero-controls,.video-control { --media-control-color:var(--color-text); --media-control-hover-background:rgb(34 34 33 / 10%); }
  .hero-controls .hero-product { min-height:44px; padding:10px 12px; font-size:12px; font-weight:var(--weight-regular); line-height:20px; }
  .video-control { flex:0 0 44px; width:44px; height:44px; }
  .video-sound svg { width:18px; height:18px; }
  .intro { margin-top:0; box-shadow:none; }
}
@media (max-width:800px) {
  .product-navigation { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; margin-bottom:20px; }
  .product-navigation .tabs { min-width:0; margin:0; scrollbar-width:none; }
  .product-navigation .tabs::-webkit-scrollbar { display:none; }
  .product-tab-controls { display:flex; align-items:center; min-height:50px; }
  .product-tab-controls .product-arrows { gap:0; }
  .product-copy { min-height:0; justify-content:flex-start; }
  .product-actions:empty { display:none; }
}
@media (max-width:800px), (max-width:1100px) and (pointer:coarse) {
  .hero-media { width:100%; height:auto; aspect-ratio:9 / 16; }
  #hero-youtube { inset:0; width:100%; height:100%; aspect-ratio:auto; max-width:none; transform:none; }
  .hero-controls.is-relocated { display:none; }
  .video-sound.is-header-sound { flex:0 0 44px; width:44px; height:44px; padding:0; border:0; }
  .video-sound.is-header-sound svg { width:18px; height:18px; }
}

/* Shared mobile eyebrow size. */
@media (max-width:800px) {
.brand .eyebrow,
.product .eyebrow { font-size:12px; }
}

/* Preserve the small visual dots while expanding mobile touch targets. */


/* Scroll-driven overlapping images; the copy stays in one sticky scene. */
.intro.section { display:block; overflow:visible; height:calc(var(--intro-scene-height, var(--hero-height)) * 4); min-height:0; }
.intro-sticky { position:sticky; top:var(--header-height); height:var(--intro-scene-height,var(--hero-height)); isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; }
.intro-images { position:absolute; inset:0; z-index:-2; transform:none; }
.intro-images>.intro-image { position:absolute; inset:0; display:block; width:100%; height:var(--intro-scene-height,var(--hero-height)); max-height:none; object-fit:cover; object-position:center; }
@media(max-width:800px) {
 .intro-sticky>.intro-grid { padding:28px 0 32px; gap:20px; }
 .intro-copy { gap:16px; }
 .intro-details { gap:18px; }
 .intro-details .body-copy { font-size:14px; }
 .intro-images>.intro-image { object-position:60% center; }
}
@media print {
 .intro.section { height:auto; }
 .intro-sticky { position:relative; top:0; }
 .intro-images { transform:none; }
}


/* Opaque slide layers avoid ghosting between two photographs. */
.intro-slide { position:absolute; inset:0; display:block; overflow:hidden; }
.intro-slide>.intro-image { width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;display:block; }
.intro-slide:not(:first-child) { clip-path:inset(100% 0 0); }
@media(max-width:800px) { .intro-slide>.intro-image { object-position:center; } }