/* =============================================================
   LUMERA SPA — style.css
   Colour theme lives in the CSS variables below. Change these
   few values to re-skin the whole site. No gradients used.
============================================================= */

:root {
  /* ---- Brand colours (edit these) ---- */
  --gold: #c89b3c;
  /* primary accent (from reference)   */
  --gold-dark: #a67e28;
  /* hover / darker accent             */
  --gold-soft: #f4ead2;
  /* soft gold tint for backgrounds    */

  --ink: #15181d;
  /* near-black for dark sections      */
  --ink-2: #1e232b;
  /* dark card surface                 */

  --cream: #faf6ef;
  /* warm light section background     */
  --white: #ffffff;

  --text: #23262c;
  /* body text on light                */
  --text-muted: #697079;
  /* secondary text on light           */
  --text-light: #eef0f2;
  /* text on dark                      */
  --text-light-muted: #a9b0ba;

  --border: #e7e1d4;
  /* soft borders on light             */
  --border-dark: #2c333d;
  /* borders on dark                   */

  /* ---- Cool scheme (dark-blue "Why" + light offers) ---- */
  --navy: #12263f;
  /* dark blue section background       */
  --navy-2: #1b3350;
  /* raised surface on navy            */
  --navy-border: #2b4766;
  /* borders on navy                   */
  --navy-muted: #a9bccf;
  /* muted text on navy                */
  --cool: #f3f6fb;
  /* light cool section (no brown)      */

  --shadow-sm: 0 4px 14px rgba(21, 24, 29, .06);
  --shadow-md: 0 14px 34px rgba(21, 24, 29, .10);
  --shadow-gold: 0 10px 26px rgba(200, 155, 60, .28);

  /* ---- Type ---- */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Segoe UI", system-ui, sans-serif;

  /* ---- Rhythm ---- */
  --radius: 14px;
  --radius-lg: 22px;
  --section-pad: 96px;
  --container-max: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* =============================================================
   BASE
============================================================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  /* guard against side-scroll */
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .4em;
  letter-spacing: .2px;
}

.container {
  max-width: var(--container-max);
}

/* anchor targets clear the sticky header */
section[id],
#home {
  scroll-margin-top: 80px;
}

/* selection */
::selection {
  background: var(--gold);
  color: #fff;
}

/* keyboard focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* =============================================================
   SHARED SECTION BITS
============================================================= */
.section {
  padding: var(--section-pad) 0;
  position: relative;
}

.section--dark {
  background: var(--ink);
  color: var(--text-light);
}

.section__head {
  max-width: 680px;
  margin: 0 auto 56px;
}

.section__title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  color: var(--text);
}

.section__title--light {
  color: var(--white);
}

.section__sub {
  color: var(--text-muted);
  font-size: 1.08rem;
  margin-bottom: 0;
}

.section--dark .section__sub {
  color: var(--text-light-muted);
}

/* eyebrow label (used sparingly, not all-caps) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .5px;
  color: var(--gold-dark);
  margin-bottom: .6rem;
  padding-left: 30px;
  position: relative;
}

.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--gold);
  transform: translateY(-50%);
}

.eyebrow--light {
  color: var(--gold);
}

.lead-muted {
  font-size: 1.1rem;
  color: var(--text-muted);
}

/* arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--gold-dark);
  margin-top: 1.4rem;
  transition: gap .3s var(--ease), color .3s var(--ease);
}

.link-arrow:hover {
  gap: .9rem;
  color: var(--gold);
}

/* =============================================================
   BUTTONS  (varied styles)
============================================================= */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 50px;
  letter-spacing: .3px;
}

.btn-gold {
  background: var(--gold);
  color: #fff;
  border: 2px solid var(--gold);
  padding: .55rem 1.5rem;
  box-shadow: var(--shadow-gold);
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.btn-gold:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(200, 155, 60, .38);
}

.btn-outline-light {
  border: 2px solid rgba(255, 255, 255, .65);
  color: #fff;
  padding: .55rem 1.5rem;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.btn-outline-light:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.btn-dark-solid {
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  transition: transform .3s var(--ease), background .3s var(--ease);
}

.btn-dark-solid:hover {
  background: #000;
  color: #fff;
  transform: translateY(-3px);
}

.btn-outline-dark-solid {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease);
}

.btn-outline-dark-solid:hover {
  background: var(--ink);
  color: #fff;
}

/* =============================================================
   IMAGE PLACEHOLDER  (shown if an image file is missing)
============================================================= */
.media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-ph {
  width: 100%;
  height: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  text-align: center;
  padding: 10px;
}

.section--dark .img-ph {
  background: #262c35;
  color: var(--gold);
}

.img-ph i {
  font-size: 1.6rem;
  opacity: .8;
}

/* =============================================================
   1. TOP BAR
============================================================= */
.topbar {
  background: var(--ink);
  color: var(--text-light-muted);
  font-size: .86rem;
  padding: 8px 0;
}

.topbar__link {
  color: var(--text-light-muted);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .25s var(--ease);
}

.topbar__link:hover {
  color: var(--gold);
}

.topbar__link i {
  color: var(--gold);
}

.topbar__tag {
  font-style: italic;
  color: var(--text-light-muted);
}

.topbar__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light-muted);
  border: 1px solid var(--border-dark);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.topbar__icon:hover {
  background: var(--gold);
  color: #fff;
  transform: translateY(-2px) rotate(-6deg);
  border-color: var(--gold);
}

/* =============================================================
   2. STICKY HEADER
============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}

.site-header.is-stuck {
  box-shadow: var(--shadow-sm);
}

.site-header .navbar {
  padding-top: .7rem;
  padding-bottom: .7rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.brand__mark {
  color: var(--gold);
  font-size: 1.5rem;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: .5px;
}

.brand__thin {
  color: var(--gold);
  margin-left: 2px;
}

.navbar-nav .nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text);
  padding: .4rem .9rem;
  position: relative;
  transition: color .25s var(--ease);
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .25rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--gold-dark);
}

.navbar-nav .nav-link:hover::after {
  transform: scaleX(1);
}

.navbar-toggler {
  border: none;
  font-size: 1.6rem;
  color: var(--ink);
  padding: 0;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* =============================================================
   3. HERO
============================================================= */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: #000000ad url("../images/b1.jpg") center/cover no-repeat;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.473);
  /* flat warm-dark overlay, not a gradient */
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 0;
}

.hero__title {
  font-size: clamp(2.3rem, 1.4rem + 4vw, 4.4rem);
  color: #fff;
  margin-bottom: 1.3rem;
}

.hero__title-accent {
  color: var(--gold);
  font-style: italic;
}

.hero__lead {
  font-size: clamp(1.08rem, .92rem + .6vw, 1.45rem);
  font-weight: 500;
  color: var(--gold);
  max-width: 48ch;
  margin: 0 auto 1.8rem;
  line-height: 1.5;
}

/* centred brand icon */
.hero__icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(200, 155, 60, .16);
  border: 1px solid rgba(200, 155, 60, .5);
  color: var(--gold);
  font-size: 1.9rem;
}

.hero__icon i {
  animation: floaty 5s ease-in-out infinite;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* big primary pill (dark text on gold, like the reference) */
.btn-hero {
  background: var(--gold);
  color: var(--ink);
  border: 2px solid var(--gold);
  font-family: var(--font-body);
  font-size: 1.14rem;
  font-weight: 600;
  padding: .95rem 2.6rem;
  border-radius: 50px;
  box-shadow: var(--shadow-gold);
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.btn-hero:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(200, 155, 60, .42);
}

.hero__sub-cta {
  margin-top: 1.1rem;
}

.hero__call {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #f1ece1;
  font-weight: 500;
  font-size: 1.02rem;
  transition: color .25s var(--ease);
}

.hero__call i {
  color: var(--gold);
}

.hero__call:hover {
  color: var(--gold);
}

.hero__note {
  margin-top: 1.9rem;
  color: #efe9dc;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

/* hero entrance (load animation, not scroll reveal) */
.hero__title,
.hero__lead,
.hero__icon,
.hero__cta,
.hero__sub-cta,
.hero__note {
  opacity: 0;
  transform: translateY(26px);
  animation: heroUp .8s var(--ease) forwards;
}

.hero__lead {
  animation-delay: .12s;
}

.hero__icon {
  animation-delay: .24s;
}

.hero__cta {
  animation-delay: .36s;
}

.hero__sub-cta {
  animation-delay: .46s;
}

.hero__note {
  animation-delay: .56s;
}

@keyframes heroUp {
  to {
    opacity: 1;
    transform: none;
  }
}

/* scroll cue */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: 26px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 20px;
  z-index: 2;
}

.hero__scroll span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  background: var(--gold);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 1.6s infinite;
}

@keyframes scrollDot {
  0% {
    opacity: 0;
    top: 8px
  }

  40% {
    opacity: 1
  }

  80% {
    opacity: 0;
    top: 22px
  }

  100% {
    opacity: 0
  }
}

/* floating decorative icons */
.float-ico {
  position: absolute;
  z-index: 1;
  color: rgba(200, 155, 60, .35);
  pointer-events: none;
}

.float-ico--1 {
  top: 18%;
  right: 8%;
  font-size: 3.4rem;
  animation: floaty 6s ease-in-out infinite;
}

.float-ico--2 {
  bottom: 20%;
  left: 6%;
  font-size: 2.6rem;
  animation: floaty 7s ease-in-out infinite .6s;
}

.float-ico--3 {
  top: 30%;
  left: 12%;
  font-size: 2rem;
  animation: floaty 5.5s ease-in-out infinite 1.1s;
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0) rotate(0)
  }

  50% {
    transform: translateY(-16px) rotate(6deg)
  }
}

/* =============================================================
   4. MARQUEE  (continuous, never pauses)
============================================================= */
.marquee {
  background: var(--gold);
  color: #fff;
  overflow: hidden;
  padding: 14px 0;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  font-style: italic;
  padding: 0 2.2rem;
  position: relative;
}

.marquee__item i {
  font-size: .8rem;
  font-style: normal;
  opacity: .85;
}

@keyframes marquee {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* =============================================================
   5. ABOUT
============================================================= */
.about {
  background: var(--cream);
}

.about__visual {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 24px 0;
}

/* soft arch outline, offset behind the photo, for depth */
.about__visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 82%;
  height: 88%;
  border: 1.5px solid rgba(200, 155, 60, .45);
  border-radius: 180px 180px 14px 14px;
}

/* frames keep their shape even while the photo is still a placeholder */
.about__frame {
  position: relative;
  overflow: hidden;
}

.about__frame .media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.about__frame:hover .media {
  transform: scale(1.04);
}

.about__frame--main {
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 190px 190px 16px 16px;
  /* round on top, normal at the bottom */
  box-shadow: var(--shadow-md);
}

.about__frame--sm {
  position: absolute;
  z-index: 2;
  right: -6px;
  bottom: -18px;
  width: 42%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 6px solid var(--cream);
  box-shadow: var(--shadow-md);
}

.about__badge {
  position: absolute;
  z-index: 3;
  top: 34px;
  left: -16px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 12px 18px;
  text-align: center;
  border: 1px solid var(--border);
}

.about__badge-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold-dark);
  line-height: 1;
}

.about__badge-label {
  font-size: .78rem;
  color: var(--text-muted);
}

.about__badge-label i {
  color: var(--gold);
}

/* stat counters */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 2rem 0 .5rem;
}

.stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 10px;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.stat:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-sm);
}

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold-dark);
  line-height: 1;
}

.stat__label {
  font-size: .82rem;
  color: var(--text-muted);
}

/* =============================================================
   6. OUR MENU  — zig-zag treatment list
============================================================= */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 48px;
}

.menu-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* zig-zag */

/* image side — thin gold frame (echoes the reference card borders) */
.menu-item__media {
  flex: 0 0 46%;
  border: 1px solid rgba(200, 155, 60, .55);
  border-radius: var(--radius-lg);
  padding: 10px;
  background: var(--ink-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.menu-item__media .media {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 6px);
  transition: transform .6s var(--ease);
}

.menu-item__media:hover .media {
  transform: scale(1.05);
}

/* text side */
.menu-item__body {
  flex: 1;
}

.menu-item__num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.menu-item__title {
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
  margin-bottom: .6rem;
}

.menu-item__text {
  color: var(--text-light-muted);
  font-size: 1.02rem;
  max-width: 46ch;
  margin-bottom: 0;
}

/* stack on mobile */
@media (max-width: 767.98px) {
  .menu-list {
    gap: 44px;
  }

  .menu-item,
  .menu-item:nth-child(even) {
    flex-direction: column;
    gap: 22px;
    text-align: center;
  }

  .menu-item__media {
    flex: none;
    width: 100%;
  }

  .menu-item__media .media {
    height: 230px;
  }

  .menu-item__text {
    margin-left: auto;
    margin-right: auto;
  }
}


/* dark-blue section helper (shared) */
.section--navy {
  background: var(--navy);
  color: var(--text-light);
}

.section--navy .section__sub {
  color: var(--navy-muted);
}

/* =============================================================
   7. WHY CHOOSE US  — centred card grid on dark blue (3 + 2)
============================================================= */
.why-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  max-width: 1020px;
  margin: 0 auto;
}

.why-card {
  flex: 1 1 280px;
  max-width: 320px;
  background: var(--navy-2);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-lg);
  padding: 34px 26px 30px;
  text-align: center;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.why-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.why-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  color: var(--gold);
  background: rgba(200, 155, 60, .15);
  border: 1px solid rgba(200, 155, 60, .35);
  margin-bottom: 1.1rem;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.why-card:hover .why-card__icon {
  background: var(--gold);
  color: #fff;
}

.why-card__title {
  color: #fff;
  font-size: 1.35rem;
  margin: 0 0 .45rem;
}

.why-card__text {
  color: var(--navy-muted);
  font-size: .96rem;
  margin: 0;
}

/* =============================================================
   7b. OFFERS  — exclusive deals (light, cool — no brown)
============================================================= */
.offers {
  background: var(--cool);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.offer-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #e4e9f1;
  border-radius: var(--radius-lg);
  padding: 38px 26px 30px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.offer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}

.offer-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.offer-card:hover::before {
  transform: scaleX(1);
}

.offer-card__icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
  background: var(--gold);
  box-shadow: var(--shadow-gold);
  margin-bottom: 1.1rem;
}

.offer-card__off {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold-dark);
  line-height: 1;
}

.offer-card__for {
  display: block;
  color: var(--text-muted);
  font-size: 1rem;
  margin: .35rem 0 1.3rem;
}

.offer-card__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  padding: .55rem 1.3rem;
  border-radius: 50px;
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.offer-card__btn:hover {
  background: var(--gold-dark);
  color: #fff;
  transform: translateY(-2px);
}

.offers__note {
  text-align: center;
  max-width: 720px;
  margin: 42px auto 0;
  color: var(--text-muted);
  font-size: .98rem;
}

.offers__note i {
  color: var(--gold-dark);
}

.offers__note strong {
  color: var(--text);
}

/* =============================================================
   8. HOW IT WORKS — timeline
============================================================= */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
}

/* connecting dashed line behind the steps (desktop) */
.timeline::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 16%;
  right: 16%;
  border-top: 2px dashed var(--border-dark);
  z-index: 0;
}

.tl-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.tl-step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--gold);
  box-shadow: var(--shadow-gold);
  margin-bottom: 1.2rem;
}

.tl-step__media {
  height: 190px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-dark);
  margin-bottom: 1.1rem;
}

.tl-step__media .media {
  transition: transform .6s var(--ease);
}

.tl-step:hover .tl-step__media .media {
  transform: scale(1.06);
}

.tl-step__title {
  color: #fff;
  font-size: 1.5rem;
}

.tl-step__text {
  color: var(--text-light-muted);
  font-size: .96rem;
  max-width: 34ch;
  margin: 0 auto;
}

/* =============================================================
   10. TESTIMONIAL CAROUSEL
============================================================= */
.reviews {
  background: var(--cream);
}

.carousel {
  max-width: 820px;
  margin: 0 auto;
}

.carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.carousel__track {
  display: flex;
  transition: transform .6s var(--ease);
}

.carousel__slide {
  flex: 0 0 100%;
  padding: 6px;
}

.review {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 40px 42px;
  margin: 0;
  position: relative;
  text-align: center;
}

.review__quote {
  font-size: 3rem;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: .4rem;
}

.review__text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 1.6rem;
}

.review__by {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-align: left;
}

.review__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
}

.review__by strong {
  display: block;
  color: var(--ink);
}

.review__by small {
  color: var(--text-muted);
}

.review__stars {
  margin-top: 1rem;
  color: var(--gold);
  letter-spacing: 3px;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1.8rem;
}

.carousel__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: transparent;
  color: var(--gold-dark);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.carousel__btn:hover {
  background: var(--gold);
  color: #fff;
  transform: scale(1.08);
}

.carousel__dots {
  display: flex;
  gap: .5rem;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.carousel__dot.is-active {
  background: var(--gold);
  transform: scale(1.3);
}

/* =============================================================
   11. CTA BAND
============================================================= */
.cta-band {
  background: var(--gold);
  color: var(--ink);
  padding: 56px 0;
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta-band__title {
  color: var(--ink);
  font-size: 2.3rem;
  margin-bottom: .2rem;
}

.cta-band__text {
  margin: 0;
  font-size: 1.1rem;
  color: #4a3c15;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* =============================================================
   12. CONTACT
============================================================= */
.contact {
  background: var(--white);
}

.info-panel {
  background: var(--ink);
  color: var(--text-light);
  border-radius: var(--radius-lg);
  padding: 34px;
}

.info-panel__title {
  color: #fff;
  font-size: 1.8rem;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
}

.info-list li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-dark);
  color: var(--text-light-muted);
  font-size: .96rem;
}

.info-list li a {
  color: var(--text-light-muted);
  transition: color .25s var(--ease);
}

.info-list li a:hover {
  color: var(--gold);
}

.info-list i {
  color: var(--gold);
  font-size: 1.1rem;
  margin-top: 3px;
}

.info-panel__social {
  display: flex;
  gap: .7rem;
  margin-bottom: 1.4rem;
}

.info-soc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark);
  color: var(--text-light-muted);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.info-soc:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  transform: translateY(-3px);
}

.info-panel__map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-dark);
}

.info-panel__map iframe {
  width: 100%;
  height: 190px;
  border: 0;
  display: block;
  filter: grayscale(.2);
}

.contact-form {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px;
}

.form-label {
  font-weight: 500;
  font-size: .92rem;
  margin-bottom: .35rem;
  color: var(--text);
}

.form-label .opt {
  color: var(--text-muted);
  font-weight: 400;
}

.contact-form .form-control,
.contact-form .form-select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem .9rem;
  background: #fff;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 155, 60, .18);
}

.form-status {
  font-size: .92rem;
  font-weight: 500;
}

.form-status.ok {
  color: #1f8a4c;
}

.form-status.err {
  color: #c0392b;
}

/* =============================================================
   13. FOOTER
============================================================= */
/* dark "explore cities" band */
.footer__cities {
  background: var(--ink);
  color: var(--text-light-muted);
  padding: 62px 0;
}

.footer__cities-title {
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .8rem;
}

.footer__cities-title i {
  color: var(--gold);
}

.footer__cities-lead {
  color: var(--text-light-muted);
  max-width: 640px;
  margin: 0 auto 1.4rem;
}

.footer__cities-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: .5rem;
  max-width: 860px;
  margin: 0 auto 1.4rem;
}

.footer__cities-list span {
  color: var(--gold);
  font-weight: 600;
  padding: 0 14px;
  line-height: 1.3;
  border-right: 1px solid var(--border-dark);
}

.footer__cities-list span:last-child {
  border-right: none;
}

.footer__cities-list span.muted {
  color: var(--text-light-muted);
  font-weight: 400;
  font-style: italic;
}

.footer__cities-cta {
  margin: 0;
  color: var(--text-light-muted);
  font-size: .98rem;
}

.footer__cities-cta a {
  color: var(--gold);
  text-decoration: underline;
  transition: color .25s var(--ease);
}

.footer__cities-cta a:hover {
  color: #fff;
}

/* light legal bottom (no brown) */
.footer__legal {
  background: #f5f7fa;
  color: var(--text-muted);
  padding: 30px 0;
}

.footer__copy {
  color: var(--text);
  font-size: .92rem;
  margin: 0 auto .7rem;
  max-width: 900px;
}

.footer__disclaimer {
  font-size: .82rem;
  line-height: 1.65;
  max-width: 1000px;
  margin: 0 auto 1.1rem;
}

.footer__links-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__links-row a {
  color: var(--gold-dark);
  font-size: .9rem;
  font-weight: 500;
  padding: 0 14px;
  border-right: 1px solid var(--border);
  transition: color .25s var(--ease);
}

.footer__links-row a:last-child {
  border-right: none;
}

.footer__links-row a:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* =============================================================
   FLOATING BUTTONS
============================================================= */
.fab {
  position: fixed;
  bottom: 24px;
  z-index: 1040;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease);
}

.fab:hover {
  transform: translateY(-4px) scale(1.06);
  color: #fff;
}

.fab--whatsapp {
  left: 24px;
  background: #25d366;
  animation: pulse 2.4s infinite;
}

.fab--call {
  right: 24px;
  background: var(--gold);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
  }

  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.to-top {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 1040;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--gold-dark);
}

/* =============================================================
   SCROLL-REVEAL
============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  /* safety net: if script.js fails to load, reveal on its own after 3.5s */
  animation: revealSafety .6s var(--ease) 3.5s forwards;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes revealSafety {
  to {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 991.98px) {
  :root {
    --section-pad: 68px;
  }

  .site-header .navbar-collapse {
    background: var(--white);
    border-top: 1px solid var(--border);
    margin-top: .7rem;
    padding: 10px 6px;
    border-radius: 12px;
  }

  .navbar-nav .nav-link::after {
    display: none;
  }

  .navbar-nav .nav-item.ms-lg-3 {
    margin-top: .4rem;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .offer-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .timeline {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .timeline::before {
    display: none;
  }

  .about__visual {
    padding-right: 0;
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: .98rem;
  }

  .hero {
    min-height: 82vh;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .review {
    padding: 30px 22px;
  }

  .review__text {
    font-size: 1.2rem;
  }

  .cta-band__inner {
    flex-direction: column;
    text-align: center;
  }

  .cta-band__actions {
    width: 100%;
    justify-content: center;
  }

  .info-panel,
  .contact-form {
    padding: 24px;
  }

  .fab {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }
}

/* =============================================================
   REDUCED MOTION
============================================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  /* marquee is a core brand element — keep it scrolling regardless */
  .marquee__track {
    animation: marquee 32s linear infinite !important;
  }
}