@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --bg:#f7f8fa;
  --text:#1f2933;
  --muted:#5f6b7a;
  --line:#d9dee7;
  --card:#ffffff;
  --dark:#111827;
  --accent:#1f4e79;
  --accent2:#b48a3c;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial, Helvetica, sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 22px}
.topbar{background:var(--dark);color:#fff;font-size:14px}
.topbar .container{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:20px}
.logo{font-weight:800;letter-spacing:.5px;font-size:22px;color:var(--dark)}
.logo span{display:block;font-size:12px;letter-spacing:1.8px;color:var(--muted);font-weight:600;text-transform:uppercase}
.menu{display:flex;gap:18px;align-items:center;font-size:15px;flex-wrap:wrap;justify-content:flex-end}
.menu a{color:var(--text)}
.btn{display:inline-block;background:var(--accent);color:#fff!important;padding:12px 18px;border-radius:4px;font-weight:700}
.btn.secondary{background:#fff;color:var(--accent)!important;border:1px solid var(--accent)}
.hero{background:linear-gradient(120deg,#101827 0%,#1f4e79 100%);color:#fff;padding:82px 0}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:38px;align-items:center}
.eyebrow{color:#d7b66a;text-transform:uppercase;font-weight:800;letter-spacing:2px;font-size:13px;margin-bottom:12px}
h1{font-size:46px;line-height:1.08;margin:0 0 22px}
.hero p{font-size:19px;color:#e8edf5;margin:0 0 24px}
.warm-note{background:rgba(255,255,255,.10);border-left:4px solid var(--accent2);padding:14px 16px;border-radius:4px;margin:22px 0;color:#f5f7fb!important;font-size:17px!important}
.hero-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);padding:28px;border-radius:8px}
.hero-card h3{margin-top:0;color:#fff}
.hero-card ul{margin:0;padding-left:20px;color:#eef3fa}
.buttons{display:flex;gap:12px;flex-wrap:wrap}
section{padding:64px 0}
.section-title{max-width:820px;margin-bottom:30px}
h2{font-size:34px;line-height:1.15;margin:0 0 14px;color:var(--dark)}
h3{color:var(--dark)}
.section-title p{color:var(--muted);font-size:18px;margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);padding:26px;border-radius:8px;box-shadow:0 4px 12px rgba(15,23,42,.04)}
.card h3{margin-top:0}
.card p{color:var(--muted);margin-bottom:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);padding:30px;border-radius:8px}
.panel.dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.panel.dark h2,.panel.dark h3{color:#fff}
.panel.dark p,.panel.dark li{color:#e6eaf0}
ul.clean{padding-left:20px;margin-bottom:0}
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.category-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.category{background:#fff;border:1px solid var(--line);padding:18px;border-radius:6px}
.category strong{display:block;color:var(--dark);margin-bottom:4px}
.category span{color:var(--muted);font-size:14px}
.disclaimer{font-size:14px;color:var(--muted);background:#f2f4f7;border:1px solid var(--line);padding:16px;border-radius:6px}
.cta{background:var(--accent);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta p{color:#e6eef8;font-size:18px;max-width:760px;margin:0 auto 24px}
footer{background:#0b1220;color:#d5d9e0;padding:38px 0}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px}
footer h4{color:#fff;margin-top:0}
footer p,footer li{color:#d5d9e0;font-size:14px}
.page-hero{background:#111827;color:#fff;padding:55px 0}
.page-hero h1{font-size:38px}
.page-hero p{font-size:18px;color:#e5e7eb;max-width:820px}
.breadcrumb{color:#c8d0dc;font-size:14px;margin-bottom:10px}
.notice{background:#fff7e6;border:1px solid #f0d89a;padding:16px;border-radius:6px;color:#5f4710}
.form-box{background:#fff;border:1px solid var(--line);padding:28px;border-radius:8px}
.form-box label{font-weight:700;display:block;margin-top:14px}
.form-box input,.form-box textarea,.form-box select{width:100%;padding:12px;border:1px solid var(--line);border-radius:4px;margin-top:6px;font:inherit}
.form-box textarea{min-height:130px}
.placeholder-img{border:2px dashed #c5ccd8;background:#eef2f7;border-radius:8px;padding:30px;text-align:center;color:#637083;font-weight:700}
@media(max-width:820px){
  .hero-grid,.split,.footer-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .category-list{grid-template-columns:1fr}
  h1{font-size:34px}
  h2{font-size:28px}
  .menu{justify-content:flex-start}
  header{position:static}
}

.logo-img{height:72px;width:auto;display:block}
.visual-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 8px 18px rgba(15,23,42,.08)}
.visual-card img{width:100%;height:auto;display:block}
.section-image{margin-top:22px}
.section-image img{width:100%;border-radius:10px;border:1px solid var(--line);box-shadow:0 8px 18px rgba(15,23,42,.08);background:#fff}
@media(max-width:820px){.logo-img{height:56px}.nav{align-items:flex-start}}

/* Hero slider */
.hero-slider{position:relative;overflow:hidden;background:#0f1727}
.hero-track{position:relative}
.hero-slide{display:none;position:relative;min-height:640px}
.hero-slide.active{display:block}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(9,15,26,.86) 0%, rgba(9,15,26,.72) 32%, rgba(9,15,26,.22) 70%, rgba(9,15,26,.10) 100%)}
.hero-content{position:relative;z-index:2;min-height:640px;display:flex;align-items:center}
.hero-copy{max-width:640px;color:#fff;padding:30px 0}
.hero-copy .eyebrow{margin-bottom:16px}
.hero-copy h1{font-size:52px;line-height:1.04;margin-bottom:18px}
.hero-copy p{font-size:20px;color:#e8edf5;margin-bottom:18px}
.hero-copy .warm-note{max-width:620px}
.hero-nav{position:absolute;left:0;right:0;bottom:30px;z-index:3}
.hero-nav .container{display:flex;justify-content:space-between;align-items:center;gap:20px}
.hero-dots{display:flex;gap:10px}
.hero-dot{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.65);cursor:pointer}
.hero-dot.active{background:#d7b66a;border-color:#d7b66a}
.hero-arrows{display:flex;gap:10px}
.hero-arrow{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;padding:10px 14px;border-radius:6px;cursor:pointer;font-weight:700}
@media(max-width:820px){
  .hero-slide,.hero-content{min-height:560px}
  .hero-copy h1{font-size:36px}
  .hero-copy p{font-size:18px}
  .hero-nav .container{flex-direction:column;align-items:flex-start}
}

/* FIXED Version 6B luxury wholesale image slider */
.hero-slide{min-height:700px}
.hero-content{min-height:700px}
.hero-slide img{object-fit:cover;object-position:center center}
.hero-overlay{
  background:
    linear-gradient(90deg, rgba(4,8,15,.94) 0%, rgba(4,8,15,.82) 35%, rgba(4,8,15,.38) 70%, rgba(4,8,15,.10) 100%),
    linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,.02));
}
.hero-copy h1{
  letter-spacing:-1.2px;
  text-shadow:0 8px 28px rgba(0,0,0,.55);
}
.hero-copy p{
  text-shadow:0 5px 18px rgba(0,0,0,.45);
}
.hero-copy .btn{
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.hero-copy .btn.secondary{
  background:rgba(255,255,255,.92);
}
@media(max-width:820px){
  .hero-slide,.hero-content{min-height:620px}
}

/* Version 10: original logo restored, only 20% bigger */
.logo-img{
  height:86px !important;
  width:auto !important;
  display:block !important;
}
.logo{
  display:inline-block !important;
  transition:none !important;
  transform:none !important;
}
.logo:hover,
.logo:focus{
  transform:none !important;
  filter:none !important;
}
.nav{
  padding:12px 0 !important;
}
@media(max-width:820px){
  .logo-img{
    height:67px !important;
  }
}

/* Version 11: original logo made another 25% bigger */
.logo-img{
  height:108px !important;
  width:auto !important;
  display:block !important;
}
.nav{
  padding:10px 0 !important;
}
@media(max-width:820px){
  .logo-img{
    height:84px !important;
  }
}

/* Version 12: shine/glow only on the UNIQUE word in the original logo */
.logo{
  position:relative !important;
  display:inline-block !important;
  overflow:hidden !important;
  isolation:isolate;
}

/* Make the original logo stay still */
.logo-img{
  position:relative !important;
  z-index:1 !important;
}

/* The shine strip is positioned over the UNIQUE word area only */
.logo::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;

  /* approximate area of the word UNIQUE inside the original full logo */
  left:18%;
  top:43%;
  width:64%;
  height:27%;

  background:
    linear-gradient(105deg,
      transparent 0%,
      rgba(255,255,255,0.00) 28%,
      rgba(255,255,255,0.55) 43%,
      rgba(255,255,255,0.98) 50%,
      rgba(255,255,255,0.55) 57%,
      rgba(255,255,255,0.00) 72%,
      transparent 100%
    );
  mix-blend-mode:screen;
  opacity:0;
  transform:translateX(-135%) skewX(-18deg);
  filter:blur(.2px) drop-shadow(0 0 8px rgba(255,255,255,.55));
}

/* subtle black-gloss feel over the UNIQUE area */
.logo::before{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;

  left:18%;
  top:43%;
  width:64%;
  height:27%;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.06) 30%,
      rgba(0,0,0,0) 62%,
      rgba(255,255,255,.08) 100%
    );
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .25s ease;
}

.logo:hover::before{
  opacity:.9;
}

.logo:hover::after{
  animation:uniqueLogoShine 1.05s ease-out forwards;
  opacity:1;
}

@keyframes uniqueLogoShine{
  0%{
    transform:translateX(-135%) skewX(-18deg);
    opacity:0;
  }
  12%{
    opacity:1;
  }
  82%{
    opacity:1;
  }
  100%{
    transform:translateX(135%) skewX(-18deg);
    opacity:0;
  }
}

/* no movement on hover */
.logo:hover{
  transform:none !important;
  filter:none !important;
}

/* Version 13: align shine strictly to the UNIQUE word area */
.logo::after{
  /* narrowed and lowered so the shine stays on UNIQUE only */
  left:19% !important;
  top:52% !important;
  width:62% !important;
  height:17% !important;
  transform:translateX(-140%) skewX(-18deg) !important;
}
.logo::before{
  /* subtle glossy layer only on UNIQUE */
  left:19% !important;
  top:52% !important;
  width:62% !important;
  height:17% !important;
}

/* Version 14 FIX: restore visible shine movement on UNIQUE only.
   The previous version made the shine area too tight and froze the movement.
   This version animates LEFT position instead of transform so it works again. */

.logo{
  position:relative !important;
  display:inline-block !important;
  overflow:hidden !important;
}

/* reset glossy layer to UNIQUE area */
.logo::before{
  content:"" !important;
  position:absolute !important;
  z-index:2 !important;
  pointer-events:none !important;
  left:19% !important;
  top:50% !important;
  width:62% !important;
  height:20% !important;
  background:linear-gradient(180deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.07) 35%,
    rgba(0,0,0,0) 65%,
    rgba(255,255,255,.07) 100%
  ) !important;
  opacity:0 !important;
  mix-blend-mode:screen !important;
  transition:opacity .25s ease !important;
}

/* the moving light strip */
.logo::after{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  pointer-events:none !important;

  top:50% !important;
  left:-35% !important;
  width:34% !important;
  height:20% !important;

  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.55) 42%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.55) 58%,
    rgba(255,255,255,0) 80%,
    transparent 100%
  ) !important;

  transform:skewX(-18deg) !important;
  mix-blend-mode:screen !important;
  filter:blur(.1px) drop-shadow(0 0 8px rgba(255,255,255,.75)) !important;
  opacity:0 !important;
}

.logo:hover::before{
  opacity:.85 !important;
}

.logo:hover::after{
  animation:uniqueShineFixedV14 1.05s ease-out forwards !important;
}

@keyframes uniqueShineFixedV14{
  0%{
    left:-35%;
    opacity:0;
  }
  10%{
    opacity:1;
  }
  82%{
    opacity:1;
  }
  100%{
    left:84%;
    opacity:0;
  }
}

/* Version 15: keep current logo size, remove all lighting/shine effects */
.logo::before,
.logo::after{
  content:none !important;
  display:none !important;
  animation:none !important;
  opacity:0 !important;
  background:none !important;
  filter:none !important;
}

.logo,
.logo:hover,
.logo:focus{
  transform:none !important;
  filter:none !important;
  animation:none !important;
}

.logo-img,
.logo:hover .logo-img,
.logo:focus .logo-img{
  height:108px !important;
  width:auto !important;
  display:block !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
}

@media(max-width:820px){
  .logo-img,
  .logo:hover .logo-img,
  .logo:focus .logo-img{
    height:84px !important;
  }
}

/* Version 19: Satori Regent-inspired marble header */
header{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 100%),
    url('header-regent-inspired-marble.png') center center / cover no-repeat !important;
  border-bottom:none !important;
  box-shadow:
    0 3px 10px rgba(17,24,39,.05),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
  position:sticky;
  top:0;
  z-index:10;
}
header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    rgba(180,138,60,.10),
    rgba(180,138,60,.55),
    rgba(180,138,60,.10)
  );
}
.nav{
  position:relative;
  z-index:1;
}
.menu a{
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* Version 20: polished glossy marble header */
header{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 100%),
    url('header-regent-inspired-marble.png') center center / cover no-repeat !important;
  border-bottom:none !important;
  box-shadow:
    0 4px 12px rgba(17,24,39,.055),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.18) !important;
  position:sticky;
  top:0;
  z-index:10;
  overflow:hidden;
}

/* glossy surface highlight */
header::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:72%;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.18) 18%,
      rgba(255,255,255,.08) 38%,
      rgba(255,255,255,0) 100%
    );
  pointer-events:none;
}

/* diagonal sheen for polished slab feel */
header .nav::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-18%;
  width:36%;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.06) 35%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,.06) 65%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-18deg);
  pointer-events:none;
  opacity:.75;
}

header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    rgba(180,138,60,.10),
    rgba(180,138,60,.62),
    rgba(180,138,60,.10)
  );
  box-shadow:0 1px 2px rgba(180,138,60,.12);
}

.nav{
  position:relative;
  z-index:1;
}

.menu a{
  text-shadow:0 1px 0 rgba(255,255,255,.42);
}

/* Version 25: hero writing clearly on the LEFT side of the screen */

/* Dark overlay focused on the left only, no heavy black on the right */
.hero-overlay{
  background:
    linear-gradient(90deg,
      rgba(5,10,18,.78) 0%,
      rgba(5,10,18,.62) 18%,
      rgba(5,10,18,.34) 38%,
      rgba(5,10,18,.12) 58%,
      rgba(5,10,18,.00) 78%,
      rgba(5,10,18,.00) 100%
    ),
    linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.03)) !important;
}

/* Put content firmly on the left */
.hero-content{
  justify-content:flex-start !important;
  padding-left:32px !important;
  padding-right:0 !important;
}

.hero-copy{
  max-width:620px !important;
  margin:0 !important;
  text-align:left !important;
}

.hero-copy .warm-note{
  margin-left:0 !important;
  margin-right:0 !important;
}

.buttons{
  justify-content:flex-start !important;
}

/* Preserve readability */
.hero-copy h1{
  text-shadow:0 8px 24px rgba(0,0,0,.48) !important;
}
.hero-copy p{
  text-shadow:0 5px 16px rgba(0,0,0,.36) !important;
}

@media(max-width:1100px){
  .hero-content{
    padding-left:28px !important;
  }
}

@media(max-width:820px){
  .hero-content{
    justify-content:flex-start !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }
  .hero-copy{
    max-width:100% !important;
    text-align:left !important;
  }
  .hero-copy .warm-note{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .buttons{
    justify-content:flex-start !important;
  }
}

/* Version 26: TRUE left-side hero placement.
   The text was still inside the centered .container.
   This removes the centered container restriction only for the hero slider. */

.hero-slider .container{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
}

/* Put the writing near the actual left side of the browser window */
.hero-content{
  justify-content:flex-start !important;
  padding-left:82px !important;
  padding-right:40px !important;
}

/* Keep the text block left-aligned */
.hero-copy{
  max-width:650px !important;
  margin:0 !important;
  text-align:left !important;
}

/* Keep buttons and note left-aligned */
.hero-copy .warm-note{
  margin-left:0 !important;
  margin-right:0 !important;
}

.buttons{
  justify-content:flex-start !important;
}

/* Overlay focused on left text area, but it fades before the right side */
.hero-overlay{
  background:
    linear-gradient(90deg,
      rgba(5,10,18,.82) 0%,
      rgba(5,10,18,.70) 18%,
      rgba(5,10,18,.42) 36%,
      rgba(5,10,18,.14) 56%,
      rgba(5,10,18,.00) 78%,
      rgba(5,10,18,.00) 100%
    ),
    linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.03)) !important;
}

@media(max-width:1100px){
  .hero-content{
    padding-left:48px !important;
    padding-right:30px !important;
  }
}

@media(max-width:820px){
  .hero-content{
    padding-left:22px !important;
    padding-right:22px !important;
  }
  .hero-copy{
    max-width:100% !important;
  }
}

/* Version 30: clean wood header based on the user's preferred wood style,
   but rebuilt cleanly without watermark/text and without stretching. */
header{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%),
    url('header-clean-wood.png') center center / cover no-repeat !important;
  border-bottom:none !important;
  box-shadow:
    0 4px 10px rgba(17,24,39,.09),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.16) !important;
  position:sticky;
  top:0;
  z-index:10;
  overflow:hidden;
}

header::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:42%;
  background:linear-gradient(180deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.04) 36%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
}

header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    rgba(214,178,120,.14),
    rgba(214,178,120,.66),
    rgba(214,178,120,.14)
  );
  box-shadow:0 1px 2px rgba(214,178,120,.12);
}

.nav{
  position:relative;
  z-index:1;
}

.menu a{
  color:#f6efe6 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.42);
}

.topbar{
  background:#0f1a2e !important;
}

.logo{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.08));
}

/* Version 32: move the logo a bit to the left */
.logo{
  position: relative !important;
  left: -75px !important;
}

@media(max-width:1100px){
  .logo{
    left: -40px !important;
  }
}

@media(max-width:820px){
  .logo{
    left: 0 !important;
  }
}

/* Version 33: turn top navigation links into 3D buttons */

.menu{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  justify-content:flex-end !important;
}

.menu a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 16px !important;
  border-radius:10px !important;
  text-decoration:none !important;
  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;
  letter-spacing:.2px !important;

  /* 3D luxury button look that fits the wood */
  color:#352215 !important;
  background:
    linear-gradient(180deg, #f6ead8 0%, #ead2b0 52%, #d3ad74 100%) !important;
  border:1px solid rgba(122, 82, 38, .55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(102,67,31,.22),
    0 3px 0 rgba(86,55,25,.30),
    0 6px 12px rgba(0,0,0,.14) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.55) !important;
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease,
    background .14s ease !important;
}

.menu a:hover{
  background:
    linear-gradient(180deg, #fbf1e2 0%, #efd9bb 50%, #d9b37c 100%) !important;
  transform:translateY(1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(102,67,31,.18),
    0 2px 0 rgba(86,55,25,.26),
    0 5px 10px rgba(0,0,0,.13) !important;
  filter:brightness(1.01) !important;
}

.menu a:active{
  transform:translateY(3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(102,67,31,.12),
    0 1px 0 rgba(86,55,25,.22),
    0 2px 5px rgba(0,0,0,.10) !important;
}

.menu a.current,
.menu a[aria-current="page"]{
  color:#24160e !important;
  background:
    linear-gradient(180deg, #e8d0aa 0%, #d5b07a 55%, #bc9150 100%) !important;
  border-color:rgba(108,72,36,.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(88,57,28,.24),
    0 3px 0 rgba(75,48,22,.30),
    0 5px 10px rgba(0,0,0,.14) !important;
}

@media(max-width:1100px){
  .menu{
    gap:8px !important;
  }
  .menu a{
    padding:9px 13px !important;
    font-size:13px !important;
  }
}

@media(max-width:820px){
  .menu{
    justify-content:center !important;
    gap:7px !important;
  }
  .menu a{
    padding:8px 11px !important;
    font-size:12px !important;
    border-radius:9px !important;
  }
}

/* Version 34: Glass luxury buttons for homepage hero only */
.hero-slider .btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(214,178,120,.72) !important;
  border-radius:12px !important;
  padding:14px 22px !important;
  font-weight:800 !important;
  letter-spacing:.3px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 8px 22px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.04) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow:0 1px 2px rgba(0,0,0,.55) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease !important;
}

.hero-slider .btn.secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(214,178,120,.56) !important;
}

.hero-slider .btn:hover,
.hero-slider .btn.secondary:hover{
  transform:translateY(-1px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 100%) !important;
  border-color:rgba(244,222,171,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 10px 26px rgba(0,0,0,.28),
    0 0 18px rgba(214,178,120,.18) !important;
}

.hero-slider .btn:active,
.hero-slider .btn.secondary:active{
  transform:translateY(1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 5px 14px rgba(0,0,0,.20) !important;
}

/* Version 35: Dark luxury cards and darker premium content blocks */

/* Site background slightly warmer so dark cards feel intentional */
body{
  background:
    linear-gradient(180deg, #f7f4ee 0%, #f2eee6 100%) !important;
}

/* Section titles stay readable and premium */
.section-title h2,
section h2{
  color:#111827 !important;
}

.section-title p,
section p{
  color:#5f6b7a;
}

/* Main cards changed from plain white to dark luxury */
.card{
  background:
    linear-gradient(180deg, #1b2433 0%, #111827 100%) !important;
  border:1px solid rgba(214,178,120,.38) !important;
  border-radius:14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 26px rgba(17,24,39,.18) !important;
  color:#f5efe6 !important;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:42%;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
}

.card h3{
  color:#f3d49b !important;
  position:relative;
  z-index:1;
}

.card p{
  color:#e7dccb !important;
  position:relative;
  z-index:1;
}

/* Panels: make white panels feel more premium */
.panel{
  background:
    linear-gradient(180deg, #ffffff 0%, #f8f3ea 100%) !important;
  border:1px solid rgba(180,138,60,.28) !important;
  border-radius:14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 24px rgba(17,24,39,.10) !important;
}

/* Dark panels become richer */
.panel.dark{
  background:
    linear-gradient(180deg, #1c2636 0%, #101827 100%) !important;
  border:1px solid rgba(214,178,120,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 28px rgba(17,24,39,.20) !important;
}

.panel.dark h2,
.panel.dark h3{
  color:#f3d49b !important;
}

.panel.dark p,
.panel.dark li{
  color:#eadfce !important;
}

/* Category boxes changed from flat white to premium dark card style */
.category{
  background:
    linear-gradient(180deg, #202a3a 0%, #131b29 100%) !important;
  border:1px solid rgba(214,178,120,.34) !important;
  border-radius:12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 18px rgba(17,24,39,.14) !important;
}

.category strong{
  color:#f3d49b !important;
}

.category span{
  color:#e6dbca !important;
}

/* White band sections get a warm luxury background instead of plain white */
.band{
  background:
    linear-gradient(180deg, #fbf7ef 0%, #f1e8d9 100%) !important;
  border-top:1px solid rgba(180,138,60,.18) !important;
  border-bottom:1px solid rgba(180,138,60,.18) !important;
}

/* Disclaimer / notices */
.disclaimer,
.notice{
  border-radius:12px !important;
  border:1px solid rgba(180,138,60,.30) !important;
  background:
    linear-gradient(180deg, #fff9ed 0%, #f4e8d2 100%) !important;
  box-shadow:0 6px 14px rgba(17,24,39,.06) !important;
}

/* Form box gets warmer premium treatment */
.form-box{
  background:
    linear-gradient(180deg, #ffffff 0%, #f8f3ea 100%) !important;
  border:1px solid rgba(180,138,60,.28) !important;
  border-radius:14px !important;
  box-shadow:0 10px 24px rgba(17,24,39,.10) !important;
}

/* Non-hero buttons get a darker luxury style, distinct from hero glass and nav 3D */
section .btn:not(.secondary),
.form-box .btn{
  background:
    linear-gradient(180deg, #1c2636 0%, #101827 100%) !important;
  color:#f6efe6 !important;
  border:1px solid rgba(214,178,120,.55) !important;
  border-radius:11px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 6px 15px rgba(17,24,39,.18) !important;
}

section .btn:not(.secondary):hover,
.form-box .btn:hover{
  background:
    linear-gradient(180deg, #263247 0%, #151f31 100%) !important;
  border-color:rgba(244,222,171,.78) !important;
}

/* CTA section polished */
.cta{
  background:
    linear-gradient(135deg, #101827 0%, #1b2433 58%, #3c2b18 100%) !important;
  border-top:1px solid rgba(214,178,120,.30);
}

.cta h2{
  color:#f3d49b !important;
}

.cta p{
  color:#eadfce !important;
}

/* Version 36: all page backgrounds black across the whole website */

/* Global page background */
html,
body{
  background:#06080d !important;
  color:#f2eadf !important;
}

/* Main structural areas */
main,
section,
.band,
.page-section,
.content-section,
.content-block,
.page-wrap,
.wrapper,
.container,
.grid,
.two-col,
.columns,
.features,
.feature-grid,
.cards,
.cta:not(.hero-slider),
footer{
  background-color:transparent !important;
}

/* Every non-hero section gets a black base */
main section:not(.hero-slider):not(.page-hero),
.page-hero + section,
section.band,
section.cta,
footer{
  background:
    linear-gradient(180deg, #0a0d14 0%, #06080d 100%) !important;
}

/* Inner page hero banners / title bands */
.page-hero,
.inner-hero,
.sub-hero{
  background:
    linear-gradient(135deg, #121a29 0%, #0b0f18 60%, #06080d 100%) !important;
  border-bottom:1px solid rgba(214,178,120,.22) !important;
}

.page-hero h1,
.inner-hero h1,
.sub-hero h1{
  color:#f3d49b !important;
}
.page-hero p,
.inner-hero p,
.sub-hero p{
  color:#eadfce !important;
}

/* All headings and body copy on dark pages */
main h1, main h2, main h3, main h4,
footer h2, footer h3, footer h4,
section h1, section h2, section h3, section h4{
  color:#f3d49b !important;
}

main p, main li, main span, main label,
footer p, footer li, footer span,
section p, section li, section label{
  color:#eadfce !important;
}

.section-title p,
section .eyebrow,
.muted,
.small-note{
  color:#cfc2ad !important;
}

/* Cards / boxes / forms / panels all dark */
.card,
.panel,
.form-box,
.notice,
.disclaimer,
.contact-card,
.category,
.info-box,
.feature,
.tile,
.stat,
.faq-item,
.quote-box,
.callout,
.table-wrap{
  background:
    linear-gradient(180deg, #1a2230 0%, #0f1623 100%) !important;
  border:1px solid rgba(214,178,120,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.28) !important;
  color:#f2eadf !important;
}

.card h3,
.panel h2, .panel h3,
.form-box h2, .form-box h3,
.notice h3, .disclaimer h3,
.contact-card h3,
.category strong,
.info-box h3,
.feature h3,
.tile h3,
.stat h3,
.faq-item h3,
.quote-box h3,
.callout h3{
  color:#f3d49b !important;
}

.card p, .panel p, .form-box p,
.notice p, .disclaimer p,
.contact-card p,
.category span,
.info-box p,
.feature p,
.tile p,
.stat p,
.faq-item p,
.quote-box p,
.callout p,
.table-wrap p,
.table-wrap td,
.table-wrap th{
  color:#eadfce !important;
}

/* Plain white bands from earlier versions should become black */
.band,
section.band,
.strip,
.row-band{
  background:
    linear-gradient(180deg, #0b0f18 0%, #06080d 100%) !important;
  border-top:1px solid rgba(214,178,120,.18) !important;
  border-bottom:1px solid rgba(214,178,120,.18) !important;
}

/* Forms on dark background */
input,
select,
textarea{
  background:#0e141f !important;
  color:#f5efe6 !important;
  border:1px solid rgba(214,178,120,.30) !important;
}

input::placeholder,
textarea::placeholder{
  color:#a89a83 !important;
}

/* Non-hero buttons stay premium on black */
main .btn:not(.secondary),
section .btn:not(.secondary),
.form-box .btn{
  background:
    linear-gradient(180deg, #1d2737 0%, #101827 100%) !important;
  color:#f6efe6 !important;
  border:1px solid rgba(214,178,120,.58) !important;
}

main .btn.secondary,
section .btn.secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%) !important;
  color:#f6efe6 !important;
  border:1px solid rgba(214,178,120,.42) !important;
}

/* Footer */
footer{
  border-top:1px solid rgba(214,178,120,.20) !important;
}

/* Keep the homepage hero image section untouched except text colors */
.hero-copy h1{
  color:#ffffff !important;
}
.hero-copy p{
  color:#f5efe6 !important;
}

/* Version 44: full font-color readability review for black backgrounds */

/* Core page readability */
html,
body{
  background:#05070b !important;
  color:#f4eadb !important;
}

/* Default text inside the site */
main,
main section,
main div,
main article,
main aside{
  color:#f4eadb !important;
}

/* Main headings: luxury gold/champagne */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
.page-hero h1,
.page-hero h2,
.section-title h2,
.card h3,
.panel h2,
.panel h3,
.category strong,
.form-box h2,
.form-box h3,
.notice strong,
.disclaimer strong{
  color:#f3d49b !important;
}

/* Body copy: warm ivory */
main p,
main li,
main span,
main label,
main div:not(.menu):not(.buttons),
.section-title p,
.card p,
.panel p,
.panel li,
.category span,
.form-box p,
.form-box label,
.notice,
.notice p,
.disclaimer,
.disclaimer p,
footer p,
footer li,
footer span{
  color:#eadfce !important;
}

/* Secondary / muted text should still be visible */
.muted,
small,
.breadcrumb,
.eyebrow,
.section-title .muted,
.page-hero p,
.category span{
  color:#cfc2ad !important;
}

/* Links inside content: visible gold */
main a:not(.btn):not(.logo):not(.menu a),
footer a:not(.btn){
  color:#f3d49b !important;
  text-decoration:none;
}

main a:not(.btn):not(.logo):not(.menu a):hover,
footer a:not(.btn):hover{
  color:#fff2c9 !important;
  text-decoration:underline;
}

/* Keep hero text bright white/ivory */
.hero-copy h1{
  color:#ffffff !important;
}
.hero-copy h2,
.hero-copy h3,
.hero-copy .eyebrow{
  color:#f3d49b !important;
}
.hero-copy p,
.hero-copy li,
.hero-copy span{
  color:#f6efe6 !important;
}

/* Keep topbar readable */
.topbar,
.topbar div,
.topbar span{
  color:#ffffff !important;
}

/* Keep navigation button text dark because the buttons are light/gold */
.menu a{
  color:#352215 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
}

/* Keep glass hero buttons white */
.hero-slider .btn,
.hero-slider .btn.secondary{
  color:#ffffff !important;
}

/* Non-hero buttons readable */
main .btn,
section .btn,
.form-box .btn,
.cta .btn{
  color:#f6efe6 !important;
}

/* Secondary non-hero buttons should also be readable */
main .btn.secondary,
section .btn.secondary,
.cta .btn.secondary{
  color:#f6efe6 !important;
}

/* Form fields on dark background */
input,
select,
textarea{
  background:#0e141f !important;
  color:#f5efe6 !important;
  border:1px solid rgba(214,178,120,.38) !important;
}

input::placeholder,
textarea::placeholder{
  color:#b8aa92 !important;
}

/* Tables if added later */
table,
td,
th{
  color:#eadfce !important;
  border-color:rgba(214,178,120,.25) !important;
}
th{
  color:#f3d49b !important;
}

/* Footer readability */
footer{
  background:#05070b !important;
  border-top:1px solid rgba(214,178,120,.22) !important;
}
footer h1,
footer h2,
footer h3,
footer h4{
  color:#f3d49b !important;
}

/* Prevent old dark text colors from appearing in panels/cards */
.panel *,
.card *,
.category *,
.form-box *,
.notice *,
.disclaimer *{
  color:inherit;
}

.panel h1,
.panel h2,
.panel h3,
.card h1,
.card h2,
.card h3,
.category strong,
.form-box h1,
.form-box h2,
.form-box h3{
  color:#f3d49b !important;
}

.panel p,
.panel li,
.card p,
.card li,
.form-box p,
.form-box li,
.notice p,
.disclaimer p{
  color:#eadfce !important;
}

/* Light panels converted to readable dark luxury style if any remain */
.panel:not(.dark),
.form-box,
.notice,
.disclaimer{
  background:
    linear-gradient(180deg, #1a2230 0%, #0f1623 100%) !important;
  border:1px solid rgba(214,178,120,.34) !important;
}

/* Ensure page hero text contrast */
.page-hero,
.page-hero *{
  color:#eadfce !important;
}
.page-hero h1,
.page-hero h2,
.page-hero .breadcrumb{
  color:#f3d49b !important;
}

/* Version 45: European luxury typography */

/* Keep normal readable text clean and professional */
body,
main p,
main li,
main span,
main label,
input,
select,
textarea,
footer,
footer p,
footer li,
.form-box,
.card p,
.panel p,
.category span,
.notice,
.disclaimer{
  font-family: Arial, Helvetica, sans-serif !important;
}

/* European luxury font for major titles only */
.hero-copy h1,
.page-hero h1,
main h1,
.section-title h2,
main section h2,
.cta h2{
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}

/* Slightly more refined hero title */
.hero-copy h1{
  font-size: 58px !important;
  line-height: .98 !important;
  letter-spacing: .1px !important;
}

/* Page title styling */
.page-hero h1{
  font-size: 48px !important;
  line-height: 1.05 !important;
}

/* Main section headings */
.section-title h2,
main section h2{
  font-size: 42px !important;
  line-height: 1.08 !important;
}

/* Card and panel headings get a touch of European feel, but not too much */
.card h3,
.panel h3,
.category strong,
.form-box h3{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}

/* Eyebrows / small luxury labels stay sharp and modern */
.eyebrow,
.breadcrumb,
.hero-copy .eyebrow{
  font-family: Arial, Helvetica, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 2.6px !important;
  font-weight: 800 !important;
}

/* Buttons and navigation should remain easy to read, not fancy */
.menu a,
.btn,
button,
input[type="submit"]{
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 800 !important;
}

/* Improve text rendering */
html,
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Responsive adjustments for the larger European headings */
@media(max-width:1100px){
  .hero-copy h1{
    font-size: 48px !important;
  }
  .section-title h2,
  main section h2{
    font-size: 36px !important;
  }
  .page-hero h1{
    font-size: 42px !important;
  }
}

@media(max-width:820px){
  .hero-copy h1{
    font-size: 38px !important;
    line-height: 1.04 !important;
  }
  .section-title h2,
  main section h2{
    font-size: 31px !important;
  }
  .page-hero h1{
    font-size: 34px !important;
  }
}

/* Version 46: Optional background music control */
.music-control{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(214,178,120,.62);
  background:
    linear-gradient(180deg, rgba(26,34,48,.92) 0%, rgba(10,13,20,.92) 100%);
  color:#f6efe6;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 24px rgba(0,0,0,.30),
    0 0 16px rgba(214,178,120,.10);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  user-select:none;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.music-control:hover{
  transform:translateY(-1px);
  border-color:rgba(244,222,171,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 12px 28px rgba(0,0,0,.34),
    0 0 18px rgba(214,178,120,.18);
}
.music-control:active{
  transform:translateY(1px);
}
.music-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(180deg, #f6ead8 0%, #d3ad74 100%);
  color:#352215;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  font-size:13px;
}
.music-control.music-on .music-icon{
  background:
    linear-gradient(180deg, #fff1ce 0%, #d8b15e 100%);
}
.music-control.music-off .music-icon{
  opacity:.82;
}
.music-hint{
  display:block;
  font-size:10px;
  font-weight:700;
  color:#cfc2ad;
  letter-spacing:.3px;
  line-height:1.1;
}
.music-label-wrap{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
@media(max-width:820px){
  .music-control{
    right:14px;
    bottom:14px;
    padding:10px 12px;
    font-size:12px;
  }
  .music-icon{
    width:21px;
    height:21px;
  }
  .music-hint{
    font-size:9px;
  }
}