/*
Theme Name: Techxou Doctor
Theme URI: https://techxou.com/
Author: Minhajul Islam Galib
Author URI: https://github.com/Minhajul-galib/
Description: A modern, professional single-page WordPress landing page theme built for doctors and medical consultants. Features a hero section, about/qualifications, a procedures grid, social feeds, testimonials, case highlights, an FAQ, and an appointment booking form with contact details — designed to turn visitors into booked appointments.
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dr-kamal
Tags: one-column, custom-menu, custom-logo, translation-ready, medical

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* =====================================================
   1. CSS VARIABLES / ROOT
   ===================================================== */
:root {
  --color-primary: #17a2b8;
  --color-primary-dark: #128294;
  --color-secondary: #1a3b5c;
  --color-accent: #ffffff;
  --color-highlight: #ffd700;
  --color-text: #333333;
  --color-light-gray: #f5f5f5;
  --color-border: #eeeeee;
  --color-success: #28a745;
  --color-error: #dc3545;

  --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-heading: Georgia, serif;

  --max-width: 1200px;
  --radius: 8px;
  --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --transition: all 0.3s ease;

  --header-height: 84px;
}

/* =====================================================
   2. RESET & BASE
   ===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-accent);
  overflow-x: hidden;
}

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

a {
  text-decoration: none;
  color: var(--color-primary);
  transition: var(--transition);
}

ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.3;
  color: var(--color-secondary);
  font-weight: 700;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.3rem; }

.small { font-size: 0.95rem; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: 4rem 0;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
}

.section-header .eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.section-header p {
  color: #666;
  margin-top: 1rem;
}

.bg-light {
  background: var(--color-light-gray);
}

.bg-dark {
  background: var(--color-secondary);
  color: #fff;
}

.bg-dark h2, .bg-dark h3 {
  color: #fff;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  text-align: center;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.btn-outline {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-outline:hover {
  background: #fff;
  color: var(--color-secondary);
  transform: translateY(-3px);
}

.btn-solid {
  background: var(--color-primary);
  color: #fff;
}

.btn-solid:hover {
  background: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.btn-block {
  display: block;
  width: 100%;
}

/* ---------- Library icons ----------
   Rendered by drkamal_icon() (inc/icons.php). The SVG inherits the colour of
   whatever badge it sits in; an uploaded replacement is boxed to the same size
   so a custom icon can't blow out the circle it lives in. */
.dr-icon {
  display: block;
  flex-shrink: 0;
}

img.dr-icon-img {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

/* =====================================================
   3. HEADER / NAVIGATION
   ===================================================== */

/* ---------- Top Bar ---------- */
.header-topbar {
  background: var(--color-secondary);
  color: rgba(255,255,255,0.82);
  font-size: 0.8rem;
  font-family: 'Inter', var(--font-body);
  letter-spacing: 0.2px;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  gap: 1rem;
}

.topbar-contact,
.topbar-social {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topbar-contact li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.topbar-contact svg,
.topbar-contact .dr-icon-img {
  color: var(--color-primary);
  flex-shrink: 0;
}

.topbar-contact a,
.topbar-contact span {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  transition: color 0.2s;
}

.topbar-contact a:hover {
  color: #fff;
}

.topbar-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  transition: background 0.2s, color 0.2s;
}

.topbar-social a:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- Main Header ---------- */
/*
 * No backdrop-filter here, deliberately. The header is position:static, so
 * nothing ever scrolls underneath it for a blur to act on — but a
 * backdrop-filter *does* make the element a containing block for its
 * position:fixed descendants. That trapped the mobile drawer and its overlay
 * inside the header box: the closed drawer sat just past the right edge of the
 * page instead of off-viewport (adding 320px of horizontal scroll), and the
 * overlay covered only the header strip, where it swallowed taps on the
 * hamburger. Keep this element filter-free.
 */
.site-header {
  position: static;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  z-index: 999;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, background 0.3s ease;
  font-family: 'Inter', var(--font-body);
}

.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(26, 59, 92, 0.10);
  background: rgba(255, 255, 255, 0.99);
}

/* ---------- Inner layout ---------- */
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  gap: 1.5rem;
}

/* ---------- Logo ---------- */
.site-branding {
  flex-shrink: 0;
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.logo-icon-wrap svg {
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(23,162,184,0.28));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-lockup:hover .logo-icon-wrap svg {
  transform: rotate(-6deg) scale(1.08);
  filter: drop-shadow(0 6px 14px rgba(23,162,184,0.40));
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-name {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--color-secondary);
  letter-spacing: -0.4px;
  white-space: nowrap;
}

.logo-specialty {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.3px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Navigation ---------- */
.main-navigation {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
}

.main-navigation .nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation .nav-menu > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  color: #3a3a4a;
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.22s ease;
  white-space: nowrap;
}

/* Animated underline on hover */
.main-navigation .nav-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 1rem;
  right: 1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-navigation .nav-menu > li > a:hover {
  color: var(--color-primary);
}

.main-navigation .nav-menu > li > a:hover::after {
  transform: scaleX(1);
}

/* Active state */
.main-navigation .nav-menu > li.current-menu-item > a,
.main-navigation .nav-menu > li.current_page_item > a {
  color: var(--color-primary);
  font-weight: 600;
}

.main-navigation .nav-menu > li.current-menu-item > a::after,
.main-navigation .nav-menu > li.current_page_item > a::after {
  transform: scaleX(1);
  background: var(--color-primary);
}

/* ---------- Header CTA group ---------- */
.header-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Book Appointment button */
.btn-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.35rem;
  background: linear-gradient(135deg, #17a2b8 0%, #0d8fa3 100%);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 50px;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 14px rgba(23,162,184,0.30);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

.btn-header-cta svg {
  flex-shrink: 0;
}

.btn-header-cta:hover {
  background: linear-gradient(135deg, #1ab4cc 0%, #0e9ab4 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(23,162,184,0.42);
  color: #fff;
}

.btn-header-cta:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(23,162,184,0.28);
}

/* ---------- Hamburger ---------- */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  background: none;
  border: 1.5px solid rgba(26, 59, 92, 0.15);
  cursor: pointer;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  transition: border-color 0.2s, background 0.2s;
  width: 40px;
  height: 40px;
}

.menu-toggle:hover {
  border-color: var(--color-primary);
  background: rgba(23,162,184,0.06);
}

.menu-toggle .bar {
  display: block;
  height: 2px;
  background: var(--color-secondary);
  border-radius: 2px;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
}

.menu-toggle .bar:nth-child(1) { width: 20px; }
.menu-toggle .bar:nth-child(2) { width: 14px; }
.menu-toggle .bar:nth-child(3) { width: 20px; }

.menu-toggle.active .bar:nth-child(1) {
  width: 20px;
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-toggle.active .bar:nth-child(3) {
  width: 20px;
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Mobile overlay ---------- */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 50, 0.45);
  backdrop-filter: blur(3px);
  z-index: 997;
  opacity: 0;
  /* Invisible is not the same as gone: without this the closed overlay still
     catches every tap on the page underneath it. */
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* =====================================================
   4. HERO SECTION
   ===================================================== */
/*
 * A layered wash instead of a flat top-to-bottom fade: a teal glow sitting
 * behind the portrait, a cooler tint drifting in from the top left, and a
 * diagonal base that clears to white by the bottom so the filter bar reads as
 * lifted off the section rather than painted on it. Every layer lands well
 * short of full opacity — the portrait and the cards are the subject here.
 */
.hero {
  background:
    radial-gradient(62% 66% at 76% 32%, rgba(23, 162, 184, 0.2) 0%, rgba(23, 162, 184, 0) 72%),
    radial-gradient(48% 58% at 4% 2%, rgba(93, 135, 214, 0.12) 0%, rgba(93, 135, 214, 0) 74%),
    linear-gradient(170deg, #f6fcfe 0%, #eff8fc 42%, #ffffff 90%);
  color: var(--color-text);
  padding: 4rem 0 6rem;
  position: relative;
  z-index: 2;
}

.hero .hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  /* No gap: the photo is meant to run straight into the filter bar below. */
  padding-bottom: 0;
}

.hero-content .eyebrow {
  display: inline-block;
  background: rgba(23, 162, 184, 0.12);
  color: var(--color-primary);
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1.2rem;
}

.hero-content h1 {
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-weight: 800;
  /*
   * Fluid rather than a fixed 3.2rem: this rule outranks the plain `h1` in the
   * mobile media query (0,1,1 vs 0,0,1), so a flat size stayed at 51px on a
   * phone and words like "Healthcare" ran past the column and got clipped.
   * Holds 3.2rem from ~600px up, shrinks below that.
   */
  font-size: clamp(2rem, 8.5vw, 3.2rem);
  overflow-wrap: break-word;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 2rem;
  max-width: 480px;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

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

.btn-outline-dark:hover {
  background: var(--color-secondary);
  color: #fff;
  transform: translateY(-3px);
}

.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
}

/*
 * The photo stands on the wrap's bottom edge and the rings are measured up
 * from that same edge, so every offset below is "px above the photo's base".
 * --hero-ring-center is deliberately low: the rings then top out around eye
 * level, which is what puts the body inside the circle and the head clear
 * above it. Both rings share that centre, so they stay concentric if either
 * diameter is retuned.
 *
 * Tuned for the ~3:4 portrait cutout the theme ships with. The ring diameter
 * is capped by how far it may hang below the photo: everything under the
 * photo's base has to stay behind the filter bar (~97px tall), or the circle
 * reappears below it. Swap in a differently-cropped photo and the one value
 * worth nudging is --hero-ring-center.
 */
.hero-photo-wrap {
  --hero-photo-size: 380px;
  --hero-ring-center: 158px;
  --hero-ring-inner: 370px;
  --hero-ring-outer: 440px;
  position: relative;
  width: 100%;
  max-width: 460px;
  min-height: var(--hero-photo-size);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /*
   * Pulls the portrait's straight bottom edge under the filter bar, which is
   * opaque and sits higher in the stack — the cut disappears and the photo
   * reads as standing on the bar. The rings ride down with it.
   */
  margin-bottom: -24px;
}

.hero-photo-wrap::before,
.hero-photo-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

/* Outer ring — drawn first so the inner circle layers over it. */
.hero-photo-wrap::before {
  width: var(--hero-ring-outer);
  height: var(--hero-ring-outer);
  bottom: calc(var(--hero-ring-center) - var(--hero-ring-outer) / 2);
  background: rgba(23, 162, 184, 0.1);
}

.hero-photo-wrap::after {
  width: var(--hero-ring-inner);
  height: var(--hero-ring-inner);
  bottom: calc(var(--hero-ring-center) - var(--hero-ring-inner) / 2);
  background: linear-gradient(160deg, rgba(23, 162, 184, 0.28), rgba(23, 162, 184, 0.1));
}

/*
 * Height is left to the photo's own aspect — capping it would letterbox the
 * portrait inside the box and shrink it away from the rings it is tuned to.
 * The cap here is only a runaway guard for an unusually tall upload.
 */
.hero-photo-wrap img,
.hero-photo-wrap .avatar-fallback {
  position: relative;
  z-index: 1;
  width: var(--hero-photo-size);
  height: auto;
  max-height: 560px;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 20px 25px rgba(26, 59, 92, 0.25));
}

.hero-photo-wrap .avatar-fallback {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

.hero-photo-wrap .avatar-fallback {
  background: rgba(23, 162, 184, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  border: 4px solid #fff;
}

.hero-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.8rem 1.2rem;
  white-space: nowrap;
}

.hero-card div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.hero-card strong {
  font-size: 0.9rem;
  color: var(--color-secondary);
}

.hero-card .small {
  color: #888;
}

.hero-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.hero-card-connect {
  top: 8%;
  right: -5%;
}

.hero-card-patients {
  bottom: 10%;
  left: -8%;
}

/* Filter / quick-search bar */
.hero-filter-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.4rem 2rem;
  margin-bottom: -48px;
  position: relative;
  z-index: 3;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1 1 auto;
  min-width: 180px;
}

.filter-item + .filter-item {
  border-left: 1px solid var(--color-border);
  padding-left: 1.5rem;
}

.filter-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(23, 162, 184, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.filter-item div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.filter-label {
  font-size: 0.8rem;
  color: #999;
}

.filter-item strong {
  font-size: 0.95rem;
  color: var(--color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-search-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.filter-search-btn:hover {
  background: var(--color-primary-dark);
}

/* =====================================================
   5. ABOUT SECTION
   ===================================================== */

/* ── Outer wrapper ── */
.about-section {
  position: relative;
  padding: 5rem 0;
  background: linear-gradient(-45deg, #0a1826, #14324d, #17a2b8, #0d1f30);
  background-size: 400% 400%;
  animation: about-gradient-flow 16s ease infinite;
  overflow: hidden;
}

@keyframes about-gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .about-section {
    animation: none;
  }
}

.about-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: center;
}

/* ══════════════════════════════════════
   LEFT — single photo + stat badge
   ══════════════════════════════════════ */
.about-visual {
  position: relative;
  max-width: 440px;
}

/* Soft color-block sitting behind the photo for depth */
.about-visual::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: -1.5rem;
  width: 78%;
  height: 92%;
  background: rgba(23, 162, 184, 0.1);
  border-radius: 20px;
  z-index: 0;
}

.about-photo {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #14324d 0%, #0a1826 100%);
  box-shadow: var(--shadow-lg);
}

.about-photo img,
.about-photo iframe,
.about-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

.about-video:not(.about-video--disabled) {
  cursor: pointer;
}

.about-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 24, 38, 0.32);
  transition: var(--transition);
}

.about-video:hover .about-video-overlay {
  background: rgba(10, 24, 38, 0.45);
}

.about-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.about-video:hover .about-play-btn {
  background: #fff;
  color: var(--color-primary);
  transform: translate(-50%, -50%) scale(1.08);
}

.about-play-btn svg {
  margin-left: 3px;
}

/* ── Video popup ── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.video-modal.is-open {
  opacity: 1;
}

.video-modal[hidden] {
  display: none;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 16, 26, 0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.video-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 920px;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.video-modal.is-open .video-modal-dialog {
  transform: scale(1);
}

.video-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.video-modal-frame iframe,
.video-modal-frame video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.video-modal-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.video-modal-close:hover {
  background: #fff;
  color: var(--color-secondary);
}

@media (max-width: 600px) {
  .video-modal-close {
    top: -2.75rem;
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-modal,
  .video-modal-dialog {
    transition: none;
  }
}

.about-stat-badge {
  position: absolute;
  z-index: 2;
  left: -1.5rem;
  bottom: -1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.5rem;
}

.about-stat-badge-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(23, 162, 184, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.about-stat-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.about-stat-badge-text strong {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-secondary);
}

.about-stat-badge-text span {
  font-size: 0.82rem;
  color: #888;
}

/* ══════════════════════════════════════
   RIGHT — content panel
   ══════════════════════════════════════ */
.about-content {
  display: flex;
  flex-direction: column;
}

/* Eyebrow badge */
.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  width: fit-content;
}
.about-eyebrow svg { flex-shrink: 0; }

/* Main heading */
.about-heading {
  font-family: var(--font-body);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

/* Description */
.about-description {
  font-size: 0.97rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  max-width: 480px;
  margin-bottom: 2rem;
}

/* Feature list (vision / mission) */
.about-features {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}

.about-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 260px;
}

.about-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.about-feature-body h3 {
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 0.3rem;
}

.about-feature-body p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin: 0;
}

.about-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 2rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  width: fit-content;
  transition: var(--transition);
}

.about-btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  color: #fff;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 991px) {
  .about-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-visual { max-width: 360px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .about-visual { max-width: 300px; }
  .about-stat-badge { padding: 0.85rem 1.1rem; left: -0.8rem; bottom: -1rem; gap: 0.7rem; }
  .about-stat-badge-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  .about-stat-badge-text strong { font-size: 1.2rem; }
  .about-heading { font-size: 1.75rem; }
  .about-features { gap: 1.5rem; }
}

.qualifications-section {
  background: var(--color-secondary) center / cover no-repeat;
  position: relative;
  isolation: isolate;
}

/* Tinted glass overlay — sits between the bg image and the content */
.qualifications-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, rgba(10, 24, 38, 0.94) 0%, rgba(23, 162, 184, 0.8) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.qualifications-section > .container {
  position: relative;
  z-index: 1;
}

.qualifications-section .section-header .eyebrow {
  background: none;
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.qualifications-section .section-header .eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.qualifications-section .section-header h2 {
  color: #fff;
}

.qualifications-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.qualification-card {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  transition: var(--transition);
}

.qualification-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-4px);
}

.qualification-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  /* Cards sit on the darkened background photo, so the icon needs its own
     colour rather than the inherited body text colour. */
  color: var(--color-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.qualification-card-body {
  min-width: 0;
}

.qualification-card-category {
  display: block;
  color: var(--color-highlight);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.78rem;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.qualification-card-title {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.qualification-card-meta {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  margin-bottom: 0.7rem;
}

.qualification-card-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
  margin: 0;
}

.qualification-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.qualification-card-list li {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
  padding-left: 1.1rem;
  position: relative;
}

.qualification-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.qualification-card-badge {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  background: rgba(255, 215, 0, 0.12);
  color: var(--color-highlight);
  font-size: 0.75rem;
  font-weight: 700;
}

.qualifications-infobox {
  margin-top: 2.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 2.2rem 2rem;
}

.qualifications-infobox h3 {
  color: #fff;
  margin-bottom: 0.6rem;
}

.qualifications-infobox p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 640px;
  margin: 0 auto;
}

/* =====================================================
   6. PROCEDURES SECTION
   =====================================================
   A static grid, not a marquee: several procedure names run to three lines,
   which a moving card cannot hold legibly. This absorbed the old Services
   strip, so it also carries the run from the pale Qualifications block into
   the dark Social one — hence a tint a shade deeper than the sections above. */
.procedures-section {
  background:
    radial-gradient(50% 60% at 6% 0%, rgba(23, 162, 184, 0.12) 0%, rgba(23, 162, 184, 0) 70%),
    radial-gradient(55% 65% at 96% 100%, rgba(26, 59, 92, 0.1) 0%, rgba(26, 59, 92, 0) 72%),
    linear-gradient(180deg, #ffffff 0%, #eef6f9 100%);
}

.procedures-intro {
  color: #5a6a75;
}

.procedures-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * align-items:start is deliberate — cards size to their own text instead of
 * stretching to the tallest in the row, so a one-line name doesn't inherit the
 * height of the three-line USG entries beside it.
 */
.procedure-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.4rem;
  background: #fff;
  border: 1px solid rgba(23, 162, 184, 0.16);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(18, 50, 73, 0.06);
  transition: var(--transition);
}

.procedure-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 14px 30px rgba(18, 50, 73, 0.12);
}

/* Sits in the corner as a quiet index; the name is what carries the card. */
.procedure-card-num {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(23, 162, 184, 0.22);
}

.procedure-card-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-primary);
  background: rgba(23, 162, 184, 0.1);
  transition: var(--transition);
}

.procedure-card:hover .procedure-card-icon {
  color: #fff;
  background: var(--color-primary);
}

.procedure-card-body {
  min-width: 0;
  /* Clears the number badge so a long first line never runs under it. */
  padding-right: 1.2rem;
}

.procedure-card-group {
  display: block;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.72rem;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.procedure-card-title {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--color-secondary);
  margin: 0;
}

.procedures-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* =====================================================
   7. EXPERIENCE / TIMELINE SECTION
   ===================================================== */
.experience-section {
  background: var(--color-secondary) center / cover no-repeat;
  position: relative;
  isolation: isolate;
}

/* Tinted glass overlay — sits between the bg image and the content */
.experience-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, rgba(10, 24, 38, 0.92) 0%, rgba(23, 162, 184, 0.55) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.experience-section > .container {
  position: relative;
  z-index: 1;
}

.experience-section .section-header .eyebrow {
  background: none;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.experience-section .section-header .eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.experience-section .section-header h2 {
  color: #fff;
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 0 3rem 3rem;
}

.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}

.timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}

.timeline-item::after {
  content: '';
  position: absolute;
  top: 1.6rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(23, 162, 184, 0.3);
  z-index: 1;
}

.timeline-item:nth-child(odd)::after { right: -8px; }
.timeline-item:nth-child(even)::after { left: -8px; }

.timeline-card {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem;
  max-width: 340px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: var(--transition);
}

.timeline-card:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-3px);
}

.timeline-item .year {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.9);
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 50px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.78rem;
  margin-bottom: 0.6rem;
}

.timeline-item h4 {
  color: #fff;
}

.timeline-item .institution {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
}

/* =====================================================
   8. TESTIMONIALS SECTION
   ===================================================== */
/* Section and slider share one tint so the panel reads as a seamless band. */
.testimonials-section,
.testimonials-slider {
  background:
    radial-gradient(50% 65% at 6% 0%, rgba(23, 162, 184, 0.1) 0%, rgba(23, 162, 184, 0) 70%),
    radial-gradient(55% 70% at 100% 100%, rgba(255, 215, 0, 0.09) 0%, rgba(255, 215, 0, 0) 72%),
    linear-gradient(180deg, #f7fbfd 0%, #eef6f9 100%);
}

/* Horizontal padding is split with .testimonials-slide so cards still sit
   2.5rem in from the panel edge while the slide supplies the shadow gutter. */
.testimonials-slider {
  position: relative;
  border-radius: var(--radius);
  padding: 2rem 1.5rem 1.75rem;
}

/*
 * Dedicated clipping viewport — the slider itself can't clip because its
 * 2.5rem padding is inside the clip (overflow clips at the padding box),
 * which would let the next slide bleed through that strip.
 */
.testimonials-viewport {
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonials-slide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  flex: 0 0 100%;
  min-width: 0;
  /* Keeps card shadows off the viewport's clip edge. */
  padding: 0.5rem 1rem 2rem;
}

.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.testimonials-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
}

.testimonials-dot.is-active {
  background: var(--color-primary);
  transform: scale(1.3);
}

.testimonial-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(26, 59, 92, 0.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 2rem 2rem 2.4rem;
  overflow: hidden;
  transition: var(--transition);
}

/* Accent bar replaces the old flat border-left, plus a big watermark
   quote mark sits behind the text for a less "usual" card treatment. */
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -0.5rem;
  left: 0.7rem;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.1;
  z-index: 0;
}

.testimonial-card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-highlight));
}

.testimonial-card > * {
  position: relative;
  z-index: 1;
}

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

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.15);
}

.testimonial-card .stars {
  color: var(--color-highlight);
  margin-bottom: 1rem;
  letter-spacing: 2px;
}

.testimonial-card .quote {
  font-style: italic;
  color: #555;
  margin-bottom: 1.2rem;
}

.testimonial-card .patient-name {
  font-weight: 700;
  color: var(--color-secondary);
}

/* =====================================================
   9. APPOINTMENT BOOKING SECTION
   ===================================================== */
/*
 * Light band between the white FAQ section and the navy footer — the dark
 * aside inside the panel supplies the contrast and steps the eye down into
 * the footer, so the section background itself stays light.
 */
.appointment-section {
  position: relative;
  background: linear-gradient(180deg, #10273d 0%, #163652 45%, #1a3b5c 100%);
  overflow: hidden;
}

.appointment-section .section-header h2,
.appointment-section .section-header p {
  color: #fff;
}

.appointment-section .section-header .eyebrow {
  color: #7ee6ef;
}

/* Decorative wash behind the panel. */
.appointment-section::before,
.appointment-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.appointment-section::before {
  top: -120px;
  right: -100px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(23, 162, 184, 0.24) 0%, rgba(23, 162, 184, 0) 70%);
}

.appointment-section::after {
  bottom: -140px;
  left: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(126, 230, 239, 0.12) 0%, rgba(126, 230, 239, 0) 70%);
}

.appointment-section .container {
  position: relative;
  z-index: 1;
}

/* One card, two halves — no gap between them, so the panel reads as a unit. */
.booking-panel {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(26, 59, 92, 0.07);
  border-radius: 20px;
  box-shadow: 0 26px 60px rgba(26, 59, 92, 0.16);
  overflow: hidden;
}

/* ---------- Left half: clinic details ---------- */
.booking-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.6rem 2.1rem;
  background: linear-gradient(165deg, #204873 0%, var(--color-secondary) 55%, #10273d 100%);
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
}

.booking-aside::before {
  content: '';
  position: absolute;
  top: -90px;
  right: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 162, 184, 0.38) 0%, rgba(23, 162, 184, 0) 70%);
  pointer-events: none;
}

/* Lift the content above the glow. */
.booking-aside > * {
  position: relative;
  z-index: 1;
}

.booking-aside .eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.booking-aside h3 {
  color: #fff;
  font-size: 1.45rem;
  margin-top: 0.15rem;
}

.booking-aside .contact-info-list li {
  margin-bottom: 1.1rem;
}

.booking-aside .contact-info-list li:last-child {
  margin-bottom: 0;
}

.booking-aside .contact-info-list .icon {
  width: 38px;
  height: 38px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.booking-aside .contact-info-list h4 {
  color: #fff;
  font-size: 0.95rem;
}

.booking-aside .contact-info-list p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  line-height: 1.55;
}

.booking-aside .contact-info-list a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

.booking-aside .contact-info-list a:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}

/* "View on Google Maps" under the address row. */
.contact-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
}

.booking-aside .contact-info-list .contact-map-link {
  text-decoration: none;
}

.booking-aside .contact-info-list .contact-map-link:hover {
  color: #fff;
  text-decoration: underline;
}

.booking-hours {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
}

.booking-hours h4 {
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.booking-hours h4 span {
  display: inline-flex;
  vertical-align: middle;
  color: var(--color-primary);
}

/*
 * One block per chamber. The rule between them is a border rather than a gap
 * so two chambers read as one hours card, not two stacked boxes.
 */
.booking-chamber + .booking-chamber {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.booking-chamber-head {
  margin-bottom: 0.15rem;
}

.booking-chamber-name {
  display: block;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
}

.booking-chamber-address {
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

a.booking-chamber-address:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.booking-chamber-phone {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

.booking-chamber-phone span {
  display: inline-flex;
  color: var(--color-primary);
}

.booking-hours li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  padding: 0.35rem 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.13);
}

.booking-hours li:first-child {
  border-top: none;
}

.booking-hours-value {
  color: #fff;
  font-weight: 600;
}

.booking-hours-value.is-closed {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

/* margin-top:auto keeps the CTA pinned to the bottom edge of the panel. */
.booking-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0.95rem 1.1rem;
  transition: var(--transition);
}

.booking-cta:hover {
  background: rgba(23, 162, 184, 0.28);
  border-color: rgba(23, 162, 184, 0.5);
  transform: translateY(-2px);
}

.booking-cta > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.booking-cta strong {
  color: #fff;
  font-size: 0.92rem;
}

.booking-cta span span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}

.booking-cta-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.booking-cta:hover .booking-cta-arrow {
  background: #fff;
  color: var(--color-primary);
  transform: translateX(3px);
}

/* ---------- Right half: the booking form ---------- */
.booking-form-wrap {
  padding: 2.6rem 2.4rem;
}

.booking-form-head {
  margin-bottom: 1.3rem;
}

.booking-form-head h3 {
  font-size: 1.45rem;
}

.booking-form-head p {
  color: #7186a0;
  font-size: 0.88rem;
  margin-top: 0.15rem;
}

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

.form-group {
  margin-bottom: 0.9rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  color: #4c6076;
}

.form-group .required {
  color: var(--color-error);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  background-color: #f5f9fc;
  border: 1px solid #e2eaf2;
  border-radius: 10px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: #cddced;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.15);
}

/* Native arrow swapped for an inline SVG so the select matches the inputs. */
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a3b5c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 12px 8px;
}

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

.booking-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.85rem 2rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 10px 24px rgba(23, 162, 184, 0.28);
}

.booking-submit:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, #0d6b7a 100%);
}

.booking-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.booking-submit-arrow {
  transition: var(--transition);
}

.booking-submit:hover .booking-submit-arrow {
  transform: translateX(4px);
}

.booking-note {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.78rem;
  color: #8698ab;
}

.booking-note span:first-child {
  display: inline-flex;
  vertical-align: middle;
}

.form-message {
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1.2rem;
  display: none;
  font-weight: 600;
}

.form-message.success {
  display: block;
  background: rgba(40, 167, 69, 0.12);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.form-message.error {
  display: block;
  background: rgba(220, 53, 69, 0.12);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

/* =====================================================
   10. CONTACT INFO (inside appointment section)
   ===================================================== */
.contact-info-list li {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.6rem;
  align-items: flex-start;
}

.contact-info-list .icon {
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-info-list h4 {
  margin-bottom: 0.2rem;
}

.contact-info-list p {
  color: #666;
}

/* =====================================================
   11. FOOTER
   ===================================================== */
.site-footer {
  background: var(--color-secondary);
  color: rgba(255, 255, 255, 0.85);
  padding: 4rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer-col h4 {
  color: #fff;
  margin-bottom: 1.2rem;
  font-size: 1.1rem;
}

.footer-col p {
  font-size: 0.95rem;
  line-height: 1.7;
}

.footer-col ul li {
  margin-bottom: 0.7rem;
}

.footer-col ul a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
}

.footer-col ul a:hover {
  color: var(--color-highlight);
}

.social-links {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.social-links a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.social-links a:hover {
  background: var(--color-primary);
  transform: translateY(-3px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-credit {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.footer-credit a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

.footer-credit a:hover {
  color: var(--color-primary);
}

/* =====================================================
   12. MARQUEE / CHAMBER LOCATIONS
   ===================================================== */
.marquee-section {
  background: var(--color-secondary);
  overflow: hidden;
  padding: 1rem 0;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  margin-top: 48px;
}

.marquee-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}

.marquee-section:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 2.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.marquee-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* The strip sits on the dark navy band, so the icon can't inherit body text
     colour the way it does inside the light sections. */
  color: var(--color-primary);
}

/* An item only becomes a link when one is set in Theme Options. */
a.marquee-item {
  text-decoration: none;
  transition: background 0.3s ease;
}

a.marquee-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

a.marquee-item:hover .marquee-item-text strong {
  text-decoration: underline;
}

.marquee-item-text {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  white-space: nowrap;
}

.marquee-item-text strong {
  color: #fff;
  font-size: 0.95rem;
}

.marquee-item-text .small {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
}

.marquee-item-text .small::before {
  content: '—';
  margin-right: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

.marquee-schedule {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.8rem;
}

.marquee-schedule::before {
  content: '—';
  margin-right: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

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

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* =====================================================
   13. SCREEN READER TEXT / ACCESSIBILITY
   ===================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* =====================================================
   13. RESPONSIVE
   ===================================================== */
@media (max-width: 1199px) {
  .qualifications-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  /* Shorten nav spacing on smaller desktops */
}

@media (max-width: 991px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 2rem; }

  .hero .hero-inner {
    grid-template-columns: 1fr;
    /* Stacked, the text sits above the bar — it needs the breathing room the
       photo was giving up, and the photo no longer meets the bar at all. */
    padding-bottom: 3rem;
  }

  .hero-photo-wrap {
    margin-bottom: 0;
  }

  /* Stack the panel, form first — it's the primary action on mobile. */
  .booking-panel {
    grid-template-columns: 1fr;
  }

  .booking-form-wrap { order: 1; }
  .booking-aside { order: 2; }

  .hero-image { order: -1; }

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

  .hero-card-connect { right: 0; }
  .hero-card-patients { left: 0; }

  .hero-filter-bar {
    flex-direction: column;
    align-items: stretch;
    /*
     * Stacked, wrapping has to go too. A wrapping column container sizes each
     * line to its widest item's max-content, so the long "Consultant Paediatric
     * Gastroenterologist" line made every row 343px inside a 298px box and the
     * whole set spilled out of the card. Unwrapped, the rows stretch to the box
     * and the ellipsis on .filter-item strong does its job.
     */
    flex-wrap: nowrap;
    margin-bottom: -48px;
  }

  .filter-item + .filter-item {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
    padding-top: 1rem;
  }

  .filter-search-btn {
    align-self: center;
  }

  #about.section {
    padding-top: calc(4rem + 2rem);
  }
}

@media (max-width: 768px) {
  /* Hide topbar on mobile */
  .header-topbar { display: none; }

  .procedures-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .procedure-card {
    padding: 1.25rem 1.2rem;
  }

  /* Hide top bar contact on very small screens */
  .topbar-contact li:last-child { display: none; }

  /* ---- Mobile slide-in drawer ---- */
  .main-navigation {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(82vw, 320px);
    background: #fff;
    z-index: 998;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 5rem 1.5rem 2rem;
    gap: 0;
    transform: translateX(100%);
    /*
     * Parked off-screen, but still a real element until told otherwise —
     * hide it from taps and from the Tab key, and only after it has finished
     * sliding out (hence the delay on visibility).
     */
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.32s;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: -8px 0 32px rgba(26,59,92,0.12);
    border-left: 1px solid rgba(23,162,184,0.1);
  }

  .main-navigation.active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s;
  }

  .nav-overlay {
    display: block;
  }

  /* Keeps the hamburger (now an X) tappable above the open drawer + overlay. */
  .header-cta {
    position: relative;
    z-index: 999;
  }

  .main-navigation .nav-menu {
    flex-direction: column;
    gap: 0;
    width: 100%;
    align-items: stretch;
  }

  .main-navigation .nav-menu > li > a {
    display: flex;
    align-items: center;
    padding: 0.9rem 0.25rem;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    border-radius: 0;
    color: var(--color-secondary);
  }

  .main-navigation .nav-menu > li > a::after {
    display: none;
  }

  .main-navigation .nav-menu > li.current-menu-item > a,
  .main-navigation .nav-menu > li.current_page_item > a {
    color: var(--color-primary);
  }

  .main-navigation .nav-menu > li:last-child > a {
    border-bottom: none;
  }

  /* Mobile CTA inside drawer */
  .main-navigation::after {
    content: '';
    display: block;
    margin-top: 1.5rem;
  }

  /* Hide book button on mobile – shown in drawer */
  .btn-header-cta { display: none; }

  .menu-toggle { display: flex; }

  h1 { font-size: 2rem; }
  h2 { font-size: 2rem; }

  .section { padding: 2rem 0; }
  .container { padding: 0 1.5rem; }

  .about-text--wide {
    padding: 1.2rem 1.4rem;
  }

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

  .testimonials-slider {
    padding: 1.25rem 0.75rem 1rem;
  }

  .testimonials-slide {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 0.5rem 0.75rem 1.5rem;
  }

  .qualification-card {
    padding: 1.6rem;
  }

  .timeline::before { left: 20px; }

  .timeline-item {
    width: 100%;
    left: 0 !important;
    text-align: left !important;
    padding-left: 3.5rem;
    padding-right: 0;
  }

  .timeline-item::after {
    left: 11px !important;
    right: auto !important;
  }

  .booking-panel { border-radius: 16px; }

  .booking-form-wrap,
  .booking-aside {
    padding: 1.7rem 1.3rem;
  }

  .booking-form-head h3,
  .booking-aside h3 { font-size: 1.25rem; }

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

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Same geometry, scaled ~0.68 — the rings follow the photo automatically. */
  .hero-photo-wrap {
    --hero-photo-size: 260px;
    --hero-ring-center: 108px;
    --hero-ring-inner: 252px;
    --hero-ring-outer: 300px;
  }

  .hero-photo-wrap img {
    max-height: 380px;
  }

  .hero-photo-wrap .avatar-fallback {
    width: 220px;
    height: 220px;
  }

  .hero-card { padding: 0.6rem 0.9rem; }
  .hero-card strong { font-size: 0.8rem; }

  #about.section { padding-top: 2rem; }
  .hero-filter-bar { margin-bottom: 0; }
}

/* =====================================================
   FAQ SECTION
   ===================================================== */
/*
 * `stretch` (not `center`) is what makes both columns share one row height.
 * The badge and stat card are absolutely positioned, so .faq-visual adds no
 * intrinsic height of its own — the row is measured from .faq-list, and the
 * photo frame then fills it via flex: 1.
 */
.faq-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: stretch;
}

.faq-visual {
  position: relative;
  max-width: 420px;
  display: flex;
  flex-direction: column;
}

.faq-photo-frame {
  flex: 1 1 auto;
  min-height: 0;
  border: 10px solid #fff;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-light-gray);
  box-shadow: 0 18px 40px rgba(26, 59, 92, 0.13);
}

.faq-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shown when no faq_photo is set, so the frame never reads as a broken box. */
.faq-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #eaf2fd 0%, #d8ecf1 100%);
  color: var(--color-primary);
  opacity: 0.55;
}

.faq-icon-badge {
  position: absolute;
  top: 38%;
  right: -22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-lg);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-stat-card {
  position: absolute;
  left: -1.5rem;
  bottom: 1.5rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.faq-stat-emoji {
  display: flex;
  color: var(--color-primary);
}

.faq-stat-card strong {
  display: block;
  font-size: 1.2rem;
  color: var(--color-secondary);
}

.faq-stat-card span {
  font-size: 0.85rem;
  color: #888;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  position: relative;
  background: #fff;
  border: 1px solid rgba(26, 59, 92, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(26, 59, 92, 0.05);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Accent rail that fills in on the open item. */
.faq-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
  border-color: rgba(23, 162, 184, 0.28);
}

.faq-item.active {
  border-color: rgba(23, 162, 184, 0.4);
  box-shadow: 0 10px 28px rgba(26, 59, 92, 0.1);
}

.faq-item.active::before {
  transform: scaleY(1);
}

/* Wrapper exists for heading semantics only — it must not inherit h3 sizing. */
.faq-question-heading {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.3rem 1.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-secondary);
  text-align: left;
  transition: color 0.3s ease;
}

.faq-question:hover,
.faq-item.active .faq-question {
  color: var(--color-primary);
}

/*
 * Two bars rather than a rotated "+" glyph: the cross stays optically centred
 * regardless of font metrics, and the vertical bar can spin out to leave a
 * clean minus when open.
 */
.faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(23, 162, 184, 0.1);
  transition: background 0.3s ease;
}

.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, background 0.3s ease;
}

.faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.active .faq-toggle {
  background: var(--color-primary);
}

.faq-item.active .faq-toggle::before,
.faq-item.active .faq-toggle::after {
  background: #fff;
}

.faq-item.active .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/*
 * Animating grid-template-rows 0fr -> 1fr expands to the answer's natural
 * height. The old max-height approach capped every panel at 200px, which
 * silently truncated longer answers.
 */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-answer p {
  padding: 0 1.6rem 1.3rem;
  color: #666;
  font-size: 0.95rem;
}

.faq-item.active .faq-answer {
  grid-template-rows: 1fr;
}

@media (max-width: 991px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .faq-visual {
    /*
     * width:100% is load-bearing. The auto side margins centre this grid item,
     * but they also stop justify-self:stretch from applying, so without an
     * explicit width the column shrink-wrapped to its contents — down to 84px
     * when no FAQ photo is set and only the placeholder icon is inside.
     */
    width: 100%;
    max-width: 340px;
    margin: 0 auto 2rem;
  }

  /* Stacked: there is no sibling column to match, so the frame goes back to
     sizing itself from its own width. */
  .faq-photo-frame {
    flex: 0 0 auto;
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 600px) {
  .faq-question {
    padding: 1.1rem 1.2rem;
    font-size: 0.92rem;
    gap: 0.75rem;
  }

  .faq-toggle {
    width: 26px;
    height: 26px;
  }

  .faq-toggle::before,
  .faq-toggle::after {
    width: 10px;
  }

  .faq-answer p {
    padding: 0 1.2rem 1.1rem;
    font-size: 0.9rem;
  }

  .faq-stat-card {
    left: 0;
    padding: 0.8rem 1.1rem;
  }
}

/* =====================================================
   SUCCESSFUL OPERATIONS — scroll-driven horizontal
   ===================================================== */
.cases-section {
  background: linear-gradient(165deg, #14324d 0%, #0a1826 100%);
}

/* Tall wrapper — JS sets the height to create the scroll distance. */
.cases-scroller {
  position: relative;
}

/* Locks to the viewport while the scroller passes through. */
.cases-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Top clears the sticky site header; bottom keeps the arrows off the edge. */
  padding: var(--header-height) 0 3rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.cases-inner {
  width: 100%;
}

/* ---- Top bar ---- */
.cases-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

/* Scoped here because .eyebrow is only styled via descendant selectors. */
.cases-topbar-left .eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.cases-headline {
  font-family: var(--font-body);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

.cases-topbar-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

/* Circular scroll-progress indicator */
.cases-ring {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.cases-ring svg {
  transform: rotate(-90deg);
}

.cases-ring circle {
  fill: none;
  stroke-width: 3;
}

.cases-ring-bg {
  stroke: rgba(255, 255, 255, 0.18);
}

.cases-ring-fill {
  stroke: var(--color-primary);
  stroke-linecap: round;
  /* circumference of r=16 → 2πr ≈ 100.53 */
  stroke-dasharray: 100.53;
  stroke-dashoffset: 100.53;
}

.cases-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.cases-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.cases-view-all:hover {
  color: var(--color-primary-dark);
}

/* ---- Thin progress bar ---- */
.cases-bar-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.cases-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--color-primary);
}

/* ---- Slider ---- */
.cases-viewport {
  /* overflow clips to the padding box, so this padding is the room the card
     shadows render into instead of being cut off at the edge. */
  padding: 0.75rem 0 2.25rem;
  overflow: hidden;
}

.cases-track {
  display: flex;
  gap: 20px;
  /* No CSS transition — the RAF loop in JS drives the transform. */
  will-change: transform;
}

.cases-card-wrap {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
}

/* The wrapper is an <a> for cases that have a page of their own, so it has to
   drop the link defaults and let the card underneath keep its own styling. */
a.cases-card-wrap {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.cases-card-wrap:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius);
}

.case-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  /* Deeper than --shadow, which is invisible against the dark section. */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: var(--transition);
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}

.case-card-img {
  position: relative;
  aspect-ratio: 11 / 9;
  background: linear-gradient(150deg, #14324d 0%, #0a1826 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

/* Shown only as a fallback — a real case's own photo covers .case-card-img
   entirely, so this never sits on top of one. */
.case-card-icon {
  display: flex;
  color: rgba(255, 255, 255, 0.65);
}

.case-card-body {
  padding: 1.4rem 1.5rem 1.6rem;
}

/* Badge left, procedure type right — sits above the case name. */
.case-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.case-card-badge {
  display: inline-block;
  background: rgba(23, 162, 184, 0.12);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  flex-shrink: 0;
}

.case-card-name {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.case-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #777;
  font-size: 0.85rem;
}

.case-card-meta svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.case-card-type {
  color: #999;
  font-size: 0.78rem;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Only real cases (a published Case Highlight, with a page to link to) get
   this — the sample cards shown before anything is published never do. */
.case-card-details {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: var(--transition);
}

.case-card-details svg {
  transition: transform 0.25s ease;
}

/* Hovering anywhere on the card drives this, since the card itself is the
   link now and the Details line is only the affordance for it. */
a.cases-card-wrap:hover .case-card-details,
a.cases-card-wrap:focus-visible .case-card-details {
  color: var(--color-primary-dark);
}

a.cases-card-wrap:hover .case-card-details svg,
a.cases-card-wrap:focus-visible .case-card-details svg {
  transform: translateX(3px);
}

/* ---- Bottom bar ---- */
.cases-bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.cases-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  transition: opacity 0.3s ease;
}

.cases-hint.is-hidden {
  opacity: 0;
}

.cases-arrows {
  display: flex;
  gap: 0.6rem;
}

.cases-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.cases-arrow:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.cases-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---- Tablet: 2 cards ---- */
@media (max-width: 1024px) {
  .cases-card-wrap {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

/* ---- Short viewports: shrink so the bottom arrows never clip ---- */
@media (max-height: 820px) {
  .cases-sticky {
    padding: calc(var(--header-height) - 12px) 0 3rem;
  }

  .cases-headline {
    font-size: 1.6rem;
  }

  .cases-topbar {
    margin-bottom: 1rem;
  }

  .cases-viewport {
    padding: 0.5rem 0 1.5rem;
  }

  .case-card-img {
    aspect-ratio: 12 / 9;
  }

  .case-card-body {
    padding: 1rem 1.2rem 1.2rem;
  }
}

/* ---- Mobile: skip the scroll-jacking, use native horizontal scroll ---- */
@media (max-width: 640px) {
  .cases-scroller {
    /* JS leaves the height alone below this breakpoint. */
    height: auto !important;
  }

  .cases-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 3rem 0;
  }

  .cases-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .cases-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 -1.5rem;
    padding: 0.5rem 1.5rem 1.5rem;
  }

  .cases-track {
    transform: none !important;
  }

  .cases-card-wrap {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .cases-bar-track,
  .cases-ring,
  .cases-arrows {
    display: none;
  }
}

/* =====================================================
   SOCIAL FEED — Facebook embed + YouTube channel
   ===================================================== */
/*
 * Dark surface — deliberately breaks the light-on-light run this section
 * used to sit in the middle of (procedures → social → testimonials were all
 * pale). Reuses the navy/cyan language already established by the about
 * and qualifications sections above it, so the page still reads as one
 * design rather than a random dark patch.
 */
.social-section {
  position: relative;
  background: linear-gradient(165deg, #123249 0%, #0a1826 100%);
  overflow: hidden;
}

.social-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 55% at 85% 0%, rgba(23, 162, 184, 0.18) 0%, rgba(23, 162, 184, 0) 70%),
    radial-gradient(40% 50% at 6% 100%, rgba(255, 0, 0, 0.05) 0%, rgba(255, 0, 0, 0) 70%);
  pointer-events: none;
}

.social-section > .container {
  position: relative;
  z-index: 1;
}

.social-section .section-header h2 {
  color: #fff;
}

.social-subtitle {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.6rem;
}

/*
 * --social-panel-height is the panel *body* height, and giving both bodies the
 * same definite height is what keeps the Facebook feed and the YouTube column
 * ending level: without it the row would be sized by the video list's full
 * content and nothing inside would ever scroll.
 *
 * It tracks the viewport so the section lands as one screenful: 100svh less
 * the sticky header, the section padding, the section heading and the panel
 * head (~400px of chrome). Clamped at both ends — a feed under ~420px is
 * unreadable, and past ~780px the panels stop looking like cards.
 *
 * svh, not vh/dvh: dvh grows and shrinks as the mobile URL bar hides, which
 * would resize the Facebook frame mid-scroll and reload the widget.
 */
.social-grid {
  --social-panel-height: clamp(500px, calc(100svh - 300px), 900px);
  /*
   * Fill the screen side by side. The var above stays as the floor the panel
   * bodies are laid out from; this grows them past it, since a stretched grid
   * row hands its extra height down to the panel and its flexed body.
   */
  min-height: 97svh;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.social-grid--single {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

.social-panel {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

/* Brand stripe across the top of each panel. */
.social-panel::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--social-brand, var(--color-primary));
}

.social-panel--facebook {
  --social-brand: #1877f2;
}

.social-panel--youtube {
  --social-brand: #ff0000;
}

.social-panel-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.social-panel-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--social-brand, var(--color-primary));
}

.social-panel-titles {
  min-width: 0;
  flex: 1 1 auto;
}

.social-panel-titles h3 {
  font-size: 1.05rem;
  color: #fff;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-panel-titles span {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

.social-panel-cta {
  flex-shrink: 0;
  padding: 0.45rem 1.1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: var(--social-brand, var(--color-primary));
}

.social-panel-cta:hover {
  color: #fff;
  filter: brightness(0.9);
  transform: translateY(-2px);
}

.social-panel-body {
  /* height is the base size; flex-grow lets it fill a taller stretched row. */
  flex: 1 1 auto;
  height: var(--social-panel-height);
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1.1rem;
  /* Recessed relative to the panel itself, so the white Facebook frame and
     YouTube thumbnails read as bright cards floating on a dark surface
     instead of clashing with it. */
  background: rgba(6, 14, 24, 0.4);
}

/* ---- Facebook ---- */
/* The Page Plugin never renders wider than 500px, so the frame is capped and
   centred rather than stretched — otherwise it sits in a band of dead space.
   The feed scrolls inside this frame, which is the whole point of the panel.
   Its own timeline content is always white (Facebook's, not ours), so the
   frame keeps a white background and leans on shadow for definition here. */
.fb-embed {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.fb-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Shown to editors only, in place of an unconfigured panel. */
.social-setup-note {
  margin: auto;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

/* ---- YouTube ---- */
.yt-player {
  position: relative;
  aspect-ratio: 16 / 9;
  /* On a short panel 16:9 would eat the whole body and leave the list a
     sliver, so the player gives way first — YouTube letterboxes what's left. */
  max-height: 46%;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

.yt-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Click-to-play poster: no YouTube request is made until it is pressed. */
.yt-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.yt-facade img {
  width: 100%;
  height: 100%;
  /* hqdefault is 4:3 with letterbox bars — cover crops them off. */
  object-fit: cover;
  transition: var(--transition);
}

.yt-facade:hover img {
  opacity: 0.82;
}

.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 0, 0, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: var(--transition);
}

.yt-facade:hover .yt-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #f00;
}

.yt-now-playing {
  margin: 0.8rem 0 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  line-height: 1.4;
}

/* Takes whatever height is left in the panel and scrolls the rest away. */
.yt-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 162, 184, 0.5) transparent;
}

.yt-list::-webkit-scrollbar {
  width: 6px;
}

.yt-list::-webkit-scrollbar-thumb {
  background: rgba(23, 162, 184, 0.5);
  border-radius: 3px;
}

.yt-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.5rem;
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: var(--transition);
}

.yt-item:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(23, 162, 184, 0.5);
  transform: translateX(3px);
}

.yt-item.is-active {
  background: rgba(23, 162, 184, 0.14);
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.yt-item-thumb {
  position: relative;
  flex: 0 0 96px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.yt-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-item-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: var(--transition);
}

.yt-item:hover .yt-item-play,
.yt-item.is-active .yt-item-play {
  opacity: 1;
}

.yt-item-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  /* Two lines, then ellipsis, so every row stays the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yt-item:hover .yt-item-title {
  color: var(--color-primary);
}

/* Channel-only fallback when no videos are listed. */
.yt-channel-cta {
  flex: 1 1 auto;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 2rem 1.5rem;
  text-align: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.yt-channel-cta .yt-play {
  position: static;
  transform: none;
  margin-bottom: 0.6rem;
}

.yt-channel-cta:hover .yt-play {
  transform: scale(1.08);
  background: #f00;
}

.yt-channel-cta strong {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: #fff;
}

.yt-channel-cta span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---- Responsive ---- */
/* Stacked from here down: each panel is its own screenful, so the height is
   measured against the viewport alone rather than the whole section. */
@media (max-width: 980px) {
  .social-grid {
    --social-panel-height: clamp(480px, calc(100svh - 180px), 760px);
    /* Two stacked rows would have to split one screen between them. */
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .social-grid--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .social-grid {
    --social-panel-height: clamp(420px, calc(100svh - 160px), 680px);
  }

  .social-panel-body {
    padding: 0.9rem;
  }

  .social-panel-head {
    padding: 0.9rem 1rem;
  }

  .yt-play {
    width: 52px;
    height: 52px;
  }

  .yt-item-thumb {
    flex-basis: 80px;
  }
}

/* =====================================================
   SINGLE CASE HIGHLIGHT
   ===================================================== */
.case-single-hero {
  position: relative;
  isolation: isolate;
  background: var(--color-secondary) center / cover no-repeat;
  padding: calc(var(--header-height) + 3rem) 0 3rem;
}

.case-single-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, rgba(10, 24, 38, 0.94) 0%, rgba(23, 162, 184, 0.8) 100%);
}

.case-single-hero-inner {
  position: relative;
  z-index: 1;
  color: #fff;
}

.case-single-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: var(--transition);
}

.case-single-back:hover {
  color: #fff;
}

.case-single-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.case-single-type {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
}

.case-single-title {
  /* The global h1 rule sets its own navy color, which — being a rule that
     targets the element directly — wins over the white this inherits from
     .case-single-hero-inner. Restated here so the title reads on the photo. */
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  max-width: 800px;
  margin-bottom: 1rem;
}

.case-single-location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

.case-single-location svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.case-single-body {
  padding: 3.5rem 0;
  max-width: 800px;
}

.case-single-content {
  color: var(--color-text);
  line-height: 1.8;
}

.case-single-content p {
  margin-bottom: 1.2rem;
}

.case-single-empty {
  color: #888;
  font-style: italic;
}

.case-single-cta {
  display: inline-block;
  margin-top: 1rem;
}