.elementor-108 .elementor-element.elementor-element-1ab1e0f{--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-380faed *//* ==========================================================================
   Dr. Shrinath Viswanath — Spine Procedures Index
   File: spine-procedures.css
   Prefix: pi-
   Tokens live in index.css :root — this file is component-only.
   ========================================================================== */

/* ==========================================================================
   PAGE WRAPPER
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Lato:wght@300;400;500;700&display=swap');

/* ==========================================================================
   DESIGN SYSTEM TOKENS  (Global Baseline — Desktop 1280px+)
   Single source of truth for colors, type, spacing, radius and shadow.
   All page-level components consume these tokens via var() rather than
   re-declaring their own copies.
   ========================================================================== */

/* Desktop (≥1280px) uses the :root baseline — no overrides needed */

/* ==========================================================================
   GLOBAL BASE DEFAULTS
   Applied document-wide.
   ========================================================================== */

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

body {
  font-family:  var(--f-body);
  color:        var(--text);
  font-size:    var(--fs-body);
  font-weight:  var(--fw-medium);
  line-height:  var(--lh-body);
  background:   var(--off-white);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* ── Heading hierarchy — font, size, weight, line-height ── */
h1, .h1 { font-family: var(--f-title); font-size: var(--fs-h1); font-weight: var(--fw-bold);     line-height: var(--lh-headings); margin: 0; }
h2, .h2 { font-family: var(--f-title); font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-headings); margin: 0; }
h3, .h3 { font-family: var(--f-sub);   font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-headings); margin: 0; }
h4, .h4 { font-family: var(--f-body);  font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-headings); margin: 0; }

p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ==========================================================================
   SITE COMPONENT TYPE ALIASES
   Shared typographic roles mapped to design tokens.
   ========================================================================== */

.main-nav__link {
  font-size:   var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
}

.btn,
.home-btn-override-fix {
  font-size:      var(--fs-small);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-ui);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.card-title {
  font-size:   var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.label-eyebrow {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.breadcrumb__link {
  font-size:   var(--fs-small);
  font-weight: var(--fw-medium);
}

.tldr-summary {
  font-size:   var(--fs-body-large);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.detail-body-text {
  font-size:   var(--fs-body);
  font-weight: var(--fw-medium);
}

.pill-badge {
  font-size:   var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
}

.footer__brand-name {
  font-size:   var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.footer__title {
  font-size:   var(--fs-small);
  font-weight: var(--fw-bold);
}

.footer__link,
.footer__contact-text {
  font-size:   var(--fs-small);
  font-weight: var(--fw-medium);
}

.pi-wrap {
  --off:       var(--off-white);
  --radius:    var(--radius-sm);
  --shadow:    0 4px 24px  rgba(15, 76, 129, 0.08);
  --shadow-lg: 0 12px 48px rgba(15, 76, 129, 0.14);

  position:   relative !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  background: var(--off) !important;
  font-family: var(--f-body) !important;
  color:       var(--text) !important;
  -webkit-font-smoothing: antialiased !important;
}

.pi-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;
  pointer-events:   none !important;
  z-index:          0 !important;
}

.pi-container {
  max-width:      var(--container) !important;
  margin:         0 auto !important;
  padding-inline: clamp(16px, 4vw, 60px) !important;
}

.pi-main { position: relative !important; z-index: 1 !important; }

/* ==========================================================================
   SCROLL-REVEAL
   ========================================================================== */

.pi-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;
}
.pi-revealed { opacity: 1 !important; transform: translateY(0) !important; }

/* ==========================================================================
   HERO
   ========================================================================== */

.pi-hero {
  background:  linear-gradient(135deg, var(--c2) 0%, #0a3a65 100%) !important;
  position:    relative !important;
  overflow:    hidden !important;
  min-height:  56vh !important;
  display:     flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top:    64px !important;
  padding-bottom: 64px !important;
}

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

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

.pi-hero-inner {
  position:  relative !important;
  z-index:   2 !important;
  padding:   0px clamp(16px, 4vw, 60px) 64px !important;
  width:     100% !important;
  max-width: var(--container) !important;
  margin:    0 auto !important;
}

/* Breadcrumb */
.pi-breadcrumb { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 22px !important; flex-wrap: wrap !important; }
.pi-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; }
.pi-bc-link:hover { color: rgba(255, 255, 255, 0.85) !important; }
.pi-bc-sep     { color: rgba(255, 255, 255, 0.3) !important; font-size: var(--fs-xs) !important; }
.pi-bc-current { font-size: var(--fs-small) !important; color: rgba(255, 255, 255, 0.85) !important; }

/* Eyebrow */
.pi-eyebrow      { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 16px !important; }
.pi-eyebrow-line { display: inline-block !important; width: 32px !important; height: 1.5px !important; background: rgba(255, 255, 255, 0.4) !important; flex-shrink: 0 !important; }
.pi-eyebrow-text { font-size: var( --fs) !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.65) !important; font-weight: var(--fw-bold) !important; }

/* H1 */
.pi-h1 { font-family: var(--f-title) !important; font-size: var(--fs-display) !important; font-weight: var(--fw-bold) !important; line-height: var(--lh-ui) !important; color: #fff !important; margin-bottom: 18px !important; letter-spacing: -0.01em !important; }
.pi-h1 em { font-style: italic !important; font-family: var(--f-sub) !important; color: var(--c5) !important; font-weight: var(--fw-semibold) !important; }
.pi-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; }

.pi-hero-procedures-index {
  background-color:    #0f4c81 !important;
  background-image:    url('https://drshrinathspine.com/wp-content/uploads/2026/08/Procedures.webp') !important;
  background-position: right 5% center !important;
  background-size:     30% auto !important;
  background-repeat:   no-repeat !important;
}

/* ==========================================================================
   INTRO BAND
   ========================================================================== */

.pi-intro { background: var(--white) !important; padding: 40px 0 !important; border-bottom: 1px solid rgba(15, 76, 129, 0.07) !important; }
.pi-intro-text { font-size: var(--fs-body-large) !important; color: var(--body) !important; line-height: var(--lh-body) !important; font-weight: var(--fw-medium) !important;width: 100% !important;
  max-width: 100% !important;  margin: 0 !important; }
.pi-intro-text + .pi-intro-text { margin-top: 12px !important; }

/* ==========================================================================
   PROCEDURE LIST
   ========================================================================== */

.pi-list-wrap { background: var(--white) !important; padding: 56px 0 100px !important; }

.pi-category { margin-bottom: 64px !important; }
.pi-category:last-child { margin-bottom: 0 !important; }

/* ── Category header: title + description stacked, tight gap ── */
.pi-category-header {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    flex-start !important;
  gap:            -1px !important;
  margin-bottom:  4px !important;
  padding-bottom: 6px !important;
  border-bottom:  2px solid rgba(15, 76, 129, 0.1) !important;
}

.pi-category-title  { font-family: var(--f-title) !important; font-size: var(--fs-h2) !important; font-weight: var(--fw-semibold) !important; color: var(--c2) !important; letter-spacing: 0.04em !important; }
.pi-category-desc   { font-size: var(--fs-h4) !important; color:#3076a7  !important; font-weight: var(--fw-medium) !important; font-style: italic !important; font-family: var(--f-sub) !important; }
.pi-category-diagnostic .pi-category-header { border-bottom-color: rgba(200, 169, 110, 0.3) !important; }

.pi-cards { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

.pi-card {
  background:     var(--white) !important;
  border:         1px solid rgba(15, 76, 129, 0.09) !important;
  border-radius:  var(--radius) !important;
  padding:        24px 28px !important;
  text-decoration: none !important;
  display:        flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap:            16px !important;
  box-shadow:     var(--shadow) !important;
  transition:     border-color 0.3s, transform 0.3s, box-shadow 0.3s !important;
}
.pi-card:hover { border-color: rgba(15, 76, 129, 0.28) !important; transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }

.pi-card-highlight { border-color: rgba(200, 169, 110, 0.3) !important; background: var(--pale) !important; grid-column: 1 / -1 !important; flex-direction: row !important; align-items: center !important; }
.pi-card-highlight:hover { border-color: rgba(200, 169, 110, 0.6) !important; }

.pi-card-body { display: flex !important; align-items: flex-start !important; gap: 16px !important; }

.pi-card-icon {
  width:          44px !important;
  height:         44px !important;
  flex-shrink:    0 !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;
  transition:     all 0.3s !important;
}
.pi-card:hover .pi-card-icon           { background: var(--c2) !important; color: #fff !important; border-color: var(--c2) !important; }
.pi-card-icon-highlight                 { background: rgba(200, 169, 110, 0.1) !important; border-color: rgba(200, 169, 110, 0.3) !important; color: var(--gold) !important; }
.pi-card-highlight:hover .pi-card-icon  { background: var(--gold) !important; border-color: var(--gold) !important; color: #fff !important; }

.pi-card-content { flex: 1 !important; }
.pi-card-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; line-height: 1.3 !important; display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.pi-card-desc    { font-size: var(--fs-small) !important; color: var(--body) !important; line-height: var(--lh-body) !important; font-weight: var(--fw-medium) !important; margin: 0 !important; }

.pi-new-badge {
  display:        inline-block !important;
  background:     var(--c2) !important;
  color:          #fff !important;
  font-family:    var(--f-body) !important;
  font-size:      var(--fs-xs) !important;
  font-weight:    var(--fw-bold) !important;
  letter-spacing: 0.08em !important;
  padding:        2px 8px !important;
  border-radius:  4px !important;
  vertical-align: middle !important;
}

.pi-card-link {
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            5px !important;
  color:          var(--c3) !important;
  font-size:      var(--fs-xs) !important;
  font-weight:    var(--fw-bold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  flex-shrink:    0 !important;
}
.pi-arrow                   { transition: transform 0.3s !important; }
.pi-card:hover .pi-arrow    { transform: translateX(5px) !important; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */

.pi-cta-band  { background: var(--c2) !important; padding: 80px 0 !important; position: relative !important; overflow: hidden !important; }
.pi-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; }
.pi-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; }
.pi-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; }
.pi-cta-h2 em { font-style: italic !important; color: var(--c5) !important; font-family: var(--f-sub) !important; }
.pi-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; }
.pi-cta-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; min-width: 200px !important; align-items: stretch !important; }

.pi-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; }
.pi-btn-white:hover { background: var(--pale) !important; transform: translateY(-2px) !important; }

.pi-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; }
.pi-btn-wa:hover { background: #1ebe5a !important; transform: translateY(-2px) !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .pi-cards { grid-template-columns: 1fr 1fr !important; }
  .pi-cta-inner { gap: 40px !important; }
  .pi-hero-procedures-index { background-size: 40% auto !important; }
}

@media (max-width: 768px) {
  .pi-hero { padding-top: 36px !important; padding-bottom: 36px !important; min-height: 44vh !important; }
  .pi-hero-inner { padding: 48px 20px !important; }
  .pi-h1 { font-size: var(--fs-h1) !important; }
  .pi-intro { padding: 24px 0 !important; }
  .pi-list-wrap { padding: 40px 0 72px !important; }
  .pi-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pi-card-highlight { flex-direction: column !important; grid-column: 1 !important; }
  .pi-category-header { gap: 4px !important; }
  .pi-cta-band { padding: 56px 0 !important; }
  .pi-cta-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .pi-cta-actions { flex-direction: row !important; flex-wrap: wrap !important; }
  .pi-btn-white,
  .pi-btn-wa { flex: 1 !important; min-width: 140px !important; }
  .pi-hero-procedures-index { background-position: center center !important; background-size: 60% auto !important; }
  .pi-hero-procedures-index .pi-hero-glow { display: none !important; }
}

@media (max-width: 600px) {
  .pi-cta-actions { flex-direction: column !important; }
  .pi-btn-white,
  .pi-btn-wa { width: 100% !important; }
  .pi-card { padding: 18px !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .pi-hero { min-height: unset !important; padding-top: 36px !important; padding-bottom: 36px !important; }
}
/* ==========================================================================
   MOBILE — Hero: stack text above, image below
   ========================================================================== */
@media (max-width: 768px) {
  .pi-hero {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    min-height: unset !important;
  }

  .pi-hero-inner {
    order: 1 !important;
  }

  /* Reserve visible space below the text for the background image */
  .pi-hero::after {
    content: "" !important;
    display: block !important;
    order: 2 !important;
    width: 100% !important;
    min-height: 200px !important;
    flex: 1 1 auto !important;
  }

  .pi-hero-grid,
  .pi-hero-glow {
    z-index: 1 !important;
  }
}

/* Re-apply background image sizing to sit within the bottom-reserved space */
@media (max-width: 768px) {
  .pi-hero-procedures-index {
    background-position: center bottom !important;
    background-size: 70% auto !important;
  }

  .pi-hero-procedures-index .pi-hero-glow { display: none !important; }
}/* End custom CSS */