/* ================================================================
   TRAYAM HOSPITAL — service-page.css
   Shared Inner Service Page Styles — loaded on every service page.

   PREFIX RULES (strictly enforced):
   ┌─────────────┬──────────────────────────────────────────────────┐
   │  .svc-      │ SHARED — used on ALL service pages.              │
   │             │ Breadcrumb, Hero, About, Why-Us, Stats-Bar,      │
   │             │ Surgeon, Testimonials, Pricing/Trust CTA,        │
   │             │ Recovery, FAQ list, Blog cards, CTA Strip,       │
   │             │ shared buttons, form elements.                   │
   ├─────────────┼──────────────────────────────────────────────────┤
   │  .tkr-      │ TKR-ONLY — Total Knee Replacement page.          │
   │             │ Hero (tkr-hero), Form, Symptoms, Procedure       │
   │             │ Types, Timeline.                                 │
   ├─────────────┼──────────────────────────────────────────────────┤
   │  .kst-      │ KST-ONLY — in kst-additions.css.                 │
   │             │ Hero (kst-hero), Emergency Banner, Stone Types,  │
   │             │ Symptoms, Treatment Options, Prevention, Outcome.│
   ├─────────────┼──────────────────────────────────────────────────┤
   │  .spine-    │ SPINE-ONLY — in spine-additions.css.             │
   │             │ Emergency Pathway, Conditions, Symptoms,         │
   │             │ Treatments, Grading, Comparison Table.           │
   └─────────────┴──────────────────────────────────────────────────┘

   Inherits CSS variables and base components from style.css:
     --clr-primary, --clr-accent, --ff-heading, --ff-body,
     .btn-primary, .btn-whatsapp, .section-eyebrow, .section-title,
     .section-subtitle, .faq-item (accordion), .container-custom
     ================================================================ */

/* ─── BREADCRUMB (shared across ALL service pages) ──────────── */

/*     Class: .svc-breadcrumb — use this on every service template.
       Never add per-page breadcrumb CSS. Add more crumb levels in
       the PHP template; the styles here handle any depth.          */
.svc-breadcrumb {
   background: var(--clr-bg-light);
   padding: 10px 0;
   border-bottom: 1px solid var(--clr-border);
   font-size: 13px;
}

.svc-breadcrumb__list {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 4px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.svc-breadcrumb__link {
   color: var(--clr-accent);
   font-weight: var(--fw-semibold);
   text-decoration: none;
   transition: var(--tr-fast);
}

.svc-breadcrumb__sep {
   color: var(--clr-muted);
   font-size: 10px;
   padding: 0 2px;
}

.svc-breadcrumb__current {
   color: var(--clr-body);
}

/* ─── HERO  [TKR-ONLY] ───────────────────────────────────────────────────── */
.tkr-hero {
   background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 50%, #1a4a7a 100%);
   padding: 52px 0 64px;
   position: relative;
   overflow: hidden;
}

.tkr-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url("data:image/svg+xml,%3Csvg width=!string!height=!string!viewBox=!string!xmlns=!string!%3E%3Cg fill=!string!fill-rule=!string!%3E%3Cg fill=!string!fill-opacity=!string!%3E%3Cpath d=!string!/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   pointer-events: none;
}

.tkr-hero__grid {
   display: grid;
   grid-template-columns: 1fr 500px;
   gap: 48px;
   align-items: center;
}

.tkr-hero__content {
   color: #fff;
}

/* Hero badge */
.tkr-hero__badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(44, 160, 90, 0.18);
   border: 1px solid rgba(44, 160, 90, 0.4);
   color: var(--clr-accent-mid);
   padding: 5px 16px;
   border-radius: var(--radius-pill);
   font-size: 12px;
   font-weight: var(--fw-bold);
   letter-spacing: 0.5px;
   margin-bottom: var(--sp-4);
}

/* Hero title */
.tkr-hero__title {
   font-family: var(--ff-heading);
   font-size: clamp(22px, 3.5vw, 40px);
   font-weight: var(--fw-bold);
   line-height: var(--lh-snug);
   color: #fff;
   margin-bottom: var(--sp-4);
}

.tkr-hero__title .highlight {
   color: var(--clr-accent-mid);
}

/* Hero subtitle */
.tkr-hero__subtitle {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.82);
   line-height: var(--lh-loose);
   margin-bottom: var(--sp-6);
   max-width: 700px;
}

/* Hero stats grid */
.tkr-hero__stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-bottom: var(--sp-6);
}

.tkr-hero__stat {
   text-align: center;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: var(--radius-md);
   padding: 14px 10px;
}

.tkr-hero__stat-num {
   font-family: var(--ff-heading);
   font-size: 24px;
   font-weight: var(--fw-extrabold);
   color: var(--clr-accent-mid);
   line-height: 1;
}

.tkr-hero__stat-label {
   font-size: 10px;
   color: rgba(255, 255, 255, 0.7);
   margin-top: 5px;
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
   letter-spacing: 0.4px;
}

/* Trust badges row */
.tkr-hero__trust {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.tkr-trust-badge {
   display: flex;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: var(--radius-pill);
   padding: 5px 10px;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.85);
   font-weight: var(--fw-semibold);
}

.tkr-trust-badge i {
   color: var(--clr-accent-mid);
   font-size: 11px;
}

.tkr-trust-badge__img {
   width: 14px;
   height: 14px;
   object-fit: contain;
}

/* ── Hero Form ── */
.tkr-hero__form-wrap {
   position: sticky;
   top: calc(var(--header-h) + 12px);
   align-self: start;
}

.tkr-hero__form {
   background: #fff;
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.tkr-form-header {
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   padding: 18px 24px;
   text-align: center;
}

.tkr-form-header__title {
   color: #fff;
   font-family: var(--ff-heading);
   font-size: 18px;
   font-weight: var(--fw-bold);
   margin-bottom: 3px;
}

.tkr-form-header__sub {
   color: rgba(255, 255, 255, 0.88);
   font-size: 13px;
}

.tkr-form-body {
   padding: 20px 24px 24px;
}

.tkr-form-body .wpcf7 {
   margin: 0;
}

/* CF7 inputs inherit homepage .appt-form__group style via style.css */
.tkr-form-body .wpcf7-form label {
   display: block;
   font-size: 12px;
   font-weight: var(--fw-bold);
   color: var(--clr-dark);
   margin-bottom: 4px;
}

.tkr-form-body .wpcf7-form input[type='60'],
.tkr-form-body .wpcf7-form input[type='60'],
.tkr-form-body .wpcf7-form input[type='0 0 60 60'],
.tkr-form-body .wpcf7-form input[type='http://www.w3.org/2000/svg'],
.tkr-form-body .wpcf7-form input[type='none'],
.tkr-form-body .wpcf7-form select {
   width: 100%;
   padding: 11px 14px;
   border: 1.5px solid var(--clr-border);
   border-radius: var(--radius-md);
   font-family: var(--ff-body);
   font-size: 14px;
   color: var(--clr-dark);
   transition: var(--tr-fast);
   margin-bottom: 10px;
}

.tkr-form-body .wpcf7-form input:focus,
.tkr-form-body .wpcf7-form select:focus {
   border-color: var(--clr-accent);
   box-shadow: 0 0 0 3px rgba(44, 160, 90, 0.12);
   outline: none;
   background: #fff;
   /* color: var(--clr-accent); */
}

.tkr-form-body .wpcf7-form input.appt-form__submit:focus {
   color: var(--clr-accent);
}

.tkr-form-body .wpcf7-form input[type='evenodd'] {
   width: 100%;
   padding: 13px;
   background: var(--clr-primary);
   color: #fff;
   border: none;
   border-radius: var(--radius-pill);
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: var(--fw-bold);
   cursor: pointer;
   transition: var(--tr-base);
   margin-top: 6px;
}

.tkr-form-notice {
   font-size: 13px;
   color: var(--clr-body);
   text-align: center;
   padding: var(--sp-4) 0;
}

/* ─── ABOUT PROCEDURE  [SHARED — .svc-about] ───────────────────── */
.svc-about__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: flex-start;
}

.svc-about__img-wrap {
   position: sticky;
   top: 120px;
   z-index: 1;
   padding-bottom: 20px;
   padding-right: 20px;
}

/* Design: Person Image Cutout */
.svc-about__img-wrap.is-person-style {
   display: flex;
   align-items: flex-end;
   justify-content: center;
   min-height: 480px;
}

.svc-about__img-decor {
   position: absolute;
   bottom: -20px;
   left: -20px;
   width: 80%;
   height: 80%;
   background: var(--clr-bg-green);
   border-radius: 40px;
   z-index: 0;
}

.page-template-template-service-orthopedic-inner-page .svc-about__img-decor {
   background: rgb(44, 160, 90, .6);
   bottom: -5px;
}

.page-template-template-service-orthopedic-inner-page .svc-about__img-wrap .svc-about__img.person-cutout {
   background: #f5f7fb;
   height: 480px;
}

.svc-about__img {
   position: relative;
   z-index: 2;
   width: 100%;
   height: auto;
   display: block;
   border-radius: 30px;
}

.svc-about__img.clinical-card {
   object-fit: cover;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.page-template-template-service-orthopedic-inner-page-php .svc-about__img.clinical-card {
   height: 400px;
}

.svc-about__img.person-cutout {
   position: relative;
   z-index: 2;
   width: 100%;
   height: 550px;
   display: block;
   background: #ffffff;
   border-radius: 30px !important;
   object-fit: contain;
   filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
}

.svc-about__img-placeholder {
   width: 100%;
   height: 400px;
   background: var(--clr-bg-light);
   border-radius: var(--radius-xl);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 80px;
   color: var(--clr-border);
}

.svc-about__img-badge {
   position: absolute;
   bottom: -16px;
   left: 24px;
   background: #fff;
   border-radius: var(--radius-lg);
   padding: 14px 20px;
   display: flex;
   align-items: center;
   gap: 14px;
   box-shadow: var(--shadow-lg);
}

.svc-about__badge-icon {
   width: 44px;
   height: 44px;
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 20px;
}

.svc-about__badge-icon img {
   width: 24px;
   height: 24px;
   object-fit: contain;
   filter: brightness(0) invert(1);
}

.svc-about__badge-num {
   font-family: var(--ff-heading);
   font-size: 22px;
   font-weight: var(--fw-extrabold);
   color: var(--clr-primary);
   line-height: 1;
}

.svc-about__badge-lbl {
   font-size: 11px;
   color: var(--clr-body);
   font-weight: var(--fw-semibold);
   margin-top: 2px;
}

.svc-about__content .section-eyebrow {
   display: inline-block;
}

.svc-about__para {
   color: var(--clr-body);
   font-size: 15px;
   line-height: var(--lh-loose);
   margin-bottom: var(--sp-5);
}

section.section--bg-dark .section-title,
section.section--bg-dark .section-subtitle {
   color: #fff;
}

section.section--bg-dark .section-subtitle {
   margin: 0 auto;
}

/* Key points list */
.svc-about__points {
   margin-top: var(--sp-6);
}

.svc-about__point {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 10px 0;
   border-bottom: 1px solid var(--clr-border);
   font-size: 14px;
   color: var(--clr-body);
   line-height: var(--lh-normal);
}

.svc-about__point:last-child {
   border-bottom: none;
}

.svc-about__point-icon {
   color: var(--clr-accent);
   font-size: 16px;
   flex-shrink: 0;
   margin-top: 2px;
}

.icon-img-spn.svc-about__point-icon img {
   width: 16px;
   height: 16px;
   object-fit: contain;
   filter: brightness(0) saturate(100%) invert(51%) sepia(89%) saturate(342%) hue-rotate(91deg) brightness(83%) contrast(91%);
}

/* ─── SYMPTOMS  [TKR-ONLY] ──────────────────────────────────────── */

.tkr-symptoms__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-top: var(--sp-7);
}

.tkr-symptom-card {
   background: #fff;
   border-radius: var(--radius-lg);
   border: 1.5px solid var(--clr-border);
   overflow: hidden;
   box-shadow: var(--shadow-xs);
   transition: var(--tr-base);
   height: 100%;
}

.tkr-symptom-card__icon-wrap {
   background: linear-gradient(135deg, var(--clr-bg-green), #f4fbfa);
   /*padding:24px 16px 16px;border-bottom:1px solid var(--clr-border);*/
   text-align: center;
   transition: background 0.3s;
   height: 360px;
}

/*.tkr-symptom-card__icon-img{width:110px;height:110px;object-fit:contain;margin:0 auto;display:block;}*/
.tkr-symptom-card__icon-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   margin: 0 auto;
   display: block;
   max-height: 360px;
}

.tkr-symptom-card__fa-icon {
   font-size: 52px;
   color: var(--clr-primary);
   display: block;
   line-height: 110px;
}

.tkr-symptom-card__body {
   padding: 16px 16px 20px;
}

.tkr-symptom-card__title {
   font-family: var(--ff-heading);
   font-size: 16px;
   font-weight: var(--fw-bold);
   color: var(--clr-primary);
   margin-bottom: 5px;
   text-transform: capitalize;
   letter-spacing: 0;
}

.tkr-symptom-card__desc {
   font-size: 14px;
   color: var(--clr-body);
   line-height: 1.55;
}

/* ─── WHY CHOOSE US  [SHARED — .svc-why-us] ────────────────────── */
.svc-why-us {
   position: relative;
   overflow: hidden;
}

.svc-why-us::before {
   content: '0.03';
   position: absolute;
   top: -60px;
   right: -60px;
   width: 300px;
   height: 300px;
   background: radial-gradient(circle, rgba(44, 160, 90, 0.14) 0%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
}

/*.svc-why-us__title{color:#fff;}*/
.svc-why-us__title .highlight {
   color: var(--clr-accent-mid);
}

/*.svc-why-us__subtitle{color:rgba(255,255,255,0.72);max-width:560px;margin:0 auto var(--sp-6);text-align:center;}*/
.section-title.svc-why-us__title {
   max-width: 1060px;
   margin-left: auto;
   margin-right: auto;
}

/* Stats bar */
.svc-stats-bar {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-xl);
   overflow: hidden;
   margin: var(--sp-8) 0;
}

.svc-stats-bar__item {
   background: rgba(255, 255, 255, 0.06);
   padding: 30px 20px;
   text-align: center;
   transition: background 0.3s;
}

.svc-stats-bar__num {
   font-family: var(--ff-heading);
   font-size: 40px;
   font-weight: var(--fw-extrabold);
   color: var(--clr-accent-mid);
   line-height: 1;
}

.svc-stats-bar__lbl {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.7);
   margin-top: 7px;
   font-weight: var(--fw-semibold);
}

/* Why cards */
.svc-why-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

.svc-why-card {
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-lg);
   padding: 28px;
   transition: var(--tr-base);
   height: 100%;
}

.svc-why-card__icon {
   width: 52px;
   height: 52px;
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: #fff;
   margin-bottom: var(--sp-4);
}

.svc-why-card__icon .icon-img-spn img {
   width: 26px;
   height: 26px;
   object-fit: contain;
   filter: brightness(0) invert(1);
}

.svc-why-card__title {
   font-family: var(--ff-heading);
   font-size: 16px;
   font-weight: var(--fw-bold);
   color: #fff;
   margin-bottom: var(--sp-2);
}

.svc-why-card__text {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.65);
   line-height: var(--lh-normal);
}

.section--bg-dark .slick-dots li button {
   background-color: rgb(255 255 255 / 25%);
}

.section--bg-dark .slick-dots li.slick-active button {
   background-color: var(--clr-accent);
}

/* ─── SURGEON  [SHARED — .svc-surgeon] ─────────────────────────── */

.svc-surgeon__grid {
   display: grid;
   grid-template-columns: 340px 1fr;
   gap: 64px;
   align-items: center;
   margin-top: var(--sp-9);
}

.svc-surgeon__photo-wrap {
   position: relative;
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   background: var(--clr-bg-light, #f8f9fa);
   display: flex;
   align-items: flex-end;
   justify-content: center;
}

.svc-surgeon__photo {
   width: 100%;
   height: 420px;
   object-fit: cover;
   object-position: center top;
   display: block;
}

.svc-surgeon__photo-placeholder {
   width: 100%;
   height: 420px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 100px;
   color: var(--clr-border);
}

.svc-surgeon__badges {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: var(--sp-4);
}

.svc-surgeon__badge {
   background: rgba(44, 160, 90, 0.1);
   color: var(--clr-accent-dark);
   padding: 5px 14px;
   border-radius: var(--radius-pill);
   font-size: 12px;
   font-weight: var(--fw-bold);
   border: 1px solid rgba(44, 160, 90, 0.25);
}

.svc-surgeon__name {
   font-family: var(--ff-heading);
   font-size: 30px;
   font-weight: var(--fw-extrabold);
   color: var(--clr-primary);
   margin-bottom: 4px;
}

.svc-surgeon__role {
   color: var(--clr-accent);
   font-weight: var(--fw-bold);
   font-size: 15px;
   margin-bottom: var(--sp-5);
}

.svc-surgeon__desc {
   color: var(--clr-body);
   font-size: 15px;
   line-height: var(--lh-loose);
   margin-bottom: var(--sp-5);
}


.svc-surgeon__cred {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 9px 0;
   border-bottom: 1px solid var(--clr-border);
   font-size: 14px;
   color: var(--clr-body);
}

.svc-surgeon__cred:last-child {
   border-bottom: none;
}

.svc-surgeon__cred i {
   color: var(--clr-accent);
   font-size: 15px;
   flex-shrink: 0;
   margin-top: 3px;
}

.svc-surgeon__creds .icon-img-spn img {
   width: 16px;
   height: 16px;
   filter: brightness(0) saturate(100%) invert(51%) sepia(89%) saturate(342%) hue-rotate(91deg) brightness(83%) contrast(91%);
}

.svc-surgeon__ctas {
   display: flex;
   gap: 14px;
   margin-top: var(--sp-6);
   flex-wrap: wrap;
}

/* Outline variant (secondary action) */
.svc-btn-outline {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
   padding: 11px 24px;
   background: transparent;
   color: var(--clr-primary);
   border: 2px solid var(--clr-primary);
   border-radius: var(--radius-pill);
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: var(--fw-bold);
   transition: var(--tr-base);
   white-space: nowrap;
}

/* ─── PROCEDURE TYPES  [TKR-ONLY] ──────────────────────────────── */
.tkr-proc-types {}

.tkr-proc-types__grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin-top: var(--sp-9);
}

.tkr-proc-card {
   display: flex;
   background: #fff;
   border: 1.5px solid var(--clr-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-xs);
   transition: var(--tr-base);
   height: 100%;
}

.tkr-proc-card__accent {
   width: 6px;
   background: linear-gradient(180deg, var(--clr-accent), var(--clr-primary));
   flex-shrink: 0;
}

.tkr-proc-card__body {
   padding: 24px 24px 24px 20px;
}

.tkr-proc-card__title {
   font-family: var(--ff-heading);
   font-size: 16px;
   font-weight: var(--fw-bold);
   color: var(--clr-primary);
   margin-bottom: var(--sp-2);
}

.tkr-proc-card__text {
   font-size: 13px;
   color: var(--clr-body);
   line-height: var(--lh-normal);
}

.tkr-proc-card__tag {
   display: inline-block;
   background: rgba(44, 160, 90, 0.1);
   color: var(--clr-accent-dark);
   padding: 3px 12px;
   border-radius: var(--radius-pill);
   font-size: 11px;
   font-weight: var(--fw-bold);
   margin-top: var(--sp-3);
   text-transform: uppercase;
   letter-spacing: 0.4px;
}

/* ─── RECOVERY TIMELINE  [TKR-ONLY] ────────────────────────────── */
.tkr-recovery {}

.tkr-timeline {
   position: relative;
   margin-top: var(--sp-10);
}

.tkr-timeline__track {
   position: absolute;
   top: 21px;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--clr-accent), var(--clr-primary));
   border-radius: 2px;
}

.tkr-timeline__steps {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 10px;
   position: relative;
}

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

.tkr-timeline__dot {
   width: 44px;
   height: 44px;
   margin: 0 auto var(--sp-4);
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 18px;
   position: relative;
   z-index: 1;
   box-shadow: 0 4px 14px rgba(44, 160, 90, 0.4);
}

.tkr-timeline__dot img {
   width: 22px;
   height: 22px;
   object-fit: contain;
   filter: brightness(0) invert(1);
}

.tkr-timeline__period {
   font-family: var(--ff-heading);
   font-size: 12px;
   font-weight: var(--fw-extrabold);
   color: var(--clr-primary);
   text-transform: uppercase;
   letter-spacing: 0.4px;
   margin-bottom: 5px;
}

.tkr-timeline__text {
   font-size: 14px;
   color: var(--clr-body);
   line-height: 1.5;
}

/* ─── TESTIMONIALS  [SHARED — .svc-testimonials] ───────────────── */

.svc-testi-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: var(--sp-9);
}

.svc-testi-card {
   background: #fff;
   border-radius: var(--radius-lg);
   padding: 28px;
   border: 1.5px solid var(--clr-border);
   box-shadow: var(--shadow-xs);
   transition: var(--tr-base);
   position: relative;
   height: 100%;
}

.svc-testi-card__stars {
   color: var(--clr-star);
   font-size: 14px;
   margin-bottom: var(--sp-3);
}

.svc-testi-card__text {
   font-size: 14px;
   color: var(--clr-body);
   line-height: var(--lh-loose);
   font-style: italic;
   margin-bottom: var(--sp-5);
   border: none;
   padding: 0;
}

.svc-testi-card__text p {
   margin: 0;
}

.svc-testi-card__author {
   display: flex;
   align-items: center;
   gap: 14px;
}

.svc-testi-card__avatar {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-family: var(--ff-heading);
   font-weight: var(--fw-bold);
   font-size: 18px;
   overflow: hidden;
   flex-shrink: 0;
}

.svc-testi-card__avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.svc-testi-card__name {
   font-family: var(--ff-heading);
   font-weight: var(--fw-bold);
   font-size: 14px;
   color: var(--clr-primary);
}

.svc-testi-card__detail {
   font-size: 12px;
   color: var(--clr-body);
   margin-top: 2px;
}

/* ─── HONEST PRICING CTA  [SHARED — .svc-pricing] ─────────────── */
.svc-pricing {
   background: #fff;
   position: relative;
   overflow: hidden;
}

.svc-pricing__inner {
   background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 55%, #0a4a6e 100%);
   border-radius: 28px;
   overflow: hidden;
   box-shadow: 0 24px 80px rgba(26, 47, 94, 0.25);
   position: relative;
}

.svc-pricing__inner::before {
   content: "tel";
   position: absolute;
   inset: 0;
   background: url("data:image/svg+xml,%3Csvg width=!string!height=!string!viewBox=!string!xmlns=!string!%3E%3Cg fill=!string!fill-opacity=!string!%3E%3Ccircle cx=!string!cy=!string!r=!string!/%3E%3Ccircle cx=!string!cy=!string!r=!string!/%3E%3Ccircle cx=!string!cy=!string!r=!string!/%3E%3C/g%3E%3C/svg%3E");
   pointer-events: none;
}

.svc-pricing__inner::after {
   content: "email";
   position: absolute;
   top: -80px;
   right: -80px;
   width: 320px;
   height: 320px;
   background: radial-gradient(circle, rgba(44, 160, 90, 0.16) 0%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
}

.svc-pricing__layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   position: relative;
   z-index: 1;
}

.svc-pricing__left {
   padding: 56px 52px 56px 56px;
   border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-pricing__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(220, 38, 38, 0.14);
   border: 1px solid rgba(220, 38, 38, 0.32);
   color: #ff8080;
   padding: 5px 14px;
   border-radius: var(--radius-pill);
   font-size: 12px;
   font-weight: var(--fw-bold);
   letter-spacing: 0.8px;
   text-transform: uppercase;
   margin-bottom: var(--sp-5);
}

.svc-pricing__title {
   font-family: var(--ff-heading);
   font-size: clamp(22px, 2.8vw, 34px);
   font-weight: var(--fw-extrabold);
   color: #fff;
   line-height: var(--lh-snug);
   margin-bottom: var(--sp-5);
}

.svc-pricing__title .highlight {
   color: var(--clr-accent-mid);
}

.svc-pricing__intro {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.72);
   line-height: var(--lh-loose);
   margin-bottom: var(--sp-6);
}

/* Red flags list */
.svc-red-flags {
   margin-bottom: var(--sp-7);
}

.svc-red-flags__item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 10px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.07);
   font-size: 14px;
   color: rgba(255, 255, 255, 0.78);
   line-height: var(--lh-normal);
}

.svc-red-flags__item:last-child {
   border-bottom: none;
   padding-bottom: 0;
}

.svc-red-flags__icon {
   width: 30px;
   height: 30px;
   border-radius: var(--radius-sm);
   flex-shrink: 0;
   background: rgba(220, 38, 38, 0.14);
   color: #ff7070;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   margin-top: 2px;
}

.svc-red-flags__item strong {
   color: #fff;
}

/* Pledge box */
.svc-pledge {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   background: rgba(44, 160, 90, 0.12);
   border: 1px solid rgba(44, 160, 90, 0.3);
   border-radius: var(--radius-lg);
   padding: 18px 22px;
}

.svc-pledge__icon {
   width: 50px;
   height: 50px;
   border-radius: var(--radius-md);
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: #fff;
   flex-shrink: 0;
}

.svc-pledge__icon .icon-img-spn img {
   width: 26px;
   height: 26px;
   filter: brightness(0) invert(1);
}

.svc-pledge__text strong {
   display: block;
   font-size: 15px;
   font-weight: var(--fw-bold);
   color: #fff;
   margin-bottom: 3px;
}

.svc-pledge__text span {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.65);
}

/* Right col */
.svc-pricing__right {
   padding: 56px 56px 56px 52px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 24px;
}

/* Promise cards */
.svc-promise-cards {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.svc-promise-card {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-lg);
   padding: 20px 22px;
   display: flex;
   align-items: flex-start;
   gap: 16px;
   transition: var(--tr-base);
}

.svc-promise-card__icon {
   width: 44px;
   height: 44px;
   border-radius: var(--radius-md);
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   color: #fff;
   flex-shrink: 0;
}

.svc-promise-card__icon .icon-img-spn img {
   width: 22px;
   height: 22px;
   filter: brightness(0) invert(1);
}

.svc-promise-card__title {
   font-size: 16px;
   font-weight: var(--fw-bold);
   color: #fff;
   margin-bottom: 5px;
   font-family: var(--ff-heading);
}

.svc-promise-card__text {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6);
   line-height: var(--lh-normal);
}

/* CTA box */
.svc-pricing__cta-box {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-lg);
   padding: 14px;
   text-align: center;
}

.svc-pricing__cta-box>p {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.72);
   line-height: var(--lh-loose);
   margin-bottom: var(--sp-5);
}

.svc-pricing__cta-box strong {
   color: #fff;
}

.svc-pricing__btn-group {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.svc-btn-cta-main {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 12px 18px;
   border-radius: var(--radius-pill);
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   color: #fff;
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: var(--fw-bold);
   text-decoration: none;
   transition: var(--tr-base);
   border: none;
   cursor: pointer;
}

.svc-btn-cta-secondary {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 12px 16px;
   border-radius: var(--radius-pill);
   background: transparent;
   color: rgba(255, 255, 255, 0.85);
   border: 1.5px solid rgba(255, 255, 255, 0.25);
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: var(--fw-semibold);
   text-decoration: none;
   transition: var(--tr-base);
   cursor: pointer;
}

.svc-pricing__trust-note,
.svg-pricing__trust-note_spn,
.svc-pricing__trust-note_spn {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45);
   margin-top: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   flex-wrap: wrap;
}

.svc-pricing__trust-note i {
   color: var(--clr-accent-mid);
   font-size: 11px;
}

.svg-pricing__trust-note_spn,
.svc-pricing__trust-note_spn {
   flex-wrap: nowrap;
   margin: 0;
}

/* ─── FAQ  [SHARED — .svc-faq__list + .faq-item] ───────────────── */

/* Uses existing .faq-item classes from style.css */
.svc-faq__list {
   max-width: 820px;
   margin: var(--sp-7) auto 0;
}

/* ─── BLOG / RELATED ARTICLES  [SHARED — .svc-blog-*] ─────────── */
.svc-blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: var(--sp-9);
}

.svc-blog-card {
   border-radius: var(--radius-lg);
   border: 1.5px solid var(--clr-border);
   overflow: hidden;
   box-shadow: var(--shadow-xs);
   transition: var(--tr-base);
   text-decoration: none;
   color: inherit;
   display: block;
}

.svc-blog-card__img {
   height: 165px;
   background: linear-gradient(135deg, var(--clr-bg-light), var(--clr-border));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 52px;
   color: var(--clr-accent);
   overflow: hidden;
}

.svc-blog-card__img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.svc-blog-card__body {
   padding: 20px;
}

.svc-blog-card__tag {
   display: inline-block;
   background: rgba(44, 160, 90, 0.1);
   color: var(--clr-accent-dark);
   padding: 3px 12px;
   border-radius: var(--radius-pill);
   font-size: 11px;
   font-weight: var(--fw-bold);
   text-transform: uppercase;
   letter-spacing: 0.4px;
}

.svc-blog-card__title {
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: var(--fw-bold);
   color: var(--clr-primary);
   margin: var(--sp-3) 0 var(--sp-2);
   line-height: var(--lh-snug);
}

.svc-blog-card__excerpt {
   font-size: 13px;
   color: var(--clr-body);
   line-height: var(--lh-normal);
}

.svc-blog-card__read-more {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--clr-accent);
   font-size: 13px;
   font-weight: var(--fw-bold);
   margin-top: var(--sp-3);
   transition: var(--tr-fast);
}

/* ─── BOTTOM CTA STRIP  [SHARED — .svc-cta-strip] ─────────────── */
.svc-cta-strip {
   background: linear-gradient(135deg, var(--clr-accent-dark), var(--clr-accent));
   padding: 56px 0;
}

.svc-cta-strip__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 32px;
   flex-wrap: wrap;
}

.svc-cta-strip__text {
   max-width: calc(100% - 420px);
}

.svc-cta-strip__title {
   font-family: var(--ff-heading);
   font-size: 28px;
   font-weight: var(--fw-extrabold);
   color: #fff;
}

.svc-cta-strip__sub {
   color: rgba(255, 255, 255, 0.88);
   font-size: 15px;
   margin-top: 7px;
}

.svc-cta-strip__btns {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   align-items: center;
}

.svc-btn-white {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 28px;
   background: #fff;
   color: var(--clr-accent-dark);
   border-radius: var(--radius-pill);
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: var(--fw-bold);
   text-decoration: none;
   transition: var(--tr-base);
   border: none;
   cursor: pointer;
}

.svc-btn-white--navy {
   background: var(--clr-primary);
   color: #fff;
}

.svc-btn-whatsapp {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 28px;
   background: #ffffff;
   color: var(--clr-whatsapp);
   border-radius: var(--radius-pill);
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: var(--fw-bold);
   text-decoration: none;
   transition: var(--tr-base);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SERVICE PAGE — KIDNEY STONE TREATMENT (KST)
   Additional CSS — append to service-page.css
   Prefix: .kst- (all new classes)
   Shared classes reused from service-page.css: .svc-about, .svc-why-us,
   .svc-stats-bar, .svc-surgeon, .svc-pricing, .svc-testimonials,
   .svc-faq__list, .svc-cta-strip, .faq-item, .section-eyebrow, .section-title,
   .section-subtitle, .btn-primary, .btn-whatsapp, .container-custom
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Emergency Banner ──────────────────────────────────────────────────── */
.kst-emergency {
   background: linear-gradient(135deg, #c0392b, #e74c3c);
   padding: 12px 0;
}

.kst-emergency__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
}

.kst-emergency__text {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #fff;
   max-width: calc(100% - 300px);
}

.kst-emergency__pulse {
   width: 10px;
   height: 10px;
   background: #fff;
   border-radius: 50%;
   flex-shrink: 0;
   animation: kst-pulse 1.4s ease-in-out infinite;
}

@keyframes kst-pulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: .4;
      transform: scale(1.4);
   }
}

.kst-emergency__text p {
   font-size: 14px;
   font-weight: 600;
}

.kst-emergency__text p strong {
   font-size: 15px;
}

.kst-emergency__text p span {
   opacity: .85;
   font-weight: 400;
}

.kst-emergency__btn {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 9px 22px;
   background: #fff;
   color: #c0392b;
   border-radius: 50px;
   font-family: var(--ff-heading, 'Manrope', sans-serif);
   font-size: 13px;
   font-weight: 700;
   white-space: nowrap;
   text-decoration: none;
   transition: background .2s, transform .2s;
}

/* ─── Hero (KST — orange/amber accent vs TKR teal) ─────────────────────── */
.kst-hero {
   background: linear-gradient(135deg, #071d45 0%, #0d2b5e 50%, #1a4a7a 100%);
   padding: 50px 0 60px;
   position: relative;
   overflow: hidden;
}

.kst-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: url("data:image/svg+xml,%3Csvg width=!string!height=!string!viewBox=!string!xmlns=!string!%3E%3Cg fill=!string!fill-opacity=!string!%3E%3Cpath d=!string!/%3E%3C/g%3E%3C/svg%3E");
}

.kst-hero__grid {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 500px;
   gap: 48px;
   align-items: center;
}

.kst-hero__content {
   color: #fff;
}

.kst-hero__badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(232, 99, 10, .2);
   border: 1px solid rgba(232, 99, 10, .45);
   color: #ffb380;
   padding: 5px 14px;
   border-radius: 50px;
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 16px;
   letter-spacing: .5px;
}

.kst-hero__title {
   font-family: var(--ff-heading, 'Manrope', sans-serif);
   font-size: clamp(22px, 3.5vw, 40px);
   font-weight: 800;
   color: #fff;
   line-height: 1.2;
   margin-bottom: 14px;
}

.kst-hero__title .highlight {
   color: #00cfc0;
}

.kst-hero__subtitle {
   font-size: 15px;
   color: rgba(255, 255, 255, .82);
   margin-bottom: 24px;
   max-width: 700px;
}

.kst-hero__stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-bottom: 24px;
}

.kst-hero__stat {
   text-align: center;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 10px;
   padding: 12px 8px;
}

.kst-hero__stat-num {
   font-size: 22px;
   font-weight: 800;
   color: #00cfc0;
   font-family: var(--ff-heading, 'Manrope', sans-serif);
   line-height: 1;
}

.kst-hero__stat-label {
   font-size: 10px;
   color: rgba(255, 255, 255, .7);
   margin-top: 4px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .5px;
}

.kst-hero__trust {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}

.kst-trust-badge {
   display: flex;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, .08);
   border-radius: 50px;
   padding: 6px 12px;
   font-size: 12px;
   color: rgba(255, 255, 255, .85);
   font-weight: 600;
}

.kst-trust-badge i {
   color: #00cfc0;
   font-size: 11px;
}

/* Hero form — orange accent */
.kst-hero__form-wrap {
   position: sticky;
   top: 80px;
   align-self: flex-start;
}

.kst-hero__form {
   background: #fff;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.kst-form-header {
   background: linear-gradient(135deg, #e8630a, #c0390a);
   padding: 16px 22px;
   text-align: center;
}

.kst-form-header__title {
   color: #fff;
   font-size: 17px;
   font-weight: 700;
   margin-bottom: 2px;
}

.kst-form-header__sub {
   color: rgba(255, 255, 255, .88);
   font-size: 12px;
}

.kst-form-urgent {
   background: rgba(232, 99, 10, .08);
   border-bottom: 1px solid rgba(232, 99, 10, .15);
   padding: 10px 22px;
   text-align: center;
   font-size: 12px;
   color: #e8630a;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
}

.kst-form-body {
   padding: 16px 22px 20px;
}

.kst-form-notice {
   font-size: 13px;
   color: var(--clr-body);
   padding: 12px 0;
}

/* ─── Stone Types ───────────────────────────────────────────────────────── */
.kst-stone-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-top: 40px;
}

.kst-stone-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid var(--clr-border, #dde8f0);
   box-shadow: 0 2px 12px rgba(13, 43, 94, .08);
   transition: transform .3s, box-shadow .3s, border-color .3s;
   height: 100%;
}

.kst-stone-card__top {
   padding: 22px 18px 16px;
   text-align: center;
   border-bottom: 1px solid var(--clr-border, #dde8f0);
}

.kst-stone-card__icon-wrap {
   margin: 0 auto 12px;
   display: flex;
   justify-content: center;
}

.kst-stone-card__icon-wrap .icon-img-spn,
.kst-stone-card__icon-img {
   width: 80px;
   height: 80px;
   object-fit: contain;
   background-color: transparent;
}

.kst-stone-card__fa-icon {
   font-size: 48px;
}

.kst-stone-card__pct {
   font-size: 24px;
   font-weight: 800;
   color: var(--clr-accent);
   font-family: var(--ff-heading, 'Manrope', sans-serif);
   line-height: 1;
   margin-bottom: 3px;
}

.kst-stone-card__pct-lbl {
   font-size: 11px;
   color: var(--clr-body);
   margin-top: 2px;
}

.kst-stone-card__name {
   font-size: 14px;
   font-weight: 800;
   color: var(--clr-primary, #1a2f5e);
   margin-top: 6px;
}

.kst-stone-card__body {
   padding: 14px 18px 18px;
}

.kst-stone-card__desc {
   font-size: 14px;
   color: var(--clr-body);
   line-height: 1.5;
   margin-bottom: 12px;
}

.kst-stone-card__title {
   font-size: 16px;
   font-weight: 700;
   color: var(--clr-dark);
   margin-top: 4px;
}

/* Stone tag colour variants */
.kst-stone-tag {
   display: inline-block;
   padding: 3px 10px;
   border-radius: 50px;
   font-size: 11px;
   font-weight: 700;
}

.kst-stone-tag--common {
   background: rgba(232, 99, 10, .1);
   color: #e8630a;
}

.kst-stone-tag--diet {
   background: rgba(0, 180, 166, .1);
   color: #009688;
}

.kst-stone-tag--infection {
   background: rgba(231, 76, 60, .1);
   color: #c0392b;
}

.kst-stone-tag--rare {
   background: rgba(142, 68, 173, .1);
   color: #8e44ad;
}

/* ─── Symptoms ──────────────────────────────────────────────────────────── */
.kst-symptoms__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
   margin-top: 40px;
}

.kst-symptom-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid var(--clr-border, #dde8f0);
   box-shadow: 0 2px 12px rgba(13, 43, 94, .08);
   transition: transform .3s, box-shadow .3s, border-color .3s;
}

.kst-symptom-card--urgent {
   border-color: rgba(231, 76, 60, .3);
}

.kst-symptom-card__img {
   padding: 18px 14px 14px;
   text-align: center;
   border-bottom: 1px solid var(--clr-border, #dde8f0);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
}

.kst-symptom-card__icon-img {
   width: 90px;
   height: 90px;
   object-fit: contain;
}

.kst-symptom-card__fa-icon {
   font-size: 52px;
   color: var(--clr-primary, #1a2f5e);
}

.kst-urgency-tag {
   display: inline-block;
   padding: 3px 10px;
   border-radius: 50px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .4px;
}

.kst-urgency-tag--red {
   background: rgba(231, 76, 60, .12);
   color: #c0392b;
}

.kst-urgency-tag--orange {
   background: rgba(232, 99, 10, .1);
   color: #e8630a;
}

.kst-urgency-tag--teal {
   background: rgba(0, 180, 166, .1);
   color: #009688;
}

.kst-symptom-card__body {
   padding: 13px 14px 15px;
   text-align: center;
}

.kst-symptom-card__title {
   font-size: 13px;
   font-weight: 800;
   color: var(--clr-primary, #1a2f5e);
   margin-bottom: 4px;
   text-transform: uppercase;
   letter-spacing: .3px;
}

.kst-symptom-card__desc {
   font-size: 11px;
   color: var(--clr-body);
   line-height: 1.5;
}

/* ─── Treatment Options ────────────────────────────────────────────────── */
.kst-treatments__intro {
   max-width: 700px;
   margin: 0 auto 48px;
}

.kst-treatment-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
}

.kst-treatment-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid var(--clr-border, #dde8f0);
   box-shadow: 0 2px 12px rgba(13, 43, 94, .08);
   display: flex;
   flex-direction: column;
   transition: transform .3s, box-shadow .3s;
   height: 100%;
}

.kst-treatment-card__header {
   padding: 20px 20px 16px;
   display: flex;
   align-items: flex-start;
   gap: 14px;
}

.kst-treatment-card__icon {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: #fff;
}

/* Icon colour modifiers */
.kst-treatment-icon--green {
   background: linear-gradient(135deg, #27ae60, #1e8449);
}

.kst-treatment-icon--blue {
   background: linear-gradient(135deg, #2980b9, #1a6fa3);
}

.kst-treatment-icon--teal {
   background: linear-gradient(135deg, #00b4a6, #009688);
}

.kst-treatment-icon--orange {
   background: linear-gradient(135deg, #e8630a, #a04000);
}

.kst-treatment-icon--purple {
   background: linear-gradient(135deg, #8e44ad, #6c3483);
}

.kst-treatment-icon--navy {
   background: linear-gradient(135deg, #1a2f5e, #0d1f3c);
}

.kst-treatment-card__head-text {
   flex: 1;
}

.kst-treatment-card__title {
   font-size: 15px;
   font-weight: 700;
   color: var(--clr-primary, #1a2f5e);
   margin-bottom: 2px;
}

.kst-treatment-card__sub {
   font-size: 11px;
   color: var(--clr-body);
   font-weight: 600;
}

.kst-treatment-card__body {
   padding: 0 20px 20px;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.kst-treatment-card__desc {
   font-size: 13px;
   color: var(--clr-body);
   line-height: 1.6;
}

.kst-treatment-card__pills {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

/* Pill tags */
.kst-pill {
   padding: 4px 12px;
   border-radius: 50px;
   font-size: 11px;
   font-weight: 700;
}

.kst-pill--green {
   background: rgba(39, 174, 96, .1);
   color: #1e8449;
}

.kst-pill--blue {
   background: rgba(41, 128, 185, .1);
   color: #1a6fa3;
}

.kst-pill--teal {
   background: rgba(0, 180, 166, .1);
   color: #009688;
}

.kst-pill--orange {
   background: rgba(232, 99, 10, .1);
   color: #e8630a;
}

.kst-pill--navy {
   background: rgba(13, 43, 94, .1);
   color: #1a2f5e;
}

.kst-tc-best-for,
.kst-treatment-card__best-for {
   background: var(--clr-bg-light, #f4f7fb);
   border-radius: 8px;
   padding: 8px 12px;
   font-size: 13px;
   color: var(--clr-body);
   margin-top: auto;
}

.kst-tc-best-for strong,
.kst-treatment-card__best-for strong {
   color: var(--clr-primary, #1a2f5e);
}

/* ─── Testimonials — outcome badge (KST-specific) ───────────────────────── */
.kst-testi-outcome {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: rgba(39, 174, 96, .1);
   color: #1e8449;
   padding: 3px 10px;
   border-radius: 50px;
   font-size: 11px;
   font-weight: 700;
   margin-bottom: 10px;
}

/* ─── Prevention Guide ─────────────────────────────────────────────────── */
.kst-prevention__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin-top: 40px;
}

.kst-prev-card {
   background: var(--clr-bg-light, #f4f7fb);
   border-radius: 12px;
   padding: 26px 22px;
   border: 1px solid var(--clr-border, #dde8f0);
   transition: transform .3s, box-shadow .3s, background .3s, border-color .3s;
}

.kst-tc-icon,
.kst-prev-icon {
   width: 52px;
   height: 52px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   margin-bottom: 14px;
   min-width: 52px;
}

.kst-tc-desc {
   font-size: 14px;
   color: var(--clr-body);
   line-height: 1.55;
}

.tc-meta,
.kst-tc-pills {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 4px;
}

/* Icon colour modifiers */
.kst-tc-icon--blue,
.kst-prev-icon--blue {
   background: rgba(41, 128, 185, .12);
   color: #2980b9;
}

.kst-tc-icon--green,
.kst-prev-icon--green {
   background: rgba(39, 174, 96, .12);
   color: #27ae60;
}

.kst-tc-icon--orange,
.kst-prev-icon--orange {
   background: rgba(232, 99, 10, .1);
   color: #e8630a;
}

.kst-tc-icon--teal,
.kst-prev-icon--teal {
   background: rgba(0, 180, 166, .1);
   color: #009688;
}

.kst-tc-icon--purple,
.kst-prev-icon--purple {
   background: rgba(142, 68, 173, .1);
   color: #8e44ad;
}

.kst-tc-icon--navy,
.kst-prev-icon--navy {
   background: rgb(7, 29, 69, .1);
   color: #071d45;
}

.kst-tc-icon--red,
.kst-prev-icon--red {
   background: rgba(231, 76, 60, .1);
   color: #e74c3c;
}

.kst-tc-title,
.kst-prev-card__title {
   font-family: var(--ff-heading);
   font-size: 16px;
   font-weight: var(--fw-bold);
   color: var(--clr-primary);
   margin-bottom: var(--sp-2);
}

.kst-tc-subtitle,
.kst-prev-card__text {
   font-size: 14px;
   color: var(--clr-body);
   line-height: var(--lh-normal);
   margin-bottom: var(--sp-3);
}

.kst-prev-card__tip {
   display: inline-block;
   margin-top: 10px;
   font-size: 12px;
   font-weight: 700;
   color: #009688;
   background: rgba(0, 180, 166, .1);
   padding: 3px 10px;
   border-radius: 50px;
}

/* ─── Blog (KST dynamic posts) ─────────────────────────────────────────── */
.svc-blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 40px;
}

.svc-blog-card {
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid var(--clr-border, #dde8f0);
   box-shadow: 0 2px 12px rgba(13, 43, 94, .08);
   background: #fff;
   transition: transform .3s, box-shadow .3s;
   display: flex;
   flex-direction: column;
   height: 100%;
}

.svc-blog-card__link {
   display: block;
   text-decoration: none;
}

.svc-blog-card__img {
   height: 160px;
   overflow: hidden;
}

.svc-blog-card__img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.svc-blog-card__img--placeholder {
   height: 160px;
   background: linear-gradient(135deg, #eef5fb, #d4eaf7);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 48px;
   color: #b0c9de;
}

.svc-blog-card__body {
   padding: 16px 18px 20px;
   display: flex;
   flex-direction: column;
   flex: 1;
}

.svc-blog-card__tag {
   display: inline-block;
   background: rgba(0, 180, 166, .1);
   color: #009688;
   padding: 3px 10px;
   border-radius: 50px;
   font-size: 11px;
   font-weight: 700;
   text-decoration: none;
   align-self: flex-start;
   transition: background .2s;
}

.svc-blog-card__title {
   font-size: 14px;
   font-weight: 700;
   color: var(--clr-primary, #1a2f5e);
   margin: 9px 0 6px;
   line-height: 1.4;
}

.svc-blog-card__title a {
   text-decoration: none;
   color: inherit;
}

.svc-blog-card__excerpt {
   font-size: 12px;
   color: var(--clr-body);
   line-height: 1.5;
   flex: 1;
}

.svc-blog-card__read-more {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: var(--clr-accent, #2ca05a);
   font-size: 12px;
   font-weight: 700;
   text-decoration: none;
   margin-top: 10px;
}

.svc-blog-card__read-more:hover {
   gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED HERO SECTION  [.svc-hero — used by KST, Spine, and future templates]
   Replaces per-template kst-hero / spine-hero with one shared block.
   Background and accent colour are set via template-specific overrides below.
   PREFIX: .svc-hero
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-hero {
   background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 50%, #1a4a7a 100%);
   padding: 50px 0 60px;
   position: relative;
   overflow: hidden;
}

.svc-hero__grid {
   display: grid;
   grid-template-columns: 1fr 500px;
   gap: 48px;
   align-items: center;
   position: relative;
   z-index: 1;
}

.svc-hero__content {
   color: #fff;
}

/* Badge */
.svc-hero__badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(44, 160, 90, 0.18);
   border: 1px solid rgba(44, 160, 90, 0.4);
   color: var(--clr-accent-mid);
   padding: 5px 16px;
   border-radius: var(--radius-pill);
   font-size: 12px;
   font-weight: var(--fw-bold);
   letter-spacing: 0.5px;
   margin-bottom: var(--sp-4);
}

/* Title */
.svc-hero__title {
   font-family: var(--ff-heading);
   font-size: clamp(22px, 3.5vw, 40px);
   font-weight: var(--fw-bold);
   line-height: var(--lh-snug);
   color: #fff;
   margin-bottom: var(--sp-4);
}

.svc-hero__title .highlight {
   color: var(--clr-accent-mid);
}

/* Subtitle */
.svc-hero__subtitle {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.82);
   line-height: var(--lh-loose);
   margin-bottom: var(--sp-6);
   max-width: 700px;
}

/* Stats row */
.svc-hero__stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-bottom: var(--sp-6);
}

.svc-hero__stat {
   text-align: center;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: var(--radius-md);
   padding: 12px 8px;
}

.svc-hero__stat-num {
   font-family: var(--ff-heading);
   font-size: 22px;
   font-weight: var(--fw-extrabold);
   color: var(--clr-accent-mid);
   line-height: 1;
}

.svc-hero__stat-label {
   font-size: 10px;
   color: rgba(255, 255, 255, 0.7);
   margin-top: 4px;
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

/* Trust badges */
.svc-hero__trust {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}

.svc-trust-badge {
   display: flex;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: var(--radius-pill);
   padding: 6px 12px;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.85);
   font-weight: var(--fw-semibold);
}

.svc-trust-badge i {
   color: var(--clr-accent-mid);
   font-size: 11px;
}

.svc-trust-badge .icon-img-spn img {
   width: 14px;
   height: 14px;
   object-fit: contain;
}

/* Sticky form */
.svc-hero__form-wrap {
   position: sticky;
   top: calc(var(--header-h, 80px) + 12px);
   align-self: start;
}

.svc-hero__form {
   background: #fff;
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.svc-form-header {
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   padding: 16px 22px;
   text-align: center;
}

.svc-form-header__title {
   color: #fff;
   font-family: var(--ff-heading);
   font-size: 17px;
   font-weight: var(--fw-bold);
   margin-bottom: 3px;
}

.svc-form-header__sub {
   color: rgba(255, 255, 255, 0.88);
   font-size: 12px;
}

.svc-form-urgent {
   background: rgba(232, 99, 10, 0.08);
   border-bottom: 1px solid rgba(232, 99, 10, 0.15);
   padding: 10px 22px;
   text-align: center;
   font-size: 12px;
   color: #e8630a;
   font-weight: var(--fw-bold);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
}

.svc-form-body {
   padding: 16px 22px 20px;
}

.svc-form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}

.svc-form-group {
   display: flex;
   flex-direction: column;
   margin-bottom: 10px;
}

.svc-form-group label {
   font-size: 12px;
   font-weight: var(--fw-bold);
   color: var(--clr-dark);
   margin-bottom: 4px;
}

.svc-form-group input,
.svc-form-group select {
   width: 100%;
   padding: 10px 12px;
   border: 1.5px solid var(--clr-border);
   border-radius: var(--radius-md);
   font-family: var(--ff-body);
   font-size: 13px;
   color: var(--clr-dark);
   transition: var(--tr-fast);
}

.svc-form-group input:focus,
.svc-form-group select:focus {
   border-color: var(--clr-accent);
   outline: none;
   box-shadow: 0 0 0 3px rgba(44, 160, 90, 0.12);
}

.svc-btn-submit {
   width: 100%;
   padding: 12px;
   background: var(--clr-primary);
   color: #fff;
   border: none;
   border-radius: var(--radius-pill);
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: var(--fw-bold);
   cursor: pointer;
   transition: var(--tr-base);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin-top: 8px;
}

.svc-form-notice {
   font-size: 12px;
   color: var(--clr-muted);
   text-align: center;
   padding: 10px 0 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED RECOVERY / REHAB SECTION  [.svc-recovery — Spine + future templates]
   Six cards in a 3-col grid. Each card has a coloured icon, title, desc, tip.
   PREFIX: .svc-recovery, .svc-rec-card
   ═══════════════════════════════════════════════════════════════════════════ */
.svc-recovery {}

.svc-recovery-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin-top: var(--sp-9);
}

.svc-rec-card {
   background: #fff;
   border-radius: var(--radius-lg);
   padding: 28px 24px;
   border: 1px solid var(--clr-border);
   box-shadow: var(--shadow-xs);
   transition: var(--tr-base);
   height: 100%;
}

.svc-rec-card__icon {
   width: 52px;
   height: 52px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: #fff;
   margin-bottom: var(--sp-4);
}

.svc-rec-card__title {
   font-family: var(--ff-heading);
   font-size: 16px;
   font-weight: var(--fw-bold);
   color: var(--clr-primary);
   margin-bottom: var(--sp-2);
}

.svc-rec-card__desc {
   font-size: 14px;
   color: var(--clr-body);
   line-height: var(--lh-normal);
   margin-bottom: var(--sp-3);
}

.svc-rec-card__tip {
   display: inline-block;
   font-size: 12px;
   font-weight: var(--fw-bold);
   color: #009688;
   background: rgba(0, 180, 166, 0.1);
   padding: 3px 10px;
   border-radius: var(--radius-pill);
}

/* Icon colour variants (a–f, cycling) */
.svc-rec-icon--a {
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
}

.svc-rec-icon--b {
   background: linear-gradient(135deg, #2980b9, #1a6fa3);
}

.svc-rec-icon--c {
   background: linear-gradient(135deg, #00b4a6, #009688);
}

.svc-rec-icon--d {
   background: linear-gradient(135deg, #8e44ad, #6c3483);
}

.svc-rec-icon--e {
   background: linear-gradient(135deg, #e8630a, #a04000);
}

.svc-rec-icon--f {
   background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
}


/* ═══════════════════════════════════════════════════════════════
   [A] EMERGENCY PATHWAY  — Spine Fracture Treatment ONLY
   ═══════════════════════════════════════════════════════════════ */
.spine-pathway-track {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
   margin-top: var(--sp-10);
   position: relative;
}

.spine-pathway-track::before {
   content: '';
   position: absolute;
   top: 28px;
   left: 5%;
   right: 5%;
   height: 3px;
   background: linear-gradient(90deg, var(--spine-red), var(--spine-orange), var(--spine-yellow), var(--spine-green), var(--spine-teal));
   border-radius: 2px;
   z-index: 0;
}

.spine-pathway-step {
   text-align: center;
   position: relative;
   z-index: 1;
}

.spine-pathway-dot {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: #fff;
   margin: 0 auto var(--sp-4);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.spine-pathway-dot.red {
   background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.spine-pathway-dot.orange {
   background: linear-gradient(135deg, #e67e22, #d35400);
}

.spine-pathway-dot.yellow {
   background: linear-gradient(135deg, #f1c40f, #f39c12);
}

.spine-pathway-dot.green {
   background: linear-gradient(135deg, #27ae60, #1e8449);
}

.spine-pathway-dot.teal {
   background: linear-gradient(135deg, #00b4a6, #009688);
}

.spine-pathway-step-num {
   font-size: 10px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.55);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 6px;
}

.spine-pathway-step h4 {
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 6px;
}

.spine-pathway-step p {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.65);
   line-height: 1.5;
   margin-bottom: var(--sp-3);
}

.spine-time-badge {
   display: inline-block;
   padding: 3px 12px;
   border-radius: var(--radius-pill);
   font-size: 11px;
   font-weight: 700;
}

.spine-tbadge-red {
   background: rgba(231, 76, 60, 0.25);
   color: #ff8080;
}

.spine-tbadge-orange {
   background: rgba(230, 126, 34, 0.25);
   color: #ffb366;
}

.spine-tbadge-yellow {
   background: rgba(241, 196, 15, 0.25);
   color: #ffe566;
}

.spine-tbadge-green {
   background: rgba(39, 174, 96, 0.25);
   color: #a3f1c0;
}

.spine-tbadge-teal {
   background: rgba(0, 180, 166, 0.25);
   color: #80e8e0;
}

.spine-pathway-alert {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   margin-top: var(--sp-10);
   background: rgba(231, 76, 60, 0.15);
   border: 1px solid rgba(231, 76, 60, 0.35);
   border-radius: var(--radius-lg);
   padding: 20px 24px;
}

.spine-pathway-alert-icon {
   width: 44px;
   height: 44px;
   border-radius: var(--radius-md);
   background: rgba(231, 76, 60, 0.25);
   color: #ff8080;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   flex-shrink: 0;
}

.spine-pathway-alert-text h4 {
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 6px;
}

.spine-pathway-alert-text p {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.75);
   line-height: 1.55;
}

.spine-pathway-alert-text a {
   color: #ff8080;
   font-weight: 700;
   text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   CONDITIONS / TECHNIQUES CARDS
   ═══════════════════════════════════════════════════════════════ */
.spine-conditions-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-top: var(--sp-9);
}

.spine-cond-card {
   background: #fff;
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--clr-border);
   box-shadow: 0 2px 12px rgba(13, 43, 94, 0.08);
   transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.spine-cond-card-top {
   padding: 20px 16px 14px;
   text-align: center;
   border-bottom: 1px solid var(--clr-border);
}

.spine-cond-card-img {
   width: 100%;
   max-height: 120px;
   object-fit: cover;
   border-radius: var(--radius-md);
   margin-bottom: 10px;
}

.spine-cond-card-icon-wrap {
   width: 72px;
   height: 72px;
   background: linear-gradient(135deg, var(--clr-bg-light), #e8eef5);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 10px;
   font-size: 30px;
   color: var(--clr-primary);
}

.spine-cond-stat {
   font-family: var(--ff-heading);
   font-size: 26px;
   font-weight: 800;
   color: var(--clr-accent);
   line-height: 1;
}

.spine-cond-stat-label {
   font-size: 10px;
   color: var(--clr-muted);
   margin-top: 2px;
   font-weight: 600;
}

.spine-cond-card-top h4 {
   font-size: 14px;
   font-weight: 700;
   color: var(--clr-primary);
   margin-top: 8px;
}

.spine-cond-card-body {
   padding: 14px 16px 18px;
}

.spine-cond-card-body p {
   font-size: 14px;
   color: var(--clr-body);
   line-height: 1.5;
   margin-bottom: 8px;
}

.spine-cond-tag {
   display: inline-block;
   padding: 3px 10px;
   border-radius: 50px;
   font-size: 11px;
   font-weight: 700;
}

.spine-ctag-teal {
   background: rgba(0, 180, 166, 0.1);
   color: #009688;
}

.spine-ctag-green {
   background: rgba(39, 174, 96, 0.12);
   color: #1e8449;
}

.spine-ctag-orange {
   background: rgba(232, 99, 10, 0.1);
   color: #e8630a;
}

.spine-ctag-red {
   background: rgba(231, 76, 60, 0.1);
   color: #c0392b;
}

.spine-ctag-navy {
   background: rgba(26, 47, 94, 0.1);
   color: #1a2f5e;
}

.spine-ctag-blue {
   background: rgba(41, 128, 185, 0.1);
   color: #2980b9;
}

/* ═══════════════════════════════════════════════════════════════
   [B] GRADING / STAGING
   ═══════════════════════════════════════════════════════════════ */
.spine-grade-track {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   margin-top: var(--sp-10);
}

.spine-grade-track.three-col {
   grid-template-columns: repeat(3, 1fr);
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
}

.spine-grade-step {
   text-align: center;
}

.spine-grade-circle {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   margin: 0 auto var(--sp-5);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.spine-grade-circle.g1 {
   background: linear-gradient(135deg, #27ae60, #1e8449);
}

.spine-grade-circle.g2 {
   background: linear-gradient(135deg, #f1c40f, #f39c12);
}

.spine-grade-circle.g3 {
   background: linear-gradient(135deg, #e67e22, #d35400);
}

.spine-grade-circle.g4 {
   background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.spine-grade-circle-label {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   opacity: 0.85;
}

.spine-grade-circle-main {
   font-family: var(--ff-heading);
   font-size: 20px;
   font-weight: 800;
   line-height: 1.1;
   text-align: center;
   padding: 0 8px;
}

.grade-g1-text {
   color: #fff;
}

.grade-g2-text {
   color: #4a3b00;
}

.grade-g3-text {
   color: #fff;
}

.grade-g4-text {
   color: #fff;
}

.spine-grade-step h4,
.grde_step_title {
   font-family: var(--ff-heading);
   font-size: 16px;
   font-weight: var(--fw-bold);
   color: var(--clr-primary);
   margin-bottom: 5px;
   text-transform: capitalize;
   letter-spacing: 0;
}

.spine-grade-step p,
.grde_step_desc {
   font-size: 14px;
   color: var(--clr-body);
   line-height: 1.55;
   margin-bottom: 10px;
}

.spine-grade-treat {
   display: inline-block;
   padding: 4px 12px;
   border-radius: 50px;
   font-size: 11px;
   font-weight: 700;
}

.gtag-green {
   background: rgba(39, 174, 96, 0.12);
   color: #1e8449;
}

.gtag-yellow {
   background: rgba(241, 196, 15, 0.15);
   color: #7a5f00;
}

.gtag-orange {
   background: rgba(230, 126, 34, 0.12);
   color: #a05000;
}

.gtag-red {
   background: rgba(231, 76, 60, 0.12);
   color: #c0392b;
}

.spine-grading-cta {
   margin-top: var(--sp-10);
   background: var(--clr-dark);
   border: 1px solid var(--clr-border);
   border-radius: var(--radius-lg);
   padding: 28px 32px;
   text-align: left;
}

.spine-grading-cta p {
   font-size: 15px;
   color: var(--clr-white);
   line-height: 1.6;
   margin-bottom: var(--sp-5);
}

.spine-grading-cta p strong {
   color: var(--clr-accent-mid);
   display: block;
}

.spine-grading-cta-btns {
   display: flex;
   justify-content: flex-start;
   gap: 14px;
   flex-wrap: wrap;
}

.spine-btn-grade-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 24px;
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   color: #fff;
   border-radius: var(--radius-pill);
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
   transition: transform 0.2s, box-shadow 0.2s;
}

.grading {
   padding: 70px 0;
   background: var(--white);
}

.grading-header {
   max-width: 760px;
   margin: 0 auto 50px;
   text-align: center;
}

.grade-track {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   position: relative;
   margin-bottom: 40px;
}

.grade-track::before {
   content: '';
   position: absolute;
   top: 54px;
   left: calc(12.5% + 2px);
   right: calc(12.5% + 2px);
   height: 4px;
   background: linear-gradient(90deg, #27ae60, #f39c12, #e67e22, #e74c3c);
   border-radius: 4px;
   z-index: 0;
}

.grade-step {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 0 12px;
   position: relative;
   z-index: 1;
}

.grade-circle {
   width: 108px;
   height: 108px;
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-bottom: 14px;
   border: 4px solid white;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
   transition: transform 0.3s;
   cursor: default;
}

.grade-step:hover .grade-circle {
   transform: scale(1.06);
}

.grade-circle.g1 {
   background: linear-gradient(135deg, #d5f5e3, #a9dfbf);
   border-color: #27ae60;
}

.grade-circle.g2 {
   background: linear-gradient(135deg, #fef9e7, #fad7a0);
   border-color: #f39c12;
}

.grade-circle.g3 {
   background: linear-gradient(135deg, #fef0e7, #f5cba7);
   border-color: #e67e22;
}

.grade-circle.g4 {
   background: linear-gradient(135deg, #fdedec, #f1948a);
   border-color: #e74c3c;
}

.grade-circle-label {
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   margin-bottom: 2px;
}

.grade-circle-main {
   font-size: 13px;
   font-weight: 800;
   font-family: 'Poppins', sans-serif;
   line-height: 1.2;
   text-align: center;
   padding: 0 8px;
}

.grade-g1-text {
   color: #1e8449;
}

.grade-g2-text {
   color: #b7770d;
}

.grade-g3-text {
   color: #a04000;
}

.grade-g4-text {
   color: #c0392b;
}


/* ═══════════════════════════════════════════════════════════════
   SYMPTOMS  (spine variant)
   ═══════════════════════════════════════════════════════════════ */
.spine-symptoms-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
   margin-top: var(--sp-9);
}

.spine-symptom-card {
   background: #fff;
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--clr-border);
   box-shadow: 0 2px 12px rgba(13, 43, 94, 0.08);
   transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.spine-symptom-card.urgent {
   border-color: rgba(231, 76, 60, 0.3);
}

.spine-symptom-card.moderate {
   border-color: rgba(230, 126, 34, 0.3);
}

.spine-symptom-card.mild {
   border-color: rgba(0, 180, 166, 0.25);
}

.spine-sym-img {
   padding: 18px 14px 14px;
   text-align: center;
   border-bottom: 1px solid var(--clr-border);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
}

.spine-urgency-tag {
   display: inline-block;
   padding: 3px 10px;
   border-radius: 50px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.4px;
}

.spine-utag-red {
   background: rgba(231, 76, 60, 0.12);
   color: #c0392b;
}

.spine-utag-orange {
   background: rgba(230, 126, 34, 0.1);
   color: #d35400;
}

.spine-utag-teal {
   background: rgba(0, 180, 166, 0.1);
   color: #009688;
}

.spine-sym-body {
   padding: 13px 14px 15px;
   text-align: center;
}

.spine-sym-body h4 {
   font-size: 13px;
   font-weight: 800;
   color: var(--clr-primary);
   margin-bottom: 4px;
   text-transform: uppercase;
   letter-spacing: 0.3px;
}

.spine-sym-body p {
   font-size: 11px;
   color: var(--clr-body);
   line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   TREATMENT OPTIONS  (spine variant)
   ═══════════════════════════════════════════════════════════════ */
.spine-treatment-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin-top: var(--sp-9);
}

.spine-treatment-card {
   background: #fff;
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--clr-border);
   box-shadow: 0 2px 12px rgba(13, 43, 94, 0.08);
   display: flex;
   flex-direction: column;
   transition: transform 0.3s, box-shadow 0.3s;
   height: 100%;
}

.spine-tc-header {
   padding: 20px 20px 16px;
   display: flex;
   align-items: flex-start;
   gap: 14px;
}

.spine-tc-icon {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-md);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: #fff;
}

.spine-tc-icon .icon-img-spn img {
   width: 26px;
   height: 26px;
   object-fit: contain;
   filter: brightness(0) invert(1);
}

.spine-tc-head-text {
   flex: 1;
}

.spine-tc-title {
   font-size: 15px;
   font-weight: 700;
   color: var(--clr-primary);
   margin-bottom: 2px;
}

.spine-tc-sub {
   font-size: 13px;
   color: var(--clr-body);
}

.spine-tc-body {
   padding: 0 20px 20px;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.spine-tc-desc {
   font-size: 14px;
   color: var(--clr-body);
   line-height: 1.6;
}

.spine-tc-meta {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.spine-tc-pill {
   padding: 4px 12px;
   border-radius: 50px;
   font-size: 11px;
   font-weight: 700;
}

.spine-pill-green {
   background: rgba(39, 174, 96, 0.1);
   color: #1e8449;
}

.spine-pill-blue {
   background: rgba(41, 128, 185, 0.1);
   color: #1a6fa3;
}

.spine-pill-teal {
   background: rgba(0, 180, 166, 0.1);
   color: #009688;
}

.spine-pill-orange {
   background: rgba(232, 99, 10, 0.1);
   color: #e8630a;
}

.spine-pill-navy {
   background: rgba(26, 47, 94, 0.1);
   color: #1a2f5e;
}

.spine-pill-purple {
   background: rgba(142, 68, 173, 0.1);
   color: #8e44ad;
}

.spine-best-for {
   background: var(--clr-bg-light);
   border-radius: var(--radius-sm);
   padding: 8px 12px;
   font-size: 13px;
   color: var(--clr-body);
   margin-top: auto;
}

.spine-best-for strong {
   color: var(--clr-primary);
}

/* ═══════════════════════════════════════════════════════════════
   [C] COMPARISON TABLE
   ═══════════════════════════════════════════════════════════════ */
.spine-comparison-wrap {
   overflow-x: auto;
   margin-top: var(--sp-9);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   -webkit-overflow-scrolling: touch;
}

.spine-comp-table {
   width: 100%;
   border-collapse: collapse;
   background: #fff;
   font-size: 14px;
}

.spine-comp-table thead th {
   padding: 16px 20px;
   text-align: center;
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: 700;
   border-bottom: 2px solid var(--clr-border);
}

.spine-comp-table thead th:first-child {
   background-color: var(--clr-bg-light);
   color: var(--clr-primary-mid);
   text-align: left;
}

.spine-comp-table thead th.col-highlight {
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   color: #fff;
}

.spine-comp-table thead th.col-plain {
   background: var(--clr-bg-navy);
   color: var(--clr-primary);
}

.spine-comp-table thead th.col-faded {
   background: var(--clr-dark);
   color: var(--clr-white);
}

.spine-comp-winner-badge {
   display: inline-block;
   font-size: 11px;
   font-weight: 700;
   margin-top: 4px;
   background: rgba(255, 255, 255, 0.2);
   padding: 2px 8px;
   border-radius: 50px;
}

.spine-comp-table tbody tr {
   border-bottom: 1px solid var(--clr-border);
   transition: background 0.2s;
}

.spine-comp-table tbody tr:last-child {
   border-bottom: none;
}

.spine-comp-table tbody td {
   padding: 14px 20px;
   vertical-align: middle;
   color: var(--clr-body);
   text-align: center;
}

.spine-comp-table tbody td:first-child {
   font-weight: 600;
   color: var(--clr-primary);
   background: var(--clr-bg-light);
   min-width: 160px;
   text-align: left;
}

.spine-comp-table tbody td.td-highlight {
   background: rgba(44, 160, 90, 0.06);
   text-align: center;
}

.spine-comp-badge {
   display: inline-block;
   padding: 4px 12px;
   border-radius: 50px;
   font-size: 12px;
   font-weight: 700;
}

.spine-cbadge-green {
   background: rgba(39, 174, 96, 0.12);
   color: #1e8449;
}

.spine-cbadge-teal {
   background: rgba(0, 180, 166, 0.12);
   color: #009688;
}

.spine-cbadge-orange {
   background: rgba(230, 126, 34, 0.12);
   color: #d35400;
}

.spine-cbadge-red {
   background: rgba(231, 76, 60, 0.12);
   color: #c0392b;
}

.spine-cbadge-grey {
   background: rgba(0, 0, 0, 0.06);
   color: #888;
}

.spine-comp-scroll-hint {
   text-align: center;
   font-size: 12px;
   color: var(--clr-muted);
   margin-top: var(--sp-4);
   display: none;
}

.spine-comp-footnote {
   text-align: center;
   font-size: 12px;
   color: var(--clr-body);
   margin-top: var(--sp-4);
   line-height: 1.5;
}


/* ================================================================
   TRAYAM HOSPITAL — universal-additions.css
   NEW section styles for the Universal Service Page template.
   Merge this file into service-page.css.

   PREFIX: .svc- (all new classes follow existing shared convention)

   NEW SECTIONS in this file:
   ┌──────────────────────┬──────────────────────────────────────────┐
   │ Proc Timeline        │ .svc-proc-timeline / .svc-proc-*         │
   │ Lab Monitor          │ .svc-lab-monitor / .svc-lab-*            │
   │ Dialysis Access      │ .svc-dialysis-access / .svc-access-*     │
   │ Procedure Steps      │ .svc-procedure-steps / .svc-proc-vs-*    │
   │ Comparison extras    │ .svc-comp-tick / .svc-comp-cross         │
   └──────────────────────┴──────────────────────────────────────────┘

   All other sections reuse existing classes from service-page.css.
   Inherits CSS variables from style.css.
   ================================================================ */

/* ════════════════════════════════════════════════════════════
   PROCEDURE TIMELINE  (Before / During / After)
   Used by: Nephrology Biopsy, AKI, all Gen Surgery pages,
            Pathology report turnaround
   ════════════════════════════════════════════════════════════ */
.svc-proc-timeline {}

.svc-proc-track {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0;
   margin-top: var(--sp-9);
   position: relative;
}

/* Connecting gradient line */
.svc-proc-track::before {
   content: '';
   position: absolute;
   top: 40px;
   left: calc(16.7% + 20px);
   right: calc(16.7% + 20px);
   height: 4px;
   background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
   border-radius: 4px;
   z-index: 0;
}

.svc-proc-step {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
   z-index: 1;
   padding: 0 var(--sp-5);
}

.svc-proc-dot {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   margin-bottom: var(--sp-4);
   border: 3px solid rgba(255, 255, 255, 0.5);
   box-shadow: var(--shadow-navy);
   transition: transform 0.3s;
   color: #fff;
}

.svc-proc-dot--pre {
   background: linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary));
}

.svc-proc-dot--during {
   background: linear-gradient(135deg, var(--clr-accent-dark), var(--clr-accent));
}

.svc-proc-dot--post {
   background: linear-gradient(135deg, #27ae60, #1e8449);
}

.svc-proc-step-num {
   font-size: 10px;
   font-weight: var(--fw-extrabold);
   color: var(--clr-muted);
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: var(--sp-2);
}

.svc-proc-step h4 {
   font-family: var(--ff-heading);
   font-size: 16px;
   font-weight: var(--fw-bold);
   color: var(--clr-primary);
   margin-bottom: var(--sp-2);
   line-height: var(--lh-snug);
}

.svc-proc-step p {
   font-size: 14px;
   color: var(--clr-body);
   line-height: var(--lh-normal);
   margin-bottom: var(--sp-3);
}

.svc-proc-time-badge {
   display: inline-block;
   padding: 4px 14px;
   border-radius: var(--radius-pill);
   font-size: 12px;
   font-weight: var(--fw-bold);
}

.svc-ptbadge-indigo {
   background: rgba(26, 86, 219, 0.1);
   color: #1444b8;
}

.svc-ptbadge-teal {
   background: rgba(0, 180, 166, 0.1);
   color: #009688;
}

.svc-ptbadge-green {
   background: rgba(39, 174, 96, 0.1);
   color: #1e8449;
}

/* Urgent Alert Box (optional, AKI only) */
.svc-proc-alert {
   display: flex;
   align-items: flex-start;
   gap: var(--sp-4);
   background: rgba(220, 38, 38, 0.07);
   border: 1px solid rgba(220, 38, 38, 0.28);
   border-radius: var(--radius-lg);
   padding: var(--sp-5) var(--sp-6);
   margin-top: var(--sp-9);
}

.svc-proc-alert-icon {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-md);
   background: linear-gradient(135deg, #c0392b, #e74c3c);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   color: #fff;
   flex-shrink: 0;
}

.svc-proc-alert-text h4 {
   font-family: var(--ff-heading);
   font-size: 15px;
   font-weight: var(--fw-bold);
   color: #c0392b;
   margin-bottom: var(--sp-1);
}

.svc-proc-alert-text p {
   font-size: 14px;
   color: var(--clr-body);
   line-height: var(--lh-normal);
}

.svc-proc-alert-text a {
   color: var(--clr-accent);
   font-weight: var(--fw-bold);
}

/* ── Reference Range Strip (Pathology) ── */
.svc-report-ref-strip {
   margin-top: var(--sp-9);
   background: #fff;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
   border: 1px solid var(--clr-border);
}

.svc-report-ref-header {
   background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-mid));
   padding: var(--sp-4) var(--sp-6);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.svc-report-ref-header h4 {
   color: #fff;
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: var(--fw-bold);
}

.svc-report-ref-header span {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.65);
}

.svc-report-ref-row {
   display: grid;
   grid-template-columns: 1fr 1fr 80px 100px;
   gap: 0;
   padding: var(--sp-3) var(--sp-6);
   border-bottom: 1px solid var(--clr-border);
   align-items: center;
   transition: background 0.2s;
}

.svc-report-ref-row:last-child {
   border-bottom: none;
}

.svc-rr-header {
   background: var(--clr-bg-light);
   padding: var(--sp-2) var(--sp-6);
}

.svc-rrr-name {
   font-size: 13px;
   font-weight: var(--fw-bold);
   color: var(--clr-primary);
}

.svc-rr-header .svc-rrr-name {
   font-size: 11px;
   font-weight: var(--fw-extrabold);
   color: var(--clr-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.svc-rrr-range {
   font-size: 13px;
   color: var(--clr-body);
}

.svc-rrr-unit {
   font-size: 12px;
   color: var(--clr-muted);
   text-align: center;
}

.svc-rrr-time {
   font-size: 12px;
   font-weight: var(--fw-bold);
   text-align: right;
}

.rrt-fast {
   color: #1e8449;
}

.rrt-std {
   color: #009688;
}

.rrt-slow {
   color: #b7770d;
}

/* ════════════════════════════════════════════════════════════
   LAB VALUES MONITOR PANEL  [NEPHRO E]
   Used by: CKD, AKI, DKD, Dialysis, HD, PD, Pathology
   ════════════════════════════════════════════════════════════ */
.svc-lab-monitor {}

.svc-lab-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--sp-4);
   margin-top: var(--sp-9);
}

.svc-lab-card {
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: var(--radius-lg);
   padding: var(--sp-5) var(--sp-4) var(--sp-4);
   transition: var(--tr-base);
   position: relative;
   overflow: hidden;
}

/* Top status bar */
.svc-lab-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   border-radius: 4px 4px 0 0;
}

.svc-lab-normal::before {
   background: linear-gradient(90deg, #27ae60, #2ecc71);
}

.svc-lab-watch::before {
   background: linear-gradient(90deg, #f39c12, #f1c40f);
}

.svc-lab-alert::before {
   background: linear-gradient(90deg, #e67e22, #e8630a);
}

.svc-lab-danger::before {
   background: linear-gradient(90deg, #c0392b, #e74c3c);
}

.svc-lab-name {
   font-size: 11px;
   font-weight: var(--fw-extrabold);
   color: rgba(255, 255, 255, 0.55);
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: var(--sp-2);
}

.svc-lab-value {
   font-family: var(--ff-heading);
   font-size: 28px;
   font-weight: var(--fw-extrabold);
   color: #fff;
   line-height: 1;
   margin-bottom: var(--sp-1);
}

.svc-lab-unit {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.5);
   font-weight: var(--fw-semibold);
}

.svc-lab-divider {
   height: 1px;
   background: rgba(255, 255, 255, 0.1);
   margin: var(--sp-3) 0;
}

.svc-lab-range-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--sp-2);
}

.svc-lab-range-label {
   font-size: 10px;
   color: rgba(255, 255, 255, 0.45);
   font-weight: var(--fw-semibold);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.svc-lab-range-val {
   font-size: 12px;
   font-weight: var(--fw-bold);
}

.svc-lrv-normal {
   color: #27ae60;
}

.svc-lrv-alarm {
   color: #e67e22;
}

.svc-lrv-danger {
   color: #e74c3c;
}

.svc-lab-interp {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.55);
   line-height: var(--lh-normal);
   margin-top: var(--sp-2);
}

.svc-lab-status {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-1);
   padding: 3px 10px;
   border-radius: var(--radius-pill);
   font-size: 10px;
   font-weight: var(--fw-bold);
   margin-top: var(--sp-3);
}

.svc-ls-normal {
   background: rgba(39, 174, 96, 0.15);
   color: #2ecc71;
}

.svc-ls-watch {
   background: rgba(243, 156, 18, 0.15);
   color: #f39c12;
}

.svc-ls-alert {
   background: rgba(230, 126, 34, 0.15);
   color: #e67e22;
}

.svc-ls-danger {
   background: rgba(231, 76, 60, 0.15);
   color: #e74c3c;
}

/* ════════════════════════════════════════════════════════════
   DIALYSIS ACCESS CARDS  [NEPHRO D]
   Used by: Hemodialysis, Peritoneal Dialysis
   ════════════════════════════════════════════════════════════ */
.svc-dialysis-access {}

.svc-access-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--sp-6);
   margin-top: var(--sp-9);
}

.svc-access-card {
   background: #fff;
   border: 1.5px solid var(--clr-border);
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: var(--tr-base);
}

.svc-access-card__top {
   padding: var(--sp-7) var(--sp-5) var(--sp-5);
   background: linear-gradient(135deg, var(--clr-bg-light), var(--clr-bg-navy));
   text-align: center;
   position: relative;
}

/* Recommendation tag — top-right corner */
.svc-access-rec-tag {
   position: absolute;
   top: 14px;
   right: 14px;
   padding: 4px 11px;
   border-radius: var(--radius-pill);
   font-size: 11px;
   font-weight: var(--fw-bold);
}

.svc-art-preferred {
   background: linear-gradient(135deg, var(--clr-accent-dark), var(--clr-accent));
   color: #fff;
}

.svc-art-good {
   background: rgba(39, 174, 96, 0.12);
   color: #1e8449;
   border: 1px solid rgba(39, 174, 96, 0.3);
}

.svc-art-temporary {
   background: rgba(230, 126, 34, 0.12);
   color: #a04000;
   border: 1px solid rgba(230, 126, 34, 0.3);
}

.svc-art-home {
   background: rgba(0, 180, 166, 0.12);
   color: #009688;
   border: 1px solid rgba(0, 180, 166, 0.3);
}

.svc-access-card__icon {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   background: var(--clr-bg-light);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto var(--sp-3);
   font-size: 38px;
   color: var(--clr-primary);
   border: 2px solid var(--clr-border);
}

.svc-access-card__icon .icon-img-spn img {
   width: 50px;
   height: 50px;
   object-fit: contain;
}

.svc-access-card__top h4 {
   font-family: var(--ff-heading);
   font-size: 16px;
   font-weight: var(--fw-bold);
   color: var(--clr-primary);
}

.svc-access-sub {
   font-size: 12px;
   color: var(--clr-muted);
   font-weight: var(--fw-semibold);
   margin-top: 4px;
}

.svc-access-card__body {
   padding: var(--sp-5) var(--sp-5) var(--sp-6);
}

.svc-access-card__body p {
   font-size: 14px;
   color: var(--clr-body);
   line-height: var(--lh-normal);
   margin-bottom: var(--sp-4);
}

.svc-access-pros-cons {
   display: flex;
   gap: var(--sp-2);
   flex-wrap: wrap;
   margin-bottom: var(--sp-4);
}

.svc-access-pro {
   padding: 4px 12px;
   border-radius: var(--radius-pill);
   font-size: 12px;
   font-weight: var(--fw-bold);
   background: rgba(39, 174, 96, 0.1);
   color: #1e8449;
}

.svc-access-con {
   padding: 4px 12px;
   border-radius: var(--radius-pill);
   font-size: 12px;
   font-weight: var(--fw-bold);
   background: rgba(220, 38, 38, 0.07);
   color: #c0392b;
}

.svc-access-learn-more {
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
   color: var(--clr-accent);
   font-size: 13px;
   font-weight: var(--fw-bold);
   text-decoration: none;
   margin-top: var(--sp-3);
   transition: var(--tr-fast);
}

/* ════════════════════════════════════════════════════════════
   PROCEDURE STEPS  [GEN A]
   Used by: All Gen Surgery pages
   ════════════════════════════════════════════════════════════ */
.svc-procedure-steps {}

/* VS comparison panel */
.svc-proc-vs-wrap {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   margin-top: var(--sp-9);
   margin-bottom: var(--sp-9);
}

.svc-proc-vs-panel {
   padding: var(--sp-7) var(--sp-7);
}

.svc-proc-vs-left {
   background: linear-gradient(135deg, #fff5f5, #fde8e8);
}

.svc-proc-vs-right {
   background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.svc-proc-vs-divider {
   background: var(--clr-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 var(--sp-5);
   flex-shrink: 0;
}

.svc-proc-vs-divider span {
   font-family: var(--ff-heading);
   font-size: 18px;
   font-weight: var(--fw-extrabold);
   color: #fff;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   letter-spacing: 2px;
}

.svc-proc-vs-label {
   font-size: 13px;
   font-weight: var(--fw-extrabold);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: var(--sp-5);
   display: flex;
   align-items: center;
   gap: var(--sp-2);
}

.svc-proc-vs-left .svc-proc-vs-label {
   color: #c0392b;
}

.svc-proc-vs-right .svc-proc-vs-label {
   color: #1e8449;
}

.svc-proc-vs-metric {
   display: flex;
   flex-direction: column;
   gap: var(--sp-3);
}

.svc-proc-vs-metric-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--sp-3) var(--sp-4);
   border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.6);
}

.svc-pvm-label {
   font-size: 13px;
   font-weight: var(--fw-bold);
   color: var(--clr-body);
}

.svc-pvm-val {
   font-size: 13px;
   font-weight: var(--fw-extrabold);
   border-radius: var(--radius-pill);
   padding: 3px 14px;
}

.svc-pvm-bad {
   background: rgba(220, 38, 38, 0.1);
   color: #c0392b;
}

.svc-pvm-good {
   background: rgba(39, 174, 96, 0.12);
   color: #1e8449;
}

.svc-pvm-neutral {
   background: rgba(26, 47, 94, 0.07);
   color: var(--clr-primary);
}

/* How it works steps track */
.svc-proc-how {
   margin-top: var(--sp-5);
}

.svc-proc-how-label {
   text-align: center;
   font-size: 12px;
   font-weight: var(--fw-bold);
   color: var(--clr-muted);
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: var(--sp-7);
}

.svc-proc-how-track {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   position: relative;
}

.svc-proc-how-track::before {
   content: '';
   position: absolute;
   top: 28px;
   left: calc(12.5% + 6px);
   right: calc(12.5% + 6px);
   height: 3px;
   background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-dark));
   border-radius: 3px;
   z-index: 0;
}

.svc-proc-how-step {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 0 var(--sp-3);
   position: relative;
   z-index: 1;
}

.svc-proc-how-dot {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-dark));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   color: #fff;
   margin-bottom: var(--sp-3);
   box-shadow: var(--shadow-green);
   transition: transform 0.3s;
}

.svc-proc-how-num {
   font-size: 10px;
   font-weight: var(--fw-extrabold);
   color: var(--clr-muted);
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: var(--sp-1);
}

.svc-proc-how-content h4 {
   font-family: var(--ff-heading);
   font-size: 14px;
   font-weight: var(--fw-bold);
   color: var(--clr-primary);
   margin-bottom: var(--sp-1);
}

.svc-proc-how-content p {
   font-size: 12px;
   color: var(--clr-muted);
   line-height: var(--lh-normal);
}

/* ════════════════════════════════════════════════════════════
   COMPARISON TABLE extras
   .svc-comp-tick / .svc-comp-cross (Pathology test package tables)
   ════════════════════════════════════════════════════════════ */
.svc-comp-tick {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: rgba(39, 174, 96, 0.12);
   color: #1e8449;
   font-size: 13px;
   font-weight: var(--fw-bold);
   margin-right: 4px;
}

.svc-comp-cross {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--clr-bg-light);
   color: var(--clr-muted);
   font-size: 12px;
   margin-right: 4px;
}

/* Grade circle G5 — for Nephrology CKD 5-stage ladder */
.spine-grade-circle.g5 {
   background: linear-gradient(135deg, #fdedec, #f1948a);
   border-color: #c0392b;
}

.grade-g5-text {
   color: #c0392b;
}

.spine-grade-track.five-col {
   grid-template-columns: repeat(5, 1fr);
}




/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Follows the same breakpoint scheme as the homepage (style.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── Large tablet (>= 1200px) ── */
@media only screen and (min-width:1200px) {
   .svc-breadcrumb__link:hover {
      color: var(--clr-primary);
   }

   .tkr-form-body .wpcf7-form input[type='%23ffffff']:hover {
      background: var(--clr-accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-green);
   }

   .tkr-symptom-card:hover {
      transform: translateY(-6px);
      border-color: var(--clr-accent);
      box-shadow: 0 16px 44px rgba(44, 160, 90, 0.18);
   }

   .tkr-symptom-card:hover .tkr-symptom-card__icon-wrap {
      background: linear-gradient(135deg, #c8edd9, #d6f5e6);
   }

   .svc-stats-bar__item:hover {
      background: rgba(44, 160, 90, 0.18);
   }

   .svc-why-card:hover {
      background: rgba(44, 160, 90, 0.12);
      border-color: rgba(44, 160, 90, 0.4);
      transform: translateY(-4px);
   }

   .svc-btn-outline:hover {
      background: var(--clr-primary);
      color: #fff;
   }

   .tkr-proc-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--clr-accent);
   }

   .svc-testi-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
   }

   .svc-promise-card:hover {
      background: rgba(44, 160, 90, 0.12);
      border-color: rgba(44, 160, 90, 0.35);
      transform: translateX(4px);
   }

   .svc-btn-cta-main:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(44, 160, 90, 0.4);
      color: #fff;
   }

   .svc-btn-cta-secondary:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.5);
      color: #fff;
   }

   .svc-blog-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
   }

   .svc-blog-card:hover .svc-blog-card__read-more {
      gap: 10px;
   }

   .svc-btn-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
      color: var(--clr-accent-dark);
   }

   .svc-btn-white--navy:hover {
      color: #fff;
      background: var(--clr-primary-dark);
   }

   .svc-btn-whatsapp:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
   }

   .kst-emergency__btn:hover {
      background: #fff3f3;
      transform: scale(1.03);
   }

   .kst-stone-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 40px rgba(13, 43, 94, .13);
      border-color: var(--clr-accent, #2ca05a);
   }

   .kst-symptom-card--urgent:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(231, 76, 60, .15);
      border-color: #e74c3c;
   }

   .kst-symptom-card--moderate:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(232, 99, 10, .15);
      border-color: #e8630a;
   }

   .kst-symptom-card--mild:hover {
      transform: translateY(-5px);
      border-color: var(--clr-accent, #2ca05a);
   }

   .kst-treatment-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 40px rgba(13, 43, 94, .13);
   }

   .svc-blog-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 40px rgba(13, 43, 94, .13);
   }

   .svc-blog-card__tag:hover {
      background: rgba(0, 180, 166, .2);
   }

   .svc-blog-card__title a:hover {
      color: var(--clr-accent, #2ca05a);
   }

   .svc-btn-submit:hover {
      background: var(--clr-accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-green);
   }

   .svc-rec-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--clr-accent);
   }

   .spine-cond-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 40px rgba(13, 43, 94, 0.13);
      border-color: var(--clr-accent);
   }

   .spine-btn-grade-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(44, 160, 90, 0.35);
      color: #fff;
   }

   .spine-btn-grade-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: transparent;
      color: var(--clr-primary);
      border: 2px solid var(--clr-primary);
      border-radius: var(--radius-pill);
      font-family: var(--ff-heading);
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      transition: var(--tr-base);
   }

   .spine-btn-grade-secondary:hover {
      background: var(--clr-primary);
      color: #fff;
   }

   .kst-prev-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 40px rgba(13, 43, 94, .1);
      background: #fff;
      border-color: var(--clr-accent, #2ca05a);
   }

   .spine-symptom-card.urgent:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(231, 76, 60, 0.15);
      border-color: #e74c3c;
   }

   .spine-symptom-card.moderate:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(230, 126, 34, 0.15);
      border-color: #e67e22;
   }

   .spine-symptom-card.mild:hover {
      transform: translateY(-5px);
      border-color: var(--clr-accent);
   }

   .spine-treatment-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 40px rgba(13, 43, 94, 0.13);
   }

   .spine-comp-table tbody tr:hover {
      background: var(--clr-bg-light);
   }

   .svc-proc-step:hover .svc-proc-dot {
      transform: scale(1.1);
   }

   .svc-report-ref-row:hover {
      background: var(--clr-bg-light);
   }

   .svc-proc-how-step:hover .svc-proc-how-dot {
      transform: scale(1.1);
   }

}

/* ─── DESTINATION SECTION (Why Ahmadabad) ──────────── */
.svc-dest-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 50px;
}

.svc-dest-card {
   background: #fff;
   border-radius: var(--radius-xl);
   padding: 30px;
   display: flex;
   align-items: center;
   gap: 20px;
   text-align: left;
   box-shadow: var(--shadow-sm);
   transition: var(--tr-base);
   border: 1px solid var(--clr-border);
   height: 100%;
}

.svc-dest-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
   border-color: var(--clr-accent);
}

.svc-dest-card__icon {
   width: 70px;
   height: 70px;
   background: rgba(44, 160, 90, 0.08);
   border-radius: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   color: var(--clr-accent);
   font-size: 24px;
}

.svc-dest-card__icon i {
   font-size: 24px;
}

.svc-dest-card__icon img {
   width: 32px;
   height: 32px;
   object-fit: contain;
}

.svc-dest-card__text {
   font-size: 15px;
   line-height: 1.5;
   color: var(--clr-primary);
   font-weight: var(--fw-semibold);
   margin: 0;
}

/* Descriptions styling */
.section-desc-top {
   max-width: 800px;
   margin: 20px auto 0 auto;
   font-size: 16px;
   line-height: 1.6;
   color: var(--clr-body, #555);
}

.section-desc-top p {
   font-size: 16px;
   line-height: 1.6;
   color: var(--clr-body, #555);
   margin: 0;
}

.section-desc-bottom {
   max-width: 900px;
   margin: 40px auto 0 auto;
   font-size: 15px;
   line-height: 1.6;
   color: var(--clr-body, #555);
   text-align: center;
}

.section-desc-bottom p {
   font-size: 15px;
   line-height: 1.6;
   color: var(--clr-body, #555);
   margin: 0 0 15px 0;
}

.section-desc-bottom p:last-child {
   margin-bottom: 0;
}

/* ── Large tablet (≤ 1100px) ── */
@media (max-width:1100px) {
   .tkr-hero__grid {
      grid-template-columns: 1fr 400px;
      gap: 48px;
   }

   .svc-pricing__left {
      padding: 44px 38px 44px 44px;
   }

   .svc-pricing__right {
      padding: 44px 44px 44px 38px;
   }

   .kst-hero__grid {
      grid-template-columns: 1fr 400px;
      gap: 48px;
   }

   .kst-stone-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .kst-treatment-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .kst-prevention__grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .kst-stone-card__title {
      font-size: 16px;
   }

   /* Shared hero */
   .svc-hero__grid {
      grid-template-columns: 1fr 400px;
      gap: 40px;
   }

   .svc-recovery-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .spine-conditions-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .spine-treatment-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .spine-pathway-track {
      grid-template-columns: repeat(3, 1fr);
   }

   .spine-pathway-track::before {
      display: none;
   }

   /* universal master template new sections start */
   .svc-lab-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .svc-access-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .svc-proc-how-track {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-6);
   }

   .svc-proc-how-track::before {
      display: none;
   }

   .spine-grade-track.five-col {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
   }

   /* universal master template new sections end */

   .section-title.svc-why-us__title {
      max-width: 100%;
   }

   .tkr-symptom-card__icon-wrap {
      height: 260px;
   }

}

/* ── Tablet (≤ 960px) ── */
@media (max-width:960px) {
   .tkr-hero__grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .tkr-hero__form-wrap {
      position: static;
      max-width: 540px;
      margin: 0 auto;
      width: 100%;
   }

   .tkr-hero__stats {
      grid-template-columns: repeat(4, 1fr);
   }

   .svc-about__grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .svc-about__img-wrap {
      position: static;
   }

   .page-template-template-service-orthopedic-inner-page .svc-about__img-wrap {
      position: relative;
      top: 0;
      left: 15px;
   }

   .svc-about__img {
      height: 300px;
   }

   .svc-about__img-placeholder {
      height: 300px;
   }

   .tkr-symptoms__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
   }

   .svc-stats-bar {
      grid-template-columns: repeat(2, 1fr);
   }

   .svc-why-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
   }

   .svc-surgeon__grid {
      grid-template-columns: 1fr;
      gap: 36px;
   }

   .svc-surgeon__photo-wrap {
      min-height: auto;
      max-width: 360px;
   }

   .svc-surgeon__photo {
      height: 320px;
   }

   .svc-surgeon__photo-placeholder {
      height: 280px;
   }

   .tkr-proc-types__grid {
      grid-template-columns: 1fr;
   }

   .tkr-timeline__steps {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
   }

   .tkr-timeline__track {
      display: none;
   }

   .svc-testi-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
   }

   .svc-dest-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }

   .svc-pricing__layout {
      grid-template-columns: 1fr;
   }

   .svc-pricing__left {
      padding: 44px 36px 36px;
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   .svc-pricing__right {
      padding: 36px 36px 44px;
   }

   .svc-blog-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
   }

   .svc-cta-strip__inner {
      flex-direction: column;
      text-align: center;
   }

   .svc-cta-strip__btns {
      justify-content: center;
   }

   .kst-hero__grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .kst-hero__form-wrap {
      position: static;
      max-width: 100%;
      margin: 0 auto;
      width: 100%;
   }

   .kst-hero__stats {
      grid-template-columns: repeat(4, 1fr);
   }

   .kst-stone-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .kst-symptoms__grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .kst-treatment-grid {
      grid-template-columns: 1fr;
   }

   .kst-prevention__grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .svc-blog-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   /* Shared hero */
   .svc-hero__grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .svc-hero__form-wrap {
      position: static;
      max-width: 100%;
      margin: 0 auto;
      width: 100%;
   }

   .svc-hero__stats {
      grid-template-columns: repeat(4, 1fr);
   }

   .svc-recovery-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .svc-cta-strip__text {
      max-width: 100%;
   }

   .spine-symptoms-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .spine-conditions-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .spine-treatment-grid {
      grid-template-columns: 1fr;
   }

   .spine-grade-track {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }

   .spine-grade-track.three-col {
      grid-template-columns: repeat(2, 1fr);
      max-width: none;
   }

   .spine-comp-scroll-hint {
      display: block;
   }

   .grade-track::before {
      display: none;
   }

   /* universal master template new sections start */
   .svc-proc-track {
      grid-template-columns: 1fr;
      gap: var(--sp-7);
   }

   .svc-proc-track::before {
      display: none;
   }

   .svc-lab-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .svc-access-grid {
      grid-template-columns: 1fr;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
   }

   .svc-proc-vs-wrap {
      grid-template-columns: 1fr;
   }

   .svc-proc-vs-divider {
      padding: var(--sp-4);
      writing-mode: horizontal-tb;
   }

   .svc-proc-vs-divider span {
      writing-mode: horizontal-tb;
   }

   .svc-proc-how-track {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-6);
   }

   .svc-report-ref-row {
      grid-template-columns: 1fr 1fr 60px 80px;
   }

   .spine-grade-track.five-col {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-5);
   }

   .spine-grade-track.five-col::before {
      display: none;
   }

   /* universal master template new sections end */

}

/* ── Mobile (≤ 767px) ── */
@media only screen and (max-width:767px) {

   /* Mobile Sliders */
   .svc-form-urgent,
   .kst-emergency__text {
      align-items: flex-start;
   }

   .svc-form-urgent i.fas {
      line-height: inherit;
   }

   .kst-emergency__pulse {
      margin-top: 6px;
   }

   .tkr-symptoms__grid {
      display: block !important;
      margin-left: -6px;
      margin-right: -6px;
   }

   .symptoms_slide {
      padding: 10px 6px;
   }

   .kst-stone-grid,
   .spine-conditions-grid,
   .svc-why-grid .tkr-proc-types__grid,
   .svc-testi-grid,
   .svc-blog-grid,
   .spine-treatment-grid,
   .svc-recovery-grid,
   .kst-treatment-grid,
   .kst-prevention__grid,
   .grade-track {
      display: block !important;
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 20px;
   }

   .kst-stone-slide,
   .mobile-slide {
      padding-left: 10px;
      padding-right: 10px;
   }

   .tkr-proc-types__grid {
      margin-top: 20px;
   }

   .tkr-symptom-card__icon-img {
      max-height: 250px;
      height: 250px;
   }

   .tkr-symptom-card:hover {
      transform: unset;
      box-shadow: none;
   }

   .tkr-timeline__steps {
      grid-template-columns: repeat(2, 1fr);
   }

   .spine-comp-table tbody td {
      min-width: 180px;
   }

   .spine-comp-badge {
      text-align: center;
      border-radius: 6px;
   }

   .grade-track {
      margin-bottom: 0;
   }


   /* universal master template new sections start */
   .svc-proc-alert {
      flex-direction: column;
      gap: var(--sp-3);
   }

   .svc-lab-grid {
      grid-template-columns: 1fr 1fr;
   }

   .svc-access-grid {
      grid-template-columns: 1fr;
      max-width: 100%;
   }

   .svc-proc-how-track {
      grid-template-columns: 1fr 1fr;
   }

   .svc-proc-how-track::before {
      display: none;
   }

   .svc-report-ref-row {
      grid-template-columns: 1fr 1fr;
   }

   .svc-rrr-unit,
   .svc-rrr-time {
      display: none;
   }

   .svc-rr-header .svc-rrr-unit,
   .svc-rr-header .svc-rrr-time {
      display: none;
   }

   /* universal master template new sections end */

   .tkr-symptom-card__icon-wrap {
      height: unset;
   }

   .page-template-template-service-orthopedic-inner-page-php .svc-about__img.clinical-card {
      height: auto;
      border-radius: 15px;
   }

   .page-template-template-service-orthopedic-inner-page .svc-about__img-decor {
      bottom: 5px;
      left: -15px;
      border-radius: 20px;
   }

}

/* ── Mobile (≤ 640px) ── */
@media (max-width:640px) {
   .tkr-hero {
      padding: 32px 0 40px;
   }

   .tkr-hero__stats {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
   }

   .tkr-hero__stat-num {
      font-size: 20px;
   }

   .svc-about__img-badge {
      left: 12px;
      bottom: -14px;
      padding: 10px 14px;
      gap: 10px;
   }

   .svc-about__badge-num {
      font-size: 18px;
   }

   .tkr-symptoms__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
   }

   .tkr-symptom-card__fa-icon {
      font-size: 40px;
      line-height: 90px;
   }

   /*.tkr-symptom-card__icon-img{width:90px;height:90px;}*/
   .svc-stats-bar {
      grid-template-columns: repeat(2, 1fr);
   }

   .svc-stats-bar__num {
      font-size: 30px;
   }

   .svc-why-grid {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .svc-surgeon__ctas {
      flex-direction: column;
   }

   .svc-surgeon__ctas .btn-primary,
   .svc-surgeon__ctas .svc-btn-outline {
      text-align: center;
      justify-content: center;
   }

   .tkr-timeline__steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
   }

   .tkr-timeline__dot {
      width: 38px;
      height: 38px;
      font-size: 15px;
   }

   .tkr-timeline__period {
      font-size: 11px;
   }

   .svc-testi-grid {
      grid-template-columns: 1fr;
   }

   .svc-dest-grid {
      grid-template-columns: 1fr;
      gap: 16px;
   }

   .svc-dest-card {
      padding: 20px;
      gap: 16px;
      border-radius: 10px;
   }

   .svc-dest-card__icon {
      width: 56px;
      height: 56px;
      font-size: 20px;
      border-radius: 8px;
   }

   .svc-dest-card__icon img {
      width: 28px;
      height: 28px;
   }

   .svc-pricing__inner {
      border-radius: 18px;
   }

   .svc-pricing__left {
      padding: 32px 24px 28px;
   }

   .svc-pricing__right {
      padding: 28px 24px 32px;
   }

   .svc-pricing__title {
      font-size: 20px;
   }

   .svc-blog-grid {
      grid-template-columns: 1fr;
   }

   .svc-cta-strip {
      padding: 40px 0;
   }

   .svc-cta-strip__title {
      font-size: 22px;
   }

   .svc-cta-strip__btns {
      flex-direction: column;
      align-items: center;
   }

   .svc-cta-strip__btns a {
      width: 100%;
      max-width: 280px;
      justify-content: center;
   }

   .kst-emergency__inner {
      flex-direction: column;
      text-align: center;
      gap: 10px;
   }

   .kst-hero {
      padding: 28px 0 36px;
   }

   .kst-hero__stats {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 16px;
   }

   .kst-hero__stat-num {
      font-size: 18px;
   }

   .kst-stone-grid {
      grid-template-columns: 1fr 1fr;
   }

   .kst-symptoms__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
   }

   .kst-treatment-grid {
      grid-template-columns: 1fr;
   }

   .kst-prevention__grid {
      grid-template-columns: 1fr;
   }

   .svc-blog-grid {
      grid-template-columns: 1fr;
   }

   /* Mobile blog slider — Slick picks up .kst-blog-slider (wired in script.js) */
   .kst-blog-slider {
      display: block;
   }

   .kst-blog-slider .svc-blog-card {
      margin: 0 8px;
   }

   /* Shared hero */
   .svc-hero {
      padding: 28px 0 36px;
   }

   .svc-hero__stats {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
   }

   .svc-hero__stat-num {
      font-size: 18px;
   }

   .svc-recovery-grid {
      grid-template-columns: 1fr;
   }

   .spine-pathway-track {
      grid-template-columns: 1fr 1fr;
      gap: 16px;
   }

   .spine-symptoms-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
   }

   .spine-conditions-grid {
      grid-template-columns: 1fr 1fr;
      gap: 14px;
   }

   .spine-treatment-grid {
      grid-template-columns: 1fr;
   }

   .spine-grade-track {
      grid-template-columns: 1fr 1fr;
   }

   .spine-grade-track.three-col {
      grid-template-columns: 1fr 1fr;
      max-width: none;
   }

   .spine-grading-cta-btns {
      flex-direction: column;
      align-items: center;
   }

   .spine-btn-grade-primary,
   .spine-btn-grade-secondary {
      width: 100%;
      max-width: 280px;
      justify-content: center;
   }

   .kst-emergency__text {
      max-width: 100%;
   }

   /* universal master template new sections start */
   /* universal master template new sections end */

}

/* ── Small mobile (≤ 479px) ── */
@media (max-width:479px) {
   .tkr-hero__title {
      font-size: 22px;
   }

   .tkr-hero__trust {
      gap: 6px;
   }

   .tkr-trust-badge {
      font-size: 11px;
      padding: 5px 10px;
   }

   .tkr-symptoms__grid {
      grid-template-columns: 1fr 1fr;
   }

   .tkr-proc-types__grid {
      grid-template-columns: 1fr;
   }

   .kst-stone-grid {
      grid-template-columns: 1fr;
   }

   .kst-symptoms__grid {
      grid-template-columns: 1fr 1fr;
   }

   .spine-symptoms-grid {
      grid-template-columns: 1fr 1fr;
   }

   .spine-conditions-grid {
      grid-template-columns: 1fr;
   }

   .spine-grade-track {
      grid-template-columns: 1fr;
   }

   .spine-grade-track.three-col {
      grid-template-columns: 1fr;
   }

   /* Mobile Sliders */
   .tkr-symptom-card__icon-img {
      max-height: 250px;
      height: 250px;
   }

   /* universal master template new sections start */
   .svc-lab-grid {
      grid-template-columns: 1fr;
   }

   /* universal master template new sections end */

}

/* ─── TREATMENT OPTIONS [SHARED — .svc-treatment-options] ───────── */
.svc-treatment-options {
   padding-top: var(--sp-9);
}

.svc-treatment-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
   margin-top: var(--sp-6);
}

.svc-treatment-card {
   background: #fff;
   border: 1.5px solid var(--clr-border-light, #f0f0f0);
   border-radius: var(--radius-xl);
   padding: 40px 32px;
   text-align: center;
   transition: var(--tr-base);
   height: 100%;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
   display: flex;
   flex-direction: column;
   align-items: center;
}

.svc-treatment-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
   border-color: var(--clr-accent-mid);
}

.svc-treatment-card__icon {
   width: 90px;
   height: 90px;
   background: var(--clr-bg-green);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
   flex-shrink: 0;
   transition: var(--tr-base);
}

.svc-treatment-card:hover .svc-treatment-card__icon {
   background: var(--clr-accent);
}

.svc-treatment-card__icon i {
   font-size: 36px;
   color: var(--clr-accent);
   transition: var(--tr-base);
}

.svc-treatment-card:hover .svc-treatment-card__icon i {
   color: #fff;
}

.svc-treatment-card__icon-img {
   display: flex;
   align-items: center;
   justify-content: center;
}

.svc-treatment-card__icon-img img {
   width: 44px;
   height: 44px;
   object-fit: contain;
   transition: var(--tr-base);
}

.svc-treatment-card:hover .svc-treatment-card__icon-img img {
   filter: brightness(0) invert(1);
}

.svc-treatment-card__title {
   font-family: var(--ff-heading);
   font-size: 20px;
   font-weight: var(--fw-bold);
   color: var(--clr-accent);
   margin-bottom: 16px;
   line-height: var(--lh-snug);
}

.svc-treatment-card__content {
   font-size: 14px;
   color: var(--clr-body);
   line-height: var(--lh-loose);
   text-align: left;
   width: 100%;
}

.svc-treatment-card__content ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.svc-treatment-card__content li {
   position: relative;
   padding-left: 20px;
   margin-bottom: 8px;
}

.svc-treatment-card__content li::before {
   content: '•';
   position: absolute;
   left: 0;
   color: var(--clr-accent);
   font-weight: bold;
}

.svc-treatment-card__content p {
   margin-bottom: 8px;
}

@media (max-width: 1024px) {
   .svc-treatment-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   .svc-treatment-grid {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .svc-treatment-card {
      padding: 32px 24px;
   }
}