/* ============================================================================
   Kayakriti — Page templates (kp- = "kayakriti page")
   Used by templates/category-page.php, service-page.php, top-category-page.php
   Builds on css/styles.css (which provides --blue, --ink, --r-*, --t-* tokens)
   ============================================================================*/

/* ---- Containers & rhythm -------------------------------------------------*/
.container         { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
/* `.kp-narrow` was previously a 760px cap that squeezed the FAQ section.
   Now it matches the default container width — same as the testimonials
   and the rest of the page. (`max-width: none` was wrong — it removed
   the .container max-width entirely and made the section span the full
   viewport.) */
.kp-narrow         { max-width: var(--max, 1200px); }
.kp-section        { padding: clamp(28px, 4vw, 56px) 0; }
/* Sibling section spacing: previous rule completely zeroed the top padding,
   which made content from one section crash into the next. Restore a small
   buffer so adjacent sections breathe. */
.kp-section + .kp-section { padding-top: clamp(16px, 2.4vw, 24px); }

/* Canonical typography for content sections (overrides for hero / body
   sections live further down). Heights are tight by default — service
   pages have a lot of vertical content and benefit from compact leading. */
.kp-section h2     { font-size: clamp(22px, 2.8vw, 32px); margin: 0 0 12px; letter-spacing: -0.018em; line-height: 1.12; color: var(--ink); }
.kp-section h3     { font-size: clamp(17px, 2vw, 22px); margin: 18px 0 6px; color: var(--ink); }
.kp-section p      { font-size: 16.5px; line-height: 1.3; color: var(--body); margin: 0 0 14px; }
.kp-section .lead  { font-size: 17px; color: var(--ink-3, var(--body)); }

.kp-section .eyebrow {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 10px;
}

/* ---- Hero ----------------------------------------------------------------*/
.kp-hero {
  padding: clamp(24px, 3.5vw, 48px) 0 clamp(16px, 2.4vw, 28px);
  background: linear-gradient(180deg, var(--surface) 0%, transparent 100%);
}
.kp-hero h1 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1; letter-spacing: -0.022em;
  color: var(--ink);
  margin: 6px 0 12px;
  font-weight: 500;
}
.kp-hero .lead { font-size: 17px; max-width: 720px; }
.kp-hero-cta { margin-top: 24px; }

.breadcrumb {
  font-size: 13.5px; color: var(--muted);
  margin-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.breadcrumb a { color: var(--blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---- Image placeholder ---------------------------------------------------*/
.kp-image-placeholder {
  margin: 0;
  width: 100%;
  border-radius: var(--r-xl, 18px);
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface) 0%, var(--tint) 100%);
  border: 1px dashed rgba(45, 125, 210, 0.32);
  display: flex; flex-direction: column; align-items: stretch;
  position: relative;
}
.kp-image-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* When the placeholder's aspect-ratio is set from the file's own dimensions
   (anchored-mode), the image fills exactly — no crop. For banners (very wide)
   and portraits (taller than wide) we use 'contain' instead of 'cover' so any
   rounding mismatch between inline aspect-ratio and intrinsic dimensions
   doesn't snip off edges. */
.kp-image-banner img,
.kp-image-portrait img { object-fit: contain; background: var(--surface); }

/* Portrait (ratio < 1.0) — constrain max width so a tall image doesn't span
   the full content column. Centered. */
.kp-image-portrait {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Banner (ratio > 2.4) — full width, no extra style needed; the inline
   aspect-ratio reserves a short-and-wide box. Class exists as a hook for
   future tweaks (e.g. tighter vertical margins). */
.kp-image-banner { margin-top: 14px; margin-bottom: 18px; }

/* Extras block at end of body — for any image that couldn't be anchored
   to a section. */
.kp-body-extras {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 26px 0 32px;
}
.kp-placeholder-inner {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: var(--blue);
  opacity: 0.55;
  text-align: center;
  padding: 24px;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}
.kp-image-placeholder figcaption {
  font-size: 13px; color: var(--muted);
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(45, 125, 210, 0.12);
}
.kp-image-wide   { aspect-ratio: 21/9; }
.kp-image-square { aspect-ratio: 4/3; }

/* ---- Two-col layout (service page) --------------------------------------*/
.kp-two-col {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) { .kp-two-col { grid-template-columns: 1fr; } }

.kp-quickfacts {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 18px);
  padding: 24px;
  position: sticky; top: 100px;
  box-shadow: 0 8px 24px -10px rgba(14,30,53,0.08);
}
.kp-quickfacts h3 { margin-top: 0; }
.kp-quickfacts dl { margin: 0 0 18px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; }
.kp-quickfacts dt { color: var(--muted); font-weight: 600; }
.kp-quickfacts dd { margin: 0; color: var(--ink); }

.kp-bullets { padding-left: 1.1em; line-height: 1.7; color: var(--body); }
.kp-bullets li { margin-bottom: 6px; }

/* ---- Sub-category section (anchor target) -------------------------------*/
.kp-subcat { background: var(--white); border-top: 1px solid var(--line); }
.kp-subcat:nth-of-type(even) { background: var(--surface); }
.kp-subcat-header { max-width: 760px; margin-bottom: 28px; }
.kp-subcat-body {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 880px) { .kp-subcat-body { grid-template-columns: 1fr; } }

/* ---- Service cards (within sub-cat OR on category direct list) ----------*/
.kp-service-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 720px) { .kp-service-cards { grid-template-columns: 1fr; } }

.kp-service-card,
.kp-interlink-card {
  display: block;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 14px);
  padding: 20px 22px;
  color: var(--ink);
  transition: all 200ms var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
  position: relative;
}
.kp-service-card:hover,
.kp-interlink-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(45, 125, 210, 0.22);
}
.kp-service-card h3,
.kp-interlink-card h3 {
  margin: 0 0 6px;
  font-size: 18px; line-height: 1.25;
  color: var(--ink);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.kp-service-card p,
.kp-interlink-card p {
  margin: 0 0 12px;
  font-size: 14.5px; color: var(--muted); line-height: 1.5;
}
.kp-readmore {
  font-size: 13px; font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.02em;
}

/* ---- Interlinks grid ----------------------------------------------------*/
.kp-interlinks { background: var(--surface); padding: clamp(32px, 4vw, 56px) 0; }
.kp-interlink-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.kp-interlink-grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* Two-by-two pillar tile grid — used on /home/ and /about-kayakriti/ so
   the four pillar tiles (Non-Surgical / Cosmetic / Reconstructive /
   Dental) read as a deliberate 2×2 block rather than a wide 4-up row.
   Each card gets ~half the row width — bigger cover photo, more
   breathing room for the title + blurb. */
.kp-interlink-grid-2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.is-top-category-covers .kp-interlink-grid-2x2 .kp-interlink-card {
  /* Wider, shorter aspect than the standard 5/3 — the cover photo
     gets more horizontal space at the larger card width. */
  aspect-ratio: 16 / 9;
  min-height: 220px;
}
@media (max-width: 700px) {
  .kp-interlink-grid-2x2 { grid-template-columns: 1fr; max-width: none; }
}

/* ---- Testimonials -------------------------------------------------------*/
.kp-testimonials { background: var(--white); padding: clamp(28px, 4vw, 48px) 0; }
/* Testimonials — horizontal scroller. Each card is a fixed width so the
   rail always overflows (regardless of how many testimonials exist) and
   auto-scroll always has somewhere to advance to. Auto-advance every 3s
   is handled by auto-scroll-rails.js; pauses on hover; snaps to cards. */
.kp-testimonial-grid {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-color: var(--line) transparent;
}
.kp-testimonial-grid > .kp-testimonial-card {
  flex: 0 0 320px;            /* fixed card width — guarantees overflow */
  scroll-snap-align: start;
}
.kp-testimonial-grid::-webkit-scrollbar { height: 6px; }
.kp-testimonial-grid::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
@media (max-width: 640px) {
  .kp-testimonial-grid > .kp-testimonial-card { flex: 0 0 85%; }
}
.kp-testimonial-card {
  background: var(--surface);
  border-radius: var(--r-xl, 18px);
  padding: 16px 18px;
  border: 1px solid var(--line);
}
.kp-stars { color: #F2A93B; font-size: 15px; letter-spacing: 2px; margin-bottom: 8px; }
.kp-testimonial-card blockquote {
  margin: 0 0 10px;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 16px; line-height: 1.5;
  color: var(--ink);
}
.kp-testimonial-card footer { font-size: 13.5px; color: var(--muted); }
.kp-testimonial-card footer strong { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
.kp-testimonial-note { margin-top: 20px; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* ---- Bottom CTA band — contained blue card, centred content -------------
   The blue gradient is on the inner card (not the outer section), so it
   stays inside the container's max-width with rounded corners and proper
   horizontal margins instead of spreading edge-to-edge. */
/* =====================================================================
   AYUSHMAN-CARD OFFER MARQUEE
   Brand-blue gradient strip with a horizontally scrolling banner.
   Rendered by includes/ayushman-marquee.php on /home/ (after the hero
   slider) and on /reconstructive-surgery/ (after the page hero). The
   message repeats four times inside the track so the -50 % translate
   loop is seamless. AYUSHMAN CARD pulses gently to draw the eye.
   ===================================================================== */
.kp-marquee {
  background: var(--grad-ink, linear-gradient(135deg, #0E1E35 0%, #1B3A6B 100%));
  color: #ffffff;
  overflow: hidden;
  padding: 12px 0;
  position: relative;
  /* Subtle inner highlight at the top and a thin glow at the bottom so
     the strip reads as a proper banner against the page bg, not a flat
     swatch. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 24px -16px rgba(14, 30, 53, 0.45);
}
/* Soft side-fades so the message visually "enters" and "exits" rather
   than abruptly clipping at the edge. */
.kp-marquee::before,
.kp-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(32px, 6vw, 80px);
  pointer-events: none;
  z-index: 2;
}
.kp-marquee::before {
  left: 0;
  background: linear-gradient(90deg, rgba(14, 30, 53, 1) 0%, rgba(14, 30, 53, 0) 100%);
}
.kp-marquee::after {
  right: 0;
  background: linear-gradient(270deg, rgba(14, 30, 53, 1) 0%, rgba(14, 30, 53, 0) 100%);
}

.kp-marquee-track {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: clamp(28px, 5vw, 56px);
  text-decoration: none;
  color: inherit;
  /* The animation moves the track left by 50 % of its own width. With
     four copies of the message inside, that lands the SECOND copy in
     the same spot the first copy started — seamless loop. */
  animation: kp-marquee-scroll 28s linear infinite;
  will-change: transform;
}
.kp-marquee:hover .kp-marquee-track,
.kp-marquee:focus-within .kp-marquee-track {
  animation-play-state: paused;
}
@keyframes kp-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Respect prefers-reduced-motion — show the first copy still, no scroll. */
@media (prefers-reduced-motion: reduce) {
  .kp-marquee-track {
    animation: none;
    justify-content: center;
  }
}

.kp-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(13.5px, 1.4vw, 16.5px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}
.kp-marquee-item strong {
  font-weight: 700;
}
.kp-marquee-pct {
  color: #ffffff;
  background: rgba(45, 125, 210, 0.22);
  border: 1px solid rgba(45, 125, 210, 0.55);
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.kp-marquee-card {
  color: #ffffff;
  background: linear-gradient(135deg, #2D7DD2 0%, #4A9EE8 100%);
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.92em;
  /* Pulse — pulled from rgba(45,125,210,...) so the glow stays on-brand. */
  animation: kp-marquee-pulse 1.9s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(45, 125, 210, 0.55);
}
@keyframes kp-marquee-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(45, 125, 210, 0.55); }
  60%  { box-shadow: 0 0 0 14px rgba(45, 125, 210, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(45, 125, 210, 0);   }
}
.kp-marquee-dot {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .kp-marquee-card { animation: none; }
}

/* Bottom CTA band — make the SECTION a flex container so the inner card
   is unambiguously centred even if a parent stylesheet has weird overrides.
   The section itself carries a horizontal gutter so the dark inner card
   never touches the viewport edge — fixes the mobile bug where the box
   hugged both sides of the screen. */
.kp-cta-band {
  background: transparent;
  /* Split the previous shorthand padding so we keep generous TOP breathing
     room (the card never crashes into the content above it) but cut the
     BOTTOM padding to a few pixels — together with `.kn-footer { margin-top: 0 }`
     this puts the dark card flush against the footer. */
  padding: clamp(40px, 5vw, 64px) clamp(16px, 4vw, 32px) 8px;
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.kp-cta-band > .container {
  width: 100%;
  max-width: var(--max, 1200px);
  margin-left: auto;
  margin-right: auto;
  background: var(--grad-ink, linear-gradient(135deg, #0E1E35 0%, #1B3A6B 100%));
  color: var(--white);
  text-align: center;
  border-radius: var(--r-2xl, 24px);
  padding: clamp(25px, 6vw, 25px) clamp(25px, 4vw, 56px);
  box-shadow: 0 24px 60px -24px rgba(14,30,53,0.32);
  box-sizing: border-box;
}
.kp-cta-band > .container > * {
  margin-left: auto;
  margin-right: auto;
}
.kp-cta-band h2 {
  color: var(--white);
  margin: 0 0 8px;
  font-size: clamp(26px, 3.4vw, 38px);
  text-align: center;
}
.kp-cta-band p {
  color: rgba(255,255,255,0.78);
  font-size: 17px;
  margin: 0 0 24px;
  text-align: center;
}
.kp-cta-band .btn {
  font-size: 16px;
  /* btn is inline-flex; text-align center on parent does the work */
}
/* =====================================================================
   CONTENT-PROTECTION CSS — paired with /assets/js/content-protection.js.
   Disables drag-to-save and text-selection on every <img> and <video>
   in the site so visitors can't accidentally save a patient photo or
   surgery video by drag-out. The JS layer above adds right-click and
   inspect-shortcut blockers. This is a friction layer, not a security
   boundary — see the JS file comments for what it does NOT prevent. */
img, video {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;        /* iOS long-press "Save to Photos" */
}

/* `.kp-cta-band p { margin: 0 0 24px }` higher up in this file has
   specificity (0,1,1) which beats a plain `.kp-cta-or { … }`. Use
   `.kp-cta-band p.kp-cta-or` (0,2,1) so margin-bottom: 0 actually
   takes effect and there's no extra empty band under the second phone. */
.kp-cta-band p.kp-cta-or {
  margin-top: 18px;
  margin-bottom: 0;
}
.kp-cta-or {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  text-align: center;
  /* Stack the label and both phone numbers vertically on every viewport,
     so a long number never has to wrap mid-string and the two numbers
     read as one column under the primary CTA. Each child becomes its
     own block-level line. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.kp-cta-or-label  { display: block; line-height: 1.3; }
.kp-cta-or-num    { display: inline-block; line-height: 1.3; }
.kp-cta-or a,
.kp-cta-or .kp-cta-or-num {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,0.4);
}

/* ---- Gallery grid (3 placeholder thumbs on service pages) ---------------*/
.kp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 720px) { .kp-gallery-grid { grid-template-columns: 1fr 1fr; } }

/* ---- Keywords line (factual SEO surface) --------------------------------*/
.kp-keywords-line {
  font-size: 14px;
  color: var(--muted);
  background: var(--surface);
  border-left: 3px solid var(--blue);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin-top: 20px;
}
.kp-keywords-line strong { color: var(--ink); }

/* ============================================================================
   BEFORE / AFTER SLIDER
   ============================================================================*/
.kp-ba-section {
  background: var(--surface);
  padding-top: clamp(20px, 3vw, 36px);
  padding-bottom: clamp(20px, 3vw, 36px);
}
.kp-ba-slider {
  /* --ba-pos drives the clip-path on .kp-ba-after (must be a percentage).
     --ba-pos-norm is a unitless 0..1 mirror used by .kp-ba-tag opacity
     (opacity can't take a percentage). Both are kept in sync by
     before-after-slider.js. */
  --ba-pos: 50%;
  --ba-pos-norm: 0.5;
  position: relative;
  border-radius: var(--r-xl, 18px);
  overflow: hidden;
  user-select: none;
  margin: 24px 0 14px;
  background: var(--ink);
  box-shadow: 0 16px 48px -16px rgba(14,30,53,0.32);
}
.kp-ba-track {
  position: relative;
  /* 16:9 — sized to fit source images at 320 x 180 (and any multiple
     thereof: 640x360, 960x540, 1280x720, 1600x900, 1920x1080). */
  aspect-ratio: 16 / 9;
  width: 100%;
}
.kp-ba-side { position: absolute; inset: 0; overflow: hidden; }
.kp-ba-side img,
.kp-ba-side .kp-ba-empty { width: 100%; height: 100%; display: block; object-fit: cover; }

.kp-ba-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}
/* Before / After labels — pinned to opposite top corners so they never
   overlap regardless of slider position. Opacity is tied to --ba-pos-norm
   so labels fade in/out as the visitor drags the handle: at far right
   the Before image is fully visible and only the "Before" pill shows;
   as the handle moves left to reveal the After image, "Before" fades
   out and "After" fades in. Linear mapping gives a smooth crossover.   */
.kp-ba-tag {
  position: absolute;
  top: 14px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
  /* No transition: drag should feel immediate, not laggy. */
}
.kp-ba-before .kp-ba-tag {
  left: 14px;
  /* Dark-grey chip instead of the previous translucent-white. Light
     before-photos used to wash the label out — the dark fill + white
     text now reads cleanly on any background colour. */
  background: rgba(20, 27, 38, 0.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: var(--ba-pos-norm, 1);            /* fades out as handle moves left */
}
.kp-ba-after .kp-ba-tag {
  right: 14px;
  background: var(--blue, #2D7DD2);
  opacity: calc(1 - var(--ba-pos-norm, 0));  /* fades out as handle moves right */
}
.kp-ba-after { clip-path: inset(0 0 0 var(--ba-pos)); }

.kp-ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos);
  width: 56px;
  transform: translateX(-50%);
  background: transparent;
  border: 0;
  cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.kp-ba-handle:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; }
.kp-ba-handle-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 3px; transform: translateX(-50%);
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.kp-ba-handle-arrows {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px; letter-spacing: 1px;
  box-shadow: 0 6px 18px -4px rgba(14,30,53,0.4);
}
.kp-ba-caption { font-size: 13.5px; color: var(--muted); margin-top: 14px; max-width: 640px; }

/* Disclaimer paragraphs below the Watch & Learn and Before/After sections.
   Intentionally muted — small font, low-contrast color, italic — so they
   sit as legal/contextual footnotes rather than dominant copy. The top
   margin gives the clause clear separation from the section content
   above it, so it doesn't read as part of the same block. */
/* Note: scoped as `p.kp-section-disclaimer` (not just `.kp-section-disclaimer`)
   to out-specify the generic `.kp-section p` rule defined earlier in this
   file. Without the `p` qualifier, every property here would be struck out
   in DevTools — `.kp-section p` (0,1,1) beats `.kp-section-disclaimer`
   (0,1,0). `p.kp-section-disclaimer` (0,2,1) wins cleanly. */
p.kp-section-disclaimer {
  font-size: 14px;
  line-height: 1.2;
  color: var(--body);
  margin: 10px 0 14px;
  font-style: italic;
}
/* The first sentence is wrapped in <strong> per client direction so the
   key disclaimer line ("Images shown are intended..." / "This video is
   for educational purposes only.") reads clearly against the italic
   small-print around it. Keep the bold upright (no italic) so it stands
   out as the primary message. */
p.kp-section-disclaimer strong {
  font-style: normal;
  font-weight: 700;
  color: var(--ink, #0E1E35);
}
@media (max-width: 720px) {
  p.kp-section-disclaimer {
    font-size: 12px;
    line-height: 1;
    color: var(--body);
    margin: 10px 10px 10px;
  }
}

/* ============================================================================
   FAQ section (snippet-friendly Q&As)
   ============================================================================*/
.kp-faq {
  background: var(--white);
  padding-top: clamp(16px, 2.5vw, 28px);
  padding-bottom: clamp(16px, 2.5vw, 28px);
}
/* FAQs in a 2-column layout on desktop. We let the column box stretch
   wider (max 1100px) so each Q is readable; CSS columns keep the
   per-item open/close behaviour intact. */
.kp-faq-list {
  margin-top: 10px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  column-count: 2;
  column-gap: 16px;
}
.kp-faq-item { break-inside: avoid; }
@media (max-width: 880px) {
  .kp-faq-list { column-count: 1; }
}
/* FAQ items: boxed look (background fill + border + rounded corners)
   with tight vertical padding (5px) so the rows stay compact. */
.kp-faq details,
.kp-faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 14px;
  margin-bottom: 6px;
  transition: border-color 200ms ease;
  overflow: hidden;
}
.kp-faq-item[open] { border-color: var(--blue); }
.kp-faq-item summary {
  padding: 0 28px 0 0;        /* room only for the +/- indicator on the right */
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  font-size: 14.5px;
  list-style: none;
  position: relative;
  line-height: 1.3;
  margin: 0;
}
.kp-faq-item summary::-webkit-details-marker { display: none; }
.kp-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--blue);
  line-height: 1;
  font-weight: 400;
}
.kp-faq-item[open] summary::after { content: "−"; }
.kp-faq-a {
  padding: 6px 0 0;
  margin: 0;
  color: var(--body);
  line-height: 1.4;
  font-size: 13.5px;
}
@media (max-width: 880px) {
  .kp-faq { padding-top: 10px; padding-bottom: 10px; }
  .kp-faq-item { padding: 5px 12px; }
  .kp-faq-item summary { font-size: 14px; padding-right: 24px; }
}

/* ============================================================================
   CTA CONSULTATION MODAL
   Opened via kayaModal.open({ service, category }) from any CTA button.
   ============================================================================*/
.kaya-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(14, 30, 53, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.kaya-modal-overlay.open { opacity: 1; visibility: visible; }

.kaya-modal-box {
  background: var(--white);
  border-radius: 20px;
  width: 100%;
  /* Wider on desktop so the two appointment-type cards fit their titles
     ("Book Your Video Consultation" / "Book In-patient Appointment") on
     one line each instead of wrapping. */
  max-width: 680px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(14, 30, 53, 0.25);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.kaya-modal-overlay.open .kaya-modal-box { transform: translateY(0); }

.kaya-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none;
  font-size: 20px; line-height: 1; cursor: pointer;
  color: #fff; display: grid; place-items: center;
  transition: background 0.15s;
  z-index: 2;
}
.kaya-modal-close:hover { background: rgba(255,255,255,0.3); }

.kaya-modal-head {
  background: linear-gradient(135deg, var(--blue) 0%, #1a5fa8 100%);
  border-radius: 20px 20px 0 0;
  padding: 32px 32px 26px;
}
.kaya-modal-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
}
.kaya-modal-head h2 {
  font-size: clamp(20px, 4vw, 26px);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600; margin: 0 0 14px;
  color: #fff; line-height: 1.2;
}
.kaya-modal-head h2 em { font-style: italic; }
.kaya-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kaya-modal-tags .pill {
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
}

.kaya-modal-body { padding: 28px 32px 32px; }

/* Success state */
.kaya-modal-success { padding: 48px 32px; text-align: center; }
.kaya-modal-check {
  width: 64px; height: 64px; border-radius: 50%;
  background: #22c55e; color: #fff;
  font-size: 28px; font-weight: 700;
  display: grid; place-items: center;
  margin: 0 auto 20px;
}
.kaya-modal-success h3 { font-size: 22px; margin-bottom: 10px; color: var(--ink); }
.kaya-modal-success p { color: var(--body); font-size: 15px; margin-bottom: 6px; }
.kaya-modal-countdown { font-size: 13px; color: var(--muted); }

/* (Earlier @media (max-width: 520px) block removed — superseded by the
   richer mobile-modal rules near the end of this file.) */

/* ============================================================================
   /book-appointment/ — embedded funnel
   Re-uses the splash funnel screens / IDs so splash.js can drive it, but
   renders inline in the page (not as the fixed full-viewport overlay).
   ============================================================================*/

.kp-book-hero {
  background: var(--white);
  padding: 56px 0 36px;
}
.kp-book-hero h1 {
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 10px 0 12px;
}
.kp-book-hero .lead {
  font-size: 17px;
  color: var(--body);
  max-width: 720px;
}

.booking-funnel-section {
  padding-top: 24px;
  padding-bottom: 64px;
  background: var(--surface);
}
.booking-funnel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl, 24px);
  box-shadow: 0 24px 56px -24px rgba(14,30,53,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The .splash-stage / .splash-screen rules from splash.css use position:fixed
   inside .splash-shell — we override here so the funnel sits inline. */
.booking-funnel .splash-stage.booking-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 40px clamp(20px, 4vw, 56px) 32px;
  min-height: 480px;
  overflow: visible;
}
.booking-funnel .splash-screen {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Bottom nav (back + progress dots) — keep visible always on this page */
.booking-funnel .splash-bottom {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 16px clamp(20px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.booking-funnel .splash-bottom.hidden { display: flex; }   /* always shown here */

/* Book-appointment Q1 (Step 1 of 4) ONLY — hide the long card
   descriptions. Step-1 cards are top-level pillars (Cosmetic /
   Reconstructive / Dental / Non-Surgical / Not sure) — the title is
   self-explanatory and the description made each card very tall.
   Q2 / Q3 cards (face sub-categories etc.) keep their descriptions
   because the extra context is genuinely useful there. Homepage splash
   funnel is untouched — this rule is scoped to `.booking-funnel`. */
.booking-funnel #screen-q1 .opt .desc { display: none; }
.booking-funnel #screen-q1 .opt .opt-main { gap: 0; }
.booking-funnel #screen-q1 .opt { min-height: 0; padding: 16px 18px; }
.booking-funnel #screen-q1 .opt-list.opt-grid-5 > .opt,
.booking-funnel #screen-q1 .opt-list.opt-grid-4 > .opt { min-height: 0; }

/* Q4 form panel keeps its dark/blue header look so the booking page's
   final step still feels like the splash final step. */
.booking-funnel #screen-q4.screen-form .form-header {
  border-radius: var(--r-2xl, 24px) var(--r-2xl, 24px) 0 0;
}

@media (max-width: 720px) {
  .booking-funnel .splash-stage.booking-stage {
    padding: 24px 18px 18px;
    min-height: 360px;
  }
  .kp-book-hero { padding: 32px 0 20px; }
}

/* ============================================================================
   SERVICE PAGE — refined layout
   - Hero: 2-column with image right; CTA only (no pills, no eyebrow)
   - Body: smaller H2s, image placeholders interleaved, points with icons
   - Sidebar: dense card stack — flows naturally with body, no sticky stop
   - 3-up grids for Before/After and Watch & Learn
   ============================================================================*/

/* Hero — 2-column split (text left, image right). Tightened vertical
   padding on desktop so the hero doesn't push the rest of the page down. */
.kp-hero-split {
  padding-top: 28px;
  padding-bottom: 28px;
}
@media (max-width: 880px) {
  .kp-hero-split { padding-top: 18px; padding-bottom: 22px; }
}
.kp-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
/* Mobile order overrides handled in the mobile-hero-cta block below — text is first,
   then image, then CTA (no order swap). Earlier `order: -1` removed. */
.kp-hero-text h1 {
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 10px 0 12px;
}
/* Desktop hero lead — updated to 17 / 1.3. */
.kp-hero-text .lead {
  font-size: 17px;
  line-height: 1.3;
  color: var(--body);
  margin-bottom: 24px;
}
/* Mobile hero lead — unchanged from before; kept as a separate block so
   it can be tweaked independently of the desktop rule. */
@media (max-width: 720px) {
  .kp-hero-text .lead {
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 24px;
  }
}
.kp-hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
  margin-top: 4px;
}
.kp-hero-image {
  border-radius: var(--r-xl, 18px);
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4/3;
  max-height: 380px;
  margin-left: auto;       /* keep right column tidy if image is narrower */
  box-shadow: 0 16px 48px -16px rgba(14,30,53,0.20);
}
@media (max-width: 880px) {
  .kp-hero-image { aspect-ratio: 16/10; max-height: 240px; }
}

/* Dental landing-page hero — 2-column grid (text + image). The dental
   /index.php is hand-authored (not generated from page-tree) so it gets
   its own small set of rules rather than the auto-gen layout. */
.kp-dental-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.kp-dental-hero-image {
  position: relative;        /* needed so z-index sits above page-hero::before */
  z-index: 1;
}
.kp-dental-hero-image .kp-hero-image {
  /* Match the cosmetic pillar hero (.kp-hero-split .kp-hero-image) so
     dental + non-surgical landing heroes read at the same image size as
     /cosmetic-surgery/ and /reconstructive-surgery/. */
  margin-left: 0;
  aspect-ratio: 4/3;
  max-height: 380px;
}
@media (max-width: 880px) {
  .kp-dental-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* No `order: -1` — text reads first on mobile, image second (mirrors the
     cosmetic / reconstructive hero behaviour, per user 2026-06-13). */
  .kp-dental-hero-image { order: 0; }
}

/* Wide banner image below the hero — secondary visual for clinic/environment */
.kp-hero-image-section { padding-top: 8px; padding-bottom: 32px; }
.kp-hero-banner {
  max-height: 360px;
  border-radius: var(--r-xl, 18px);
}

/* Trust cards — 3 short trust badges directly below the hero */
.kp-trust-cards-section {
  padding-top: 8px;
  padding-bottom: 32px;
}
.kp-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.kp-trust-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 18px);
  padding: 22px 22px 20px;
  box-shadow: 0 8px 24px -16px rgba(14,30,53,0.10);
  display: flex; flex-direction: column;
}
.kp-trust-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--tint, #E6F0FB);
  color: var(--blue);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.kp-trust-icon svg { width: 22px; height: 22px; }
.kp-trust-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.kp-trust-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}
@media (max-width: 880px) {
  .kp-trust-grid { grid-template-columns: 1fr; gap: 14px; }
  .kp-trust-card { padding: 18px; }
}

/* Mobile hero CTA: hide the desktop CTA inside text, show the mobile CTA below image */
.kp-hero-cta-mobile { display: none; }
@media (max-width: 880px) {
  .kp-hero-cta-desktop { display: none; }
  .kp-hero-cta-mobile {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .kp-hero-cta-mobile .btn { width: 100%; max-width: 360px; }
  /* Mobile hero stacks: text → image → CTA (no order swap) */
  .kp-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .kp-hero-media { order: 0; }
}

/* ---- Service body: tighter typography, sectioned articles ---- */
.kp-service-body { padding-top: 32px; }

.kp-service-body .kp-body-section {
  margin-bottom: 32px;
}
.kp-service-body .kp-body-section:last-child { margin-bottom: 0; }

.kp-service-body .kp-body-h2 {
  font-size: clamp(20px, 2.4vw, 26px) !important;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}

/* Sub-heading inside a body section. Used by the renderer for blocks of
   type `sub_heading` — labels like "Benefits", "Procedure", "Recovery",
   "Possible Side Effects" that organise a single section into clearly
   readable groups. Sized smaller than .kp-body-h2 so the hierarchy is
   obvious; same display serif keeps it visually related to the section
   title above. */
.kp-service-body .kp-body-h3 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 18px 0 6px;
}

/* Body paragraphs — desktop 18 / 1.2, mobile 16 / 1.2. No bullet/number on
   plain paragraphs (those are intro/topic sentences). */
.kp-service-body .kp-body-section > p {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--body);
}

/* Numbered list — plain "1." / "2." markers aligned with the text baseline. */
.kp-service-body .kp-body-section { counter-reset: kp-step; }
.kp-service-body .kp-bullets {
  list-style: none;
  padding-left: 0;
  margin: 2px 0 0;
  /* Reset the step counter on EACH bullet block so numbering restarts at
     1 in every list. Without this, separate <ul>s on the same page share
     the kp-step counter and number continuously (Benefits 1-6 then
     Procedure 7-11, etc.). */
  counter-reset: kp-step;
}
.kp-service-body .kp-bullets li {
  counter-increment: kp-step;
  padding-left: 26px;
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--body);
  text-indent: -26px;
}
.kp-service-body .kp-bullets li::before {
  content: counter(kp-step) ".";
  display: inline-block;
  width: 22px;
  margin-right: 4px;
  color: var(--blue, #2D7DD2);
  font-weight: 400;        /* regular — was 700, made the numbers pop out too much */
  font-size: inherit;
  text-indent: 0;
  text-align: left;
}

/* Mobile: smaller font (16px), same tight line-height. */
@media (max-width: 720px) {
  .kp-service-body .kp-body-section > p {
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 5px;
  }
  .kp-service-body .kp-bullets li {
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 4px;
  }
  .kp-service-body .kp-body-section { margin-bottom: 16px; }
  .kp-service-body .kp-body-h2 { margin-bottom: 8px !important; }
}

/* Inline image and video placeholders inside the body flow */
.kp-image-inline,
.kp-video-inline {
  margin: 22px 0 28px;
  border-radius: var(--r-lg, 14px);
}

/* ============================================================================
   RAIL ARROWS — left / right circular controls overlaid on every horizontal
   rail (testimonials, YouTube videos). Auto-scroll-rails.js wraps each rail
   in a `.kp-rail-shell` and injects two arrow buttons that scroll the rail
   by one card-width per click. Arrows fade when disabled (at start / end of
   the rail) and disappear entirely if the rail isn't scrollable.
   ============================================================================*/
.kp-rail-shell {
  position: relative;
}
.kp-rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px -8px rgba(14, 30, 53, 0.25);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
  padding: 0;
}
.kp-rail-arrow:hover:not(:disabled) {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.kp-rail-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.kp-rail-arrow-prev { left: -8px; }
.kp-rail-arrow-next { right: -8px; }

/* Hide arrows when rail content fits without overflow */
.kp-rail-shell-no-arrows .kp-rail-arrow { display: none; }

/* Mobile: keep arrows but smaller and tucked closer to the edge */
@media (max-width: 640px) {
  .kp-rail-arrow {
    width: 32px; height: 32px;
    box-shadow: 0 4px 12px -6px rgba(14, 30, 53, 0.3);
  }
  .kp-rail-arrow-prev { left: 2px; }
  .kp-rail-arrow-next { right: 2px; }
  .kp-rail-arrow svg { width: 14px; height: 14px; }
}

/* ---- Video placeholder ---- */
.kp-video-placeholder {
  background: linear-gradient(135deg, #1a2842 0%, #0E1E35 100%);
  color: rgba(255,255,255,0.75);
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  display: grid; place-items: center;
  margin: 0;
}
.kp-video-placeholder figcaption {
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  padding: 8px 14px;
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center;
}
.kp-video-placeholder-inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.kp-video-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.4);
  display: grid; place-items: center;
  color: #fff;
}
.kp-video-placeholder-inner span {
  font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.kp-video-embed {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.kp-video-embed iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* When the figure has a real iframe embed, override the centered-grid
   layout so the iframe stretches edge-to-edge instead of sitting in the
   middle with letterbox padding. */
.kp-video-placeholder.kp-has-video {
  display: block;     /* was: grid + place-items: center */
}
.kp-video-placeholder.kp-has-video figcaption {
  /* Caption stays as a thin overlay along the bottom */
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  padding: 8px 14px;
  font-size: 13px;
  text-align: center;
  z-index: 2;
}

/* ---- Sidebar: smart-sticky (scrolls with body, sticks when its last
        card reaches viewport bottom, releases at the body's end) ----
   • The aside column is stretched to the full body-section height so the
     sticky inside it has a long containing block to stick within.
   • The inner stack uses `position: sticky; top: calc(100vh - sidebar_h - 24)`.
     That means: the sticky engages when the element's natural top would
     scroll above (viewport − sidebar_h − 24). At that moment the element
     pins with its BOTTOM 24px from viewport bottom — which is exactly when
     the visitor first sees the last card at the bottom of the screen.
   • Until that point the element is in normal flow, scrolling alongside
     the body.  When the parent column's bottom catches up, the sticky
     boundary releases and the sidebar scrolls out with the body section.
   • `--sb-h` is set by sidebar-smart-sticky.js with the actual measured
     sidebar height.  The 700px fallback covers the first paint. */
.kp-col-aside {
  align-self: stretch;
}
.kp-side-sticky {
  position: sticky;
  /* Pure calc — NO max() floor. For sidebars taller than the viewport
     this evaluates to a negative number (e.g. −94px), which is exactly
     what we need: the sidebar's TOP scrolls above the viewport while its
     BOTTOM stays anchored 24px from the viewport bottom. The visitor
     watches the last card scroll into view, then everything pins. */
  top: calc(100vh - var(--sb-h, 700px) - 24px);
  display: flex; flex-direction: column; gap: 16px;
}
.kp-side-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 18px);
  padding: 18px 18px 16px;
  box-shadow: 0 6px 16px -10px rgba(14,30,53,0.10);
}
.kp-side-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  display: block; margin-bottom: 10px;
}
.kp-side-cta {
  width: 100%; margin-top: 12px;
}
.kp-side-link {
  display: block; margin-top: 10px;
  font-size: 13.5px; font-weight: 600;
  color: var(--blue); text-decoration: none;
}
.kp-side-link:hover { text-decoration: underline; }

/* At-a-glance card */
.kp-quickfacts-list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 14px;
  font-size: 13.5px;
}
.kp-quickfacts-list dt { color: var(--muted); font-weight: 500; }
.kp-quickfacts-list dd { margin: 0; color: var(--ink); font-weight: 600; }

/* "Check Pricing →" — full-width text button slotted under the dl. Uses
   a subtle ghost treatment so it doesn't compete with the primary
   "Book Your Free Consultation Now" CTA on the doctor card below. */
.kp-quickfacts-pricing {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 12px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue, #2D7DD2);
  background: rgba(45, 125, 210, 0.08);
  border: 1px solid rgba(45, 125, 210, 0.22);
  border-radius: 999px;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.kp-quickfacts-pricing:hover {
  background: var(--blue, #2D7DD2);
  border-color: var(--blue, #2D7DD2);
  color: #ffffff;
}

/* Doctor card */
.kp-doctor-card { text-align: center; padding-top: 22px; }
/* The photo wrapper is now an <a> so the entire circular avatar is a
   click-through to the doctor's profile page. Hover lifts + highlights. */
.kp-doctor-photo {
  display: block;
  width: 80px; height: 80px;
  border-radius: 50%; overflow: hidden;
  margin: 0 auto 12px;
  border: 3px solid var(--surface);
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.kp-doctor-photo:hover {
  border-color: var(--blue, #2D7DD2);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(45, 125, 210, 0.32);
}
/* Zoom + center the doctor inside the circular crop so the residual
   background-pattern strips at the left/right edges of the source PNG
   sit OUTSIDE the visible circle. The wrapper has overflow:hidden, so
   anything past the boundary is clipped cleanly. */
.kp-doctor-img {
  aspect-ratio: 1/1;
  height: 80px;
  overflow: hidden;
}
.kp-doctor-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.22);
  transform-origin: 50% 30%;   /* keep the face centred while zooming */
}
.kp-doctor-meta {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 8px;
}
/* The doctor's name is wrapped in <a class="kp-doctor-name-link">. Keep
   it visually identical to the old plain <strong> at rest; underline on
   hover to signal it's clickable. */
.kp-doctor-name-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.kp-doctor-name-link:hover strong { color: var(--blue, #2D7DD2); text-decoration: underline; }
.kp-doctor-meta strong {
  font-size: 16px; color: var(--ink);
  transition: color 150ms ease;
}
.kp-doctor-creds {
  font-size: 12px; color: var(--muted); line-height: 1.4;
}
.kp-doctor-loc {
  font-size: 12px; color: var(--blue); font-weight: 600;
  margin-top: 2px;
}

/* YouTube card — entire card is a link to the YouTube channel.
   Compact: tiny play icon + channel handle + caption. */
.kp-yt-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
  cursor: pointer;
}
.kp-yt-link:hover {
  border-color: var(--blue, #2D7DD2);
  transform: translateY(-2px);
}
.kp-yt-link-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px;
}
.kp-yt-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #FF0033;
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.kp-yt-icon svg { width: 22px; height: 22px; }
.kp-yt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kp-yt-text strong {
  font-size: 14px; color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kp-yt-text small { font-size: 12px; color: var(--muted); }

/* Sidebar trust card — 3 stacked rows (icon left, title only).
   Description text is hidden everywhere; the icon is sized to match the
   title's visual weight (~26px box, ~16px svg) so neither dominates. */
.kp-trust-side-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kp-trust-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
}
.kp-trust-row + .kp-trust-row {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.kp-trust-row .kp-trust-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--tint, #E6F0FB);
  color: var(--blue);
  display: grid; place-items: center;
  margin: 0;
}
.kp-trust-row .kp-trust-icon svg { width: 14px; height: 14px; }
.kp-trust-row .kp-trust-body { min-width: 0; }
.kp-trust-row .kp-trust-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.kp-trust-row .kp-trust-body p { display: none; }   /* description hidden */

/* Mobile: when sidebar drops below the body, lay the 3 trust rows out
   horizontally as compact icon-and-title chips (no description). */
@media (max-width: 880px) {
  .kp-trust-side-card {
    flex-direction: row;
    gap: 10px;
  }
  .kp-trust-row {
    flex: 1;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 8px;
    border-top: 0 !important;
    background: var(--surface);
    border-radius: 12px;
    padding: 2px 10px;            /* was 14px 10px */
    padding-top: 8px !important;  /* was 0 !important */
  }
  .kp-trust-row .kp-trust-icon { margin: 0 auto; }
  .kp-trust-row .kp-trust-body p { display: none; }
  .kp-trust-row .kp-trust-body strong { font-size: 12.5px; }
}

/* Related procedures card */
.kp-siblings-list {
  list-style: none; padding: 0; margin: 0;
}
.kp-siblings-list li {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.kp-siblings-list li:first-child { border-top: 0; padding-top: 4px; }
.kp-siblings-list li:last-child  { padding-bottom: 4px; }
.kp-siblings-list a {
  color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center;
}
.kp-siblings-list a:hover { color: var(--blue); }
.kp-siblings-list a::after {
  content: "→"; color: var(--muted); font-weight: 400;
  transition: transform 0.15s, color 0.15s;
}
.kp-siblings-list a:hover::after { color: var(--blue); transform: translateX(3px); }

/* Mobile: sidebar drops below body, no sticky */
@media (max-width: 880px) {
  .kp-col-aside { position: static; align-self: stretch; }
  .kp-side-sticky { position: static; gap: 14px; }
}

/* Explore [Category] card — list sub-cat names with links + browse button */
.kp-explore-card h4 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}
.kp-explore-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.kp-explore-list li {
  border-top: 1px solid var(--line);
}
.kp-explore-list li:first-child { border-top: 0; }
.kp-explore-list a {
  display: flex; align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s, padding 0.15s;
}
/* Rounded tile that wraps the inline SVG icon. Tint background matches
   the brand blue at low intensity so the icon reads as a soft badge
   rather than a hard mark next to the label. */
.kp-explore-icon {
  display: inline-flex;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--tint, #E6F0FB);
  color: var(--blue);
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.kp-explore-icon svg { width: 18px; height: 18px; display: block; }
/* File-icon variant: when a custom icon image lives at
   assets/img/icons/<slug>.svg|.png the helper renders this span instead
   of inline SVG. It uses CSS `mask-image` so any single-tone source
   asset (e.g. black-on-transparent) is auto-filled with brand colour.
   `--icon-url` is set inline by the helper. */
.kp-explore-icon .kp-icon-mask {
  display: block;
  width: 18px; height: 18px;
  background-color: var(--blue);
  -webkit-mask-image: var(--icon-url);
          mask-image: var(--icon-url);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: background-color 0.15s;
}
.kp-explore-list a:hover .kp-explore-icon .kp-icon-mask {
  background-color: #fff;
}
.kp-explore-label { flex: 1; }
.kp-explore-list a::after {
  content: "→";
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.15s, color 0.15s;
}
.kp-explore-list a:hover { color: var(--blue); }
.kp-explore-list a:hover .kp-explore-icon {
  background: var(--blue);
  color: #fff;
}
.kp-explore-list a:hover::after {
  color: var(--blue);
  transform: translateX(3px);
}
.kp-explore-cta {
  width: 100%;
  background: transparent !important;
  color: var(--blue) !important;
  border: 1.5px solid var(--blue);
  font-size: 14px;
  padding: 10px 16px;
}
.kp-explore-cta:hover { background: var(--tint, #E6F0FB) !important; }

/* "See the Difference" — 3 sliders in one row on desktop. Mobile stays
   the same as before: 1 column, compact wide-aspect sliders so all three
   fit in a single scroll. */
.kp-ba-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
/* When only 1 or 2 patient pairs exist, keep the sliders centered and
   appropriately sized — avoids the half-empty 3-column look. */
.kp-ba-grid.kp-ba-grid-1 {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
.kp-ba-grid.kp-ba-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.kp-ba-grid .kp-ba-slider { margin: 0; }
/* Desktop ratio (3/2) — closer to a typical landscape patient photo than
   the previous 4/3, without going as wide as 16/9 (which would compress
   face shots). Mobile override below uses 4/3 since that worked well. */
.kp-ba-grid .kp-ba-track  { aspect-ratio: 16 / 9; }  /* 320x180-compatible */
.kp-ba-grid .kp-ba-tag {
  top: 8px;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.kp-ba-grid .kp-ba-before .kp-ba-tag { left: 8px; }
.kp-ba-grid .kp-ba-after  .kp-ba-tag { right: 8px; }
.kp-ba-grid .kp-ba-handle { width: 40px; }
.kp-ba-grid .kp-ba-thumb  { width: 30px; height: 30px; }

@media (max-width: 880px) {
  /* Mobile: every variant collapses to a single column. The `.kp-ba-grid-1`
     / `.kp-ba-grid-2` desktop variants need their own override here — their
     higher-specificity desktop rules would otherwise keep multi-column
     layouts on mobile and squash images into thin strips. */
  .kp-ba-grid,
  .kp-ba-grid.kp-ba-grid-1,
  .kp-ba-grid.kp-ba-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Mobile uses a wider 16/10 landscape so the slider box is shorter than
     it would be at 4/3 — better fills with typical horizontal patient
     photos and avoids the "image at top half, empty below" look. */
  .kp-ba-grid .kp-ba-track { aspect-ratio: 16 / 9; max-height: none; }
}

/* "Watch & Learn" rail — 2 videos side-by-side directly below the hero.
   When there are more than 2 videos the rail switches to horizontal scroll
   so users can swipe through extras without enlarging the page. */
.kp-watch-top { padding: 28px 0 12px; }
.kp-video-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
}
/* Single-video layout: centre the card and cap its width so it doesn't
   stretch full-width across the body column (which would look like an
   accidental hero image). */
.kp-video-rail-single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}
.kp-video-rail .kp-video-card {
  margin: 0;
  border-radius: var(--r-lg, 14px);
  aspect-ratio: 16/9;
}
.kp-video-rail .kp-video-card .kp-video-play { width: 72px; height: 72px; }
.kp-video-rail .kp-video-card .kp-video-play svg { width: 36px; height: 36px; }
/* Instagram reel card — outer box keeps the 16/9 footprint of a YouTube
   card so the rail layout doesn't shift (same height, same grid slot),
   but the iframe inside is sized to IG's native 9/16 portrait ratio so
   the reel isn't squashed. Black letterbox fills the sides. */
.kp-video-rail .kp-video-card-ig {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
.kp-video-rail .kp-video-card-ig iframe {
  height: 100%;
  width: auto;
  aspect-ratio: 9/16;
  max-width: 100%;
  border: 0;
  display: block;
}

/* Video-rail wrapper — hosts prev/next arrows that scroll the underlying
   .kp-video-rail-scroll horizontally on click. Only present when the rail
   has more than 2 cards (otherwise there's nothing to scroll). */
.kp-video-rail-wrap { position: relative; display: block; width: 100%; }
/* Note (2026-06-13): the "two arrows on each side" bug was caused by TWO
   independent arrow systems running on the same rail:
     1. `.kp-video-rail-arrow` — rendered by service-page.php (this stylesheet)
     2. `.kp-rail-arrow` — injected at runtime by auto-scroll-rails.js
   Fix: auto-scroll-rails.js now SKIPS `wireArrows()` for `.kp-video-rail`
   so only the template-rendered arrows below render on video rails.
   `.kp-rail-arrow` styles still apply on testimonial rails. */
.kp-video-rail-arrow,
.kp-video-rail-arrow:focus,
.kp-video-rail-arrow:visited,
.kp-video-rail-arrow:hover,
.kp-video-rail-arrow:active,
.kp-video-rail-arrow.is-pressed {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(45, 125, 210, 0.35) !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #2D7DD2 !important;
  cursor: pointer;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  box-shadow: 0 6px 14px -8px rgba(14, 30, 53, 0.25);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  outline: none;
}
.kp-video-rail-arrow svg { display: block; stroke: #2D7DD2 !important; }
.kp-video-rail-arrow:hover { background: #f3f8fd !important; }
.kp-video-rail-arrow:active,
.kp-video-rail-arrow.is-pressed {
  background: #2D7DD2 !important;
  color: #ffffff !important;
  border-color: #2D7DD2 !important;
}
.kp-video-rail-arrow:active svg,
.kp-video-rail-arrow.is-pressed svg { stroke: #ffffff !important; }
.kp-video-rail-arrow-prev { left: -10px; }
.kp-video-rail-arrow-next { right: -10px; }
@media (max-width: 760px) {
  .kp-video-rail-arrow,
  .kp-video-rail-arrow:hover,
  .kp-video-rail-arrow:active { width: 34px; height: 34px; }
  .kp-video-rail-arrow svg { width: 16px; height: 16px; }
  .kp-video-rail-arrow-prev { left: 4px; }
  .kp-video-rail-arrow-next { right: 4px; }
}
/* Clinic + doctor pair variant — on desktop the two videos fit side-by-side
   in a CSS grid (no horizontal scroll), so the arrows would be misleading.
   They only render once the pair flips to its mobile flex/scroll carousel
   at <= 820px (see .kp-watch-clinic-pair @media (max-width: 820px)). */
@media (min-width: 821px) {
  .kp-video-rail-wrap--pair .kp-video-rail-arrow { display: none; }
}
@media (max-width: 820px) {
  /* Caption offset ONLY for the clinic+doctor pair fallback (where each
     card is "video + caption below"). Without the offset, a plain top: 50%
     would centre on (video + caption) and push the arrow below the
     YouTube play button. Scoped with :has() so it doesn't apply to the
     2-card service-page variant which has no caption below the video. */
  .kp-video-rail-wrap--pair:has(.kp-watch-clinic-caption) .kp-video-rail-arrow,
  .kp-video-rail-wrap--pair:has(.kp-watch-clinic-caption) .kp-video-rail-arrow:focus,
  .kp-video-rail-wrap--pair:has(.kp-watch-clinic-caption) .kp-video-rail-arrow:visited,
  .kp-video-rail-wrap--pair:has(.kp-watch-clinic-caption) .kp-video-rail-arrow:hover,
  .kp-video-rail-wrap--pair:has(.kp-watch-clinic-caption) .kp-video-rail-arrow:active,
  .kp-video-rail-wrap--pair:has(.kp-watch-clinic-caption) .kp-video-rail-arrow.is-pressed {
    top: calc(50% - 18px);
  }
}
/* Pair variant — left/right offsets and top calc no longer apply now that
   arrows are flex children of the wrap (always centred on the rail row). */

/* Scroll mode: when more than 2 videos exist, switch from grid to a
   horizontally-scrolling rail with snap points. */
.kp-video-rail-scroll {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.kp-video-rail-scroll .kp-video-card {
  flex: 0 0 calc(50% - 12px);
  scroll-snap-align: start;
}
@media (max-width: 760px) {
  /* On mobile the rail switches to horizontal scroll (one card per
     viewport-ish, swipe to reveal the rest) rather than stacking. */
  .kp-video-rail {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 6px;
  }
  .kp-video-rail .kp-video-card {
    flex: 0 0 88%;
    scroll-snap-align: start;
  }
  .kp-video-rail-scroll .kp-video-card { flex: 0 0 88%; }
}

/* Inline BA + Watch sections (rendered inside main column so the sticky
   sidebar stays alongside). The grids stay 3-up but use a lighter spacing
   and the column-width sliders/cards are slightly narrower than before. */
.kp-inline-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.kp-inline-section .eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kp-inline-section h2.kp-body-h2 {
  margin-bottom: 8px;
}
.kp-inline-section > p {
  font-size: 15px;
  color: var(--body);
  margin: 0 0 14px;
  padding-left: 0;  /* override the body-section paragraph indentation/icon */
}
.kp-inline-section > p::before { content: none; }

/* Mobile modal — keep it as a real popup (rounded corners + margin from
   the viewport edges + drop shadow), just tighter padding and a vertical
   max-height so the submit button is reachable. The overlay's 12px
   padding + max-width: calc(100% - 24px) gives the modal breathing room
   on every side; visitors see the dark backdrop around it confirming
   it's a popup, not a page take-over. */
@media (max-width: 520px) {
  .kaya-modal-overlay {
    padding: 12px;
    align-items: center;
  }
  .kaya-modal-box {
    border-radius: 16px;
    max-width: calc(100% - 0px);
    max-height: calc(100vh - 24px);
    width: 100%;
    height: auto;
  }
  .kaya-modal-head {
    padding: 18px 20px 14px;
    border-radius: 16px 16px 0 0;
  }
  .kaya-modal-head h2 { font-size: 20px; margin-bottom: 8px; }
  .kaya-modal-eyebrow { font-size: 10px; margin-bottom: 4px; }
  .kaya-modal-tags .pill { font-size: 11px; padding: 2px 8px; }
  .kaya-modal-body { padding: 16px 20px 20px; }
  .kaya-modal-body .field { gap: 4px; }
  .kaya-modal-body .field input,
  .kaya-modal-body .field select,
  .kaya-modal-body .field textarea {
    padding: 11px 14px;
    font-size: 15px;
  }
  .kaya-modal-body .form { gap: 12px; }
  .kaya-modal-body .help { font-size: 11.5px; margin-bottom: 8px; }
  .kaya-modal-close {
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    font-size: 18px;
  }
}


/* ============================================================================
   DOCTOR MEDIA STRIP — bio pages
   Sits between the page-hero and the two-col bio. Desktop is a 2-column grid
   (16:9 YouTube on the left, photo gallery on the right); mobile stacks
   the video on top and a horizontal scroll-rail of photos below.
   ============================================================================ */
.kp-doctor-media-section {
  padding-top: 16px;
  padding-bottom: 8px;
}
.kp-doctor-media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.kp-doctor-video { display: block; }
.kp-doctor-video-card {
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: var(--r-xl, 18px);
  overflow: hidden;
}
.kp-doctor-photos {
  display: grid;
  gap: 10px;
  /* If 3 photos, three rows; if 2 photos, the grid auto-shrinks. */
  grid-auto-rows: 1fr;
}
.kp-doctor-photo-card {
  margin: 0;
  border-radius: var(--r-xl, 18px);
  overflow: hidden;
  /* Override the inline aspect-ratio set by kaya_image_placeholder so all
     photos in the strip share the same frame regardless of their native
     dimensions — looks cleaner as a column. */
  aspect-ratio: 16 / 9 !important;
}
.kp-doctor-photo-card img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 25%;   /* favour face area */
}
@media (max-width: 880px) {
  .kp-doctor-media-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .kp-doctor-photos {
    grid-auto-flow: column;
    grid-auto-columns: minmax(75%, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .kp-doctor-photo-card {
    scroll-snap-align: start;
  }
}

/* ============================================================================
   DOCTOR-BIO INLINE PHOTO + SIDEBAR VIDEO
   Used by /about-kayakriti/plastic-surgeon-in-lucknow/ and
   /about-kayakriti/dental-surgeon-in-lucknow/. Photos sit between body
   paragraphs in the prose column; the YouTube intro lives at the top of
   the sidebar.
   ============================================================================ */
/* Inline bio photo — uniform landscape banner regardless of source
   image orientation. Need MANY !important overrides because the
   helper adds `kp-image-portrait` / `kp-image-banner` classes when
   it detects extreme aspect ratios, and those classes force
   max-width: 360px, margin: auto and object-fit: contain — which
   together produce a tiny letterboxed photo with the placeholder
   gradient bleeding through underneath. We undo all of that here. */
.kp-inline-photo {
  margin: 22px 0 26px !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: var(--r-xl, 18px);
  overflow: hidden;
  /* Solid background just in case any 1-px transparency seam shows. */
  background: var(--ink, #0E1E35);
}
.kp-inline-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  background: transparent !important;   /* override portrait's surface bg */
}

.kp-sidebar-video {
  /* The .kp-video-placeholder parent class doesn't set width: 100%,
     so the inner YouTube iframe (which defaults to 560 px) was making
     the figure render at 560 px and overflow the ~330 px sidebar
     content area — that's why the right edge of the thumbnail got
     clipped and the padding looked uneven.
     Fix: force width to fill the column AND bleed -16 px past the
     sidebar's 24 px padding on each side so the video reads larger.
     Net: rendered width ≈ 330 + 32 = 362 px → height ≈ 204 px (was 187). */
  width: calc(100% + 32px) !important;
  max-width: calc(100% + 32px) !important;
  margin: 0 -16px 16px !important;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  display: block !important;   /* override .kp-video-placeholder's `display: grid` */
}
/* Make the embed itself span the figure exactly — was relying on the
   helper's `.kp-video-embed iframe` rule which is fine, but redundant
   reinforcement here keeps the fix localized in one block. */
.kp-sidebar-video .kp-video-embed,
.kp-sidebar-video iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}
/* The kp-video-placeholder helper renders a <figcaption> below the
   video. In the sidebar, the <h4> above already labels it ("Meet
   Dr. Agarwal") — the duplicate caption underneath looks like a
   typo. Hide it. */
.kp-sidebar-video figcaption { display: none !important; }

/* The old `.kp-doctor-media-*` rules added earlier are no longer used —
   left in place for back-compat in case any cached page still references
   them; safe to remove on a future cleanup pass. */

/* ============================================================================
   DOCTOR-BIO PAGE — tightened spacing
   Applies only to the two "Know Your Doctor" pages (/about-kayakriti/
   plastic-surgeon-in-lucknow/, dental-surgeon-in-lucknow/). The default
   .section padding (clamp(56,8vw,112) top + bottom) and the .page-hero
   bottom padding combine to leave a 150–180 px gap between every section
   on a wide desktop. For info pages where the reader wants to scan
   credentials quickly, that's too generous. These overrides cut roughly
   half of the inter-section padding without going so tight that the
   layout looks cramped.
   ============================================================================ */

/* Hero — keep top space but cut bottom drop */
.kp-bio-hero {
  padding-bottom: clamp(8px, 1.5vw, 16px) !important;
}

/* Bio body section — cut both top and bottom paddings ~60% */
.kp-bio-section {
  padding-top:    clamp(20px, 3vw, 32px) !important;
  padding-bottom: clamp(24px, 3.5vw, 40px) !important;
}

/* CTA band — tight on both ends so the dark card hugs the footer. */
.kp-bio-cta {
  padding-top:    clamp(12px, 2vw, 24px) !important;
  padding-bottom: 8px !important;
}

/* Inline body photos — drop from 16:10 to 21:9 so they read as a
   slim editorial banner rather than dominating the column height.
   At the 760 px prose width that's roughly 760×326 (was 760×475),
   trimming ~150 px of vertical footprint per photo. */
.kp-bio-section .kp-inline-photo {
  aspect-ratio: 21 / 9 !important;
}

/* Last paragraph / list inside the prose — kill its bottom margin so
   the visual base of the prose column aligns with the sidebar. */
.kp-bio-section .prose > :last-child {
  margin-bottom: 0 !important;
}

/* The two-col grid's items align-items default of `start` causes the
   shorter sidebar to "stick" at the top while the prose is much taller.
   Keep `start` (we don't want the sidebar centred), but neutralise any
   implicit min-height the browser tries to inject. */
.kp-bio-section .two-col {
  align-items: start;
}

/* =====================================================================
   HIS CREDENTIALS — society/college logo grid (Dr. Amit bio page)
   ---------------------------------------------------------------------
   The credential PNGs inherited from the old WordPress site are mixed:
   - WHITE silhouettes on transparent (ASPS, RCS Edinburgh, ISAPS, AFPRS)
     — designed for the old blue-gradient banner.
   - BLACK on transparent (ACS, IAAPS) — designed for white background.
   The band uses a sky-blue → teal gradient (matches the old site) so
   the white logos sit naturally; dark logos get an opaque white circle
   behind them via [data-tone="dark"] so they stay legible too. */
/* Credentials band — soft brand-blue surface with a subtle gradient.
   Switched from the saturated blue→teal gradient to a tinted near-white
   so the full-colour society logos (ACS, IAAPS, ISAPS, etc.) read on
   their own without inversion tricks. */
.kp-credentials-band {
  position: relative;
  margin: 28px 0 32px;
  padding: 28px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #EEF6FD 0%, #DCEBF8 100%);
  border: 1px solid rgba(45, 125, 210, 0.14);
  box-shadow: 0 18px 40px -22px rgba(14, 30, 53, 0.12);
}
.kp-credentials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
/* Mobile — always 2 columns × 3 rows (reverted per user request).
   Applies to Dr. Amit's bio credentials block too. */
@media (max-width: 720px) {
  .kp-credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 420px) {
  .kp-credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.kp-cred {
  margin: 0;
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 200ms ease;
}
.kp-cred:hover { transform: translateY(-3px); }

.kp-cred .kp-cred-shield {
  width: 96px; height: 96px;
  border-radius: 50%;
  /* Soft white shield over the light-blue background — keeps each logo
     centred and gives uneven-aspect PNGs a clean circular halo. */
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.9);
  display: grid; place-items: center;
  padding: 12px; box-sizing: border-box;
}
.kp-cred .kp-cred-shield img {
  width: 100%; height: 100%; object-fit: contain;
}
/* The legacy `data-tone="dark"` invert-filter is intentionally removed.
   The newly-supplied PNGs are full-colour; inverting them produced solid
   white silhouettes (ACS / IAAPS bug). The attribute is left in the
   markup as a no-op so future tweaks can hook into it again if needed. */

.kp-cred figcaption {
  color: var(--ink, #0E1E35);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  max-width: 180px;
}

/* Compact "+" button — sits in the bottom-right corner of the credentials
   band (no new grid cell, no extra row). Opens the .kp-creds-modal with
   the full credential list. */
.kp-creds-more-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  appearance: none;
  background: linear-gradient(135deg, #2D7DD2 0%, #1E5FA8 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 14px -6px rgba(14, 30, 53, 0.45);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
  padding: 0;
}
.kp-creds-more-btn:hover {
  transform: translate(50%, -50%) scale(1.1);
  box-shadow: 0 10px 18px -6px rgba(45, 125, 210, 0.55);
}
.kp-creds-more-btn:focus-visible {
  outline: 3px solid rgba(45, 125, 210, 0.45);
  outline-offset: 3px;
}

/* Credentials modal — full-page overlay with a centred white card. The
   inner grid reuses .kp-credentials styling but switches to .kp-credentials-modal
   for a denser 4-up layout. */
.kp-creds-modal[hidden] { display: none; }
.kp-creds-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.kp-creds-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 30, 53, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: kp-creds-fade-in 200ms ease;
}
.kp-creds-modal-card {
  position: relative;
  background: linear-gradient(135deg, #EEF6FD 0%, #DCEBF8 100%);
  border: 1px solid rgba(45, 125, 210, 0.14);
  border-radius: 20px;
  width: min(1080px, 100%);
  max-height: min(86vh, 880px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 80px -20px rgba(14, 30, 53, 0.45);
  overflow: hidden;
  animation: kp-creds-pop-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kp-creds-modal-head {
  position: relative;
  padding: 20px 56px;
  text-align: center;
}
.kp-creds-modal-head h3 {
  margin: 0;
  font-size: 20px;
  color: var(--ink, #0E1E35);
}
.kp-creds-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  appearance: none;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(14, 30, 53, 0.08);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink, #0E1E35);
  transition: background 160ms ease, transform 160ms ease;
}
.kp-creds-modal-close:hover {
  background: #fff;
  transform: rotate(90deg);
}
.kp-creds-modal-body {
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kp-credentials-modal {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) {
  .kp-credentials-modal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kp-credentials-modal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .kp-creds-modal { padding: 12px; }
  .kp-creds-modal-body { padding: 16px; }
  .kp-creds-modal-head { padding: 14px 18px; }
}
@keyframes kp-creds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kp-creds-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.kp-creds-locked {
  overflow: hidden;
}

/* =====================================================================
   AWARDS & RECOGNITIONS — 3-card honours strip
   ---------------------------------------------------------------------
   Used by includes/awards-band.php on the homepage and Dr. Amit page.
   Cards sit on a soft tinted background to differentiate from the
   surrounding sections. Logos use a white shield card so any logo
   colourway stays legible.
   ===================================================================== */
.kp-awards-section {
  padding: clamp(24px, 4vw, 40px) 0;
  background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%);
  border-top: 1px solid rgba(45, 125, 210, 0.08);
  border-bottom: 1px solid rgba(45, 125, 210, 0.08);
}
.kp-awards-title {
  text-align: center;
  margin: 0 0 6px;
  font-size: clamp(22px, 2.8vw, 30px);
  color: var(--ink, #0E1E35);
}
.kp-awards-subtitle {
  text-align: center;
  color: var(--muted, #555c66);
  font-size: 14px;
  max-width: 600px;
  margin: 0 auto 20px;
}

/* Desktop default — 3 cards side by side, vertical layout inside each. */
.kp-awards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}

.kp-award {
  margin: 0;
  padding: 24px 20px;
  background: #ffffff;
  border: 1px solid #e6ecf2;
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 24px -16px rgba(14, 30, 53, 0.18);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.kp-award:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -16px rgba(45, 125, 210, 0.25);
}

.kp-award-shield {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5fbff 0%, #e9f3fd 100%);
  display: grid;
  place-items: center;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(45, 125, 210, 0.12);
}
.kp-award-shield img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* SVG placeholder (Shiksha Sansthan) — tint to brand blue */
.kp-award[data-placeholder] .kp-award-shield {
  color: var(--blue, #2D7DD2);
}
.kp-award[data-placeholder] .kp-award-shield svg {
  width: 48px;
  height: 48px;
}

.kp-award figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Desktop defaults for the two caption lines — MUST come BEFORE the
   mobile @media blocks below, otherwise CSS source order would let the
   un-mediated rule override the mobile rules at narrow widths (same
   single-class specificity → later source wins). Moved here from a
   later position in the file on Jun 8. */
.kp-award-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0E1E35);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.kp-award-by {
  font-size: 12.5px;
  color: var(--muted, #555c66);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Mobile only — KEEP all 3 awards in a single ROW. Tighter caption
   line-height + a smaller organisation-name font (.kp-award-by) so
   "Rotary Club Lucknow", "A Shiksha Sansthan" and "R.K.M Seva Sansthan"
   read as a compact one- or two-word stack under each shield. */
@media (max-width: 780px) {
  .kp-awards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: none !important;
    gap: 10px;
  }
  .kp-award {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    padding: 12px 8px !important;
    gap: 6px !important;
  }
  .kp-award-shield {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    padding: 8px;
  }
  .kp-award[data-placeholder] .kp-award-shield svg { width: 32px; height: 32px; }
  .kp-award figcaption {
    align-items: center !important;
    text-align: center !important;
    gap: 2px;
    min-width: 0;
  }
  /* Tighter line-heights on both award-name and organisation-name so
     the captions stack closely under the shield instead of looking
     loose. Organisation-name font is also dropped from 10 → 9 px. */
  .kp-award-name { font-size: 13px !important; line-height: 1.15; }
  .kp-award-by   { font-size: 10px; line-height: 1.15; letter-spacing: 0.05em; }
}
/* Tightest phones (≤ 400 px) — further shrink shield + fonts so the
   three columns still fit without horizontal scroll, and the
   organisation name doesn't overflow. */
@media (max-width: 400px) {
  .kp-awards-grid { gap: 6px; }
  .kp-award       { padding: 10px 4px !important; gap: 5px !important; }
  .kp-award-shield { width: 52px; height: 52px; flex: 0 0 52px; padding: 6px; }
  .kp-award-name  { font-size: 11.5px !important; line-height: 1.1; }
  .kp-award-by    { font-size: 10px; line-height: 1.1; }
}
/* The desktop defaults .kp-award-name + .kp-award-by USED to sit here,
   after both mobile @media blocks. That broke the cascade — same single-
   class specificity, but later source order, so the un-mediated 12.5 px
   rule was clobbering the 10 px mobile rule even when the @media query
   matched. The defaults have been MOVED ABOVE the mobile @media blocks
   (search for ".kp-award-name {" earlier in this file) so the cascade
   naturally lets the mobile rules win at small widths. */

/* =====================================================================
   CREDENTIALS BAND — two symmetrical cards (one per doctor) listing
   degrees / fellowships / certifications as pills, with a short
   fellowship blurb underneath. Rendered by includes/credentials-band.php
   on the splash homepage (/) and on /home/, immediately after the
   awards band. Visually mirrors the awards-band's tint + border so the
   two strips read as one continuous "trust" zone.
   ===================================================================== */
.kp-creds-section {
  padding: clamp(28px, 4.5vw, 44px) 0;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  border-top: 1px solid rgba(45, 125, 210, 0.08);
  border-bottom: 1px solid rgba(45, 125, 210, 0.08);
}
/* Hide trust strips while the splash funnel is on a step screen (Q1–Q4 or
   success). splash.js toggles `is-funnel-active` on <body> via show().
   The strips reappear when the visitor returns to #screen-0 (landing). */
body.is-funnel-active .kp-awards-section,
body.is-funnel-active .kp-creds-section {
  display: none;
}
.kp-creds-title {
  text-align: center;
  margin: 0 0 6px;
  font-size: clamp(22px, 2.8vw, 30px);
  color: var(--ink, #0E1E35);
}
.kp-creds-subtitle {
  text-align: center;
  color: var(--muted, #555c66);
  font-size: 14px;
  max-width: 620px;
  margin: 0 auto 22px;
}
/* The inner logo grid (.kp-credentials-band / .kp-credentials / .kp-cred)
   is styled by the existing rules higher up in this file (≈ line 1862)
   — identical to the "His Credentials" block on Dr. Amit's bio page —
   so the homepage and splash render the exact same logo cards. */

/* Single-row variant — applied by the partial when called with
   $creds_layout = 'single-row' (homepage / splash only). All 6 logos
   sit in one row on wide screens; shields scale down so they fit
   comfortably without crowding the captions. The 3×2 grid on Dr.
   Amit's bio is untouched because that page does NOT pass the flag. */
.kp-creds-section--single-row .kp-credentials-band {
  padding: 22px 16px;
}
.kp-creds-section--single-row .kp-credentials {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.kp-creds-section--single-row .kp-cred {
  padding: 8px 6px;
  gap: 10px;
}
.kp-creds-section--single-row .kp-cred .kp-cred-shield {
  width: 76px; height: 76px;
  padding: 10px;
}
.kp-creds-section--single-row .kp-cred figcaption {
  font-size: 11.5px;
  line-height: 1.25;
  max-width: 150px;
}
/* Collapse gracefully on smaller widths: 3-up at 980, 2-up at 640,
   1-up at 420. Mirrors the cadence used by the awards-band media
   queries so the two strips collapse together. */
@media (max-width: 980px) {
  .kp-creds-section--single-row .kp-credentials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kp-creds-section--single-row .kp-cred .kp-cred-shield { width: 88px; height: 88px; }
  .kp-creds-section--single-row .kp-cred figcaption { font-size: 10px; max-width: 180px; }
}
/* Mobile — always 2 columns × 3 rows (reverted per user request).
   Even at the smallest phone widths the six logos sit in a clean
   2 × 3 grid instead of collapsing to a single column. */
@media (max-width: 640px) {
  .kp-creds-section--single-row .kp-credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 420px) {
  .kp-creds-section--single-row .kp-credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* =====================================================================
   PUBLICATIONS & RESEARCH — ordered list of papers + book chapters
   Used by includes/publications-section.php on Dr. Amit's bio page.
   ===================================================================== */
.kp-publications-section { padding: 24px 0 32px; }
.kp-publications-section .kp-narrow { max-width: 820px; margin: 0 auto; padding: 0 16px; }
.kp-pub-subheading {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #0E1E35);
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(45, 125, 210, 0.18);
}
.kp-pub-list {
  margin: 12px 0 24px;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: pub;
}
.kp-pub {
  padding-left: 4px;
  line-height: 1.5;
}
.kp-pub::marker {
  color: var(--blue, #2D7DD2);
  font-weight: 700;
}
.kp-pub-title {
  display: inline-block;
  color: var(--ink, #0E1E35);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted rgba(45, 125, 210, 0.45);
  transition: color 200ms ease, border-color 200ms ease;
  font-size: 15px;
}
.kp-pub-title:hover {
  color: var(--blue, #2D7DD2);
  border-bottom-color: var(--blue, #2D7DD2);
}
.kp-pub-extlink {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  color: var(--blue, #2D7DD2);
  opacity: 0.7;
  transform: translateY(-1px);
}
.kp-pub-citation {
  margin-top: 4px;
  color: var(--muted, #555c66);
  font-size: 13.5px;
  line-height: 1.55;
  font-style: italic;
}

/* =====================================================================
   PRICING PAGE — /pricing/
   ===================================================================== */
.kp-pricing-hero {
  background: linear-gradient(135deg, #f4f9ff 0%, #ffffff 70%);
  padding: 48px 0 24px;
}
.kp-price-callout {
  margin: 24px 0 0;
  padding: 22px 24px;
  background: linear-gradient(180deg, #f4faff 0%, #ffffff 100%);
  border: 1px solid rgba(45, 125, 210, 0.18);
  border-left: 4px solid var(--blue, #2D7DD2);
  border-radius: 12px;
}
.kp-price-callout h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-family: inherit;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue, #2D7DD2);
}
.kp-price-callout ul {
  margin: 8px 0;
  padding-left: 20px;
  color: var(--ink, #0E1E35);
  line-height: 1.6;
}
.kp-price-callout li { margin-bottom: 6px; }
.kp-price-callout-tag {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(45, 125, 210, 0.18);
  color: var(--ink, #0E1E35);
}

/* Sticky TOC ---------------------------------------------------------- */
.kp-price-toc-wrap { padding: 12px 0; }
.kp-price-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 14px;
  background: var(--white, #ffffff);
  border: 1px solid var(--line, #e6ecf2);
  border-radius: 12px;
  position: sticky;
  top: 76px;            /* clear of fixed nav */
  z-index: 5;
  box-shadow: 0 8px 24px -16px rgba(14, 30, 53, 0.12);
}
.kp-price-toc a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f4faff;
  border: 1px solid rgba(45, 125, 210, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0E1E35);
  text-decoration: none;
  transition: all 200ms ease;
}
.kp-price-toc a:hover {
  background: var(--blue, #2D7DD2);
  color: #ffffff;
  border-color: var(--blue, #2D7DD2);
  transform: translateY(-1px);
}

/* Price tables -------------------------------------------------------- */
.kp-price-section { padding: 24px 0; scroll-margin-top: 140px; }
.kp-price-section h2 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(22px, 2.6vw, 26px);
  margin: 0 0 12px;
  color: var(--ink, #0E1E35);
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(45, 125, 210, 0.22);
}
.kp-price-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px -18px rgba(14, 30, 53, 0.15);
}
.kp-price-table thead th {
  background: linear-gradient(180deg, #2D7DD2 0%, #2670bd 100%);
  color: #ffffff;
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kp-price-table tbody td,
.kp-price-table tbody th {
  padding: 12px 16px;
  border-top: 1px solid #eef3f9;
  vertical-align: top;
  font-size: 14.5px;
  line-height: 1.5;
}
.kp-price-table tbody tr:hover td { background: #f8fbff; }
.kp-price-table tbody td:last-child {
  white-space: nowrap;
  color: var(--ink, #0E1E35);
  font-weight: 600;
}
.kp-price-subheading th {
  background: #f4faff;
  color: var(--blue, #2D7DD2) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px !important;
  padding: 10px 16px !important;
}
.kp-price-note {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted, #555c66);
  margin-top: 4px;
}
.kp-price-na { color: var(--muted, #555c66); font-weight: 400; }

@media (max-width: 720px) {
  .kp-price-table thead { display: none; }
  .kp-price-table tbody tr {
    display: block;
    border-top: 1px solid #eef3f9;
    padding: 8px 0;
  }
  .kp-price-table tbody tr.kp-price-subheading { display: block; padding: 0; }
  .kp-price-table tbody td {
    display: block;
    border: none;
    padding: 4px 16px;
  }
  .kp-price-table tbody td:last-child {
    color: var(--blue, #2D7DD2);
    font-size: 15px;
    padding-bottom: 12px;
  }
  .kp-price-toc { position: relative; top: 0; }
}

/* Includes / Excludes / Note / Privacy cards -------------------------- */
.kp-price-meta { padding-top: 16px; }
.kp-price-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 720px) { .kp-price-grid-2 { grid-template-columns: 1fr; } }

.kp-price-card {
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid var(--line, #e6ecf2);
  border-radius: 14px;
  box-shadow: 0 8px 24px -18px rgba(14, 30, 53, 0.12);
}
.kp-price-card + .kp-price-card { margin-top: 20px; }
.kp-price-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 22px;
  color: var(--ink, #0E1E35);
}
.kp-price-card ul { padding-left: 20px; line-height: 1.6; }
.kp-price-card li { margin-bottom: 6px; }
.kp-price-card-includes { border-left: 4px solid #2D7DD2; }
.kp-price-card-excludes { border-left: 4px solid #e0a534; }
.kp-price-card-note     { border-left: 4px solid #9b59b6; background: linear-gradient(180deg, #faf6ff 0%, #ffffff 100%); }
.kp-price-card-privacy  { border-left: 4px solid #14b07a; background: linear-gradient(180deg, #f3fbf7 0%, #ffffff 100%); }
.kp-price-tagline {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e6ecf2;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ink, #0E1E35);
}

/* =====================================================================
   GALLERY PAGE — /gallery/
   ---------------------------------------------------------------------
   Filterable before/after card grid. Filter is client-side JS — chips
   add/remove a class, cards with non-matching data-cat get [hidden].
   ===================================================================== */
.kp-gallery-filters-wrap { padding-top: 0; padding-bottom: 0; }
.kp-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 18px 0;
  position: sticky;
  top: 76px;            /* clear sticky nav */
  z-index: 5;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.kp-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #eaf3fc;
  color: var(--blue, #2D7DD2);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.kp-filter-pill:hover {
  background: #d9eafc;
  transform: translateY(-1px);
}
.kp-filter-pill.is-active {
  background: var(--ink, #0E1E35);
  color: #ffffff;
  border-color: var(--ink, #0E1E35);
}
.kp-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(45, 125, 210, 0.18);
  color: var(--blue, #2D7DD2);
  font-size: 11px;
  font-weight: 700;
}
.kp-filter-pill.is-active .kp-filter-count {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
}

/* Grid ------------------------------------------------------------- */
.kp-gallery-section { padding-top: 24px; }
.kp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1000px) { .kp-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .kp-gallery-grid { grid-template-columns: 1fr; } }

/* Card ------------------------------------------------------------- */
.kp-gallery-card {
  display: block;
  background: #ffffff;
  border: 1px solid var(--line, #e6ecf2);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 8px 24px -16px rgba(14, 30, 53, 0.18);
}
.kp-gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(45, 125, 210, 0.32);
  border-color: rgba(45, 125, 210, 0.32);
}
.kp-gallery-card[hidden] { display: none; }

/* In-card variant of the draggable BA slider.
   Resets the surgery-page slider's outer margin / shadow / large border-
   radius so the slider sits flush against the card's top edge. Sizing
   matches the mobile surgery-page slider (16/10 aspect, compact handle
   and tags) so the gallery look is consistent across breakpoints. */
.kp-ba-slider.kp-ba-slider-card {
  margin: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: none;
}
.kp-ba-slider.kp-ba-slider-card .kp-ba-track {
  aspect-ratio: 16 / 9;
}
/* Smaller handle + tags to suit the card scale */
.kp-ba-slider.kp-ba-slider-card .kp-ba-handle {
  width: 40px;
}
.kp-ba-slider.kp-ba-slider-card .kp-ba-handle-arrows {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
.kp-ba-slider.kp-ba-slider-card .kp-ba-tag {
  font-size: 10px;
  padding: 3px 9px;
  top: 10px;
}
.kp-ba-slider.kp-ba-slider-card .kp-ba-before .kp-ba-tag { left: 10px; }
.kp-ba-slider.kp-ba-slider-card .kp-ba-after  .kp-ba-tag { right: 10px; }

/* Meta — the link block under the slider. Made into a real <a> so the
   whole text area is clickable (the slider above it is interactive and
   we don't want a parent <a> capturing drag events). */
.kp-gallery-meta {
  display: block;
  padding: 14px 16px 16px;
  text-decoration: none;
  color: inherit;
  transition: background 180ms ease;
}
.kp-gallery-meta:hover { background: #f6fbff; }
.kp-gallery-arrow {
  display: inline-block;
  margin-left: 4px;
  color: var(--blue, #2D7DD2);
  transition: transform 180ms ease;
}
.kp-gallery-meta:hover .kp-gallery-arrow { transform: translateX(3px); }
.kp-gallery-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue, #2D7DD2);
  margin-bottom: 4px;
}
.kp-gallery-service {
  margin: 0 0 4px;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0E1E35);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.kp-gallery-patient {
  font-size: 12.5px;
  color: var(--muted, #555c66);
}

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

@media (max-width: 720px) {
  .kp-gallery-filters { top: 0; padding: 12px 0; }
  .kp-filter-pill { font-size: 13px; padding: 8px 14px; }
}

/* =====================================================================
   PRICING — TABBED SLIDER variant
   ---------------------------------------------------------------------
   Replaces the stacked sections with a single sliding row of category
   tabs + a panel below that swaps which rate chart is visible. Active
   tab auto-cycles every 5 s (handled by inline JS on /pricing/).
   ===================================================================== */
.kp-price-slider-section { padding: 16px 0 40px; }

/* Sliding row of tabs — overflows horizontally on narrow screens. */
.kp-price-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 10px 4px 18px;
  margin: 0 -4px;          /* let the row bleed under container padding */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.kp-price-tabs::-webkit-scrollbar { height: 6px; }
.kp-price-tabs::-webkit-scrollbar-track  { background: transparent; }
.kp-price-tabs::-webkit-scrollbar-thumb  { background: rgba(45,125,210,0.18); border-radius: 6px; }
.kp-price-tabs::-webkit-scrollbar-thumb:hover { background: rgba(45,125,210,0.38); }

.kp-price-tab {
  flex-shrink: 0;
  scroll-snap-align: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: #f4faff;
  border: 1.5px solid rgba(45, 125, 210, 0.18);
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0E1E35);
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease,
              border-color 220ms ease, transform 200ms ease,
              box-shadow 200ms ease;
  white-space: nowrap;
}
.kp-price-tab:hover {
  background: #e9f1fc;
  transform: translateY(-1px);
  border-color: rgba(45, 125, 210, 0.36);
}
.kp-price-tab.is-active {
  background: linear-gradient(135deg, #2D7DD2 0%, #4A9EE8 100%);
  color: #ffffff;
  border-color: var(--blue, #2D7DD2);
  box-shadow: 0 10px 24px -10px rgba(45, 125, 210, 0.55);
}
.kp-price-tab-icon {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  font-size: 14px;
}
.kp-price-tab.is-active .kp-price-tab-icon { color: #ffffff; }

/* ============================================================
   Two-tier pricing nav — redesigned for clarity.

   Tier 1 (Pillars: Cosmetic / Reconstructive / Dental):
     - Bold rectangular card buttons in a row, centred.
     - Active = solid dark navy (--ink) with white text, lifted.
     - Inactive = white card with subtle border and ink text.
     This makes the pillars feel like primary "section selectors".

   Tier 2 (Sub-categories: Face / Breast / Body / etc.):
     - Underlined tabs (no card, no pill border) — visually clearly
       subordinate. Active tab gets a brand-blue bottom-bar and
       blue text; inactive tabs are muted-grey.
     The two tiers can never be confused for each other because their
     visual languages are completely different (card vs underline tab).
   ============================================================ */

/* ----- Tier 1 — Pillar buttons ----- */
.kp-price-tabs-pillars {
  /* Override the inherited horizontal-scroll pill row: pillars are only
     3 items so they should sit centred with comfortable spacing. */
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 4px 22px;
  overflow: visible;
  scroll-snap-type: none;
}
.kp-price-tab-pillar {
  /* Reset the inherited pill styling so we can start fresh as a card. */
  scroll-snap-align: none;
  padding: 12px 28px;
  background: #ffffff;
  border: 1.5px solid var(--line, #e6ecf2);
  border-radius: 12px;
  color: var(--ink, #0E1E35);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.005em;
  box-shadow: 0 1px 0 rgba(14, 30, 53, 0.04);
}
.kp-price-tab-pillar:hover {
  background: #f5f9fd;
  border-color: rgba(45, 125, 210, 0.32);
  transform: translateY(-1px);
}
.kp-price-tab-pillar.is-active {
  background: var(--ink, #0E1E35);
  color: #ffffff;
  border-color: var(--ink, #0E1E35);
  box-shadow: 0 10px 24px -10px rgba(14, 30, 53, 0.5);
  transform: translateY(-1px);
}

/* ----- Tier 2 — Sub-category underlined tabs ----- */
.kp-price-tabs-subs { display: none; }
.kp-price-tabs-subs.is-active {
  /* Row of pill-style sub buttons sitting just under the pillars. The
     active pill is filled with the brand blue; inactive ones are plain
     text. No underline rail — the filled pill is the highlight. */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 4px;
  margin: 0 0 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.kp-price-tab-sub {
  /* Strip the inherited pill chrome so inactive subs read as plain text
     buttons. The active state below adds a brand-blue pill highlight. */
  scroll-snap-align: none;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted, #555c66);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  transform: none;
}
.kp-price-tab-sub:hover {
  background: rgba(45, 125, 210, 0.08);
  color: var(--ink, #0E1E35);
  transform: none;
}
.kp-price-tab-sub.is-active {
  /* Filled brand-blue pill — the active sub-button now reads as a
     prominent highlight, not a thin underline. Matches the "active"
     visual weight of the pillar tier above so the hierarchy still
     reads (pillars = dark navy cards; subs = blue pills). */
  background: var(--blue, #2D7DD2);
  color: #ffffff;
  box-shadow: 0 8px 18px -8px rgba(45, 125, 210, 0.5);
  transform: none;
}
.kp-price-tab-sub.is-active:hover {
  background: var(--blue, #2D7DD2);
  color: #ffffff;
}

/* Panels — only the active one is visible. Crossfade for polish. */
.kp-price-panels {
  position: relative;
  margin-top: 8px;
  background: #ffffff;
  border: 1px solid var(--line, #e6ecf2);
  border-radius: 16px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 12px 32px -22px rgba(14, 30, 53, 0.18);
}
.kp-price-panel {
  display: none;
  animation: kpPriceFade 360ms ease both;
}
.kp-price-panel.is-active { display: block; }
@keyframes kpPriceFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kp-price-panel-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 14px;
  color: var(--ink, #0E1E35);
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(45, 125, 210, 0.22);
}

/* =====================================================================
   DOS & DON'TS PAGE — /dos-and-donts/
   ===================================================================== */
.kp-dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}
@media (max-width: 720px) { .kp-dd-grid { grid-template-columns: 1fr; } }

.kp-dd-card {
  padding: 24px 24px 22px;
  border-radius: 16px;
  border: 1px solid var(--line, #e6ecf2);
  background: #ffffff;
  box-shadow: 0 8px 24px -18px rgba(14, 30, 53, 0.18);
}
.kp-dd-do    { border-left: 4px solid #14b07a; background: linear-gradient(180deg, #f1fbf6 0%, #ffffff 60%); }
.kp-dd-dont  { border-left: 4px solid #d94c4c; background: linear-gradient(180deg, #fdf3f3 0%, #ffffff 60%); }
.kp-dd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.kp-dd-head h3 {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ink, #0E1E35);
}
.kp-dd-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #ffffff;
  flex-shrink: 0;
}
.kp-dd-icon svg { width: 18px; height: 18px; }
.kp-dd-do   .kp-dd-icon { background: #14b07a; }
.kp-dd-dont .kp-dd-icon { background: #d94c4c; }
.kp-dd-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kp-dd-card ul li {
  position: relative;
  padding-left: 22px;
  /* Match the surgery-page reading rhythm (.kp-section p) — 16.5 px body
     text at line-height 1.3. The site-wide standard the user wants
     enforced on every non-homepage page. */
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--body, #44546A);
}
.kp-dd-card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.kp-dd-do   ul li::before { background: #14b07a; }
.kp-dd-dont ul li::before { background: #d94c4c; }

/* Pre-op preparation steps — numbered, clean */
.kp-dd-steps {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  counter-reset: prep;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kp-dd-steps li {
  counter-increment: prep;
  position: relative;
  padding: 14px 18px 14px 64px;
  background: #ffffff;
  border: 1px solid var(--line, #e6ecf2);
  border-radius: 12px;
  /* Match the site-wide body rhythm — same 16.5 / 1.3 as .kp-section p. */
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--body, #44546A);
}
.kp-dd-steps li::before {
  content: counter(prep);
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue, #2D7DD2) 0%, #4A9EE8 100%);
  color: #ffffff;
  font-weight: 700;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 16px;
  display: grid; place-items: center;
}

/* Why-Choose-Us promises */
.kp-dd-promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}
@media (max-width: 980px) { .kp-dd-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kp-dd-promises { grid-template-columns: 1fr; } }
.kp-dd-promise {
  background: #ffffff;
  border: 1px solid var(--line, #e6ecf2);
  border-radius: 14px;
  padding: 22px 20px;
  text-align: center;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.kp-dd-promise:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -16px rgba(45, 125, 210, 0.25);
}
.kp-dd-promise-icon {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f4faff 0%, #e9f3fd 100%);
  color: var(--blue, #2D7DD2);
  margin-bottom: 12px;
}
.kp-dd-promise-icon svg { width: 28px; height: 28px; }
.kp-dd-promise h3 {
  margin: 0 0 6px;
  font-size: 19px;
  color: var(--ink, #0E1E35);
}
.kp-dd-promise p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.3;          /* tightened to match the site-wide body rhythm */
  color: var(--muted, #555c66);
}

/* Clinic photos strip */
.kp-dd-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
@media (max-width: 720px) { .kp-dd-photos { grid-template-columns: 1fr; } }
.kp-dd-photos figure { margin: 0; }
.kp-dd-photos img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  border: 1px solid var(--line, #e6ecf2);
}
.kp-dd-photos figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted, #555c66);
  text-align: center;
}

/* =====================================================================
   FIND US — clinic address + Google Map embed
   Used on /book-appointment/ (after the funnel form) so visitors can
   see the location without leaving the page.
   ===================================================================== */
.kp-find-us { padding: clamp(28px, 4vw, 56px) 0; }
.kp-find-us-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: stretch;
}
.kp-find-us-info { display: flex; flex-direction: column; gap: 14px; }
.kp-find-us-info h2 { margin: 4px 0 6px; }
.kp-find-us-info .lead {
  color: var(--muted, #555c66);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 6px;
}
.kp-find-us-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.kp-find-us-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface, #f5f8fd);
  border: 1px solid var(--line, #e6ecf2);
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--ink, #0E1E35);
  line-height: 1.5;
}
.kp-find-us-list strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue, #2D7DD2);
}
.kp-find-us-list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(45, 125, 210, 0.4);
}
.kp-find-us-list a:hover { color: var(--blue, #2D7DD2); border-bottom-color: var(--blue, #2D7DD2); }

.kp-find-us-map {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line, #e6ecf2);
  box-shadow: 0 12px 32px -16px rgba(14, 30, 53, 0.18);
  min-height: 380px;
}
.kp-find-us-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Stack on phone/tablet — map drops below the info column. */
@media (max-width: 880px) {
  .kp-find-us-grid { grid-template-columns: 1fr; gap: 22px; }
  .kp-find-us-map { min-height: 320px; }
  .kp-find-us-map iframe { height: 320px; }
}

/* =====================================================================
   /home/ — conventional homepage (separate from the / splash funnel).
   The site logo still links to /; this page only renders when the
   "Home" nav item is clicked. Layout: hero → stats → USPs → pillars →
   about → surgeons → CTA. Most sections reuse existing kp-* primitives;
   the kp-home-* hooks below add only the bits that don't already exist.
   ===================================================================== */

/* Hero — reuse .kp-hero-split + tweak portrait crop */
.kp-home-hero-image { aspect-ratio: 4 / 5; max-height: 520px; overflow: hidden; }
.kp-home-hero-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r-xl, 18px);
}

/* Stats band */
.kp-home-stats { padding: clamp(24px, 4vw, 40px) 0; }
.kp-home-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  background: linear-gradient(135deg, #EEF6FD 0%, #DCEBF8 100%);
  border: 1px solid rgba(45, 125, 210, 0.14);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 36px) clamp(16px, 3vw, 28px);
}
@media (max-width: 760px) { .kp-home-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.kp-home-stat { text-align: center; }
.kp-home-stat-num {
  display: block;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.kp-home-stat-plus { color: var(--blue); margin-left: 1px; }
.kp-home-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* USPs — five cards */
.kp-home-usp-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
@media (max-width: 1100px) { .kp-home-usp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  680px) { .kp-home-usp-grid { grid-template-columns: 1fr; } }
.kp-home-usp {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: left;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.kp-home-usp:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -16px rgba(45, 125, 210, 0.25);
}
.kp-home-usp-icon {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(45, 125, 210, 0.10);
  color: var(--blue);
  margin-bottom: 12px;
}
.kp-home-usp-icon svg { width: 22px; height: 22px; }
.kp-home-usp h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600;
}
.kp-home-usp p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* Pillars rail */
.kp-home-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
@media (max-width: 960px) { .kp-home-pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kp-home-pillar-grid { grid-template-columns: 1fr; } }
.kp-home-pillar {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  color: var(--ink);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.kp-home-pillar:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -20px rgba(45, 125, 210, 0.28);
}
.kp-home-pillar-icon {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(45, 125, 210, 0.10);
  margin-bottom: 14px;
}
.kp-home-pillar-icon img { width: 32px; height: 32px; object-fit: contain; display: block; }
.kp-home-pillar h3 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600;
}
.kp-home-pillar p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* Doctors */
.kp-home-doctor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 22px;
}
@media (max-width: 820px) { .kp-home-doctor-grid { grid-template-columns: 1fr; } }
.kp-home-doctor {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
}
@media (max-width: 600px) {
  .kp-home-doctor { grid-template-columns: 1fr; }
}
.kp-home-doctor-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
}
.kp-home-doctor-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-home-doctor-body h3 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 600;
}
.kp-home-doctor-creds {
  margin: 0 0 10px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--blue);
  font-weight: 600;
}
.kp-home-doctor-body p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--body);
}

/* =====================================================================
   Cosmetic pillar — interlink cards with cover images + dark overlay.
   Only activated on /cosmetic-surgery/ via body.is-top-category-covers
   so other pillars stay on the plain card design until we approve the
   look and roll it out.
   ===================================================================== */
.is-top-category-covers .kp-interlink-card {
  /* Reset paddings — the cover image fills the card; text overlays on top. */
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 180px;
  /* Aspect ratio gives every card the same height regardless of blurb length. */
  aspect-ratio: 5 / 3;
  background: var(--ink);
}
.is-top-category-covers .kp-interlink-card .kp-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  /* Slight scale so the dark gradient covers the lower third more cleanly. */
  transform: scale(1.02);
  transition: transform 400ms ease, filter 400ms ease;
}
.is-top-category-covers .kp-interlink-card .kp-cover-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  /* Heavier gradient — top opacity bumped from 0.15→0.30 so the upper
     portion still reads as part of one card, the dark band starts
     earlier (40 % instead of 55 %), and the bottom is near-opaque so
     the title + blurb sit on a fully readable dark surface. */
  background: linear-gradient(180deg,
    rgba(14, 30, 53, 0.30) 0%,
    rgba(14, 30, 53, 0.72) 40%,
    rgba(14, 30, 53, 0.95) 100%);
  pointer-events: none;
}
.is-top-category-covers .kp-interlink-card .kp-cover-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 18px 20px;
  color: #ffffff;
}
.is-top-category-covers .kp-interlink-card .kp-cover-body h3 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.is-top-category-covers .kp-interlink-card .kp-cover-body p {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.is-top-category-covers .kp-interlink-card .kp-readmore {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}
.is-top-category-covers .kp-interlink-card:hover { transform: translateY(-3px); }
.is-top-category-covers .kp-interlink-card:hover .kp-cover-img {
  transform: scale(1.07);
  filter: brightness(1.04);
}

/* When the card has no cover image, fall back to a brand-blue gradient
   so the layout stays uniform (text still readable, no broken slot). */
.is-top-category-covers .kp-interlink-card.kp-cover-fallback {
  background: linear-gradient(135deg, #2D7DD2 0%, #4A9EE8 60%, #0E1E35 100%);
}

/* =====================================================================
   /home/ — hero slider.
   Full-bleed cinematic carousel with three slides carried over from the
   old Kayakriti homepage. Auto-rotates every 5s (JS in pages/home/),
   pauses on hover/focus, dots beneath let visitors jump.
   ===================================================================== */
.kp-home-hero-slider {
  position: relative;
  width: 100%;
  /* Taller on desktop for more visual impact, smaller on phones so the
     hero doesn't crowd the screen on a small viewport. The mobile cap
     is reapplied in the @media block at the bottom of this section. */
  height: clamp(560px, 78vh, 820px);
  overflow: hidden;
  background: var(--ink, #0E1E35);
}
.kp-home-slides {
  position: absolute; inset: 0;
}
.kp-home-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}
.kp-home-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms ease, visibility 0s linear 0s;
  z-index: 1;
}
.kp-home-slide-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Subtle ken-burns drift on the active slide for a touch of motion */
  transform: scale(1.03);
}
.kp-home-slide.is-active .kp-home-slide-img {
  animation: kpHomeSlideKB 8s ease-out forwards;
}
@keyframes kpHomeSlideKB {
  from { transform: scale(1.03); }
  to   { transform: scale(1.10); }
}
.kp-home-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(14, 30, 53, 0.10) 0%,
    rgba(14, 30, 53, 0.45) 55%,
    rgba(14, 30, 53, 0.82) 100%);
  pointer-events: none;
}
.kp-home-slide-text {
  position: absolute;
  left: 0; right: 0; bottom: clamp(110px, 18vh, 180px);
  color: #ffffff;
  max-width: var(--max, 1200px);
}
.kp-home-slide-text .kp-home-slide-eyebrow {
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.08);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.kp-home-slide-text h1 {
  margin: 14px 0 12px;
  color: #ffffff;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
  max-width: 820px;
}
.kp-home-slide-text h1 .accent { color: #9ED1FF; }
.kp-home-slide-text p {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  max-width: 620px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

/* Slider footer — CTA + dots, anchored bottom */
.kp-home-hero-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 0 28px;
  z-index: 2;
}
.kp-home-hero-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.kp-home-hero-cta {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.kp-home-hero-cta .btn-ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.4);
}
.kp-home-hero-cta .btn-ghost:hover {
  background: rgba(255,255,255,0.12);
}

.kp-home-dots {
  display: flex; gap: 10px;
}
.kp-home-dot {
  width: 30px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.18s ease, width 0.18s ease;
}
.kp-home-dot:hover { background: rgba(255,255,255,0.6); }
.kp-home-dot.is-active { background: #ffffff; width: 44px; }

/* Slider prev/next arrow buttons — positioned over the slide edges so
   they don't take layout space. Frosted glass background and a thin
   white ring keep them readable on both light and dark photo content. */
/* Universal slider arrow look — white default, brand-blue on press.
   Matches .kp-clinic-arrow / .kp-video-rail-arrow so every slider on the
   site presents the same affordance. No scale transform on tap. */
.kp-home-arrow,
.kp-home-arrow:focus,
.kp-home-arrow:visited,
.kp-home-arrow:hover,
.kp-home-arrow:active,
.kp-home-arrow.is-pressed {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  z-index: 4;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(45, 125, 210, 0.35) !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #2D7DD2 !important;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 22px -10px rgba(14, 30, 53, 0.45);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  outline: none;
}
.kp-home-arrow:hover { background: #f3f8fd !important; }
.kp-home-arrow:active,
.kp-home-arrow.is-pressed {
  background: #2D7DD2 !important;
  color: #ffffff !important;
  border-color: #2D7DD2 !important;
}
.kp-home-arrow:active svg,
.kp-home-arrow.is-pressed svg { stroke: #ffffff !important; }
.kp-home-arrow svg { width: 22px; height: 22px; display: block; stroke: #2D7DD2 !important; }
.kp-home-arrow-prev { left: clamp(14px, 3vw, 36px); }
.kp-home-arrow-next { right: clamp(14px, 3vw, 36px); }
.kp-home-arrow:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Brighten the two doctor portraits on /home/ by 10 % so the studio-lit
   shots match the slightly cooler hero tone. Filter applied to the IMG
   only (not the wrapper) so the surrounding chrome stays untouched. */
.kp-home-doctor-img img {
  filter: brightness(1.1);
}

@media (max-width: 720px) {
  /* Shorter hero on phone — was 440-560 px, now 360-460 px so the
     slider fills less of the small viewport. */
  .kp-home-hero-slider { height: clamp(360px, 60vh, 460px); }
  .kp-home-slide-text { bottom: clamp(80px, 16vh, 130px); padding: 0 4vw; }
  .kp-home-hero-controls { flex-direction: column; align-items: center; }
  /* Hide the prev/next arrows on phone — they sat over the hero headline
     and hid words like "Re" from "Restoring" (user request 2026-06-13).
     Dots below the slide remain for slide-selection on touch. */
  .kp-home-arrow { display: none; }
}

/* /home/ — Signature services + Journal teaser ---------------------- */
.kp-home-signature .kp-interlink-grid { gap: 18px; }
.kp-home-journal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.kp-home-journal-head .btn-ghost { flex-shrink: 0; }
@media (max-width: 720px) {
  .kp-home-journal-head { flex-direction: column; align-items: flex-start; }
}

/* Shared arrow chrome for mobile scroll-snap carousels (home journal,
   etc.). Hidden on desktop because the grid view shows every card at
   once. Frosted-glass button style matches the .kp-home-arrow pattern
   used by the hero slider so everything reads as one family. */
.kp-snap-arrow {
  display: none;            /* shown by per-section mobile rules below */
}
@media (max-width: 720px) {
  .kp-snap-arrow {
    display: grid;
    place-items: center;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(14, 30, 53, 0.6);
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 18px -6px rgba(14, 30, 53, 0.55);
    transition: background 0.18s ease, transform 0.18s ease;
  }
  .kp-snap-arrow:hover  { background: rgba(14, 30, 53, 0.78); }
  .kp-snap-arrow:active { transform: translateY(-50%) scale(0.94); }
  .kp-snap-arrow svg    { width: 18px; height: 18px; display: block; }
  .kp-snap-arrow-prev   { left: 4px; }
  .kp-snap-arrow-next   { right: 4px; }
  .kp-snap-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }
}

/* /home/ blog teaser — MOBILE compact horizontal carousel.
   On phones the default 1-col stack made the journal block consume
   3 full screens. Switch to a swipeable horizontal scroll-snap rail so
   all three cards (and any future fourth/fifth as the JSON grows) sit
   in ONE row, ~78 % of viewport wide each. Tightens excerpt to 3
   lines via line-clamp so each card stays a uniform short height. */
@media (max-width: 720px) {
  .kp-home-journal .kb-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin-inline: -16px;
    padding: 4px 16px 12px;
    scrollbar-width: thin;
  }
  .kp-home-journal .kb-grid::-webkit-scrollbar { height: 4px; }
  .kp-home-journal .kb-grid::-webkit-scrollbar-thumb {
    background: rgba(45, 125, 210, 0.32);
    border-radius: 999px;
  }
  .kp-home-journal .kb-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  /* Tighter image strip + clamped excerpt so each card is short */
  .kp-home-journal .kb-card-image { aspect-ratio: 16 / 10; }
  .kp-home-journal .kb-card-body  { padding: 14px 14px 16px; }
  .kp-home-journal .kb-card-title { font-size: 16px; line-height: 1.25; }
  .kp-home-journal .kb-card-excerpt {
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kp-home-journal .kb-card-meta { font-size: 11.5px; gap: 6px; }
}

/* /home/ — section heading above the stats band */
.kp-home-stats-head {
  text-align: center;
  margin: 0 auto 18px;
  max-width: 720px;
}

/* /home/ — About Kayakriti two-column layout (copy + image placeholder). */
.kp-home-about .kp-home-about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.kp-home-about-image { margin: 0; }
.kp-home-about-figure {
  /* 4/3 placeholder card — the kaya_image_placeholder() helper already
     paints a clean skeleton when no file is supplied. */
  border-radius: 18px;
  overflow: hidden;
}
@media (max-width: 880px) {
  .kp-home-about .kp-home-about-grid { grid-template-columns: 1fr; }
}

/* /home/ — pillar 2×2 grid: prevent horizontal overflow on phones.
   The .container already caps width; the inner grid needs explicit
   min-width:0 so its 1fr tracks don't blow past the container. */
.kp-interlink-grid-2x2 { min-width: 0; }
.kp-interlink-grid-2x2 .kp-interlink-card { min-width: 0; max-width: 100%; }
@media (max-width: 700px) {
  /* Already collapses to one column at 700 px; tighten the gap so two
     cards fit a 360 px viewport comfortably with .container's 20-24 px
     side padding. */
  .kp-interlink-grid-2x2 { gap: 14px; }
  .is-top-category-covers .kp-interlink-grid-2x2 .kp-interlink-card {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

/* /home/ — USPs on mobile: icon BESIDE the title, no description, and
   each card collapses to a thin horizontal pill. Saves a lot of vertical
   space on small viewports without losing the "5 reasons" rhythm. */
@media (max-width: 680px) {
  .kp-home-usp-grid { gap: 10px; }
  .kp-home-usp {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
  }
  .kp-home-usp-icon {
    width: 36px; height: 36px;
    margin-bottom: 0;
    border-radius: 10px;
  }
  .kp-home-usp-icon svg { width: 18px; height: 18px; }
  .kp-home-usp h3 {
    margin: 0;
    font-size: 14.5px;
    font-family: var(--font, inherit);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
  }
  /* Hide descriptions on mobile — the title alone tells the story at
     this size. Re-enable per-card via .kp-home-usp p { display: block } if needed. */
  .kp-home-usp p { display: none; }
}

/* Clinic-tour fallback for the Watch & Learn rail — two-column block
   (copy + Know-more CTA on the left, single YouTube embed on the right).
   Replaces the previous full-width video rail on pages that don't yet
   have a procedure-specific video. Activated via `.kp-watch-clinic` set
   by service-page.php when the page's `clinic_video` flag is true. */
.kp-watch-clinic-grid {
  /* Match the hero grid EXACTLY — same column template AND same gap —
     so the video holder on the right and the procedure-hero cover image
     on the right (the same column, in a different section above) line
     up to the same width. Without matching the gap value the columns
     drift apart even when the template ratio looks the same. */
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.kp-watch-clinic-copy { min-width: 0; }
/* Heading mirrors `.kp-body-h2` (used by "Elevate Your Confidence …"
   below the hero). All h1-h6 in styles.css default to var(--font-display)
   (Cormorant Garamond serif) — so we have to inherit that, NOT force
   the body sans which would visually clash with the rest of the page. */
.kp-watch-clinic .kp-watch-clinic-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif) !important;
  font-size: clamp(20px, 2.4vw, 26px) !important;
  font-weight: 600 !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}
/* Description mirrors `.kp-section p` — same 16.5 / 1.3 / body colour
   / 14 px bottom margin as the procedure description paragraphs below. */
.kp-watch-clinic-copy p {
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--body);
  margin: 0 0 14px;
}
.kp-watch-clinic-cta { margin-top: 6px; }
/* Video holder fills its grid track (which is the SAME width as the
   procedure-hero cover image column above). Native 16 : 9 — no
   letterbox / pillarbox. */
.kp-watch-clinic-media { width: 100%; min-width: 0; }
.kp-watch-clinic-media .kp-video-card {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0;
}
@media (max-width: 820px) {
  .kp-watch-clinic-grid { grid-template-columns: 1fr; gap: 22px; }
  .kp-watch-clinic-media { max-width: 480px; margin: 0 auto; }
}

/* Two-video clinic-tour row — clinic walk-through + doctor introduction.
   Replaces the old single-video clinic block; used when `clinic_video`
   flag is set on the page. Stacks the two videos in one equal-width row
   below a full-width heading + lead, then a single CTA below.
   Collapses to one column on phones. */
.kp-watch-clinic-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  margin: 22px 0 18px;
}
.kp-watch-clinic-pair .kp-watch-clinic-media { width: 100%; }
.kp-watch-clinic-pair .kp-watch-clinic-media .kp-video-card {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0;
}
.kp-watch-clinic-caption {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--body, #4a5568);
  margin: 10px 0 0;
  text-align: center;
}
.kp-watch-clinic-cta-row {
  margin: 18px 0 0;
  text-align: center;
}
/* Mobile — convert the 2-up grid into a horizontal swipe carousel so
   the two videos (clinic + doctor) don't stack vertically and consume
   the entire viewport. Each video card snaps to the start; the second
   card is partially visible to hint at the swipe affordance. */
@media (max-width: 820px) {
  .kp-watch-clinic-pair {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    /* Bleed past the container's padding so the cards reach the screen
       edges; first card scrolls flush left, last card flush right. */
    margin-inline: -16px;
    padding: 4px 16px 12px;
    scrollbar-width: thin;
  }
  .kp-watch-clinic-pair .kp-watch-clinic-media {
    flex: 0 0 86%;          /* ~14 % peek of the next card on the right */
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
  }
  /* Hide WebKit scrollbar — the snap points make scroll position obvious
     and the bar adds visual noise on phones. */
  .kp-watch-clinic-pair::-webkit-scrollbar { height: 4px; }
  .kp-watch-clinic-pair::-webkit-scrollbar-thumb {
    background: rgba(45, 125, 210, 0.32);
    border-radius: 999px;
  }
}

/* About-page clinic slider — auto-rotating gallery of clinic photos. */
/* Tight on every side. The slider sits between the page-hero (lead copy)
   above and a `.section` (prose + sidebar) below. We:
   1. Pin its own padding to a small fixed 12 px top + 12 px bottom (was
      28–56 px via the inherited `.kp-section` rule).
   2. Pull the page-hero immediately above it tight to ~8 px bottom.
   3. Collapse the next `.section`'s top padding down so the H2
      ("Trusted ... Lucknow") sits close beneath the slider. */
.kp-clinic-slider-section { padding: 12px 0 !important; }
/* General-sibling (~) instead of adjacent (+) because the slider section
   is followed by an inline <script> tag (the slider's own driver) before
   the next .section, which breaks `+`. `~` skips over the script.
   Scoped to `.kp-clinic-slider-section ~ section.section` so it only
   targets the first prose .section that follows — `.kp-testimonials`
   below doesn't carry the .section class so it stays untouched. */
.page-hero:has(~ .kp-clinic-slider-section) { padding-bottom: 8px; }
.kp-clinic-slider-section ~ section.section { padding-top: 0 !important; padding-bottom: clamp(24px, 4vw, 48px); }
.kp-clinic-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 540px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink, #0E1E35);
  box-shadow: 0 20px 48px -22px rgba(14, 30, 53, 0.28);
}
.kp-clinic-slides { position: absolute; inset: 0; }
.kp-clinic-slide {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.kp-clinic-slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 600ms ease, visibility 0s linear 0s;
  z-index: 1;
}
.kp-clinic-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.kp-clinic-dots {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 8px;
  z-index: 3;
}
.kp-clinic-dot {
  width: 24px; height: 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.6);
  padding: 0;
  /* Inactive — translucent white pill with a thin white border so it
     stays visible over any photo (light marble, dark wood, etc.). */
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 0.18s, width 0.18s, border-color 0.18s;
}
.kp-clinic-dot:hover {
  background: #ffffff;
  border-color: #ffffff;
}
.kp-clinic-dot.is-active {
  /* Active — solid brand-blue pill so the current slide is obvious
     even against busy/colourful clinic photos. */
  background: var(--blue, #2D7DD2);
  border-color: var(--blue, #2D7DD2);
  width: 38px;
}
/* Universal slider arrow look (per user 2026-06-13): white background +
   thin blue chevron by default; on press, swaps to solid brand-blue with
   a white chevron. Transform is PINNED to translateY(-50%) on every
   state so nothing — CSS hover effect, JS animation, browser default —
   can grow the chip on tap. */
.kp-clinic-arrow,
.kp-clinic-arrow:focus,
.kp-clinic-arrow:visited,
.kp-clinic-arrow:hover,
.kp-clinic-arrow:active,
.kp-clinic-arrow.is-pressed {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  position: absolute; top: 50%;
  transform: translateY(-50%) !important;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(45, 125, 210, 0.35) !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #2D7DD2 !important;
  cursor: pointer;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  box-shadow: 0 6px 14px -8px rgba(14, 30, 53, 0.25);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  outline: none;
}
.kp-clinic-arrow svg { display: block; stroke: #2D7DD2 !important; }
.kp-clinic-arrow:hover {
  background: #f3f8fd !important;
}
.kp-clinic-arrow:active,
.kp-clinic-arrow.is-pressed {
  background: #2D7DD2 !important;
  color: #ffffff !important;
  border-color: #2D7DD2 !important;
}
.kp-clinic-arrow:active svg,
.kp-clinic-arrow.is-pressed svg { stroke: #ffffff !important; }
.kp-clinic-arrow-prev { left: 14px; }
.kp-clinic-arrow-next { right: 14px; }
@media (max-width: 600px) {
  /* Mobile size has to be applied to EVERY interactive state, otherwise
     :hover / :active inherit the default 40×40 rule and the chip "jumps"
     back to its desktop size on tap. */
  .kp-clinic-arrow,
  .kp-clinic-arrow:focus,
  .kp-clinic-arrow:hover,
  .kp-clinic-arrow:active,
  .kp-clinic-arrow.is-pressed { width: 34px; height: 34px; }
  .kp-clinic-arrow svg { width: 16px; height: 16px; }
  .kp-clinic-arrow-prev { left: 8px; }
  .kp-clinic-arrow-next { right: 8px; }
}

/* Side-by-side photo pair used on Dr. Amit's bio page.
   Left figure (the narrow one) is 30 % of the row; the right figure
   takes the remaining 70 %. Each figure's own .kp-image-placeholder
   styles still control aspect-ratio and rounding, so existing site
   spacing is preserved. Collapses to one column on phones. */
.kp-photo-pair {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 16px;
  align-items: stretch;
  /* Tight on both ends so the pair sits compactly between the
     surrounding paragraphs / H2 — was 22/28 then 6/24, now 6/6. */
  margin: 6px 0 6px;
}
/* Make the pair photos noticeably taller than the default .kp-inline-photo
   21/9 (very wide / very short banner). 4/3 is portrait-leaning so the
   surgeon photos fill more vertical space without losing the side-by-side
   row feel. */
.kp-photo-pair > .kp-inline-photo {
  aspect-ratio: 4 / 3 !important;
}
.kp-photo-pair > .kp-inline-photo {
  /* Reset the margin the figure adds when it's standalone — the row's
     own gap + margin handle the spacing. `!important` because the base
     `.kp-inline-photo { margin: 22px 0 26px !important }` rule earlier
     in this file would otherwise win on tie. */
  margin: 0 !important;
  width: 100%;
  height: 100%;
}
/* Narrow-photo variant — ONLY this image (frame1) uses the special
   crop (object-position center 20%) so Dr. Amit's face stays anchored
   to the top of the frame. Other .kp-inline-photo figures keep their
   default object-position. */
.kp-inline-photo.kp-inline-photo-narrow img {
  object-fit: cover;
  object-position: center 20%;
  width: 100%;
  height: 100%;
}
/* Mirror variant — wide image on the LEFT, narrow (30 %) on the RIGHT.
   Used for the clinic-shot + Dr. Amit teaching photo lower on the bio. */
.kp-photo-pair.kp-photo-pair-right-narrow {
  grid-template-columns: 1fr 30%;
}
/* When an h2/h3 follows a photo pair, kill its default top margin
   (.prose h2 ships with 48 px, .prose h3 with 32 px) so the heading
   sits close to the photos instead of leaving a big visual gap. */
.kp-photo-pair + h2,
.kp-photo-pair + h3 { margin-top: 10px !important; }
@media (max-width: 720px) {
  /* Stack on phones — each photo gets full width again. */
  .kp-photo-pair,
  .kp-photo-pair.kp-photo-pair-right-narrow { grid-template-columns: 1fr; }
}

/* ===== /home/ page — global section-spacing tightening =====
   The conventional homepage stacks ~8 sections (slider → stats → USPs →
   pillars → signature → about → doctors → awards → testimonials → FAQs
   → journal → CTA). The default .kp-section padding is 28–56 px on
   every edge, which compounds into ~60–110 px of empty space between
   every pair. Scope: only on body.is-home so other pages stay normal. */
body.is-home .kp-section { padding: clamp(18px, 2.4vw, 32px) 0; }
body.is-home .kp-section + .kp-section { padding-top: clamp(8px, 1.2vw, 14px); }
body.is-home .kp-testimonials { padding: clamp(18px, 2.4vw, 32px) 0; }
body.is-home .kp-awards-section { padding: clamp(18px, 2.4vw, 32px) 0; }
/* Stats band heading already has its own .kp-home-stats-head with
   margin-bottom:18px — kill its block's outer padding to be even
   tighter against the slider above and USPs below. */
body.is-home .kp-home-stats { padding: clamp(14px, 2vw, 22px) 0; }
body.is-home .kp-home-stats-head { margin-bottom: 12px; }

/* Charity page — banner image between hero copy and prose body. */
.kp-charity-banner-section { padding: 8px 0 4px; }
.kp-charity-banner {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  max-height: 460px;
  background: var(--ink, #0E1E35);
  box-shadow: 0 20px 48px -24px rgba(14, 30, 53, 0.28);
}
.kp-charity-banner img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  display: block;
}
.kp-charity-banner-section + .section { padding-top: clamp(16px, 2.4vw, 28px); }

/* Inline BA slider (the kp-ba-inline-wrap is added by service-page.php
   around any `ba_slider` block in the body). Constrains the slider to
   roughly the size of a single card in the BA grid below, so an inline
   slider doesn't blow up to full prose-column width. */
.kp-service-body .kp-ba-inline-wrap {
  max-width: 360px;
  margin: 18px auto 22px;
}
.kp-service-body .kp-ba-inline-wrap .kp-ba-slider {
  margin: 0;
}

/* Inline `image_pair` block — two photos side-by-side inside the body
   content. Used where a BA slider isn't appropriate (e.g. dental
   digital-radiography x-ray sample shots). Mirrors `.kp-photo-pair`
   sizing/spacing but doesn't depend on a wrapping placeholder. */
.kp-image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 22px 0 26px;
}
.kp-image-pair img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 28px -18px rgba(14, 30, 53, 0.22);
}
.kp-image-pair figcaption {
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 640px) {
  .kp-image-pair { grid-template-columns: 1fr; }
}

/* =====================================================================
   BA SECTION — VIDEO PAIRS variant (Pre / Post Operation).
   Used on pages whose BA folder contains `_patient<N>_(before|after).mp4`
   files instead of (or in addition to) photo pairs — e.g. the BPI pages.
   Each pair renders TWO native <video> elements side-by-side on desktop;
   on mobile, the row becomes a horizontal scroll-snap carousel so
   visitors can swipe between pre and post.
   ===================================================================== */
.kp-ba-video-list {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  margin: 14px 0 18px;
}
.kp-ba-video-pair {
  margin: 0;
}
.kp-ba-video-pair-label {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  color: var(--ink, #0E1E35);
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: -0.01em;
}
.kp-ba-video-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, 320px);
  justify-content: center;        /* centre the 2 fixed-width cards inside the row */
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}
.kp-ba-video-side {
  position: relative;
  margin: 0;
  width: 320px;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface, #f4f6f9);
  box-shadow: 0 16px 32px -18px rgba(14, 30, 53, 0.22);
}
.kp-ba-video-side video {
  /* Fixed 320 × 400 px on desktop per user spec — portrait recovery
     shot, framed identically on Pre and Post sides. object-fit:cover
     scales the source to fill the frame and crops as needed. */
  display: block;
  width: 320px;
  height: 400px;
  max-width: 100%;
  object-fit: cover;
  background: #000;
}
/* Pre / Post tag — same chip style as the .kp-ba-tag on photo sliders
   so the video pair reads as part of the same family. Pre = dark ink
   (matches "Before" colour). Post = brand blue. */
.kp-ba-video-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(20, 27, 38, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.kp-ba-video-post .kp-ba-video-tag {
  background: rgba(45, 125, 210, 0.88);
}

/* Mobile (≤ 640 px) — turn each patient row into a horizontal
   scroll-snap carousel. Each video card flexes to 88 % viewport width
   so the second card peeks ~12 % from the right, hinting at the swipe
   affordance. Identical pattern to .kp-watch-clinic-pair on phones. */
@media (max-width: 640px) {
  .kp-ba-video-pair-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: none;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    /* Bleed past the container's padding so the first card scrolls
       flush left and the last flush right. */
    margin-inline: -16px;
    padding: 4px 16px 12px;
  }
  .kp-ba-video-pair-grid::-webkit-scrollbar { height: 4px; }
  .kp-ba-video-pair-grid::-webkit-scrollbar-thumb {
    background: rgba(45, 125, 210, 0.32);
    border-radius: 999px;
  }
  /* Mobile videos are 70 % of the desktop size (320 × 400 → 224 × 280).
     The card sizes to the video so the carousel snap points align with
     the visible video frames. */
  .kp-ba-video-side {
    flex: 0 0 224px;
    width: 224px;
    scroll-snap-align: start;
  }
  .kp-ba-video-side video {
    width: 224px;
    height: 280px;
  }
  .kp-ba-video-tag {
    top: 10px;
    left: 10px;
    padding: 4px 9px;
    font-size: 11px;
  }
}

/* BA section variant — when `ba_replacement` swaps the patient-pair
   grid for a flat image gallery (e.g. radiography sample scans). Same
   chrome (eyebrow, h2, lead, disclaimer) as the standard .kp-ba-section
   above, but the .kp-ba-grid is replaced with a simple flex/grid of
   plain <img> figures so they aren't dressed up as before/after sliders. */
/* Slider chrome — only needed on mobile, but the wrapper is always in
   the DOM. Position context for the arrow buttons. */
.kp-ba-replacement-slider {
  position: relative;
  margin: 14px 0 18px;
}
.kp-ba-replacement-grid {
  display: grid;
  /* Auto-fit: works for 2, 3, 4 or more images. Min track width 200 px
     so the row collapses cleanly on narrow viewports. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.kp-ba-replacement-card { margin: 0; }
/* When the visual-reference section only has ONE image (no slider, no
   peers in the grid), cap its width and centre it so a tall illustration
   doesn't dominate the entire desktop column. Mobile slider mode below
   overrides position+max-width back to fill, so this only affects the
   tablet+ static layout. */
.kp-ba-replacement-card:only-child {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.kp-ba-replacement-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 32px -18px rgba(14, 30, 53, 0.22);
}
/* Arrows — hidden on desktop because the grid already shows every image
   at once. Mobile media query below reveals + positions them. */
.kp-ba-replacement-arrow { display: none; }

@media (max-width: 640px) {
  /* Stack-as-slider: instead of CSS `grid 1fr`, render ONE image at a
     time and switch via .is-active. JS rotates active every 3 s. We use
     absolute stacking so the section height stays stable as slides
     change (the .kp-ba-replacement-slider gets its height from the
     currently-active card). */
  .kp-ba-replacement-grid {
    display: block;
    position: relative;
    grid-template-columns: none;
    gap: 0;
    overflow: hidden;
    border-radius: 14px;
  }
  .kp-ba-replacement-card {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms ease;
    pointer-events: none;
  }
  .kp-ba-replacement-card.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .kp-ba-replacement-card img {
    border-radius: 14px;
  }
  /* Show + style the prev/next arrows — same frosted-glass treatment as
     .kp-home-arrow on /home/ so the visual language stays consistent. */
  .kp-ba-replacement-arrow {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(14, 30, 53, 0.55);
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 6px 18px -6px rgba(14, 30, 53, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background 0.18s ease, transform 0.18s ease;
  }
  .kp-ba-replacement-arrow:hover  { background: rgba(14, 30, 53, 0.75); }
  .kp-ba-replacement-arrow:active { transform: translateY(-50%) scale(0.94); }
  .kp-ba-replacement-arrow svg    { width: 20px; height: 20px; display: block; }
  .kp-ba-replacement-arrow-prev   { left: 10px; }
  .kp-ba-replacement-arrow-next   { right: 10px; }
  .kp-ba-replacement-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }
}