/* =========================================================
   MAISON VANDÉAC — Haute Joaillerie  (English)
   Display: Cormorant Garamond · Text/UI: Jost
   ========================================================= */

:root{
  --noir:#14110f;
  --ink:#1f1c18;
  --cream:#f4efe7;
  --paper:#faf7f1;
  --paper-2:#efe9df;
  --gold:#b0894f;
  --gold-soft:#cbaa74;
  --gold-line:#d9c39c;
  --line:rgba(20,17,15,.14);
  --line-soft:rgba(20,17,15,.08);

  --font-serif:"Cormorant Garamond",'Times New Roman',serif;
  --font-sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(.19,1,.22,1);

  --pad-x:clamp(20px,6vw,120px);
  --maxw:1600px;
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-weight:300;
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--gold);color:var(--paper)}

body::after{
  content:"";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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--font-sans);font-weight:400;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);opacity:.6}
.eyebrow--center::after{content:"";width:34px;height:1px;background:var(--gold);opacity:.6}

h1,h2,h3,h4{font-family:var(--font-serif);font-weight:400;line-height:1.06;letter-spacing:.005em}
.display{font-size:clamp(2.9rem,8vw,8rem);font-weight:300}
.h-section{font-size:clamp(2.1rem,4.6vw,4.2rem);font-weight:300}
.serif-lead{font-family:var(--font-serif);font-size:clamp(1.5rem,2.7vw,2.5rem);font-weight:300;line-height:1.4}
em,.i{font-style:italic}
.gold{color:var(--gold)}

.btn-line{
  --c:var(--ink);position:relative;display:inline-block;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;padding-bottom:8px;color:var(--c);
}
.btn-line::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--c);transform-origin:right;transition:transform .6s var(--ease)}
.btn-line:hover::after{transform:scaleX(0)}
.btn-line::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .05s}
.btn-line:hover::before{transform:scaleX(1)}
.btn-line--light{--c:var(--cream)}

/* ---------- Layout ---------- */
section{position:relative}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.pad-y{padding-block:clamp(90px,13vh,190px)}

/* ---------- Custom cursor ---------- */
.cursor,.cursor-follow{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:difference;will-change:transform}
.cursor{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.cursor-follow{width:40px;height:40px;border:1px solid rgba(255,255,255,.6);transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
.cursor-follow.is-hover{width:66px;height:66px;background:rgba(255,255,255,.14);border-color:transparent}
@media (hover:none),(pointer:coarse){.cursor,.cursor-follow{display:none}}

/* ---------- Preloader ---------- */
.loader{position:fixed;inset:0;z-index:10000;background:var(--noir);display:grid;place-items:center;transition:transform 1s var(--ease) .2s}
.loader.is-done{transform:translateY(-100%)}
.loader__mark{overflow:hidden;color:var(--cream);font-family:var(--font-serif);font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:.42em;text-transform:uppercase;padding-left:.42em}
.loader__mark span{display:inline-block;transform:translateY(110%);animation:loadLetter .9s var(--ease) forwards}
.loader__bar{margin-top:26px;width:min(240px,54vw);height:1px;background:rgba(244,239,231,.2);position:relative;overflow:hidden}
.loader__bar::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-100%);animation:loadBar 1.4s var(--ease) .2s forwards}
@keyframes loadLetter{to{transform:translateY(0)}}
@keyframes loadBar{to{transform:translateX(0)}}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:900;height:var(--nav-h);display:flex;align-items:center;color:var(--ink);transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease),height .5s var(--ease),transform .5s var(--ease)}
.nav__inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.nav.is-solid{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line-soft);height:64px}
.nav.is-hidden{transform:translateY(-100%)}
.nav__menu{display:flex;gap:34px}
.nav__menu a{position:relative;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:6px 0}
.nav__menu a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav__menu a:hover::after{transform:scaleX(1)}
.nav__brand{justify-self:center;font-family:var(--font-serif);font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:.34em;text-transform:uppercase;padding-left:.34em;white-space:nowrap}
.nav__actions{justify-self:end;display:flex;gap:26px;align-items:center}
.nav__actions button,.nav__actions a{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.nav__burger{display:none}

.menu-overlay{position:fixed;inset:0;z-index:895;background:var(--noir);color:var(--cream);padding:calc(var(--nav-h) + 30px) var(--pad-x) 60px;display:flex;flex-direction:column;justify-content:center;gap:6px;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)}
.menu-overlay.is-open{clip-path:inset(0 0 0 0)}
.menu-overlay a{font-family:var(--font-serif);font-size:clamp(2rem,9vw,3.4rem);font-weight:300;padding:10px 0;border-bottom:1px solid rgba(244,239,231,.12)}
.menu-overlay a small{font-family:var(--font-sans);font-size:11px;letter-spacing:.2em;color:var(--gold);margin-right:16px}

/* ---------- Hero (minimal, ambient background) ---------- */
.hero{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;position:relative;overflow:hidden;
  background:var(--paper);color:var(--ink);
  padding:calc(var(--nav-h) + 48px) var(--pad-x) 64px;
}
.hero::before{content:none}

/* soft champagne glow, slowly drifting */
.hero__aura{
  position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 48% at 16% 20%,rgba(198,168,106,.20),transparent 70%),
    radial-gradient(42% 52% at 86% 82%,rgba(176,137,79,.16),transparent 72%),
    radial-gradient(34% 40% at 78% 12%,rgba(217,195,156,.18),transparent 70%);
  animation:aura 26s ease-in-out infinite alternate;
}
@keyframes aura{to{transform:translate3d(2.5%,-2%,0) scale(1.08)}}

/* blurred jewellery image → ambient colour only at the edges */
.hero__wash{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("assets/images/hero.jpg") center/cover no-repeat;
  filter:blur(90px) saturate(.75) brightness(1.1);
  transform:scale(1.35);
  opacity:.22;
  -webkit-mask:radial-gradient(72% 68% at 50% 46%,transparent 26%,#000 80%);
  mask:radial-gradient(72% 68% at 50% 46%,transparent 26%,#000 80%);
}

/* faint faceted-diamond geometry behind the text */
.hero__gem{
  position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;
  width:min(74vh,860px);aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(31,28,24,.07);
}
.hero__gem::after{content:"";position:absolute;inset:13%;border:1px solid rgba(31,28,24,.05)}

.hero__inner{position:relative;z-index:2;width:100%;max-width:840px;min-width:0}
@media (prefers-reduced-motion:reduce){.hero__aura{animation:none}}
.hero .eyebrow{margin-bottom:36px;opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero__title{
  font-size:clamp(2.6rem,6vw,5.4rem);font-weight:300;line-height:1.14;
  margin-bottom:34px;
  opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease) .1s,transform 1s var(--ease) .1s;
}
.hero__lead{
  max-width:50ch;margin:0 auto 42px;
  color:rgba(31,28,24,.7);font-size:16px;
  opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) .25s,transform .9s var(--ease) .25s;
}
.hero__cta{opacity:0;transition:opacity .9s var(--ease) .4s}
.is-loaded .hero .eyebrow,.is-loaded .hero__title,.is-loaded .hero__lead,.is-loaded .hero__cta{opacity:1;transform:none}
.no-js .hero .eyebrow,.no-js .hero__title,.no-js .hero__lead,.no-js .hero__cta{opacity:1;transform:none}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(42px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}
.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}
.no-js .reveal{opacity:1;transform:none}

/* ---------- Maison ---------- */
.maison{text-align:center}
.maison .serif-lead{max-width:20ch;margin:34px auto 0}
.maison__body{max-width:52ch;margin:34px auto 40px;color:rgba(31,28,24,.72)}
.maison__figures{margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid var(--line);padding-top:44px}
.figure__n{font-family:var(--font-serif);font-size:clamp(2.4rem,4vw,3.6rem);font-weight:300}
.figure__l{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:6px}

/* ---------- Collections ---------- */
.collection{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,6vw,110px);padding-block:clamp(50px,8vh,110px);border-top:1px solid var(--line)}
.collection:nth-child(even) .collection__media{order:2}
.collection__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(140deg,#e7ddcb,#cbb389 45%,#7c6440)}
.collection__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.4s var(--ease)}
.collection:hover .collection__media img{transform:scale(1)}
.collection__index{position:absolute;top:20px;left:22px;font-family:var(--font-serif);font-size:1rem;letter-spacing:.2em;color:var(--cream);z-index:2;mix-blend-mode:difference}
.collection__body h3{font-size:clamp(2rem,3.6vw,3.4rem);font-weight:300;margin:14px 0 18px}
.collection__body p{max-width:42ch;color:rgba(31,28,24,.7);margin-bottom:28px}

/* ---------- Signature ---------- */
.signature{background:var(--noir);color:var(--cream);overflow:hidden}
.signature__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:center}
.signature__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(80% 80% at 50% 30%,#3a332b,#14110f)}
.signature__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.signature__body .h-section{margin:20px 0 22px}
.signature__body p{max-width:40ch;opacity:.78;margin-bottom:30px}
.signature__spec{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;border-top:1px solid rgba(244,239,231,.16);padding-top:26px;margin-bottom:34px}
.signature__spec dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.signature__spec dd{font-family:var(--font-serif);font-size:1.25rem;margin-top:4px}

/* ---------- Savoir-faire ---------- */
.savoir__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:50px}
.savoir__scroller{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,44px)}
.savoir-card__media{aspect-ratio:3/4;overflow:hidden;background:linear-gradient(160deg,#ece2d0,#b99c70 60%,#6f5836);margin-bottom:20px}
.savoir-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.savoir-card:hover .savoir-card__media img{transform:scale(1.06)}
.savoir-card h4{font-size:1.5rem;font-weight:300;margin-bottom:8px}
.savoir-card p{font-size:14px;color:rgba(31,28,24,.68);max-width:38ch}
.savoir-card__step{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

/* ---------- Journal ---------- */
.journal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,50px)}
.jcard__media{aspect-ratio:4/5;overflow:hidden;background:linear-gradient(150deg,#e6dcc9,#c3a67c 55%,#7a6238);margin-bottom:22px}
.jcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.jcard:hover .jcard__media img{transform:scale(1.05)}
.jcard__date{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.jcard h4{font-size:1.5rem;font-weight:300;margin:10px 0 14px;line-height:1.2}
.jcard p{font-size:14px;color:rgba(31,28,24,.66);max-width:36ch}

/* ---------- Boutiques ---------- */
.boutiques{background:var(--paper-2)}
.boutiques__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:start}
.boutiques__list{border-top:1px solid var(--line)}
.boutique{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease)}
.boutique:hover{padding-left:16px}
.boutique h4{font-size:1.6rem;font-weight:300}
.boutique span{font-size:12px;letter-spacing:.1em;color:rgba(31,28,24,.6)}
.boutiques__figure{aspect-ratio:3/2;overflow:hidden;background:linear-gradient(160deg,#e7ddcb,#c8ac82 50%,#6f5836);border:1px solid var(--line)}
.boutiques__figure img{width:100%;height:100%;object-fit:cover}

/* ---------- The House Code ---------- */
.creed__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,68px);margin-top:54px;border-top:1px solid var(--line);padding-top:46px}
.creed__item .num{font-family:var(--font-serif);font-size:1.05rem;letter-spacing:.14em;color:var(--gold)}
.creed__item h3{font-size:clamp(1.5rem,2.3vw,2rem);font-weight:300;margin:14px 0 12px}
.creed__item p{font-size:14.5px;color:rgba(31,28,24,.7);max-width:34ch}

/* ---------- Full-bleed image band ---------- */
.band{position:relative;min-height:clamp(58vh,70vh,720px);display:flex;align-items:flex-end;overflow:hidden;color:var(--cream);background:var(--noir)}
.band__media{position:absolute;inset:-8% 0 0 0;z-index:0}
.band__media img{width:100%;height:100%;object-fit:cover;opacity:.82;will-change:transform}
.band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,17,15,.34),transparent 40%,rgba(20,17,15,.82)),linear-gradient(90deg,rgba(20,17,15,.55),transparent 46%)}
.band__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad-x) clamp(44px,9vh,92px);text-shadow:0 2px 30px rgba(0,0,0,.4)}
.band__inner .serif-lead{max-width:22ch;margin-top:16px}

/* ---------- The Salon ---------- */
.salon__intro{max-width:760px}
.salon__pair{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,48px);margin-top:clamp(40px,7vh,70px);align-items:end}
.salon__pair .frame{overflow:hidden;background:linear-gradient(150deg,#e7ddcb,#c9ad83 55%,#7c6440)}
.salon__pair .frame img{width:100%;height:100%;object-fit:cover}
.salon__pair .frame:first-child{aspect-ratio:4/3}
.salon__pair .frame:last-child{aspect-ratio:3/4}

/* ---------- Invitation ---------- */
.invite{position:relative;overflow:hidden;color:var(--cream);text-align:center;background:var(--noir)}
.invite__media{position:absolute;inset:0;z-index:0}
.invite__media img{width:100%;height:100%;object-fit:cover;opacity:.3}
.invite::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(20,17,15,.72),rgba(20,17,15,.84))}
.invite .wrap{position:relative;z-index:2}
.invite .h-section{max-width:18ch;margin:20px auto 16px}
.invite p{opacity:.82;max-width:48ch;margin:0 auto 34px;font-size:15px}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--noir);color:var(--cream);text-align:center}
.newsletter .h-section{max-width:16ch;margin:24px auto 20px}
.newsletter p{opacity:.7;max-width:44ch;margin:0 auto 44px;font-size:15px}
.nl-form{display:flex;gap:20px;max-width:520px;margin-inline:auto;border-bottom:1px solid rgba(244,239,231,.3);padding-bottom:14px}
.nl-form input{flex:1;background:none;border:0;color:var(--cream);font:inherit;font-size:15px;letter-spacing:.04em}
.nl-form input::placeholder{color:rgba(244,239,231,.45)}
.nl-form input:focus{outline:none}
.nl-form button{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);white-space:nowrap}

/* ---------- Footer ---------- */
.footer{background:var(--noir);color:var(--cream);padding-top:clamp(60px,9vh,120px)}
.footer__top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-bottom:70px;border-bottom:1px solid rgba(244,239,231,.14)}
.footer__brand{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:.3em;text-transform:uppercase}
.footer__brand + p{opacity:.6;max-width:34ch;margin-top:18px;font-size:14px}
.footer h5{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer li{margin-bottom:12px}
.footer li a{font-size:14px;opacity:.75;transition:opacity .3s}
.footer li a:hover{opacity:1}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px 0 40px;font-size:11px;letter-spacing:.08em;opacity:.55}

/* ---------- Progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--gold);z-index:901}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav__menu{display:none}
  .nav__actions .nav__link-hide{display:none}
  .nav__burger{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
  .nav__inner{grid-template-columns:auto 1fr auto;column-gap:16px}
  .nav__brand{justify-self:start}
  .nav__actions{gap:16px}
  .signature__grid,.boutiques__grid{grid-template-columns:1fr}
  .savoir__scroller{grid-template-columns:repeat(2,1fr);gap:32px}
  .journal__grid{grid-template-columns:1fr 1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .creed__grid{grid-template-columns:1fr;gap:0;padding-top:0;border-top:0}
  .creed__item{padding:26px 0;border-top:1px solid var(--line)}
  .creed__item p{max-width:46ch}
  .salon__pair{grid-template-columns:1fr;gap:22px}
  .salon__pair .frame:first-child,.salon__pair .frame:last-child{aspect-ratio:4/3}
  .band{min-height:52vh}
}
@media (max-width:640px){
  :root{--nav-h:64px}
  .nav__brand{font-size:1.05rem;letter-spacing:.22em;padding-left:.22em}
  .hero{min-height:92svh;padding-top:calc(var(--nav-h) + 24px)}
  .hero__title{font-size:clamp(2rem,7.6vw,2.8rem);max-width:none}
  .hero__lead{font-size:15px}
  .hero__gem{width:92vw}
  .eyebrow{font-size:9.5px;letter-spacing:.18em;gap:9px}
  .eyebrow::before,.eyebrow--center::after{width:16px}
  .collection{grid-template-columns:1fr;gap:26px}
  .collection:nth-child(even) .collection__media{order:0}
  .collection__media{aspect-ratio:3/4}
  .savoir__scroller{grid-template-columns:1fr;gap:28px}
  .savoir-card__media{aspect-ratio:16/11}
  .savoir__head{margin-bottom:34px}
  .maison__figures{grid-template-columns:1fr;gap:26px;text-align:left}
  .journal__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;gap:8px}
  .nl-form{flex-direction:column;align-items:flex-start;gap:14px}
  .nl-form button{align-self:flex-end}
  .hero__row p{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal,.hero__title .line > span,.hero__meta,.hero .eyebrow{opacity:1!important;transform:none!important}
}