.elementor-110 .elementor-element.elementor-element-b23c441{--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-c163fdb *//* ==========================================================================
   Dr. Shrinath Viswanath — Orthopedic Care
   File: orthopedic.css
   Prefix: oc-
   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-small);
  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);
}

.oc-wrap {
  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;
}

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

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

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

.reveal {
  opacity:   0;
  transform: translateY(22px);
  transition: opacity   0.65s ease calc(var(--rd, 0s)),
              transform 0.65s ease calc(var(--rd, 0s));
}
.revealed {
  opacity:   1;
  transform: translateY(0);
}

/* ==========================================================================
   SHARED SECTION ELEMENTS
   ========================================================================== */

.eyebrow {
  display:     flex !important;
  align-items: center !important;
  gap:         12px !important;
  margin-bottom: 16px !important;
}
.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;
}
.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;
  font-weight:    var(--fw-bold) !important;
}
.eyebrow-dark .eyebrow-line { background: var(--c4); }
.eyebrow-dark .eyebrow-text { color: var(--c3); }

.section-h2 {
  font-family:   var(--f-title);
  font-size:     var(--fs-h2);
  font-weight:   var(--fw-bold);
  line-height:   var(--lh-headings);
  color:         var(--c2);
  margin-bottom: 20px;
}
.section-h2 em {
  font-style:  italic;
  color:       var(--c3);
  font-family: var(--f-sub);
  font-weight: var(--fw-semibold);
}
.h2-white     { color: #fff; }
.h2-white em  { color: var(--c5); }

/* Foundation intro title — force exactly two lines regardless of container width */
.oc-foundation .section-h2 .h2-line {
  display: block;
}

/* Conditions section title — larger display size */
.oc-conditions .section-h2 {
  font-size: clamp(1.875rem, 3.2vw + 1rem, 3.25rem);
}

.body-text {
  font-size:     var(--fs-body);
  color:         var(--body);
  line-height:   var(--lh-body);
  font-weight:   var(--fw-medium);
  margin-bottom: 16px;
}

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

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

.oc-hero {
  background-color: #0a2f52 !important;
  position:         relative !important;
  overflow:         hidden !important;
  min-height:       clamp(520px, 56vh, 680px) !important;
  display:          flex !important;
  align-items:      flex-end !important;
  padding-top:      80px !important;
  isolation:        isolate !important;
}

.hero-grid-bg {
  position:         absolute !important;
  inset:            0 !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size:  64px 64px !important;
  pointer-events:   none !important;
  z-index:          1 !important;
}

.hero-glow {
  position:   absolute !important;
  inset:      0 !important;
  background: none !important;
  z-index:    1 !important;
}

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

.hero-h1 {
  font-family:    var(--f-title) !important;
  font-size:      var(--fs-display) !important;
  font-weight:    var(--fw-bold) !important;
  line-height:    1.05 !important;
  color:          #fff !important;
  margin-bottom:  16px !important;
  letter-spacing: -0.01em !important;
}
.hero-h1 em {
  display:     block !important;
  font-style:  italic !important;
  font-family: var(--f-sub) !important;
  color:       var(--c5) !important;
  font-weight: var(--fw-semibold) !important;
}

.hero-sub {
  font-family: var(--f-sub) !important;
  font-size:   var(--fs-h4) !important;
  font-style:  italic !important;
  color:       rgba(255, 255, 255, 0.7) !important;
  max-width:   640px !important;
  line-height: var(--lh-body) !important;
}

.oc-hero-orthopedics {
  background-color: #0f4c81 !important;
  align-items:      flex-start !important;
}

/* ==========================================================================
   FOUNDATION INTRO
   ========================================================================== */

.oc-foundation { background: var(--white); padding: 72px 0; }

.foundation-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   64px;
  align-items:           center;
}

.foundation-visual { position: relative; }

.foundation-img-wrap {
  aspect-ratio: 4/3;
  background:   linear-gradient(135deg, var(--pale) 0%, var(--c6) 60%, var(--c5) 100%);
  border-radius: var(--radius);
  overflow:     hidden;
  box-shadow:   var(--oc-shadow-lg);
}
.foundation-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.foundation-stat-card {
  position:   absolute;
  bottom:     -24px;
  right:      -24px;
  background: var(--white);
  border:     1px solid rgba(15, 76, 129, 0.12);
  border-radius: var(--radius);
  padding:    20px 24px;
  box-shadow: var(--oc-shadow-lg);
  min-width:  200px;
}
.foundation-stat-label {
  font-size:      var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--c3);
  font-weight:    var(--fw-bold);
  margin-bottom:  8px;
}
.foundation-stat-row { display: flex; gap: 24px; }
.foundation-stat     { display: flex; flex-direction: column; gap: 2px; }
.foundation-stat-num {
  font-family: var(--f-title);
  font-size:   var(--fs-h3);
  font-weight: var(--fw-bold);
  color:       var(--c2);
  line-height: var(--lh-ui);
}
.foundation-stat-desc { font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-medium); }

/* ==========================================================================
   CONNECTION SECTION
   ========================================================================== */

.oc-connection { background: var(--off); padding: 72px 0; }

.connection-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   48px;
  margin-top:            48px;
}

.connection-card {
  background:    var(--white);
  border:        1px solid rgba(15, 76, 129, 0.08);
  border-radius: var(--radius);
  padding:       32px;
  transition:    all 0.3s;
}
.connection-card:hover { border-color: rgba(15, 76, 129, 0.22); transform: translateY(-4px); box-shadow: var(--oc-shadow-lg); }

.connection-icon {
  width:          48px;
  height:         48px;
  background:     var(--pale);
  border:         1px solid rgba(15, 76, 129, 0.12);
  border-radius:  8px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  color:          var(--c2);
  margin-bottom:  16px;
  transition:     all 0.3s;
}
.connection-card:hover .connection-icon { background: var(--c2); color: #fff; border-color: var(--c2); }

.connection-title {
  font-family:   var(--f-sub);
  font-size:     var(--fs-h4);
  font-weight:   var(--fw-semibold);
  color:         var(--c2);
  margin-bottom: 10px;
}
.connection-text { font-size: var(--fs-small); color: var(--body); line-height: var(--lh-body); font-weight: var(--fw-medium); }

/* ==========================================================================
   CONDITIONS MANAGED
   ========================================================================== */

.oc-conditions { background: var(--white); padding: 72px 0; }

.conditions-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   14px;
  margin-top:            48px;
}

.condition-item {
  background:    var(--off);
  border:        1px solid rgba(15, 76, 129, 0.08);
  border-radius: var(--radius);
  padding:       22px 24px;
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  transition:    all 0.3s;
}
.condition-item:hover { border-color: rgba(15, 76, 129, 0.2); background: var(--pale); }

.condition-dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   var(--c4);
  flex-shrink:  0;
  margin-top:   6px;
}

.condition-item-title {
  font-family:   var(--f-sub);
  font-size:     var(--fs-h4);
  font-weight:   var(--fw-semibold);
  color:         var(--c2);
  margin-bottom: 4px;
}
.condition-item-desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; font-weight: var(--fw-medium); }

.oc-note {
  background:    var(--pale);
  border-left:   3px solid var(--c4);
  padding:       16px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top:    28px;
}
.oc-note-text { font-family: var(--f-sub); font-size: var(--fs-small); font-style: italic; color: var(--muted); }

/* ==========================================================================
   GOAL SECTION
   ========================================================================== */

.oc-goal { background: var(--c2); padding: 72px 0; position: relative; overflow: hidden; }

.goal-glow {
  position:   absolute;
  right:      -100px;
  top:        -100px;
  width:      400px;
  height:     400px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.goal-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   48px;
  align-items:           center;
  margin-top:            48px;
  position:              relative;
  z-index:               1;
}

.goal-metrics { display: flex; flex-direction: column; gap: 14px; }

.goal-metric {
  background: rgba(255, 255, 255, 0.07);
  border:     1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding:    22px 26px;
  display:    flex;
  align-items: center;
  gap:        20px;
  transition: all 0.3s;
}
.goal-metric:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.2); }

.goal-metric-icon {
  width:          44px;
  height:         44px;
  background:     rgba(255, 255, 255, 0.1);
  border-radius:  8px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  color:          var(--c5);
  flex-shrink:    0;
}

.goal-metric-title { font-family: var(--f-sub); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: #fff; margin-bottom: 3px; }
.goal-metric-desc  { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.65); font-weight: var(--fw-medium); }

.goal-pull-quote {
  border-left: 3px solid var(--c5);
  padding:     18px 22px;
  background:  rgba(255, 255, 255, 0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top:  24px;
}
.goal-pull-text {
  font-family: var(--f-sub);
  font-size:   var(--fs-h4);
  font-style:  italic;
  color:       #fff;
  line-height: var(--lh-body);
}

/* ==========================================================================
   EVALUATION PROCESS
   Restyled to match the hp-steps pattern: larger circular numerals,
   connective arrows between steps instead of a background line.
   ========================================================================== */

.oc-evaluation { background: var(--off); padding: 72px 0; }

.eval-steps {
  display:      flex;
  align-items:  flex-start;
  gap:          0;
  position:     relative;
  margin-top:   48px;
}

.eval-step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        0 var(--space-4);
  flex:           1;
}

.eval-num {
  width:          72px;
  height:         72px;
  border-radius:  50%;
  border:         1.5px solid rgba(15, 76, 129, 0.2);
  background:     var(--white);
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-family:    var(--f-title);
  font-size:      var(--fs-h3);
  font-weight:    var(--fw-bold);
  color:          var(--c2);
  margin-bottom:  var(--space-4);
  z-index:        1;
  position:       relative;
  transition:     all 0.3s;
  box-shadow:     var(--shadow-sm);
}
.eval-step:hover .eval-num { background: var(--c2); color: #fff; border-color: var(--c2); box-shadow: var(--shadow-lg); }

.eval-step-arrow {
  color:            rgba(15, 76, 129, 0.2);
  font-size:        var(--fs-h3);
  margin-block-start: 26px;
  flex-shrink:      0;
}

.eval-title { font-family: var(--f-sub); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c2); margin-bottom: var(--space-2); }
.eval-desc  { font-size: var(--fs-small); color: var(--muted); line-height: 1.65; font-weight: var(--fw-medium); }

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

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

.cta-glow {
  position:   absolute;
  right:      -100px;
  top:        -100px;
  width:      400px;
  height:     400px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.cta-inner {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   60px;
  align-items:           center;
  position:              relative;
  z-index:               1;
}

.cta-h2 {
  font-family:   var(--f-title);
  font-size:     var(--fs-h2);
  font-weight:   var(--fw-semibold);
  color:         #fff;
  line-height:   var(--lh-headings);
  margin-bottom: 10px;
}
.cta-h2 em      { font-style: italic; color: var(--c5); font-family: var(--f-sub); }
.cta-sub        { font-size: var(--fs-body); color: rgba(255, 255, 255, 0.7); font-weight: var(--fw-medium); }
.cta-sub-note   { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.5); font-weight: var(--fw-medium); margin-top: 6px; }
.cta-actions    { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }

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

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

.cta-note { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.4); text-align: center; }

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

@media (max-width: 1024px) {
  .foundation-grid  { gap: 40px; }
  .goal-grid        { gap: 32px; }
  .cta-inner        { gap: 40px; }
}

@media (max-width: 768px) {
  .oc-hero          { padding-top: 60px !important; min-height: clamp(380px, 44vh, 520px) !important; }
  .hero-inner       { padding: 48px 20px 56px !important; }
  .hero-h1          { font-size: var(--fs-h1) !important; }
  .foundation-grid  { grid-template-columns: 1fr; }
  .foundation-stat-card { position: static; margin-top: 20px; }
  .connection-grid  { grid-template-columns: 1fr; gap: 16px; }
  .conditions-grid  { grid-template-columns: repeat(2, 1fr); }
  .goal-grid        { grid-template-columns: 1fr; }
  .eval-steps       { flex-direction: column; align-items: stretch; gap: 32px; }
  .eval-step-arrow  { display: none; }
  .cta-inner        { grid-template-columns: 1fr; gap: 28px; }
  .cta-actions      { flex-direction: row; flex-wrap: wrap; }
  .btn-white,
  .btn-wa           { flex: 1; min-width: 140px; }
}

@media (max-width: 600px) {
  .conditions-grid  { grid-template-columns: 1fr; }
  .cta-actions      { flex-direction: column; }
  .btn-white,
  .btn-wa           { width: 100%; }
}/* End custom CSS */