@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=Barlow+Condensed:wght@300;400;500;600;700;800;900&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#050505;--blue:#1a3fd4;
  --white:#f2f0ea;--white2:#cfd3d8;--white3:#9aa0a8;
  --gray:#8a8880;--gb:rgba(255,255,255,0.1);
  --glass:rgba(255,255,255,0.04);
}

html,body{min-height:100%;background:var(--bg);font-family:'Barlow',sans-serif;}html{overflow-x:clip;}

/* STROKE TRIANGLE CURSOR — tip bottom-left */
#cur{
  position:fixed;pointer-events:none;z-index:9999;
  transform:translate(-3px,-1px);
}
@media(hover:none),(pointer:coarse){#cur{display:none!important;}}
#cur svg{
  width:36px;height:39px;
  filter:drop-shadow(0 0 6px rgba(26,63,212,0.7)) drop-shadow(0 0 14px rgba(26,63,212,0.35));
}

#bgCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}

/* HEADER — oversized brand block, MAMBO blue */
header{position:fixed;top:0;left:0;z-index:100;padding:28px 0 0 28px;width:min(330px,23vw);}
.brand-block{display:flex;flex-direction:column;align-items:flex-start;width:100%;}
.logo-center{display:flex;align-items:flex-start;margin-bottom:18px;width:100%;justify-content:flex-start;}
.logo-center svg{width:min(198px,14.1vw);height:auto;color:#1a3fd4;display:block;}
.brand-nav{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;width:min(280px,20vw);padding:22px 0 26px;isolation:isolate;}
.brand-nav-panel{position:absolute;z-index:0;pointer-events:none;left:-42px;top:-34px;width:300px;height:410px;opacity:.94;
background:
radial-gradient(ellipse at 30% 15%,rgba(96,132,255,.48) 0%,rgba(26,63,212,.30) 24%,rgba(26,63,212,.12) 48%,transparent 70%),
radial-gradient(ellipse at 62% 48%,rgba(26,63,212,.28) 0%,rgba(26,63,212,.12) 42%,transparent 72%),
linear-gradient(180deg,rgba(26,63,212,.22) 0%,rgba(26,63,212,.12) 46%,rgba(26,63,212,.03) 78%,transparent 100%);
filter:blur(30px);border-radius:42% 58% 47% 53%/12% 18% 82% 88%;transform:rotate(-4deg);}
.brand-nav-panel::before{content:'';position:absolute;left:8px;top:-14px;width:120px;height:430px;background:linear-gradient(180deg,rgba(70,105,240,.24),rgba(26,63,212,.16) 54%,transparent 100%);filter:blur(42px);border-radius:58% 42% 62% 38%/10% 14% 86% 90%;}
.brand-nav-panel::after{content:'';position:absolute;right:-12px;top:52px;width:116px;height:330px;background:linear-gradient(180deg,rgba(126,160,255,.10),rgba(26,63,212,.17) 44%,transparent 100%);filter:blur(46px);border-radius:46% 54% 38% 62%/16% 22% 78% 84%;}
.nav-a{position:relative;z-index:1;font-family:'Barlow Condensed','Barlow',sans-serif;font-size:clamp(42px,3.2vw,60px);font-weight:300;letter-spacing:-1.0px;line-height:.90;text-transform:uppercase;color:#fff;background:none;border:none;cursor:pointer;transition:opacity .2s,transform .25s cubic-bezier(.22,1,.36,1);text-decoration:none;text-align:left;padding:0;margin:0 0 7px;text-shadow:0 1px 10px rgba(0,0,0,.12);}
.nav-a:last-child{margin-bottom:0;}
.nav-a:hover{color:#fff;opacity:.72;transform:translateX(8px);}

.page{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1;}

/* PHOTO LAYOUT */
.photo-grid{padding:40px 52px;display:flex;flex-direction:column;gap:6px;}
.photo-row{cursor:pointer;overflow:hidden;position:relative;}
.photo-row img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform 0.4s ease;filter:grayscale(20%);}
.photo-row:hover img{transform:scale(1.02);filter:grayscale(0%);}
.photo-full{height:60vw;max-height:700px;}
.photo-half-wrap{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.photo-half{height:40vw;max-height:500px;overflow:hidden;cursor:pointer;}
.photo-half img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 0.4s ease;filter:grayscale(20%);}
.photo-half:hover img{transform:scale(1.02);filter:grayscale(0%);}
.photo-third-wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.photo-third{height:28vw;max-height:380px;overflow:hidden;cursor:pointer;}
.photo-third img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 0.4s ease;filter:grayscale(20%);}
.photo-third:hover img{transform:scale(1.02);filter:grayscale(0%);}

/* PHOTO LIGHTBOX */
.photo-light{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.photo-light.on{opacity:1;pointer-events:all;}
.photo-light img{max-width:90vw;max-height:90vh;object-fit:contain;}
.photo-light-close{position:absolute;top:24px;right:32px;color:rgba(255,255,255,0.6);font-size:13px;font-weight:600;letter-spacing:2px;cursor:pointer;font-family:'Barlow',sans-serif;}
.photo-light-close:hover{color:#fff;}


/* FOOTER */
footer{margin-top:52px;padding:40px 52px 32px;position:relative;z-index:2;}
.footer-top{display:flex;gap:60px;margin-bottom:32px;flex-wrap:wrap;}
.footer-addr-block{}
.footer-addr{
  font-family:'Barlow',sans-serif;
  font-size:15px;font-weight:400;letter-spacing:0.3px;
  color:rgba(255,255,255,0.6);line-height:1.9;
}
.footer-addr a{color:rgba(255,255,255,0.55);text-decoration:none;transition:color 0.2s;display:block;}
.footer-addr a:hover{color:var(--blue);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;
}
.footer-copy{font-family:'Barlow',sans-serif;font-size:15px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.4);}
.footer-sns{display:flex;gap:20px;}
.footer-sns a{
  font-family:'Barlow',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.2s;
}
.footer-sns a:hover{color:var(--blue);}

/* OVERLAYS */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(5,5,5,0.72);backdrop-filter:blur(20px);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.overlay.hidden{opacity:0!important;pointer-events:none!important;}
.overlay:not(.hidden){opacity:1;pointer-events:all;}
.overlay-header{padding:24px 52px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--gb);}
.overlay-title{font-family:'Barlow',sans-serif;font-size:13px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.5);}
.close-btn{font-family:'Barlow',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gray);background:none;border:none;cursor:pointer;transition:color 0.2s;}
.close-btn:hover{color:var(--white);}
.overlay-body{flex:1;overflow-y:auto;padding:40px 52px;scrollbar-width:thin;}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.work-card{background:#0d0d0d;border:none;border-top:2px solid var(--blue);border-radius:0;overflow:hidden;cursor:pointer;text-decoration:none;display:block;transition:all 0.3s;}
.work-card:hover{transform:translateY(-4px);}.work-card:hover .work-thumb img{filter:grayscale(0%);}
.work-thumb{background:rgba(255,255,255,0.06);aspect-ratio:2.2/1;height:auto;overflow:hidden;position:relative;}
.work-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter 0.4s ease;}
.work-cat{position:absolute;top:10px;left:10px;font-family:'Barlow',sans-serif;font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:white;background:rgba(20,0,255,0.6);padding:4px 8px;border-radius:3px;}
.work-info{padding:12px 14px;}
.work-info{padding:14px 0 8px;}.work-title{font-family:'Barlow',sans-serif;font-size:16px;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:1.5px;line-height:1.4;}
.work-client{font-family:'Barlow',sans-serif;font-size:16px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-top:5px;}
.about-h{font-family:'Barlow Condensed',sans-serif;font-size:clamp(40px,7vw,96px);font-weight:900;letter-spacing:-1px;color:var(--white);line-height:1.0;margin-bottom:32px;}
.about-h span{color:var(--blue);}
.about-body{font-family:'Barlow',sans-serif;font-size:16px;font-weight:400;color:var(--white2);line-height:1.8;max-width:520px;}
.about-body strong{color:var(--white);font-weight:600;}
.about-info{margin-top:40px;display:flex;gap:48px;flex-wrap:wrap;}
.ai-label{font-family:'Barlow',sans-serif;font-size:8px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(100,90,160,0.6);margin-bottom:8px;}
.ai-text{font-family:'Barlow',sans-serif;font-size:14px;font-weight:400;color:var(--white2);line-height:1.8;}
.info-a{color:var(--white2);text-decoration:none;display:block;transition:color 0.2s;}
.info-a:hover{color:var(--blue);}
.sns-row{display:flex;gap:20px;margin-top:4px;}
.sns-link{font-family:'Barlow',sans-serif;font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gray);text-decoration:none;transition:color 0.2s;border-bottom:1px solid transparent;padding-bottom:2px;}
.sns-link:hover{color:var(--white);border-bottom-color:var(--blue);}
.hidden{display:none!important;}

/* ABOUT PAGE */
#aboutPanel{
  background:rgba(5,5,5,0.72);
  overflow-y:auto;
  backdrop-filter:blur(20px);
}
.about-close-row{
  position:fixed;top:28px;right:52px;z-index:10;
}
#aboutPanel .close-btn{
  font-size:13px;font-weight:600;letter-spacing:2px;
  color:rgba(255,255,255,0.5);
  transition:color 0.2s;
}
#aboutPanel .close-btn:hover{color:var(--white);}
.about-content{
  min-height:100vh;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:100px 52px 80px;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}
.about-ko{
  display:flex;flex-direction:column;gap:0;
  margin-bottom:60px;
}
.about-line-wrap{display:none;}
.about-block-ko{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,3.4vw,50px);
  font-weight:700;
  letter-spacing:-0.5px;
  line-height:1.25;
  color:#1a3fd4;
  margin:0 0 28px 0;padding:0;
  text-align:left;
}
.about-block-ko:last-of-type{margin-bottom:0;}
.about-block-en{
  font-family:'Barlow',sans-serif;
  font-size:clamp(14px,1.9vw,28px);
  font-weight:300;
  letter-spacing:0.2px;
  line-height:1.5;
  color:rgba(255,255,255,0.55);
  margin:0 0 20px 0;padding:0;
  text-align:left;
}
.about-block-en:last-of-type{margin-bottom:0;}

.about-divider{
  width:100%;height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.03) 100%);
  margin-bottom:48px;
  opacity:0;transition:opacity 0.8s ease;
}
.about-divider.visible{opacity:1;}

.about-en{
  display:flex;flex-direction:column;gap:0;
  margin-bottom:80px;
}
.about-line-en{
  font-family:'Barlow',sans-serif;
  font-size:clamp(14px,1.9vw,28px);
  font-weight:300;
  letter-spacing:0.2px;
  line-height:1.5;
  color:rgba(255,255,255,0.55);
  display:block;
  margin:0;padding:0;
}

.about-footer-info{
  display:flex;gap:52px;align-items:flex-start;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:36px;
  opacity:0;transform:translateY(20px);
  transition:opacity 0.8s ease,transform 0.8s ease;
}
.about-footer-info.visible{opacity:1;transform:translateY(0);}
.about-addr{
  font-family:'Barlow',sans-serif;
  font-size:13px;font-weight:400;letter-spacing:0.3px;
  color:rgba(255,255,255,0.55);line-height:1.4;
}
.about-addr a{
  color:rgba(255,255,255,0.55);text-decoration:none;
  display:block;margin:0;padding:0;
  transition:color 0.2s;
}
.about-addr a:hover{color:var(--blue);}

/* VIDEO MODAL */
.video-modal{
  position:fixed;inset:0;z-index:300;
  background:rgba(2,5,15,0.95);
  backdrop-filter:blur(20px);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s;
}
.video-modal.open{opacity:1;pointer-events:all;}
.video-modal-inner{
  width:90%;max-width:1100px;
  position:relative;
}
.video-modal-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;
}
.video-modal-title{
  font-family:'Barlow',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--white2);
}
.video-modal-client{
  font-family:'Barlow',sans-serif;
  font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  color:var(--gray);margin-left:12px;
}
.video-modal-close{
  font-family:'Barlow',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
  color:var(--gray);background:none;border:none;cursor:pointer;
  transition:color 0.2s;
}
.video-modal-close:hover{color:var(--white);}
.video-modal-close{-webkit-tap-highlight-color:transparent;}
.video-wrap{
  position:relative;padding-bottom:56.25%;height:0;
  border-radius:12px;overflow:hidden;
  box-shadow:0 0 80px rgba(20,0,255,0.2);
  border:1px solid rgba(255,255,255,0.08);
}
.video-wrap iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;
  border:none;border-radius:12px;
}

@media(max-width:960px){
  header{
    padding:20px 0 0 24px;
    position:fixed;
    top:0;left:0;right:auto;
  }
  .logo-center svg{width:126px;}
  .brand-nav{width:190px;padding:14px 0 18px;}
  .brand-nav-panel{left:-20px;top:-16px;width:220px;height:240px;filter:blur(20px);}
  .nav-a{font-size:26px;font-weight:300;letter-spacing:-0.3px;line-height:.94;}
  .overlay-header{padding:16px 20px;min-height:56px;position:relative;display:flex;align-items:center;}
  .close-btn{position:absolute;top:16px;right:20px;transform:none;}
  .overlay-body{padding:32px 20px 40px;}
  .about-block-ko{font-size:26px;line-height:1.4;}
  .about-divider{margin:28px 0;opacity:1;}
  .about-block-en{font-size:14px;line-height:1.7;}
  footer{padding:32px 20px 24px;}
  .footer-top{gap:32px;}
}

/* MAMBO / orbital scene — viewport-bound, no scrolling footer band. */
html,body{width:100%;height:100%;overflow:hidden;background:#030409;color:#f2f0ea;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 65% 55%,#0a1231 0%,transparent 57%),radial-gradient(ellipse at 5% 70%,#080d24,transparent 40%);}
.page{min-height:0;height:100svh;height:100dvh;}
header{width:23vw;max-width:330px;pointer-events:none;}
header button,header a{pointer-events:auto;}
.brand-nav-panel{opacity:.6;}
.showcase-outer{position:absolute;inset:0;z-index:1;}
.showcase-stage{position:absolute;left:22%;right:1.5%;top:3%;bottom:68px;overflow:visible;touch-action:pan-y;}
#sceneCanvas{display:block;width:100%;height:100%;outline:0;opacity:0;transition:opacity .6s;touch-action:pan-y;cursor:grab;}
#sceneCanvas:active{cursor:grabbing;}
.scene-ready #sceneCanvas{opacity:1;}
.scene-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;font-size:18px;font-weight:500;line-height:1;letter-spacing:2.2px;color:#c4ceeb;transition:opacity .35s;pointer-events:none;}
.scene-loading span{display:block;color:#7885aa;font-size:12px;font-weight:400;line-height:1;letter-spacing:2px;}
.scene-ready .scene-loading{opacity:0;}
:focus-visible{outline:1px solid #87a2ff!important;outline-offset:5px;}
.home-footer{position:fixed;left:28px;right:28px;bottom:max(20px,env(safe-area-inset-bottom));padding:0;margin:0;z-index:4;display:grid;grid-template-columns:max-content max-content max-content 1fr;align-items:end;gap:52px;pointer-events:none;font-size:12px;line-height:1.45;letter-spacing:.2px;color:rgba(255,255,255,.55);}
.home-footer-address{display:flex;flex-direction:column;}
.home-footer-contact{display:flex;flex-direction:column;}
.home-footer a{pointer-events:auto;color:rgba(255,255,255,.55);text-decoration:none;font-size:12px;letter-spacing:.1px;transition:color .2s;}
.home-footer a:hover{color:#1a3fd4;}
.home-footer-instagram{align-self:start;}
.home-footer-copy{text-align:right;letter-spacing:1px;}
.about-block-en{color:#1a3fd4;}
.scene-access{position:absolute;left:12px;top:12px;z-index:8;}
.scene-access button{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.scene-access button:focus{position:relative;display:block;width:auto;height:auto;clip-path:none;padding:12px;background:#091a45;color:#fff;border:1px solid #748fff;}
.scene-fallback{position:absolute;inset:8% 4%;overflow:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:center;}
.scene-fallback:not([hidden]){display:grid;}
.scene-fallback button{background:#0b1020;color:#eee;border:1px solid #25304d;text-align:left;cursor:pointer;padding:0;}
.scene-fallback img{width:100%;aspect-ratio:1.58;object-fit:cover;display:block;}
.scene-fallback span{display:block;padding:10px;font:12px 'Barlow',sans-serif;}
.overlay{background:rgba(3,4,9,.95);backdrop-filter:none;}
.overlay.hidden,.video-modal.hidden{visibility:hidden;}
.video-modal{background:rgba(3,4,9,.96);backdrop-filter:none;}
.video-wrap,.video-wrap iframe{border-radius:2px;}
.video-modal-inner{max-height:90dvh;}
.video-wrap{padding:0;height:auto;aspect-ratio:16/9;max-height:75dvh;}
.work-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:960px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.photo-grid{padding:15px 0;}.home-footer{left:20px;right:20px;gap:26px;font-size:10px;}.home-footer a{font-size:10px;}}
@media(max-width:600px) and (orientation:portrait){
 header{padding:18px 0 0 18px;width:100%;max-width:none;}
 .logo-center svg{width:84px;}.logo-center{margin-bottom:13px;}
 .brand-nav{padding:0;width:180px;}.nav-a{font-size:23px;margin-bottom:5px;}
 .brand-nav-panel{width:180px;height:190px;top:-60px;}
 .showcase-stage{left:0;right:0;top:23%;bottom:84px;}

 .scene-loading{font-size:16px;gap:6px;}.scene-loading span{font-size:11px;}
 .home-footer{left:18px;right:18px;bottom:max(10px,env(safe-area-inset-bottom));grid-template-columns:1fr auto auto;gap:4px 14px;font-size:9px;line-height:1.3;} .home-footer-address{grid-column:1/-1;} .home-footer-contact{grid-column:1;flex-direction:row;gap:14px;} .home-footer a{font-size:9px;} .home-footer-instagram{grid-column:2;align-self:end;} .home-footer-copy{grid-column:3;text-align:right;align-self:end;}
 .overlay-body{padding:24px 16px;}.work-title{font-size:13px;}.work-client{font-size:11px;}
}
@media(orientation:landscape) and (max-height:600px){
 header{padding:14px 0 0 max(16px,env(safe-area-inset-left));width:21%;}
 .logo-center svg{width:clamp(49px,13vh,78px);}.logo-center{margin-bottom:10px;}
 .brand-nav{padding:0;width:auto;}.nav-a{font-size:clamp(16px,4.8vh,26px);line-height:1;margin-bottom:5px;}
 .brand-nav-panel{width:155px;height:170px;top:-30px;opacity:.42;}
 .showcase-stage{left:20%;right:3%;top:4px;bottom:42px;}
 .scene-loading{font-size:15px;gap:5px;}.scene-loading span{font-size:10px;}
 .home-footer{bottom:max(7px,env(safe-area-inset-bottom));left:16px;right:18px;grid-template-columns:minmax(210px,1fr) auto auto auto;gap:12px;font-size:8.5px;line-height:1.2;} .home-footer-contact{flex-direction:column;} .home-footer a{font-size:8.5px;} .home-footer-copy{text-align:right;}
 .video-modal-inner{width:min(88vw,130vh);}.video-wrap{max-height:70dvh;}
}
@media(pointer:coarse){.video-modal-close:focus,.video-modal-close:focus-visible{outline:none!important;box-shadow:none!important;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;}}
[hidden]{display:none!important;}