:root{
  --bg:#000000;
  --panel:#0b0b0b;
  --panel-2:#121212;
  --line:#1f1f1f;
  --fg:#ffffff;
  --muted:#bdbdbd;
  --gold:#c7a34b; /* rich gold; tweak if you prefer your previous hex */
  --radius:14px;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --gold:#c7a34b;
  --gold-2:#e1c476;
  --line:#1f1f1f;
  --font-script: 'Lobster', cursive;   /* your script logo font */
  --font-sans: 'Rajdhani', sans-serif; /* modern body */
  --font-serif: 'Playfair Display', serif;
}

body {
  font-family: var(--font-sans);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:'Rajdhani',sans-serif;scroll-behavior:smooth}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

.site-header{
  position:fixed; inset:0 0 auto 0; width:100%; z-index:80;
  backdrop-filter:saturate(120%) blur(10px);
  background:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.45));
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:transform .45s cubic-bezier(.22,.61,.36,1), background .3s ease, box-shadow .3s ease;
}
.site-header::after{
  content:"";
  position:absolute; inset:auto 0 -1px 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(199,163,75,.55), transparent);
  pointer-events:none;
  opacity:.9;
}
.site-header.scrolled{
  background:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.6));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.site-header.hide{ transform:translateY(-100%) }

.nav{
  height:72px; max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

/* Brand with subtle gold shimmer on hover */
.brand{ font-family:'Playfair Display',serif; font-weight:700; letter-spacing:.5px; font-size:1.25rem; position:relative }
.brand span{ color:var(--gold) }
.brand:hover{ filter:brightness(1.06) }
.brand::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transition:width .35s ease;
}
.brand:hover::after{ width:100% }

/* Links */
.nav-links{ list-style:none; display:flex; gap:22px; align-items:center }
.nav-links a{
  color:#e8e8e8; font-weight:700; letter-spacing:.4px; position:relative; padding:6px 2px;
  transition:color .25s ease, opacity .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background:linear-gradient(90deg,transparent, var(--gold), transparent);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover{ color:#fff }
.nav-links a:hover::after{ transform:scaleX(1) }
.nav-links a.active{ color:var(--gold) }
.nav-links a.active::after{ transform:scaleX(1) }

/* Contact pill */
.nav-links .cta-link {
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: .5rem .9rem;
  background: #000;
  color: var(--gold);
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

/* Hover effect: gold background + bold black text */
.nav-links .cta-link:hover {
  background: var(--gold);
  color: #000;          /* bold black text */
  font-weight: 700;     /* make it bold */
  box-shadow: 0 10px 24px rgba(199,163,75,.3);
  transform: translateY(-2px);
}

/* Mobile */
.menu-toggle{
  display:none; width:40px; height:40px; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; background:rgba(0,0,0,.25);
  align-items:center; justify-content:center; gap:4px; cursor:pointer;
}
.menu-toggle span{
  display:block; width:18px; height:2px; background:#eaeaea; border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

@media (max-width:900px){
  .menu-toggle{ display:inline-flex }
  .nav-links{
    position:fixed; inset:72px 0 auto 0; height:calc(100vh - 72px);
    display:flex; flex-direction:column; gap:18px; padding:24px;
    background:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.85));
    border-top:1px solid rgba(255,255,255,.06);
    transform:translateY(-2%); opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  .nav-links.open{ opacity:1; pointer-events:auto; transform:none }
  body.nav-open{ overflow:hidden }
}

/* ---------- Hero ---------- */
.hero{ position:relative; height:84vh; min-height:560px; display:grid; place-items:center; }
.hero-media{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.6)),
    url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
  filter:saturate(0.9) contrast(1.05);
}
.hero-overlay{
  position:relative; text-align:center; padding:0 24px; max-width:960px;
  animation:fadeUp .9s ease both .1s;
}
.hero-overlay h1{
  font-family:'Playfair Display', serif; font-size:clamp(42px,5vw,72px); line-height:1.05; font-weight:700;
}
.hero-overlay h1 span{ color:var(--gold) }
.hero-overlay p{ margin:.9rem 0 1.2rem; color:#e2e2e2; font-size:1.05rem; letter-spacing:.3px }
.hero-overlay .cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap }

/* base button style */
.hero-overlay .cta a {
  display: inline-block;
  padding: .75rem 1.5rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  letter-spacing: .4px;
  transition: 
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

/* hover effect */
.hero-overlay .cta a:hover {
  background: var(--gold);
  color: #000; /* dark text on gold */
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(199,163,75,.35);
}

/* ===== Refraction Glass Card ===== */
.glass-card{
  position: relative;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 36px);
  border-radius: 20px;
  max-width: min(880px, 92vw);

  /* Base glass */
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(255,255,255,.12), rgba(255,255,255,.04) 40%, rgba(255,255,255,0) 80%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 30px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);

  /* Soft lift on load */
  animation: glassFade .7s ease both .15s;
}

/* Text inside glass stays crisp */
.glass-card h1{ margin-bottom: .4rem }
.glass-card p{ color:#ececec }

/* iOS-like border sheen */
.glass-card::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 35%) top/100% 60% no-repeat,
    linear-gradient(0deg, rgba(255,255,255,.12), rgba(255,255,255,0)) bottom/100% 40% no-repeat;
  mix-blend-mode:screen;
  opacity:.55;
}

/* Subtle hover lift (desktop) */
@media (hover:hover){
  .glass-card:hover{ transform: translateY(-2px); transition: transform .25s ease }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .glass-card{ animation:none }
  .glass-card::after{ animation:none }
}

/* Keyframes */
@keyframes glassFade{
  from{ opacity:0; transform: translateY(8px) }
  to  { opacity:1; transform: none }
}
@keyframes causticSweep{
  0%  { transform: translate3d(-6%, -3%, 0) rotate(0.001deg); opacity:.25 }
  40% { opacity:.4 }
  100%{ transform: translate3d(6%, 3%, 0) rotate(0.001deg); opacity:.25 }
}

/* Mobile spacing tweak */
@media (max-width:600px){
  .glass-card{ padding: 16px 18px; border-radius:16px }
}

/* ---------- Trust bar ---------- */
/* ========= OFFERS MARQUEE ========= */
:root{
  --bg:#000000;
  --panel:#0b0b0b;
  --line:#1f1f1f;
  --fg:#ffffff;
  --muted:#bdbdbd;
  --gold:#c7a34b;
  --gold-2:#e1c476;
  --radius:14px;
}

.offers{
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(0deg, rgba(199,163,75,.06), rgba(199,163,75,0) 35%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.offers-viewport{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0; /* taller? bump this */
  mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}

.offers-track{
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  will-change: transform;
  /* animation set dynamically via JS for perfect loop */
}

.offer-chip{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.02);
  border: 1px solid var(--line);
  color: var(--fg);
  white-space: nowrap;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.offer-chip:hover{
  transform: translateY(-2px);
  border-color: rgba(199,163,75,.55);
  box-shadow: 0 16px 40px rgba(199,163,75,.14);
}

/* Pause marquee when hovering anywhere on the row */
.offers-viewport:hover .offers-track{
  animation-play-state: paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .offers-track{ animation: none !important; transform: none !important; }
}

/* ---------- Sections ---------- */
.section-head{ text-align:center; margin-bottom:1.8rem }
.section-head h2{
  font-family:'Playfair Display', serif; font-weight:700; letter-spacing:.3px;
  font-size:clamp(28px,3.2vw,38px);
}
.section-head p{ color:var(--muted); margin-top:.4rem }

/* ---------- Services ---------- */
/* ---------- WHAT WE DO ---------- */
.what-we-do {
  background: var(--panel);
  padding: 80px 24px;
  text-align: center;
}

.what-we-do h2 {
  font-family: var(--font-sans);        /* modern hero font */
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: .6rem;
  text-transform: uppercase;
}

.what-we-do p.subtext {
  font-family: var(--font-sans);        /* modern hero font */
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 2.4rem;
  letter-spacing: .3px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.service-card {
  padding: 1.8rem;
  border-radius: var(--radius);
  text-align: left;

  /* subtle frosted effect */
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(199,163,75,.45);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}

.service-card h3 {
  font-family: var(--font-sans);        /* modern hero font */
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .5rem;
  letter-spacing: .4px;
}

.service-card p {
  font-family: var(--font-sans);        /* modern hero font */
  font-size: 1rem;
  color: #cfcfcf;
  line-height: 1.5;
}

.service-card .link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--gold);
  font-family: var(--font-sans);        /* keep consistent */
  transition: color .25s ease;
}

.service-card .link:hover {
  color: var(--gold-2);
}

/* ---------- Featured Builds ---------- */
/* ---------- FEATURED BUILDS ---------- */
.featured {
  background: var(--panel-2);
  padding: 80px 24px;
}

.featured .section-head {
  text-align: center;
  margin-bottom: 1.8rem;
}
.featured .section-head h2{
  font-family: var(--font-sans);
  font-size: clamp(28px,3vw,38px);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.featured .section-head p{
  font-family: var(--font-sans);
  color: var(--muted);
}

/* Grid */
.builds{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width:1100px){ .builds{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){  .builds{ grid-template-columns: 1fr; } }

/* Card */
.build-card{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  isolation: isolate;
}
.build-card:hover{
  transform: translateY(-4px);
  border-color: rgba(199,163,75,.45);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

/* Media */
.build-card .media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.build-card img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform .45s ease;
}
.build-card:hover img{ transform: scale(1.06); }

/* Top-left tag chip */
.build-card .tag{
  position: absolute; top: 12px; left: 12px;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .85rem;
  color: #fff;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  z-index: 2;
}

/* Subtle gradient for legibility */
.build-card .media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45));
  z-index: 1; pointer-events:none;
}

/* Caption */
.build-card .caption{
  padding: 14px 16px 16px;
  display: grid; gap: 6px;
}
.build-card h4{
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .4px;
}
.build-card p{
  font-family: var(--font-sans);
  color: #cfcfcf;
  font-size: .98rem;
  line-height: 1.5;
}

/* Link */
.build-card .link{
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .4rem;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.build-card .link::after{
  content:"→"; transform: translateX(0); transition: transform .25s ease;
}
.build-card .link:hover{
  color: var(--gold-2);
  border-color: var(--gold);
}
.build-card .link:hover::after{ transform: translateX(3px); }

/* ---------- ABOUT TEASER ---------- */
.about {
  background: var(--panel);
  padding: 90px 24px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Text */
.about-text h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.about-text p {
  font-family: var(--font-sans);
  color: #d0d0d0;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.about-text .link {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.about-text .link:hover {
  color: var(--gold-2);
  border-color: var(--gold);
}

/* Media */
.about-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.about-media:hover img {
  transform: scale(1.05);
}

/* Optional frosted overlay for style */
.about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45));
  pointer-events: none;
}

/* ---------- Testimonials ---------- */
/* ---------- TESTIMONIALS ---------- */
.testimonials {
  background: var(--panel-2);
  padding: 90px 24px;
}

.testimonials .section-head {
  text-align: center;
  margin-bottom: 2.2rem;
}
.testimonials .section-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.testimonials .section-head p {
  font-family: var(--font-sans);
  color: var(--muted);
  margin-top: .6rem;
  font-size: 1rem;
}

/* Grid of quotes */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1100px) { .quotes { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px)  { .quotes { grid-template-columns: 1fr; } }

/* Each testimonial card */
.quote {
  padding: 24px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);

  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.quote:hover {
  transform: translateY(-4px);
  border-color: rgba(199,163,75,.45);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

/* Quote text */
.quote p {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.55;
  color: #e6e6e6;
  margin-bottom: 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Cite / author */
.quote cite {
  display: block;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .3px;
}

/* ---------- CONTACT CTA ---------- */
.contact-cta {
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(199,163,75,.10), transparent 60%),
    var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 90px 24px;
  text-align: center;
}

.contact-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 3rem 2rem;
  border-radius: var(--radius);

  /* frosted glass look */
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.contact-wrap h2 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: .8rem;
}

.contact-wrap p {
  font-family: var(--font-sans);
  color: #d6d6d6;
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}

/* Call-to-action button */
.contact-wrap .cta-btn {
  display: inline-block;
  padding: .9rem 2rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .4px;
  color: #fff;
  border: 1px solid var(--gold);
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.contact-wrap .cta-btn:hover {
  background: var(--gold);
  color: #000;
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(199,163,75,.35);
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); will-change:transform, opacity }
.reveal.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease }

/* ---------- Keyframes ---------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* Brand / Logo */
.brand {
  font-family: var(--font-script);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: .5px;
}

/* Hero Title */
.hero-overlay h1 {
  font-family: var(--font-script, 'Lobster', cursive);
  font-weight: 400;
  font-size: clamp(52px, 7vw, 96px);
  line-height: 1.03;
}

/* Make "Luxury" stand out */
.hero-overlay h1 span {
  color: var(--gold);
  text-shadow:
    0 2px 6px rgba(0,0,0,.65),
    0 0 14px rgba(8, 8, 8, 0.55); /* Glow */
}

/* ---------- HERO (alive) ---------- */
.hero{
  position:relative; height:90vh; min-height:620px; overflow:hidden;
  display:grid; place-items:center; isolation:isolate;
}

/* Background image (slow pan + zoom) */
.hero-media{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1920&auto=format&fit=crop')
    center/cover no-repeat;
  transform:scale(1.05);
  animation:heroPanZoom 22s ease-in-out infinite alternate;
  will-change:transform, background-position;
  filter:saturate(.95) contrast(1.05);
}

/* Subtle vignette + depth */
.hero-gradient{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 40%, transparent 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 35%, rgba(0,0,0,.45));
  pointer-events:none;
}

/* Gold ambient glow */
.hero-glow{
  position:absolute; inset:auto -20% -30% -20%; height:60%;
  background:radial-gradient(60% 70% at 50% 100%, rgba(199,163,75,.22), transparent 60%);
  filter:blur(18px); opacity:.7; pointer-events:none;
}

/* Film grain (very light) */
.hero-noise{
  position:absolute; inset:0; mix-blend:multiply; opacity:.06; pointer-events:none;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAABz8n0kAAAAMElEQVR4Ae3OMQEAIAwEsVf4z0lB0l4p0Gztm4/fuQkQYAAAAAAAAAAAAAAADg4l1m3f4f1kA6m9avkAAAAABJRU5ErkJggg==');
  background-size:128px 128px;
}

/* Hero copy (script font per your direction) */
.hero-overlay{
  position:relative; text-align:center; padding:0 24px; max-width:980px;
  animation:fadeUp .9s ease both .1s;
  will-change:transform, opacity;
}
.hero-overlay h1{
  font-family: var(--font-script, 'Lobster', cursive);
  font-weight:400;
  font-size: clamp(52px, 7vw, 96px);
  line-height:1.03;
}
.hero-overlay h1 span{ color:var(--gold) }
.hero-overlay p{ margin:.9rem 0 1.2rem; color:#e2e2e2; font-size:1.05rem; letter-spacing:.3px }
.hero-overlay .cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap }

/* Gold light sweep (gentle pass across hero) */
.hero-sweep{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background: linear-gradient(75deg, transparent 30%, rgba(199,163,75,.18) 45%, transparent 60%);
  transform:translateX(-30%) skewX(-8deg);
  animation:heroSweep 7.5s ease-in-out infinite;
}

/* Floating particles */
.hero-particles{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.hero-particles span{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(199,163,75,.6);
  animation:floatUp linear infinite;
  opacity:1;
}
.hero-particles span:nth-child(odd){ background:rgba(199,163,75,.95); }
.hero-particles span:nth-child(1){ left:10%; bottom:-10vh; animation-duration:11s; animation-delay:0s }
.hero-particles span:nth-child(2){ left:22%; bottom:-8vh; animation-duration:14s; animation-delay:2s }
.hero-particles span:nth-child(3){ left:35%; bottom:-12vh; animation-duration:13s; animation-delay:1s }
.hero-particles span:nth-child(4){ left:48%; bottom:-9vh; animation-duration:12s; animation-delay:3s }
.hero-particles span:nth-child(5){ left:60%; bottom:-11vh; animation-duration:15s; animation-delay:0s }
.hero-particles span:nth-child(6){ left:72%; bottom:-13vh; animation-duration:12s; animation-delay:2s }
.hero-particles span:nth-child(7){ left:84%; bottom:-9vh; animation-duration:16s; animation-delay:1s }
.hero-particles span:nth-child(8){ left:28%; bottom:-10vh; animation-duration:12s; animation-delay:4s }
.hero-particles span:nth-child(9){ left:41%; bottom:-12vh; animation-duration:17s; animation-delay:.5s }
.hero-particles span:nth-child(10){ left:53%; bottom:-11vh; animation-duration:13s; animation-delay:2.5s }
.hero-particles span:nth-child(11){ left:67%; bottom:-12vh; animation-duration:15s; animation-delay:1.2s }
.hero-particles span:nth-child(12){ left:77%; bottom:-10vh; animation-duration:11s; animation-delay:3.4s }

/* Scroll hint */
.scroll-hint{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  width:34px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25); backdrop-filter:blur(6px);
  display:grid; place-items:center; cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, background .2s ease; 
}
.scroll-hint span{
  width:10px; height:10px; border-right:2px solid #eaeaea; border-bottom:2px solid #eaeaea;
  transform:rotate(45deg) translateY(-2px);
  animation:bounce 1.8s ease-in-out infinite;
}
.scroll-hint:hover{ transform:translateX(-50%) translateY(-2px); border-color:var(--gold); background:rgba(199,163,75,.12) }

/* Animations */
@keyframes heroPanZoom{
  0%   { transform:scale(1.05) translate3d(0, 0, 0) }
  100% { transform:scale(1.12) translate3d(0, -1.5%, 0) }
}
@keyframes heroSweep{
  0%   { transform:translateX(-40%) skewX(-8deg); opacity:.0 }
  10%  { opacity:.35 }
  50%  { transform:translateX(40%) skewX(-8deg); opacity:.28 }
  90%  { opacity:.0 }
  100% { transform:translateX(60%) skewX(-8deg); opacity:0 }
}
@keyframes floatUp{
  0%   { transform:translateY(0) scale(1); opacity:0 }
  10%  { opacity:.7 }
  100% { transform:translateY(-110vh) scale(1.1); opacity:0 }
}
@keyframes bounce{
  0%,100%{ transform:rotate(45deg) translateY(-2px) }
  50%    { transform:rotate(45deg) translateY(2px) }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  .hero-media, .hero-sweep, .hero-particles span, .scroll-hint span { animation:none !important; }
}

/* Make sure header sits above hero */
.site-header{ z-index:90; }

/* Put the video behind without affecting your layout */
.hero, .hero-banner, .hero-wrap { position: relative; } /* whichever you use */

.hero-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto%;
  object-fit: cover;        /* mimics background-size: cover */
  z-index: -1;              /* behind your existing content */
  pointer-events: none;     /* never blocks clicks */
}

/* Optional: if you use prefers-reduced-motion, keep your current image */
@media (prefers-reduced-motion: reduce){
  .hero-bg-video{ display: none; }
}

/* --- HERO LAYOUT / LAYERS --- */
.hero { position: relative; min-height: clamp(520px, 72vh, 860px); overflow: hidden; color:#fff; }
.hero-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.hero-gradient, .hero-glow, .hero-noise, .hero-sweep{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* Keep your existing gradient/glow/noise styles; these just ensure layer order */
.hero-overlay{ position: relative; z-index: 3; display:grid; place-items:center; padding: 2rem; }
.hero .cta{ display:inline-flex; gap:.9rem; flex-wrap:wrap; justify-content:center; }

/* --- GLASS CARD (frosted glass) --- */
.glass-card {
  position: relative;
  z-index: 3;
  padding: 2rem 3rem;
  border-radius: 16px;

  /* Frosted glass core */
  background: rgba(255, 255, 255, 0.08);     /* faint milky layer */
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);

  border: 1px solid rgba(255, 255, 255, 0.18); /* subtle glass edge */
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  text-align: center;
}

/* Remove ::before hack – not needed anymore */
.glass-card::before { content: none; }

.glass-card h1 {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: .95;
  margin: 0 0 .4rem;
  text-shadow: 0 6px 24px rgba(0,0,0,.55);
}
.glass-card h1 span { color: #c7a34b; }   /* gold accent */
.glass-card p {
  font-size: clamp(1rem, 2.1vw, 1.25rem);
  opacity: .92;
  margin-bottom: 1.2rem;
}

/* --- GOLD SWEEP (no jump, seamless loop) --- */
.hero-sweep {
  overflow: hidden;
  z-index: 2; /* above gradients, below content */
}

.hero-sweep::before,
.hero-sweep::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120%;
  filter: blur(6px);
  opacity: .65;
  background:
    conic-gradient(from 210deg at 30% 0%, rgba(225,195,118,.32), rgba(255,255,255,0) 35%),
    linear-gradient(95deg, rgba(199,163,75,.25) 0%, rgba(255,255,255,0) 40% 60%, rgba(199,163,75,.18) 100%);
  will-change: transform;
  animation: goldSweep 20s linear infinite;
}

.hero-sweep::before { left: 0; }
.hero-sweep::after  { left: 100%; }

@keyframes goldSweep {
  to { transform: translate3d(-120%,0,0); }
}

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-sweep::before,
  .hero-sweep::after { animation: none }
  .hero-bg-video { display: none; }
}

/* --- HERO LAYERS --- */
.hero{ position:relative; min-height:clamp(560px, 84vh, 900px); display:grid; place-items:center; overflow:hidden; color:#fff; }
.hero-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }

.hero-gradient,
.hero-glow,
.hero-noise,
.hero-sweep{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* keep overlays translucent so blur shows through */
.hero-gradient{
  background:
    radial-gradient(60% 60% at 50% 40%, transparent 0%, rgba(0,0,0,.22) 60%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 35%, rgba(0,0,0,.35));
}
.hero-glow{ background:radial-gradient(60% 70% at 50% 100%, rgba(199,163,75,.18), transparent 60%); filter:blur(16px); opacity:.7; inset:auto -20% -30% -20%; height:60%; }
.hero-noise{ mix-blend-mode:multiply; opacity:.06; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAABz8n0kAAAAMElEQVR4Ae3OMQEAIAwEsVf4z0lB0l4p0Gztm4/fuQkQYAAAAAAAAAAAAAAADg4l1m3f4f1kA6m9avkAAAAABJRU5ErkJggg=='); background-size:128px 128px; }

/* --- GOLD SWEEP (seamless) --- */
.hero-sweep{ z-index:2; overflow:hidden; }
.hero-sweep::before,
.hero-sweep::after{
  content:""; position:absolute; top:0; bottom:0; width:120%;
  background:
    conic-gradient(from 210deg at 30% 0%, rgba(225,195,118,.28), rgba(255,255,255,0) 35%),
    linear-gradient(95deg, rgba(199,163,75,.22) 0%, rgba(255,255,255,0) 40% 60%, rgba(199,163,75,.14) 100%);
  filter:blur(10px); opacity:.35; will-change:transform; animation:goldSweep 12s linear infinite;
}
.hero-sweep::before{ left:0; }
.hero-sweep::after { left:100%; }
@keyframes goldSweep{ to{ transform:translate3d(-120%,0,0); } }

/* --- CONTENT LAYER --- */
.hero-overlay{ position:relative; z-index:3; display:grid; place-items:center; padding:2rem; text-align:center; }

/* --- TRUE FROSTED DARK GLASS CARD --- */
.glass-card {
  padding: clamp(18px, 3vw, 28px) clamp(22px, 4vw, 36px);
  border-radius: 20px;
  max-width: min(980px, 92vw);

  /* Frosted core */
  background: rgba(0, 0, 0, 0.61);                /* dark tint, not white */
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);

  border: 1px solid rgba(255, 255, 255, 0.12);    /* faint edge highlight */
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  text-align: center;
  color: #fff;
}

/* Headline inside stays crisp */
.glass-card h1 {
  font-size: clamp(52px, 7vw, 96px);
  line-height: 1.03;
  margin: 0 0 .5rem;
  text-shadow: 0 6px 22px rgba(0,0,0,.7);
  font-family: var(--font-script, 'Lobster', cursive);
  font-weight: 400;
}
.glass-card h1 span { color: var(--gold); }
.glass-card p {
  font-weight: 500;              /* bold */
  margin-top: 2rem;              /* space below the headline */
  color: #ffffffff;                /* keep contrast clean */
  font-size: 1.1rem;
  letter-spacing: .3px;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 70%);
  mix-blend-mode: screen;
}

/* stop browser's smooth restoration jank */
html{ scroll-behavior:auto; }
/* if you want smooth for in-page links, apply to a wrapper: */
.smooth-scroll{ scroll-behavior:smooth; }

/* delay header transform transition until ready */
.site-header{ transition: background .3s ease, box-shadow .3s ease; }
.js.ready .site-header{
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              background .3s ease, box-shadow .3s ease;
}

/* Do NOT toggle this on scroll. It's only for initial load mid-hero */
body.no-entry-anim .hero-overlay{ animation: none !important; }
body.no-entry-anim .hero-media{ animation: none !important; transform: none !important; }
body.no-entry-anim .hero-sweep::before,
body.no-entry-anim .hero-sweep::after{ animation: none !important; }
body.no-entry-anim .hero-particles span{ animation: none !important; }
body.no-entry-anim .scroll-hint span{ animation: none !important; }

/* (Optional) soften overlays on that initial state to avoid flicker */
body.no-entry-anim .hero-noise{ opacity:.03; }
body.no-entry-anim .hero-glow{  opacity:.35; }

/* ----- FOOTER (Boden-style center stack) ----- */
.site-footer{
  background:#0a0a0a;
  border-top:none;
  padding:56px 24px 48px;
  color:#bdbdbd;
  font-family:var(--font-sans);
}
.footer-wrap{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}

/* badge */
.footer-badge{
  display:inline-grid; place-items:center;
  width:86px; height:86px; border-radius:10px;
  background: var(--gold);               /* Boden uses red; we use brand gold */
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  margin:0 auto 18px;
}
.footer-badge img{ width:56%; height:auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

/* links row */
.footer-nav{
  display:flex; justify-content:center; gap:28px;
  margin:14px 0 18px;
  font-weight:700; letter-spacing:.12em; font-size:.92rem;
}
.footer-nav a{
  color:#d8d8d8; opacity:.9; transition:opacity .2s ease, color .2s ease;
}
.footer-nav a:hover{ color:#fff; opacity:1; }

/* social row with circular pills */
.footer-social a{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  color:#fff; /* svg uses currentColor */
}
.footer-social a:hover{
  transform: translateY(-2px);
  border-color: var(--gold);
  background: rgba(187, 140, 21, 1);
  box-shadow: 0 10px 24px rgba(199,163,75,.18);
  color:#000; /* turns icons dark on gold-ish hover */
}

.footer-social svg{
  width:18px; height:18px; display:block;
  stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  fill: none; /* base: outline style */
}
/* filled logos for FB + TikTok */
.footer-social .soc-fb svg path,
.footer-social .soc-tt svg path{ fill: currentColor; stroke: none; }

/* copyright */
.footer-copy{
  margin-top:25px;
  font-size:.85rem; letter-spacing:.08em; color:#9a9a9a;
}

.hero {
  position: relative;
  height: min(90vh, 860px);
  overflow: hidden;
}

.hero video {
  position: absolute;
  inset: 0;               /* shorthand for top/right/bottom/left:0 */
  width: 100%;
  height: 110%;
  object-fit: cover;       /* zoom/crop to fill space */
  object-position: center;
}

/* Luxury Wrap Studio button */
.wrap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;                      /* set button height */
  padding: 0 30px;                   /* remove vertical padding */
  min-width: 150px;
  background: #000;
  color: var(--gold, #c7a34b);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid var(--gold, #c7a34b);
  border-radius: 40px;
  text-decoration: none;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* shimmer overlay */
.wrap-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-20deg);
}

/* shimmer animation on hover */
.wrap-btn:hover::before {
  animation: shimmer 1s forwards;
}

@keyframes shimmer {
  100% {
    left: 125%;
  }
}

/* hover invert + glow */
.wrap-btn:hover {
  background: var(--gold, #c7a34b);
  color: #000;
  box-shadow: 0 0 16px rgba(199, 163, 75, 0.6);
  transform: translateY(-2px) scale(1.04);
}

/* pressed state */
.wrap-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 8px rgba(199, 163, 75, 0.5);
}

/* Mobile */
@media (max-width: 900px) {
  .wrap-item { margin: 14px 0 0; }
  .wrap-btn { width: 100%; text-align: center; }
}

/* 1) Keep generic hover OFF the pill button */
.nav .nav-links a:hover:not(.wrap-btn) {
  /* whatever your normal hover is */
  color: #ffd; /* example */
}

/* 2) Fix wrap button stacking so shimmer doesn't cover text */
.wrap-btn {
  position: relative;
  z-index: 0;            /* create a local stacking context */
  isolation: isolate;
  color: var(--gold) !important;  /* lock default text color */
}

.wrap-btn::before {
  z-index: -1;           /* keep sheen behind text */
}

/* 3) Nuke any background-clip / transparent text inherited from global link hover */
.wrap-btn,
.wrap-btn:hover {
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  mix-blend-mode: normal;
}

/* 4) Define its own hover so it stays readable */
.wrap-btn:hover {
  background: linear-gradient(180deg, var(--gold), #a9892f);
  color: #111 !important;
  border-color: transparent;
  transform: translateY(-1px);
}

/* Anchor offset for fixed header */
.svc-section { scroll-margin-top: 96px; }    /* desktop */
@media (max-width: 760px){
  .svc-section { scroll-margin-top: 76px; }  /* mobile tweak */
}