.elementor-114 .elementor-element.elementor-element-c5afd7b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-2f27d14 *//*
================================================================
DR. SHRINATH VISWANATH — PATIENT INFORMATION PAGE
Prefix: pt-
Sections (in order):
  Wrapper → Grain overlay → Layout utils → Scroll reveal
  → Shared typography → Hero → Intro strip → Journey steps
  → Locations → Surgery section → Recovery timeline
  → Informed consent → FAQ accordion → CTA band → Breakpoints

Tokens (colors, fonts, spacing, weights) are defined globally in
tokens.css / responsive.css (loaded once via the child theme).
This file only contains Patient-Information-page component-level
styles. Every line below has an inline comment explaining what
it does.
================================================================
*/


/* ══════════════════════════════════════
   WRAPPER
   NOTE: this page used to redeclare the entire brand palette,
   type families, font weights, the whole fluid type scale,
   spacing scale, elevation/shape tokens, and the container width
   as local custom properties scoped to .pt-wrap (--c1...--c6,
   --white, --off, --pale, --gold, --text, --body, --muted, --wa,
   --f-title, --f-sub, --f-body, --fw-*, --fs-*, --lh-*, --space-*,
   --radius-*, --shadow*, --container). All of that already exists
   as global tokens, so the local copies have been removed —
   .pt-wrap now just consumes the global tokens via var(). The one
   genuinely page-specific value, the narrower 1200px container
   (global --container is 1280px), is kept as a local override
   below instead of being folded into the global token.
══════════════════════════════════════ */
.pt-wrap {
  --pt-container: 1200px;              /* page-specific container width, narrower than the global 1280px */
  position: relative !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;       /* prevents horizontal scroll on mobile */
  background: var(--off-white) !important;
  font-family: var(--f-body) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ══════════════════════════════════════
   GRAIN OVERLAY
   Subtle SVG noise texture layered over the page background
   to break up flat colour areas. Purely decorative.
══════════════════════════════════════ */
.pt-bg-grain {
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important;
  opacity: 0.04 !important;            /* very light — barely perceptible */
  pointer-events: none !important;     /* never intercepts clicks */
  z-index: 0 !important;
}

/* ══════════════════════════════════════
   LAYOUT UTILITIES
══════════════════════════════════════ */
/* Centred content column with fluid side padding, using the page's local container width */
.pt-container {
  max-width: var(--pt-container) !important;
  margin: 0 auto !important;
  padding-inline: clamp(16px, 4vw, 60px) !important;
}

/* Stacks above the grain overlay */
.pt-main { position: relative !important; z-index: 1 !important; }

/* ══════════════════════════════════════
   SCROLL REVEAL
   Elements start hidden (opacity 0, shifted down 22px).
   JavaScript adds .pt-revealed via IntersectionObserver
   to trigger the fade-up transition.
   Stagger delays are set via --rd custom property.
══════════════════════════════════════ */
.pt-reveal {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition: opacity 0.65s ease calc(var(--rd, 0s)),
              transform 0.65s ease calc(var(--rd, 0s)) !important;
}
.pt-revealed { opacity: 1 !important; transform: translateY(0) !important; }

/* Delay helper classes — apply alongside .pt-reveal */
.delay-05  { --rd: 0.05s; }
.delay-1   { --rd: 0.1s; }
.delay-15  { --rd: 0.15s; }
.delay-2   { --rd: 0.2s; }
.delay-25  { --rd: 0.25s; }
.delay-3   { --rd: 0.3s; }
.delay-35  { --rd: 0.35s; }
.delay-8   { --rd: 0.08s; }
.delay-11  { --rd: 0.11s; }

/* ══════════════════════════════════════
   SHARED TYPOGRAPHY
   Reusable heading + body styles used across multiple sections.
══════════════════════════════════════ */

/* Section heading — navy title font, fluid size */
.pt-section-h2 {
  font-family: var(--f-title) !important;
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-headings) !important;
  color: var(--c2) !important;
  margin-bottom: 20px !important;
}
/* Italic em inside section heading uses sub font + mid-blue */
.pt-section-h2 em {
  font-style: italic !important;
  color: var(--c3) !important;
  font-family: var(--f-sub) !important;
  font-weight: var(--fw-semibold) !important;
}
/* White variant for dark (navy) section backgrounds */
.pt-h2-white { color: #fff !important; }
.pt-h2-white em { color: var(--c5) !important; }

/* Standard body paragraph */
.pt-body-text {
  font-size: var(--fs-body) !important;
  color: var(--body) !important;
  line-height: var(--lh-body) !important;
  font-weight: var(--fw-medium) !important;
  margin-bottom: 16px !important;
}

/* ── Eyebrow label — small all-caps line above a heading ── */
.pt-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.pt-eyebrow-line {
  display: inline-block !important;
  width: 32px !important;
  height: 1.5px !important;
  background: rgba(255, 255, 255, 0.4) !important; /* light version (on dark bg) */
  flex-shrink: 0 !important;
}
.pt-eyebrow-text {
  font-size: var(--fs-small) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important; /* light version */
  font-weight: var(--fw-bold) !important;
}
/* Dark variant — used on white/off-white backgrounds */
.pt-eyebrow-dark .pt-eyebrow-line,
.pt-eyebrow-line-dark { background: var(--c4) !important; }
.pt-eyebrow-dark .pt-eyebrow-text,
.pt-eyebrow-text-dark { color: var(--c3) !important; }

/* ══════════════════════════════════════
   HERO
   Full-bleed navy gradient banner. Sits at the top of the page,
   text anchored to the bottom via flex + align-items: flex-end.
══════════════════════════════════════ */
.pt-hero {
  background: linear-gradient(135deg, var(--c2) 0%, #0a3a65 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 52vh !important;
  display: flex !important;
  align-items: flex-end !important;   /* text sits at the bottom of the hero */
  padding-top: 80px !important;       /* space for the site header */
}

/* Architectural grid lines — subtle white lines at 64px intervals */
.pt-hero-grid {
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  pointer-events: none !important;
}

/* Radial light bloom — bottom-right decorative glow */
.pt-hero-glow {
  position: absolute !important;
  right: -80px !important;
  bottom: -80px !important;
  width: 480px !important;
  height: 480px !important;
  background: radial-gradient(circle, rgba(144, 202, 238, 0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

/* Inner content wrapper — max-width + padding, uses the local container width */
.pt-hero-inner {
  position: relative !important;
  z-index: 2 !important;                           /* above grid + glow layers */
  padding: 80px clamp(16px, 4vw, 60px) 64px !important;
  width: 100% !important;
  max-width: var(--pt-container) !important;
  margin: 0 auto !important;
}

/* ── Breadcrumb ── */
.pt-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 22px !important;
}
.pt-bc-link {
  font-size: var(--fs-small) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
  font-weight: var(--fw-medium) !important;
  transition: color 0.2s !important;
}
.pt-bc-link:hover { color: rgba(255, 255, 255, 0.85) !important; }
.pt-bc-sep  { color: rgba(255, 255, 255, 0.3) !important; font-size: var(--fs-xs) !important; }
.pt-bc-current { font-size: var(--fs-small) !important; color: rgba(255, 255, 255, 0.85) !important; }

/* ── Page title ── */
.pt-h1 {
  font-family: var(--f-title) !important;
  font-size: var(--fs-display) !important;   /* large fluid display size */
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-ui) !important;      /* tight — 1, no extra leading */
  color: #fff !important;
  margin-bottom: 18px !important;
}
/* Italic sub-font em within the H1 */
.pt-h1 em {
  font-style: italic !important;
  font-family: var(--f-sub) !important;
  color: var(--c5) !important;
  font-weight: var(--fw-semibold) !important;
}

/* Italic sub-heading below the H1 */
.pt-hero-sub {
  font-family: var(--f-sub) !important;
  font-size: var(--fs-h4) !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ══════════════════════════════════════
   INTRO STRIP
   Thin white band immediately below the hero.
   One-liner preamble, max 800px wide for readability.
══════════════════════════════════════ */
.pt-intro {
  background: var(--white) !important;
  padding: 36px 0 !important;
  border-bottom: 1px solid rgba(15, 76, 129, 0.07) !important; /* subtle separator */
}
.pt-intro-text {
  font-size: var(--fs-body) !important;
  color: var(--body) !important;
  line-height: var(--lh-body) !important;
  font-weight: var(--fw-medium) !important;
  max-width: 800px !important;  /* keeps line lengths comfortable */
  margin: 0 !important;
}

/* ══════════════════════════════════════
   JOURNEY STEPS
   Vertical numbered step list with a connecting gradient line
   drawn via ::before pseudo-element on the list container.
   Numbers are 56px circles; hover inverts them to solid navy.
══════════════════════════════════════ */
.pt-journey { background: var(--white) !important; padding: 72px 0 !important; }

.pt-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;           /* spacing handled by pt-step padding-bottom */
  margin-top: 48px !important;
  position: relative !important;
}

/* Vertical connecting line — centred on the step number circles.
   left: 27px = half of 56px circle width, offset from container edge */
.pt-steps::before {
  content: '' !important;
  position: absolute !important;
  left: 27px !important;
  top: 56px !important;     /* starts below first circle */
  bottom: 56px !important;  /* ends above last circle */
  width: 1px !important;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(15, 76, 129, 0.15),
    rgba(15, 76, 129, 0.15),
    transparent
  ) !important;
}

.pt-step {
  display: flex !important;
  gap: 28px !important;
  align-items: flex-start !important;
  padding-bottom: 40px !important;  /* space between steps */
}
.pt-step:last-child { padding-bottom: 0 !important; }

/* Step number circle */
.pt-step-num {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(15, 76, 129, 0.2) !important;
  background: var(--white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--f-title) !important;
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--c2) !important;
  flex-shrink: 0 !important;         /* never squashes on narrow viewports */
  z-index: 1 !important;             /* sits above the ::before connecting line */
  position: relative !important;
  box-shadow: var(--shadow) !important;
  transition: all 0.3s !important;
}
/* Hover: circle fills solid navy, number turns white */
.pt-step:hover .pt-step-num {
  background: var(--c2) !important;
  color: #fff !important;
  border-color: var(--c2) !important;
}

.pt-step-content { padding-top: 10px !important; flex: 1 !important; }
.pt-step-title {
  font-family: var(--f-sub) !important;
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--c2) !important;
  margin-bottom: 8px !important;
}
.pt-step-text {
  font-size: var(--fs-small) !important;
  color: var(--body) !important;
  line-height: var(--lh-body) !important;
  font-weight: var(--fw-medium) !important;
  max-width: 680px !important;  /* prevents very long lines on wide screens */
}

/* ══════════════════════════════════════
   LOCATIONS
   2-column card grid on off-white background.
   Cards lift on hover. Primary location gets a navy top border.
   Icon box inverts (pale → navy) on hover.
══════════════════════════════════════ */
.pt-locations { background: var(--off-white) !important; padding: 72px 0 !important; }

.pt-locations-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-top: 48px !important;
}

.pt-location-card {
  background: var(--white) !important;
  border: 1px solid rgba(15, 76, 129, 0.09) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
  position: relative !important;
  transition: all 0.3s !important;
  box-shadow: var(--shadow) !important;
}
.pt-location-card:hover {
  border-color: rgba(15, 76, 129, 0.22) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;  /* deeper shadow on hover */
}

/* Adds a 3px navy top border to mark the primary / main location */
.pt-location-primary { border-top: 3px solid var(--c2) !important; }

/* Solid navy pill badge ("Main Clinic", "Visiting") */
.pt-location-badge {
  display: inline-block !important;
  background: var(--c2) !important;
  color: #fff !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 14px !important;
}

/* 44×44 icon box — matches the shared icon-box size convention */
.pt-location-icon {
  width: 44px !important;
  height: 44px !important;
  background: var(--pale) !important;
  border: 1px solid rgba(15, 76, 129, 0.12) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--c2) !important;
  margin-bottom: 14px !important;
  transition: all 0.3s !important;
}
/* Hover: icon box fills navy, icon becomes white */
.pt-location-card:hover .pt-location-icon { background: var(--c2) !important; color: #fff !important; }

.pt-location-name {
  font-family: var(--f-sub) !important;
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--c2) !important;
  margin-bottom: 8px !important;
}
.pt-location-addr {
  font-size: var(--fs-small) !important;
  color: var(--body) !important;
  line-height: var(--lh-body) !important;
  font-weight: var(--fw-medium) !important;
  margin-bottom: 6px !important;
}
/* Hours displayed in mid-blue to draw attention */
.pt-location-hours {
  font-size: var(--fs-small) !important;
  color: var(--c3) !important;
  font-weight: var(--fw-medium) !important;
  margin-bottom: 6px !important;
}
/* Small italic footnote ("By appointment only", etc.) */
.pt-location-note {
  font-size: var(--fs-xs) !important;
  color: var(--muted) !important;
  font-weight: var(--fw-medium) !important;
  font-style: italic !important;
}

/* ══════════════════════════════════════
   SURGERY SECTION
   Dark navy background with frosted-glass cards.
   Icon boxes use a semi-transparent white background so they
   remain visible without hard edges on the dark surface.
══════════════════════════════════════ */
.pt-surgery-section {
  background: var(--c2) !important;
  padding: 72px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Decorative radial glow — top-right corner */
.pt-surgery-glow {
  position: absolute !important;
  right: -100px !important;
  top: -100px !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

/* 2-column card grid */
.pt-surgery-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;             /* tighter gap on dark bg looks more cohesive */
  margin-top: 48px !important;
}

/* Frosted-glass card — semi-transparent white fill */
.pt-surgery-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
  transition: all 0.3s !important;
}
.pt-surgery-card:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Icon box on dark background — uses white alpha fill + soft blue icon */
.pt-surgery-icon {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255, 255, 255, 0.1) !important;  /* frosted look */
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--c5) !important;   /* soft blue — legible on navy bg */
  margin-bottom: 14px !important;
}
.pt-surgery-title {
  font-family: var(--f-sub) !important;
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-semibold) !important;
  color: #fff !important;
  margin-bottom: 10px !important;
}
.pt-surgery-text {
  font-size: var(--fs-small) !important;
  color: rgba(255, 255, 255, 0.7) !important; /* slightly dimmed for hierarchy */
  line-height: var(--lh-body) !important;
  font-weight: var(--fw-medium) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════
   RECOVERY TIMELINE
   Vertical dot-and-line timeline. Each item has:
     marker column (dot + connecting line)
     content column (period pill + title + body)
   The connecting line is hidden on the last item.
══════════════════════════════════════ */
.pt-recovery { background: var(--white) !important; padding: 72px 0 !important; }

.pt-recovery-timeline {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;          /* spacing via pt-recovery-content padding-bottom */
  margin-top: 48px !important;
}

.pt-recovery-item { display: flex !important; gap: 24px !important; align-items: flex-start !important; }

/* Marker column — dot centred above the connecting line */
.pt-recovery-marker {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Filled navy dot with pale border + outer ring shadow */
.pt-recovery-dot {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--c2) !important;
  border: 3px solid var(--pale) !important;     /* pale halo */
  box-shadow: 0 0 0 2px var(--c2) !important;  /* outer navy ring */
  flex-shrink: 0 !important;
  margin-top: 4px !important;
}

/* Vertical line segment between dots */
.pt-recovery-line {
  width: 1px !important;
  flex: 1 !important;
  min-height: 60px !important;
  background: rgba(15, 76, 129, 0.15) !important;
  margin: 8px 0 !important;
}
/* Remove line below the final timeline item */
.pt-recovery-item:last-child .pt-recovery-line { display: none !important; }

.pt-recovery-content { padding-bottom: 40px !important; flex: 1 !important; }
.pt-recovery-item:last-child .pt-recovery-content { padding-bottom: 0 !important; }

/* Pill badge — "Day 1", "Week 2–6", etc. */
.pt-recovery-period {
  display: inline-block !important;
  background: var(--pale) !important;
  border: 1px solid rgba(15, 76, 129, 0.12) !important;
  color: var(--c2) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;  /* pill shape */
  margin-bottom: 8px !important;
}
.pt-recovery-title {
  font-family: var(--f-sub) !important;
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--c2) !important;
  margin-bottom: 8px !important;
}
.pt-recovery-text {
  font-size: var(--fs-small) !important;
  color: var(--body) !important;
  line-height: var(--lh-body) !important;
  font-weight: var(--fw-medium) !important;
  max-width: 640px !important;
}

/* ══════════════════════════════════════
   INFORMED CONSENT
   Two-column layout: left = gold pull-quote, right = body text.
   Collapses to single column on tablet.
══════════════════════════════════════ */
.pt-consent { background: var(--off-white) !important; padding: 72px 0 !important; }

.pt-consent-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 56px !important;
  align-items: center !important;
}

/* Gold left-border quote block */
.pt-pull-quote {
  border-left: 3px solid var(--gold) !important;  /* gold accent line */
  padding: 20px 24px !important;
  background: var(--white) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important; /* rounded right corners only */
  box-shadow: var(--shadow) !important;
}
.pt-pull-text {
  font-family: var(--f-sub) !important;
  font-size: var(--fs-h4) !important;
  font-style: italic !important;
  color: var(--c2) !important;
  line-height: var(--lh-body) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════
   FAQ ACCORDION
   Pure CSS height-collapse accordion. State is toggled by
   JavaScript adding/removing .pt-faq-open on .pt-faq-item.
   The "+" icon rotates 45° to become "×" when open.
══════════════════════════════════════ */
.pt-faq { background: var(--white) !important; padding: 72px 0 !important; }

.pt-faq-list {
  margin-top: 48px !important;
  border-top: 1px solid rgba(15, 76, 129, 0.08) !important;  /* top rule before first item */
}
/* Each FAQ item gets a bottom border rule */
.pt-faq-item { border-bottom: 1px solid rgba(15, 76, 129, 0.08) !important; }

/* Question row — full-width button, flex layout */
.pt-faq-q {
  width: 100% !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  padding: 20px 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  cursor: pointer !important;
  font-family: var(--f-sub) !important;
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--c2) !important;
  line-height: 1.4 !important;
  transition: color 0.2s !important;
}
.pt-faq-q:hover { color: var(--c3) !important; }

/* "+" icon — accent blue, rotates 45° → "×" on open */
.pt-faq-icon {
  font-size: var(--fs-h3) !important;     /* large enough to tap on mobile */
  color: var(--c4) !important;
  flex-shrink: 0 !important;
  font-weight: var(--fw-medium) !important;
  transition: transform 0.3s !important;
  line-height: var(--lh-ui) !important;
}
.pt-faq-open .pt-faq-icon { transform: rotate(45deg) !important; }

/* Answer panel — collapsed by default (max-height: 0) */
.pt-faq-a {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s ease, padding 0.4s ease !important;
  padding: 0 !important;
}
/* Open state — expand to a generous max-height */
.pt-faq-open .pt-faq-a { max-height: 400px !important; padding: 0 0 20px !important; }

.pt-faq-a p {
  font-size: var(--fs-small) !important;
  color: var(--body) !important;
  line-height: var(--lh-body) !important;
  font-weight: var(--fw-medium) !important;
  max-width: 680px !important;  /* comfortable reading width */
  margin: 0 !important;
}

/* ══════════════════════════════════════
   CTA BAND
   Full-width navy band. Two-column: text left, button stack right.
   Decorative radial glow top-right. Collapses on mobile.
══════════════════════════════════════ */
.pt-cta-band {
  background: var(--c2) !important;
  padding: 80px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Decorative glow — same pattern as .pt-surgery-glow */
.pt-cta-glow {
  position: absolute !important;
  right: -100px !important;
  top: -100px !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

/* Text left / button stack right */
.pt-cta-inner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 60px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;  /* above glow */
}

.pt-cta-h2 {
  font-family: var(--f-title) !important;
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-semibold) !important;
  color: #fff !important;
  line-height: var(--lh-headings) !important;
  margin-bottom: 10px !important;
}
/* Italic em uses sub font + soft blue */
.pt-cta-h2 em { font-style: italic !important; color: var(--c5) !important; font-family: var(--f-sub) !important; }

.pt-cta-sub {
  font-size: var(--fs-body) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: var(--fw-medium) !important;
  margin: 0 !important;
}

/* Button column — stretches buttons to equal width */
.pt-cta-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 200px !important;
  align-items: stretch !important;  /* full-width buttons within column */
}

/* Fine-print line below buttons */
.pt-cta-note {
  font-size: var(--fs-xs) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-align: center !important;
}

/* White primary button — for use on dark backgrounds */
.pt-btn-white {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: var(--c2) !important;
  padding: 13px 24px !important;
  border-radius: 8px !important;
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  min-height: 44px !important;  /* WCAG touch target */
}
.pt-btn-white:hover { background: var(--pale) !important; transform: translateY(-2px) !important; }

/* WhatsApp button */
.pt-btn-wa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--wa) !important;
  color: #fff !important;
  padding: 13px 24px !important;
  border-radius: 8px !important;
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-bold) !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  min-height: 44px !important;
}
.pt-btn-wa:hover { background: #1ebe5a !important; transform: translateY(-2px) !important; }

/* ══════════════════════════════════════
   BREAKPOINTS
══════════════════════════════════════ */

/* Laptop — keep 2-col grids but tighten CTA gap */
@media (max-width: 1024px) {
  .pt-locations-grid { grid-template-columns: 1fr 1fr !important; }
  .pt-surgery-grid   { grid-template-columns: 1fr 1fr !important; }
  .pt-consent-grid   { grid-template-columns: 1fr !important; gap: 32px !important; } /* stack pull-quote above text */
  .pt-cta-inner      { gap: 40px !important; }
}

/* Tablet / large mobile */
@media (max-width: 768px) {
  .pt-hero         { padding-top: 64px !important; min-height: 44vh !important; }
  .pt-hero-inner   { padding: 48px 20px 48px !important; }
  .pt-h1           { font-size: var(--fs-h1) !important; }   /* step down from display */
  .pt-intro        { padding: 24px 0 !important; }
  .pt-journey      { padding: 56px 0 !important; }
  .pt-steps::before { display: none !important; }             /* hide connecting line */
  .pt-step         { flex-direction: row !important; }
  .pt-locations    { padding: 56px 0 !important; }
  .pt-locations-grid { grid-template-columns: 1fr !important; }
  .pt-surgery-section { padding: 56px 0 !important; }
  .pt-surgery-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pt-recovery     { padding: 56px 0 !important; }
  .pt-consent      { padding: 56px 0 !important; }
  .pt-faq          { padding: 56px 0 !important; }
  .pt-cta-band     { padding: 56px 0 !important; }
  .pt-cta-inner    { grid-template-columns: 1fr !important; gap: 28px !important; }
  .pt-cta-actions  { flex-direction: row !important; flex-wrap: wrap !important; }
  .pt-btn-white,
  .pt-btn-wa       { flex: 1 !important; min-width: 140px !important; }
}

/* Small mobile */
@media (max-width: 600px) {
  .pt-cta-actions  { flex-direction: column !important; }
  .pt-btn-white,
  .pt-btn-wa       { width: 100% !important; }
  .pt-recovery-item { gap: 16px !important; }  /* tighter gap, narrower screens */
}

/* Tiny screens */
@media (max-width: 375px) {
  .pt-h1 { font-size: var(--fs-h1) !important; }
}/* End custom CSS */