@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:wght@300;400;500&display=swap');

/* ─── TOKENS ─── */
:root {
  --dk:    #06050f;
  --dk2:   #0d0b1e;
  --dk3:   #171430;
  --lt:    #fdf9f6;
  --lt2:   #f5ece3;
  --lt3:   #ece0d6;
  --gold:  #c8983a;
  --gold2: #e0b850;
  --gold3: #f4d880;
  --rose:  #b86898;
  --rose2: #d888b8;
  --blush: #eeaece;
  --sakura:#fbd8ea;
  --sky:   #3aaae0;
  --sky2:  #68ccf8;
  --tw:    #f4ebe6;
  --tl:    #180e08;
  --md:    #807098;
  --ml:    #906e60;
  --bd:    rgba(200,152,58,.18);
  --bl:    rgba(200,152,58,.14);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Inter', sans-serif; background: var(--dk); color: var(--tw); overflow-x: hidden; cursor: none; }

/* ─── SCROLL PROGRESS ─── */
#prog {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 9999; width: 0%;
  background: linear-gradient(90deg, var(--sky), var(--gold2), var(--rose2));
  transition: width .08s linear;
  pointer-events: none;
}

/* ─── LOADER ─── */
#loader {
  position: fixed; inset: 0; z-index: 9000; background: var(--dk);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px;
  transition: opacity .7s ease, visibility .7s ease;
}
#loader.out { opacity: 0; visibility: hidden; }
.ld-k {
  font-family: 'Cormorant Garamond', serif;
  font-size: 6rem; font-weight: 300; color: var(--gold2);
  animation: ldPulse 1.5s ease-in-out infinite;
}
.ld-bar { width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: ldBar 1.5s ease forwards; }
@keyframes ldPulse { 0%,100%{opacity:.3;transform:scale(.95)} 50%{opacity:1;transform:scale(1.02)} }
@keyframes ldBar   { to { width: 140px; } }

/* ─── CURSOR (desktop only) ─── */
@media (pointer:fine) {
  .cur { position: fixed; pointer-events: none; z-index: 8000; transform: translate(-50%,-50%); }
  .cur-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--gold3); }
  .cur-ring {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(200,152,58,.5); background: transparent;
    transition: left .1s ease, top .1s ease, width .25s, height .25s, border-color .25s;
  }
  body.ch .cur-ring { width: 58px; height: 58px; border-color: var(--gold2); }
}
@media (pointer:coarse) {
  .cur { display: none !important; }
  body { cursor: auto; }
}

/* ─── GRAIN ─── */
body::after {
  content:''; position: fixed; inset:0; pointer-events:none; z-index:9001; opacity:.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── NAV ─── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:500;
  padding: 22px 56px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .4s, padding .4s, backdrop-filter .4s;
}
nav.on {
  background: rgba(6,5,15,.92); backdrop-filter: blur(16px);
  padding: 14px 56px; border-bottom: 1px solid var(--bd);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif; font-size:1.55rem; font-weight:300; letter-spacing:.08em;
  color: var(--tw); text-decoration: none; position:relative; z-index:502;
}
.nav-logo em { font-style: italic; color: var(--gold2); }
.nav-links { display:flex; gap:38px; list-style:none; }
.nav-links a {
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--md); text-decoration:none; transition: color .3s; position:relative;
}
.nav-links a::after { content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--gold2); transition:width .3s; }
.nav-links a:hover { color: var(--gold2); }
.nav-links a:hover::after, .nav-links a.act::after { width:100%; }
.nav-links a.act { color: var(--gold2); }

/* hamburger */
.nav-ham {
  display: none; flex-direction:column; gap:5px; background:none; border:none;
  cursor:pointer; padding:6px; position:relative; z-index:502;
}
.nav-ham span {
  display:block; width:22px; height:1px; background:var(--gold2);
  transition: transform .35s cubic-bezier(.77,0,.18,1), opacity .25s;
  transform-origin: center;
}
.nav-ham.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-ham.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-ham.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ─── HERO ─── */
#hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  background: var(--dk); overflow: hidden;
}
#aurora { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
#sk     { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

/* star field */
.h-stars {
  position:absolute; inset:0; pointer-events:none; z-index:1;
}
.h-stars::before {
  content:''; position:absolute; width:2px; height:2px; border-radius:50%; background:transparent;
  box-shadow:
    80px 180px 0 0 rgba(255,255,255,.28), 240px 72px 0 0 rgba(255,255,255,.22),
    390px 295px 0 0 rgba(244,216,128,.3), 560px 140px 0 0 rgba(255,255,255,.20),
    720px 360px 0 0 rgba(255,255,255,.25), 880px 88px 0 0 rgba(255,255,255,.22),
    1040px 260px 0 0 rgba(244,216,128,.28), 1160px 42px 0 0 rgba(255,255,255,.18),
    1320px 200px 0 0 rgba(255,255,255,.22), 160px 440px 0 0 rgba(255,255,255,.18),
    440px 490px 0 0 rgba(255,255,255,.20), 680px 520px 0 0 rgba(244,216,128,.22),
    920px 460px 0 0 rgba(255,255,255,.18), 1100px 500px 0 0 rgba(255,255,255,.20);
  animation: twinkle 4s ease-in-out infinite;
}
.h-stars::after {
  content:''; position:absolute; width:1px; height:1px; border-radius:50%; background:transparent;
  box-shadow:
    150px 100px 0 0 rgba(255,255,255,.18), 310px 260px 0 0 rgba(255,255,255,.15),
    500px 55px 0 0 rgba(255,255,255,.20), 660px 320px 0 0 rgba(255,255,255,.15),
    820px 150px 0 0 rgba(255,255,255,.18), 980px 400px 0 0 rgba(104,204,248,.22),
    1140px 230px 0 0 rgba(255,255,255,.15), 1280px 110px 0 0 rgba(255,255,255,.18),
    340px 390px 0 0 rgba(104,204,248,.18), 800px 480px 0 0 rgba(255,255,255,.15);
  animation: twinkle 5.5s 1.2s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.55} 50%{opacity:1} }

.h-glow {
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(ellipse 55% 60% at 20% 60%, rgba(184,104,152,.14) 0%, transparent 70%),
    radial-gradient(ellipse 35% 30% at 8%  88%, rgba(200,152,58,.10) 0%, transparent 60%);
}
.h-content { position:relative; z-index:4; padding:0 56px; max-width:640px; margin-top:60px; }
.h-eye {
  display:inline-flex; align-items:center; gap:12px;
  font-size:.67rem; letter-spacing:.38em; text-transform:uppercase;
  color:var(--gold2); margin-bottom:32px;
  opacity:0; transform:translateY(14px); animation: fup .8s 1.5s ease forwards;
}
.h-eye::before { content:''; width:26px; height:1px; background:var(--gold2); }
.h-title { font-family:'Cormorant Garamond',serif; font-size:clamp(4rem,9vw,8.2rem); font-weight:300; line-height:.94; letter-spacing:-.02em; }
.h-title .w { display:block; overflow:hidden; }
.h-title .w span { display:block; transform:translateY(110%); animation: sup .9s cubic-bezier(.16,1,.3,1) forwards; }
.h-title .w:nth-child(1) span { animation-delay:1.6s; }
.h-title .w:nth-child(2) span { animation-delay:1.75s; color:var(--gold2); font-style:italic; }
.h-sub {
  font-size:.85rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--md); margin-top:18px; margin-bottom:30px;
  opacity:0; animation: fup .8s 2s ease forwards;
}
.h-sub span { color:var(--blush); }
.h-desc {
  font-size:1rem; line-height:1.8; color:rgba(244,235,230,.50);
  max-width:400px; margin-bottom:46px;
  opacity:0; animation: fup .8s 2.1s ease forwards;
}
.h-btns {
  display:flex; align-items:center; gap:22px;
  opacity:0; animation: fup .8s 2.25s ease forwards;
}
.btn-p {
  display:inline-flex; align-items:center; gap:12px; padding:14px 34px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:var(--dk); text-decoration:none;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  transition: all .35s; position:relative; overflow:hidden;
}
.btn-p::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, var(--gold2), var(--gold3));
  opacity:0; transition:opacity .35s;
}
.btn-p:hover::before { opacity:1; }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(200,152,58,.35); }
.btn-p > * { position:relative; z-index:1; }
.btn-g { display:inline-flex; align-items:center; gap:10px; color:var(--md); text-decoration:none; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; transition:color .3s; }
.btn-g:hover { color:var(--blush); }

/* ─── HERO PHOTO — CINEMATIC BLEND ─── */
.h-photo-glow {
  position:absolute; right:0; top:0; bottom:0; width:62%;
  pointer-events:none; z-index:2;
  background:
    radial-gradient(ellipse 65% 70% at 62% 55%, rgba(200,152,58,.18) 0%, transparent 62%),
    radial-gradient(ellipse 38% 48% at 90% 25%, rgba(58,170,224,.10) 0%, transparent 58%);
  filter: blur(48px);
}
.h-photo {
  position:absolute; right:0; top:0; bottom:0; width:46%; overflow:hidden; z-index:3;
}
.h-photo-clip {
  width:100%; height:100%;
  clip-path: inset(0 0 0 100%);
  animation: rRight 1.1s cubic-bezier(.77,0,.18,1) 1.1s forwards;
}
.h-photo img {
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block; transform:scale(1.08);
  animation: zOut 8s 1.1s ease forwards;
  filter: saturate(0.82) brightness(0.80) contrast(1.08);
}
.h-photo-ov {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right,  var(--dk) 0%, rgba(6,5,15,.58) 22%, transparent 50%),
    linear-gradient(to bottom, rgba(6,5,15,.52) 0%, transparent 18%, transparent 65%, var(--dk) 100%),
    linear-gradient(to left,   var(--dk) 0%, rgba(6,5,15,.32) 12%, transparent 28%);
}
.h-scroll {
  position:absolute; bottom:36px; left:56px; z-index:4;
  display:flex; align-items:center; gap:14px;
  font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; color:var(--md);
  opacity:0; animation: fup .8s 2.5s ease forwards;
}
.h-scroll-bar { width:48px; height:1px; background:var(--md); position:relative; overflow:hidden; }
.h-scroll-bar::after {
  content:''; position:absolute; left:-48px; top:0; width:48px; height:1px; background:var(--gold2);
  animation: sBar 2s 2.5s ease-in-out infinite;
}
@keyframes sBar { 0%{left:-48px} 100%{left:48px} }

/* ─── TICKER ─── */
.ticker {
  overflow:hidden; white-space:nowrap; position:relative; z-index:10;
  background:var(--dk2);
  border-top:1px solid rgba(200,152,58,.12); border-bottom:1px solid rgba(200,152,58,.12);
  padding:11px 0;
}
.ticker::before, .ticker::after {
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:1; pointer-events:none;
}
.ticker::before { left:0;  background:linear-gradient(to right, var(--dk2), transparent); }
.ticker::after  { right:0; background:linear-gradient(to left,  var(--dk2), transparent); }
.ticker-track { display:inline-flex; animation:tickerScroll 40s linear infinite; }
.ticker-item {
  display:inline-flex; align-items:center; gap:18px; padding:0 32px;
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--md); white-space:nowrap;
}
.ticker-item em { font-style:normal; color:var(--gold2); }
.ticker-item::after { content:'✦'; color:rgba(200,152,58,.35); font-size:.48rem; margin-left:18px; }
@keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ─── ABOUT — LIGHT ─── */
#about {
  background:var(--lt); padding:120px 56px;
  display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center;
  border-top:3px solid var(--gold); position:relative; overflow:hidden;
}
#about::before {
  content:''; position:absolute; pointer-events:none;
  top:-120px; right:-80px; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,152,58,.07) 0%, transparent 70%);
  animation:orbFloat 13s ease-in-out infinite;
}
#about::after {
  content:''; position:absolute; pointer-events:none;
  bottom:-100px; left:-100px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,104,152,.05) 0%, transparent 70%);
  animation:orbFloat 16s 2.5s ease-in-out infinite;
}
.a-tag {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.68rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px;
}
.a-tag::before { content:'✦'; font-size:.5rem; }
.a-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem,4.5vw,3.6rem); font-weight:300; line-height:1.1;
  color:var(--tl); margin-bottom:10px;
}
.a-title em { font-style:italic; color:var(--gold); }
.a-loc { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--gold); letter-spacing:.12em; margin-bottom:26px; }
.a-body { font-size:1rem; line-height:1.85; color:rgba(24,14,8,.58); margin-bottom:40px; }
.a-stats { display:flex; gap:44px; }
.a-stat-n { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:300; color:var(--gold); line-height:1; letter-spacing:-.02em; }
.a-stat-l { font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ml); margin-top:4px; }
.a-right { position:relative; height:580px; }
.af { position:absolute; overflow:hidden; border:2px solid rgba(200,152,58,.15); }
.af img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease; }
.af:hover img { transform:scale(1.04); }
.af:nth-child(1) { width:70%; height:78%; top:0; right:0; }
.af:nth-child(2) { width:52%; height:55%; bottom:0; left:0; border-color:rgba(200,152,58,.2); }
.af-rev { clip-path:inset(100% 0 0 0); }
.af-rev.vis { animation:rUp 1s cubic-bezier(.77,0,.18,1) forwards; }
.af:nth-child(2).af-rev.vis { animation-delay:.15s; }

/* ─── WORKS — DARK ─── */
#works { padding:120px 56px; background:var(--dk); }
.sec-label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.68rem; letter-spacing:.35em; text-transform:uppercase; margin-bottom:18px;
}
.sec-label::before { content:'✦'; font-size:.5rem; }
.sec-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.2rem,4.5vw,3.6rem); font-weight:300; line-height:1.1; }
.sec-title em { font-style:italic; color:var(--gold); }
.w-top { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:60px; }
.w-filters { display:flex; gap:4px; }
.fb {
  padding:9px 22px; background:transparent; border:1px solid transparent;
  color:var(--md); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer; transition:all .3s; font-family:'Inter',sans-serif;
}
.fb:hover,.fb.on { border-color:var(--bd); color:var(--gold2); background:rgba(200,152,58,.06); }

/* 10-item mosaic grid */
.wg {
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:300px; gap:3px;
}
.wc { position:relative; overflow:hidden; background:var(--dk2); cursor:pointer; }
.wc:nth-child(1)  { grid-column:span 7; }
.wc:nth-child(2)  { grid-column:span 5; grid-row:span 2; }
.wc:nth-child(3)  { grid-column:span 3; }
.wc:nth-child(4)  { grid-column:span 4; }
.wc:nth-child(5)  { grid-column:span 4; }
.wc:nth-child(6)  { grid-column:span 4; }
.wc:nth-child(7)  { grid-column:span 4; }
.wc:nth-child(8)  { grid-column:span 6; }
.wc:nth-child(9)  { grid-column:span 6; }
.wc:nth-child(10) { grid-column:span 12; grid-row:span 1; }
.wc img {
  width:100%; height:100%; object-fit:cover; object-position:center 15%;
  display:block; transition:transform .85s cubic-bezier(.25,.46,.45,.94);
}
.wc:hover img { transform:scale(1.07); }
.wc-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,5,15,.94) 0%, rgba(6,5,15,.12) 50%, transparent 100%);
  opacity:0; transition:opacity .45s;
  display:flex; flex-direction:column; justify-content:flex-end; padding:24px 26px;
}
.wc:hover .wc-ov { opacity:1; }
.wc-ttl {
  font-family:'Cormorant Garamond',serif; font-size:1.45rem; font-weight:300;
  transform:translateY(10px); transition:transform .45s; margin-bottom:5px;
}
.wc-tag {
  font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold2);
  transform:translateY(10px); transition:transform .45s .06s;
}
.wc:hover .wc-ttl, .wc:hover .wc-tag { transform:translateY(0); }
/* curtain reveal */
.wc::before {
  content:''; position:absolute; inset:0; background:var(--dk2); z-index:2;
  transform:scaleY(1); transform-origin:top; transition:transform 1s cubic-bezier(.77,0,.18,1);
}
.wc.rvld::before { transform:scaleY(0); }
.wc:nth-child(2)::before { transition-delay:.12s; }
.wc:nth-child(3)::before { transition-delay:.22s; }
.wc:nth-child(4)::before { transition-delay:.34s; }
.wc:nth-child(5)::before { transition-delay:.16s; }
.wc:nth-child(6)::before { transition-delay:.28s; }
.wc:nth-child(7)::before { transition-delay:.40s; }

/* gold glow on hover */
.wc::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 0 1px rgba(200,152,58,.5);
  transition:opacity .4s;
}
.wc:hover::after { opacity:1; }

/* ─── SVG ART STRIP ─── */
#art-strip { background:var(--dk); overflow:hidden; position:relative; border-top:1px solid rgba(200,152,58,.1); }

/* ─── VIDEOS — LIGHT ─── */
#videos { padding:120px 56px; background:var(--lt); border-top:1px solid rgba(200,152,58,.12); }
.v-head { margin-bottom:60px; }
.v-head .sec-title { color:var(--tl); }
.v-sub { font-size:.9rem; color:var(--ml); margin-top:14px; line-height:1.65; }
.vg { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.vc {
  background:var(--lt2); border:1px solid rgba(200,152,58,.14);
  overflow:hidden; transition:border-color .35s, transform .35s, box-shadow .35s; cursor:pointer;
}
.vc:hover { border-color:rgba(200,152,58,.45); transform:translateY(-6px); box-shadow:0 24px 55px rgba(0,0,0,.12), 0 0 0 1px rgba(200,152,58,.15); }
.vt { aspect-ratio:16/9; position:relative; overflow:hidden; }
.vt img { width:100%; height:100%; object-fit:cover; object-position:center 15%; transition:transform .7s; }
.vc:hover .vt img { transform:scale(1.06); }
.vplay {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:rgba(200,152,58,.2); border:1px solid rgba(200,152,58,.6);
  display:flex; align-items:center; justify-content:center;
  transition:all .3s; backdrop-filter:blur(8px); z-index:3;
}
.vc:hover .vplay { background:rgba(200,152,58,.45); transform:translate(-50%,-50%) scale(1.14); box-shadow:0 0 30px rgba(200,152,58,.3); }
.vt::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(160deg, transparent 30%, rgba(0,0,0,.50) 100%);
}
.vt::before {
  content:''; position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px);
  transition:opacity .45s;
}
.vc:hover .vt::before { opacity:1; }
.v-cat { position:absolute; bottom:13px; left:16px; z-index:3; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,235,230,.6); text-shadow:0 1px 4px rgba(0,0,0,.7); }
.v-soon { position:absolute; top:13px; right:13px; z-index:3; padding:4px 12px; background:rgba(6,5,15,.58); border:1px solid rgba(200,152,58,.55); color:var(--gold2); font-size:.59rem; letter-spacing:.22em; text-transform:uppercase; backdrop-filter:blur(8px); }
.v-dur { position:absolute; bottom:13px; right:14px; z-index:3; padding:2px 7px; background:rgba(0,0,0,.52); border-radius:3px; color:rgba(244,235,230,.82); font-size:.64rem; letter-spacing:.04em; }
.vi { padding:18px 22px 24px; }
.vt2 { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:300; color:var(--tl); margin-bottom:5px; }
.vd { font-size:.82rem; color:var(--ml); line-height:1.6; }

/* ─── CONTACT — DARK ─── */
#contact { padding:120px 56px; background:var(--dk2); border-top:1px solid var(--bd); text-align:center; }
.ct-inner { max-width:580px; margin:0 auto; }
.ct-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.2rem,4.5vw,3.6rem); font-weight:300; line-height:1.1; margin-bottom:18px; }
.ct-title em { font-style:italic; color:var(--gold2); }
.ct-tag { font-size:.95rem; color:rgba(244,235,230,.42); line-height:1.75; margin-bottom:52px; }
.cls { display:flex; flex-direction:column; gap:10px; }
.cl {
  display:flex; align-items:center; gap:18px; padding:17px 28px;
  border:1px solid var(--bd); background:rgba(255,255,255,.01);
  color:var(--tw); text-decoration:none; transition:all .35s; position:relative; overflow:hidden;
}
.cl::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(200,152,58,.07), transparent);
  transition:left .6s ease;
}
.cl:hover::before { left:100%; }
.cl:hover { border-color:rgba(200,152,58,.38); background:rgba(200,152,58,.06); transform:translateX(5px); }
.cl-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cl-label { font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--md); display:block; margin-bottom:2px; }
.cl-val { font-size:.95rem; }
.cl-arr { margin-left:auto; color:var(--md); transition:transform .3s, color .3s; }
.cl:hover .cl-arr { transform:translateX(5px); color:var(--gold2); }

/* ─── FOOTER ─── */
footer {
  padding:26px 56px; border-top:1px solid var(--bd);
  display:flex; align-items:center; justify-content:space-between; background:var(--dk);
}
.ft-copy { font-size:.72rem; color:var(--md); letter-spacing:.08em; }
.ft-brand { font-family:'Cormorant Garamond',serif; font-size:.9rem; color:rgba(200,160,160,.35); }
.ft-brand em { font-style:italic; color:rgba(200,152,58,.45); }

/* ─── LIGHTBOX ─── */
.lb { position:fixed; inset:0; z-index:600; background:rgba(6,5,15,.97); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .35s; backdrop-filter:blur(16px); }
.lb.open { opacity:1; pointer-events:all; }
.lb img { max-width:88vw; max-height:88vh; object-fit:contain; border:1px solid var(--bd); transform:scale(.96); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.lb.open img { transform:scale(1); }
.lb-x { position:absolute; top:24px; right:32px; background:none; border:none; color:var(--md); font-size:1.6rem; cursor:pointer; transition:color .2s, transform .2s; }
.lb-x:hover { color:var(--gold2); transform:rotate(90deg); }

/* ─── REVEAL ─── */
.rv { opacity:0; transform:translateY(28px); transition:opacity .85s ease, transform .85s ease; }
.rv.vis { opacity:1; transform:translateY(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.22s} .d3{transition-delay:.36s} .d4{transition-delay:.52s}

/* ─── KEYFRAMES ─── */
@keyframes fup    { to { opacity:1; transform:translateY(0); } }
@keyframes sup    { to { transform:translateY(0); } }
@keyframes rRight { to { clip-path:inset(0 0 0 0%); } }
@keyframes rUp    { to { clip-path:inset(0% 0 0 0); } }
@keyframes zOut   { to { transform:scale(1); } }
@keyframes orbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-24px)} }

/* ─── SVG GHIBLI ANIMATIONS ─── */
@keyframes cloudDrift  { 0%{transform:translateX(0)} 100%{transform:translateX(60px)} }
@keyframes birdFly {
  0%  { transform:translateX(-80px) translateY(0); opacity:0; }
  5%  { opacity:1; } 95% { opacity:1; }
  100%{ transform:translateX(calc(100vw + 80px)) translateY(-40px); opacity:0; }
}
@keyframes petalFall {
  0%  { transform:translateY(-20px) rotate(0deg) translateX(0); opacity:0; }
  10% { opacity:.7; } 90% { opacity:.5; }
  100%{ transform:translateY(160px) rotate(360deg) translateX(var(--dx,30px)); opacity:0; }
}
@keyframes waterShimmer { 0%,100%{opacity:.4} 50%{opacity:.9} }

/* ─── MOBILE ─── */
@media (max-width:900px) {
  nav { padding:16px 20px; }
  nav.on { padding:12px 20px; }

  /* hamburger visible */
  .nav-ham { display:flex; }

  /* mobile slide-in menu */
  .nav-links {
    display:flex !important;
    flex-direction:column; gap:28px; list-style:none;
    position:fixed; top:0; right:-110%; bottom:0; width:72%;
    background:rgba(6,5,15,.97); backdrop-filter:blur(24px);
    padding:90px 36px 50px; z-index:499;
    border-left:1px solid rgba(200,152,58,.15);
    transition:right .42s cubic-bezier(.77,0,.18,1);
  }
  .nav-links.open { right:0; }
  .nav-links a { font-size:1.05rem; letter-spacing:.12em; color:var(--tw); }
  .nav-links a::after { display:none; }

  /* hero */
  #hero { padding:0; min-height:100vh; }
  .h-photo {
    width:100%; opacity:1;
    /* stay absolute, cover bottom half */
    height:60%; top:auto; bottom:0;
  }
  .h-photo img { object-position:center 15%; }
  .h-photo-ov {
    background:
      linear-gradient(to bottom, var(--dk) 0%, rgba(6,5,15,.55) 28%, transparent 55%, rgba(6,5,15,.8) 85%, var(--dk) 100%),
      linear-gradient(to right,  rgba(6,5,15,.6) 0%, transparent 30%),
      linear-gradient(to left,   rgba(6,5,15,.6) 0%, transparent 30%);
  }
  .h-photo-glow { display:none; }
  .h-content { padding:120px 22px 100px; max-width:100%; margin-top:0; }
  .h-title { font-size:clamp(3.2rem,14vw,5.5rem); }
  .h-eye { font-size:.6rem; margin-bottom:22px; }
  .h-desc { max-width:100%; font-size:.95rem; }
  .h-scroll { left:22px; bottom:28px; }

  /* about */
  #about { grid-template-columns:1fr; gap:50px; padding:72px 22px; }
  #about::before, #about::after { display:none; }
  .a-right { height:320px; }
  .af:nth-child(1) { width:72%; height:76%; }
  .af:nth-child(2) { width:55%; height:55%; }

  /* works */
  #works { padding:72px 22px; }
  .w-top { flex-direction:column; align-items:flex-start; gap:22px; }
  .wg { grid-template-columns:1fr 1fr; grid-auto-rows:180px; }
  /* reset all desktop spans */
  .wc { grid-column:span 1 !important; grid-row:span 1 !important; }
  .wc:nth-child(1)  { grid-column:span 2 !important; }
  .wc:nth-child(10) { grid-column:span 2 !important; }

  /* other sections */
  #videos, #contact { padding:72px 22px; }
  .vg { grid-template-columns:1fr; }
  footer { flex-direction:column; gap:10px; text-align:center; padding:22px; }
  .h-btns { flex-wrap:wrap; gap:14px; }
}

@media (max-width:480px) {
  .h-title { font-size:clamp(2.8rem,16vw,4.5rem); }
  .a-stats { gap:28px; }
  .a-stat-n { font-size:2.4rem; }
  .ct-title { font-size:2rem; }
}