/* ============================================================
   VELOUR — House of Touch
   Luxe charcoal · ivory · dusty rose. Serif + grotesque.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400;1,6..96,500&family=Archivo+Expanded:wght@500;600;700;800&family=Archivo:wght@300;400;500;600&display=swap');

:root{
  --ink:#0c0a09;
  --ink-2:#110e0c;
  --surface:#181410;
  --surface-2:#1f1a15;
  --ivory:#f0e7dc;
  --ivory-dim:#cdbfb0;
  --muted:#9a8d7f;
  --faint:#6b6055;
  --rose:#d98298;
  --rose-2:#e7a5b4;
  --rose-deep:#a85e72;
  --gold:#c9a87a;
  --line:rgba(240,231,220,.13);
  --line-2:rgba(240,231,220,.06);
  --serif:'Bodoni Moda',serif;
  --disp:'Archivo Expanded',sans-serif;
  --sans:'Archivo',-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1360px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--rose); color:var(--ink); }

.shell{ max-width:var(--maxw); margin:0 auto; padding:0 48px; width:100%; }

/* ---------- type ---------- */
.eyebrow{ font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.36em; text-transform:uppercase; color:var(--rose); display:inline-flex; align-items:center; gap:14px; }
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--rose); }
.eyebrow.solo::before{ display:none; }
.serif{ font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-.01em; }
.serif em{ font-style:italic; color:var(--rose); }
.lede{ color:var(--ivory-dim); font-size:clamp(16px,1.25vw,19px); font-weight:300; max-width:58ch; line-height:1.7; }
.rose{ color:var(--rose); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer; border:none;
  font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  padding:17px 32px; transition:transform .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  position:relative; white-space:nowrap;
}
.btn-rose{ background:var(--rose); color:var(--ink); }
.btn-rose:hover{ background:var(--rose-2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ivory); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--rose); color:var(--rose); }
.btn-ivory{ background:var(--ivory); color:var(--ink); }
.btn-ivory:hover{ background:var(--rose); transform:translateY(-2px); }
.btn .ar{ transition:transform .4s var(--ease); }
.btn:hover .ar{ transform:translateX(5px); }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 48px; transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(8,6,5,.86); backdrop-filter:blur(16px); padding:14px 48px; border-bottom:1px solid var(--line); }
.nav .mark{ display:flex; align-items:center; gap:13px; }
.nav .mark .sym{ width:34px; height:34px; flex:none; }
.nav .mark .wm{ font-family:var(--serif); font-size:23px; letter-spacing:.16em; text-transform:uppercase; }
.nav .links{ display:flex; gap:32px; }
.nav .links a{ font-family:var(--disp); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-dim); position:relative; padding:7px 0; transition:color .3s; }
.nav .links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--rose); transition:width .35s var(--ease); }
.nav .links a:hover{ color:var(--ivory); } .nav .links a:hover::after, .nav .links a.active::after{ width:100%; }
.nav .links a.active{ color:var(--ivory); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav .menu-btn{ display:none; background:none; border:none; color:var(--ivory); cursor:pointer; font-size:21px; }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:300; background:var(--ink); transform:translateX(100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; padding:26px 30px; }
.drawer.open{ transform:none; }
.drawer .dtop{ display:flex; justify-content:space-between; align-items:center; }
.drawer .dtop .wm{ font-family:var(--serif); font-size:21px; letter-spacing:.16em; text-transform:uppercase; }
.drawer .dlinks{ display:flex; flex-direction:column; gap:4px; margin-top:9vh; }
.drawer .dlinks a{ font-family:var(--serif); font-size:34px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.drawer .dlinks a:hover{ color:var(--rose); }
.drawer .dcta{ margin-top:auto; }
.drawer .dcta .btn{ width:100%; justify-content:center; }

/* ---------- footer ---------- */
.footer{ background:var(--ink-2); border-top:1px solid var(--line); padding:90px 0 36px; position:relative; z-index:2; }
.footer .top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:46px; padding-bottom:56px; border-bottom:1px solid var(--line); }
.footer .wm{ font-family:var(--serif); font-size:30px; letter-spacing:.12em; text-transform:uppercase; }
.footer p.tag{ color:var(--muted); font-size:14px; margin-top:16px; max-width:34ch; line-height:1.7; }
.footer h5{ font-family:var(--disp); font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer ul a{ color:var(--ivory-dim); font-size:14px; transition:color .3s; }
.footer ul a:hover{ color:var(--rose); }
.footer .news p{ color:var(--ivory-dim); font-size:14px; margin-bottom:16px; }
.footer .news form{ display:flex; border:1px solid var(--line); }
.footer .news input{ flex:1; background:transparent; border:none; padding:14px 16px; color:var(--ivory); font-family:var(--sans); font-size:14px; outline:none; }
.footer .news input::placeholder{ color:var(--faint); }
.footer .news button{ background:var(--rose); border:none; color:var(--ink); padding:0 22px; font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:background .3s; }
.footer .news button:hover{ background:var(--rose-2); }
.footer .social{ display:flex; gap:12px; margin-top:22px; }
.footer .social a{ width:38px; height:38px; border:1px solid var(--line); display:grid; place-items:center; color:var(--ivory-dim); transition:.3s var(--ease); font-family:var(--disp); font-size:11px; font-weight:600; }
.footer .social a:hover{ border-color:var(--rose); color:var(--rose); }
.footer .bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; color:var(--faint); font-size:12px; letter-spacing:.04em; flex-wrap:wrap; gap:12px; }
.footer .bottom .lr{ display:flex; gap:22px; }
.footer .bottom a:hover{ color:var(--muted); }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.09s; } .rv.d2{ transition-delay:.18s; } .rv.d3{ transition-delay:.27s; } .rv.d4{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1 !important; transform:none !important; } }

/* image grade — warm, soft, sensual */
.grade{ filter:grayscale(.25) contrast(1.02) brightness(.92) sepia(.12); }
.grade-deep{ filter:grayscale(.4) contrast(1.05) brightness(.7) sepia(.15); }

/* the VELOUR symbol: a soft drop / touch petal — reusable */
.sym path{ }

/* ---------- cinematic "video" motion on hero / CTA backgrounds ---------- */
@keyframes kenburns{ 0%{ transform:scale(1.05) translate(0,0); } 100%{ transform:scale(1.2) translate(-2.5%,-2%); } }
.hero .bg img, .bookcta .bg img, .baside .bg img{ transform-origin:center; animation:kenburns 26s ease-in-out infinite alternate; will-change:transform; }
/* drifting light, like film on a body */
.hero .bg::before{ content:""; position:absolute; inset:-10%; z-index:1; pointer-events:none; mix-blend-mode:screen; opacity:.5;
  background:radial-gradient(38% 50% at 30% 35%, rgba(217,130,152,.28), transparent 60%);
  animation:heroglow 18s ease-in-out infinite alternate; }
@keyframes heroglow{ 0%{ transform:translate(0,0) scale(1); opacity:.35; } 100%{ transform:translate(14%,8%) scale(1.25); opacity:.6; } }
@media (prefers-reduced-motion:reduce){
  .hero .bg img, .bookcta .bg img, .baside .bg img{ animation:none; }
  .hero .bg::before{ animation:none; }
}

@media (max-width:1024px){
  .shell{ padding:0 32px; } .nav{ padding:16px 32px; } .nav.scrolled{ padding:12px 32px; }
  .footer .top{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:760px){
  .shell{ padding:0 22px; } .nav{ padding:15px 22px; }
  .nav .links, .nav-cta .btn{ display:none; } .nav .menu-btn{ display:block; }
  .footer .top{ grid-template-columns:1fr; }
}


/* ===================== KISS KITTENS BRIDGE ===================== */
:root{
  --ink:#0a0a0a; --ink-2:#0e0e0e; --surface:#141414; --surface-2:#1b1b1b;
  --ivory:#ffffff; --ivory-dim:#cfcfcf; --muted:#8a8a8a; --faint:#5a5a5a;
  --rose:#ED0080; --rose-2:#ff1f97; --rose-deep:#b3005f; --gold:#ED0080;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.07);
  --serif:'Archivo Expanded',-apple-system,sans-serif;
}
body{ background:#0a0a0a; }
h1,h2,h3,.serif{ text-transform:uppercase; letter-spacing:-.02em; }
h1,h2,h3{ font-weight:800 !important; }
em{ font-style:normal !important; }
.eyebrow{ font-weight:600; }
.btn{ font-weight:600 !important; }
/* hero/CTA cinematic motion */
@keyframes kbridge{ 0%{transform:scale(1.05)}100%{transform:scale(1.18) translate(-2%,-2%)} }
.phero .bg img, .baside .bg img, .bookcta .bg img{ transform-origin:center; animation:kbridge 26s ease-in-out infinite alternate; }
@media (prefers-reduced-motion:reduce){ .phero .bg img,.baside .bg img,.bookcta .bg img{ animation:none; } }