/* Home hero: layered depth in the existing blue studio palette. */
body .reference-hero{perspective:1200px;background:radial-gradient(ellipse at 79% 48%,#10325335,transparent 43%),var(--bg)}
body .reference-hero .hero-content{transform:none;transition:none}
body .reference-hero h1{transform:none;text-shadow:none}
body .reference-hero .hero-accent{color:#53aaff;text-shadow:none}
body .reference-hero .hero-bottom{transform:none}
body .reference-hero .hero-image{overflow:visible;mix-blend-mode:normal;perspective:1000px}
.hero-emblem{position:relative;width:100%;height:100%;aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(var(--mark-x,6deg)) rotateY(var(--mark-y,-12deg));transition:transform .45s ease-out}
.hero-emblem::before{content:"";position:absolute;inset:5%;border-radius:50%;background:linear-gradient(135deg,#17446a,#030a13 65%);border:1px solid #4ea7ed66;transform:translateZ(-22px) translate(8px,12px);box-shadow:0 30px 55px #000b,12px 8px 0 #07121e,14px 10px 0 #3b8edb35}
.hero-emblem::after{content:"";position:absolute;inset:3%;border-radius:50%;border:1px solid #69baff75;transform:translateZ(18px);box-shadow:0 0 25px #2187ed26,inset 0 0 18px #3b8edb14;pointer-events:none}
body .reference-hero .hero-emblem img{position:relative;border-radius:50%;transform:translateZ(8px);filter:drop-shadow(0 12px 15px #0008)}
body:has(.reference-hero)>nav .nav-right .contact-nav{width:auto;min-width:178px;flex:0 0 auto;min-height:46px;justify-content:center;gap:15px;padding:11px 20px;border:1px solid #65baff;border-radius:999px;background:linear-gradient(135deg,#267bd0,#145294);color:#fff;box-shadow:inset 0 1px 0 #ffffff30,0 5px 0 #082b50,0 12px 26px #1164bd35;transition:transform .2s,box-shadow .2s,background .2s}
body:has(.reference-hero)>nav .nav-right .contact-nav>span:first-child{width:auto;max-width:none;flex:none;min-height:0;text-align:center;font-size:12px;font-weight:700;letter-spacing:.7px;line-height:1.3}
body:has(.reference-hero)>nav .contact-nav .menu-lines{display:none}
body:has(.reference-hero)>nav .contact-nav::after{content:none}
body:has(.reference-hero)>nav .nav-right .contact-nav:hover{transform:translateY(-2px);background:linear-gradient(135deg,#338eeb,#1e66b4);box-shadow:inset 0 1px 0 #ffffff40,0 7px 0 #082b50,0 16px 30px #1164bd50}
body:has(.reference-hero)>nav .nav-right .contact-nav:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #ffffff30,0 2px 0 #082b50}
@media(max-width:950px){body:has(.reference-hero)>nav .nav-right{gap:12px}body:has(.reference-hero)>nav .nav-right .contact-nav{min-width:140px;padding:10px 15px}}
@media(max-width:700px){body .reference-hero .hero-content{transform:none}body .reference-hero h1{text-shadow:none}body .reference-hero .hero-emblem{transform:rotateX(5deg) rotateY(-8deg)}body .reference-hero .hero-image{margin-block:22px 16px}body:has(.reference-hero)>nav .nav-right .contact-nav>span:first-child{font-size:11px;letter-spacing:.3px}body:has(.reference-hero)>nav .nav-right .contact-nav{min-width:0;gap:8px;padding:10px 13px;min-height:44px}}
@media(prefers-reduced-motion:reduce){body .reference-hero .hero-content,body .reference-hero .hero-emblem{transform:none;transition:none}body:has(.reference-hero)>nav .nav-right .contact-nav{transition:none}}

@media(max-width:600px){body:has(.reference-hero)>nav .nav-right .contact-nav{flex:1 1 0;min-width:0;padding:9px 10px}body:has(.reference-hero)>nav .nav-right .contact-nav>span:first-child{flex:1;min-width:0;max-width:145px;white-space:normal;font-size:10px;letter-spacing:0}body:has(.reference-hero)>nav .contact-nav::after{content:none}}

/* Flat, crisp typography alongside the dimensional studio mark. */
body .reference-hero h1{font-family:"Fira Sans",Arial,sans-serif;font-weight:700;font-size:clamp(40px,4.8vw,88px);line-height:1.12;letter-spacing:-.045em;color:#f2f6fc;margin:0 0 30px;transform:none;text-shadow:none}
body .reference-hero h1>span{display:block;min-height:0;white-space:normal;text-wrap:balance}
body .reference-hero .hero-accent{color:#60b7ff;margin-top:6px;text-shadow:none}
@supports(background-clip:text){body .reference-hero .hero-accent{background:linear-gradient(110deg,#9bd8ff,#439eea 85%);background-clip:text;-webkit-background-clip:text;color:transparent}}
body .reference-hero .hero-description{border-left:2px solid #3b8edb66;padding-left:20px;max-width:590px;min-height:0;font-family:"Fira Sans",Arial,sans-serif;line-height:1.8;text-wrap:pretty}
body .reference-hero .hero-description .hero-lead{font-size:clamp(16px,1.35vw,20px);font-weight:400;color:#c6d1df;line-height:1.8}
body .reference-hero .hero-description .hero-services{margin-top:16px;font-size:clamp(14px,1.18vw,17px);color:#93a5bb;line-height:1.8}
@media(max-width:700px){body .reference-hero h1{font-size:clamp(35px,8.5vw,56px);line-height:1.14;margin:0 0 26px;letter-spacing:-.035em}body .reference-hero .hero-description{padding-left:16px}body .reference-hero .hero-description .hero-services{margin-top:14px}}