/* ============================================================
   AMI'S BEAUTY & AESTHETICS — MASTER STYLESHEET
   Cormorant Garamond (display) + DM Sans (body)
   Palette: Ivory · Gold · Blush · Charcoal
   ============================================================ */

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --clr-gold: #C9A96E;
  --clr-gold-lt: #DFC08A;
  --clr-gold-dk: #A8854E;
  --clr-ivory: #FAF7F2;
  --clr-ivory-2: #F4EBE0;
  --clr-ivory-3: #EBE0D2;
  --clr-blush: #E8D5C4;
  --clr-dark: #16120D;
  --clr-dark-2: #201C15;
  --clr-charcoal: #2A2418;
  --clr-mid: #4C4030;
  --clr-muted: #897566;
  --clr-white: #FFFFFF;

  /* Semantic */
  --border: rgba(201, 169, 110, .14);
  --border-2: rgba(201, 169, 110, .26);
  --border-3: rgba(201, 169, 110, .45);

  /* Typography */
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);

  /* Shadows */
  --sh-sm: 0 2px 12px rgba(22, 18, 13, .07);
  --sh-md: 0 6px 32px rgba(22, 18, 13, .11);
  --sh-lg: 0 16px 64px rgba(22, 18, 13, .16);
  --sh-xl: 0 24px 80px rgba(22, 18, 13, .22);
}

/* ─── RESET ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px
}

body {
  font-family: var(--ff-body);
  color: var(--clr-mid);
  background: var(--clr-ivory);
  line-height: 1.7;
  overflow-x: hidden
}

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

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

ul,
ol {
  list-style: none
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
  line-height: inherit
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

svg {
  flex-shrink: 0
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
h1,
h2,
h3,
h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 1.12;
  color: var(--clr-dark)
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem)
}

h2 {
  font-size: clamp(2rem, 4vw, 3.2rem)
}

h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem)
}

h4 {
  font-size: 1.2rem
}

p {
  color: var(--clr-muted);
  line-height: 1.82
}

strong {
  color: var(--clr-dark);
  font-weight: 600
}

em {
  font-style: italic
}

a {
  transition: color .2s
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 36px
}

.wrap-sm {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 36px
}

.wrap-xs {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 36px
}

.section {
  padding: 108px 0
}

.section-md {
  padding: 72px 0
}

.section-sm {
  padding: 52px 0
}

/* ─── EYEBROW LABEL ──────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 18px
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--clr-gold);
  flex-shrink: 0
}

.eyebrow.center {
  justify-content: center
}

.eyebrow.center::before {
  display: none
}

.eyebrow.light {
  color: rgba(201, 169, 110, .65)
}

.eyebrow.light::before {
  background: rgba(201, 169, 110, .45)
}

/* ─── SECTION HEADING BLOCK ──────────────────────────────── */
.sec-head {
  margin-bottom: 64px
}

.sec-head h2 {
  margin-bottom: 14px
}

.sec-head .sub {
  font-size: .96rem;
  max-width: 540px
}

.sec-head.center {
  text-align: center
}

.sec-head.center .sub {
  margin: 0 auto
}

.sec-head.dark h2 {
  color: var(--clr-white)
}

.sec-head.dark .sub {
  color: rgba(255, 255, 255, .5)
}

/* ─── DIVIDER LINE ───────────────────────────────────────── */
.gold-line {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--clr-gold);
  margin: 20px auto 0
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--ff-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 3px;
  border: 1.5px solid transparent;
  transition: all .28s var(--ease);
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden
}

/* Shine sweep on hover */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .18), transparent);
  transition: left .45s var(--ease);
  pointer-events: none
}

.btn:hover::after {
  left: 140%
}

.btn-gold {
  background: var(--clr-gold);
  color: #fff;
  border-color: var(--clr-gold)
}

.btn-gold:hover {
  background: var(--clr-gold-dk);
  border-color: var(--clr-gold-dk);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(168, 133, 78, .32)
}

.btn-outline {
  background: transparent;
  color: var(--clr-gold);
  border-color: var(--clr-gold)
}

.btn-outline:hover {
  background: var(--clr-gold);
  color: #fff;
  transform: translateY(-1px)
}

.btn-dark {
  background: var(--clr-dark);
  color: #fff;
  border-color: var(--clr-dark)
}

.btn-dark:hover {
  background: var(--clr-charcoal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 18, 13, .25)
}

.btn-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45)
}

.btn-white:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .75)
}

.btn-ghost {
  background: transparent;
  color: var(--clr-mid);
  border-color: var(--border-2)
}

.btn-ghost:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold)
}

.btn-sm {
  font-size: 11.5px;
  padding: 10px 22px;
  letter-spacing: .5px
}

.btn-lg {
  font-size: 13.5px;
  padding: 16px 40px;
  letter-spacing: .8px
}

.btn-xl {
  font-size: 14px;
  padding: 18px 48px;
  letter-spacing: .9px
}

.btn-full {
  width: 100%;
  justify-content: center
}

/* ─── TOPBAR ─────────────────────────────────────────────── */
.topbar {
  background: var(--clr-dark-2);
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.topbar-left {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .32);
  letter-spacing: .5px
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px
}

.topbar-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--clr-gold);
  transition: color .2s
}

.topbar-phone:hover {
  color: #fff
}

/* ─── HEADER ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250, 247, 242, .96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .35s, border-color .35s
}

.site-header.scrolled {
  box-shadow: 0 4px 36px rgba(22, 18, 13, .1);
  border-bottom-color: var(--border-2)
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 72px
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0
}

.logo-image {
  height: 50px;
  width: auto
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1
}

.logo-name {
  font-family: var(--ff-display);
  font-size: 1.55rem;
  color: var(--clr-dark);
  line-height: 1.1;
  letter-spacing: .3px
}

.logo-tagline {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-top: 2px
}

/* Desktop nav */
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 0
}

.main-nav a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-mid);
  border-radius: 6px;
  transition: color .2s, background .2s
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--clr-gold)
}

/* Dropdown */
.has-dropdown {
  position: relative
}

.nav-dropdown {
  position: absolute;
  top: calc(100%+12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--sh-lg);
  padding: 7px;
  opacity: 0;
  visibility: hidden;
  transition: all .24s var(--ease);
  z-index: 300;
  pointer-events: none
}

.has-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto
}

.nav-dropdown a {
  display: block;
  padding: 10px 15px;
  font-size: 13px;
  color: var(--clr-mid);
  border-radius: 7px;
  transition: background .15s, color .15s
}

.nav-dropdown a:hover {
  background: var(--clr-ivory-2);
  color: var(--clr-gold)
}

/* Header right */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px
}

.header-call {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--clr-ivory-2);
  color: var(--clr-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  flex-shrink: 0
}

.header-call:hover {
  background: var(--clr-blush)
}

.header-book-btn {
  font-size: 12.5px;
  padding: 10px 22px;
  letter-spacing: .6px
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 9px;
  flex-shrink: 0
}

.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--clr-dark);
  border-radius: 2px;
  transition: all .3s var(--ease-out)
}

.hamburger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg)
}

.hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0)
}

.hamburger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg)
}

/* ─── MOBILE MENU DRAWER ─────────────────────────────────── */
.mob-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 100vw);
  background: #fff;
  z-index: 400;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .38s var(--ease-out);
  box-shadow: var(--sh-xl)
}

.mob-drawer.is-open {
  transform: translateX(0)
}

.mob-scrim {
  position: fixed;
  inset: 0;
  background: rgba(22, 18, 13, .55);
  z-index: 399;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
  backdrop-filter: blur(3px)
}

.mob-scrim.is-open {
  opacity: 1;
  visibility: visible
}

/* Drawer header */
.mob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border)
}

.mob-brand-name {
  font-family: var(--ff-display);
  font-size: 1.45rem;
  color: var(--clr-dark)
}

.mob-brand-tag {
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-top: 1px
}

.mob-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-ivory-2);
  color: var(--clr-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: background .2s, color .2s
}

.mob-close-btn:hover {
  background: var(--clr-blush);
  color: var(--clr-dark)
}

/* Drawer nav */
.mob-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0 0
}

.mob-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 500;
  color: var(--clr-dark);
  border-bottom: 1px solid rgba(232, 213, 196, .28);
  transition: color .15s, background .15s
}

.mob-nav-link:hover {
  color: var(--clr-gold);
  background: var(--clr-ivory)
}

.mob-subnav {
  background: var(--clr-ivory-2);
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s var(--ease)
}

.mob-subnav.is-open {
  max-height: 400px
}

.mob-subnav a {
  display: block;
  padding: 11px 26px 11px 40px;
  font-size: 13.5px;
  color: var(--clr-muted);
  border-bottom: 1px solid rgba(232, 213, 196, .2);
  transition: color .15s
}

.mob-subnav a:hover {
  color: var(--clr-gold)
}

.mob-toggle-icon {
  transition: transform .28s var(--ease);
  color: var(--clr-muted);
  width: 20px;
  height: 20px
}

.mob-nav-link.is-open .mob-toggle-icon {
  transform: rotate(180deg)
}

/* Drawer footer */
.mob-foot {
  padding: 20px 26px 32px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px
}

.mob-foot .btn {
  padding: 14px;
  font-size: 13px
}

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: flex-end
}

/* Background image */
.hero-bg {
  position: absolute;
  inset: 0;
  will-change: transform
}

.hero-bg img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: center 30%;
  transform: translateY(0);
  will-change: transform
}

/* Gradient overlays */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(22, 18, 13, .85) 0%, rgba(22, 18, 13, .4) 60%, rgba(22, 18, 13, .2) 100%),
    linear-gradient(to top, rgba(22, 18, 13, .95) 0%, rgba(22, 18, 13, .0) 50%)
}

/* Content */
.hero-body {
  position: relative;
  z-index: 2;
  padding: 80px 0;
  max-width: 900px
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 22px
}

.hero-kicker::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--clr-gold)
}

.hero h1 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.8vw, 4.4rem);
  color: #fff;
  line-height: 1.05;
  margin-bottom: 22px;
  white-space: nowrap
}

.hero h1 em {
  color: var(--clr-gold);
  font-style: italic
}

.hero-lead {
  font-size: .97rem;
  color: rgba(255, 255, 255, .62);
  max-width: 620px;
  line-height: 1.85;
  margin-bottom: 38px
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 52px
}

/* Trust pills */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 24px
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .52);
  font-weight: 400;
  letter-spacing: .3px
}

.hero-trust-item svg {
  color: var(--clr-gold)
}

/* Scroll cue — bottom center */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35)
}

.hero-scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(201, 169, 110, .55));
  animation: scroll-cue 2s var(--ease) infinite
}

@keyframes scroll-cue {
  0% {
    transform: scaleY(0);
    transform-origin: top
  }

  50% {
    transform: scaleY(1);
    transform-origin: top
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom
  }
}

/* ─── TICKER STRIP ───────────────────────────────────────── */
.ticker {
  background: var(--clr-gold);
  overflow: hidden;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 35s linear infinite
}

.ticker-track:hover {
  animation-play-state: paused
}

@keyframes ticker {
  0% {
    transform: translateX(0)
  }

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

.ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 36px;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff
}

.ticker-sep {
  opacity: .5;
  font-size: 8px
}

/* ─── INTRO STRIP (3-col feature) ────────────────────────── */
.intro-strip {
  background: #fff;
  border-bottom: 1px solid var(--border)
}

.intro-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--border)
}

.intro-feature {
  padding: 36px 32px;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: background .25s
}

.intro-feature:hover {
  background: var(--clr-ivory)
}

.intro-feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(201, 169, 110, .15), rgba(201, 169, 110, .06));
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-gold);
  font-size: 1.3rem
}

.intro-feature-title {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  color: var(--clr-dark);
  margin-bottom: 5px;
  line-height: 1.2
}

.intro-feature-text {
  font-size: .845rem;
  line-height: 1.7
}

/* ─── TREATMENTS GRID ────────────────────────────────────── */
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 3px;
  background: rgba(22, 18, 13, .08)
}

.t-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--clr-dark)
}

.t-card--tall {
  grid-row: span 2
}

.t-card img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  opacity: .78;
  transition: opacity .6s var(--ease), transform .8s var(--ease);
  will-change: transform
}

.t-card:hover img {
  opacity: .55;
  transform: scale(1.07)
}

.t-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 18, 13, .94) 0%, rgba(22, 18, 13, .25) 55%, transparent 100%);
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.t-card-tag {
  font-size: 9.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 7px
}

.t-card-title {
  font-family: var(--ff-display);
  font-size: 1.45rem;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.15
}

.t-card-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.6;
  margin-bottom: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease)
}

.t-card:hover .t-card-desc {
  max-height: 80px
}

.t-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--clr-gold);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease) .05s
}

.t-card:hover .t-card-cta {
  max-height: 40px;
  margin-top: 12px
}

.t-card-cta svg {
  transition: transform .2s
}

.t-card:hover .t-card-cta svg {
  transform: translateX(5px)
}

/* ─── ABOUT / AMI SPLIT ──────────────────────────────────── */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px
}

.split-media {
  overflow: hidden;
  position: relative
}

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

.split-section:hover .split-media img {
  transform: scale(1.03)
}

.split-content {
  padding: 88px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff
}

.cred-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 30px
}

.cred-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--clr-ivory-2);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  padding: 6px 15px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--clr-mid)
}

.cred-pill::before {
  content: '✓';
  color: var(--clr-gold);
  font-weight: 700
}

/* ─── STATS BAR ──────────────────────────────────────────── */
.stats-section {
  background: var(--clr-dark);
  padding: 72px 0
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .07)
}

.stat-cell {
  padding: 44px 32px;
  text-align: center;
  background: rgba(255, 255, 255, .02);
  transition: background .3s
}

.stat-cell:hover {
  background: rgba(201, 169, 110, .06)
}

.stat-val {
  font-family: var(--ff-display);
  font-size: 3.4rem;
  color: #fff;
  line-height: 1;
  font-weight: 400;
  margin-bottom: 10px
}

.stat-val sup {
  font-size: 1.6rem;
  color: var(--clr-gold);
  vertical-align: super;
  margin-left: 2px
}

.stat-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .38)
}

/* ─── WHY CHOOSE ─────────────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px
}

.why-card {
  padding: 36px 26px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
  border-radius: 4px
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  background: #fff
}

.why-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(201, 169, 110, .13), rgba(201, 169, 110, .04));
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--clr-gold);
  transition: background .3s, border-color .3s
}

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

.why-card h3 {
  font-size: 1.1rem;
  font-family: var(--ff-display);
  color: var(--clr-dark);
  margin-bottom: 10px
}

.why-card p {
  font-size: .875rem;
  line-height: 1.78
}

/* ─── OFFERS CARDS ───────────────────────────────────────── */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.offer-card {
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease), box-shadow .35s
}

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

.offer-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--clr-ivory-3)
}

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

.offer-card:hover .offer-card-img img {
  transform: scale(1.06)
}

.offer-card-body {
  padding: 24px
}

.offer-tag {
  font-size: 9.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 8px
}

.offer-title {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  color: var(--clr-dark);
  margin-bottom: 10px;
  line-height: 1.2
}

.offer-desc {
  font-size: .875rem;
  line-height: 1.75;
  margin-bottom: 18px
}

/* ─── GALLERY ────────────────────────────────────────────── */
.gallery-grid {
  columns: 3;
  column-gap: 14px
}

.gal-item {
  break-inside: avoid;
  margin-bottom: 14px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  position: relative
}

.gal-item img {
  width: 100%;
  display: block;
  transition: transform .55s var(--ease)
}

.gal-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(22, 18, 13, 0);
  transition: background .3s;
  border-radius: 6px
}

.gal-item:hover img {
  transform: scale(1.06)
}

.gal-item:hover::after {
  background: rgba(22, 18, 13, .2)
}

/* ─── REVIEWS ────────────────────────────────────────────── */
.reviews-section {
  background: var(--clr-dark-2);
  overflow: hidden
}

.reviews-track-outer {
  margin-top: 56px
}

.reviews-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 36px 28px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 36px
}

.reviews-track::-webkit-scrollbar {
  display: none
}

.review-card {
  flex: 0 0 390px;
  scroll-snap-align: start;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 34px;
  transition: background .3s, border-color .3s
}

.review-card:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(201, 169, 110, .22)
}

.review-stars {
  color: var(--clr-gold);
  letter-spacing: 3px;
  font-size: .88rem;
  margin-bottom: 16px
}

.review-text {
  font-size: .9rem;
  color: rgba(255, 255, 255, .58);
  line-height: 1.88;
  font-style: italic;
  margin-bottom: 24px
}

.review-author {
  display: flex;
  align-items: center;
  gap: 14px
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(201, 169, 110, .14);
  border: 1.5px solid rgba(201, 169, 110, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 1.1rem;
  color: var(--clr-gold)
}

.review-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff
}

.review-meta {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .32);
  margin-top: 2px
}

/* Controls */
.reviews-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 0 0
}

.r-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .22s;
  cursor: pointer
}

.r-btn:hover {
  background: var(--clr-gold);
  color: #fff;
  border-color: var(--clr-gold)
}

.r-dots {
  display: flex;
  gap: 9px
}

.r-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .28s
}

.r-dot.on {
  background: var(--clr-gold);
  width: 22px;
  border-radius: 4px
}

/* Rating summary */
.rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 60px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, .07)
}

.rating-big {
  text-align: center
}

.rating-num {
  font-family: var(--ff-display);
  font-size: 4rem;
  color: #fff;
  line-height: 1
}

.rating-stars-row {
  color: var(--clr-gold);
  font-size: 1.3rem;
  letter-spacing: 4px;
  margin: 6px 0 4px
}

.rating-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .35)
}

.rating-divider {
  width: 1px;
  height: 70px;
  background: rgba(255, 255, 255, .1)
}

.rating-cta-text {
  font-size: .9rem;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 16px;
  max-width: 280px
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-list {
  border-top: 1px solid var(--border)
}

.faq-item {
  border-bottom: 1px solid var(--border)
}

.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  font-size: .97rem;
  font-weight: 500;
  color: var(--clr-dark);
  text-align: left;
  gap: 16px;
  background: none;
  cursor: pointer;
  transition: color .2s
}

.faq-btn:hover {
  color: var(--clr-gold)
}

.faq-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--clr-ivory-2);
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--clr-gold);
  transition: transform .32s var(--ease-out), background .2s, color .2s, border-color .2s
}

.faq-item.open .faq-btn {
  color: var(--clr-gold)
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--clr-gold);
  color: #fff;
  border-color: var(--clr-gold)
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease)
}

.faq-item.open .faq-panel {
  grid-template-rows: 1fr
}

.faq-panel-inner {
  overflow: hidden
}

.faq-answer {
  padding: 0 36px 22px 0;
  font-size: .9rem;
  color: var(--clr-muted);
  line-height: 1.85
}

/* ─── SERVICE LIST ───────────────────────────────────────── */
.service-list {
  border-top: 1px solid var(--border)
}

.service-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 48px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: background .2s;
}

.service-row:hover {
  background: rgba(201, 169, 110, .025)
}

.service-name {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  color: var(--clr-dark);
  margin-bottom: 10px
}

.service-desc {
  font-size: .9rem;
  line-height: 1.82;
  margin-bottom: 14px
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.service-tag {
  background: var(--clr-ivory-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 13px;
  font-size: 11px;
  color: var(--clr-mid)
}

.service-action {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
  min-width: 140px
}

/* ─── PAGE BANNER ────────────────────────────────────────── */
.page-banner {
  background: var(--clr-dark);
  padding: 92px 0 64px;
  position: relative;
  overflow: hidden
}

.page-banner-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 50%, rgba(201, 169, 110, .07) 0%, transparent 60%)
}

.page-banner .wrap {
  position: relative;
  z-index: 1
}

.page-banner h1 {
  color: #fff;
  margin-bottom: 12px
}

.page-banner-sub {
  color: rgba(255, 255, 255, .45);
  font-size: .97rem;
  max-width: 520px
}

/* ─── CTA BAND ───────────────────────────────────────────── */
.cta-band {
  background: var(--clr-dark);
  text-align: center
}

.cta-band .eyebrow.center {
  color: rgba(201, 169, 110, .6)
}

.cta-band h2 {
  color: #fff;
  margin-bottom: 16px
}

.cta-band p {
  color: rgba(255, 255, 255, .48);
  max-width: 480px;
  margin: 0 auto 34px
}

.cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center
}

/* ─── CONTACT ────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 68px;
  align-items: start
}

.info-group {
  margin-bottom: 32px
}

.info-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--clr-ivory-2);
  color: var(--clr-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px
}

.info-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--clr-gold);
  margin-bottom: 6px
}

.info-val {
  font-size: .97rem;
  color: var(--clr-dark);
  line-height: 1.7
}

.info-val a:hover {
  color: var(--clr-gold)
}

.hours-list {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.hour-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: .875rem
}

.hour-row span:first-child {
  color: var(--clr-muted);
  min-width: 100px
}

.hour-row span:last-child {
  font-weight: 500;
  color: var(--clr-dark)
}

/* ─── ENQUIRY FORM ───────────────────────────────────────── */
.enquiry-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 52px;
  align-items: start
}

.form-card {
  background: #fff;
  border-radius: 10px;
  padding: 44px;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm)
}

.form-field {
  margin-bottom: 20px
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px
}

label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--clr-dark);
  margin-bottom: 7px;
  letter-spacing: .3px
}

label .req {
  color: var(--clr-gold)
}

.inp,
.sel,
.txa {
  width: 100%;
  padding: 13px 16px;
  background: var(--clr-ivory);
  border: 1.5px solid var(--border-2);
  border-radius: 6px;
  font-size: .9rem;
  color: var(--clr-dark);
  outline: none;
  transition: border-color .22s, box-shadow .22s;
  -webkit-appearance: none;
  appearance: none
}

.inp:focus,
.sel:focus,
.txa:focus {
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, .1), 0 1px 4px rgba(22, 18, 13, .05)
}

.txa {
  min-height: 130px;
  resize: vertical
}

.check-group {
  display: flex;
  gap: 11px;
  align-items: flex-start
}

.check-group input[type=checkbox] {
  margin-top: 3px;
  accent-color: var(--clr-gold);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer
}

.check-group label {
  margin: 0;
  font-size: .83rem;
  color: var(--clr-muted);
  font-weight: 400;
  cursor: pointer
}

.check-group a {
  color: var(--clr-gold);
  border-bottom: 1px solid rgba(201, 169, 110, .3)
}

.form-submit {
  margin-top: 28px
}

/* Alert */
.f-ok {
  background: #f0faf0;
  border: 1px solid #b6ddb6;
  color: #256025;
  border-radius: 6px;
  padding: 14px 18px;
  font-size: .88rem;
  margin-bottom: 20px
}

.f-err {
  background: #fdf3f3;
  border: 1px solid #f0b8b8;
  color: #8b2020;
  border-radius: 6px;
  padding: 14px 18px;
  font-size: .88rem;
  margin-bottom: 20px
}

/* Sidebar */
.form-sidebar .box {
  background: var(--clr-ivory-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 14px
}

.form-sidebar .box-title {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  color: var(--clr-dark);
  margin-bottom: 8px
}

.form-sidebar .box p {
  font-size: .875rem
}

/* ─── ABOUT PAGE ─────────────────────────────────────────── */
.about-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 76px;
  align-items: center
}

.about-img-wrap {
  position: relative
}

.about-img-wrap img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 10px
}

.exp-badge {
  position: absolute;
  bottom: -18px;
  right: -18px;
  background: var(--clr-gold);
  color: #fff;
  border-radius: 10px;
  padding: 20px 26px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(168, 133, 78, .32)
}

.exp-badge-num {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 400
}

.exp-badge-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 3px;
  opacity: .85
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.value-card {
  padding: 30px 24px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
  transition: border-color .3s, box-shadow .3s
}

.value-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--sh-sm)
}

.value-icon {
  font-size: 1.7rem;
  margin-bottom: 13px
}

.value-card h3 {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  color: var(--clr-dark);
  margin-bottom: 8px
}

.value-card p {
  font-size: .875rem;
  line-height: 1.78
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 32px
}

.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: linear-gradient(to bottom, var(--clr-gold), var(--clr-blush))
}

.tl-item {
  position: relative;
  padding-bottom: 38px
}

.tl-dot {
  position: absolute;
  left: -35px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--clr-gold);
  border: 2.5px solid var(--clr-ivory);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, .2)
}

.tl-year {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--clr-gold);
  margin-bottom: 4px
}

.tl-title {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  color: var(--clr-dark);
  margin-bottom: 6px
}

.tl-text {
  font-size: .88rem;
  color: var(--clr-muted);
  line-height: 1.8
}

/* ─── LIGHTBOX ───────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(16, 12, 8, .97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s, visibility .28s
}

.lightbox.open {
  opacity: 1;
  visibility: visible
}

.lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px
}

.lb-x {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: background .2s
}

.lb-x:hover {
  background: rgba(255, 255, 255, .2)
}

/* ─── POPUP ──────────────────────────────────────────────── */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(22, 18, 13, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s
}

.popup-overlay.open {
  opacity: 1;
  visibility: visible
}

.popup-box {
  background: #fff;
  border-radius: 12px;
  max-width: 450px;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: var(--sh-xl);
  transform: translateY(16px) scale(.97);
  transition: transform .36s var(--ease-out)
}

.popup-overlay.open .popup-box {
  transform: translateY(0) scale(1)
}

.popup-image img {
  width: 100%;
  height: 220px;
  object-fit: cover
}

.popup-body {
  padding: 30px
}

.popup-sub {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 8px
}

.popup-headline {
  font-family: var(--ff-display);
  font-size: 1.8rem;
  color: var(--clr-dark);
  line-height: 1.12;
  margin-bottom: 10px
}

.popup-copy {
  font-size: .875rem;
  color: var(--clr-muted);
  line-height: 1.78;
  margin-bottom: 22px
}

.popup-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--clr-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: background .2s
}

.popup-x:hover {
  background: var(--clr-blush);
  color: var(--clr-dark)
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer {
  background: var(--clr-dark-2)
}

.footer-main {
  padding: 80px 0 56px
}

/* 4 equal columns, centered */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  /* Center the whole grid */
  max-width: 1100px;
  margin: 0 auto
}

.fc-logo-name {
  font-family: var(--ff-display);
  font-size: 1.8rem;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 4px
}

.fc-logo-sub {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 18px;
  display: block
}

.fc-brand-text {
  font-size: .825rem;
  color: rgba(255, 255, 255, .4);
  line-height: 1.9;
  margin-bottom: 22px;
  max-width: 270px
}

.fc-social {
  display: flex;
  gap: 9px;
  margin-bottom: 22px
}

.fc-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .22s
}

.fc-social a:hover {
  background: var(--clr-gold);
  color: #fff;
  transform: translateY(-2px)
}

.fc-alt-book-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .22);
  margin-bottom: 8px;
  display: block
}

.fc-alt-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.fc-alt-link {
  font-size: 12px;
  color: rgba(255, 255, 255, .38);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  padding-bottom: 1px;
  transition: color .2s
}

.fc-alt-link:hover {
  color: var(--clr-gold);
  border-color: var(--clr-gold)
}

/* Column heading */
.fc-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, .35);
  margin-bottom: 20px
}

.fc-links {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.fc-links a {
  font-size: .845rem;
  color: rgba(255, 255, 255, .48);
  padding: 5px 0;
  display: block;
  transition: color .2s
}

.fc-links a:hover {
  color: var(--clr-gold);
  padding-left: 4px
}

/* Contact column */
.fc-contact-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px
}

.fc-contact-item {
  display: flex;
  gap: 10px;
  align-items: flex-start
}

.fc-contact-item svg {
  color: var(--clr-gold);
  flex-shrink: 0;
  margin-top: 2px
}

.fc-contact-item span,
.fc-contact-item a {
  font-size: .825rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.65;
  transition: color .2s
}

.fc-contact-item a:hover {
  color: var(--clr-gold)
}

.fc-hours {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.fc-hour {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: .8rem
}

.fc-hour span:first-child {
  color: rgba(255, 255, 255, .28)
}

.fc-hour span:last-child {
  color: rgba(255, 255, 255, .58)
}

/* Bottom bar — CENTERED */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: 22px 0
}

.footer-bottom-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 36px
}

.foot-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, .24)
}

.foot-copy a:hover {
  color: var(--clr-gold)
}

.foot-legal {
  display: flex;
  gap: 18px
}

.foot-legal a {
  font-size: 12px;
  color: rgba(255, 255, 255, .26);
  transition: color .2s
}

.foot-legal a:hover {
  color: rgba(255, 255, 255, .65)
}

/* ─── LEGAL ──────────────────────────────────────────────── */
.legal-content h2 {
  font-size: 1.22rem;
  color: var(--clr-dark);
  margin: 34px 0 10px
}

.legal-content p,
.legal-content li {
  font-size: .9rem;
  color: var(--clr-mid);
  line-height: 1.85;
  margin-bottom: 10px
}

.legal-content ul {
  padding-left: 22px;
  list-style: disc
}

.legal-content a {
  color: var(--clr-gold)
}

/* ─── 404 ────────────────────────────────────────────────── */
.page-404 {
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px
}

.page-404-num {
  font-family: var(--ff-display);
  font-size: clamp(6rem, 16vw, 10rem);
  color: var(--clr-blush);
  line-height: 1;
  opacity: .4
}

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.sr {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .72s var(--ease-out), transform .72s var(--ease-out)
}

.sr.in {
  opacity: 1;
  transform: translateY(0)
}

.sr-l {
  transform: translateX(-36px)
}

.sr-r {
  transform: translateX(36px)
}

.sr-l.in,
.sr-r.in {
  transform: translateX(0)
}

.sr-s {
  transform: scale(.94)
}

.sr-s.in {
  transform: scale(1)
}

.d1 {
  transition-delay: .1s
}

.d2 {
  transition-delay: .18s
}

.d3 {
  transition-delay: .26s
}

.d4 {
  transition-delay: .34s
}

.d5 {
  transition-delay: .42s
}

/* ─── ADMIN SHARED ───────────────────────────────────────── */
.admin-alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: .875rem;
  margin-bottom: 16px
}

.admin-alert-success {
  background: #f0faf0;
  border: 1px solid #b6ddb6;
  color: #256025
}

.admin-alert-error {
  background: #fdf3f3;
  border: 1px solid #f0b8b8;
  color: #8b2020
}

/* ─── UTILS ──────────────────────────────────────────────── */
.bg-light {
  background: var(--clr-ivory-2)
}

.bg-white {
  background: #fff
}

.bg-dark {
  background: var(--clr-dark)
}

.txt-center {
  text-align: center
}

.mt-4 {
  margin-top: 16px
}

.mt-8 {
  margin-top: 32px
}

.mb-8 {
  margin-bottom: 32px
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px) {
  .footer-cols {
    gap: 32px;
    padding: 0 28px
  }

  .footer-bottom-inner {
    padding: 0 28px
  }

  .split-content {
    padding: 64px 52px
  }

  .about-duo {
    gap: 52px
  }
}

@media(max-width:960px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px
  }

  .treatments-grid {
    grid-template-columns: 1fr 1fr
  }

  .t-card--tall {
    grid-row: span 1
  }

  .why-grid {
    grid-template-columns: 1fr 1fr
  }

  .stats-row {
    grid-template-columns: 1fr 1fr
  }

  .intro-strip-inner {
    grid-template-columns: 1fr
  }
}

@media(max-width:768px) {
  .wrap {
    padding: 0 20px
  }

  .wrap-sm {
    padding: 0 20px
  }

  .wrap-xs {
    padding: 0 20px
  }

  .section {
    padding: 72px 0
  }

  .section-md {
    padding: 52px 0
  }

  .section-sm {
    padding: 40px 0
  }

  /* Topbar */
  .topbar {
    display: none
  }

  /* Header */
  .header-inner {
    height: 62px
  }

  .logo-image {
    height: 40px
  }

  .logo-name {
    font-size: 1.28rem
  }

  .main-nav {
    display: none
  }

  .header-call {
    display: none
  }

  .hamburger {
    display: flex
  }

  .header-book-btn {
    font-size: 12px;
    padding: 9px 18px
  }

  /* Hero */
  .hero {
    min-height: 100svh;
    align-items: flex-end
  }

  .hero-body {
    padding: 48px 0
  }

  .hero h1 {
    font-size: clamp(2.2rem, 8vw, 3.2rem);
    margin-bottom: 16px;
    white-space: normal
  }

  .hero-lead {
    font-size: .9rem;
    max-width: 100%;
    margin-bottom: 28px
  }

  .hero-actions {
    flex-direction: column;
    gap: 10px
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center
  }

  .hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-bottom: 8px
  }

  .hero-trust-item {
    font-size: 11px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 9px 12px;
    gap: 7px
  }

  /* Make Mesoestetic span full width as it's longer */
  .hero-trust-item:last-child {
    grid-column: 1/-1;
    justify-content: center
  }

  .hero-scroll {
    display: none
  }

  /* Ticker */
  .ticker-item {
    padding: 0 24px
  }

  /* Intro strip */
  .intro-strip-inner {
    grid-template-columns: 1fr
  }

  .intro-feature {
    padding: 24px 22px
  }

  /* Treatments */
  .treatments-grid {
    grid-template-columns: 1fr
  }

  /* About split */
  .split-section {
    grid-template-columns: 1fr
  }

  .split-media {
    height: 300px
  }

  .split-media img {
    height: 100%
  }

  .split-content {
    padding: 52px 28px
  }

  /* Stats */
  .stats-row {
    grid-template-columns: 1fr 1fr
  }

  .stat-cell {
    padding: 32px 20px
  }

  .stat-val {
    font-size: 2.4rem
  }

  /* Why */
  .why-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px
  }

  .why-card {
    padding: 24px 18px
  }

  /* Offers */
  .offers-grid {
    grid-template-columns: 1fr
  }

  /* Gallery */
  .gallery-grid {
    columns: 2;
    column-gap: 10px
  }

  .gal-item {
    margin-bottom: 10px
  }

  /* Reviews */
  .review-card {
    flex: 0 0 min(320px, 86vw)
  }

  .reviews-track {
    padding: 6px 20px 24px;
    scroll-padding: 0 20px
  }

  .rating-row {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    margin-top: 44px;
    padding-top: 36px
  }

  .rating-divider {
    width: 60px;
    height: 1px
  }

  /* Service rows */
  .service-row {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .service-action {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%
  }

  .service-action .btn {
    flex: 1;
    min-width: 120px;
    justify-content: center
  }

  /* About duo */
  .about-duo {
    grid-template-columns: 1fr !important;
    gap: 40px
  }

  .about-img-wrap img {
    aspect-ratio: 4/3
  }

  .exp-badge {
    bottom: 12px;
    right: 12px;
    padding: 16px 20px
  }

  .exp-badge-num {
    font-size: 1.8rem
  }

  /* Values grid */
  .values-grid {
    grid-template-columns: 1fr 1fr
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 36px
  }

  /* Enquiry */
  .enquiry-layout {
    grid-template-columns: 1fr !important;
    gap: 24px
  }

  .form-card {
    padding: 28px 20px
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0
  }

  /* Page banner */
  .page-banner {
    padding: 72px 0 48px
  }

  .page-banner h1 {
    font-size: clamp(1.9rem, 7vw, 2.6rem)
  }

  /* CTA */
  .cta-btns {
    flex-direction: column;
    align-items: center
  }

  .cta-btns .btn {
    width: 100%;
    max-width: 300px
  }

  /* Section header */
  .sec-head {
    margin-bottom: 44px
  }

  /* Footer */
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    padding: 0 20px;
    gap: 28px 20px
  }

  .footer-bottom-inner {
    padding: 0 20px;
    flex-direction: column;
    text-align: center;
    gap: 10px
  }

  .foot-legal {
    justify-content: center
  }

  /* Popup */
  .popup-overlay {
    align-items: flex-end;
    padding: 0
  }

  .popup-box {
    border-radius: 16px 16px 0 0;
    max-width: 100%
  }

  .popup-image img {
    height: 180px
  }

  .popup-body {
    padding: 24px 22px 32px
  }

  /* Inline grid overrides */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important
  }
}

@media(max-width:540px) {
  .wrap {
    padding: 0 16px
  }

  .hero h1 {
    font-size: 2rem
  }

  .treatments-grid {
    grid-template-columns: 1fr
  }

  .gallery-grid {
    columns: 1
  }

  .why-grid {
    grid-template-columns: 1fr
  }

  .stats-row {
    grid-template-columns: 1fr 1fr
  }

  .values-grid {
    grid-template-columns: 1fr !important
  }

  .footer-cols {
    grid-template-columns: 1fr !important
  }

  .foot-legal {
    flex-direction: column;
    gap: 7px
  }

  .review-card {
    flex: 0 0 min(280px, 90vw)
  }

  .sec-head {
    margin-bottom: 36px
  }

  .service-action {
    flex-direction: column
  }

  .service-action .btn {
    max-width: 100%
  }
}

/* ── Gallery filter buttons ──────────────────────────────── */
.gf-btn.active,
.gf-btn:hover {
  background: var(--clr-gold) !important;
  color: #fff !important;
  border-color: var(--clr-gold) !important
}