/* V1.2.4 / exact visual match to the approved art.
 * DESKTOP: the entire original image is intact and fitted at its original aspect ratio.
 * Its sample typography is rasterized in the design (not duplicated by HTML),
 * while real accessible semantic copy + interactive links are supplied by HTML.
 * TABLET / MOBILE: distinct responsive layout uses the right-hand portion of the
 * same image, so the sample desktop text is outside the image crop. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.home .hero.hero-reference{position:relative;display:block;width:100%;height:auto;min-height:0;aspect-ratio:1672 / 941;margin:0;overflow:hidden;isolation:isolate;background:#08181d}
body.home .hero-reference:before,body.home .hero-reference:after{display:none!important}
body.home .hero-reference-image{position:absolute;inset:0;width:100%;height:100%;background-image:url('./hero-exact-composition.webp');background-position:center;background-size:100% 100%;background-repeat:no-repeat;z-index:0;pointer-events:none}
body.home .hero-desktop-interactions{position:absolute;inset:0;z-index:2}
body.home .reference-hotspot{position:absolute;display:block;outline:none;border-radius:3px;cursor:pointer}
body.home .reference-hotspot:focus-visible{outline:2px solid #b7e5ca;outline-offset:3px;background:rgba(180,245,218,.10)}
body.home .ref-brand{left:3%;top:2.6%;width:11.5%;height:5.9%}
body.home .ref-home{left:19.1%;top:3%;width:4.4%;height:6.5%}
body.home .ref-projects{left:24.3%;top:3%;width:5.5%;height:6.5%}
body.home .ref-about{left:32.1%;top:3%;width:4.7%;height:6.5%}
body.home .ref-work{left:3.4%;top:86.7%;width:17.2%;height:7.9%}
body.home .hero-mobile-content{display:none}
/* The reference itself includes top navigation, so don't render a second header over it.
   Show the real header only when the user begins scrolling down. */
body.home .site-header:not(.scrolled){opacity:0;pointer-events:none;visibility:hidden}
body.home .site-header.scrolled{position:fixed;height:72px;background:rgba(6,18,21,.97);border-bottom:1px solid rgba(215,251,236,.18);opacity:1;visibility:visible;pointer-events:auto}
body.home .site-header.scrolled .brand-text{font-size:11px;letter-spacing:.08em}
body.home .site-header.scrolled .brand-text small{font-size:8px}
/* Preserve original 1672x941 art composition down to laptop width. */
@media(min-width:1051px){body.home .hero.hero-reference{aspect-ratio:1672 / 941}}
/* Responsive editorial treatment: authentic HTML and only the right part of the art.
   Its baked-in headline, navigation and CTA all stay outside the mobile crop. */
@media(max-width:1050px){
 body.home .site-header:not(.scrolled){opacity:1;pointer-events:auto;visibility:visible;background:linear-gradient(180deg,rgba(7,21,26,.95),rgba(7,21,26,.65));border-bottom:1px solid rgba(240,255,251,.14)}
 body.home .site-header{height:80px;padding:0 30px;position:absolute}
 body.home .hero.hero-reference{height:900px;min-height:900px;aspect-ratio:auto}
 body.home .hero-reference-image{inset:auto 0 0 0;height:650px;width:100%;background-size:auto 650px;background-position:70% center}
 body.home .hero-reference:after{display:block!important;content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#08181d 0%,#08181d 16%,rgba(8,24,29,.96) 33%,rgba(8,24,29,.52) 51%,rgba(8,24,29,.04) 72%,rgba(8,24,29,.79) 100%)}
 body.home .hero-desktop-interactions{display:none}
 body.home .hero-mobile-content{display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:4;height:100%;padding-top:132px;padding-bottom:35px}
 body.home .mobile-hero-role{font:500 10px/1.4 var(--mono);letter-spacing:.11em;color:#bbd8d0;margin-bottom:18px}
 body.home .mobile-hero-top h1{font:500 clamp(72px,9.8vw,110px)/.99 var(--font);letter-spacing:-.079em;color:#f6f7f4;margin:0 0 27px}
 body.home .mobile-hero-top h1 span{color:#b7e5ca}
 body.home .mobile-hero-summary{font:400 17px/1.6 var(--font);color:#dae3df;max-width:570px;margin:0}
 body.home .mobile-hero-cta{display:inline-flex;align-items:center;gap:13px;margin-top:29px;font:500 10px/1.4 var(--mono);letter-spacing:.11em;color:#d6eee5;border-bottom:1px solid #75978c;padding-bottom:8px}
 body.home .mobile-hero-cta span{font-size:20px;line-height:1}
 body.home .mobile-hero-fields{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;color:#d3e1d9;font:500 9px/1.4 var(--mono);letter-spacing:.08em}
 body.home .mobile-hero-fields span+span:before{content:'·';margin-right:15px;color:#98b9ab}
}
@media(max-width:600px){
 body.home .site-header:not(.scrolled){height:72px;padding:0 20px}
 body.home .hero.hero-reference{height:850px;min-height:850px}
 body.home .hero-reference-image{height:550px;background-size:auto 550px;background-position:72% center}
 body.home .hero-reference:after{background:linear-gradient(180deg,#08181d 0%,#08181d 20%,rgba(8,24,29,.98) 37%,rgba(8,24,29,.50) 55%,rgba(8,24,29,.07) 72%,rgba(8,24,29,.92) 100%)}
 body.home .hero-mobile-content{padding-top:124px;padding-bottom:24px;width:calc(100% - 44px)}
 body.home .mobile-hero-role{font-size:9px;margin-bottom:18px}
 body.home .mobile-hero-top h1{font-size:clamp(55px,13vw,77px);margin-bottom:24px;letter-spacing:-.075em}
 body.home .mobile-hero-summary{max-width:330px;font-size:14.5px;line-height:1.58}
 body.home .mobile-hero-cta{margin-top:25px;font-size:9px}
 body.home .mobile-hero-fields{font-size:8px;max-width:340px;row-gap:9px}
 body.home .mobile-hero-fields span+span:before{margin-right:8px}
}
@media(prefers-reduced-motion:reduce){body.home .reference-hotspot{transition:none}}
/* Clean mobile source has no embedded sample nav, title or footer. */
@media(max-width:1050px){
 body.home .hero-reference-image{background-image:url('./hero-mobile-visual.webp');-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 27%,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 27%,#000 90%,transparent 100%)}
}

/* Final mobile polish: avoid redundant role label and stranded separator dots. */
@media(max-width:1050px){
 body.home .mobile-hero-top h1{margin-top:20px}
 body.home .mobile-hero-fields{display:grid;grid-template-columns:repeat(2,max-content);gap:9px 21px}
 body.home .mobile-hero-fields span+span:before{display:none}
}
@media(max-width:600px){
 body.home .mobile-hero-top h1{margin-top:12px}
 body.home .mobile-hero-fields{gap:8px 19px}
}