/* ====================================================================
   KOZI CAPITAL — luxury black & gold experience
   ==================================================================== */

:root{
  --black:        #050505;
  --black-2:      #0a0a0b;
  --gold:         #c9a45c;
  --gold-bright:  #e8c987;
  --gold-deep:    #8a6d34;
  --gold-soft:    rgba(201,164,92,.55);
  --cream:        #f3ead7;
  --line:         rgba(201,164,92,.18);
  --ease:         cubic-bezier(.22,1,.36,1);
  --serif:        'Cormorant Garamond', serif;
  --sans:         'Jost', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }

::selection{ background:var(--gold); color:#000; }

a{ color:inherit; text-decoration:none; }

/* gold gradient text helper */
.gold,
.hero__title .char--gold,
.story__cap em,
.contact__title em,
.philosophy__statement .reveal-word.is-key{
  background:linear-gradient(110deg,var(--gold-deep),var(--gold-bright) 45%,var(--gold) 70%,var(--gold-deep));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:1000;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
}
.preloader__inner{ text-align:center; width:min(78vw,360px); }
.preloader__mark{
  font-family:var(--serif); font-weight:500; font-size:5rem; line-height:1;
  color:var(--gold); margin-bottom:2.4rem;
  letter-spacing:.04em;
  animation:breathe 2.6s var(--ease) infinite;
}
@keyframes breathe{ 0%,100%{opacity:.55;transform:translateY(0)} 50%{opacity:1;transform:translateY(-4px)} }
.preloader__bar{
  position:relative; height:1px; width:100%;
  background:var(--line); overflow:hidden; margin-bottom:1rem;
}
.preloader__bar span{
  position:absolute; inset:0 100% 0 0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  transition:right .25s var(--ease);
}
.preloader__count{
  font-family:var(--serif); font-size:1.5rem; color:var(--cream);
}
.preloader__count i{ color:var(--gold-soft); font-style:normal; font-size:.9rem; }
.preloader__label{
  margin-top:.6rem; font-size:.62rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-soft);
}
body.loaded .preloader{
  opacity:0; visibility:hidden; transition:opacity 1s var(--ease),visibility 1s;
}

/* ---------- Grain + vignette ---------- */
.grain{
  position:fixed; inset:-50%; z-index:900; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%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(-6%,5%)}
  33%{transform:translate(4%,-7%)} 50%{transform:translate(-8%,3%)}
  66%{transform:translate(7%,6%)} 83%{transform:translate(-3%,-5%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:899; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%,transparent 52%,rgba(0,0,0,.55) 100%);
}

/* ---------- Custom cursor ---------- */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:950; pointer-events:none; border-radius:50%; }
.cursor{
  width:42px; height:42px; border:1px solid var(--gold-soft);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease),height .35s var(--ease),
             background .35s var(--ease),border-color .35s var(--ease);
}
.cursor-dot{
  width:5px; height:5px; background:var(--gold-bright);
  transform:translate(-50%,-50%);
}
.cursor.is-hover{ width:74px; height:74px; background:rgba(201,164,92,.08); border-color:transparent; }
@media (hover:none){ .cursor,.cursor-dot{ display:none; } }

/* ---------- Scrubbing film canvas ---------- */
.film{
  position:fixed; inset:0; z-index:1;
  width:100vw; height:100vh;
  object-fit:cover; display:block;
  opacity:0;                 /* hero is pure black; film fades in at the story */
}
.film-tint{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:
    linear-gradient(to bottom, rgba(5,5,5,.55) 0%, rgba(5,5,5,.2) 30%, rgba(5,5,5,.35) 70%, rgba(5,5,5,.78) 100%),
    radial-gradient(80% 80% at 50% 50%, rgba(201,164,92,.06), transparent 60%);
}

/* content sits above canvas */
.nav, main{ position:relative; z-index:10; }

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.4rem,5vw,4rem);
  z-index:500; mix-blend-mode:difference;
}
.nav__brand{ display:flex; align-items:baseline; gap:.5rem; }
.nav__brand-mark{
  font-family:var(--serif); font-weight:600; font-size:1.35rem;
  letter-spacing:.22em; color:#fff;
}
.nav__brand-sub{
  font-size:.58rem; letter-spacing:.45em; color:#fff; opacity:.7;
}
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.6vw,2.6rem); }
.nav__links a{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:#fff;
  position:relative; padding:.3rem 0;
}
.nav__links a:not(.nav__cta)::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:#fff; transition:width .4s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{ width:100%; }
.nav__cta{
  border:1px solid rgba(255,255,255,.6); padding:.6rem 1.3rem !important; border-radius:40px;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.nav__cta:hover{ background:#fff; color:#000; }
@media(max-width:680px){ .nav__links a:not(.nav__cta){ display:none; } }

/* ---------- Shared section bits ---------- */
section{ padding:clamp(6rem,14vh,12rem) clamp(1.4rem,6vw,7rem); }
.section-tag{
  display:inline-block; font-size:.66rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); margin-bottom:2.2rem; position:relative; padding-left:2.6rem;
}
.section-tag::before{
  content:''; position:absolute; left:0; top:50%; width:1.8rem; height:1px; background:var(--gold-soft);
}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-bottom:7rem;
}
.hero__eyebrow{
  font-size:.68rem; letter-spacing:.5em; text-transform:uppercase; color:var(--gold);
  margin-bottom:2rem;
}
.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.4rem,11vw,11rem); line-height:.92; letter-spacing:-.01em;
  color:var(--cream);
}
.hero__title em{ font-style:italic; font-weight:400; }
.hero__title .line{ display:block; }
.hero__title .line > span{ display:inline-block; }
/* words stay intact — the title only breaks between words, never mid-word */
.hero__title .word{ display:inline-block; white-space:nowrap; }

/* per-letter pieces (built in JS) */
.hero__title .char{
  display:inline-block;
  white-space:pre;               /* keep spaces between words */
  transition:filter .28s var(--ease), text-shadow .28s var(--ease);
}
.hero__title .char--gold{ font-style:italic; font-weight:400; }
/* Hover acknowledges each letter individually — it lights up, no movement.
   Driven in JS (nearest-letter) so every glyph responds. */
.hero__title .char.is-lit{
  filter:brightness(1.6);
  text-shadow:0 0 22px rgba(232,201,135,.9), 0 0 6px rgba(232,201,135,.7);
}
.hero__scroll{
  margin-top:3.4rem; display:flex; align-items:center; gap:1rem;
  font-size:.64rem; letter-spacing:.36em; text-transform:uppercase; color:var(--gold-soft);
}
.hero__scroll i{
  position:relative; width:1px; height:46px; background:var(--line); overflow:hidden;
}
.hero__scroll i::after{
  content:''; position:absolute; inset:0; background:var(--gold-bright);
  animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ---------- STORY (pinned scrub) ---------- */
.story{ padding:0; }
.story__pin{ position:relative; height:100svh; overflow:hidden; }
.story__cap{
  position:absolute; left:clamp(1.4rem,6vw,7rem); bottom:clamp(4rem,12vh,9rem);
  max-width:34ch; opacity:0;
}
.story__index{
  display:block; font-size:.66rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem;
}
.story__cap h2{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,7vw,6rem);
  line-height:.96; color:var(--cream);
}
.story__cap em{ font-style:italic; }
.story__cap p{
  margin-top:1.4rem; max-width:38ch; line-height:1.7;
  color:rgba(243,234,215,.74); font-size:clamp(.95rem,1.2vw,1.08rem);
}

/* ---------- PHILOSOPHY ---------- */
.philosophy{ text-align:center; }
.philosophy__statement{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.8rem,5.2vw,4.4rem); line-height:1.28; letter-spacing:.01em;
  max-width:18ch; margin:0 auto; color:var(--cream);
}
.philosophy__statement .reveal-word{
  display:inline-block; opacity:.12; transition:opacity .1s;
}

/* ---------- PILLARS ---------- */
.pillars__head{ display:flex; flex-direction:column; margin-bottom:4rem; }
.pillars__head h2{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,5.5vw,4.6rem);
  line-height:1; color:var(--cream);
}
.pillars__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.pillar{
  background:rgba(8,8,9,.72); backdrop-filter:blur(6px);
  padding:clamp(2rem,3vw,3rem) clamp(1.6rem,2.4vw,2.4rem);
  min-height:300px; display:flex; flex-direction:column;
  transition:background .5s var(--ease),transform .5s var(--ease);
}
.pillar:hover{ background:rgba(201,164,92,.07); }
.pillar__no{
  font-family:var(--serif); font-size:1.1rem; color:var(--gold); letter-spacing:.2em;
  margin-bottom:auto; opacity:.8;
}
.pillar h3{
  font-family:var(--serif); font-weight:400; font-size:1.85rem; color:var(--cream);
  margin-top:2.4rem; margin-bottom:.9rem;
}
.pillar p{ line-height:1.7; color:rgba(243,234,215,.68); font-size:.96rem; }

/* ---------- PROOF / STATS ---------- */
.proof__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(2rem,4vw,4rem); margin-top:1rem;
}
.stat{ border-top:1px solid var(--line); padding-top:1.6rem; }
.stat__num{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.8rem,6vw,5rem); line-height:1; color:var(--gold-bright);
}
.stat__label{
  display:block; margin-top:1rem; font-size:.78rem; letter-spacing:.08em;
  line-height:1.5; color:rgba(243,234,215,.6); max-width:22ch;
}

/* ---------- CONTACT ---------- */
.contact{ text-align:center; min-height:90svh; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.contact__title{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.8rem,8vw,7rem);
  line-height:.98; color:var(--cream);
}
.contact__title em{ font-style:italic; }
.contact__title .line{ display:block; overflow:hidden; }
.contact__title .line > span{ display:block; }
.contact__lede{
  max-width:48ch; margin:2.4rem auto 3.2rem; line-height:1.8;
  color:rgba(243,234,215,.74); font-size:clamp(1rem,1.4vw,1.16rem);
}
.contact__btn{
  display:inline-flex; align-items:center; gap:1.1rem;
  border:1px solid var(--gold-soft); border-radius:50px;
  padding:1.1rem 2.4rem; position:relative; overflow:hidden;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cream);
  transition:color .5s var(--ease);
}
.contact__btn span,.contact__btn i{ position:relative; z-index:2; }
.contact__btn i{ width:24px; height:1px; background:currentColor; position:relative; }
.contact__btn i::after{
  content:''; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);
}
.contact__btn::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(110deg,var(--gold-deep),var(--gold-bright));
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.contact__btn:hover{ color:#0a0a0a; }
.contact__btn:hover::before{ transform:translateY(0); }

/* ---------- FOOTER ---------- */
.footer{
  position:relative; z-index:10; background:var(--black-2);
  padding:clamp(4rem,8vh,7rem) clamp(1.4rem,6vw,7rem) 2.4rem;
  border-top:1px solid var(--line);
}
.footer__brand{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3rem,13vw,11rem); line-height:.9; letter-spacing:.04em;
  color:transparent; -webkit-text-stroke:1px var(--gold-soft);
  margin-bottom:3rem;
}
.footer__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2rem; padding-bottom:3rem; border-bottom:1px solid var(--line);
}
.footer__cols span{
  display:block; font-size:.62rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.8rem;
}
.footer__cols p{ color:rgba(243,234,215,.7); line-height:1.6; }
.footer__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:1.8rem;
  font-size:.7rem; letter-spacing:.06em; color:rgba(243,234,215,.4);
}

/* ---------- Reveal base state ---------- */
.reveal{ opacity:0; transform:translateY(28px); }

/* ====================================================================
   MOBILE / TOUCH REFINEMENTS
   ==================================================================== */
html{ -webkit-text-size-adjust:100%; }
*{ -webkit-tap-highlight-color:transparent; }

/* smooth anchor navigation on touch (desktop uses Lenis instead) */
@media (pointer:coarse){ html{ scroll-behavior:smooth; } }

/* honour the notch / home-indicator safe areas */
.nav{ padding-left:max(clamp(1.4rem,5vw,4rem),env(safe-area-inset-left));
       padding-right:max(clamp(1.4rem,5vw,4rem),env(safe-area-inset-right)); }

@media (max-width:768px){
  section{ padding:clamp(4.5rem,11vh,7rem) clamp(1.3rem,6vw,7rem); }

  .nav{ padding-top:1.15rem; padding-bottom:1.15rem; }
  .nav__brand-sub{ display:none; }            /* keep the brand compact */

  .hero{ padding-bottom:5rem; }
  .hero__title{ font-size:clamp(3rem,13vw,5.5rem); }
  .hero__scroll{ margin-top:2.6rem; }

  .story__cap{ left:clamp(1.3rem,6vw,7rem); right:clamp(1.3rem,6vw,7rem);
               bottom:clamp(3rem,10vh,7rem); max-width:none; }
  .story__cap h2{ font-size:clamp(2.4rem,9vw,3.6rem); }

  .philosophy__statement{ font-size:clamp(1.6rem,7vw,2.6rem); max-width:16ch; }

  .pillars__grid{ grid-template-columns:1fr; }
  .pillar{ min-height:auto; }

  .footer__brand{ font-size:clamp(2.4rem,15vw,5rem); }
  .footer__base{ flex-direction:column; gap:.5rem; }
}

@media (max-width:420px){
  .hero__title{ font-size:clamp(2.6rem,12.5vw,4rem); }
  .nav__links{ gap:1rem; }
  .nav__cta{ padding:.55rem 1.05rem !important; font-size:.66rem; }
  .contact__btn{ font-size:.7rem; letter-spacing:.16em; padding:1rem 1.6rem; gap:.8rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1; transform:none; }
  .story__cap{ opacity:1; }
}