/* A symmetric logo column and an independent photo keep text crisp at every size. */
.hero{display:grid;grid-template-columns:36% 64%;height:clamp(480px,48.34vw,773px);min-height:0;max-height:none;background:#353535;color:#f2f2f2;overflow:hidden}
.hero .hero-left{width:auto;height:100%;min-width:0;padding:clamp(24px,3.2vw,50px) clamp(22px,4.5vw,72px);background:none;position:relative;z-index:1}
.hero .brand{width:100%;max-width:none;margin:0;align-items:center;text-align:center}
.hero .brand .brand-vector{display:block;width:100%;max-width:360px;height:auto;aspect-ratio:1598.83/821.8;overflow:visible}
.footer-brand .brand-vector{display:block;width:190px;max-width:100%;height:auto;aspect-ratio:1598.83/821.8;overflow:visible}
@media(max-width:760px){.hero .brand .brand-vector{width:230px;max-width:100%}.footer-brand .brand-vector{width:160px}}
@media(prefers-reduced-motion:reduce){.brand-vector stop{stop-color:#f2f2f2}}
@media(prefers-reduced-motion:reduce){.brand-vector .brand-shine{display:none}}
.hero-brand-mark{display:block;width:auto;height:clamp(58px,6.2vw,99px);flex:none;fill:currentColor}
.hero .brand-name{font-size:clamp(12px,1.55vw,25px);letter-spacing:.15em;margin-top:10px;line-height:1.2}
.hero .brand-caption{font-size:clamp(7px,.8vw,12px);letter-spacing:.2em;margin-top:8px;line-height:1.3}
/* The highlight stays inside the lettering; no glow or blur is applied. */
@supports (background-clip:text){
 .hero .brand-name{background-image:linear-gradient(110deg,#f2f2f2 35%,#ffffff 45%,#e6e6e6 50%,#ffffff 55%,#f2f2f2 65%);background-size:300% 100%;background-position:150% 0;background-clip:text;-webkit-background-clip:text;color:transparent;animation:brand-sheen 7s ease-in-out infinite}
}
@keyframes brand-sheen{0%,12%{background-position:150% 0}44%,100%{background-position:-150% 0}}
@media(prefers-reduced-motion:reduce){.hero .brand-name{animation:none;background:none;color:#f2f2f2}#logo-sheen stop{stop-color:#f2f2f2}}
.hero .hero-left h1{font-size:clamp(38px,4.6vw,74px);line-height:.98;margin-top:clamp(28px,3vw,48px);white-space:nowrap;letter-spacing:-.025em}
.hero .short-line{margin:clamp(20px,2.4vw,36px) 0 clamp(18px,2vw,30px)}
.hero .hero-caption{font-size:clamp(11px,1.2vw,19px);line-height:1.6;letter-spacing:.25em}
.hero-visual{display:block;width:100%;height:100%;min-width:0;min-height:0;margin:0;background:#e6e6e6;overflow:hidden}
.hero .hero-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:none;transform:none}
@media(max-width:760px){
 .hero{grid-template-columns:1fr;height:auto;overflow:visible}
 .hero .hero-left{padding:28px 7% 30px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:20px;align-items:center}
 .hero .brand{grid-column:1/-1;margin-bottom:26px}
 .hero-brand-mark{height:66px}
 .hero .brand-name{font-size:18px}
 .hero .brand-caption{font-size:9px}
 .hero .hero-left h1{font-size:clamp(34px,6.5vw,48px);margin:0;grid-column:1;grid-row:2/4}
 .hero .short-line{grid-column:2;grid-row:2;margin:0 0 14px;align-self:end}
 .hero .hero-caption{grid-column:2;grid-row:3;font-size:11px;align-self:start;line-height:1.7}
 .hero-visual{height:auto;aspect-ratio:3/2}
 .hero .hero-visual img{height:auto;aspect-ratio:3/2;object-fit:cover}
}
@media(max-width:380px){.hero .hero-left{column-gap:12px}.hero .hero-left h1{font-size:31px}.hero .hero-caption{font-size:9px;letter-spacing:.2em}}