/* ===== Luxentra Premium Footer =====
   Rounded editorial masthead footer. Real content only — brand, tours,
   helper links, contact — with a giant outlined LUXENTRA word behind the
   bottom row. The gradient reveal follows the cursor on desktop
   (assets/js/footer-hover.js); touch devices get a static soft glow. */

.lx-mf{
  position:relative;
  background:var(--ink,#071A2B);
  padding:0 clamp(12px,2.4vw,28px) 0;
  font-family:'Manrope',sans-serif;
}

.lx-mf-inner{
  position:relative;
  max-width:1760px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(201,165,92,.22);
  border-bottom:none;
  border-radius:28px 28px 0 0;
  background:
    radial-gradient(ellipse 65% 50% at 50% 0%, rgba(201,165,92,.09) 0%, transparent 70%),
    linear-gradient(180deg,#0B2438 0%,#081C2F 60%,#061525 100%);
}

.lx-mf .wrap{max-width:1280px;margin:0 auto;padding:0 32px;position:relative;z-index:2}

/* ---------- Top grid: brand + 3 columns ---------- */
.lx-mf-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:48px;
  padding:68px 0 38px;
}

.lx-mf-brand{max-width:320px}
.lx-mf-logo{display:inline-block;margin-bottom:16px}
.lx-mf-logo img{display:block;height:42px;width:auto}
.lx-mf-brand p{font-family:'Manrope',sans-serif;font-weight:400;font-size:.9rem;line-height:1.7;margin:0;color:var(--muted,#D7DFE7)}

.lx-mf-col h4{font-family:'Manrope',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft,#D8BC7A);margin:0 0 20px}
.lx-mf-col ul{list-style:none;margin:0;padding:0}
.lx-mf-col li{margin-bottom:12px}
.lx-mf-col a{font-family:'Manrope',sans-serif;font-weight:400;color:var(--muted,#D7DFE7);font-size:14px;line-height:1.6;text-decoration:none;transition:color .25s ease}
.lx-mf-col a:hover{color:#fff}

.lx-mf-contact{display:flex;flex-direction:column}
.lx-mf-contact a,.lx-mf-contact .lx-mf-loc{font-family:'Manrope',sans-serif;font-weight:400;display:block;color:var(--muted,#D7DFE7);font-size:14px;line-height:1.7;text-decoration:none;margin-bottom:12px;transition:color .25s ease}
.lx-mf-contact a:hover{color:#fff}
.lx-mf-contact .lx-mf-loc{color:rgba(215,223,231,.75);margin-bottom:0}

/* ---------- Divider ---------- */
.lx-mf-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(201,165,92,.32) 15%,rgba(201,165,92,.32) 85%,transparent)}

/* ---------- Bottom row: social + copyright ---------- */
.lx-mf-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding:22px 0;
}
.lx-mf-social{display:flex;gap:10px}
.lx-mf-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(201,165,92,.28);display:grid;place-items:center;color:var(--gold-soft,#D8BC7A);background:rgba(201,162,92,.06);transition:all .3s ease}
.lx-mf-social a:hover{background:var(--gold,#C9A55C);color:var(--ink,#061525);transform:translateY(-2px)}
.lx-mf-social svg{width:17px;height:17px;fill:currentColor}
.lx-mf-copy{font-family:'Manrope',sans-serif;font-weight:400;font-size:.8rem;color:rgba(215,223,231,.6);letter-spacing:.02em}

/* ---------- Giant LUXENTRA masthead ---------- */
.lx-mf-giant{
  position:relative;
  z-index:1;
  width:100%;
  line-height:0;
  margin-top:-50px;
  pointer-events:auto;
}
.lx-mf-giant-svg{display:block;width:100%;height:auto}
.lx-mf-giant-outline{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  font-size:255px;
  fill:none;
  stroke:rgba(216,188,122,.32);
  stroke-width:1.4;
  letter-spacing:10.2px;
}
.lx-mf-giant-outline.lx-draw{
  stroke-dasharray:3400;
  stroke-dashoffset:3400;
  animation:lxStrokeDraw 2.4s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes lxStrokeDraw{to{stroke-dashoffset:0}}
.lx-mf-giant-fill{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  font-size:255px;
  letter-spacing:10.2px;
  opacity:.9;
}

@media(prefers-reduced-motion:reduce){
  .lx-mf-giant-outline.lx-draw{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
}

/* ---------- Tablet ---------- */
@media(max-width:1100px){
  .lx-mf-top{grid-template-columns:1fr 1fr;row-gap:40px}
  .lx-mf-brand{grid-column:1/-1;max-width:none}
}

/* ---------- Mobile: stacked, not a shrunk desktop footer ----------
   Note: the giant word's font-size is set in SVG viewBox user-units, not
   CSS px — it already scales down naturally with the SVG's own width
   (viewBox stays 2000x300 at every breakpoint), so it must NOT be
   overridden here or it shrinks twice and ends up illegibly small. */
@media(max-width:720px){
  .lx-mf{padding:0 14px}
  .lx-mf-inner{border-radius:20px 20px 0 0}
  .lx-mf .wrap{padding:0 20px}
  .lx-mf-top{grid-template-columns:1fr;gap:34px;padding:42px 0 26px}
  .lx-mf-brand{grid-column:auto}
  .lx-mf-bottom{padding:16px 0;flex-direction:column;align-items:flex-start}
  .lx-mf-giant{margin-top:-16px}
}