/*==============================================================
  THE NEW LOOK — Hair Studio
  Stylesheet — mobile-first, no external CSS dependencies.

  Table of contents
  1.  Custom properties / tokens
  2.  Reset & base
  3.  Layout utilities
  4.  Buttons
  5.  Reveal / motion utilities
  6.  Header & navigation
  7.  Mobile bottom CTA bar
  8.  Hero slider
  9.  About
  10. Hair solutions cards
  11. Benefits grid
  12. Before & After
  13. Non-surgical / Home visit (split sections)
  14. Premium quality
  15. Consultation CTA (dark)
  16. Appointment form
  17. Contact / location
  18. Footer
  19. Responsive breakpoints (>=600, >=900, >=1200)
  ==============================================================*/

/* 1. CUSTOM PROPERTIES ------------------------------------------------ */
:root {
  --charcoal: #1f1f1f;
  --deep-black: #111111;
  --gold: #c8943d;
  --gold-light: #d8ad61;
  --warm-gray: #6b6b6b;
  --cream: #f8f6f2;
  --cream-alt: #f1ece3;
  --white: #ffffff;

  --gold-gradient: linear-gradient(135deg, var(--gold-light), var(--gold));

  --font-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --header-h: 84px;
  --header-h-compact: 68px;
  --mobile-bar-h: 64px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-soft: 0 12px 32px rgba(17, 17, 17, 0.08);
  --shadow-strong: 0 20px 48px rgba(17, 17, 17, 0.16);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 2. RESET & BASE ------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--mobile-bar-h);
}

body.nav-lock {
  overflow: hidden;
}

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--charcoal);
}

p {
  margin: 0 0 1em;
  color: var(--warm-gray);
}

address {
  font-style: normal;
}

button {
  font: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: var(--charcoal);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

section[id] {
  scroll-margin-top: var(--header-h-compact);
}

/* 3. LAYOUT UTILITIES --------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;
}

.section {
  padding-block: 64px;
}

.section--alt {
  background: var(--cream);
}

.section--tint {
  background: var(--cream-alt);
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.section--dark {
  background: linear-gradient(180deg, var(--charcoal), var(--deep-black));
  color: var(--cream);
}

.section--dark p {
  color: #c9c9c9;
}

.section--dark h2,
.section--dark h3 {
  color: var(--white);
}

.section-head {
  max-width: 720px;
  margin: 0 0 40px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  position: relative;
  padding-left: 28px;
}

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

.section-head.center .eyebrow {
  padding-left: 0;
}

.section-head.center .eyebrow::before {
  display: none;
}

.eyebrow--center {
  padding-left: 0;
}

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

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}

.lede {
  font-size: 1.05rem;
  color: var(--warm-gray);
}

.section--dark .lede {
  color: #c9c9c9;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  background: var(--charcoal);
  color: var(--white);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 12px;
}

/* 4. BUTTONS ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--gold-gradient);
  color: var(--deep-black);
  box-shadow: 0 10px 24px rgba(200, 148, 61, 0.35);
}

.btn-primary:hover {
  box-shadow: 0 14px 30px rgba(200, 148, 61, 0.45);
}

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

.btn-outline:hover {
  background: var(--charcoal);
  color: var(--white);
}

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

.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--deep-black);
}

.btn-white {
  background: var(--white);
  color: var(--charcoal);
}

.btn-white:hover {
  background: var(--cream);
}

.btn-whatsapp {
  background: #25d366;
  color: #08240f;
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 0.82rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* 5. REVEAL / MOTION ----------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.08s;
}
.reveal-delay-2 {
  transition-delay: 0.16s;
}
.reveal-delay-3 {
  transition-delay: 0.24s;
}
.reveal-delay-4 {
  transition-delay: 0.32s;
}
.reveal-delay-5 {
  transition-delay: 0.4s;
}

/* 6. HEADER & NAVIGATION -------------------------------------------------- */
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--header-h-compact);
  display: flex;
  align-items: center;
  /* No backdrop-filter here on purpose — a fixed header's blur has to be
     recomputed on every scroll frame (whatever's behind it keeps changing),
     which is a common source of scroll jank. The background is already
     88-97% opaque, so a blur added little visible softening anyway. */
  background: rgba(248, 246, 242, 0.94);
  box-shadow: 0 1px 0 rgba(200, 148, 61, 0.16);
  animation: fadeSlideDown 0.7s var(--ease) both;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease),
    height 0.35s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(248, 246, 242, 0.97);
  box-shadow: var(--shadow-soft);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
}

.brand img {
  display: block;
  /* Smaller by default — on the narrowest phones (~320-375px) a taller
     logo doesn't leave room next to the hamburger button and forces the
     whole page to overflow horizontally. Sized up from 400px and again
     on larger screens, where there's room to spare. */
  height: 40px;
  width: auto;
}

.nav-links-desktop {
  display: none;
}

.nav-links {
  display: flex;
  gap: 26px;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--charcoal);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold-gradient);
  transition: width 0.25s var(--ease);
}

.nav-links a:hover::after {
  width: 100%;
}

.header-cta {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--charcoal);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease),
    opacity 0.25s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

#primaryNav {
  position: fixed;
  top: var(--header-h-compact);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 960;
  background: var(--charcoal);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 32px 28px;
  overflow-y: auto;
}

#primaryNav.is-open {
  transform: translateX(0);
}

#primaryNav .nav-links {
  flex-direction: column;
  gap: 4px;
}

#primaryNav .nav-links a {
  display: block;
  padding: 14px 4px;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--cream);
}

#primaryNav .header-cta {
  display: block;
  margin-top: 24px;
  text-align: center;
}

/* 7. MOBILE BOTTOM CTA BAR -------------------------------------------------- */
@keyframes slideUpIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: grid;
  grid-template-columns: 1fr 2fr;
  background: var(--charcoal);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
  height: var(--mobile-bar-h);
  animation: slideUpIn 0.6s var(--ease) 0.25s both;
}

.mobile-cta-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--cream);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-cta-bar a:last-child {
  border-right: none;
}

.mobile-cta-bar a.bar-whatsapp {
  color: #3ddc7a;
}

.mobile-cta-bar a.bar-book {
  background: var(--gold-gradient);
  color: var(--deep-black);
}

.mobile-cta-bar svg {
  width: 20px;
  height: 20px;
}

/* 8. HERO SLIDER -------------------------------------------------------- */
.hero-slider {
  position: relative;
  /* Below 1180px a fixed bottom CTA bar covers the last var(--mobile-bar-h)
     of the viewport — without this, a 100vh hero lets its own buttons sit
     underneath that bar and become unreachable on shorter phones. */
  height: calc(100vh - var(--mobile-bar-h));
  min-height: 460px;
  max-height: 920px;
  overflow: hidden;
  background: var(--charcoal);
}

.hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0.62) 0%,
    rgba(17, 17, 17, 0.42) 40%,
    rgba(17, 17, 17, 0.8) 100%
  );
}

.hero-slide-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 3;
  /* Center content within the space below the fixed header, not the full
     slide height — otherwise, on short viewports, vertically-centered
     content can ride up underneath the (higher stacked, opaque) header
     and get hidden behind it. */
  padding-top: var(--header-h-compact);
}

.hero-slide-content .container {
  max-width: 680px;
  /* Override .container's margin-inline: auto (which centers it) so the
     slide content stays pinned to the left edge on every screen size. */
  margin-inline: 0;
  /* Extra left clearance so text never sits under the prev arrow
     (positioned at left: 16px, 46px wide → right edge at 62px). */
  padding-left: 78px;
}

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

.hero-headline {
  color: var(--white);
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  margin-bottom: 0.35em;
}

.hero-sub {
  color: var(--gold-light);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  margin-bottom: 0.6em;
  font-family: var(--font-sans);
}

.hero-text {
  color: #eae6de;
  font-size: 1.02rem;
  max-width: 520px;
  margin-bottom: 1.8em;
}

/* Hero content fade — a transition (not a one-shot animation) so it plays
   smoothly in BOTH directions: fading up in on the incoming slide, and
   fading back out on the outgoing slide as it slides away, instead of
   the text vanishing instantly the moment .is-active is removed. The
   first slide plays its fade-in on page load since it starts active. */
.hero-slide-content .eyebrow,
.hero-headline,
.hero-sub,
.hero-text,
.hero-slide-content .btn-group {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* Delays are deliberately pushed past the 0.9s track slide (see
   .hero-track) so the text reveal reads as its own distinct beat once the
   image has settled, instead of finishing at roughly the same moment the
   slide arrives (where it barely registered as a separate "fade"). */
.hero-slide.is-active .hero-slide-content .eyebrow {
  transition-delay: 0.5s;
}

.hero-slide.is-active .hero-headline {
  transition-delay: 0.62s;
}

.hero-slide.is-active .hero-sub {
  transition-delay: 0.74s;
}

.hero-slide.is-active .hero-text {
  transition-delay: 0.86s;
}

.hero-slide.is-active .btn-group {
  transition-delay: 0.98s;
}

.hero-slide.is-active .hero-slide-content .eyebrow,
.hero-slide.is-active .hero-headline,
.hero-slide.is-active .hero-sub,
.hero-slide.is-active .hero-text,
.hero-slide.is-active .btn-group {
  opacity: 1;
  transform: translateY(0);
}

/* The global prefers-reduced-motion rule (section 2, above) forces every
   transition/animation site-wide to ~0ms — correct for incidental motion,
   but it also silently swallows this hero reveal, which is a deliberate,
   actively-showcased feature rather than decoration. Restore real timing
   for it specifically; a class selector outranks the universal `*` the
   global rule uses, so this wins despite both using !important. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide-content .eyebrow,
  .hero-headline,
  .hero-sub,
  .hero-text,
  .hero-slide-content .btn-group {
    transition-duration: 0.7s !important;
  }

  .hero-track {
    transition-duration: 0.9s !important;
  }

  .site-header {
    animation-duration: 0.7s !important;
  }

  .mobile-cta-bar {
    animation-duration: 0.6s !important;
  }

  .reveal {
    transition-duration: 0.7s !important;
  }
}

/* On short viewports (small phones, or any phone in landscape) the full
   hero text stack can be taller than the available height and spill
   under the fixed bottom bar. Tighten the vertical rhythm rather than
   letting it overflow. */
@media (max-height: 600px) {
  .hero-slide-content {
    /* Centering can overflow both edges at once when content is taller
       than the available space. Anchoring to the top instead means only
       the least important trailing content (a second button) is ever at
       risk of running tight — never the logo/eyebrow/headline. */
    align-items: flex-start;
  }

  .hero-slide-content .container {
    padding-top: 20px;
  }

  .hero-slide-content .eyebrow {
    margin-bottom: 8px;
  }

  .hero-headline {
    font-size: clamp(1.5rem, 5.5vw, 3.6rem);
    margin-bottom: 0.2em;
  }

  .hero-sub {
    margin-bottom: 0.3em;
  }

  .hero-text {
    margin-bottom: 0.9em;
  }
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(17, 17, 17, 0.25);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.hero-arrow:hover {
  background: rgba(200, 148, 61, 0.5);
  border-color: var(--gold-light);
}

.hero-arrow--prev {
  left: 16px;
}
.hero-arrow--next {
  right: 16px;
}

.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--white);
  background: transparent;
  padding: 0;
  transition: background 0.25s var(--ease), width 0.25s var(--ease);
}

.hero-dot.is-active {
  background: var(--gold-gradient);
  border-color: var(--gold-light);
  width: 22px;
  border-radius: 5px;
}

/* 9. ABOUT --------------------------------------------------------------- */
.about-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.about-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
}

.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(200, 148, 61, 0.4);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.about-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(248, 246, 242, 0.94);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-soft);
}

.about-badge strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--gold);
}

.about-badge span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.about-content p {
  font-size: 1.02rem;
}

/* 10. HAIR SOLUTIONS CARDS ------------------------------------------------ */
.cards-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  max-width: 420px;
  margin-inline: auto;
}

.solution-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  display: flex;
  flex-direction: column;
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
}

.solution-card-media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--deep-black);
}

.solution-card-media img,
.solution-card-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.solution-card:hover .solution-card-media img,
.solution-card:hover .solution-card-media video {
  transform: scale(1.04);
}

.video-sound-toggle {
  position: absolute;
  right: 14px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.55);
  color: var(--white);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    opacity 0.3s var(--ease);
}

.video-sound-toggle:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.video-sound-toggle:focus-visible,
.video-play-toggle:focus-visible .video-play-icon {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* Sound only matters once a video is playing */
.solution-card-media:not(.is-playing) .video-sound-toggle {
  opacity: 0;
  pointer-events: none;
}

/* Full-cover play/pause control: big icon while paused, revealed on
   hover/focus while playing */
.video-play-toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 55%, rgba(17, 17, 17, 0.35));
  cursor: pointer;
  transition: background 0.3s var(--ease);
}

.video-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.35);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.video-play-icon .icon-play {
  margin-left: 4px; /* optically centre the triangle */
}

.video-play-toggle:hover .video-play-icon {
  transform: scale(1.08);
}

.video-play-toggle .icon-pause,
.video-play-toggle[aria-pressed="true"] .icon-play {
  display: none;
}

.video-play-toggle[aria-pressed="true"] .icon-pause {
  display: block;
}

.is-playing .video-play-toggle {
  background: transparent;
}

.is-playing .video-play-icon {
  opacity: 0;
  transform: scale(0.85);
}

.is-playing .video-play-toggle:hover .video-play-icon,
.is-playing .video-play-toggle:focus-visible .video-play-icon {
  opacity: 0.92;
  transform: scale(1);
}

@media (hover: none) {
  .is-playing .video-play-toggle:hover .video-play-icon {
    opacity: 0;
  }
}

.video-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

.video-progress span {
  display: block;
  height: 100%;
  background: var(--gold-gradient);
  transform: scaleX(0);
  transform-origin: left center;
}

.is-playing .video-progress,
.has-started .video-progress {
  opacity: 1;
}

.video-sound-toggle .icon-unmuted,
.video-sound-toggle[aria-pressed="true"] .icon-muted {
  display: none;
}

.video-sound-toggle[aria-pressed="true"] .icon-unmuted {
  display: block;
}

.solution-card-body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.solution-card-body h3 {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.solution-card-body p {
  font-size: 0.92rem;
  flex: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 6px;
}

.card-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s var(--ease);
}

.card-link:hover svg {
  transform: translateX(4px);
}

/* 11. BENEFITS GRID -------------------------------------------------------- */
.benefits-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

.benefit-card {
  background: var(--white);
  border: 1px solid rgba(200, 148, 61, 0.18);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  text-align: left;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold);
}

.benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.benefit-icon svg {
  width: 22px;
  height: 22px;
  color: var(--deep-black);
}

.benefit-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.benefit-card p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* 12. BEFORE & AFTER -------------------------------------------------------- */
.ba-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin: 0 -20px 24px;
  padding-inline: 20px;
  scrollbar-width: none;
}

.ba-scroller::-webkit-scrollbar {
  display: none;
}

.ba-card {
  flex: 0 0 82%;
  scroll-snap-align: center;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}

.ba-trigger {
  cursor: pointer;
}

.ba-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.65);
  color: var(--white);
  opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  pointer-events: none;
}

.ba-trigger:hover .ba-zoom,
.ba-trigger:focus-visible .ba-zoom {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ba-trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.ba-pair figure {
  margin: 0;
  position: relative;
}

.ba-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.ba-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.75);
  color: var(--white);
}

.ba-pair figure:last-child .ba-tag {
  background: var(--gold-gradient);
  color: var(--deep-black);
}

.ba-caption {
  padding: 14px 16px;
  font-size: 0.85rem;
  color: var(--warm-gray);
  border-top: 1px solid rgba(200, 148, 61, 0.15);
}

.ba-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}

.ba-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(107, 107, 107, 0.35);
  transition: background 0.25s var(--ease), width 0.25s var(--ease);
}

.ba-dot.is-active {
  background: var(--gold-gradient);
  width: 18px;
  border-radius: 4px;
}

.ba-disclaimer {
  font-size: 0.82rem;
  color: var(--warm-gray);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
}

.ba-cta {
  text-align: center;
}

/* Before & After lightbox ---------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 20px;
  background: rgba(17, 17, 17, 0.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-content {
  width: 100%;
  max-width: 860px;
  transform: scale(0.96);
  transition: transform 0.3s var(--ease);
}

.lightbox.is-open .lightbox-content {
  transform: scale(1);
}

.lightbox-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--charcoal);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
}

.lightbox-pair figure {
  margin: 0;
  position: relative;
}

.lightbox-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  display: block;
}

.lightbox-pair figure:last-child .ba-tag {
  background: var(--gold-gradient);
  color: var(--deep-black);
}

.lightbox-caption {
  text-align: center;
  color: var(--cream);
  font-size: 0.95rem;
  margin: 18px 0 0;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.lightbox-close:hover {
  background: rgba(200, 148, 61, 0.5);
  border-color: var(--gold-light);
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

/* 13. SPLIT SECTIONS (Non-surgical / Home visit) ---------------------------- */
.split {
  display: grid;
  gap: 40px;
  align-items: center;
}

.split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.split-media img.is-square {
  aspect-ratio: 1 / 1;
}

.split-reverse .split-media {
  order: 2;
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 24px 0 28px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.96rem;
}

.section--dark .check-list li {
  color: #e6e2d9;
}

.check-list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--gold);
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200, 148, 61, 0.12);
  border: 1px solid rgba(200, 148, 61, 0.4);
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.section--dark .badge-pill {
  background: rgba(200, 148, 61, 0.14);
}

/* 14. PREMIUM QUALITY -------------------------------------------------------- */
.quality-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.quality-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
}

.quality-media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.quality-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 24px 0 8px;
}

.quality-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  padding: 14px 16px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(17, 17, 17, 0.05);
}

.quality-list svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--gold);
  margin-top: 3px;
}

.quality-note {
  font-size: 0.82rem;
  color: var(--warm-gray);
  margin-top: 18px;
}

/* 15. CONSULTATION CTA -------------------------------------------------------- */
.cta-band {
  text-align: center;
}

.cta-band h2 {
  color: var(--white);
  max-width: 760px;
  margin-inline: auto;
}

.cta-band .lede {
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: 28px;
}

.cta-band .btn-group {
  justify-content: center;
}

/* 16. APPOINTMENT FORM -------------------------------------------------------- */
.appointment-grid {
  display: grid;
  gap: 40px;
}

.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  padding: 32px 24px;
}

/* WhatsApp booking card (stands in for the hidden appointment form) */
.wa-booking-card h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.wa-booking-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #25d366;
  color: #08240f;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.3);
}

.wa-steps {
  list-style: none;
  counter-reset: wa-step;
  margin: 24px 0 28px;
  padding: 0;
  display: grid;
  gap: 18px;
}

.wa-steps li {
  counter-increment: wa-step;
  position: relative;
  padding-left: 52px;
  min-height: 36px;
}

.wa-steps li::before {
  content: counter(wa-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: var(--deep-black);
  font-weight: 700;
  font-size: 0.95rem;
}

.wa-steps strong {
  display: block;
  color: var(--charcoal);
  font-size: 0.98rem;
  margin-bottom: 2px;
}

.wa-steps span {
  display: block;
  color: var(--warm-gray);
  font-size: 0.9rem;
}

.wa-booking-card .btn-block {
  justify-content: center;
}

.wa-booking-card .form-privacy {
  margin-top: 16px;
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Grid/flex items default to min-width: auto, which for a form control
     resolves to its intrinsic content width (e.g. a <select> sized to its
     longest option). Without this, a single long option/value can force
     .form-row — and every ancestor grid up to .appointment-grid — wider
     than the viewport instead of shrinking to fit it. */
  min-width: 0;
}

.field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 0.02em;
}

.field .required {
  color: var(--gold);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1.5px solid #e4ddce;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  background: var(--cream);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: var(--white);
  outline: none;
}

.field textarea {
  resize: vertical;
  min-height: 100px;
}

.form-privacy {
  font-size: 0.78rem;
  color: var(--warm-gray);
  margin-top: 14px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.form-privacy svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--gold);
}

.form-success {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: #eef8f1;
  border: 1px solid #b7e2c3;
  color: #1f5c33;
  font-size: 0.9rem;
}

.form-success a {
  font-weight: 700;
  color: #178a44;
  text-decoration: underline;
}

.appointment-aside {
  display: grid;
  gap: 16px;
  align-content: start;
}

.aside-card {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 22px;
  border: 1px solid rgba(200, 148, 61, 0.25);
}

.aside-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.aside-card p,
.aside-card address {
  font-size: 0.88rem;
  margin-bottom: 0;
}

.aside-card address {
  color: var(--warm-gray);
}

.aside-card a.aside-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 700;
  color: var(--gold);
  font-size: 0.88rem;
}

/* 18. FOOTER -------------------------------------------------------------------- */
.site-footer {
  background: var(--deep-black);
  color: #cfcfcf;
  padding-top: 56px;
}

.footer-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand img {
  height: 36px;
  margin-bottom: 14px;
}

/* The source logo file is drawn for light backgrounds (dark wordmark);
   flatten it to white so it reads on the dark footer while keeping a
   single logo asset as the source of truth. */
.footer-logo-img {
  filter: brightness(0) invert(1);
}

.footer-brand p {
  color: #9d9d9d;
  font-size: 0.88rem;
  max-width: 320px;
}

.footer-heading {
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-links {
  display: grid;
  gap: 10px;
}

.footer-links a {
  font-size: 0.9rem;
  color: #b8b8b8;
  transition: color 0.2s var(--ease);
}

.footer-links a:hover {
  color: var(--gold-light);
}

.footer-contact li {
  font-size: 0.9rem;
  color: #b8b8b8;
  margin-bottom: 10px;
}

.footer-contact a[href^="tel:"],
.footer-contact a[data-cfg-whatsapp] {
  white-space: nowrap;
}

.social-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.social-row a:hover {
  background: var(--gold-gradient);
  border-color: transparent;
}

.social-row svg {
  width: 16px;
  height: 16px;
  color: var(--white);
}

.social-row a:hover svg {
  color: var(--deep-black);
}

.footer-bottom {
  padding-block: 22px;
  text-align: center;
  font-size: 0.8rem;
  color: #8a8a8a;
}

/* 19. RESPONSIVE BREAKPOINTS ----------------------------------------------------- */
@media (min-width: 400px) {
  .brand img {
    height: 52px;
  }
}

@media (min-width: 560px) {
  .quality-list,
  .form-row.two-col {
    grid-template-columns: 1fr 1fr;
  }

  .ba-card {
    flex: 0 0 340px;
  }
}

@media (min-width: 720px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
    gap: 20px;
  }

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

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cards-grid {
    gap: 28px;
  }

  .benefits-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .ba-scroller {
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-inline: 0;
    padding-inline: 0;
  }

  .ba-card {
    flex: none;
  }

  .ba-dots {
    display: none;
  }

  .split {
    grid-template-columns: 1fr 1fr;
  }

  .quality-grid {
    grid-template-columns: 1fr 1fr;
  }

  .appointment-grid {
    grid-template-columns: 1.5fr 1fr;
  }

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

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

  .section {
    padding-block: 96px;
  }
}

/* The inline desktop nav (logo + 7 links + CTA button) needs real room to
   breathe — below this it wraps onto multiple lines and looks cluttered
   (this bit tablets, which the 900px breakpoint above treats as "desktop"
   for layout purposes but is too narrow for the full nav row). So the
   mobile hamburger + bottom bar pattern is kept all the way up to 1180px,
   well past typical tablet widths, and only the header nav switches here. */
@media (min-width: 1180px) {
  :root {
    --header-h: 96px;
    --header-h-compact: 76px;
  }

  body {
    padding-bottom: 0;
  }

  .brand img {
    height: 60px;
  }

  .hero-slider {
    /* No fixed bottom bar at this width — reclaim the full viewport. */
    height: 100vh;
    min-height: 560px;
  }

  .mobile-cta-bar,
  .nav-toggle {
    display: none;
  }

  /* The full-screen overlay nav is a mobile-only pattern; desktop uses
     .nav-links-desktop inline in the header instead. */
  #primaryNav {
    display: none;
  }

  .nav-links-desktop {
    display: flex;
    align-items: center;
  }

  .nav-links-desktop .nav-links {
    gap: 30px;
  }

  .header-cta {
    display: inline-flex;
  }
}

@media (min-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}