:root{ --brand:#b08a59; }
.bg-fabric{background-image:radial-gradient(ellipse at top left,rgba(176,138,89,.08),transparent 40%),radial-gradient(ellipse at bottom right,rgba(0,0,0,.06),transparent 40%)}
.bg-dark-grad{background:radial-gradient(60% 40% at 70% 0%,rgba(176,138,89,.15),transparent),linear-gradient(180deg,#0f0f0f,rgba(15,15,15,.92))}
.btn{padding:.75rem 1rem;border-radius:1rem;display:inline-block}
.btn-primary{background:var(--brand);color:#fff}
.btn-ghost{border:1px solid #e5e5e5}
.floating-cta{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:50;display:none}
@media(max-width:768px){.floating-cta{display:block}}
header.sticky{position:sticky;top:0;z-index:40;backdrop-filter:blur(6px);background:rgba(255,255,255,.85);border-bottom:1px solid #e5e5e5}
nav a{color:#57534e;text-decoration:none;margin-left:1rem}
nav a:hover{color:#0c0a09}
footer{background:#0a0a0a;color:#d6d3d1}
.footer-col a{color:#a8a29e}
.footer-col a:hover{color:#fff}

/*
 * Overlap section helper
 *
 * Use this class on a section following a large hero or slideshow to create the
 * illusion that the next section slides on top of the previous one as the
 * user scrolls. Negative margins pull the section upward over the preceding
 * element, while a higher z-index ensures it layers above. Adjust the
 * margin values per breakpoint to fine‑tune the overlap depth.
 */
.overlap-top {
  position: relative;
  z-index: 10;
  margin-top: -4rem;
}
@media (min-width: 768px) {
  .overlap-top {
    margin-top: -5rem;
  }
}
@media (min-width: 1024px) {
  .overlap-top {
    margin-top: -6rem;
  }
}

/* Floating contact buttons (bottom-right) */
/*
 * Adjust the floating contact buttons so they don't obscure other content.
 * Increase the z-index and move them slightly higher up the page. This also
 * makes room for the phone menu, which appears above them.
 */
/* Adjust floating contact buttons: raise them and ensure they stay on top of all content */
.fab-container{
  position:fixed;
  right:1rem;
  bottom:2rem;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:1000;
}
.fab{
  width:56px; height:56px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 25px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.1);
  color:#fff; cursor:pointer; user-select:none;
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.fab:hover{ transform:translateY(-2px) scale(1.03); }
.fab:active{ transform:translateY(0) scale(.98); }
.fab-whatsapp{ background:#25D366; }
.fab-phone{ background:#0ea5e9; } /* sky blue */
.fab svg{ width:26px; height:26px; }

/*
 * Position the phone menu relative to the contact buttons and boost its
 * z-index so it overlays other content cleanly. Use the dark theme
 * background and border defined later in this file.
 */
/* Raise call menu above other content and use dark theme background */
.call-menu{
  position:fixed;
  right:1rem;
  bottom:4rem;
  border-radius:16px;
  padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.3);
  width:220px;
  display:none;
  z-index:1100;
  background:var(--bg2);
  border:1px solid var(--brand);
}
.call-menu.show{ display:block; animation:cm-slide-in .18s ease; }
.call-menu a{
  display:flex; align-items:center; gap:10px;
  padding:.6rem .75rem; border-radius:.75rem;
  text-decoration:none; color:#0c0a09; border:1px solid #e5e7eb;
  margin:.25rem 0;
}
.call-menu a:hover{ background:#f8fafc; }
.call-menu small{ color:#6b7280; }

@keyframes cm-slide-in{
  from{ transform:translateY(6px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* -------------------------------------------------------------------- */
/* Dark theme overrides for black and gold aesthetic                    */
/* The definitions below override light-theme styles above.             */

:root{
  --brand:#d4af37;
  --brand-600:#b8921e;
  --bg:#0a0a0a;
  --bg-secondary:#111111;
  --text:#e7e5e4;
  --muted:#a8a29e;
  --ring:#262626;
}

html, body{
  background-color:var(--bg);
  color:var(--text);
}

header.sticky{
  background:rgba(10,10,10,0.9);
  border-bottom:1px solid var(--ring);
}
nav a{
  color:var(--text);
}
nav a:hover{
  color:var(--brand);
}

.bg-fabric{
  background-image:radial-gradient(ellipse at top left,rgba(212,175,55,0.1),transparent 40%),radial-gradient(ellipse at bottom right,rgba(0,0,0,0.2),transparent 40%);
}
.bg-dark-grad{
  background:radial-gradient(60% 40% at 70% 0%,rgba(212,175,55,0.15),transparent),linear-gradient(180deg,#0f0f0f,rgba(15,15,15,0.95));
}

.btn-primary{
  background:linear-gradient(180deg,var(--brand),var(--brand-600));
  color:#0c0a09;
}
.btn-ghost{
  border:1px solid var(--ring);
  color:var(--text);
}

.gold-border{ border:2px solid var(--brand); }
.gold-ring{ box-shadow:0 0 0 2px var(--brand) inset; }

footer{
  background:var(--bg);
  color:var(--text);
}
.footer-col a{
  color:var(--muted);
}
.footer-col a:hover{
  color:var(--brand);
}

.hero-glow{
  color:var(--text);
  text-shadow:0 0 8px rgba(212,175,55,0.6),0 0 16px rgba(212,175,55,0.5);
}

.call-menu{
  background:var(--bg-secondary);
  border:1px solid var(--ring);
  color:var(--text);
}
.call-menu a{
  color:var(--text);
  border:1px solid var(--ring);
}
.call-menu a:hover{
  background:var(--bg);
}
.call-menu small{ color:var(--muted); }

.fab-phone{ background:var(--brand); }

.overlap-top{
  margin-top:-3rem;
}
@media(min-width:768px){
  .overlap-top{ margin-top:-4rem; }
}
@media(min-width:1024px){
  .overlap-top{ margin-top:-5rem; }
}