/* Test variant B: headline on the photo, offer card beside it at equal height */
.hero-b .v3-hero{display:grid!important;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:1fr auto auto;grid-template-areas:none!important;column-gap:24px;row-gap:0;box-sizing:border-box;width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding:28px var(--gutter) 64px!important}
.hero-b .v3-hero > .hero-head,.hero-b .v3-hero > .hero-stage{display:contents!important}
.hero-b .hero-photo{grid-area:1 / 1 / 4 / 2!important;margin:0!important;position:relative;min-height:clamp(500px,calc(100vh - 150px),680px);border-radius:var(--r-md);overflow:hidden;align-self:stretch}
.hero-b .hero-photo .hero-live,.hero-b .hero-photo picture{position:absolute!important;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;border-radius:0}
.hero-b .hero-photo img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 55%}
.hero-b .hero-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,16,32,0) 30%,rgba(8,16,32,.55) 62%,rgba(8,16,32,.88) 100%),linear-gradient(90deg,rgba(8,16,32,.45) 0%,rgba(8,16,32,0) 60%)}
.hero-b .hero-photo figcaption{position:absolute;top:16px;left:16px;right:16px;z-index:2;margin:0!important;padding:0!important;color:#fff}
.hero-b .hero-photo figcaption .lot-tag{background:rgba(255,255,255,.92);color:var(--ink)}
.hero-b .hero-photo figcaption .hero-photo-cap{background:rgba(8,16,32,.55);padding:4px 10px;border-radius:6px}
.hero-b .hero-photo figcaption strong,.hero-b .hero-photo figcaption small{color:#fff!important}
.hero-b .hero-head > .hero-title{grid-area:2 / 1 / 3 / 2!important;position:relative;z-index:3;padding:0 48px;align-self:end}
.hero-b .hero-head > .lead{grid-area:3 / 1 / 4 / 2!important;position:relative;z-index:3;margin:0!important;padding:16px 48px 44px!important;max-width:680px;color:rgba(255,255,255,.9)!important}
.hero-b .v3-hero h1,.hero-b .v3-hero h1 *{color:#fff!important}
.hero-b .v3-hero h1{font-size:clamp(44px,4.6vw,72px);text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero-b .v3-hero .badge{color:#fff!important;background:rgba(255,255,255,.14);padding:6px 12px;border-radius:999px;backdrop-filter:none}
.hero-b .v3-hero .badge svg{stroke:#fff}
.hero-b .hero-sheet{grid-area:1 / 2 / 4 / 3!important;align-self:stretch;margin:0!important;display:flex;flex-direction:column;justify-content:space-between;position:static!important}
@media (min-width:1025px) and (max-width:1180px){.hero-b .v3-hero{grid-template-columns:minmax(0,1fr) 360px}}
@media (max-width:1024px){
  .hero-b .v3-hero{grid-template-columns:1fr;grid-template-rows:1fr auto auto auto;padding:0 0 40px!important}
  .hero-b .hero-photo{grid-area:1 / 1 / 4 / 2!important;border-radius:0;min-height:min(56svh,470px)}
  .hero-b .hero-head > .hero-title{padding:0 var(--gutter)}
  .hero-b .hero-head > .lead{padding:12px var(--gutter) 28px!important}
  .hero-b .v3-hero h1{font-size:clamp(36px,10vw,56px)}
  .hero-b .hero-sheet{grid-area:4 / 1 / 5 / 2!important;margin:20px var(--gutter) 0!important}
}
/* Mouse parallax depths (driven by hero-b.js): same direction, deeper = less */
@media (min-width:1025px) and (pointer:fine){
  .hero-b .v3-hero{--mx:0;--my:0}
  .hero-b .hero-photo picture{translate:calc(var(--mx) * -16px) calc(var(--my) * -10px);will-change:translate}
  .hero-b .hero-head > .lead{translate:calc(var(--mx) * 9px) calc(var(--my) * 6px);will-change:translate}
  .hero-b .hero-head > .hero-title{translate:calc(var(--mx) * 12px) calc(var(--my) * 8px);will-change:translate}
  .hero-b .hero-photo figcaption{translate:calc(var(--mx) * 14px) calc(var(--my) * 9px);will-change:translate}
}
/* Parallax room: picture is oversized so drifting never reveals the panel edge */
@media (min-width:1025px){
  .hero-b .hero-photo .hero-live{inset:-18px!important;width:calc(100% + 36px)!important;height:calc(100% + 36px)!important}
  .hero-b .hero-photo .hero-live picture{inset:0!important;width:100%!important;height:100%!important}
  .hero-b .hero-photo img{object-position:50% 40%!important}
  .hero-b .hero-photo{--kb-end:1}
}