/* Original immersive hero structure, approved wine/ivory/gold identity.
   Background photographs contain no logos; the original brand mark is unchanged. */
.hero{background:#741F29;color:#F5F0E8;border-bottom:0}
.hero-scene{overflow:hidden;min-height:100svh;padding-block:calc(var(--header-height) + 30px) 105px}
.hero-backdrops{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#541923}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:1;transform:scale(1);transform-origin:center center;will-change:transform}
.hero-tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(85,20,31,.94) 0%,rgba(104,27,39,.8) 42%,rgba(44,15,25,.53) 100%),linear-gradient(0deg,rgba(44,12,20,.36),transparent 55%)}
.hero-grid{position:relative;z-index:1;grid-template-columns:1fr 1.02fr;gap:clamp(25px,4vw,65px)}
.hero-copy{max-width:630px}
.hero-copy .eyebrow{color:#E0C79F;letter-spacing:.18em;font-size:10px;margin-bottom:30px}
.hero-copy h1{font-size:clamp(46px,5vw,78px);line-height:1.17;letter-spacing:-.04em;color:#F5F0E8}
.hero-copy .hero-title-state em{color:#DFC18C!important;-webkit-text-fill-color:#DFC18C;font-style:italic}
.hero-intro{color:#F0E5DA;font-size:15px;line-height:1.9;max-width:41ch;margin-bottom:27px}
.hero-secondary{color:#F5EBDD;border-color:rgba(223,193,140,.7);font-size:11px}
.hero-note{color:#DCC8B7;font-size:10px;max-width:none;letter-spacing:.025em}
.hero-visual{background:none;border:0;aspect-ratio:auto;min-width:0;width:100%;max-width:630px;justify-self:end}
.hero-visual:before,.hero-visual:after{display:none}
.hero-visual .chart-figure{position:relative;inset:auto;width:100%;max-width:none;padding:0;margin:0;opacity:1;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-visual #celestial-chart{display:block;width:100%;height:min(43vw,calc(100svh - 280px));min-height:280px;max-width:none;color:#F0E7D6;overflow:visible}
.hero-visual .chart-caption{padding-top:11px;text-align:center;max-width:100%;margin:0}
.chart-stage-title{font-size:23px;color:#F3E4CF}
.chart-stage-description{color:#E9D9CB;font-size:11px;max-width:43ch;line-height:1.7;margin-top:7px}
.chart-example{color:#D6BFAF;font-size:9px;margin-top:8px}
.hero-bottom{position:absolute;bottom:22px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:28px}
.hero-scroll{color:#E8D4BD;font-size:10px}
.hero-scroll .icon{color:#DFC18C}
.chart-controls{justify-content:flex-end;gap:24px}
.chart-controls button{color:#DDCDBF;font-size:10px;min-height:44px}
.chart-controls button[aria-pressed="true"]{color:#FFF5E5;border-color:#DFC18C}
@media(min-width:761px) and (max-height:740px){
 .hero-scene{padding-block:calc(var(--header-height) + 22px) 87px}
 .hero-copy h1{font-size:clamp(43px,4.5vw,67px)}
 .hero-copy .eyebrow{margin-bottom:20px}
 .hero-intro{font-size:14px;line-height:1.8;margin-bottom:22px}
 .hero-note{margin-top:20px}
 .hero-visual{max-height:none;aspect-ratio:auto}
 .hero-visual #celestial-chart{height:calc(100svh - 265px);min-height:270px}
 .chart-stage-title{font-size:21px}
}
@media(min-width:761px) and (max-width:1050px){
 .hero-grid{gap:24px;grid-template-columns:1fr 1fr}
 .hero-copy h1{font-size:clamp(40px,4.8vw,51px)}
 .hero-intro{font-size:15px}
 .hero-visual{aspect-ratio:auto}
 .hero-visual #celestial-chart{height:43vw}
 .hero-bottom{gap:15px}
 .chart-controls{gap:13px}
 .chart-controls button{font-size:9px}
 .hero-scroll{font-size:9px;letter-spacing:0}
}
@media(max-width:760px){
 .hero-scene{min-height:0;padding-block:calc(var(--header-height) + 42px) 26px;overflow:hidden}
 .hero-grid{grid-template-columns:1fr;gap:29px}
 .hero-copy{max-width:none}
 .hero-copy .eyebrow{font-size:9px;margin-bottom:23px}
 .hero-copy h1{font-size:clamp(40px,7.7vw,59px);line-height:1.17;margin-bottom:25px}
 .hero-intro{font-size:15px;line-height:1.85;max-width:43ch;margin-bottom:25px}
 .hero-secondary{font-size:11px}
 .hero-note{display:block;font-size:9px;line-height:1.9;margin-top:23px;max-width:35ch}
 .hero-visual{max-width:510px;justify-self:center;aspect-ratio:auto}
 .hero-visual .chart-figure{width:100%;padding:0}
 .hero-visual #celestial-chart{width:100%;height:auto;min-height:0;aspect-ratio:1}
 .hero-visual .chart-caption{padding-top:0}
 .chart-stage-title{font-size:22px}
 .chart-stage-description{font-size:10px;max-width:37ch}
 .chart-example{font-size:8px;margin-top:7px}
 .hero-bottom{position:static;transform:none;display:flex;flex-direction:column-reverse;gap:13px;padding-inline:var(--gutter);margin-top:20px}
 .hero-scroll{display:none}
 .chart-controls{justify-content:center;gap:25px;flex-wrap:nowrap}
 .chart-controls button{font-size:10px;padding-inline:2px}
 .hero-tint{background:linear-gradient(180deg,rgba(92,23,35,.92),rgba(85,24,38,.78) 48%,rgba(45,15,25,.66))}
 .hero-bg{object-position:63% center}
}
@media(max-width:370px){
 .hero-copy h1{font-size:37px}
 .hero-intro{font-size:15px}
 .chart-controls{gap:17px}
}
@media(prefers-reduced-motion:reduce){
 .hero-bg{transform:none!important;will-change:auto}
 .hero-visual .chart-figure{opacity:1}
 .hero-scene{min-height:0}
}
/* A pinned desktop scene must fit the viewport at every desktop panel size.
   Let the SVG shrink inside its column instead of disabling the pin. */
@media(min-width:761px){
 .hero-scene{height:100svh;min-height:0;padding-block:calc(var(--header-height) + 24px) 90px}
 .hero-grid{flex:1;min-height:0;height:100%;grid-template-rows:minmax(0,1fr)}
 .hero-visual{height:100%;min-height:0;max-height:650px;display:flex;align-items:center}
 .hero-visual .chart-figure{height:100%;min-height:0;max-height:650px}
 .hero-visual #celestial-chart{flex:1;width:100%;height:0;min-height:0;max-height:100%}
 .hero-visual .chart-caption{flex:none}
}
@media(min-width:761px) and (max-height:740px){
 .hero-scene{padding-block:calc(var(--header-height) + 18px) 76px}
 .hero-copy .eyebrow{margin-bottom:15px}
 .hero-copy h1{font-size:clamp(34px,4vw,60px);line-height:1.15;margin-bottom:19px}
 .hero-intro{font-size:14px;line-height:1.75;margin-bottom:20px}
 .hero-note{font-size:9px;margin-top:18px}
 .hero-cta{gap:15px}
 .chart-stage-title{font-size:20px}
 .chart-stage-description{margin-top:4px;font-size:10px}
 .chart-example{margin-top:5px;font-size:8px}
 .hero-bottom{bottom:14px}
}
@media(min-width:761px) and (max-height:620px){
 .hero-scene{padding-block:calc(var(--header-height) + 15px) 67px}
 .hero-copy .eyebrow{font-size:9px;margin-bottom:12px}
 .hero-copy h1{font-size:clamp(32px,3.7vw,49px);margin-bottom:16px}
 .hero-intro{font-size:13px;line-height:1.7;margin-bottom:16px}
 .hero-copy .button{min-height:44px;padding:10px 16px;font-size:11px}
 .hero-note{display:none}
 .hero-bottom{bottom:9px}
}
@media(min-width:761px) and (prefers-reduced-motion:reduce){
 .hero-scene{height:auto;min-height:100svh}
 .hero-grid{height:auto;min-height:0;flex:none}
 .hero-visual{height:auto}
 .hero-visual .chart-figure{height:auto}
 .hero-visual #celestial-chart{height:min(43vw,560px);flex:none}
}