/* =========================================================
   DrVoice Clinic — Stylesheet
   Premium voice care brand: London & Istanbul
   Typography: Fraunces (display) + Plus Jakarta Sans (body)
   Palette: slate-led, cyan accent, warm neutrals
   ========================================================= */


/* ---------- 1. Tokens ---------- */

:root {
  /* Brand palette */
  --ink: #1A2530;
  --slate-deep: #2A4159;
  --slate: #3D5872;
  --slate-mid: #6A7E94;
  --slate-soft: #B0BCC9;
  --slate-line: #D7DEE5;

  --cyan: #4FBDC0;
  --cyan-dark: #2F8E91;
  --cyan-tint: #E8F5F5;

  --paper: #FFFFFF;
  --off-white: #FAF9F6;
  --warm-sand: #ECE9E2;
  --warm-sand-tint: #F4F1EA;

  /* Type */
  --font-display: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 28px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 600ms;

  /* Shadows (used sparingly) */
  --shadow-sm: 0 1px 2px rgba(26, 37, 48, 0.04), 0 1px 1px rgba(26, 37, 48, 0.04);
  --shadow-md: 0 4px 24px -8px rgba(42, 65, 89, 0.12), 0 2px 6px rgba(42, 65, 89, 0.06);
  --shadow-lg: 0 24px 60px -24px rgba(42, 65, 89, 0.25), 0 8px 24px -8px rgba(42, 65, 89, 0.10);
}


/* ---------- 2. Reset / base ---------- */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--off-white);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
:focus-visible { outline: 2px solid var(--cyan-dark); outline-offset: 3px; border-radius: 2px; }

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


/* ---------- 3. Typography ---------- */

.display-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.3rem, 5vw + 0.4rem, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--slate-deep);
}

.display-heading em,
.display-heading-sm em {
  font-style: italic;
  font-weight: 500;
  color: var(--cyan-dark);
}

.display-heading-sm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.5vw + 0.9rem, 2.7rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--slate-deep);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  margin-bottom: 18px;
}

.eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

.eyebrow-light { color: var(--cyan); opacity: 0.85; }
.eyebrow-light .eyebrow-dot { background: var(--cyan); }


/* ---------- 4. Layout primitives ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding: clamp(36px, 4.5vw, 65px) 0; }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head-wide { max-width: 900px; margin-bottom: clamp(40px, 5vw, 64px); }

.section-head-with-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head-with-cta > div { max-width: 720px; }

.section-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate-mid);
  margin-top: 18px;
  max-width: 60ch;
}


/* ---------- 5. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

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

.btn-primary { background: var(--slate); color: white; border-color: var(--slate); }
.btn-primary:hover { background: var(--slate-deep); border-color: var(--slate-deep); }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost { background: transparent; color: var(--slate); border-color: var(--slate-line); }
.btn-ghost:hover { background: var(--slate); color: white; border-color: var(--slate); }

.btn-light { background: white; color: var(--slate-deep); border-color: white; }
.btn-light:hover { background: var(--cyan-tint); }

.btn-outline-light { background: transparent; color: white; border-color: rgba(255,255,255,0.4); }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); }


/* ---------- 6. Header / navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(61 88 114 / 14%);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(250, 249, 246, 0.98);
  border-bottom-color: var(--slate-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
}

.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 38px; width: auto; max-width: 150px; object-fit: contain; }

.nav-desktop { display: none; }

@media (min-width: 1100px) {
  .nav-desktop { display: block; flex: 1; }
  .header-inner { gap: 32px; }
}

.nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--slate-deep);
  border-radius: 999px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  cursor: pointer;
  position: relative;
}
.nav-link:hover { color: var(--slate); background: var(--cyan-tint); }
.nav-link.is-active { color: var(--slate); }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cyan);
}

.nav-item { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  background: var(--paper);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown li a {
  display: block;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--slate-deep);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dropdown li a:hover { background: var(--cyan-tint); color: var(--slate); }

.header-tail {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.lang-link { color: var(--slate-mid); transition: color var(--t-fast) var(--ease); }
.lang-link:hover { color: var(--slate); }
.lang-link.is-active { color: var(--slate-deep); }
.lang-sep { color: var(--slate-soft); }

/* Language switch lives in the burger drawer on mobile/tablet — hide the header one below desktop */
.lang-switch-desktop { display: none; }
@media (min-width: 1100px) {
  .lang-switch-desktop { display: flex; }
}

/* LGBTQ+ friendly flag beside the Book button (desktop only) */
.header-flag {
  height: 18px;
  width: auto;
  border-radius: 2px;
  margin-left: 2px;
  display: none;
}
@media (min-width: 1100px) {
  .header-flag { display: inline-block; }
}

.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  margin-left: 4px;
}
.hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--slate-deep);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 1100px) {
  .hamburger { display: none; }
}

.mobile-menu {
  position: fixed;
  inset: 78px 0 0;
  z-index: 99;
  background: var(--warm-sand-tint);
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease);
  overflow-y: auto;
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu-inner { padding: 24px var(--gutter) 48px; }
.mobile-nav > li { border-bottom: 1px solid var(--slate-line); }
.mobile-nav > li > a, .mobile-group-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-deep);
}
.mobile-group { }
.mobile-group ul { display: none; padding: 0 0 16px 0; }
.mobile-group.is-open ul { display: block; }
.mobile-group.is-open .mobile-group-trigger span { transform: rotate(45deg); }
.mobile-group-trigger span { display: inline-block; font-size: 18px; transition: transform var(--t-base) var(--ease); color: var(--slate-mid); }
.mobile-group ul li a {
  display: block;
  padding: 8px 0 8px 16px;
  font-size: 14px;
  color: var(--slate-mid);
  border-left: 1px solid var(--slate-line);
}
.mobile-cta { margin-top: 32px; width: 100%; }
.mobile-lang { margin-top: 24px; text-align: center; font-size: 13px; color: var(--slate-mid); }
.mobile-lang .is-active { color: var(--slate-deep); font-weight: 500; }


/* ---------- 7. Hero ---------- */

.hero {
  position: relative;
  padding: clamp(32px, 4vw, 56px) 0;
  overflow: hidden;
  background: var(--warm-sand-tint);
}

@media (min-width: 900px) {
  .hero {
    min-height: calc(100vh - 78px);
    display: flex;
    align-items: center;
    padding: clamp(20px, 2.5vw, 36px) 0;
  }
}

.hero-wave {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 6vw, 88px);
  }
}

.hero-text { max-width: 600px; }

.hero-lede {
  font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.18rem);
  line-height: 1.55;
  color: var(--slate-mid);
  margin: 18px 0 28px;
  max-width: 56ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding-top: 22px;
  border-top: 1px solid var(--slate-line);
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
}
.hero-trust li svg {
  width: 16px; height: 16px;
  color: var(--cyan-dark);
  flex-shrink: 0;
}

.hero-image-wrap {
  position: relative;
  isolation: isolate;
}

.hero-image-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--warm-sand);
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .hero-image-frame {
    aspect-ratio: 4 / 5;
    max-height: calc(100vh - 180px);
    margin-inline: auto;
  }
}

.hero-image {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: contrast(1.02) saturate(0.96);
}

.hero-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(42,65,89,0) 50%, rgba(42,65,89,0.30) 100%),
    radial-gradient(ellipse at top right, rgba(255,255,255,0) 30%, rgba(42,65,89,0.18) 100%);
  pointer-events: none;
}

.hero-caption {
  position: absolute;
  left: 22px; bottom: 22px;
  z-index: 2;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-caption-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.hero-caption-role {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}



/* ---------- 9. Services (grouped faded-image cards) ---------- */

.services { background: var(--off-white); }

.svc-group { margin-bottom: clamp(40px, 5vw, 64px); }
.svc-group:last-child { margin-bottom: 0; }

.svc-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--slate-line);
}
.svc-group-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1vw + 1rem, 1.65rem);
  font-weight: 500;
  color: var(--slate-deep);
  letter-spacing: -0.01em;
}
.svc-group-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate);
  white-space: nowrap;
  flex-shrink: 0;
}
.svc-group-link svg { transition: transform var(--t-base) var(--ease); }
.svc-group-link:hover svg { transform: translateX(3px); }

/* Slider (reuses team-slider scroll behaviour via shared data attr) */
.svc-slider {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 8px;
}
.svc-slider::-webkit-scrollbar { display: none; }

.svc-track {
  display: grid;
  gap: 16px;
  grid-auto-flow: column;
  grid-auto-columns: 82%;     /* mobile: 1 card per view with a peek of the next */
  padding-right: var(--gutter); /* trailing space so last card isn't flush to edge */
}
.svc-track > li { min-width: 0; scroll-snap-align: start; }

/* ENT: web 2 rows of 5; others single row — handled by wrapping at desktop */
@media (min-width: 1000px) {
  .svc-track {
    grid-auto-flow: row;
    gap: 18px;
    padding-right: 0;
  }
  .svc-track-ent { grid-template-columns: repeat(5, 1fr); }       /* 10 items → 2 rows of 5 */
  .svc-track-audiology { grid-template-columns: repeat(5, 1fr); } /* 5 items → 1 row */
  .svc-track-coaching { grid-template-columns: repeat(4, 1fr); }  /* 4 items → 1 row */
  .svc-track-3 { grid-template-columns: repeat(3, 1fr); }         /* 3 items → 1 row */
  .svc-track-nutrition { grid-template-columns: repeat(1, 1fr); max-width: 360px; } /* 1 item */
}
@media (min-width: 700px) and (max-width: 999px) {
  .svc-track { grid-auto-columns: calc((100% - 16px) / 2); }      /* tablet: 2 per view */
}

.svc-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--warm-sand-tint);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.svc-card-media {
  display: block;
  height: 150px;
  background-color: var(--warm-sand);
  background-image:
    linear-gradient(180deg, rgba(250,249,246,0) 60%, rgba(250,249,246,0.55) 82%, var(--warm-sand-tint) 100%),
    var(--svc-img, none);
  background-size: cover, cover;
  background-position: top center, top center;
  background-repeat: no-repeat, no-repeat;
  position: relative;
}
/* Soft "faded image" wash so photos stay subtle, fading toward the heading */
.svc-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(236,233,226,0.12) 0%, rgba(236,233,226,0.20) 60%, rgba(236,233,226,0.45) 100%);
  mix-blend-mode: luminosity;
  opacity: 0.5;
}

.svc-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 22px 22px;
}
.svc-card-name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--slate-deep);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.svc-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-mid);
  flex: 1;
  margin-bottom: 16px;
}
.svc-card-link {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease);
}
.svc-card:hover .svc-card-link { color: var(--cyan-dark); }


/* ---------- 10. Founder ---------- */

.founder { background: var(--warm-sand-tint); }

.founder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .founder-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

.founder-image-wrap {
  position: relative;
}

.founder-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--radius-xl);
  filter: contrast(1.03) saturate(0.95);
}

.founder-image-label {
  position: absolute;
  left: -8px; bottom: 28px;
  background: var(--slate-deep);
  color: white;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  max-width: 240px;
}
.founder-image-label-line { display: block; }
.founder-image-label-line:first-child {
  font-family: var(--font-body);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cyan);
  margin-bottom: 4px;
}

.founder-text { max-width: 580px; }

.founder-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.3vw + 1rem, 1.18rem);
  font-style: italic;
  font-weight: 500;
  color: var(--slate-mid);
  margin: 18px 0 22px;
  line-height: 1.45;
}

.founder-bio {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 36px;
}

.founder-points {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 40px;
}
.founder-points li {
  display: flex;
  gap: 18px;
}
.founder-point-marker {
  flex-shrink: 0;
  width: 36px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--cyan-dark);
  padding-top: 2px;
  letter-spacing: 0.05em;
}
.founder-points h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-deep);
  margin-bottom: 4px;
  letter-spacing: 0.005em;
}
.founder-points p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate-mid);
}

.founder-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* ---------- 11. Istanbul Clinic ---------- */

.istanbul-clinic { background: var(--off-white); }

.clinic-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 14px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
@media (min-width: 800px) {
  .clinic-grid {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    height: 450px;
  }
}

.clinic-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--warm-sand);
  margin: 0;
}
.clinic-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.clinic-photo:hover img { transform: scale(1.04); }

@media (min-width: 800px) {
  .clinic-photo-main { grid-row: 1 / 3; grid-column: 1 / 2; }
}
.clinic-photo-main img { aspect-ratio: auto; }
.clinic-photo-treatment img,
.clinic-photo-reception img { aspect-ratio: 4 / 3; }
@media (min-width: 800px) {
  .clinic-photo-treatment img,
  .clinic-photo-reception img { aspect-ratio: auto; }
}

.clinic-photo figcaption {
  position: absolute;
  left: 20px; bottom: 18px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(42, 65, 89, 0.85);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.clinic-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
@media (min-width: 900px) {
  .clinic-bottom { grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: center; }
}

.clinic-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 600px) {
  .clinic-points { grid-template-columns: repeat(3, 1fr); }
}
.clinic-points li {
  padding-top: 18px;
  border-top: 1px solid var(--slate-line);
}
.clinic-point-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--cyan-dark);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.clinic-points h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-deep);
  margin-bottom: 6px;
}
.clinic-points p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate-mid);
}

.clinic-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-self: start;
}
@media (min-width: 900px) { .clinic-ctas { justify-self: end; flex-direction: column; align-items: stretch; } }



/* ---------- 13. Team ---------- */

.team { background: var(--warm-sand-tint); }

/* Maestro (conductor) card — featured founder block before the ensemble grid */

.maestro-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: clamp(56px, 7vw, 88px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.maestro-card:hover {
  box-shadow: var(--shadow-md);
}
@media (min-width: 800px) {
  .maestro-card {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

.maestro-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--warm-sand);
  overflow: hidden;
}
@media (min-width: 800px) {
  .maestro-photo { aspect-ratio: auto; min-height: 420px; }
}
.maestro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 700ms var(--ease-out);
}
.maestro-card:hover .maestro-photo img { transform: scale(1.02); }

.maestro-content {
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
}

.maestro-content .eyebrow { margin-bottom: 14px; }

.maestro-name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.8vw + 0.8rem, 2.3rem);
  font-weight: 500;
  line-height: 1.08;
  color: var(--slate-deep);
  letter-spacing: -0.012em;
  margin: 0 0 12px;
}

.maestro-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.15rem);
  line-height: 1.4;
  color: var(--slate-mid);
  margin: 0 0 22px;
  max-width: 38ch;
}

.maestro-context {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 50ch;
}

.maestro-content .btn { align-self: flex-start; }

/* Ensemble subhead — thin divider with centered label */

.ensemble-subhead {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}
.ensemble-line {
  flex: 1;
  height: 1px;
  background: var(--slate-line);
}
.ensemble-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--slate-mid);
  white-space: nowrap;
}

.team-card { text-align: center; }
.team-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, var(--warm-sand) 0%, var(--warm-sand-tint) 100%);
}
.team-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(42,65,89,0.06));
  pointer-events: none;
}
.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.team-card:hover .team-photo img { transform: scale(1.04); }

.team-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-deep);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.team-role {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-mid);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.team-cta-wrap { text-align: center; }


/* ---------- 14. Voice Health Library ---------- */

.library { background: var(--off-white); }

.section-head-cta { flex-shrink: 0; align-self: flex-end; }

.library-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 700px) { .library-grid { grid-template-columns: repeat(3, 1fr); } }

.library-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--paper);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius-lg);
  height: 100%;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.library-card:hover {
  border-color: var(--slate);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.library-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.library-card-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--cyan-tint);
  color: var(--cyan-dark);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.library-card-time {
  font-size: 11.5px;
  color: var(--slate-mid);
  letter-spacing: 0.04em;
}

.library-card-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.18;
  color: var(--slate-deep);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.library-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-mid);
  margin-bottom: 24px;
  flex: 1;
}

.library-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
}
.library-card:hover .library-card-link svg { transform: translateX(3px); }
.library-card-link svg { transition: transform var(--t-base) var(--ease); }


/* ---------- 15. Video Library ---------- */

.videos { background: var(--warm-sand-tint); }

.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }

.video-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-lg);
}

.video-cover {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  background: var(--slate-deep);
}
.video-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.video-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(42, 65, 89, 0.5) 0%, rgba(42, 65, 89, 0.25) 50%, rgba(42, 65, 89, 0.6) 100%);
  transition: background var(--t-base) var(--ease);
}
.video-card:hover .video-cover img { transform: scale(1.05); }
.video-card:hover .video-cover-overlay { background: linear-gradient(135deg, rgba(42, 65, 89, 0.3), rgba(42, 65, 89, 0.45)); }

.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  transition: transform var(--t-base) var(--ease);
}
.video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-play svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.25)); }

.video-meta { padding: 18px 4px 0; }
.video-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  margin-bottom: 10px;
}
.video-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.22;
  color: var(--slate-deep);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.video-desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate-mid);
}


/* ---------- 16. FAQ ---------- */

.faq { background: var(--off-white); }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: 0.85fr 1.15fr; gap: clamp(48px, 6vw, 96px); }
}

.faq-intro { max-width: 420px; }

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--slate-line);
}

.faq-item { border-bottom: 1px solid var(--slate-line); }

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-deep);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.faq-trigger:hover { color: var(--slate); }

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 16px; height: 16px;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--slate-deep);
  transition: transform var(--t-base) var(--ease);
}
.faq-icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.faq-trigger[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base) var(--ease);
}
.faq-panel > p {
  padding: 0 0 24px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--slate-mid);
  max-width: 68ch;
}
.faq-item.is-open .faq-panel { max-height: 500px; }



/* ---------- 18. Footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.7);
  padding: clamp(60px, 8vw, 100px) 0 32px;
  font-size: 14px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } }

.footer-brand { max-width: 360px; }
.footer-logo {
  height: 36px; width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  margin-bottom: 20px;
}
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: white;
  margin-bottom: 14px;
}
.footer-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.footer-social a:hover { background: var(--cyan); color: var(--slate-deep); }
.footer-social svg { width: 16px; height: 16px; }

.footer-col-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: white;
  margin-bottom: 18px;
}
.footer-col-title-mt { margin-top: 32px; }
.footer-col ul li {
  margin-bottom: 9px;
}
.footer-col ul li a {
  color: rgba(255,255,255,0.6);
  transition: color var(--t-fast) var(--ease);
  font-size: 13.5px;
}
.footer-col ul li a:hover { color: var(--cyan); }

.footer-col-contact address p { margin-bottom: 6px; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
.footer-col-contact address a:hover { color: var(--cyan); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
}
.footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  transition: color var(--t-fast) var(--ease);
}
.footer-legal a:hover { color: var(--cyan); }

.footer-credit {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.footer-credit p {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.32);
  margin: 0;
}
.footer-credit a {
  color: rgba(255,255,255,0.55);
  transition: color var(--t-fast) var(--ease);
  font-weight: 500;
}
.footer-credit a:hover { color: var(--cyan); }


/* ---------- 19. WhatsApp FAB ---------- */

.whatsapp-fab {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 80;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #25D366;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  transition: transform var(--t-base) var(--ease);
}
.whatsapp-fab:hover { transform: scale(1.08); }
.whatsapp-fab svg { width: 26px; height: 26px; }


/* ---------- 20. Video Modal ---------- */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.video-modal.is-open { opacity: 1; visibility: visible; }
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 37, 48, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.video-modal-content {
  position: relative;
  width: 100%;
  max-width: 980px;
  aspect-ratio: 16 / 9;
  background: black;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform var(--t-base) var(--ease);
}
.video-modal.is-open .video-modal-content { transform: scale(1); }

.video-modal-frame {
  position: absolute;
  inset: 0;
}
.video-modal-frame iframe {
  width: 100%; height: 100%;
  border: 0;
}

.video-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--slate-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.video-modal-close:hover { background: white; }


/* ---------- 21. Scroll reveal helper ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}


/* ---------- 22. Print ---------- */

@media print {
  .site-header, .mobile-menu, .whatsapp-fab, .video-modal { display: none; }
  body { background: white; color: black; }
}


/* =========================================================
   ============  CLIENT REVISIONS (June 2026)  ============
   Mobile-first refinements + new components. This block
   intentionally overrides earlier rules where needed.
   ========================================================= */

/* ---- R: Nav Contact as badge/button ---- */
.nav-link-badge {
  background: var(--cyan);
  color: var(--slate-deep) !important;
  font-weight: 600;
  padding: 9px 18px !important;
  border-radius: 999px;
  margin-left: 6px;
}
.nav-link-badge:hover {
  background: var(--cyan-dark);
  color: #fff !important;
}
.nav-link-badge.is-active::after { display: none; }

/* ---- R: Hero waveform watermark (replaces 3 lines) ---- */
.hero-waveform-bars line {
  /* gentle vertical breathing animation, very subtle */
  animation: heroBar 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes heroBar {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.78); }
}
.hero-waveform-bars line:nth-child(odd)  { animation-duration: 5s; }
.hero-waveform-bars line:nth-child(3n)   { animation-duration: 3.4s; }
.hero-waveform-bars line:nth-child(4n)   { animation-duration: 6s; }
@media (prefers-reduced-motion: reduce) {
  .hero-waveform-bars line { animation: none; }
}

/* ---- R: Partner association band (above footer) ---- */
.assoc-band {
  background: var(--warm-sand-tint);
  border-top: 1px solid var(--warm-sand);
  border-bottom: 1px solid var(--warm-sand);
  padding: 26px 0;
}
.assoc-band .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 40px;
}
.assoc-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-mid);
}
.assoc-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px 40px;
}
.assoc-list img {
  height: 30px;
  width: auto;
  opacity: 0.85;
  transition: opacity var(--t-base) var(--ease);
}
.assoc-list img:hover { opacity: 1; }
@media (max-width: 600px) {
  .assoc-list img { height: 24px; }
  .assoc-band .container { gap: 14px 24px; }
}

/* ---- R: Maestro compact (less vertical space) ---- */
@media (min-width: 800px) {
  .maestro-card-compact { grid-template-columns: 0.62fr 1.38fr; }
  .maestro-card-compact .maestro-photo { min-height: 0; }
  .maestro-card-compact .maestro-photo img { object-position: center 18%; }
  .maestro-card-compact .maestro-content { padding: clamp(28px, 3vw, 44px); }
}
.maestro-card-compact .maestro-name { margin-bottom: 8px; }
.maestro-card-compact .maestro-title { margin-bottom: 16px; }
.maestro-card-compact .maestro-context { margin-bottom: 20px; font-size: 14.5px; }

/* ---- R: Team sliders (web up to 6 across, mobile 2, centered) ---- */
.roster-group { margin-bottom: clamp(40px, 5vw, 64px); }
.roster-group:last-of-type { margin-bottom: clamp(32px, 4vw, 48px); }

.team-slider {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 8px;
}
.team-slider::-webkit-scrollbar { display: none; }

.team-track {
  display: flex;
  gap: 18px;
  min-width: min-content;
  padding-right: var(--gutter);   /* trailing space so last card isn't flush */
}
.team-track .team-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 18px - var(--gutter)) / 2);   /* mobile: 2 per view, accounting for trailing pad */
  min-width: 0;
}
@media (min-width: 700px) {
  .team-track {
    gap: 20px;
    justify-content: center;   /* center only when cards are fixed-width and fit */
    padding-right: 0;
  }
  .team-track .team-card { flex-basis: 200px; }   /* tablet+: fixed card width, centered */
}
@media (min-width: 1000px) {
  .team-track .team-card { flex-basis: 180px; }   /* web: up to 6 fit, fewer center with no right gap */
}

/* Empty placeholder photo (e.g. Ece Ecemiş, photo pending) */
.team-photo-empty {
  background:
    linear-gradient(135deg, var(--warm-sand) 0%, var(--cyan-tint) 100%);
  position: relative;
}
.team-photo-empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%236A7E94' stroke-width='2' opacity='0.5'%3E%3Ccircle cx='32' cy='24' r='11'/%3E%3Cpath d='M12 54c2-11 10-17 20-17s18 6 20 17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 40%;
  background-size: 42px;
}

/* ---- R: FAQ categorised tabs ---- */
.faq-intro-center {
  max-width: 640px;
  margin: 0 auto clamp(28px, 3.5vw, 44px);
  text-align: center;
}
.faq-intro-center .eyebrow { justify-content: center; }
.faq-intro-center .section-lede { margin-left: auto; margin-right: auto; }

.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.faq-tab {
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--slate-mid);
  background: transparent;
  border: 1px solid var(--slate-line);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  white-space: nowrap;
}
.faq-tab:hover { color: var(--slate); border-color: var(--slate-soft); }
.faq-tab.is-active {
  background: var(--slate);
  color: #fff;
  border-color: var(--slate);
}

.faq-panels { max-width: 820px; margin: 0 auto; }
.faq-list { display: none; border-top: 1px solid var(--slate-line); }
.faq-list.is-active { display: block; animation: faqFade 400ms var(--ease-out); }
@keyframes faqFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- R: Footer call-band (phone + waveform) ---- */
/* Phone visual block — transparent image, no background panel. */
.footer-callband-img {
  display: inline-block;
  margin-top: 22px;
  max-width: 280px;
  transition: transform var(--t-base) var(--ease);
}
.footer-callband-img:hover {
  transform: translateY(-2px);
}
.footer-callband-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Footer address links */
.footer-col-contact address a { color: rgba(255,255,255,0.6); transition: color var(--t-fast) var(--ease); }
.footer-col-contact address a:hover { color: var(--cyan); }

/* ---- R: Scroll reveal — section enters as a whole, inner blocks
   each animate in on their own scroll position (independent) ---- */
.section, .assoc-band {
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.section.is-visible, .assoc-band.is-visible {
  opacity: 1;
}
.hero { opacity: 1; transform: none; } /* hero always visible immediately */

/* Inner reveal blocks: hidden until each one scrolls into view, then
   it rises into place as a single unit — a clearly felt entrance. */
.reveal-block {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  transition:
    opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-block.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

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

/* ---- R: Mobile-first refinements ---- */
@media (max-width: 600px) {
  /* Tighter section rhythm on small screens */
  .section { padding: clamp(48px, 12vw, 72px) 0; }
  /* Logo never overflows on mobile */
  .brand-logo { height: 32px; max-width: 130px; object-fit: contain; }
  /* Larger finger targets in mobile nav */
  .mobile-nav > li > a, .mobile-group-trigger { padding: 16px 0; font-size: 16px; }
  /* Hero headline scales down a touch sooner */
  .hero-text { max-width: 100%; }
}

/* Ensure key CTAs are thumb-reachable: sticky mobile contact handled by header badge */
@media (max-width: 1099px) {
  .nav-link-badge { display: none; } /* badge only relevant in desktop nav; mobile uses drawer + WhatsApp */
}


/* ---- R: Testimonials auto-scroll marquee (dark teal section) ---- */
.testimonials {
  background: var(--cyan-dark);
  overflow: hidden;
  position: relative;
}
/* subtle depth: darker radial corners */
.testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top left, rgba(255,255,255,0.06), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(0,0,0,0.18), transparent 60%);
  pointer-events: none;
}
.testimonials .container,
.testimonials .marquee { position: relative; z-index: 1; }

.testimonials .eyebrow { color: rgba(255,255,255,0.85); }
.testimonials .eyebrow-dot { background: #fff; }
.testimonials .display-heading-sm { color: #fff; }
.testimonials .display-heading-sm em { color: rgba(255,255,255,0.78); }

.section-head-center {
  max-width: 640px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  text-align: center;
}
.section-head-center .eyebrow { justify-content: center; }

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: marqueeScroll 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

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

.t-card {
  flex: 0 0 auto;
  width: 360px;
  max-width: 85vw;
  margin: 0;
  padding: 20px 28px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  position: relative;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.t-quote-mark {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.6;
  color: #fff;
  opacity: 0.55;
  margin-bottom: 6px;
  height: 22px;
}
.t-card blockquote {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  /* Clamp to max 2 lines so cards stay compact; overflow shows ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Clickable card when the quote is truncated */
.t-card.is-clickable { cursor: pointer; }
.t-card.is-clickable:hover { background: rgba(255,255,255,0.16); }
.t-read-more {
  display: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0.8;
  margin: -8px 0 14px;
}
.t-card.is-clickable .t-read-more { display: block; }
.t-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: auto;
}
.t-flag {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.t-meta { display: flex; flex-direction: column; }
.t-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.t-role {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: nowrap; overflow-x: auto; }
}


/* ---- R2: Services mega menu (2-level) ---- */
.has-megamenu { position: static; }

.megamenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(880px, calc(100vw - 48px));
  background: var(--paper);
  border: 1px solid var(--slate-line);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
  z-index: 50;
}
.has-megamenu:hover .megamenu,
.has-megamenu:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.megamenu-cat {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--slate-deep);
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--cyan);
  letter-spacing: 0.01em;
}
.megamenu-cat-mt { margin-top: 22px; }
.megamenu-col ul { display: flex; flex-direction: column; gap: 2px; }
.megamenu-col ul li a {
  display: block;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--slate-mid);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.megamenu-col ul li a:hover { background: var(--cyan-tint); color: var(--slate); }

/* Mobile subcategory headings inside Services group */
.mobile-subcat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  padding: 14px 0 6px 16px;
  margin-top: 4px;
}
.mobile-subcat:first-child { margin-top: 0; padding-top: 4px; }



/* ---- R: Slider navigation arrows (mobile/tablet swipe affordance) ---- */
.slider-nav {
  display: none;   /* shown only when slider actually overflows (JS toggles) */
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}
.slider-nav.is-active { display: flex; }

.slider-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--slate-line);
  background: var(--paper);
  color: var(--slate);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.slider-nav-btn:hover { background: var(--slate); color: #fff; border-color: var(--slate); }
.slider-nav-btn:disabled { opacity: 0.35; cursor: default; }
.slider-nav-btn:disabled:hover { background: var(--paper); color: var(--slate); border-color: var(--slate-line); }
.slider-nav-btn svg { width: 18px; height: 18px; }

/* Dots / progress hint between arrows */
.slider-nav-hint {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-mid);
  min-width: 56px;
  text-align: center;
}

/* On dark testimonials, arrows adapt (in case used there later) */
.testimonials .slider-nav-btn {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.testimonials .slider-nav-btn:hover { background: #fff; color: var(--cyan-dark); }
.testimonials .slider-nav-hint { color: rgba(255,255,255,0.7); }

/* Subtle edge fade on sliders to imply more content (mobile) */
@media (max-width: 999px) {
  .svc-slider, .team-slider {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
  }
}
@media (min-width: 1000px) {
  .slider-nav { display: none !important; }   /* desktop shows everything, no arrows needed */
}


/* ---- R: Announcement modal (image-only, opens on load) ---- */
.announce-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.announce-modal.is-open { opacity: 1; visibility: visible; }

.announce-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 37, 48, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.announce-content {
  position: relative;
  z-index: 1;
  max-width: min(560px, 92vw);
  max-height: 88vh;
  transform: scale(0.96);
  transition: transform var(--t-base) var(--ease);
}
.announce-modal.is-open .announce-content { transform: scale(1); }

.announce-media {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.announce-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
}
/* When no link is set, the anchor shouldn't look clickable */
.announce-media:not([href]) { cursor: default; }

.announce-close {
  position: absolute;
  top: -14px; right: -14px;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--slate-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.announce-close:hover { background: var(--cyan-tint); transform: scale(1.05); }

@media (max-width: 600px) {
  .announce-modal { padding: 18px; }
  .announce-content { max-width: 94vw; max-height: 86vh; }
  .announce-media img { max-height: 86vh; }
  /* keep close button inside the viewport on small screens */
  .announce-close { top: -10px; right: -10px; width: 34px; height: 34px; }
}


/* ---- R: Testimonial full-quote modal ---- */
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.quote-modal.is-open { opacity: 1; visibility: visible; }
.quote-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 37, 48, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.quote-modal-content {
  position: relative;
  z-index: 1;
  max-width: min(560px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--cyan-dark);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  padding: 40px 38px 34px;
  transform: scale(0.96);
  transition: transform var(--t-base) var(--ease);
  box-shadow: var(--shadow-lg);
}
.quote-modal.is-open .quote-modal-content { transform: scale(1); }
.quote-modal-mark {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.5;
  color: #fff;
  opacity: 0.5;
  height: 30px;
  margin-bottom: 14px;
}
.quote-modal-text {
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.62;
  color: #fff;
}
.quote-modal-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.quote-modal-flag { font-size: 24px; line-height: 1; }
.quote-modal-meta { display: flex; flex-direction: column; }
.quote-modal-name { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: #fff; }
.quote-modal-role { font-size: 12.5px; color: rgba(255,255,255,0.7); }
.quote-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.quote-modal-close:hover { background: rgba(255,255,255,0.28); }
@media (max-width: 600px) {
  .quote-modal-content { padding: 34px 24px 28px; max-width: 94vw; }
  .quote-modal-text { font-size: 16px; }
}


/* ---------- 23. Service-detail pages (.sd-*) ---------- */

    /* Hero */
    .sd-hero { position: relative; overflow: hidden; background: var(--warm-sand-tint); padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 5vw, 72px); }
    .sd-hero-wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
    .sd-hero .container { position: relative; z-index: 1; }
    .sd-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--slate-mid); margin-bottom: clamp(20px, 3vw, 30px); }
    .sd-breadcrumb a { color: var(--slate-mid); transition: color var(--t-fast) var(--ease); }
    .sd-breadcrumb a:hover { color: var(--slate); }
    .sd-breadcrumb span[aria-hidden] { color: var(--slate-soft); }
    .sd-breadcrumb .sd-crumb-current { color: var(--slate-deep); font-weight: 500; }

    .sd-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
    @media (min-width: 900px) { .sd-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }

    .sd-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3vw + 1rem, 3.1rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--slate-deep); margin-bottom: 20px; }
    .sd-hero h1 em { font-style: italic; font-weight: 500; color: var(--cyan-dark); }
    .sd-hero-lede { font-size: 17px; line-height: 1.65; color: var(--slate); max-width: 54ch; margin-bottom: 28px; }
    .sd-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

    .sd-hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(160deg, var(--slate-deep), var(--cyan-dark)); box-shadow: var(--shadow-lg); }
    .sd-hero-media img { width: 100%; height: 100%; object-fit: cover; }
    /* Service hero reuses the homepage service-cover images, whose bottom ~40% is
       empty space. Anchor to the top and scale up to crop that empty lower portion.
       (Scoped to service pages only — profile/clinic photos are unaffected.) */
    .sd-hero-media-cover img { object-position: center top; transform: scale(1.67); transform-origin: top center; }
    .sd-hero-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; background: linear-gradient(to top, rgba(26,37,48,0.72), transparent); color: #fff; }
    .sd-hero-media .sd-cap-name { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; }
    .sd-hero-media .sd-cap-role { display: block; font-size: 12px; color: rgba(255,255,255,0.78); }

    /* Generic content section + prose */
    .sd-section { padding: clamp(40px, 5vw, 72px) 0; }
    .sd-section-alt { background: var(--warm-sand-tint); }
    .sd-prose p { font-size: 16px; line-height: 1.75; color: var(--slate); margin-bottom: 16px; max-width: 68ch; }
    .sd-prose p:last-child { margin-bottom: 0; }

    .sd-grid-2 { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
    @media (min-width: 900px) { .sd-grid-2 { grid-template-columns: 1.15fr 0.85fr; } }

    /* Who-is-it-for checklist card */
    .sd-aside { background: var(--paper); border: 1px solid var(--slate-line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-sm); }
    .sd-aside h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--slate-deep); margin-bottom: 16px; }
    .sd-checklist li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--slate-line); font-size: 14.5px; line-height: 1.55; color: var(--slate); }
    .sd-checklist li:last-child { border-bottom: 0; }
    .sd-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--cyan-tint); color: var(--cyan-dark); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
    .sd-check svg { width: 11px; height: 11px; }

    /* Technique cards */
    .sd-tech-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
    @media (min-width: 760px) { .sd-tech-grid { grid-template-columns: repeat(3, 1fr); } }
    .sd-tech-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--slate-line); border-radius: var(--radius-lg); padding: clamp(22px, 2.4vw, 28px); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
    .sd-tech-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .sd-tech-card.is-signature { border-color: var(--cyan); background: linear-gradient(180deg, var(--cyan-tint), var(--paper) 55%); }
    .sd-tech-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-dark); background: var(--cyan-tint); border-radius: 999px; padding: 5px 11px; margin-bottom: 16px; }
    .sd-tech-card.is-signature .sd-tech-tag { background: var(--cyan); color: #fff; }
    .sd-tech-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--slate-deep); line-height: 1.25; margin-bottom: 10px; }
    .sd-tech-card p { font-size: 14px; line-height: 1.65; color: var(--slate-mid); margin: 0; }

    /* Process timeline (a real ordered sequence — numbering earns its place) */
    .sd-process { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 36px; counter-reset: step; }
    @media (min-width: 680px) { .sd-process { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
    .sd-step { position: relative; padding: 24px 0 24px 56px; border-top: 1px solid var(--slate-line); }
    @media (min-width: 680px) { .sd-step { padding: 28px 0 0; border-top: 1px solid var(--slate-line); } }
    .sd-step-num { position: absolute; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--cyan-dark); }
    .sd-step { }
    .sd-step .sd-step-num { left: 0; top: 24px; width: 40px; height: 40px; border: 1px solid var(--cyan); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
    @media (min-width: 680px) { .sd-step .sd-step-num { position: static; margin-bottom: 14px; } }
    .sd-step h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; color: var(--slate-deep); margin-bottom: 6px; }
    .sd-step p { font-size: 13.5px; line-height: 1.6; color: var(--slate-mid); margin: 0; }

    /* Specialist band */
    .sd-specialist { background: var(--slate-deep); color: #fff; }
    .sd-specialist-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
    @media (min-width: 820px) { .sd-specialist-grid { grid-template-columns: 0.8fr 1.2fr; } }
    .sd-specialist-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--slate), var(--cyan-dark)); max-width: 340px; }
    .sd-specialist-media img { width: 100%; height: 100%; object-fit: cover; }
    .sd-specialist .eyebrow { color: var(--cyan); }
    .sd-specialist .eyebrow .eyebrow-dot { background: var(--cyan); }
    .sd-specialist h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2vw + 0.8rem, 2.2rem); line-height: 1.15; margin-bottom: 8px; }
    .sd-specialist .sd-spec-role { color: var(--cyan); font-size: 14px; letter-spacing: 0.02em; margin-bottom: 18px; }
    .sd-specialist p { color: rgba(255,255,255,0.78); font-size: 15px; line-height: 1.7; max-width: 60ch; margin-bottom: 22px; }

    /* Research note */
    .sd-research { border-left: 3px solid var(--cyan); background: var(--paper); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px); box-shadow: var(--shadow-sm); }
    .sd-research .eyebrow { margin-bottom: 12px; }
    .sd-research p { font-size: 14px; line-height: 1.7; color: var(--slate-mid); margin: 0; }
    .sd-research cite { font-style: normal; color: var(--slate); }
    .sd-research a { color: var(--cyan-dark); font-weight: 500; }
    .sd-research a:hover { text-decoration: underline; }

    /* Related services */
    .sd-related-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
    @media (min-width: 760px) { .sd-related-grid { grid-template-columns: repeat(3, 1fr); } }
    .sd-related-card { display: flex; flex-direction: column; height: 100%; background: var(--paper); border: 1px solid var(--slate-line); border-radius: var(--radius-lg); padding: clamp(20px, 2.4vw, 26px); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
    .sd-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .sd-related-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; color: var(--slate-deep); margin-bottom: 8px; }
    .sd-related-card p { font-size: 13.5px; line-height: 1.6; color: var(--slate-mid); margin: 0 0 16px; flex-grow: 1; }
    .sd-related-card p.sd-press-meta { flex-grow: 0; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.02em; color: var(--slate); opacity: 0.85; }
    .sd-related-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--cyan-dark); }
    .sd-related-card:hover .sd-related-link svg { transform: translateX(3px); }
    .sd-related-link svg { transition: transform var(--t-base) var(--ease); }

    /* Closing CTA band */
    .sd-cta-band { background: linear-gradient(135deg, var(--slate-deep), var(--cyan-dark)); color: #fff; border-radius: var(--radius-xl); padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px); text-align: center; }
    .sd-cta-band h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.2vw + 0.8rem, 2.4rem); line-height: 1.15; margin-bottom: 14px; }
    .sd-cta-band p { color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.6; max-width: 52ch; margin: 0 auto 28px; }
    .sd-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

    .sd-faq-wrap { max-width: 820px; margin: 0 auto; }
  

    /* Small layout helpers (replace inline style attributes) */
    .sd-ov-head { margin-bottom: 24px; }
    .sd-faq-head { max-width: 640px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
    .sd-faq-head .eyebrow { justify-content: center; }

/* Department landing — centered hero variant */
.sd-hero-center { text-align: center; }
.sd-hero-center .sd-breadcrumb { justify-content: center; }
.sd-hero-center .eyebrow { justify-content: center; }
.sd-hero-center .sd-hero-text { max-width: 720px; margin: 0 auto; }
.sd-hero-center .sd-hero-lede { margin-left: auto; margin-right: auto; }
.sd-hero-center .sd-hero-actions { justify-content: center; }

/* ---------- 24. Contact page ---------- */
.sd-contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .sd-contact-grid { grid-template-columns: 1fr 1fr; } }
.sd-clinic-card { background: var(--paper); border: 1px solid var(--slate-line); border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow-sm); }
.sd-clinic-card + .sd-clinic-card { margin-top: 18px; }
.sd-clinic-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--slate-deep); margin: 2px 0 4px; }
.sd-clinic-tag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-dark); font-weight: 600; }
.sd-clinic-list { margin-top: 14px; display: flex; flex-direction: column; gap: 11px; }
.sd-clinic-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--slate); }
.sd-clinic-list a { color: var(--slate); transition: color var(--t-fast) var(--ease); }
.sd-clinic-list a:hover { color: var(--cyan-dark); }
.sd-clinic-ico { flex-shrink: 0; width: 18px; height: 18px; color: var(--cyan-dark); margin-top: 1px; }
.sd-clinic-ico svg { width: 18px; height: 18px; display: block; }

.sd-form { background: var(--paper); border: 1px solid var(--slate-line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-sm); }
.sd-form-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .sd-form-row.sd-2 { grid-template-columns: 1fr 1fr; } }
.sd-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sd-field label { font-size: 13px; font-weight: 600; color: var(--slate-deep); }
.sd-field input, .sd-field select, .sd-field textarea { font-family: var(--font-body); font-size: 14px; color: var(--slate-deep); background: var(--off-white); border: 1px solid var(--slate-line); border-radius: var(--radius-sm); padding: 11px 13px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.sd-field input:focus, .sd-field select:focus, .sd-field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-tint); }
.sd-field textarea { resize: vertical; min-height: 120px; }
.sd-form-note { font-size: 12px; color: var(--slate-mid); margin-top: 4px; line-height: 1.5; }
.sd-form .btn { margin-top: 4px; }

/* Contact/Team layout helpers (avoid inline styles) */
.sd-contact-grid .sd-prose { margin-bottom: 22px; }
.team-cta-wrap.sd-mid { margin: 8px 0 clamp(40px, 5vw, 64px); }

/* ---------- 25. 360 tour embed panel ---------- */
.sd-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(150deg, var(--slate-deep), var(--cyan-dark)); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; text-align: center; }
.sd-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sd-embed-inner { position: relative; z-index: 1; color: #fff; padding: 28px; max-width: 460px; }
.sd-embed-badge { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); margin-bottom: 20px; }
.sd-embed-badge svg { width: 26px; height: 26px; }
.sd-embed-inner h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin-bottom: 8px; }
.sd-embed-inner p { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.6; margin-bottom: 22px; }

/* ---------- 26. Blog article + literature ---------- */
.sd-article { max-width: 760px; margin: 0 auto; }
.sd-article > * + * { margin-top: 18px; }
.sd-article p { font-size: 16px; line-height: 1.78; color: var(--slate); }
.sd-article h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; color: var(--slate-deep); line-height: 1.25; margin-top: 42px; }
.sd-article h2 + p { margin-top: 14px; }
.sd-article h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; color: var(--slate-deep); margin-top: 26px; }
.sd-article ul { margin: 0 0 0 4px; display: flex; flex-direction: column; gap: 9px; }
.sd-article li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.7; color: var(--slate); }
.sd-article li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.sd-article em { font-style: italic; }
.sd-article strong { font-weight: 600; color: var(--slate-deep); }
.sd-article-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; font-size: 13px; color: var(--slate-mid); margin-top: 6px; }
.sd-article-meta .sd-am-tag { color: var(--cyan-dark); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
.sd-article-meta .sd-am-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--slate-soft, #9fb0bf); }

.sd-lit-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sd-lit-item { background: var(--paper); border: 1px solid var(--slate-line); border-left: 3px solid var(--cyan); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 20px 24px; box-shadow: var(--shadow-sm); }
.sd-lit-badge { display: inline-block; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-dark); font-weight: 600; margin-bottom: 10px; }
.sd-lit-authors { font-size: 14px; color: var(--slate-deep); font-weight: 600; margin-bottom: 4px; }
.sd-lit-title { font-size: 15px; color: var(--slate); line-height: 1.5; margin-bottom: 6px; }
.sd-lit-source { font-size: 13px; color: var(--slate-mid); font-style: italic; }
.sd-lit-item a { color: var(--cyan-dark); font-weight: 500; font-size: 13px; }
.sd-lit-item a:hover { text-decoration: underline; }

/* ---------- 27. Profile: skills, timeline, gallery ---------- */
/* Skills — clean marked list */
.sd-skills li { position: relative; padding: 8px 0 8px 22px; font-size: 14px; line-height: 1.5; color: var(--slate); border-bottom: 1px solid var(--slate-line); }
.sd-skills li:last-child { border-bottom: 0; }
.sd-skills li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }

/* Timeline — alternating (zig-zag) milestone cards */
.sd-tl { position: relative; max-width: 920px; margin: 0 auto; }
.sd-tl::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 19px; width: 2px; background: linear-gradient(180deg, var(--cyan), var(--slate-line)); }
.sd-tl-item { position: relative; padding: 0 0 clamp(16px, 2vw, 22px) 52px; }
.sd-tl-item:last-child { padding-bottom: 0; }
.sd-tl-item::before { content: ""; position: absolute; left: 12px; top: 18px; width: 16px; height: 16px; border-radius: 50%; background: var(--cyan); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--cyan); z-index: 1; }
.sd-tl-card { background: var(--paper); border: 1px solid var(--slate-line); border-radius: var(--radius-lg); padding: 14px 18px; box-shadow: var(--shadow-sm); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.sd-tl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sd-tl-year { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--cyan-dark); margin-bottom: 3px; }
.sd-tl-desc { font-size: 13.5px; line-height: 1.5; color: var(--slate-mid); }
@media (min-width: 760px) {
  .sd-tl::before { left: 50%; transform: translateX(-1px); }
  .sd-tl-item { width: 50%; padding: 0 0 26px; }
  .sd-tl-item:nth-child(odd) { left: 0; padding-right: 40px; text-align: right; }
  .sd-tl-item:nth-child(even) { left: 50%; padding-left: 40px; }
  .sd-tl-item:nth-child(odd)::before { left: auto; right: -8px; top: 16px; }
  .sd-tl-item:nth-child(even)::before { left: -8px; top: 16px; }
}

/* Gallery — image grid with branded placeholder tiles */
.sd-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .sd-gallery { grid-template-columns: repeat(4, 1fr); } }
.sd-gallery-item { position: relative; display: block; aspect-ratio: 1 / 1; min-height: 120px; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(150deg, var(--slate-deep), var(--cyan-dark)); }
.sd-gallery-item img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base) var(--ease); }
.sd-gallery-item:hover img { transform: scale(1.05); }
.sd-gallery-ph { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); }
.sd-gallery-ph svg { width: 30px; height: 30px; }

/* ---------- 28. Gallery lightbox ---------- */
.sd-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; }
.sd-lightbox.is-open { display: flex; }
.sd-lightbox-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 32, 0.92); }
.sd-lightbox-stage { position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(92vw, 1100px); }
.sd-lightbox-stage img { max-width: 100%; max-height: 78vh; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); object-fit: contain; background: var(--slate-deep); }
.sd-lightbox-caption { color: rgba(255, 255, 255, 0.75); font-size: 13px; text-align: center; }
.sd-lightbox-close { position: absolute; top: 18px; right: 18px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t-fast) var(--ease); }
.sd-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
.sd-lightbox-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t-fast) var(--ease); }
.sd-lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); }
.sd-lightbox-prev { left: clamp(10px, 3vw, 32px); }
.sd-lightbox-next { right: clamp(10px, 3vw, 32px); }
@media (max-width: 560px) { .sd-lightbox-nav { width: 40px; height: 40px; } .sd-lightbox-close { top: 12px; right: 12px; } }

/* Contact form: validation + success states */
.sd-form-success { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: 12px; background: rgba(79, 189, 192, 0.12); border: 1px solid rgba(79, 189, 192, 0.4); color: #1f5d5f; }
.sd-form-success strong { display: block; margin-bottom: 0.25rem; }
.sd-form-success p { margin: 0; font-size: 0.95rem; }
.sd-form-errors { margin-bottom: 1rem; color: #b3261e; font-size: 0.95rem; }
.sd-form-errors ul { margin: 0; padding-left: 1.1rem; }
.sd-form-errors:empty { display: none; }
.sd-field-error { display: block; margin-top: 0.35rem; color: #b3261e; font-size: 0.85rem; }
.sd-form .input-validation-error { border-color: #b3261e; box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.12); }