/* =========================================================
   CLINIQUE ROYALE — Ivory & Deep Navy, brushed gold hairlines
   Design: Clinical white/ivory · Deep navy · Muted antique gold
   Fonts: Playfair Display (display) + Inter (body)
   An elite, calm, trust-first editorial look for a dental,
   aesthetic-medicine and academy brand.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* === TOKENS === */
:root {
  /* Navy palette — primary */
  --sapphire:       #0C2A43;
  --sapphire-mid:   #1B4A68;
  --sapphire-light: #5C86A3;
  --sapphire-pale:  #E7ECF1;
  --sapphire-mist:  #F3F6F8;

  /* Neutrals — clean clinical ivory/white */
  --white:    #FFFFFF;
  --off-white:#FAFAF7;
  --canvas:   #F5F5F1;
  --pearl:    #ECECE5;
  --silver:   #DCDCD2;
  --ash:      #86867E;
  --slate:    #5A5A52;
  --charcoal: #23262B;
  --ink:      #0A1623;

  /* Accents — muted antique gold, not shiny */
  --gold:     #A9814A;
  --gold-pale:#F4ECDC;

  /* Shadows — soft, cool-toned, no warm cast */
  --shadow-xs: 0 1px 3px rgba(20,26,32,.05);
  --shadow-sm: 0 3px 14px rgba(20,26,32,.06);
  --shadow:    0 8px 28px rgba(20,26,32,.08);
  --shadow-lg: 0 18px 50px rgba(20,26,32,.11);
  --shadow-blue: 0 8px 26px rgba(12,42,67,.24);

  /* Type — classic serif display, clean clinical sans body */
  --fd: 'Playfair Display', 'Cormorant Garamond', serif;
  --fb: 'Inter', 'DM Sans', sans-serif;

  /* Radii — precise, squared-off, clinical-elegant */
  --r:    2px;
  --r-lg: 5px;
  --r-xl: 9px;

  /* Motion — a touch slower/calmer */
  --t: .35s cubic-bezier(.4,0,.2,1);
  --t-fast: .18s ease;
  --t-slow: .7s cubic-bezier(.4,0,.2,1);
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--fb);
  background: var(--white);
  color: var(--charcoal);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}
h1,h2,h3,h4 { font-family: var(--fd); font-weight: 400; line-height: 1.15; color: var(--charcoal); }
h1 { font-size: clamp(2.4rem,6vw,5.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.8rem,4vw,3.2rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.2rem,2.5vw,1.8rem); }
h4 { font-size: clamp(1rem,1.8vw,1.3rem); }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: rgba(12,42,67,.12); }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: var(--sapphire-mid); border-radius: 2px; }

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.page-progress {
  position: fixed; top: 0; left: 0; z-index: 99999;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--sapphire), var(--sapphire-light), var(--gold));
  transition: width .2s ease;
}

/* =========================================================
   TOPBAR — thin announcement strip above the nav
   ========================================================= */
.topbar {
  background: var(--ink); color: rgba(255,255,255,.75);
  font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase;
  padding: .5rem 3rem;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--fb); gap: 1rem;
}
.topbar-left { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.55); }
.topbar-right { display: flex; align-items: center; gap: 1.25rem; }
.topbar-right a { color: rgba(255,255,255,.6); transition: color var(--t-fast); display: inline-flex; align-items: center; gap: .35rem; }
.topbar-right a:hover { color: var(--gold); }
.topbar-social { display: flex; gap: .7rem; }
.topbar-social a { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: .65rem; }
.topbar-social a:hover { border-color: var(--gold); }

/* =========================================================
   NAVIGATION — plain light corporate bar, always on
   ========================================================= */
.nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 1000;
  height: 84px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem;
  background: var(--white);
  border-bottom: 1px solid var(--pearl);
  transition: box-shadow var(--t), height var(--t);
}
.nav.scrolled { box-shadow: 0 4px 24px rgba(20,26,32,.06); height: 72px; }
.nav-logo {
  font-size: 1.05rem; font-weight: 700;
  color: var(--ink); letter-spacing: .04em;
  display: flex; align-items: center; gap: .75rem; z-index: 2;
}
.nav-logo-mark {
  width: 42px; height: 42px; flex-shrink: 0;
  background: var(--ink); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-size: 1.05rem; font-weight: 700; letter-spacing: .03em;
  border: 1px solid var(--gold);
}
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-logo-text b { font-family: var(--fd); font-size: 1.15rem; letter-spacing: .05em; }
.nav-logo-text span { font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); font-weight: 500; }
.logo-star { color: var(--gold); font-size: .75rem; display: inline-block; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

.nav-links { display: flex; gap: .1rem; list-style: none; align-items: center; }
.nav-links li a {
  position: relative;
  display: block; padding: .5rem .95rem;
  font-size: .68rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--slate);
  transition: color var(--t-fast);
}
.nav-links li a::after {
  content: ''; position: absolute; left: .95rem; right: .95rem; bottom: .1rem; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform var(--t);
}
.nav-links li a.active { color: var(--ink); }
.nav-links li a.active::after { transform: scaleX(1); }
.nav-links li a:hover { color: var(--ink); }
.nav-links li a:hover::after { transform: scaleX(1); }

.nav-cta {
  background: var(--gold) !important;
  color: var(--white) !important;
  padding: .65rem 1.6rem !important;
  border-radius: var(--r) !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  transition: all var(--t-fast) !important;
  border: 1px solid var(--gold) !important;
}
.nav-cta::after { content: none !important; }
.nav-cta:hover { background: var(--ink) !important; border-color: var(--ink) !important; }

.ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; z-index: 2; }
.ham span { display: block; width: 22px; height: 1.5px; background: var(--ink); border-radius: 1px; transition: all var(--t); }
.ham.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; }
.ham.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================
   BUTTONS — classic sharp-edge, sweep-fill hover (no shadow-lift)
   ========================================================= */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--gold);
  color: var(--white);
  padding: .875rem 2.25rem;
  border-radius: var(--r);
  font-size: .7rem; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  font-family: var(--fb);
  border: 1px solid var(--gold);
  transition: color var(--t), border-color var(--t);
  min-height: 48px; cursor: pointer;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.btn-primary:hover { color: var(--white); border-color: var(--ink); }
.btn-primary:hover::before { transform: scaleX(1); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--white); color: var(--ink);
  padding: .875rem 2.25rem; border-radius: var(--r);
  border: 1px solid var(--silver);
  font-size: .7rem; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase;
  font-family: var(--fb); transition: color var(--t), border-color var(--t);
  min-height: 48px; cursor: pointer;
}
.btn-outline::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.btn-outline:hover { border-color: var(--ink); color: var(--white); }
.btn-outline:hover::before { transform: scaleX(1); }

.btn-outline-dark {
  display: inline-flex; align-items: center; gap: .5rem;
  position: relative; overflow: hidden; isolation: isolate;
  background: transparent; color: var(--sapphire);
  padding: .72rem 1.75rem; border-radius: var(--r);
  border: 1px solid var(--sapphire);
  font-size: .7rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  font-family: var(--fb); transition: color var(--t), border-color var(--t);
  min-height: 48px; cursor: pointer;
}
.btn-outline-dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--sapphire); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.btn-outline-dark:hover { color: #fff; }
.btn-outline-dark:hover::before { transform: scaleX(1); }


/* =========================================================
   LAYOUT
   ========================================================= */
.sec { max-width: 1200px; margin: 0 auto; padding: 6rem 3rem; }
.sec-wrap { padding: 6rem 0; }
.sec-inner { max-width: 1200px; margin: 0 auto; padding: 0 3rem; }
.bg-dark  { background: var(--ink); }
.bg-blue  { background: var(--sapphire); }
.bg-ivory { background: var(--canvas); }
.bg-ivory2 { background: var(--pearl); }
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .62rem; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
  font-family: var(--fb);
}
.sec-eyebrow::before {
  content: ''; display: block; width: 24px; height: 1px; background: var(--gold);
}
.sec-title { font-family: var(--fd); font-weight: 400; color: var(--charcoal); }
.sec-title.light { color: var(--white); }
.sec-title em { font-style: italic; color: var(--sapphire-mid); }
.sec-desc { font-size: .92rem; color: var(--slate); line-height: 1.8; max-width: 480px; margin-top: .875rem; }
.sec-head { margin-bottom: 3rem; }
.sec-head.center { text-align: center; }
.sec-head.center .sec-desc { margin-left: auto; margin-right: auto; }
.sec-head.center .sec-eyebrow { justify-content: center; }
.sec-head.center .sec-eyebrow::before { display: none; }

/* =========================================================
   HERO — light two-column corporate hero (photo right)
   ========================================================= */
.hero-v2 { background: var(--white); padding: 3rem 3rem 0; }
.hero-v2-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
  padding-bottom: 3.5rem;
}
.hero-v2-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.hero-v2 h1 { font-family: var(--fd); font-weight: 700; font-size: clamp(2rem,3.6vw,3.1rem); line-height: 1.18; color: var(--ink); letter-spacing: -.01em; text-transform: uppercase; }
.hero-v2 h1 em { font-style: normal; color: var(--gold); }
.hero-v2-desc { font-size: .95rem; color: var(--slate); line-height: 1.8; max-width: 460px; margin-top: 1.25rem; }
.hero-v2-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.badges-row { display: flex; gap: 2.25rem; margin-top: 3rem; flex-wrap: wrap; }
.badge-item { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; max-width: 130px; }
.badge-item svg { width: 26px; height: 26px; color: var(--gold); }
.badge-item span { font-size: .68rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); line-height: 1.4; }
.hero-v2-media {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4/3.1; background: linear-gradient(150deg,var(--sapphire) 0%,var(--sapphire-mid) 55%,var(--ink) 100%);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
}
.hero-v2-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-v2-media-mark { text-align: center; color: rgba(255,255,255,.9); }
.hero-v2-media-mark .mono { width: 84px; height: 84px; border: 1.5px solid var(--gold); color: var(--gold); font-family: var(--fd); font-size: 2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.hero-v2-media-mark b { font-family: var(--fd); letter-spacing: .12em; font-size: 1.05rem; display: block; }
.hero-v2-media-mark span { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* =========================================================
   PILLARS — 3 business-line cards (Klinika / Estetika / Akademia)
   ========================================================= */
.pillars-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }
.pillar-card { background: var(--white); border: 1px solid var(--pearl); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--t), transform var(--t); }
.pillar-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.pillar-media { position: relative; aspect-ratio: 16/11; background: linear-gradient(150deg,var(--sapphire-mid),var(--ink)); }
.pillar-media img { width: 100%; height: 100%; object-fit: cover; }
.pillar-ic {
  position: absolute; left: 1.5rem; bottom: -26px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--gold); display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--white); box-shadow: var(--shadow);
}
.pillar-ic svg { width: 24px; height: 24px; }
.pillar-body { padding: 2.25rem 1.5rem 1.75rem; }
.pillar-title { font-family: var(--fd); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); margin-bottom: .6rem; }
.pillar-desc { font-size: .85rem; color: var(--slate); line-height: 1.7; }
.pillar-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.pillar-link:hover { color: var(--ink); }

/* =========================================================
   STATS BAR — dark strip with icon stats
   ========================================================= */
.stats-bar { background: var(--ink); padding: 2.75rem 3rem; }
.stats-bar-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(5,1fr); gap: 1.5rem; }
.stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
.stat-item svg { width: 28px; height: 28px; color: var(--gold); }
.stat-item b { font-family: var(--fd); font-size: 1.7rem; color: var(--white); font-weight: 700; }
.stat-item span { font-size: .62rem; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.45); }
.stat-item .stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; }

/* =========================================================
   SPLIT SECTIONS — Academy (video) / About (image collage)
   ========================================================= */
.split-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split-v2.rev .split-v2-media { order: 2; }
.split-v2.rev .split-v2-body { order: 1; }
.checklist { list-style: none; display: flex; flex-direction: column; gap: .85rem; margin: 1.5rem 0 2rem; }
.checklist li { display: flex; align-items: center; gap: .75rem; font-size: .88rem; color: var(--charcoal); }
.checklist li svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
.video-thumb {
  position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16/10;
  background: linear-gradient(150deg,#1c2a3d,var(--ink)); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-lg);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: .8; }
.video-thumb-play {
  position: relative; z-index: 2; display: flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px);
  padding: .8rem 1.6rem .8rem .8rem; border-radius: 50px; color: #fff;
}
.video-thumb-play .play-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.video-thumb-play .play-ic svg { width: 16px; height: 16px; color: var(--white); margin-left: 2px; }
.video-thumb-play span { font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.collage { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }
.collage-main { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 3/3.6; background: linear-gradient(150deg,var(--sapphire-pale),var(--pearl)); }
.collage-col { display: flex; flex-direction: column; gap: 1rem; }
.collage-col > div { border-radius: var(--r-xl); overflow: hidden; flex: 1; background: linear-gradient(150deg,var(--pearl),var(--sapphire-pale)); }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================
   TESTIMONIALS v2 — light cards with side arrows
   ========================================================= */
.testi-v2-wrap { display: flex; align-items: center; gap: 1.25rem; }
.testi-v2-arrow {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--silver);
  background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--ink); transition: all var(--t-fast);
}
.testi-v2-arrow:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.testi-v2-track-outer { overflow: hidden; flex: 1; }
.testi-v2-track { display: flex; gap: 1.5rem; transition: transform var(--t-slow); }
.testi-v2-card { flex: 0 0 calc(33.333% - 1rem); background: var(--white); border: 1px solid var(--pearl); border-radius: var(--r-lg); padding: 1.75rem; box-shadow: var(--shadow-xs); }
.testi-v2-card .stars { color: var(--gold); font-size: .85rem; letter-spacing: 2px; margin-bottom: .9rem; }
.testi-v2-card p { font-size: .86rem; color: var(--charcoal); line-height: 1.75; font-style: italic; }
.testi-v2-card .name { margin-top: 1.1rem; font-weight: 700; font-size: .85rem; color: var(--ink); text-align: right; }

/* =========================================================
   CTA BAR v2 — dark strip, icon + text + gold button
   ========================================================= */
.cta-bar-v2 {
  background: var(--ink); padding: 2.25rem 3rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.cta-bar-v2-left { display: flex; align-items: center; gap: 1.25rem; }
.cta-bar-v2-ic { width: 50px; height: 50px; border-radius: 50%; background: rgba(184,141,87,.15); color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cta-bar-v2-ic svg { width: 24px; height: 24px; }
.cta-bar-v2-left h3 { font-family: var(--fb); font-size: 1.05rem; font-weight: 700; color: var(--white); }
.cta-bar-v2-left p { font-size: .8rem; color: rgba(255,255,255,.5); margin-top: .2rem; }

/* =========================================================
   FOOTER v2 — light theme
   ========================================================= */
.footer-v2 { background: var(--canvas); padding: 4.5rem 3rem 2rem; border-top: 1px solid var(--pearl); }
.footer-v2-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-v2-logo { display: flex; align-items: center; gap: .6rem; font-family: var(--fd); font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
.footer-v2-desc { font-size: .82rem; color: var(--slate); line-height: 1.75; max-width: 320px; }
.footer-v2-col-title { font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); margin-bottom: 1.1rem; }
.footer-v2-links { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.footer-v2-links a { font-size: .84rem; color: var(--slate); transition: color var(--t-fast); }
.footer-v2-links a:hover { color: var(--gold); }
.footer-v2-contact-item { display: flex; align-items: flex-start; gap: .6rem; font-size: .82rem; color: var(--slate); margin-bottom: .85rem; line-height: 1.5; }
.footer-v2-contact-item svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; margin-top: .15rem; }
.footer-v2-social { display: flex; gap: .6rem; }
.footer-v2-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--silver); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: all var(--t-fast); }
.footer-v2-social a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.footer-v2-social a svg { width: 15px; height: 15px; }
.footer-v2-bottom { max-width: 1200px; margin: 2.75rem auto 0; padding-top: 1.75rem; border-top: 1px solid var(--pearl); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .74rem; color: var(--ash); }
.footer-v2-bottom a { color: var(--ash); }
.footer-v2-bottom a:hover { color: var(--gold); }

/* =========================================================
   HERO — Full bleed, classic depth (calm, no tech-grid/glow)
   ========================================================= */
.hero {
  position: relative; min-height: 100svh;
  background: var(--sapphire); overflow: hidden;
  display: flex; align-items: center;
}
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
  opacity: .5;
}
.hero-orb-1 { width: 620px; height: 620px; background: radial-gradient(circle, rgba(169,129,74,.09), transparent 70%); top: -180px; right: -140px; filter: blur(40px); }
.hero-orb-2 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(169,129,74,.07), transparent 70%); bottom: -100px; left: -80px; filter: blur(40px); }

/* Thin frame instead of a tech grid — a classic, quiet border */
.hero::before {
  content: '';
  position: absolute; inset: 18px; z-index: 1;
  border: 1px solid rgba(169,129,74,.18);
  pointer-events: none;
}

.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-slide-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg,rgba(10,22,35,.85) 0%,rgba(12,42,67,.6) 60%,rgba(12,42,67,.3) 100%); }
.hero-slide:nth-child(1) .hero-slide-bg { background: linear-gradient(145deg, #0A1623 0%, #0C2A43 60%, #0A1623 100%); }
.hero-slide:nth-child(2) .hero-slide-bg { background: linear-gradient(145deg, #070F18 0%, #163A54 60%, #070F18 100%); }
.hero-slide:nth-child(3) .hero-slide-bg { background: linear-gradient(145deg, #0A1623 0%, #123048 60%, #0A1623 100%); }
.hero-slide:nth-child(1) .hero-slide-bg::after,
.hero-slide:nth-child(2) .hero-slide-bg::after,
.hero-slide:nth-child(3) .hero-slide-bg::after { background: none; }

.hero-content { position: relative; z-index: 3; max-width: 1200px; margin: 0 auto; padding: 0 3rem; width: 100%; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .62rem; font-weight: 500; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(169,129,74,.9); margin-bottom: 2rem;
  opacity: 0; animation: fade-up .8s ease forwards .3s;
}
.hero-eyebrow span { display: block; width: 32px; height: 1px; background: currentColor; }
@keyframes fade-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.hero h1 { color: var(--white); margin-bottom: 1.5rem; opacity: 0; animation: fade-up .9s ease forwards .5s; font-weight: 300; }
.hero h1 em { font-style: italic; color: rgba(169,129,74,.9); }
.hero h1 strong { font-weight: 500; }
.hero-desc { font-size: 1.05rem; color: rgba(255,255,255,.6); max-width: 480px; line-height: 1.85; margin-bottom: 2.5rem; opacity: 0; animation: fade-up .8s ease forwards .7s; font-weight: 300; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fade-up .8s ease forwards .9s; }

.hero-stats { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; border-top: 1px solid rgba(255,255,255,.08); background: rgba(10,22,35,.5); backdrop-filter: blur(12px); }
.hero-stats-inner { max-width: 1200px; margin: 0 auto; padding: 0 3rem; display: grid; grid-template-columns: repeat(4,1fr); }
.hero-stat { padding: 1.25rem .5rem; text-align: center; border-right: 1px solid rgba(255,255,255,.06); }
.hero-stat:last-child { border-right: none; }
.hero-stat-n { font-family: var(--fd); font-size: 1.8rem; color: var(--white); line-height: 1; font-weight: 400; }
.hero-stat-l { font-size: .58rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-top: .3rem; }

.hero-controls { position: absolute; bottom: 5rem; right: 3rem; z-index: 3; display: flex; align-items: center; gap: .75rem; }
.hero-dots { display: flex; gap: .4rem; }
.hero-dot-btn { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.25); border: none; cursor: pointer; padding: 0; transition: all var(--t); }
.hero-dot-btn.active { width: 20px; border-radius: 2.5px; background: var(--gold); }
.hero-arrows { display: flex; gap: .4rem; }
.hero-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: rgba(255,255,255,.55); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--t); font-size: .85rem; }
.hero-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee-bar { background: var(--sapphire); overflow: hidden; padding: .65rem 0; contain: layout style; }
.marquee-inner { display: flex; white-space: nowrap; animation: marquee-scroll 32s linear infinite; width: max-content; }
.marquee-item { display: inline-flex; align-items: center; gap: .65rem; font-size: .58rem; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.65); padding: 0 1.5rem; flex-shrink: 0; }
.marquee-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--gold); opacity: .6; }
@keyframes marquee-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* =========================================================
   FEATURES
   ========================================================= */
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--silver); border: 1px solid var(--silver); border-radius: var(--r-lg); overflow: hidden; }
.feature-card {
  padding: 2.5rem 2rem; background: var(--white);
  transition: all .35s ease; position: relative;
}
.feature-card:hover { background: var(--sapphire-mist); }
.feature-card::after { content: ''; position: absolute; bottom: 0; left: 2rem; right: 2rem; height: 2px; background: var(--sapphire); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.feature-card:hover::after { transform: scaleX(1); }
.feature-icon { font-size: 1.6rem; margin-bottom: 1.25rem; display: block; }
.feature-title { font-family: var(--fd); font-size: 1.25rem; color: var(--charcoal); margin-bottom: .5rem; }
.feature-desc { font-size: .83rem; color: var(--ash); line-height: 1.8; }

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.svc-carousel-outer { overflow: hidden; padding: .5rem 0 1rem; }
.svc-carousel-track { display: flex; gap: 1rem; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.svc-card {
  flex: 0 0 260px;
  background: var(--white); border-radius: var(--r-lg); padding: 1.75rem;
  border: 1px solid var(--silver); border-top: 2px solid transparent;
  transition: border-color .35s ease;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--charcoal);
  position: relative; overflow: hidden;
}
.svc-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.svc-card:hover { border-color: var(--silver); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-ic-wrap { width: 48px; height: 48px; background: var(--sapphire-mist); border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1.1rem; transition: all .35s ease; }
.svc-card:hover .svc-ic-wrap { background: var(--sapphire-pale); }
.svc-name { font-family: var(--fd); font-size: 1.15rem; font-weight: 500; color: var(--charcoal); margin-bottom: .35rem; }
.svc-desc { font-size: .8rem; color: var(--ash); line-height: 1.65; margin-bottom: 1rem; flex: 1; }
.svc-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding: .65rem .875rem; background: var(--canvas); border-radius: var(--r); }
.svc-price { font-family: var(--fd); font-size: 1.35rem; font-weight: 500; color: var(--charcoal); }
.svc-price span { font-size: .78rem; color: var(--ash); font-family: var(--fb); }
.svc-dur { font-size: .65rem; letter-spacing: 1px; text-transform: uppercase; color: var(--sapphire-mid); background: var(--sapphire-pale); padding: .25rem .6rem; border-radius: 50px; }
.svc-book-btn { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; padding: .72rem; background: var(--sapphire); color: var(--white) !important; border: none; border-radius: var(--r); font-size: .7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; font-family: var(--fb); transition: all .3s ease; pointer-events: none; margin-top: auto; }
.svc-card:hover .svc-book-btn { background: var(--sapphire-mid); }

.carousel-nav { display: flex; gap: .4rem; margin-top: 1.25rem; justify-content: flex-end; }
.carousel-btn { width: 40px; height: 40px; border: 1px solid var(--silver); background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .85rem; color: var(--slate); transition: all var(--t); }
.carousel-btn:hover { background: var(--sapphire); border-color: var(--sapphire); color: var(--white); }

/* =========================================================
   STAFF
   ========================================================= */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1.5rem; }
.staff-card { background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); transition: border-color .35s ease; border: 1px solid var(--silver); }
.staff-card:hover { border-color: var(--gold); }
.staff-photo-wrap { position: relative; aspect-ratio: 3/4; background: var(--sapphire-mist); overflow: hidden; }
.staff-photo-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.staff-card:hover .staff-photo-wrap img { transform: scale(1.04); }
.staff-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: rgba(12,42,67,.15); }
.staff-photo-overlay { position: absolute; inset: 0; background: rgba(10,22,35,.6); display: flex; align-items: flex-end; padding: 1.25rem; opacity: 0; transition: opacity .35s ease; }
.staff-card:hover .staff-photo-overlay { opacity: 1; }
.staff-overlay-cta { font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; color: var(--white); border: 1px solid rgba(255,255,255,.4); padding: .4rem 1rem; border-radius: 4px; }
.staff-info { padding: 1.25rem; }
.staff-name { font-family: var(--fd); font-size: 1.2rem; font-weight: 500; color: var(--charcoal); margin-bottom: .2rem; }
.staff-role { font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--sapphire-mid); background: var(--sapphire-pale); display: inline-block; padding: .2rem .6rem; border-radius: 4px; margin-bottom: .75rem; }
.staff-bio { font-size: .8rem; color: var(--ash); line-height: 1.7; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testi-carousel { overflow: hidden; }
.testi-track { display: flex; gap: 1.25rem; transition: transform .65s cubic-bezier(.4,0,.2,1); }
.testi-card { flex: 0 0 calc(33.333% - .85rem); background: var(--white); border: 1px solid var(--silver); border-radius: var(--r-lg); padding: 2.25rem 1.85rem; transition: border-color .35s ease; position: relative; }
.testi-card:hover { border-color: var(--gold); }
.testi-quote { font-size: 3.2rem; line-height: .8; font-family: var(--fd); color: var(--gold); opacity: .55; display: block; margin-bottom: .6rem; }
.testi-text { font-family: var(--fd); font-size: 1.05rem; font-style: italic; color: var(--charcoal); line-height: 1.8; margin-bottom: 1.5rem; font-weight: 300; }
.testi-author { display: flex; align-items: center; gap: .75rem; }
.testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sapphire); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; flex-shrink: 0; }
.testi-author-name { font-family: var(--fd); font-size: .95rem; font-weight: 500; color: var(--charcoal); }
.testi-stars { color: var(--gold); font-size: .7rem; letter-spacing: 2px; }
.testi-controls { display: flex; justify-content: center; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.testi-dots { display: flex; gap: .4rem; }
.testi-dot-btn { width: 7px; height: 7px; border-radius: 50%; background: var(--silver); border: none; cursor: pointer; padding: 0; transition: all var(--t); }
.testi-dot-btn.active { width: 24px; border-radius: 3.5px; background: var(--sapphire); }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-grid { columns: 3; gap: .875rem; }
.gallery-item { break-inside: avoid; margin-bottom: .875rem; border-radius: var(--r); overflow: hidden; cursor: pointer; position: relative; }
.gallery-item img { width: 100%; display: block; transition: transform .55s ease; }
.gallery-item-overlay { position: absolute; inset: 0; background: rgba(10,22,35,0); display: flex; align-items: center; justify-content: center; transition: background var(--t); }
.gallery-item-overlay span { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transform: scale(.6); transition: all .3s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item:hover .gallery-item-overlay { background: rgba(10,22,35,.45); }
.gallery-item:hover .gallery-item-overlay span { opacity: 1; transform: scale(1); }
.gallery-placeholder { aspect-ratio: 4/5; background: var(--sapphire-mist); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: rgba(12,42,67,.2); }
.lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(10,22,35,.95); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--t); }
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--r); }
.lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; transition: all var(--t); }
.lightbox-close:hover { background: rgba(255,255,255,.14); }

/* =========================================================
   CTA
   ========================================================= */
.cta-section { position: relative; overflow: hidden; background: var(--sapphire); padding: 8rem 3rem; text-align: center; }
.cta-section::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(169,129,74,.16); pointer-events: none; }
.cta-line { width: 1px; height: 64px; background: linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent); margin: 0 auto 2.5rem; }
.cta-eyebrow { font-size: .6rem; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1.25rem; display: block; }
.cta-title { font-family: var(--fd); font-size: clamp(2rem,5vw,4rem); color: var(--white); font-weight: 300; margin-bottom: 1.25rem; }
.cta-title em { font-style: italic; color: rgba(169,129,74,.9); }
.cta-desc { color: rgba(255,255,255,.5); max-width: 380px; margin: 0 auto 2.25rem; font-size: .9rem; line-height: 1.8; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   BLOG
   ========================================================= */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 1.5rem; }
.blog-card { background: var(--white); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--silver); transition: all .35s ease; }
.blog-card:hover { border-color: var(--gold); }
.blog-img { height: 180px; background: var(--sapphire-mist); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: rgba(12,42,67,.2); }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.blog-card:hover .blog-img img { transform: scale(1.04); }
.blog-body { padding: 1.35rem; }
.blog-cat { font-size: .58rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--sapphire-mid); background: var(--sapphire-pale); display: inline-block; padding: .18rem .6rem; border-radius: 4px; margin-bottom: .75rem; }
.blog-title { font-family: var(--fd); font-size: 1.1rem; color: var(--charcoal); margin-bottom: .45rem; line-height: 1.35; }
.blog-excerpt { font-size: .8rem; color: var(--ash); line-height: 1.65; margin-bottom: 1rem; }
.blog-meta { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; color: var(--ash); border-top: 1px solid var(--pearl); padding-top: .75rem; }
.blog-read { color: var(--sapphire-mid); font-weight: 600; font-size: .72rem; }

/* =========================================================
   PAGE HEADER
   ========================================================= */
.pg-hdr { background: var(--sapphire); padding: 4rem 3rem; text-align: center; position: relative; overflow: hidden; }
.pg-hdr::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(169,129,74,.18); pointer-events: none; }
.pg-hdr h1 { color: var(--white); position: relative; z-index: 1; font-weight: 300; }
.pg-hdr .sec-eyebrow { position: relative; z-index: 1; color: rgba(169,129,74,.8); margin-bottom: .875rem; display: block; }
.pg-hdr .sec-eyebrow::before { background: rgba(169,129,74,.6); }
.breadcrumb { font-size: .7rem; color: rgba(255,255,255,.35); margin-top: .65rem; position: relative; z-index: 1; }
.breadcrumb a { color: rgba(255,255,255,.55); }
.breadcrumb a:hover { color: rgba(255,255,255,.85); }

/* =========================================================
   BOOKING
   ========================================================= */
.book-outer { background: var(--canvas); padding: 3rem 2rem; }
.book-wrap { max-width: 700px; margin: 0 auto; background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--silver); }
.book-header { background: var(--sapphire); padding: 2.25rem 2rem 1.75rem; text-align: center; position: relative; overflow: hidden; }
.book-header::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(169,129,74,.2); pointer-events: none; }
.book-header h2 { color: var(--white); font-size: 1.65rem; position: relative; z-index: 1; margin-bottom: .35rem; font-weight: 400; }
.book-header p { color: rgba(255,255,255,.5); font-size: .82rem; position: relative; z-index: 1; }
.book-body { padding: 2.25rem; }

.form-label { display: block; font-size: .63rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ash); margin-bottom: .4rem; font-family: var(--fb); }
.form-field {
  width: 100%; padding: .8rem 1rem;
  border: 1.5px solid var(--silver);
  border-radius: var(--r); font-family: var(--fb);
  font-size: 16px; color: var(--charcoal);
  background: var(--white); outline: none;
  transition: all var(--t); min-height: 48px;
}
.form-field:focus { border-color: var(--sapphire); background: var(--white); box-shadow: 0 0 0 4px rgba(12,42,67,.08); }
.form-group { margin-bottom: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }

.time-slot { padding: .6rem .3rem; border: 1.5px solid var(--silver); border-radius: var(--r); text-align: center; font-size: .75rem; cursor: pointer; transition: all var(--t); background: var(--white); font-family: var(--fb); color: var(--charcoal); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.time-slot:hover:not(.taken) { border-color: var(--sapphire); background: var(--sapphire-mist); color: var(--sapphire); }
.time-slot.sel { background: var(--sapphire); color: var(--white); border-color: var(--sapphire); font-weight: 600; }
.time-slot.taken { background: var(--canvas); color: var(--silver); cursor: not-allowed; border-color: var(--pearl); text-decoration: line-through; opacity: .6; }

.book-submit { width: 100%; padding: 1rem; background: var(--sapphire); color: var(--white); border: none; border-radius: var(--r); font-size: .8rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; font-family: var(--fb); transition: all var(--t); min-height: 52px; margin-top: 1rem; }
.book-submit:hover { background: var(--sapphire-mid); transform: translateY(-1px); box-shadow: var(--shadow-blue); }
.book-submit:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* =========================================================
   ALERTS
   ========================================================= */
.al { padding: .875rem 1.1rem; border-radius: var(--r); font-size: .83rem; margin-bottom: 1rem; }
.al-s { background: #f0faf4; color: #1a6335; border: 1px solid #a8d5b8; }
.al-e { background: #fef2f4; color: #b01a28; border: 1px solid #f0a0aa; }
.al-i { background: var(--sapphire-mist); color: var(--sapphire); border: 1px solid var(--sapphire-pale); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.35rem; }
.contact-icon { width: 42px; height: 42px; flex-shrink: 0; background: var(--sapphire-mist); border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.contact-item-label { font-size: .6rem; letter-spacing: 2px; text-transform: uppercase; color: var(--sapphire-mid); font-weight: 600; margin-bottom: .15rem; }
.contact-item-val { font-size: .88rem; color: var(--charcoal); }
.contact-form-wrap { background: var(--canvas); border-radius: var(--r-xl); padding: 2.25rem; border: 1px solid var(--silver); }
.contact-form-wrap .form-field { background: var(--white); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--ink); color: rgba(255,255,255,.45); padding: 5rem 3rem 2rem; border-top: 1px solid rgba(255,255,255,.05); }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-logo { font-family: var(--fd); font-size: 1.5rem; color: var(--white); margin-bottom: .65rem; display: flex; align-items: center; gap: .4rem; }
.footer-logo-star { color: var(--gold); font-size: .8rem; animation: spin-slow 10s linear infinite; display: inline-block; }
.footer-tagline { font-size: .82rem; line-height: 1.75; margin-bottom: 1.35rem; color: rgba(255,255,255,.35); }
.footer-social { display: flex; gap: .4rem; flex-wrap: wrap; }
.footer-social-btn { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); font-size: .8rem; transition: all var(--t); }
.footer-social-btn:hover { border-color: var(--sapphire-light); color: var(--sapphire-light); background: rgba(12,42,67,.2); }
.footer-col-title { font-size: .6rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1.1rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a { font-size: .8rem; color: rgba(255,255,255,.35); transition: all var(--t); }
.footer-links a:hover { color: rgba(255,255,255,.75); padding-left: 4px; }
.footer-contact-item { display: flex; gap: .55rem; margin-bottom: .6rem; font-size: .8rem; }
.footer-contact-icon { color: var(--gold); flex-shrink: 0; }
.footer-divider { max-width: 1200px; margin: 0 auto; border: none; border-top: 1px solid rgba(255,255,255,.05); margin-bottom: 1.5rem; }
.footer-bottom { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: .68rem; color: rgba(255,255,255,.2); }

/* =========================================================
   PAGINATION
   ========================================================= */
.pag { display: flex; justify-content: center; gap: .35rem; margin-top: 2.5rem; }
.pag a { width: 36px; height: 36px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-size: .78rem; border: 1.5px solid var(--silver); color: var(--slate); transition: all var(--t); }
.pag a:hover, .pag a.on { border-color: var(--sapphire); background: var(--sapphire); color: var(--white); font-weight: 600; }

/* =========================================================
   SERVICES PAGE
   ========================================================= */
.svc-tabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 3rem; }
.svc-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.4rem; border-radius: 50px; border: 1px solid var(--silver);
  background: var(--white); color: var(--slate); font-family: var(--fb);
  font-size: .78rem; font-weight: 600; letter-spacing: .3px; cursor: pointer;
  transition: all var(--t-fast);
}
.svc-tab:hover { border-color: var(--gold); color: var(--ink); }
.svc-tab.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.svc-category-group { margin-bottom: 3.5rem; }
.svc-cat-header { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.5rem; padding-bottom: .875rem; border-bottom: 1.5px solid var(--silver); }
.svc-cat-label { font-family: var(--fd); font-size: 1.5rem; color: var(--charcoal); }
.svc-cat-count { font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--sapphire-mid); background: var(--sapphire-pale); padding: .18rem .6rem; border-radius: 4px; }
.svc-list-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1rem; }

/* =========================================================
   REZERVO — STATES
   ========================================================= */
.svc-option { transition: all .2s ease; border: 1.5px solid var(--silver); background: var(--white); border-radius: var(--r); }
.svc-option:hover { border-color: var(--sapphire-light) !important; background: var(--sapphire-mist) !important; transform: translateY(-2px); }
.svc-option.selected-opt { border: 2px solid var(--sapphire) !important; background: var(--sapphire-mist) !important; box-shadow: 0 0 0 4px rgba(12,42,67,.08) !important; transform: translateY(-2px); }
.svc-option.selected-opt .svc-opt-check { display: flex !important; }
.cat-option { transition: all .2s ease; background: var(--white); }
.cat-option:hover { border-color: var(--sapphire-light) !important; background: var(--sapphire-mist) !important; transform: translateY(-2px); }
.cat-option.selected-opt { border: 2px solid var(--sapphire) !important; background: var(--sapphire-mist) !important; box-shadow: 0 0 0 4px rgba(12,42,67,.08) !important; transform: translateY(-2px); }
.staff-option { transition: all .2s ease; border-radius: var(--r); }
.staff-option:hover { border-color: var(--sapphire-light) !important; background: var(--sapphire-mist) !important; }
.staff-option.selected-opt { border: 2px solid var(--sapphire) !important; background: var(--sapphire-mist) !important; box-shadow: 0 0 0 4px rgba(12,42,67,.08) !important; }

/* =========================================================
   PARALLAX
   ========================================================= */
.parallax-banner { position: relative; height: 55vh; min-height: 320px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.parallax-banner-bg { position: absolute; inset: -25%; background: var(--sapphire); background-size: cover; background-position: center; }
.parallax-banner-bg::after { content: ''; position: absolute; inset: 0; background: rgba(10,22,35,.5); }
.parallax-banner-content { position: relative; z-index: 2; max-width: 680px; padding: 2rem; }
.parallax-banner-quote { font-family: var(--fd); font-size: clamp(1.4rem,4vw,2.8rem); font-weight: 300; font-style: italic; color: var(--white); line-height: 1.45; margin-bottom: 1rem; }
.parallax-banner-quote em { color: rgba(169,129,74,.9); font-style: normal; }
.parallax-banner-sub { font-size: .68rem; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(255,255,255,.4); }
.parallax-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; overflow: hidden; }
.parallax-split-img { position: relative; overflow: hidden; background: var(--sapphire-mist); }
.parallax-split-img-inner { position: absolute; inset: -20%; background-size: cover; background-position: center; }
.parallax-split-body { padding: 4rem 3.5rem; display: flex; flex-direction: column; justify-content: center; background: var(--white); }
.parallax-split-body.dark { background: var(--sapphire); }
.parallax-split-body.dark .sec-title { color: var(--white); }
.parallax-sparkle { display: none; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
.fi { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fi.vis { opacity: 1; transform: translateY(0); }
.fi-l { opacity: 0; transform: translateX(-20px); transition: opacity .6s ease, transform .6s ease; }
.fi-l.vis { opacity: 1; transform: translateX(0); }
.fi-r { opacity: 0; transform: translateX(20px); transition: opacity .6s ease, transform .6s ease; }
.fi-r.vis { opacity: 1; transform: translateX(0); }
.fi-delay-1 { transition-delay: .1s !important; }
.fi-delay-2 { transition-delay: .2s !important; }
.fi-delay-3 { transition-delay: .3s !important; }
.fi-delay-4 { transition-delay: .4s !important; }
.fi-delay-5 { transition-delay: .5s !important; }
.ripple-wave { position: absolute; border-radius: 50%; background: rgba(255,255,255,.2); transform: scale(0); animation: ripple-anim .6s linear; pointer-events: none; }
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* =========================================================
   UTILITIES
   ========================================================= */
.text-center { text-align: center; }
.mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 2rem; }
.divider { height: 1px; background: var(--silver); margin: 1.75rem 0; }
.staff-full-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 1.75rem; }

/* =========================================================
   HERO — extra decorative layers (canvas / grain / lines / particles / scroll)
   ========================================================= */
.hero-bg-canvas { position: absolute; inset: 0; z-index: 1; opacity: .7; }
.hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-orb-3 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(169,129,74,.06), transparent 70%); top: 40%; left: 45%; filter: blur(45px); }
.hero-has-photo .hero-slide-bg::after { background: linear-gradient(120deg, rgba(10,22,35,.86) 0%, rgba(12,42,67,.62) 55%, rgba(12,42,67,.32) 100%); }

.hero-lines { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 3rem; pointer-events: none; }
.hero-line { width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, rgba(169,129,74,.12) 20%, rgba(169,129,74,.12) 80%, transparent); }

.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-dot { position: absolute; border-radius: 50%; background: var(--gold); opacity: var(--op,.3); animation: dot-drift var(--dur,10s) ease-in-out infinite; animation-delay: var(--delay,0s); }
@keyframes dot-drift { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-18px); } }

.hero-scroll { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .5rem; opacity: .6; }
.hero-scroll-line { width: 1px; height: 34px; background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent); animation: scroll-pulse 2s ease-in-out infinite; }
@keyframes scroll-pulse { 0%,100%{ opacity: .3; } 50%{ opacity: 1; } }
.hero-scroll-label { font-size: .58rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* =========================================================
   CTA — soft background orbs (used on homepage + staff page)
   ========================================================= */
.cta-bg-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; filter: blur(50px); opacity: .5; }
.cta-bg-orb-1 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(169,129,74,.14), transparent 70%); top: -160px; left: -100px; }
.cta-bg-orb-2 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(169,129,74,.10), transparent 70%); bottom: -120px; right: -80px; }

/* =========================================================
   SCROLL REVEAL — scale variant
   ========================================================= */
.reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .7s ease, transform .7s ease; }
.reveal-scale.vis { opacity: 1; transform: scale(1); }

/* =========================================================
   ADMIN PANEL
   ========================================================= */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: var(--r); font-size: .75rem; font-weight: 600; font-family: var(--fb); cursor: pointer; border: none; transition: all .2s ease; min-height: 36px; }
.btn-r { background: var(--sapphire); color: var(--white); }
.btn-r:hover { background: var(--sapphire-mid); box-shadow: var(--shadow-blue); }
.btn-ghost { background: var(--canvas); color: var(--slate); border: 1px solid var(--silver); }
.btn-ghost:hover { background: var(--pearl); }
.btn-success { background: #2E7D32; color: #fff; }
.btn-sm { padding: .35rem .8rem; font-size: .7rem; }
.pg { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.75rem 3rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.sw { display: flex; align-items: center; gap: .875rem; background: var(--white); border-radius: var(--r-lg); padding: 1rem 1.1rem; border-left: 3px solid var(--sapphire); box-shadow: var(--shadow-xs); border: 1px solid var(--silver); border-left: 3px solid var(--sapphire); }
.sw.gr { border-left-color: #2E7D32; }
.sw.bl { border-left-color: #1565C0; }
.sw-ic { font-size: 1.35rem; flex-shrink: 0; }
.sw-n { font-weight: 700; font-size: 1.1rem; color: var(--charcoal); }
.sw-l { font-size: .67rem; color: var(--ash); }
.card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); border: 1px solid var(--silver); margin-bottom: 1.25rem; overflow: hidden; }
.card-h { padding: 1rem 1.25rem; border-bottom: 1px solid var(--pearl); display: flex; align-items: center; justify-content: space-between; }
.card-t { font-weight: 600; font-size: .85rem; color: var(--charcoal); }
.card-b { padding: 1.25rem; }
.tw { overflow-x: auto; }
.tw table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tw th { font-size: .63rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ash); padding: .6rem 1rem; text-align: left; border-bottom: 1px solid var(--pearl); background: var(--canvas); }
.tw td { padding: .75rem 1rem; border-bottom: 1px solid var(--pearl); color: var(--charcoal); }
.tw tr:last-child td { border-bottom: none; }
.tw tr:hover td { background: var(--sapphire-mist); }

/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */

/* NAV */
@media (max-width: 900px) {
  .topbar { display: none; }
  .nav { height: 60px; padding: 0 1.25rem; }
  .nav-logo-text b { font-size: .95rem; }
  .nav-logo-text span { display: none; }
  .nav-logo-mark { width: 34px; height: 34px; font-size: .85rem; }
  .ham { display: flex; }
  .nav-links {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--sapphire); flex-direction: column; gap: 0;
    justify-content: center; align-items: center; padding: 5rem 2rem 2rem; z-index: 1;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; text-align: center; max-width: 280px; }
  .nav-links li:not(:last-child) { border-bottom: 1px solid rgba(169,129,74,.18); }
  .nav-links li a { font-size: 1.3rem; font-family: var(--fd); font-weight: 400; text-transform: none; letter-spacing: .02em; padding: .85rem; color: rgba(255,255,255,.9); }
  .nav-links li a::after { content: none; }
  .nav-cta { margin-top: 1.25rem; font-size: .75rem !important; padding: .8rem 2.5rem !important; background: transparent !important; border-color: var(--gold) !important; color: var(--gold) !important; }
}

/* HERO v2 */
@media (max-width: 900px) {
  .hero-v2-inner { grid-template-columns: 1fr; gap: 2.25rem; padding-bottom: 2.5rem; }
  .hero-v2-media { order: -1; aspect-ratio: 16/11; }
  .badges-row { gap: 1.25rem; }
}
@media (max-width: 480px) {
  .hero-v2-actions { flex-direction: column; }
  .hero-v2-actions .btn-primary, .hero-v2-actions .btn-outline { width: 100%; justify-content: center; }
  .badge-item { max-width: none; }
}

/* PILLARS */
@media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; } }

/* STATS BAR */
@media (max-width: 900px) { .stats-bar-inner { grid-template-columns: repeat(2,1fr); gap: 2rem; } }
@media (max-width: 480px) { .stats-bar-inner { grid-template-columns: 1fr; } }

/* SPLIT SECTIONS */
@media (max-width: 900px) {
  .split-v2 { grid-template-columns: 1fr; gap: 2.25rem; }
  .split-v2.rev .split-v2-media, .split-v2.rev .split-v2-body { order: initial; }
  .collage { grid-template-columns: 1fr; }
  .collage-col { flex-direction: row; }
}

/* TESTIMONIALS v2 */
@media (max-width: 900px) { .testi-v2-card { flex: 0 0 calc(50% - .75rem); } }
@media (max-width: 600px) { .testi-v2-card { flex: 0 0 100%; } .testi-v2-arrow { width: 36px; height: 36px; } }

/* CTA BAR v2 */
@media (max-width: 700px) { .cta-bar-v2 { flex-direction: column; align-items: flex-start; } .cta-bar-v2 .btn-primary { width: 100%; justify-content: center; } }

/* FOOTER v2 */
@media (max-width: 900px) { .footer-v2-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .footer-v2-grid { grid-template-columns: 1fr; } .footer-v2-bottom { flex-direction: column; align-items: flex-start; } }


/* SECTIONS */
@media (max-width: 768px) {
  .sec { padding: 3rem 1.25rem; }
  .sec-wrap { padding: 3rem 0; }
  .sec-inner { padding: 0 1.25rem; }
}

/* MARQUEE */
@media (max-width: 768px) { .marquee-item { font-size: .55rem; padding: 0 1rem; } .marquee-dot { display: none; } }

/* FEATURES */
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .features-grid { grid-template-columns: 1fr !important; } .feature-card { padding: 1.5rem 1.25rem; } }

/* SERVICE CAROUSEL */
@media (max-width: 768px) {
  .svc-carousel-outer { overflow-x: auto !important; overflow-y: visible; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: .5rem 1.25rem 1rem !important; margin: 0 -1.25rem !important; scrollbar-width: none; -ms-overflow-style: none; }
  .svc-carousel-outer::-webkit-scrollbar { display: none; }
  .svc-carousel-track { transform: none !important; gap: .875rem !important; padding-right: 1.25rem; }
  .svc-card { flex: 0 0 80vw !important; max-width: 280px; scroll-snap-align: start; }
  .carousel-nav { display: none !important; }
}
@media (max-width: 420px) { .svc-card { flex: 0 0 87vw !important; } }

/* STAFF */
@media (max-width: 768px) { .staff-grid { grid-template-columns: repeat(2,1fr) !important; gap: .875rem; } }
@media (max-width: 420px) { .staff-grid { grid-template-columns: 1fr !important; } }

/* TESTI */
@media (max-width: 900px) { .testi-card { flex: 0 0 calc(50% - .65rem); } }
@media (max-width: 600px) { .testi-card { flex: 0 0 88vw; } }

/* GALLERY */
@media (max-width: 768px) { .gallery-grid { columns: 2; } }
@media (max-width: 420px) { .gallery-grid { columns: 1; } }

/* CTA */
@media (max-width: 480px) { .cta-section { padding: 4rem 1.25rem; } .cta-actions { flex-direction: column; align-items: center; } .cta-actions .btn-primary, .cta-actions .btn-outline { width: 100%; max-width: 280px; justify-content: center; } }

/* BLOG */
@media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr !important; } }

/* CONTACT */
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr !important; gap: 2rem; } .contact-form-wrap { padding: 1.5rem 1.25rem; } }

/* PAGE HEADER */
@media (max-width: 480px) { .pg-hdr { padding: 3rem 1.25rem; } }

/* BOOKING */
@media (max-width: 600px) {
  .book-outer { padding: 1.5rem .875rem; }
  .book-body { padding: 1.5rem 1.25rem; }
  .form-row { grid-template-columns: 1fr; }
  #serviceGrid { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; }
  #staffGrid { grid-template-columns: repeat(3,1fr) !important; gap: .5rem !important; }
  #slotGrid { grid-template-columns: repeat(4,1fr) !important; gap: .35rem !important; }
}
@media (max-width: 380px) {
  #serviceGrid { grid-template-columns: 1fr !important; }
  #staffGrid { grid-template-columns: repeat(2,1fr) !important; }
  #slotGrid { grid-template-columns: repeat(3,1fr) !important; }
}

/* PARALLAX */
@media (max-width: 768px) {
  .parallax-split { grid-template-columns: 1fr !important; }
  .parallax-split-img { height: 220px; }
  .parallax-split-body { padding: 2rem 1.25rem !important; }
  .parallax-banner { height: 40vh; }
  .parallax-banner-quote { font-size: clamp(1.1rem,5vw,1.6rem); }
  .parallax-banner-content { padding: 1rem 1.25rem; }
}

/* FOOTER */
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
@media (max-width: 560px) { .footer { padding: 3rem 1.25rem 5rem; } .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } .footer-bottom { flex-direction: column; gap: .4rem; text-align: center; } }

/* FLOATING BUTTONS */
a[aria-label="WhatsApp"] { bottom: 1.5rem !important; right: 1.5rem !important; width: 50px !important; height: 50px !important; z-index: 8001 !important; }
#backTop { bottom: 1.5rem !important; left: 1.5rem !important; right: auto !important; z-index: 8000 !important; }

/* TOUCH TARGETS */
@media (max-width: 768px) {
  .btn-primary, .btn-outline, .btn-outline-dark, .svc-book-btn, .carousel-btn, .nav-cta { min-height: 48px; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea { font-size: 16px !important; min-height: 48px; }
}

/* PREVENT OVERFLOW */
html, body { max-width: 100vw; overflow-x: hidden; }
img, video { max-width: 100%; }
@media (max-width: 768px) {
  section, div, main, article { max-width: 100vw; }
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 2fr"],
  div[style*="grid-template-columns: 1fr 2fr"],
  div[style*="grid-template-columns:2fr 1fr"],
  div[style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* GIFT CARD */
@media (max-width: 768px) { .gift-grid { grid-template-columns: 1fr !important; } }