/* =========================
   Luxury Motion Tokens
========================= */
:root{
  --ease-lux: cubic-bezier(.16, 1, .25, 1);
  --dur-fast: 220ms;
  --dur-med: 520ms;
  --dur-slow: 900ms;

  --shadow-soft: 0 18px 55px rgba(0,0,0,0.10);
  --shadow-soft-hover: 0 26px 80px rgba(0,0,0,0.14);
}

/* =========================
   Base & Layout
========================= */
* { margin:0; padding:0; box-sizing:border-box; font-family:"Helvetica Neue", Arial, sans-serif; }
body { background:#fff; color:#2b2f33; line-height:1.7; }
.container { width:90%; max-width:1100px; margin:auto; }
.narrow { max-width:760px; margin:auto; text-align:center; }

/* Sticky header anchor offset fix */
section[id]{ scroll-margin-top:150px; }

/* Premium focus (keyboard + forms) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid rgba(255,255,255,0.55);
  outline-offset: 4px;
  border-radius: 12px;
}
.section a:focus-visible, .contact-form input:focus-visible, .contact-form textarea:focus-visible{
  outline: 3px solid rgba(79,143,191,0.35);
}

/* =========================
   Scroll Reveal (Luxury subtle)
========================= */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-lux), transform var(--dur-slow) var(--ease-lux);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* =========================
   Header & Navigation
========================= */
header { position:sticky; top:0; z-index:1200; background:#fff8f0; border-bottom:1px solid #e6eef5; }
.nav-container { display:flex; flex-direction:column; align-items:center; padding:25px 0; position:relative; }

.logo { display:flex; justify-content:center; }
.logo img { width:512px; max-width:90%; margin-bottom:5px; }

.hamburger{
  display:inline-flex;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  z-index:1300;
  background:transparent;
  border:0;
  padding:10px;
  border-radius:10px;
}
.hamburger span { width:26px; height:3px; background:#2b2f33; transition:0.3s; display:block; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

nav#navMenu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, -14px);
  width:min(780px, calc(100vw - 40px));
  margin-top:10px;

  background:rgba(255,248,240,0.94);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-radius:22px;
  box-shadow:0 22px 60px rgba(0,0,0,0.16);

  opacity:0;
  pointer-events:none;

  max-height:0;
  overflow:hidden;

  transition:
    max-height 0.85s var(--ease-lux),
    opacity 0.45s ease,
    transform 0.75s var(--ease-lux);

  z-index:1000;
}

nav#navMenu.open{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, 0);
  max-height:240px;
}

nav ul{
  list-style:none;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:30px;
  padding:18px 0 22px;
  margin:0;
}

nav a { position:relative; text-decoration:none; color:#2b2f33; font-weight:500; padding-bottom:6px; transition:color 0.3s ease; }
nav a::after { content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; background:#4f8fbf; transform:translateX(-50%); transition:width var(--dur-med) var(--ease-lux); }
nav a:hover, nav a.active { color:#4f8fbf; }
nav a:hover::after, nav a.active::after { width:100%; }

nav#navMenu li{
  opacity:0;
  transform:translateY(-10px);
  transition:
    opacity 0.55s ease,
    transform 0.70s var(--ease-lux);
}
nav#navMenu.open li{
  opacity:1;
  transform:translateY(0);
}
nav#navMenu.open li:nth-child(1){ transition-delay:0.12s; }
nav#navMenu.open li:nth-child(2){ transition-delay:0.18s; }
nav#navMenu.open li:nth-child(3){ transition-delay:0.24s; }
nav#navMenu.open li:nth-child(4){ transition-delay:0.30s; }

/* =========================
   Hero
========================= */
.hero {
  height: clamp(60vh, 80vh, 100svh);
  min-height: 520px;
  max-height: 900px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:white;
  position:relative;
  overflow:hidden;
}

/* Ensures BOTH hero videos (1080p + 720p) always scale/crop consistently */
.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* UPDATED: preserve top-left bloom while keeping bottom-right visible */
  object-position: 45% 40%;
  z-index:0;
  display:block;
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(139,188,217,0.55), rgba(139,188,217,0.62));
  z-index:1;
}

/* Optional ultra-subtle grain/texture */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0.06;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.10), transparent 45%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: overlay;
}

.hero-content {
  position:relative;
  z-index:3;
}

.hero h2 { font-size:3rem; font-weight:300; margin-bottom:15px; text-shadow:0 4px 20px rgba(0,0,0,0.35); }
.hero p { font-size:1.1rem; }
.medical-badge { display:block; margin-top:15px; font-size:0.7rem; letter-spacing:0.5px; opacity:0.9; }

/* =========================
   Buttons
========================= */
.btn {
  display:inline-block;
  margin-top:25px;
  padding:14px 40px;
  background:#4f8fbf;
  color:white;
  border-radius:40px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1px;
  transition: transform var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux), filter var(--dur-med) var(--ease-lux);
  box-shadow: 0 12px 34px rgba(79,143,191,0.20);
}
.btn:hover {
  transform:translateY(-1px);
  box-shadow:0 18px 46px rgba(79,143,191,0.28);
}

/* =========================
   Sections
========================= */
.section { padding:80px 0; background:#fff8f0; }
.section.soft { background:#f4f9fc; }
.section h2 { font-size:2rem; font-weight:400; color:#4f8fbf; margin-bottom:25px; }

/* =========================
   Signature Treatments
========================= */
#services .container { text-align:center; }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px; justify-items:center; margin-top:40px; }

.service-box {
  background:#fff8f0;
  padding:40px 30px;
  border-radius:12px;
  text-align:center;
  max-width:320px;
  width:100%;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux);
}
.service-box:hover {
  transform:translateY(-4px);
  box-shadow: var(--shadow-soft-hover);
}

/* =========================
   Results Section
========================= */
#results .container { text-align:center; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px; margin-top:40px; justify-items:center; }

.gallery-item {
  background:#fff8f0;
  padding:30px;
  border-radius:12px;
  max-width:360px;
  width:100%;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux);
}
.gallery-item:hover{
  transform:translateY(-4px);
  box-shadow: var(--shadow-soft-hover);
}

/* =========================
   Before / After Slider
========================= */
.ba-container { position:relative; width:100%; height:400px; overflow:hidden; border-radius:12px; }
.ba-container::after { content:"Drag to compare"; position:absolute; bottom:15px; left:50%; transform:translateX(-50%); padding:6px 16px; background:rgba(0,0,0,0.55); color:white; font-size:0.7rem; letter-spacing:0.5px; border-radius:20px; opacity:0; transition:opacity 0.25s ease; pointer-events:none; z-index:6; }
.ba-container:hover::after { opacity:1; }
.ba-container img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-after { clip-path:inset(0 0 0 50%); }
.ba-divider { position:absolute; top:0; bottom:0; left:50%; width:2px; background:white; z-index:3; }

.ba-slider {
  position:absolute;
  inset:0;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  cursor:ew-resize;
  z-index:4;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  height:100%;
}
.ba-slider::-webkit-slider-runnable-track{ background:transparent; }

.ba-slider::-webkit-slider-thumb { appearance:none; width:30px; height:30px; border-radius:50%; background:white; border:2px solid #4f8fbf; box-shadow:0 4px 12px rgba(0,0,0,0.25); }
.ba-slider::-moz-range-thumb{
  width:30px;
  height:30px;
  border-radius:50%;
  background:white;
  border:2px solid #4f8fbf;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}
.ba-slider::-moz-range-track{ background:transparent; border:0; }

/* Subtle thumb hint pulse (only while .hinting is present) */
@keyframes thumbPulse {
  0%   { transform: scale(1); box-shadow: 0 4px 12px rgba(0,0,0,0.20); }
  45%  { transform: scale(1.08); box-shadow: 0 10px 22px rgba(79,143,191,0.22); }
  100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0,0,0,0.20); }
}
.ba-container.hinting .ba-slider::-webkit-slider-thumb{ animation: thumbPulse 1.1s var(--ease-lux) infinite; }
.ba-container.hinting .ba-slider::-moz-range-thumb{ animation: thumbPulse 1.1s var(--ease-lux) infinite; }

.ba-label { position:absolute; top:15px; padding:6px 14px; background:rgba(0,0,0,0.55); color:white; font-size:0.75rem; border-radius:20px; z-index:5; }
.ba-label.before { left:15px; }
.ba-label.after { right:15px; }

/* =========================
   Contact Form & Spinner
========================= */
.contact-form { display:flex; flex-direction:column; position:relative; }
.contact-form input, .contact-form textarea { padding:14px; margin-bottom:15px; border:1px solid #dbe7f1; border-radius:6px; font-size:16px; }

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color: rgba(79,143,191,0.55);
  box-shadow: 0 0 0 5px rgba(79,143,191,0.12);
}

.form-spinner { display:flex; justify-content:center; margin-top:10px; }
.spinner { width:30px; height:30px; border:4px solid rgba(79,143,191,0.2); border-top-color:#4f8fbf; border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
.form-message { margin-top:12px; font-size:0.95rem; text-align:center; font-weight:500; }

/* =========================
   Footer
========================= */
footer { background:#4f8fbf; color:white; text-align:center; padding:25px; font-size:0.85rem; }

.footer-link{
  color:#fff;
  text-decoration:none;
  font-weight:500;
  border-bottom:1px solid rgba(255,255,255,0.4);
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.footer-link:hover{ opacity:0.85; border-bottom-color:#fff; }

.footer-pdf{ letter-spacing:0.2px; opacity:0.95; }
.footer-pdf:hover{ opacity:1; }

.footer-badges{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-top:14px;
}

.footer-badges img{
  height:36px;
  width:auto;
  display:block;
  opacity:0.95;
  transition: transform var(--dur-med) var(--ease-lux), opacity var(--dur-med) var(--ease-lux);
}

.footer-badges a:hover img,
.footer-badges .ahp-tooltip:hover img{
  transform: translateY(-2px);
  opacity:1;
}

.hcpc-badge:focus-visible{
  outline:3px solid rgba(255,255,255,0.7);
  outline-offset:4px;
  border-radius:6px;
}

/* Discreet AHP tooltip */
.ahp-tooltip{
  position:relative;
  display:inline-flex;
  cursor:help;
}

.ahp-tooltip-text{
  position:absolute;
  left:50%;
  bottom:130%;
  transform:translateX(-50%);
  width:260px;
  padding:10px 12px;
  background:rgba(0,0,0,0.85);
  color:#fff;
  font-size:0.75rem;
  line-height:1.4;
  border-radius:8px;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
  z-index:1000;
}

.ahp-tooltip-text::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border-width:6px;
  border-style:solid;
  border-color:rgba(0,0,0,0.85) transparent transparent transparent;
}

.ahp-tooltip:hover .ahp-tooltip-text,
.ahp-tooltip:focus .ahp-tooltip-text{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}

/* =========================
   Footer Social Icons
========================= */
.social-links{
  display:flex;
  justify-content:center;
  gap:14px;
  margin:0 0 16px;
}

.social-icon{
  width:38px;
  height:38px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: visible;
}

.social-icon svg{
  width:18px;
  height:18px;
  fill:#fff;
  transition: transform 0.25s ease;
}

.social-icon:hover{
  transform: translateY(-3px) scale(1.04);
  background: rgba(255,255,255,0.2);
  box-shadow: 0 14px 32px rgba(0,0,0,0.25);
}

.social-icon:hover svg{
  transform: scale(1.15);
}

/* =========================
   Brand Gradient Glows
========================= */
.social-icon::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  opacity:0;
  filter: blur(10px);
  transition: opacity 0.25s ease;
  z-index:-1;
}
.social-icon:hover::after{ opacity:1; }

.social-icon[aria-label="Facebook"]::after{
  background: radial-gradient(circle at center, #1877f2 0%, rgba(24,119,242,0.55) 45%, transparent 70%);
}
.social-icon[aria-label="Instagram"]::after{
  background: conic-gradient(from 0deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}
.social-icon[aria-label="TikTok"]::after{
  background: radial-gradient(circle at 35% 35%, rgba(0,242,234,0.75), transparent 60%),
              radial-gradient(circle at 65% 65%, rgba(255,0,80,0.65), transparent 60%);
}
.social-icon[aria-label="LinkedIn"]::after{
  background: radial-gradient(circle at center, #0a66c2 0%, rgba(10,102,194,0.55) 45%, transparent 70%);
}

/* =========================
   Responsive
========================= */
@media (max-width:768px) {
  nav#navMenu{
    left:0;
    right:0;
    width:calc(100% - 20px);
    transform:translateY(-14px);
    margin:0 10px;
    border-radius:0 0 22px 22px;
  }

  nav#navMenu.open{
    transform:translateY(0);
    max-height:360px;
  }

  nav ul { flex-direction:column; gap:18px; padding:20px 0; margin:0; }

  .ba-container { height:260px; }
  .hero h2 { font-size:2.2rem; }

  .hero { height: 75svh; }

  /* UPDATED: mobile framing for flowers (top-left + bottom-right) */
  .hero-video { object-position: 42% 35%; }

  /* Mobile-only: smaller badge size */
  .footer-badges img{ height:28px; }
}

/* Older iOS fallback (if svh isn't supported) */
@supports not (height: 1svh){
  @media (max-width:768px){
    .hero{ height: 75vh; }
  }
}

/* =========================
   Reduced Motion
========================= */
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
  .ba-container::after { opacity:1; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero::before{ display:none !important; }
}