@font-face {
  font-family: 'Gloock';
  src: url('/fonts/Gloock/Gloock-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

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

:root {
  --gold: #e5c8a9;
  --gold-dark: #998064;
  --gold-deep: #60523e;
  --dark: #262320;
  --mid: #6b6258;
  --light-bg: #f5f3f0;
  --white: #fbf9f6;
  --cream: #f0ebe3;
  --divider: #e8e2da;
  --wine: #4a1c1c;
  --serif: 'Gloock', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
}

::selection {
  background: var(--gold-dark);
  color: var(--white);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
}

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.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;
}

.reveal-delay-5 {
  transition-delay: 0.5s;
}

/* NAV */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

header.site-header.compact {
  background: var(--white);
  box-shadow: 0 1px 0 var(--divider);
}

.header-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 0 40px;
  min-width: 0;
}

.nav-list {
  display: flex;
  gap: 20px;
  list-style: none;
  flex: 1;
  min-width: 0;
}

.nav-list.left {
  justify-content: space-evenly;
}

.nav-list.right {
  justify-content: space-evenly;
}

.nav-list a {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  opacity: 0.9;
  transition: color 0.3s, opacity 0.3s;
  position: relative;
}

.nav-list a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease;
}

.nav-list a:hover {
  color: var(--gold);
  opacity: 1;
}

.nav-list a:hover::after {
  transform: scaleX(1);
}

.nav-list .nav-current {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  cursor: default;
  position: relative;
  padding-bottom: 2px;
}
.nav-list .nav-current::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
}

header.site-header.compact .nav-list .nav-current { color: var(--gold-deep); }
header.site-header.compact .nav-list .nav-current::after { background: var(--gold-deep); }

header.site-header.compact .nav-list a {
  color: var(--dark);
}

header.site-header.compact .nav-list a:hover {
  color: var(--gold-dark);
}

/* MOBILE TOGGLE */
.mob-toggle {
  display: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  z-index: 10001;
}

.mob-toggle span {
  display: block;
  height: 1px;
  background: var(--white);
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.3s, width 0.3s;
  transform-origin: center;
}

.mob-toggle span:nth-child(1) {
  width: 22px;
}

.mob-toggle span:nth-child(2) {
  width: 14px;
}

.mob-toggle span:nth-child(3) {
  width: 22px;
}

.mob-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  width: 22px;
}

.mob-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(6px);
}

.mob-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  width: 22px;
}

header.site-header.compact .mob-toggle span {
  background: var(--dark);
}

/* MOBILE SHARE (SOCIAL) BUTTON */
.share-wrap {
  display: none;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10001;
}

.share-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white);
  transition: color 0.3s, filter 0.3s;
}

.share-btn svg {
  width: 23px;
  height: 23px;
}

header.site-header.compact .share-btn {
  color: var(--dark);
}

.share-wrap.open .share-btn {
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(229, 200, 169, 0.8));
}

.share-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 10000;
}

.share-wrap.open .share-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.share-panel a {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  text-decoration: none;
  background: rgba(20, 16, 14, 0.35);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 200, 169, 0.35);
  box-shadow: 0 0 14px rgba(229, 200, 169, 0.25);
  transition: box-shadow 0.3s, background 0.3s, color 0.3s, transform 0.2s;
}

.share-panel a svg {
  width: 20px;
  height: 20px;
}

.share-panel a:hover,
.share-panel a:active {
  background: rgba(229, 200, 169, 0.9);
  color: var(--dark);
  box-shadow: 0 0 22px rgba(229, 200, 169, 0.55);
  transform: scale(1.08);
}

.share-wrap.open .share-panel a { animation: sharePop 0.4s ease both; }
.share-wrap.open .share-panel a:nth-child(1) { animation-delay: 0s; }
.share-wrap.open .share-panel a:nth-child(2) { animation-delay: 0.05s; }
.share-wrap.open .share-panel a:nth-child(3) { animation-delay: 0.1s; }
.share-wrap.open .share-panel a:nth-child(4) { animation-delay: 0.15s; }
.share-wrap.open .share-panel a:nth-child(5) { animation-delay: 0.2s; }
.share-wrap.open .share-panel a:nth-child(6) { animation-delay: 0.25s; }

@keyframes sharePop {
  from { opacity: 0; transform: translateY(-8px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* MOBILE NAV OVERLAY */
.mob-nav {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: var(--dark);
  transform: translateX(100%);
  transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.mob-nav.open {
  transform: translateX(0);
  pointer-events: all;
}

.mob-nav-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 148px 36px max(56px, env(safe-area-inset-bottom, 56px));
  position: relative;
  overflow: hidden;
  transition: padding-top 0.5s ease;
}

header.site-header.compact~.mob-nav .mob-nav-inner {
  padding-top: 90px;
}

.mob-nav-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(229, 200, 169, 0.14);
}

.mob-link {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--serif);
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 400;
  color: rgba(245, 242, 236, 0.9);
  text-decoration: none;
  text-transform: none;
  letter-spacing: -0.5px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(229, 200, 169, 0.14);
  opacity: 0;
  transform: translateX(22px);
  transition: opacity 0.5s ease calc(var(--i) * 0.07s + 0.12s),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 0.07s + 0.12s),
    color 0.25s;
}

.mob-nav.open .mob-link {
  opacity: 1;
  transform: translateX(0);
}

.mob-link::before {
  display: none;
}

.mob-link::after {
  content: '→';
  flex-shrink: 0;
  color: var(--gold);
  font-size: 14px;
  line-height: 1;
  animation: arrowPing 2s ease-in-out infinite;
}

.mob-link:hover,
.mob-link:active {
  color: var(--gold);
}

.mob-nav-footer {
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.56s, transform 0.5s ease 0.56s;
  text-align: center;
}

.mob-nav.open .mob-nav-footer {
  opacity: 1;
  transform: translateY(0);
}

.mob-book {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--gold);
  color: var(--dark);
  border: 1px solid var(--gold);
  border-radius: 50px;
  text-decoration: none;
  padding: 14px 36px;
  transition: background 0.3s, color 0.3s;
}

.mob-book:hover,
.mob-book:active {
  background: var(--gold);
  color: var(--dark);
}

.mob-nav-stamp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.06;
  pointer-events: none;
}

.mob-nav-tagline {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--light-bg);
  text-transform: uppercase;
}

.mob-nav-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.mob-nav-social a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  text-decoration: none;
  transition: border-color 0.3s, color 0.3s;
}

.mob-nav-social a svg {
  width: 16px;
  height: 16px;
}

.mob-nav-social a:hover,
.mob-nav-social a:active {
  border-color: var(--gold);
  color: var(--gold);
}

/* Short/medium viewports (most phones) — compact the menu so it fits without scrolling */
@media (max-height: 860px) {
  .mob-nav-inner {
    padding: 140px 36px max(32px, env(safe-area-inset-bottom, 32px));
  }

  header.site-header.compact~.mob-nav .mob-nav-inner {
    padding-top: 80px;
  }

  .mob-link {
    font-size: clamp(22px, 6.5vh, 38px);
    padding: 8px 0;
  }

  .mob-nav-footer {
    padding-top: 14px;
    gap: 10px;
  }

  .mob-nav-social {
    gap: 10px;
  }

  .mob-nav-social a {
    width: 38px;
    height: 38px;
  }

  .mob-nav-social a svg {
    width: 15px;
    height: 15px;
  }
}

/* Genuinely short phones — pull back a bit further to keep it scroll-free */
@media (max-height: 700px) {
  .mob-nav-inner {
    padding: 140px 36px max(20px, env(safe-area-inset-bottom, 20px));
  }

  .mob-link {
    font-size: clamp(20px, 6vh, 32px);
    padding: 7px 0;
  }

  .mob-nav-footer {
    padding-top: 10px;
    gap: 8px;
  }

  .mob-nav-social a {
    width: 36px;
    height: 36px;
  }

  .mob-nav-social a svg {
    width: 14px;
    height: 14px;
  }
}

/* Narrow phones — takes precedence over the height tiers above so the row never wraps */
@media (max-width: 360px) {
  .mob-nav-social {
    gap: 6px;
  }

  .mob-nav-social a {
    width: 34px;
    height: 34px;
  }

  .mob-nav-social a svg {
    width: 13px;
    height: 13px;
  }
}

.logo-wrap {
  position: relative;
  width: 220px;
  flex-shrink: 0;
  height: 130px;
  transition: height 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

header.site-header.compact .logo-wrap {
  height: 64px;
  overflow: hidden;
}

.logo-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.logo-default {
  height: 108px;
  transform: translate(-50%, calc(-50% + 7px));
  opacity: 1;
  object-fit: contain;
}

.logo-compact {
  height: 108px;
  width: auto;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  object-fit: contain;
}

header.site-header.compact .logo-default {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

header.site-header.compact .logo-compact {
  opacity: 1;
  transform: translate(-50%, -58%) scale(1);
}

/* SOCIAL SIDEBAR */
.social-sidebar {
  position: fixed;
  left: 22px;
  top: 49.35%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.3s ease;
}

.social-sidebar a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  text-decoration: none;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(38, 35, 32, .22);
  animation: socialGlow 2s ease-in-out infinite;
  transition: background 0.3s, color 0.3s, transform 0.2s, box-shadow 0.2s;
}

.social-sidebar a svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.social-sidebar a.social-x svg {
  width: 23px;
  height: 23px;
}

.social-sidebar a:hover {
  background: var(--dark);
  color: var(--gold);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 22px rgba(38, 35, 32, .28);
  animation: none;
}

/* BOOK SIDEBAR */
.book-sidebar {
  position: fixed;
  right: -120px;
  top: 52%;
  transform: translateY(-50%) rotate(270deg);
  z-index: 200;
  transition: opacity 0.3s ease;
}

.book-sidebar a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  white-space: nowrap;
  width: 320px;
  justify-content: space-between;
  transition: transform 0.2s;
}

.book-sidebar a span {
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dark);
  font-weight: 600;
  background: var(--gold);
  border-radius: 20px;
  padding: 8px 45px;
  box-shadow: 0 0 12px rgba(38, 35, 32, .20);
  animation: bookGlow 2s ease-in-out infinite;
  transition: background 0.3s, color 0.3s, box-shadow 0.2s;
}

.book-sidebar a:hover {
  transform: translateY(-2px) scale(1.06);
}

.book-sidebar a:hover span {
  background: var(--dark);
  color: var(--gold);
  box-shadow: 0 8px 22px rgba(38, 35, 32, .28);
  animation: none;
}

.book-stamp {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
  max-width: 30px; /* добавь это */
  max-height: 30px; /* и это */
}
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: 0.6;
    transform: scale(0.88)
  }
}

@keyframes arrowPing {

  0%,
  100% {
    transform: translateX(0);
    opacity: 0.6
  }

  50% {
    transform: translateX(12px);
    opacity: 1
  }
}

@keyframes playRipple {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 200, 169, 0.85)
  }

  65% {
    box-shadow: 0 0 0 18px rgba(229, 200, 169, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(229, 200, 169, 0)
  }
}

@keyframes socialGlow {

  0%,
  100% {
    box-shadow: 0 0 14px rgba(38, 35, 32, .22)
  }

  50% {
    box-shadow: 0 0 24px rgba(229, 200, 169, 0.75), 0 0 8px rgba(229, 200, 169, 0.35)
  }
}

@keyframes bookGlow {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(38, 35, 32, .20)
  }

  50% {
    box-shadow: 0 0 28px rgba(229, 200, 169, 0.65)
  }
}

/* Hide sidebars only when hovering leftmost / rightmost procedure card */
body:has(.proc-card:nth-child(1):hover) .social-sidebar,
body:has(.proc-card:nth-child(1).proc-open) .social-sidebar {
  opacity: 0;
  pointer-events: none;
}

body:has(.proc-card:nth-child(6):hover) .book-sidebar,
body:has(.proc-card:nth-child(6).proc-open) .book-sidebar {
  opacity: 0;
  pointer-events: none;
}

/* HERO */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 650px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: max(140px, calc(100px + env(safe-area-inset-bottom)));
  background: var(--dark);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #383434 0%, #282828 60%, #1e1e1e 100%);
  overflow: hidden;
}

.hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 14, 12, 0.80) 0%, transparent 28%), linear-gradient(to top, rgba(40, 40, 40, 0.88) 0%, rgba(40, 40, 40, 0.35) 50%, rgba(40, 40, 40, 0.12) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 40px;
}

.hero-h1 {
  font-size: clamp(36px, 5.5vw, 70px);
  font-weight: 400;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
  font-family: var(--serif);
}

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

.hero-divider {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 20px auto;
}

.hero-sub {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  max-width: 560px;
  margin: 0 auto 36px;
  font-weight: 300;
}

.hero-cta {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 14px 38px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  border-radius: 50px;
  transition: background 0.3s, color 0.3s;
}

.hero-cta:hover {
  background: var(--gold);
  color: var(--dark);
}

.accred-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.accred-track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: accredScroll 36s linear infinite;
}

.accred-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.accred-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.accred-link:hover .accred-logo {
  opacity: .85;
}
.accred-link:hover .accred-fallback {
  color: rgba(255, 255, 255, .75);
}

.accred-logo {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  pointer-events: none;
}

.accred-logo--bbc {
  height: 56px;
}

.accred-fallback {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  white-space: nowrap;
}

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

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

/* SHARED */
.section-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

.section-title {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  font-family: var(--serif);
}

.section-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.section-title i {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-dark);
}

.section-body {
  font-size: 14px;
  color: var(--gold-deep);
  line-height: 1.8;
  font-weight: 400;
  margin-top: 12px;
}

.gold-rule {
  width: 38px;
  height: 1px;
  background: var(--gold);
  margin: 18px 0;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 13px 34px;
  border: 1px solid var(--dark);
  color: var(--dark);
  text-decoration: none;
  font-weight: 500;
  border-radius: 50px;
  transition: background 0.3s, color 0.3s;
}
.btn-outline .arr {
  font-size: 14px;
  line-height: 1;
}

.btn-outline:hover {
  background: var(--gold);
  color: var(--dark);
  border: 1px solid var(--gold);
}

.btn-outline-dark {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 13px 34px;
  border: 1px solid var(--dark);
  color: var(--dark);
  text-decoration: none;
  font-weight: 500;
  border-radius: 50px;
  transition: background 0.3s, color 0.3s;
}

.btn-outline-dark:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}

/* PROCEDURES */
.procedures-section {
  padding: 90px 0 0;
  background: var(--white);
}

.procedures-header {
  padding: 0 60px;
  margin-bottom: 48px;
  text-align: center;
}

.procedures-header .gold-rule {
  margin: 18px auto;
}

.procedures-header .btn-outline-dark {
  color: var(--dark);
  border-color: var(--dark);
}

.procedures-header .btn-outline-dark:hover {
  border-color: transparent;
}

.procedures-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.procedures-footer {
  text-align: center;
  padding: 52px 60px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.proc-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3/5;
}

.proc-card:nth-child(1) .proc-bg {
  background: url('../img/procedures/body.webp') center / cover no-repeat, radial-gradient(ellipse at center, #c4c1bb 0%, #999999 100%);
}

.proc-card:nth-child(2) .proc-bg {
  background: url('../img/procedures/face.webp') center / cover no-repeat, radial-gradient(ellipse at center, #c4c1bb 0%, #999999 100%);
}

.proc-card:nth-child(3) .proc-bg {
  background: url('../img/procedures/breasts.webp') center / cover no-repeat, radial-gradient(ellipse at center, #c4c1bb 0%, #999999 100%);
}

.proc-card:nth-child(4) .proc-bg {
  background: url('../img/procedures/skin.webp') center / cover no-repeat, radial-gradient(ellipse at center, #c4c1bb 0%, #999999 100%);
}

.proc-card:nth-child(5) .proc-bg {
  background: url('../img/procedures/men.webp') center / cover no-repeat, radial-gradient(ellipse at center, #c4c1bb 0%, #999999 100%);
}

.proc-card:nth-child(6) .proc-bg {
  background: url('../img/procedures/children.webp') center / cover no-repeat, radial-gradient(ellipse at center, #c4c1bb 0%, #999999 100%);
}

.proc-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.6s cubic-bezier(0.22, 0.11, 0.15, 1);
}

.proc-card:hover .proc-bg {
  transform: scale(1.06);
}

.proc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(40, 40, 40, 0.9) 0%, rgba(40, 40, 40, 0.15) 55%, transparent 100%);
  transition: background 0.4s;
}

.proc-card:hover .proc-overlay {
  background: linear-gradient(to top, rgba(40, 40, 40, 0.96) 0%, rgba(40, 40, 40, 0.35) 60%, rgba(40, 40, 40, 0.08) 100%);
}

.proc-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--gold);
  z-index: 3;
  transition: height 0.45s cubic-bezier(0.22, 0.11, 0.15, 1);
}

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

.proc-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 24px 16px;
  z-index: 2;
}

.proc-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
  font-family: var(--serif);
  transition: opacity 0.3s;
}

.proc-card:hover .proc-name {
  opacity: 0;
}

/* Procedure hover dropdown */
.proc-list {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 14, 0.93);
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 4;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
}

.proc-list::-webkit-scrollbar {
  width: 2px;
}

.proc-list::-webkit-scrollbar-track {
  background: transparent;
}

.proc-list::-webkit-scrollbar-thumb {
  background: rgba(229, 200, 169, 0.3);
  border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .proc-card:hover .proc-list {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.proc-list-title {
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(229, 200, 169, 0.2);
  flex-shrink: 0;
  width: 100%;
  font-family: var(--serif);
}

.proc-list ul {
  list-style: none;
  width: 100%;
}

.proc-list ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.proc-list ul li a {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  display: block;
  padding: 5px 0;
  letter-spacing: 0.3px;
  line-height: 1.4;
  transition: color 0.25s, transform 0.25s, text-shadow 0.25s;
}

.proc-list ul li a:hover {
  color: var(--gold);
  transform: scale(1.08);
  text-shadow: 0 0 12px rgba(229, 200, 169, 0.5);
}

/* Proc arrow hint */
@keyframes procArrow {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.25
  }

  50% {
    transform: translateY(-12px);
    opacity: 1
  }
}

.proc-content::before {
  content: '↑';
  flex-shrink: 0;
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 24px;
  opacity: 0.25;
  animation: procArrow 2s ease-in-out infinite;
  pointer-events: none;
  font-weight: 300;
  line-height: 1;
}

.proc-card:hover .proc-content::before,
.proc-card.proc-open .proc-content::before {
  opacity: 0;
  animation: none;
}

/* Click-to-open (mobile) */
.proc-card.proc-open .proc-list {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (min-width: 1101px) and (max-width: 1500px) {
  .procedures-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .proc-card {
    aspect-ratio: unset;
    min-height: 420px;
  }
}

/* BEFORE & AFTER */
.gallery-section {
  padding: 60px 80px;
  background: var(--cream);
}

.gallery-header {
  text-align: center;
  margin-bottom: 36px;
}

.gallery-header .gold-rule {
  margin: 18px auto;
}

.gallery-note {
  font-size: 14px;
  color: var(--mid);
  line-height: 1.8;
  font-weight: 300;
  margin-top: 12px;
}

/* B&A static grid */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}

.ba-card {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 3/2;
}

.ba-card-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  display: flex;
  align-items: flex-end;
  padding: 0 0 10px 10px;
}

.ba-card-before {
  left: 0;
}

.ba-card-after {
  left: 50%;
}

.ba-card-1-before {
  background: linear-gradient(145deg, #7a6a60 0%, #4a3a30 100%);
}

.ba-card-1-after {
  background: linear-gradient(145deg, #c0b0a0 0%, #8a7060 100%);
}

.ba-card-2-before {
  background: linear-gradient(145deg, #786860 0%, #483830 100%);
}

.ba-card-2-after {
  background: linear-gradient(145deg, #b8a890 0%, #887060 100%);
}

.ba-card-3-before {
  background: linear-gradient(145deg, #687078 0%, #404850 100%);
}

.ba-card-3-after {
  background: linear-gradient(145deg, #a8b4bc 0%, #788490 100%);
}

.ba-card-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 2;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.ba-card-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: white;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.42);
  padding: 3px 8px;
  backdrop-filter: blur(4px);
}

.ba-card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 10px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, transparent 100%);
  text-align: center;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  z-index: 3;
}

/* B&A interactive sliders */
.ba-sliders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 44px;
}

.ba-slider-item {
  display: flex;
  flex-direction: column;
}

.ba-slider-label {
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(197, 184, 165, 0.3);
  text-align: center;
}

.ba-slider-wrap {
  position: relative;
  overflow: hidden;
  cursor: default;
  user-select: none;
  aspect-ratio: 7/8;
  background: #222;
  border-radius: 3px;
}

.ba-before,
.ba-after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-before {
  background: #1c1c1c url('../img/before-after/before1.webp') center / cover no-repeat;
}

.ba-after {
  clip-path: inset(0 0 0 50%);
  background: #1c1c1c url('../img/before-after/after1.webp') center / cover no-repeat;
}

.ba-before-2 {
  background: #1c1c1c url('../img/before-after/before2.webp') center / cover no-repeat;
}

.ba-after-2 {
  background: #1c1c1c url('../img/before-after/after2.webp') center / cover no-repeat;
}

.ba-before-4 {
  background: #1c1c1c url('../img/before-after/before4.webp') center / cover no-repeat;
}

.ba-after-4 {
  background: #1c1c1c url('../img/before-after/after4.webp') center / cover no-repeat;
}

.ba-before-3 {
  background: #1c1c1c url('../img/before-after/before3.webp') center / cover no-repeat;
}

.ba-after-3 {
  background: #1c1c1c url('../img/before-after/after3.webp') center / cover no-repeat;
}

.ba-label {
  position: absolute;
  bottom: 14px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.40);
  padding: 4px 10px;
  backdrop-filter: blur(4px);
}

.ba-before .ba-label {
  left: 14px;
}

.ba-after .ba-label {
  right: 14px;
}

.ba-placeholder {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.8;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  background: transparent;
  z-index: 10;
  cursor: ew-resize;
}

.ba-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: white;
}

.ba-handle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.ba-handle-btn span {
  font-size: 11px;
  color: var(--gold-dark);
  font-weight: 700;
}

.ba-caption {
  text-align: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 1px;
}

/* ===== BEFORE/AFTER PRIVACY VEIL ===== */
.ba-slider-wrap[data-covered] .ba-before,
.ba-slider-wrap[data-covered] .ba-after {
  filter: blur(22px) brightness(.82);
  transition: filter .55s ease;
}
.ba-slider-wrap .ba-before,
.ba-slider-wrap .ba-after {
  transition: filter .55s ease;
}
.ba-slider-wrap[data-covered] .ba-handle {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.ba-veil {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(38,35,32,.55), rgba(38,35,32,.68));
  backdrop-filter: blur(2px);
  text-align: center;
  padding: 24px;
  opacity: 1;
  transition: opacity .5s ease, visibility .5s ease;
}
.ba-slider-wrap:not([data-covered]) .ba-veil {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ba-veil-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--white);
  max-width: 260px;
}
.ba-veil-ic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(229,200,169,.5);
  color: var(--gold);
  margin-bottom: 4px;
}
.ba-veil-title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
}
.ba-veil-note {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(245,242,236,.7);
  font-weight: 500;
}
.ba-veil-btn {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dark);
  background: var(--gold);
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  cursor: pointer;
  transition: background .3s, color .3s, transform .2s;
}
.ba-veil-btn:hover {
  background: var(--white);
  transform: translateY(-1px);
}
.ba-hide {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 21;
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--white);
  background: rgba(38,35,32,.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .3s, opacity .3s;
}
.ba-hide:hover {
  background: var(--dark);
}
.ba-slider-wrap:not([data-covered]) .ba-hide {
  display: inline-flex;
}

.gallery-footer {
  text-align: center;
}

/* TESTIMONIALS */
.testimonials-section {
  padding: 90px 80px;
  background: var(--light-bg);
}

.testimonials-header {
  text-align: center;
  margin-bottom: 52px;
}

.testimonials-header .gold-rule {
  margin: 18px auto;
}

.ratings-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border: none;
  margin-bottom: 52px;
}

.rating-platform {
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: var(--light-bg);
  padding: 24px 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.rating-platform::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .35s ease;
}

.rating-platform:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(38, 35, 32, .10);
  border-color: var(--gold);
}

.rating-platform:hover::before {
  transform: scaleX(1);
}

.rating-logo-wrap {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rating-logo {
  display: block;
  width: auto;
  object-fit: contain;
  height: 32px;
}

.rating-platform:nth-child(1) .rating-logo {
  height: 46px;
}

.rating-platform:nth-child(3) .rating-logo {
  height: 44px;
}

.rating-platform:nth-child(4) .rating-logo {
  height: 24px;
}

.rating-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.rating-stars {
  font-size: 26px;
  color: var(--gold);
  letter-spacing: 4px;
  line-height: 1;
}

.rating-count {
  font-size: 13px;
  color: var(--mid);
  line-height: 1;
}

.rating-platform--google {
  cursor: pointer;
}

.rating-loc-hint,
.rating-visit-hint {
  display: block;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-top: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}

.rating-platform--google:hover .rating-loc-hint,
.rating-platform:hover .rating-visit-hint {
  opacity: 1;
  transform: translateY(0);
}

/* Phone/tablet: no real hover, so keep the hint text always visible; lift/shadow/stripe stay hover-only */
@media (max-width: 1100px) {
  .rating-loc-hint,
  .rating-visit-hint {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.testi-card {
  background: rgb(245, 241, 233);
  padding: 34px 26px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.3s, transform .3s, box-shadow .3s;
}

.testi-card:hover {
  background: #eae2d4;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(38, 35, 32, .10);
}

.testi-tag {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 16px;
  display: block;
}

.testi-quote {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--dark);
  margin-bottom: 18px;
  font-style: italic;
  font-family: var(--serif);
  max-width: 55%;
}

.testi-rule {
  width: 26px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 14px;
}

.testi-meta {
  font-size: 13px;
  color: var(--mid);
  margin-bottom: 16px;
}

.testi-watch {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s, background-size 0.35s ease;
  position: relative;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 38px bottom;
}

.testi-watch::before {
  content: '';
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1L9 5L2 9Z' fill='%23e5c8a9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 7px 8px;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
  animation: playRipple 2s ease-out infinite;
}

.testi-watch::after {
  content: '→';
  display: inline-block;
  font-size: 1.5em;
  line-height: 1;
  margin-left: -6px;
  animation: arrowPing 2s ease-in-out infinite;
}

.testi-watch:hover {
  color: var(--gold-dark);
  background-size: calc(100% - 38px - 1.6em) 1px;
}

.testi-watch:hover::before {
  background-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1L9 5L2 9Z' fill='%23ffffff'/%3E%3C/svg%3E");
  animation-play-state: paused;
  box-shadow: none;
}

.testi-watch:hover::after {
  animation-play-state: paused;
}

.testi-card::after {
  content: '"';
  font-size: 160px;
  line-height: 1;
  font-style: italic;
  color: rgba(229, 200, 169, 0.18);
  position: absolute;
  top: -8px;
  right: 6px;
  pointer-events: none;
  font-weight: 700;
}

.testi-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 62%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  display: block;
}

.testi-card:has(.testi-photo) {
  padding-right: 8%;
}

/* TESTIMONIALS PAGE — video grid gets its own breakpoint steps (3 / 2 / 1) */
@media (max-width: 900px) {
  .testi-grid.testi-grid-full {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .testi-grid.testi-grid-full {
    grid-template-columns: 1fr;
  }

  .testi-grid-full .testi-watch {
    min-height: 44px;
    padding: 8px 0;
  }
}

/* SECTION BACKGROUND MODIFIERS (testimonials page rhythm) */
.testimonials-section--cream {
  background: var(--cream);
}

.testimonials-section--dark {
  background: var(--dark);
}

.testimonials-section--dark .section-label {
  color: var(--gold);
}

.testimonials-section--dark .section-title {
  color: var(--white);
}

.testimonials-section--dark .section-body {
  color: rgba(245, 242, 236, .72);
}

/* WRITTEN REVIEWS — dark citation cards, distinct from the video-card grid */
.review-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.review-filter-btn {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(245, 242, 236, .6);
  background: transparent;
  border: 1px solid rgba(245, 242, 236, .25);
  border-radius: 50px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}

.review-filter-btn:hover {
  border-color: var(--gold);
  color: var(--white);
}

.review-filter-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
}

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

.review-card {
  display: block;
  text-align: left;
  text-decoration: none;
  background: rgba(245, 242, 236, .04);
  border: 1px solid rgba(245, 242, 236, .12);
  border-radius: 6px;
  padding: 24px 22px;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
  border-color: var(--gold);
}

.review-card.is-hidden {
  display: none;
}

.review-platform-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 16px;
}

.review-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.review-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 242, 236, .9);
  margin-bottom: 14px;
}

.review-byline {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(245, 242, 236, .5);
  font-weight: 600;
}

.review-visit-hint {
  display: block;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}

.review-card:hover .review-visit-hint {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  .review-visit-hint {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .review-grid {
    grid-template-columns: 1fr;
  }
}

/* THANK-YOU CARDS WALL — dense mosaic of small stamps, fixed non-stretching tile size */
.ty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 65px);
  justify-content: center;
  gap: 7px;
}

.ty-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 4px;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: transform .3s;
}

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

.ty-card:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

.ty-card-clip {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(38, 35, 32, .08);
  transition: box-shadow .3s;
}

.ty-card:hover .ty-card-clip {
  box-shadow: 0 12px 24px rgba(38, 35, 32, .14);
}

.ty-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .ty-grid {
    grid-template-columns: repeat(auto-fill, 58px);
  }
}

@media (max-width: 700px) {
  .ty-grid {
    grid-template-columns: repeat(auto-fill, 48px);
    gap: 6px;
  }
}

/* THANK-YOU CARD "BOOK" MODAL */
.card-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 15, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility 0s .35s;
  z-index: 200;
  padding: 40px 20px;
}

.card-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s;
}

.card-modal {
  position: relative;
  width: min(680px, 92vw);
  height: min(420px, 78vh);
  transform-origin: center center;
}

.card-modal-close {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--dark);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.card-modal-book {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1800px;
}

.card-modal-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 40px 34px;
  box-sizing: border-box;
  overflow: auto;
}

.card-modal-cover {
  left: 0;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(160deg, var(--dark), #322d28);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}

.card-modal-inside {
  right: 0;
  border-radius: 0 6px 6px 0;
  background: var(--cream);
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(-100deg);
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  z-index: 2;
  box-shadow: -8px 0 20px rgba(0, 0, 0, .08);
}

.card-modal-book.is-open .card-modal-inside {
  transform: rotateY(0deg);
  transition-delay: .25s;
}

.card-modal-tag {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
  display: block;
}

.card-modal-name {
  font-family: var(--serif);
  font-size: 26px;
}

.card-modal-message {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--dark);
}

@media (max-width: 600px) {
  .card-modal {
    height: min(560px, 88vh);
  }

  .card-modal-panel {
    top: auto;
    bottom: auto;
    width: 100%;
    height: 50%;
    padding: 28px 24px;
  }

  .card-modal-cover {
    top: 0;
    left: 0;
    border-radius: 6px 6px 0 0;
  }

  .card-modal-inside {
    top: 50%;
    left: 0;
    right: auto;
    border-radius: 0 0 6px 6px;
    transform-origin: center top;
    transform: rotateX(-100deg);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .08);
  }

  .card-modal-book.is-open .card-modal-inside {
    transform: rotateX(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-modal {
    transition: none !important;
    transform: none !important;
  }

  .card-modal-inside {
    transition: opacity .25s !important;
    transform: none !important;
    opacity: 0;
  }

  .card-modal-book.is-open .card-modal-inside {
    opacity: 1;
  }
}

/* PORTRAIT REVEAL TOGGLE — soft silhouette glow behind the wall, cards never move */
.ty-toggle-wrap {
  text-align: center;
  margin-bottom: 32px;
}

.ty-mosaic-toggle {
  background: none;
  font-family: var(--sans);
  cursor: pointer;
}

.ty-mosaic-toggle:disabled {
  opacity: .4;
  cursor: default;
}

.ty-mosaic-toggle.active {
  background: var(--gold);
  color: var(--dark);
  border: 0px;
}

.ty-wall {
  position: relative;
}

.ty-grid {
  position: relative;
}

.ty-card-glow {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  filter: grayscale(1) sepia(.45) saturate(1.5) brightness(1.1) blur(1px);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

.ty-grid.is-portrait-visible .ty-card-glow {
  opacity: .55;
}

@keyframes tySettle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: .85; }
}

.ty-grid.is-settling .ty-card {
  animation: tySettle .6s ease-in-out;
  animation-delay: calc(min(var(--i, 0), 150) * 4ms);
}

@media (prefers-reduced-motion: reduce) {
  .ty-card-glow {
    transition: opacity .3s ease;
  }

  .ty-grid.is-settling .ty-card {
    animation: none;
  }
}

/* ABOUT */
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
}

.about-image {
  background: linear-gradient(135deg, #383434 0%, #282828 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  position: relative;
  overflow: hidden;
}

.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  inset: 0;
}

.about-image::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.about-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(20, 18, 16, 0.38) 0%, rgba(38, 35, 32, 0.18) 60%, rgba(38, 35, 32, 0.04) 100%);
  pointer-events: none;
  z-index: 1;
}

.about-image-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, 0.18);
}

.about-image-placeholder svg {
  width: 56px;
  height: 56px;
}

.about-image-placeholder p {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 10px;
}

.about-content {
  padding: 68px 96px 68px 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--dark);
}

.about-content .btn-outline-dark {
  align-self: flex-start;
}

.about-section .section-title,
.about-section .section-body {
  color: var(--white);
}

.about-creds {
  margin: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-cred-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  color: rgba(245, 242, 236, .75);
  font-weight: 400;
}

.about-cred-item::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* LOCATIONS */
.locations-section {
  background: var(--cream);
  padding: 72px 80px 84px;
}

.locations-header {
  text-align: center;
  margin-bottom: 52px;
}

.locations-header .gold-rule {
  margin: 18px auto;
}
.locations-header .section-title em {
  color: var(--gold-dark);
}

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

.loc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 52px
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(197, 184, 165, .3)
}

.loc-card {
  display: flex;
  flex-direction: column
}

.loc-card {
  background: var(--white);
  overflow: hidden;
  transition: background .3s, transform .3s, box-shadow .3s
}

.loc-card:hover {
  background: var(--cream);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(38, 35, 32, .10)
}

.loc-img {
  height: 220px;
  overflow: hidden;
  position: relative
}

.loc-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(20, 18, 16, 0.45) 0%, rgba(38, 35, 32, 0.28) 60%, rgba(38, 35, 32, 0.08) 100%);
  transition: opacity .5s ease;
  pointer-events: none
}

.loc-card:hover .loc-img::after {
  opacity: 0
}

.loc-img-bg {
  width: 100%;
  height: 100%;
  transition: transform .5s ease;
  background-size: cover;
  background-position: center
}

.loc-card:hover .loc-img-bg {
  transform: scale(1.04)
}

.loc-img-1 {
  background-image: url('../img/clinics/Spire Leicester.webp')
}

.loc-img-2 {
  background-image: url('../img/clinics/Nuffield Leicester.webp')
}

.loc-img-3 {
  background-image: url('../img/clinics/Spire Nottingham.webp')
}

.loc-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .25)
}

.loc-info {
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.loc-num {
  font-size: 64px;
  color: var(--gold-dark);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-weight: 400
}

.loc-name-text {
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 4px;
  font-family: var(--serif)
}

.loc-name-text i {
  font-style: italic;
  color: var(--gold-dark)
}

.loc-addr {
  font-size: 13px;
  color: var(--dark);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: auto;
  padding-bottom: 22px
}

.loc-phone {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3px;
  color: var(--dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  transition: color .3s;
  position: relative;
}
.loc-phone::before {
  content: '';
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background: var(--gold-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform-origin: center;
}
.loc-card:hover .loc-phone::before,
.contact-loc-card:hover .loc-phone::before,
.loc-phone:hover::before { animation: phoneRing .6s ease-in-out; }

@keyframes phoneRing {
  0%,100% { transform: rotate(0); }
  20%      { transform: rotate(-14deg); }
  40%      { transform: rotate(12deg); }
  60%      { transform: rotate(-8deg); }
  80%      { transform: rotate(6deg); }
}

@keyframes phoneIdle {
  0%, 60%, 100% { transform: rotate(0); }
  65%           { transform: rotate(-12deg); }
  72%           { transform: rotate(9deg); }
  79%           { transform: rotate(-5deg); }
  86%           { transform: rotate(2deg); }
  93%           { transform: rotate(0); }
}

.contact-loc-card .loc-phone::before { animation: phoneIdle 3s ease-in-out infinite; }

.loc-phone::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.loc-phone:hover::after { transform: scaleX(1); }
.loc-phone:hover { color: var(--gold-deep); }

.loc-link {
  margin-top: auto;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding-bottom: 3px;
  transition: color .3s;
  align-self: flex-start
}

.loc-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 1.6em;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease
}

.loc-link::after {
  content: '→';
  display: inline-block;
  animation: arrowPing 2s ease-in-out infinite;
  font-size: 1.5em;
  line-height: 1
}

.loc-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0
}

.loc-link:hover {
  color: var(--gold-deep)
}

.loc-link:hover::before {
  transform: scaleX(1)
}

/* CONTACT PAGE — lightweight location cards */
.contact-loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
}

.contact-loc-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.contact-loc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(38,35,32,.10);
  border-color: var(--gold);
}

.contact-loc-img {
  height: 150px;
  overflow: hidden;
  position: relative;
}

.contact-loc-img-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}

.contact-loc-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  transition: opacity .4s ease;
  pointer-events: none;
}

.contact-loc-card:hover .contact-loc-img::after {
  opacity: 0;
}

.contact-loc-card:hover .contact-loc-img-bg {
  transform: scale(1.05);
}

.contact-loc-info {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.contact-loc-info .loc-addr {
  padding-bottom: 4px;
  margin-bottom: 0;
}

.contact-loc-info .loc-phone {
  margin-bottom: 8px;
}

.contact-loc-info .loc-link {
  margin-top: auto;
  padding-top: 4px;
}

@media (max-width: 900px) {
  .contact-loc-grid { grid-template-columns: 1fr; max-width: 460px; }
}


/* MEDIA */
.media-section {
  background: var(--dark);
  padding: 100px 120px;
  display: grid;
  grid-template-columns: 0.8fr 1.3fr 0.8fr;
  gap: 40px;
  align-items: center
}

.media-content {
  text-align: center;
}

.media-section .section-title,
.media-section .section-body {
  color: var(--white);
}

.media-content .gold-rule {
  margin: 18px auto;
}

.media-strip-left,
.media-strip-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.media-tile {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
}

.media-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(20, 18, 16, 0.62) 0%, rgba(38, 35, 32, 0.42) 60%, rgba(38, 35, 32, 0.18) 100%);
  transition: opacity .5s ease;
  pointer-events: none;
}

.media-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(28, 24, 21, .35);
}

.media-tile:hover::after {
  opacity: 0;
}

.media-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.media-tile:hover img {
  transform: scale(1.04);
}


/* PRESS & MEDIA PAGE */
.feat-section {
  padding: 100px 60px;
  background: var(--cream);
}

.feat-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.feat-header .gold-rule {
  margin: 18px auto;
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.feat-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s;
}

.feat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(38, 35, 32, .14);
  border-color: rgba(229, 200, 169, .5);
}

.feat-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--dark);
  cursor: pointer;
}

.feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}

.feat-img--tedx img {
  object-position: center 12%;
}

.feat-img--itv img {
  object-position: center 25%;
}

.feat-card:hover .feat-img img {
  transform: scale(1.05);
}

.feat-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(20, 16, 14, .4);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(229, 200, 169, .5);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .35s, transform .35s, background .3s, color .3s;
}

.feat-play svg {
  width: 18px;
  height: 18px;
}

.feat-card:hover .feat-play {
  opacity: 1;
  transform: scale(1);
}

.feat-play:hover {
  background: var(--gold);
  color: var(--dark);
}

.feat-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.feat-eyebrow {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
}

.feat-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--dark);
}

.feat-text {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
}

.feat-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  padding-top: 6px;
  padding-bottom: 4px;
  min-height: 24px;
  transition: color .3s;
}

.feat-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.feat-link .arr {
  display: inline-block;
  animation: arrowPing 1.6s ease-in-out infinite;
}

.feat-link:hover {
  color: var(--dark);
}

.feat-link:hover::after {
  transform: scaleX(1);
}

.feat-link:hover .arr {
  animation: none;
  transform: translateX(6px);
}

/* Press archive — tabbed categories */
.media-cats {
  padding: 90px 60px 110px;
  background: var(--light-bg);
}

.media-cats-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.media-cats-header .gold-rule {
  margin: 18px auto;
}

.media-filter-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.media-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  margin: 0;
}

.mf-tab {
  flex: 0 0 auto;
  scroll-snap-align: center;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dark);
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 50px;
  padding: 12px 26px;
  min-height: 44px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .25s ease;
}

.mf-tab:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.mf-tab:active {
  transform: translateY(0);
}

.mf-tab.is-active {
  background: var(--dark);
  color: var(--cream);
  border-color: var(--dark);
}

.mf-tab.is-active:hover {
  background: var(--dark);
  color: var(--cream);
  transform: translateY(-2px);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1300px;
  margin: 0 auto;
}

.media-item {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--divider);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  opacity: 1;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s, opacity .4s;
}

.media-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(38,35,32,.12);
  border-color: var(--gold);
}

.media-item.hide {
  display: none;
}

.media-item.show {
  animation: mediaIn .5s ease both;
}

@keyframes mediaIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.mi-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--dark);
}

/* These 4 YouTube frames have a portrait photo pillarboxed with black bars baked into the
   file itself (a narrower photo centred on a wider canvas). The 4:3 card crop already
   trims some of that off the sides; zoom in a bit more (uniform scale, proportions
   unchanged) so the rest of the bars get pushed out and cropped by .mi-thumb's overflow. */
.media-item[data-cat="tv"]:nth-of-type(4) .mi-thumb img,
.media-item[data-cat="tv"]:nth-of-type(5) .mi-thumb img,
.media-item[data-cat="tv"]:nth-of-type(6) .mi-thumb img,
.media-item[data-cat="tv"]:nth-of-type(7) .mi-thumb img {
  transform: scale(1.75);
}

/* the 2 BBC Radio thumbnails specifically: the source file is a 16:9 canvas,
   so object-fit:cover already crops it horizontally with no vertical slack
   at all — object-position's Y value is inert here, it's the shared
   scale(1.75)'s transform-origin that actually controls how much of the
   photo (and the too-much-headroom above the faces) stays in frame. The two
   photos need different amounts, hence separate classes. */
.mi-thumb img.mi-bbc-radio-1 {
  transform-origin: center 25%;
}
.mi-thumb img.mi-bbc-radio-2 {
  transform-origin: center 25%;
}

.media-item[data-cat="tv"]:nth-of-type(4):hover .mi-thumb img,
.media-item[data-cat="tv"]:nth-of-type(5):hover .mi-thumb img,
.media-item[data-cat="tv"]:nth-of-type(6):hover .mi-thumb img,
.media-item[data-cat="tv"]:nth-of-type(7):hover .mi-thumb img {
  transform: scale(1.85);
}

.mi-thumb img,
.mi-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}

.mi-thumb video { pointer-events: none; }

/* Book covers are portrait — cover-crop to fill the frame's width, cropping
   top/bottom, rather than shrinking the whole cover down to fit uncropped */
.media-item[data-cat="books"] .mi-thumb img {
  object-fit: cover;
}

/* magazine/press page previews — bias the crop upward so headlines near the
   top of the page aren't the part getting cut off */
.media-item[data-cat="press"] .mi-thumb img {
  object-position: center 15%;
}

/* general-purpose per-thumbnail crop overrides, applied directly on whichever
   <img> needs a different bias than its category's default */
.mi-thumb img.mi-pos-top {
  object-position: center top;
}
/* object-position:top alone is already the maximum bias CSS offers — to push
   past it and crop away the source's own residual top margin, zoom in too,
   anchored to the top so the extra zoom only ever expands downward */
.mi-thumb img.mi-pos-top-max {
  object-position: center top;
  transform-origin: center top;
  transform: scale(1.16);
}
.media-item:hover .mi-thumb img.mi-pos-top-max {
  transform: scale(1.22);
}
.mi-thumb img.mi-pos-top-more {
  object-position: center 12%;
}
.mi-thumb img.mi-pos-top-mid {
  object-position: center 15%;
}
.mi-thumb img.mi-pos-top-low {
  object-position: center 35%;
}
.mi-thumb img.mi-pos-bottom {
  object-position: center bottom;
}
/* full quarter-turn — object-fit:cover already fills the 4:3 box exactly
   before rotating, so a plain 90° turn swaps that box to 3:4, leaving a
   shortfall on the new width equal to the frame's own aspect ratio (4/3);
   scale by that same ratio (plus a touch more for safety) to close it */
.mi-thumb img.mi-pos-right {
  transform: rotate(90deg) scale(1.4);
}
.mi-thumb img.mi-pos-left {
  transform: rotate(-90deg) scale(1.4);
}
.media-item:hover .mi-thumb img.mi-pos-right {
  transform: rotate(90deg) scale(1.46);
}
.media-item:hover .mi-thumb img.mi-pos-left {
  transform: rotate(-90deg) scale(1.46);
}

.media-item:hover .mi-thumb img,
.media-item:hover .mi-thumb video {
  transform: scale(1.06);
}

.mi-play, .mi-pdf, .mi-link {
  position: absolute;
  inset: auto 14px 14px auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20,16,14,.55);
  backdrop-filter: blur(6px);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(229,200,169,.4);
  transition: background .3s, color .3s, transform .3s;
}

.mi-play svg, .mi-link svg { width: 13px; height: 13px; }

.media-item:hover .mi-play,
.media-item:hover .mi-pdf,
.media-item:hover .mi-link {
  background: var(--gold);
  color: var(--dark);
  transform: scale(1.08);
}

.mi-pdf {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .5px;
  font-weight: 700;
}

.mi-meta {
  padding: 18px 20px 20px;
}

.mi-type {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}

.mi-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--dark);
  margin-top: 6px;
  line-height: 1.3;
}

/* Graceful degradation when a card has no caption — no empty gap left behind */
.mi-title:empty,
.mi-type:empty {
  display: none;
}
.mi-meta:empty {
  display: none;
  padding: 0;
}

/* Categories with nothing published yet — single "Coming Soon" card */
.media-item.is-soon {
  cursor: default;
}
.media-item.is-soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--divider);
}
.media-item.is-soon .mi-thumb {
  background: var(--light-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-item.is-soon .mi-title {
  color: var(--mid);
  font-style: italic;
}
.media-item.is-soon .mi-type {
  color: var(--gold-dark);
}
.mi-soon-text {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  opacity: .7;
}

@media (max-width: 900px) {
  .feat-section {
    padding: 70px 24px;
  }

  .feat-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }

  .media-cats {
    padding: 60px 20px 70px;
  }
}

@media (max-width: 600px) {
  .media-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 4px 4px 12px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .media-filter::-webkit-scrollbar {
    display: none;
  }

  .media-filter-wrap::before,
  .media-filter-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 12px;
    width: 28px;
    z-index: 2;
    pointer-events: none;
    transition: opacity .3s;
  }

  .media-filter-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--light-bg), transparent);
  }

  .media-filter-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--light-bg), transparent);
  }

  .media-filter-wrap.at-start::before,
  .media-filter-wrap.at-end::after {
    opacity: 0;
  }

  .media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .mi-meta {
    padding: 12px 14px 14px;
  }

  .mi-title {
    font-size: 15px;
  }
}

@media (max-width: 420px) {
  .mf-tab {
    font-size: 10px;
    padding: 10px 18px;
  }
}


/* CTA — centered editorial */
.cta-section {
  background: var(--light-bg);
  padding: 120px 80px;
  text-align: center;
  position: relative;
  overflow: hidden
}

/* huge background monogram */
.cta-bg-mono {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 90vw;
  opacity: .2;
  pointer-events: none;
  user-select: none
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto
}

.cta-inner .s-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600
}

.cta-inner .s-label::before,
.cta-inner .s-label::after {
  content: '';
  flex: 0 0 28px;
  height: 1px;
  background: var(--gold)
}

.cta-inner .s-title {
  font-size: clamp(30px, 4.5vw, 56px);
  margin-top: 22px;
  letter-spacing: -0.5px;
  line-height: 1.1;
  font-weight: 400;
  font-family: var(--serif)
}

.cta-title-l2 {
  margin-top: 0;
  transition-delay: 0.32s
}

.cta-highlight {
  font-style: italic;
  color: #bea68c
}

.cta-dots {
  color: #bea68c;
  font-style: normal
}

.cta-inner .s-body {
  max-width: 400px;
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--mid);
  font-weight: 300;
  letter-spacing: 0.15px
}

.cta-inner .btn-outline {
  margin-top: 24px;
  font-size: 10px;
  padding: 16px 44px;
  letter-spacing: 3px
}

.cta-contacts {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-top: 32px
}

.cta-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px
}

.cta-contact-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  display: block
}

.cta-contact-val {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--dark);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
  transition: color .3s
}

.cta-contact-val::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s ease
}

.cta-contact-val:hover {
  color: var(--gold-dark)
}

.cta-contact-val:hover::after {
  transform: scaleX(1)
}

/* Call/Email/WhatsApp — golden icon + quietly pinging arrow (permanent mobile affordance) */
.ccv-ic {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  animation: ccvBreath 2.6s ease-in-out infinite;
}

.ccv-ic svg {
  width: 100%;
  height: 100%;
}

.ccv-arr {
  color: var(--gold-deep);
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  animation: ccvPing 1.6s ease-in-out infinite;
}

@keyframes ccvBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.93); }
}

@keyframes ccvPing {
  0%, 100% { transform: translateX(0); opacity: .55; }
  50% { transform: translateX(4px); opacity: 1; }
}

.cta-contact-val:hover .ccv-arr,
.cta-contact-val:active .ccv-arr,
.contact-primary-item:hover .ccv-arr,
.contact-primary-item:active .ccv-arr,
.cta-contact-val:hover .ccv-ic,
.cta-contact-val:active .ccv-ic,
.contact-primary-item:hover .ccv-ic,
.contact-primary-item:active .ccv-ic {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ccv-ic, .ccv-arr {
    animation: none;
  }
}

@media (max-width: 600px) {
  .cta-contact-val,
  .contact-primary-item {
    min-height: 44px;
  }
}


/* FOOTER */
.site-footer { background: var(--dark); color: rgba(245,242,236,.6); }

/* тройка: лево | лого | право — боковые к центру, не к краям */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 80px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 60px 8% 46px;
}

.footer-links { justify-self: center; text-align: center; align-items: center; }
.footer-contact-col { justify-self: center; text-align: center; align-items: center; }
.footer-links h4, .footer-contact-col .fc-label { text-align: center; }

/* ЦЕНТР — лого главное */
.footer-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-mark { width: 60px; height: 60px; object-fit: contain; margin-bottom: 12px; }
.footer-word { font-family: var(--sans); font-weight: 500; font-size: 21px; letter-spacing: 6px; text-transform: uppercase; color: var(--cream); }
.footer-sub { font-family: var(--sans); font-size: 10px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-top: 4px; display: block; }
.footer-tagline { font-family: var(--sans); font-size: 12px; font-weight: 300; color: rgba(245,242,236,.45); margin-top: 10px; max-width: 300px; text-wrap: balance; }

/* боковые колонки */
.footer-links { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.footer-links h4 { font-family: var(--sans); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 6px; }
.footer-links a { font-family: var(--sans); font-size: 13px; color: rgba(245,242,236,.58); text-decoration: none; transition: color .3s; }
.footer-links a:hover { color: var(--gold); }

.footer-contact-col { display: flex; flex-direction: column; gap: 20px; text-align: left; }
.fc-item { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.fc-label { font-family: var(--sans); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.fc-val { font-family: var(--serif); font-size: 20px; color: var(--cream); transition: color .3s; }
.fc-item:hover .fc-val { color: var(--gold); }

/* кнопки */
.footer-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; align-items: stretch; }

.btn-book {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
  color: var(--dark); background: var(--gold); border: 1px solid var(--gold); border-radius: 50px;
  padding: 12px 26px; text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s, transform .2s;
}
.btn-book:hover { background: transparent; color: var(--gold); transform: translateY(-2px); }

.btn-feedback {
  font-family: var(--sans); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
  color: var(--gold); background: transparent; border: 1px solid rgba(229,200,169,.5); border-radius: 50px;
  padding: 11px 24px; text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s, border-color .3s;
}
.btn-feedback:hover { background: var(--gold); color: var(--dark); border-color: var(--gold); }

.footer-book-mobile { display: none; }
.footer-book-desktop { display: none; }
.footer-feedback-mobile { display: none; }
.footer-social { display: none; }

/* НИЗ */
.footer-bottom {
  padding: 18px 8%;
  border-top: 1px solid rgba(229,200,169,.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.footer-copy { font-family: var(--sans); font-size: 11px; color: rgba(245,242,236,.32); font-weight: 300; }
.footer-legal { display: flex; gap: 0; align-items: center; }
.footer-legal a { font-family: var(--sans); font-size: 11px; color: rgba(245,242,236,.32); text-decoration: none; transition: color .3s; }
.footer-legal a + a::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 8px; border-radius: 50%; vertical-align: middle; background: rgba(245,242,236,.32); }
.footer-legal a:hover { color: rgba(245,242,236,.7); }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 0; max-width: 640px; padding: 40px 6% 24px; justify-items: center; }

  .footer-links-proc { display: none; }

  .footer-hero { order: 1; }

  .footer-feedback-mobile { display: inline-flex; order: 2; width: 100%; max-width: 300px; margin-top: 4px; }

  .footer-contact-col { order: 3; align-items: center; text-align: center; margin-top: 22px; }
  .footer-contact-col .fc-item { align-items: center; }
  .footer-contact-col .footer-btns { display: none; }

  .footer-book-mobile { display: inline-flex; order: 4; width: 100%; max-width: 300px; margin-top: 24px; }

  .footer-social { display: flex; flex-wrap: wrap; order: 5; justify-content: center; gap: 14px; margin: 26px 0 4px; }
  .footer-social a { width: 42px; height: 42px; border: 1px solid rgba(229,200,169,.25); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: rgba(245,242,236,.55); transition: .3s; }
  .footer-social a:hover, .footer-social a:active { border-color: var(--gold); color: var(--gold); }

  .footer-book-desktop { display: none; }

  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; padding: 22px 6%; margin-top: 26px; width: 100%; }
  .footer-legal { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
}

@media (min-width: 861px) and (max-width: 1100px) {
  .footer-grid { gap: 44px; padding: 52px 5% 38px; }
}

@media (max-width: 380px) {
  .footer-social a { width: 36px; height: 36px; }
  .footer-social { gap: 10px; }
  .fc-val { font-size: 16px; }
}

@media (max-width: 1300px) {
  .ba-sliders-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .ba-slider-item:nth-child(1) {
    grid-column: 1 / 3;
  }

  .ba-slider-item:nth-child(2) {
    grid-column: 3 / 5;
  }

  .ba-slider-item:nth-child(3) {
    grid-column: 2 / 4;
  }
}

@media (max-width: 1400px) {
  .header-inner {
    gap: 40px;
    padding: 0 28px;
  }

  .nav-list {
    gap: 16px;
  }

  .nav-list a {
    letter-spacing: 1.2px;
  }

  .logo-wrap {
    width: 200px;
  }
}

@media (max-width: 1100px) {
  .header-inner {
    gap: 20px;
    padding: 0 16px;
    position: relative;
  }

  .nav-list,
  .social-sidebar,
  .book-sidebar {
    display: none;
  }

  .mob-toggle {
    display: flex;
  }

  .share-wrap {
    display: block;
  }

  .logo-wrap {
    width: 220px;
  }

  /* PROCEDURES — 3-column card grid on tablet */
  .procedures-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .proc-card {
    aspect-ratio: unset;
    min-height: 400px;
  }

  .footer-procedures-left,
  .footer-procedures-right {
    display: none;
  }
}

@media (max-width: 900px) {
  .hero-content {
    padding: 0 20px;
  }

  .accred-strip {
    padding: 10px 0;
  }

  .procedures-header {
    padding: 0 20px;
  }

  .gallery-section,
  .testimonials-section,
  .locations-section,
  .media-section,
  .cta-section {
    padding: 60px 20px;
  }

  .gallery-header {
    padding: 0 4px;
  }

  .ba-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .testi-grid,
  .locations-grid,
  .loc-grid {
    grid-template-columns: 1fr;
    background: none;
    gap: 16px;
  }

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

  .about-section {
    grid-template-columns: 1fr;
  }

  .about-content {
    padding: 44px 20px;
  }

  .media-section {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .media-strip-left,
  .media-strip-right {
    grid-template-columns: repeat(3, 1fr);
  }

  .media-content {
    order: -1;
  }

}

@media (max-width: 600px) {

  /* RATINGS — 1 column */
  .ratings-row {
    grid-template-columns: 1fr;
  }

  /* OTHER */
  .ba-grid {
    grid-template-columns: 1fr;
  }

  .ba-sliders-grid {
    grid-template-columns: 1fr;
  }

  .ba-slider-item:nth-child(1),
  .ba-slider-item:nth-child(2),
  .ba-slider-item:nth-child(3) {
    grid-column: auto;
  }

  .media-tile {
    aspect-ratio: 3/4;
  }

  /* HERO */
  .hero-cta {
    display: block;
    text-align: center;
  }

  /* PROCEDURES — 2-column card grid on phone */
  .procedures-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .proc-card {
    aspect-ratio: unset;
    min-height: 440px;
  }

  .proc-name {
    font-size: 15px;
    letter-spacing: 2px;
  }
}

@media (max-width: 520px) {
  .cta-contacts {
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }

  .cta-inner .btn-outline {
    margin-top: 24px;
  }

  .cta-contacts {
    margin-top: 16px;
  }
}

/* ===== BOOKING MODAL ===== */
.booking-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 24, 21, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}

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

.booking-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(28, 24, 21, .45);
  transform: translateY(16px) scale(.98);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}

.booking-overlay.open .booking-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.booking-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(245, 242, 236, .12);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s, color .3s, transform .3s;
}

.booking-close:hover {
  background: var(--gold);
  color: var(--dark);
  transform: rotate(90deg);
}

.booking-head {
  background: var(--dark);
  color: var(--white);
  padding: 34px 32px 28px;
  text-align: center;
  position: relative;
}

.booking-stamp {
  width: 42px;
  height: 42px;
  object-fit: contain;
  opacity: .9;
  margin-bottom: 12px;
}

.booking-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
}

.booking-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -.5px;
  color: var(--white);
  margin-bottom: 6px;
}

.booking-sub {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245, 242, 236, .75);
  max-width: 300px;
  margin: 0 auto;
}

.booking-options {
  padding: 22px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.booking-opt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--divider);
  border-radius: 16px;
  text-decoration: none;
  background: var(--white);
  transition: border-color .3s, background .3s, transform .3s, box-shadow .3s;
}

.booking-opt:hover {
  border-color: var(--gold);
  background: var(--light-bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(38, 35, 32, .10);
}

.booking-opt-ic {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--gold-deep);
  transition: background .3s, color .3s;
}

.booking-opt:hover .booking-opt-ic {
  background: var(--dark);
  color: var(--gold);
}

.booking-opt-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.booking-opt-name {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.booking-opt-desc {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gold-deep);
}

.booking-opt-arrow {
  color: var(--gold-dark);
  font-size: 16px;
  transition: transform .3s, color .3s;
}

.booking-opt:hover .booking-opt-arrow {
  transform: translateX(5px);
  color: var(--gold-dark);
}

.booking-opt-badge {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--white);
  background: var(--wine);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Forces the badge onto its own line on mobile without stretching the badge itself full-width */
.opt-badge-break {
  display: none;
}

.booking-opt--wa,
.booking-opt--form {
  border-color: var(--gold);
  background: var(--light-bg);
}

.booking-opt--wa .booking-opt-ic,
.booking-opt--form .booking-opt-ic {
  background: var(--dark);
  color: var(--gold);
}

.booking-opt-hint {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--light-bg);
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .booking-opt:hover .booking-opt-hint { opacity: 1; }
}
.booking-opt.copied .booking-opt-hint { opacity: 0 !important; }

.booking-foot {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--dark);
  text-align: center;
  padding: 14px 24px 24px;
  font-weight: 500;
  border-top: 1px solid var(--divider);
  margin-top: 4px;
}


@media (max-width: 480px) {
  .booking-modal {
    max-width: none;
    border-radius: 18px;
  }

  .booking-head {
    padding: 30px 22px 24px;
  }

  .booking-opt-name {
    row-gap: 2px;
  }

  .booking-opt-badge {
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 2px 5px;
  }

  .opt-badge-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }

  .booking-title {
    font-size: 23px;
  }
}

.hero-video-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hero-video-desktop {
    display: none;
  }

  .hero-video-mobile {
    display: block;
  }
}

/* ===== VIDEO MODAL ===== */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 10200;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}

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

.video-modal-wrap {
  position: relative;
  transform: scale(.94);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}

.video-overlay.open .video-modal-wrap {
  transform: scale(1);
  opacity: 1;
}

.video-modal-wrap iframe {
  display: block;
  border: none;
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
}

.video-modal-wrap.is-short iframe {
  width: min(360px, 82vw);
  height: calc(min(360px, 82vw) * 16 / 9);
  max-height: 88vh;
}

.video-modal-wrap.is-regular iframe {
  width: min(880px, 92vw);
  height: calc(min(880px, 92vw) * 9 / 16);
}

#modalImg {
  display: none;
  max-width: min(92vw, 1000px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
}

.video-modal-wrap.is-image iframe {
  display: none;
}

.video-modal-wrap.is-image #modalImg {
  display: block;
}

.video-modal-wrap.has-read-link #modalImg {
  max-height: 68vh;
}

.video-read-link {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 0;
  width: fit-content;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 14px 38px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  border-radius: 50px;
  transition: background 0.3s, color 0.3s;
}

.video-read-link:hover {
  background: var(--gold);
  color: var(--dark);
}

.video-read-arrow {
  font-size: 16px;
  line-height: 1;
}

.video-modal-wrap.has-read-link .video-read-link {
  display: flex;
}

#modalVideo {
  display: none;
  width: min(880px, 92vw);
  max-height: 88vh;
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
  background: #000;
}

.video-modal-wrap.is-localvideo iframe,
.video-modal-wrap.is-localvideo #modalImg {
  display: none;
}

.video-modal-wrap.is-localvideo #modalVideo {
  display: block;
}

.video-modal-wrap.is-map iframe {
  display: block;
  width: min(860px, 92vw);
  height: min(72vh, 560px);
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
}

#mapDirectLink {
  display: none;
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--sans);
  transition: color 0.3s;
}

#mapDirectLink:hover {
  color: var(--white);
}

.video-modal-wrap.is-map #mapDirectLink {
  display: block;
}

.video-modal-wrap.is-pdf iframe {
  display: block;
  width: min(820px, 92vw);
  height: min(88vh, 1080px);
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
}

.video-close-btn {
  position: absolute;
  top: -22px;
  right: -22px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(22, 18, 14, .80);
  color: white;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background .3s, color .3s, transform .3s;
}

.video-close-btn:hover {
  background: var(--gold);
  color: var(--dark);
  transform: rotate(90deg);
  border-color: var(--gold);
}

.video-caption {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .5px;
  color: rgba(245,242,236,.75);
}
.video-caption:empty {
  display: none;
}

.video-nav-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(22, 18, 14, .80);
  color: white;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background .3s, color .3s;
  z-index: 2;
}
.video-nav-prev { left: 16px; }
.video-nav-next { right: 16px; }
.video-nav-btn:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}
.video-overlay.has-nav .video-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 700px) {
  .video-nav-btn { width: 38px; height: 38px; font-size: 18px; }
  .video-nav-prev { left: 6px; }
  .video-nav-next { right: 6px; }
}

/* ── COMING SOON PAGES ── */
.cs-hero {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(229,200,169,.12);
}

.cs-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 50% 48%, rgba(229,200,169,.09) 0%, transparent 70%),
    linear-gradient(to bottom, rgba(18,14,12,.75) 0%, transparent 32%);
  pointer-events: none;
}

.cs-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(580px, 90vw);
  height: min(580px, 90vw);
  border-radius: 50%;
  border: 1px solid rgba(229,200,169,.1);
  pointer-events: none;
}

.cs-bg-mono {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 90vw;
  opacity: .055;
  pointer-events: none;
  user-select: none;
}

.cs-content {
  position: relative;
  z-index: 1;
  padding: 140px 40px 80px;
  max-width: 700px;
}

/* Lines flanking the label */
.cs-content .section-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
}

.cs-content .section-label::before,
.cs-content .section-label::after {
  content: '';
  flex: 0 0 28px;
  height: 1px;
  background: var(--gold);
  opacity: .65;
}

.cs-title {
  font-family: var(--serif);
  font-size: clamp(44px, 7.5vw, 88px);
  font-weight: 300;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 12px 0 0;
}

.cs-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.cs-body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--white);
  letter-spacing: 0.06em;
  margin: 22px auto 38px;
  max-width: 380px;
}

.cs-rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 20px auto;
  opacity: .55;
}

.cs-hero .btn-outline {
  border-color: var(--white);
  color: var(--white);
}

.cs-hero .btn-outline:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}

/* ─── CONTACT HERO ─── */
.contact-hero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--white);
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 96px;
}
.contact-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Scoped to the About hero only — gives the parallax buffer room to shift the
   video without exposing empty edges, without touching the shared class's
   behaviour on other pages (contact.html's slideshow, media.html's hero). */
.about-hero .contact-hero-bg {
  top: -40px;
  bottom: -40px;
  will-change: transform;
}
.contact-hero-bg img,
.contact-hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.media-hero-video {
  /* The source clip has letterboxing baked in (~128px top/bottom of its 1080px frame) —
     scale up around the centre to crop those bars out without distorting the footage. */
  transform: scale(1.32);
  transform-origin: center;
}
.hero-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
}
.hero-slide.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.contact-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.contact-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20,16,14,.65), rgba(20,16,14,.60) 60%, rgba(20,16,14,.5));
}
.contact-hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(245,242,236,.38);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 1;
  animation: scrollBounce 2.4s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: .38; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-hero-scroll { animation: none; }
}
.contact-hero .cs-content {
  padding: 0;
}
.contact-hero .btn-outline {
  border-color: rgba(255,255,255,.7);
  color: var(--white);
}
.contact-hero .btn-outline:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}

/* ─── CONTACT PAGE CONTENT ─── */
.contact-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 870px;
  margin: 0 auto;
  text-align: center;
}
.contact-hero .section-label {
  color: var(--gold);
  font-size: 12px;
}

.contact-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 9vw, 104px);
  line-height: 1;
  color: var(--white);
  letter-spacing: -.02em;
  margin: 12px 0 0;
}
.contact-title em {
  color: var(--gold);
  font-style: italic;
}

.contact-hero-sub {
  font-family: var(--sans);
  font-size: 16px;
  color: rgba(245,242,236,.9);
  font-weight: 300;
  letter-spacing: .4px;
  line-height: 1.75;
  max-width: 560px;
  margin: 18px auto 28px;
}

/* Media hero — animated title + logo marquee (scoped to media.html only) */
.media-hero-title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: mediaHeroWord .8s cubic-bezier(.22,1,.36,1) forwards;
}
.media-hero-title .w:nth-child(2) { animation-delay: .18s; }
@keyframes mediaHeroWord {
  to { opacity: 1; transform: none; }
}
.media-hero-rule {
  transform: scaleX(0);
  transform-origin: center;
  animation: mediaHeroRule .7s ease .55s forwards;
}
@keyframes mediaHeroRule {
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .media-hero-title .w { animation: none; opacity: 1; transform: none; }
  .media-hero-rule { animation: none; transform: scaleX(1); }
}

/* About hero — content sits in the lower third, like index hero, instead of dead-centered */
.about-hero {
  align-items: flex-end;
  padding-bottom: 90px;
}
.about-hero-sub {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(245, 242, 236, .75);
  font-weight: 300;
}

.about-hero-title {
  font-size: clamp(44px, 8vw, 92px);
  font-weight: 400;
  line-height: 1.1;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.about-hero-title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: aboutHeroWord .8s cubic-bezier(.22,1,.36,1) forwards;
}
.about-hero-title .w:nth-child(1) { animation-delay: .08s; }
.about-hero-title .w:nth-child(2) { animation-delay: .22s; }
.about-hero-title .w:nth-child(3) { animation-delay: .36s; }
.about-hero-title .w:nth-child(4) { animation-delay: .5s; }
@keyframes aboutHeroWord {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero-title .w { animation: none; opacity: 1; transform: none; }
}

/* ─── ABOUT PAGE CONTENT ─── */
.about-intro {
  background: var(--white);
  padding: 110px 40px;
}
.about-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.about-lead {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-style: italic;
  line-height: 1.5;
  color: var(--dark);
}
.about-body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.9;
  color: var(--mid);
  font-weight: 300;
}
.about-intro-img img {
  width: 100%;
  border-radius: 14px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .6s ease;
}
.about-intro-img {
  overflow: hidden;
  border-radius: 14px;
}
.about-intro-img:hover img {
  transform: scale(1.04);
}
@media (max-width: 900px) {
  .about-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-intro-img { order: -1; max-width: 280px; margin: 0 auto; }
}

.about-story {
  background: var(--dark);
  padding: 110px 40px;
  position: relative;
  overflow: hidden;
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
/* Standalone .story-inner (not inside .story-grid) keeps the original centred,
   width-capped look — e.g. media.html's closing section, which has no photo. */
.story-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.story-grid .story-inner {
  max-width: none;
  margin: 0;
  text-align: left;
}
.story-img img {
  width: 100%;
  border-radius: 14px;
  display: block;
}
.story-video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--dark);
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
}
.story-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}
.story-video-thumb:hover img {
  transform: scale(1.05);
}
/* Unlike .feat-play in the dense Featured Appearances grid (hover-only, to reduce
   clutter), this is a single deliberate video invitation — the play icon should
   read as "this is a video" at a glance, not just on hover. */
.story-video-thumb .feat-play {
  opacity: 1;
  transform: scale(1);
}
.story-video-thumb:hover .feat-play {
  background: var(--gold);
  color: var(--dark);
}
@media (max-width: 900px) {
  .story-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 560px;
  }
  .story-grid--reverse .story-img,
  .story-grid--reverse .story-video-thumb {
    order: 1;
  }
}
.about-story .section-label {
  color: var(--gold);
}
.about-story .section-title {
  color: var(--white);
  font-size: clamp(28px, 4vw, 44px);
  margin-top: 14px;
}
.story-teaser {
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(245, 242, 236, .75);
  line-height: 1.85;
  margin-top: 22px;
  font-weight: 300;
}
.story-toggle {
  margin-top: 28px;
  background: none;
  border: 1px solid rgba(229, 200, 169, .45);
  border-radius: 50px;
  cursor: pointer;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 13px 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .3s, color .3s, border-color .3s;
}
.story-toggle:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}
/* .story-toggle defaults to gold-on-transparent, tuned for the dark BBC section.
   On light backgrounds (intro, draws) that gold reads too washed-out — use dark
   text there instead. The hover override below has to outrank this in specificity
   (2 classes + :hover vs. these 2 classes alone), otherwise the muted resting
   border-color wins the cascade even while hovered and never blends into the gold. */
.about-intro .story-toggle,
.about-draws .story-toggle {
  color: var(--dark);
  border-color: rgba(153, 128, 100, .45);
}
.about-intro .story-toggle:hover,
.about-draws .story-toggle:hover {
  border-color: var(--gold);
}
.story-toggle .arr {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  line-height: 1;
  transition: transform .3s;
}
.story-toggle[aria-expanded="true"] .arr {
  transform: rotate(90deg);
}
.story-full {
  max-height: 0;
  overflow: hidden;
  transition: max-height .6s ease, opacity .5s ease, margin-top .5s ease;
  opacity: 0;
  text-align: left;
}
.story-full[data-open] {
  max-height: 1000px;
  opacity: 1;
  margin-top: 34px;
}
.story-full p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.9;
  font-weight: 300;
  margin-bottom: 16px;
}
/* Dark BBC-story background needs light text; every other .story-full lives on a light
   background and needs dark text — the color used to be set unscoped here, which made
   the intro/draws "read more" text nearly invisible (light cream on white). */
.about-story .story-full p {
  color: rgba(245, 242, 236, .7);
}
.about-intro .story-full p,
.about-draws .story-full p {
  color: var(--dark);
}
.story-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--gold);
  line-height: 1.5;
}

.about-draws {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  background: var(--cream);
  box-shadow: none !important;
}
.draws-img {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  /* left (outer edge) matches .draws-text's right (outer edge) padding — symmetric
     distance from the section's ends; right (facing the text) is smaller, pulling
     image and text closer together */
  padding: 84px 30px 84px 100px;
}
.draws-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
  transition: transform .7s ease;
}
.about-draws:hover .draws-img img {
  transform: scale(1.04);
}
.draws-text {
  /* left (facing the image) is smaller to sit closer to it; right (outer edge)
     stays 70px, matching .draws-img's outer-edge padding */
  padding: 80px 100px 80px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 900px) {
  .about-draws { grid-template-columns: 1fr; }
  .draws-img { min-height: 320px; padding: 32px; }
  .draws-text { padding: 48px 24px; }
}
/* .draws-text is a column flexbox (align-items defaults to stretch), which would
   otherwise force the toggle button to full width instead of hugging its own text */
.about-draws .story-toggle {
  align-self: flex-start;
}
.draws-more-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.draws-more-imgs img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--light-bg);
}
/* .section-title em defaults to --gold, tuned for dark backgrounds (e.g. the BBC
   story). On this section's white background it reads too washed-out. */
.about-draws .section-title em {
  color: var(--gold-dark);
}

/* TRAINING & EDUCATION */
.education-section {
  background: var(--cream);
  padding: 100px 40px;
  text-align: center;
}
.education-section .section-title em {
  color: var(--gold-dark);
}
.education-head {
  max-width: 680px;
  margin: 0 auto;
}
.education-section .gold-rule {
  margin: 18px auto;
}
.edu-timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 980px;
  margin: 48px auto 0;
}
.edu-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  text-align: center;
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.edu-timeline.visible .edu-stop {
  opacity: 1;
  transform: none;
}
.edu-stop:nth-child(1) { transition-delay: .05s; }
.edu-stop:nth-child(2) { transition-delay: .15s; }
.edu-stop:nth-child(3) { transition-delay: .25s; }
.edu-stop:nth-child(4) { transition-delay: .35s; }
.edu-stop:nth-child(5) { transition-delay: .45s; }
.edu-stop:nth-child(6) { transition-delay: .55s; }
.edu-num {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cream);
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.edu-stop:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--gold);
  opacity: .5;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.edu-timeline.visible .edu-stop:nth-child(2)::before { transition-delay: .15s; transform: scaleX(1); }
.edu-timeline.visible .edu-stop:nth-child(3)::before { transition-delay: .25s; transform: scaleX(1); }
.edu-timeline.visible .edu-stop:nth-child(4)::before { transition-delay: .35s; transform: scaleX(1); }
.edu-timeline.visible .edu-stop:nth-child(5)::before { transition-delay: .45s; transform: scaleX(1); }
.edu-timeline.visible .edu-stop:nth-child(6)::before { transition-delay: .55s; transform: scaleX(1); }
.edu-label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .2px;
  color: var(--dark);
  font-weight: 600;
  line-height: 1.4;
  padding: 0 8px;
}
.edu-desc {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--mid);
  font-weight: 300;
  line-height: 1.4;
  padding: 0 8px;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .edu-stop::before {
    display: none;
  }
}
.education-closing {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--mid);
  font-weight: 300;
  max-width: 640px;
  margin: 36px auto 0;
}

/* RESEARCH & PUBLICATIONS */
.research-section {
  background: var(--white);
  padding: 100px 40px;
  text-align: center;
}
.research-section .section-title em {
  color: var(--gold-dark);
}
.research-head {
  max-width: 700px;
  margin: 0 auto;
}
.research-section .gold-rule {
  margin: 18px auto;
}
.research-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 780px;
  margin: 44px auto 0;
}
.research-stat {
  background: var(--cream);
}
.cred-ic {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-dark);
  margin-bottom: 12px;
}
.cred-ic svg {
  width: 18px;
  height: 18px;
}
.cred-num {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--gold-dark);
  font-weight: 400;
  line-height: 1.1;
}
.cred-num--sm {
  font-size: clamp(16px, 2.4vw, 22px);
}
.cred-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 600;
  margin-top: 6px;
}
@media (max-width: 700px) {
  .research-stats {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}

.cred-plus {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--gold-dark);
  font-weight: 400;
}

.cred-num-row {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

/* Research & Publications — one unified row, every figure at the same visual weight */
.research-stats.research-stats--full {
  grid-template-columns: repeat(6, 1fr);
  max-width: 940px;
}
@media (max-width: 900px) {
  .research-stats.research-stats--full {
    grid-template-columns: repeat(3, 1fr);
    max-width: 620px;
  }
}
@media (max-width: 480px) {
  .research-stats.research-stats--full {
    grid-template-columns: repeat(2, 1fr);
    max-width: 340px;
  }
}

.research-books-label {
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 600;
  margin-top: 48px;
  margin-bottom: 20px;
}

.research-books {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}

.research-book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.research-books img {
  height: 250px;
  width: auto;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(38, 35, 32, .18);
  transition: transform .3s ease, box-shadow .3s ease;
}

.research-book:nth-child(odd) img {
  transform: rotate(-3deg);
}

.research-book:nth-child(even) img {
  transform: rotate(3deg);
}

.research-book:hover img {
  transform: translateY(-4px) rotate(0deg) scale(1.04);
  box-shadow: 0 18px 34px rgba(38, 35, 32, .24);
}

.research-book-caption {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--gold-dark);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .research-books img {
    height: 180px;
  }
}

.about-quotes {
  background: var(--white);
  padding: 90px 40px;
  text-align: center;
}
.aq-track {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  min-height: 150px;
}
.aq-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  text-align: center;
}
.aq-item.is-active {
  opacity: 1;
  transform: none;
  position: relative;
}
.aq-stars {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.aq-item p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--dark);
  line-height: 1.5;
}
.aq-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.aq-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
}
.aq-name::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold);
}
.aq-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.aq-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: var(--divider);
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.aq-dots button.is-active {
  background: var(--gold);
  transform: scale(1.3);
}

.about-closing {
  background: var(--dark);
  padding: 110px 40px;
  text-align: center;
}
.closing-inner {
  max-width: 680px;
  margin: 0 auto;
}
.about-closing .section-label {
  color: var(--gold);
}
.about-closing .section-title {
  color: var(--white);
}
.closing-body {
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(245, 242, 236, .72);
  line-height: 1.9;
  font-weight: 300;
  margin-top: 18px;
}
.dark-team-note {
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(245, 242, 236, .5);
  font-weight: 300;
  margin-top: 40px;
  text-align: center;
}
.dark-team-note strong {
  color: var(--gold);
  font-weight: 600;
}

.contact-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 16px 28px;
  max-width: 100%;
  margin: 10px auto 4px;
}

.contact-primary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  text-align: center;
}

/* Call and WhatsApp must be equal width so Email (the middle item) lands on the true centre line —
   otherwise a flex row centred as a group drifts toward whichever flanking item is narrower. */
.contact-primary-item.is-call,
#waContactLink {
  min-width: 210px;
}

.cp-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

.cp-val {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  transition: color .3s;
}

.contact-primary .ccv-arr,
.contact-primary .ccv-ic { color: var(--gold); }

.contact-primary-item:hover .cp-val { color: var(--gold); }

.cp-val::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .35s ease;
}

.contact-primary-item:hover .cp-val::after { transform: scaleX(1); }

.cp-divider {
  width: 1px;
  height: 34px;
  background: rgba(229,200,169,.22);
}

/* ── Enquiry section ─────────────────────── */
.enquiry-section {
  background: var(--light-bg);
  padding: 80px 80px 72px;
}
.contact-locations {
  background: var(--cream);
}

.enquiry-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}

.enquiry-photo {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 420px;
}

.enquiry-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  inset: 0;
}

.enquiry-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,9,8,.25);
}

.enquiry-col {
  display: flex;
  flex-direction: column;
}

.enquiry-head {
  text-align: left;
  margin-bottom: 26px;
}

.enquiry-head .gold-rule { margin: 16px 0; }
.enquiry-head em { color: var(--gold-dark); font-style: italic; }

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.enquiry-form .contact-submit { align-self: flex-start; }

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

.enquiry-form input,
.enquiry-form textarea,
.c-select-trigger {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--dark);
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 10px;
  padding: 15px 16px;
  box-shadow: 0 1px 2px rgba(38,35,32,.04);
  transition: border-color .35s, box-shadow .35s, transform .35s, background .35s;
  -webkit-appearance: none;
  appearance: none;
}

.enquiry-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.enquiry-form ::placeholder { color: var(--mid); opacity: .85; }

.enquiry-form input:hover,
.enquiry-form textarea:hover,
.c-select-trigger:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(229,200,169,.20), 0 6px 18px rgba(229,200,169,.22);
}

.enquiry-form input:focus,
.enquiry-form textarea:focus,
.c-select.open .c-select-trigger {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(229,200,169,.32), 0 10px 26px rgba(229,200,169,.30);
  transform: translateY(-2px);
}

/* inline validation errors — replace the native invalid-field balloon */
.field-group { position: relative; }
.field-error {
  display: block;
  overflow: hidden;
  max-height: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--wine, #6e2433);
  margin-top: 0;
  opacity: 0;
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.field-error.is-visible {
  max-height: 24px;
  opacity: 1;
  margin-top: 6px;
}
.enquiry-form input.has-error,
.enquiry-form textarea.has-error {
  border-color: var(--wine, #6e2433);
  box-shadow: 0 0 0 3px rgba(110,36,51,.12);
}
.c-select.has-error .c-select-trigger {
  border-color: var(--wine, #6e2433);
  box-shadow: 0 0 0 3px rgba(110,36,51,.12);
}

.contact-submit {
  align-self: center;
  margin-top: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--dark);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 400;
  border-radius: 50px;
  padding: 15px 44px;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .2s;
}

.contact-submit:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(229,200,169,.25), 0 8px 24px rgba(229,200,169,.35);
}

.contact-submit:disabled { opacity: .55; cursor: default; transform: none; }

.form-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-align: left;
  font-family: var(--sans);
  font-size: 13px;
  min-height: 18px;
}

.form-status.ok  { color: var(--gold-deep); }
.form-status.err { color: var(--wine); }

.form-status-icon { flex-shrink: 0; }

/* ── Custom hospital select ──────────────────────── */
.c-select { position: relative; }

.c-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--mid);
  cursor: pointer;
  text-align: left;
}

.c-select-value.filled { color: var(--dark); }
.c-select-arrow { color: var(--gold-deep); transition: transform .35s ease; }
.c-select.open .c-select-arrow { transform: rotate(180deg); }

.c-select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 30;
  list-style: none;
  margin: 0; padding: 6px;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(38,35,32,.14);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.c-select.open .c-select-list {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.c-select-list li {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--dark);
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.c-select-list li:hover { background: var(--light-bg); color: var(--gold-deep); }

.contact-form-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold);
  border-radius: 50px;
  padding: 12px 28px;
  transition: background .3s, color .3s, box-shadow .3s;
}
.contact-form-link:hover {
  background: var(--gold);
  color: var(--dark);
  box-shadow: 0 0 0 3px rgba(229,200,169,.25), 0 8px 24px rgba(229,200,169,.35);
}
.contact-form-link .chev { display: inline-block; animation: formChev 1.8s ease-in-out infinite; }
.contact-form-link:hover .chev { animation-play-state: paused; }
@keyframes formChev {
  0%, 100% { transform: translateY(0);    opacity: .7; }
  50%       { transform: translateY(3px); opacity: 1;  }
}

@media (max-width: 900px) {
  .enquiry-section { padding: 64px 20px; }
  .enquiry-grid { grid-template-columns: 1fr; gap: 28px; max-width: 560px; }
  .enquiry-photo { min-height: 300px; order: -1; }
  .enquiry-head { text-align: center; }
  .enquiry-head .gold-rule { margin-left: auto; margin-right: auto; }
  .enquiry-form .contact-submit { align-self: center; }
  .form-status { justify-content: center; }
}

@media (max-width: 600px) {
  .contact-primary { flex-direction: column; align-items: center; gap: 20px 0; }
  .cp-divider { display: none; }
  .contact-hero { padding: 120px 20px 64px; }
}

@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* ===== FEEDBACK MODAL ===== */
.fb-overlay { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,16,14,.62); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
.fb-overlay.open { opacity:1; visibility:visible; }
.fb-modal { position:relative; width:100%; max-width:440px; background:var(--white); border-radius:16px; padding:40px 36px 34px; text-align:center;
  box-shadow:0 30px 80px rgba(20,16,14,.4); transform:translateY(16px) scale(.98); transition:transform .4s cubic-bezier(.22,1,.36,1); }
.fb-overlay.open .fb-modal { transform:translateY(0) scale(1); }
.fb-close { position:absolute; top:14px; right:16px; width:34px; height:34px; border:none; background:none;
  font-size:26px; line-height:1; color:var(--mid); cursor:pointer; transition:color .3s; }
.fb-close:hover { color:var(--gold-deep); }
.fb-mark { width:44px; height:44px; object-fit:contain; margin-bottom:12px; }
.fb-kicker { display:block; font-family:var(--sans); font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-dark); font-weight:600; }
.fb-title { font-family:var(--serif); font-size:30px; font-weight:400; color:var(--dark); margin-top:6px; }
.fb-title em { font-style:italic; color:var(--gold-dark); }
.fb-sub { font-family:var(--sans); font-size:14px; font-weight:300; color:var(--mid); line-height:1.7; margin:10px auto 0; max-width:320px; }
.fb-form { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.fb-stars { display:flex; justify-content:center; gap:8px; }
.fb-star { background:none; border:none; font-size:30px; line-height:1; cursor:pointer; color:var(--divider); -webkit-text-stroke:0.25px var(--dark); transition:color .2s, transform .15s; }
.fb-star:hover { transform:scale(1.12); }
.fb-star.active { color:var(--gold); -webkit-text-stroke:0; }
.fb-form textarea, .fb-form input[type="email"] { font-family:var(--sans); font-size:14px; color:var(--dark);
  background:#fff; border:1px solid var(--divider); border-radius:10px; padding:14px 15px; transition:border-color .3s, box-shadow .3s; }
.fb-form textarea { resize:vertical; min-height:100px; line-height:1.6; }
.fb-form textarea:focus, .fb-form input[type="email"]:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(229,200,169,.28); }
.fb-form ::placeholder { color:var(--mid); opacity:.8; }
.fb-submit { margin-top:4px; cursor:pointer; background:var(--gold); color:var(--dark); border:1px solid var(--gold);
  font-family:var(--sans); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600;
  border-radius:50px; padding:14px 34px; transition:background .3s, color .3s, border-color .3s, transform .2s; }
.fb-submit:hover { background:transparent; color:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); }
.fb-status { font-family:var(--sans); font-size:12.5px; min-height:16px; }
.fb-status.err { color:var(--wine); }
.fb-success { display:none; flex-direction:column; align-items:center; gap:8px; padding:20px 0; }
.fb-success.visible { display:flex; }
.fb-check { width:56px; height:56px; border-radius:50%; background:var(--gold); color:var(--dark); font-size:26px;
  display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
@media (max-width:520px) { .fb-modal { padding:34px 22px 28px; } .fb-title { font-size:26px; } }

/* ===== COPY-TO-CLIPBOARD (desktop email/phone links) ===== */
.copy-target { position: relative; }
.copy-badge {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--dark);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 20;
}
.copy-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.copy-target.copied .copy-badge { opacity: 1; transform: translateX(-50%) translateY(0); }

.copy-hint {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 19;
}
/* Dark backgrounds (hero photo, dark footer) need a lighter hint colour to stay legible */
.contact-hero .copy-hint,
.fc-item .copy-hint {
  color: var(--gold);
}
.fc-item .copy-hint {
  top: calc(100% + 2px);
}
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .copy-target:hover .copy-hint { opacity: .95; }
}
.copy-target.copied .copy-hint { opacity: 0 !important; }

/* ===== PRELOADER ===== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.preloader-mark {
  width: 64px;
  height: 64px;
  object-fit: contain;
  animation: preloaderBreathe 2.2s ease-in-out infinite;
}
@keyframes preloaderBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.88); opacity: .7; }
}
.preloader-word {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(245, 242, 236, .55);
  margin-top: 4px;
}
.preloader-bar {
  width: 120px;
  height: 1px;
  background: rgba(229, 200, 169, .2);
  margin-top: 18px;
  overflow: hidden;
}
.preloader-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width .3s ease;
}
body:has(.preloader:not(.done)) {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .preloader-mark { animation: none; }
  .preloader { transition: opacity .2s ease; }
}

/* ===== 404 / ERROR PAGE ===== */
.error-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  padding: 160px 24px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.error-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 55% at 50% 48%, rgba(229,200,169,.09) 0%, transparent 70%);
  pointer-events: none;
}
.error-bg-mono {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 90vw;
  opacity: .055;
  pointer-events: none;
  user-select: none;
}
.error-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.error-inner .section-label { color: var(--gold); }
.error-code {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(70px, 12vw, 140px);
  color: var(--gold);
  line-height: 1;
  letter-spacing: -2px;
  margin: 4px 0 10px;
}
.error-inner .section-title { color: var(--white); margin-bottom: 4px; }
.error-inner .section-body { color: rgba(251,249,246,.7); max-width: 420px; margin: 14px auto 0; }
.error-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 34px;
}
.error-btn-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 13px 34px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--dark);
  text-decoration: none;
  border-radius: 50px;
  transition: background .3s, color .3s, transform .2s;
}
.error-btn-home:hover { background: transparent; color: var(--gold); transform: translateY(-2px); }
.error-btn-home .arr { font-size: 14px; line-height: 1; }
.error-page .btn-outline { border-color: var(--white); color: var(--white); }
.error-page .btn-outline:hover { background: var(--gold); color: var(--dark); border-color: var(--gold); }

@media (max-width: 600px) {
  .error-page { padding: 140px 20px 70px; }
  .error-actions { flex-direction: column; width: 100%; max-width: 280px; }
  .error-actions a { width: 100%; }
}

/* ============================================================
   PROCEDURE DETAIL PAGES — shared base for breast-augmentation.html
   and future single-procedure pages (tummy-tuck.html, etc.)
   Reuses .hero / .section-label / .section-title / .gold-rule /
   .btn-outline / .reveal / .ba-slider-wrap wherever those already fit.
   ============================================================ */

/* Image placeholder — every unbuilt photo/diagram slot on procedure
   pages uses this until real photography is supplied. */
.pd-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, #e5ddd0 0px, #e5ddd0 14px, #f0ebe3 14px, #f0ebe3 28px);
  overflow: hidden;
}
.pd-placeholder--dark {
  background: repeating-linear-gradient(135deg, #3a352f 0px, #3a352f 14px, #312c26 14px, #312c26 28px);
}
.pd-placeholder-label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--gold-dark);
  text-align: center;
  padding: 0 20px;
}
.pd-placeholder--dark .pd-placeholder-label {
  color: rgba(255, 255, 255, .35);
}

/* PROCEDURE HERO — reuses .hero/.hero-bg/.hero-overlay/.hero-content */
.pd-hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 16px;
}
.pd-hero-eyebrow::before,
.pd-hero-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.pd-hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.pd-hero-cta-outline {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 32px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  border-radius: 50px;
  transition: border-color .3s, color .3s;
}
.pd-hero-cta-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.pd-hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.pd-hero-stat {
  padding: 0 28px;
  border-right: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
}
.pd-hero-stat:last-child {
  border-right: none;
}
.pd-hero-stat-num {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--gold);
  line-height: 1;
}
.pd-hero-stat-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin-top: 6px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .pd-hero-stats { gap: 18px 0; }
  .pd-hero-stat { padding: 0 16px; border-right: none; width: 33%; }
}

/* HERO PHOTO — real image over the same grey radial-gradient fallback used by
   the procedure cards (.proc-bg); scales up/down as the page scrolls past the hero. */
.pd-hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .pd-hero-photo {
    transform: none !important;
  }
}

/* GENERIC PROCEDURE SECTION WRAPPER */
.pd-section {
  padding: 96px 32px;
}
.pd-section--tight-top {
  padding-top: 84px;
}
.pd-section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 52px;
}
.pd-section-head .gold-rule {
  margin: 18px auto;
}
.pd-intro-body {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.pd-intro-body .gold-rule {
  margin: 18px auto;
}

/* SPLIT (media + copy) — used for "What Is It" and "Suitability" */
.pd-split {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
  gap: 64px;
  align-items: center;
}
.pd-split-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
}
.pd-split-media--wide {
  aspect-ratio: 4 / 3;
}
.pd-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.pd-split-media:hover img {
  transform: scale(1.015);
}
.pd-split-media--contain {
  background: var(--white);
  padding: 32px;
}
.pd-split-media--contain img {
  object-fit: contain;
}
.pd-pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-deep);
  line-height: 1.55;
  border-left: 2px solid var(--gold-dark);
  padding-left: 20px;
  margin: 0 0 24px;
}
@media (max-width: 900px) {
  .pd-split { grid-template-columns: 1fr; gap: 32px; }
}

/* BENEFITS — 3-col grid, 1px grout, alternating light/dark card */
.pd-benefits-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--divider);
}
.pd-benefit-card {
  background: var(--white);
  padding: 44px 36px;
}
.pd-benefit-card--dark {
  background: var(--cream);
}
.pd-benefit-num {
  font-family: var(--serif);
  font-size: 38px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 18px;
}
.pd-benefit-card--dark .pd-benefit-num {
  color: var(--gold);
}
.pd-benefit-tag {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 8px;
}
.pd-benefit-card--dark .pd-benefit-tag {
  color: var(--gold-dark);
}
.pd-benefit-title {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--dark);
  font-weight: 400;
  margin: 0 0 18px;
}
.pd-benefit-card--dark .pd-benefit-title {
  color: var(--dark);
}
.pd-benefit-card ul {
  list-style: none;
}
.pd-benefit-card li {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--mid);
  font-weight: 300;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  line-height: 1.55;
}
.pd-benefit-card li:last-child {
  border-bottom: none;
}
.pd-benefit-card--dark li {
  color: var(--dark);
  border-bottom-color: rgba(38, 35, 32, .15);
}
@media (max-width: 900px) {
  .pd-benefits-grid { grid-template-columns: 1fr; }
}

/* IMPLANT / OPTION SPEC GRID — dark bordered cells, 3 per row */
.pd-implants-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.pd-implant-cell {
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding: 32px 28px;
}
.pd-implant-tag {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 12px;
}
.pd-implant-title {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--white);
  font-weight: 400;
  margin: 0 0 10px;
}
.pd-implant-cell p {
  font-family: var(--sans);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .42);
  line-height: 1.7;
  font-weight: 300;
}
@media (max-width: 900px) {
  .pd-implants-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pd-implants-grid { grid-template-columns: 1fr; }
}

/* SUITABILITY — checklist cards */
.pd-suitability-grid {
  max-width: 1160px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gold);
}
.pd-suit-card {
  background: var(--cream);
  padding: 44px 40px;
}
.pd-suit-card--dark {
  background: var(--white);
}
.pd-suit-head {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--divider);
  margin: 0 0 22px;
}
.pd-suit-card--dark .pd-suit-head {
  color: var(--gold-dark);
  border-bottom-color: rgba(38, 35, 32, .15);
}
.pd-suit-card ul {
  list-style: none;
}
.pd-suit-card li {
  font-family: var(--sans);
  font-size: 13.5px;
  color: #444;
  font-weight: 300;
  padding: 11px 0;
  border-bottom: 1px solid #ede8e2;
  display: flex;
  gap: 12px;
  line-height: 1.55;
}
.pd-suit-card li:last-child {
  border-bottom: none;
}
.pd-suit-card li::before {
  content: '✓';
  color: var(--gold-dark);
  font-weight: 600;
  flex-shrink: 0;
}
.pd-suit-card--dark li {
  color: var(--dark);
  border-bottom-color: rgba(38, 35, 32, .15);
}
.pd-suit-card--dark li::before {
  content: '–';
  color: var(--gold-dark);
}
@media (max-width: 900px) {
  .pd-suitability-grid { grid-template-columns: 1fr; margin-top: 32px; }
}

/* BEFORE / AFTER — single centred slider, reuses .ba-slider-wrap + its JS/veil */
.pd-ba-section {
  background: var(--light-bg);
}
.pd-ba-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .pd-ba-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

/* QUOTE BREAK — full-width testimonial band */
.pd-quote-break {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: repeating-linear-gradient(100deg, #3a352f 0px, #3a352f 30px, #312c26 30px, #312c26 60px);
}
.pd-quote-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(38, 35, 32, .62);
}
.pd-quote-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.pd-quote-stars {
  color: var(--gold);
  letter-spacing: 4px;
  font-size: 14px;
  margin-bottom: 18px;
}
.pd-quote-inner blockquote {
  font-family: var(--serif);
  font-size: clamp(19px, 3.2vw, 28px);
  font-style: italic;
  color: var(--white);
  max-width: 720px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.pd-quote-cite {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* RECOVERY TIMELINE */
.pd-recovery-row {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--divider);
  padding-top: 32px;
  gap: 24px;
}
.pd-recovery-phase {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 10px;
}
.pd-recovery-title {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--dark);
  font-weight: 400;
  margin: 0 0 8px;
}
.pd-recovery-item p {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--mid);
  font-weight: 300;
  line-height: 1.65;
}

/* SCAR CARE BAND */
.pd-scarband {
  background: var(--cream);
  padding: 70px 32px;
  text-align: center;
}
.pd-scarband-inner {
  max-width: 680px;
  margin: 0 auto;
}
.pd-scarband .section-label {
  color: var(--gold-dark);
}
.pd-scarband h2 {
  color: var(--dark);
}
.pd-scarband p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--mid);
  font-weight: 300;
  line-height: 1.8;
  margin-top: 18px;
}

/* RISKS & COMPLICATIONS — reusable component, always fully visible (no gate).
   Each category is its own card, expanding independently on click. Severity
   is signalled by a thin colour bar + short subtitle, not counts or icons. */
.pd-risks-body {
  max-width: 820px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pd-risk-cat {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.pd-risk-cat:hover {
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(38, 35, 32, .08);
}
.pd-risk-cat.is-open {
  border-color: var(--gold);
  box-shadow: 0 16px 36px rgba(38, 35, 32, .10);
}
.pd-risk-cat-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 24px 26px;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
/* severity indicator — a small vertical bar, not an icon */
.pd-rc-severity {
  width: 3px;
  height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--gold);
}
.pd-rc-severity--moderate {
  background: var(--gold-dark, var(--gold-deep));
}
.pd-rc-severity--serious {
  background: var(--wine, #6e2433);
}
.pd-rc-title {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--dark);
}
.pd-rc-sub {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--mid);
  margin-left: auto;
  margin-right: 12px;
  font-style: italic;
  display: none;
}
@media (min-width: 640px) {
  .pd-rc-sub { display: inline; }
}
.pd-rc-chevron {
  color: var(--gold-deep);
  font-size: 16px;
  transition: transform .35s ease;
  flex-shrink: 0;
}
.pd-risk-cat.is-open .pd-rc-chevron {
  transform: rotate(180deg);
}

.pd-risk-cat-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.22, 1, .36, 1), padding .5s ease;
}
.pd-risk-cat.is-open .pd-risk-cat-list {
  max-height: 900px;
  padding: 0 26px 26px 45px;
}
.pd-risk-cat-list ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pd-risk-cat-list li {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mid);
  font-weight: 300;
  padding-left: 18px;
  position: relative;
}
.pd-risk-cat-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--gold);
}
.pd-risk-cat-list li strong {
  color: var(--gold-deep);
  font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
  .pd-risk-cat-list { transition: none; }
}

/* FAQ ACCORDION (dark) */
.pd-faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.pd-faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pd-faq-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.pd-faq-icon {
  font-size: 22px;
  color: var(--gold-dark);
  transition: transform .3s;
  flex-shrink: 0;
  line-height: 1;
  font-weight: 300;
}
.pd-faq-item[data-open] .pd-faq-icon {
  transform: rotate(45deg);
}
.pd-faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.pd-faq-item[data-open] .pd-faq-panel {
  max-height: 320px;
}
.pd-faq-panel p {
  padding: 0 0 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, .5);
  line-height: 1.8;
  margin: 0;
}

/* ============================================================
   PROCEDURE DETAIL PAGES v2 — redesign additions
   Rounded, gap-based cards replacing hairline "grout" grids;
   background-colour section separation; asymmetric alignment.
   ============================================================ */

/* BENEFITS v2 — tabbed categories, flowing bold-lead lists, no numerals */
.pd-benefits-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}
.pd-benefits-head .gold-rule {
  margin: 18px auto;
}
/* category tab filter — defaults to "All" so every card is visible on load;
   Physical/Aesthetic/Quality of Life narrow the grid down to one category */
.pd-bento-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.pd-bento-tab {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .3px;
  font-weight: 600;
  color: var(--mid);
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 50px;
  padding: 13px 24px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .25s ease, border-color .3s ease;
}
.pd-bento-tab:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.pd-bento-tab.is-active {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
  animation: pdBentoTabPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pdBentoTabPop {
  0% { transform: scale(.94); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.pd-bento-grid {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.pd-bento-card {
  min-height: 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  background: var(--light-bg);
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: inherit;
  color: inherit;
  opacity: 0;
  transform: translateY(16px);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease, background .35s ease, opacity .5s ease;
}
/* tab filter — hidden cards are removed from layout; shown cards get a
   one-shot pop-in (.is-entering, staggered by JS via animation-delay) */
.pd-bento-card.is-hidden {
  display: none;
}
.pd-bento-card.is-entering {
  animation: pdBentoCardIn .45s ease both;
}
@keyframes pdBentoCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* cascading reveal as the grid scrolls in — same .reveal.visible convention
   used by .pd-tech-table rows, staggered per card via nth-child delay */
.reveal.visible .pd-bento-card {
  opacity: 1;
  transform: translateY(0);
}
.pd-bento-card:nth-child(1) { transition-delay: .04s; }
.pd-bento-card:nth-child(2) { transition-delay: .08s; }
.pd-bento-card:nth-child(3) { transition-delay: .12s; }
.pd-bento-card:nth-child(4) { transition-delay: .16s; }
.pd-bento-card:nth-child(5) { transition-delay: .20s; }
.pd-bento-card:nth-child(6) { transition-delay: .24s; }
.pd-bento-card:nth-child(7) { transition-delay: .28s; }
.pd-bento-card:nth-child(8) { transition-delay: .32s; }
.pd-bento-card:nth-child(9) { transition-delay: .36s; }
.pd-bento-card:nth-child(10) { transition-delay: .40s; }
.pd-bento-card:hover {
  background: var(--white);
  box-shadow: 0 20px 44px rgba(38, 35, 32, .12);
  border-color: var(--gold);
}
/* scoped higher-specificity than the plain :hover above so the lift still
   wins once the reveal rule has set transform: translateY(0) on the card */
.reveal.visible .pd-bento-card:hover {
  transform: translateY(-5px);
}
.pd-bento-card h3 {
  position: relative;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--dark);
  margin: 0;
  padding-bottom: 6px;
}
/* golden underline "grows" in under the title on hover */
.pd-bento-card h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 1px;
  background: var(--gold);
  transition: width .35s ease;
}
.pd-bento-card:hover h3::after {
  width: 32px;
}
.pd-bento-text {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--mid);
  line-height: 1.6;
  font-weight: 300;
  margin: 0;
}
/* category icon — one small line-style SVG per card instead of a repeated
   text label; the category itself is already communicated by the active tab */
.pd-bento-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  color: var(--gold-deep);
  transition: transform .3s ease;
}
.pd-bento-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pd-bento-card:hover .pd-bento-icon {
  transform: scale(1.12);
}
.pd-bento-card[data-cat="aesthetic"] .pd-bento-icon { color: var(--gold-dark); }
.pd-bento-card[data-cat="quality"] .pd-bento-icon { color: var(--wine, #6e2433); }
.pd-benefits-closing {
  max-width: 640px;
  margin: 40px auto 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--gold-deep);
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .pd-bento-card {
    opacity: 1;
    transform: none;
    transition: box-shadow .35s ease, border-color .35s ease, background .35s ease;
  }
  .pd-bento-card.is-entering {
    animation: none;
  }
  .pd-bento-tab.is-active {
    animation: none;
  }
  .pd-bento-tab:hover {
    transform: none;
  }
}
@media (max-width: 700px) {
  .pd-bento-grid { grid-template-columns: 1fr; max-width: 480px; }
}

/* SUITABILITY v2 — tabs instead of a blunt side-by-side split, no photo */
.pd-suit-wrap {
  max-width: 780px;
  margin: 0 auto;
}
.pd-suit-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.pd-suit-tab {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .3px;
  font-weight: 600;
  color: var(--mid);
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 50px;
  padding: 13px 24px;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .25s;
}
.pd-suit-tab:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.pd-suit-tab.is-active {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
  animation: pdSuitTabPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pdSuitTabPop {
  0% { transform: scale(.94); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.pd-suit-panel {
  display: none;
}
.pd-suit-panel.is-active {
  display: block;
  animation: pdFadeIn .45s ease both;
}
@keyframes pdFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.pd-suit-panel ul {
  list-style: none;
  background: var(--white);
  border-radius: 20px;
  padding: 12px 32px;
}
.pd-suit-panel li {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--dark);
  font-weight: 300;
  padding: 16px 0;
  border-bottom: 1px solid var(--divider);
  display: flex;
  gap: 14px;
  line-height: 1.6;
  transition: background .25s ease, padding-left .25s ease;
}
.pd-suit-panel li:last-child {
  border-bottom: none;
}
.pd-suit-panel li:hover {
  background: rgba(229, 200, 169, .08);
  padding-left: 8px;
}
.pd-suit-panel li::before {
  content: '✓';
  color: var(--gold-deep);
  font-weight: 700;
  flex-shrink: 0;
}
.pd-suit-panel[data-suit-panel="delay"] li::before {
  content: '–';
  color: var(--gold-dark);
}
/* ALTERNATIVES tab — a row of "switchable option" pills (number + text), a
   deliberately different format from both the ✓ checklists above and the
   icon-topped Benefits cards, so the tab doesn't just repeat either language */
.pd-suit-alt-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.pd-suit-alt-pill {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 20px 22px;
  transition: border-color .3s, transform .3s;
}
.pd-suit-alt-pill:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}
.pd-suit-alt-ic {
  display: inline-block;
  width: 26px;
  height: 26px;
  color: var(--gold-deep);
  flex-shrink: 0;
}
.pd-suit-alt-ic svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pd-suit-alt-pill p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mid);
  margin: 0;
}
@media (max-width: 700px) {
  .pd-suit-alt-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-suit-tab.is-active { animation: none; }
  .pd-suit-tab:hover { transform: none; }
  .pd-suit-panel.is-active { animation: none; }
  .pd-suit-alt-pill:hover { transform: none; }
}

/* IMPLANT CHOICES v4 — kicker+title centred above a centred icon row (not a
   side column beside it, which just left dead space on smaller rows); each
   group cascades in on scroll, diagram lifts + glows gold on hover */
.pd-implant-groups {
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pd-implant-group {
  background: rgba(255, 255, 255, .04);
  border-radius: 20px;
  padding: 40px 48px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible .pd-implant-group {
  opacity: 1;
  transform: none;
}
.pd-implant-lower-grid .pd-implant-group:nth-child(1) { transition-delay: .05s; }
.pd-implant-lower-grid .pd-implant-group:nth-child(2) { transition-delay: .15s; }
.pd-implant-groups > .pd-implant-group:nth-child(2) { transition-delay: .25s; }
/* Shape + Surface side by side on desktop — Size stays full-width above them */
.pd-implant-lower-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 761px) {
  .pd-implant-lower-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
  }
  /* tighter padding/gap than the full-width Size group above, so its own
     two icons (Round/Anatomical, Smooth/Textured) have enough room to sit
     side by side in this now-narrower half-width column instead of wrapping */
  .pd-implant-lower-grid .pd-implant-group {
    padding: 36px 28px;
  }
  .pd-implant-lower-grid .pd-implant-diagrams {
    gap: 60px;
  }
  .pd-implant-lower-grid .pd-implant-diagram {
    max-width: 210px;
    flex-basis: 210px;
  }
}
.pd-implant-group-head {
  text-align: center;
  margin-bottom: 28px;
}
.pd-implant-group-head .pd-implant-tag {
  margin-bottom: 10px;
  justify-content: center;
}
.pd-implant-group-head h3 {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--white);
  font-weight: 400;
  margin: 0;
}
/* wide, centred paragraph under the whole row — used where a group has one
   shared description (Size) rather than a caption per option */
.pd-implant-desc-wide {
  max-width: 900px;
  margin: 28px auto 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.8;
  color: rgba(245, 242, 236, .65);
  font-weight: 300;
}
.pd-implant-diagrams {
  display: flex;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}
.pd-implant-diagram {
  flex: 0 1 220px;
  max-width: 220px;
  text-align: center;
  transition: transform .35s ease;
}
.pd-implant-diagram:hover {
  transform: translateY(-4px);
}
/* client-supplied vector artwork (img/implants/) — fixed height, auto width,
   so each icon's own aspect ratio (e.g. the Smaller/Moderate/Fuller size
   progression) comes through instead of being stretched to a common box */
.pd-implant-icon {
  display: inline-block;
  margin-bottom: 14px;
}
.pd-implant-icon img {
  display: block;
  height: 60px;
  width: auto;
  transition: filter .35s ease;
}
/* Size row — each size shows round + anatomical shape side by side */
.pd-implant-icon--pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.pd-implant-diagram:hover .pd-implant-icon img {
  filter: drop-shadow(0 0 5px rgba(229, 200, 169, .45));
}
.pd-implant-diagram h4 {
  font-family: var(--serif);
  font-size: 15.5px;
  color: var(--gold);
  font-weight: 400;
  margin: 0 0 6px;
}
.pd-implant-diagram p {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255, 255, 255, .42);
  font-weight: 300;
  line-height: 1.6;
}
@media (max-width: 800px) {
  .pd-implant-group { padding: 30px 26px; }
}
@media (max-width: 760px) {
  .pd-implant-diagrams { flex-wrap: wrap; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-implant-group {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pd-implant-diagram:hover {
    transform: none;
  }
}

/* TECHNIQUES v5 — real horizontal scroll (no mobile card-stack), sticky first
   column, scroll-position-driven "active technique" highlight, modal, diagram */
.pd-tech-wrap {
  max-width: 1240px;
  margin: 0 auto;
}
.pd-tech-table-scroll {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  border-radius: 18px;
  border: 1px solid var(--divider);
  background: var(--white);
  box-shadow: 0 10px 30px rgba(38, 35, 32, .06);
}
@media (max-width: 760px) {
  /* break out of .pd-section's own side padding so the table gets the full
     viewport width to work with instead of being squeezed into the same
     margins as the surrounding paragraph text — standard full-bleed trick,
     works regardless of how deeply nested this is since it's computed
     against the viewport, not any ancestor */
  .pd-tech-table-scroll {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    border: none;
  }
  /* the edge margin lives on the first/last CELLS, not as padding on the
     scrolling container itself — padding on an overflow:auto element isn't a
     reliable static gutter once you actually scroll it (the sticky column
     covers content starting from its own edge, but that scroll-container
     padding strip in front of it isn't guaranteed to stay opaque), which is
     exactly what let column text show through on the left during a scroll */
  .pd-tech-table th:first-child,
  .pd-tech-table td:first-child {
    padding-left: 16px;
  }
  .pd-tech-table th:last-child,
  .pd-tech-table td:last-child {
    padding-right: 16px;
  }
  /* more room now that the table isn't fighting the section's side padding —
     narrow the forced column minimums a bit so more of the table is visible
     without scrolling */
  .pd-tech-table th:nth-child(2),
  .pd-tech-table th:nth-child(3),
  .pd-tech-table td:nth-child(2),
  .pd-tech-table td:nth-child(3) {
    min-width: 128px;
  }
  /* no hover on touch devices anyway, and this is the most likely remaining
     source of the stray white sliver near the sticky column — hide it
     outright on mobile rather than leave a hover effect nothing can trigger */
  .pd-tech-table td:first-child::before {
    display: none;
  }
}
.pd-tech-table {
  /* no min-width — the table just fills whatever space it has and wraps its
     own cell text to fit; .pd-tech-table-scroll's overflow-x:auto stays only
     as a fallback for genuinely tiny screens, it doesn't force scrolling */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.pd-tech-table th,
.pd-tech-table td {
  scroll-snap-align: start;
}
.pd-tech-table thead th {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  text-align: left;
  padding: 22px 14px;
  border-bottom: 2px solid var(--gold);
  white-space: nowrap;
  background: var(--white);
}
.pd-tech-table tbody td {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--mid);
  font-weight: 300;
  padding: 22px 14px;
  vertical-align: middle;
  line-height: 1.5;
  white-space: normal;
  /* explicit reset — with border-collapse:separate, any stray UA-default
     cell border would render as its own thin line instead of merging away,
     which is exactly what a "white stripe between two columns" looks like */
  border: none;
}
.pd-tech-table th:nth-child(2),
.pd-tech-table th:nth-child(3),
.pd-tech-table td:nth-child(2),
.pd-tech-table td:nth-child(3) {
  min-width: 150px;
}
/* sticky technique-name column — needs an opaque background so content
   doesn't show through as it scrolls underneath it. overflow/will-change
   deliberately avoided here: combined with position:sticky they're a known
   cause of a stray repaint/ghosting artifact (the "white stripe" bug) in
   some mobile WebKit builds; backface-visibility is the safe fix instead. */
.pd-tech-table th:first-child,
.pd-tech-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  white-space: normal;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pd-tech-table thead th:first-child {
  background: var(--light-bg);
  z-index: 3;
}
.pd-tech-table tbody td:first-child {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--gold-deep);
  background: var(--white);
  box-shadow: 2px 0 8px rgba(38, 35, 32, .06);
  transition: background .3s ease;
}
/* thin gold stripe — hover only, no scroll-driven activation */
.pd-tech-table tbody td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.pd-tech-table tbody tr:hover td:first-child::before {
  transform: scaleY(1);
}
/* cascading reveal as each row scrolls in, then a simple hover accent —
   no scroll-position-driven "active row" any more (removed per brief 48:
   it never behaved reliably — the whole table would light up while scrolling
   past it on desktop, and never worked at all on phone) */
.pd-tech-table tbody tr {
  min-height: 76px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease, background .3s ease;
}
.reveal.visible .pd-tech-table tbody tr {
  opacity: 1;
  transform: none;
}
.pd-tech-table tbody tr:nth-child(1) { transition-delay: .05s; }
.pd-tech-table tbody tr:nth-child(2) { transition-delay: .12s; }
.pd-tech-table tbody tr:nth-child(3) { transition-delay: .19s; }
.pd-tech-table tbody tr:nth-child(4) { transition-delay: .26s; }
.pd-tech-table tbody tr:hover {
  background: rgba(229, 200, 169, .10);
}
.pd-tech-table tbody tr:hover td:first-child {
  background: var(--cream);
}
@media (prefers-reduced-motion: reduce) {
  .pd-tech-table tbody tr { transition: background .3s ease; }
}

/* swipe hint, shown only when the table genuinely overflows (JS-detected) */
.pd-tech-scroll-hint {
  display: none;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--mid);
  margin-top: 10px;
}
.pd-tech-table-scroll.is-scrollable + .pd-tech-scroll-hint {
  display: block;
}

/* bigger, unmistakably-tappable "Read more" pill (was a bare text link) */
.pd-tech-more {
  min-height: 44px;
  min-width: 110px;
  padding: 11px 20px;
  border-radius: 50px;
  background: rgba(229, 200, 169, .14);
  border: 1px solid var(--gold);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: background .3s, color .3s, transform .2s;
}
.pd-tech-more:hover {
  background: var(--gold);
  color: var(--dark);
  transform: translateY(-1px);
}
.pd-tech-more:active {
  transform: translateY(0) scale(.97);
}
.pd-tech-more-arr {
  transition: transform .3s;
}
.pd-tech-more:hover .pd-tech-more-arr {
  transform: translateX(3px);
}

/* standalone diagram below the cards — held to a sane width, not stretched */
.pd-tech-diagram {
  max-width: 620px;
  margin: 56px auto 0;
  text-align: center;
}
@media (max-width: 760px) {
  .pd-tech-diagram { margin-top: 32px; }
}
.pd-tech-diagram img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(38, 35, 32, .12);
  display: block;
  transition: transform .5s ease;
}
.pd-tech-diagram:hover img {
  transform: scale(1.015);
}
.pd-tech-diagram figcaption {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--mid);
  font-weight: 300;
  margin-top: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .pd-tech-card, .pd-tech-diagram img, .pd-split-media img { transition: none; }
}

/* "Read more" modal — same fade+scale language as the site's other modals */
.pd-tech-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 16, 14, .62);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.pd-tech-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.pd-tech-modal {
  position: relative;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--cream);
  border-radius: 16px;
  padding: 44px 40px;
  transform: translateY(16px) scale(.98);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.pd-tech-modal-overlay.open .pd-tech-modal {
  transform: translateY(0) scale(1);
}
.pd-tech-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--mid);
  cursor: pointer;
  transition: color .3s;
}
.pd-tech-modal-close:hover {
  color: var(--gold-deep);
}
.pd-tech-modal-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 16px;
  padding-right: 30px;
}
.pd-tech-modal-body p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--mid);
  font-weight: 300;
}
@media (max-width: 480px) {
  .pd-tech-modal { padding: 36px 26px; }
}

/* JOURNEY TIMELINE v2 — one continuous 11-step spine across 3 phase bands */
.pd-journey {
  padding: 96px 0;
  overflow: hidden;
  scroll-margin-top: 100px; /* clears the fixed header if anything ever anchors/links to #journey */
}
.pd-journey-intro {
  max-width: 620px;
  margin: 0 auto 8px;
  text-align: center;
  padding: 0 32px;
}
.pd-journey-intro .gold-rule { margin: 18px auto; }

.pd-journey-track {
  position: relative;
}

/* the connecting spine — drawn once, spans every phase band beneath it,
   centred on the viewport (the phase bands are full-bleed) */
.pd-journey-line {
  position: absolute;
  left: 50%;
  /* top/height are measured and set by JS to run only from the first node's
     circle to the last one, not the section's full padded height — these
     top:0/bottom:0 values are just an unmeasured-yet fallback before that runs */
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(153, 128, 100, .22);
  z-index: 1;
}
.pd-journey-line-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, var(--gold), var(--gold-dark));
  /* "flows" down to the active dot's centre and settles there, rather than
     tracking raw scroll position 1:1 */
  transition: height .6s cubic-bezier(.22,1,.36,1);
}

/* full-bleed colour band per phase; the 900px-wide content sits in .pd-journey-phase-inner */
.pd-journey-phase-bg {
  position: relative;
  width: 100%;
  padding: 56px 0;
  /* no z-index here — creating a stacking context on this element would trap
     its content (marker/nodes) below .pd-journey-line regardless of their own
     z-index, since the line is a sibling positioned at the .pd-journey-track level */
}
.pd-journey-phase-bg[data-phase-bg="1"] { background: var(--white); padding-top: 16px; }
.pd-journey-phase-bg[data-phase-bg="2"] { background: var(--dark); }
.pd-journey-phase-bg[data-phase-bg="3"] { background: var(--cream); }
.pd-journey-phase-bg[data-phase-bg="4"] { background: var(--light-bg); }
.pd-journey-phase-inner {
  position: relative;
  z-index: 2;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 40px;
}

.pd-journey-phase-marker {
  /* explicit flex-centering rather than relying on text-align — guaranteed to
     centre the badge and heading as a column regardless of any inherited
     text-align or inline-block quirk elsewhere */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 12px 0 40px;
  position: relative;
  z-index: 5;
}
.pd-journey-phase-marker h3 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 400;
  color: var(--dark);
  position: relative;
  z-index: 5;
  display: inline-block;
  padding: 0 22px;
  /* opaque "cut" so the spine (drawn behind, in z-order) doesn't bleed through
     the gaps between letters — background is set per phase colour below,
     since plain `inherit` only reaches the direct (transparent) parent */
  background: var(--white);
}
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-phase-marker h3 {
  color: var(--white);
  background: var(--dark);
}
.pd-journey-phase-bg[data-phase-bg="3"] .pd-journey-phase-marker h3 {
  background: var(--cream);
}
.pd-journey-phase-bg[data-phase-bg="4"] .pd-journey-phase-marker h3 {
  background: var(--light-bg);
}
/* only phase 4's marker has an intro paragraph under the title (the others
   are just badge+h3) — it never got the same opaque "cut" as the h3 above,
   so the spine was visible showing through its transparent line-height gaps
   on desktop, where it sits centred directly on top of the line */
.pd-journey-phase-marker p {
  position: relative;
  z-index: 5;
  display: inline-block;
  max-width: 520px;
  margin: 10px auto 0;
  background: var(--white);
  padding: 4px 16px;
}
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-phase-marker p {
  background: var(--dark);
}
.pd-journey-phase-bg[data-phase-bg="3"] .pd-journey-phase-marker p {
  background: var(--cream);
}
.pd-journey-phase-bg[data-phase-bg="4"] .pd-journey-phase-marker p {
  background: var(--light-bg);
}
.pd-journey-badge {
  position: relative;
  z-index: 5;
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  /* solid, fully opaque fill (not a translucent tint) — same reasoning as the
     phase heading below it: a see-through background would let the spine
     bleed through, since the badge sits directly on top of it in the stack */
  color: var(--dark);
  background: var(--gold);
  border-radius: 50px;
  padding: 6px 16px;
  margin-bottom: 16px;
}

.pd-journey-node {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  gap: 0 28px;
  margin-bottom: 0;
  z-index: 2;
}
/* desktop zigzag: each following card is pulled up into the empty opposite-side
   space of the previous row, so it starts around the previous card's midpoint
   instead of only after it fully ends — reset to normal stacking on mobile
   (single column) where that would make cards overlap for real, see media query below */
.pd-journey-node + .pd-journey-node {
  margin-top: -32px;
}
.pd-journey-node[data-open] {
  z-index: 3;
}
.pd-journey-node-dot {
  /* absolutely centred on the node itself (top:50%/left:50% + translate),
     rather than left to grid align-items — this is immune to any grid
     cross-axis quirk from the card's own justify-self/width/max-width and
     guarantees the exact same vertical centre on every node, left or right */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--gold);
  color: var(--gold-dark);
  font-family: var(--serif);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-node-dot {
  background: var(--dark);
  border-color: var(--gold);
  color: var(--gold);
}
.pd-journey-node[data-open] .pd-journey-node-dot,
.pd-journey-node.is-passed .pd-journey-node-dot {
  background: var(--gold);
  color: var(--dark);
}

/* justify-self (rather than plain stretch) pins every card's near edge flush
   against the grid gap next to the dot, so the gap-to-line distance is exactly
   the 28px column gap for every node — a fixed max-width keeps them from
   growing unevenly wide on ultra-wide viewports without shrinking them back
   to the cramped, content-hugging width the stretched-cards fix was for */
.pd-journey-node--left .pd-journey-node-card { grid-column: 1; justify-self: end; text-align: right; width: 100%; max-width: 620px; }
.pd-journey-node--right .pd-journey-node-card { grid-column: 3; justify-self: start; text-align: left; width: 100%; max-width: 620px; }

.pd-journey-node-card {
  position: relative;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid transparent;
  box-shadow: 0 10px 30px rgba(38, 35, 32, .08);
  overflow: hidden;
  cursor: pointer;
  /* every card stays fully readable at all times — the active one is picked
     out by its own scale/shadow/border accent, not by dimming its neighbours */
  opacity: 1;
  transform: scale(1);
  transition: border-color .3s ease, box-shadow .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
/* scroll-driven focus: whichever row is crossing the vertical centre of the
   viewport gets promoted — enlarged, nudged toward the spine and given a
   golden glow (JS toggles .is-active, see script at bottom of page) */
.pd-journey-node.is-active .pd-journey-node-card {
  transform: scale(1.03);
  box-shadow: 0 26px 56px rgba(38, 35, 32, .35);
  border-color: var(--gold);
}
.pd-journey-node--left.is-active .pd-journey-node-card { transform: scale(1.03) translateX(-8px); }
.pd-journey-node--right.is-active .pd-journey-node-card { transform: scale(1.03) translateX(8px); }
/* on the dark phase band, a plain darker shadow reads as nothing — swap in a
   soft gold ring + deep black shadow so the active card still visibly "lifts" */
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-node.is-active .pd-journey-node-card {
  box-shadow: 0 0 0 1px rgba(229, 200, 169, .4), 0 26px 56px rgba(0, 0, 0, .4);
}
.pd-journey-node.is-active .pd-journey-node-dot {
  /* keep the same translate(-50%,-50%) centring, just add the scale on top */
  transform: translate(-50%, -50%) scale(1.22);
  background: var(--gold);
  color: var(--dark);
  box-shadow: 0 0 0 6px rgba(229, 200, 169, .25), 0 8px 20px rgba(229, 200, 169, .4);
}
@media (max-width: 760px) {
  .pd-journey-node--left.is-active .pd-journey-node-card,
  .pd-journey-node--right.is-active .pd-journey-node-card { transform: scale(1) translateX(0); }
}
.pd-journey-node-card:hover {
  border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(38, 35, 32, .12);
}
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-node-card {
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
  border: 1px solid rgba(229, 200, 169, .18);
}
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-node-card:hover {
  border-color: var(--gold);
}

.pd-journey-node-head {
  width: 100%;
  padding: 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* the card's text-align:right/left (set alongside justify-self above) only
   affects inline text — the "Learn more" button is a flex item, so its own
   horizontal position needs align-items on the flex container itself */
.pd-journey-node--left .pd-journey-node-head { align-items: flex-end; }
.pd-journey-node--right .pd-journey-node-head { align-items: flex-start; }
.pd-journey-node-head h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--dark);
}
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-node-head h4 {
  color: var(--white);
}
.pd-journey-teaser {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mid);
  font-weight: 300;
  letter-spacing: .2px;
  line-height: 1.55;
}
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-teaser {
  color: rgba(255, 255, 255, .5);
}

/* explicit "Learn more" toggle — replaces the old bare "+" icon.
   Horizontal position comes from the parent's align-items (left/right cards
   above), not from this element itself. */
.pd-journey-more {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  background: rgba(229, 200, 169, .14);
  border: 1px solid rgba(229, 200, 169, .5);
  border-radius: 50px;
  padding: 9px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .3s, color .3s, border-color .3s;
}
.pd-journey-more:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}
.pd-journey-more-arr {
  transition: transform .3s;
}
.pd-journey-node[data-open] .pd-journey-more-arr {
  transform: rotate(90deg);
}
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-more {
  color: var(--gold);
  background: rgba(229, 200, 169, .08);
}
/* button behaves identically on every phase background: hover = solid gold
   fill + dark text — explicit and !important so no darker phase-2 rule can
   quietly win the cascade and make it look like it's "dimming" on hover */
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-more:hover {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border-color: var(--gold) !important;
}

/* KEY MILESTONE cards (The Operation / Week 1 / Final Outcome) — no toggle,
   full text visible immediately, wider and visually promoted */
.pd-journey-node-card--key {
  max-width: 640px;
  border-color: var(--gold) !important;
  background: var(--white) !important;
  /* always-on soft gold glow, not just a plain shadow — makes Key Milestone
     cards read as lit up even before they become the active row */
  box-shadow: 0 0 24px rgba(229, 200, 169, .25) !important;
  transition: box-shadow .5s ease, transform .5s ease;
}
.pd-journey-node.is-active .pd-journey-node-card--key {
  box-shadow: 0 0 40px rgba(229, 200, 169, .5), 0 26px 56px rgba(38, 35, 32, .2) !important;
}
.pd-journey-node-card--key .pd-journey-node-panel {
  max-height: none !important;
  overflow: visible;
}
.pd-journey-key-tag {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  display: inline-block;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 50px;
  padding: 5px 16px;
  margin-bottom: 4px;
}
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-key-tag {
  color: var(--gold);
}

.pd-journey-node-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.22, 1, .36, 1);
}
.pd-journey-node[data-open] .pd-journey-node-panel {
  max-height: 600px;
}
.pd-journey-node-panel p,
.pd-journey-node-panel ol,
.pd-journey-node-panel ul {
  padding: 0 26px 24px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--mid);
  font-weight: 300;
}
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-node-panel p,
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-node-panel ol,
.pd-journey-phase-bg[data-phase-bg="2"] .pd-journey-node-panel ul {
  color: rgba(255, 255, 255, .6);
}
.pd-journey-node-panel ol,
.pd-journey-node-panel ul {
  padding-left: 46px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-journey-node-panel ol li::marker,
.pd-journey-node-panel ul li::marker {
  color: var(--gold);
  font-weight: 600;
}

@media (max-width: 760px) {
  /* single source of truth for the spine's x-position on mobile — both the
     line and the dots derive from this one variable, plus the fixed 20px
     .pd-journey-phase-inner padding below, so they can never drift apart the
     way they did in brief 49 (line moved but dots didn't, or vice versa) */
  .pd-journey-track { --pd-journey-spine-x: 34px; }
  .pd-journey-line { left: var(--pd-journey-spine-x); }
  .pd-journey-phase-bg { padding: 48px 0; }
  /* left padding stays 20px — the spine/dot math above assumes exactly that;
     right padding is independent and can shrink freely to give the cards
     more width, since nothing else's position derives from it */
  .pd-journey-phase-inner { padding: 0 10px 0 20px; }
  /* shifts the whole node (dot + card) right as one unit, from 20px (the
     phase-inner padding above) to the shared spine position — the dot (see
     below) and the card both move together because they're both inside this
     same margin-shifted box, not repositioned independently */
  /* the dot is absolutely positioned (see .pd-journey-node-dot left:0 below) so
     it doesn't actually consume the grid's first column — it's only centred
     on x:0 via translate(-50%), meaning it visually extends just 20px to the
     right (half its own 40px width). Reserving a full 40px column for it left
     ~20px of dead space before the card even with a small gap; sizing the
     column to that real 20px half-width, plus a small gap, closes it up. */
  .pd-journey-node { grid-template-columns: 20px 1fr; gap: 0 8px; margin-bottom: 24px; margin-left: calc(var(--pd-journey-spine-x) - 20px); }
  /* the desktop zigzag overlap only works because left/right cards don't share
     horizontal space — on this single-column layout every card is in the same
     column, so the negative margin must be reset or cards would sit on top of each other */
  .pd-journey-node + .pd-journey-node { margin-top: 0; }
  .pd-journey-node:last-child { margin-bottom: 0; }
  /* the dot's base rule is left:50% + translateX(-50%); overriding just "left"
     to a fixed px value previously double-counted .pd-journey-phase-inner's
     own 20px padding (the node itself already starts there). left:0 lines the
     dot's centre up with the node's own (now spine-aligned) left edge. */
  .pd-journey-node-dot { left: 0; }
  .pd-journey-node--left .pd-journey-node-card,
  .pd-journey-node--right .pd-journey-node-card {
    grid-column: 2;
    justify-self: stretch;
    text-align: left;
    width: auto;
    max-width: none;
  }
  .pd-journey-node--left .pd-journey-node-head,
  .pd-journey-node--right .pd-journey-node-head {
    align-items: flex-start;
  }
  .pd-journey-node-card--key {
    max-width: none;
    background: var(--white) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 10px 28px rgba(38, 35, 32, .08) !important;
  }
  /* phase marker (badge + title + intro paragraph) mirrors the cards' own
     asymmetric inset below it — left padding matches the spine position
     exactly (same var as .pd-journey-node's margin-left above), so the text
     can never reach the line, and a smaller right padding (rather than an
     equal one) keeps the centred text visually centred over the cards,
     which are themselves pushed right against the spine, not over the full
     viewport width */
  .pd-journey-phase-marker {
    padding-left: calc(var(--pd-journey-spine-x) - 20px);
    padding-right: 16px;
  }
  /* the opaque "cut" behind the phase title (so the spine doesn't bleed
     through the letters) was only ever needed because on desktop the
     centred title sits exactly on top of the line's x=50% position. On
     mobile the line lives at a fixed x=20px, well clear of this now
     side-padded, centred text — nothing to mask any more. */
  .pd-journey-phase-marker h3 {
    background: none;
    padding: 0;
    /* narrower so even a long, wrapped title stays clear of the spine —
       centred text this close to the container's own left edge (which lines
       up with the spine, see --pd-journey-spine-x above) can otherwise wrap
       wide enough to sit right on top of the line */
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
  }
  /* same reasoning as h3 above — the intro paragraph's opaque cut is only
     needed on desktop, where it sits centred on the spine */
  .pd-journey-phase-marker p {
    background: none;
    padding: 0;
    max-width: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pd-journey-line-fill { transition: none; }
}

/* SCAR CARE v4 — no icons, no connecting line (didn't land well); the three
   steps read as a process instead via an arrow between the cards, a large
   faint number watermark per card (same device already used in Benefits),
   and a livelier hover */
.pd-scar-process {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0 18px;
  max-width: 1000px;
  margin: 48px auto 0;
  text-align: left;
}
/* this element still needs the .reveal class so the scroll observer flips it
   to .visible (that's what the cards' own cascade selector keys off), but
   its own fade/slide must be neutralised — otherwise the container fades in
   at the same time as the cards inside it, and the two opacities multiply
   together, making the whole thing look like a long, mushy delay */
.pd-scar-process.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.pd-scar-arrow {
  font-size: 32px;
  color: var(--gold);
  opacity: .8;
  transition: opacity .3s, transform .3s;
}
.pd-scar-process:hover .pd-scar-arrow {
  opacity: 1;
}
.pd-scar-step {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 32px 26px;
  opacity: 0;
  transform: translateY(18px);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, border-color .4s ease;
}
.reveal.visible .pd-scar-step {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s ease;
}
.pd-scar-process .pd-scar-step:nth-child(1) { transition-delay: .05s; }
.pd-scar-process .pd-scar-step:nth-child(3) { transition-delay: .15s; }
.pd-scar-process .pd-scar-step:nth-child(5) { transition-delay: .25s; }
.reveal.visible .pd-scar-step:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 50px rgba(38, 35, 32, .14);
  border-color: var(--gold);
}
.pd-scar-step .pd-scar-num {
  position: absolute;
  top: 6px;
  right: 14px;
  font-family: var(--serif);
  font-size: 64px;
  color: rgba(191, 147, 88, .08);
  line-height: 1;
  pointer-events: none;
  transition: color .4s ease, transform .4s ease;
}
.pd-scar-step .pd-scar-num::before {
  content: attr(data-num);
}
.pd-scar-step:hover .pd-scar-num {
  color: rgba(191, 147, 88, .16);
  transform: scale(1.08);
}
.pd-scar-step h4 {
  position: relative;
  padding-bottom: 6px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 2px;
}
.pd-scar-step h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width .35s ease;
}
.pd-scar-step:hover h4::after {
  width: 28px;
}
.pd-scar-step p {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--mid);
  font-weight: 300;
  line-height: 1.7;
}
@media (max-width: 760px) {
  .pd-scar-process { grid-template-columns: 1fr; gap: 16px; }
  .pd-scar-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-scar-step {
    opacity: 1;
    transform: none;
    transition: box-shadow .4s ease, border-color .4s ease;
  }
  .reveal.visible .pd-scar-step:hover {
    transform: none;
  }
}

/* RISKS v3 — breastfeeding & screening panel, closing reassurance line; both
   now live inside the collapsible .pd-risks-body, so they share its width */
.pd-risks-note {
  max-width: 820px;
  margin: 30px auto 0;
  background: var(--cream);
  border-radius: 18px;
  padding: 30px 34px;
}
.pd-risks-note-head {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 12px;
}
.pd-risks-note p {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--mid);
  font-weight: 300;
  line-height: 1.75;
}
.pd-risks-closing {
  max-width: 820px;
  margin: 24px auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--gold-deep);
  line-height: 1.6;
}
.pd-risks-collapse-btn {
  display: block;
  margin: 34px auto 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: color .3s;
}
.pd-risks-collapse-btn:hover {
  color: var(--wine, #6e2433);
}

/* RELATED PROCEDURES — soft teaser row before the CTA */
.pd-related {
  background: var(--cream);
  padding: 90px 32px;
}
.pd-related-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.pd-related-card {
  background: var(--white);
  border-radius: 18px;
  padding: 28px 26px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .3s, box-shadow .3s;
}
.pd-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(38, 35, 32, .10);
}
.pd-related-card h3 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--dark);
  font-weight: 400;
}
.pd-related-card p {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--mid);
  font-weight: 300;
  line-height: 1.6;
  flex: 1;
}
.pd-related-card span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}
@media (max-width: 900px) {
  .pd-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pd-related-grid { grid-template-columns: 1fr; }
}