/* ==========================================================================
   BINT E MARIA — Design Tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Work+Sans:wght@300;400;500;600&display=swap');

:root{
  --cream:        #FAF6EF;
  --cream-deep:   #F1E9DA;
  --beige:        #E7DCC8;
  --ink:          #1B1815;
  --ink-soft:     #3A352E;
  --gold:         #A9824C;
  --gold-soft:    #C9AD82;
  --wa-green:     #25D366;
  --ig-gradient:  radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  --rose:         #C7A19A;
  --white:        #FFFFFF;

  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: .4s;
  --dur-m: .8s;
  --dur-l: 1.4s;

  --wa-number: 000; /* <-- REPLACE THIS SINGLE VALUE TO UPDATE WHATSAPP NUMBER SITE-WIDE (see script.js WA_NUMBER) */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

::selection{ background: var(--gold-soft); color: var(--ink); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

.container{
  width:100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* Type scale */
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.eyebrow{ font-family: var(--font-body); font-size: .8rem; letter-spacing: .04em; color: var(--gold); font-weight: 500; }

.display-1{ font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; }
.display-2{ font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; }
.display-3{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; }
p.lede{ font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--ink-soft); max-width: 60ch; }

.hairline{ height:1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); border:none; opacity:.6; }
.hairline-solid{ height:1px; background: var(--beige); border:none; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 16px 34px;
  font-size: .92rem; font-weight:500; letter-spacing:.02em;
  transition: transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover{ background: var(--gold); color: var(--ink); transform: translateY(-2px); }

.btn-ghost{
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn-ghost:hover{ background: var(--ink); color: var(--cream); transform: translateY(-2px); }

.btn-gold{
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover{ background: var(--ink); color: var(--cream); transform: translateY(-2px); }

.btn-wa{
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
}
.btn-wa svg{ width:18px; height:18px; flex-shrink:0; }
.btn-wa:hover{ background: transparent; color: var(--ink); }

.btn-sm{ padding: 11px 22px; font-size: .82rem; }

/* ==========================================================================
   Preloader
   ========================================================================== */
#preloader{
  position: fixed; inset:0; z-index: 9999;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
#preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#preloader .pre-word{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  color: var(--cream);
  letter-spacing: .08em;
  opacity:0;
  filter: blur(6px);
  transform: translateY(16px);
  animation: preFade 1.1s var(--ease) forwards;
}
#preloader .pre-line{
  margin-top: 22px;
  width:0;
  height:1px;
  background: var(--gold);
  animation: preLine 1s var(--ease) forwards .5s;
}
@keyframes preFade{ to{ opacity:1; filter:blur(0); transform:translateY(0); } }
@keyframes preLine{ to{ width:180px; } }

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 26px 0;
  transition: padding var(--dur-s) var(--ease), background var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), backdrop-filter var(--dur-s) var(--ease);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; }
.site-nav.solid{
  padding: 14px 0;
  background: rgba(250,246,239,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(27,24,21,.06);
}
.brand-mark{
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing:.01em; color: var(--ink);
  display:flex; flex-direction:column; line-height:1;
}
.site-nav.transparent-mode .brand-mark{ color: var(--white); }
.brand-mark small{ font-family: var(--font-body); font-size:.55rem; letter-spacing:.22em; color: var(--gold-soft); margin-top:4px; }

.nav-links{ display:flex; align-items:center; gap: 40px; }
.nav-links a{
  font-size: .92rem; position:relative; padding: 4px 0;
  color: var(--ink);
}
.site-nav.transparent-mode .nav-links a{ color: var(--white); }
.site-nav.transparent-mode.solid .nav-links a{ color: var(--ink); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background: currentColor; transition: width var(--dur-s) var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--gold); }

.nav-actions{ display:flex; align-items:center; gap:22px; }
.hamburger{
  display:none; width:30px; height:22px; position:relative; z-index:600;
}
.hamburger span{
  position:absolute; left:0; width:100%; height:1.5px; background: var(--ink); transition: all .35s var(--ease);
}
.site-nav.transparent-mode .hamburger span{ background: var(--white); }
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:10px; }
.hamburger span:nth-child(3){ top:20px; }
.hamburger.open span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }
.hamburger.open span{ background: var(--ink); }

.mobile-menu{
  position: fixed; top:0; right:0; height:100%; width:min(86vw,380px);
  background: var(--cream); z-index: 550;
  transform: translateX(100%);
  transition: transform .55s var(--ease);
  padding: 110px 36px 40px;
  display:flex; flex-direction:column; gap:8px;
  box-shadow: -20px 0 60px rgba(0,0,0,.15);
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu a{
  font-family: var(--font-display); font-size: 1.7rem; padding: 14px 0;
  border-bottom: 1px solid var(--beige);
}
.mobile-menu .btn{ margin-top: 24px; justify-content:center; }
.menu-backdrop{
  position: fixed; inset:0; background: rgba(27,24,21,.4); z-index:540;
  opacity:0; visibility:hidden; transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.menu-backdrop.open{ opacity:1; visibility:visible; }

@media (max-width: 880px){
  .nav-links{ display:none; }
  .nav-actions .btn-wa-text{ display:none; }
  .hamburger{ display:block; }
}

/* ==========================================================================
   Floating WhatsApp Button
   ========================================================================== */
.wa-float{
  position: fixed; right: 24px; bottom: 24px; z-index: 480;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--wa-green); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(37,211,102,.38);
  animation: waFloat 3.4s ease-in-out infinite;
}
.wa-float svg{ width: 28px; height:28px; }
.wa-float::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border: 1px solid rgba(37,211,102,.6);
  animation: waPulse 2.6s ease-out infinite;
}
.wa-float:hover{ transform: scale(1.06); }
.wa-tooltip{
  position:absolute; right: 74px; top:50%; transform: translateY(-50%) translateX(6px);
  background: var(--ink); color: var(--cream); padding: 8px 14px; font-size:.82rem;
  white-space:nowrap; opacity:0; visibility:hidden; transition: all .3s var(--ease);
}
.wa-float:hover .wa-tooltip{ opacity:1; visibility:visible; transform: translateY(-50%) translateX(0); }
@keyframes waFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@keyframes waPulse{ 0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.5);} 100%{ box-shadow: 0 0 0 16px rgba(37,211,102,0);} }

/* ---------- Floating Instagram Button ---------- */
.ig-float{
  position: fixed; right: 24px; bottom: 98px; z-index: 480;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ig-gradient); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(214,36,159,.35);
  animation: waFloat 3.4s ease-in-out infinite .25s;
}
.ig-float svg{ width: 23px; height:23px; }
.ig-float::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border: 1px solid rgba(214,36,159,.55);
  animation: waPulse 2.6s ease-out infinite .4s;
}
.ig-float:hover{ transform: scale(1.08); }
.ig-float .wa-tooltip{ right: 64px; }
.ig-float:hover .wa-tooltip{ opacity:1; visibility:visible; transform: translateY(-50%) translateX(0); }

@media (max-width: 560px){
  .wa-float{ right:16px; bottom:16px; width:54px; height:54px; }
  .wa-float svg{ width:24px; height:24px; }
  .ig-float{ right:16px; bottom:80px; width:44px; height:44px; }
  .ig-float svg{ width:19px; height:19px; }
  .wa-tooltip, .ig-float .wa-tooltip{ display:none; }
}

/* ---------- Nav social icon (Instagram) ---------- */
.social-icon-link{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ink); color: var(--ink);
  transition: all .25s var(--ease);
}
.social-icon-link svg{ width:17px; height:17px; }
.social-icon-link:hover{ background: var(--ig-gradient); border-color: transparent; color:#fff; transform: translateY(-2px); }
.site-nav.transparent-mode .social-icon-link{ border-color: rgba(255,255,255,.7); color: var(--white); }
.site-nav.transparent-mode.solid .social-icon-link{ border-color: var(--ink); color: var(--ink); }
.mobile-menu .social-icon-link{ display:inline-flex; margin-top:6px; border-color:var(--ink); color:var(--ink); }

/* ==========================================================================
   Scroll reveal utility
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }
.reveal-left{ opacity:0; transform: translateX(-40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-left.in{ opacity:1; transform: translateX(0); }
.reveal-right{ opacity:0; transform: translateX(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-right.in{ opacity:1; transform: translateX(0); }
.d1{ transition-delay: .1s; } .d2{ transition-delay: .2s; } .d3{ transition-delay: .3s; } .d4{ transition-delay: .4s; }

/* ==========================================================================
   Page hero banner (interior pages)
   ========================================================================== */
.page-hero{
  padding: 200px 0 90px;
  background: var(--cream-deep);
  position: relative;
  overflow:hidden;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero .eyebrow{ display:block; margin-bottom: 14px; }
.breadcrumb{ font-size:.85rem; color: var(--ink-soft); margin-top:16px; }
.breadcrumb a:hover{ color: var(--gold); }

/* ==========================================================================
   Section spacing
   ========================================================================== */
.section{ padding: 120px 0; position:relative; }
.section-tight{ padding: 90px 0; }
.section-head{ margin-bottom: 56px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }

.bg-dark{ background: var(--ink); color: var(--cream); }
.bg-dark h1, .bg-dark h2, .bg-dark h3{ color: var(--cream); }
.bg-dark p.lede{ color: rgba(250,246,239,.72); }
.bg-beige{ background: var(--cream-deep); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--ink); color: var(--cream); padding: 80px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 50px; }
.footer-grid h4{ color: var(--cream); font-size:1rem; margin-bottom: 18px; font-family: var(--font-body); font-weight:500; letter-spacing:.03em; }
.footer-grid ul li{ margin-bottom: 10px; }
.footer-grid ul a{ color: rgba(250,246,239,.68); font-size:.92rem; transition: color .3s; }
.footer-grid ul a:hover{ color: var(--gold-soft); }
.footer-brand{ font-family: var(--font-display); font-size:1.6rem; margin-bottom:14px; }
.footer-bottom{ margin-top: 60px; padding-top: 26px; border-top: 1px solid rgba(250,246,239,.14); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color: rgba(250,246,239,.55); }
.disclaimer-box{
  background: rgba(250,246,239,.05); border: 1px solid rgba(250,246,239,.14);
  padding: 22px 26px; font-size:.85rem; color: rgba(250,246,239,.65); margin-top: 40px; max-width: 900px;
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Cards: Brand / Article / Quantity / Feature
   ========================================================================== */
.brand-card{
  position: relative; overflow:hidden; aspect-ratio: 3/4;
  background: var(--ink);
}
.brand-card img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.brand-card .overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(27,24,21,0) 40%, rgba(27,24,21,.88) 100%);
  transition: background var(--dur-m) var(--ease);
}
.brand-card .info{
  position:absolute; left:0; right:0; bottom:0; padding: 26px;
  color: var(--white); transition: transform var(--dur-m) var(--ease);
}
.brand-card .info small{ color: var(--gold-soft); font-size:.78rem; letter-spacing:.05em; }
.brand-card .info h3{ color:var(--white); margin-top:6px; font-size:1.4rem; }
.brand-card .explore-link{
  display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.85rem;
  opacity:0; transform: translateY(8px); transition: all var(--dur-s) var(--ease); color: var(--gold-soft);
}
.brand-card:hover img{ transform: scale(1.08); }
.brand-card:hover .info{ transform: translateY(-6px); }
.brand-card:hover .explore-link{ opacity:1; transform: translateY(0); }

.brand-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1024px){ .brand-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .brand-grid{ grid-template-columns: 1fr 1fr; gap:12px; } }

/* carousel */
.carousel-track{
  display:flex; gap: 22px; overflow-x:auto; scroll-snap-type: x mandatory;
  padding-bottom: 20px; scrollbar-width: thin; scrollbar-color: var(--gold-soft) transparent;
}
.carousel-track::-webkit-scrollbar{ height:5px; }
.carousel-track::-webkit-scrollbar-thumb{ background: var(--gold-soft); }
.carousel-track .brand-card{ min-width: 300px; scroll-snap-align:start; flex:0 0 auto; }
@media (max-width: 560px){ .carousel-track .brand-card{ min-width: 78vw; } }

/* article/masonry grid */
.masonry{ columns: 4 260px; column-gap: 22px; }
.masonry .article-card{ break-inside: avoid; margin-bottom: 22px; }
@media (max-width: 1024px){ .masonry{ columns: 2 260px; } }
@media (max-width: 560px){ .masonry{ columns: 1; } }

.article-card{
  background: var(--white); border: 1px solid var(--beige);
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.article-card .img-wrap{ overflow:hidden; }
.article-card img{ width:100%; transition: transform 1s var(--ease); }
.article-card:hover img{ transform: scale(1.06); }
.article-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 50px rgba(27,24,21,.1); }
.article-card .body{ padding: 20px 22px 24px; }
.article-card .tag-row{ display:flex; justify-content:space-between; font-size:.75rem; color: var(--gold); letter-spacing:.03em; margin-bottom:8px; }
.article-card h3{ font-size:1.15rem; margin-bottom:6px; }
.article-card p{ font-size:.88rem; color: var(--ink-soft); margin-bottom:16px; }
.article-card .btn{ width:100%; justify-content:center; }

/* quantity cards */
.qty-row{ display:flex; flex-wrap:wrap; gap:14px; }
.qty-card{
  border: 1px solid rgba(250,246,239,.3); padding: 20px 26px; min-width:120px; text-align:center;
  transition: all var(--dur-s) var(--ease);
}
.qty-card .num{ font-family: var(--font-display); font-size:1.7rem; }
.qty-card small{ display:block; font-size:.72rem; letter-spacing:.05em; color: var(--gold-soft); margin-top:4px; }
.qty-card:hover{ background: var(--gold); border-color: var(--gold); }
.qty-card:hover, .qty-card:hover small{ color: var(--ink); }

/* why-us feature cards */
.feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--beige); border:1px solid var(--beige); }
.feature-card{ background: var(--cream); padding: 44px 36px; transition: background var(--dur-s) var(--ease); }
.feature-card:hover{ background: var(--white); }
.feature-card .num{ font-family: var(--font-display); font-size:.9rem; color: var(--gold); margin-bottom:18px; display:block; }
.feature-card h3{ font-size:1.25rem; margin-bottom:10px; }
.feature-card p{ font-size:.92rem; color: var(--ink-soft); }
@media (max-width: 860px){ .feature-grid{ grid-template-columns: 1fr; } }

/* timeline */
.timeline{ position:relative; padding-left: 40px; }
.timeline::before{ content:''; position:absolute; left:9px; top:0; width:1px; height:100%; background: var(--beige); }
.timeline::after{
  content:''; position:absolute; left:9px; top:0; width:1px; height:0%; background: var(--gold);
  transition: height 1.6s var(--ease);
}
.timeline.in::after{ height:100%; }
.timeline-step{ position:relative; padding-bottom: 52px; }
.timeline-step:last-child{ padding-bottom:0; }
.timeline-step::before{
  content:''; position:absolute; left:-40px; top:2px; width:19px; height:19px; border-radius:50%;
  background: var(--cream); border: 1px solid var(--gold); transition: background .4s var(--ease);
}
.timeline-step.in::before{ background: var(--gold); }
.timeline-step .step-tag{ font-size:.78rem; color: var(--gold); letter-spacing:.05em; margin-bottom:6px; }
.timeline-step h3{ font-size:1.3rem; margin-bottom:6px; }
.timeline-step p{ color: var(--ink-soft); max-width:50ch; }

/* filters */
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 44px; }
.filter-btn{
  padding: 10px 20px; border: 1px solid var(--beige); font-size:.85rem; transition: all .3s var(--ease);
}
.filter-btn.active, .filter-btn:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
.fade-item{ transition: opacity .45s var(--ease), transform .45s var(--ease); }
.fade-item.hidden-item{ display:none; }
.fade-item.fading{ opacity:0; transform: scale(.96); }

/* split section */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; gap:36px; } }
.split img{ width:100%; height: 560px; object-fit:cover; }
@media (max-width: 900px){ .split img{ height:380px; } }

/* showcase (category words over images) */
.showcase-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.showcase-track::-webkit-scrollbar{ display:none; }
.showcase-slide{
  position: relative; min-width: 78vw; max-width:900px; height: 66vh; scroll-snap-align:center; flex:0 0 auto;
  overflow:hidden;
}
.showcase-slide img{ width:100%; height:100%; object-fit:cover; transition: transform 6s var(--ease); }
.showcase-slide:hover img{ transform: scale(1.06); }
.showcase-slide .cat-label{
  position:absolute; left:30px; bottom:30px; color:var(--white);
  font-family: var(--font-display); font-size: clamp(2rem,5vw,3.6rem);
  text-shadow: 0 6px 30px rgba(0,0,0,.35);
}
@media (max-width:640px){ .showcase-slide{ min-width:92vw; height:52vh; } }

/* lookbook reel ("Watch The Look") — auto-scrolling right-to-left */
.lookbook-track{
  display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px;
  animation: lookbook-scroll 35s linear infinite;
  width: max-content;
  will-change: transform;
}
.lookbook-track::-webkit-scrollbar{ display:none; }
.lookbook-track:hover{ animation-play-state: paused; }

/* Outer wrapper to clip the scrolling track */
.lookbook-reel{
  overflow: hidden;
  width: 100%;
  cursor: default;
}

@keyframes lookbook-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.lookbook-card{
  position:relative; min-width:230px; max-width:250px; aspect-ratio:9/16; flex:0 0 auto;
  overflow:hidden; background:var(--ink); border-radius:4px;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lookbook-card:hover{ transform: scale(1.03); box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.lookbook-card img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.lookbook-card:hover img{ transform: scale(1.08); }
.lookbook-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(27,24,21,.55) 0%, rgba(27,24,21,0) 32%, rgba(27,24,21,0) 55%, rgba(27,24,21,.92) 100%);
}
.lookbook-top{ position:absolute; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:flex-start; z-index:2; }
.lookbook-mark{ font-family:var(--font-body); font-size:.62rem; letter-spacing:.09em; color:var(--cream); font-weight:600; }
.lookbook-signature{ font-family:var(--font-display); font-style:italic; font-size:.8rem; color:var(--cream); text-align:right; line-height:1.3; }
.lookbook-signature small{ display:block; font-family:var(--font-body); font-style:normal; font-size:.6rem; letter-spacing:.05em; color:var(--gold-soft); margin-top:2px; }
.lookbook-foot{ position:absolute; left:14px; right:14px; bottom:16px; z-index:2; display:flex; align-items:center; gap:10px; }
.lookbook-foot .lookbook-thumb{ width:38px; height:38px; border-radius:6px; overflow:hidden; flex:0 0 auto; border:1.5px solid rgba(250,246,239,.7); }
.lookbook-foot .lookbook-thumb img{ width:100%; height:100%; object-fit:cover; }
.lookbook-foot strong{ display:block; color:var(--cream); font-size:.84rem; font-weight:600; line-height:1.25; }
.lookbook-foot small{ display:block; color:var(--gold-soft); font-size:.7rem; margin-top:2px; }
@media (max-width:640px){ .lookbook-card{ min-width:64vw; max-width:70vw; } }

/* Lookbook Popup Modal */
.lookbook-modal{
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.82); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
  padding: 20px;
}
.lookbook-modal.open{ display:flex; animation: modal-in .3s var(--ease); }
@keyframes modal-in{
  from{ opacity:0; transform:scale(.94); }
  to  { opacity:1; transform:scale(1); }
}
.lookbook-modal-inner{
  position:relative; max-width:380px; width:100%; aspect-ratio:9/16;
  border-radius:10px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.7);
}
.lookbook-modal-inner img{
  width:100%; height:100%; object-fit:cover;
}
.lookbook-modal-inner .lookbook-overlay{ position:absolute; inset:0; }
.lookbook-modal-inner .lookbook-top{ position:absolute; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:flex-start; z-index:2; }
.lookbook-modal-inner .lookbook-foot{ position:absolute; left:14px; right:14px; bottom:16px; z-index:2; display:flex; align-items:center; gap:10px; }
.lookbook-modal-close{
  position:absolute; top:14px; right:14px; z-index:10;
  width:36px; height:36px; border-radius:50%;
  background:rgba(27,24,21,.7); border:1px solid rgba(250,246,239,.3);
  color:var(--cream); font-size:18px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .2s; line-height:1;
}
.lookbook-modal-close:hover{ background:var(--gold); }

/* trust / stats bar */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item{ text-align:center; padding: 12px 24px; position:relative; }
.stat-item + .stat-item::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:56%; background:rgba(250,246,239,.18);
}
.stat-num{ display:block; font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); color:var(--cream); }
.stat-label{ display:block; margin-top:8px; font-size:.78rem; letter-spacing:.04em; color:var(--gold-soft); }
@media (max-width:760px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .stat-item:nth-child(3)::before{ display:none; }
}

/* testimonials ("What Our Customers Say") — swipeable on mobile, multi-card on desktop */
.testimonial-track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding: 6px 6px 20px;
}
.testimonial-track::-webkit-scrollbar{ display:none; }
.testimonial-card{
  position:relative; flex:0 0 auto; scroll-snap-align:start;
  width: 320px; background:var(--white); border:1px solid var(--beige);
  padding: 34px 28px 26px; transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.testimonial-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 50px rgba(27,24,21,.1); }
.testimonial-quote{ width:30px; height:30px; fill:var(--gold-soft); opacity:.85; margin-bottom:14px; }
.testimonial-stars{ color:var(--gold); letter-spacing:2px; font-size:.95rem; margin-bottom:14px; }
.testimonial-text{ font-family: var(--font-display); font-style:italic; font-size:1.05rem; line-height:1.55; color:var(--ink); min-height:110px; }
.testimonial-footer{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--beige); }
.testimonial-avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  background: var(--ink); color: var(--cream); font-family: var(--font-display); font-size:.9rem;
  display:flex; align-items:center; justify-content:center; letter-spacing:.02em;
}
.testimonial-footer strong{ display:block; font-size:.92rem; font-weight:600; }
.testimonial-footer small{ display:block; font-size:.78rem; color: var(--gold); margin-top:2px; letter-spacing:.02em; }
@media (max-width:640px){
  .testimonial-card{ width:82vw; }
}

/* hero */
.hero{ position:relative; height:100vh; min-height:640px; overflow:hidden; display:flex; align-items:flex-end; }
.hero-bg{ position:absolute; inset:0; z-index:1; }
.hero-bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  animation: heroCycle 16s infinite;
  transform: scale(1.08);
}
.hero-bg img:nth-child(1){ animation-delay:0s; }
.hero-bg img:nth-child(2){ animation-delay:5.3s; }
.hero-bg img:nth-child(3){ animation-delay:10.6s; }
@keyframes heroCycle{
  0%{ opacity:0; transform:scale(1.08); }
  4%{ opacity:1; }
  30%{ opacity:1; transform:scale(1.15); }
  36%{ opacity:0; }
  100%{ opacity:0; }
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, rgba(27,24,21,.35) 0%, rgba(27,24,21,.2) 40%, rgba(27,24,21,.85) 100%);
}
.hero-content{ position:relative; z-index:3; color:var(--white); width:100%; padding-bottom: 90px; }
.hero-kicker{ font-size:.85rem; letter-spacing:.08em; color: var(--gold-soft); margin-bottom:18px; }
.hero-kicker span{ display:block; font-family: var(--font-display); font-size:1.4rem; color:var(--white); letter-spacing:.02em; margin-top:6px; }
.hero-headline{ font-size: clamp(2.6rem, 7vw, 5.6rem); line-height:1.02; max-width: 16ch; }
.hero-headline .word{ display:inline-block; opacity:0; filter:blur(6px); transform: translateY(20px); animation: wordUp .9s var(--ease) forwards; }
@keyframes wordUp{ to{ opacity:1; filter:blur(0); transform:translateY(0); } }
.hero-desc{ margin-top: 26px; max-width: 46ch; color: rgba(250,246,239,.82); font-size: 1.02rem; }
.hero-actions{ display:flex; gap:18px; margin-top:38px; flex-wrap:wrap; }
.hero-actions .btn-ghost{ border-color: rgba(250,246,239,.5); color: var(--white); }
.hero-actions .btn-ghost:hover{ background: var(--white); color: var(--ink); }

.scroll-cue{
  position:absolute; bottom: 28px; left:50%; transform: translateX(-50%); z-index:3;
  color: rgba(250,246,239,.75); font-size:.72rem; letter-spacing:.14em; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue .arrow{ width:1px; height:34px; background: rgba(250,246,239,.5); position:relative; overflow:hidden; }
.scroll-cue .arrow::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--gold-soft);
  animation: arrowDrop 2s var(--ease) infinite;
}
@keyframes arrowDrop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* image gallery lightbox */
.gallery-main{ position:relative; overflow:hidden; height: 560px; margin-bottom:16px; background:var(--ink); }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:flex; gap:12px; overflow-x:auto; }
.gallery-thumbs img{ width:88px; height:110px; object-fit:cover; opacity:.55; cursor:pointer; transition: opacity .3s, outline .3s; }
.gallery-thumbs img.active{ opacity:1; outline: 2px solid var(--gold); }
.lightbox{
  position:fixed; inset:0; background: rgba(27,24,21,.94); z-index:900;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: all .4s var(--ease);
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:88vw; max-height:82vh; object-fit:contain; }
.lightbox-close{ position:absolute; top:26px; right:32px; color:var(--white); font-size:2rem; }
@media (max-width:700px){ .gallery-main{ height: 360px; } }

/* utility */
.text-center{ text-align:center; }
.mt-8{ margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;} .mb-32{margin-bottom:32px;}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid-3{ grid-template-columns:1fr; } }
.pill{ display:inline-block; font-size:.75rem; letter-spacing:.04em; color: var(--gold); border:1px solid var(--gold-soft); padding:5px 14px; margin-bottom:18px; }
.notice-box{ background: var(--white); border-left: 2px solid var(--gold); padding: 30px 36px; }

/* ==========================================================================
   Brand Marquee — floating brand strip (homepage / brands page)
   ========================================================================== */
.brand-marquee-section{ overflow:hidden; }
.brand-marquee{
  position: relative;
  overflow: hidden;
  margin-top: 42px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.brand-marquee-track{
  display:flex; align-items:center; gap:14px; width:max-content;
  animation: brandMarquee 42s linear infinite;
}
.brand-marquee:hover .brand-marquee-track{ animation-play-state: paused; }
.brand-marquee-track.reverse{ animation-direction: reverse; }
.brand-chip{
  flex: none;
  display:flex; align-items:center; justify-content:center;
  padding: 18px 26px;
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: var(--radius, 4px);
  box-shadow: 0 4px 18px rgba(27,24,21,.05);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.brand-chip:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(169,130,76,.18);
  color: var(--gold);
  border-color: var(--gold-soft);
}
.bg-dark .brand-chip{ background: rgba(250,246,239,.06); border-color: rgba(250,246,239,.16); color: var(--cream); }
.bg-dark .brand-chip:hover{ color: var(--gold-soft); border-color: var(--gold-soft); }

@keyframes brandMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .brand-marquee-track{ animation:none; flex-wrap:wrap; width:100%; justify-content:center; }
  .brand-marquee-track [aria-hidden="true"]{ display:none; }
}
@media (max-width:560px){
  .brand-chip{ padding:14px 18px; font-size:.92rem; }
  .brand-marquee{ margin-top:28px; }
}

/* ---------- Static categorized brand tag grid (brands.html) ---------- */
.brand-tag-group{ margin-top:20px; }
.brand-tag-group h3{ font-size:1.25rem; margin-bottom:18px; }
.brand-tag-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.brand-tag{
  font-family: var(--font-body); font-size:.85rem; letter-spacing:.01em;
  color: var(--ink-soft); background: var(--white); border:1px solid var(--beige);
  padding:9px 16px; transition: all .25s var(--ease);
}
.brand-tag:hover{ color: var(--ink); border-color: var(--gold-soft); background: var(--beige); transform: translateY(-2px); }
@media (max-width:560px){ .brand-tag{ font-size:.8rem; padding:8px 13px; } }