:root {
  --black:#060608; --dark1:#0c0c10; --dark2:#111116; --dark3:#1a1a22;
  --glass:rgba(255,255,255,0.04); --glass2:rgba(255,255,255,0.08);
  --glass-border:rgba(255,255,255,0.09); --glass-b2:rgba(255,255,255,0.16);
  --tx1:#ffffff; --tx2:rgba(240,238,238,0.7); --tx3:rgba(200,196,204,0.5); --tx4:rgba(200,196,204,0.28);
  --r:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;
  --font-head:'Cabinet Grotesk',sans-serif;
  --font-body:'Noto Sans JP',sans-serif;
  --font-mono:'Space Mono',monospace;
  --max:1240px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:#000;color:var(--tx1);font-family:var(--font-body);overflow-x:hidden;cursor:none;}

/* ── CANVAS ── */
#bgc{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;}

/* ── MESH BG ── */
.mesh-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#000;}

/* ── CURSOR ── */
#cd{width:8px;height:8px;background:#fff;border-radius:50%;position:fixed;z-index:9999;pointer-events:none;top:0;left:0;mix-blend-mode:difference;}
#cr{width:34px;height:34px;border:1px solid rgba(255,255,255,0.3);border-radius:50%;position:fixed;z-index:9998;pointer-events:none;top:0;left:0;transition:width .3s,height .3s,border-color .3s;}
body:has(a:hover) #cr,body:has(button:hover) #cr{width:52px;height:52px;border-color:rgba(255,255,255,0.6);}

/* ── BRICK LOADER ── */
#bk-loader{position:fixed;inset:0;z-index:10000;overflow:hidden;pointer-events:all;}
#bk-grid{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(5,1fr);width:100%;height:100%;}
@media(max-width:768px){#bk-grid{grid-template-columns:repeat(5,1fr);}}
body:has(#bk-loader:not(.done)){overflow:hidden;}
.bk{
  background:linear-gradient(145deg,#1c1c25 0%,#0e0e14 60%,#09090d 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,0.13),inset 3px 0 0 rgba(255,255,255,0.06),
             inset -2px 0 0 rgba(0,0,0,0.55),inset 0 -2px 0 rgba(0,0,0,0.65);
  outline:1px solid rgba(255,255,255,0.055);
  transition:transform .5s cubic-bezier(.6,0,1,.65),opacity .45s ease;
  transition-delay:var(--d,0ms);
  will-change:transform,opacity;
}
.bk:nth-child(odd){background:linear-gradient(145deg,#181820 0%,#0c0c12 60%,#080810 100%);}
#bk-loader.fall .bk{transform:translateY(110vh) rotate(var(--r,0deg));opacity:0;}
#bk-loader.done{display:none;}

/* Loader brand */
#bk-brand{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;pointer-events:none;}
.bk-logo{font-family:var(--font-head);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:800;color:rgba(255,255,255,.92);letter-spacing:-0.04em;animation:bk-bi .65s ease .2s both;}
.bk-sub{font-family:var(--font-mono);font-size:clamp(.6rem,1.1vw,.82rem);color:rgba(255,255,255,.32);letter-spacing:.14em;text-transform:uppercase;margin-top:12px;animation:bk-bi .65s ease .42s both;}
.bk-dot{width:5px;height:5px;background:rgba(255,255,255,.6);border-radius:50%;margin-top:26px;animation:bk-pulse 1.8s ease-in-out .7s infinite;}
#bk-loader.fall #bk-brand{opacity:0;transition:opacity .2s ease 0ms;}
@keyframes bk-bi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes bk-pulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.7)}}

/* ── NAV TRANSITION OVERLAY ── */
#bk-nav-ov{position:fixed;inset:0;z-index:10001;overflow:hidden;pointer-events:all;
  display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(5,1fr);}
.bk-n{
  opacity:0;
  background:rgba(6,6,8,0.8);
  backdrop-filter:blur(14px) saturate(.6);
  -webkit-backdrop-filter:blur(14px) saturate(.6);
  outline:1px solid rgba(255,255,255,0.045);
  animation:bk-n-in .4s cubic-bezier(.18,0,.42,1) forwards;
  animation-delay:var(--di,0ms);
}
@keyframes bk-n-in{from{transform:translateY(-110vh);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── MAX WIDTH WRAPPER ── */
.mw{max-width:var(--max);margin:0 auto;padding:0 48px;}
.mw-full{max-width:var(--max);margin:0 auto;}

/* ══════════════════════════════════════════
   OVERLAY NAV — EDITORIAL SPLIT PANEL
══════════════════════════════════════════ */
.nav-overlay{
  position:fixed;inset:0;z-index:950;overflow:hidden;
  background:#060608;
  transform:translateX(100%);
  transition:transform .75s cubic-bezier(.77,0,.175,1);
  display:flex;flex-direction:column;
}
.nav-overlay::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 65% 55% at 72% 22%,rgba(255,255,255,.018) 0%,transparent 60%);
}
.nav-overlay.open{transform:translateX(0);}

/* Top bar */
.ov-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(22px,3.5vh,38px) clamp(28px,5vw,60px);
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;position:relative;z-index:2;
}
.ov-nav-logo{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(.82rem,1.2vw,.98rem);letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.38);text-decoration:none;cursor:none;
  transition:color .3s;
}
.ov-nav-logo:hover{color:rgba(255,255,255,.7);}

/* ✕ Close button */
.ov-close{
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
  cursor:none;position:relative;padding:0;
  transition:background .3s,border-color .3s,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.ov-close:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);transform:rotate(90deg);}
.ov-close span{
  position:absolute;width:16px;height:1.5px;
  background:rgba(255,255,255,.65);border-radius:2px;
}
.ov-close span:first-child{transform:rotate(45deg);}
.ov-close span:last-child{transform:rotate(-45deg);}

/* Body: two-column */
.ov-body{display:flex;flex:1;overflow:hidden;position:relative;z-index:1;}

/* Left column */
.ov-links-col{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(18px,3.5vh,48px) clamp(28px,5vw,60px) clamp(18px,3vh,36px);
}

/* Nav items */
.ov-item{
  display:flex;align-items:center;gap:clamp(12px,1.8vw,22px);
  padding:clamp(11px,2vh,20px) 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  text-decoration:none;cursor:none;
  opacity:0;transform:translateY(30px);
  position:relative;
}
.ov-item::after{
  content:'';position:absolute;bottom:-1px;left:0;
  width:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.05));
  transition:width .5s cubic-bezier(.16,1,.3,1);
}
.ov-item:hover::after,.ov-item.ov-active::after{width:100%;}

.ov-num{
  font-family:var(--font-mono);font-size:clamp(.58rem,.85vw,.7rem);
  color:rgba(255,255,255,.16);letter-spacing:.1em;
  min-width:2em;flex-shrink:0;transition:color .3s;
}
.ov-name{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(2rem,5.5vw,5.5rem);letter-spacing:-.04em;line-height:1;
  color:rgba(255,255,255,.07);
  transition:color .35s,text-shadow .35s;
}
.ov-arr{
  margin-left:auto;font-size:clamp(.9rem,1.8vw,1.5rem);flex-shrink:0;
  color:rgba(255,255,255,.07);
  transition:color .35s,transform .4s cubic-bezier(.16,1,.3,1);
}
.ov-item:hover .ov-num{color:rgba(255,255,255,.5);}
.ov-item:hover .ov-name{color:#fff;text-shadow:0 0 80px rgba(255,255,255,.12);}
.ov-item:hover .ov-arr{color:rgba(255,255,255,.65);transform:translate(5px,-5px);}
.ov-item.ov-active .ov-num{color:rgba(255,255,255,.32);}
.ov-item.ov-active .ov-name{color:rgba(255,255,255,.32);}
.ov-item.ov-active .ov-arr{color:rgba(255,255,255,.2);}

/* Stagger in */
.nav-overlay.open .ov-item{animation:ovIn .65s cubic-bezier(.16,1,.3,1) both;}
.nav-overlay.open .ov-item:nth-child(1){animation-delay:.08s;}
.nav-overlay.open .ov-item:nth-child(2){animation-delay:.15s;}
.nav-overlay.open .ov-item:nth-child(3){animation-delay:.22s;}
.nav-overlay.open .ov-item:nth-child(4){animation-delay:.29s;}
.nav-overlay.open .ov-item:nth-child(5){animation-delay:.36s;}
@keyframes ovIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}

/* Footer row */
.ov-foot{
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;
}
.nav-overlay.open .ov-foot{animation:ovIn .5s .46s cubic-bezier(.16,1,.3,1) both;}
.ov-avail{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.26);}
.ov-soc{display:flex;gap:18px;}
.ov-soc a{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.18);text-decoration:none;cursor:none;transition:color .3s;}
.ov-soc a:hover{color:rgba(255,255,255,.6);}

/* Right decorative panel */
.ov-deco{
  width:clamp(140px,25vw,320px);flex-shrink:0;
  position:relative;overflow:hidden;
  border-left:1px solid rgba(255,255,255,.05);
}

/* Ghost monogram */
.ov-ghost-mono{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-54%);
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(96px,17vw,210px);letter-spacing:-.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.042);
  user-select:none;pointer-events:none;opacity:0;
}
.nav-overlay.open .ov-ghost-mono{animation:ovIn .9s .05s cubic-bezier(.16,1,.3,1) both;}

/* Vertical label */
.ov-vtxt{
  position:absolute;bottom:clamp(16px,4vh,48px);left:50%;
  white-space:nowrap;opacity:0;
  font-family:var(--font-mono);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.1);
  transform:translateX(-50%) rotate(90deg);transform-origin:center center;
}
.nav-overlay.open .ov-vtxt{animation:ovIn .6s .52s cubic-bezier(.16,1,.3,1) both;}

/* Floating geo shapes in deco panel */
.ov-dg{position:absolute;opacity:0;border:1px solid rgba(255,255,255,.065);}
.ov-dg-1{width:68px;height:68px;border-radius:14px;top:13%;right:22%;transform:rotate(14deg);}
.ov-dg-2{width:26px;height:26px;border-radius:50%;bottom:22%;left:18%;}
.ov-dg-3{width:88px;height:0;top:57%;left:10%;border:none;border-top:1px solid rgba(255,255,255,.055);}
.nav-overlay.open .ov-dg-1{animation:ovIn .7s .18s cubic-bezier(.16,1,.3,1) both;}
.nav-overlay.open .ov-dg-2{animation:ovIn .7s .3s cubic-bezier(.16,1,.3,1) both;}
.nav-overlay.open .ov-dg-3{animation:ovIn .6s .4s cubic-bezier(.16,1,.3,1) both;}

/* ── SMOKE (homepage only) ── */
.smoke-wrap{
  position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;
}
.sp{
  position:absolute;bottom:-14%;
  border-radius:42% 58% 66% 34% / 50% 46% 54% 50%;
  background:radial-gradient(ellipse 58% 78% at 50% 72%,
    rgba(218,205,190,.22) 0%,
    rgba(190,183,176,.10) 36%,
    rgba(162,157,153,.04) 58%,
    transparent 72%
  );
  filter:blur(var(--b,55px));
  will-change:transform,opacity;
  animation:sp-smoke var(--du,13s) var(--d,0s) ease-in-out infinite;
}
/* Organic shape variation per particle */
.sp:nth-child(2n)  {border-radius:58% 42% 36% 64% / 46% 62% 38% 54%;}
.sp:nth-child(3n)  {border-radius:36% 64% 58% 42% / 62% 38% 62% 38%;}
.sp:nth-child(4n+1){border-radius:64% 36% 44% 56% / 38% 56% 44% 62%;}
.sp:nth-child(5n+2){border-radius:50% 50% 60% 40% / 55% 45% 55% 45%;}

@keyframes sp-smoke{
  0%  {opacity:0;  transform:translate(0,0) scaleX(.45) scaleY(.6) rotate(0deg);}
  8%  {opacity:.78;}
  25% {opacity:.58;transform:translate(calc(var(--dx,28px)*.45),-20vh) scaleX(.68) scaleY(.92) rotate(calc(var(--rot,8deg)*.22));}
  48% {opacity:.38;transform:translate(var(--dx,28px),-48vh) scaleX(1.22) scaleY(1.55) rotate(calc(var(--rot,8deg)*.55));}
  70% {opacity:.14;transform:translate(calc(var(--dx,28px)*.25),-76vh) scaleX(1.85) scaleY(2.05) rotate(calc(var(--rot,8deg)*.82));}
  100%{opacity:0;  transform:translate(calc(var(--dx,28px)*-.38),-118vh) scaleX(2.55) scaleY(2.45) rotate(var(--rot,8deg));}
}
@media(prefers-reduced-motion:reduce){.smoke-wrap{display:none;}}
@media(max-width:768px){.sp:nth-child(n+5){display:none;}}

/* ── SHARED TOP BAR (homepage) ── */
.top-bar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  width:100%;
  transition:background .4s,border-color .4s,transform .4s cubic-bezier(.16,1,.3,1);
  display:flex;
  align-items:stretch;
  will-change:transform;
}
.top-bar.inner-nav-hidden{display:none;}
.top-bar.home-nav{display:flex;}
.top-bar-inner{width:100%;padding:26px 48px;display:flex;align-items:center;justify-content:flex-end;transition:padding .4s;}
.top-bar.shrink{background:rgba(6,6,8,0.88);backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-border);}
.top-bar.nav-hidden{transform:translateY(-100%);pointer-events:none;}
.inner-nav.nav-hidden{transform:translateY(-100%);pointer-events:none;}
.top-bar.shrink .top-bar-inner{padding:16px 48px;}
.top-bar-logo{font-family:var(--font-head);font-size:1rem;text-decoration:none;color:#fff;position:relative;z-index:1001;display:inline-flex;align-items:center;gap:5px;line-height:1;}
/* ── WORDMARK LOGO ── */
.logo-mark {
  font-family:var(--font-head);
  font-weight:900;
  font-size:1em;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  line-height:1;
  display:inline-block;
}
.logo-first,.logo-sep,.logo-last,.logo-ms,.logo-dot{all:unset;}
.top-bar-right{display:flex;align-items:center;gap:14px;}
.available-pill{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.45);position:relative;z-index:1001;}
.av-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.5);animation:avPulse 2.2s ease-in-out infinite;}
@keyframes avPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5);}50%{box-shadow:0 0 0 7px rgba(74,222,128,0);}}

/* ── HAM BUTTON (shared) ── */
.ham-btn{
  width:42px;height:42px;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:none;transition:all .3s;position:relative;z-index:1001;flex-shrink:0;
}
.ham-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25);}
.ham-lines{width:17px;display:flex;flex-direction:column;gap:4px;}
.ham-lines span{display:block;height:1.5px;background:#fff;border-radius:var(--r-pill);transform-origin:center;transition:all .45s cubic-bezier(.16,1,.3,1);}
.ham-btn.open .ham-lines span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.ham-btn.open .ham-lines span:nth-child(2){opacity:0;transform:scaleX(0);}
.ham-btn.open .ham-lines span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* ── INNER NAV (non-home pages) ── */
.inner-nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:none;
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  box-shadow:none;
  will-change:transform;
  transition:transform .4s cubic-bezier(.16,1,.3,1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.inner-nav.scrolled{
  background:rgba(6,6,8,0.88);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,0.04), 0 4px 32px rgba(0,0,0,0.35);
}
.inner-nav.visible{display:block;}
.inner-nav.home-nav-hidden{display:none!important;}
.inner-nav.shrink .inner-nav-inner{padding:14px 48px;}
.inner-nav-inner{max-width:var(--max);margin:0 auto;padding:18px 48px;display:flex;align-items:center;justify-content:space-between;}
.inner-nav-logo{font-family:var(--font-head);font-size:1rem;text-decoration:none;color:#fff;display:inline-flex;align-items:center;gap:0;line-height:1;}
.inner-nav-right{display:flex;align-items:center;gap:14px;}
.inner-available{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.4);}

/* ══════════════════════════════════════════
   PAGES
══════════════════════════════════════════ */
.page{display:none;position:relative;z-index:2;}
.page.active{display:block;}

/* ══════════════════════════════════════════
   HERO — FULLSCREEN PHOTO
══════════════════════════════════════════ */
.hero-section{min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;}
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center top;transform:scale(1.04);animation:heroZoom 18s ease-in-out infinite alternate;}
@keyframes heroZoom{0%{transform:scale(1.04) translateX(0);}100%{transform:scale(1.1) translateX(-1%);}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,8,0.5) 0%,rgba(6,6,8,0.05) 30%,rgba(6,6,8,0.05) 55%,rgba(6,6,8,0.65) 80%,rgba(6,6,8,0.97) 100%),linear-gradient(to right,rgba(6,6,8,0.25) 0%,transparent 65%);}
.hero-grain{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.055;}

.hero-content{position:relative;z-index:3;padding:0 48px 68px;max-width:820px;}
.hero-eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:18px;animation:suH 1.1s .3s cubic-bezier(.16,1,.3,1) both;}
.hero-eyebrow-line{width:30px;height:1px;background:rgba(255,255,255,0.3);}
.hero-h{font-family:var(--font-head);font-size:clamp(3rem,7.5vw,8rem);font-weight:900;line-height:.88;letter-spacing:-.05em;margin-bottom:22px;animation:suH 1.1s .45s cubic-bezier(.16,1,.3,1) both;}
.hero-h .grd{background:linear-gradient(135deg,#ffffff 0%,rgba(255,255,255,0.55) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-h .ghost{-webkit-text-stroke:1.5px rgba(255,255,255,0.18);-webkit-text-fill-color:transparent;}
.hero-sub{font-family:var(--font-body);font-size:.97rem;color:rgba(255,255,255,0.42);line-height:1.75;font-weight:300;max-width:460px;margin-bottom:36px;animation:suH 1.1s .6s cubic-bezier(.16,1,.3,1) both;}
.hero-sub strong{color:rgba(255,255,255,0.72);font-weight:500;}
.hero-btns{display:flex;gap:14px;animation:suH 1.1s .75s cubic-bezier(.16,1,.3,1) both;}
@keyframes suH{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}

.scroll-cue{position:absolute;bottom:34px;right:48px;z-index:3;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,0.22);writing-mode:vertical-rl;animation:suH 1.1s 1s both;}
.scroll-cue-line{width:1px;height:42px;background:rgba(255,255,255,0.12);position:relative;overflow:hidden;}
.scroll-cue-line::after{content:'';position:absolute;top:-42px;left:0;width:1px;height:42px;background:rgba(255,255,255,0.5);animation:sLine 2s ease-in-out infinite;}
@keyframes sLine{to{top:42px;}}

/* ══════════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════════ */
.sec{padding:90px 0;position:relative;z-index:2;}
#process{padding-top:0;padding-bottom:0;}
.sec-inner{max-width:var(--max);margin:0 auto;padding:0 48px;}
.sec-pre{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,0.32);margin-bottom:14px;}
.sec-pre::before{content:'//';opacity:.5;}
.sec-h{font-family:var(--font-head);font-size:clamp(2.4rem,4vw,4.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.0;margin-bottom:56px;}
.sec-h em{font-style:italic;color:var(--tx3);font-weight:400;}

/* BUTTONS — jelly spring on all instances */
.btn-grad{
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.88) 100%);
  color:#000;padding:14px 34px;border-radius:var(--r-pill);
  font-family:var(--font-head);font-weight:700;font-size:.9rem;
  text-decoration:none;cursor:none;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 8px 32px rgba(255,255,255,0.1);
  transition:background .3s cubic-bezier(.16,1,.3,1),
             color .3s cubic-bezier(.16,1,.3,1),
             box-shadow .3s cubic-bezier(.16,1,.3,1),
             transform .6s cubic-bezier(.34,1.56,.64,1);
  will-change:transform;
}
.btn-grad:hover{
  box-shadow:0 12px 52px rgba(255,255,255,.26),0 0 0 3px rgba(255,255,255,.1);
}
.btn-outline{
  background:transparent;border:1px solid rgba(255,255,255,0.2);
  color:#fff;padding:14px 34px;border-radius:var(--r-pill);
  font-family:var(--font-head);font-weight:500;font-size:.9rem;
  text-decoration:none;cursor:none;backdrop-filter:blur(10px);
  transition:background .3s cubic-bezier(.16,1,.3,1),
             color .3s cubic-bezier(.16,1,.3,1),
             border-color .3s cubic-bezier(.16,1,.3,1),
             box-shadow .3s cubic-bezier(.16,1,.3,1),
             transform .6s cubic-bezier(.34,1.56,.64,1);
  will-change:transform;
}
.btn-outline:hover{
  background:#fff;color:#000;border-color:#fff;
  box-shadow:0 12px 52px rgba(255,255,255,.18),0 0 0 3px rgba(255,255,255,.08);
}

/* STATS */
.stats-wrap{width:100%;}
.stats{display:flex;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);background:rgba(255,255,255,0.02);backdrop-filter:blur(20px);position:relative;z-index:2;}
.st{flex:1;padding:34px 40px;border-right:1px solid var(--glass-border);transition:background .4s;}
.st:last-child{border-right:none;}
.st:hover{background:rgba(255,255,255,0.03);}
.st-n{font-family:var(--font-head);font-size:2.8rem;font-weight:900;line-height:1;margin-bottom:5px;background:linear-gradient(135deg,#fff,rgba(255,255,255,0.5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.03em;}
.st-l{font-family:var(--font-head);font-size:.72rem;font-weight:600;color:var(--tx4);letter-spacing:.08em;text-transform:uppercase;}

/* MARQUEE */
.mq{overflow:hidden;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);padding:30px 0;position:relative;z-index:2;}
.mq-t{display:flex;width:max-content;animation:mqs 28s linear infinite;}
.mq-t:hover{animation-play-state:paused;}
.mq-i{font-family:var(--font-head);font-size:20px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;-webkit-text-stroke:1px rgba(255,255,255,0.35);-webkit-text-fill-color:transparent;padding:0 30px;white-space:nowrap;display:flex;align-items:center;gap:30px;transition:-webkit-text-stroke-color .3s;}
.mq-i:hover{-webkit-text-stroke-color:rgba(255,255,255,.75);}
.mq-dot{width:5px;height:5px;background:rgba(255,255,255,.25);border-radius:50%;flex-shrink:0;-webkit-text-fill-color:initial;}
@keyframes mqs{to{transform:translateX(-50%);}}

/* TECH GRID */
.tech-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--glass-border);border:1px solid var(--glass-border);border-radius:var(--r-xl);overflow:hidden;}
.tc{background:var(--dark1);padding:28px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;transition:all .4s cubic-bezier(.16,1,.3,1);cursor:none;position:relative;overflow:hidden;}
.tc::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.04);opacity:0;transition:opacity .4s;}
.tc:hover::before{opacity:1;}
.tc:hover{background:rgba(255,255,255,0.06);}
.tc:hover .tc-i{transform:scale(1.18) translateY(-2px);}
.tc-i{font-size:1.7rem;transition:transform .4s;}
.tc-l{font-family:var(--font-head);font-size:.62rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx4);text-align:center;transition:color .3s;}
.tc:hover .tc-l{color:rgba(255,255,255,.7);}

/* ═══ SERVICES LIST ═══ */
.srvl-sec{padding:clamp(40px,5vh,70px) 0 clamp(80px,10vh,120px);}
.srvl-wrap{max-width:var(--max);margin:0 auto;padding:0 48px;}

.srvl-item{border-top:1px solid rgba(255,255,255,.07);transition:background .3s;}
.srvl-item:last-child{border-bottom:1px solid rgba(255,255,255,.07);}
.srvl-item:hover{background:rgba(255,255,255,.02);}

.srvl-head{display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);padding:clamp(20px,3vh,30px) 0;cursor:default;}

.srvl-num{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;color:rgba(255,255,255,.25);min-width:24px;flex-shrink:0;}

.srvl-name{font-family:var(--font-head);font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:700;letter-spacing:-.03em;color:#fff;flex:1;margin:0;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.srvl-item:hover .srvl-name{transform:translateX(10px);}

.srvl-ico{font-size:1rem;color:rgba(255,255,255,.22);flex-shrink:0;transition:transform .35s cubic-bezier(.16,1,.3,1),color .3s;}
.srvl-item:hover .srvl-ico{transform:rotate(45deg);color:rgba(255,255,255,.7);}

/* Reveal */
.srvl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1);}
.srvl-item:hover .srvl-body{grid-template-rows:1fr;}
.srvl-body-inner{overflow:hidden;}
.srvl-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);padding-bottom:clamp(28px,4vh,44px);padding-left:calc(24px + clamp(16px,2.5vw,40px));}

.srvl-desc{font-size:clamp(.85rem,1.2vw,.95rem);line-height:1.8;color:rgba(255,255,255,.45);margin:0;}

.srvl-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.srvl-feats li{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);}

@media(max-width:860px){
  .srvl-wrap{padding:0 24px;}
  .srvl-cols{grid-template-columns:1fr;gap:20px;}
}
@media(max-width:560px){
  .srvl-wrap{padding:0 16px;}
  .srvl-cols{padding-left:0;}
}

/* INDUSTRY GLASS GRID */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--glass-border);border:1px solid var(--glass-border);border-radius:var(--r-xl);overflow:hidden;margin-top:56px;}
.ind-cell{position:relative;padding:40px 34px;background:var(--dark1);min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;cursor:none;overflow:hidden;transition:background .5s;}
.ind-bg{position:absolute;inset:0;opacity:0;transition:opacity .6s cubic-bezier(.16,1,.3,1);}
.ind-cell:hover .ind-bg{opacity:1;}
.ind-glass-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,8,0.9) 35%,rgba(6,6,8,0.15));opacity:0;transition:opacity .5s;}
.ind-cell:hover .ind-glass-ov{opacity:1;}
.ind-num{position:absolute;top:22px;right:22px;font-family:var(--font-head);font-size:3.2rem;font-weight:900;color:rgba(255,255,255,0.04);line-height:1;z-index:1;transition:color .4s;}
.ind-cell:hover .ind-num{color:rgba(255,255,255,0.08);}
.ind-icon{font-size:1.7rem;margin-bottom:9px;position:relative;z-index:2;transition:transform .4s;}
.ind-cell:hover .ind-icon{transform:scale(1.1) translateY(-3px);}
.ind-name{font-family:var(--font-head);font-size:1.4rem;font-weight:700;letter-spacing:-.02em;position:relative;z-index:2;margin-bottom:6px;}
.ind-desc{font-family:var(--font-body);font-size:.79rem;color:var(--tx3);position:relative;z-index:2;line-height:1.65;max-width:260px;opacity:0;transform:translateY(8px);transition:all .4s .08s;}
.ind-cell:hover .ind-desc{opacity:1;transform:none;}
.ind-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-size:.76rem;font-weight:700;color:rgba(255,255,255,.5);margin-top:9px;position:relative;z-index:2;opacity:0;transform:translateY(6px);transition:all .4s .14s;text-decoration:none;cursor:none;}
.ind-cell:hover .ind-link{opacity:1;transform:none;}
.ind-link:hover{color:#fff;}

/* PROCESS LIST */
.proc-list{border-top:1px solid var(--glass-border);}
.proc-item{display:grid;grid-template-columns:72px 1fr;align-items:start;gap:28px;padding:32px 0;border-bottom:1px solid var(--glass-border);cursor:default;transition:all .4s;}
.proc-item:hover{background:rgba(255,255,255,.018);padding-left:20px;padding-right:20px;border-radius:var(--r);}
.proc-num-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:4px;}
.proc-num{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:.82rem;font-weight:800;color:rgba(255,255,255,.3);transition:all .4s;flex-shrink:0;}
.proc-item:hover .proc-num{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.05);box-shadow:0 0 20px rgba(255,255,255,.06);}
.proc-line{width:1px;flex:1;min-height:24px;background:rgba(255,255,255,.06);}
.proc-item:last-child .proc-line{display:none;}
.proc-content{}
.proc-step-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:8px;}
.proc-item h4{font-family:var(--font-head);font-size:1.25rem;font-weight:700;letter-spacing:-.01em;margin-bottom:7px;transition:color .4s;}
.proc-item:hover h4{color:#fff;}
.proc-item p{color:var(--tx3);font-size:.84rem;line-height:1.75;font-weight:300;font-family:var(--font-body);}

/* TOOLS */
.tools-wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:44px;}
.t-p{border:1px solid var(--glass-border);border-radius:var(--r-pill);padding:11px 18px;font-family:var(--font-head);font-size:.76rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s;cursor:none;color:var(--tx3);backdrop-filter:blur(10px);background:var(--glass);text-align:center;}
.t-p:hover{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.06);}
.t-p span{font-size:.92rem;}

/* ══════════════════════════════════════════
   PORTFOLIO — SELECTED WORK  50/50 split
   Left: crossfading project text
   Right: panels slide UP in, exit RIGHT out
   .sw-section height = N × 100vh scroll runway
══════════════════════════════════════════ */
.sw-section{position:relative;height:calc(100vh * 5);border-top:1px solid rgba(255,255,255,.07);}
.sw-pin{position:sticky;top:0;height:100vh;display:flex;overflow:hidden;background:#000;padding-top:clamp(60px,9vh,110px);}

/* ── LEFT half ── */
.sw-lhalf{
  width:40%;display:flex;flex-direction:column;
  padding:0 clamp(28px,4vw,56px);
  border-right:1px solid rgba(255,255,255,.06);
  position:relative;overflow:hidden;
}
.sw-lhead{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:clamp(68px,9vh,92px);
  padding-bottom:clamp(20px,3.2vh,36px);
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.sw-label-txt{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.48);}
.sw-counter-txt{font-family:var(--font-head);font-size:.82rem;font-weight:700;color:rgba(255,255,255,.48);}
#swCur{color:rgba(255,255,255,.82);transition:all .4s cubic-bezier(.16,1,.3,1);}
.sw-csep{color:rgba(255,255,255,.38);}

/* left panels (absolute stack, crossfade via JS) */
.sw-lpanels{position:relative;flex:1;min-height:0;}
.sw-lpanel{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(36px,5.5vh,60px);
  opacity:0;transform:translateY(28px);
  pointer-events:none;will-change:opacity,transform;
}
.sw-lnum{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(4.5rem,9vw,10rem);letter-spacing:-.055em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);
  margin-bottom:4px;
}
.sw-ltitle{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.7rem,3.2vw,3.2rem);letter-spacing:-.04em;line-height:.92;
  color:rgba(255,255,255,.9);margin-bottom:18px;
}
.sw-ldesc{
  font-family:var(--font-body);font-size:clamp(.78rem,1.05vw,.9rem);
  color:rgba(255,255,255,.58);line-height:1.7;
  max-width:400px;margin-bottom:18px;font-weight:300;
}
.sw-lplat{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.45);
  display:block;margin-bottom:26px;
}
.sw-lcta{font-size:.8rem !important;padding:10px 22px !important;}

/* ── RIGHT half ── */
.sw-rhalf{width:60%;position:relative;overflow:hidden;}
.sw-rpanels{position:absolute;inset:clamp(16px,2.5vh,28px) clamp(16px,2.5vw,28px);}
.sw-rpanel{
  position:absolute;inset:0;
  border-radius:clamp(14px,1.8vw,24px);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#0a0a0a;
  background-size:contain;background-position:center center;background-repeat:no-repeat;
  will-change:transform;
}
.sw-rpanel-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.35) 0%,transparent 60%);}
.sw-rvnum{
  position:absolute;right:-4%;bottom:-10%;
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(120px,20vw,260px);letter-spacing:-.07em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.05);
  user-select:none;pointer-events:none;
}
.sw-rvicon{font-size:clamp(60px,8vw,96px);filter:drop-shadow(0 18px 48px rgba(0,0,0,.55));position:relative;z-index:1;}

/* ══════════════════════════════════════════
   PORTFOLIO — ALL WORK (text rows + preview)
══════════════════════════════════════════ */
.aw-section{border-top:1px solid rgba(255,255,255,.07);padding:clamp(60px,9vh,100px) 0 clamp(80px,14vh,160px);}
.aw-inner{max-width:var(--max);margin:0 auto;padding:0 48px;display:grid;grid-template-columns:1fr clamp(220px,26vw,340px);gap:64px;align-items:start;}
.aw-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,5vh,52px);}
.aw-heading{font-family:var(--font-head);font-weight:900;font-size:clamp(2.2rem,5vw,5rem);letter-spacing:-.05em;line-height:.88;}
.aw-filter{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:4px;}
.aw-btn{background:transparent;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.32);padding:6px 15px;border-radius:var(--r-pill);font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:none;transition:all .22s;}
.aw-btn:hover{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.65);}
.aw-btn.active{background:#fff;color:#000;border-color:#fff;}
.aw-list{border-top:1px solid rgba(255,255,255,.07);}
.aw-item{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:14px;padding:clamp(15px,2.2vh,21px) 0;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none;cursor:none;position:relative;overflow:hidden;}
.aw-item::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.022);transform:translateX(-101%);transition:transform .42s cubic-bezier(.16,1,.3,1);}
.aw-item:hover::after{transform:translateX(0);}
.aw-item.aw-hidden{display:none;}
.aw-idx{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;color:rgba(255,255,255,.18);position:relative;z-index:1;}
.aw-name{font-family:var(--font-head);font-weight:700;font-size:clamp(.88rem,1.5vw,1.22rem);letter-spacing:-.02em;color:rgba(255,255,255,.72);transition:color .22s;position:relative;z-index:1;}
.aw-item:hover .aw-name{color:#fff;}
.aw-cat{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.2);white-space:nowrap;position:relative;z-index:1;}
.aw-arr{color:rgba(255,255,255,.18);font-size:.95rem;transition:color .22s,transform .32s cubic-bezier(.34,1.56,.64,1);position:relative;z-index:1;}
.aw-item:hover .aw-arr{color:rgba(255,255,255,.65);transform:translate(4px,-4px);}
.aw-pv-col{position:relative;}
.aw-pv{position:sticky;top:clamp(80px,12vh,110px);border-radius:clamp(14px,1.8vw,24px);overflow:hidden;aspect-ratio:3/4;opacity:0;transform:translateY(18px) scale(.94);transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1);pointer-events:none;}
.aw-pv.show{opacity:1;transform:translateY(0) scale(1);}
.aw-pv-bg{position:absolute;inset:0;transition:background .28s ease;}
.aw-pv-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(56px,7vw,88px);filter:drop-shadow(0 16px 44px rgba(0,0,0,.5));}
.aw-pv-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,8,.7) 0%,transparent 55%);}

/* sw-mob-img hidden on desktop */
.sw-mob-img{display:none;}

@media(max-width:900px){
  .sw-section{height:auto;}
  .sw-pin{position:static;height:auto;flex-direction:column;overflow:visible;padding:0;}
  .sw-lhalf{width:100%;border-right:none;overflow:visible;padding:0 20px;}
  .sw-rhalf{display:none;}
  .sw-lhead{padding-top:clamp(32px,5vh,52px);}
  .sw-counter-txt{display:none;}
  .sw-lpanels{position:static;height:auto;overflow:visible;}
  .sw-lpanel{position:static;inset:auto;display:flex;flex-direction:column;justify-content:flex-start;opacity:1 !important;transform:none !important;pointer-events:auto;padding:clamp(32px,5vh,52px) 0 clamp(40px,6vh,60px);border-bottom:1px solid rgba(255,255,255,.07);}
  .sw-mob-img{display:block;width:calc(100% + 40px);height:56vw;background-size:cover;background-position:center;margin:calc(-1 * clamp(32px,5vh,52px)) -20px clamp(20px,3vh,32px);flex-shrink:0;}
  .aw-inner{grid-template-columns:1fr;}
  .aw-pv-col{display:none;}
}
@media(max-width:560px){
  .aw-item{grid-template-columns:30px 1fr auto;}
  .aw-cat{display:none;}
}

/* ABOUT PAGE */
.page-hero{padding:160px 0 70px;position:relative;overflow:hidden;}
.page-hero-inner{max-width:var(--max);margin:0 auto;padding:0 48px;position:relative;z-index:1;}
.ghost-bg{font-family:var(--font-head);font-size:clamp(6rem,16vw,20rem);font-weight:900;letter-spacing:-.06em;line-height:.8;color:rgba(255,255,255,.025);position:absolute;bottom:-20px;right:-20px;pointer-events:none;z-index:0;user-select:none;}
.page-h{font-family:var(--font-head);font-size:clamp(3rem,7vw,8rem);font-weight:900;letter-spacing:-.05em;line-height:.88;}
.page-h em{font-style:italic;color:var(--tx3);font-weight:400;}

.about-wrap{display:grid;grid-template-columns:5fr 7fr;max-width:var(--max);margin:0 auto;position:relative;z-index:1;}
.about-l{padding:60px 48px;border-right:1px solid var(--glass-border);}
.ph-frame{width:100%;aspect-ratio:3/4;border-radius:var(--r-xl);background:var(--dark2);border:1px solid var(--glass-border);overflow:hidden;position:relative;margin-bottom:20px;}
.ph-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.ph-scan{position:absolute;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);box-shadow:0 0 12px rgba(255,255,255,.25);animation:scanV 3s ease-in-out infinite;}
@keyframes scanV{0%,100%{top:0;}50%{top:calc(100% - 1.5px);}}
.about-mini{display:flex;gap:10px;}
.am{flex:1;border:1px solid var(--glass-border);border-radius:var(--r);padding:14px;text-align:center;background:var(--glass);backdrop-filter:blur(12px);transition:border-color .3s;}
.am:hover{border-color:rgba(255,255,255,.2);}
.am-n{font-family:var(--font-head);font-size:2.6rem;font-weight:900;-webkit-text-stroke:1.5px rgba(255,255,255,0.7);-webkit-text-fill-color:transparent;background:none;letter-spacing:-.03em;}
.am-l{font-size:.6rem;color:var(--tx4);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-family:var(--font-head);}
.about-r{padding:60px 48px;}
.about-r h2{font-family:var(--font-head);font-size:clamp(1.8rem,3vw,3.2rem);font-weight:900;letter-spacing:-.04em;line-height:.95;margin-bottom:22px;}
.about-r h2 em{font-style:italic;color:var(--tx3);font-weight:400;}
.about-r p{color:var(--tx2);line-height:1.85;font-size:.93rem;font-weight:300;margin-bottom:16px;font-family:var(--font-body);}
.about-r p strong{color:#fff;font-weight:500;}
.about-r p span{color:rgba(255,255,255,.8);}
.skills-wrap{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:28px 0;}
.sk-row{border:1px solid var(--glass-border);border-radius:var(--r);padding:14px;transition:all .3s;cursor:none;background:var(--glass);backdrop-filter:blur(10px);}
.sk-row:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);}
.sk-name{font-family:var(--font-head);font-size:.74rem;font-weight:600;letter-spacing:.02em;margin-bottom:9px;display:flex;justify-content:space-between;}
.sk-name span{color:var(--tx4);font-weight:400;}
.sk-bar{height:1.5px;background:rgba(255,255,255,0.07);border-radius:var(--r-pill);overflow:hidden;}
.sk-fill{height:100%;background:linear-gradient(90deg,#fff,rgba(255,255,255,.4));width:0;transition:width 1.4s cubic-bezier(.16,1,.3,1);box-shadow:0 0 6px rgba(255,255,255,.2);border-radius:var(--r-pill);}

/* TIMELINE */
.tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.tl-col-h{font-family:var(--font-head);font-size:1.55rem;font-weight:700;color:var(--tx3);margin-bottom:32px;}
.tl-item{padding:0 0 28px 22px;border-left:1px solid var(--glass-border);position:relative;margin-bottom:4px;transition:border-color .3s;}
.tl-item:last-child{border-left-color:transparent;padding-bottom:0;}
.tl-item::before{content:'';position:absolute;left:-5px;top:6px;width:9px;height:9px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:var(--black);transition:all .3s;}
.tl-item:hover{border-left-color:rgba(255,255,255,.2);}
.tl-item:hover::before{background:#fff;border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.3);}
.tl-yr{font-family:var(--font-mono);font-size:.65rem;color:rgba(255,255,255,.32);letter-spacing:.12em;margin-bottom:6px;text-transform:uppercase;}
.tl-role{font-family:var(--font-head);font-weight:700;font-size:.96rem;margin-bottom:3px;}
.tl-org{color:var(--tx3);font-size:.82rem;font-family:var(--font-body);}

/* CONTACT */
.con-wrap{display:grid;grid-template-columns:1fr 1.35fr;border-top:1px solid var(--glass-border);max-width:var(--max);margin:0 auto;position:relative;z-index:1;}
.con-l{padding:64px 48px;border-right:1px solid var(--glass-border);}
.con-l h3{font-family:var(--font-head);font-size:2.4rem;font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:12px;}
.con-l p{color:var(--tx2);line-height:1.85;font-size:.93rem;font-weight:300;margin-bottom:36px;font-family:var(--font-body);}
.con-links{display:flex;flex-direction:column;gap:11px;}
.cl{display:flex;align-items:center;gap:13px;padding:14px 18px;border:1px solid var(--glass-border);border-radius:var(--r);text-decoration:none;color:#fff;transition:all .35s;cursor:none;position:relative;overflow:hidden;background:var(--glass);backdrop-filter:blur(10px);}
.cl::after{content:'';position:absolute;inset:0;background:#fff;transform:translateX(-101%);transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:0;}
.cl:hover{color:#000;border-color:#fff;}
.cl:hover::after{transform:translateX(0);}
.cl *{position:relative;z-index:1;}
.cl-icon{width:36px;height:36px;border:1px solid var(--glass-border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.86rem;flex-shrink:0;}
.cl-lbl{font-family:var(--font-head);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin-bottom:2px;}
.cl-val{font-family:var(--font-head);font-size:.86rem;font-weight:600;}
.con-r{padding:64px 48px;}
.con-r h3{font-family:var(--font-head);font-size:1.9rem;font-weight:900;letter-spacing:-.03em;margin-bottom:28px;}
.con-r h3 em{font-style:italic;color:var(--tx3);font-weight:400;}
.fg{margin-bottom:14px;}
.fg label{display:block;font-family:var(--font-head);font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx4);margin-bottom:7px;}
.fg input,.fg textarea,.fg select{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:var(--r);padding:13px 15px;color:#fff;font-family:var(--font-body);font-size:.88rem;outline:none;transition:border-color .3s,box-shadow .3s;cursor:none;}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:rgba(255,255,255,.3);box-shadow:0 0 0 3px rgba(255,255,255,.05);}
.fg textarea{height:115px;resize:none;}
.fg select option{background:#0c0c10;}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sub-b{width:100%;background:#fff;color:#000;border:none;border-radius:var(--r-pill);padding:15px 32px;font-family:var(--font-head);font-size:1.05rem;font-weight:900;cursor:none;transition:all .35s;box-shadow:0 8px 32px rgba(255,255,255,.1);letter-spacing:-.01em;}
.sub-b:hover{background:rgba(255,255,255,.88);transform:translateY(-2px);box-shadow:0 14px 48px rgba(255,255,255,.16);}

/* READY TO BUILD (universal CTA bottom section) */
.rtb-sec{padding:110px 0;text-align:center;position:relative;z-index:2;overflow:hidden;border-top:1px solid var(--glass-border);}
.rtb-inner{max-width:var(--max);margin:0 auto;padding:0 48px;}
.rtb-h{font-family:var(--font-head);font-size:clamp(3rem,7vw,7.5rem);font-weight:900;letter-spacing:-.05em;line-height:.88;margin-bottom:40px;}
.rtb-h em{font-style:italic;color:var(--tx3);font-weight:400;}
.rtb-h .grd{background:linear-gradient(135deg,#fff,rgba(255,255,255,.5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.geo{position:absolute;pointer-events:none;animation:geoF ease-in-out infinite alternate;}
@keyframes geoF{0%{transform:translate(0,0) rotate(0deg);}100%{transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--tr,0deg));}}

/* FOOTER */
footer{background:rgba(6,6,8,0.9);backdrop-filter:blur(24px);border-top:1px solid var(--glass-border);padding:14px 0;position:relative;z-index:2;}
.footer-inner{max-width:var(--max);margin:0 auto;padding:10px 48px;display:flex;align-items:center;justify-content:space-between;}
.ft-logo{font-family:var(--font-head);font-size:1.1rem;margin-bottom:7px;display:flex;align-items:center;gap:0;line-height:1;}
.ft-logo .logo-first{font-weight:300;color:rgba(255,255,255,.45);font-size:.85em;letter-spacing:.01em;}
.ft-logo .logo-last{font-weight:800;background:linear-gradient(135deg,#fff,rgba(255,255,255,.65));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.03em;}
.ft-logo .logo-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);display:inline-block;margin-bottom:1px;flex-shrink:0;}
.ft-copy{color:var(--tx4);font-size:.76rem;font-family:var(--font-body);}
.ft-col h5{font-family:var(--font-head);font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tx4);margin-bottom:14px;}
.ft-col a{display:block;color:var(--tx3);text-decoration:none;font-family:var(--font-body);font-size:.8rem;margin-bottom:8px;transition:color .3s;cursor:none;}
.ft-col a:hover{color:#fff;}
.ft-soc{display:flex;gap:9px;margin-top:4px;}
.soc-b{width:36px;height:36px;border:1px solid var(--glass-border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--tx3);text-decoration:none;cursor:none;transition:all .3s;backdrop-filter:blur(10px);font-family:var(--font-head);}
.soc-b:hover{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.05);}

/* FLYING CODE */
.fc{position:absolute;font-family:var(--font-mono);font-size:.6rem;color:rgba(255,255,255,.09);white-space:nowrap;animation:flyLine linear infinite;pointer-events:none;letter-spacing:.06em;}
@keyframes flyLine{from{transform:translateX(-500px) rotate(var(--r)) translateY(0);opacity:0;}8%{opacity:1;}92%{opacity:1;}to{transform:translateX(calc(100vw+500px)) rotate(var(--r)) translateY(var(--d));opacity:0;}}

/* REVEAL ANIMATIONS */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.rv.on{opacity:1;transform:none;}
.rvl{opacity:0;transform:translateX(-28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.rvl.on{opacity:1;transform:none;}
.rvr{opacity:0;transform:translateX(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.rvr.on{opacity:1;transform:none;}
.d1{transition-delay:.06s;}.d2{transition-delay:.12s;}.d3{transition-delay:.18s;}.d4{transition-delay:.24s;}

/* PROCESS DETAIL PAGE */
.proc-detail{padding:80px 0;}
.proc-detail-inner{max-width:var(--max);margin:0 auto;padding:0 48px;}
.proc-step-detail{padding:48px 0;border-bottom:1px solid var(--glass-border);}
.proc-step-detail:last-child{border-bottom:none;}
.psd-head{display:grid;grid-template-columns:56px 1fr;gap:28px;align-items:center;margin-bottom:20px;}
.psd-num{font-family:var(--font-head);font-size:2.2rem;font-weight:900;background:linear-gradient(135deg,#fff,rgba(255,255,255,.3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.psd-title{font-family:var(--font-head);font-size:1.8rem;font-weight:800;letter-spacing:-.03em;}
.psd-body{padding-left:84px;}
.psd-body p{color:var(--tx2);line-height:1.9;font-size:.95rem;font-weight:300;font-family:var(--font-body);margin-bottom:14px;}
.psd-list{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.psd-li{display:flex;align-items:flex-start;gap:14px;font-family:var(--font-body);font-size:.88rem;color:var(--tx3);line-height:1.65;}
.psd-li::before{content:'';width:6px;height:6px;border-radius:50%;border:1px solid rgba(255,255,255,.3);flex-shrink:0;margin-top:6px;}

/* ═══ UTILITY ═══ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ═══ REMOTE DEV / SEO SECTION ═══ */
.rwd-sec{border-top:1px solid rgba(255,255,255,.07);padding:clamp(48px,7vh,80px) 0;}
.rwd-inner{max-width:var(--max);margin:0 auto;padding:0;display:grid;grid-template-columns:1fr clamp(220px,28vw,360px);gap:clamp(48px,7vw,100px);align-items:center;}
.rwd-l{display:flex;flex-direction:column;gap:clamp(20px,3vh,28px);}
.rwd-h{font-family:var(--font-head);font-weight:900;font-size:clamp(2.4rem,5vw,4.4rem);letter-spacing:-.045em;line-height:.9;color:#fff;}
.rwd-h em{font-style:italic;color:rgba(255,255,255,.38);}
.rwd-h .rwd-ch{display:inline;color:rgba(255,255,255,.1);transition:color .16s ease;}
.rwd-h .rwd-ch.rwd-ch--on{color:inherit;}
.rwd-p{font-family:var(--font-body);font-size:clamp(.82rem,1.1vw,.94rem);line-height:1.85;color:rgba(255,255,255,.42);max-width:520px;}
.rwd-p a{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px;transition:color .22s;}
.rwd-p a:hover{color:#fff;}
.rwd-tags{display:flex;flex-wrap:wrap;gap:8px;}
.rwd-tags span{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-pill);padding:6px 14px;transition:color .22s,border-color .22s;}
.rwd-tags span:hover{color:rgba(255,255,255,.65);border-color:rgba(255,255,255,.28);}
.rwd-r{display:flex;flex-direction:column;gap:0;}
.rwd-stat{padding:clamp(22px,3.5vh,32px) 0;display:flex;flex-direction:column;gap:6px;}
.rwd-n{font-family:var(--font-head);font-weight:900;font-size:clamp(3rem,5vw,4.2rem);letter-spacing:-.05em;line-height:1;color:#fff;}
.rwd-sl{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.25);}
.rwd-div{height:1px;background:rgba(255,255,255,.07);}
.rwd-avail{padding:clamp(22px,3.5vh,32px) 0;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);}
.rwd-cta-block{display:flex;flex-direction:column;gap:6px;padding-top:clamp(16px,2.5vh,24px);border-top:1px solid rgba(255,255,255,.07);}
.rwd-cta-pre{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.22);}
.rwd-cta-link{font-family:var(--font-head);font-weight:900;font-size:clamp(1.7rem,3.2vw,2.8rem);letter-spacing:-.045em;line-height:1;background:linear-gradient(100deg,#fff 30%,rgba(255,255,255,.38) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none;display:inline-flex;align-items:center;gap:14px;transition:gap .3s cubic-bezier(.16,1,.3,1);}
.rwd-cta-link:hover{gap:22px;}
.rwd-cta-arr{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1);-webkit-text-fill-color:rgba(255,255,255,.38);}
.rwd-cta-link:hover .rwd-cta-arr{transform:translate(5px,-5px);}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1280px){
  .mw,.sec-inner,.srv-layout,.about-wrap,.con-wrap,.footer-inner,.rtb-inner,.page-hero-inner,.proc-detail-inner{padding-left:32px;padding-right:32px;}
}
@media(max-width:960px){
  .top-bar,.top-bar.shrink{padding:14px 20px;}
  .top-bar-inner{padding:26px 0px;}
  .top-bar.shrink .top-bar-inner{padding:16px 0px;}
  .inner-nav{padding:14px 20px;}
  .inner-nav-inner{padding:18px 0px;}
  .inner-nav.shrink .inner-nav-inner{padding:14px 0px;}
  .hero-content{padding:0 20px 52px;}
  .scroll-cue{right:20px;}
  .stats{flex-direction:column;}
  .st{border-right:none;border-bottom:1px solid var(--glass-border);}
  .tech-grid{grid-template-columns:repeat(3,1fr);}
  .tech-caps{grid-template-columns:repeat(3,1fr);gap:8px;}
  .tech-cap{padding:9px 10px;font-size:.72rem;gap:6px;}
  .tc-img{width:1rem;height:1rem;}
  .srv-layout{grid-template-columns:1fr;gap:36px;padding:0 20px;}
  .srv-tabs-sticky{position:static;}
  .ind-grid{grid-template-columns:1fr 1fr;}
  .about-wrap{grid-template-columns:1fr;padding-left:0;padding-right:0;}
  .about-l{border-right:none;border-bottom:1px solid var(--glass-border);padding:32px 20px;}
  .about-r{padding:32px 20px;}
  .rwd-inner{grid-template-columns:1fr;padding:0 20px;}
  .rwd-r{flex-direction:row;flex-wrap:wrap;gap:0;border-top:1px solid rgba(255,255,255,.07);margin-top:8px;}
  .rwd-stat{flex:1;min-width:100px;padding:16px 0;}
  .rwd-div{display:none;}
  .rwd-avail{width:100%;padding:14px 0;border-top:1px solid rgba(255,255,255,.07);}
  .tl-grid{grid-template-columns:1fr;}
  .port-grid{display:flex;flex-direction:column;}
  .pc{height:270px;}
  .con-wrap{grid-template-columns:1fr;}
  .con-l{border-right:none;border-bottom:1px solid var(--glass-border);padding:32px 20px;}
  .con-r{padding:32px 20px;}
  .proc-item{grid-template-columns:56px 1fr;gap:20px;}
  .footer-inner{flex-direction:column;gap:24px;}
  .sec-inner,.rtb-inner,.page-hero-inner,.proc-detail-inner{padding-left:20px;padding-right:20px;}
  .ov-bottom{left:20px;right:20px;}
  .psd-body{padding-left:0;}
  .psd-head{grid-template-columns:44px 1fr;gap:14px;}
}
@media(max-width:768px){
  .tools-wrap{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:600px){
  .ind-grid{grid-template-columns:1fr;}
  .tech-grid{grid-template-columns:repeat(2,1fr);}
  .skills-wrap{grid-template-columns:1fr;}
  .fg-row{grid-template-columns:1fr;}
  .tools-wrap{grid-template-columns:repeat(2,1fr);}
}

.top-bar.behind-overlay .top-bar-inner > *:not(.top-bar-right){opacity:0;}
.inner-nav.behind-overlay .inner-nav-inner > *:not(.inner-nav-right){opacity:0;}

/* ═══ TECH CAPSULES ═══ */
.tech-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,12px);margin-top:clamp(28px,4vh,44px);}
.tech-cap{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-size:clamp(.78rem,1vw,.9rem);font-weight:600;color:rgba(255,255,255,.55);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-pill);padding:clamp(9px,1.2vh,12px) clamp(16px,1.8vw,22px);transition:color .22s,background .22s,border-color .22s;cursor:default;}
@media(max-width:960px){
  .tech-caps{grid-template-columns:repeat(3,1fr);gap:8px;}
  .tech-cap{padding:9px 10px;font-size:.72rem;gap:6px;}
  .tc-img{width:1rem;height:1rem;}
}
.tech-cap:hover{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);}
.tc-icon{font-size:1rem;line-height:1;flex-shrink:0;}
.tc-img{width:1.25rem;height:1.25rem;object-fit:contain;display:block;background:rgba(255,255,255,.1);border-radius:5px;padding:3px;}

/* ══ PORTFOLIO ZIGZAG ══ */
.pz-section{padding:clamp(60px,8vh,100px) clamp(24px,5vw,80px);}

.pz-row{display:flex;margin-bottom:0;}
.pz-right{justify-content:flex-end;}
.pz-left{justify-content:flex-start;}

.pz-card{
  width:clamp(300px,55vw,720px);
  cursor:none;
  position:relative;
}
.pz-img-wrap{
  position:relative;
  overflow:hidden;
  border-radius:clamp(12px,1.5vw,20px);
  aspect-ratio:16/10;
  background:#111;
}
.pz-img-wrap img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.pz-card:hover .pz-img-wrap img{transform:scale(1.04);}
.pz-img-ov{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 60%);
  opacity:0;transition:opacity .3s;
}
.pz-card:hover .pz-img-ov{opacity:1;}

.pz-meta{
  display:flex;align-items:center;gap:16px;
  padding:clamp(14px,2vh,20px) 4px 0;
}
.pz-num{
  font-family:var(--font-mono);
  font-size:.55rem;letter-spacing:.16em;
  color:rgba(255,255,255,.2);
  flex-shrink:0;
}
.pz-info{flex:1;}
.pz-name{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(.95rem,1.5vw,1.25rem);
  color:rgba(255,255,255,.85);letter-spacing:-.02em;
  line-height:1.1;margin-bottom:4px;
}
.pz-tag{
  font-family:var(--font-mono);font-size:.52rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.pz-arr{
  font-size:1.1rem;color:rgba(255,255,255,.3);
  flex-shrink:0;
  transition:color .25s,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pz-card:hover .pz-arr{color:#fff;transform:translate(3px,-3px);}

/* connector — animated SVG wires */
.pz-connector{padding:clamp(16px,2.5vh,28px) 0;}
.pz-svg{width:100%;height:clamp(70px,9vw,110px);display:block;overflow:visible;}
.pw{stroke:rgba(255,255,255,.18);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;}
.pz-node{fill:rgba(255,255,255,.25);transition:fill .3s ease;}
.pz-connector.wired .pz-node{fill:rgba(255,255,255,.55);}

/* ══ LIGHTBOX ══ */
.lb{position:fixed;inset:0;z-index:9900;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,60px);opacity:0;pointer-events:none;transition:opacity .28s;backdrop-filter:blur(4px);}
.lb.open{opacity:1;pointer-events:all;}
.lb-box{position:relative;width:100%;max-width:1100px;height:100%;max-height:100%;background:#0d0d0d;border-radius:clamp(12px,1.5vw,20px);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.8);}
.lb-topbar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.lb-title{font-family:var(--font-head);font-weight:700;font-size:.9rem;color:rgba(255,255,255,.7);flex:1;}
.lb-visit{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-pill);padding:5px 12px;white-space:nowrap;transition:color .2s,border-color .2s;text-decoration:none;}
.lb-visit:hover{color:#fff;border-color:rgba(255,255,255,.45);}
.lb-visit.lb-visit--hidden{display:none;}
.lb-controls{display:flex;align-items:center;gap:8px;}
.lb-z-val{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.08em;color:rgba(255,255,255,.3);padding:0 4px;min-width:36px;text-align:center;}
.lb-z-btn{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;font-size:1rem;cursor:none;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.lb-z-btn:hover{background:rgba(255,255,255,.14);}
.lb-close{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.7);font-size:.8rem;cursor:none;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;margin-left:4px;}
.lb-close:hover{background:rgba(255,255,255,.14);color:#fff;}
.lb-scroll{flex:1;overflow-y:auto;overflow-x:auto;min-height:0;}
.lb-scroll::-webkit-scrollbar{width:4px;height:4px;}
.lb-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px;}
#lbImg{display:block;width:100%;height:auto;}
.lb-hint-bar{padding:8px 18px;border-top:1px solid rgba(255,255,255,.05);font-family:var(--font-mono);font-size:.48rem;letter-spacing:.1em;color:rgba(255,255,255,.18);text-transform:uppercase;flex-shrink:0;}

/* ══ CURTAIN FOOTER ══ */
.pg-wrap{position:relative;z-index:2;background:#000;}

.site-footer{
  position:sticky;bottom:0;z-index:1;
  min-height:100vh;background:#0c0c0c;
  display:flex;align-items:center;
  border-top:1px solid rgba(255,255,255,.06);
}
.sf-inner{
  width:100%;max-width:1320px;margin:0 auto;
  padding:clamp(56px,9vh,96px) clamp(24px,5vw,80px) clamp(40px,6vh,64px);
  display:flex;flex-direction:column;gap:clamp(36px,5vh,56px);
}

/* eyebrow */
.sf-eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:clamp(14px,2.5vh,22px);}
.sf-ey-line{display:inline-block;width:36px;height:1px;background:rgba(255,255,255,.18);flex-shrink:0;}

/* big heading */
.sf-head{font-family:var(--font-head);font-weight:900;font-size:clamp(3rem,8.5vw,9rem);letter-spacing:-.055em;line-height:.9;color:#fff;margin-bottom:0;}
.sf-head em{font-style:italic;color:rgba(255,255,255,.28);}

/* separator */
.sf-sep{width:100%;height:1px;background:rgba(255,255,255,.08);flex-shrink:0;}

/* pills row */
.sf-pills{display:flex;align-items:center;gap:clamp(10px,1.5vw,18px);flex-wrap:wrap;}
.sf-pill{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:clamp(.65rem,1vw,.82rem);letter-spacing:.04em;color:rgba(255,255,255,.55);text-decoration:none;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:11px clamp(16px,2vw,26px);transition:color .22s,border-color .22s,background .22s;}
.sf-pill:hover{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);}

/* bottom row */
.sf-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.sf-bottom-left{display:flex;gap:clamp(32px,6vw,72px);flex-wrap:wrap;}
.sf-info-block{display:flex;flex-direction:column;gap:6px;}
.sf-info-label{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.2);}
.sf-info-val{font-family:var(--font-head);font-size:clamp(.8rem,1.1vw,1rem);font-weight:600;color:rgba(255,255,255,.55);}
.sf-bottom-right .sf-info-block{align-items:flex-end;}
.sf-soc-link{font-family:var(--font-head);font-size:clamp(.8rem,1.1vw,1rem);font-weight:600;color:rgba(255,255,255,.38);text-decoration:none;transition:color .2s;}
.sf-soc-link:hover{color:#fff;}

/* ══ MORE PROJECTS MARQUEE ══ */
.mp-section{padding:clamp(70px,11vh,130px) 0 clamp(60px,9vh,100px);border-top:1px solid rgba(255,255,255,.07);overflow:hidden;position:relative;z-index:1;border-radius:0 0 clamp(24px,3vw,48px) clamp(24px,3vw,48px);}
.mp-cta-wrap{display:flex;justify-content:center;margin-bottom:clamp(48px,7vh,80px);}
.mp-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:clamp(.9rem,1.5vw,1.1rem);font-weight:700;letter-spacing:-.01em;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.5);border-radius:var(--r-pill);padding:clamp(14px,1.8vh,18px) clamp(28px,3.5vw,48px);transition:background .25s,color .25s,border-color .25s;}
.mp-cta:hover{background:#fff;color:#000;border-color:#fff;}
.mp-cta-arr{display:inline-block;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.mp-cta:hover .mp-cta-arr{transform:translate(3px,-3px);}

.mp-rows{display:flex;flex-direction:column;gap:clamp(10px,1.5vw,18px);padding-bottom:clamp(60px,9vh,110px);}
.mp-row{overflow:hidden;}
.mp-track{display:flex;gap:clamp(10px,1.5vw,18px);width:max-content;will-change:transform;}
.mp-track--left{animation:mp-left 28s linear infinite;}
.mp-track--right{animation:mp-right 32s linear infinite;}
.mp-row:hover .mp-track{animation-play-state:paused;}
@keyframes mp-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mp-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.mp-track{animation:none!important;}}

.mp-item{width:clamp(320px,32vw,500px);height:clamp(208px,22vw,320px);border-radius:0;overflow:hidden;flex-shrink:0;position:relative;background:#0a0a0a;}
.mp-item img,.mp-item video{width:100%;height:100%;object-fit:cover;display:block;}

/* ══════════════════════════════════════════
   SINGLE PROJECT PAGE
══════════════════════════════════════════ */

/* ── Header ── */
.sp-head{max-width:var(--max);margin:0 auto;padding:clamp(110px,15vh,160px) 48px clamp(44px,6vh,70px);}
.sp-back{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.3);text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:clamp(32px,5vh,56px);transition:color .25s;}
.sp-back:hover{color:rgba(255,255,255,.75);}
.sp-head-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:end;}
.sp-title-col{display:flex;flex-direction:column;gap:clamp(10px,1.5vh,16px);}
.sp-num{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.2);}
.sp-title{font-family:var(--font-head);font-size:clamp(40px,7vw,108px);font-weight:700;line-height:1.0;letter-spacing:-.03em;color:#fff;}
.sp-title em{font-style:italic;color:rgba(255,255,255,.45);}
.sp-desc-col{display:flex;flex-direction:column;gap:clamp(20px,3vh,32px);padding-bottom:0.4em;}
.sp-desc{font-size:clamp(.88rem,1.2vw,1.02rem);color:rgba(255,255,255,.55);line-height:1.75;max-width:480px;}
.sp-hero-visit{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);padding:9px 18px;text-decoration:none;width:fit-content;transition:color .2s,border-color .2s,background .2s;}
.sp-hero-visit:hover{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05);}

/* ── Info Strip ── */
.sp-info-strip{border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:clamp(60px,8vh,100px);}
.sp-info-inner{max-width:var(--max);margin:0 auto;padding:clamp(26px,3.5vh,40px) 48px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,5vw,80px);}
.sp-info-col{display:flex;flex-direction:column;}
.sp-info-label{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:10px;}
.sp-info-sep{width:100%;height:1px;background:rgba(255,255,255,.1);margin-bottom:12px;}
.sp-info-val{font-size:clamp(.78rem,1.05vw,.9rem);color:rgba(255,255,255,.7);line-height:1.6;}

/* ── Feature Image ── */
.sp-feature{max-width:var(--max);margin:0 auto;padding:0 48px;margin-bottom:clamp(60px,8vh,100px);}
.sp-feature-img{width:100%;display:block;border-radius:var(--r-xl);object-fit:cover;}

/* ── MacBook Mockup ── */
.sp-mac-sec{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vh,100px) 48px 0;margin-bottom:clamp(60px,8vh,100px);}
.sp-mac-wrap{position:relative;max-width:900px;margin:0 auto;}
.sp-mac-screen{position:absolute;top:0;left:0;width:100%;z-index:1;overflow:hidden;aspect-ratio:16/10;}
.sp-mac-screen video{width:100%;height:100%;object-fit:cover;display:block;}
.sp-mac-frame{position:relative;z-index:2;width:100%;display:block;pointer-events:none;}

/* ── Fullwidth Video ── */
.sp-laptop-sec{max-width:var(--max);margin:0 auto;padding:0 48px;margin-bottom:clamp(60px,8vh,100px);}
.sp-fullvid{width:100%;display:block;border-radius:var(--r-xl);}

/* ── Responsive Mockup ── */
.sp-responsive{max-width:var(--max);margin:0 auto;padding:0 48px;margin-bottom:clamp(60px,8vh,100px);}
.sp-responsive img{width:100%;display:block;border-radius:var(--r-xl);}

/* ── Gallery ── */
.sp-gallery{max-width:var(--max);margin:0 auto;padding:0 48px;display:flex;flex-direction:column;gap:clamp(24px,3vw,48px);margin-bottom:clamp(80px,10vh,120px);}
.sp-img-row img{width:100%;display:block;border-radius:var(--r-xl);}

/* ── Prev / Next ── */
.sp-nav-row{max-width:var(--max);margin:0 auto;display:flex;align-items:stretch;justify-content:space-between;padding:clamp(36px,5vh,56px) 48px;border-top:1px solid rgba(255,255,255,.07);}
.sp-nav-item{display:flex;flex-direction:column;gap:8px;text-decoration:none;transition:opacity .25s;}
.sp-nav-item:hover{opacity:.6;}
.sp-nav-item--right{align-items:flex-end;}
.sp-nav-dir{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);}
.sp-nav-name{font-family:var(--font-head);font-size:clamp(1.1rem,2.5vw,1.7rem);font-weight:700;color:#fff;letter-spacing:-.02em;}

/* ── Responsive breakpoints ── */
@media(max-width:860px){
  .sp-head{padding-left:24px;padding-right:24px;}
  .sp-head-grid{grid-template-columns:1fr;}
  .sp-info-inner{padding-left:24px;padding-right:24px;grid-template-columns:repeat(2,1fr);}
  .sp-feature,.sp-mac-sec,.sp-laptop-sec,.sp-responsive,.sp-gallery,.sp-nav-row{padding-left:24px;padding-right:24px;}
}
@media(max-width:560px){
  .sp-head{padding-left:16px;padding-right:16px;}
  .sp-info-inner{padding-left:16px;padding-right:16px;grid-template-columns:1fr;}
  .sp-feature,.sp-mac-sec,.sp-laptop-sec,.sp-responsive,.sp-gallery,.sp-nav-row{padding-left:16px;padding-right:16px;}
}