/* PGJ P2 homepage hero, v2 (QA round 1 fixes) */
:root{--hdr:0px}
.hh{position:relative;isolation:isolate;overflow:hidden;min-height:560px;height:100vh;height:calc(100svh - var(--hdr));background:#0b1028;color:#fff8ec;display:flex;align-items:center;padding:0}
/* layer order (back to front): image, snow, scrim, copy. The snow sits under the scrim so the scrim dims it too */
.hh-bg{position:absolute;left:0;right:0;top:-40px;bottom:0;z-index:-4;will-change:transform}
.hh-bg picture,.hh-bg img{display:block;width:100%;height:100%}
.hh-bg img{object-fit:cover;object-position:62% 72%}
.hh-snow{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none;will-change:transform}
.hh-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
 radial-gradient(ellipse 48% 64% at 15% 52%,rgba(8,12,34,.82) 0,rgba(8,12,34,.66) 48%,rgba(8,12,34,0) 100%),
 linear-gradient(90deg,rgba(8,12,34,.70) 0,rgba(8,12,34,.56) 28%,rgba(8,12,34,.20) 44%,rgba(8,12,34,0) 58%),
 linear-gradient(180deg,rgba(8,12,34,.25) 0,rgba(8,12,34,0) 22%)}
/* soft hand-off into the cream page */
.hh::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(253,248,241,0) 0,rgba(253,248,241,.55) 60%,#fdf8f1 100%)}
.hh-copy{position:relative;width:min(28vw,30rem);margin-left:max(1.5rem,4.5vw);will-change:transform}
.hh h1{font-size:clamp(2.6rem,5vw,6rem);line-height:1;margin:.2rem 0 1rem;color:#fff8ec;text-shadow:0 2px 24px rgba(8,12,34,.55)}
.hh-hook{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.35;color:#fff8ec;margin:0;max-width:24rem;text-shadow:0 1px 12px rgba(8,12,34,.6)}
.hh .kicker{margin-bottom:.6rem}
.intro{padding:4rem 0 3.5rem;text-align:center}
.intro h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.intro h2 .pop{color:var(--berry)}
.intro .lead{margin:0 auto}
@media (max-width:1100px) and (orientation:landscape){.hh-copy{width:29vw}.hh-hook{font-size:1.05rem}}
/* Portrait/mobile: wider art-directed crop pushed down on short screens so the headline sits in open sky above Wren's hood */
@media (orientation:portrait){
 .hh{align-items:flex-start}
 .hh-bg{top:calc(max(0px,480px - 50vh) - 40px)}
 .hh-bg img{object-position:66% 100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 72px);mask-image:linear-gradient(180deg,transparent 0,#000 72px)}
 .hh-scrim{background:linear-gradient(180deg,rgba(8,12,34,.80) 0,rgba(8,12,34,.70) 30%,rgba(8,12,34,.45) 40%,rgba(8,12,34,.10) 50%,rgba(8,12,34,0) 56%)}
 .hh-copy{width:auto;margin:0;padding:clamp(1.25rem,4vh,3rem) 1.5rem 0;max-width:34rem}
}
@media (orientation:portrait) and (max-width:520px){
 .hh h1{font-size:2.6rem;margin:.1rem 0 .5rem}
 .hh-hook{font-size:1.05rem;line-height:1.3;max-width:21rem}
 .hh .kicker{font-size:.75rem;margin-bottom:.35rem}
}
/* one-row header on small phones, all three nav items kept */
@media (max-width:520px){
 .site-header .wrap{flex-wrap:nowrap;padding:.55rem .65rem;gap:.4rem}
 .site-header .wrap{padding-top:.25rem;padding-bottom:.25rem}
 .brand{padding:11px 0;min-height:44px}
 .brand img{height:22px}
 .nav{flex-wrap:nowrap;gap:0;font-size:.76rem}
 .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .3rem;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.hh-bg,.hh-snow,.hh-copy{will-change:auto;transform:none!important}}
.nav a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:400px){.site-header .wrap{padding-left:.5rem;padding-right:.5rem;gap:.25rem}.brand{padding:0;min-width:44px;min-height:44px;justify-content:center}.brand img{height:32px;width:32px;object-fit:cover;object-position:left center}.nav{font-size:12px}.nav a{padding:0 .3rem}}
.cards{grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr))}