:root{--electric:#075bff;--neon:#00a8ff;--ice:#72d5ff;--paper:#f5f8ff;--portrait-fade:1;--portrait-reveal:0;--opening-reveal:0}
html{scroll-behavior:smooth}
body.intro-active{overflow:hidden}
.experience-intro{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#071b42 0,#050b18 47%,#03050a 100%);color:var(--paper);opacity:1;visibility:visible;transition:opacity .85s cubic-bezier(.65,0,.35,1),visibility .85s}
.experience-intro.is-done{opacity:0;visibility:hidden;pointer-events:none}
.intro-beams{position:absolute;inset:-40%;overflow:hidden;pointer-events:none;transform:rotate(-17deg)}
.intro-beams:before,.intro-beams:after{position:absolute;content:"";inset:0;background:linear-gradient(90deg,transparent 43%,rgba(7,91,255,.05) 47%,rgba(0,168,255,.75) 49.8%,rgba(114,213,255,.9) 50%,rgba(7,91,255,.08) 51%,transparent 57%);filter:blur(13px);transform:translateX(-125%);animation:beam-cross 2.2s .15s cubic-bezier(.2,.65,.2,1) forwards}
.intro-beams:after{background:linear-gradient(90deg,transparent 48%,rgba(7,91,255,.28) 49.7%,rgba(114,213,255,.7) 50%,transparent 51%);filter:blur(2px);animation-delay:.35s}
.intro-beams i{position:absolute;left:-15%;width:130%;height:1px;background:linear-gradient(90deg,transparent,rgba(41,121,255,.4),transparent);animation:beam-drift 8s ease-in-out infinite alternate}
.intro-beams i:nth-child(1){top:28%}.intro-beams i:nth-child(2){top:72%;animation-delay:-3s}.intro-beams i:nth-child(3){top:53%;animation-delay:-5s}
.intro-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;animation:intro-rise .9s .2s both}
.intro-logo{width:clamp(74px,10vw,128px);height:auto;aspect-ratio:1;object-fit:cover;border:1px solid rgba(114,213,255,.32);border-radius:22%;box-shadow:0 0 40px rgba(0,110,255,.35)}
.intro-overline,.intro-discipline,.intro-start,.intro-skip{font-family:var(--mono);font-size:8px;letter-spacing:.18em}
.intro-overline{margin:28px 0 15px;color:#8db9ff}
.loader-number{margin:0;color:var(--paper);font:600 clamp(64px,13vw,178px)/.9 var(--display);letter-spacing:-.105em;text-shadow:0 0 48px rgba(52,139,255,.3)}
.intro-discipline{margin-top:16px;color:#a4b9d9}
.intro-start{margin-top:55px;padding:16px 21px;border:1px solid rgba(114,213,255,.52);background:rgba(7,91,255,.14);color:var(--paper);cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.intro-start:hover{transform:translateY(-3px);border-color:#72d5ff;background:rgba(7,91,255,.34)}
.intro-start b{margin-left:20px;color:var(--ice);font-size:14px}
.intro-skip{margin-top:18px;border:0;background:none;color:#8092ae;cursor:pointer}
.intro-skip:hover{color:var(--paper)}
.intro-skip span{margin-left:10px;padding:4px 6px;border:1px solid rgba(155,185,235,.22);color:#b2c7e8;font-size:7px}
.intro-progress{width:min(300px,64vw);height:1px;margin-top:27px;overflow:hidden;background:rgba(147,176,224,.16)}
.intro-progress i{display:block;width:36%;height:100%;background:linear-gradient(90deg,transparent,var(--neon),var(--ice),transparent);animation:progress-scan 2.5s ease-in-out infinite alternate}
.brand-logo{width:43px;height:43px;object-fit:cover;border:1px solid rgba(114,213,255,.3);border-radius:10px;box-shadow:0 5px 22px rgba(0,67,199,.22)}
.brand-mark>span{display:flex;flex-direction:column;gap:3px}
.footer-mark{display:grid;place-items:center;width:37px;height:37px;overflow:hidden;border-radius:9px}
.footer-mark img{width:100%;height:100%;object-fit:cover}
.hero{--portrait-x:0px;--portrait-y:0px;--title-x:0px;--title-y:0px;--glow-x:0px;--glow-y:0px}
.hero-portrait{translate:var(--portrait-x) var(--portrait-y);will-change:translate}
.hero-title-wrap{translate:var(--title-x) var(--title-y);will-change:translate}
.hero-bluewash{translate:var(--glow-x) var(--glow-y);will-change:translate}
.hero-portrait,.hero-title-wrap,.hero-bluewash{transition:translate .35s cubic-bezier(.2,.7,.25,1)}
.hero-signal i{transform-origin:center;animation:signal-pulse 1.15s ease-in-out infinite alternate}
.hero-signal i:nth-child(3n){animation-delay:-.55s}.hero-signal i:nth-child(4n){animation-delay:-.9s}.hero-signal i:nth-child(5n){animation-delay:-.3s}
.service-tile .tile-art,.work-visual{--tilt-x:0deg;--tilt-y:0deg;transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.75,.2,1),border-color .3s}
.service-tile .tile-art:hover,.work-visual:hover{border-color:rgba(114,213,255,.42)}
.experience-entered .hero-portrait{animation:portrait-in 1.15s cubic-bezier(.2,.8,.2,1) both}
.experience-entered .hero-title{animation:title-arrive 1s .12s cubic-bezier(.2,.8,.2,1) both}
.experience-entered .hero-note{animation:intro-rise .7s .4s both}
.intro-active .scroll-line{opacity:0}
.hero-title-wrap{z-index:4}
.hero-runes{display:none}
.tribal-overlay{position:fixed;z-index:3;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen;opacity:1;transition:opacity .7s ease}
.tribal-overlay canvas{display:block;width:100%;height:100%;outline:0}
.tribal-aura{position:absolute;left:var(--aura-x,50%);top:var(--aura-y,37%);width:clamp(240px,34vw,560px);height:clamp(140px,22vw,360px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,117,255,var(--aura-strength,.14)),rgba(0,65,190,.1) 34%,transparent 72%);filter:blur(22px);opacity:var(--aura-opacity,.8);transition:left .16s linear,top .16s linear,opacity .35s ease}
.type-marquee{position:relative;left:50%;width:100vw;margin:26px 0 36px;overflow:hidden;transform:translateX(-50%);border-top:1px solid rgba(126,178,255,.12);border-bottom:1px solid rgba(126,178,255,.12);padding:12px 0}
.type-marquee-track{display:flex;width:max-content;animation:type-marquee 24s linear infinite}
.type-marquee-track span{flex:none;padding-right:.2em;color:rgba(139,190,255,.24);font:500 clamp(29px,6vw,82px)/.95 var(--display);letter-spacing:-.07em;white-space:nowrap}
.type-marquee:hover .type-marquee-track{animation-play-state:paused}
@keyframes type-marquee{to{transform:translateX(-50%)}}
@keyframes beam-cross{to{transform:translateX(125%)}}
@keyframes beam-drift{from{transform:translateX(-4%);opacity:.12}to{transform:translateX(4%);opacity:.65}}
@keyframes intro-rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes title-arrive{from{opacity:0;transform:translateY(34px) scale(.96);filter:blur(12px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes progress-scan{from{transform:translateX(-110%)}to{transform:translateX(300%)}}
@keyframes signal-pulse{from{scale:1 .38;opacity:.48}to{scale:1 1;opacity:1}}
@media(max-width:650px){.intro-logo{width:78px;border-radius:16px}.intro-overline,.intro-discipline,.intro-start,.intro-skip{font-size:7px}.intro-start{margin-top:43px;padding:15px 16px}.loader-number{font-size:clamp(59px,18vw,105px)}.brand-logo{width:38px;height:38px}.service-tile .tile-art,.work-visual{transform:none!important}.tribal-aura{width:75vw;height:46vw}.type-marquee{margin:20px 0 25px;padding:9px 0}}
@media(prefers-reduced-motion:reduce){.intro-beams:before,.intro-beams:after,.intro-beams i,.intro-content,.intro-progress i,.hero-signal i,.experience-entered .hero-portrait,.experience-entered .hero-title,.experience-entered .hero-note,.type-marquee-track{animation:none!important}.hero-portrait,.hero-title-wrap,.hero-bluewash{translate:none!important;transition:none!important}.service-tile .tile-art,.work-visual{transform:none!important}.experience-intro{transition:opacity .01ms,visibility .01ms}}

/* Minimal cinematic opening */
.hero{height:100svh;min-height:100svh;max-height:none}
.hero-header{top:clamp(20px,3.2vw,48px);left:3.8%;right:3.8%;display:block;z-index:18}
.brand-mark{display:inline-flex;gap:0;align-items:center}
.brand-logo{width:32px;height:32px;object-fit:contain;border:0;border-radius:0;box-shadow:none}
.menu-button{position:absolute;top:0;right:0;display:flex;width:36px;height:30px;flex-direction:column;justify-content:center;gap:6px;padding:6px;border:0;background:transparent;pointer-events:auto;cursor:pointer}
.menu-button span{width:24px;height:1px;background:#dfeaff;transition:transform .3s,opacity .3s}
.menu-button[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-button[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.hero-nav{position:absolute;top:42px;right:0;display:none;min-width:176px;padding:18px 21px;background:rgba(3,9,23,.88);border:1px solid rgba(114,175,255,.25);backdrop-filter:blur(14px);pointer-events:auto}
.hero-nav.is-open{display:flex}
.hero-nav>div{display:flex;flex-direction:column;gap:11px}
.hero-nav a{font:500 9px/1 var(--mono);letter-spacing:.16em}
.hero-portrait{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 30%;mask-image:linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%);opacity:calc(1 - var(--portrait-fade,0));transition:opacity .15s linear}
@media(min-aspect-ratio:1/1){.hero-portrait{width:auto;height:min(100%,1115px);max-width:100vw;object-fit:contain;object-position:50% 50%}}
@media(max-aspect-ratio:1/1){.hero-portrait{width:100%;height:100%;object-fit:cover;object-position:50% 30%}}
.portrait-shadow{display:none}
.hero-bluewash{background:radial-gradient(ellipse 66% 94% at 50% 31%,#0756ee 0,#0738bb 39%,#061338 71%,#02040a 100%)}
.hero:after{background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 23%,transparent 67%,rgba(0,0,0,.9)),linear-gradient(90deg,rgba(0,0,0,.36),transparent 28%,transparent 74%,rgba(0,0,0,.34))}
.scroll-cue{position:fixed;z-index:16;left:3.8%;bottom:28px;display:flex;align-items:center;gap:12px;color:#e2ebfb;font:8px var(--mono);letter-spacing:.3em;transition:opacity .4s}
.scroll-cue i{display:block;width:1px;height:52px;background:linear-gradient(180deg,#8bbcff,rgba(114,213,255,.15));transform-origin:top;animation:scroll-cue-pulse 1.8s ease-in-out infinite}
body.has-scrolled .scroll-cue{opacity:0;pointer-events:none}
.tribal-overlay{z-index:5;mix-blend-mode:normal}
.tribal-aura{width:clamp(320px,50vw,800px);height:clamp(280px,48vw,680px);background:radial-gradient(ellipse,rgba(0,125,255,var(--aura-strength,.14)),rgba(0,80,230,.09) 36%,transparent 72%)}
.type-marquee-track span{font-family:var(--display);font-weight:600;letter-spacing:-.08em}
.about-heading h2,.services-head h2,.work-head h2,.process-head h2,.contact-body h2{font-family:var(--display);font-weight:600;letter-spacing:-.095em}
@keyframes scroll-cue-pulse{0%,100%{transform:scaleY(.55);opacity:.55}50%{transform:scaleY(1);opacity:1}}
@media(max-width:650px){
  .hero-header{top:18px;left:6%;right:6%}
  .brand-logo{width:28px;height:28px}
  .menu-button{width:34px;height:30px}
  .hero-portrait{width:100%;height:100%;object-position:50% 30%}
  .tribal-aura{width:90vw;height:80vw}
  .scroll-cue{left:6%;bottom:19px;gap:9px;font-size:7px}
  .scroll-cue i{height:38px}
}

/* Keep the editorial copy wide enough while the 3D emblem travels in the left negative space. */
@media(min-width:651px){
  .about-grid{grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:clamp(32px,7vw,100px);align-items:center}
  .about-copy{width:100%;max-width:390px}
  .about-copy h3{font-size:clamp(19px,2vw,28px);line-height:1.28}
  .about-copy p{max-width:40ch;font-size:12px;line-height:1.75}
}
@media(min-width:651px) and (max-width:760px){
  .about-grid{grid-template-columns:1fr;gap:34px;margin:57px 0}
  .about-copy{max-width:520px}
  .about-copy h3{font-size:22px}
}

/* Scroll-led opening: black frame, neon emblem, then portrait. */
.hero{background:#000}
.hero-bluewash{opacity:var(--portrait-reveal,0)}
.hero-bluewash:before{content:"";position:absolute;inset:-10%;background:linear-gradient(90deg,rgba(2,5,18,.2),rgba(2,5,18,.08)),url("assets/brenex-portrait.png") center 38%/cover no-repeat;filter:blur(30px) brightness(.72) saturate(1.28);transform:scale(1.08);opacity:.72;pointer-events:none}
.portrait-smoke{position:absolute;z-index:-2;inset:-8%;overflow:hidden;pointer-events:none;opacity:calc(var(--portrait-reveal,0)*.72);mix-blend-mode:screen;transition:opacity .35s ease}
.portrait-smoke i{position:absolute;top:-14%;bottom:-14%;width:38%;display:block;filter:blur(18px) saturate(1.35);will-change:transform}
.portrait-smoke i:first-child{left:-9%;opacity:.6;background:radial-gradient(ellipse 50% 48% at 50% 86%,rgba(0,168,255,.85),transparent 74%),radial-gradient(ellipse 58% 50% at 12% 55%,rgba(48,145,255,.72),transparent 73%);animation:portrait-smoke-rise 6s ease-in-out infinite alternate}
.portrait-smoke i:last-child{right:-9%;opacity:.5;background:radial-gradient(ellipse 53% 48% at 50% 82%,rgba(7,91,255,.88),transparent 76%),radial-gradient(ellipse 48% 48% at 88% 49%,rgba(0,168,255,.78),transparent 75%);animation:portrait-smoke-drift 8s ease-in-out -3s infinite alternate}
@keyframes portrait-smoke-rise{0%{transform:translate3d(-8%,9%,0) scale(.88) skewX(-5deg)}100%{transform:translate3d(8%,-10%,0) scale(1.2) skewX(5deg)}}
@keyframes portrait-smoke-drift{0%{transform:translate3d(9%,7%,0) scale(1.18) rotate(-7deg)}100%{transform:translate3d(-9%,-9%,0) scale(.88) rotate(7deg)}}
.hero-portrait{animation:none!important}
.hero-header,.scroll-cue{opacity:var(--opening-reveal,0);pointer-events:none;transition:opacity .22s ease}
.opening-awake .hero-header,.opening-awake .scroll-cue{pointer-events:auto}
.grain{opacity:calc(var(--opening-reveal,0)*.035)}

/* Expanded opening composition based on Brenex's filled blue portrait artwork. */
.brand-mark{gap:13px}
.brand-wordmark{color:#f4f8ff;font:500 11px/1 var(--mono);letter-spacing:.28em;text-shadow:0 0 16px rgba(73,155,255,.42)}
.hero-portrait{top:54%;mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%)}
.hero-bluewash:before{inset:-15%;background:linear-gradient(90deg,rgba(1,5,20,.12),rgba(2,8,28,.04)),url("assets/brenex-portrait.png") center 38%/cover no-repeat;filter:blur(42px) brightness(.92) saturate(1.55);transform:scale(1.16);opacity:.88}
.hero-bluewash:after{content:"";position:absolute;inset:-10%;background:radial-gradient(ellipse 27% 50% at 13% 57%,rgba(0,105,255,.58),transparent 76%),radial-gradient(ellipse 25% 54% at 88% 48%,rgba(0,135,255,.52),transparent 77%),radial-gradient(ellipse 48% 32% at 51% 13%,rgba(0,91,255,.5),transparent 75%);filter:blur(34px);animation:blue-scenery-drift 13s ease-in-out infinite alternate;pointer-events:none}
.hero-side-copy{position:absolute;z-index:4;top:45%;opacity:var(--opening-reveal,0);color:#d9eaff;font:500 8px/1.5 var(--mono);letter-spacing:.3em;text-shadow:0 1px 12px rgba(0,13,49,.9);transition:opacity .24s ease;pointer-events:none}
.hero-side-left{left:8.5%;width:min(20vw,310px)}
.hero-side-left p{display:grid;grid-template-columns:max-content 1fr 14px;align-items:center;gap:clamp(12px,2vw,24px);margin:0 0 17px;white-space:nowrap}
.hero-side-left i{display:block;height:1px;background:linear-gradient(90deg,rgba(158,202,255,.68),rgba(158,202,255,.16))}
.hero-side-left b{color:#8abfff;font-size:7px;font-weight:400;letter-spacing:.2em}
.hero-side-right{right:8.5%;width:clamp(155px,14vw,220px);top:47%}
.hero-side-right p{margin:0;font-size:8px;line-height:2.1;letter-spacing:.36em}
.hero-side-right>i{display:block;width:46px;height:1px;margin-top:21px;background:linear-gradient(90deg,#91c6ff,rgba(145,198,255,.18))}
.portrait-smoke{opacity:calc(var(--portrait-reveal,0)*.88)}
.portrait-smoke i{width:43%;filter:blur(27px) saturate(1.55)}

/* A compact, CSS-built 3D design system adds depth to the About section. */
.about-3d-stage{height:224px;position:relative;isolation:isolate;overflow:hidden;margin:12px 0 58px;border-top:1px solid rgba(106,153,221,.16);border-bottom:1px solid rgba(106,153,221,.16);background:radial-gradient(ellipse at 50% 54%,rgba(7,91,255,.15),transparent 34%),linear-gradient(90deg,rgba(7,20,38,.08),rgba(7,20,38,.42) 50%,rgba(7,20,38,.08));perspective:900px}
.about-3d-stage:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.28;background-image:linear-gradient(rgba(98,143,211,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(98,143,211,.12) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent)}
.about-3d-stage:after{content:"";position:absolute;left:50%;top:50%;width:min(44vw,470px);height:1px;background:linear-gradient(90deg,transparent,rgba(65,143,255,.4),transparent);transform:translate(-50%,-50%);box-shadow:0 0 34px rgba(7,91,255,.42)}
.about-stage-label,.about-stage-coordinate{position:absolute;z-index:4;color:#83a9db;font:7px var(--mono);letter-spacing:.15em}
.about-stage-label{left:0;top:17px}.about-stage-label i{margin-left:10px;color:#438df8;font-style:normal}
.about-stage-coordinate{bottom:17px;display:flex;align-items:center;gap:9px}.about-stage-coordinate i{color:#63738d;font-size:6px;font-style:normal}
.coordinate-a{left:0}.coordinate-b{left:50%;transform:translateX(-50%)}.coordinate-c{right:0}
.about-orbit{position:absolute;left:50%;top:52%;width:190px;height:84px;border:1px solid rgba(77,151,255,.43);border-radius:50%;transform-style:preserve-3d;box-shadow:0 0 19px rgba(7,91,255,.1),inset 0 0 17px rgba(7,91,255,.08)}
.about-orbit-a{animation:about-orbit-a 12s linear infinite}.about-orbit-b{width:168px;height:72px;border-color:rgba(114,213,255,.35);animation:about-orbit-b 15s linear infinite}.about-orbit-c{width:210px;height:58px;border-color:rgba(35,97,225,.4);animation:about-orbit-c 18s linear infinite}
.about-orbit i{position:absolute;left:8%;top:50%;width:5px;height:5px;border-radius:50%;background:#a6e6ff;box-shadow:0 0 12px 3px rgba(0,168,255,.8)}
.about-orbit-b i{left:auto;right:14%;width:4px;height:4px;background:#287cff;box-shadow:0 0 12px 3px rgba(7,91,255,.85)}
@keyframes about-orbit-a{from{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(0)}to{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(360deg)}}
@keyframes about-orbit-b{from{transform:translate(-50%,-50%) rotateY(68deg) rotateZ(0)}to{transform:translate(-50%,-50%) rotateY(68deg) rotateZ(-360deg)}}
@keyframes about-orbit-c{from{transform:translate(-50%,-50%) rotateX(76deg) rotateY(24deg) rotateZ(0)}to{transform:translate(-50%,-50%) rotateX(76deg) rotateY(24deg) rotateZ(360deg)}}
.about-crystal{position:absolute;left:50%;top:52%;width:42px;height:42px;transform:translate(-50%,-50%) rotateX(-24deg) rotateY(32deg);transform-style:preserve-3d;animation:about-crystal-float 5s ease-in-out infinite}
.crystal-face{position:absolute;inset:0;border:1px solid rgba(140,203,255,.76);background:linear-gradient(145deg,rgba(40,120,255,.27),rgba(4,17,42,.24));box-shadow:inset 0 0 17px rgba(68,151,255,.16),0 0 12px rgba(7,91,255,.12);backface-visibility:visible}
.crystal-front{transform:translateZ(21px)}.crystal-back{transform:rotateY(180deg) translateZ(21px)}.crystal-left{transform:rotateY(-90deg) translateZ(21px)}.crystal-right{transform:rotateY(90deg) translateZ(21px)}.crystal-top{transform:rotateX(90deg) translateZ(21px)}.crystal-bottom{transform:rotateX(-90deg) translateZ(21px)}
@keyframes about-crystal-float{0%,100%{transform:translate(-50%,-50%) rotateX(-24deg) rotateY(32deg) translateY(0)}50%{transform:translate(-50%,-50%) rotateX(8deg) rotateY(212deg) translateY(-9px)}}
.about-stage-crosshair{position:absolute;color:#3988ff;font:18px var(--mono);opacity:.72}.crosshair-a{left:31%;top:35%}.crosshair-b{right:31%;bottom:28%}
@media(max-width:650px){.about-3d-stage{height:174px;margin:5px 0 38px}.about-orbit-a{width:142px;height:66px}.about-orbit-b{width:128px;height:56px}.about-orbit-c{width:158px;height:46px}.about-stage-label,.about-stage-coordinate{font-size:6px}.about-stage-coordinate{gap:5px}.about-stage-coordinate i{font-size:5px}.coordinate-b{display:none}.crosshair-a{left:17%}.crosshair-b{right:17%}}
@media(prefers-reduced-motion:reduce){.about-orbit-a,.about-orbit-b,.about-orbit-c,.about-crystal{animation:none!important}.about-orbit-a{transform:translate(-50%,-50%) rotateX(67deg)}.about-orbit-b{transform:translate(-50%,-50%) rotateY(68deg)}.about-orbit-c{transform:translate(-50%,-50%) rotateX(76deg) rotateY(24deg)}.about-crystal{transform:translate(-50%,-50%) rotateX(-24deg) rotateY(32deg)}}
@keyframes blue-scenery-drift{from{transform:translate3d(-1.8%,1%,0) scale(.98)}to{transform:translate3d(1.8%,-1.5%,0) scale(1.04)}}
@media(min-aspect-ratio:1/1){.hero-portrait{width:auto;height:92%;max-width:100vw;object-fit:contain;top:54%}}
@media(max-width:1080px){.hero-side-left{left:5%;width:23vw}.hero-side-left p{gap:10px;letter-spacing:.2em}.hero-side-right{right:5%;width:150px}.hero-side-copy{font-size:7px}}
@media(max-width:760px){.brand-wordmark{font-size:9px;letter-spacing:.22em}.hero-side-copy{display:none}.hero-portrait{top:54%}}
@media(max-width:650px){.hero-portrait{height:82%;top:57%;width:118vw;object-fit:cover;object-position:50% 30%}.hero-bluewash:before{filter:blur(26px) brightness(.86) saturate(1.4)}.hero-bluewash:after{filter:blur(24px)}}
@media(prefers-reduced-motion:reduce){.hero-bluewash:after{animation:none}}

/* Full-viewport scene with the sharp portrait scaled to preserve its natural framing. */
.hero{height:100vh;min-height:100vh;height:100svh;min-height:100svh;max-height:none}
.hero-portrait{left:50%;top:50%;width:auto;height:94%;max-width:none;transform:translate(-50%,-50%);object-fit:contain;object-position:center center;mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%);mask-mode:alpha;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%);filter:saturate(1.12) contrast(1.06)}
@media(min-aspect-ratio:1/1){.hero-portrait{height:min(94%,1000px)}}
@media(max-width:760px) and (min-aspect-ratio:1/1){.hero-portrait{height:100%;width:auto;object-fit:contain;object-position:center center}}
@media(max-aspect-ratio:1/1){.hero-portrait{height:88%;width:auto;max-width:none;object-fit:contain;object-position:center center}}
@media(max-width:900px){.hero-side-copy{display:none}}
@media(min-width:761px) and (min-aspect-ratio:16/10) and (max-aspect-ratio:16/9){.hero-portrait{height:96%}}
@media(min-width:761px) and (min-aspect-ratio:16/9){.hero-portrait{height:min(92%,1000px)}}
@media(min-width:761px) and (min-aspect-ratio:21/9){.hero-portrait{height:min(90%,1000px)}}

/* Page 02 stays empty as the reserved space for its upcoming 3D scene. */
.services{min-height:100vh;min-height:100svh;padding:0!important;background:#020307}
.work{min-height:100vh;min-height:100svh}
.work-visual-live{height:clamp(440px,42vw,590px);cursor:default}
.project-window-xbrenex{width:min(92%,960px);height:100%;display:flex;flex-direction:column;transform:perspective(900px) rotateY(-4deg) rotateX(1deg)}
.project-window-xbrenex .project-window-bar{flex:none}
.xbrenex-live-preview{display:block;flex:1;width:100%;min-height:0;border:0;background:#05070d}
.work-description{max-width:680px;margin:8px 42px 0 0;color:#94a8c5;font:400 11px/1.65 var(--body)}
.work-visual-two{background:radial-gradient(ellipse at 72% 48%,rgba(7,91,255,.23),transparent 50%),linear-gradient(135deg,#0a101b,#05070d)}
.work-visual-two .project-window{width:78%;height:76%}
.work-visual-three{background:radial-gradient(ellipse at 50% 50%,rgba(7,91,255,.24),transparent 50%),linear-gradient(135deg,#0c1422,#05070d)}
.work-orbit{position:absolute;width:48%;aspect-ratio:1;border:1px solid rgba(89,157,255,.7);border-radius:50%;transform:rotateX(64deg);box-shadow:0 0 38px rgba(7,91,255,.18),inset 0 0 20px rgba(7,91,255,.12);animation:work-orbit-drift 12s linear infinite}
.work-cube{display:grid;place-items:center;width:92px;height:92px;border:1px solid rgba(192,220,255,.78);background:linear-gradient(145deg,rgba(36,114,255,.3),rgba(3,12,30,.88));box-shadow:0 0 34px rgba(7,91,255,.24);font:600 18px var(--display);transform:rotate(45deg);animation:work-cube-float 5s ease-in-out infinite}
.work-cube span{font:12px var(--mono);color:#72d5ff}
@keyframes work-orbit-drift{to{transform:rotateX(64deg) rotateZ(360deg)}}
@keyframes work-cube-float{50%{transform:rotate(45deg) translateY(-9px)}}
@media(max-width:650px){.work-visual-live{height:clamp(480px,125vw,680px)}.project-window-xbrenex{width:94%;height:94%;transform:none}.work-description{font-size:9px;line-height:1.6}.work-cube{width:74px;height:74px}.work-orbit{width:58%}}