:root{
  --navy-950:#04070d;
  --navy-900:#070b14;
  --navy-800:#0c1220;
  --navy-700:#141d30;
  --blue-500:#2f7dff;
  --blue-400:#5aa2ff;
  --blue-300:#8fc0ff;
  --ice:#eef4ff;
  --slate:#8b98ad;
  --slate-dim:#5b6579;
  --line:rgba(140,170,220,0.16);
  --glow:0 0 40px rgba(47,125,255,0.35);
  --ease:cubic-bezier(.16,.84,.32,1);
  --dur-s:.4s;
  --dur-m:.8s;
  --dur-l:1.4s;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
  box-sizing:border-box;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top: env(safe-area-inset-top,0px);}
html,body{height:100%; background:var(--navy-950);}
body{
  margin:0;
  font-family:'Sohne-fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--ice);
  background:var(--navy-950);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@font-face{
  font-family:'Display';
  src:local('Helvetica Neue'),local('Arial');
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--blue-500); color:#fff;}

.dg{font-size:clamp(2.6rem,7vw,7.2rem); font-weight:800; letter-spacing:-0.02em; line-height:0.98; text-transform:uppercase; font-stretch:condensed;}
.eyebrow{font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--blue-300); font-weight:600;}
.meta{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate); font-weight:500;}
.body-txt{font-size:16px; line-height:1.7; color:var(--slate); max-width:520px;}

/* ---------- viewport frame ---------- */
.frame{
  position:fixed; inset:10px; z-index:200; pointer-events:none;
  border:1px solid rgba(120,160,220,0.16);
}
.frame::before,.frame::after,.frame i::before,.frame i::after{content:'';position:absolute;width:14px;height:14px;}
.frame::before{top:-1px;left:-1px;border-top:1px solid var(--blue-400);border-left:1px solid var(--blue-400);}
.frame::after{top:-1px;right:-1px;border-top:1px solid var(--blue-400);border-right:1px solid var(--blue-400);}
.frame i{position:absolute; inset:0;}
.frame i::before{bottom:-1px;left:-1px;border-bottom:1px solid var(--blue-400);border-left:1px solid var(--blue-400);}
.frame i::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--blue-400);border-right:1px solid var(--blue-400);}
@media (max-width:640px){.frame{display:none;}}

/* ---------- custom cursor ---------- */
.cur{position:fixed; top:0; left:0; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--ice); z-index:999; pointer-events:none; transition:transform .15s var(--ease), opacity .2s; mix-blend-mode:difference;}
.cur-ring{position:fixed; top:0; left:0; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; border:1px solid rgba(238,244,255,0.5); z-index:998; pointer-events:none; transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),border-color .25s,background .25s; display:flex; align-items:center; justify-content:center;}
.cur-ring span{font-size:10px; letter-spacing:0.12em; opacity:0; transition:opacity .2s; text-align:center; text-transform:uppercase; font-weight:700;}
.cur-ring.big{width:96px; height:96px; margin:-48px 0 0 -48px; background:rgba(47,125,255,0.14); border-color:var(--blue-400); backdrop-filter:blur(4px);}
.cur-ring.big span{opacity:1;}
@media (hover:none), (pointer:coarse){ .cur,.cur-ring{display:none;} }

/* ---------- particles ---------- */
#particles{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.55;}

/* ---------- loader ---------- */
#loader{position:fixed; inset:0; background:var(--navy-950); z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .8s var(--ease), visibility .8s;}
#loader.hide{opacity:0; visibility:hidden;}
.loader-mark{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--slate); margin-bottom:22px;}
.loader-name{font-size:clamp(1.6rem,5vw,2.6rem); font-weight:800; letter-spacing:-0.01em; text-transform:uppercase; margin-bottom:30px;}
.loader-bar{width:220px; height:1px; background:rgba(255,255,255,0.12); position:relative; overflow:hidden;}
.loader-bar i{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--blue-400); box-shadow:0 0 12px var(--blue-400);}
.loader-pct{margin-top:14px; font-size:11px; letter-spacing:.1em; color:var(--slate);}

/* ---------- top nav ---------- */
.topnav{position:fixed; top:0; left:0; right:0; z-index:150; display:flex; align-items:center; justify-content:space-between; padding:26px 34px; transition:padding .4s var(--ease), background .4s;}
.topnav.scrolled{padding:16px 34px; background:linear-gradient(to bottom, rgba(4,7,13,0.85), transparent);}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(90,162,255,.5));}
.brand-word{font-size:13px; letter-spacing:.16em; font-weight:700; text-transform:uppercase; white-space:nowrap;}
.brand-word small{display:block; font-size:8px; letter-spacing:.14em; color:var(--slate); font-weight:500; margin-top:2px; white-space:nowrap;}
@media (max-width:480px){
  .brand-word small{display:none;}
  .brand-word{font-size:11px;}
  .nbtn{padding:9px 12px; font-size:9.5px;}
  .topnav{padding:18px 16px;}
}
.nav-actions{display:flex; align-items:center; gap:10px;}
.nbtn{border:1px solid var(--line); background:rgba(8,12,22,0.5); backdrop-filter:blur(6px); color:var(--ice); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:11px 18px; display:flex; align-items:center; gap:8px; font-weight:600; transition:border-color .3s,background .3s; clip-path:polygon(0 0,100% 0,100% 70%,94% 100%,0 100%);}
.nbtn:hover{border-color:var(--blue-400); background:rgba(47,125,255,0.12);}
.nbtn.solid{background:var(--ice); color:var(--navy-950); border-color:var(--ice);}
.nbtn.solid:hover{background:var(--blue-300); border-color:var(--blue-300);}

/* ---------- left rail nav ---------- */
.rail{position:fixed; left:34px; bottom:64px; z-index:140; display:flex; flex-direction:column; gap:16px; opacity:0; pointer-events:none; transition:opacity .5s var(--ease);}
.rail.show{opacity:1; pointer-events:auto;}
.rail a{display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-dim); font-weight:600; transition:color .3s;}
.rail a i{width:5px; height:5px; border-radius:50%; background:var(--slate-dim); transition:all .3s; flex:none;}
.rail a span{opacity:0; max-width:0; overflow:hidden; white-space:nowrap; transition:opacity .3s, max-width .3s;}
.rail a:hover span, .rail a.active span{opacity:1; max-width:160px; margin-left:2px;}
.rail a.active{color:var(--ice);}
.rail a.active i{background:var(--blue-400); box-shadow:0 0 8px var(--blue-400); width:7px; height:7px;}
@media (max-width:1100px){.rail{display:none;}}

/* ---------- full menu ---------- */
.menu-overlay{position:fixed; inset:0; background:rgba(4,7,13,0.97); backdrop-filter:blur(10px); z-index:300; display:flex; align-items:flex-start; justify-content:center; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; overflow-y:auto; padding:120px 20px 70px;}
.menu-overlay.open{opacity:1; visibility:visible;}
.menu-close{position:absolute; top:28px; right:34px; border:1px solid var(--line); background:transparent; color:var(--ice); width:44px; height:44px; font-size:16px;}
.menu-list{display:flex; flex-direction:column; gap:0; text-align:center; margin:auto 0;}
.menu-list a{display:flex; align-items:baseline; gap:16px; justify-content:center; font-size:clamp(1.3rem,3.6vw,2.2rem); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; color:var(--slate); padding:9px 14px; opacity:0; transform:translateY(24px); transition:color .3s, transform .5s var(--ease), opacity .5s var(--ease);}
.menu-overlay.open .menu-list a{opacity:1; transform:translateY(0);}
.menu-list a:hover{color:var(--ice);}
.menu-list a.active{color:var(--blue-300);}
.menu-list a.active b{color:var(--ice);}

/* ================= PAGE BANNER (compact hero for inner pages) ================= */
.pagehero{position:relative; min-height:44vh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;}
.pagehero .ph{position:absolute; inset:-6%; background-size:cover; background-position:center 42%; filter:saturate(.55) brightness(.5) contrast(1.1);}
.pagehero .duo{position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,7,13,.45) 0%, rgba(4,7,13,.6) 45%, rgba(4,7,13,.97) 100%);}
.pagehero-inner{position:relative; z-index:1; padding:150px clamp(20px,5vw,56px) 56px; max-width:1500px; margin:0 auto; width:100%;}
.pagehero-inner .eyebrow{margin-bottom:14px; display:flex; align-items:center; gap:10px;}
.pagehero-inner .eyebrow::before{content:'';width:26px;height:1px;background:var(--blue-400);}
.pagehero-h{font-size:clamp(2.4rem,6.6vw,5rem); margin:0; font-weight:800; letter-spacing:-0.02em; text-transform:uppercase; line-height:1;}
.pagehero-sub{margin:18px 0 0; max-width:540px;}

/* ================= HOME PAGE TEASERS ================= */
.home-section{padding:clamp(70px,10vw,130px) 0;}
.teaser-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,50px);}
.teaser-card{display:block; text-decoration:none; color:inherit;}
.teaser-card .tc-media{overflow:hidden;}
.teaser-card img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .9s var(--ease);}
.teaser-card:hover img{transform:scale(1.045);}
.teaser-card .proj-num{margin-top:20px;}
.teaser-card h3{margin:6px 0 0; font-size:clamp(1.3rem,2.6vw,1.8rem); font-weight:800; text-transform:uppercase; color:var(--ice); letter-spacing:-.01em;}
.teaser-more{margin-top:48px; text-align:center;}
.svc-teaser-grid{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-left:none;}
.svc-teaser-item{background:var(--navy-900); padding:32px 22px; display:block; text-decoration:none; color:inherit; border-left:1px solid var(--line); transition:background .3s;}
.svc-teaser-item:hover{background:var(--navy-800);}
.svc-teaser-item .n{font-size:11px; color:var(--blue-400); font-weight:700; letter-spacing:.1em;}
.svc-teaser-item h4{margin:12px 0 0; font-size:clamp(0.95rem,1.6vw,1.15rem); text-transform:uppercase; font-weight:800; color:var(--ice); letter-spacing:-0.01em;}
.svc-teaser-item .arr{display:block; margin-top:14px; color:var(--slate-dim); transition:transform .3s,color .3s;}
.svc-teaser-item:hover .arr{transform:translateX(6px); color:var(--blue-400);}
@media (max-width:820px){.svc-teaser-grid{grid-template-columns:1fr 1fr;} .teaser-grid{grid-template-columns:1fr;}}
@media (max-width:480px){.svc-teaser-grid{grid-template-columns:1fr;}}
.cta-banner{padding:clamp(80px,13vw,160px) 0; text-align:center; position:relative; background:var(--navy-900); overflow:hidden;}
.cta-banner::before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(47,125,255,0.16), transparent 60%); pointer-events:none;}
.cta-banner-inner{position:relative; z-index:1;}
.cta-banner h2{font-size:clamp(2.2rem,6.4vw,4.6rem); margin:0 0 30px; font-weight:800; text-transform:uppercase; letter-spacing:-0.02em; line-height:1.02;}
.cta-banner .cta{display:inline-flex;}
.menu-list a b{font-size:12px; color:var(--blue-400); font-weight:700;}
.menu-list a:nth-child(1){transition-delay:.05s;}
.menu-list a:nth-child(2){transition-delay:.1s;}
.menu-list a:nth-child(3){transition-delay:.15s;}
.menu-list a:nth-child(4){transition-delay:.2s;}
.menu-list a:nth-child(5){transition-delay:.25s;}
.menu-list a:nth-child(6){transition-delay:.3s;}
.menu-list a:nth-child(7){transition-delay:.35s;}
.menu-list a:nth-child(8){transition-delay:.4s;}
.menu-foot{position:absolute; bottom:30px; left:0; right:0; display:flex; justify-content:center; gap:26px;}
.menu-foot a{font-size:11px; letter-spacing:.12em; color:var(--slate); text-transform:uppercase;}

/* ================= HERO ================= */
.hero{position:relative; height:100svh; min-height:600px; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;}
.hero-media{position:absolute; inset:0; z-index:-3;}
.hero-media .ph{position:absolute; inset:-6% ; background-size:cover; background-position:center 40%; filter:saturate(0.55) brightness(0.55) contrast(1.1);}
.hero-media .duo{position:absolute; inset:0; background:
   radial-gradient(ellipse at 30% 20%, rgba(47,125,255,0.28), transparent 55%),
   linear-gradient(180deg, rgba(4,7,13,0.35) 0%, rgba(4,7,13,0.55) 45%, rgba(4,7,13,0.97) 100%);
   mix-blend-mode:normal;}
.hero-media .grid{position:absolute; inset:0; background-image:linear-gradient(rgba(120,160,220,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,220,.05) 1px,transparent 1px); background-size:64px 64px; opacity:.5;}
.glow-orb{position:absolute; border-radius:50%; filter:blur(80px); z-index:-2; pointer-events:none;}
.glow-orb.a{width:520px; height:520px; background:rgba(47,125,255,0.35); top:6%; left:8%; animation:pulse 9s ease-in-out infinite;}
.glow-orb.b{width:380px; height:380px; background:rgba(90,162,255,0.22); bottom:-8%; right:6%; animation:pulse 11s ease-in-out infinite 2s;}
@keyframes pulse{0%,100%{opacity:.55; transform:scale(1);}50%{opacity:.95; transform:scale(1.12);}}

.reflection{position:absolute; left:0; right:0; bottom:-46%; height:46%; z-index:-3; transform:scaleY(-1); opacity:.28; filter:blur(3px) saturate(.4) brightness(.6); -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.55), transparent 85%); mask-image:linear-gradient(to top, rgba(0,0,0,.55), transparent 85%); animation:ripple 7s ease-in-out infinite;}
.reflection .ph{position:absolute; inset:0; background-size:cover; background-position:center 40%;}
@keyframes ripple{0%,100%{transform:scaleY(-1) skewX(0deg);}50%{transform:scaleY(-1) skewX(.4deg);}}

.hero-inner{position:relative; z-index:2; width:100%; padding:0 clamp(20px,5vw,64px) clamp(60px,9vh,110px); display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px;}
.hero-copy .eyebrow{margin-bottom:18px; display:flex; align-items:center; gap:10px;}
.hero-copy .eyebrow::before{content:'';width:26px;height:1px;background:var(--blue-400);}
.hero-h{margin:0;}
.hero-h .ln{display:block; overflow:hidden;}
.hero-h .ln span{display:block; transform:translateY(110%); filter:blur(10px); opacity:0; transition:transform 1s var(--ease), filter 1s var(--ease), opacity 1s var(--ease);}
.hero-h .ln:nth-child(1) span{transition-delay:.15s;}
.hero-h .ln:nth-child(2) span{transition-delay:.32s;}
.hero-h .ln:nth-child(3) span{transition-delay:.5s; color:var(--blue-400);}
.loaded .hero-h .ln span{transform:translateY(0); filter:blur(0); opacity:1;}
.hero-tagline{margin:14px 0 0; font-size:clamp(1.1rem,2.4vw,1.6rem); font-weight:700; color:var(--blue-400); letter-spacing:-0.01em; opacity:0; transform:translateY(14px); transition:all 1s var(--ease) .62s;}
.loaded .hero-tagline{opacity:1; transform:translateY(0);}
.hero-desc{margin:22px 0 34px; opacity:0; transform:translateY(16px); transition:all 1s var(--ease) .75s;}
.loaded .hero-desc{opacity:1; transform:translateY(0);}
.hero-cta-row{display:flex; align-items:center; gap:26px; opacity:0; transform:translateY(16px); transition:all 1s var(--ease) .9s;}
.loaded .hero-cta-row{opacity:1; transform:translateY(0);}
.cta{position:relative; display:inline-flex; align-items:center; gap:12px; padding:17px 28px; background:rgba(10,15,26,0.55); border:1px solid rgba(120,160,220,0.35); backdrop-filter:blur(8px); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); transition:border-color .35s, background .6s, box-shadow .35s; clip-path:polygon(0 0,100% 0,100% 78%,92% 100%,0 100%);}
.cta i{width:7px; height:7px; border:1px solid var(--blue-400); transform:rotate(45deg); transition:transform .4s;}
.cta:hover{border-color:var(--blue-400); background:linear-gradient(120deg, rgba(47,125,255,0.28), rgba(10,15,26,0.6)); box-shadow:var(--glow);}
.cta:hover i{transform:rotate(225deg);}
.link-quiet{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); border-bottom:1px solid transparent; padding-bottom:2px; transition:color .3s,border-color .3s;}
.link-quiet:hover{color:var(--ice); border-color:var(--blue-400);}

.hero-meta{text-align:right; opacity:0; transform:translateY(16px); transition:all 1s var(--ease) 1.05s;}
.loaded .hero-meta{opacity:1; transform:translateY(0);}
.hero-meta .meta{margin-bottom:6px;}
@media (max-width:860px){ .hero-inner{grid-template-columns:1fr;} .hero-meta{text-align:left; margin-top:20px;} }

.scroll-ind{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:9.5px; letter-spacing:.2em; color:var(--slate); text-transform:uppercase; transition:opacity .5s;}
.scroll-ind .stem{width:1px; height:30px; background:linear-gradient(to bottom, transparent, var(--blue-400)); position:relative; overflow:hidden;}
.scroll-ind .stem i{position:absolute; left:0; top:-30px; width:100%; height:100%; background:linear-gradient(to bottom, var(--ice), transparent); animation:dropline 2.2s ease-in-out infinite;}
@keyframes dropline{0%{top:-30px;}100%{top:30px;}}

.hero-bottom-controls{position:absolute; bottom:26px; left:0; right:0; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:0 clamp(20px,5vw,40px); pointer-events:none;}
.hero-bottom-controls > *{pointer-events:auto;}
.ambient-toggle{display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.14em; color:var(--slate); text-transform:uppercase; background:transparent; border:none;}
.ambient-toggle .dot{width:16px; height:16px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.ambient-toggle .dot::after{content:''; width:6px; height:6px; border-radius:50%; background:var(--slate-dim); transition:all .3s;}
.ambient-toggle.on .dot::after{background:var(--blue-400); box-shadow:0 0 6px var(--blue-400);}
@media (max-width:640px){.hero-bottom-controls{display:none;}}

/* ================= SECTIONS SHARED ================= */
section{position:relative;}
.wrap{max-width:1500px; margin:0 auto; padding:0 clamp(20px,5vw,56px);}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(40px,7vw,84px); flex-wrap:wrap;}
.sec-head h2{margin:10px 0 0; font-size:clamp(2.2rem,6vw,4.6rem); font-weight:800; letter-spacing:-0.02em; text-transform:uppercase; line-height:1;}
.sec-num{font-size:11px; color:var(--slate-dim); letter-spacing:.14em;}
.reveal{opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ================= PROJECTS ================= */
#projects{background:var(--navy-950); padding:clamp(80px,12vw,160px) 0 40px;}
.proj-row{display:grid; grid-template-columns:7fr 5fr; gap:clamp(24px,4vw,60px); align-items:center; padding:clamp(40px,7vw,90px) 0; border-bottom:1px solid var(--line);}
.proj-row:last-of-type{border-bottom:none;}
.proj-row.r2{grid-template-columns:5fr 7fr;}
.proj-row.r2 .proj-media{order:2;}
.proj-row.r2 .proj-text{order:1;}
.proj-media{position:relative; overflow:hidden; cursor:pointer;}
.proj-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform 1.1s var(--ease), filter .6s;}
.proj-row.wide .proj-media img{aspect-ratio:16/9;}
.proj-media:hover img{transform:scale(1.045);}
.proj-media::after{content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(140,170,220,0.18); pointer-events:none;}
.proj-num{font-size:12px; color:var(--blue-400); letter-spacing:.14em; margin-bottom:16px; font-weight:700;}
.proj-text h3{font-size:clamp(1.6rem,3.4vw,2.6rem); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 14px;}
.proj-meta-row{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:18px;}
.proj-meta-row .meta b{color:var(--slate);}
.proj-view{display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice); border-bottom:1px solid var(--blue-400); padding-bottom:3px;}
@media (max-width:800px){ .proj-row, .proj-row.r2{grid-template-columns:1fr;} .proj-row.r2 .proj-media, .proj-row.r2 .proj-text{order:0;} }

/* before/after */
.ba-wrap{margin-top:clamp(60px,8vw,120px);}
.ba{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; user-select:none; touch-action:pan-y;}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none;}
.ba .before-wrap{position:absolute; inset:0; width:56%; overflow:hidden;}
.ba .before-wrap img{width:calc(100vw); max-width:1500px; max-height:100%; object-fit:cover;}
.ba-tag{position:absolute; top:16px; font-size:10px; letter-spacing:.16em; padding:6px 12px; background:rgba(4,7,13,0.6); border:1px solid var(--line); text-transform:uppercase;}
.ba-tag.before{left:16px;}
.ba-tag.after{right:16px;}
.ba-handle{position:absolute; top:0; bottom:0; left:56%; width:2px; background:var(--blue-400); box-shadow:0 0 16px var(--blue-400); cursor:ew-resize;}
.ba-handle .knob{position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); border-radius:50%; background:var(--navy-900); border:1px solid var(--blue-400); display:flex; align-items:center; justify-content:center; box-shadow:0 0 18px rgba(47,125,255,.6);}
.ba-cap{margin-top:16px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ================= SERVICES ================= */
#services{background:var(--navy-900); padding:clamp(80px,12vw,160px) 0;}
.svc-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:start;}
.svc-row{display:flex; align-items:baseline; gap:22px; padding:26px 4px; border-top:1px solid var(--line); cursor:pointer; transition:padding .35s;}
.svc-list .svc-row:last-child{border-bottom:1px solid var(--line);}
.svc-row .n{font-size:13px; color:var(--slate-dim); font-weight:700; width:26px; flex:none; transition:color .35s;}
.svc-row .t{flex:1;}
.svc-row .t h3{margin:0; font-size:clamp(1.4rem,3vw,2.1rem); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; transition:color .35s, transform .35s;}
.svc-row .t p{margin:8px 0 0; font-size:13.5px; color:var(--slate); max-width:400px; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s var(--ease), opacity .4s, margin .4s;}
.svc-row .arr{font-size:20px; color:var(--slate-dim); transition:transform .35s, color .35s;}
.svc-row:hover{padding-left:12px;}
.svc-row:hover .n, .svc-row.active .n{color:var(--blue-400);}
.svc-row:hover .t h3, .svc-row.active .t h3{color:var(--blue-300);}
.svc-row:hover .t h3{transform:translateX(4px);}
.svc-row:hover .t p, .svc-row.active .t p{max-height:80px; opacity:1; margin-top:8px;}
.svc-row:hover .arr, .svc-row.active .arr{transform:translateX(6px); color:var(--blue-400);}
.svc-preview{position:sticky; top:110px; aspect-ratio:4/5; overflow:hidden; background:var(--navy-800);}
.svc-preview img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--ease), transform 8s linear;}
.svc-preview img.show{opacity:1; transform:scale(1.06);}
.svc-preview::after{content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line); pointer-events:none; background:linear-gradient(180deg, transparent 60%, rgba(4,7,13,.7));}
@media (max-width:900px){ .svc-grid{grid-template-columns:1fr;} .svc-preview{position:relative; top:auto; order:-1; aspect-ratio:16/9;} }

/* ================= ABOUT ================= */
#about{background:var(--navy-950); padding:clamp(80px,12vw,160px) 0;}
.about-wrap{position:relative; min-height:520px; display:flex; align-items:center;}
.about-img{position:absolute; inset:0; overflow:hidden;}
.about-img img{width:100%; height:100%; object-fit:cover; filter:saturate(.6) brightness(.5);}
.about-img::after{content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(4,7,13,0.94) 30%, rgba(4,7,13,0.55) 75%);}
.about-content{position:relative; z-index:2; padding:60px clamp(20px,5vw,64px); max-width:720px;}
.about-content .dg{font-size:clamp(2.4rem,6.4vw,5.2rem); margin:14px 0 24px;}
.about-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px;}
.tag{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line); padding:9px 14px; color:var(--slate); background:rgba(8,12,22,0.4);}

/* ================= PROCESS ================= */
#process{background:var(--navy-900); padding:clamp(80px,12vw,160px) 0;}
.proc-list{position:relative; max-width:760px;}
.proc-line{position:absolute; left:23px; top:10px; bottom:10px; width:1px; background:var(--line);}
.proc-line i{position:absolute; left:0; top:0; width:100%; height:0%; background:linear-gradient(var(--blue-400), var(--blue-500)); box-shadow:0 0 10px var(--blue-400); transition:height .5s var(--ease);}
.proc-step{position:relative; padding:26px 0 26px 66px; display:flex; align-items:baseline; gap:18px;}
.proc-step .pn{position:absolute; left:0; top:22px; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--slate-dim); background:var(--navy-900); transition:all .5s var(--ease); z-index:1;}
.proc-step.active .pn{border-color:var(--blue-400); color:var(--ice); box-shadow:0 0 16px rgba(47,125,255,.5); transform:scale(1.08);}
.proc-step h4{margin:0 0 6px; font-size:clamp(1.2rem,2.6vw,1.6rem); text-transform:uppercase; font-weight:800; letter-spacing:-0.01em; color:var(--slate-dim); transition:color .5s;}
.proc-step.active h4{color:var(--ice);}
.proc-step p{margin:0; font-size:13.5px; color:var(--slate); max-width:440px;}

/* ================= GALLERY ================= */
#gallery{background:var(--navy-950); padding:clamp(80px,12vw,160px) 0;}
.gal-grid{columns:4 220px; column-gap:14px;}
.gal-grid figure{margin:0 0 14px; break-inside:avoid; position:relative; overflow:hidden; cursor:pointer; background:var(--navy-800); min-height:140px;}
.gal-grid img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease), filter .4s;}
.gal-grid figure:hover img{transform:scale(1.05);}
.gal-grid figure::after{content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line);}
@media (max-width:640px){.gal-grid{columns:2 150px;}}

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(4,7,13,.96); backdrop-filter:blur(6px); z-index:400; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; padding:40px;}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox img{max-width:min(1100px,92vw); max-height:82vh; object-fit:contain; box-shadow:0 0 60px rgba(0,0,0,.6);}
.lightbox-close{position:absolute; top:26px; right:32px; width:42px; height:42px; border:1px solid var(--line); background:transparent; color:var(--ice); font-size:16px;}

/* ================= ACCOUNT ================= */
#account{background:var(--navy-900); padding:clamp(80px,12vw,160px) 0;}
.acc-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.acc-panel{background:rgba(10,15,26,0.6); border:1px solid var(--line); padding:clamp(28px,4vw,48px); backdrop-filter:blur(6px); position:relative;}
.acc-tabs{display:flex; gap:0; margin-bottom:30px; border-bottom:1px solid var(--line);}
.acc-tabs button{flex:1; background:none; border:none; color:var(--slate); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:14px 0; border-bottom:2px solid transparent; transition:all .3s;}
.acc-tabs button.active{color:var(--ice); border-color:var(--blue-400);}
.f-row{margin-bottom:18px;}
.f-row label{display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-bottom:8px;}
.f-row input{width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--ice); font-size:14px; padding:10px 2px; font-family:inherit; transition:border-color .3s;}
.f-row input:focus{outline:none; border-color:var(--blue-400);}
.acc-submit{margin-top:10px; width:100%; padding:15px; background:var(--ice); color:var(--navy-950); border:none; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; transition:background .3s;}
.acc-submit:hover{background:var(--blue-300);}
.acc-note{font-size:11.5px; color:var(--slate-dim); margin-top:16px; line-height:1.6;}
.acc-dash{display:none;}
.acc-dash.show{display:block;}
.acc-dash .who{display:flex; align-items:center; gap:14px; margin-bottom:26px;}
.acc-dash .avatar{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--blue-500),var(--navy-800)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;}
.proj-status{border:1px solid var(--line); padding:20px;}
.proj-status .meta{margin-bottom:14px;}
.status-line{position:relative; height:2px; background:var(--line); margin:22px 0 10px;}
.status-line i{position:absolute; left:0; top:0; height:100%; width:60%; background:var(--blue-400); box-shadow:0 0 8px var(--blue-400);}
.status-labels{display:flex; justify-content:space-between; font-size:9.5px; letter-spacing:.08em; color:var(--slate-dim); text-transform:uppercase;}
.status-labels .on{color:var(--blue-300);}
.acc-side h3{font-size:clamp(1.8rem,4vw,3rem); text-transform:uppercase; font-weight:800; letter-spacing:-.01em; margin:14px 0 20px;}
@media (max-width:860px){.acc-grid{grid-template-columns:1fr;}}

/* ================= CONTACT ================= */
#contact{background:var(--navy-950); padding:clamp(80px,12vw,160px) 0 100px; position:relative; overflow:hidden;}
#contact::before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 80% 20%, rgba(47,125,255,0.14), transparent 60%); pointer-events:none;}
.contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:60px; position:relative; z-index:1;}
.contact-info a{display:flex; align-items:center; gap:12px; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:700; margin-bottom:16px; transition:color .3s;}
.contact-info a:hover{color:var(--blue-300);}
.contact-info .meta{margin:30px 0 10px;}
.cform .f-row{margin-bottom:22px;}
.cform select{width:100%; background:var(--navy-950); border:none; border-bottom:1px solid var(--line); color:var(--ice); font-size:14px; padding:10px 2px; font-family:inherit;}
.cform textarea{width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--ice); font-size:14px; padding:10px 2px; font-family:inherit; resize:vertical; min-height:70px;}
.cform textarea:focus, .cform select:focus{outline:none; border-color:var(--blue-400);}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-success{display:none; align-items:center; gap:10px; margin-top:16px; font-size:12.5px; color:var(--blue-300);}
.form-success.show{display:flex;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}

/* ================= FOOTER ================= */
footer{background:var(--navy-950); border-top:1px solid var(--line); padding:70px 0 34px;}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; margin-bottom:60px;}
.foot-brand{display:flex; align-items:center; gap:14px;}
.foot-brand img{width:46px;}
.foot-cta{font-size:clamp(1.6rem,4vw,2.8rem); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; max-width:600px;}
.foot-nav{display:flex; gap:28px; flex-wrap:wrap;}
.foot-nav a{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); transition:color .3s;}
.foot-nav a:hover{color:var(--ice);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line);}
.social{display:flex; gap:12px;}
.social a{width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .3s, background .3s;}
.social a:hover{border-color:var(--blue-400); background:rgba(47,125,255,0.12);}
.social svg{width:16px; height:16px; fill:var(--ice);}
.copy{font-size:10.5px; color:var(--slate-dim); letter-spacing:.05em;}

/* ---------- whatsapp fixed ---------- */
.wa-fixed{position:fixed; right:26px; bottom:26px; z-index:150; display:flex; align-items:center; gap:10px;}
.wa-tip{font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--navy-900); border:1px solid var(--line); padding:8px 12px; opacity:0; transform:translateX(8px); transition:all .3s; white-space:nowrap;}
.wa-fixed:hover .wa-tip{opacity:1; transform:translateX(0);}
.wa-btn{width:52px; height:52px; border-radius:50%; background:var(--ice); display:flex; align-items:center; justify-content:center; box-shadow:0 0 24px rgba(47,125,255,.35); transition:transform .3s;}
.wa-fixed:hover .wa-btn{transform:scale(1.06);}
.wa-btn svg{width:24px; height:24px; fill:var(--navy-950);}
@media (max-width:640px){.wa-tip{display:none;}}

/* utility */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}