/* ==================================================================
   Luxury Direct France — link-in-bio site
   Black & gold Art Deco. All colours / fonts in :root below.
   ================================================================== */

:root{
  --noir:    #0c0b09;   /* page ground (warm near-black)        */
  --noir-2:  #131009;   /* raised bands                         */
  --noir-3:  #1b160d;   /* cards                               */
  --gold:    #c9a24a;   /* primary gold                        */
  --gold-hi: #e8c874;   /* highlight gold                      */
  --gold-dp: #8f7133;   /* muted gold — rules, small labels    */
  --ivory:   #f2e7d0;   /* primary text on dark                */
  --ivory-2: #b7a988;   /* secondary text                     */
  --line:    rgba(201,162,74,.26);
  --glow:    0 0 60px -12px rgba(201,162,74,.35);

  --display: "Cinzel","Trajan Pro",Georgia,serif;
  --script:  "Pinyon Script","Apple Chancery",cursive;
  --sans:    "Jost","Century Gothic","Futura",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }

.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}

body{
  font-family:var(--sans);
  font-weight:300;
  background:var(--noir);
  color:var(--ivory-2);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
a:focus-visible,.btn:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:600px; margin-inline:auto; padding-inline:26px }
.wrap--wide{ max-width:1040px }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.66rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); font-weight:400;
}
h1,h2,h3{
  font-family:var(--display); font-weight:500; color:var(--ivory);
  line-height:1.2; letter-spacing:.06em; text-wrap:balance;
}

.section-head{ text-align:center; max-width:38rem; margin-inline:auto }
.section-head h2{ font-size:clamp(1.7rem,4.6vw,2.4rem); text-transform:uppercase; margin-top:16px }
.section-sub{ margin-top:16px; font-size:.96rem }
.section-foot{ text-align:center; margin-top:44px }
.section-foot .btn{ display:inline-flex; width:auto; padding-inline:40px }

/* ---------- Art Deco dividers ---------- */
.rule{
  display:flex; align-items:center; justify-content:center; gap:16px;
  width:min(340px,64%); margin:22px auto 0;
}
.rule::before,.rule::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(to right, transparent, var(--gold-dp));
}
.rule::after{ background:linear-gradient(to left, transparent, var(--gold-dp)) }
.rule i{
  width:7px; height:7px; flex:none;
  border:1px solid var(--gold); transform:rotate(45deg);
}

/* ---------- Deco corner frame (hero / final) ---------- */
.framed{ position:relative }
.framed::before,.framed::after{
  content:""; position:absolute; inset:14px; pointer-events:none;
  border:1px solid var(--line);
}
.framed::after{ inset:19px; border-color:rgba(143,113,51,.45) }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
}

/* ==================== HERO ==================== */
.hero{
  text-align:center; padding:52px 0 56px;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(232,200,116,.45), transparent),
    radial-gradient(1.5px 1.5px at 82% 16%, rgba(232,200,116,.35), transparent),
    radial-gradient(1.5px 1.5px at 68% 74%, rgba(232,200,116,.4), transparent),
    radial-gradient(1.5px 1.5px at 26% 82%, rgba(232,200,116,.3), transparent),
    radial-gradient(circle at 50% 34%, rgba(201,162,74,.10), transparent 60%);
}

.hero .wordmark{ margin:0 }
.hero .logo{
  width:min(520px,100%); margin:0 auto;
  filter:drop-shadow(var(--glow));
}

.verified{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:22px;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ivory-2);
}
.verified svg{ width:15px; height:15px; color:var(--gold); flex:none }

.tagline{
  font-family:var(--script);
  font-size:clamp(1.7rem,6vw,2.5rem);
  font-weight:400; color:var(--gold-hi);
  margin:14px 0 0; line-height:1.1;
}
.lede{ margin:20px auto 0; max-width:34rem; font-size:1rem; color:var(--ivory-2) }

/* ---------- buttons ---------- */
.cta{ display:flex; flex-direction:column; gap:14px; margin-top:34px }
@media (min-width:520px){ .cta{ flex-direction:row; justify-content:center } }

.btn{
  display:flex; align-items:center; justify-content:center; gap:.7em;
  width:100%; padding:16px 26px;
  font-family:var(--sans); font-weight:400;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  border:1px solid var(--gold);
  color:var(--gold-hi); background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (min-width:520px){ .btn{ width:auto; min-width:236px } }
.btn svg{ width:16px; height:16px; flex:none }

.btn--primary{ background:var(--gold); color:var(--noir); border-color:var(--gold) }
.btn--primary:active{ transform:translateY(1px) }
.btn--ghost:active{ background:rgba(201,162,74,.12) }

/* ==================== QUICK LINKS ==================== */
.links-section{ padding:14px 0 4px }
.links{ display:grid; gap:12px }

.link-row{
  display:flex; align-items:center; gap:16px;
  padding:17px 20px;
  background:var(--noir-3); border:1px solid var(--line);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.link-row:active{ border-color:var(--gold); background:#221b10 }
.link-row svg{ width:20px; height:20px; flex:none; color:var(--gold) }
.link-row .label{
  flex:1; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ivory);
}
.link-row .arrow{ color:var(--gold); font-size:1rem }

/* ==================== TRUST STRIP ==================== */
.trust{ margin-top:60px; background:var(--noir-2); border-block:1px solid var(--line) }
.trust ul{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 30px; padding:24px 0 }
.trust li{
  display:flex; align-items:center; gap:10px;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-2);
}
.trust li::before{ content:""; width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex:none }

/* ==================== GALLERY ==================== */
.gallery{ padding:70px 0 }
.gallery__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:40px }
@media (min-width:640px){ .gallery__grid{ grid-template-columns:repeat(3,1fr); gap:18px } }
@media (min-width:900px){ .gallery__grid{ grid-template-columns:repeat(4,1fr) } }

.tile{
  display:block;
  background:var(--noir-3); border:1px solid var(--line);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.tile__media{
  position:relative; display:block;
  aspect-ratio:4/5; overflow:hidden; background:#0a0906;
}
.tile__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--gold-dp) }
.tile__ph svg{ width:42%; opacity:.55 }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s ease }
.tile__cap{ padding:14px 12px 16px; text-align:center; border-top:1px solid var(--line) }
.tile__cap b{
  display:block; font-family:var(--display); font-size:.94rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold-hi);
}
.tile__cap span{ display:block; margin-top:5px; font-size:.54rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-2) }

/* ==================== HOW IT WORKS ==================== */
.how{
  background:var(--noir-2); border-block:1px solid var(--line); padding:80px 0;
  background-image:repeating-linear-gradient(135deg, transparent 0 24px, rgba(201,162,74,.028) 24px 25px);
}
.how__steps{ display:grid; gap:36px; margin-top:48px }
@media (min-width:720px){ .how__steps{ grid-template-columns:repeat(3,1fr); gap:32px } }
.step{ text-align:center }
@media (min-width:720px){ .step{ text-align:left } }
.step__n{ font-family:var(--display); font-size:2.4rem; font-weight:600; color:var(--gold); line-height:1 }
.step h3{ font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; margin:14px 0 10px }
.step p{ font-size:.9rem }

/* ==================== REVIEWS ==================== */
.reviews{ padding:72px 0 }
.reviews__grid{ display:grid; gap:18px; margin-top:44px }
@media (min-width:720px){ .reviews__grid{ grid-template-columns:repeat(3,1fr) } }
.quote{ background:var(--noir-3); border:1px solid var(--line); padding:32px 28px }
.quote__stars{ color:var(--gold); letter-spacing:.3em; font-size:.78rem }
.quote blockquote{ margin:0 }
.quote p{
  font-family:var(--sans); font-style:italic; font-weight:300;
  font-size:1.04rem; line-height:1.6; color:var(--ivory); margin:16px 0 20px;
}
.quote__by{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-2) }

/* ==================== FAQ ==================== */
.faq{ padding:72px 0 }
.faq__list{ max-width:760px; margin:44px auto 0; display:flex; flex-direction:column; gap:0 }
.faq__item{ border-top:1px solid var(--line) }
.faq__item:last-child{ border-bottom:1px solid var(--line) }
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px;
  font-family:var(--display); font-size:1.02rem; font-weight:500;
  letter-spacing:.04em; color:var(--ivory);
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{
  content:"+"; flex:none;
  font-family:var(--sans); font-size:1.4rem; line-height:1; color:var(--gold);
  transition:transform .25s ease;
}
.faq__item[open] summary::after{ transform:rotate(45deg) }
.faq__item summary{ -webkit-tap-highlight-color:transparent; touch-action:manipulation }
.faq__item > p{ padding:0 4px 24px; font-size:.94rem; max-width:64ch }

/* ==================== FINAL CTA ==================== */
.final{
  border-block:1px solid var(--line); padding:84px 0; text-align:center;
  background:radial-gradient(circle at 50% 40%, rgba(201,162,74,.12), transparent 62%);
}
.final h2{ font-size:clamp(1.7rem,5vw,2.5rem); text-transform:uppercase; margin-top:16px }
.final p{ margin:18px auto 0; max-width:42ch; font-size:1rem; color:var(--ivory-2) }
.final .cta{ justify-content:center }

/* ==================== FOOTER ==================== */
.footer{ background:var(--noir-2); color:var(--ivory-2); text-align:center; padding:56px 0 46px }
.footer__mono{
  font-family:var(--display); font-size:1.15rem; font-weight:600; letter-spacing:.18em; color:var(--gold);
  border:1px solid var(--line); width:64px; height:64px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px;
}
.footer p{ font-size:.68rem; letter-spacing:.16em; margin-top:8px }
.footer a{ color:var(--gold) }
.footer__legal{
  margin:22px auto 0; max-width:56ch;
  font-size:.58rem; letter-spacing:.08em; line-height:1.9; color:var(--ivory-2); opacity:.7;
}

/* ==================== HOVER (mouse/trackpad only) ====================
   Scoped so tapping on iOS/Android never leaves a "stuck" hover state. */
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{ background:var(--gold-hi); border-color:var(--gold-hi); color:var(--noir); transform:translateY(-2px); box-shadow:var(--glow) }
  .btn--ghost:hover{ background:rgba(201,162,74,.12); border-color:var(--gold-hi); color:var(--gold-hi); transform:translateY(-2px) }
  .link-row:hover{ transform:translateY(-2px); border-color:var(--gold); background:#221b10; box-shadow:inset 0 0 0 1px rgba(201,162,74,.18) }
  .tile:hover{ border-color:var(--gold); box-shadow:var(--glow); transform:translateY(-2px) }
  .tile:hover img{ transform:scale(1.05) }
  .faq__item summary:hover{ color:var(--gold-hi) }
  .footer a:hover{ color:var(--gold-hi) }
}