/* ================================
   LASH LOFT — LUXURY STYLES
   ================================ */

:root {
  /* Nude accent family — desaturated off the original peach so it reads
     neutral-warm rather than orange. --peach-deep also darkened so prices
     and eyebrow labels clear 3:1 against the cream card surface. */
  --peach: #D9C6B4;
  --peach-soft: #E9DBCC;
  --peach-deep: #967D66;
  /* Deeper nude reserved for TEXT on cream surfaces (prices, eyebrows).
     --peach-deep stays lighter for fills, borders and buttons, where it
     isn't carrying small type. */
  --nude-ink: #8B7259;
  --cream: #D5C9B9;
  --cream-light: #EFE8DE;
  --beige: #BFB2A0;
  --bronze: #6F5A49;
  --gold: #C9A961;
  --gold-light: #E0C896;
  --charcoal: #2B2420;
  --warm-gray: #6B5D54;
  --white: #FFFFFF;
  --shadow-soft: 0 10px 40px rgba(139, 90, 60, 0.08);
  --shadow-med: 0 20px 60px rgba(139, 90, 60, 0.15);
  --transition: cubic-bezier(0.77, 0, 0.175, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Jost', sans-serif;
  background: var(--cream);
  color: var(--charcoal);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

/* Geometric sans needs lighter weight + looser leading than the old serif
   at display sizes, or large headings read heavy and cramped. */
.section-title,
.page-hero h1,
.newsletter h2 {
  font-weight: 300;
}

p, li, a, label, input, button {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
}

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

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

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============ CURTAIN TRANSITION ============ */
/* Single sleek panel that slides down. One continuous downward motion:
   it drops in to cover on exit, and drops away to reveal on load. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: block;
}

.curtain-panel {
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: translateY(-100%);
  transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Markup ships 5 panels from the old multi-slat effect — collapse to one. */
.curtain-panel:nth-child(n + 2) { display: none; }

.curtain.active .curtain-panel { transform: translateY(0); }
.curtain.exit .curtain-panel { transform: translateY(100%); }

/* ---- Logo mark that rides the panel ---- */
.curtain-logo {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.34s ease 0.24s, transform 0.5s var(--transition) 0.24s;
}

.curtain-logo img {
  width: clamp(78px, 13vw, 124px);
  height: auto;
  display: block;
}

/* Driven by the panel's own state via the adjacent sibling, so the mark is
   always in step with the slide regardless of script timing. */
.curtain.active + .curtain-logo,
.curtain-logo.active {
  opacity: 1;
  transform: translateY(0);
}

/* Leaving: mark clears first so the panel slides away unencumbered.
   Declared after the rule above so it wins on equal specificity. */
.curtain.exit + .curtain-logo {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease 0s, transform 0.22s ease 0s;
}

@media (prefers-reduced-motion: reduce) {
  .curtain-panel,
  .curtain-logo { transition-duration: 0.01ms; transition-delay: 0s; }
}

/* ============ NAVBAR ============ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 24px 0;
  transition: all 0.4s ease;
  background: rgba(250, 240, 230, 0);
}

.navbar.scrolled {
  background: var(--cream-light);
  padding: 16px 0;
  box-shadow: var(--shadow-soft);
}

.nav-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  gap: 40px;
}

.nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  color: var(--charcoal);
  grid-column: 2;
}

.nav-logo img {
  height: 56px;
  width: auto;
  transition: height 0.4s ease;
}

.navbar.scrolled .nav-logo img { height: 44px; }

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.nav-left { justify-self: end; }
.nav-right { justify-self: start; }

.nav-left a, .nav-right a {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-light);
  position: relative;
  font-weight: 400;
  transition: color 0.3s;
}

.nav-left a::after, .nav-right a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--peach-soft);
  transition: width 0.4s var(--transition);
}

.nav-left a:hover::after, .nav-right a:hover::after,
.nav-left a.active::after, .nav-right a.active::after {
  width: 100%;
}

.navbar.scrolled .nav-left a,
.navbar.scrolled .nav-right a,
.navbar.inner .nav-left a,
.navbar.inner .nav-right a { color: var(--charcoal); }
.navbar.scrolled .nav-left a::after,
.navbar.scrolled .nav-right a::after,
.navbar.inner .nav-left a::after,
.navbar.inner .nav-right a::after { background: var(--peach-deep); }
.nav-logo img {
  transition: height 0.4s ease, transform 0.4s ease, filter 0.4s ease;
  filter: invert(1);
}
.navbar.scrolled .nav-logo img,
.navbar.inner .nav-logo img { filter: invert(0); }
.nav-logo:hover img { transform: scale(1.05); }

.nav-cta {
  background: var(--peach-deep) !important;
  color: var(--cream-light) !important;
  border: 1px solid rgba(255, 240, 225, 0.35);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.nav-cta::after { display: none !important; }
.navbar.scrolled .nav-cta,
.navbar.inner .nav-cta {
  background: var(--charcoal) !important;
  color: var(--cream-light) !important;
  border-color: var(--charcoal);
  box-shadow: 0 6px 18px -6px rgba(43, 36, 32, 0.4);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--peach-deep);
  transition: width 0.4s var(--transition);
}

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

.nav-cta {
  background: var(--charcoal);
  color: var(--cream-light) !important;
  /* Must not be `inline`: overflow:hidden has no effect on inline elements,
     which let the ::before shine escape the button and paint a grey block
     across the gap between the About and Contact links. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: all 0.4s var(--transition);
  position: relative;
  overflow: hidden;
}

.nav-cta::after { display: none !important; }

.nav-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
  transition: left 0.7s var(--transition);
  pointer-events: none;
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(193, 130, 90, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.nav-cta:hover::before { left: 120%; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 24px;
  flex-direction: column;
  justify-content: space-between;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  /* Sits over an unpredictable photo, so it's light with a shadow rather than
     a charcoal hairline — 1.5px charcoal disappeared against the hero image. */
  background: var(--cream-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  transition: 0.3s;
}

/* On light backgrounds the bars flip dark, matching the nav links. */
.navbar.scrolled .menu-toggle span,
.navbar.inner .menu-toggle span {
  background: var(--charcoal);
  box-shadow: none;
}

.menu-toggle.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ============ HERO ============ */
/* ============ HERO — Editorial layout ============ */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  /* JPEG first as the universal fallback; image-set delivers WebP where supported.
     48KB WebP / 114KB JPEG for a bright treatment-room shot — the old PNG was 1.5MB. */
  background-image: url('../images/landing.jpg');
  background-image: image-set(
    url('../images/landing.webp') type('image/webp'),
    url('../images/landing.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 110px clamp(28px, 4vw, 56px) 28px;
  color: var(--cream-light);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* The treatment-room shot is bright and back-lit exactly where the wordmark
     sits, so a general veil cannot win against pure white light. Solution:
     concentrate darkness on the LEFT HALF where the text lives, fading fast
     to the right so the picture still reads on desktop. Kept in one linear
     radial so the transition is smooth and doesn't look like a panel. */
  background:
    radial-gradient(ellipse 85% 75% at 22% 42%,
      rgba(20, 15, 12, 0.78) 0%,
      rgba(20, 15, 12, 0.55) 32%,
      rgba(20, 15, 12, 0.20) 60%,
      transparent 78%),
    linear-gradient(180deg, rgba(20, 15, 12, 0.35) 0%, transparent 22%),
    linear-gradient(180deg, transparent 55%, rgba(20, 15, 12, 0.60) 85%, rgba(20, 15, 12, 0.92) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero > * { position: relative; z-index: 2; }

.hero-image { display: none; }

/* TOP meta strip */
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: fadeUp 1s var(--transition) 0.2s forwards;
}

.hero-top-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--peach);
  display: inline-block;
}

/* MAIN big title */
.hero-main {
  align-self: flex-start;
  max-width: 70%;
  margin-bottom: auto;
  margin-top: clamp(40px, 8vh, 100px);
  opacity: 0;
  animation: fadeUp 1.1s var(--transition) 0.45s forwards;
}

.hero-title {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(4.5rem, 11vw, 11rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--cream-light);
  margin: 0;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.25);
}

.hero-reg {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.18em;
  vertical-align: top;
  color: var(--peach-soft);
  margin-left: 6px;
  letter-spacing: 0;
}

.hero-tagline {
  font-family: 'Jost', sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  line-height: 1.5;
  color: rgba(250, 240, 230, 0.88);
  max-width: 460px;
  margin-top: 28px;
}

.hero-tagline em {
  font-style: italic;
  color: var(--peach-soft);
}

/* BOTTOM info bar */
.hero-foot {
  width: 100%;
  border-top: 1px solid rgba(250, 240, 230, 0.18);
  padding-top: 24px;
  opacity: 0;
  animation: fadeUp 1s var(--transition) 0.7s forwards;
}

.hero-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto auto;
  gap: 48px;
  align-items: center;
}

.hero-foot-col { display: flex; flex-direction: column; gap: 12px; }

.hero-foot-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--peach);
}

.hero-foot-intro p {
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(250, 240, 230, 0.85);
  max-width: 460px;
  margin: 0;
}

/* Actions */
.hero-foot-actions {
  align-items: flex-start;
  gap: 14px;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--peach-deep);
  color: var(--cream-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 240, 225, 0.35);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-decoration: none;
  transition: box-shadow 0.4s var(--transition), transform 0.3s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.hero-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
  transition: left 0.7s var(--transition);
  pointer-events: none;
}

.hero-btn-primary:hover::before { left: 120%; }

.hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(193, 130, 90, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.hero-btn-primary .hero-btn-arrow { transition: transform 0.3s ease; }
.hero-btn-primary:hover .hero-btn-arrow { transform: translateX(4px); }

.hero-btn-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(250, 240, 230, 0.75);
  text-decoration: none;
  position: relative;
  padding-left: 22px;
}

.hero-btn-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--peach);
  transition: width 0.3s ease;
}

.hero-btn-link:hover { color: var(--cream-light); }
.hero-btn-link:hover::before { width: 18px; }

/* Featured card */
.hero-feature {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px 14px 14px;
  background: rgba(250, 240, 230, 0.08);
  border: 1px solid rgba(250, 240, 230, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
  min-width: 280px;
}

.hero-feature:hover { background: rgba(250, 240, 230, 0.14); transform: translateY(-2px); }

.hero-feature-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--peach-soft);
}

.hero-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-feature-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.hero-feature-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--peach);
  position: absolute;
  top: -4px;
  right: 0;
}

.hero-feature-title {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cream-light);
  margin-top: 2px;
}

.hero-feature-cta {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(250, 240, 230, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.hero-feature-cta .plus {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--peach);
}

/* Tablet */
@media (max-width: 1024px) {
  .hero-main { max-width: 90%; }
  .hero-foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-feature { min-width: 0; }
}

/* Mobile */
@media (max-width: 640px) {
  .hero { padding: 100px 22px 24px; }
  .hero-top { font-size: 0.6rem; letter-spacing: 0.2em; }
  .hero-top-right { display: none; }
  .hero-title { font-size: clamp(3rem, 16vw, 5rem); }
  .hero-tagline { font-size: 1rem; }
  .hero-feature { padding: 10px 18px 10px 10px; }
  .hero-feature-img { width: 46px; height: 46px; }
}

/* Portrait hero artwork for phones. The landscape source (1672x941) loses the
   whole reception counter when cropped to a tall screen; this crop is 852x1846,
   which is almost exactly a 375x812 phone ratio, so `cover` barely crops at all.
   First declaration is the JPEG fallback; browsers that understand image-set()
   take the WebP (57KB vs 135KB). Both beat the 1.6MB PNG original. */
@media (max-width: 768px) {
  .hero {
    background-image: url('../images/landing-mobile.jpg');
    background-image: image-set(
      url('../images/landing-mobile.webp') type('image/webp'),
      url('../images/landing-mobile.jpg') type('image/jpeg')
    );
    background-position: center center;
  }
}

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 38px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  border-radius: 50px;
  transition: all 0.4s var(--transition);
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--charcoal);
  color: var(--cream-light);
}

.btn-primary:hover {
  background: var(--peach-deep);
  transform: translateY(-3px);
  box-shadow: var(--shadow-med);
}

.btn-secondary {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
}

.btn-secondary:hover {
  background: var(--charcoal);
  color: var(--cream-light);
  transform: translateY(-3px);
}

.hero-image {
  position: relative;
  opacity: 0;
  animation: fadeIn 1.2s var(--transition) 0.4s forwards;
}

.hero-image-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-med);
}

.hero-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease;
}

.hero-image:hover .hero-image-frame img {
  transform: scale(1.05);
}

.hero-image-deco {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid var(--peach-deep);
  border-radius: 12px;
  top: -30px;
  right: -30px;
  z-index: -1;
}

.hero-badge {
  position: absolute;
  bottom: -30px;
  left: -30px;
  background: var(--cream-light);
  padding: 24px 32px;
  border-radius: 100px;
  box-shadow: var(--shadow-med);
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-badge-num {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 2.5rem;
  color: var(--peach-deep);
}

.hero-badge-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  line-height: 1.4;
}

.hero-scroll { display: none; }
.hero-scroll-old {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--warm-gray);
  opacity: 0;
  animation: fadeUp 1s var(--transition) 1.2s forwards;
}

.hero-scroll-line {
  width: 1px;
  height: 60px;
  background: var(--warm-gray);
  position: relative;
  overflow: hidden;
}

.hero-scroll-line::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 30px;
  background: var(--peach-deep);
  animation: scrollLine 2s infinite;
}

@keyframes scrollLine {
  0% { top: -30px; }
  100% { top: 60px; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============ MARQUEE ============ */
.marquee {
  background: var(--charcoal);
  color: var(--cream-light);
  padding: 24px 0;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 60px;
  animation: marquee 30s linear infinite;
  white-space: nowrap;
}

.marquee-track span {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 60px;
}

.marquee-track span::after {
  content: '✦';
  color: var(--peach);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ SECTIONS ============ */
section {
  padding: 120px 0;
  position: relative;
}

.section-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--nude-ink);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.section-eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--peach-deep);
}

.section-title {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  margin-bottom: 24px;
  color: var(--charcoal);
}

.section-title em {
  font-style: italic;
  color: var(--peach-deep);
}

.section-sub {
  font-family: 'Jost', sans-serif;
  font-size: 1.2rem;
  color: var(--warm-gray);
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 60px;
}

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

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.about-image {
  position: relative;
}

.about-image-main {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow-med);
}

.about-image-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-image-deco {
  position: absolute;
  bottom: -30px;
  right: -30px;
  background: var(--peach);
  width: 250px;
  height: 250px;
  border-radius: 12px;
  z-index: -1;
}

.about-stats {
  position: absolute;
  top: 40px;
  right: -60px;
  background: var(--cream-light);
  padding: 28px 36px;
  border-radius: 8px;
  box-shadow: var(--shadow-med);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-stats .num {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 3rem;
  color: var(--peach-deep);
  line-height: 1;
}

.about-stats .label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.about-features {
  list-style: none;
  margin: 40px 0;
}

.about-features li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--beige);
  font-family: 'Jost', sans-serif;
  font-size: 1.15rem;
  color: var(--charcoal);
}

.about-features li::before {
  content: '✦';
  color: var(--peach-deep);
  font-size: 1.2rem;
  margin-top: 2px;
}

.about-sign {
  margin-top: 32px;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--peach-deep);
}

.about-sign small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-top: 8px;
  font-style: normal;
}

/* ============ SERVICES ============ */
.services {
  background: var(--cream);
  position: relative;
}

.services-header {
  text-align: center;
  margin-bottom: 80px;
}

.services-header .section-eyebrow,
.services-header .section-sub {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

.services-header .section-sub {
  display: block;
  margin: 0 auto;
}

.service-categories {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.cat-btn {
  background: transparent;
  border: 1px solid var(--peach-deep);
  padding: 12px 28px;
  border-radius: 50px;
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s var(--transition);
}

.cat-btn:hover, .cat-btn.active {
  background: var(--charcoal);
  color: var(--cream-light);
  border-color: var(--charcoal);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--cream-light);
  padding: 36px;
  border-radius: 12px;
  transition: all 0.5s var(--transition);
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--peach-deep);
  transition: height 0.5s var(--transition);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-med);
  border-color: var(--peach-soft);
}

.service-card:hover::before {
  height: 100%;
}

.service-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 20px;
}

.service-card h3 {
  font-size: 1.5rem;
  color: var(--charcoal);
}

.service-card .price {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--nude-ink);
  white-space: nowrap;
}

.service-card .duration {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-gray);
  display: inline-block;
  padding: 4px 0;
}

.service-card-cat {
  display: inline-block;
  background: var(--peach-soft);
  color: var(--bronze);
  padding: 6px 14px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.service-card p {
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.6;
}

.service-cta {
  text-align: center;
  margin-top: 60px;
}

/* ============ TRAINING ============ */
.training {
  background: var(--charcoal);
  color: var(--cream-light);
  position: relative;
  overflow: hidden;
}

.training::before {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--peach-deep) 0%, transparent 70%);
  top: -400px;
  right: -400px;
  opacity: 0.15;
  filter: blur(80px);
}

.training-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.training .section-title {
  color: var(--cream-light);
}

.training .section-sub {
  color: rgba(250, 240, 230, 0.7);
}

.training .section-eyebrow {
  color: var(--peach);
}

.training .section-eyebrow::before {
  background: var(--peach);
}

.training-features {
  list-style: none;
  display: grid;
  gap: 20px;
  margin: 40px 0;
}

.training-features li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  background: rgba(232, 184, 158, 0.08);
  border-radius: 8px;
  border-left: 2px solid var(--peach);
}

.training-features .icon {
  width: 40px;
  height: 40px;
  background: var(--peach);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  color: var(--charcoal);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.training-features h4 {
  font-size: 1.2rem;
  margin-bottom: 6px;
  color: var(--cream-light);
}

.training-features p {
  font-family: 'Jost', sans-serif;
  color: rgba(250, 240, 230, 0.7);
  font-size: 1rem;
  line-height: 1.6;
}

.training-card {
  background: linear-gradient(180deg, rgba(250, 240, 230, 0.06) 0%, rgba(250, 240, 230, 0.02) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(232, 184, 158, 0.2);
  padding: 48px;
  border-radius: 16px;
  position: relative;
}

.training-card-badge {
  position: absolute;
  top: -16px;
  left: 48px;
  background: var(--peach);
  color: var(--charcoal);
  padding: 8px 20px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.training-card h3 {
  font-size: 2rem;
  margin: 16px 0 8px;
  color: var(--cream-light);
}

.training-card .price-big {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 3.5rem;
  color: var(--peach);
  margin: 24px 0;
}

.training-card .includes {
  list-style: none;
  margin: 24px 0;
  display: grid;
  gap: 12px;
}

.training-card .includes li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  color: rgba(250, 240, 230, 0.85);
  padding: 8px 0;
  border-bottom: 1px dashed rgba(232, 184, 158, 0.2);
}

.training-card .includes li::before {
  content: '✓';
  color: var(--peach);
  font-weight: bold;
}

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

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

/* ============ TRAINING GALLERY ============
   Portrait 2:3 graduate photos with certificates. Framed-print treatment
   rather than flat tiles — soft padded inner frame, warm shadow, gentle lift,
   and a logo watermark bottom-right on every image. */
.training-gallery {
  background: var(--cream-light);
  overflow: hidden;
  position: relative;
}
.training-gallery-header {
  text-align: center;
  margin-bottom: 60px;
}
.training-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
}
.training-gallery-tile {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 20px;
  padding: 10px;                                    /* soft inner frame */
  background: linear-gradient(180deg, #FAF3E9, #F0E6D6);
  border: 1px solid rgba(191, 178, 160, 0.55);
  box-shadow:
    0 30px 60px -30px rgba(43, 36, 32, 0.35),
    0 2px 6px -2px rgba(43, 36, 32, 0.12);
  transition: transform 0.55s var(--transition), box-shadow 0.55s var(--transition);
  overflow: hidden;
  isolation: isolate;
}
.training-gallery-tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream);
}
.training-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;      /* keep faces up in frame when cropped */
  display: block;
  transition: transform 1.4s var(--transition), filter 0.6s ease;
}
.training-gallery-tile:hover {
  transform: translateY(-8px);
  box-shadow:
    0 42px 80px -30px rgba(43, 36, 32, 0.55),
    0 4px 10px -2px rgba(43, 36, 32, 0.14);
}
.training-gallery-tile:hover img { transform: scale(1.045); }

/* Soft vignette that deepens on hover — helps the watermark read against
   bright backgrounds without ever obscuring the graduate's face. */
.training-gallery-tile-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(20, 15, 12, 0.28) 100%);
  opacity: 0.55;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.training-gallery-tile:hover .training-gallery-tile-inner::after { opacity: 0.85; }

/* Logo watermark — matches the homepage gallery pattern for brand consistency. */
.training-gallery-tile .tile-watermark {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 3;
  opacity: 0.85;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.training-gallery-tile:hover .tile-watermark {
  opacity: 1;
  transform: scale(1.08);
}

@media (max-width: 900px) {
  .training-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .training-gallery-tile { padding: 8px; border-radius: 16px; }
  .training-gallery-tile-inner { border-radius: 11px; }
  .training-gallery-tile .tile-watermark { width: 32px; height: 32px; bottom: 14px; right: 14px; }
}
@media (max-width: 480px) {
  .training-gallery-grid { gap: 12px; }
  .training-gallery-tile { padding: 6px; border-radius: 14px; }
  .training-gallery-tile-inner { border-radius: 9px; }
  .training-gallery-tile .tile-watermark { width: 26px; height: 26px; bottom: 10px; right: 10px; }
}

/* ============ TRAINING TEASER ============ */
.training-teaser {
  background: var(--charcoal);
  color: var(--cream-light);
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

.training-teaser::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--peach-deep) 0%, transparent 70%);
  top: -300px;
  right: -200px;
  opacity: 0.15;
  filter: blur(60px);
}

.teaser-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 2;
}

.teaser-text .section-title { margin-bottom: 16px; }
.teaser-text .section-sub { margin-bottom: 0; max-width: 600px; }

@media (max-width: 768px) {
  .teaser-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============ GALLERY ============ */
.gallery {
  background: var(--cream-light);
  position: relative;
  overflow: hidden;
}

.gallery::before {
  content: 'Gallery';
  position: absolute;
  top: 60px;
  right: -40px;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 14rem;
  /* --peach-soft sat within ~2 shades of the section background once the
     palette went nude, so the watermark vanished. Deeper tone, lower alpha. */
  color: var(--peach-deep);
  opacity: 0.2;
  line-height: 1;
  pointer-events: none;
  letter-spacing: -0.04em;
}

.gallery-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--peach-soft);
  box-shadow: 0 20px 50px -24px rgba(43, 36, 32, 0.4);
  transition: transform 0.5s var(--transition), box-shadow 0.5s var(--transition);
  isolation: isolate;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--transition), filter 0.6s ease;
  display: block;
}

/* Clean asymmetric bento — 6-col grid, no overlapping transforms */
.gallery-tile.t1 { grid-column: 1 / span 3; grid-row: 1 / span 2; }   /* hero tile, 3x2 */
.gallery-tile.t2 { grid-column: 4 / span 2; grid-row: 1 / span 1; }   /* top mid, 2x1 */
.gallery-tile.t3 { grid-column: 6 / span 1; grid-row: 1 / span 2; }   /* tall right, 1x2 */
.gallery-tile.t4 { grid-column: 4 / span 1; grid-row: 2 / span 1; }   /* small mid, 1x1 */
.gallery-tile.t5 { grid-column: 5 / span 1; grid-row: 2 / span 1; }   /* small mid, 1x1 */

.gallery-tile:hover { transform: translateY(-6px); box-shadow: 0 36px 70px -24px rgba(43, 36, 32, 0.55); }
.gallery-tile:hover img { transform: scale(1.06); filter: brightness(1.04); }

.gallery-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43,36,32,0.18) 0%, transparent 30%, transparent 60%, rgba(43, 36, 32, 0.45) 100%);
  opacity: 0.6;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.gallery-tile:hover::after { opacity: 1; }

/* Number badge in top-left corner */
.gallery-tile .tile-num {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--cream-light);
  background: rgba(43, 36, 32, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 11px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  border: 1px solid rgba(250, 240, 230, 0.18);
}

/* Logo watermark — bottom-right of every tile */
.gallery-tile .tile-watermark {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  z-index: 3;
  opacity: 0.75;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.gallery-tile:hover .tile-watermark { opacity: 1; transform: scale(1.08); }

/* Instagram CTA below gallery */
.gallery-insta {
  margin-top: 80px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.gallery-insta-card {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 28px 40px;
  background: var(--cream);
  border: 1px solid rgba(201, 149, 111, 0.25);
  border-radius: 100px;
  box-shadow: 0 20px 50px -28px rgba(43, 36, 32, 0.4);
  transition: transform 0.4s var(--transition), box-shadow 0.4s var(--transition);
  text-decoration: none;
}

.gallery-insta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -28px rgba(43, 36, 32, 0.55);
}

.gallery-insta-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F4D4BE, #C9956F);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-light);
  flex-shrink: 0;
}

.gallery-insta-text {
  text-align: left;
}

.gallery-insta-text .small {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peach-deep);
  margin-bottom: 4px;
}

.gallery-insta-text .handle {
  font-family: 'Jost', sans-serif;
  font-size: 1.4rem;
  color: var(--charcoal);
}

.gallery-insta-text .handle em {
  font-style: italic;
  color: var(--peach-deep);
}

.gallery-insta-arrow {
  font-size: 1.6rem;
  color: var(--charcoal);
  transition: transform 0.3s ease;
}
.gallery-insta-card:hover .gallery-insta-arrow { transform: translateX(6px); }

/* Tablet */
@media (max-width: 1024px) {
  .gallery-mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 16px;
  }
  .gallery-tile.t1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .gallery-tile.t2 { grid-column: 3 / span 2; grid-row: 1 / span 1; }
  .gallery-tile.t3 { grid-column: 3 / span 1; grid-row: 2 / span 1; }
  .gallery-tile.t4 { grid-column: 4 / span 1; grid-row: 2 / span 1; }
  .gallery-tile.t5 { grid-column: 1 / span 4; grid-row: 3 / span 1; }
  .gallery::before { font-size: 9rem; }
}

/* Mobile */
@media (max-width: 768px) {
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    gap: 12px;
  }
  .gallery-tile.t1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .gallery-tile.t2 { grid-column: 1 / span 1; grid-row: 3 / span 1; }
  .gallery-tile.t3 { grid-column: 2 / span 1; grid-row: 3 / span 1; }
  .gallery-tile.t4 { grid-column: 1 / span 1; grid-row: 4 / span 1; }
  .gallery-tile.t5 { grid-column: 2 / span 1; grid-row: 4 / span 1; }
  .gallery::before { display: none; }
  .gallery-insta-card { flex-direction: column; gap: 12px; padding: 24px; border-radius: 24px; }
  .gallery-insta-text { text-align: center; }
  .gallery-tile .tile-watermark { width: 32px; height: 32px; bottom: 10px; right: 10px; }
}

/* ============ TESTIMONIALS ============ */
.testimonials {
  background: var(--cream);
}

.testimonial-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  padding: 20px 0 40px;
}

/* 3-card layouts (e.g. training page) fit perfectly in 3 columns */
.testimonial-track:has(.testimonial-card:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

.testimonial-card {
  background: var(--cream-light);
  padding: 40px;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.testimonial-card p {
  flex: 1;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 10px;
  right: 30px;
  font-family: 'Jost', sans-serif;
  font-size: 6rem;
  color: var(--peach-soft);
  line-height: 1;
}

.testimonial-stars {
  color: var(--gold);
  margin-bottom: 20px;
  font-size: 1rem;
  letter-spacing: 2px;
}

.testimonial-card p {
  font-family: 'Jost', sans-serif;
  font-size: 1.15rem;
  color: var(--charcoal);
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--peach), var(--peach-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  color: var(--cream-light);
  font-size: 1.2rem;
}

.testimonial-name {
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  color: var(--charcoal);
}

.testimonial-role {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

/* ============ FAQ ============ */
.faq {
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

.faq::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--peach-soft) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  justify-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}

.faq-grid > .reveal {
  max-width: 640px;
}

/* === Carousel === */
.faq-carousel {
  position: relative;
  width: 100%;
}

.faq-stage {
  position: relative;
  height: 380px;
  perspective: 1200px;
}

.faq-card {
  position: absolute;
  inset: 0;
  background: var(--cream-light);
  border-radius: 28px;
  padding: 56px 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(201, 149, 111, 0.18);
  box-shadow:
    0 30px 60px -30px rgba(43, 36, 32, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.7s var(--transition), transform 0.7s var(--transition);
  pointer-events: none;
  overflow: hidden;
}

.faq-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* Soft peach accent at top */
.faq-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 56px;
  right: 56px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--peach-deep), transparent);
  border-radius: 0 0 6px 6px;
  opacity: 0.7;
}

/* Decorative bottom curl */
.faq-card::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--peach-soft) 0%, transparent 65%);
  opacity: 0.6;
  pointer-events: none;
}

/* Quote mark */
.faq-card .faq-mark {
  position: absolute;
  top: 36px;
  right: 50px;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 7rem;
  line-height: 1;
  color: var(--peach-soft);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

.faq-counter {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--peach-deep);
  letter-spacing: 0.08em;
  position: relative;
  z-index: 2;
}

.faq-counter .total { color: rgba(201, 149, 111, 0.55); }

.faq-q-text {
  font-family: 'Jost', sans-serif;
  font-size: 1.85rem;
  line-height: 1.25;
  color: var(--charcoal);
  margin: 28px 0 24px;
  position: relative;
  z-index: 2;
  letter-spacing: -0.01em;
}

.faq-q-text em {
  font-style: italic;
  color: var(--peach-deep);
}

.faq-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--peach-deep), transparent);
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}

.faq-a-text {
  font-family: 'Jost', sans-serif;
  font-size: 1.18rem;
  color: rgba(43, 36, 32, 0.78);
  line-height: 1.65;
  position: relative;
  z-index: 2;
}

/* Controls */
.faq-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
  position: relative;
  z-index: 3;
}

.faq-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(201, 149, 111, 0.4);
  background: var(--cream-light);
  color: var(--peach-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--transition);
  font-size: 1.1rem;
}

.faq-arrow:hover {
  background: var(--peach-deep);
  color: var(--cream-light);
  border-color: var(--peach-deep);
  transform: translateY(-2px);
}

.faq-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.faq-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(201, 149, 111, 0.3);
  cursor: pointer;
  transition: all 0.4s var(--transition);
  border: none;
  padding: 0;
}

.faq-dot.active {
  background: var(--peach-deep);
  width: 28px;
  border-radius: 999px;
}

.faq-dot:hover { background: var(--peach); }

@media (max-width: 1024px) {
  .faq-stage { height: 440px; }
  .faq-card { padding: 44px 36px 36px; }
  .faq-q-text { font-size: 1.5rem; }
  .faq-card .faq-mark { font-size: 5rem; right: 30px; }
}

@media (max-width: 768px) {
  .faq-stage { height: 480px; }
  .faq-card { padding: 36px 28px 28px; border-radius: 22px; }
  .faq-q-text { font-size: 1.3rem; margin: 22px 0 18px; }
  .faq-a-text { font-size: 1.05rem; }
  .faq-card .faq-mark { font-size: 4rem; top: 24px; right: 24px; }
}

/* ============ NEWSLETTER ============ */
.newsletter {
  background: var(--charcoal);
  color: var(--cream-light);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.newsletter::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background:
    radial-gradient(circle at 20% 20%, var(--peach-deep) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, var(--peach) 0%, transparent 40%);
  opacity: 0.15;
}

.newsletter-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}

.newsletter h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--cream-light);
  margin-bottom: 24px;
}

.newsletter h2 em {
  font-style: italic;
  color: var(--peach);
}

.newsletter p {
  font-family: 'Jost', sans-serif;
  font-size: 1.25rem;
  color: rgba(250, 240, 230, 0.7);
  margin-bottom: 40px;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 500px;
  margin: 0 auto;
  background: rgba(250, 240, 230, 0.08);
  padding: 8px;
  border-radius: 50px;
  border: 1px solid rgba(232, 184, 158, 0.3);
}

.newsletter-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 16px 24px;
  color: var(--cream-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  outline: none;
}

.newsletter-form input::placeholder {
  color: rgba(250, 240, 230, 0.5);
}

.newsletter-form button {
  background: var(--peach);
  color: var(--charcoal);
  border: none;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}

.newsletter-form button:hover {
  background: var(--cream-light);
  transform: scale(1.02);
}

.newsletter-perks {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.newsletter-perks span {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 240, 230, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}

.newsletter-perks span::before {
  content: '✦';
  color: var(--peach);
}

/* ============ CONTACT/HOURS ============ */
/* ============ CONTACT — Unified studio card ============ */
.contact-section {
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--peach-soft) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

/* Contact grid (Details + Open Hours) */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 2;
  align-items: start;
}

.contact-info-card,
.hours-card {
  background: var(--cream-light);
  border-radius: 20px;
  padding: 48px 44px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(201, 149, 111, 0.12);
}

.contact-info-card h3,
.hours-card h3 {
  font-family: 'Jost', sans-serif;
  font-size: 1.8rem;
  color: var(--charcoal);
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

.hours-card .sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--peach-deep);
  margin: -18px 0 24px;
}

/* Contact info list */
.contact-info-list {
  list-style: none;
  display: grid;
  gap: 22px;
  padding: 0;
  margin: 0;
}

.contact-info-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.contact-info-list .ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--peach-soft);
  color: var(--peach-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info-list li > div:last-child {
  padding-top: 4px;
}

.contact-info-list h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--peach-deep);
  margin: 0 0 6px;
  font-weight: 500;
}

.contact-info-list p,
.contact-info-list a {
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  color: var(--charcoal);
  margin: 0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-info-list a:hover { color: var(--peach-deep); }

/* Hours list */
.hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(201, 149, 111, 0.22);
}

.hours-list li:last-child { border-bottom: none; }

.hours-day {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--charcoal);
}

.hours-time {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--peach-deep);
}

.hours-closed {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(43, 36, 32, 0.35);
}

/* Map */
.map-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 480px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(201, 149, 111, 0.15);
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-overlay {
  position: absolute;
  bottom: 28px;
  left: 28px;
  background: var(--cream-light);
  padding: 20px 24px;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  display: flex;
  gap: 16px;
  align-items: center;
  max-width: 340px;
  z-index: 2;
  border: 1px solid rgba(201, 149, 111, 0.18);
}

.map-overlay .pin {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--peach-deep);
  color: var(--cream-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.map-overlay h4 {
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  color: var(--charcoal);
  margin: 0 0 4px;
}

.map-overlay p {
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  color: var(--warm-gray);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-info-card, .hours-card { padding: 36px 28px; }
  .map-wrap { height: 380px; }
  .map-overlay { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

.studio-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--cream-light);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -40px rgba(43, 36, 32, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  border: 1px solid rgba(201, 149, 111, 0.18);
  min-height: 620px;
}

/* LEFT: Details + Hours stacked */
.studio-left {
  padding: 56px 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  position: relative;
}

.studio-left::before {
  content: '';
  position: absolute;
  top: 56px;
  bottom: 48px;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 149, 111, 0.25), transparent);
}

.studio-section-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--peach-deep);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.studio-section-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--peach-deep);
}

.studio-block h3 {
  font-family: 'Jost', sans-serif;
  font-size: 1.8rem;
  color: var(--charcoal);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.studio-block h3 em { font-style: italic; color: var(--peach-deep); }

/* Compact info rows */
.studio-info {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.studio-info li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.studio-info .ico {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--peach-soft);
  color: var(--peach-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.studio-info .label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(43, 36, 32, 0.55);
  margin-bottom: 4px;
}

.studio-info .value {
  font-family: 'Jost', sans-serif;
  font-size: 1.08rem;
  color: var(--charcoal);
  line-height: 1.35;
}

.studio-info a.value { transition: color 0.3s ease; }
.studio-info a.value:hover { color: var(--peach-deep); }

/* Hours — 2-column condensed grid */
.studio-hours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
}

.studio-hours li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(201, 149, 111, 0.22);
  font-size: 0.92rem;
}

.studio-hours .day {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  color: var(--charcoal);
}

.studio-hours .time {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--peach-deep);
}

.studio-hours .closed {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(43, 36, 32, 0.3);
}

.studio-hours li.today {
  background: linear-gradient(90deg, var(--peach-soft) 0%, transparent 100%);
  padding-left: 12px;
  margin-left: -12px;
  border-radius: 6px 0 0 6px;
  border-bottom-color: transparent;
}

.studio-hours li.today .day::after {
  content: 'Today';
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-left: 8px;
  background: var(--peach-deep);
  color: var(--cream-light);
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
}

/* RIGHT: Map takes full half */
.studio-right {
  position: relative;
  background: var(--peach-soft);
  min-height: 620px;
}

.studio-right iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: contrast(0.95) saturate(0.85) sepia(0.1);
  transition: filter 0.5s ease;
}

.studio-right:hover iframe {
  filter: contrast(1) saturate(1) sepia(0);
}

/* Floating pin card */
.studio-pin-card {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  background: var(--cream-light);
  border-radius: 18px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 20px 40px -20px rgba(43, 36, 32, 0.45);
  z-index: 3;
  border: 1px solid rgba(201, 149, 111, 0.2);
}

.studio-pin-card .pin {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--peach-deep);
  color: var(--cream-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -6px rgba(201, 149, 111, 0.7);
}

.studio-pin-card .pin-text {
  flex: 1;
  min-width: 0;
}

.studio-pin-card .pin-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--peach-deep);
  margin-bottom: 4px;
}

.studio-pin-card .pin-addr {
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  color: var(--charcoal);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.studio-pin-card .pin-go {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--cream-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform 0.3s ease, background 0.3s ease;
}

.studio-pin-card .pin-go:hover {
  background: var(--peach-deep);
  transform: translateX(4px);
}

/* Top-right floating tag on map */
.studio-map-tag {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  background: rgba(43, 36, 32, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cream-light);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(250, 240, 230, 0.15);
}

.studio-map-tag::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6DD56D;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px #6DD56D;
}

/* Responsive */
@media (max-width: 1024px) {
  .studio-card { grid-template-columns: 1fr; }
  .studio-left { padding: 40px 36px; gap: 32px; }
  .studio-left::before { display: none; }
  .studio-right { min-height: 420px; }
  .studio-info, .studio-hours { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .studio-card { border-radius: 20px; }
  .studio-left { padding: 32px 24px; }
  .studio-info, .studio-hours { grid-template-columns: 1fr; }
  .studio-right { min-height: 380px; }
  .studio-pin-card { padding: 16px 18px; gap: 12px; left: 16px; right: 16px; bottom: 16px; }
  .studio-pin-card .pin-addr { font-size: 0.95rem; }
}

/* ============ FOOTER ============ */
.footer {
  background: var(--cream);
  padding: 80px 0 32px;
  border-top: 1px solid var(--beige);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}

.footer-brand h3 {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 2rem;
  color: var(--charcoal);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand img {
  height: 50px;
}

.footer-brand p {
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  color: var(--warm-gray);
  max-width: 360px;
  line-height: 1.7;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.footer-social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--beige);
  transition: all 0.3s;
  color: var(--charcoal);
}

.footer-social a:hover {
  background: var(--peach-deep);
  color: var(--cream-light);
  transform: translateY(-3px);
}

.footer-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 24px;
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  font-family: 'Jost', sans-serif;
  font-size: 1.05rem;
  color: var(--warm-gray);
  transition: color 0.3s;
}

.footer-col a:hover { color: var(--peach-deep); }

.footer-bottom {
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid var(--beige);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.footer-bottom em {
  font-style: italic;
  color: var(--peach-deep);
  font-family: 'Jost', sans-serif;
  letter-spacing: 0.1em;
  text-transform: none;
}

/* ============ WHATSAPP BUTTON ============ */
.whatsapp-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 64px;
  height: 64px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: all 0.3s;
  animation: pulse 2s infinite;
}

.whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(37, 211, 102, 0.5);
}

.whatsapp-btn svg {
  width: 32px;
  height: 32px;
  fill: white;
}

.whatsapp-tooltip {
  position: absolute;
  right: 80px;
  background: var(--charcoal);
  color: var(--cream-light);
  padding: 10px 18px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s;
  pointer-events: none;
}

.whatsapp-btn:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* ============ REVEAL ANIMATIONS ============ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--transition), transform 0.9s var(--transition);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============ INNER PAGE HEADER ============ */
.page-hero {
  padding: 200px 0 100px;
  background: var(--cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--peach) 0%, transparent 70%);
  top: -200px;
  right: -200px;
  opacity: 0.3;
  filter: blur(60px);
}

.page-hero h1 {
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--charcoal);
  margin-bottom: 20px;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--peach-deep);
}

.page-hero p {
  font-family: 'Jost', sans-serif;
  font-size: 1.3rem;
  color: var(--warm-gray);
  max-width: 600px;
  margin: 0 auto;
}

.breadcrumb {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--peach-deep);
  margin-bottom: 24px;
  position: relative;
}

/* Training page hero — image background */
.page-hero.training-hero {
  background: url('../images/training-hero.png') center/cover no-repeat, #1d1612;
  padding: 220px 0 120px;
  min-height: 560px;
  display: flex;
  align-items: center;
}

/* Services page hero — image background */
.page-hero.services-hero {
  background: url('../images/services-hero.png') center/cover no-repeat, #1d1612;
  padding: 220px 0 120px;
  min-height: 560px;
  display: flex;
  align-items: center;
}

.page-hero.services-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 10, 0.55) 0%, rgba(20, 14, 10, 0.35) 45%, rgba(20, 14, 10, 0.7) 100%);
  width: 100%;
  height: 100%;
  top: 0;
  right: auto;
  left: 0;
  opacity: 1;
  filter: none;
  z-index: 1;
}

.page-hero.services-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero.services-hero .breadcrumb {
  color: rgba(255, 240, 225, 0.8);
}

.page-hero.services-hero h1 {
  color: var(--cream-light);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.page-hero.services-hero h1 em {
  color: var(--peach);
}

.page-hero.services-hero p {
  color: rgba(250, 240, 230, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Products page hero — image background */
.page-hero.products-hero {
  background: url('../images/products-hero.png') center/cover no-repeat, #1d1612;
  padding: 220px 0 120px;
  min-height: 560px;
  display: flex;
  align-items: center;
}

.page-hero.products-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 10, 0.55) 0%, rgba(20, 14, 10, 0.35) 45%, rgba(20, 14, 10, 0.7) 100%);
  width: 100%;
  height: 100%;
  top: 0;
  right: auto;
  left: 0;
  opacity: 1;
  filter: none;
  z-index: 1;
}

.page-hero.products-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero.products-hero .breadcrumb {
  color: rgba(255, 240, 225, 0.8);
}

.page-hero.products-hero h1 {
  color: var(--cream-light);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.page-hero.products-hero h1 em {
  color: var(--peach);
}

.page-hero.products-hero p {
  color: rgba(250, 240, 230, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.page-hero.training-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 10, 0.55) 0%, rgba(20, 14, 10, 0.35) 45%, rgba(20, 14, 10, 0.7) 100%);
  width: 100%;
  height: 100%;
  top: 0;
  right: auto;
  left: 0;
  opacity: 1;
  filter: none;
  z-index: 1;
}

.page-hero.training-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero.training-hero .breadcrumb {
  color: rgba(255, 240, 225, 0.8);
}

.page-hero.training-hero h1 {
  color: var(--cream-light);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.page-hero.training-hero h1 em {
  color: var(--peach);
}

.page-hero.training-hero p {
  color: rgba(250, 240, 230, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* ============ PRODUCT PAGE ============ */
.product-showcase {
  background: var(--cream);
  padding: 100px 0 120px;
  position: relative;
  overflow: hidden;
}

.product-showcase::before {
  content: 'Lash Care';
  position: absolute;
  top: 80px;
  left: -30px;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 12rem;
  color: var(--peach-deep);
  opacity: 0.2;
  line-height: 1;
  pointer-events: none;
  letter-spacing: -0.04em;
}

.product-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.product-visual {
  position: relative;
  aspect-ratio: 1/1.05;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-visual::before {
  content: '';
  position: absolute;
  inset: 8% 12%;
  background: radial-gradient(circle at 50% 50%, var(--peach-soft) 0%, var(--peach) 60%, transparent 100%);
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.7;
  z-index: 1;
}

.product-visual::after {
  content: '';
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(201, 149, 111, 0.3);
  border-radius: 50%;
  z-index: 1;
}

.product-img-wrap {
  position: relative;
  z-index: 2;
  width: 88%;
  height: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatSlow 6s ease-in-out infinite;
}

.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(43, 36, 32, 0.25));
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.product-badge {
  position: absolute;
  top: 8%;
  right: 4%;
  z-index: 3;
  background: var(--charcoal);
  color: var(--cream-light);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  text-align: center;
  line-height: 1.1;
  box-shadow: 0 16px 30px -10px rgba(43, 36, 32, 0.4);
  transform: rotate(-8deg);
}
.product-badge .small {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  font-style: normal;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--peach);
}
.product-badge .big {
  font-size: 1.2rem;
}

.product-details .product-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--peach-deep);
  margin-bottom: 18px;
}

.product-details h1 {
  font-family: 'Jost', sans-serif;
  font-size: 3.6rem;
  line-height: 1.05;
  color: var(--charcoal);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.product-details h1 em {
  font-style: italic;
  color: var(--peach-deep);
}

.product-details .tagline {
  font-size: 1.1rem;
  color: rgba(43, 36, 32, 0.7);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 480px;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(201, 149, 111, 0.25);
}

.product-price {
  font-family: 'Jost', sans-serif;
  font-size: 2.6rem;
  color: var(--charcoal);
  letter-spacing: -0.02em;
}

.product-price-currency {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peach-deep);
}

.product-includes-title {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 18px;
  font-weight: 500;
}

.product-includes {
  list-style: none;
  margin-bottom: 36px;
}

.product-includes li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(201, 149, 111, 0.2);
  font-size: 1rem;
  color: var(--charcoal);
}

.product-includes li:last-child { border-bottom: none; }

.product-includes .ico {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--peach-soft);
  color: var(--peach-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 0.8rem;
  margin-top: 2px;
}

.product-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* WHY IT WORKS */
.product-why {
  background: var(--charcoal);
  color: var(--cream-light);
  padding: 100px 0;
}

.product-why .section-title { color: var(--cream-light); }
.product-why .section-sub { color: rgba(250, 240, 230, 0.7); }
.product-why .section-eyebrow { color: var(--peach); }

.product-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
}

.product-why-card {
  background: rgba(250, 240, 230, 0.04);
  border: 1px solid rgba(250, 240, 230, 0.08);
  padding: 36px 28px;
  border-radius: 16px;
  transition: transform 0.5s var(--transition), background 0.5s ease;
}
.product-why-card:hover {
  transform: translateY(-6px);
  background: rgba(250, 240, 230, 0.07);
}

.product-why-card .num {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 2.4rem;
  color: var(--peach);
  margin-bottom: 12px;
  line-height: 1;
}

.product-why-card h3 {
  font-family: 'Jost', sans-serif;
  font-size: 1.4rem;
  color: var(--cream-light);
  margin-bottom: 12px;
}

.product-why-card p {
  color: rgba(250, 240, 230, 0.75);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* HOW TO USE */
.product-howto {
  background: var(--cream-light);
  padding: 100px 0;
}

.howto-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
  position: relative;
}

.howto-steps::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--peach-deep) 0 6px, transparent 6px 14px);
  opacity: 0.4;
  z-index: 0;
}

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

.howto-step .step-num {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cream-light);
  border: 2px solid var(--peach-deep);
  color: var(--peach-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.howto-step h4 {
  font-family: 'Jost', sans-serif;
  font-size: 1.3rem;
  color: var(--charcoal);
  margin-bottom: 10px;
}

.howto-step p {
  color: rgba(43, 36, 32, 0.7);
  line-height: 1.6;
  font-size: 0.95rem;
  max-width: 280px;
  margin: 0 auto;
}

/* Product page responsive */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: 1fr; gap: 60px; }
  .product-visual { max-width: 480px; margin: 0 auto; }
  .product-why-grid, .howto-steps { grid-template-columns: 1fr; gap: 24px; }
  .howto-steps::before { display: none; }
  .product-details h1 { font-size: 2.8rem; }
  .product-showcase::before { font-size: 7rem; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .hero-grid, .about-grid, .training-grid, .contact-grid, .faq-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .about-stats { right: 20px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  section { padding: 80px 0; }
  .container { padding: 0 20px; }

  /* Unified mobile menu — stacks .nav-left on top half, .nav-right on bottom half */
  .nav-wrap { grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 0 20px; }
  .service-categories { max-width: 100%; }
  .nav-left, .nav-right {
    position: fixed;
    right: -110%;
    width: min(85%, 340px);
    background: var(--cream-light);
    flex-direction: column;
    align-items: center;
    gap: 22px;
    transition: right 0.5s var(--transition);
    box-shadow: -24px 0 60px -20px rgba(43, 36, 32, 0.35);
    z-index: 50;
    padding: 0 32px;
    margin: 0;
    list-style: none;
  }
  .nav-left {
    top: 0;
    height: 55vh;
    padding-top: 110px;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(201, 149, 111, 0.22);
  }
  .nav-right {
    top: 55vh;
    height: 45vh;
    padding-top: 36px;
    justify-content: flex-start;
  }
  .nav-left a, .nav-right a { color: var(--charcoal) !important; font-size: 0.85rem; }
  .nav-left.open, .nav-right.open { right: 0; }
  .nav-cta { padding: 14px 28px; }
  .menu-toggle {
    display: flex;
    justify-self: end;
    grid-column: 3;
    z-index: 60;
    align-self: center;
  }
  .nav-logo { grid-column: 2; }
  .nav-logo img { height: 44px; }

  /* Prevent scroll when mobile menu is open */
  body.menu-open { overflow: hidden; }

  /* Backdrop when menu is open */
  body.menu-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(43, 36, 32, 0.4);
    z-index: 40;
    animation: fadeIn 0.4s ease forwards;
  }

  /* Hero must fill the screen so nothing below it peeks in — you should have
     to scroll to reveal the next section. svh = the viewport with the browser
     chrome showing, so it fills exactly without overshooting like 100vh does. */
  .hero {
    padding-top: 120px;
    padding-bottom: 48px;
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero-text h1 { font-size: 2.8rem; }
  .hero-image-deco, .about-image-deco { display: none; }
  .about-stats { position: static; margin-top: 24px; }

  /* Service grid always 1-col on mobile — beats inline-style overrides via helper classes */
  .service-grid,
  .service-grid.cols-3,
  .service-grid.cols-4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-card { padding: 28px 24px; }
  .service-card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Keep at/above 24px so the soft nude still counts as large text
     for contrast purposes — dropping to 1.4rem made it fail. */
  .service-card .price { font-size: 1.5rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .newsletter-form { flex-direction: column; border-radius: 16px; }
  .newsletter-form button { padding: 16px; width: 100%; }
  .newsletter-perks { gap: 20px 24px; }
  .testimonial-track,
  .testimonial-track:has(.testimonial-card:nth-child(3):last-child) {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .testimonial-card { padding: 32px 26px; }
  .whatsapp-btn { width: 56px; height: 56px; bottom: 20px; right: 20px; }
  .whatsapp-tooltip { display: none; }
  .training-card { padding: 32px 24px; }
  .training-card .price-big { font-size: 2.8rem; margin: 20px 0; }
  .training-card-badge { left: 24px; }
  .training-features li { padding: 16px; gap: 14px; }
  .training-grid { grid-template-columns: 1fr; gap: 40px; }

  /* About page inline stats grid */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
    margin-top: 60px;
  }
  .stats-grid > div > div:first-child { font-size: 3.2rem !important; }

  /* Curtain logo text — was overflowing on mobile */
  .curtain-logo span {
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    padding: 0 20px;
    text-align: center;
  }

  /* Marquee smaller on mobile */
  .marquee-track span { font-size: 1.1rem; gap: 40px; }
  .marquee-track { gap: 40px; }

  /* Section eyebrows/titles */
  .section-title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .section-sub { font-size: 1.05rem; margin-bottom: 40px; }
  .section-eyebrow { font-size: 0.68rem; letter-spacing: 0.3em; }
  .section-eyebrow::before { width: 24px; }

  /* Page hero (inner pages) */
  .page-hero { padding: 160px 0 80px; }
  .page-hero.services-hero,
  .page-hero.products-hero,
  .page-hero.training-hero {
    padding: 160px 0 80px;
    min-height: auto;
  }
  .page-hero h1 { font-size: clamp(2.4rem, 9vw, 3.4rem); }
  .page-hero p { font-size: 1.05rem; padding: 0 8px; }

  /* Buttons — bigger tap targets */
  .btn-primary, .btn-secondary {
    padding: 16px 30px;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }

  /* Service categories row — horizontal scroll on mobile */
  .service-categories {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .service-categories::-webkit-scrollbar { display: none; }
  .cat-btn { flex-shrink: 0; padding: 10px 22px; font-size: 0.7rem; }

  /* About text prose */
  .about-grid { gap: 40px; }
  .about-features li { font-size: 1.05rem; }

  /* Product page */
  .product-details h1 { font-size: 2.4rem; }
  .product-details .tagline { font-size: 1rem; }
  .product-price { font-size: 2.2rem; }
  .product-actions { gap: 12px; }
  .product-actions .btn-primary,
  .product-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .product-showcase { padding: 60px 0 80px; }
  .product-badge {
    width: 76px;
    height: 76px;
    top: 4%;
    right: 2%;
  }
  .product-badge .big { font-size: 1rem; }
  .product-badge .small { font-size: 0.55rem; }

  /* Contact page form */
  .contact-form {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    gap: 16px;
  }
  .contact-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  /* Gallery insta */
  .gallery-insta { margin-top: 60px; }

  /* Contact info card */
  .contact-info-card, .hours-card { padding: 32px 24px; }
  .contact-info-card h3, .hours-card h3 { font-size: 1.5rem; }
  .contact-info-list li { gap: 14px; }
  .contact-info-list .ico { flex: 0 0 38px; width: 38px; height: 38px; }

  /* Studio hours single col */
  .studio-hours { grid-template-columns: 1fr; }

  /* FAQ carousel — enable content to overflow scroll instead of overlap */
  .faq-controls { gap: 16px; }
  .faq-arrow { width: 42px; height: 42px; }

  /* Hero foot column ordering */
  .hero-foot-grid { gap: 20px; }
  .hero-feature { min-width: 0; width: 100%; }
  .hero-btn-primary { justify-content: center; }
}

/* Contact form base styles (all viewports) */
.contact-form {
  max-width: 680px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: var(--cream-light);
  border: 1px solid var(--beige);
  padding: 18px 22px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--charcoal);
  outline: none;
  transition: border 0.3s ease;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--peach-deep); }
.contact-form-submit { justify-self: center; }

/* Stats grid base (about page) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 60px;
}

/* Extra-small phones */
@media (max-width: 400px) {
  .container { padding: 0 16px; }
  .hero { padding: 100px 18px 24px; }
  .hero-title { font-size: clamp(2.6rem, 15vw, 4rem); }
  .nav-logo img { height: 40px; }
  .service-card { padding: 24px 20px; }
  .stats-grid { gap: 24px 16px; }
  .stats-grid > div > div:first-child { font-size: 2.8rem !important; }
}