/* =========================
   Base / Tokens
   ========================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  /* Colors */
  --gold:#C9A84C; --gold-light:#E8C97A; --gold-dark:#8B6914;
  --black:#0A0A0A; --near-black:#111111; --dark:#1A1A1A; --dark-2:#222222;
  --mid:#333333; --muted:#666666; --light-muted:#999999;
  --off-white:#F5F0E8; --white:#FAFAF8;

  /* Typography scale */
  --fs-xs:0.72rem; --fs-sm:0.78rem; --fs-md:0.88rem;
  --fs-base:1rem; --fs-sub:1.05rem; --fs-lg:1.25rem;
  --fs-xl:2.2rem; --fs-xxl:3.5rem;

  /* Spacing */
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-5:3rem; --space-6:4rem; --space-7:5rem; --space-8:7rem; --space-9:8rem;

  /* Motion */
  --dur-1:.3s; --dur-2:.4s; --easing: cubic-bezier(0.16,1,0.3,1);
}

html{ scroll-behavior:smooth; }
body{
  background:var(--black); color:var(--off-white);
  font-family:'DM Sans',system-ui,sans-serif; font-weight:300;
  overflow-x:hidden;
}

a{ text-decoration:none; }
a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

section{ padding: var(--space-8) var(--space-6); scroll-margin-top:90px; }

/* =========================
   Navigation
   ========================= */
nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.5rem var(--space-6);
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(to bottom, rgba(10,10,10,0.98), transparent);
  transition: background var(--dur-2);
}
nav.scrolled{
  background:rgba(10,10,10,0.97);
  border-bottom:1px solid rgba(201,168,76,0.15);
}

.logo{
  font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700;
  letter-spacing:.08em; color:var(--off-white);
}
.logo span{ color:var(--gold); }

.nav-links{ display:flex; gap:2.5rem; list-style:none; }
.nav-links a{
  color:rgba(245,240,232,0.65); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-weight:400;
  transition: color var(--dur-1);
}
.nav-links a:hover{ color:var(--gold); }

.nav-cta{
  background:transparent; border:1px solid var(--gold); color:var(--gold);
  padding:.6rem 1.4rem; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.nav-cta:hover{ background:var(--gold); color:var(--black); }

/* =========================
   Hero
   ========================= */
.hero{
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
  position:relative; overflow:hidden;
}
.hero-left{
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--space-9) var(--space-6) var(--space-7);
  position:relative; z-index:2;
}
.hero-eyebrow{
  font-size:var(--fs-xs); letter-spacing:.25em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1.8rem; display:flex; align-items:center; gap:1rem;
}
.hero-eyebrow::before{ content:''; width:2.5rem; height:1px; background:var(--gold); }

.hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(3.2rem,5vw,5.5rem); font-weight:900; line-height:1; letter-spacing:-.02em;
  margin-bottom:2rem;
}
.hero h1 em{ font-style:italic; color:var(--gold); }

.hero-sub{
  font-size:var(--fs-sub); line-height:1.8; color:rgba(245,240,232,0.6);
  max-width:420px; margin-bottom: var(--space-5); font-weight:300;
}

.hero-actions{ display:flex; gap:1.2rem; align-items:center; }

.btn-primary{
  background:var(--gold); color:var(--black); border:0; padding:1rem 2.2rem;
  font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; display:inline-block;
  transition: background var(--dur-1), transform var(--dur-1);
}
.btn-primary:hover{ background:var(--gold-light); transform:translateY(-2px); }

.btn-ghost{
  color:rgba(245,240,232,0.6); font-size:.82rem; letter-spacing:.08em;
  display:flex; align-items:center; gap:.6rem; transition: color var(--dur-1);
}
.btn-ghost:hover{ color:var(--gold); }
.btn-ghost::after{ content:'→'; font-size:1.1em; transition: transform var(--dur-1); }
.btn-ghost:hover::after{ transform:translateX(4px); }

.hero-right{ position:relative; overflow:hidden; }
.hero-right::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, var(--black) 0%, transparent 40%); z-index:1;
}
.hero-bg{ width:100%; height:100%; object-fit:cover; opacity:.35; filter:grayscale(20%); }

/* Deco */
.hero-deco{
  position:absolute; right:-80px; bottom:-80px; width:380px; height:380px; opacity:.04;
  animation:rotate 60s linear infinite;
}
@keyframes rotate{ to{ transform:rotate(360deg); } }

.hero-stats{
  position:absolute; bottom:3rem; right:3rem; z-index:2; display:flex; gap:2.5rem;
}
.hero-stat-num{
  font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:700; color:var(--gold); line-height:1; display:block;
}
.hero-stat-label{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(245,240,232,0.45);
  margin-top:.4rem; display:block;
}

/* =========================
   Marquee
   ========================= */
.marquee-wrap{
  border-block:1px solid rgba(201,168,76,0.2);
  background:var(--near-black); overflow:hidden; padding:1rem 0;
}
.marquee-track{
  display:flex; gap:0; animation:marquee 30s linear infinite; white-space:nowrap; width:max-content;
}
.marquee-item{
  padding:0 3rem; font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(201,168,76,0.6); display:flex; align-items:center; gap:1rem;
}
.marquee-item::after{ content:'✦'; color:var(--gold); font-size:.55rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =========================
   Sections Decor
   ========================= */
.section-label{
  font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1.2rem; display:flex; align-items:center; gap:.8rem;
}
.section-label::before{ content:''; width:1.8rem; height:1px; background:var(--gold); }

.section-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,3.5vw,3.5rem); font-weight:700; line-height:1.12; letter-spacing:-.01em;
  margin-bottom:1.5rem;
}
.section-sub{ color:rgba(245,240,232,0.5); line-height:1.8; font-size:.95rem; margin-top:1rem; }

/* =========================
   About
   ========================= */
.about{
  background:var(--near-black); display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center;
}
.about-text p{
  color:rgba(245,240,232,0.6); line-height:1.9; margin-bottom:1.5rem; font-size:var(--fs-base);
}
.about-features{ display:flex; flex-direction:column; gap:2.5rem; }
.feature-item{ display:flex; gap:1.5rem; align-items:flex-start; }
.feature-icon{
  width:48px; height:48px; border:1px solid rgba(201,168,76,0.3);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold); font-size:1.1rem;
}
.feature-title{ font-family:'Playfair Display',serif; font-size:1.05rem; margin-bottom:.4rem; font-weight:500; }
.feature-desc{ font-size:var(--fs-md); color:rgba(245,240,232,0.5); line-height:1.7; }

/* =========================
   Services
   ========================= */
.services{ background:var(--black); }
.services-header{
  display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: var(--space-5);
}
.services-header-text{ max-width:500px; }

.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:rgba(201,168,76,0.1);
}
.service-card{
  background:var(--near-black); padding:3rem 2.5rem; position:relative; overflow:hidden;
  transform:translateY(0);
  transition: background var(--dur-2) var(--easing), transform var(--dur-2) var(--easing);
  cursor:default;
}
.service-card:hover{ background:var(--dark-2); transform:translateY(-6px); }
.service-card::before{
  content:''; position:absolute; inset:auto 0 0 0; height:2px; width:0; background:var(--gold);
  transition: width var(--dur-2) var(--easing);
}
.service-card:hover::before{ width:100%; }

.service-num{
  font-family:'Playfair Display',serif; font-size:4rem; font-weight:900; color:rgba(201,168,76,0.07);
  position:absolute; top:1.5rem; right:2rem; line-height:1; user-select:none;
}
.service-icon{ font-size:1.5rem; margin-bottom:1.8rem; display:block; }
.service-title{ font-family:'Playfair Display',serif; font-size:var(--fs-lg); margin-bottom:.8rem; font-weight:500; }
.service-desc{ font-size:.875rem; color:rgba(245,240,232,0.45); line-height:1.8; }

/* =========================
   Reviews
   ========================= */
.reviews{ background:var(--dark); position:relative; overflow:hidden; }
.reviews-bg-text{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Playfair Display',serif; font-size:20rem; font-weight:900; color:rgba(201,168,76,0.025);
  white-space:nowrap; user-select:none; pointer-events:none;
}
.reviews-header{ text-align:center; margin-bottom: var(--space-5); position:relative; z-index:1; }

.rating-display{ display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:1.5rem; }
.rating-num{ font-family:'Playfair Display',serif; font-size:var(--fs-xxl); font-weight:900; color:var(--gold); line-height:1; }
.rating-stars{ color:var(--gold); font-size:1.3rem; letter-spacing:.1em; }
.rating-count{ color:rgba(245,240,232,0.4); font-size:.85rem; }

.reviews-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; position:relative; z-index:1;
}
.review-card{
  background:rgba(255,255,255,0.03); border:1px solid rgba(201,168,76,0.12); padding:2rem; position:relative;
  transition:border-color var(--dur-1);
}
.review-card:hover{ border-color:rgba(201,168,76,0.3); }
.review-quote{
  position:absolute; top:1.5rem; right:1.8rem;
  font-family:'Playfair Display',serif; font-size:4rem; color:rgba(201,168,76,0.12); line-height:1; user-select:none;
}
.review-stars{ color:var(--gold); font-size:.8rem; margin-bottom:1rem; letter-spacing:.1em; }
.review-text{ font-size:.92rem; line-height:1.8; color:rgba(245,240,232,0.7); margin-bottom:1.5rem; }
.review-author{ font-size:var(--fs-sm); font-weight:500; letter-spacing:.06em; color:var(--gold); }
.review-meta{ font-size:.72rem; color:rgba(245,240,232,0.35); margin-top:.2rem; }

/* =========================
   Brands
   ========================= */
.brands{ background:var(--near-black); text-align:center; }
.brands-sub{ color:rgba(245,240,232,0.4); margin-bottom:3.5rem; font-size:.9rem; }
.brands-list{ display:flex; justify-content:center; flex-wrap:wrap; gap:1rem 2rem; }
.brand-tag{
  border:1px solid rgba(201,168,76,0.2); padding:.7rem 1.8rem;
  font-size:var(--fs-sm); letter-spacing:.15em; text-transform:uppercase; color:rgba(245,240,232,0.5);
  transition: color var(--dur-1), border-color var(--dur-1); cursor:default;
}
.brand-tag:hover{ border-color:var(--gold); color:var(--gold); }

/* =========================
   CTA
   ========================= */
.cta-section{
  background:var(--black); text-align:center; padding: var(--space-9) var(--space-6);
  position:relative; overflow:hidden;
}
.cta-section::before{
  content:''; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%); pointer-events:none;
}
.cta-section .section-title{ max-width:650px; margin:0 auto 1.5rem; }
.cta-section .section-sub{ max-width:500px; margin:0 auto 3rem; }

.contact-grid{
  display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; margin-top: var(--space-5); position:relative; z-index:1;
}
.contact-item{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.contact-icon{
  width:52px; height:52px; border:1px solid rgba(201,168,76,0.3);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--gold); margin-bottom:.5rem;
}
.contact-label{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,240,232,0.35); }
.contact-value{ font-size:var(--fs-base); font-weight:500; color:var(--off-white); }

/* =========================
   Footer
   ========================= */
footer{
  background:var(--near-black); border-top:1px solid rgba(201,168,76,0.15);
  padding:3rem var(--space-6); display:flex; justify-content:space-between; align-items:center;
}
.footer-logo{ font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:700; color:var(--off-white); }
.footer-logo span{ color:var(--gold); }
.footer-copy{ font-size:var(--fs-sm); color:rgba(245,240,232,0.3); }
.footer-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.footer-link {
  color: var(--off-white);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-link:hover,
.footer-link:focus-visible { color: var(--gold); }

.footer-address {
  font-style: normal;
  font-size: 0.78rem;
  color: rgba(245,240,232,0.4);
  line-height: 1.4;
}

.footer-hours {
  font-size: 0.78rem;
  color: rgba(245,240,232,0.45);
  letter-spacing: 0.02em;
}

@media (max-width: 900px){
  .footer-right { text-align: center; }
}


/* =========================
   Reveal on scroll
   ========================= */
.reveal{
  opacity:0; transform:translateY(30px);
  transition: opacity .8s var(--easing), transform .8s var(--easing);
}
.reveal.visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }
.reveal-delay-4{ transition-delay:.4s; }
.reveal-delay-5{ transition-delay:.5s; }

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* =========================
   Responsive ≤ 900px
   ========================= */
@media (max-width:900px){
  nav{ padding:1.5rem 2rem; }
  .nav-links{ display:none; }

  .hero{ grid-template-columns:1fr; }
  .hero-bg{ opacity:.2; }
  .hero-right{ position:absolute; inset:0; z-index:0; }
  .hero-left{ padding: var(--space-9) 2rem var(--space-7); z-index:1; background:rgba(10,10,10,0.7); }
  .hero-stats{ right:2rem; }

  .about{ grid-template-columns:1fr; gap:3rem; padding: var(--space-7) 2rem; }

  .services{ padding: var(--space-7) 2rem; }
  .services-header{ flex-direction:column; gap:2rem; align-items:flex-start; }
  .services-grid{ grid-template-columns:1fr; }

  .reviews{ padding: var(--space-7) 2rem; }
  .reviews-grid{ grid-template-columns:1fr; }

  .brands{ padding: var(--space-7) 2rem; }
  .cta-section{ padding: var(--space-7) 2rem; }

  footer{
    flex-direction:column; gap:1.5rem; text-align:center; padding:2.5rem 2rem;
  }
}