:root{--acc:#F36C40;--bg:#000;--tx:#cfcfcf;--hi:#fff;--ln:rgba(255,255,255,.28);--disp:Rubik,system-ui,sans-serif;--mono:SMono,ui-monospace,monospace}
html{background:#000}
body.v-a4{background:#000;color:var(--tx);font-family:Inter,system-ui,sans-serif}
.v-a4 h1,.v-a4 h2,.v-a4 h3,.v-a4 .h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--hi);line-height:1.04}
.v-a4 .h2{font-size:clamp(2rem,4.4vw,3.6rem);clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.v-a4 .h2.go{clip-path:inset(0 0 0 0)}
.v-a4 .eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);background:none;border:0;padding:0}
.v-a4 .eyebrow::before{content:"";display:inline-block;width:0;height:0;border:5px solid transparent;border-left:8px solid var(--acc);margin-right:.5rem;vertical-align:1px}
.v-a4 .lead,.v-a4 .intro{font-family:var(--mono);font-size:.98rem;line-height:1.75;color:var(--tx)}
.v-a4 a{color:inherit}
/* header */
.v-a4 .site-header{background:rgba(0,0,0,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--ln)}
.v-a4 .nav a{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:#ddd}
.v-a4 .nav a:hover{color:var(--acc)}
/* buttons: outline + bottom bar */
.v-a4 .btn{position:relative;border-radius:0;background:transparent;border:1px solid rgba(255,255,255,.75);color:#fff;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;padding:1rem 1.6rem 1.15rem;box-shadow:none;overflow:hidden;z-index:0;transition:color .3s}
.v-a4 .btn::after{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:4px;background:#fff;z-index:-1;transition:height .35s cubic-bezier(.7,0,.2,1),left .35s,right .35s,bottom .35s}
.v-a4 .btn:hover::after,.v-a4 .btn:focus-visible::after{height:calc(100% - 8px)}
.v-a4 .btn:hover,.v-a4 .btn:focus-visible{color:#000}
.v-a4 .btn-acc{border-color:var(--acc)}.v-a4 .btn-acc::after{background:var(--acc)}
.v-a4 :focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* hero: inset frame */
.v-a4 .frame-hero{display:block;position:relative;padding:5.5rem 2.2rem 2.2rem;background:#000;min-height:0;height:auto}
.hero-frame{position:relative;width:100%;height:min(84vh,860px);min-height:560px;overflow:hidden;border:1px solid var(--ln)}
.hero-frame .hero-gl,.hero-fallback{position:absolute;inset:0;width:100%;height:100%}
.hero-fallback{background:url(assets/img/world-sunset.jpg) center/cover;z-index:0}
.hero-gl{z-index:1}
.hero-vignette{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.82) 0,rgba(0,0,0,.45) 45%,transparent 75%),linear-gradient(0deg,rgba(0,0,0,.7),transparent 45%);pointer-events:none}
.hero-in{position:absolute;left:clamp(1.5rem,5vw,5rem);bottom:clamp(2rem,6vh,4.5rem);z-index:3;max-width:44rem}
.v-a4 .hero-title{font-size:clamp(2.4rem,5.6vw,5.2rem);margin:.8rem 0 1.2rem;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.v-a4 .hero-title.go{clip-path:inset(0 0 -10% 0)}
.hero-in .lead{max-width:34rem;color:#e6e6e6}
.v-a4 .ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}
.side-txt{position:absolute;z-index:3;right:1.2rem;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap;margin:0;translate:45% 0}
.scene-ctl{position:absolute;z-index:3;right:clamp(1.5rem,4vw,4rem);bottom:clamp(2rem,6vh,4.5rem);display:flex;align-items:center;gap:.6rem}
.sc-l{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:#fff;margin-right:.6rem}
.tri{width:52px;height:52px;border:1px solid rgba(255,255,255,.7);background:transparent;cursor:pointer;position:relative}
.tri::before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border:8px solid transparent;transform:translate(-25%,-50%);border-left:12px solid #fff}
.tri-l::before{transform:translate(-75%,-50%) rotate(180deg)}
.tri:hover{border-color:var(--acc)}.tri:hover::before{border-left-color:var(--acc)}
/* framed images with offset brackets */
.framed{position:relative;margin:0;border:1px solid var(--ln);padding:12px}
.framed::before,.framed::after{content:"";position:absolute;width:38%;height:38%;pointer-events:none;transition:transform .5s}
.framed::before{left:-14px;top:-14px;border-left:1px solid #fff;border-top:1px solid #fff}
.framed::after{right:-14px;bottom:-14px;border-right:1px solid var(--acc);border-bottom:1px solid var(--acc)}
.framed:hover::before{transform:translate(-6px,-6px)}.framed:hover::after{transform:translate(6px,6px)}
.framed img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05)}
/* sections */
.v-a4 .sec{background:#000;border-top:1px solid rgba(255,255,255,.1);padding:clamp(5rem,10vw,8rem) 0}
.v-a4 .strip{background:#000;border-top:1px solid rgba(255,255,255,.1);padding:4rem 0}
.v-a4 .strip-copy{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:#bbb}
.v-a4 .logos{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-left:1px solid var(--ln);border-top:1px solid var(--ln)}
.v-a4 .logo-tile{border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);background:#000;border-radius:0;aspect-ratio:16/9;display:grid;place-items:center;position:relative;padding:1.5rem;box-shadow:none}
.v-a4 .logo-tile::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--acc);transition:width .4s}
.v-a4 .logo-tile:hover::after{width:100%}
.v-a4 .logo-tile img{max-height:42px;max-width:75%;filter:brightness(0) invert(1);opacity:.85;transition:opacity .3s}
.v-a4 .logo-tile:hover img{opacity:1}
/* disciplines: outlined cards */
.disc-img{max-width:540px;aspect-ratio:4/3;margin:0 0 4rem auto}
.v-a4 .disc-grid{gap:0;border-left:1px solid var(--ln);border-top:1px solid var(--ln)}
.v-a4 .disc{background:#000;border:0;border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);border-radius:0;transition:background .3s;box-shadow:none}
.v-a4 .disc:hover{background:#0d0d0d}
.v-a4 .disc .num{font-family:var(--mono);color:var(--acc)}
.v-a4 .disc h3{font-size:1.25rem}
.v-a4 .disc-line{background:var(--acc)}
.v-a4 .roles{font-family:var(--mono);font-size:.8rem}
/* services tabs */
.v-a4 .services.tabbed .svc-pin{height:auto!important}
.v-a4 .services.tabbed .svc-track-wrap{position:static;overflow:visible;height:auto}
.v-a4 .services.tabbed .svc-track{display:block;transform:none!important;width:auto}
.tabs{display:flex;border-bottom:1px solid var(--ln);margin:2.5rem 0 2.5rem;overflow-x:auto}
.tabs [role=tab]{flex:1;min-width:11rem;background:none;border:0;color:#bbb;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;padding:1.2rem 1rem;text-align:left;cursor:pointer;position:relative}
.tabs [role=tab]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.tabs [role=tab][aria-selected=true]{color:#fff}.tabs [role=tab][aria-selected=true]::after{transform:none}
.tabs .tn{display:block;font-family:var(--mono);font-weight:400;color:var(--acc);font-size:.75rem;margin-bottom:.3rem}
.svc-stage{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center}
.services:not(.tabbed) .svc-stage{grid-template-columns:1fr}.services:not(.tabbed) .svc-img{display:none}
.svc-img{aspect-ratio:16/10}
.v-a4 .svc{background:transparent;border:0;border-radius:0;box-shadow:none;width:auto;min-height:0;padding:0}
.v-a4 .svc.in{animation:svcin .6s cubic-bezier(.2,.7,.2,1)}
@keyframes svcin{from{opacity:0;transform:translateY(16px)}}
.v-a4 .svc h3{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.v-a4 .svc-n{font-family:var(--mono);color:var(--acc)}
.v-a4 .svc p{line-height:1.7}
/* steps */
.v-a4 .steps-line{background:var(--acc)}
.v-a4 .step{background:#000;border:1px solid var(--ln);border-radius:0}
.v-a4 .step-dot{border-radius:0;background:#000;border:1px solid var(--acc);transform:rotate(45deg)}
.v-a4 .step-n{font-family:var(--mono);color:var(--acc)}
/* experience */
.xp-img{aspect-ratio:21/8;margin:0 0 3.5rem}
.v-a4 .xp{background:#000;border:1px solid var(--ln);border-radius:0;box-shadow:none;transition:border-color .3s}
.v-a4 .xp:hover{border-color:var(--acc)}
.v-a4 .xp-logo img{filter:brightness(0) invert(1)}
.v-a4 .xp-loc,.v-a4 .role{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#bdbdbd}
/* team */
.v-a4 .member{background:#000;border:0;text-align:left}
.v-a4 .photo{border-radius:0;border:1px solid var(--ln);background:linear-gradient(135deg,#111,#000);color:#fff;font-family:var(--disp);aspect-ratio:1;position:relative}
.v-a4 .member:hover .photo{border-color:var(--acc)}
.v-a4 .member h3{font-size:1.15rem;margin-top:1rem}
/* why */
.why-mark{background:#000;max-width:340px}
.why-mark img{object-fit:contain;padding:2.5rem}
.v-a4 .traits li{border:1px solid var(--ln);border-radius:0;background:#000}
.v-a4 .tm{font-family:var(--mono);font-size:.75rem;color:#a8a8a8}
/* contact */
.v-a4 .form input,.v-a4 .form select,.v-a4 .form textarea{background:#000;border:1px solid rgba(255,255,255,.45);border-radius:0;color:#fff;font-family:var(--mono)}
.v-a4 .form input:focus,.v-a4 .form textarea:focus,.v-a4 .form select:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 1px var(--acc)}
.v-a4 .form label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:#cfcfcf}
.v-a4 .contact{background:#000}
/* footer: framed box */
.v-a4 .site-footer{background:#000;padding:0 2.2rem 2.2rem;border:0}
.v-a4 .site-footer>.wrap{border:1px solid var(--ln);padding:4rem 2rem;text-align:center;max-width:none}
.v-a4 .foot-logo{margin-inline:auto}
.v-a4 .site-footer .f{justify-content:center}
.to-top{position:fixed;right:1.5rem;bottom:1.5rem;z-index:40;width:48px;height:48px;border:1px solid rgba(255,255,255,.6);background:#000;opacity:0;pointer-events:none;transition:opacity .3s}
.to-top.show{opacity:1;pointer-events:auto}
.to-top::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-65%);border:8px solid transparent;border-bottom:12px solid #fff}
.to-top:hover{border-color:var(--acc)}.to-top:hover::before{border-bottom-color:var(--acc)}
@media (max-width:900px){
 .v-a4 .frame-hero{display:block;position:relative;padding:4.6rem .75rem .75rem}
 .hero-frame{height:auto;min-height:88vh}
 .hero-in{left:1.25rem;right:1.25rem;bottom:6rem}
 .side-txt{display:none}
 .scene-ctl{left:1.25rem;right:auto;bottom:1.25rem}
 .v-a4 .logos{grid-template-columns:repeat(2,1fr)}
 .svc-stage{grid-template-columns:1fr;gap:2rem}
 .xp-img{aspect-ratio:16/9}.disc-img{margin:0 auto 3rem}
 .v-a4 .site-footer{padding:0 .75rem .75rem}
}
@media (prefers-reduced-motion:reduce){.v-a4 .h2,.v-a4 .hero-title{clip-path:none!important;transition:none}.framed::before,.framed::after,.v-a4 .btn::after,.tabs [role=tab]::after{transition:none}.v-a4 .svc.in{animation:none}}
.v-a4 .frame-hero{padding-top:6.4rem}
.v-a4 .hero-in{padding:0}
.disc-img img,.svc-img img{filter:brightness(1.9) saturate(1.2) contrast(1.05)}
.xp-img{margin-top:3rem}
.v-a4 .why-mark{border-radius:0;background:#000}.v-a4 .why-mark img{background:none;border-radius:0;box-shadow:none}
.v-a4 .why-mark>*{border-radius:0}
.v-a4 .form{background:#000;border:1px solid var(--ln);border-radius:0;box-shadow:none}
.v-a4 .site-footer>.wrap+.wrap{border-top:0;padding:1.5rem 2rem}
@media (max-width:900px){.hero-frame{min-height:700px}.hero-in{bottom:5.5rem}}
