/* A concise opening: the configurator is the main experience. */
.studio-hero {min-height:0;height:clamp(480px,72svh,720px);display:flex;align-items:center;background:#f4f6f5}
.hero-copy {padding-top:0;width:56%}
.hero-copy h1 {font-size:clamp(50px,4.65vw,78px);margin:20px 0 22px}
.hero-copy p {font-size:clamp(15px,1.08vw,18px);line-height:1.55;max-width:520px}
.hero-actions {margin-top:28px;gap:14px}
.hero-cta {min-height:52px;font-size:14px;padding-inline:26px}
.hero-cta.primary {min-width:210px}
.hero-cta.secondary {min-width:156px}
.hero-benefits,.hero-motto {display:none}
.hero-stripes {opacity:.35}
.hero-product {width:44%;right:4%}
.hero-watermark {opacity:.025}
.hero-shadow {opacity:.55}
.hero-callout {padding:10px 14px;min-width:0;box-shadow:none}
.hero-callout strong {font-size:12px}
.hero-callout span {font-size:11px}
.callout-grip,.callout-shaft,.callout-artwork,.callout-blade {--bubble-x:1px;--bubble-y:-3px}
.hero-dot {width:8px;height:8px;border-width:2px}
@media (min-width:761px) and (max-width:1050px) {
 .hero-copy {margin-left:5%;width:60%}
 .hero-copy h1 {font-size:clamp(39px,5.05vw,50px)}
 .hero-product {width:45%;right:2%}
 .hero-cta {font-size:12px;padding-inline:20px}
 .hero-cta.primary {min-width:180px}.hero-cta.secondary {min-width:135px}
}
@media (max-width:760px) {
 .studio-hero {height:auto;min-height:0;align-items:stretch;padding-bottom:12px}
 .hero-copy {width:100%;margin:0;padding:30px 25px 0}
 .hero-copy h1 {font-size:clamp(35px,9.3vw,60px);margin:16px 0}
 .hero-copy p {font-size:13px;max-width:340px}
 .hero-actions {margin-top:20px;gap:10px}
 .hero-cta {min-height:44px;font-size:11px;padding-inline:17px}
 .hero-cta.primary {min-width:172px}.hero-cta.secondary {min-width:130px}
 .hero-product {position:relative;right:auto;width:100%;height:310px;margin-top:10px}
 .hero-callout {padding:8px 11px}
 .hero-callout strong {font-size:10px}.hero-callout span {font-size:9px}
}