/* The approved project drawing stays decorative; all real content remains HTML. */
.hero--system{height:100svh;min-height:100svh;box-sizing:border-box;align-items:center;isolation:isolate;overflow:hidden!important;padding:clamp(88px,12svh,110px) 0!important}
.hero--system .hero-system{height:100%;inset:0;background:var(--bg);mask-image:none;-webkit-mask-image:none;overflow:visible;pointer-events:none}
.hero--system .hero-system::after{display:none}
.hero--system .hero-system::before{display:block;content:'';position:absolute;inset:0;z-index:0;background:url('../media/hero-system-backdrop.webp') center / cover no-repeat;opacity:1}
.hero-system-grid{height:100%;width:100%;z-index:1}
.hero-system-art{position:absolute;right:22px;top:90px;width:min(55vw,calc(100svh - 150px),740px);aspect-ratio:1;pointer-events:none;--focus-people:0;--focus-constraints:0;--focus-evidence:0;--focus-selection:0;--focus-next:0}
.hero-system-art img,.hero-system-art canvas,.hero-system-context,.hero-system-interface{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hero-system-context{transform:translate3d(calc(var(--hero-mouse-x,0px)*.25),calc(var(--hero-mouse-y,0px)*.25),0)}
.hero-system-interface{transform:translate3d(calc(var(--hero-mouse-x,0px)*.5),calc(var(--hero-mouse-y,0px)*.5),0)}
.hero-system-route{opacity:0}
.hero-system-art.is-ready .hero-system-route{opacity:1}
.hero-system-art.is-ready .hero-system-route-fallback{display:none}
.hero-system-art .hero-system-focus{filter:sepia(.12) saturate(1.6) contrast(1.12);mix-blend-mode:multiply}
.hero-system-focus--people{opacity:var(--focus-people)}
.hero-system-focus--constraints{opacity:var(--focus-constraints)}
.hero-system-focus--evidence{opacity:var(--focus-evidence)}
.hero-system-focus--selection{opacity:var(--focus-selection)}
.hero-system-focus--next{opacity:var(--focus-next)}
.hero-registration{position:absolute;width:24px;height:24px;transform:translate(-50%,-50%);opacity:.8}
.hero-registration--tl{left:32px;top:110px}.hero-registration--tr{left:calc(100% - 32px);top:110px}
.hero-registration--bl{left:32px;top:calc(100% - 32px)}.hero-registration--br{left:calc(100% - 32px);top:calc(100% - 32px)}
.hero-system-note{position:absolute;font:9px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em;color:var(--ink-muted)}
.hero-system-note--context{top:130px;right:42px;left:auto;line-height:16px}.hero-system-note--clarity{top:calc(48.2% - 26px);right:20px;line-height:16px}.hero-system-note--signature{bottom:20px;left:48px;font-size:8px}
.hero--system .hero-inner{z-index:1;pointer-events:none}
/* Theme-colored halo softens only the artwork behind the live copy. */
.hero--system .hero-inner::before{content:'';position:absolute;z-index:-1;opacity:.8;pointer-events:none;left:-100px;top:-60px;bottom:-60px;width:calc(66% + 200px);background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bg) 96%,transparent) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 45%,color-mix(in srgb,var(--bg) 45%,transparent) 65%,transparent 85%)}
@media(max-width:1050px){.hero--system .hero-inner::before{left:-50px;top:-30px;bottom:-30px;width:calc(100% + 100px)}}

.hero--system .hero-inner a,.hero--system .hero-inner button{pointer-events:auto}
.hero--system .hero-inner h1{width:64%;max-width:780px;font-size:clamp(44px,4.2vw,64px);font-weight:500;line-height:1.08;letter-spacing:-.035em;margin:30px 0 30px}
.hero--system .hero-inner h1 em{font-weight:400;display:block}
.hero--system .hero-badges{margin-bottom:0}
.hero--system .hero-bio{max-width:56ch;width:52%;font-size:18px;line-height:1.55;margin-bottom:36px}
.hero--system .hero-actions{gap:22px}
body[data-theme="light"] .hero--system .hero-system{background-image:none}
body[data-theme="dark"] .hero--system .hero-system{background:var(--bg)}
body[data-theme="dark"] .hero--system .hero-system::before{filter:invert(1) grayscale(1) brightness(3) contrast(1.4);mix-blend-mode:color-dodge;opacity:.42}
/* Keep the cream light independent of the backdrop blend and the copy halo. */
body[data-theme="dark"] .hero--system .hero-system::after{display:block;content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 40% 48% at 76% 34%,rgba(237,237,232,.2) 0%,rgba(237,237,232,.09) 42%,rgba(237,237,232,0) 76%)}

body[data-theme="dark"] .hero-system-context,body[data-theme="dark"] .hero-system-interface{filter:invert(.88) hue-rotate(180deg) url("#heroArtworkDarkTone")}
body[data-theme="dark"] .hero-registration{filter:invert(1)}
body[data-theme="dark"] .hero-system-art .hero-system-focus{mix-blend-mode:screen}
@media(min-width:781px) and (max-height:760px){.hero--system{padding:88px 0!important}.hero--system .hero-inner h1{font-size:clamp(36px,4vw,52px)}.hero--system .hero-bio{font-size:16px}}
@media(max-width:1050px){
.hero--system{height:100svh;min-height:100svh;padding:88px 0!important}
.hero--system .hero-inner h1{width:100%;font-size:clamp(30px,min(10vw,5.2svh),58px);margin:24px 0}.hero--system .hero-bio{width:100%;max-width:50ch;font-size:16px;margin-bottom:28px}
.hero--system .hero-inner{padding-bottom:0}
.hero-system-art{width:min(72vw,520px);top:auto;bottom:40px;right:20px;opacity:.14}
.hero-system-note--context,.hero-system-note--clarity{display:none}.hero-system-note--signature{bottom:12px;font-size:7px}
.hero-registration--tl,.hero-registration--tr{top:105px}
.hero-system-context,.hero-system-interface{transform:none}
.hero--system .hero-actions{flex-wrap:wrap}
.hero--system .hero-actions .social-links{display:none}
.hero--system .hero-actions .cta-group{width:100%;flex-shrink:0;flex-wrap:wrap;gap:12px}.hero--system .hero-actions .btn{min-height:48px}
}
@media(max-width:640px){.hero-registration--tl,.hero-registration--bl{left:20px}.hero-registration--tr,.hero-registration--br{left:calc(100% - 20px)}}
@media(prefers-reduced-motion:reduce){.hero-system-context,.hero-system-interface{transform:none}}

@media(max-width:1050px) and (max-height:720px){
.hero--system{padding:80px 0!important}
.hero--system .hero-inner h1{margin:18px 0;font-size:clamp(28px,min(9vw,5svh),42px)}
.hero--system .hero-bio{font-size:14px;line-height:1.45;margin-bottom:20px}
.hero--system .hero-system-art{opacity:.1}
}
@media(min-width:1051px) and (max-height:760px){
.hero--system .hero-bio{margin-bottom:24px}
}

.hero-system-filter-defs{position:absolute;pointer-events:none}