/* ============================================================
   Éclat — haute-couture maison (light-luxe).
   Ivory & champagne, Playfair Display over Inter, gold hairlines.
   A bright, editorial counterpoint to the dark Noir District —
   split hero with a live liquid-gold WebGL centrepiece. Pairs
   with the shared atelier.js motion engine.
   ============================================================ */
:root{
  --ivory:#f6f1e7; --cream:#efe6d5; --panel:#ece2cf;
  --ink:#1a1712; --muted:#6f6659; --faint:#b6ab97;
  --gold:#b8863b; --gold-2:#d9a441; --line:rgba(26,23,18,.14);
  --serif:"Playfair Display", Georgia, serif;
  --body:"Inter", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--body); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
em{font-style:italic; color:var(--gold)}
.wrap{width:min(1240px,92vw); margin-inline:auto}
.eyebrow{font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); font-weight:600}
.serif{font-family:var(--serif)}

/* ---- texture ---- */
.grain{position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{display:none}

/* ---- cursor ---- */
.cursor,.cursor-ring{position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%}
.cursor{width:7px; height:7px; background:var(--gold)}
.cursor-ring{width:38px; height:38px; border:1px solid rgba(184,134,59,.6); transition:width .3s,height .3s,opacity .3s}
.cursor-ring.hot{width:60px; height:60px; opacity:.6}
@media (hover:none){.cursor,.cursor-ring{display:none}}

/* ---- loader ---- */
.loader{position:fixed; inset:0; z-index:10000; background:var(--ivory); display:grid; place-items:center}
.loader-num{font-family:var(--serif); font-size:clamp(3rem,12vw,7rem); color:var(--gold); line-height:1; text-align:center}
.loader-word{display:block; margin-top:.6rem; letter-spacing:.36em; text-transform:uppercase; font-size:.66rem; color:var(--muted); text-align:center}

/* ---- nav ---- */
.nav{position:fixed; inset:0 0 auto 0; z-index:900; display:flex; align-items:center; justify-content:space-between;
  padding:22px min(4vw,42px); transition:background .4s,backdrop-filter .4s,padding .4s}
.nav.solid{background:rgba(246,241,231,.8); backdrop-filter:blur(14px); padding-block:14px; border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif); font-size:1.3rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.brand b{color:var(--gold)}
.nav-links{display:flex; gap:34px}
.nav-links a{font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); transition:color .3s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{border:1px solid var(--gold); color:var(--gold); padding:11px 22px; border-radius:2px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; transition:background .3s,color .3s}
.nav-cta:hover{background:var(--gold); color:var(--ivory)}
.nav-burg{display:none; background:none; border:0; flex-direction:column; gap:6px; cursor:pointer; padding:6px}
.nav-burg span{width:26px; height:1.5px; background:var(--ink); display:block}

/* ---- hero (split) ---- */
.hero{position:relative; min-height:100svh; display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:min(5vw,60px); width:min(1240px,92vw); margin-inline:auto; padding:12vh 0 6vh}
.hero-inner{position:relative; z-index:2; min-width:0}
.hero-eyebrow{opacity:0; transform:translateY(12px)}
.hero h1{font-family:var(--serif); font-weight:500; line-height:.98; font-size:clamp(3rem,8vw,7rem); letter-spacing:-.01em; margin:.3em 0 0}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln>span{display:block}
.hero-foot{margin-top:3vh}
.hero-foot p{max-width:40ch; color:var(--muted); opacity:0; font-size:1.02rem}
.scroll-cue{display:inline-flex; align-items:center; gap:12px; margin-top:2.4rem; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold)}
.scroll-cue i{width:46px; height:1px; background:var(--gold); position:relative; overflow:hidden}
.scroll-cue i::after{content:""; position:absolute; inset:0; background:var(--ivory); animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.hero-media{position:relative; z-index:1; aspect-ratio:1/1; min-height:60svh; min-width:0; max-width:100%}
.hero-gl{width:100%; height:100%; display:block}
.hero-gl.gl-off{background:radial-gradient(circle at 50% 45%,#e7d7b0,#f6f1e7 68%); border-radius:50%}

/* ---- sections ---- */
.section{padding:clamp(6rem,13vh,10rem) 0}
.sec-head{display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:3rem; flex-wrap:wrap}
h2{font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:-.01em; font-size:clamp(2.2rem,6vw,4.4rem); margin:0}

/* ---- manifesto ---- */
.manifesto{text-align:center}
.manifesto p{font-family:var(--serif); font-weight:400; line-height:1.34; font-size:clamp(1.5rem,4.2vw,2.9rem); max-width:20ch; margin-inline:auto}
.manifesto .word{color:var(--faint); transition:color .5s}
.manifesto .word.on{color:var(--ink)}
.manifesto em{color:var(--gold)}

/* ---- horizontal pinned collections ---- */
.h-scroll{position:relative}
.h-pin{height:100svh; overflow:hidden; display:flex; align-items:center}
.h-track{display:flex; align-items:center; gap:min(6vw,80px); padding-inline:min(4vw,42px); will-change:transform}
.h-intro{flex:0 0 auto; width:min(40vw,420px); padding-right:2vw}
.h-intro h2{margin-top:1rem}
.h-card{flex:0 0 auto; width:min(72vw,500px)}
.h-figure{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--panel); border:1px solid var(--line)}
.h-figure img{width:100%; height:100%; object-fit:cover; will-change:transform}
.h-num{position:absolute; top:16px; left:18px; z-index:2; font-family:var(--serif); font-size:1rem; color:#fff; letter-spacing:.1em; text-shadow:0 1px 8px rgba(0,0,0,.4)}
.h-meta{display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; gap:16px; border-top:1px solid var(--line); padding-top:14px}
.h-meta h3{font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:0}
.h-meta span{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.h-progress{position:absolute; left:min(4vw,42px); right:min(4vw,42px); bottom:38px; height:1px; background:var(--line)}
.h-progress i{display:block; height:100%; width:0; background:var(--gold)}

/* ---- feature ---- */
.feature{display:grid; grid-template-columns:.95fr 1.05fr; gap:min(6vw,72px); align-items:center}
.feature-fig{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--panel)}
.feature-fig img{width:100%; height:100%; object-fit:cover}
.feature-fig .mask{position:absolute; inset:0; background:var(--ivory); transform-origin:left}
.feature h2{margin:.5rem 0 1.2rem}
.feature p{color:var(--muted); max-width:46ch}
[data-fade]{opacity:0; transform:translateY(22px)}
.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:1.8rem}
.tag-row span{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); border:1px solid var(--line); padding:8px 14px; border-radius:2px}

/* ---- stats ---- */
.stats{border-block:1px solid var(--line); background:var(--cream)}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.stat{text-align:center}
.stat h3{font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem,5vw,3.6rem); margin:0; color:var(--gold)}
.stat p{margin:.4rem 0 0; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

/* ---- services ---- */
.svc-list{border-top:1px solid var(--line)}
.svc{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(1.3rem,3.2vw,2.3rem) 4px; border-bottom:1px solid var(--line); cursor:pointer; transition:padding-left .4s}
.svc:hover{padding-left:22px}
.svc-name{font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,3.2vw,2.3rem); transition:color .4s}
.svc:hover .svc-name{color:var(--gold)}
.svc-idx{font-size:.7rem; letter-spacing:.2em; color:var(--muted)}
.svc-peek{position:fixed; top:0; left:0; z-index:800; width:260px; height:330px; margin:-165px 0 0 -130px; pointer-events:none; opacity:0; transform:scale(.92); transition:opacity .35s,transform .35s; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px -20px rgba(26,23,18,.4)}
.svc-peek.on{opacity:1; transform:scale(1)}
.svc-peek img{width:100%; height:100%; object-fit:cover}
@media (hover:none){.svc-peek{display:none}}

/* ---- marquee ---- */
.marquee{overflow:hidden; border-block:1px solid var(--line); padding:26px 0}
.marquee-in{display:inline-flex; gap:56px; white-space:nowrap; will-change:transform}
.marquee-in span{font-family:var(--serif); font-size:clamp(1.4rem,3vw,2.2rem); color:var(--faint); font-style:italic}
.marquee-in span:nth-child(3n){color:var(--gold)}

/* ---- cta ---- */
.cta{text-align:center}
.cta h2{margin:.6rem 0 2rem}
.cta a{display:inline-flex; align-items:center; gap:14px; font-family:var(--serif); font-size:1.15rem; color:var(--ivory); background:var(--ink); border:1px solid var(--ink); padding:18px 34px; border-radius:2px; transition:background .35s,color .35s}
.cta a:hover{background:var(--gold); border-color:var(--gold)}
.cta a svg{width:22px; height:22px}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line); padding:5rem min(4vw,42px) 2.4rem; background:var(--cream)}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap}
.foot-brand{font-family:var(--serif); font-size:clamp(3rem,9vw,6rem); line-height:.86; color:var(--gold); text-transform:uppercase; letter-spacing:.02em}
.foot-cols{display:flex; gap:min(6vw,72px); flex-wrap:wrap}
.foot-col h4{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem}
.foot-col a,.foot-col p{display:block; color:var(--ink); margin:.5rem 0; font-size:.92rem; opacity:.85}
.foot-col a:hover{color:var(--gold)}
.foot-bar{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:3.4rem; padding-top:1.6rem; border-top:1px solid var(--line); font-size:.72rem; color:var(--muted)}

/* ---- responsive ---- */
@media (max-width:860px){
  .nav-links,.nav-cta{display:none}
  .nav-burg{display:flex}
  .hero{grid-template-columns:1fr; gap:24px; padding-top:14vh}
  .hero-media{min-height:46svh; order:-1}
  .feature{grid-template-columns:1fr; gap:32px}
  .feature-fig{aspect-ratio:4/3}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:32px 16px}
  .h-intro{width:78vw}
  .h-card{width:82vw}
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue i::after{animation:none}
  [data-fade],.hero-eyebrow,.hero-foot p,.hero h1 .ln>span{opacity:1 !important; transform:none !important}
  .manifesto .word{color:var(--ink)}
}