.elementor-106 .elementor-element.elementor-element-e48361e{--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-303756f *//* ==========================================================================
   Dr. Shrinath Viswanath — Spine Conditions Index
   File: spine-conditions.css
   Prefix: ci-
   Tokens live in index.css :root — this file is component-only.
   ========================================================================== */

/* ==========================================================================
   ELEMENTOR RESET
   ========================================================================== */
@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);
}

.elementor-section,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget-container,
.elementor-widget-html,
.e-con,
.e-con-inner {
  padding:    0 !important;
  margin:     0 !important;
  width:      100% !important;
  max-width:  100% !important;
  min-height: unset !important;
  display:    block !important;
}

/* ==========================================================================
   PAGE WRAPPER — .ci-wrap
   ========================================================================== */

.ci-wrap {
  /* --shadow and --radius are inherited unchanged from :root — only
     --shadow-lg needs a local override (0.14 vs the root's 0.15). */
  --shadow-lg: 0 12px 48px rgba(15, 76, 129, 0.14) !important;

  position:   relative !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  background: var(--off-white) !important;
  font-family: var(--f-body) !important;
  color:       var(--text) !important;
  font-size:   var(--fs-body-large) !important;
  font-weight: var(--fw-medium) !important;
}

.ci-bg-grain {
  position:         fixed !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;
}

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

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

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

.ci-reveal {
  opacity:   0 !important;
  transform: translateY(24px) !important;
  transition: opacity   0.65s ease var(--rd, 0s),
              transform 0.65s ease var(--rd, 0s) !important;
}
.ci-revealed {
  opacity:   1 !important;
  transform: translateY(0) !important;
}

.ci-delay-05 { --rd: 0.05s !important; }
.ci-delay-10 { --rd: 0.10s !important; }
.ci-delay-15 { --rd: 0.15s !important; }

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

.ci-hero {
  background: linear-gradient(135deg, var(--c2) 0%, #0a3a65 100%) !important;
  padding:    80px clamp(16px, 4vw, 60px) 80px !important;
  position:   relative !important;
  overflow:   hidden !important;
  min-height: clamp(520px, 56vh, 680px) !important;
  display:    flex !important;
  align-items: center !important;
  justify-content: center !important;
  width:      100% !important;
}

.ci-hero-grid-bg {
  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;
}

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

.ci-hero-img { display: none !important; }

/* Single, consolidated rule — centered both axes, even top/bottom padding,
   full-width background so the graphic spans the whole hero section. */
.ci-hero-conditions-index {
  background-color:    #0f4c81 !important;
  background-image:    url('https://drshrinathspine.com/wp-content/uploads/2026/08/Conditions.webp') !important;
  background-position: right 80px center !important;
  background-size:     30% auto !important;
  background-repeat:   no-repeat !important;
  padding-top:          64px !important;
  padding-bottom:       64px !important;
 
}

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

.ci-hero-inner > * {
  max-width: 680px !important;
}

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

/* Eyebrow */
.ci-hero-eyebrow {
  display:     flex !important;
  align-items: center !important;
  gap:         12px !important;
  margin-bottom: 18px !important;
}
.ci-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;
}
.ci-eyebrow-text {
  font-family:    var(--f-body) !important;
  font-size:      14px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color:          rgba(255, 255, 255, 0.65) !important;
  font-weight:    var(--fw-bold) !important;
}

/* Hero H1 */
.ci-hero-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:          var(--white) !important;
  margin-bottom:  18px !important;
  letter-spacing: -0.01em !important;
}
.ci-hero-h1 em {
  font-style:  italic !important;
  font-family: var(--f-sub) !important;
  color:       var(--c5) !important;
  font-weight: var(--fw-semibold) !important;
}

.ci-hero-sub {
  font-family: var(--f-sub) !important;
  font-size:   var(--fs-h4) !important;
  font-style:  italic !important;
  color:       rgba(255, 255, 255, 0.75) !important;
  font-weight: var(--fw-medium) !important;
  margin:      0 !important;
}

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

.ci-intro {
  background:    var(--white) !important;
  padding:       40px 0 !important;
  border-bottom: 1px solid rgba(15, 76, 129, 0.07) !important;
}
.ci-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;
  max-width:   100% !important;
  width:       100% !important;
  margin:      0 !important;
}

/* ==========================================================================
   CONDITIONS GRID
   ========================================================================== */

.ci-grid-section {
  background: var(--white) !important;
  padding:    60px 0 100px !important;
}
.ci-grid {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   22px !important;
}

.ci-card {
  background:      var(--white) !important;
  border:          1px solid rgba(15, 76, 129, 0.09) !important;
  border-radius:   var(--radius) !important;
  overflow:        hidden !important;
  text-decoration: none !important;
  display:         flex !important;
  flex-direction:  column !important;
  transition:      border-color 0.3s, transform 0.35s, box-shadow 0.35s !important;
  box-shadow:      var(--shadow) !important;
  cursor:          pointer !important;
}
.ci-card:hover {
  border-color: rgba(15, 76, 129, 0.28) !important;
  transform:    translateY(-6px) !important;
  box-shadow:   var(--shadow-lg) !important;
}

.ci-card-img {
  height:     200px !important;
  position:   relative !important;
  overflow:   hidden !important;
  background: linear-gradient(135deg, var(--pale) 0%, var(--c6) 60%, var(--c5) 100%) !important;
  display:    flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ci-card-img img {
  width:       100% !important;
  height:      100% !important;
  object-fit:  cover !important;
  display:     block !important;
  transition:  transform 0.4s ease !important;
}
.ci-card:hover .ci-card-img img { transform: scale(1.04) !important; }

.ci-card-img-overlay {
  position:   absolute !important;
  bottom:     0 !important;
  left:       0 !important;
  right:      0 !important;
  height:     70px !important;
  background: linear-gradient(to top, var(--white), transparent) !important;
  pointer-events: none !important;
}

.ci-card-body {
  padding:        22px 26px 28px !important;
  display:        flex !important;
  flex-direction: column !important;
  flex:           1 !important;
}
.ci-card-title {
  font-family:   var(--f-sub) !important;
  font-size:     var(--fs-h4) !important;
  font-weight:   var(--fw-bold) !important;
  color:         var(--c2) !important;
  margin-bottom: 10px !important;
  line-height:   1.3 !important;
}
.ci-card-aka {
  font-family: var(--f-body) !important;
  font-size:   var(--fs-small) !important;
  color:       var(--muted) !important;
  font-weight: var(--fw-medium) !important;
}
.ci-card-desc {
  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;
  flex:          1 !important;
}

.ci-card-link {
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            5px !important;
  color:          var(--c3) !important;
  font-size:      var(--fs-small) !important;
  font-weight:    var(--fw-bold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-top:     auto !important;
  text-decoration: none !important;
}
.ci-card-arrow                  { transition: transform 0.3s !important; }
.ci-card:hover .ci-card-arrow   { transform: translateX(5px) !important; }

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

.ci-cta-band {
  background: var(--c2) !important;
  padding:    80px 0 !important;
  position:   relative !important;
  overflow:   hidden !important;
}

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

.ci-cta-inner {
  display:               grid !important;
  grid-template-columns: 1fr auto !important;
  gap:                   60px !important;
  align-items:           center !important;
}
.ci-cta-h2 {
  font-family:   var(--f-title) !important;
  font-size:     var(--fs-h2) !important;
  font-weight:   var(--fw-semibold) !important;
  color:         var(--white) !important;
  line-height:   var(--lh-headings) !important;
  margin-bottom: 10px !important;
}
.ci-cta-h2 em {
  font-style:  italic !important;
  color:       var(--c5) !important;
  font-family: var(--f-sub) !important;
}
.ci-cta-sub {
  font-size:   var(--fs-body-large) !important;
  color:       rgba(255, 255, 255, 0.8) !important;
  font-weight: var(--fw-medium) !important;
  margin:      0 !important;
}

.ci-cta-actions {
  display:        flex !important;
  flex-direction: column !important;
  gap:            10px !important;
  align-items:    stretch !important;
  flex-shrink:    0 !important;
  min-width:      200px !important;
}

.ci-btn-white {
  display:        inline-flex !important;
  align-items:    center !important;
  justify-content: center !important;
  background:     var(--white) !important;
  color:          var(--c2) !important;
  padding:        13px 24px !important;
  border-radius:  var(--radius) !important;
  font-family:    var(--f-body) !important;
  font-size:      var(--fs-small) !important;
  font-weight:    var(--fw-bold) !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition:     all 0.3s !important;
  min-height:     44px !important;
}
.ci-btn-white:hover { background: var(--pale) !important; transform: translateY(-2px) !important; }

.ci-btn-wa {
  display:        inline-flex !important;
  align-items:    center !important;
  justify-content: center !important;
  gap:            8px !important;
  background:     var(--wa) !important;
  color:          var(--white) !important;
  padding:        13px 24px !important;
  border-radius:  var(--radius) !important;
  font-family:    var(--f-body) !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;
}
.ci-btn-wa:hover { background: #1ebe5a !important; transform: translateY(-2px) !important; }

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

@media (max-width: 1024px) {
  .ci-hero { padding: 64px clamp(16px, 4vw, 40px) 64px !important; }
  .ci-hero-conditions-index { background-size: 100% auto !important; padding-top: 48px !important; padding-bottom: 48px !important; }
  .ci-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ci-cta-inner { gap: 40px !important; }
}

@media (max-width: 768px) {
  .ci-hero { padding: 48px 24px 48px !important; min-height: 44vh !important; align-items: center !important; }
  .ci-hero-h1 { font-size: var(--fs-h1) !important; }
  .ci-hero-conditions-index { background-size: 100% auto !important; padding-top: 36px !important; padding-bottom: 36px !important; }
  .ci-intro { padding: 28px 0 !important; }
  .ci-grid-section { padding: 40px 0 72px !important; }
  .ci-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .ci-card-img { height: 160px !important; }
  .ci-cta-band { padding: 60px 0 !important; }
  .ci-cta-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ci-cta-actions { flex-direction: row !important; flex-wrap: wrap !important; }
  .ci-btn-white,
  .ci-btn-wa { flex: 1 !important; min-width: 140px !important; }
}

@media (max-width: 600px) {
  .ci-hero { padding-top: 40px !important; padding-bottom: 40px !important; }
  .ci-hero-conditions-index { background-size: 100% auto !important; padding-top: 28px !important; padding-bottom: 28px !important; }
  .ci-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ci-card-img { height: 180px !important; }
  .ci-cta-actions { flex-direction: column !important; }
  .ci-btn-white,
  .ci-btn-wa { width: 100% !important; }
}

@media (max-width: 375px) {
  .ci-hero { padding: 32px 16px 32px !important; }
  .ci-hero-h1 { font-size: var(--fs-h1) !important; }
}
/* ==========================================================================
   MOBILE — Hero: stack text above, image below
   ========================================================================== */
@media (max-width: 768px) {
  .ci-hero {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    min-height: unset !important;
  }

  .ci-hero-inner {
    order: 1 !important;
    max-width: 100% !important;
  }

  .ci-hero-inner > * {
    max-width: 100% !important;
  }

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

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

/* Re-apply background image sizing to sit within the bottom-reserved space */
@media (max-width: 768px) {
  .ci-hero-conditions-index {
    background-position: center bottom !important;
    background-size: 60% auto !important;
    padding-top: 36px !important;
    padding-bottom: 0 !important;
  }
}/* End custom CSS */