html{scroll-behavior:smooth;}
*{margin:0;padding:0;box-sizing:border-box;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
html,body{height:100%;font-family:'Segoe UI',system-ui,sans-serif;background:#0a0a0a;color:#fff;}

/* ═══ INTRO ═══ */
#intro{
  position:fixed;inset:0;z-index:999;
  background:#0a0a0a;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* Two curtain panels for split reveal */
.intro-curtain-left,
.intro-curtain-right{
  position:absolute;top:0;bottom:0;
  width:50%;background:#0a0a0a;z-index:2;
  transition:transform 1.1s cubic-bezier(0.76,0,0.24,1);
  will-change:transform;
}
.intro-curtain-left{left:0;}
.intro-curtain-right{right:0;}
#intro.split .intro-curtain-left{transform:translateX(-100%);}
#intro.split .intro-curtain-right{transform:translateX(100%);}

/* Logo centred on top of curtains */
.intro-logo-wrap{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;transform:scale(0.88);
  transition:opacity .7s ease .15s, transform .7s cubic-bezier(0.34,1.56,0.64,1) .15s;
}
.intro-logo-wrap.show{opacity:1;transform:scale(1);}
.intro-logo-wrap img{
  height:clamp(140px,22vw,280px);width:auto;object-fit:contain;
  filter:drop-shadow(0 4px 48px rgba(255,255,255,0.18));
  transform:scale(1.18);
  transition:transform 2.8s cubic-bezier(0.25,0.46,0.45,0.94),
             opacity 1.1s ease;
}
.intro-logo-wrap.show img{transform:scale(1);}



/* Vignette overlay behind curtains so homepage shows through */
.intro-bg-reveal{
  position:absolute;inset:0;z-index:0;
  background:#0a0a0a;
}

/* ═══ SITE ═══ */
#site{opacity:0;}
#intro.done{display:none;}

/* ═══ NAV — 3D LAMP ═══ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;transition:background .7s ease;background:#111;
  height:80px;
}
.nav-brand{display:flex;align-items:center;text-decoration:none;padding:4px 0;flex-shrink:0;}
.nav-brand img{height:72px;width:auto;object-fit:contain;}
.nav-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;}
.nav-brand span{color:var(--nav-accent,#e2b96f);transition:color .7s;}
.nav-list{display:flex;list-style:none;position:relative;margin:0;padding:0;}
.hori-selector{
  position:absolute;height:100%;top:0;left:0;
  transition:left .5s cubic-bezier(0.68,-0.55,0.265,1.55),width .5s cubic-bezier(0.68,-0.55,0.265,1.55);
  background:#fff;border-radius:12px 12px 0 0;margin-top:8px;pointer-events:none;z-index:0;
}
.hori-selector .left,.hori-selector .right{position:absolute;width:22px;height:22px;background:#fff;bottom:0;}
.hori-selector .right{right:-22px;}
.hori-selector .left{left:-22px;}
.hori-selector .right::before,.hori-selector .left::before{
  content:'';position:absolute;width:44px;height:44px;border-radius:50%;
  background:var(--nav-bg,#111);transition:background .7s ease;
}
.hori-selector .right::before{bottom:0;right:-22px;}
.hori-selector .left::before{bottom:0;left:-22px;}
.nav-list li{position:relative;z-index:1;}
.nav-list li a{
  display:flex;align-items:center;gap:6px;color:rgba(255,255,255,0.45);text-decoration:none;
  font-size:.72rem;font-weight:600;padding:17px 13px;transition:color .4s;white-space:nowrap;
  cursor:pointer;letter-spacing:.5px;text-transform:uppercase;
}
.nav-list li.active a{color:var(--nav-bg,#111);filter:brightness(0.2);}

/* ── Aperture / Lens Hamburger ── */
.hamburger{
  display:none;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  border:none;cursor:pointer;z-index:200;
  background:transparent;position:relative;padding:0;
  transition:transform .4s cubic-bezier(0.23,1,0.32,1);
}
.hamburger::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(200,169,126,0.35);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.hamburger::after{
  content:'';position:absolute;inset:7px;border-radius:50%;
  border:1px solid rgba(200,169,126,0.15);
  transition:border-color .3s ease;
}
.hamburger:hover::before{border-color:rgba(200,169,126,0.7);box-shadow:0 0 16px rgba(200,169,126,0.2);}
.hamburger:hover::after{border-color:rgba(200,169,126,0.35);}
.hamburger.open{transform:rotate(90deg);}
.hamburger.open::before{border-color:rgba(200,169,126,0.8);box-shadow:0 0 20px rgba(200,169,126,0.25);}
.hamburger .lines{display:flex;flex-direction:column;gap:5px;align-items:center;}
.hamburger .lines span{
  display:block;height:1.5px;border-radius:2px;
  background:rgba(200,169,126,0.75);
  transition:transform .38s cubic-bezier(0.23,1,0.32,1),opacity .25s ease,width .3s ease,background .25s ease;
}
.hamburger .lines span:nth-child(1){width:20px;}
.hamburger .lines span:nth-child(2){width:14px;align-self:flex-start;margin-left:3px;}
.hamburger .lines span:nth-child(3){width:20px;}
.hamburger:hover .lines span{background:rgba(200,169,126,1);}
.hamburger.open .lines span:nth-child(1){transform:translateY(6.5px) rotate(45deg);width:20px;background:#c8a97e;}
.hamburger.open .lines span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open .lines span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:20px;background:#c8a97e;}
.mobile-menu{
  display:none;position:fixed;inset:0;top:calc(64px + env(safe-area-inset-top,0px));background:#0a0a0a;z-index:99;
  flex-direction:column;align-items:center;justify-content:center;gap:0;
}
.mobile-menu.open{display:flex;}
.mobile-menu li{list-style:none;width:100%;text-align:center;}
.mobile-menu li+li{border-top:1px solid rgba(200,169,126,0.08);width:60%;margin:0 auto;}
.mobile-menu li a{
  display:block;padding:18px 0;
  font-family:'Playfair Display',serif;
  color:rgba(255,255,255,0.45);font-size:clamp(1.5rem,6vw,2.2rem);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:color .2s ease,letter-spacing .3s ease;line-height:1;
}
.mobile-menu li a:hover,.mobile-menu li.active a{color:#e2b96f;letter-spacing:.2em;}
/* stagger fade-in */
.mobile-menu li{opacity:0;transform:translateY(14px);}
.mobile-menu.open li{animation:mItemIn .45s cubic-bezier(0.23,1,0.32,1) forwards;}
.mobile-menu.open li:nth-child(1){animation-delay:.12s;}
.mobile-menu.open li:nth-child(2){animation-delay:.19s;}
.mobile-menu.open li:nth-child(3){animation-delay:.26s;}
.mobile-menu.open li:nth-child(4){animation-delay:.33s;}
.mobile-menu.open li:nth-child(5){animation-delay:.40s;}
.mobile-menu.open li:nth-child(6){animation-delay:.47s;}
@keyframes mItemIn{to{opacity:1;transform:translateY(0);}}
/* menu background video */
.menu-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;pointer-events:none;
  transition:opacity .6s ease;
  z-index:0;
}
.menu-video.visible{opacity:0.45;}
.mobile-menu li{position:relative;z-index:1;}

/* ═══ FULL-PAGE SECTIONS ═══ */
.section{
  position:fixed;top:0;left:0;right:0;
  height:100vh;height:100dvh; /* dvh = stvarna vidljiva visina na iOS Safari */
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  text-align:center;padding:72px 24px 100px;
  padding-bottom:max(100px, env(safe-area-inset-bottom, 0px) + 80px);
  opacity:0;pointer-events:none;
  transition:opacity .7s ease,transform .7s ease;
  transform:translateY(20px);overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.section.active{opacity:1;pointer-events:all;transform:translateY(0);}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.section.active>*{animation:fadeUp .6s ease both;}
.section.active>*:nth-child(2){animation-delay:.1s}
.section.active>*:nth-child(3){animation-delay:.2s}
.section.active>*:nth-child(4){animation-delay:.3s}
.section.active>*:nth-child(5){animation-delay:.4s}

/* Override section defaults for home hero */
#home{
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:0 !important;
  overflow-y:auto !important;
}
/* Disable the generic fadeUp on home children — we handle it ourselves */
#home.active>*{animation:none !important;}

/* HOME */
/* ═══ CINEMATIC HERO ═══ */
#home{
  background:#050505;
  overflow-y:auto;
  justify-content:center;
  padding-bottom:0;
  align-items:center;
}

/* Film grain — CSS-only, GPU composited, zero JS/TBT */
#home-canvas{ display:none; }

#home::after{
  content:'';
  position:absolute;inset:-10%;
  width:120%;height:120%;
  pointer-events:none;z-index:1;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:grain-shift .8s steps(1) infinite;
  will-change:transform;
}
@keyframes grain-shift{
  0%  {transform:translate(0,0);}
  11% {transform:translate(-4%,-8%);}
  22% {transform:translate(6%,3%);}
  33% {transform:translate(-7%,5%);}
  44% {transform:translate(3%,-6%);}
  55% {transform:translate(-5%,8%);}
  66% {transform:translate(7%,-3%);}
  77% {transform:translate(-3%,6%);}
  88% {transform:translate(5%,-5%);}
}
@media(max-width:768px){#home::after{display:none;}}

/* #home::before removed — video bg handles depth */

/* Hero content wrapper */
.hero-content{
  position:relative;z-index:2;
  width:100%;max-width:860px;
  padding:0 2rem;
  text-align:center;
  display:flex;flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
}

/* Eyebrow */
.home-eyebrow{
  color:#fff;
  font-size:clamp(.85rem,2vw,1.1rem);
  letter-spacing:.9em;
  text-transform:uppercase;
  font-weight:300;
  text-align:center;
  margin-bottom:1.8rem;
  opacity:0;
  transition:opacity 1.4s ease, letter-spacing 1.8s cubic-bezier(0.16,1,0.3,1);
}
.home-eyebrow.in{
  opacity:1;
  letter-spacing:.35em;
}

/* Headline */
#home h1{
  font-size:clamp(2.8rem,7vw,6rem);
  font-weight:900;color:#fff;
  line-height:1.0;letter-spacing:-3px;
  margin-bottom:1.6rem;
  opacity:0;transform:translateY(22px);
  transition:opacity .9s ease .15s, transform .9s cubic-bezier(0.22,1,0.36,1) .15s;
}
#home h1.in{opacity:1;transform:translateY(0);}
#home h1 em{font-style:normal;color:#e2b96f;}

/* Sub text */
#home p{
  color:rgba(255,255,255,0.35);
  font-size:.88rem;max-width:420px;
  margin:0 auto 2rem;line-height:1.95;text-align:center;
  opacity:0;transform:translateY(16px);
  transition:opacity .8s ease .35s, transform .8s ease .35s;
}
#home p.in{opacity:1;transform:translateY(0);}

/* Hero title */
.hero-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(3.5rem,9vw,7.5rem);
  font-weight:700;
  color:#fff;
  line-height:1.0;
  letter-spacing:-2px;
  margin:.4rem 0 .6rem;
  opacity:0;transform:translateY(22px);
  transition:opacity .9s ease .15s, transform .9s cubic-bezier(0.22,1,0.36,1) .15s;
}
.hero-title.in{opacity:1;transform:translateY(0);}
.hero-title em{font-style:italic;color:#e2b96f;}

/* CTAs */
.home-btns{
  display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;
  margin-bottom:3.5rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease .5s, transform .8s ease .5s;
}
.home-btns.in{opacity:1;transform:translateY(0);}

.btn-gold{
  background:#e2b96f;color:#0a0a0a;border:none;
  padding:.75rem 2rem;border-radius:4px;
  font-size:.72rem;font-weight:800;cursor:pointer;
  letter-spacing:.08em;text-transform:uppercase;
  transition:all .22s;text-decoration:none;
  display:inline-block;
}
.btn-gold:hover{background:#f0ce92;transform:translateY(-2px);}

.btn-ghost{
  background:transparent;
  color:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.15);
  padding:.75rem 2rem;border-radius:4px;
  font-size:.72rem;font-weight:600;cursor:pointer;
  letter-spacing:.08em;text-transform:uppercase;
  transition:all .22s;text-decoration:none;
  display:inline-block;
}
.btn-ghost:hover{border-color:#e2b96f;color:#e2b96f;}

/* Stats bar */
.home-stats{
  display:flex;gap:0;justify-content:center;
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:1.8rem;
  opacity:0;transform:translateY(10px);
  transition:opacity .8s ease .65s, transform .8s ease .65s;
}
.home-stats.in{opacity:1;transform:translateY(0);}

.stat{
  text-align:center;
  padding:0 2.5rem;
  border-right:1px solid rgba(255,255,255,0.07);
}
.stat:last-child{border-right:none;}
.stat-num{font-size:2rem;font-weight:900;color:#e2b96f;letter-spacing:-1.5px;line-height:1;}
.stat-lbl{font-size:.6rem;color:rgba(255,255,255,0.25);letter-spacing:.2em;text-transform:uppercase;margin-top:4px;}

/* ═══ ABOUT ═══ */
#about{
  padding:0 !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  background:#0a0a0a;
  isolation:isolate;
  z-index:60;
}
/* Dark backdrop so video never bleeds through on any device */
#about::before{
  content:'';
  position:absolute;inset:0;
  background:#0a0a0a;
  z-index:-1;
}

/* About video zoom animation — same as hero */
.about-video-wrap video{
  width:100%;height:100%;
  object-fit:cover;display:block;
  animation:videoZoom 24s ease-in-out infinite alternate;
}

/* TOP: video */
.about-video-wrap{
  position:relative;
  width:100%;
  height:44vh;
  min-height:200px;
  flex-shrink:0;
  overflow:hidden;
}
.about-video-wrap video{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.about-video-wrap::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(5,5,5,0) 40%,
    rgba(5,5,5,0.6) 75%,
    rgba(10,10,10,1) 100%
  );
  pointer-events:none;
}

/* BOTTOM: text */
.about-text-wrap{
  flex:1;
  background:#0a0a0a;
  padding:1.4rem 2rem 5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.6rem;
  overflow:visible;
  width:100%;
  box-sizing:border-box;
}
.about-eyebrow{
  font-size:clamp(.85rem,1.4vw,1.05rem);
  font-weight:600;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:#e2b96f;
  text-align:center;
  width:100%;
}
.about-divider{
  width:56px;height:1px;
  background:linear-gradient(to right,transparent,#e2b96f,transparent);
}
/* ── SPLIT TEXT ── */
.split-text-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  width:100%;
}

.st-left{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(1.2rem, 2.8vw, 2.2rem);
  font-weight:300;
  font-style:italic;
  color:rgba(255,255,255,0.72);
  white-space:nowrap;
  letter-spacing:-.01em;
  line-height:1;
}

.st-right{
  position:relative;
  overflow:hidden;
  height:clamp(1.4rem, 3.4vw, 2.7rem);
  display:flex;
  align-items:center;
  width:max-content;
  min-width:min(520px, 80vw);
  flex-shrink:1;
}

.st-track{
  position:relative;
  width:100%;
  height:100%;
}

.st-word{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;

  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(1.2rem, 2.8vw, 2.2rem);
  font-weight:600;
  font-style:normal;
  color:#e2b96f;
  white-space:nowrap;
  letter-spacing:-.02em;
  line-height:1;

  /* start below, invisible */
  transform:translateY(110%);
  opacity:0;
  transition:
    transform .65s cubic-bezier(0.22,1,0.36,1),
    opacity   .45s ease;
}

/* slide in from below */
.st-word.active{
  transform:translateY(0);
  opacity:1;
}

/* slide out upward */
.st-word.exit{
  transform:translateY(-110%);
  opacity:0;
  transition:
    transform .5s cubic-bezier(0.55,0,1,0.45),
    opacity   .35s ease;
}

/* underline accent on active word */
.st-word.active::after{
  content:'';
  position:absolute;
  bottom:-4px; left:0;
  width:100%; height:2px;
  background:linear-gradient(to right,#e2b96f,transparent);
  border-radius:2px;
  animation:lineIn .6s ease .3s both;
}
@keyframes lineIn{
  from{transform:scaleX(0);transform-origin:left;}
  to{transform:scaleX(1);transform-origin:left;}
}

/* ── ABOUT MOBILE ── */
@media(max-width:700px){
  .about-eyebrow,
  .about-divider{ display:none !important; }
  #about{
    overflow:hidden !important;
    flex-direction:column !important;
    height:100dvh !important;
  }
  .about-video-wrap{
    height:50dvh !important;
    flex:0 0 50dvh !important;
    min-height:0 !important;
  }
  .about-text-wrap{
    position:relative !important;
    top:auto !important;
    transform:none !important;
    overflow:hidden !important;
    flex:0 0 50dvh !important;
    height:50dvh !important;
    padding:1.2rem 1.5rem !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:.7rem;
    text-align:center;
  }
  .about-text-wrap p{ font-size:clamp(.95rem,4vw,1.2rem); }
  .split-text-wrap{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    width:100%;
  }
  .st-left{
    font-size:clamp(1.4rem,7.5vw,2.1rem);
    text-align:center;
    white-space:nowrap;
  }
  .st-right{
    height:clamp(1.7rem,9vw,2.6rem);
    width:100%;
    justify-content:center;
    min-width:0;
    overflow:hidden;
  }
  .st-word{
    font-size:clamp(1.4rem,7.5vw,2.1rem);
    justify-content:center;
    text-align:center;
    width:100%;
  }
  .gear{ gap:.35rem; justify-content:center; }
  .gear-item{ font-size:.6rem; padding:.18rem .5rem; }
}

.gear{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;}
.gear-item{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);color:rgba(255,255,255,0.45);padding:.2rem .6rem;border-radius:4px;font-size:.66rem;letter-spacing:.04em;transition:all .2s;cursor:default;}
.gear-item:hover{border-color:rgba(226,185,111,0.4);color:#e2b96f;}

/* ═══ SERVICES (scrollable section) ═══ */
#services{
  position:fixed;top:0;left:0;right:0;
  height:100vh;height:100dvh;
  opacity:0;pointer-events:none;
  transition:opacity .7s ease,transform .7s ease;
  transform:translateY(20px);
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  padding-top:64px;
  padding-bottom:46px;
  background:#0a0a0a;
  display:block;
  z-index:5;
}
#services.active{opacity:1;pointer-events:all;transform:translateY(0);}

.section-label{text-align:center;padding:4rem 2rem 2rem;}
.section-label .eyebrow{font-size:.7rem;letter-spacing:.3em;color:rgba(226,185,111,0.6);text-transform:uppercase;margin-bottom:.8rem;}
.section-label h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:900;letter-spacing:-1.5px;color:#fff;}
.section-label h2 span{color:#e2b96f;}

.services-wrap{display:flex;max-width:860px;margin:0 auto;position:relative;}

.img-panel{width:44%;position:sticky;top:64px;height:calc(100vh - 100px);flex-shrink:0;overflow:hidden;border-radius:12px;}
.img-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s cubic-bezier(0.4,0,0.2,1);background-size:cover;background-position:center;}
.img-slide.active{opacity:1;}
.img-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 55%,#0a0a0a 100%),linear-gradient(to bottom,rgba(0,0,0,0.4) 0%,transparent 40%);}
.img-slide:nth-child(1){background-image:linear-gradient(135deg,#0f1b35,#16213e,#0f3460);}
.img-slide:nth-child(2){background-image:linear-gradient(135deg,#200a00,#3d1500,#7c2d00);}
.img-slide:nth-child(3){background-image:linear-gradient(135deg,#071507,#0d2b0d,#14532d);}
.img-slide:nth-child(4){background-image:linear-gradient(135deg,#130a1f,#2d0a3d,#4a1060);}
.img-slide:nth-child(5){background-image:linear-gradient(135deg,#1a1000,#3d2800,#78350f);}
.slide-deco{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;}
.slide-deco i{font-size:6rem;opacity:0.06;color:#fff;transition:all .6s;}
.img-slide.active .slide-deco i{opacity:0.12;transform:scale(1.05);}
.slide-num{position:absolute;bottom:1.5rem;left:1.5rem;z-index:2;font-size:.6rem;letter-spacing:.3em;color:rgba(255,255,255,0.2);text-transform:uppercase;}

.text-panel{flex:1;padding:0 0 0 3rem;}
.service-item{min-height:100vh;display:flex;align-items:center;padding:4rem 0;position:relative;}
.service-content{max-width:340px;opacity:0.2;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.service-content.active{opacity:1;transform:translateY(0);}
.service-num{font-size:.62rem;letter-spacing:.3em;color:var(--ac,rgba(226,185,111,0.6));text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:.8rem;}
.service-num::before{content:'';width:28px;height:1px;background:var(--ac,rgba(226,185,111,0.4));display:block;}
.service-content h2,.service-content h3{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;letter-spacing:-1px;line-height:1.1;margin-bottom:1rem;color:#fff;}
.service-content h2 em,.service-content h3 em{font-style:normal;color:var(--ac,#e2b96f);}
.service-content p{color:rgba(255,255,255,0.38);font-size:.86rem;line-height:1.9;margin-bottom:1.4rem;}
.service-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.4rem;}
.stag{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);color:rgba(255,255,255,0.38);padding:.2rem .6rem;border-radius:4px;font-size:.66rem;letter-spacing:.04em;}
.service-price{font-size:.72rem;color:rgba(255,255,255,0.2);letter-spacing:.05em;text-transform:uppercase;}
.service-price span{color:var(--ac,#e2b96f);font-weight:700;font-size:.88rem;}

/* ═══ SERVICES 3D TILT ═══ */
.service-item{perspective:900px;}
.service-content{
  transform-style:preserve-3d;
  will-change:transform;
  border-radius:16px;
  padding:2rem 2rem 1.6rem;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  position:relative;
  transition:opacity .6s ease, transform .5s cubic-bezier(0.23,1,0.32,1), box-shadow .3s ease;
}
/* Glass shimmer that follows tilt */
.service-content::after{
  content:'';
  position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,0.07) 0%,transparent 55%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.service-content:hover::after{opacity:1;}
.service-content.active{
  box-shadow:0 12px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.07);
}
/* Coloured accent glow on active card bottom */
.service-content.active::before{
  content:'';
  position:absolute;bottom:-1px;left:20%;right:20%;height:1px;
  background:var(--ac,#e2b96f);
  box-shadow:0 0 16px 2px var(--ac,#e2b96f);
  border-radius:50%;opacity:.5;
}

/* WORK */
#work{background:#080808;justify-content:flex-start;padding-top:80px;}
#work h2{font-size:1.7rem;font-weight:900;color:#fff;letter-spacing:-1px;margin-bottom:.3rem;}
#work h2 span{color:#c084fc;}
#work .sub{color:rgba(255,255,255,0.28);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.2rem;}
.work-tabs{display:flex;gap:.4rem;justify-content:center;margin-bottom:1.2rem;flex-wrap:wrap;}
.tab{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);color:rgba(255,255,255,0.38);padding:.28rem .85rem;border-radius:20px;font-size:.68rem;font-weight:600;cursor:pointer;letter-spacing:.05em;text-transform:uppercase;transition:all .2s;}
.tab.on{background:rgba(192,132,252,0.14);border-color:rgba(192,132,252,0.4);color:#c084fc;}

/* ═══ WORK 3D ROWS ═══ */
/* Work section layout */
#work{
  background:#080808;
  justify-content:flex-start;
  padding:0;
  overflow:hidden;
}
.work-scroll{
  position:relative;z-index:2;
  width:100%;height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:100px 0 200px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.work-header{
  width:100%;max-width:780px;margin:0 auto 1.2rem;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 1rem;
}
.work-eyebrow{font-size:.62rem;letter-spacing:.35em;color:rgba(192,132,252,0.6);text-transform:uppercase;margin-bottom:.4rem;}
.work-header h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:900;color:#fff;letter-spacing:-1.5px;line-height:1;}
.work-header h2 em{font-style:normal;color:#c084fc;}
.work-count{font-size:.62rem;letter-spacing:.25em;color:rgba(255,255,255,0.18);text-transform:uppercase;}

/* Project list — perspective container */
.project-list{
  list-style:none;
  padding:0 0 200px 0;
  width:100%;max-width:780px;margin:0 auto;
  perspective:1400px;perspective-origin:50% 40%;
  text-align:center;
}

/* Each row */
.project-row{
  display:flex;align-items:center;justify-content:center;
  padding:1.4rem 1rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
  cursor:pointer;position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  transform:translateZ(0) rotateX(0deg) rotateY(0deg);
  transition:
    transform .25s cubic-bezier(0.23,1,0.32,1),
    background .2s ease,
    border-color .2s ease;
}
.project-row:first-child{border-top:1px solid rgba(255,255,255,0.06);}

/* Left accent bar — scales in on hover */
.project-row::before{
  content:'';
  position:absolute;left:0;top:15%;bottom:15%;width:2px;
  background:linear-gradient(to bottom,transparent,#c084fc,transparent);
  transform:scaleY(0);transform-origin:center;
  transition:transform .3s cubic-bezier(0.34,1.56,0.64,1);
  border-radius:2px;
}
.project-row:hover::before{transform:scaleY(1);}

/* Hover: glow + tilt happens via JS, this handles bg */
.project-row:hover{
  background:rgba(192,132,252,0.04);
  border-color:rgba(192,132,252,0.15);
}

.proj-num{
  font-size:.62rem;letter-spacing:.25em;
  color:rgba(255,255,255,0.18);
  width:2.5rem;flex-shrink:0;
  position:absolute;left:1rem;
}
.proj-title{
  font-size:clamp(1.1rem,2.5vw,1.8rem);
  font-weight:800;color:#fff;letter-spacing:-0.5px;
  text-align:center;
  transition:color .2s, transform .25s cubic-bezier(0.23,1,0.32,1);
}
.project-row:hover .proj-title{
  color:#e2d9f5;
  transform:translateX(6px) translateZ(10px);
}
.proj-meta{
  display:flex;align-items:center;gap:1.2rem;
  flex-shrink:0;
  position:absolute;right:1rem;
}
.proj-tag{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(192,132,252,0.5);
  background:rgba(192,132,252,0.07);
  border:1px solid rgba(192,132,252,0.15);
  padding:.18rem .55rem;border-radius:4px;
}
.proj-year{font-size:.68rem;color:rgba(255,255,255,0.2);letter-spacing:.1em;}
.proj-arrow{
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.25);font-size:.7rem;
  transition:all .25s cubic-bezier(0.34,1.56,0.64,1);
  transform:translateZ(0);
}
.project-row:hover .proj-arrow{
  border-color:#c084fc;color:#c084fc;
  transform:translateX(4px) translateZ(12px) rotate(-45deg);
  box-shadow:0 0 12px rgba(192,132,252,0.35);
}

/* Work background video (already in HTML) */
#work-bg-video{
  position:fixed;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .5s ease;
}
#work-bg-video.visible{opacity:0.18;}
#work-bg-overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:rgba(8,8,8,0.6);
  opacity:0;transition:opacity .5s ease;
}
#work-bg-overlay.visible{opacity:1;}
.work-header,.project-list{position:relative;z-index:1;}












/* ── WORK ACCORDION (mobile) ── */
.proj-row-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:1.4rem 1rem;
  position:relative;
}
.proj-preview{
  display:none; /* hidden on desktop */
}

@media(max-width:700px){
  .work-scroll{padding:0 0 180px;}
  .project-list{padding-bottom:0;}
  /* Row becomes column so preview slides below */
  .project-row{
    flex-direction:column;
    padding:0;
    align-items:stretch;
    transform:none !important; /* disable 3D tilt on mobile */
  }
  .proj-row-inner{
    padding:1rem;
    cursor:pointer;
  }
  /* Arrow rotates when open */
  .project-row.open .proj-arrow{
    transform:rotate(90deg);
    border-color:#c084fc;
    color:#c084fc;
    box-shadow:0 0 12px rgba(192,132,252,0.35);
  }

  /* Accordion hidden — mobile uses full-page player directly */
  .proj-preview{ display:none !important; }
}

/* ═══ FAQ ═══ */
#faq{
  background:#0a0a0a;
  align-items:center;
  justify-content:flex-start;
  padding-top:80px;
  padding-bottom:240px;
  overflow-y:auto;
}
.faq-wrap{width:100%;max-width:700px;margin:0 auto;padding:0 1.5rem;}
.faq-item{border-bottom:1px solid rgba(255,255,255,0.07);}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;background:none;border:none;
  color:#fff;font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(.92rem,2vw,1.05rem);text-align:left;
  padding:1.2rem 0;cursor:pointer;gap:1rem;line-height:1.45;
  transition:color .2s;
}
.faq-q:hover{color:#e2b96f;}
.faq-icon{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(226,185,111,0.35);
  display:flex;align-items:center;justify-content:center;
  color:#e2b96f;font-size:.9rem;font-style:normal;
  transition:transform .3s ease,background .3s ease;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:rgba(226,185,111,0.1);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a-inner{
  padding-bottom:1.2rem;
  color:rgba(255,255,255,0.5);
  font-size:.87rem;line-height:1.75;
  font-family:'Cormorant Garamond',Georgia,serif;
  text-align:left;
}
.faq-item.open .faq-a{max-height:300px;}
.faq-cta{margin-top:2.5rem;text-align:center;}

/* CONTACT */
#contact{background:#0a0a0a;background-image:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(251,146,60,0.05) 0%,transparent 70%);}
#contact h2{font-size:1.7rem;font-weight:900;color:#fff;letter-spacing:-1px;margin-bottom:.3rem;}
#contact h2 span{color:#fb923c;}
#contact .sub{color:rgba(255,255,255,0.28);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.4rem;}
.contact-wrap{display:flex;gap:2rem;max-width:600px;flex-wrap:wrap;justify-content:center;align-items:flex-start;}
.contact-info{text-align:left;min-width:180px;}
.contact-line{display:flex;align-items:center;gap:.75rem;margin-bottom:.9rem;}
.contact-line i{color:#fb923c;width:14px;font-size:.85rem;flex-shrink:0;}
.contact-line span{color:rgba(255,255,255,0.45);font-size:.82rem;}
.msg-btns{display:flex;gap:.5rem;margin:.4rem 0 .9rem;}
.msg-btn{display:flex;align-items:center;gap:.4rem;padding:.38rem .75rem;border-radius:6px;font-size:.75rem;font-weight:600;text-decoration:none;transition:transform .15s,opacity .15s;}
.msg-btn:hover{transform:translateY(-2px);opacity:.9;}
.msg-btn.whatsapp{background:#25d366;color:#fff;}
.msg-btn.viber{background:#7360f2;color:#fff;}
.msg-btn.signal{background:#3a76f0;color:#fff;}
.msg-btn i{font-size:.82rem;}
.socials{display:flex;gap:.5rem;margin-top:.8rem;}
.social-btn{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:rgba(255,255,255,0.35);font-size:.8rem;text-decoration:none;}
.social-btn:hover{border-color:#fb923c;color:#fb923c;transform:translateY(-2px);}
.contact-form{display:flex;flex-direction:column;gap:.55rem;min-width:230px;}
.contact-form input,.contact-form textarea,.contact-form select{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:8px;padding:.58rem .85rem;color:#fff;font-size:.8rem;font-family:inherit;outline:none;transition:border .2s;resize:none;}
.contact-form input:focus-visible,.contact-form textarea:focus-visible,.contact-form select:focus-visible{outline:2px solid rgba(200,169,126,0.7);outline-offset:2px;}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,0.22);}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:rgba(251,146,60,0.5);}
.contact-form select option{background:#1a1a1a;}
.contact-form button{background:#fb923c;color:#0a0a0a;border:none;border-radius:8px;padding:.68rem;font-size:.78rem;font-weight:700;cursor:pointer;letter-spacing:.5px;text-transform:uppercase;transition:all .2s;}
.contact-form button:hover{background:#fdba74;transform:translateY(-2px);}

/* FOOTER */
/* ══ FANCY FADING FOOTER ══ */
footer{
  position:fixed;bottom:0;left:0;right:0;z-index:70;
  background:#0a0a0a;
  padding:1.2rem 5vw 0.8rem;
  border-top:1px solid rgba(255,255,255,0.06);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 16%);
  mask-image:linear-gradient(to bottom,transparent 0%,black 16%);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:1rem 2.5rem;
  max-width:1100px;
  margin:0 auto 0.8rem;
}
.footer-brand-name{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.1rem;font-weight:400;
  color:#fff;letter-spacing:-.5px;margin-bottom:.1rem;
}
.footer-brand-name em{font-style:italic;color:#e2b96f;}
.footer-brand-sub{
  font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,0.22);margin-bottom:.5rem;
}
.footer-avail{
  display:flex;align-items:center;gap:.5rem;
  font-size:.6rem;color:rgba(255,255,255,0.55);
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  margin-bottom:.5rem;
}
.avail-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:#4ade80;
  box-shadow:0 0 8px rgba(74,222,128,0.7);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{opacity:1;box-shadow:0 0 8px rgba(74,222,128,0.7);}
  50%{opacity:.5;box-shadow:0 0 3px rgba(74,222,128,0.3);}
}
.footer-socials{display:flex;gap:.4rem;margin-bottom:.3rem;}
.footer-social{
  width:24px;height:24px;border-radius:5px;
  border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.3);font-size:.72rem;
  text-decoration:none;transition:all .2s;
}
.footer-social:hover{border-color:#e2b96f;color:#e2b96f;}
.footer-col-title{
  font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,0.22);margin-bottom:.4rem;
}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.25rem;}
.footer-links li a,
.footer-links li button{
  font-size:.76rem;color:rgba(255,255,255,0.42);
  text-decoration:none;background:none;border:none;
  cursor:pointer;padding:0;letter-spacing:.02em;
  transition:color .2s;font-family:inherit;
}
.footer-links li a:hover,
.footer-links li button:hover{color:#e2b96f;}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,0.05);
  padding-top:.6rem;max-width:1100px;margin:0 auto;
}
.footer-copy{font-size:.57rem;color:rgba(255,255,255,0.16);letter-spacing:.06em;}
.footer-bottom-links{display:flex;gap:1rem;}
.footer-bottom-links button{
  font-size:.57rem;color:rgba(255,255,255,0.18);
  background:none;border:none;cursor:pointer;
  letter-spacing:.06em;text-transform:uppercase;transition:color .2s;font-family:inherit;
}
.footer-bottom-links button:hover{color:rgba(226,185,111,0.7);}
.footer-bottom-links a{
  font-size:.57rem;color:rgba(255,255,255,0.18);
  text-decoration:none;letter-spacing:.06em;text-transform:uppercase;transition:color .2s;
}
.footer-bottom-links a:hover{color:rgba(226,185,111,0.7);}

/* RESPONSIVE */
@media(min-width:701px){
  .hamburger{display:none!important;}
}
@media(max-width:700px){
  .nav-list,.hori-selector{display:none;}
  .hamburger{display:flex!important;}
  .lang-switcher{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;top:auto;}
  nav{
    padding:0 18px;
    padding-top:env(safe-area-inset-top,0px);
    height:calc(64px + env(safe-area-inset-top,0px));
    align-items:flex-end;
    padding-bottom:8px;
  }
  .section{padding:62px 18px 160px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #contact{padding-bottom:320px;align-items:flex-start;justify-content:flex-start;padding-top:80px;}
  #contact h2,#contact .sub{text-align:center;width:100%;}
  /* ── SERVICES MOBILE — full-screen snap scroll ── */
  #services{
    padding:0 !important;
    overflow:hidden !important;
    display:block !important;
  }
  .services-scroll-inner{
    width:100%;
    height:100%;
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:y mandatory;
    overscroll-behavior-y:contain;
  }
  .section-label{ display:none !important; }
  .services-wrap{
    display:block !important;
    padding:0 !important;
    max-width:100% !important;
  }
  .img-panel{ display:none !important; }
  .text-panel{ display:block; width:100%; padding:0 !important; }

  /* Each service = full screen snap slide */
  .service-item{
    display:flex !important;
    height:100dvh;
    min-height:100dvh;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    align-items:flex-end !important;
    justify-content:flex-start;
    padding:0 !important;
    position:relative;
    overflow:hidden;
  }

  /* Per-service gradient backgrounds */
  .service-item[data-index="0"]{ background:linear-gradient(160deg,#0f1b35 0%,#0f3460 60%,#1a1a2e 100%); }
  .service-item[data-index="1"]{ background:linear-gradient(160deg,#200a00 0%,#7c2d00 60%,#1a0800 100%); }
  .service-item[data-index="2"]{ background:linear-gradient(160deg,#071507 0%,#14532d 60%,#0a1a0a 100%); }
  .service-item[data-index="3"]{ background:linear-gradient(160deg,#130a1f 0%,#4a1060 60%,#0f0a1a 100%); }
  .service-item[data-index="4"]{ background:linear-gradient(160deg,#1a1000 0%,#78350f 60%,#150d00 100%); }

  /* Subtle grain overlay per slide */
  .service-item::before{
    content:'';position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-size:200px 200px;
    opacity:.4;pointer-events:none;z-index:0;
  }

  /* Big background number */
  .service-item[data-index="0"]::after{ content:'1'; }
  .service-item[data-index="1"]::after{ content:'2'; }
  .service-item[data-index="2"]::after{ content:'3'; }
  .service-item[data-index="3"]::after{ content:'4'; }
  .service-item[data-index="4"]::after{ content:'5'; }
  .service-item::after{
    position:absolute;
    right:-0.05em;bottom:-0.15em;
    font-size:40vw;font-weight:900;
    color:#fff;opacity:0.04;
    line-height:1;pointer-events:none;z-index:0;
    font-family:'Playfair Display',serif;
  }

  /* Content card — bottom overlay */
  .service-content{
    position:relative;z-index:1;
    width:100% !important;max-width:100% !important;
    box-sizing:border-box !important;
    padding:2.5rem 2rem 2.5rem !important;
    opacity:1 !important;transform:none !important;
    background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.5) 60%,transparent 100%);
    border-radius:0 !important;
    border:none !important;
    box-shadow:none !important;
  }
  .service-content::before,.service-content::after{ display:none !important; }

  .service-num{
    font-size:.58rem !important;
    margin-bottom:.7rem !important;
    opacity:.6;
  }
  .service-content h3{
    white-space:normal !important;
    font-size:clamp(1.6rem,7vw,2rem) !important;
    margin-bottom:.6rem !important;
    line-height:1.1 !important;
  }
  .service-content p{
    font-size:.82rem !important;
    line-height:1.75 !important;
    margin-bottom:1rem !important;
    color:rgba(255,255,255,0.45) !important;
  }
  .service-tags{
    flex-wrap:wrap !important;
    margin-bottom:.9rem !important;
    gap:.3rem !important;
  }
  .stag{
    font-size:.6rem;padding:.2rem .55rem;
    background:rgba(255,255,255,0.07) !important;
    border-color:rgba(255,255,255,0.12) !important;
  }
  .service-price{ margin-bottom:0; }

  /* Scroll hint dots — fixed inside services */
  .services-dots{
    position:fixed;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:8px;
    z-index:20;
    padding:0;
  }
  .sdot{
    width:5px;height:5px;border-radius:50%;
    background:rgba(255,255,255,0.25);
    transition:all .35s;cursor:pointer;
  }
  .sdot.active{
    background:#e2b96f;
    height:20px;border-radius:3px;
  }

  /* Hide old swipe indicator */
  .svc-swipe-indicator{ display:none !important; }
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;gap:1.2rem;}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center;}
  footer{
    padding:.6rem 18px .5rem;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:.4rem;
    margin-bottom:.3rem;
  }
  /* Sakrij Navigate i Legal kolone — duplicirani u hamburger meniju i footer-bottom */
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3){ display:none; }
  /* Brand red horizontalno */
  .footer-grid > div:first-child{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; }
  .footer-avail{ display:none; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; padding-top:.3rem; }
  .footer-copy,.footer-bottom-links button{ font-size:.5rem; }
  .nav-brand img{height:58px;}
  .hero-content{padding:0 1.2rem;}
  #home h1{font-size:clamp(2.2rem,9vw,4rem);letter-spacing:-2px;}
  .home-stats{flex-wrap:wrap;gap:0;}
  .stat{padding:0 1.2rem;margin-bottom:.5rem;}
}

.svc-mob-nav{display:none;}
.services-dots{display:none;}
.svc-swipe-indicator{display:none;}

/* ═══ LANGUAGE SWITCHER ═══ */
.lang-switcher{
  display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;padding:3px;
  flex-shrink:0;
}
.lang-btn{
  font-size:.62rem;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,0.35);
  background:transparent;border:none;cursor:pointer;
  padding:4px 8px;border-radius:4px;transition:all .2s;
  text-transform:uppercase;
}
.lang-btn.active{
  background:#e2b96f;color:#0a0a0a;
}
.lang-btn:hover:not(.active){color:rgba(255,255,255,0.7);}

/* Translation visibility */
[data-en], [data-de]{ }
body.lang-de [data-en]{display:none !important;}
body.lang-en [data-de]{display:none !important;}

/* ═══ TERMS MODAL ═══ */
.terms-modal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.85);
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.terms-modal.open{opacity:1;pointer-events:all;}
.terms-box{
  background:#111;border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;max-width:640px;width:100%;
  max-height:80vh;overflow-y:auto;padding:2.5rem;
  position:relative;
}
.terms-box h2{font-size:1.2rem;font-weight:900;color:#fff;
  letter-spacing:-0.5px;margin-bottom:1.2rem;}
.terms-box h3{font-size:.8rem;font-weight:700;color:#e2b96f;
  letter-spacing:.08em;text-transform:uppercase;margin:1.2rem 0 .4rem;}
.terms-box p{font-size:.8rem;color:rgba(255,255,255,0.5);
  line-height:1.8;margin-bottom:.6rem;}
.terms-close{
  position:sticky;top:0;float:right;
  background:#e2b96f;color:#0a0a0a;border:none;
  width:28px;height:28px;border-radius:50%;
  font-size:1rem;font-weight:900;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  margin-left:1rem;margin-bottom:.5rem;
  flex-shrink:0;
}
/* footer-terms-link merged into footer-bottom-links */


/* ═══ HERO VIDEO ═══ */
.hero-video{
  position:fixed;top:0;left:0;
  width:100vw;height:100vh;height:100dvh;
  z-index:0;overflow:hidden;
  animation:videoZoom 24s ease-in-out infinite alternate;
}
@keyframes videoZoom{
  from{transform:scale(1);}
  to{transform:scale(1.06);}
}
@media(max-width:700px){
  .hero-video{animation:none;}
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,  rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.30) 45%, rgba(5,5,5,0.18) 100%),
    linear-gradient(to bottom, rgba(5,5,5,0.55) 0%, transparent 28%),
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 38%, rgba(5,5,5,0.42) 100%);
}
.mute-btn{
  position:fixed;bottom:2rem;right:2rem;z-index:999;
  background:rgba(255,255,255,0.09);
  border:1px solid rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.75);
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:all .2s;backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.mute-btn:hover{background:rgba(255,255,255,0.18);color:#fff;transform:scale(1.08);}
.wa-btn{
  position:fixed;bottom:5.5rem;right:2rem;z-index:999;
  background:rgba(255,255,255,0.09);
  border:1px solid rgba(255,255,255,0.22);
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:all .2s;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.wa-btn:hover{background:rgba(37,211,102,0.18);border-color:rgba(37,211,102,0.45);transform:scale(1.08);}
.wa-btn svg{width:22px;height:22px;fill:rgba(255,255,255,0.75);transition:fill .2s;}
.wa-btn:hover svg{fill:#25D366;}



/* ═══ TYPEWRITER HERO ═══ */
.hero-type-wrap{
  position:relative;z-index:2;
  text-align:center;
  max-width:900px;
  padding:0 2.5rem;
  display:flex;flex-direction:column;align-items:center;gap:0.7rem;
}

/* Buttons */
.hero-type-btns{
  display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;
  opacity:1;transform:translateY(0);
  transition:opacity .45s ease, transform .45s ease;
}
.hero-type-btns.show{opacity:1;transform:translateY(0);}


/* ═══ VIDEO LIGHTBOX ═══ */
.lightbox{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,0.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  padding:1.5rem;
}
.lightbox.open{opacity:1;pointer-events:all;}
.lightbox-inner{
  position:relative;
  width:100%;max-width:960px;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,0.8);
}
.lightbox-inner video{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.lightbox-close{
  position:absolute;top:-2.8rem;right:0;
  background:none;border:none;
  color:rgba(255,255,255,0.5);
  font-size:1.6rem;cursor:pointer;
  transition:color .2s;line-height:1;
}
.lightbox-close:hover{color:#fff;}
.lightbox-title{
  position:absolute;bottom:0;left:0;right:0;
  padding:.8rem 1.2rem;
  background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.6);font-weight:600;
}

/* ═══ WORK GRID (updated) ═══ */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.7rem;
  width:100%;max-width:820px;
  margin:0 auto;
}
.work-item{
  border-radius:10px;
  aspect-ratio:16/9;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:.5rem;
  cursor:pointer;transition:all .25s;
  position:relative;overflow:hidden;
}
.work-item video.work-thumb{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.work-item:hover video.work-thumb{opacity:1;}
.work-item::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:rgba(0,0,0,0.35);
  transition:background .3s;
}
.work-item:hover::before{background:rgba(0,0,0,0.1);}
.work-item .wi-icon{
  position:relative;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:rgba(226,185,111,0.85);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:#0a0a0a;
  transition:transform .2s,opacity .2s;
}
.work-item:hover .wi-icon{transform:scale(1.1);}
.work-item span{
  position:relative;z-index:2;
  font-size:.6rem;color:rgba(255,255,255,0.55);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  transition:color .2s;
}
.work-item:hover span{color:#fff;}
.work-item.big{grid-column:span 2;aspect-ratio:16/9;}



  .reel-card.c1,.reel-card.c2,.reel-card.c3,
  .reel-card.c4,.reel-card.c5,.reel-card.c6{
    grid-column:1/2;grid-row:auto/span 1;
  }
  .work-header h2{font-size:2rem;}
}


/* ══════════════════════════════════════════════
   WORK — max.rocks style list
══════════════════════════════════════════════ */
#work{
  padding:0 !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  overflow-y:auto !important;
  display:block !important;
  background:#080808;
  position:relative;
}

/* Global video bg — fills the whole section on hover */
#work-bg-video{
  position:fixed;
  inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
  z-index:0;
}
#work-bg-video.visible{opacity:1;}
/* dark overlay over video */
#work-bg-overlay{
  position:fixed;inset:0;
  background:rgba(8,8,8,0.55);
  opacity:0;transition:opacity .6s ease;
  pointer-events:none;z-index:1;
}
#work-bg-overlay.visible{opacity:1;}

/* ── Header ── */
.work-header{
  position:relative;z-index:2;
  padding:4.5rem 5vw 2rem;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.work-eyebrow{
  font-size:.58rem;letter-spacing:.5em;text-transform:uppercase;
  color:rgba(226,185,111,0.6);margin-bottom:.5rem;
}
.work-header h2{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:400;color:#fff;
  letter-spacing:-.5px;line-height:1;margin:0;
}
.work-header h2 em{font-style:italic;color:#e2b96f;}
.work-count{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.2);
  align-self:flex-end;padding-bottom:.25rem;
}

/* ── Project List ── */
.project-list{
  position:relative;z-index:2;
  list-style:none;margin:0;padding:0;
}

.project-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5vw;
  border-bottom:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:background .3s ease;
  min-height:90px;
  gap:2rem;
}
/* Subtle gold line slides in from left on hover */
.project-row::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;
  width:3px;background:#e2b96f;
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.project-row:hover::before{transform:scaleY(1);}
.project-row:hover{background:rgba(255,255,255,0.025);}

/* Number */
.proj-num{
  font-family:'Playfair Display',Georgia,serif;
  font-size:.7rem;font-style:italic;
  color:rgba(255,255,255,0.18);
  min-width:2.5rem;flex-shrink:0;
  transition:color .3s;
}
.project-row:hover .proj-num{color:rgba(226,185,111,0.5);}

/* Title */
.proj-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.6rem,4.5vw,3.8rem);
  font-weight:400;
  color:rgba(255,255,255,0.85);
  letter-spacing:-1px;line-height:1;
  flex:1;
  transition:color .3s, transform .4s cubic-bezier(.22,1,.36,1);
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.project-row:hover .proj-title{
  color:#fff;
  transform:translateX(6px);
}

/* Meta right side */
.proj-meta{
  display:flex;align-items:center;gap:1.5rem;
  flex-shrink:0;
}
.proj-tag{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.22);
  transition:color .3s;
}
.project-row:hover .proj-tag{color:rgba(226,185,111,0.6);}
.proj-year{
  font-size:.6rem;letter-spacing:.12em;
  color:rgba(255,255,255,0.15);
}
/* Arrow icon */
.proj-arrow{
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:rgba(255,255,255,0.25);
  transform:rotate(-45deg) scale(.85);opacity:0;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.project-row:hover .proj-arrow{
  opacity:1;transform:rotate(0deg) scale(1);
  border-color:rgba(226,185,111,0.4);
  color:#e2b96f;
}

/* ── Video modal (click) ── */
.work-fullpage{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.95);
  z-index:9999;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(0.34,1.56,0.64,1);
}
.work-fullpage.open{
  opacity:1;pointer-events:all;
  transform:translate(-50%,-50%) scale(1);
}
.wfp-modal{
  width:480px;max-width:calc(100vw - 2rem);
  background:rgba(13,13,13,0.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.04);
}
.wfp-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.2rem;
  background:#111;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.wfp-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:.92rem;font-style:italic;
  color:rgba(255,255,255,0.7);
}
.wfp-actions{display:flex;align-items:center;gap:.5rem;}
.wfp-fs{
  background:none;border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.45);
  font-size:.7rem;padding:.3rem .65rem;border-radius:6px;
  cursor:pointer;transition:all .2s;letter-spacing:.04em;
  font-family:inherit;
}
.wfp-fs:hover{color:#e2b96f;border-color:rgba(226,185,111,0.4);}
.wfp-close{
  background:none;border:none;
  color:rgba(255,255,255,0.4);
  font-size:1.4rem;cursor:pointer;
  transition:color .2s;line-height:1;
  font-family:sans-serif;padding:0 .2rem;
}
.wfp-close:hover{color:#e2b96f;}
#wfpVideo{
  width:100%;aspect-ratio:16/9;
  display:block;background:#000;
}

/* ── Responsive ── */
@media(max-width:768px){
  .work-header{padding:80px 5vw 1.5rem;}
  .project-row{padding:0 5vw;min-height:72px;gap:1rem;}
  .proj-year,.proj-tag{display:none;}
  .proj-title{font-size:clamp(1.3rem,6vw,2.4rem);}
  .proj-arrow{display:none;}
}
@media(max-width:480px){
  .proj-num{display:none;}
  .proj-title{font-size:clamp(1.2rem,7vw,2rem);letter-spacing:-.5px;}
}


/* ═══ ABOUT SHATTER ═══ */
.about-shatter-wrap{
  position:relative;
  max-width:560px;width:100%;
  cursor:default;user-select:none;
}
#aboutShatterCanvas{
  position:absolute;
  pointer-events:none;opacity:0;
  transition:opacity .1s;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
}
#aboutShatterCanvas.active{opacity:1;}

.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}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  #intro{display:none!important}
}
.skip-link{position:absolute;top:-100%;left:16px;background:#c8a97e;color:#0a0a0a;padding:10px 18px;border-radius:0 0 8px 8px;font-weight:700;font-size:14px;text-decoration:none;z-index:99999;transition:top 0.2s}
.skip-link:focus{top:0}

/* ── Cookie Consent ──────────────────────────────────────────────────────── */
#cookie-banner{
  position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);
  z-index:9999;
  width:min(560px, calc(100vw - 1.5rem));
  background:rgba(10,10,10,0.95);
  border:1px solid rgba(255,255,255,0.08);
  border-top:1px solid rgba(200,164,90,0.3);
  border-radius:12px;
  padding:.85rem 1.1rem;
  display:flex;align-items:center;gap:.85rem;
  box-shadow:0 4px 30px rgba(0,0,0,0.6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:opacity .3s ease, transform .3s ease;
}
#cookie-banner.hide{opacity:0;transform:translateX(-50%) translateY(16px);pointer-events:none}
#cookie-banner p{
  flex:1;
  font-size:.72rem;color:rgba(255,255,255,0.42);
  line-height:1.45;margin:0;
}
#cookie-banner p a{color:rgba(200,164,90,0.7);text-decoration:none;border-bottom:1px solid rgba(200,164,90,0.3)}
#cookie-banner p a:hover{color:#c8a45a}
.cookie-btns{display:flex;gap:.5rem;flex-shrink:0}
.cookie-btn{
  border:none;cursor:pointer;border-radius:6px;
  padding:.38rem .9rem;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  font-family:inherit;transition:all .18s;white-space:nowrap;
}
.cookie-btn.accept{background:#c8a45a;color:#0a0a0a}
.cookie-btn.accept:hover{background:#dbb96a}
.cookie-btn.decline{background:transparent;color:rgba(255,255,255,0.28);border:1px solid rgba(255,255,255,0.1)}
.cookie-btn.decline:hover{color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.25)}
@media(max-width:700px){
  #cookie-banner{bottom:.75rem;padding:.75rem 1rem;gap:.6rem;}
  #cookie-banner p{font-size:.68rem;}
}
/* ═══ HERO MANIFEST (German quote) ═══ */
.hero-manifest{
  max-width:680px;
  padding:0 1.5rem;
  text-align:center;
  display:flex;flex-direction:column;gap:0.5rem;
  opacity:1;
}
#home .hero-manifest-h{
  color:#fff !important;
  font-size:clamp(1.1rem,2.4vw,1.45rem) !important;
  font-weight:700 !important;
  max-width:none;
}
#home .hero-manifest-p{
  color:rgba(210,190,255,0.92) !important;
  font-size:clamp(.95rem,1.8vw,1.1rem) !important;
  font-weight:500 !important;
  max-width:none;
}
.hero-manifest-h{
  animation:manifestIn 1.2s cubic-bezier(0.22,1,0.36,1) 2.5s both;
}
.hero-manifest-p{
  animation:manifestIn 1.2s cubic-bezier(0.22,1,0.36,1) 3.1s both;
}
@keyframes manifestIn{
  from{opacity:0;transform:translateY(22px);filter:blur(4px);}
  to{opacity:1;transform:translateY(0);filter:blur(0);}
}
.hero-manifest-h{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.32rem,3.36vw,1.92rem);
  font-weight:700;font-style:italic;
  color:#fff;
  line-height:1.75;letter-spacing:.03em;
  text-shadow:0 2px 24px rgba(0,0,0,0.9),0 1px 6px rgba(0,0,0,0.95);
}
.hero-manifest-p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.14rem,2.4vw,1.38rem);
  font-weight:500;
  color:rgba(210,190,255,0.92);
  line-height:1.65;letter-spacing:.06em;
  text-shadow:0 2px 16px rgba(0,0,0,0.9),0 1px 4px rgba(0,0,0,0.95);
}
@media(max-width:700px){
  .hero-manifest{padding:0 1rem;gap:0.3rem;text-align:center;align-items:center;width:100%;}
  .hero-type-wrap{align-items:center;text-align:center;width:100%;padding:0 1rem;}
  .hero-type-btns{justify-content:center;width:100%;}
  .hero-manifest-h{font-size:clamp(.85rem,3.8vw,.95rem) !important;font-weight:600 !important;line-height:1.5 !important;}
  .hero-manifest-p{font-size:clamp(.75rem,3vw,.85rem) !important;font-weight:400 !important;}
  /* Homepage — pure fullscreen video, no padding/scroll */
  #home{overflow:hidden !important;padding:0 !important;}
  .mute-btn{bottom:1.2rem;right:1.2rem;}
  /* Services — fix padding */
  #services{padding-bottom:120px;}
  /* Work — stack cards nicely */
  .proj-row{padding:1rem 1rem;}
  /* Contact — center + scroll */
  #contact{overflow-y:auto !important;justify-content:flex-start !important;padding-top:90px;align-items:center;}
  .contact-wrap{flex-direction:column;align-items:center;text-align:center;}
  .contact-info{text-align:center;min-width:0;}
  .contact-line{justify-content:center;}
}



/* ═══ PORTFOLIO SECTION ═══ */
#portfolio{background:#080808;justify-content:flex-start;padding:0;overflow:hidden;}
#port-bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;}
#port-bg-video.visible{opacity:0.18;}
#port-bg-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;background:rgba(8,8,8,0.65);opacity:0;transition:opacity .6s ease;}
#port-bg-overlay.visible{opacity:1;}
.port-scroll{position:relative;z-index:2;width:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:100px 0 200px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.port-header{width:100%;max-width:780px;margin:0 auto 1.5rem;display:flex;align-items:flex-end;justify-content:space-between;padding:0 1rem;}
.port-eyebrow{font-size:.62rem;letter-spacing:.35em;color:rgba(226,185,111,0.6);text-transform:uppercase;margin-bottom:.4rem;}
.port-header h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:400;color:#fff;line-height:1;}
.port-header h2 em{font-style:italic;color:#e2b96f;}
.port-count{font-size:.62rem;letter-spacing:.25em;color:rgba(255,255,255,0.18);text-transform:uppercase;}
.port-loading{text-align:center;padding:5rem 1.5rem;}
.port-empty{text-align:center;padding:5rem 1.5rem;display:none;}
.port-empty.visible{display:block;}
.port-empty p{color:rgba(255,255,255,0.2);font-size:.82rem;letter-spacing:.05em;}

/* Detail overlay */
.proj-detail{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0);pointer-events:none;transition:background .35s ease;}
.proj-detail.open{background:rgba(0,0,0,0.97);pointer-events:all;}
.proj-detail-inner{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transform:translateY(32px);transition:opacity .35s ease,transform .35s cubic-bezier(0.23,1,0.32,1);padding:0 0 80px;}
.proj-detail.open .proj-detail-inner{opacity:1;transform:translateY(0);}
.pd-close{position:fixed;top:1.2rem;right:1.5rem;z-index:10001;background:none;border:none;color:rgba(255,255,255,0.4);font-size:2rem;cursor:pointer;line-height:1;transition:color .2s,transform .2s;font-family:inherit;display:none;}
.proj-detail.open .pd-close{display:block;}
.pd-close:hover{color:#e2b96f;transform:rotate(90deg);}
.pd-video-wrap{width:100%;aspect-ratio:16/9;max-height:70vh;background:#000;position:relative;overflow:hidden;}
.pd-video-wrap video{width:100%;height:100%;object-fit:contain;display:block;}
.pd-content{max-width:900px;margin:0 auto;padding:2.5rem 1.5rem 0;}
.pd-meta-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;}
.pd-category{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(226,185,111,0.7);background:rgba(226,185,111,0.08);border:1px solid rgba(226,185,111,0.2);padding:.22rem .65rem;border-radius:4px;}
.pd-year{font-size:.68rem;color:rgba(255,255,255,0.25);letter-spacing:.1em;}
.pd-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.6rem,4vw,2.8rem);font-weight:400;color:#fff;line-height:1.1;margin-bottom:1rem;}
.pd-title em{font-style:italic;color:#e2b96f;}
.pd-desc{font-size:.9rem;color:rgba(255,255,255,0.45);line-height:1.7;letter-spacing:.02em;max-width:620px;margin-bottom:2.5rem;}
.pd-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;}
.pd-photo{border-radius:6px;overflow:hidden;cursor:pointer;aspect-ratio:3/2;}
.pd-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(0.25,0.46,0.45,0.94);}
.pd-photo:hover img{transform:scale(1.05);}
.pd-lb{position:fixed;inset:0;z-index:10002;background:rgba(0,0,0,0.97);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;padding:1.5rem;}
.pd-lb.open{opacity:1;pointer-events:all;}
.pd-lb img{max-width:100%;max-height:90vh;border-radius:6px;object-fit:contain;}
.pd-lb-close{position:absolute;top:1.2rem;right:1.5rem;background:none;border:none;color:rgba(255,255,255,0.45);font-size:2rem;cursor:pointer;transition:color .2s,transform .2s;line-height:1;font-family:inherit;}
.pd-lb-close:hover{color:#e2b96f;transform:rotate(90deg);}
@media(max-width:700px){
  .port-scroll{padding:40px 0 100px;justify-content:flex-start;}
  .pd-photos{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){.pd-photos{grid-template-columns:1fr;}}