/* Homepage: photoreal scroll showcase. A canvas plays the door-closing clips frame by frame as you scroll. */
.door-pin{position:relative;height:520vh;background:#0A1A3C}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--sky,#1B3E86)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 60%}
.stage.ready .poster{visibility:hidden}
.stage-shade{position:absolute;inset:0 0 auto;height:52%;background:linear-gradient(180deg,rgba(5,14,36,.78) 0%,rgba(5,14,36,.42) 55%,transparent 100%);pointer-events:none}
.stage-foot{position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(0deg,rgba(5,14,36,.72),transparent);pointer-events:none}

.hero-copy{position:absolute;inset:0 0 auto;z-index:3;padding-top:clamp(24px,5vh,64px)}
.hero-copy .wrap{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.hero-copy h1{color:#fff;max-width:15ch;font-size:clamp(2.3rem,5.2vw,4.4rem);text-shadow:0 6px 30px rgba(0,0,0,.45)}
.hero-copy h1 em{font-style:normal;color:var(--red-hot)}
.hero-copy .lede{color:#E2E8F5;max-width:46ch;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-flags{display:flex;flex-wrap:wrap;gap:8px}
.hero-flags span{font:700 .82rem/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(5,14,36,.45);border:1px solid rgba(255,255,255,.25);padding:8px 11px;border-radius:4px;backdrop-filter:blur(6px)}
.hero-flags span b{color:var(--gold)}

.scroll-cue{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font:700 .85rem/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.scroll-cue .handle{width:44px;height:14px;border-radius:7px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Style caption shown while the doors are closed */
.style-cap{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:3;max-width:min(440px,calc(100% - 32px));background:rgba(255,255,255,.96);color:var(--ink);border-radius:12px;padding:20px 22px;border-left:6px solid var(--red);box-shadow:0 24px 50px -20px rgba(0,0,0,.6);opacity:0;transform:translateY(16px);visibility:hidden}
@media (min-width:1200px){.style-cap{left:calc((100vw - var(--maxw))/2 + 16px)}}
.style-cap .n{font:700 .8rem/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.style-cap h3{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--navy);margin:8px 0 6px}
.style-cap p{color:var(--muted);font-size:1rem;line-height:1.45}
.style-cap a{display:inline-block;margin-top:10px;font:700 .9rem/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--red);text-decoration:none}

/* Style chips: which style is showing; click to jump */
.style-chips{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;gap:8px}
.style-chips button{font:700 .78rem/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(5,14,36,.5);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 12px;cursor:pointer;backdrop-filter:blur(6px)}
.style-chips button[aria-pressed="true"]{background:var(--red);border-color:var(--red)}
.skip-link{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:18px;z-index:3;color:#fff;font:700 .8rem/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:rgba(5,14,36,.45);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:8px 10px}
.loadbar{position:absolute;left:0;bottom:0;height:3px;background:var(--red-hot);width:0;z-index:4;transition:width .2s,opacity .4s}

@media (max-width:760px){
  .style-chips{display:none}
  .style-cap{bottom:auto;top:20px;left:16px;right:16px;max-width:none;padding:16px 18px}
  .style-cap p{font-size:.95rem}
  .hero-copy .lede{font-size:1rem}
  .scroll-cue{display:none}
  .skip-link{display:none}
}

/* Door styles gallery */
.styles-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:980px){.styles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.styles-grid{grid-template-columns:1fr}}
.style-card{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.style-card img{aspect-ratio:4/3;object-fit:cover;object-position:62% 64%;width:100%}
.style-card div{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px}
.style-card h3{font-size:1.5rem;color:var(--navy)}
.style-card p{color:var(--muted);font-size:.98rem}

/* Reduced motion: no pin, show the open photo; the styles gallery below shows each door */
.rm .door-pin{height:auto}
.rm .stage{position:relative;height:auto;aspect-ratio:16/9;max-height:90vh}
.rm .stage canvas,.rm .scroll-cue,.rm .style-chips,.rm .style-cap,.rm .skip-link{display:none}
.rm .stage .poster{visibility:visible}
@media (max-width:760px){.rm .stage{aspect-ratio:auto;height:auto}.rm .hero-copy{position:relative;background:#0A1A3C;padding-bottom:24px}.rm .stage .poster{position:relative;height:auto}.rm .stage-shade{display:none}}