/* ================================================
   DESIGN SYSTEM
================================================ */
:root {
  --ink:      #050507;
  --ink2:     #0A0A10;
  --ink3:     #111119;
  --ink4:     #181822;
  --gold:     #C9A84C;
  --gold2:    #E8C97A;
  --gold3:    #F5DC9E;
  --gdim:     rgba(201,168,76,.12);
  --gglow:    rgba(201,168,76,.28);
  --white:    #F5F0E8;
  --w70:      rgba(245,240,232,.7);
  --w40:      rgba(245,240,232,.4);
  --w15:      rgba(245,240,232,.12);
  --border:   rgba(201,168,76,.18);
  --border2:  rgba(245,240,232,.08);
  --green:    #1B4D38;
  --orange:   #B54A28;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Outfit', system-ui, sans-serif;
  --mono:     'Space Grotesk', monospace;
  --ease:     cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--white);
  overflow-x: hidden;
  cursor: none;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family: var(--sans); cursor:none; }

/* scrollbar */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius:2px; }

/* ================================================
   LOADER
================================================ */
#loader {
  position:fixed; inset:0; z-index:99999;
  background: var(--ink);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2rem;
  transition:opacity .8s var(--ease), transform 1.2s var(--ease);
}
#loader.out { opacity:0; transform:scale(1.05); pointer-events:none; }
.loader-logo {
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
}
.loader-logo em { color: var(--gold); font-style:italic; }
.loader-logo span { display:inline-block; transform:translateY(100%); animation: loaderUp .8s .2s var(--ease) forwards; }
.loader-bar-wrap {
  width: clamp(200px, 30vw, 360px);
  height:1px; background: var(--w15);
  overflow:hidden; border-radius:1px;
}
.loader-bar {
  height:100%; width:0;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  animation: loaderFill 2.2s var(--ease) forwards;
}
.loader-count {
  font-family: var(--mono);
  font-size:.75rem; letter-spacing:.3em; color: var(--w40);
  text-transform:uppercase;
}
@keyframes loaderUp { to { transform:translateY(0); } }
@keyframes loaderFill { to { width:100%; } }

/* ================================================
   CURSOR
================================================ */
#cdot, #cring {
  position:fixed; pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
  border-radius:50%;
  will-change:transform;
}
#cdot {
  width:7px; height:7px;
  background: var(--gold2);
  transition:width .2s, height .2s, background .2s;
}
#cring {
  width:36px; height:36px;
  border:1.5px solid rgba(201,168,76,.45);
  transition:width .15s, height .15s, border-color .2s;
}
body.hov #cdot { width:14px; height:14px; background:var(--gold); }
body.hov #cring { width:54px; height:54px; border-color:rgba(201,168,76,.7); }
body.click #cdot { transform:translate(-50%,-50%) scale(.5); }

/* ================================================
   MARQUEE
================================================ */
.marquee {
  padding:.9rem 0; overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--ink2);
}
.marquee-track {
  display:flex; gap:0;
  width:max-content;
  animation:scroll 35s linear infinite;
}
.marquee-track span {
  flex-shrink:0;
  padding:0 2.5rem;
  font-family:var(--mono);
  font-size:.72rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); opacity:.8;
  display:flex; align-items:center; gap:2rem;
}
.marquee-track span::after { content:'◆'; font-size:.4rem; opacity:.35; }
@keyframes scroll { to { transform:translateX(-50%); } }

/* ================================================
   SECTION BASE
================================================ */
section { padding: clamp(5rem, 10vw, 9rem) 5%; }
.tag {
  font-family:var(--mono);
  display:inline-block; font-size:.68rem; font-weight:600;
  letter-spacing:.35em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem;
}
.h2 {
  font-family:var(--serif);
  font-size:clamp(2.8rem,5.5vw,5rem);
  font-weight:300; line-height:1.05; letter-spacing:-.04em;
  color:var(--white);
}
.h2 strong { font-weight:700; }
.h2 em { color:var(--gold); font-style:italic; }
.h2 .out {
  -webkit-text-stroke:1px rgba(245,240,232,.2);
  color:transparent;
}
.lead { margin-top:1.4rem; font-size:1.05rem; color:var(--w70); line-height:1.9; font-weight:300; max-width:560px; }

/* ================================================
   PHILOSOPHY
================================================ */
#phi {
  background:var(--ink);
  position:relative; overflow:hidden;
  padding:clamp(5rem,10vw,9rem) 5%;
}
#phi-canvas { position:absolute; inset:0; opacity:.6; }
.phi-inner {
  position:relative; z-index:5;
  display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center;
}
.phi-cards { display:flex; flex-direction:column; gap:1.5rem; }
.phi-card {
  background:rgba(17,17,25,.8);
  backdrop-filter:blur(20px);
  border:1px solid var(--border2); border-radius:16px;
  padding:2rem 2.5rem;
  transition:all .4s var(--ease);
  display:flex; gap:1.5rem; align-items:flex-start;
}
.phi-card:hover { border-color:var(--border); transform:translateX(8px); background:rgba(24,24,34,.9); }
.phi-icon {
  width:52px; height:52px; flex-shrink:0;
  background:var(--gdim); border:1px solid var(--border);
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
}
.phi-title { font-family:var(--serif); font-size:1.3rem; font-weight:600; margin-bottom:.5rem; color:var(--white); }
.phi-text { font-size:.88rem; color:var(--w70); line-height:1.75; font-weight:300; }

/* ================================================
   FOOTER
================================================ */
footer {
  background:var(--ink);
  border-top:1px solid var(--border2);
  padding:3rem 5%;
}
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:2rem;
}
.footer-logo { font-family:var(--serif); font-size:1.9rem; font-weight:700; letter-spacing:-.03em; }
.footer-logo em { color:var(--gold); font-style:italic; }
.footer-links { display:flex; gap:2.5rem; flex-wrap:wrap; }
.footer-links a { font-size:.8rem; color:var(--w70); letter-spacing:.08em; transition:color .3s; }
.footer-links a:hover { color:var(--gold); }
.footer-copy { font-size:.75rem; color:var(--w40); }
.footer-copy a { color:var(--w40); transition:color .3s; }
.footer-copy a:hover { color:var(--gold); }

/* ================================================
   BUSINESS OVERLAY PAGES
================================================ */
.biz-overlay {
  position:fixed; inset:0; z-index:9000;
  background:var(--ink);
  transform:translateY(100%);
  transition:transform .8s var(--ease);
  overflow:hidden;
  display:flex; flex-direction:column;
}
/* Photography overlay scrolls normally (no iframe) */
#ov-photo { overflow-y:auto; overflow-x:hidden; display:block; }
.biz-overlay.open { transform:translateY(0); }
.ov-close {
  position:fixed; top:1.8rem; right:2rem; z-index:9100;
  width:50px; height:50px; border-radius:50%;
  background:rgba(10,10,16,.85); backdrop-filter:blur(20px);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--white); cursor:none;
  transition:all .3s var(--ease);
  opacity:0; pointer-events:none;
}
.biz-overlay.open .ov-close { opacity:1; pointer-events:all; transition-delay:.3s; }
.ov-close:hover { background:var(--gold); color:var(--ink); border-color:var(--gold); transform:rotate(90deg); }

.ov-hero {
  height:70vh; min-height:500px;
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:4rem 5%;
}
.ov-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(.45);
  transition:transform 12s linear;
}
.ov-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,7,.95) 0%, rgba(5,5,7,.3) 60%, transparent 100%); }
.ov-hero-content { position:relative; z-index:2; max-width:700px; }
.ov-h1 { font-family:var(--serif); font-size:clamp(3rem, 7vw, 6rem); font-weight:300; line-height:1.05; letter-spacing:-.04em; margin-bottom:1.2rem; }
.ov-h1 em { color:var(--gold); font-style:italic; }
.ov-lead { font-size:1.1rem; color:var(--w70); font-weight:300; line-height:1.8; max-width:560px; }

.ov-section { padding:5rem 5%; }
.ov-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.ov-card {
  background:var(--ink3); border:1px solid var(--border2);
  border-radius:14px; overflow:hidden;
  transition:all .4s var(--ease);
}
.ov-card:hover { border-color:var(--border); transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.4); }
.ov-card img { width:100%; height:220px; object-fit:cover; }
.ov-card-body { padding:1.8rem; }
.ov-card-title { font-family:var(--serif); font-size:1.4rem; font-weight:600; margin-bottom:.7rem; }
.ov-card-text { font-size:.88rem; color:var(--w70); line-height:1.75; font-weight:300; }
.ov-feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ov-feat {
  background:var(--ink2); border:1px solid var(--border2);
  border-radius:12px; padding:2rem;
  transition:all .4s var(--ease);
}
.ov-feat:hover { border-color:var(--border); transform:translateY(-4px); }
.ov-feat-icon { font-size:2rem; margin-bottom:1rem; }
.ov-feat-title { font-weight:600; margin-bottom:.5rem; color:var(--white); font-size:.95rem; }
.ov-feat-text { font-size:.84rem; color:var(--w70); line-height:1.7; font-weight:300; }

/* ================================================
   ANIMATIONS
================================================ */
@keyframes revUp { to { opacity:1; transform:translateY(0) translateX(0); } }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

.rv { opacity:0; transform:translateY(50px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity:1; transform:translateY(0); }
.rl { opacity:0; transform:translateX(-60px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rl.in { opacity:1; transform:translateX(0); }
.rr { opacity:0; transform:translateX(60px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rr.in { opacity:1; transform:translateX(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}
.d4{transition-delay:.4s} .d5{transition-delay:.5s} .d6{transition-delay:.6s}