/* ============================================================
   DUSKON — luxury nocturnal landing
   Type: Bodoni Moda (editorial display) + Hanken Grotesk (UI)
   ============================================================ */

:root{
  /* Surfaces — deep, cool-neutral darks */
  --black:   #060709;
  --ink:     #0a0c10;
  --graphite:#101319;
  --smoke:   #181c24;
  --line:    rgba(236,232,223,0.10);
  --line-2:  rgba(236,232,223,0.18);

  /* Foreground */
  --bone:    #ece8df;   /* off-white, warm-neutral */
  --bone-dim:#a9a69d;
  --mute:    #6f7178;

  /* Night blue — cinematic cool */
  --night:   #0b1430;
  --night-2: #16224a;
  --night-glow: rgba(40,72,150,0.32);

  /* Gold — used with extreme restraint */
  --gold:    #c8a96b;
  --gold-dim:rgba(200,169,107,0.55);

  /* Type */
  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --pad: clamp(20px, 5vw, 90px);
  --maxw: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slow: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--black);
  color:var(--bone);
  line-height:1.55;
  font-weight:350;
  overflow-x:hidden;
  letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--gold); color:var(--black); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---- Film grain overlay (whole page) ---- */
.grain{
  position:fixed; inset:-50%;
  width:200%; height:200%;
  z-index:9000;
  pointer-events:none;
  opacity:0.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 16%{transform:translate(-4%,2%)}
  33%{transform:translate(3%,-3%)} 50%{transform:translate(-2%,4%)}
  66%{transform:translate(4%,1%)} 83%{transform:translate(-3%,-2%)}
  100%{transform:translate(0,0)}
}
/* subtle top/bottom cinematic vignette */
.vignette{
  position:fixed; inset:0; z-index:8000; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,0.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 14%, transparent 86%, rgba(0,0,0,0.55) 100%);
}

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; }

.eyebrow{
  font-size:11px; font-weight:500; letter-spacing:0.42em;
  text-transform:uppercase; color:var(--bone-dim);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--gold-dim);
  display:inline-block;
}
.eyebrow.center::before{ display:none; }

.h-display{
  font-family:var(--display);
  font-weight:500;
  line-height:0.98;
  letter-spacing:-0.01em;
  font-optical-sizing:auto;
}

/* Buttons */
.btn{
  --bg:transparent; --fg:var(--bone); --bd:var(--line-2);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:12px; padding:17px 34px; min-height:54px;
  font-size:12px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--fg); background:var(--bg);
  border:1px solid var(--bd); border-radius:2px;
  overflow:hidden; transition:color .6s var(--ease), border-color .6s var(--ease);
  white-space:nowrap;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--bone); transform:translateY(101%);
  transition:transform .6s var(--slow);
}
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ color:var(--black); border-color:var(--bone); }
.btn--solid{ --bg:var(--bone); --fg:var(--black); --bd:var(--bone); }
.btn--solid::after{ background:var(--black); }
.btn--solid:hover{ color:var(--bone); border-color:var(--bone); }
.btn--gold{ --bd:var(--gold-dim); --fg:var(--gold); }
.btn--gold::after{ background:var(--gold); }
.btn--gold:hover{ color:var(--black); border-color:var(--gold); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(34px);
  filter:blur(10px);
  transition:opacity 1.1s var(--slow), transform 1.1s var(--slow), filter 1.1s var(--slow);
  transition-delay:var(--d, 0ms);
}
.reveal.in{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
  .grain{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding-block:14px;
  background:rgba(8,9,12,0.62);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; }
/* Official DUSKON wordmark — bone, crossfades to gold on hover */
.logo-mark{
  position:relative; display:block;
  width:var(--logo-w, 122px);
  aspect-ratio:2600 / 534;
  transition:width .5s var(--ease);
}
.logo-mark img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; transition:opacity .45s var(--ease);
}
.logo-mark .lm-gold{ opacity:0; }
.brand:hover .logo-mark .lm-bone{ opacity:0; }
.brand:hover .logo-mark .lm-gold{ opacity:1; }
.nav.scrolled .brand .logo-mark{ width:104px; }
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bone-dim); position:relative; padding:4px 0;
  transition:color .4s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .45s var(--ease);
}
.nav-links a:hover{ color:var(--bone); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ margin-left:8px; }

/* language + currency toggles */
.nav-links{ margin-left:auto; }
.nav-utils{ display:flex; align-items:center; gap:10px; margin-left:30px; }
.seg{ display:flex; align-items:center; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; }
.seg button{
  font-family:var(--sans); cursor:pointer; background:none; border:0; color:var(--bone-dim);
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500;
  padding:7px 11px; min-width:30px; line-height:1;
  transition:color .35s var(--ease), background .35s var(--ease);
}
.seg button + button{ border-left:1px solid var(--line); }
.seg[data-toggle="cur"] button{ font-size:12px; letter-spacing:0; }
.seg button:hover:not(.on){ color:var(--bone); }
.seg button.on{ color:var(--black); background:var(--gold); }

/* ===== Region pill (nav) ===== */
.region-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line-2); border-radius:999px;
  background:none; color:var(--bone-dim);
  padding:7px 13px; line-height:1;
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.region-btn:hover{ color:var(--bone); border-color:var(--gold-dim); }
.rb-globe{ position:relative; width:13px; height:13px; border-radius:50%; border:1px solid currentColor; opacity:.85; flex:none; }
.rb-globe::before{ content:""; position:absolute; inset:-1px; border-radius:50%; border-left:1px solid currentColor; border-right:1px solid currentColor; transform:scaleX(.46); }
.rb-globe::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:currentColor; transform:translateY(-50%); }
.rb-dot{ width:2px; height:2px; border-radius:50%; background:currentColor; opacity:.45; }
.region-btn .rb-cur{ color:var(--gold); font-size:12px; letter-spacing:0; }
.rb-chev{ width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-1px); opacity:.65; margin-left:1px; flex:none; }

/* ===== Region modal ===== */
.region{
  position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.region.on{ opacity:1; visibility:visible; }
.rg-backdrop{ position:absolute; inset:0; background:rgba(4,5,7,0.84); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.rg-shell{
  position:relative; width:min(540px,100%); max-height:calc(100vh - 48px); overflow:visible;
  background:linear-gradient(180deg,#10131a,#0a0c10);
  border:1px solid var(--line-2); border-radius:5px;
  padding:clamp(30px,4.6vw,52px);
  box-shadow:0 50px 130px -45px rgba(0,0,0,.92);
  transform:translateY(16px) scale(.985); transition:transform .55s var(--slow);
}
.region.on .rg-shell{ transform:none; }
.rg-x{
  position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%;
  background:none; border:1px solid var(--line); color:var(--bone-dim); font-size:22px; line-height:1;
  display:grid; place-items:center;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.rg-x:hover{ color:var(--bone); border-color:var(--gold-dim); }
.rg-eyebrow{ display:block; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-dim); }
.rg-title{ font-size:clamp(27px,3.4vw,38px); font-weight:500; line-height:1.05; margin-top:14px; color:var(--bone); }
.rg-sub{ font-size:13px; line-height:1.65; color:var(--bone-dim); margin-top:14px; max-width:44ch; }
.rg-block{ margin-top:26px; }
.rg-lbl{ display:block; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--mute); margin-bottom:11px; }
.rg-lang{ display:inline-flex; }
.rg-lang button{ padding:9px 22px; font-size:10px; letter-spacing:0.1em; min-width:0; }

/* custom country dropdown */
.rg-select{ position:relative; }
.rg-trigger{
  width:100%; display:flex; align-items:center; gap:12px;
  background:none; border:1px solid var(--line-2); border-radius:3px;
  padding:15px 18px; color:var(--bone); text-align:left;
  font-family:var(--display); font-size:18px; font-weight:500;
  transition:border-color .3s var(--ease);
}
.rg-trigger:hover, .rg-select.open .rg-trigger{ border-color:var(--gold-dim); }
.rg-trig-name{ flex:1; }
.rg-trig-cur{ color:var(--gold); font-family:var(--sans); font-size:14px; letter-spacing:0; }
.rg-trig-chev{ width:8px; height:8px; border-right:1.5px solid var(--bone-dim); border-bottom:1.5px solid var(--bone-dim); transform:rotate(45deg) translateY(-3px); transition:transform .3s var(--ease); flex:none; }
.rg-select.open .rg-trig-chev{ transform:rotate(-135deg) translateY(-3px); }
.rg-list{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:5;
  max-height:300px; overflow-y:auto; padding:6px;
  background:#0c0f15; border:1px solid var(--line-2); border-radius:3px;
  box-shadow:0 34px 90px -32px rgba(0,0,0,.92);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.rg-select.open .rg-list{ opacity:1; visibility:visible; transform:none; }
.rg-list::-webkit-scrollbar{ width:8px; }
.rg-list::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; }
.rg-group{ font-size:9px; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold-dim); padding:15px 12px 7px; }
.rg-group:first-child{ padding-top:6px; }
.rg-opt{
  width:100%; display:flex; align-items:center; gap:10px;
  background:none; border:0; border-radius:2px; text-align:left;
  padding:11px 12px; color:var(--bone-dim);
  font-family:var(--sans); font-size:13px; letter-spacing:0.02em;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.rg-opt-name{ flex:1; }
.rg-opt-cur{ color:var(--mute); font-size:12px; min-width:36px; text-align:right; }
.rg-opt:hover{ background:rgba(236,232,223,0.05); color:var(--bone); }
.rg-opt.sel{ color:var(--bone); }
.rg-opt.sel .rg-opt-cur{ color:var(--gold); }
.rg-confirm{ display:flex; width:100%; justify-content:center; margin-top:30px; }

/* language dropdown (active + coming-soon) */
.rg-lang-select .rg-trigger{ font-size:16px; }
.rg-lopt.sel{ color:var(--bone); }
.rg-opt.is-soon{ cursor:not-allowed; color:var(--mute); opacity:0.72; }
.rg-opt.is-soon:hover{ background:none; color:var(--mute); }
.rg-soon{ flex:none; font-size:8px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-dim); border:1px solid var(--line); border-radius:999px; padding:3px 9px; }

/* DUSKON Living — coming-soon actions */
.lf-soon-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:6px; }
.lf-soon-actions .btn--ghost{ cursor:default; }

/* ===== Global search (lupa) ===== */
.ds-search-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-2); background:none; color:var(--bone-dim);
  transition:color .35s var(--ease), border-color .35s var(--ease);
  flex:none;
}
.ds-search-btn:hover{ color:var(--bone); border-color:var(--gold-dim); }
.ds-mag{ position:relative; width:15px; height:15px; flex:none; }
.ds-mag::before{ content:""; position:absolute; top:0; left:0; width:11px; height:11px; border:1.5px solid currentColor; border-radius:50%; }
.ds-mag::after{ content:""; position:absolute; right:-1px; bottom:0; width:6px; height:1.5px; background:currentColor; border-radius:1px; transform:rotate(45deg); transform-origin:right center; }

.ds-search{
  position:fixed; inset:0; z-index:2000; display:block;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.ds-search.on{ opacity:1; visibility:visible; }
.ds-search-bd{ position:absolute; inset:0; background:rgba(4,5,7,0.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.ds-search-panel{
  position:relative; width:min(720px,100%); margin:clamp(60px,12vh,140px) auto 0;
  padding:0 18px;
  transform:translateY(-12px); transition:transform .45s var(--slow);
}
.ds-search.on .ds-search-panel{ transform:none; }
.ds-search-box{
  display:flex; align-items:center; gap:16px;
  background:linear-gradient(180deg,#10131a,#0a0c10);
  border:1px solid var(--line-2); border-radius:5px;
  padding:18px 18px 18px 22px;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.92);
}
.ds-search-box .ds-mag{ width:19px; height:19px; color:var(--gold); }
.ds-search-box .ds-mag::before{ width:14px; height:14px; }
.ds-search-box .ds-mag::after{ width:7px; }
.ds-search-input{
  flex:1; background:none; border:0; outline:none; color:var(--bone);
  font-family:var(--display); font-size:clamp(20px,2.4vw,28px); font-weight:500; letter-spacing:-.01em;
}
.ds-search-input::placeholder{ color:var(--mute); }
.ds-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.ds-search-x{ background:none; border:1px solid var(--line); border-radius:3px; padding:6px 9px; color:var(--mute); transition:color .3s, border-color .3s; }
.ds-search-x:hover{ color:var(--bone); border-color:var(--gold-dim); }
.ds-kbd{ font-size:9px; letter-spacing:.18em; }

.ds-results{
  margin-top:10px; max-height:min(56vh,520px); overflow-y:auto; overflow-x:hidden;
  background:linear-gradient(180deg,#0c0f15,#0a0c10);
  border:1px solid var(--line); border-radius:5px; padding:8px;
  box-shadow:0 40px 120px -50px rgba(0,0,0,.9);
}
.ds-results::-webkit-scrollbar{ width:9px; }
.ds-results::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:9px; }
.ds-res-group{ font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-dim); padding:16px 12px 8px; }
.ds-res-group:first-child{ padding-top:8px; }
.ds-res{
  display:flex; align-items:center; gap:14px;
  padding:12px 12px; border-radius:3px; color:var(--bone-dim);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.ds-res:hover, .ds-res.on{ background:rgba(236,232,223,0.05); color:var(--bone); }
.ds-res-dot{ width:6px; height:6px; border-radius:50%; background:var(--mute); flex:none; }
.ds-res-dot[data-t="world"]{ background:var(--gold); }
.ds-res-dot[data-t="collection"]{ background:#9fc0ea; }
.ds-res-dot[data-t="product"]{ background:#d8c39a; }
.ds-res-dot[data-t="page"]{ background:var(--mute); }
.ds-res-main{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.ds-res-title{ font-family:var(--display); font-weight:500; font-size:17px; line-height:1.1; color:var(--bone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-res-cat{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-res-ar{ color:var(--gold-dim); font-size:14px; opacity:0; transition:opacity .25s var(--ease); flex:none; }
.ds-res:hover .ds-res-ar, .ds-res.on .ds-res-ar{ opacity:1; }
.ds-empty{ padding:30px 14px; color:var(--mute); font-size:14px; font-family:var(--display); font-style:italic; text-align:center; }
.ds-search-foot{ margin-top:14px; text-align:center; }
.ds-foot-hint{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
@media (max-width:600px){
  .ds-search-input{ font-size:19px; }
  .ds-res-title{ font-size:15px; }
}

.burger{
  display:none; width:44px; height:44px; background:none; border:none;
  flex-direction:column; align-items:flex-end; justify-content:center; gap:6px;
}
.burger span{ display:block; height:1px; width:26px; background:var(--bone); transition:transform .4s var(--ease), opacity .3s; }
.burger.open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-3.5px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu{
  position:fixed; inset:0; z-index:999;
  background:rgba(6,7,9,0.96);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:var(--pad);
  opacity:0; pointer-events:none; transform:translateY(-10px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.mobile-menu.open{ opacity:1; pointer-events:auto; transform:none; }
.mobile-menu a{
  font-family:var(--display); font-size:clamp(34px,11vw,58px);
  font-weight:500; line-height:1.18; color:var(--bone);
  display:flex; align-items:baseline; gap:18px;
}
.mobile-menu a .idx{ font-family:var(--sans); font-size:12px; letter-spacing:0.2em; color:var(--gold-dim); }
.mobile-menu .mm-foot{ margin-top:42px; display:flex; gap:24px; }
.mobile-menu .mm-foot a{ font-family:var(--sans); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--bone-dim); }
/* short / landscape viewports: keep the open menu readable and scrollable */
@media (max-height:620px){
  .mobile-menu{ justify-content:flex-start; padding-top:92px; overflow-y:auto; gap:2px; }
  .mobile-menu a{ font-size:clamp(24px,6vw,38px); }
  .mobile-menu .mm-foot{ margin-top:26px; }
}

/* ============================================================
   HERO — DUSKON UNIVERSE (3D clickable navigator)
   ============================================================ */
.hero.universe{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(104px,15vh,160px) var(--pad) clamp(64px,10vh,120px);
  background:var(--black);
  perspective:1300px; perspective-origin:50% 46%;
}
/* starfield (real image) + nebula */
.uni-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.uni-bg::before{
  content:""; position:absolute; inset:-6%;
  background:url("hero-starfield.jpg") center/cover no-repeat;
  animation:uni-drift 38s ease-in-out infinite alternate;
  will-change:transform;
}
.uni-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(42% 40% at 50% 44%, rgba(40,72,150,.18), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 38%, rgba(6,7,9,.55) 100%),
    linear-gradient(180deg, rgba(6,7,9,.5) 0%, transparent 26%, transparent 68%, rgba(6,7,9,.78) 100%);
}
@keyframes uni-drift{
  from{ transform:scale(1.04) translate3d(-1%,-0.5%,0); }
  to{ transform:scale(1.12) translate3d(1.5%,1%,0); }
}

/* scene + tilting field */
.uni-scene{
  position:relative; z-index:2;
  width:min(100%, 1000px); aspect-ratio:16/10; max-height:76vh;
  transform-style:preserve-3d;
}
.hero.universe .uni-scene{ opacity:1; }
.hero.universe.run .uni-scene{ animation:uni-in 1.1s var(--ease) both; }
@keyframes uni-in{ from{ opacity:0; transform:translateY(22px) scale(.95); } to{ opacity:1; transform:none; } }
.uni-field{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .5s var(--ease); will-change:transform;
}
/* orbital rings on a flattened plane */
.uni-orbit{
  position:absolute; left:50%; top:50%; border-radius:50%;
  border:1px solid var(--line); transform-style:preserve-3d; pointer-events:none;
}
.uni-orbit.o1{ width:38%; aspect-ratio:1; border-color:rgba(236,232,223,0.07); animation:uni-spin 64s linear infinite; }
.uni-orbit.o2{ width:68%; aspect-ratio:1; border-color:rgba(236,232,223,0.045); animation:uni-spin 104s linear infinite reverse; }
@keyframes uni-spin{
  from{ transform:translate(-50%,-50%) rotateX(70deg) rotateZ(0); }
  to{ transform:translate(-50%,-50%) rotateX(70deg) rotateZ(360deg); }
}
/* constellation lines */
.uni-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; pointer-events:none; }
.uni-lines line{ stroke:var(--gold-dim); stroke-width:.1; opacity:.3; }
.uni-lines-m{ display:none; position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; pointer-events:none; }
.uni-lines-m line{ stroke:var(--gold-dim); stroke-width:.4; opacity:.32; }

/* core */
.uni-core{
  position:absolute; left:50%; top:50%; z-index:5;
  transform:translate(-50%,-50%) translateZ(46px);
  display:grid; place-items:center; cursor:pointer; text-decoration:none;
}
.core-emblem{ position:relative; width:clamp(92px,11vw,138px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line); transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.uni-core:hover .core-emblem, .uni-core:focus-visible .core-emblem{ transform:scale(1.06); box-shadow:inset 0 0 0 1px var(--gold-dim), 0 0 60px rgba(200,169,107,.28); }
.uni-core:hover .core-mono, .uni-core:focus-visible .core-mono{ filter:drop-shadow(0 4px 24px rgba(200,169,107,.5)); }
.core-emblem::before{
  content:""; position:absolute; inset:-24%; border-radius:50%;
  background:radial-gradient(circle, rgba(200,169,107,.2), transparent 62%);
  animation:uni-pulse 6s ease-in-out infinite;
}
.core-emblem::after{ content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid var(--gold-dim); }
.core-emblem .mono{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(44px,5.2vw,70px); color:var(--bone); position:relative; }
.core-mono{ position:relative; display:block; width:62%; height:62%; object-fit:contain; object-position:center; filter:drop-shadow(0 4px 18px rgba(0,0,0,0.5)); transition:filter .5s var(--ease); }
.core-label{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:16px;
  font-size:9px; letter-spacing:.46em; text-transform:uppercase; color:var(--bone-dim); white-space:nowrap;
}
@keyframes uni-pulse{ 0%,100%{ transform:scale(1); opacity:.65 } 50%{ transform:scale(1.14); opacity:1 } }

/* nodes — orb anchored on the point, label hangs below */
.node{
  position:absolute; left:var(--x); top:var(--y); z-index:4;
  transform:translate(-50%,-50%) translateZ(var(--z,0px));
  text-decoration:none; cursor:pointer;
}
.node-inner{
  position:relative; display:grid; place-items:center;
  animation:node-pop .8s var(--ease) both var(--fd,0s),
            node-float var(--dur,6s) ease-in-out calc(var(--fd,0s) + .9s) infinite alternate;
}
.no-anim .node-inner{ animation:none !important; }
.node-orb{
  position:relative; width:clamp(56px,6.2vw,86px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(10,13,20,0.42);
  backdrop-filter:blur(7px) saturate(120%); -webkit-backdrop-filter:blur(7px) saturate(120%);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(236,232,223,0.06), 0 10px 34px rgba(0,0,0,0.45);
  transition:transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), background .55s var(--ease);
}
.node-orb::before{ content:""; position:absolute; inset:6px; border-radius:50%; border:1px solid var(--line); }
.node-orb::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid transparent; transition:border-color .55s var(--ease), inset .55s var(--ease); }
.node-rom{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(16px,1.8vw,23px); color:var(--gold-dim); transition:color .5s var(--ease); }
/* label sits below the orb without shifting the anchor */
.node-label{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:14px; display:flex; flex-direction:column; align-items:center; gap:6px;
  white-space:nowrap; text-align:center; pointer-events:none;
}
.node-name{ font-family:var(--display); font-weight:500; font-size:clamp(17px,1.9vw,25px); color:var(--bone); line-height:1; letter-spacing:0.005em; transition:color .5s var(--ease); }
.node-sub{ font-size:9px; letter-spacing:.36em; text-transform:uppercase; color:var(--mute); transition:color .5s var(--ease); }
.node:hover .node-orb, .node:focus-visible .node-orb{
  transform:scale(1.08); border-color:var(--gold-dim);
  background:rgba(16,20,30,0.55);
  box-shadow:inset 0 1px 0 rgba(236,232,223,0.08), 0 18px 50px rgba(200,169,107,.16);
}
.node:hover .node-orb::after, .node:focus-visible .node-orb::after{ border-color:var(--gold-dim); inset:-10px; }
.node:hover .node-rom, .node:focus-visible .node-rom{ color:var(--gold); }
.node:hover .node-name, .node:focus-visible .node-name{ color:var(--gold); }
.node:hover .node-sub, .node:focus-visible .node-sub{ color:var(--bone-dim); }
@keyframes node-pop{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes node-float{ from{ transform:translateY(0); } to{ transform:translateY(-7px); } }

/* overlay copy */
.uni-head{ position:absolute; top:clamp(100px,13vh,140px); left:var(--pad); right:var(--pad); z-index:5; display:flex; justify-content:space-between; gap:20px; }
.uni-head .uni-edge{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--mute); text-align:right; }
.uni-hint{
  position:absolute; bottom:clamp(26px,5vh,48px); left:50%; transform:translateX(-50%); z-index:5;
  display:inline-flex; align-items:center; gap:9px;
  font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:var(--mute);
  opacity:.78;
}
.uni-hint::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 8px var(--gold);
  animation:uni-pulse 2.6s ease-in-out infinite;
}

/* ---- warp transition (enter a world) ---- */
.universe.warping .uni-orbit,
.universe.warping .uni-lines,
.universe.warping .uni-core,
.universe.warping .uni-hint,
.universe.warping .uni-head,
.universe.warping .node:not(.is-selected){
  transition:opacity .4s var(--ease), transform .6s var(--ease);
  opacity:0; pointer-events:none;
}
.universe.warping .uni-field{
  transition:transform .66s cubic-bezier(.7,0,.84,0), filter .5s var(--ease);
  filter:blur(3px);
}
.universe.warping .node.is-selected{ opacity:0; transition:opacity .3s var(--ease) .22s; }
.universe.warping .node.is-selected .node-orb{
  transform:scale(2.2); border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 0 80px rgba(200,169,107,.55);
  transition:transform .5s cubic-bezier(.7,0,.84,0), box-shadow .5s var(--ease), border-color .4s var(--ease);
}

.warp-veil{ position:fixed; inset:0; z-index:120; pointer-events:all; }
.warp-disc{
  position:absolute; left:var(--cx); top:var(--cy);
  width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%;
  background:radial-gradient(circle, #182032 0%, #0a0e16 52%, #060709 100%);
  box-shadow:0 0 0 1px var(--gold-dim), 0 0 70px rgba(200,169,107,.45);
  transform:scale(.55); opacity:0; will-change:transform;
  transition:transform .68s cubic-bezier(.66,0,.84,0), opacity .28s var(--ease);
}
.warp-veil.go .warp-disc{ transform:scale(58); opacity:1; }
.warp-num{
  position:absolute; left:var(--cx); top:var(--cy);
  transform:translate(-50%,-50%) scale(.4); transform-origin:center;
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(90px,14vw,180px); line-height:1; color:var(--gold);
  text-shadow:0 0 50px rgba(200,169,107,.6); opacity:0; will-change:transform, opacity;
}
.warp-veil.go .warp-num{ animation:warp-dive .74s cubic-bezier(.66,0,.84,0) forwards; }
@keyframes warp-dive{
  0%{ transform:translate(-50%,-50%) scale(.4); opacity:0; }
  22%{ opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(7.5); opacity:0; }
}
.warp-veil.out{ opacity:0; transition:opacity .5s var(--ease); }
.no-anim .warp-veil{ display:none; }

/* ---- shared load-in motion ---- */
.ha{ opacity:0; }
.no-anim .ha{ opacity:1 !important; transform:none !important; animation:none !important; }
.hero.run .ha{ animation:haUp .7s var(--ease) both; animation-delay:calc(var(--i,0) * .11s + .25s); }
@keyframes haUp{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }

/* nav load-in (fade down, staggered) */
.nav .nav-ha{ opacity:0; }
.no-anim .nav .nav-ha{ opacity:1 !important; transform:none !important; animation:none !important; }
body.hero-ready .nav .nav-ha{ animation:haDown .6s var(--ease) both; animation-delay:calc(var(--i,0) * .09s + .1s); }
@keyframes haDown{ from{ opacity:0; transform:translateY(-18px); } to{ opacity:1; transform:none; } }

/* Keep the DUSKON Universe constellation on mobile (visual like desktop) */
@media (max-width:760px){
  .hero.universe{ padding-top:clamp(92px,15vh,140px); }
  /* taller portrait stage so the 5 worlds spread out and read clearly */
  .uni-scene{ width:100%; aspect-ratio:2/3; max-height:82vh; }
  .uni-lines{ display:none; }            /* nodes get bespoke mobile spots; hide the desktop lines */
  .uni-lines-m{ display:block; }         /* show the mobile lines that match the spread positions */
  .node-orb{ width:clamp(48px,13vw,62px); }
  .node-rom{ font-size:14px; }
  .node-name{ font-size:16px; }
  .node-sub{ font-size:8px; letter-spacing:.22em; }
  .node-label{ margin-top:9px; gap:3px; }
  /* spread the worlds apart (override the desktop inline positions) */
  .node[href="#catalog"]{ --x:28% !important; --y:15% !important; }
  .node[href="#events"]{ --x:72% !important; --y:15% !important; }
  .node[href="#studio"]{ --x:80% !important; --y:46% !important; }
  .node[href="#vision"]{ --x:20% !important; --y:46% !important; }
  .node[href="#historia"]{ --x:50% !important; --y:80% !important; }
  .uni-hint{ font-size:9px; letter-spacing:.28em; bottom:clamp(20px,4vh,40px); }
}
@media (max-width:760px) and (hover:none){
  .uni-field{ transform:none !important; }
}

/* ============================================================
   MANIFESTO (short)
   ============================================================ */
.manifesto{ padding:clamp(110px,16vh,210px) 0; }
.manifesto .lead{
  font-family:var(--display); font-weight:400;
  font-size:clamp(26px, 4.2vw, 56px); line-height:1.18;
  letter-spacing:-0.01em; max-width:20ch; text-wrap:balance;
}
.manifesto .lead .gold{ color:var(--gold); font-style:italic; }
.manifesto .grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(32px,6vw,90px); align-items:start; }
.manifesto .body{ color:var(--bone-dim); font-size:clamp(15px,1.2vw,17px); max-width:46ch; }
.manifesto .body p+p{ margin-top:20px; }

/* manifesto — entry video showcase */
.manifesto .grid{ align-items:center; }
.mf-media{ display:flex; flex-direction:column; gap:22px; }
.mf-media .eyebrow{ display:block; }
.mf-video-card{ position:relative; margin:0; border-radius:5px; overflow:hidden; background:#06070a; box-shadow:0 40px 90px -40px rgba(0,0,0,0.9); }
.mf-video{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; filter:saturate(1.04) contrast(1.04) brightness(0.84); transform:scale(1.02); transition:transform 1.4s var(--slow), filter 1.4s var(--slow); }
.mf-video-card:hover .mf-video{ transform:scale(1.06); filter:saturate(1.08) contrast(1.05) brightness(0.92); }
.mf-video-frame{ position:absolute; inset:12px; border:1px solid rgba(236,232,223,0.18); border-radius:3px; pointer-events:none; z-index:2; }
.mf-video-card::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,7,9,0.12) 0%, rgba(6,7,9,0) 38%, rgba(6,7,9,0.66) 100%); }
.mf-video-cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; gap:10px; }
.mf-cap-k{ font-size:10px; letter-spacing:0.34em; text-transform:uppercase; color:var(--gold); }
.mf-cap-line{ font-family:var(--display); font-weight:400; font-size:clamp(20px,2vw,27px); line-height:1.12; color:var(--bone); letter-spacing:-0.01em; }
.mf-cap-line em{ font-style:italic; color:var(--gold); }
@media (max-width:980px){
  .manifesto .grid{ align-items:start; }
  .mf-media{ max-width:440px; }
}

/* ============================================================
   DIVISIONS (tilt cards)
   ============================================================ */
.divisions{ padding:clamp(40px,7vh,80px) 0 clamp(90px,14vh,170px); }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(40px,6vw,72px); flex-wrap:wrap; }
.sec-head h2{ font-size:clamp(30px,5vw,64px); max-width:14ch; }
.sec-head .meta{ font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute); text-align:right; }

.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,1.6vw,26px); }
.card{
  --rx:0deg; --ry:0deg;
  position:relative; border:1px solid var(--line); border-radius:4px;
  background:linear-gradient(160deg, rgba(24,28,36,0.6), rgba(10,12,16,0.6));
  padding:clamp(28px,3vw,46px); min-height:clamp(320px,40vh,440px);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), border-color .6s var(--ease);
}
.card:hover{ border-color:var(--line-2); }
.card .glow{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, var(--night-glow), transparent 65%);
  top:var(--my,30%); left:var(--mx,50%); transform:translate(-50%,-50%);
  opacity:0; transition:opacity .6s var(--ease); pointer-events:none; filter:blur(10px);
}
.card:hover .glow{ opacity:1; }
.card .num{ font-family:var(--display); font-size:13px; letter-spacing:0.2em; color:var(--gold-dim); transform:translateZ(30px); }
.card .c-mid{ transform:translateZ(40px); }
.card h3{ font-family:var(--display); font-weight:500; font-size:clamp(30px,3.4vw,46px); line-height:1; margin-bottom:14px; }
.card .tag{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:22px; }
.card p{ color:var(--bone-dim); font-size:15px; max-width:34ch; }
.card .c-foot{ display:flex; align-items:center; justify-content:space-between; transform:translateZ(30px); margin-top:26px; }
.card .c-link{ font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--bone); display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.card .c-link .arrow{ transition:transform .5s var(--ease); }
.card:hover .c-link .arrow{ transform:translateX(6px); }
.card .status{ font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--mute); display:flex; align-items:center; gap:8px; }
.card .status::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); }

/* ============================================================
   FEATURED / DROPS
   ============================================================ */
.featured{ padding:clamp(40px,6vh,70px) 0 clamp(90px,14vh,170px); }
.drops{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,24px); }
.drop{ position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--graphite); }
.drop .media{ aspect-ratio:4/5; width:100%; position:relative; overflow:hidden; background:var(--smoke); }
.drop image-slot{ width:100%; height:100%; }
.drop .media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--slow), filter 1.2s var(--slow); filter:grayscale(0.3) brightness(0.85); }
.drop:hover .media img{ transform:scale(1.05); filter:grayscale(0) brightness(1); }
.drop .ribbon{
  position:absolute; top:16px; left:16px; z-index:3;
  font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
  padding:7px 13px; border:1px solid var(--line-2); border-radius:2px;
  background:rgba(6,7,9,0.5); backdrop-filter:blur(8px); color:var(--bone);
}
.drop .ribbon.soon{ color:var(--gold); border-color:var(--gold-dim); }
.drop .d-body{ padding:24px clamp(20px,2vw,28px) 28px; }
.drop .d-cat{ font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--mute); margin-bottom:12px; }
.drop h3{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.2vw,32px); line-height:1.04; margin-bottom:10px; }
.drop p{ color:var(--bone-dim); font-size:14px; }
.drop .d-foot{ margin-top:22px; display:flex; align-items:center; justify-content:space-between; padding-top:18px; border-top:1px solid var(--line); }
.drop .d-when{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--bone-dim); }
.drop .d-arrow{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); }

/* ============================================================
   EDITORIAL STATEMENT (full screen)
   ============================================================ */
.statement{
  min-height:92svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  border-block:1px solid var(--line);
}
.statement .bg{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(70% 80% at 50% 50%, rgba(22,34,74,0.4), transparent 70%);
}
.statement .wrap{ position:relative; z-index:2; }
.statement h2{
  font-size:clamp(38px,8vw,118px); line-height:1.0; letter-spacing:-0.02em;
  text-wrap:balance; max-width:16ch; margin:0 auto;
}
.statement h2 em{ font-style:italic; color:var(--gold); }
.statement .s-sub{ margin-top:34px; font-size:12px; letter-spacing:0.36em; text-transform:uppercase; color:var(--bone-dim); }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{ padding:clamp(90px,14vh,170px) 0; }
.g-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(120px,15vw,200px); gap:clamp(10px,1.2vw,18px);
}
.g-item{ position:relative; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.g-item image-slot{ width:100%; height:100%; display:block; }
.g-item .cap{
  position:absolute; left:14px; bottom:12px; z-index:4;
  font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--bone);
  text-shadow:0 1px 12px rgba(0,0,0,0.8); pointer-events:none;
}
.g-a{ grid-column:span 3; grid-row:span 2; }
.g-b{ grid-column:span 3; grid-row:span 1; }
.g-c{ grid-column:span 2; grid-row:span 1; }
.g-d{ grid-column:span 2; grid-row:span 2; }
.g-e{ grid-column:span 2; grid-row:span 1; }
.g-f{ grid-column:span 4; grid-row:span 1; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:clamp(40px,6vh,70px) 0 clamp(90px,14vh,170px); }
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(40px,6vw,100px); align-items:start; }
.contact h2{ font-size:clamp(34px,5.4vw,72px); margin-bottom:26px; max-width:11ch; }
.contact .c-copy{ color:var(--bone-dim); font-size:16px; max-width:38ch; margin-bottom:40px; }
.contact .channels{ display:flex; flex-direction:column; gap:2px; }
.contact .channels a{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; border-top:1px solid var(--line);
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .4s var(--ease), padding-left .4s var(--ease);
}
.contact .channels a:last-child{ border-bottom:1px solid var(--line); }
.contact .channels a:hover{ color:var(--bone); padding-left:10px; }
.contact .channels a .ch-arrow{ color:var(--gold); }

/* Form */
.form{ display:grid; gap:22px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ position:relative; display:flex; flex-direction:column; }
.field label{ font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--mute); margin-bottom:10px; }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:15px; color:var(--bone);
  background:transparent; border:none; border-bottom:1px solid var(--line-2);
  padding:12px 0; transition:border-color .4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--mute); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field select{ appearance:none; cursor:pointer; padding-right:24px; color-scheme:dark; }
.field.select-wrap::after{ content:"\25BE"; position:absolute; right:2px; bottom:12px; color:var(--mute); pointer-events:none; font-size:12px; }
.field select option{ background:var(--graphite); color:var(--bone); }
.field select option:disabled{ color:var(--mute); }
.field select option:checked{ background:var(--smoke); color:var(--bone); }

/* ---- custom dropdown (Motivo) ---- */
.field.select-wrap.dk-enhanced::after{ display:none; }
.dk-enhanced > select{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.dk-select{ display:none; position:relative; }
.dk-enhanced .dk-select{ display:block; }
.dk-select-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:12px 2px; color:var(--mute);
  font-family:var(--sans); font-size:15px; letter-spacing:0.01em; text-align:left;
  cursor:pointer; transition:border-color .4s var(--ease), color .4s var(--ease);
}
.dk-select-trigger:hover{ color:var(--bone-dim); }
.dk-select-value:not(.is-placeholder){ color:var(--bone); }
.dk-select.is-open .dk-select-trigger, .dk-select-trigger:focus-visible{ outline:none; border-color:var(--gold); color:var(--bone); }
.dk-select-caret{ width:8px; height:8px; border-right:1.5px solid var(--mute); border-bottom:1.5px solid var(--mute); transform:rotate(45deg) translateY(-2px); transition:transform .4s var(--ease), border-color .4s var(--ease); flex:none; }
.dk-select.is-open .dk-select-caret{ transform:rotate(-135deg) translateY(-1px); border-color:var(--gold); }
.dk-select-menu{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40;
  background:var(--graphite); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.4);
  padding:6px; max-height:min(48vh,320px); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(0.99); transform-origin:top center;
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.dk-select.is-open .dk-select-menu{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.dk-option{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 14px; border-radius:3px;
  font-family:var(--sans); font-size:14.5px; color:var(--bone-dim); letter-spacing:0.01em;
  cursor:pointer; transition:background .22s var(--ease), color .22s var(--ease);
}
.dk-option::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; opacity:0; transform:scale(0.4); transition:opacity .22s var(--ease), transform .22s var(--ease); }
.dk-option:hover, .dk-option.is-active{ background:var(--ink); color:var(--bone); }
.dk-option[aria-selected="true"]{ color:var(--bone); }
.dk-option[aria-selected="true"]::before{ opacity:1; transform:scale(1); }
.dk-select-menu::-webkit-scrollbar{ width:8px; }
.dk-select-menu::-webkit-scrollbar-thumb{ background:var(--smoke); border-radius:8px; border:2px solid var(--graphite); }
@media (max-width:560px){
  .dk-select-trigger{ font-size:16px; padding:13px 2px; }
  .dk-option{ padding:14px; font-size:15px; }
  .dk-select-menu{ max-height:54vh; }
}
.field textarea{ resize:vertical; min-height:110px; }
.form .form-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:6px; }
.form .consent{ font-size:11px; color:var(--mute); max-width:34ch; letter-spacing:0.02em; }
.form-success{ font-size:13px; letter-spacing:0.1em; color:var(--gold); display:none; }
.form-success.show{ display:block; }
.form-send{ margin-top:18px; padding-top:22px; border-top:1px solid var(--line); }
.form-send-q{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--bone); margin-bottom:14px; }
.form-send-opts{ display:flex; flex-wrap:wrap; gap:12px; }
.form-send-opts .btn{ flex:1 1 auto; min-width:160px; justify-content:center; }
.form-send-note{ font-size:12px; color:var(--mute); margin-top:14px; letter-spacing:0.01em; }
.form-send-note strong{ color:var(--bone-dim); font-weight:500; }
@media (max-width:560px){ .form-send-opts .btn{ flex:1 1 100%; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:clamp(60px,9vh,100px) 0 38px; border-top:1px solid var(--line); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:clamp(50px,7vh,80px); }
.footer .f-brand{ line-height:0; }
.footer .f-logo-mark{ display:block; width:clamp(220px, 34vw, 400px); height:auto; }
.footer .f-tag{ margin-top:20px; color:var(--mute); font-size:12px; letter-spacing:0.28em; text-transform:uppercase; }
.footer .f-col h4{ font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--mute); margin-bottom:20px; font-weight:500; }
.footer .f-col a{ display:block; font-size:14px; color:var(--bone-dim); padding:7px 0; transition:color .35s var(--ease); }
.footer .f-col a:hover{ color:var(--bone); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:18px; padding-top:30px; border-top:1px solid var(--line); flex-wrap:wrap; }
.footer-bottom span{ font-size:11px; letter-spacing:0.14em; color:var(--mute); }
.footer-bottom .f-legal{ display:flex; gap:24px; align-items:center; }
.f-legal-link{ background:none; border:none; padding:0; cursor:pointer; font-family:var(--sans); font-size:11px; letter-spacing:0.14em; color:var(--mute); transition:color .35s var(--ease); }
.f-legal-link:hover{ color:var(--bone); }

/* ===== Cookie banner ===== */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:1100;
  padding:0 clamp(16px,3vw,40px) clamp(16px,3vw,28px);
  transform:translateY(120%); opacity:0; transition:transform .7s var(--slow), opacity .5s var(--ease);
  pointer-events:none;
}
.cookie.show{ transform:none; opacity:1; pointer-events:auto; }
.cookie-inner{
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px); flex-wrap:wrap; justify-content:space-between;
  background:linear-gradient(180deg,rgba(18,21,28,0.96),rgba(10,12,16,0.96));
  border:1px solid var(--line); border-radius:6px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,0.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);
}
.cookie-text{ font-size:13px; line-height:1.6; color:var(--bone-dim); max-width:62ch; letter-spacing:0.01em; }
.cookie-more{ background:none; border:none; padding:0; margin-left:4px; cursor:pointer; font:inherit; color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.cookie-more:hover{ color:var(--bone); }
.cookie-acts{ display:flex; gap:10px; flex:none; }
.cookie-btn{ font-family:var(--sans); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; padding:11px 20px; border-radius:3px; transition:all .35s var(--ease); white-space:nowrap; }
.cookie-decline{ background:transparent; border:1px solid var(--line); color:var(--bone-dim); }
.cookie-decline:hover{ border-color:var(--bone-dim); color:var(--bone); }
.cookie-accept{ background:var(--gold); border:1px solid var(--gold); color:#1a1408; }
.cookie-accept:hover{ background:var(--bone); border-color:var(--bone); }
@media (max-width:620px){
  .cookie-inner{ flex-direction:column; align-items:stretch; }
  .cookie-acts{ flex-direction:column; }
  .cookie-btn{ width:100%; }
}

/* ===== Legal modal ===== */
.legal{
  position:fixed; inset:0; z-index:1300; display:grid; place-items:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.legal.on{ opacity:1; visibility:visible; }
.lg-backdrop{ position:absolute; inset:0; background:rgba(4,5,7,0.86); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.lg-shell{
  position:relative; width:min(680px,100%); max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#10131a,#0a0c10);
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(0,0,0,0.95);
  transform:translateY(16px) scale(.985); transition:transform .55s var(--slow);
}
.legal.on .lg-shell{ transform:none; }
.lg-x{
  position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%;
  background:rgba(236,232,223,0.06); border:1px solid var(--line); color:var(--bone-dim);
  font-size:22px; line-height:1; cursor:pointer; z-index:2; transition:all .3s var(--ease);
}
.lg-x:hover{ background:rgba(236,232,223,0.12); color:var(--bone); }
.lg-head{ padding:clamp(30px,4vw,44px) clamp(30px,4vw,48px) 22px; border-bottom:1px solid var(--line); }
.lg-eyebrow{ font-size:10px; letter-spacing:0.32em; text-transform:uppercase; color:var(--gold-dim); }
.lg-title{ font-family:var(--display); font-weight:500; font-size:clamp(28px,4vw,40px); line-height:1; margin-top:12px; }
.lg-scroll{ overflow-y:auto; padding:clamp(26px,3.4vw,40px) clamp(30px,4vw,48px) clamp(34px,4.4vw,52px); }
.lg-scroll::-webkit-scrollbar{ width:9px; }
.lg-scroll::-webkit-scrollbar-thumb{ background:var(--smoke); border-radius:9px; border:2px solid #0c0f14; }
.lg-lead{ font-family:var(--display); font-style:italic; font-size:clamp(17px,2vw,21px); line-height:1.45; color:var(--bone); margin-bottom:30px; }
.lg-doc h4{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-dim); margin:26px 0 9px; }
.lg-doc h4:first-of-type{ margin-top:0; }
.lg-doc p{ font-size:14px; line-height:1.7; color:var(--bone-dim); margin-bottom:8px; }
.lg-doc p strong{ color:var(--bone); font-weight:500; }
.lg-doc a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.lg-doc a:hover{ color:var(--bone); }
.lg-cookie-acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
@media (max-width:560px){ .lg-cookie-acts .cookie-btn{ flex:1 1 100%; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .manifesto .grid{ grid-template-columns:1fr; gap:36px; }
  .cards{ grid-template-columns:1fr; }
  .drops{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:50px; }
  .footer-top{ grid-template-columns:1fr; gap:40px; }
  .g-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(150px,40vw,220px); }
  .g-a,.g-b,.g-c,.g-d,.g-e,.g-f{ grid-column:span 1; grid-row:span 1; }
  .g-a{ grid-column:span 2; }
  .g-f{ grid-column:span 2; }
}
/* Nav collapses to the premium mobile menu before the 5 links can crowd the logo */
@media (max-width:980px){
  .nav-links{ display:none; }
  .nav-utils{ margin-left:auto; margin-right:4px; gap:8px; }
  .burger{ display:flex; }
}
@media (max-width:760px){
  .card{ min-height:300px; }
  .form-row{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
  .card .c-foot{ flex-direction:column; align-items:flex-start; gap:12px; }
  .card .status{ font-size:9px; }
}
@media (hover:none){
  .card{ transform:none !important; } /* disable tilt on touch */
}

/* ============================================================
   STORY / HISTORIA — dark editorial chapter
   ============================================================ */
.story{
  position:relative; overflow:hidden;
  padding:clamp(100px,15vh,200px) 0;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(22,34,74,0.22), transparent 62%),
    linear-gradient(180deg, var(--black) 0%, #08090c 48%, var(--black) 100%);
  border-block:1px solid var(--line);
}
.story-head{
  text-align:center; max-width:20ch; margin:0 auto clamp(60px,9vh,118px);
  padding-inline:var(--pad);
}
.story-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:11px; font-weight:500; letter-spacing:0.42em; text-transform:uppercase;
  color:var(--gold-dim); margin-bottom:30px;
}
.story-eyebrow::before, .story-eyebrow::after{
  content:""; width:30px; height:1px; background:var(--gold-dim); flex-shrink:0;
}
.story-title{
  font-size:clamp(38px,7vw,104px); line-height:1.0; letter-spacing:-0.015em; text-wrap:balance;
}
.story-title em{ font-style:italic; color:var(--gold); }
.story-kicker{
  margin-top:28px; font-size:12px; letter-spacing:0.4em; text-transform:uppercase; color:var(--mute);
}

.story-body{
  max-width:728px; margin:0 auto; padding-inline:var(--pad);
  display:flex; flex-direction:column; gap:clamp(40px,7vh,72px);
}
.chapter-mark{
  display:flex; align-items:center; gap:16px;
  font-size:11px; font-weight:500; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--gold-dim); margin-bottom:26px;
}
.chapter-mark span{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5em; height:2.5em; border:1px solid var(--gold-dim); border-radius:50%;
  font-family:var(--display); font-style:italic; font-size:15px; color:var(--gold); flex-shrink:0;
}
.chapter{ display:flex; flex-direction:column; gap:22px; }
.story-text{
  font-size:clamp(16px,1.35vw,18px); line-height:1.95; font-weight:300;
  color:var(--bone-dim); letter-spacing:0.01em; text-wrap:pretty;
}
.story-text em{ font-style:italic; color:var(--gold); font-weight:400; }
.story-text--lead::first-letter{
  float:left; font-family:var(--display); font-weight:500;
  font-size:clamp(56px,9vw,84px); line-height:0.74; padding:0.04em 0.16em 0 0; color:var(--gold);
}
.story-heading{
  font-family:var(--display); font-weight:500;
  font-size:clamp(30px,4.4vw,52px); line-height:1.08; letter-spacing:-0.01em; color:var(--bone);
  margin-bottom:4px;
}
.story-heading em{ font-style:italic; color:var(--gold); }
.story-quote{
  position:relative; padding:clamp(24px,4vh,40px) clamp(28px,5vw,48px);
  border-left:2px solid var(--gold-dim);
  background:linear-gradient(90deg, rgba(200,169,107,0.06), transparent);
}
.story-quote p{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(22px,3vw,34px); line-height:1.45; color:var(--bone); text-wrap:balance;
}
.story-divider{ display:flex; align-items:center; justify-content:center; gap:18px; }
.story-divider span:not(.diamond){
  width:clamp(50px,14vw,100px); height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.diamond{ width:7px; height:7px; flex-shrink:0; transform:rotate(45deg); border:1px solid var(--gold-dim); }
.story-closing{ display:flex; flex-direction:column; gap:10px; }
.closing-line{ font-size:clamp(16px,1.6vw,19px); line-height:1.7; color:var(--bone-dim); font-weight:300; }
.closing-line--gold{
  font-family:var(--display); font-style:italic; font-size:clamp(22px,3vw,34px);
  color:var(--gold); margin-top:14px; line-height:1.4; text-wrap:balance;
}
.story-signature{
  text-align:right; font-family:var(--display); font-style:italic; font-size:clamp(20px,2.4vw,28px);
  color:var(--bone-dim); letter-spacing:0.04em;
  padding-top:clamp(24px,4vh,40px); border-top:1px solid var(--line);
}
.story-cta-wrap{ display:flex; justify-content:center; padding-top:8px; }

@media (max-width:760px){
  .story-quote{ padding:22px 22px 22px 24px; }
  .story-signature{ text-align:left; }
}

/* ============================================================
   ANCHOR OFFSET (fixed nav)
   ============================================================ */
section[id], header[id]{ scroll-margin-top:96px; }

/* ============================================================
   CATALOG — collections
   ============================================================ */
.catalog{ padding:clamp(40px,6vh,70px) 0 clamp(90px,14vh,170px); }
.collections{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,34px); }
.col-card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:5px; overflow:hidden;
  background:linear-gradient(165deg, rgba(24,28,36,0.55), rgba(10,12,16,0.6));
  transition:border-color .6s var(--ease);
}
.col-card:hover{ border-color:var(--line-2); }
.col-card.is-soldout{ opacity:0.92; }
.col-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--smoke); }
.col-media image-slot{ width:100%; height:100%; display:block; }
.col-card.is-soldout .col-media{ filter:grayscale(0.55) brightness(0.7); }
.col-badge{
  position:absolute; top:16px; left:16px; z-index:3;
  font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
  padding:8px 14px; border-radius:2px; border:1px solid var(--line-2);
  background:rgba(6,7,9,0.55); backdrop-filter:blur(8px); color:var(--bone);
}
.col-badge.sold{ color:#e9b8b0; border-color:rgba(206,128,116,0.5); }
.col-badge.live{ color:var(--gold); border-color:var(--gold-dim); }
.col-no{
  position:absolute; bottom:16px; right:18px; z-index:3;
  font-family:var(--display); font-style:italic; font-size:clamp(40px,5vw,72px);
  color:rgba(236,232,223,0.16); line-height:0.8; pointer-events:none;
}
.col-body{ padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; gap:18px; flex:1; }
.col-ey{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--mute); }
.col-title{ font-family:var(--display); font-weight:500; font-size:clamp(28px,3.6vw,48px); line-height:0.98; }
.col-title em{ font-style:italic; color:var(--gold); }
.col-desc{ color:var(--bone-dim); font-size:15px; max-width:42ch; }
.col-foot{ margin-top:auto; padding-top:22px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.col-meta{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--bone-dim); }
.btn--ghost{ --bd:var(--line-2); --fg:var(--bone-dim); pointer-events:none; }
.btn[disabled]{ opacity:0.5; pointer-events:none; }

/* countdown */
.cd-wrap{ display:flex; flex-direction:column; gap:14px; }
.cd-cap{ font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-dim); }
.countdown{ display:flex; gap:clamp(8px,1.2vw,14px); }
.cd-unit{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  min-width:clamp(52px,6vw,72px); padding:14px 10px;
  border:1px solid var(--line); border-radius:3px; background:rgba(8,10,16,0.55);
}
.cd-num{ font-family:var(--display); font-weight:500; font-size:clamp(24px,3vw,40px); color:var(--bone); line-height:1; font-variant-numeric:tabular-nums; }
.cd-lbl{ font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute); }
.cd-sep{ align-self:center; font-family:var(--display); color:var(--gold-dim); font-size:clamp(20px,2.4vw,30px); }

/* ============================================================
   EVENTS — Black & White
   ============================================================ */
.events{ padding:clamp(40px,6vh,70px) 0 clamp(90px,14vh,170px); }
.event-feature{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,3.4vw,56px); align-items:center; margin-bottom:clamp(40px,6vh,72px); }
.event-media{ position:relative; aspect-ratio:5/6; border:1px solid var(--line); border-radius:5px; overflow:hidden; background:var(--smoke); }
.event-media image-slot{ width:100%; height:100%; display:block; }
.event-media .ev-frame{ position:absolute; inset:14px; border:1px solid rgba(236,232,223,0.18); pointer-events:none; z-index:2; }
.event-date{ display:flex; align-items:baseline; gap:14px; font-family:var(--display); font-weight:500; font-size:clamp(34px,4.6vw,64px); color:var(--bone); line-height:1; }
.event-date .sep{ color:var(--gold); }
.event-title{ font-family:var(--display); font-weight:500; font-size:clamp(40px,7vw,96px); line-height:0.92; margin:20px 0 6px; }
.event-title em{ font-style:italic; color:var(--gold); }
.event-amp{ font-style:italic; color:var(--gold); }
.event-meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--bone-dim); }
.event-meta span{ display:inline-flex; align-items:center; gap:9px; }
.event-meta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.event-copy{ color:var(--bone-dim); font-size:15px; max-width:42ch; margin-top:22px; }

/* events — coming soon / curiosity */
.event-media .ev-soon-tag{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; font-size:10px; letter-spacing:0.34em; text-transform:uppercase; color:var(--bone); padding:9px 16px; border:1px solid rgba(236,232,223,0.28); border-radius:2px; background:rgba(6,7,9,0.55); backdrop-filter:blur(4px); white-space:nowrap; }
.ev-soon-eyebrow{ display:inline-block; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:18px; }
.event-soon-date{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(34px,4.6vw,62px); color:var(--bone); line-height:1; }
.event-soon-date .dot{ color:var(--gold); font-style:normal; }
.event-meta--soon span::before{ background:var(--gold-dim); }
.ev-soon-cta{ margin-top:28px; }
.ev-soon-strip{ margin-top:clamp(34px,5vh,60px); padding:clamp(18px,2vw,26px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(14px,2vw,30px); font-family:var(--display); font-style:italic; font-size:clamp(15px,1.6vw,22px); color:var(--mute); }
.ev-soon-strip span:nth-child(odd){ color:var(--bone-dim); }
.ev-soon-strip span:nth-child(even){ color:var(--gold-dim); }

.tickets-head{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--mute); margin-bottom:22px; }
.tickets{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); }
.ticket{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:clamp(22px,2vw,30px); border:1px solid var(--line); border-radius:4px;
  background:var(--graphite); transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.ticket:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.ticket.vip{ border-color:var(--gold-dim); background:linear-gradient(165deg, rgba(200,169,107,0.09), rgba(10,12,16,0.6)); }
.tk-tier{ font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--bone-dim); }
.ticket.vip .tk-tier{ color:var(--gold); }
.tk-price{ font-family:var(--display); font-weight:500; font-size:clamp(34px,4vw,54px); line-height:1; color:var(--bone); }
.tk-price .cur{ color:var(--gold); font-size:0.5em; vertical-align:0.35em; margin-left:2px; }
.tk-note{ font-size:12px; color:var(--mute); line-height:1.5; min-height:2.6em; }
.tk-stock{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-dim); margin-top:-4px; }
.tk-stock .tks-n{ color:var(--gold); font-weight:600; }
.ticket.is-out .tk-stock{ color:var(--bone-dim); }
.ticket.is-out .tk-stock .tks-n{ color:var(--bone-dim); }
.tk-btn{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center;
  padding:13px 18px; min-height:46px; border:1px solid var(--line-2); border-radius:2px;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--bone);
  background:transparent; transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.tk-btn:hover{ background:var(--bone); color:var(--black); border-color:var(--bone); }
.ticket.vip .tk-btn{ border-color:var(--gold-dim); color:var(--gold); }
.ticket.vip .tk-btn:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }
/* sold-out ticket */
.ticket.is-soldout{ opacity:0.62; }
.ticket.is-soldout .tk-price,
.ticket.is-soldout .tk-tier{ color:var(--bone-dim); }
.ticket.is-soldout .tk-price .cur{ color:var(--bone-dim); }
.tk-sold{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center;
  padding:13px 18px; min-height:46px; border:1px solid var(--line); border-radius:2px;
  font-size:11px; letter-spacing:0.26em; text-transform:uppercase; color:var(--bone-dim);
}

/* ============================================================
   CHECKOUT modal (Bizum / Transferencia)
   ============================================================ */
.checkout{
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,40px);
}
.checkout.open{ display:flex; }
.co-backdrop{ position:absolute; inset:0; background:rgba(4,5,8,0.72); backdrop-filter:blur(10px); animation:coFade .4s var(--ease) both; }
.co-panel{
  position:relative; z-index:2; width:min(540px,100%); max-height:92vh; overflow-y:auto;
  background:linear-gradient(170deg, #14171f 0%, #0b0e14 100%);
  border:1px solid var(--line-2); border-radius:8px;
  padding:clamp(26px,3.4vw,44px); box-shadow:0 40px 120px rgba(0,0,0,0.6);
  animation:coRise .5s var(--ease) both;
}
@keyframes coFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes coRise{ from{ opacity:0; transform:translateY(24px) scale(.98) } to{ opacity:1; transform:none } }
.co-x{
  position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%;
  background:none; border:1px solid var(--line); color:var(--bone-dim); font-size:22px; line-height:1; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.co-x:hover{ color:var(--bone); border-color:var(--line-2); }
.co-eyebrow{ font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-dim); }
.co-title{ font-family:var(--display); font-weight:500; font-size:clamp(26px,3.4vw,40px); line-height:1; margin:12px 0 24px; }
.co-title em{ font-style:italic; color:var(--gold); }

.co-form{ display:flex; flex-direction:column; gap:18px; }
.co-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.checkout .field{ display:flex; flex-direction:column; gap:8px; }
.checkout .field label, .co-lbl{ font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute); }
.checkout .field input{
  font-family:var(--sans); font-size:15px; color:var(--bone);
  background:transparent; border:none; border-bottom:1px solid var(--line-2);
  padding:11px 0; transition:border-color .4s var(--ease);
}
.checkout .field input:focus{ outline:none; border-color:var(--gold); }
.co-qty{ display:flex; align-items:center; gap:14px; padding-top:4px; }
.co-qty button{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); background:transparent;
  color:var(--bone); font-size:18px; line-height:1; cursor:pointer; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.co-qty button:hover{ border-color:var(--gold); color:var(--gold); }
.co-qval{ font-family:var(--display); font-size:22px; color:var(--bone); min-width:24px; text-align:center; }

.co-pay .co-lbl{ display:block; margin-bottom:12px; }
/* attendee names */
.co-names .co-lbl{ display:block; margin-bottom:12px; }
.co-names-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.co-name-in{
  font-family:var(--sans); font-size:14px; color:var(--bone);
  background:transparent; border:none; border-bottom:1px solid var(--line-2);
  padding:10px 0; transition:border-color .4s var(--ease);
}
.co-name-in:focus{ outline:none; border-color:var(--gold); }
@media (max-width:480px){ .co-names-list{ grid-template-columns:1fr; } }
.pay-opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pay-opt{ cursor:pointer; }
.pay-opt input{ position:absolute; opacity:0; pointer-events:none; }
.po-card{
  display:flex; flex-direction:column; gap:4px; padding:16px 18px;
  border:1px solid var(--line-2); border-radius:4px; transition:border-color .35s var(--ease), background .35s var(--ease);
}
.po-card strong{ font-weight:500; font-size:15px; color:var(--bone); letter-spacing:0.02em; }
.po-card small{ font-size:11px; color:var(--mute); letter-spacing:0.04em; }
.pay-opt input:checked + .po-card{ border-color:var(--gold); background:rgba(200,169,107,0.08); }

.co-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:6px; }
.co-breakdown{ display:flex; flex-direction:column; gap:7px; min-width:180px; }
.co-bd-row{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; font-size:13px; color:var(--bone-dim); }
.co-bd-row span:last-child{ font-variant-numeric:tabular-nums; color:var(--bone); }
.co-bd-total{ margin-top:5px; padding-top:9px; border-top:1px solid var(--line); }
.co-bd-total .co-lbl{ color:var(--bone); }
.co-bd-total .co-total{ font-family:var(--display); font-size:clamp(22px,2.6vw,30px); color:var(--bone); }
.co-total{ font-family:var(--display); font-size:clamp(26px,3vw,38px); color:var(--bone); line-height:1; }
.co-submit{ flex:1; min-width:180px; }
.co-consent{ font-size:11px; line-height:1.6; color:var(--mute); margin-top:4px; }

/* pay stage */
.co-pay-intro{ color:var(--bone-dim); font-size:14px; line-height:1.7; margin-bottom:24px; max-width:42ch; }
.co-paygrid{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; margin-bottom:22px; }
.co-detail{ border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.co-d-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; border-bottom:1px solid var(--line); }
.co-d-row:last-child{ border-bottom:none; }
.co-d-val{ font-family:var(--display); font-size:clamp(16px,1.5vw,20px); color:var(--bone); text-align:right; letter-spacing:0.02em; }
.co-d-row [data-co="ref"]{ color:var(--gold); letter-spacing:0.08em; }
.co-qrwrap{ margin:0; display:flex; flex-direction:column; align-items:center; gap:9px; }
.co-qr{ width:138px; height:138px; border-radius:6px; background:#fff; padding:8px; display:block; box-shadow:0 8px 30px rgba(0,0,0,0.4); }
.co-qr-cap{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute); }
.co-actions{ display:flex; gap:12px; margin-bottom:12px; }
.co-actions .btn{ flex:1; }
.co-mail{ --bd:var(--line-2); --fg:var(--bone); }
.co-again{ width:100%; --bd:var(--line-2); --fg:var(--bone-dim); }

@media (max-width:480px){
  .co-row, .pay-opts{ grid-template-columns:1fr; }
  .co-foot{ flex-direction:column; align-items:stretch; }
  .co-paygrid{ grid-template-columns:1fr; justify-items:center; }
  .co-actions{ flex-direction:column; }
}

/* ============================================================
   STUDIO — services
   ============================================================ */
.studio{ padding:clamp(40px,6vh,70px) 0 clamp(90px,14vh,170px); }
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2px,0.4vw,6px); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.svc{ position:relative; padding:clamp(28px,3vw,48px); background:var(--ink); display:flex; flex-direction:column; gap:14px; transition:background .5s var(--ease); overflow:hidden; }
.svc::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--gold); transform:scaleY(0); transform-origin:top; transition:transform .55s var(--ease); }
.svc::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 0% 0%, rgba(200,169,107,0.07), transparent 55%); opacity:0; transition:opacity .55s var(--ease); pointer-events:none; }
.svc:hover{ background:var(--graphite); }
.svc:hover::before{ transform:scaleY(1); }
.svc:hover::after{ opacity:1; }
.svc-no{ font-family:var(--display); font-style:italic; font-size:13px; letter-spacing:0.18em; color:var(--gold-dim); transition:color .5s var(--ease); }
.svc:hover .svc-no{ color:var(--gold); }
.svc h3{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.8vw,38px); line-height:1; transition:transform .55s var(--ease); }
.svc:hover h3{ transform:translateX(8px); }
.svc p{ color:var(--bone-dim); font-size:14px; max-width:40ch; }
.svc .svc-tags{ margin-top:6px; display:flex; flex-wrap:wrap; gap:8px; }
.svc-tags span{ font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute); padding:6px 11px; border:1px solid var(--line); border-radius:2px; }

/* fifth, larger card — back office */
.svc--wide{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(280px,0.85fr) 1.4fr; gap:clamp(28px,3.4vw,60px); padding:clamp(34px,3.4vw,56px); }
.svc-wide-head{ display:flex; flex-direction:column; gap:14px; }
.svc-wide-head h3{ font-family:var(--display); font-weight:500; font-size:clamp(26px,3vw,42px); line-height:1; transition:transform .55s var(--ease); }
.svc--wide:hover .svc-wide-head h3{ transform:translateX(8px); }
.svc-wide-head > p{ color:var(--bone-dim); font-size:14px; max-width:34ch; }
.svc-wide-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.svc-sub{ position:relative; background:var(--ink); padding:clamp(20px,1.6vw,28px); display:flex; flex-direction:column; gap:9px; transition:background .5s var(--ease); }
.svc--wide:hover .svc-sub{ background:var(--graphite); }
.svc-sub-no{ font-family:var(--display); font-style:italic; font-size:12px; letter-spacing:0.18em; color:var(--gold-dim); }
.svc-sub h4{ font-family:var(--display); font-weight:500; font-size:clamp(17px,1.4vw,21px); line-height:1.08; color:var(--bone); }
.svc-sub p{ color:var(--bone-dim); font-size:13px; line-height:1.5; max-width:38ch; }
@media (max-width:720px){
  .svc--wide{ grid-template-columns:1fr; }
  .svc-wide-list{ grid-template-columns:1fr; }
}
.studio-cta{ margin-top:clamp(34px,5vh,56px); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.studio-cta-acts{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.studio-cta p{ font-family:var(--display); font-style:italic; font-size:clamp(22px,3vw,38px); color:var(--bone-dim); max-width:20ch; }
.studio-cta em{ color:var(--gold); }

/* ============================================================
   VISION — DUSKON LIVING (furniture sub-shop)
   ============================================================ */
.vision-shop{ padding:clamp(40px,6vh,70px) 0 clamp(90px,14vh,170px); }
.shop-intro{ max-width:52ch; color:var(--bone-dim); font-size:clamp(15px,1.3vw,18px); margin-bottom:clamp(36px,5vh,60px); }
.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); }
.product{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--graphite); transition:border-color .5s var(--ease); }
.product:hover{ border-color:var(--line-2); }
.product .p-media{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--smoke); }
.product .p-media image-slot{ width:100%; height:100%; display:block; }
.product .p-tag{ position:absolute; top:14px; left:14px; z-index:3; font-size:9px; letter-spacing:0.22em; text-transform:uppercase; padding:6px 11px; border:1px solid var(--line-2); border-radius:2px; background:rgba(6,7,9,0.5); backdrop-filter:blur(8px); color:var(--bone-dim); }
.product .p-body{ padding:22px clamp(18px,1.6vw,26px) 24px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product .p-cat{ font-size:10px; letter-spacing:0.26em; text-transform:uppercase; color:var(--mute); }
.product h3{ font-family:var(--display); font-weight:500; font-size:clamp(22px,2vw,30px); line-height:1.02; }
.product .p-foot{ margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.product .p-price{ font-family:var(--display); font-size:clamp(18px,1.6vw,24px); color:var(--bone); }
.product .p-price .cur{ color:var(--gold); }
.product .p-add{
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--bone);
  padding:9px 14px; border:1px solid var(--line-2); border-radius:2px; background:transparent;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.product .p-add:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }
.product .p-add.added{ background:var(--bone); color:var(--black); border-color:var(--bone); }

/* coming soon (DUSKON Living) */
.product .p-soon{
  position:absolute; top:14px; right:14px; z-index:3;
  font-size:9px; letter-spacing:0.22em; text-transform:uppercase; font-weight:500;
  padding:6px 11px; border:1px solid var(--gold-dim); border-radius:2px;
  background:rgba(6,7,9,0.5); backdrop-filter:blur(8px); color:var(--gold);
}
.product.is-soon .p-media image-slot{ filter:grayscale(0.3) brightness(0.82); transition:filter .6s var(--ease); }
.product.is-soon:hover .p-media image-slot{ filter:grayscale(0) brightness(0.92); }
.p-soon-label{ font-size:10px; letter-spacing:0.26em; text-transform:uppercase; color:var(--bone-dim); }

/* DUSKON Living — handmade sofas feature (coming soon) */
.living-feature{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; align-items:stretch;
  border:1px solid var(--line); border-radius:5px; overflow:hidden;
  background:linear-gradient(165deg, rgba(24,28,36,0.5), rgba(10,12,16,0.6));
}
.lf-media{ position:relative; min-height:clamp(300px,46vh,500px); background:var(--smoke); overflow:hidden; }
.lf-media image-slot{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.lf-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(1.05) contrast(1.04) brightness(0.82); transform:scale(1.04);
  transition:transform 1.6s var(--slow), filter 1.6s var(--slow); }
.living-feature:hover .lf-video{ transform:scale(1.08); filter:saturate(1.1) contrast(1.05) brightness(0.92); }
.lf-media::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(155deg, rgba(6,7,9,0.18) 0%, rgba(6,7,9,0) 40%, rgba(6,7,9,0.55) 100%); }
.lf-media-frame{ position:absolute; inset:14px; z-index:2; border:1px solid rgba(236,232,223,0.16); border-radius:3px; pointer-events:none; }
.lf-media .p-soon{
  position:absolute; top:18px; left:18px; z-index:3;
  font-size:9px; letter-spacing:0.22em; text-transform:uppercase; font-weight:500;
  padding:7px 12px; border:1px solid var(--gold-dim); border-radius:2px;
  background:rgba(6,7,9,0.5); backdrop-filter:blur(8px); color:var(--gold);
}
.lf-body{ padding:clamp(30px,3.6vw,60px); display:flex; flex-direction:column; justify-content:center; gap:18px; }
.lf-cat{ font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--mute); }
.lf-title{ font-family:var(--display); font-weight:500; font-size:clamp(34px,4.6vw,62px); line-height:0.98; }
.lf-title em{ font-style:italic; color:var(--gold); }
.lf-copy{ color:var(--bone-dim); font-size:clamp(15px,1.2vw,17px); line-height:1.72; max-width:46ch; }
.lf-soon{
  margin-top:8px; align-self:flex-start;
  font-size:10px; letter-spacing:0.26em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-dim); border-radius:2px; padding:10px 15px;
}
@media (max-width:860px){
  .living-feature{ grid-template-columns:1fr; }
  .lf-media{ min-height:300px; }
}

/* ===== DUSKON Living — entrance animation (on navigation) ===== */
.vision-shop{ position:relative; }
.lf-sweep{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 38%, rgba(201,168,106,0.28) 50%, transparent 62%);
  transform:translateX(-130%); mix-blend-mode:screen; }
@media (prefers-reduced-motion:no-preference){
  .vision-shop.living-enter .sec-head h2{ animation:liv-rise .85s var(--ease) both; }
  .vision-shop.living-enter .sec-head .meta{ animation:liv-rise .85s .1s var(--ease) both; }
  .vision-shop.living-enter .shop-intro{ animation:liv-rise .95s .18s var(--ease) both; }
  .vision-shop.living-enter .living-feature{ animation:liv-feature 1.15s .22s var(--slow) both; }
  .vision-shop.living-enter .lf-body > *{ animation:liv-rise .9s var(--ease) both; }
  .vision-shop.living-enter .lf-body > *:nth-child(1){ animation-delay:.5s; }
  .vision-shop.living-enter .lf-body > *:nth-child(2){ animation-delay:.6s; }
  .vision-shop.living-enter .lf-body > *:nth-child(3){ animation-delay:.7s; }
  .vision-shop.living-enter .lf-body > *:nth-child(4){ animation-delay:.8s; }
  .vision-shop.living-enter .lf-sweep{ animation:liv-sweep 1.5s .3s var(--slow) both; }
}
@keyframes liv-rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes liv-feature{
  from{ opacity:0; transform:translateY(42px) scale(.985); clip-path:inset(0 0 10% 0); }
  to{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
}
@keyframes liv-sweep{
  0%{ opacity:0; transform:translateX(-130%); }
  28%{ opacity:1; }
  100%{ opacity:0; transform:translateX(130%); }
}

/* ============================================================
   INVESTORS / PARTNERSHIPS
   ============================================================ */
.invest{ padding:clamp(40px,6vh,70px) 0 clamp(90px,14vh,170px); }
.invest-soon{
  display:inline-block; vertical-align:middle; margin-left:14px;
  font-family:var(--sans); font-weight:500; font-size:clamp(9px,0.9vw,12px);
  letter-spacing:0.24em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-dim); border-radius:2px; padding:7px 12px;
  transform:translateY(-0.35em);
}
.btn.is-soon{ pointer-events:none; opacity:0.55; }
.invest-grid{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(28px,4vw,72px); align-items:start; }
.invest-copy{ font-size:clamp(16px,1.5vw,21px); line-height:1.6; color:var(--bone-dim); max-width:46ch; }
.invest-copy{ font-family:var(--display); font-weight:400; }
.invest-points{ list-style:none; margin:clamp(28px,4vh,42px) 0; padding:0; display:flex; flex-direction:column; }
.invest-points li{
  display:flex; align-items:baseline; gap:16px; padding:18px 0;
  border-top:1px solid var(--line); font-size:clamp(14px,1.1vw,16px); color:var(--bone);
}
.invest-points li:last-child{ border-bottom:1px solid var(--line); }
.ip-no{ font-family:var(--display); font-style:italic; color:var(--gold-dim); font-size:13px; flex-shrink:0; }
.invest-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,4vh,40px); }

.invest-card{
  border:1px solid var(--line); border-radius:5px; padding:clamp(24px,2.4vw,34px);
  background:linear-gradient(165deg, rgba(200,169,107,0.06), rgba(10,12,16,0.5));
  display:flex; flex-direction:column;
}
.ic-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); }
.ic-row:first-child{ padding-top:0; }
.ic-k{ font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--mute); }
.ic-v{ font-family:var(--display); font-size:clamp(15px,1.3vw,19px); color:var(--bone); text-align:right; }
.ic-note{ margin-top:18px; font-size:12px; line-height:1.6; color:var(--mute); }

@media (max-width:860px){
  .invest-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ============================================================
   STATEMENT — relocated video background
   ============================================================ */
.statement{ position:relative; }
.st-video-wrap{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.st-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06) translateY(var(--sy,0px)); filter:saturate(1.04) contrast(1.03) brightness(0.62); }
.st-video-wrap::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 80% at 50% 50%, rgba(22,34,74,0.34), transparent 72%),
    linear-gradient(180deg, rgba(6,7,9,0.78) 0%, rgba(6,7,9,0.4) 42%, rgba(6,7,9,0.82) 100%);
}
.statement .st-tag{ margin-top:30px; display:inline-flex; align-items:center; gap:12px; font-size:11px; letter-spacing:0.34em; text-transform:uppercase; color:var(--bone-dim); }
.statement .st-tag::before{ content:""; width:30px; height:1px; background:var(--gold-dim); }

@media (max-width:980px){
  .collections{ grid-template-columns:1fr; }
  .event-feature{ grid-template-columns:1fr; }
  .tickets{ grid-template-columns:repeat(2,1fr); }
  .svc-grid{ grid-template-columns:1fr; }
  .shop-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .tickets{ grid-template-columns:1fr; }
  .shop-grid{ grid-template-columns:1fr; }
  .countdown{ gap:6px; }
}

/* ============================================================
   PRELOADER — monogram fusion (SVG: the D and the moon assemble)
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:radial-gradient(120% 100% at 50% 42%, #0b0f1a 0%, #070a12 46%, #050608 100%);
  cursor:pointer;
}
.preloader::after{ /* faint starfield continuity */
  content:""; position:absolute; inset:0;
  background:url("hero-starfield.jpg") center/cover no-repeat; opacity:.35; pointer-events:none;
}
.pl-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }

.dk-preloader{ width:clamp(124px,15vw,196px); color:var(--bone); display:block; }
.dk-preloader svg{ width:100%; height:auto; display:block; overflow:visible; }
.dk-preloader path{ fill:currentColor; }

/* breathing + fusion flash (one-shot, holds fused) */
.dk-logo{ transform-box:fill-box; transform-origin:center; }
.preloader.go .dk-logo{
  animation:dk-breathe 2.8s ease-in-out .2s 1 both;
}
/* The gold fusion flash is a drop-shadow. Mobile WebKit (iOS Safari/Chrome)
   does NOT render filter:drop-shadow on an inner SVG <g>, so the flash was
   invisible on phones. Apply it to the wrapper <div> instead, where
   drop-shadow works on every browser — identical look on desktop. */
.preloader.go .dk-preloader{
  animation:dk-flash 2.8s ease-out .2s 1 both;
}
@keyframes dk-breathe{ 0%{transform:scale(.985)} 78%{transform:scale(1.008)} 100%{transform:scale(1)} }
@keyframes dk-flash{
  0%,68%{ filter:drop-shadow(0 0 0 rgba(200,169,107,0)); }
  78%   { filter:drop-shadow(0 0 16px rgba(200,169,107,.85)); }
  92%   { filter:drop-shadow(0 0 0 rgba(200,169,107,0)); }
  100%  { filter:drop-shadow(0 0 0 rgba(200,169,107,0)); }
}

.dk-d{ transform-box:fill-box; transform-origin:center; }
.preloader.go .dk-d{ animation:dk-d-in 2.8s ease-out .2s 1 both; }
@keyframes dk-d-in{ 0%{opacity:.55; transform:scale(.97)} 12%{opacity:1; transform:scale(1)} 100%{opacity:1; transform:scale(1)} }

/* the moon: enter → wrong fit → recoil → retry → SNAP, then hold fused */
.dk-moon{ transform-box:fill-box; transform-origin:center; opacity:0; }
.preloader.go .dk-moon{ animation:dk-moon-enter 2.8s .2s 1 both; }
@keyframes dk-moon-enter{
  0%  {opacity:0; transform:translate(56px,-34px) rotate(18deg) scale(1.045);
       animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  18% {opacity:1; transform:translate(11px,7px)   rotate(8deg)  scale(1);
       animation-timing-function:linear}
  30% {opacity:1; transform:translate(11px,7px)   rotate(8deg);
       animation-timing-function:cubic-bezier(.6,-0.45,.7,.15)}
  41% {opacity:1; transform:translate(21px,-12px) rotate(13deg);
       animation-timing-function:cubic-bezier(.45,0,.2,1)}
  58% {opacity:1; transform:translate(-7px,5px)   rotate(-5deg);
       animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
  70% {opacity:1; transform:translate(0,0)        rotate(0deg);}
  100%{opacity:1; transform:translate(0,0)        rotate(0deg);}
}

.pl-word{ width:clamp(116px,13vw,168px); margin-top:30px; opacity:0; filter:brightness(.96); }
.preloader.go .pl-word{ animation:plWord .8s var(--ease) 1.9s both; }
.pl-line{ margin-top:22px; width:150px; height:1px; background:var(--line); overflow:hidden; opacity:0; }
.pl-line span{ display:block; height:100%; width:0; background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.preloader.go .pl-line{ animation:plLineShow .01s linear .4s both; }
.preloader.go .pl-line span{ animation:plLineFill 2.4s var(--ease) .45s both; }

@keyframes plWord{ from{ opacity:0; transform:translateY(12px); } to{ opacity:.92; transform:none; } }
@keyframes plLineShow{ to{ opacity:1; } }
@keyframes plLineFill{ 0%{ width:0; } 100%{ width:100%; } }

/* exit */
.preloader.done{ animation:plOut .85s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes plOut{ to{ opacity:0; transform:scale(1.06); visibility:hidden; } }
.no-anim .preloader, .preloader.skip{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  .preloader{ display:none !important; }
}

/* ============================================================
   MOBILE POLISH & PERFORMANCE  (2026-06-19)
   - removes the bottom-edge seam caused by fixed overlays when the
     mobile browser's dynamic toolbar shows/hides
   - lighter compositing on touch devices for smoother scrolling
   ============================================================ */

/* No horizontal sub-pixel overflow anywhere (kills faint side strips) */
html, body{ overflow-x:clip; }

/* The cinematic vignette is position:fixed; inset:0 — on phones the
   dynamic toolbar can expose a 1px seam at its bottom edge. Bleed it a
   few px past every edge so no line can ever appear. */
.vignette{ inset:-4px; }

/* Touch / small screens: drop the most expensive perpetual effects. */
@media (hover:none), (max-width:760px){
  /* Full-screen animated film grain with mix-blend-mode forces a repaint
     of the whole viewport every frame. At 0.045 opacity it's invisible on
     a phone, so we remove it entirely for a big smoothness win. */
  .grain{ display:none !important; }

  /* Reveal-on-scroll without the heavy animated blur (keeps the fade +
     slide and the original stagger, just no per-frame blur repaint). */
  .reveal{ filter:none; transition-property:opacity, transform; }
  .reveal.in{ filter:none; }

  /* Lighter nav blur keeps scrolling fluid. */
  .nav{ backdrop-filter:blur(12px) saturate(115%); -webkit-backdrop-filter:blur(12px) saturate(115%); }

  /* The cinematic vignette is position:fixed, so on phones its dark bottom
     band stays pinned to the screen edge while you scroll and reads as a
     fixed line/shadow at the bottom. Phones don't need it — turn it off so
     there is no fixed overlay at all (grain is already off above). */
  .vignette{ display:none !important; }
}

/* Living feature never spills past the viewport on small screens. */
@media (max-width:860px){
  .living-feature{ max-width:100%; }
}