/* The relaxed portrait frame ends at the white T-shirt, around waist level. */
.hero-figure{position:absolute;z-index:2;bottom:0;right:9%;height:calc(100% - 14px);aspect-ratio:1122/1255;overflow:hidden;pointer-events:none;transform:scale(.92);transform-origin:bottom center}
.hero-figure::before{content:"";position:absolute;inset:0 1% 25%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 48% 30%,#fff6e02b 0%,#fff6e012 40%,#fff6e000 70%);filter:blur(12px)}
body[data-design] .hero-figure .hero-guide{position:relative;z-index:1;display:block;inset:auto;height:auto;width:100%;max-width:none;object-fit:initial;object-position:initial;margin:0;opacity:1;mask-image:none;-webkit-mask-image:none;filter:drop-shadow(0 0 8px #c9a56820)}
@media(min-width:1650px){.hero-figure{right:max(7%,calc((100vw - 1370px)/2))}}

/* Narrow screens follow the text height, with no empty image area below CTA. */
@media(max-width:1000px){
  body[data-design] .hero{height:auto;min-height:0;display:block;padding:48px 0 32px}
  .hero-inner{height:auto;display:block}
  .hero-copy{width:82%;padding:0}
  .hero-figure{height:calc(100% - 24px);right:-24px;opacity:.67}
  .hero-orbits{display:none!important}
  body[data-design] .hero-background{background-size:cover;background-position:72% 22%;opacity:.7}
  body[data-design=cyan] .hero:before{background:linear-gradient(100deg,#000e26f2,#000e26b8 54%,#000e2655)}
  body[data-design=gold] .hero:before{background:linear-gradient(100deg,#00131cf2,#00131cb8 54%,#00131c55)}
  body[data-design=blue] .hero:before{background:linear-gradient(100deg,#fffffff2,#ffffffc9 54%,#ffffff66)}
  .hero-actions{margin-top:26px}
}

@media(min-width:651px) and (max-width:1000px){
  .hero h1{font-size:clamp(35px,5.1vw,49px)}
  .hero-kicker{font-size:clamp(17px,2.4vw,23px);margin-bottom:23px}
  .hero-lead{font-size:clamp(17px,2.3vw,21px);margin-top:23px}
  .hero-actions .button{font-size:16px;min-width:190px;padding-inline:20px}
}

@media(max-width:650px){
  body[data-design] .hero{height:auto;min-height:0;padding:31px 0 26px}
  .hero-inner{height:auto;display:block}
  .hero-copy{width:100%;padding:0}
  .hero-kicker{font-size:clamp(11px,3.3vw,18px);line-height:1.75;letter-spacing:0;margin-bottom:18px}
  .hero-kicker:after{margin-top:10px}
  body[data-design=gold] .hero-kicker:after{width:52px}
  .hero h1{font-size:clamp(25px,6.7vw,41px);line-height:1.5;letter-spacing:-.07em}
  .hero-lead{font-size:clamp(14px,3.8vw,19px);line-height:1.85;margin-top:19px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:23px}
  .hero-actions .button{min-width:0;min-height:49px;font-size:12px;gap:8px;padding:11px 9px;white-space:nowrap}
  .hero-actions .arrow{width:16px;height:16px}
  .hero-figure{height:clamp(240px,70vw,340px);max-height:calc(100% - 20px);right:-24px;opacity:.42}
  body[data-design=blue] .hero-figure{opacity:.4}
  body[data-design] .hero-background{background-size:cover;background-position:72% 18%;opacity:.48}
  body[data-design=cyan] .hero:before{background:linear-gradient(100deg,#000e26f5,#000e26d4 48%,#000e2677)}
  body[data-design=gold] .hero:before{background:linear-gradient(100deg,#00131cf5,#00131cd4 48%,#00131c77)}
  body[data-design=blue] .hero:before{background:linear-gradient(100deg,#fffffff5,#ffffffdc 48%,#ffffff99)}
  body[data-design=blue] .hero-copy,body[data-design=blue] .hero-lead{text-shadow:0 1px 12px #ffffff}
}

@media(max-width:360px){
  body[data-design] .hero{padding-top:27px;padding-bottom:24px}
  .hero h1{font-size:25px}
  .hero-actions{gap:8px;margin-top:21px}
  .hero-actions .button{font-size:11px;gap:5px;padding-inline:7px}
  .hero-figure{height:240px;right:-32px}
}