/* =====================================================================
   SAMMOHAK SALON — Editorial Luxury Design System (v2)
   Flat · Static · Classic — no entrance animations, no transitions on load
   Palette: Paper #FBFAF7 · Ivory #F6F3EC · Gold #B08D4F · Ink #22201C
   Type: Marcellus (display) · Jost (body)
   ===================================================================== */

:root {
  /* Geetanjali-inspired calm luxury — warm ivory canvas, muted bronze accent */
  --paper: #FAF7F1;          /* soft warm ivory page */
  --ivory: #F1ECE2;          /* alternating section panels */
  --ivory-deep: #E8E1D4;
  --line: #E6DECF;           /* airy hairline border */
  --line-dark: #CDC1AC;
  --gold: #A98A61;           /* muted bronze — calmer than bright gold */
  --gold-dark: #876C48;
  --gold-light: #C7AC82;     /* soft champagne highlight */
  --gold-soft: #EEE6D7;
  --ink: #211E19;            /* warm near-black headings */
  --body: #4B463D;
  --muted: #857C6D;
  --white: #FFFFFF;
  --dark: #1C1913;

  --font-head: 'Montserrat', 'Segoe UI', sans-serif;   /* headings — like Geetanjali */
  --font-body: 'Catamaran', 'Segoe UI', sans-serif;    /* body / nav — like Geetanjali */
  --header-brown: #2E1D0BD9;   /* Geetanjali dark-brown header — 85% opacity (exact) */

  --radius: 2px;
  --shadow-hover: 0 18px 40px -24px rgba(33, 30, 25, .3);
  --pad-section: clamp(58px, 5.5vw, 92px);
  --pad-section-sm: clamp(40px, 4vw, 62px);
}

/* =====================  BASE  ===================== */

* { -webkit-tap-highlight-color: transparent; }

html { overflow-x: hidden; overflow-x: clip; }

/* Global type scale. Every font-size in this file is in rem, so the whole
   hierarchy grows together and keeps its proportions. Spacing is px/clamp,
   so the layout itself is unaffected. Phones get a gentler bump — the
   letter-spaced uppercase buttons are already tight there. */
html { font-size: 112.5%; }                                   /* 16px -> 18px */
@media (max-width: 575.98px) { html { font-size: 106%; } }    /* ~17px */

body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--body);
  background: var(--paper);
  overflow-x: hidden;
  overflow-x: clip;
  letter-spacing: normal;
}

h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 600; color: var(--ink); line-height: 1.2; letter-spacing: .005em; }

a { color: var(--gold-dark); text-decoration: none; }
a:hover { color: var(--gold); }

img { max-width: 100%; height: auto; }

::selection { background: var(--gold); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ivory); }
::-webkit-scrollbar-thumb { background: var(--line-dark); border-radius: 0; }

.container { max-width: 1200px; padding-inline: 24px; }
@media (min-width: 1400px) { .container { max-width: 1240px; } }

section { position: relative; }

/* =====================  TYPO / SECTION UTILITIES  ===================== */

.eyebrow {
  font-size: .74rem; font-weight: 500;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold-dark);
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 44px; height: 1px; background: var(--line-dark); }
.eyebrow.centered::after { content: ''; width: 44px; height: 1px; background: var(--line-dark); }
.eyebrow.light { color: #C9B285; }
.eyebrow.light::before, .eyebrow.light::after { background: rgba(201,178,133,.45); }

.section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}
.section-title em { font-style: normal; color: var(--gold-dark); }

.section-lead {
  font-size: 1.08rem; font-weight: 400;
  color: var(--muted);
  max-width: 620px;
}
.section-lead.mx-auto { margin-inline: auto; }

.section-pad { padding: var(--pad-section) 0; }
.section-pad-sm { padding: var(--pad-section-sm) 0; }

.bg-beige { background: var(--ivory); }
.bg-cream-deep { background: var(--ivory); }

.divider-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold); margin: 8px 0 18px; }
.divider-ornament::before, .divider-ornament::after { content: ''; width: 54px; height: 1px; background: var(--line-dark); }

.text-gold { color: var(--gold-dark) !important; }
.lazy-img { background: var(--ivory); }

/* Legacy hooks kept inert — no animation states anywhere */
.preloader, .page-veil, .mouse-glow, #heroCanvas, .hero-scroll { display: none !important; }

/* =====================  TOP BAR  ===================== */

.topbar {
  background: var(--dark);
  color: #B9AE9D;
  font-size: .88rem;
  letter-spacing: .04em;
  padding: 8px 0;
}
.topbar i { color: var(--gold); margin-right: 6px; }
.topbar-left span { margin-right: 28px; }
.topbar-right a { color: #B9AE9D; margin-left: 16px; }
.topbar-right a:hover { color: #fff; }
.topbar-sep { opacity: .3; margin-left: 16px; }

/* =====================  NAVIGATION  ===================== */

.site-header { position: sticky; top: 0; z-index: 1000; }

/* Geetanjali-style header — centred logo, split nav, dark-brown bar */
.gt-nav {
  padding: 14px 0;
  background: var(--header-brown);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 26px -20px rgba(0,0,0,.6);
  transition: box-shadow .2s ease;
}
.site-header.scrolled .gt-nav { box-shadow: 0 14px 32px -16px rgba(0,0,0,.65); }
.gt-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.gt-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 30px; }
.gt-menu-left  { flex: 1; justify-content: flex-start; }
.gt-menu-right { flex: 1; justify-content: flex-end; }
.gt-menu a {
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #E9E1D2;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.gt-menu a:hover, .gt-menu a.active { color: #fff; border-bottom-color: rgba(255,255,255,.7); }

.gt-logo { flex: 0 0 auto; display: block; }
.brand-logo { height: var(--logo-h, 52px); width: auto; max-width: 240px; object-fit: contain; }

.nav-burger {
  border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius);
  width: 46px; height: 42px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: #fff; }

.mobile-nav { background: var(--paper); max-width: 330px; }
.mobile-nav .offcanvas-header { border-bottom: 1px solid var(--line); padding: 18px 24px; }
.mobile-nav-list li a {
  display: block; padding: 13px 2px;
  font-family: var(--font-head); font-size: 1.15rem;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.mobile-nav-list li a:hover, .mobile-nav-list li a.active { color: var(--gold-dark); }
.mobile-nav-contact a { display: block; margin-top: 10px; color: var(--body); font-size: .95rem; }
.mobile-nav-contact i { color: var(--gold-dark); margin-right: 8px; }
.mobile-socials a { color: var(--gold-dark); font-size: 1.2rem; }

/* =====================  BUTTONS  ===================== */

.btn { border-radius: var(--radius); letter-spacing: .22em; text-indent: .11em; }

/* Solid brown CTA — matches the header colour, pressed 3D look */
.btn-gold {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  background: #2E1D0B;
  border: 1px solid #2E1D0B;
  color: #fff;
  padding: 17.5px 34px 10.5px;
  font-size: .76rem; font-weight: 600; text-transform: uppercase;
  box-shadow:
    0 3px 0 #150c04,
    0 10px 18px -10px rgba(20, 12, 4, .5),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-gold:hover {
  background: #3d2810;
  border-color: #3d2810;
  transform: translateY(-1px);
  box-shadow:
    0 4px 0 #150c04,
    0 14px 22px -12px rgba(20, 12, 4, .55),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-gold:active {
  transform: translateY(2px);
  filter: brightness(.97);
  box-shadow:
    0 1px 0 #150c04,
    0 4px 10px -6px rgba(20, 12, 4, .5),
    inset 0 2px 4px rgba(0, 0, 0, .18);
}
.btn-gold i { margin-left: 8px; }
.btn-nav { padding: 16px 26px 12px; font-size: .72rem; line-height: 1; }

/* Outline buttons — stacked-paper 3D: hard offset shadow that presses flat on click */
.btn-outline-luxe {
  border: 1px solid #2E1D0B; color: #2E1D0B;
  padding: 16.5px 32px 9.5px; font-size: .76rem; font-weight: 600; text-transform: uppercase;
  background: #fff; border-radius: var(--radius);
  box-shadow: 3px 3px 0 #2E1D0B;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.btn-outline-luxe:hover {
  border-color: #2E1D0B; color: #fff; background: #2E1D0B;
  box-shadow: 3px 3px 0 #150c04;
}
.btn-outline-luxe:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #2E1D0B; }

.btn-ghost-dark {
  border: 1px solid rgba(255,255,255,.45); color: #fff;
  padding: 13px 32px; font-size: .76rem; text-transform: uppercase; border-radius: var(--radius);
  box-shadow: 3px 3px 0 rgba(255, 255, 255, .28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn-ghost-dark:hover { background: #fff; color: var(--ink); box-shadow: 3px 3px 0 rgba(255,255,255,.45); }
.btn-ghost-dark:active { transform: translate(3px, 3px); box-shadow: 0 0 0 rgba(255,255,255,.45); }

.btn-hero-alt {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: var(--radius);
  border: 1px solid var(--line-dark);
  background: #fff;
  color: var(--ink); font-size: .76rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--line-dark);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.btn-hero-alt i { color: #2E1D0B; font-size: 1rem; }
.btn-hero-alt:hover { border-color: #2E1D0B; color: #2E1D0B; box-shadow: 3px 3px 0 #2E1D0B; }
.btn-hero-alt:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #2E1D0B; }

.link-luxe {
  font-size: .74rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-dark); display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line-dark); padding-bottom: 4px;
}
.link-luxe:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* =====================  HERO — editorial graphic  ===================== */

/* =====================  HERO SLIDESHOW (full-width)  ===================== */
.hero-slider { position: relative; width: 100%; }
.hero-swiper, .hero-swiper .swiper-wrapper { width: 100%; }
/* ---------------------------------------------------------------
   Split editorial hero.

   The old hero laid the headline straight across the photo and then
   needed a heavy scrim to keep the words legible — which is exactly
   why the model disappeared into the dark. Here the copy gets its own
   brown panel on the left and the photo owns the right, so the face
   carries NO overlay at all and the type needs no shadow to be read.
   --------------------------------------------------------------- */
.hero-swiper .swiper-slide {
  position: relative;
  display: grid;
  grid-template-columns: 44% 56%;
  /* minmax(0, 1fr), not the implicit `auto`. With an auto row the track grows to
     the PHOTO's natural height — a tall portrait made the row ~1400px, the copy
     centred itself inside that invisible 1400px, and the box clipped at 760px,
     so the text appeared shoved to the bottom. Bounding the row keeps the layout
     honest whatever shape the uploaded photo is. */
  grid-template-rows: minmax(0, 1fr);
  height: clamp(460px, 82vh, 760px);
  overflow: hidden;
  background: #2E1D0B;
}

/* Photo — right column, completely unobscured.
   The arched top-left corner is a nod to the Moorish arches in the salon itself
   (and in the logo), so the photo reads as if it sits in an alcove rather than
   in a plain rectangle. */
.hs-img {
  grid-area: 1 / 2;
  width: 100%; height: 100%;
  min-height: 0;                     /* let it shrink to the row, never push it out */
  object-fit: cover; object-position: center 38%;
  display: block;
  border-top-left-radius: clamp(90px, 15vw, 240px);
}

/* Not a scrim any more: just a soft feather on the photo's left edge so it
   melts into the brown panel instead of butting against it with a hard seam. */
.hs-overlay {
  grid-area: 1 / 2;
  z-index: 1;
  background: linear-gradient(90deg, #2E1D0B 0%, rgba(46,29,11,.5) 10%, rgba(46,29,11,0) 30%);
  border-top-left-radius: clamp(90px, 15vw, 240px);
}

.hs-content {
  grid-area: 1 / 1;
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  text-align: left;
  padding: 0 clamp(28px, 4vw, 76px);
  color: #fff;
}

/* The oversized ghost word. It starts in the panel and runs on across the
   photo, blended into the light rather than painted on top — so the type
   reads as if it passes BEHIND her. Non-interactive, decorative only. */
.hero-slider::after {
  content: 'SAMMOHAK';
  position: absolute; z-index: 2;
  left: 3%; bottom: -2%;
  font-family: var(--font-head);
  font-size: clamp(5rem, 15vw, 15rem);
  font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.10);
  mix-blend-mode: soft-light;
  white-space: nowrap; pointer-events: none;
  line-height: 1;
}

.hs-eyebrow {
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: #D9BE8B; margin-bottom: 20px;
}
.hs-eyebrow::before {
  content: ''; display: inline-block;
  width: 40px; height: 1px; margin-right: 14px;
  background: #A98A61; vertical-align: middle;
}
.hs-title {
  font-family: var(--font-head);
  /* No max-width: the 12ch cap was forcing "WHERE / BEAUTY / MEETS / PERFECTION"
     onto four lines. The panel's own width is the only limit it needs.
     Sized to actually fill the panel — at 2.6rem it left a dead gap underneath. */
  font-size: clamp(2rem, 3.5vw, 3.6rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
  color: #fff; margin-bottom: 40px;
}
.hero-swiper .swiper-pagination { bottom: 24px; }
.hero-swiper .swiper-pagination-bullet { width: 9px; height: 9px; background: #fff; opacity: .5; transition: opacity .2s, transform .2s; }
.hero-swiper .swiper-pagination-bullet-active { opacity: 1; background: var(--gold-light); transform: scale(1.25); }
/* Narrow screens: ONE layer, not two stacked boxes. The photo fills the slide and
   the copy sits on top of it — image and text stay a single composition instead
   of a photo pane with a separate brown pane bolted underneath.
   The scrim rises from the bottom only, so her face (upper half) stays clear
   while the words below it sit on solid dark. */
@media (max-width: 767.98px) {
  .hero-swiper .swiper-slide {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: clamp(440px, 68vh, 600px);
  }
  .hs-img {
    grid-area: 1 / 1;
    object-position: center 28%;
    border-top-left-radius: 0;
  }
  .hs-overlay {
    grid-area: 1 / 1;
    border-top-left-radius: 0;
    background: linear-gradient(180deg,
      rgba(30,19,7,.10) 0%,
      rgba(30,19,7,.30) 40%,
      rgba(30,19,7,.86) 78%,
      rgba(30,19,7,.96) 100%);
  }
  .hs-content {
    grid-area: 1 / 1;
    justify-content: flex-end;
    padding: 0 26px 40px;
  }
  /* Text sits on the photo here, so it needs its own lift again. */
  .hs-title   { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
  .hs-eyebrow { text-shadow: 0 2px 10px rgba(0,0,0,.6); }
  .hero-slider::after { display: none; }   /* the giant word just clutters a phone */
}

@media (max-width: 767.98px) {
  /* "PREMIUM HAIR • SKIN • NAILS • BRIDAL" is 36 characters. At the desktop size
     and letter-spacing it can't fit a phone, so BRIDAL was dropping onto a line
     of its own. Tighten it and drop the leading rule (which alone ate ~54px) so
     the whole line holds together. */
  .hs-eyebrow { font-size: .62rem; letter-spacing: .14em; margin-bottom: 14px; }
  .hs-eyebrow::before { display: none; }
}

@media (max-width: 575.98px) {
  .hs-title { margin-bottom: 28px; }
  .hs-content .btn { padding: 12px 22px 9px; font-size: .66rem; letter-spacing: .16em; }
}

/* =====================  SPLIT FEATURE SECTIONS (image + text)  ===================== */
.split-sec { display: grid; grid-template-columns: 1fr 1fr; }
/* The photos in uploads/crops/ are pre-cut to 4:3 with the subject's face at the
   centre (see database/make-crops.php). Matching the box to that same 4:3 means
   cover has nothing left to crop — no more sliced-off heads. Chasing this with
   object-position never worked: the sources are tall portraits, so any band you
   pick out of them cuts either the head or the chin. */
.split-sec .ss-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.split-sec .ss-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.split-sec .ss-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 3vw, 48px) clamp(28px, 4vw, 72px);
  background: var(--paper);
}
/* Alternating dark panel (Geetanjali-style). Only the blocks whose image sits
   on the RIGHT get this, so the page reads light -> dark -> light rather than
   every section being brown. Set "Image Side" in Admin -> Feature Sections to
   choose which ones go dark. */
.split-sec.text-dark .ss-text  { background: #2E1D0B; }
.split-sec.text-dark .ss-eyebrow { color: #C9B285; }
.split-sec.text-dark .ss-title   { color: #fff; }
.split-sec.text-dark .ss-desc    { color: rgba(255,255,255,.74); }
/* .btn-brown is brown-on-brown here — flip it to a light outline button. */
.split-sec.text-dark .btn-brown {
  background: transparent; color: #fff !important;
  border-color: rgba(255,255,255,.55);
}
.split-sec.text-dark .btn-brown:hover {
  background: #fff; color: #2E1D0B !important; border-color: #fff;
}
.ss-eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 16px; }
.ss-title {
  font-family: 'Montserrat', sans-serif;
  /* 700 — this one was still sitting at 500 (Montserrat Medium), which is why it
     read thin next to the bolded section titles. */
  font-size: clamp(1.25rem, 2.1vw, 1.85rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; line-height: 1.34;
  color: #1b1b1b; margin-bottom: 22px;
}
.ss-desc { color: var(--muted); font-size: 1rem; line-height: 1.85; margin-bottom: 30px; max-width: 500px; }
.split-sec.reverse .ss-img { order: 2; }

/* Dark-brown CTA button (Geetanjali style) */
.btn-brown {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  background: #2E1D0B; color: #fff !important;
  padding: 14px 30px; font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid #2E1D0B; border-radius: var(--radius);
  transition: background .2s ease, color .2s ease;
}
.btn-brown:hover { background: transparent; color: #2E1D0B !important; }
.btn-brown i { font-size: .95rem; }

@media (max-width: 767.98px) {
  .split-sec { grid-template-columns: 1fr; }
  .split-sec.reverse .ss-img { order: 0; }
  /* height is intentionally NOT set here — the 4:3 aspect-ratio above keeps the
     photo uncropped at every width. */
}

/* =====================  HERO (arch composition)  ===================== */
.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: clamp(56px, 7vw, 110px) 0;
  position: relative;
  overflow: hidden;
}

/* Oversized ghost wordmark behind the composition */
.hero-ghost {
  position: absolute; top: -2%; left: -1%;
  font-family: var(--font-head);
  font-size: clamp(6rem, 15vw, 13.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  opacity: .55;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .7rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 26px;
}
.hero-kicker::before { content: ''; width: 46px; height: 1px; background: var(--gold); }

.hero-title {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 700;
  margin-bottom: 26px;
  line-height: 1.18;
  letter-spacing: .01em;
}
/* Second line drawn as outlined display type — the graphic signature */
.hero-title .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold-dark);
}

.hero-sub {
  font-size: .95rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 40px;
}
.hero-sub .sep { color: var(--gold); margin: 0 6px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }

.hero-trust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-trust .stars { color: var(--gold); letter-spacing: 4px; font-size: .9rem; }
.hero-trust a { font-size: .9rem; color: var(--muted); border-bottom: 1px solid var(--line-dark); }
.hero-trust a:hover { color: var(--gold-dark); }

/* Arch composition — echoes the salon's Moroccan mirror arches */
.hero-art {
  position: relative;
  width: min(430px, 90%);
  margin-inline: auto;
}
/* Arch shape defined with % radii so photo + outline scale as concentric arches */
.arch-photo {
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.arch-photo img,
.arch-photo .arch-video { width: 100%; aspect-ratio: 4/5.2; object-fit: cover; display: block; }
.arch-photo .arch-video { background: var(--gold-soft); }
/* Offset outline arch — uniform 14px gap all around, same shape as photo */
.hero-art::before {
  content: ''; position: absolute;
  inset: -14px;
  border: 1px solid var(--gold);
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  opacity: .55;
}
/* Soft solid arch echo peeking behind the photo */
.hero-art::after {
  content: ''; position: absolute;
  inset: 14px -12px -12px -12px;
  background: var(--gold-soft);
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
  z-index: 0;
}

/* Circular text stamp */
.hero-stamp {
  position: absolute;
  left: -40px; bottom: 48px;
  width: clamp(120px, 12vw, 168px);
  z-index: 3;
  color: var(--gold-dark);
  background: var(--paper);
  border-radius: 50%;
}
.hero-stamp .stamp-text {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 1.9px;
  fill: var(--gold-dark);
}
.hero-stamp .stamp-star { font-size: 20px; fill: var(--gold); }

/* Minimal stat chips pinned to the arch */
.hero-chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line-dark);
  padding: 12px 18px;
}
.hero-chip .hc-num { font-family: var(--font-head); font-size: 1.35rem; color: var(--ink); line-height: 1; }
.hero-chip .hc-lbl { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.chip-a { top: 14%; right: -6%; }
.chip-b { bottom: 8%; right: -3%; }

/* =====================  CINEMATIC VIDEO BAND  ===================== */
.video-band {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 14vw, 190px) 0;
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.video-band-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.video-band-overlay {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,17,14,.72) 0%, rgba(20,17,14,.55) 45%, rgba(20,17,14,.78) 100%);
}
.video-band-inner { max-width: 760px; margin-inline: auto; }
.gold-eyebrow { color: var(--gold-light); }
.eyebrow.gold-eyebrow::before,
.eyebrow.centered.gold-eyebrow::after { background: var(--gold); }
.video-band-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.18;
  color: #fff;
  margin-bottom: 20px;
}
.video-band-title em { color: var(--gold-light); font-style: italic; }
.video-band-lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,.82);
  max-width: 560px;
  margin: 0 auto 34px;
}
.video-band-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn-hero-alt.light { background: rgba(0,0,0,.30); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-hero-alt.light i { color: var(--gold-light); }
.btn-hero-alt.light:hover { background: rgba(0,0,0,.48); border-color: #fff; }

/* =====================  PAGE HERO (inner)  ===================== */

.page-hero {
  padding: clamp(52px, 6vw, 88px) 0 clamp(40px, 4.5vw, 64px);
  text-align: center;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.page-hero-glow { display: none; }

/* Page hero with cinematic video background */
.page-hero.has-video {
  position: relative;
  overflow: hidden;
  background: #14110e;
  border-bottom: none;
  isolation: isolate;
}
.page-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page-hero-veil {
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,17,14,.68) 0%, rgba(20,17,14,.5) 50%, rgba(20,17,14,.8) 100%);
}
.page-hero.has-video .page-hero-eyebrow { color: var(--gold-light); }
.page-hero.has-video .page-hero-title { color: #fff; }
.page-hero.has-video .breadcrumb-item a { color: rgba(255,255,255,.72); }
.page-hero.has-video .breadcrumb-item a:hover { color: #fff; }
.page-hero.has-video .breadcrumb-item.active { color: var(--gold-light); }
.page-hero.has-video .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }
.page-hero-eyebrow {
  font-size: .72rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold-dark); margin-bottom: 12px;
}
.page-hero-title { font-size: clamp(2.6rem, 5vw, 4rem); margin-bottom: 14px; line-height: 1.1; }
.breadcrumb { --bs-breadcrumb-divider: '/'; justify-content: center; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; margin: 0; }
.breadcrumb-item a { color: var(--muted); }
.breadcrumb-item.active { color: var(--gold-dark); }

/* =====================  CARDS  ===================== */

.luxe-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.luxe-card:hover { border-color: var(--line-dark); box-shadow: var(--shadow-hover); transform: translateY(-3px); }

.service-card .sc-media { position: relative; overflow: hidden; aspect-ratio: 4/3; border-bottom: 1px solid var(--line); }
.service-card .sc-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.service-card .sc-icon {
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  width: 44px; height: 44px;
  background: var(--paper);
  color: var(--gold-dark); font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.service-card .sc-body { padding: 26px 24px; }
.service-card .sc-title { font-size: 1.28rem; margin-bottom: 8px; }
.service-card .sc-text { font-size: .92rem; color: var(--muted); margin-bottom: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Featured slides */
.feature-card {
  position: relative; overflow: hidden; display: block;
  border: 1px solid var(--line);
  background: #fff;
}
.feature-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.feature-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(185deg, transparent 45%, rgba(23, 20, 15, .78) 100%);
}
.feature-card .fk-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px; }
.feature-card .fk-tag {
  display: inline-block; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: #E7D9BC; border: 1px solid rgba(231,217,188,.5);
  padding: 5px 12px; margin-bottom: 12px;
}
.feature-card .fk-title { color: #fff; font-size: 1.3rem; margin-bottom: 4px; }
.feature-card .fk-price { font-size: 1rem; color: #E7D9BC; letter-spacing: .05em; }
.feature-card .fk-price del { color: rgba(255,255,255,.5); margin-right: 8px; font-size: .9rem; }

/* =====================  ABOUT  ===================== */

.about-visual { position: relative; padding-bottom: 44px; }
.about-img-main {
  border: 1px solid var(--line-dark);
  padding: 12px; background: #fff;
  width: 88%;
}
.about-img-main img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.about-img-accent {
  position: absolute; right: 0; bottom: 0;
  width: 46%;
  border: 1px solid var(--line-dark);
  padding: 8px; background: #fff;
}
.about-img-accent img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.about-badge {
  position: absolute; top: -20px; left: -12px; z-index: 3;
  background: var(--dark); color: #E7D9BC;
  width: 116px; height: 116px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  border: 1px solid var(--gold);
}
.about-badge .num { font-family: var(--font-head); font-size: 1.55rem; line-height: 1; }
.about-badge .lbl { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; margin-top: 6px; opacity: .85; }

.why-item { display: flex; gap: 16px; margin-top: 26px; }
.why-item .wi-icon {
  flex: 0 0 auto;
  color: var(--gold-dark); font-size: 1.55rem;
  line-height: 1; padding-top: 4px;
}
.why-item h4 { font-size: 1.08rem; margin-bottom: 4px; }
.why-item p { font-size: .92rem; color: var(--muted); margin: 0; }

/* =====================  STATS  ===================== */

.stats-band {
  background: #2E1D0B;                 /* same dark-brown as the header */
  color: #fff;
  padding: clamp(52px, 5.5vw, 80px) 0;
  border-block: 1px solid rgba(255,255,255,.08);
}
.stat-item { text-align: center; position: relative; }
.stat-item::after {
  content: ''; position: absolute; top: 12%; right: 0; height: 76%;
  width: 1px; background: rgba(201,178,133,.25);
}
.row > div:last-child .stat-item::after { display: none; }
.stat-num { font-family: var(--font-head); font-size: clamp(2.1rem, 3.8vw, 3rem); color: #E7D9BC; line-height: 1.15; }
.stat-label { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #8F877A; margin-top: 8px; }
@media (max-width: 575.98px) {
  .stats-band { padding: 36px 0; }
  .stats-band .stat-num { font-size: 1.5rem; }
  .stats-band .stat-label { font-size: .52rem; letter-spacing: .08em; margin-top: 5px; }
}

/* =====================  TESTIMONIALS  ===================== */

.testimonial-card {
  background: #fff; border: 1px solid var(--line);
  padding: 32px 30px;
  height: auto;
}
.testimonial-card .tc-stars { color: var(--gold); margin-bottom: 16px; letter-spacing: 3px; font-size: .85rem; }
.testimonial-card .tc-text { font-size: 1rem; color: var(--body); margin-bottom: 24px; }
.testimonial-card .tc-user { display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--line); padding-top: 18px; }
.testimonial-card .tc-avatar {
  width: 46px; height: 46px; flex: 0 0 46px;
  overflow: hidden;
  background: var(--gold-soft);
  color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 1.15rem;
  border-radius: 50%;
}
.testimonial-card .tc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card .tc-name { font-weight: 500; font-size: .98rem; color: var(--ink); }
.testimonial-card .tc-src { font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
.testimonial-card .tc-src i { color: var(--gold-dark); margin-right: 4px; }

.swiper-luxe { padding: 4px 2px 56px !important; }
.swiper-luxe .swiper-pagination-bullet { background: var(--line-dark); opacity: 1; width: 22px; height: 2px; border-radius: 0; }
.swiper-luxe .swiper-pagination-bullet-active { background: var(--gold-dark); }

/* Slider navigation arrows */
.swiper-nav {
  position: absolute; bottom: 6px; z-index: 6;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line-dark);
  color: var(--gold-dark); font-size: 1.05rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.swiper-nav:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; box-shadow: 3px 3px 0 var(--gold-soft); }
.swiper-nav-prev { right: 62px; }
.swiper-nav-next { right: 8px; }
.swiper-nav.swiper-button-disabled { opacity: .35; cursor: default; }
.swiper-nav.swiper-button-disabled:hover { background: var(--paper); color: var(--gold-dark); border-color: var(--line-dark); box-shadow: none; }
@media (max-width: 575.98px) {
  .swiper-nav { width: 42px; height: 42px; bottom: 4px; z-index: 10; }
  .swiper-nav-prev { left: 8px; right: auto; }
  .swiper-nav-next { left: 58px; right: auto; }
}

/* Sliders must never widen the page; pre-init slides stay card-sized */
.swiper { max-width: 100%; min-width: 0; }
.swiper:not(.swiper-initialized) { overflow: hidden; }
.swiper:not(.swiper-initialized) .swiper-slide { width: min(320px, 85vw); flex-shrink: 0; }

/* =====================  GALLERY  ===================== */

.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 44px; }
.gallery-filters .gf-btn {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  padding: 9px 22px; border-radius: var(--radius);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
}
.gallery-filters .gf-btn:hover, .gallery-filters .gf-btn.active {
  border-color: var(--gold-dark); color: var(--gold-dark); background: #fff;
}

/* Uniform editorial grid (replaces masonry) */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.masonry-item {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--line); background: #fff; padding: 10px;
}
.masonry-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.masonry-item .mi-caption {
  display: block; text-align: center;
  padding: 12px 4px 3px;
  font-family: var(--font-head); font-size: .98rem; color: var(--ink);
}
.masonry-item .mi-caption:empty { display: none; }
.masonry-item .mi-zoom {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  width: 38px; height: 38px;
  background: rgba(251,250,247,.94); border: 1px solid var(--line-dark);
  color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.masonry-item:hover .mi-zoom { opacity: 1; }
.masonry-item:hover { border-color: var(--line-dark); }
@media (max-width: 991.98px) { .masonry { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 575.98px) { .masonry { grid-template-columns: 1fr; } }

.lightbox {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(24, 21, 17, .93);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(90vw, 1100px); max-height: 86vh; border: 6px solid #fff; }
.lightbox-close {
  position: absolute; top: 24px; right: 28px;
  width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.4);
  background: transparent; color: #fff; font-size: 1.2rem;
}

.video-card { position: relative; overflow: hidden; aspect-ratio: 9/16; background: var(--dark); border: 1px solid var(--line-dark); }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ba-card { position: relative; overflow: hidden; border: 1px solid var(--line-dark); user-select: none; background: #fff; }
.ba-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; pointer-events: none; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #fff; cursor: ew-resize; z-index: 3; }
.ba-handle::after {
  content: '\2194'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  background: var(--paper); color: var(--gold-dark); border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.ba-label {
  position: absolute; top: 14px; z-index: 2;
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  background: rgba(251,250,247,.94); color: var(--ink); border: 1px solid var(--line-dark);
  padding: 5px 12px;
}
.ba-label.before { left: 14px; }
.ba-label.after { right: 14px; }

/* =====================  TEAM  ===================== */

.team-card { text-align: center; }
.team-card .tm-photo {
  position: relative; overflow: hidden; margin-bottom: 20px;
  border: 1px solid var(--line-dark); padding: 10px; background: #fff;
}
.team-card .tm-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.team-card .tm-socials {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; opacity: 0;
}
.team-card:hover .tm-socials { opacity: 1; }
.team-card .tm-socials a {
  width: 38px; height: 38px;
  background: rgba(251,250,247,.96); border: 1px solid var(--line-dark); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
}
.team-card .tm-name { font-size: 1.25rem; margin-bottom: 2px; }
.team-card .tm-role { color: var(--gold-dark); font-size: .95rem; }
.team-card .tm-exp { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* =====================  BRANDS  ===================== */

.brand-strip { border-block: 1px solid var(--line); padding: 30px 0; overflow: hidden; contain: inline-size; background: #fff; }
.brand-track { display: flex; gap: clamp(48px, 7vw, 110px); width: max-content; animation: marquee 34s linear infinite; }
.brand-strip:hover .brand-track { animation-play-state: paused; }
.brand-item {
  font-family: var(--font-head); font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: #A79E8D; white-space: nowrap;
  display: flex; align-items: center; gap: clamp(48px, 7vw, 110px);
}
.brand-item::after { content: '·'; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } }

/* =====================  PRICING  ===================== */

.price-toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-bottom: 48px; }
.price-search { position: relative; min-width: min(380px, 100%); }
.price-search input {
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 13px 20px 13px 48px; width: 100%;
  background: #fff; font-size: .95rem; font-family: var(--font-body);
}
.price-search input:focus { outline: none; border-color: var(--gold-dark); }
.price-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--gold-dark); }

#priceFilter { border-radius: var(--radius) !important; border-color: var(--line-dark) !important; font-family: var(--font-body); }

.price-group-title {
  font-size: 1.4rem; margin: 46px 0 4px;
  display: flex; align-items: center; gap: 14px;
}
.price-group-title i { color: var(--gold-dark); font-size: 1.05rem; }
.price-group-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.price-row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}
.price-row:hover { background: rgba(176,141,79,.045); }
.price-row .pr-name { font-weight: 500; color: var(--ink); font-size: 1rem; }
.price-row .pr-duration { font-size: .74rem; color: var(--muted); letter-spacing: .06em; }
.price-row .pr-dots { flex: 1; border-bottom: 1px dotted var(--line-dark); transform: translateY(-5px); }
.price-row .pr-price { font-family: var(--font-head); font-size: 1.1rem; color: var(--gold-dark); white-space: nowrap; }
.price-row .pr-price del { color: var(--muted); font-size: .85rem; margin-right: 8px; }
.price-row .pr-book { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; border-bottom: none; }

.package-card {
  background: #fff; border: 1px solid var(--line-dark);
  padding: 40px 34px; height: 100%;
  position: relative; overflow: hidden;
}
.package-card.highlight { background: var(--dark); border-color: var(--gold); }
.package-card.highlight h3, .package-card.highlight .pk-price { color: #E7D9BC; }
.package-card.highlight li { color: #B9AE9D; }
.package-card .pk-ribbon {
  position: absolute; top: 0; right: 0;
  background: var(--gold); color: #fff;
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  padding: 7px 16px;
}
.package-card h3 { font-size: 1.4rem; }
.package-card .pk-price { font-family: var(--font-head); font-size: 2.1rem; color: var(--gold-dark); margin: 14px 0 4px; }
.package-card .pk-price del { font-size: 1.05rem; color: var(--muted); }
.package-card ul { list-style: none; padding: 0; margin: 22px 0 28px; }
.package-card li { padding: 8px 0; font-size: .94rem; color: var(--body); display: flex; gap: 10px; border-bottom: 1px solid rgba(176,141,79,.12); }
.package-card li i { color: var(--gold); }

/* =====================  OFFERS  ===================== */

.offer-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-dark);
  height: 100%;
}
.offer-card .of-head {
  background: var(--dark); color: #E7D9BC; padding: 22px 28px;
  border-bottom: 1px solid var(--gold);
}
.offer-card .of-discount { font-family: var(--font-head); font-size: 1.6rem; line-height: 1.2; }
.offer-card .of-body { padding: 26px 28px; flex: 1; display: flex; flex-direction: column; }
.offer-card .of-title { font-size: 1.25rem; margin-bottom: 10px; }
.offer-card .of-text { color: var(--muted); font-size: .93rem; flex: 1; }
.offer-coupon {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px dashed var(--gold); padding: 9px 18px; margin: 18px 0;
  font-weight: 500; letter-spacing: .2em; color: var(--gold-dark);
  cursor: pointer; background: var(--gold-soft);
  font-size: .85rem;
}
.countdown { display: flex; gap: 10px; margin: 16px 0; }
.countdown .cd-box {
  min-width: 60px; text-align: center;
  background: var(--paper); border: 1px solid var(--line-dark);
  padding: 10px 8px;
}
.countdown .cd-num { font-family: var(--font-head); font-size: 1.3rem; color: var(--ink); line-height: 1; }
.countdown .cd-lbl { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* =====================  FAQ  ===================== */

.faq-accordion .accordion-item {
  background: #fff; border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important; overflow: hidden;
  margin-bottom: 12px;
}
.faq-accordion .accordion-button {
  background: #fff; font-family: var(--font-head);
  font-size: 1.08rem; color: var(--ink);
  padding: 20px 24px; box-shadow: none !important;
}
.faq-accordion .accordion-button:not(.collapsed) { color: var(--gold-dark); background: var(--paper); }
.faq-accordion .accordion-button::after {
  background-image: none; content: '+';
  font-family: var(--font-body); font-size: 1.6rem; font-weight: 400;
  color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
}
.faq-accordion .accordion-button:not(.collapsed)::after { content: '\2212'; }
.faq-accordion .accordion-body { color: var(--muted); font-size: .95rem; padding: 2px 24px 22px; }

/* =====================  BLOG  ===================== */

.blog-card { display: flex; flex-direction: column; }
.blog-card .bc-media { position: relative; aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line); }
.blog-card .bc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card .bc-date {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  background: var(--paper); border: 1px solid var(--line-dark); color: var(--ink);
  padding: 8px 14px; text-align: center; line-height: 1.1;
}
.blog-card .bc-date .d { font-family: var(--font-head); font-size: 1.2rem; display: block; }
.blog-card .bc-date .m { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); }
.blog-card .bc-body { padding: 26px 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card .bc-title { font-size: 1.22rem; margin-bottom: 10px; }
.blog-card .bc-title a { color: var(--ink); }
.blog-card .bc-title a:hover { color: var(--gold-dark); }
.blog-card .bc-excerpt { font-size: .92rem; color: var(--muted); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.blog-article { max-width: 780px; margin-inline: auto; }
.blog-article .ba-hero { border: 1px solid var(--line-dark); padding: 10px; background: #fff; margin-bottom: 36px; }
.blog-article h2 { font-size: 1.6rem; margin: 36px 0 16px; }
.blog-article .ba-meta { display: flex; gap: 22px; color: var(--muted); font-size: .84rem; margin-bottom: 26px; letter-spacing: .04em; }
.blog-article .ba-meta i { color: var(--gold-dark); margin-right: 6px; }

.pagination .page-link {
  border-radius: var(--radius) !important; margin: 0 4px;
  border-color: var(--line-dark); color: var(--gold-dark); font-family: var(--font-body);
}
.pagination .page-item.active .page-link { background: var(--gold); border-color: var(--gold); color: #fff; }

/* =====================  FORMS / CONTACT  ===================== */

.luxe-form .form-label { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.luxe-form .form-control, .luxe-form .form-select {
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: #fff; padding: 12px 16px;
  font-size: .96rem; font-weight: 400; color: var(--body); font-family: var(--font-body);
}
.luxe-form .form-control:focus, .luxe-form .form-select:focus {
  border-color: var(--gold-dark); box-shadow: none;
}
.luxe-form textarea.form-control { min-height: 130px; }

.form-panel {
  background: #fff; border: 1px solid var(--line-dark);
  padding: clamp(28px, 4vw, 48px);
}

.contact-info-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line);
  padding: 24px;
  height: 100%;
  transition: border-color .25s ease;
}
.contact-info-card:hover { border-color: var(--line-dark); }
.contact-info-card .ci-icon {
  flex: 0 0 auto;
  color: var(--gold-dark); font-size: 1.5rem;
  line-height: 1; padding-top: 2px;
}
.contact-info-card > div { min-width: 0; }
.contact-info-card h4 { font-size: 1.05rem; margin-bottom: 4px; }
.contact-info-card p, .contact-info-card a { font-size: .92rem; color: var(--muted); margin: 0; display: block; overflow-wrap: anywhere; }
.contact-info-card a:hover { color: var(--gold-dark); }

.map-frame { border: 1px solid var(--line-dark); padding: 10px; background: #fff; display: flex; }
.map-frame iframe { display: block; width: 100%; min-height: 430px; flex: 1; border: 0; filter: saturate(.85); }

/* =====================  CTA BAND  ===================== */

.cta-band {
  background: var(--dark);
  padding: clamp(56px, 6vw, 88px) 0;
  border-top: 1px solid var(--gold);
}
.cta-band-glow { display: none; }
.cta-band-title { color: #F2EBDD; font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0; }

/* =====================  FOOTER  ===================== */

.site-footer {
  background: var(--dark); color: #A79E8D;
  padding: clamp(56px, 6.5vw, 88px) 0 0;
  font-size: .94rem;
}
.footer-logo { height: var(--logo-h-footer, 54px); width: auto; max-width: 260px; object-fit: contain; margin-bottom: 22px; }
.footer-logo-invert { filter: brightness(0) invert(.9) sepia(.2); }
.footer-about { color: #8F877A; max-width: 320px; }
.footer-socials { display: flex; gap: 22px; margin-top: 22px; }
.footer-socials a { font-size: 1.25rem; color: #C9B285; transition: transform .2s ease, opacity .2s ease; }
.footer-socials a:hover { transform: translateY(-3px); opacity: .85; }
/* original brand colours — footer, top bar & mobile menu socials */
.footer-socials .bi-facebook,
.topbar-right .bi-facebook,
.mobile-socials .bi-facebook { color: #1877F2; }
.footer-socials .bi-whatsapp,
.topbar-right .bi-whatsapp,
.mobile-socials .bi-whatsapp { color: #25D366; }
.footer-socials .bi-google,
.topbar-right .bi-google,
.mobile-socials .bi-google {
  background: conic-gradient(from 0deg at 50% 50%,
    #4285F4 0deg 90deg,    /* top-right  → blue  */
    #34A853 90deg 180deg,  /* bottom-right → green */
    #FBBC05 180deg 270deg, /* bottom-left → yellow */
    #EA4335 270deg 360deg  /* top-left → red */
  );
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.footer-socials .bi-instagram,
.topbar-right .bi-instagram,
.mobile-socials .bi-instagram {
  background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.footer-heading {
  color: #F2EBDD; font-size: 1.02rem; margin-bottom: 22px;
  position: relative; padding-bottom: 12px;
}
.footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 1px; background: var(--gold); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links a { color: #8F877A; display: inline-block; padding: 6px 0; }
.footer-links a:hover { color: #E7D9BC; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 13px; margin-bottom: 16px; }
.footer-contact i { color: #C9B285; margin-top: 4px; }
.footer-contact span { min-width: 0; overflow-wrap: anywhere; }
.footer-contact a { color: #8F877A; }
.footer-contact a:hover { color: #E7D9BC; }
.footer-news-text { color: #8F877A; font-size: .9rem; }
.newsletter-group { display: flex; gap: 8px; }
.newsletter-group .form-control {
  background: transparent; border: 1px solid rgba(201,178,133,.35);
  border-radius: var(--radius); color: #fff; padding: 11px 16px; font-size: .9rem;
}
.newsletter-group .form-control::placeholder { color: #7d7466; }
.newsletter-group .form-control:focus { background: transparent; border-color: var(--gold); box-shadow: none; color: #fff; }
.newsletter-group .btn { padding: 11px 18px; }
.newsletter-msg { display: block; margin-top: 8px; color: #C9B285; }
.footer-rating .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 4px; font-size: .85rem; }
.footer-rating span { font-size: .84rem; color: #8F877A; }
.footer-bottom {
  border-top: 1px solid rgba(201,178,133,.18);
  margin-top: clamp(40px, 4.5vw, 60px);
  padding: 20px 0; font-size: .78rem; color: #7d7466; letter-spacing: .04em;
}

/* =====================  FLOATING ACTIONS  ===================== */

.float-actions { position: fixed; right: 20px; bottom: 22px; z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.float-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.4);
}
.float-btn:hover { color: #fff; }
.float-wa { background: #25D366; }
.float-call { background: #B08D4F; }  /* original gold — kept independent of theme accent */

/* Smaller on phones — 52px circles eat too much of a small screen. */
@media (max-width: 575.98px) {
  .float-actions { right: 14px; bottom: 16px; gap: 8px; }
  .float-btn { width: 42px; height: 42px; font-size: 1.1rem; }
}

/* =====================  POPUP  ===================== */

.luxe-popup .modal-content { border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; }
.luxe-popup .popup-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background-color: rgba(255,255,255,.94); border-radius: 0;
  width: 34px; height: 34px; opacity: 1;
}
.luxe-popup .popup-img { width: 100%; max-height: 260px; object-fit: cover; }
.luxe-popup .popup-body { padding: 32px; text-align: center; }
.luxe-popup .popup-title { font-size: 1.6rem; margin-bottom: 10px; }

/* =====================  RESPONSIVE  ===================== */

@media (max-width: 1199.98px) {
  .chip-a { right: 0; } .chip-b { right: 0; }
  .hero-stamp { left: -18px; }
}

@media (max-width: 991.98px) {
  .gt-nav { padding: 12px 0; }
  .gt-nav-inner { justify-content: space-between; }
  .brand-logo { height: 44px; }
  .hero { padding: 40px 0 56px; }
  .hero-ghost { display: none; }
  .hero .col-lg-6:first-child { text-align: center; }
  .hero-kicker { font-size: .62rem; letter-spacing: .26em; }
  .hero-kicker::before { display: none; }
  .hero-sub { font-size: .8rem; letter-spacing: .2em; }
  .hero-ctas { justify-content: center; }
  .hero-trust { justify-content: center; }
  .hero-art { width: min(320px, 80vw); margin-top: 14px; margin-bottom: 10px; }
  .hero-art::before { inset: -11px; }
  .hero-art::after { inset: 11px -9px -9px -9px; }
  .hero-stamp { left: -34px; bottom: 22px; width: 108px; }
  .hero-chip { padding: 10px 14px; }
  .hero-chip .hc-num { font-size: 1.1rem; }
  .chip-a { top: 10%; right: -12px; }
  .chip-b { bottom: 6%; right: -12px; }
  .about-img-accent { right: 0; }
  .about-badge { left: 0; top: -16px; width: 100px; height: 100px; }
  .cta-band .btn { margin-top: 10px; }
  .stat-item::after { display: none; }
  .row.g-5 { --bs-gutter-x: 1.5rem; }
}

@media (max-width: 575.98px) {
  .container { padding-inline: 20px; }
  .hero-ctas .btn, .hero-ctas .btn-hero-alt { width: 100%; justify-content: center; text-align: center; }
  /* Hero arch: declutter on phones so it reads as clean as the desktop layout */
  .hero-art { width: min(300px, 82vw); margin-top: 20px; }
  .hero-stamp { display: none; }                 /* decorative stamp overlaps on small screens */
  .hero-chip { padding: 8px 12px; }
  .hero-chip .hc-num { font-size: 1rem; }
  .hero-chip .hc-lbl { font-size: .56rem; }
  .chip-a { top: 10px; right: 2px; }
  .chip-b { bottom: 10px; right: 2px; }
  .price-row { flex-wrap: wrap; gap: 4px 12px; }
  .price-row .pr-dots { display: none; }
  .price-row .pr-price { margin-left: auto; }
  .countdown .cd-box { min-width: 52px; }
  .map-frame iframe { height: 320px; }
}

@media (min-width: 1800px) {
  body { font-size: 1.05rem; }
}
