:root{
  --bg:#070a0e;
  --bg2:#0a0e13;
  --panel:#0d131a;
  --panel-soft:#101721;
  --text:#f0ebe2;
  --muted:#98a1aa;
  --muted2:#66717b;
  --line:rgba(240,235,226,.13);
  --line-strong:rgba(240,235,226,.22);
  --blue:#3d83f7;
  --blue-soft:#88b7ff;
  --gold:#c9a564;
  --green:#87eeb8;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,Arial,Helvetica,sans-serif;
  --ease:cubic-bezier(.2,.78,.22,1);
  --header-h:82px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:var(--sans);
  background:
    radial-gradient(circle at 84% 15%,rgba(61,131,247,.085),transparent 28%),
    radial-gradient(circle at 13% 58%,rgba(201,165,100,.045),transparent 25%),
    linear-gradient(180deg,#070a0e 0%,#080c11 42%,#06090d 100%);
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;width:100%;height:auto}
::selection{background:var(--blue);color:white}
[hidden]{display:none!important}

.grain{
  position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.052;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.ambient{
  position:fixed;border-radius:50%;filter:blur(120px);z-index:-2;pointer-events:none;
}
.ambient.a{width:380px;height:380px;right:-130px;top:120px;background:rgba(61,131,247,.065)}
.ambient.b{width:310px;height:310px;left:-115px;top:58%;background:rgba(201,165,100,.035)}

.topbar{
  position:fixed;left:0;right:0;top:0;z-index:60;
  min-height:var(--header-h);
  padding:18px clamp(20px,4.7vw,78px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
.topbar.scrolled{
  background:rgba(7,10,14,.78);
  border-color:var(--line);
  backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:14px;width:max-content}
.shield{
  width:42px;height:50px;display:grid;place-items:center;
  color:var(--gold);font-size:12px;font-weight:700;
  border:1px solid rgba(201,165,100,.68);
  clip-path:polygon(50% 0,91% 13%,87% 78%,50% 100%,13% 78%,9% 13%);
}
.brand-copy{display:grid;gap:2px}
.brand-copy b{font-size:12px;letter-spacing:.12em}
.brand-copy small{font-size:9px;letter-spacing:.16em;color:var(--muted)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,36px);font-size:11px}
.nav a{position:relative;color:#c9cdd1;white-space:nowrap}
.nav a:after{
  content:"";position:absolute;left:0;right:100%;bottom:-10px;height:1px;
  background:var(--blue-soft);transition:right .35s var(--ease);
}
.nav a:hover:after,.nav a.active:after{right:0}
.header-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.header-button{
  display:inline-flex;align-items:center;gap:9px;padding:10px 14px;
  border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);
  font-size:11px;cursor:pointer;transition:border-color .25s ease,transform .25s ease,background .25s ease;
}
.header-button:hover{border-color:rgba(136,183,255,.45);transform:translateY(-1px)}
.header-button .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 15px rgba(135,238,184,.45)}
.menu-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:50%;cursor:pointer;
}
.menu-toggle span,.menu-toggle:before,.menu-toggle:after{
  content:"";display:block;width:16px;height:1px;background:currentColor;margin:4px auto;transition:transform .3s ease,opacity .3s ease;
}
.menu-open .menu-toggle span{opacity:0}
.menu-open .menu-toggle:before{transform:translateY(5px) rotate(45deg)}
.menu-open .menu-toggle:after{transform:translateY(-5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:var(--header-h) 0 auto;z-index:55;
  padding:26px 22px 32px;background:rgba(7,10,14,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);
}
.mobile-menu nav{display:grid;gap:12px}
.mobile-menu a{padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:24px}

.hero{
  min-height:100svh;
  padding:138px clamp(22px,5vw,86px) 74px;
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(500px,1.12fr);gap:50px;align-items:center;
  position:relative;overflow:clip;
}
.hero-copy{max-width:690px;position:relative;z-index:4}
.kicker{font-size:10px;letter-spacing:.16em;color:#a8afb6}
.kicker b{color:var(--blue-soft);font-weight:600}
.hero h1{
  margin:25px 0 28px;font-family:var(--serif);
  font-size:clamp(72px,8vw,138px);line-height:.87;letter-spacing:-.058em;font-weight:700;
}
.hero h1 span{color:var(--blue)}
.hero p{max-width:570px;margin:0;color:#9da6ae;font-size:14px;line-height:1.85}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.primary-btn,.ghost-btn{
  min-height:46px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:26px;
  border:1px solid rgba(136,183,255,.42);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;cursor:pointer;
}
.primary-btn{background:var(--blue);border-color:var(--blue);color:white}
.primary-btn:hover{transform:translateY(-2px);background:#4a8cff}
.ghost-btn{background:transparent;color:#d9dde0}
.ghost-btn:hover{border-color:rgba(240,235,226,.3);transform:translateY(-2px)}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px}
.hero-meta div{padding-left:13px;border-left:1px solid var(--line)}
.hero-meta b{display:block;font-size:12px;letter-spacing:.08em}
.hero-meta small{display:block;margin-top:5px;color:var(--muted2);font-size:9px;letter-spacing:.08em;text-transform:uppercase}

.hero-art{position:relative;min-height:660px}
.frame-photo{
  position:absolute;margin:0;border:1px solid rgba(240,235,226,.19);background:#111;box-shadow:0 34px 90px rgba(0,0,0,.32);overflow:hidden;
}
.frame-photo img{height:100%;object-fit:cover;filter:saturate(.76) contrast(1.04)}
.frame-photo.main{left:8%;top:9%;width:75%;height:64%;transform:rotate(-4deg);z-index:3}
.frame-photo.small{right:0;bottom:9%;width:40%;height:36%;transform:rotate(4deg);z-index:4}
.tape{position:absolute;height:38px;width:145px;background:rgba(214,209,197,.21);z-index:6;backdrop-filter:blur(2px)}
.tape.t1{left:31%;top:4%;transform:rotate(-7deg)}
.tape.t2{right:11%;bottom:40%;transform:rotate(8deg)}
.stamp{
  position:absolute;left:4%;bottom:2%;z-index:7;
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,31px);line-height:1.03;transform:rotate(-8deg);
}
.stamp span{display:block}.stamp span:nth-child(2){margin-left:20px}.stamp span:nth-child(3){margin-left:45px;color:var(--blue-soft)}
.hero-number{position:absolute;right:4%;top:3%;font-size:clamp(100px,15vw,250px);line-height:.8;font-weight:700;color:rgba(255,255,255,.024);z-index:0}
.hero-orbit{position:absolute;right:4%;top:14%;width:118px;height:118px;border:1px solid rgba(136,183,255,.18);border-radius:50%;z-index:1;animation:orbit 16s linear infinite}
.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(240,235,226,.09)}
.hero-orbit:before{inset:13px}.hero-orbit:after{inset:28px}
@keyframes orbit{to{transform:rotate(360deg)}}
.scroll-label{position:absolute;left:24px;bottom:70px;writing-mode:vertical-rl;color:#5d666e;font-size:9px;letter-spacing:.18em}

.section{position:relative}
.section-intro{
  max-width:1450px;margin:0 auto 74px;
  display:grid;grid-template-columns:130px minmax(0,1fr) minmax(260px,430px);gap:28px;align-items:end;
}
.section-no{font-size:10px;letter-spacing:.15em;color:#6f7880;align-self:start}
.section-intro h2{
  margin:0;font-family:var(--serif);font-size:clamp(48px,6vw,92px);line-height:.95;letter-spacing:-.04em;font-weight:700;
}
.section-intro p{margin:0;color:#8f989f;font-size:13px;line-height:1.78}

.about{padding:120px clamp(22px,5vw,80px);border-top:1px solid var(--line)}
.about-layout{max-width:1450px;margin:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:center}
.about-visual{position:relative;min-height:610px}
.about-visual .big{position:absolute;left:0;top:0;width:72%;height:72%;overflow:hidden;border:1px solid var(--line-strong);transform:rotate(-2deg)}
.about-visual .big img{height:100%;object-fit:cover;filter:grayscale(.5) saturate(.72)}
.about-visual .small{position:absolute;right:2%;bottom:2%;width:48%;height:43%;overflow:hidden;border:1px solid var(--line-strong);transform:rotate(3deg);box-shadow:0 34px 80px rgba(0,0,0,.3)}
.about-visual .small img{height:100%;object-fit:cover;filter:saturate(.8)}
.about-visual .since{position:absolute;left:8%;bottom:2%;font-family:var(--serif);font-size:clamp(68px,8vw,120px);line-height:.8;color:rgba(255,255,255,.055)}
.about-copy .label{font-size:10px;letter-spacing:.16em;color:var(--blue-soft)}
.about-copy h3{margin:22px 0 25px;font-family:var(--serif);font-size:clamp(38px,4vw,64px);line-height:1.03}
.about-copy p{margin:0 0 20px;color:#9ba4ac;font-size:14px;line-height:1.85;max-width:620px}
.about-signature{margin-top:35px;font-family:var(--serif);font-style:italic;font-size:24px;color:#d1d3d3;transform:rotate(-2deg);width:max-content}

.departments{padding:130px clamp(22px,5vw,80px);border-top:1px solid var(--line);overflow:hidden}
.departments-wrap{max-width:1450px;margin:auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:28px;min-height:720px}
.dept-feature{position:relative;overflow:hidden;border:1px solid var(--line);min-height:720px}
.dept-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.78)}
.dept-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,11,.08),rgba(5,8,11,.75) 76%,rgba(5,8,11,.92))}
.dept-feature-copy{position:absolute;z-index:2;left:40px;right:40px;bottom:42px}
.dept-feature-copy span{font-size:10px;letter-spacing:.16em;color:var(--blue-soft)}
.dept-feature-copy h3{font-family:var(--serif);font-size:clamp(42px,5vw,80px);line-height:.94;margin:14px 0 18px}
.dept-feature-copy p{max-width:580px;color:#a7adb3;font-size:13px;line-height:1.75}
.dept-side{display:grid;grid-template-rows:1fr 1fr;gap:28px}
.dept-card{position:relative;overflow:hidden;border:1px solid var(--line);min-height:0}
.dept-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.76);transition:transform .8s var(--ease),filter .6s ease}
.dept-card:hover img{transform:scale(1.045);filter:brightness(.62) saturate(.9)}
.dept-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(5,8,11,.88))}
.dept-card-copy{position:absolute;left:26px;right:26px;bottom:24px;z-index:2}
.dept-card-copy small{color:var(--blue-soft);font-size:9px;letter-spacing:.15em}
.dept-card-copy h4{font-family:var(--serif);font-size:31px;margin:10px 0 5px}
.dept-card-copy p{margin:0;color:#9da5ac;font-size:12px;line-height:1.6}

.team{padding:130px clamp(22px,5vw,80px) 180px;border-top:1px solid var(--line);overflow:hidden}
.team-layout{max-width:1450px;min-height:980px;margin:auto;position:relative;perspective:1600px}
.team-card{position:absolute;outline:none}
.team-card.card-a{left:2%;top:8%;width:min(31vw,430px);transform:rotate(-2.1deg)}
.team-card.card-b{left:36%;top:0;width:min(30vw,410px);transform:rotate(1.6deg);z-index:3}
.team-card.card-c{right:2%;top:18%;width:min(32vw,440px);transform:rotate(-1deg)}
.card-rotor{transform-style:preserve-3d;transition:filter .35s ease;will-change:transform}
.team-card.spinning .card-rotor{animation:spin360 1.1s var(--ease) both;filter:drop-shadow(0 28px 30px rgba(0,0,0,.24))}
@keyframes spin360{0%{transform:rotateY(0deg) translateZ(0)}50%{transform:rotateY(180deg) translateZ(18px)}100%{transform:rotateY(360deg) translateZ(0)}}
.card-photo{position:relative;aspect-ratio:.78;border:1px solid rgba(240,235,226,.2);padding:9px;background:#0b0f13;overflow:hidden;box-shadow:0 34px 80px rgba(0,0,0,.25)}
.card-photo:before{content:"";position:absolute;inset:9px;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.67));pointer-events:none;z-index:2}
.card-photo img{height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03) brightness(.78);transform:scale(1.02);transition:filter .65s var(--ease),transform .8s var(--ease)}
.team-card:hover .card-photo img,.team-card:focus-visible .card-photo img{filter:grayscale(0) contrast(1) brightness(.95);transform:scale(1.045)}
.team-card.spinning .card-photo{border-color:rgba(136,183,255,.42)}
.card-no{position:absolute;top:22px;right:22px;z-index:4;font-family:var(--serif);font-style:italic;color:#d9dcde;font-size:14px}
.card-line{position:absolute;left:-1px;top:18%;width:1px;height:28%;background:var(--blue-soft);z-index:4}
.card-copy{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:16px 11px 0}
.card-copy b{font-size:11px;letter-spacing:.1em}.card-copy em{font-family:var(--serif);font-size:13px;color:#7c858d}
.team-note{position:absolute;left:30%;bottom:9%;display:flex;align-items:center;gap:12px;transform:rotate(-90deg);transform-origin:left bottom;color:#68717a;font-size:9px;letter-spacing:.16em}
.team-note i{display:block;width:65px;height:1px;background:var(--line)}

.principles{padding:120px clamp(22px,6vw,100px);border-top:1px solid var(--line)}
.principle-row{max-width:1400px;margin:auto;display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.principle{flex:1;min-height:255px;padding:30px;border-right:1px solid var(--line);transition:flex .45s var(--ease),background .35s ease}
.principle:last-child{border-right:0}
.principle:hover{flex:1.08;background:rgba(61,131,247,.026)}
.principle>span{font-size:9px;color:#64707a}
.principle h3{margin:58px 0 14px;font-family:var(--serif);font-style:italic;font-size:29px}
.principle p{margin:0;max-width:240px;color:#8d969d;font-size:12px;line-height:1.72}

.process{padding:130px clamp(22px,5vw,80px);border-top:1px solid var(--line)}
.process-track{max-width:1380px;margin:auto;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.process-track:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--blue),transparent 75%);transform-origin:left;transform:scaleX(0);transition:transform 1.5s var(--ease)}
.process-track.visible:before{transform:scaleX(1)}
.step{min-height:270px;padding:34px 30px;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step .num{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--blue-soft)}
.step h3{margin:70px 0 14px;font-family:var(--serif);font-size:29px}
.step p{margin:0;color:#8f989f;font-size:12px;line-height:1.72}
.step small{display:block;margin-top:20px;color:#606b75;font-size:9px;letter-spacing:.12em;text-transform:uppercase}

.gallery{padding:120px clamp(22px,4vw,64px);border-top:1px solid var(--line);overflow:hidden}
.gallery-strip{display:grid;grid-template-columns:1.4fr .85fr 1fr;gap:22px;max-width:1540px;margin:auto;align-items:center}
.gallery-frame{position:relative;overflow:hidden;border:1px solid var(--line);background:#0b0f13}
.gallery-frame:nth-child(1){height:520px;transform:rotate(-1.2deg)}
.gallery-frame:nth-child(2){height:390px;transform:translateY(45px) rotate(1.6deg)}
.gallery-frame:nth-child(3){height:460px;transform:translateY(-28px) rotate(-.8deg)}
.gallery-frame img{height:100%;object-fit:cover;filter:grayscale(.55) saturate(.72);transition:filter .6s ease,transform .8s var(--ease)}
.gallery-frame:hover img{filter:grayscale(0) saturate(.95);transform:scale(1.04)}
.gallery-label{position:absolute;left:18px;bottom:16px;font-size:9px;letter-spacing:.13em;color:#d4d7da;background:rgba(5,8,11,.62);padding:8px 10px;backdrop-filter:blur(8px)}

.apply{min-height:650px;margin:80px clamp(20px,4vw,60px);position:relative;overflow:hidden;border:1px solid var(--line)}
.apply-image{position:absolute;inset:-8%}
.apply-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(.76) brightness(.52) saturate(.62);transform:scale(1.04)}
.apply-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,11,.97) 10%,rgba(5,8,11,.7) 48%,rgba(5,8,11,.24))}
.apply-copy{position:relative;z-index:2;padding:82px;max-width:780px}
.apply-copy>span{font-size:10px;letter-spacing:.16em;color:var(--blue-soft)}
.apply-copy h2{margin:28px 0 28px;font-family:var(--serif);font-size:clamp(58px,7vw,104px);line-height:.88;letter-spacing:-.045em}
.apply-copy h2 em{color:var(--blue-soft)}
.apply-copy p{max-width:560px;margin:0 0 34px;color:#a4abb2;font-size:13px;line-height:1.75}
.apply-actions{display:flex;gap:12px;flex-wrap:wrap}

footer{
  min-height:96px;padding:26px clamp(22px,5vw,80px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  border-top:1px solid var(--line);color:#646e77;font-size:9px;letter-spacing:.15em;
}
.footer-center{text-align:center}.footer-right{text-align:right}


.reveal{opacity:0;transform:translateY(30px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}


/* V2 premium motion pass — legacy page intro removed */
.scroll-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:120;pointer-events:none;background:rgba(255,255,255,.018)}.scroll-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-soft),rgba(201,165,100,.9));transform:scaleX(0);transform-origin:left center;box-shadow:0 0 12px rgba(61,131,247,.3)}
.pointer-light{position:fixed;left:0;top:0;width:360px;height:360px;z-index:-1;pointer-events:none;border-radius:50%;opacity:.52;background:radial-gradient(circle,rgba(61,131,247,.055),rgba(61,131,247,.018) 38%,transparent 72%);transform:translate3d(-50%,-50%,0)}
.brand{transition:transform .42s var(--ease)}.brand:hover{transform:translateY(-2px)}.shield{transition:transform .65s var(--ease),border-color .35s ease,color .35s ease}.brand:hover .shield{transform:rotateY(360deg);border-color:rgba(136,183,255,.5);color:var(--blue-soft)}
.nav{position:relative}.nav a{transition:color .28s ease,transform .32s var(--ease),letter-spacing .32s var(--ease)}.nav a:hover{color:#fff;transform:translateY(-2px);letter-spacing:.025em}.nav a:after{display:none}.nav-indicator{position:absolute;left:0;bottom:-10px;height:1px;width:28px;background:linear-gradient(90deg,var(--blue-soft),rgba(136,183,255,.15));transform:translateX(0);transition:transform .5s var(--ease),width .5s var(--ease);pointer-events:none}
.header-button,.primary-btn,.ghost-btn,.apply-btn{position:relative;overflow:hidden;isolation:isolate}.header-button:before,.primary-btn:before,.ghost-btn:before,.apply-btn:before{content:"";position:absolute;top:-70%;left:-38%;width:24%;height:240%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:rotate(16deg) translateX(-180%);transition:transform .72s var(--ease);z-index:-1;pointer-events:none}.header-button:hover:before,.primary-btn:hover:before,.ghost-btn:hover:before,.apply-btn:hover:before{transform:rotate(16deg) translateX(720%)}
body.motion-ready .hero-copy .kicker{animation:heroEnter .75s var(--ease) .08s both}body.motion-ready .hero-copy h1{animation:heroEnter .9s var(--ease) .18s both}body.motion-ready .hero-copy>p{animation:heroEnter .9s var(--ease) .3s both}body.motion-ready .hero-actions{animation:heroEnter .9s var(--ease) .4s both}body.motion-ready .hero-meta{animation:heroEnter .9s var(--ease) .5s both}@keyframes heroEnter{from{opacity:0;transform:translateY(28px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.frame-photo.main{animation:floatMain 7s ease-in-out infinite alternate}.frame-photo.small{animation:floatSmall 8.5s ease-in-out infinite alternate}@keyframes floatMain{from{margin-top:-4px}to{margin-top:8px}}@keyframes floatSmall{from{margin-bottom:-2px}to{margin-bottom:10px}}
.hero-scan{position:absolute;z-index:7;pointer-events:none;height:1px;background:linear-gradient(90deg,transparent,rgba(136,183,255,.55),transparent);filter:drop-shadow(0 0 7px rgba(61,131,247,.25));opacity:.35}.scan-a{left:12%;right:14%;top:30%;animation:scanA 7.5s ease-in-out infinite}.scan-b{left:34%;right:2%;bottom:22%;animation:scanB 9s ease-in-out infinite}@keyframes scanA{0%,100%{transform:translateX(-7%);opacity:.08}50%{transform:translateX(8%);opacity:.42}}@keyframes scanB{0%,100%{transform:translateX(5%);opacity:.1}50%{transform:translateX(-8%);opacity:.34}}
.section-intro h2,.about-copy h3,.apply-copy h2{background:linear-gradient(105deg,var(--text) 0 42%,#b7bdc2 50%,var(--text) 58% 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}.section-intro.visible h2,.about-copy.visible h3,.apply-copy.visible h2{animation:textSheen 1.35s var(--ease) .12s both}@keyframes textSheen{to{background-position:0 0}}
.dept-feature,.dept-card,.gallery-frame{transform-style:preserve-3d;transition:transform .5s var(--ease),border-color .35s ease,box-shadow .45s var(--ease);will-change:transform}.dept-feature:hover,.dept-card:hover,.gallery-frame:hover{border-color:rgba(136,183,255,.29);box-shadow:0 34px 95px rgba(0,0,0,.28)}.dept-feature-copy,.dept-card-copy,.gallery-label{transition:transform .5s var(--ease)}.dept-feature:hover .dept-feature-copy{transform:translateY(-6px)}.dept-card:hover .dept-card-copy{transform:translateY(-5px)}.gallery-frame:hover .gallery-label{transform:translateY(-4px)}
.card-rotor{position:relative}.card-rotor:after{content:"";position:absolute;inset:8px 8px 48px;pointer-events:none;z-index:8;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.12) 48%,transparent 66%) no-repeat;background-size:42% 100%;background-position:-80% 0;opacity:0}.team-card.spinning .card-rotor:after{opacity:1;animation:cardSweep 1.1s var(--ease) both}@keyframes cardSweep{to{background-position:220% 0}}.team-card:hover:not(.spinning) .card-rotor{filter:drop-shadow(0 26px 28px rgba(0,0,0,.16))}.card-copy{position:relative}.spin-hint{position:absolute;right:11px;top:-36px;z-index:10;padding:6px 8px;border:1px solid var(--line);background:rgba(7,10,14,.68);backdrop-filter:blur(8px);color:#b8c0c7;font-size:8px;letter-spacing:.12em;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .35s var(--ease)}.team-card:hover .spin-hint,.team-card:focus-visible .spin-hint{opacity:1;transform:none}
.principle{position:relative;overflow:hidden}.principle:before{content:"";position:absolute;left:0;top:0;width:0;height:1px;background:var(--blue-soft);transition:width .6s var(--ease)}.principle:hover:before{width:100%}.principle>span{display:inline-block;transition:transform .45s var(--ease),color .35s ease}.principle:hover>span{transform:translateX(8px);color:var(--blue-soft)}.principle h3{transition:transform .45s var(--ease)}.principle:hover h3{transform:translateY(-4px)}
.step{position:relative;overflow:hidden;transition:background .35s ease}.step:after{content:"";position:absolute;left:30px;bottom:25px;width:0;height:1px;background:var(--blue-soft);transition:width .55s var(--ease)}.step:hover{background:rgba(61,131,247,.018)}.step:hover:after{width:58px}.step .num{display:inline-block;transition:transform .45s var(--ease),color .35s ease}.step:hover .num{transform:translateY(-5px) rotate(-5deg);color:#d5e3ff}
.gallery-frame:before{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 34%,rgba(255,255,255,.085) 47%,transparent 58%);transform:translateX(-120%);transition:transform 1s var(--ease)}.gallery-frame:hover:before{transform:translateX(120%)}.apply-image{animation:applyBreath 10s ease-in-out infinite alternate}@keyframes applyBreath{to{scale:1.025}}
.mobile-menu:not([hidden]){animation:mobileMenuIn .48s var(--ease) both}.mobile-menu:not([hidden]) nav a{opacity:0;transform:translateY(-10px);animation:mobileLinkIn .45s var(--ease) forwards}.mobile-menu:not([hidden]) nav a:nth-child(1){animation-delay:.04s}.mobile-menu:not([hidden]) nav a:nth-child(2){animation-delay:.08s}.mobile-menu:not([hidden]) nav a:nth-child(3){animation-delay:.12s}.mobile-menu:not([hidden]) nav a:nth-child(4){animation-delay:.16s}.mobile-menu:not([hidden]) nav a:nth-child(5){animation-delay:.20s}.mobile-menu:not([hidden]) nav a:nth-child(6){animation-delay:.24s}@keyframes mobileMenuIn{from{opacity:0;transform:scaleY(.94) translateY(-8px)}to{opacity:1;transform:none}}@keyframes mobileLinkIn{to{opacity:1;transform:none}}

@media(max-width:1080px){
  .topbar{grid-template-columns:1fr auto}.nav{display:none}.menu-toggle{display:block}
  .hero{grid-template-columns:1fr;padding-top:130px}.hero-art{min-height:570px}
  .section-intro{grid-template-columns:1fr;gap:20px}
  .about-layout{grid-template-columns:1fr}.about-visual{min-height:560px}
  .departments-wrap{grid-template-columns:1fr}.dept-side{grid-template-columns:1fr 1fr;grid-template-rows:none}.dept-card{min-height:360px}
  .team-layout{min-height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 26px}
  .team-card{position:relative!important;inset:auto!important;width:auto!important}.team-card.card-a,.team-card.card-b,.team-card.card-c{transform:none}
  .team-note{display:none}
  .principle-row{flex-wrap:wrap}.principle{flex:1 1 50%}
  .process-track{grid-template-columns:repeat(2,1fr)}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .gallery-strip{grid-template-columns:1fr 1fr}.gallery-frame:nth-child(3){grid-column:1/-1;height:430px;transform:none}.gallery-frame:nth-child(1),.gallery-frame:nth-child(2){transform:none}
}
@media(max-width:680px){
  :root{--header-h:70px}
  .topbar{min-height:70px;padding:13px 18px}.brand-copy small{display:none}.brand-copy b{font-size:10px}.shield{width:36px;height:44px}.header-button{display:none}
  .hero{padding:112px 20px 70px}.hero h1{font-size:clamp(66px,19vw,92px)}.hero-art{min-height:420px}.frame-photo.main{width:83%;height:62%;left:3%}.frame-photo.small{width:48%;height:33%}
  .hero-meta{gap:16px}.scroll-label{display:none}
  .about,.departments,.team,.principles,.process,.gallery{padding-left:20px;padding-right:20px}
  .about-visual{min-height:430px}.about-visual .big{width:80%;height:68%}.about-visual .small{width:55%;height:40%}
  .dept-feature{min-height:540px}.dept-feature-copy{left:24px;right:24px;bottom:28px}.dept-side{grid-template-columns:1fr}.dept-card{min-height:360px}
  .team-layout{grid-template-columns:1fr}.team-card{width:min(94%,450px)!important;margin:auto}
  .principle{flex-basis:100%;border-right:0;border-bottom:1px solid var(--line)}
  .process-track{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)!important}.step:last-child{border-bottom:0!important}
  .gallery-strip{grid-template-columns:1fr}.gallery-frame,.gallery-frame:nth-child(1),.gallery-frame:nth-child(2),.gallery-frame:nth-child(3){height:380px!important;transform:none!important;grid-column:auto}
  .apply{margin:46px 14px;min-height:600px}.apply-copy{padding:55px 28px}.apply-overlay{background:rgba(5,8,11,.74)}
  footer{grid-template-columns:1fr;gap:10px;text-align:left}.footer-center,.footer-right{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}


/* =========================================================
   V3 MENU MOTION — layered navigation and section transitions
   ========================================================= */

/* Desktop nav uses dual text layers instead of a generic underline. */
.menu-toggle{display:block;position:relative;overflow:hidden;isolation:isolate}
.menu-toggle:before,.menu-toggle:after,.menu-toggle span{position:relative;z-index:2}
.menu-toggle:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px}
.menu-toggle::marker{display:none}
.menu-toggle:hover{border-color:rgba(136,183,255,.48);transform:rotate(5deg)}
.menu-toggle{transition:transform .4s var(--ease),border-color .3s ease,background .3s ease}
.menu-toggle:after{transition:transform .35s var(--ease),background .3s ease}
.menu-open .menu-toggle{transform:rotate(90deg);background:rgba(61,131,247,.08)}

.nav a{
  height:18px;line-height:18px;overflow:hidden;display:block;
  position:relative;padding:0 1px;
}
.nav a>span{display:block;transition:transform .42s var(--ease),opacity .3s ease}
.nav a:before{
  content:attr(data-label);position:absolute;left:1px;top:0;
  color:var(--blue-soft);transform:translateY(120%) skewY(5deg);opacity:.3;
  transition:transform .42s var(--ease),opacity .3s ease;
}
.nav a:hover>span,.nav a:focus-visible>span{transform:translateY(-120%) skewY(-4deg);opacity:.2}
.nav a:hover:before,.nav a:focus-visible:before{transform:translateY(0) skewY(0);opacity:1}
.nav a.active:before{color:#fff}
.nav a:focus-visible{outline:none}
.nav:before{
  content:"";position:absolute;left:-18px;right:-18px;bottom:-17px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(136,183,255,.08),transparent);
  transform:scaleX(.65);opacity:0;transition:opacity .35s ease,transform .45s var(--ease);
}
.nav:hover:before{opacity:1;transform:scaleX(1)}

/* Full-screen editorial mega menu. */
.mega-menu{
  position:fixed!important;inset:0!important;z-index:54!important;
  padding:calc(var(--header-h) + 44px) clamp(24px,6vw,100px) 44px!important;
  background:rgba(6,9,13,.985)!important;
  border:0!important;backdrop-filter:blur(22px)!important;
  overflow:hidden;clip-path:inset(0 0 100% 0 round 0 0 24px 24px);
  transform:none!important;
}
.mega-menu:not([hidden]){animation:megaReveal .72s var(--ease) forwards!important}
@keyframes megaReveal{0%{clip-path:inset(0 0 100% 0 round 0 0 24px 24px)}100%{clip-path:inset(0 0 0 0 round 0)}}
.mega-menu.closing{animation:megaClose .56s var(--ease) forwards!important}
@keyframes megaClose{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(100% 0 0 0)}}
.mega-grid-lines{
  position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  animation:megaGrid 18s linear infinite;
}
@keyframes megaGrid{to{background-position:72px 72px,-72px 72px}}
.mega-watermark{
  position:absolute;right:-2vw;bottom:-10vw;font-size:clamp(220px,34vw,620px);line-height:.7;
  font-weight:800;letter-spacing:-.08em;color:rgba(255,255,255,.018);pointer-events:none;
  transform:translateY(15%) rotate(-3deg);animation:watermarkDrift 9s ease-in-out infinite alternate;
}
@keyframes watermarkDrift{to{transform:translateY(11%) rotate(-1deg)}}
.mega-shell{position:relative;z-index:2;max-width:1500px;margin:auto;height:100%;display:flex;flex-direction:column}
.mega-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line)}
.mega-heading span{font-size:10px;letter-spacing:.18em;color:var(--blue-soft)}
.mega-heading small{font-size:9px;letter-spacing:.14em;color:#626d76}
.mega-layout{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.65fr);gap:80px;align-items:center;min-height:0}
.mega-nav{display:grid!important;gap:0!important;align-content:center}
.mega-nav a{
  position:relative;display:grid!important;grid-template-columns:54px 1fr 44px;align-items:center;
  min-height:76px;padding:7px 0;border-bottom:1px solid var(--line)!important;
  font-family:var(--serif);font-size:clamp(32px,4.3vw,70px)!important;line-height:.95!important;color:#d9d8d4!important;
  opacity:0;transform:translateY(26px) skewY(2deg);overflow:hidden;
}
.mega-menu:not([hidden]) .mega-nav a{animation:megaLink .72s var(--ease) forwards!important}
.mega-menu:not([hidden]) .mega-nav a:nth-child(1){animation-delay:.12s!important}
.mega-menu:not([hidden]) .mega-nav a:nth-child(2){animation-delay:.17s!important}
.mega-menu:not([hidden]) .mega-nav a:nth-child(3){animation-delay:.22s!important}
.mega-menu:not([hidden]) .mega-nav a:nth-child(4){animation-delay:.27s!important}
.mega-menu:not([hidden]) .mega-nav a:nth-child(5){animation-delay:.32s!important}
.mega-menu:not([hidden]) .mega-nav a:nth-child(6){animation-delay:.37s!important}
@keyframes megaLink{to{opacity:1;transform:translateY(0) skewY(0)}}
.mega-nav a:before{content:attr(data-index);font-family:var(--sans);font-style:normal;font-size:9px;letter-spacing:.14em;color:#65707a;transition:color .3s ease,transform .4s var(--ease)}
.mega-nav a>span{position:relative;z-index:2;display:block;transition:transform .46s var(--ease),color .35s ease,letter-spacing .46s var(--ease)}
.mega-nav a>span:after{content:attr(data-label);position:absolute;left:0;top:100%;color:var(--blue-soft);font-style:italic}
.mega-nav a>i{font-family:var(--sans);font-style:normal;font-size:18px;color:#59636c;text-align:right;transition:transform .45s var(--ease),color .3s ease}
.mega-nav a:after{content:"";position:absolute;left:54px;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--blue-soft),rgba(136,183,255,.1));transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.mega-nav a:hover:after,.mega-nav a:focus-visible:after{transform:scaleX(1)}
.mega-nav a:hover>span,.mega-nav a:focus-visible>span{transform:translateY(-100%);color:#fff;letter-spacing:-.02em}
.mega-nav a:hover>i,.mega-nav a:focus-visible>i{transform:translate(7px,7px) rotate(-8deg);color:var(--blue-soft)}
.mega-nav a:hover:before,.mega-nav a:focus-visible:before{color:var(--blue-soft);transform:translateX(7px)}
.mega-nav a:focus-visible{outline:none}
.mega-aside{align-self:center;padding:38px 0 38px 38px;border-left:1px solid var(--line);opacity:0;transform:translateX(30px)}
.mega-menu:not([hidden]) .mega-aside{animation:megaAside .8s var(--ease) .34s forwards}
@keyframes megaAside{to{opacity:1;transform:translateX(0)}}
.mega-aside-kicker{font-size:9px;letter-spacing:.17em;color:#68727b}
.mega-aside p{font-family:var(--serif);font-size:clamp(30px,3vw,54px);line-height:1.03;margin:28px 0 38px;color:#d9dad8}
.mega-aside p em{color:var(--blue-soft)}
.mega-status{display:grid;gap:12px;color:#69737c;font-size:9px;letter-spacing:.13em}
.mega-status span:first-child{display:flex;align-items:center;gap:10px}.mega-status b{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(135,238,184,.45)}
.mega-footer{display:flex;justify-content:space-between;gap:15px;padding-top:20px;border-top:1px solid var(--line);color:#5f6972;font-size:9px;letter-spacing:.14em;opacity:0}
.mega-menu:not([hidden]) .mega-footer{animation:megaFoot .7s ease .5s forwards}@keyframes megaFoot{to{opacity:1}}

/* Section click transition: split curtain + animated label. */
.section-transition{position:fixed;inset:0;z-index:180;pointer-events:none;visibility:hidden}
.section-transition.active{visibility:visible}
.transition-panel{position:absolute;left:0;right:0;height:50%;background:#080b10;transform:scaleY(0);transition:transform .48s var(--ease)}
.tp-a{top:0;transform-origin:top}.tp-b{bottom:0;transform-origin:bottom}
.section-transition.active .transition-panel{transform:scaleY(1)}
.section-transition.leaving .tp-a{transform:scaleY(0);transform-origin:bottom}
.section-transition.leaving .tp-b{transform:scaleY(0);transform-origin:top}
.transition-center{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);text-align:center;opacity:0;transition:opacity .25s ease}
.section-transition.active .transition-center{opacity:1;transition-delay:.22s}
.section-transition.leaving .transition-center{opacity:0;transition-delay:0s}
.transition-kicker{display:block;font-size:9px;letter-spacing:.18em;color:#68737d;margin-bottom:13px}
.transition-label{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(34px,5vw,72px);font-weight:600;color:#e6e1d9;transform:translateY(12px);transition:transform .42s var(--ease)}
.section-transition.active .transition-label{transform:translateY(0)}
.transition-center i{display:block;width:0;height:1px;margin:18px auto 0;background:var(--blue-soft);transition:width .48s var(--ease) .2s}
.section-transition.active .transition-center i{width:90px}

/* Arrival pulse is applied only after explicit menu navigation. */
.section.nav-arrival .section-intro h2,.hero.nav-arrival h1{animation:arrivalTitle .75s var(--ease) both}
@keyframes arrivalTitle{0%{opacity:.45;transform:translateY(16px);filter:blur(5px)}100%{opacity:1;transform:none;filter:blur(0)}}
.section.nav-arrival:before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--blue-soft),transparent);animation:arrivalLine .8s var(--ease) both;pointer-events:none}
@keyframes arrivalLine{0%{transform:scaleX(0);opacity:0}55%{opacity:.7}100%{transform:scaleX(1);opacity:0}}

/* Active menu item gets a small pulse without flashing the whole header. */
.nav a.active{color:#fff}
.nav a.active>span{animation:navActivePulse .6s var(--ease)}
@keyframes navActivePulse{0%{letter-spacing:.08em;opacity:.55}100%{letter-spacing:0;opacity:1}}

@media(max-width:1080px){
  .nav{display:none}
  .mega-layout{grid-template-columns:1fr .55fr;gap:40px}
  .mega-nav a{font-size:clamp(30px,6vw,58px)!important;min-height:68px}
}
@media(max-width:680px){
  .mega-menu{padding:calc(var(--header-h) + 28px) 20px 24px!important;overflow:auto}
  .mega-heading small{display:none}
  .mega-layout{display:block}.mega-aside{display:none}
  .mega-nav a{grid-template-columns:38px 1fr 34px;min-height:62px;font-size:clamp(28px,10vw,48px)!important}
  .mega-nav a:after{left:38px}
  .mega-footer{flex-wrap:wrap;justify-content:flex-start}.mega-watermark{bottom:2%;right:-18%;font-size:80vw}
}
@media(prefers-reduced-motion:reduce){
  .mega-menu:not([hidden]),.mega-menu.closing,.mega-menu:not([hidden]) .mega-nav a,.mega-menu:not([hidden]) .mega-aside,.mega-menu:not([hidden]) .mega-footer{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .section-transition{display:none!important}
  .mega-grid-lines,.mega-watermark{animation:none!important}
}


/* =========================================================
   V4 FULL MOTION — clearly visible navigation choreography
   ========================================================= */

/* Header now physically reacts to scrolling direction. */
.topbar{
  transition:transform .55s var(--ease),background .35s ease,border-color .35s ease,backdrop-filter .35s ease,min-height .4s var(--ease),padding .4s var(--ease)!important;
  will-change:transform;
}
.topbar.header-hidden{transform:translateY(calc(-100% - 6px))}
.topbar.scrolled{min-height:68px;padding-top:11px;padding-bottom:11px}

/* Desktop navigation: moving glass plate + numeric index + dual text roll. */
.nav{isolation:isolate;padding:9px 10px;border-radius:999px;transition:background .35s ease,box-shadow .35s ease}
.nav:hover{background:rgba(255,255,255,.018);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.nav-hover-plate{
  position:absolute;top:3px;left:0;height:calc(100% - 6px);width:50px;z-index:-1;
  border:1px solid rgba(136,183,255,.15);border-radius:999px;
  background:linear-gradient(110deg,rgba(61,131,247,.11),rgba(255,255,255,.025));
  box-shadow:0 10px 30px rgba(0,0,0,.18),inset 0 0 20px rgba(61,131,247,.025);
  opacity:0;transform:translateX(0) scale(.86);
  transition:transform .48s var(--ease),width .48s var(--ease),opacity .28s ease;
  pointer-events:none;
}
.nav:hover .nav-hover-plate{opacity:1;transform:translateX(0) scale(1)}
.nav a{height:28px!important;line-height:28px!important;padding:0 10px!important;z-index:2;overflow:visible!important}
.nav a:after{
  display:block!important;content:attr(data-index)!important;position:absolute!important;
  top:-18px!important;left:50%!important;right:auto!important;bottom:auto!important;height:auto!important;
  transform:translate(-50%,5px)!important;opacity:0!important;background:none!important;
  color:#64707b!important;font-size:7px!important;letter-spacing:.16em!important;
  transition:opacity .28s ease,transform .34s var(--ease)!important;
}
.nav a:hover:after,.nav a.active:after{opacity:1!important;transform:translate(-50%,0)!important}
.nav a>span{transform-origin:center;will-change:transform,filter}
.nav a:hover>span{transform:translateY(-135%) rotateX(22deg)!important;filter:blur(1px)}
.nav a:before{top:0!important;left:10px!important;right:10px;white-space:nowrap}
.nav-indicator{bottom:-6px!important;height:2px!important;border-radius:999px;box-shadow:0 0 12px rgba(136,183,255,.35)}

/* Menu button gets a rotating outer radar ring. */
.menu-toggle{border-radius:50%!important}
.menu-toggle:before{box-shadow:0 0 0 0 rgba(136,183,255,0)}
.menu-toggle .menu-radar{display:none}
.menu-toggle:focus-visible{outline-offset:5px}
.menu-toggle:hover{box-shadow:0 0 0 6px rgba(61,131,247,.035),0 0 30px rgba(61,131,247,.08)}

/* Staggered 4-panel doors make menu opening unmistakable. */
.mega-menu{background:#06090d!important;perspective:1400px}
.mega-doors{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);z-index:0;pointer-events:none}
.mega-doors i{display:block;background:#0a0f15;border-right:1px solid rgba(255,255,255,.025);transform:translateY(-102%);will-change:transform}
.mega-menu:not([hidden]) .mega-doors i{animation:megaDoorIn .74s var(--ease) forwards}
.mega-menu:not([hidden]) .mega-doors i:nth-child(1){animation-delay:0s}
.mega-menu:not([hidden]) .mega-doors i:nth-child(2){animation-delay:.055s}
.mega-menu:not([hidden]) .mega-doors i:nth-child(3){animation-delay:.11s}
.mega-menu:not([hidden]) .mega-doors i:nth-child(4){animation-delay:.165s}
.mega-menu.closing .mega-doors i{animation:megaDoorOut .5s var(--ease) forwards!important}
.mega-menu.closing .mega-doors i:nth-child(4){animation-delay:0s!important}.mega-menu.closing .mega-doors i:nth-child(3){animation-delay:.04s!important}.mega-menu.closing .mega-doors i:nth-child(2){animation-delay:.08s!important}.mega-menu.closing .mega-doors i:nth-child(1){animation-delay:.12s!important}
@keyframes megaDoorIn{to{transform:translateY(0)}}
@keyframes megaDoorOut{from{transform:translateY(0)}to{transform:translateY(102%)}}

/* Remove old overall clip so doors provide the transition. */
.mega-menu:not([hidden]),.mega-menu.closing{clip-path:none!important}
.mega-menu:not([hidden]){animation:megaAtmosphereIn .35s ease forwards!important}
.mega-menu.closing{animation:megaAtmosphereOut .6s ease forwards!important}
@keyframes megaAtmosphereIn{from{background:rgba(6,9,13,0)}to{background:rgba(6,9,13,.985)}}
@keyframes megaAtmosphereOut{from{opacity:1}to{opacity:0}}

.mega-shell{z-index:3!important;opacity:0;transform:translateY(20px) scale(.985)}
.mega-menu:not([hidden]) .mega-shell{animation:megaShellIn .72s var(--ease) .24s forwards}
@keyframes megaShellIn{to{opacity:1;transform:none}}

.mega-grid-lines{z-index:1!important;opacity:.18!important;transform:rotate(-1deg) scale(1.03)}
.mega-watermark{z-index:1!important;transition:transform .7s var(--ease),opacity .45s ease,filter .45s ease;opacity:.72}
.mega-menu.preview-shift .mega-watermark{filter:blur(2px);opacity:.42}

/* Animated crosshair follows the pointer inside mega menu. */
.mega-cursor{position:absolute;left:0;top:0;width:34px;height:34px;z-index:5;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .2s ease}
.mega-cursor:before,.mega-cursor:after{content:"";position:absolute;left:50%;top:50%;background:rgba(136,183,255,.45)}
.mega-cursor:before{width:34px;height:1px;transform:translate(-50%,-50%)}
.mega-cursor:after{width:1px;height:34px;transform:translate(-50%,-50%)}
.mega-cursor span{position:absolute;inset:10px;border:1px solid rgba(136,183,255,.35);border-radius:50%}
.mega-menu.cursor-active .mega-cursor{opacity:.75}

/* Large menu links now slide, skew, brighten and reveal a broad background sweep. */
.mega-nav a{isolation:isolate;transition:padding-left .5s var(--ease),background .45s ease!important}
.mega-nav a:before{z-index:3}
.mega-nav a>span,.mega-nav a>i{z-index:3}
.mega-nav a .menu-bg{display:none}
.mega-nav a:after{left:0!important;right:0!important;bottom:0!important;height:100%!important;z-index:1!important;border:0!important;background:linear-gradient(90deg,rgba(61,131,247,.11),rgba(61,131,247,.025) 52%,transparent 85%)!important;transform:scaleX(0)!important;transform-origin:left center!important;opacity:1!important}
.mega-nav a:hover:after,.mega-nav a:focus-visible:after{transform:scaleX(1)!important}
.mega-nav a:hover,.mega-nav a:focus-visible{padding-left:18px!important}
.mega-nav a:hover>span,.mega-nav a:focus-visible>span{transform:translateY(-100%) translateX(9px) skewX(-2deg)!important}
.mega-nav a:hover>i,.mega-nav a:focus-visible>i{transform:translate(8px,5px) rotate(-45deg)!important}

/* Preview image panel on right morphs per menu item. */
.mega-aside{padding:26px 0 26px 38px!important;overflow:visible}
.mega-preview{display:grid;gap:24px}
.mega-preview-media{position:relative;aspect-ratio:1.22;overflow:hidden;border:1px solid var(--line-strong);background:#0a0e13;transform:rotate(1.2deg);box-shadow:0 36px 90px rgba(0,0,0,.3);transition:transform .6s var(--ease),border-color .35s ease}
.mega-preview-media:before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(5,8,11,.48))}
.mega-preview-frame{position:absolute;inset:0;margin:0;opacity:0;clip-path:inset(100% 0 0 0);transform:scale(1.08) translateY(12px);transition:clip-path .65s var(--ease),opacity .35s ease,transform .85s var(--ease)}
.mega-preview-frame img{height:100%;object-fit:cover;filter:grayscale(.45) saturate(.8) brightness(.78)}
.mega-preview-frame.active{opacity:1;clip-path:inset(0 0 0 0);transform:scale(1) translateY(0);z-index:2}
.mega-preview-frame.outgoing{opacity:1;clip-path:inset(0 0 100% 0);transform:scale(.98) translateY(-9px);z-index:1}
.mega-preview-scan{position:absolute;z-index:7;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--blue-soft),transparent);box-shadow:0 0 10px rgba(61,131,247,.24);animation:megaPreviewScan 4s ease-in-out infinite}
@keyframes megaPreviewScan{0%,100%{top:3%;opacity:.1}50%{top:94%;opacity:.58}}
.mega-preview-index{position:absolute;right:15px;top:14px;z-index:8;font-family:var(--serif);font-style:italic;font-size:28px;color:rgba(255,255,255,.66);transition:transform .45s var(--ease),opacity .35s ease}
.mega-preview-copy{padding-left:5px}
.mega-preview-title{margin:15px 0 19px!important;font-size:clamp(25px,2.3vw,42px)!important;transition:transform .45s var(--ease),opacity .3s ease}
.mega-preview-title.changing{transform:translateY(8px);opacity:.18}
.mega-preview-sub{transition:opacity .3s ease,letter-spacing .4s var(--ease)}

/* Moving marquee instead of static footer words. */
.mega-footer{display:block!important;overflow:hidden}
.mega-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mega-marquee-track{display:flex;width:max-content;gap:22px;align-items:center;animation:megaMarquee 20s linear infinite;white-space:nowrap}
.mega-marquee-track b{color:var(--blue-soft);font-weight:400}
@keyframes megaMarquee{to{transform:translateX(-50%)}}

/* Five-slat route transition replaces the old basic 2-panel wipe. */
.section-transition{background:transparent!important;overflow:hidden}
.transition-panel{display:none!important}
.transition-slats{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.transition-slats span{display:block;background:#080c11;transform:scaleY(0);transform-origin:top;will-change:transform;box-shadow:inset -1px 0 rgba(255,255,255,.018)}
.section-transition.active .transition-slats span{animation:slatIn .48s var(--ease) forwards}
.section-transition.active .transition-slats span:nth-child(1){animation-delay:0s}.section-transition.active .transition-slats span:nth-child(2){animation-delay:.045s}.section-transition.active .transition-slats span:nth-child(3){animation-delay:.09s}.section-transition.active .transition-slats span:nth-child(4){animation-delay:.135s}.section-transition.active .transition-slats span:nth-child(5){animation-delay:.18s}
.section-transition.leaving .transition-slats span{transform-origin:bottom;animation:slatOut .45s var(--ease) forwards!important}
.section-transition.leaving .transition-slats span:nth-child(5){animation-delay:0s!important}.section-transition.leaving .transition-slats span:nth-child(4){animation-delay:.04s!important}.section-transition.leaving .transition-slats span:nth-child(3){animation-delay:.08s!important}.section-transition.leaving .transition-slats span:nth-child(2){animation-delay:.12s!important}.section-transition.leaving .transition-slats span:nth-child(1){animation-delay:.16s!important}
@keyframes slatIn{to{transform:scaleY(1)}}
@keyframes slatOut{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.transition-ring{position:absolute;left:50%;top:50%;width:150px;height:150px;border:1px solid rgba(136,183,255,.14);border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;z-index:2}
.section-transition.active .transition-ring{animation:transitionRing .9s var(--ease) .18s both}
@keyframes transitionRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}55%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(120deg)}}
.transition-center{z-index:4!important}
.transition-label{letter-spacing:-.035em;transform:translateY(18px) scale(.96)!important}
.section-transition.active .transition-label{transform:translateY(0) scale(1)!important}
.section-transition.active .transition-center i{width:150px!important;box-shadow:0 0 15px rgba(136,183,255,.3)}

/* Stronger but still clean section-arrival choreography. */
.section.nav-arrival .section-intro{animation:sectionArrival .85s var(--ease) both}
@keyframes sectionArrival{0%{transform:translateY(28px) scale(.99);opacity:.4;filter:blur(4px)}100%{transform:none;opacity:1;filter:none}}
.section.nav-arrival .section-no{animation:routeNo .7s var(--ease) .12s both}
@keyframes routeNo{from{letter-spacing:.35em;opacity:.2}to{letter-spacing:.15em;opacity:1}}

/* Menu open slightly recedes the page behind it instead of simply covering it. */
main,footer{transition:transform .7s var(--ease),filter .65s ease,opacity .5s ease;transform-origin:center top}
body.menu-open main,body.menu-open footer{transform:scale(.965) translateY(14px);filter:blur(8px) brightness(.52);opacity:.5}

@media(max-width:1080px){
  .mega-preview-media{aspect-ratio:1.35}.mega-aside{padding-left:24px!important}
}
@media(max-width:680px){
  .mega-doors{grid-template-columns:repeat(3,1fr)}.mega-doors i:nth-child(4){display:none}
  .mega-cursor,.mega-aside{display:none!important}.mega-nav a:hover,.mega-nav a:focus-visible{padding-left:8px!important}
  .mega-marquee-track{animation-duration:15s}
}
@media(prefers-reduced-motion:reduce){
  .mega-doors i,.mega-shell,.mega-preview-frame,.mega-marquee-track,.transition-slats span,.transition-ring,.topbar{animation:none!important;transition:none!important}
  .mega-shell,.mega-preview-frame.active{opacity:1!important;transform:none!important;clip-path:none!important}
  .section-transition{display:none!important}
  body.menu-open main,body.menu-open footer{transform:none!important;filter:none!important;opacity:1!important}
}


/* =========================================================
   V5 — approved soft layered menu + expanded 360° cards
   ========================================================= */

/* Approved main navigation motion:
   thin line = 1.28s, blue ambient glow = 2.05s. */
.nav-hover-plate,
.nav-indicator{display:none!important}
.nav{
  align-items:center!important;
  gap:clamp(18px,2.45vw,38px)!important;
}
.nav a{
  height:auto!important;
  line-height:1!important;
  padding:13px 1px 12px!important;
  overflow:visible!important;
  color:#8f99a3!important;
  transform:none!important;
  letter-spacing:0!important;
  transition:color .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)!important;
}
.nav a>span{
  display:block!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  transition:color .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)!important;
}
.nav a:before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:3px!important;
  width:0!important;
  height:1px!important;
  transform:translateX(-50%)!important;
  background:linear-gradient(90deg,transparent,var(--blue-soft),transparent)!important;
  opacity:0!important;
  filter:blur(.2px)!important;
  pointer-events:none!important;
  transition:width 1.28s cubic-bezier(.16,.84,.2,1),opacity .9s ease,filter 1.15s ease!important;
}
.nav a:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  width:0!important;
  height:5px!important;
  transform:translateX(-50%)!important;
  border:0!important;
  border-radius:999px!important;
  background:radial-gradient(ellipse at center,rgba(61,131,247,.38),rgba(61,131,247,.08) 48%,transparent 74%)!important;
  opacity:0!important;
  filter:blur(4px)!important;
  box-shadow:none!important;
  pointer-events:none!important;
  transition:width 2.05s cubic-bezier(.16,.84,.2,1),opacity 1.65s ease,filter 1.8s ease!important;
}
.nav a:hover,
.nav a:focus-visible{
  color:#eef2f6!important;
  transform:translateY(-1px)!important;
}
.nav a:hover>span,
.nav a:focus-visible>span{
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
.nav a:hover:before,
.nav a:focus-visible:before{
  width:100%!important;
  opacity:.7!important;
  filter:blur(0)!important;
}
.nav a:hover:after,
.nav a:focus-visible:after{
  width:88%!important;
  opacity:.36!important;
  filter:blur(3px)!important;
}
.nav a.active{
  color:#e3e8ed!important;
}
.nav a.active:before{
  width:62%!important;
  opacity:.38!important;
}
.nav a.active:after{
  width:44%!important;
  opacity:.14!important;
}
.nav a.active:hover:before{width:100%!important;opacity:.7!important}
.nav a.active:hover:after{width:88%!important;opacity:.36!important}

/* Mega menu links are softened to match the selected motion language. */
.mega-nav a{
  padding-left:0!important;
  background:radial-gradient(ellipse at center,rgba(61,131,247,.16),transparent 72%) 50% 100% / 0 6px no-repeat!important;
  transition:padding-left .9s cubic-bezier(.22,1,.36,1),background-size 2.05s cubic-bezier(.16,.84,.2,1),color .8s ease!important;
}
.mega-nav a>span:after{display:none!important}
.mega-nav a>span{
  transform:none!important;
  letter-spacing:0!important;
  transition:transform .9s cubic-bezier(.22,1,.36,1),color .8s ease!important;
}
.mega-nav a:after{
  left:54px!important;
  right:0!important;
  top:auto!important;
  bottom:0!important;
  height:1px!important;
  width:auto!important;
  background:linear-gradient(90deg,transparent,var(--blue-soft),transparent)!important;
  transform:scaleX(0)!important;
  transform-origin:center!important;
  opacity:0!important;
  transition:transform 1.28s cubic-bezier(.16,.84,.2,1),opacity .9s ease!important;
}
.mega-nav a:hover,
.mega-nav a:focus-visible{
  padding-left:8px!important;
  background-size:72% 6px!important;
}
.mega-nav a:hover:after,
.mega-nav a:focus-visible:after{
  transform:scaleX(1)!important;
  opacity:.68!important;
}
.mega-nav a:hover>span,
.mega-nav a:focus-visible>span{
  transform:translateX(8px)!important;
  color:#f1f4f7!important;
  letter-spacing:0!important;
}
.mega-nav a:hover>i,
.mega-nav a:focus-visible>i{
  transform:translate(5px,2px) rotate(-12deg)!important;
  transition-duration:.85s!important;
}
.mega-nav a:hover:before,
.mega-nav a:focus-visible:before{
  transform:translateX(4px)!important;
  transition-duration:.8s!important;
}

/* Lower image cards preserve their current layout while the inner layer rotates. */
.motion-card{
  perspective:1450px;
  overflow:visible!important;
  isolation:isolate;
}
.motion-card-inner{
  width:100%;height:100%;min-height:inherit;
  position:relative;
  transform-style:preserve-3d;
  transform-origin:center center;
  will-change:transform,filter;
  transition:filter .55s ease;
}
.dept-card .motion-card-inner,
.gallery-frame .motion-card-inner{
  position:absolute;inset:0;
}
.motion-card.motion-spinning .motion-card-inner{
  animation:lowerCardSpin360 1.28s cubic-bezier(.18,.78,.2,1) both;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.3));
}
@keyframes lowerCardSpin360{
  0%{transform:rotateY(0deg) translateZ(0) scale(1)}
  50%{transform:rotateY(180deg) translateZ(22px) scale(1.018)}
  100%{transform:rotateY(360deg) translateZ(0) scale(1)}
}
.motion-card-inner:before{
  content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
  border:1px solid rgba(136,183,255,0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0);
  transition:border-color .55s ease,box-shadow .55s ease;
}
.motion-card.motion-spinning .motion-card-inner:before{
  border-color:rgba(136,183,255,.24);
  box-shadow:inset 0 0 28px rgba(61,131,247,.055);
}
.motion-card-inner:after{
  content:"";position:absolute;inset:0;z-index:9;pointer-events:none;
  background:linear-gradient(112deg,transparent 25%,rgba(255,255,255,.13) 48%,transparent 68%) no-repeat;
  background-size:34% 100%;background-position:-70% 0;opacity:0;
}
.motion-card.motion-spinning .motion-card-inner:after{
  opacity:1;animation:lowerCardSweep 1.28s cubic-bezier(.18,.78,.2,1) both;
}
@keyframes lowerCardSweep{from{background-position:-70% 0}to{background-position:210% 0}}

/* Rebuild the department gradient on the rotating inner plane. */
.dept-card:after{display:none!important}
.dept-card .motion-card-inner:after{
  background:
    linear-gradient(112deg,transparent 25%,rgba(255,255,255,.11) 48%,transparent 68%) -70% 0/34% 100% no-repeat,
    linear-gradient(180deg,transparent 35%,rgba(5,8,11,.88));
  opacity:1;
}
.dept-card.motion-spinning .motion-card-inner:after{
  animation:deptCardSweep 1.28s cubic-bezier(.18,.78,.2,1) both;
}
@keyframes deptCardSweep{
  from{background-position:-70% 0,0 0}
  to{background-position:210% 0,0 0}
}

.motion-card-badge{
  position:absolute;right:14px;top:14px;z-index:15;
  padding:6px 8px;border:1px solid rgba(240,235,226,.12);
  background:rgba(7,10,14,.64);backdrop-filter:blur(8px);
  color:#a8b2bc;font-size:8px;letter-spacing:.12em;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .75s cubic-bezier(.22,1,.36,1),border-color .5s ease;
  pointer-events:none;
}
.motion-card:hover .motion-card-badge,
.motion-card:focus-visible .motion-card-badge,
.motion-card-direct:hover .motion-card-badge,
.motion-card-direct:focus-visible .motion-card-badge{
  opacity:1;transform:translateY(0);border-color:rgba(136,183,255,.24);
}

/* Text cards get the same full turn, with a softer depth profile. */
.motion-card-direct{
  transform-style:preserve-3d;
  perspective:1400px;
  will-change:transform,filter;
  position:relative;
}
.motion-card-direct.motion-spinning-direct{
  animation:lowerTextSpin360 1.34s cubic-bezier(.18,.78,.2,1) both;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.22));
  z-index:6;
}
@keyframes lowerTextSpin360{
  0%{transform:perspective(1400px) rotateY(0deg) translateZ(0)}
  20%{transform:perspective(1400px) rotateY(64deg) translateZ(10px)}
  50%{transform:perspective(1400px) rotateY(184deg) translateZ(20px)}
  80%{transform:perspective(1400px) rotateY(310deg) translateZ(8px)}
  100%{transform:perspective(1400px) rotateY(360deg) translateZ(0)}
}
.motion-card-direct:after{
  transition:width .72s var(--ease),opacity .5s ease!important;
}
.motion-card-direct.motion-spinning-direct{
  border-color:rgba(136,183,255,.18)!important;
  background:linear-gradient(135deg,rgba(61,131,247,.018),rgba(255,255,255,.008))!important;
}
.motion-card-badge-text{top:18px;right:18px}

/* Give lower cards a calmer premium hover before the spin starts. */
.motion-card:hover,
.motion-card:focus-visible{
  border-color:rgba(136,183,255,.26)!important;
}
.motion-card-direct:hover,
.motion-card-direct:focus-visible{
  background:rgba(61,131,247,.018);
}

@media(max-width:1080px){
  .mega-nav a:after{left:38px!important}
}
@media(max-width:680px){
  .motion-card-badge{opacity:.72;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .motion-card.motion-spinning .motion-card-inner,
  .motion-card-direct.motion-spinning-direct{animation:none!important}
}


/* V6 — Police Department main feature joins the Legal Departments 360° system. */
.dept-feature.motion-card{
  perspective:1600px;
  overflow:visible!important;
}
.dept-feature .motion-card-inner{
  position:absolute;
  inset:0;
}
.dept-feature:after{
  display:none!important;
}
.dept-feature .motion-card-inner:after{
  background:
    linear-gradient(112deg,transparent 25%,rgba(255,255,255,.11) 48%,transparent 68%) -70% 0/34% 100% no-repeat,
    linear-gradient(180deg,rgba(5,8,11,.08),rgba(5,8,11,.75) 76%,rgba(5,8,11,.92));
  opacity:1;
}
.dept-feature.motion-spinning .motion-card-inner:after{
  animation:deptFeatureSweep 1.28s cubic-bezier(.18,.78,.2,1) both;
}
@keyframes deptFeatureSweep{
  from{background-position:-70% 0,0 0}
  to{background-position:210% 0,0 0}
}

/* A running turn is never paused when pointer state changes. */
.team-card.spinning .card-rotor,
.motion-card.motion-spinning .motion-card-inner{
  animation-play-state:running!important;
}



/* =========================================================
   V7 — GIF -> line/title -> site reveal intro
   ========================================================= */
body.intro-active{overflow:hidden}

.site-intro{
  position:fixed;inset:0;z-index:500;
  background:#03060a;
  overflow:hidden;
  opacity:1;visibility:visible;
  pointer-events:auto;
}
.site-intro.is-finished{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .72s ease .05s,visibility .72s ease .05s;
}

.intro-gif-stage{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:#03060a;
  opacity:1;
  transform:scale(1);
  transition:opacity 1s ease,transform 1.25s cubic-bezier(.22,1,.36,1),filter 1s ease;
}
.intro-gif{
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(.76) saturate(.9) contrast(1.04);
  transform:scale(1.02);
}
.intro-gif-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 44%,transparent 25%,rgba(3,6,10,.16) 58%,rgba(3,6,10,.78) 100%),
    linear-gradient(180deg,rgba(3,6,10,.08),rgba(3,6,10,.26));
}

.site-intro.phase-title .intro-gif-stage{
  opacity:.13;
  transform:scale(1.045);
  filter:blur(6px);
}

.intro-title-stage{
  position:absolute;inset:0;
  z-index:4;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,3vw,44px);
  padding:0 clamp(22px,5vw,90px);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .75s ease,transform 1s cubic-bezier(.22,1,.36,1);
}
.site-intro.phase-title .intro-title-stage{
  opacity:1;
  transform:translateY(0);
}
.intro-title-line{
  height:1px;flex:1;max-width:360px;
  background:linear-gradient(90deg,transparent,rgba(113,173,255,.95));
  transform:scaleX(0);
  transition:transform 1.5s cubic-bezier(.16,.84,.2,1) .18s,opacity 1s ease .18s;
  opacity:.92;
}
.intro-title-line-left{transform-origin:right center}
.intro-title-line-right{
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(113,173,255,.95),transparent);
}
.site-intro.phase-title .intro-title-line{transform:scaleX(1)}

.intro-title-core{
  flex:0 1 auto;
  min-width:min(72vw,720px);
  text-align:center;
}
.intro-title-kicker,
.intro-title-sub,
.intro-title-core strong{
  display:block;
  opacity:0;
  transform:translateY(12px);
  filter:blur(4px);
}
.intro-title-kicker{
  margin-bottom:13px;
  color:#7d8894;
  font-size:9px;
  letter-spacing:.42em;
  transition:opacity .8s ease .55s,transform .95s cubic-bezier(.22,1,.36,1) .55s,filter .8s ease .55s;
}
.intro-title-core strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(32px,5.1vw,78px);
  font-weight:600;
  line-height:.95;
  letter-spacing:.06em;
  color:#f1eee7;
  text-shadow:0 10px 40px rgba(0,0,0,.45);
  transition:opacity 1s ease .72s,transform 1.1s cubic-bezier(.22,1,.36,1) .72s,filter 1s ease .72s,letter-spacing 1.25s cubic-bezier(.22,1,.36,1) .72s;
}
.intro-title-sub{
  margin-top:17px;
  color:#8d99a5;
  font-size:8px;
  letter-spacing:.26em;
  transition:opacity .9s ease 1.05s,transform 1s cubic-bezier(.22,1,.36,1) 1.05s,filter .9s ease 1.05s;
}
.site-intro.phase-title .intro-title-kicker,
.site-intro.phase-title .intro-title-sub,
.site-intro.phase-title .intro-title-core strong{
  opacity:1;transform:translateY(0);filter:blur(0);
}
.site-intro.phase-title .intro-title-core strong{letter-spacing:.095em}

.intro-reveal-panel{
  position:absolute;top:0;bottom:0;width:50%;
  z-index:9;
  background:#03060a;
  transform:translateX(0);
  opacity:0;
}
.intro-reveal-panel-left{left:0}
.intro-reveal-panel-right{right:0}

.site-intro.phase-exit .intro-title-stage{
  opacity:0;
  transform:translateY(-8px) scale(.985);
  transition:opacity .45s ease,transform .65s cubic-bezier(.22,1,.36,1);
}
.site-intro.phase-exit .intro-gif-stage{
  opacity:0;
  transform:scale(1.065);
}
.site-intro.phase-exit .intro-reveal-panel{
  opacity:1;
}
.site-intro.phase-exit .intro-reveal-panel-left{
  animation:introCurtainLeft .9s cubic-bezier(.65,0,.2,1) .18s forwards;
}
.site-intro.phase-exit .intro-reveal-panel-right{
  animation:introCurtainRight .9s cubic-bezier(.65,0,.2,1) .18s forwards;
}
@keyframes introCurtainLeft{
  0%{transform:translateX(0)}
  100%{transform:translateX(-101%)}
}
@keyframes introCurtainRight{
  0%{transform:translateX(0)}
  100%{transform:translateX(101%)}
}

/* Make the actual site arrive gently after intro. */
body.intro-active .topbar,
body.intro-active main,
body.intro-active footer{
  opacity:0;
  transform:translateY(10px) scale(.997);
  filter:blur(4px);
}
body.intro-ready .topbar,
body.intro-ready main,
body.intro-ready footer{
  opacity:1;
  transform:none;
  filter:blur(0);
  transition:
    opacity 1.05s ease,
    transform 1.15s cubic-bezier(.22,1,.36,1),
    filter 1.05s ease;
}

@media(max-width:720px){
  .intro-title-stage{gap:14px;padding:0 18px}
  .intro-title-line{max-width:100px}
  .intro-title-core{min-width:0;flex:1}
  .intro-title-core strong{font-size:clamp(26px,9vw,48px);letter-spacing:.04em}
  .site-intro.phase-title .intro-title-core strong{letter-spacing:.055em}
  .intro-title-sub{font-size:7px;line-height:1.6;letter-spacing:.18em}
}
@media(prefers-reduced-motion:reduce){
  /* The requested opening is still shown. Only decorative motion is simplified. */
  .intro-gif-stage,.intro-title-stage,.intro-title-line,
  .intro-title-kicker,.intro-title-core strong,.intro-title-sub{
    transition-timing-function:ease!important;
  }
}


.site-intro.gif-fallback .intro-gif-stage{
  background:
    radial-gradient(circle at 50% 42%,rgba(47,134,255,.13),transparent 36%),
    linear-gradient(135deg,#09111b,#03060a 68%);
}
.site-intro.gif-fallback .intro-gif{display:none}



/* =========================================================
   V7.2 — shorter GIF (2s) + softer shaped intro transition
   ========================================================= */
.intro-gif-stage{
  transition:
    opacity 1.25s ease,
    transform 1.55s cubic-bezier(.22,1,.36,1),
    filter 1.2s ease;
}
.site-intro.phase-title .intro-gif-stage{
  opacity:.18;
  transform:scale(1.028);
  filter:blur(4px);
}

.intro-title-stage{
  gap:clamp(20px,3.2vw,54px);
  transition:
    opacity .95s ease,
    transform 1.2s cubic-bezier(.22,1,.36,1);
}
.intro-title-line{
  opacity:.82;
  transition:
    transform 1.95s cubic-bezier(.16,.84,.2,1) .1s,
    opacity 1.15s ease .1s;
}
.intro-title-kicker{
  transition:
    opacity .95s ease .42s,
    transform 1.1s cubic-bezier(.22,1,.36,1) .42s,
    filter .95s ease .42s;
}
.intro-title-core strong{
  transition:
    opacity 1.1s ease .58s,
    transform 1.35s cubic-bezier(.22,1,.36,1) .58s,
    filter 1.1s ease .58s,
    letter-spacing 1.35s cubic-bezier(.22,1,.36,1) .58s;
}
.intro-title-sub{
  transition:
    opacity 1s ease .88s,
    transform 1.2s cubic-bezier(.22,1,.36,1) .88s,
    filter 1s ease .88s;
}

.intro-soft-veil{
  position:absolute;
  inset:0;
  z-index:8;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(120,180,255,.12), rgba(120,180,255,.045) 24%, rgba(3,6,10,0) 48%),
    linear-gradient(180deg, rgba(3,6,10,0), rgba(3,6,10,.15) 40%, rgba(3,6,10,.55) 100%);
  transition:
    opacity .95s ease,
    transform 1.1s cubic-bezier(.22,1,.36,1),
    filter 1s ease;
  transform:scale(.96);
  filter:blur(10px);
}
.site-intro.phase-title .intro-soft-veil{
  opacity:.35;
  transform:scale(1);
  filter:blur(0);
}
.site-intro.phase-exit .intro-soft-veil{
  opacity:1;
  transform:scale(1.08);
  filter:blur(3px);
}

.site-intro.phase-exit .intro-title-stage{
  opacity:0;
  transform:translateY(-5px) scale(.992);
  transition:
    opacity .72s ease,
    transform .9s cubic-bezier(.22,1,.36,1);
}
.site-intro.phase-exit .intro-gif-stage{
  opacity:0;
  transform:scale(1.045);
  filter:blur(8px);
}

.intro-reveal-panel{
  width:54%;
  opacity:0;
  background:
    linear-gradient(180deg, rgba(8,12,18,.98), rgba(3,6,10,1)),
    radial-gradient(circle at center, rgba(90,150,255,.08), transparent 55%);
  box-shadow:0 0 50px rgba(0,0,0,.35);
}
.intro-reveal-panel-left{
  left:-4%;
  clip-path:polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%);
}
.intro-reveal-panel-right{
  right:-4%;
  clip-path:polygon(8% 0, 100% 0, 100% 100%, 8% 100%, 0 50%);
}
.intro-reveal-panel:before{
  content:"";
  position:absolute;
  top:0;bottom:0;width:1px;
  background:linear-gradient(180deg, transparent, rgba(113,173,255,.72), transparent);
  filter:drop-shadow(0 0 10px rgba(47,134,255,.45));
}
.intro-reveal-panel-left:before{right:7.5%}
.intro-reveal-panel-right:before{left:7.5%}

.site-intro.phase-exit .intro-reveal-panel{
  opacity:1;
}
.site-intro.phase-exit .intro-reveal-panel-left{
  animation:introCurtainLeftSoft 1.18s cubic-bezier(.65,0,.2,1) .28s forwards;
}
.site-intro.phase-exit .intro-reveal-panel-right{
  animation:introCurtainRightSoft 1.18s cubic-bezier(.65,0,.2,1) .28s forwards;
}
@keyframes introCurtainLeftSoft{
  0%{transform:translateX(0)}
  60%{transform:translateX(-72%)}
  100%{transform:translateX(-104%)}
}
@keyframes introCurtainRightSoft{
  0%{transform:translateX(0)}
  60%{transform:translateX(72%)}
  100%{transform:translateX(104%)}
}

/* Site reveal arrives a bit more gently after the intro. */
body.intro-active .topbar,
body.intro-active main,
body.intro-active footer{
  opacity:0;
  transform:translateY(16px) scale(.996);
  filter:blur(5px);
}
body.intro-ready .topbar,
body.intro-ready main,
body.intro-ready footer{
  transition:
    opacity 1.2s ease,
    transform 1.32s cubic-bezier(.22,1,.36,1),
    filter 1.12s ease;
}

@media(max-width:720px){
  .intro-reveal-panel{width:58%}
  .intro-reveal-panel-left{left:-8%}
  .intro-reveal-panel-right{right:-8%}
}


/* V7.3 — footer development credit */
.coa-credit{
  color:var(--blue-soft);
  font-weight:600;
  letter-spacing:.16em;
  transition:color .7s ease,text-shadow .7s ease,letter-spacing .7s cubic-bezier(.22,1,.36,1);
}
footer:hover .coa-credit{
  color:#d7e8ff;
  letter-spacing:.19em;
  text-shadow:0 0 18px rgba(61,131,247,.24);
}

.discord-preview-btn{cursor:pointer}


/* =========================================================
   V7.5 — Header logo only + slower post-GIF line/title reveal
   ========================================================= */
.brand-logo-only{
  display:flex;
  align-items:center;
  gap:0;
}
.brand-logo-only .brand-emblem{
  display:block;
  width:clamp(118px, 13vw, 152px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.26));
}
.brand-logo-only .shield,
.brand-logo-only .brand-copy{
  display:none!important;
}
@media(max-width:720px){
  .brand-logo-only .brand-emblem{
    width:clamp(92px, 24vw, 122px);
  }
}

/* After the GIF, blue lines and title now arrive more slowly. */
.intro-title-stage{
  transition:
    opacity 1.26s ease,
    transform 1.6s cubic-bezier(.22,1,.36,1);
}
.intro-title-line{
  opacity:.84;
  transition:
    transform 2.8s cubic-bezier(.16,.84,.2,1) .18s,
    opacity 1.4s ease .18s;
}
.intro-title-kicker{
  transition:
    opacity 1.12s ease .68s,
    transform 1.36s cubic-bezier(.22,1,.36,1) .68s,
    filter 1.05s ease .68s;
}
.intro-title-core strong{
  transition:
    opacity 1.42s ease 1.02s,
    transform 1.72s cubic-bezier(.22,1,.36,1) 1.02s,
    filter 1.18s ease 1.02s,
    letter-spacing 1.72s cubic-bezier(.22,1,.36,1) 1.02s;
}
.intro-title-sub{
  transition:
    opacity 1.22s ease 1.55s,
    transform 1.45s cubic-bezier(.22,1,.36,1) 1.55s,
    filter 1.12s ease 1.55s;
}
.site-intro.phase-title .intro-title-core strong{
  letter-spacing:.1em;
}
.site-intro.phase-exit .intro-title-stage{
  opacity:0;
  transform:translateY(-3px) scale(.994);
  transition:
    opacity .86s ease,
    transform 1.05s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   V7.6 — Smooth post-GIF title choreography
   ========================================================= */

/* Hidden starting state is deliberately soft, not snapped. */
.intro-title-kicker{
  opacity:0;
  transform:translate3d(-12px,10px,0);
  filter:blur(5px);
  letter-spacing:.52em;
}
.intro-title-core strong{
  position:relative;
  display:block;
  overflow:hidden;
  opacity:0;
  transform:translate3d(0,18px,0) scale(.985);
  filter:blur(7px);
  clip-path:inset(0 50% 0 50%);
  letter-spacing:.18em;
}
.intro-title-sub{
  opacity:0;
  transform:translate3d(10px,11px,0);
  filter:blur(5px);
  letter-spacing:.32em;
}
.intro-title-sheen{
  position:absolute;
  left:50%;
  top:50%;
  width:min(64vw,760px);
  height:72px;
  transform:translate(-50%,-50%) translateX(-65%);
  opacity:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(130,188,255,.08) 43%,rgba(235,245,255,.28) 50%,rgba(130,188,255,.08) 57%,transparent 68%);
  filter:blur(5px);
  mix-blend-mode:screen;
}
.intro-title-core{position:relative}

/* Arrivals are staggered and use longer easing so nothing pops in. */
.site-intro.phase-title .intro-title-kicker{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
  letter-spacing:.42em;
  transition:
    opacity 1.15s ease .58s,
    transform 1.55s cubic-bezier(.16,.84,.2,1) .58s,
    filter 1.25s ease .58s,
    letter-spacing 1.7s cubic-bezier(.16,.84,.2,1) .58s;
}
.site-intro.phase-title .intro-title-core strong{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
  clip-path:inset(0 0 0 0);
  letter-spacing:.1em;
  transition:
    opacity 1.35s ease .92s,
    transform 1.8s cubic-bezier(.16,.84,.2,1) .92s,
    filter 1.35s ease .92s,
    clip-path 2.25s cubic-bezier(.16,.84,.2,1) .92s,
    letter-spacing 2s cubic-bezier(.16,.84,.2,1) .92s;
}
.site-intro.phase-title .intro-title-sub{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
  letter-spacing:.26em;
  transition:
    opacity 1.2s ease 1.62s,
    transform 1.55s cubic-bezier(.16,.84,.2,1) 1.62s,
    filter 1.25s ease 1.62s,
    letter-spacing 1.7s cubic-bezier(.16,.84,.2,1) 1.62s;
}
.site-intro.phase-title .intro-title-sheen{
  animation:introTitleSheen 2.5s cubic-bezier(.16,.84,.2,1) 2.0s both;
}
@keyframes introTitleSheen{
  0%{opacity:0;transform:translate(-50%,-50%) translateX(-65%)}
  24%{opacity:.56}
  74%{opacity:.3}
  100%{opacity:0;transform:translate(-50%,-50%) translateX(65%)}
}

/* Side lines still grow slowly; their glow reaches the center later. */
.intro-title-line{
  opacity:.78;
  filter:drop-shadow(0 0 0 rgba(47,134,255,0));
  transition:
    transform 3.05s cubic-bezier(.16,.84,.2,1) .16s,
    opacity 1.55s ease .16s,
    filter 2.2s ease .8s;
}
.site-intro.phase-title .intro-title-line{
  transform:scaleX(1);
  filter:drop-shadow(0 0 8px rgba(47,134,255,.3));
}

/* Separate soft-out phase avoids all text disappearing together. */
.site-intro.phase-title-out .intro-title-sub{
  opacity:0;
  transform:translate3d(8px,-4px,0);
  filter:blur(3px);
  letter-spacing:.29em;
  transition:
    opacity .9s ease,
    transform 1.15s cubic-bezier(.22,1,.36,1),
    filter .9s ease,
    letter-spacing 1.1s ease;
}
.site-intro.phase-title-out .intro-title-kicker{
  opacity:.25;
  transform:translate3d(-7px,-2px,0);
  filter:blur(1.5px);
  transition:
    opacity 1s ease .12s,
    transform 1.25s cubic-bezier(.22,1,.36,1) .12s,
    filter 1s ease .12s;
}
.site-intro.phase-title-out .intro-title-core strong{
  opacity:.18;
  transform:translate3d(0,-3px,0) scale(.995);
  filter:blur(2.5px);
  letter-spacing:.115em;
  clip-path:inset(0 5% 0 5%);
  transition:
    opacity 1.05s ease .18s,
    transform 1.3s cubic-bezier(.22,1,.36,1) .18s,
    filter 1.05s ease .18s,
    letter-spacing 1.2s ease .18s,
    clip-path 1.35s cubic-bezier(.22,1,.36,1) .18s;
}
.site-intro.phase-title-out .intro-title-line-left{
  transform:scaleX(.18);
  opacity:.18;
  filter:drop-shadow(0 0 2px rgba(47,134,255,.12));
  transition:
    transform 1.45s cubic-bezier(.22,1,.36,1) .08s,
    opacity 1.15s ease .08s,
    filter 1.15s ease;
}
.site-intro.phase-title-out .intro-title-line-right{
  transform:scaleX(.18);
  opacity:.18;
  filter:drop-shadow(0 0 2px rgba(47,134,255,.12));
  transition:
    transform 1.45s cubic-bezier(.22,1,.36,1) .18s,
    opacity 1.15s ease .18s,
    filter 1.15s ease;
}

/* Exit no longer yanks the title away — it fades from the already softened state. */
.site-intro.phase-exit .intro-title-stage{
  opacity:0;
  transform:translateY(-2px) scale(.997);
  transition:
    opacity .95s ease,
    transform 1.15s cubic-bezier(.22,1,.36,1);
}
.site-intro.phase-exit .intro-soft-veil{
  opacity:.9;
  transform:scale(1.06);
  filter:blur(2px);
  transition:
    opacity 1.15s ease,
    transform 1.35s cubic-bezier(.22,1,.36,1),
    filter 1.15s ease;
}

/* Header logo: guarantee there is no old 911 text behind it. */
.brand-logo-only{
  position:relative;
  isolation:isolate;
}
.brand-logo-only::before,
.brand-logo-only::after{
  content:none!important;
}
.brand-logo-only .brand-emblem{
  position:relative;
  z-index:2;
}



/* =========================================================
   V7.7 — 60 FPS COMPOSITOR MOTION PASS
   Only transform + opacity are animated in the critical intro path.
   ========================================================= */

/* 60fps intro video */
.intro-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translate3d(0,0,0) scale(1.018);
  backface-visibility:hidden;
  will-change:transform,opacity;
  image-rendering:auto;
}
.intro-gif-fallback{
  display:none;
}
.intro-gif-fallback.is-active{
  display:block;
}
.intro-video.video-failed{
  display:none;
}

/* GPU/compositor hints on every frequently animated site element. */
.site-intro,
.intro-gif-stage,
.intro-title-stage,
.intro-title-line,
.intro-title-kicker,
.intro-title-core strong,
.intro-title-sub,
.intro-title-sheen,
.intro-soft-veil,
.intro-reveal-panel,
.topbar,
.nav-indicator,
.nav-hover-plate,
.mega-menu,
.mega-preview-frame,
.card-rotor,
.motion-card-inner,
.gallery-frame,
.dept-card,
.dept-feature,
.primary-btn,
.ghost-btn,
.header-button{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.intro-gif-stage,
.intro-title-stage,
.intro-title-line,
.intro-title-kicker,
.intro-title-core strong,
.intro-title-sub,
.intro-title-sheen,
.intro-soft-veil,
.intro-reveal-panel,
.nav-indicator,
.nav-hover-plate,
.card-rotor,
.motion-card-inner{
  will-change:transform,opacity;
}

/* Avoid animated blur/filter/clip-path in the critical title sequence.
   These are paint-heavy and were responsible for the low-FPS feel. */
.intro-title-kicker,
.intro-title-core strong,
.intro-title-sub{
  filter:none!important;
  clip-path:none!important;
}

/* GIF/video transition: transform + opacity only. */
.intro-gif-stage{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:none!important;
  transition:
    opacity 1.25s cubic-bezier(.22,.72,.28,1),
    transform 1.55s cubic-bezier(.16,.84,.2,1);
}
.site-intro.phase-title .intro-gif-stage{
  opacity:.19;
  transform:translate3d(0,0,0) scale(1.032);
}
.site-intro.phase-exit .intro-gif-stage{
  opacity:0;
  transform:translate3d(0,-5px,0) scale(1.047);
}

/* Slow lines — smooth scaleX is compositor friendly. */
.intro-title-line{
  transform:translate3d(0,0,0) scaleX(0);
  opacity:0;
  filter:none!important;
  transition:
    transform 2.55s cubic-bezier(.16,.84,.2,1) .16s,
    opacity 1.3s ease .16s;
}
.intro-title-line-left{transform-origin:right center}
.intro-title-line-right{transform-origin:left center}
.site-intro.phase-title .intro-title-line{
  transform:translate3d(0,0,0) scaleX(1);
  opacity:.82;
}

/* Each line of text gets its own long, non-snapping motion. */
.intro-title-kicker{
  opacity:0;
  transform:translate3d(-16px,12px,0);
  letter-spacing:.48em;
  transition:
    opacity 1.15s ease .56s,
    transform 1.5s cubic-bezier(.16,.84,.2,1) .56s,
    letter-spacing 1.55s cubic-bezier(.16,.84,.2,1) .56s;
}
.site-intro.phase-title .intro-title-kicker{
  opacity:1;
  transform:translate3d(0,0,0);
  letter-spacing:.42em;
}

.intro-title-core strong{
  opacity:0;
  transform:translate3d(0,20px,0) scale(.98);
  letter-spacing:.145em;
  transition:
    opacity 1.4s ease .92s,
    transform 1.7s cubic-bezier(.16,.84,.2,1) .92s,
    letter-spacing 1.8s cubic-bezier(.16,.84,.2,1) .92s;
}
.site-intro.phase-title .intro-title-core strong{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  letter-spacing:.1em;
}

.intro-title-sub{
  opacity:0;
  transform:translate3d(14px,11px,0);
  letter-spacing:.30em;
  transition:
    opacity 1.25s ease 1.55s,
    transform 1.55s cubic-bezier(.16,.84,.2,1) 1.55s,
    letter-spacing 1.55s cubic-bezier(.16,.84,.2,1) 1.55s;
}
.site-intro.phase-title .intro-title-sub{
  opacity:1;
  transform:translate3d(0,0,0);
  letter-spacing:.26em;
}

/* Lightweight sheen: transform + opacity only. */
.intro-title-sheen{
  filter:none!important;
  transform:translate3d(-115%,0,0);
  opacity:0;
}
.site-intro.phase-title .intro-title-sheen{
  animation:introSheen60 2.6s cubic-bezier(.16,.84,.2,1) 1.85s both;
}
@keyframes introSheen60{
  0%{opacity:0;transform:translate3d(-115%,0,0)}
  22%{opacity:.34}
  72%{opacity:.22}
  100%{opacity:0;transform:translate3d(115%,0,0)}
}

/* EXIT: four separate states rather than a single "tak" class. */
.site-intro.phase-sub-out .intro-title-sub{
  opacity:0;
  transform:translate3d(12px,-5px,0);
  letter-spacing:.285em;
  transition:
    opacity 1.35s cubic-bezier(.22,.72,.28,1),
    transform 1.45s cubic-bezier(.16,.84,.2,1),
    letter-spacing 1.4s ease;
}

.site-intro.phase-kicker-out .intro-title-kicker{
  opacity:0;
  transform:translate3d(-11px,-4px,0);
  letter-spacing:.455em;
  transition:
    opacity 1.4s cubic-bezier(.22,.72,.28,1),
    transform 1.5s cubic-bezier(.16,.84,.2,1),
    letter-spacing 1.45s ease;
}

.site-intro.phase-main-out .intro-title-core strong{
  opacity:0;
  transform:translate3d(0,-7px,0) scale(.992);
  letter-spacing:.112em;
  transition:
    opacity 1.55s cubic-bezier(.22,.72,.28,1),
    transform 1.65s cubic-bezier(.16,.84,.2,1),
    letter-spacing 1.55s ease;
}

.site-intro.phase-lines-out .intro-title-line{
  opacity:0;
  transform:translate3d(0,0,0) scaleX(.08);
  transition:
    opacity 1.3s ease,
    transform 1.7s cubic-bezier(.22,1,.36,1);
}

/* Don't hide the whole title stage immediately when the curtain begins. */
.site-intro.phase-exit .intro-title-stage{
  opacity:0;
  transform:translate3d(0,-3px,0) scale(.998);
  transition:
    opacity 1.0s ease,
    transform 1.15s cubic-bezier(.22,1,.36,1);
}

/* Eliminate the fully black "dead frame":
   the real site is already composited underneath before curtains open. */
.site-intro{
  background-color:#03060a;
  transition:
    opacity .8s ease,
    visibility .8s ease,
    background-color 1.4s ease;
}
.site-intro.phase-exit{
  background-color:rgba(3,6,10,.10);
}

.intro-soft-veil{
  filter:none!important;
  opacity:0;
  transform:translate3d(0,0,0) scale(.98);
  transition:
    opacity 1.25s ease,
    transform 1.5s cubic-bezier(.16,.84,.2,1);
}
.site-intro.phase-title .intro-soft-veil{
  opacity:.22;
  transform:translate3d(0,0,0) scale(1);
}
.site-intro.phase-exit .intro-soft-veil{
  opacity:0;
  transform:translate3d(0,0,0) scale(1.035);
}

/* Smooth curtains: translate3d only. */
.site-intro.phase-exit .intro-reveal-panel-left{
  animation:introCurtain60Left 1.55s cubic-bezier(.65,0,.2,1) .15s forwards!important;
}
.site-intro.phase-exit .intro-reveal-panel-right{
  animation:introCurtain60Right 1.55s cubic-bezier(.65,0,.2,1) .15s forwards!important;
}
@keyframes introCurtain60Left{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-104%,0,0)}
}
@keyframes introCurtain60Right{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(104%,0,0)}
}

/* Site appears beneath the intro before reveal, so there is no blank flash. */
body.intro-active .topbar,
body.intro-active main,
body.intro-active footer{
  opacity:0;
  transform:translate3d(0,12px,0) scale(.998);
  filter:none!important;
}
body.intro-ready .topbar,
body.intro-ready main,
body.intro-ready footer{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:none!important;
  transition:
    opacity 1.4s cubic-bezier(.22,.72,.28,1),
    transform 1.55s cubic-bezier(.16,.84,.2,1);
}

/* Site-wide compositor optimizations for cards/menu motion. */
.card-rotor,
.motion-card-inner,
.nav-indicator,
.nav-hover-plate,
.mega-preview-frame,
.mega-watermark{
  transform:translateZ(0);
}
.team-card.spinning .card-rotor,
.motion-card.motion-spinning .motion-card-inner{
  filter:none!important;
}
.team-card,
.motion-card,
.dept-card,
.dept-feature,
.gallery-frame{
  contain:paint;
}

/* Keep accessibility preference functional without removing the requested intro. */
@media(prefers-reduced-motion:reduce){
  .intro-title-line,
  .intro-title-kicker,
  .intro-title-core strong,
  .intro-title-sub,
  .intro-reveal-panel,
  .topbar,
  main,
  footer{
    transition-duration:.35s!important;
    animation-duration:.35s!important;
  }
}


/* =========================================================
   V7.8 — Click-to-360 card interaction
   ========================================================= */
.team-card,
.motion-card,
.motion-card-direct{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.team-card:active,
.motion-card:active,
.motion-card-direct:active{
  transform:translateY(1px);
}

/* Keep existing visual hover effects, but 360° is triggered only by click. */
.team-card .spin-hint,
.motion-card-badge{
  pointer-events:none;
}

.discord-link{
  cursor:pointer;
  text-decoration:none;
}


/* =========================================================
   V7.9 — Hover-to-360 fix
   ========================================================= */
.team-card,
.motion-card,
.motion-card-direct{
  cursor:pointer;
  pointer-events:auto;
}

/* Slight visual acknowledgement on hover/focus before the spin begins. */
.team-card:hover .card-photo,
.team-card:focus-within .card-photo,
.motion-card:hover .motion-card-inner::before,
.motion-card:focus-within .motion-card-inner::before,
.motion-card-direct:hover,
.motion-card-direct:focus-within{
  transition-duration:.35s;
}

/* Make sure animation classes are not blocked by lingering transforms. */
.team-card.spinning .card-rotor,
.motion-card.motion-spinning .motion-card-inner,
.motion-card-direct.motion-spinning-direct{
  pointer-events:none;
}


/* =========================================================
   V8.0 — Ekip İlkeleri mavi çizgi animasyonu
   ========================================================= */
.principles-intro{
  align-items:end;
}
.principles-title-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  min-width:0;
}
.principles-blue-line{
  position:relative;
  display:block;
  width:min(360px, 46vw);
  max-width:100%;
  height:2px;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      rgba(61,131,247,0) 0%,
      rgba(61,131,247,.55) 16%,
      rgba(136,183,255,.98) 52%,
      rgba(61,131,247,.4) 84%,
      rgba(61,131,247,0) 100%);
  box-shadow:
    0 0 0 1px rgba(136,183,255,.06),
    0 0 12px rgba(61,131,247,.18),
    0 0 26px rgba(61,131,247,.12);
  opacity:0;
  transform:translate3d(-10px,0,0) scaleX(0);
  transform-origin:left center;
  will-change:transform,opacity;
  transition:
    transform 1.85s cubic-bezier(.16,.84,.2,1) .18s,
    opacity .95s ease .18s;
}
.principles-blue-line::after{
  content:"";
  position:absolute;
  inset:-4px -2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent 0%,rgba(214,235,255,.32) 48%,transparent 100%);
  opacity:0;
  transform:translate3d(-24%,0,0);
}
.principles-intro.visible .principles-blue-line{
  opacity:1;
  transform:translate3d(0,0,0) scaleX(1);
}
.principles-intro.visible .principles-blue-line::after{
  opacity:1;
  animation:principlesLineSweep 1.55s cubic-bezier(.22,1,.36,1) 1.15s 1 both;
}
@keyframes principlesLineSweep{
  0%{opacity:0;transform:translate3d(-34%,0,0)}
  18%{opacity:.55}
  100%{opacity:0;transform:translate3d(138%,0,0)}
}

@media (max-width: 860px){
  .principles-title-stack{
    gap:14px;
  }
  .principles-blue-line{
    width:min(240px, 70vw);
  }
}


/* =========================================================
   V8.1 — Ekip İlkeleri now uses the Başvuru Süreci row animation
   ========================================================= */
.principle-row{
  position:relative;
  overflow:visible;
}
.principle-row:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:1px;
  background:linear-gradient(90deg,var(--blue),transparent 75%);
  transform-origin:left;
  transform:scaleX(0);
  transition:transform 1.5s var(--ease);
}
.principle-row.visible:before{
  transform:scaleX(1);
}

/* Light stagger so the principles section feels like the process flow. */
.principle-row .principle{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .82s ease,
    transform .92s var(--ease),
    flex .45s var(--ease),
    background .35s ease;
}
.principle-row.visible .principle{
  opacity:1;
  transform:translateY(0);
}
.principle-row.visible .principle:nth-child(1){transition-delay:.08s}
.principle-row.visible .principle:nth-child(2){transition-delay:.18s}
.principle-row.visible .principle:nth-child(3){transition-delay:.28s}
.principle-row.visible .principle:nth-child(4){transition-delay:.38s}