/* Google Fonts — must be first rule per CSS spec */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/*
 * OncoPhysio New Site Pages — Frontend Stylesheet
 * Prefix: .opns-   (OncoPhysio New Site)
 *
 * ─── 2-COLUMN GRID RULE ──────────────────────────────────────────
 * .opns-two-col is the ONE universal class for every 2-column section.
 * It is applied identically to:
 *   • Specialized Oncology Care Areas
 *   • Why Indian Cancer Patients Trust Us
 *   • Patient Voices
 * No competing utility classes. No role="list" on containers.
 * ─────────────────────────────────────────────────────────────────
 */

/* =================================================================
   1. DESIGN TOKENS
================================================================= */
:root {
	--opns-primary:        #9912b1;
	--opns-primary-dk:     #7a0e8e;
	--opns-primary-lt:     #f9edfb;
	--opns-secondary:      #975be5;
	--opns-dark:           #1a1a2e;
	--opns-dark-2:         #333333;
	--opns-mid:            #6b7280;
	--opns-light:          #f4f7fc;
	--opns-white:          #ffffff;

	--opns-radius:         1rem;
	--opns-radius-sm:      0.5rem;
	--opns-radius-full:    9999px;

	--opns-shadow-sm:      0 1px 4px hsla(291,84%,18%,0.07);
	--opns-shadow-md:      0 4px 24px hsla(291,84%,18%,0.11);
	--opns-shadow-hover:   0 12px 40px hsla(291,84%,38%,0.22);

	--opns-transition:     0.25s ease-out;
	--opns-font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =================================================================
   2. RESET — scoped to .opns-page
================================================================= */
.opns-page *,
.opns-page *::before,
.opns-page *::after {
	box-sizing: border-box;
}

.opns-page {
	font-family:             var(--opns-font);
	font-size:               1rem;
	line-height:             1.65;
	color:                   var(--opns-dark-2);
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x:              hidden;
}

.opns-page h1,
.opns-page h2,
.opns-page h3,
.opns-page h4 {
	margin:      0;
	font-weight: 700;
	line-height: 1.25;
}

.opns-page p  { margin: 0; }
.opns-page ul { margin: 0; padding: 0; list-style: none; }

.opns-page img {
	max-width: 100%;
	height:    auto;
	display:   block;
}

.opns-page a {
	color:           var(--opns-primary);
	text-decoration: none;
	transition:      color var(--opns-transition);
}
.opns-page a:hover { color: var(--opns-primary-dk); }

/* Screen-reader text */
.opns-sr-only {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0,0,0,0);
	white-space: nowrap;
	border:     0;
}

/* =================================================================
   3. CONTAINER
================================================================= */
.opns-container {
	width:     100%;
	max-width: 1200px;
	margin:    0 auto;
	padding:   0 1.5rem;
}

/* =================================================================
   4. THE UNIVERSAL 2-COLUMN GRID   ← THE CRITICAL RULE
   ─────────────────────────────────────────────────────────────────
   This single class is used IDENTICALLY for every 2-column section.
   In addition, every grid container in the PHP also carries an
   inline style="display:grid;..." as an absolute override guarantee.
================================================================= */
.opns-two-col {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   2rem;
	align-items:           stretch;
	width:                 100%;
}

/* =================================================================
   5. SECTION HEADER
================================================================= */
.opns-section-header {
	text-align:    center;
	margin-bottom: 3rem;
	max-width:     760px;
	margin-left:   auto;
	margin-right:  auto;
}

.opns-section-title {
	font-size:      clamp(1.5rem, 3vw, 2rem);
	font-weight:    800;
	color:          var(--opns-dark);
	letter-spacing: -0.025em;
	margin-bottom:  1rem;
}

.opns-section-subtitle {
	font-size:   1.0625rem;
	color:       var(--opns-mid);
	line-height: 1.75;
}

/* =================================================================
   6. BADGE
================================================================= */
.opns-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            0.5rem;
	background:     var(--opns-primary-lt);
	color:          var(--opns-primary-dk);
	font-size:      0.8125rem;
	font-weight:    600;
	padding:        0.375rem 1rem;
	border-radius:  var(--opns-radius-full);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom:  1.25rem;
}

/* =================================================================
   7. BUTTONS
================================================================= */
.opns-page .opns-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             0.5rem;
	padding:         0.75rem 2rem;
	border-radius:   var(--opns-radius-full);
	font-size:       1rem;
	font-weight:     600;
	font-family:     var(--opns-font);
	cursor:          pointer;
	border:          2px solid transparent;
	text-decoration: none !important;
	transition:      background-color var(--opns-transition),
	                 color            var(--opns-transition),
	                 border-color     var(--opns-transition),
	                 box-shadow       var(--opns-transition),
	                 transform        var(--opns-transition);
}

.opns-page .opns-btn:hover,
.opns-page .opns-btn:focus-visible {
	transform: translateY(-2px);
}

.opns-page .opns-btn--primary {
	background:   var(--opns-primary);
	color:        #fff !important;
	border-color: var(--opns-primary);
}
.opns-page .opns-btn--primary:hover {
	background:   var(--opns-primary-dk);
	border-color: var(--opns-primary-dk);
	color:        #fff !important;
	box-shadow:   0 8px 24px hsla(291,84%,38%,0.40);
}

.opns-page .opns-btn--outline {
	background:   transparent;
	color:        var(--opns-primary) !important;
	border-color: var(--opns-primary);
}
.opns-page .opns-btn--outline:hover {
	background: var(--opns-primary);
	color:      #fff !important;
}

.opns-page .opns-btn--white {
	background:   #fff;
	color:        var(--opns-primary-dk) !important;
	border-color: #fff;
}
.opns-page .opns-btn--white:hover {
	background: var(--opns-primary-lt);
	color:      var(--opns-primary-dk) !important;
}

.opns-page .opns-btn--white-outline {
	background:   transparent;
	color:        #fff !important;
	border-color: rgba(255,255,255,0.7);
}
.opns-page .opns-btn--white-outline:hover {
	background:   rgba(255,255,255,0.15);
	border-color: #fff;
	color:        #fff !important;
}

/* =================================================================
   8. HERO
================================================================= */
.opns-hero {
	background: linear-gradient(135deg, #f9edfb 0%, #f0eafa 100%);
	padding:    5rem 0;
	position:   relative;
	overflow:   hidden;
}

.opns-hero--lymph {
	background: linear-gradient(135deg, #f0eafa 0%, #f9edfb 100%);
}

.opns-hero::before,
.opns-hero::after {
	content:        '';
	position:       absolute;
	border-radius:  50%;
	pointer-events: none;
	z-index:        0;
}
.opns-hero::before {
	width:      500px; height: 500px;
	background: hsla(291,84%,38%,0.07);
	top:        -150px; right: -100px;
}
.opns-hero::after {
	width:      350px; height: 350px;
	background: hsla(271,70%,62%,0.06);
	bottom:     -80px; left: -60px;
}

.opns-hero__inner {
	position:              relative;
	z-index:               1;
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   3rem;
	align-items:           center;
}

.opns-hero__content {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
}

.opns-hero__title {
	font-size:      clamp(1.75rem, 4vw, 2.5rem);
	font-weight:    800;
	color:          var(--opns-dark);
	letter-spacing: -0.03em;
	margin-bottom:  1.25rem;
}

.opns-hero__description {
	font-size:    1.0625rem;
	color:        #444;
	line-height:  1.75;
	margin-bottom: 2rem;
	max-width:    560px;
}

.opns-hero__cta-group {
	display:   flex;
	flex-wrap: wrap;
	gap:       1rem;
}

.opns-hero__image-wrap { position: relative; }

.opns-hero__figure {
	margin:        0;
	border-radius: 1.5rem;
	overflow:      hidden;
	box-shadow:    0 20px 60px hsla(291,84%,18%,0.18);
}

.opns-hero__img {
	width:      100%;
	height:     380px;
	object-fit: cover;
	display:    block;
	transition: transform 0.5s ease-out;
}
.opns-hero__figure:hover .opns-hero__img { transform: scale(1.03); }

.opns-hero__stat {
	position:       absolute;
	bottom:         -1.25rem;
	left:           -1.25rem;
	background:     #fff;
	border-radius:  var(--opns-radius);
	padding:        1rem 1.5rem;
	box-shadow:     0 10px 40px hsla(291,84%,18%,0.14);
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.25rem;
	min-width:      160px;
}
.opns-hero__stat-number {
	font-size:   2rem;
	font-weight: 800;
	color:       var(--opns-primary);
	line-height: 1;
}
.opns-hero__stat-label {
	font-size:      0.75rem;
	font-weight:    600;
	color:          var(--opns-mid);
	text-align:     center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* =================================================================
   9. SECTION WRAPPERS
================================================================= */
.opns-section         { padding: 5rem 0; }
.opns-section--white  { background: var(--opns-white); }
.opns-section--light  { background: var(--opns-light); }

/* =================================================================
   10. CARE AREA CARDS  — inside .opns-two-col
================================================================= */
.opns-card--care {
	background:    linear-gradient(160deg, #fff 0%, #f9edfb 100%);
	border:        1px solid #ecdff5;
	border-radius: var(--opns-radius);
	padding:       2rem;
	display:       flex;
	flex-direction: column;
	gap:           1rem;
	box-shadow:    var(--opns-shadow-sm);
	transition:    transform var(--opns-transition),
	               box-shadow var(--opns-transition),
	               border-color var(--opns-transition);
}
.opns-card--care:hover {
	transform:    translateY(-6px);
	box-shadow:   var(--opns-shadow-hover);
	border-color: #c879e0;
}

/* Icon wrapper */
.opns-card--care .opns-card__icon {
	width:           56px;
	height:          56px;
	background:      var(--opns-primary-lt);
	border-radius:   0.75rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--opns-primary);
	flex-shrink:     0;
}

/* Card body */
.opns-card--care .opns-card__body {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
	flex:           1;
}

.opns-card--care .opns-card__title {
	font-size:   1.125rem;
	font-weight: 700;
	color:       var(--opns-dark-2);
	line-height: 1.35;
}

.opns-card--care .opns-card__text {
	font-size:   0.9375rem;
	color:       #555;
	line-height: 1.7;
}

.opns-card--care .opns-card__list { margin: 0; padding: 0; list-style: none; }
.opns-card--care .opns-card__list li {
	position:      relative;
	padding-left:  1.25rem;
	margin-bottom: 0.375rem;
	font-size:     0.875rem;
	color:         #555;
	line-height:   1.6;
}
.opns-card--care .opns-card__list li::before {
	content:     '✓';
	position:    absolute;
	left:        0;
	color:       var(--opns-secondary);
	font-weight: 700;
}

/* =================================================================
   11. TRUST CARDS  — inside .opns-two-col
================================================================= */
.opns-card--trust {
	background:    #fff;
	border:        1px solid #ecdff5;
	border-radius: var(--opns-radius);
	padding:       2rem;
	box-shadow:    var(--opns-shadow-sm);
	transition:    transform var(--opns-transition), box-shadow var(--opns-transition);
}
.opns-card--trust:hover {
	transform:  translateY(-4px);
	box-shadow: var(--opns-shadow-md);
}

.opns-card--trust .opns-card__icon {
	font-size:     2rem;
	display:       block;
	margin-bottom: 1rem;
}
.opns-card--trust .opns-card__title {
	font-size:     1.125rem;
	font-weight:   700;
	color:         var(--opns-dark-2);
	margin-bottom: 0.75rem;
}
.opns-card--trust .opns-card__text {
	font-size:   0.9375rem;
	color:       #555;
	line-height: 1.7;
}

/* =================================================================
   12. TESTIMONIAL CARDS  — inside .opns-two-col
================================================================= */
.opns-card--testi {
	background:      var(--opns-primary-lt);
	border:          1px solid #e0b8f0;
	border-radius:   var(--opns-radius);
	padding:         2rem;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	gap:             1.25rem;
	height:          100%;
	box-sizing:      border-box;
	transition:      transform var(--opns-transition), box-shadow var(--opns-transition);
}
.opns-card--testi:hover {
	transform:  translateY(-4px);
	box-shadow: var(--opns-shadow-hover);
}

/* Opening quotation mark decoration */
.opns-card--testi::before {
	content:     '\201C';
	display:     block;
	font-size:   4rem;
	line-height: 1;
	color:       var(--opns-primary);
	opacity:     0.25;
	font-family: Georgia, 'Times New Roman', serif;
	margin-bottom: -1rem;
}

.opns-testi__text {
	font-size:  0.9375rem;
	color:      var(--opns-dark-2);
	line-height: 1.75;
	font-style: italic;
}

.opns-testi__footer { margin-top: auto; }

.opns-testi__author {
	display:    block;
	font-style: normal;
}
.opns-testi__name {
	display:     block;
	font-size:   1rem;
	font-weight: 700;
	color:       var(--opns-primary-dk);
}
.opns-testi__detail {
	display:    block;
	font-size:  0.8125rem;
	color:      var(--opns-mid);
	margin-top: 0.25rem;
}

/* =================================================================
   13. CTA SECTION
================================================================= */
.opns-cta {
	padding:    5rem 0;
	background: linear-gradient(135deg, var(--opns-primary) 0%, var(--opns-secondary) 100%);
	position:   relative;
	overflow:   hidden;
	text-align: center;
}
.opns-cta::before,
.opns-cta::after {
	content:        '';
	position:       absolute;
	border-radius:  50%;
	pointer-events: none;
}
.opns-cta::before {
	width: 400px; height: 400px;
	background: rgba(255,255,255,0.06);
	top: -100px; right: -100px;
}
.opns-cta::after {
	width: 300px; height: 300px;
	background: rgba(255,255,255,0.05);
	bottom: -80px; left: -80px;
}

.opns-cta__inner { position: relative; z-index: 1; }

.opns-cta__title {
	font-size:      clamp(1.5rem, 3vw, 2.5rem);
	font-weight:    800;
	color:          #fff;
	letter-spacing: -0.025em;
	margin-bottom:  1rem;
}
.opns-cta__text {
	font-size:    0.9375rem;
	color:        rgba(255,255,255,0.85);
	line-height:  1.6;
	margin-bottom: 2rem;
	white-space:  nowrap;
	overflow:     hidden;
	text-overflow: ellipsis;
}
.opns-cta__actions {
	display:         flex;
	flex-wrap:       wrap;
	gap:             1rem;
	justify-content: center;
}

/* =================================================================
   14. CDT PROTOCOL (subpage)
================================================================= */
.opns-cdt-phases {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   1.5rem;
	margin-bottom:         3rem;
}

.opns-cdt-phase {
	background: linear-gradient(135deg, var(--opns-primary) 0%, var(--opns-secondary) 100%);
	border-radius: var(--opns-radius);
	padding:    2rem;
	color:      #fff;
	position:   relative;
	overflow:   hidden;
}
.opns-cdt-phase::after {
	content:       '';
	position:      absolute;
	top:           -30px; right: -30px;
	width:         150px; height: 150px;
	background:    rgba(255,255,255,0.07);
	border-radius: 50%;
}

.opns-cdt-phase__badge {
	display:        inline-block;
	background:     rgba(255,255,255,0.2);
	color:          #fff;
	font-size:      0.75rem;
	font-weight:    700;
	padding:        0.25rem 0.75rem;
	border-radius:  var(--opns-radius-full);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom:  1rem;
}
.opns-cdt-phase__title {
	font-size:     1.125rem;
	font-weight:   700;
	margin-bottom: 0.75rem;
}
.opns-cdt-phase__desc {
	font-size:   0.9375rem;
	opacity:     0.9;
	line-height: 1.7;
}

.opns-cdt-subtitle {
	font-size:     1.375rem;
	font-weight:   700;
	color:         var(--opns-dark-2);
	text-align:    center;
	margin-bottom: 2rem;
}

/* CDT component cards */
.opns-card--cdt {
	background:    #fff;
	border:        1px solid #e4e4e7;
	border-radius: var(--opns-radius);
	padding:       2rem;
	display:       flex;
	flex-direction: column;
	gap:           1rem;
	box-shadow:    var(--opns-shadow-sm);
	transition:    transform var(--opns-transition), box-shadow var(--opns-transition);
}
.opns-card--cdt:hover {
	transform:  translateY(-4px);
	box-shadow: var(--opns-shadow-md);
}

.opns-card--cdt .opns-card__number {
	font-size:   3rem;
	font-weight: 800;
	color:       var(--opns-primary);
	opacity:     0.15;
	line-height: 1;
}
.opns-card--cdt .opns-card__title {
	font-size:   1.0625rem;
	font-weight: 700;
	color:       var(--opns-dark-2);
}
.opns-card--cdt .opns-card__text {
	font-size:   0.9375rem;
	color:       #555;
	line-height: 1.7;
}
.opns-card--cdt figure {
	margin:        0;
	border-radius: var(--opns-radius-sm);
	overflow:      hidden;
}
.opns-card--cdt img {
	width:      100%;
	height:     200px;
	object-fit: cover;
	transition: transform 0.5s ease-out;
}
.opns-card--cdt:hover img { transform: scale(1.04); }
.opns-card--cdt figcaption {
	font-size:  0.75rem;
	color:      var(--opns-mid);
	text-align: center;
	padding:    0.5rem 0.75rem;
	font-style: italic;
}

/* =================================================================
   15. INDIA-SPECIFIC CARDS (subpage)
================================================================= */
.opns-card--india {
	background:    #fff;
	border:        1px solid #ecdff5;
	border-radius: var(--opns-radius);
	padding:       2rem;
	box-shadow:    var(--opns-shadow-sm);
	transition:    transform var(--opns-transition),
	               box-shadow var(--opns-transition),
	               border-color var(--opns-transition);
}
.opns-card--india:hover {
	transform:    translateY(-4px);
	box-shadow:   var(--opns-shadow-md);
	border-color: #c09de0;
}

.opns-card--india .opns-card__icon {
	font-size:     2rem;
	display:       block;
	margin-bottom: 1rem;
}
.opns-card--india .opns-card__title {
	font-size:     1.0625rem;
	font-weight:   700;
	color:         var(--opns-dark-2);
	margin-bottom: 0.75rem;
}
.opns-card--india .opns-card__text {
	font-size:     0.9375rem;
	color:         #555;
	line-height:   1.7;
	margin-bottom: 1rem;
}
.opns-card--india .opns-card__list { margin: 0; padding: 0; list-style: none; }
.opns-card--india .opns-card__list li {
	position:      relative;
	padding-left:  1.25rem;
	margin-bottom: 0.625rem;
	font-size:     0.875rem;
	color:         #555;
	line-height:   1.65;
}
.opns-card--india .opns-card__list li::before {
	content:     '\2192';
	position:    absolute;
	left:        0;
	color:       var(--opns-secondary);
	font-weight: 700;
}

/* =================================================================
   16. TIMELINE (subpage)
================================================================= */
.opns-timeline {
	position:  relative;
	max-width: 760px;
	margin:    0 auto;
}
.opns-timeline::before {
	content:    '';
	position:   absolute;
	left:       28px;
	top:        0; bottom: 0;
	width:      2px;
	background: linear-gradient(180deg, var(--opns-primary) 0%, var(--opns-secondary) 100%);
	opacity:    0.3;
}
.opns-timeline__item {
	display:       flex;
	gap:           1.5rem;
	margin-bottom: 2.5rem;
}
.opns-timeline__item:last-child { margin-bottom: 0; }

.opns-timeline__marker {
	flex-shrink:     0;
	width:           58px;
	display:         flex;
	align-items:     flex-start;
	justify-content: center;
	padding-top:     0.5rem;
}
.opns-timeline__dot {
	display:       block;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	background:    #fff;
	border:        3px solid var(--opns-primary);
	box-shadow:    0 0 0 4px hsla(291,84%,38%,0.15);
	flex-shrink:   0;
	transition:    box-shadow var(--opns-transition), border-color var(--opns-transition);
}
.opns-timeline__item:hover .opns-timeline__dot {
	border-color: var(--opns-secondary);
	box-shadow:   0 0 0 6px hsla(271,70%,62%,0.20);
}

.opns-timeline__content {
	flex:          1;
	background:    var(--opns-light);
	border-radius: var(--opns-radius);
	padding:       1.5rem;
	border:        1px solid #ecdff5;
	transition:    box-shadow var(--opns-transition), border-color var(--opns-transition);
}
.opns-timeline__item:hover .opns-timeline__content {
	box-shadow:   var(--opns-shadow-md);
	border-color: #c09de0;
}
.opns-timeline__title {
	font-size:     1.0625rem;
	font-weight:   700;
	color:         var(--opns-dark-2);
	margin-bottom: 0.5rem;
}
.opns-timeline__text {
	font-size:   0.9375rem;
	color:       #555;
	line-height: 1.7;
}

/* =================================================================
   17. FLOATING ANIMATION
================================================================= */
@keyframes opns-float {
	0%   { transform: translateY(0)     rotate(0deg);     }
	33%  { transform: translateY(-8px)  rotate(0.2deg);   }
	66%  { transform: translateY(-13px) rotate(-0.15deg); }
	100% { transform: translateY(0)     rotate(0deg);     }
}

.opns-float {
	animation-name:            opns-float;
	animation-duration:        4s;
	animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
	animation-iteration-count: infinite;
	animation-fill-mode:       both;
	will-change:               transform;
}
.opns-float:hover { animation-play-state: paused; }

/* Stagger delays so cards don't all move in sync */
.opns-float:nth-child(1) { animation-delay: 0s;    }
.opns-float:nth-child(2) { animation-delay: 0.5s;  }
.opns-float:nth-child(3) { animation-delay: 1.0s;  }
.opns-float:nth-child(4) { animation-delay: 1.5s;  }
.opns-float:nth-child(5) { animation-delay: 0.25s; }
.opns-float:nth-child(6) { animation-delay: 0.75s; }
.opns-float:nth-child(7) { animation-delay: 1.25s; }
.opns-float:nth-child(8) { animation-delay: 1.75s; }

/* =================================================================
   18. ACCESSIBILITY — prefers-reduced-motion
================================================================= */
@media (prefers-reduced-motion: reduce) {
	.opns-float {
		animation: none !important;
		will-change: auto;
	}
	.opns-card--care,
	.opns-card--trust,
	.opns-card--testi,
	.opns-card--cdt,
	.opns-card--india,
	.opns-hero__figure {
		transition: none !important;
	}
}

/* =================================================================
   19. RESPONSIVE — TABLET  (≤ 1024px)
================================================================= */
@media (max-width: 1024px) {
	.opns-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.opns-hero__content { align-items: center; }
	.opns-hero__description { max-width: none; }
	.opns-hero__image-wrap { max-width: 550px; margin: 0 auto; }
}

/* =================================================================
   20. RESPONSIVE — MOBILE  (≤ 768px)
================================================================= */
@media (max-width: 768px) {
	.opns-hero,
	.opns-section,
	.opns-cta   { padding: 3rem 0; }

	.opns-container { padding: 0 1rem; }

	/* 2-col → 1 col for all sections */
	.opns-two-col   { grid-template-columns: 1fr; gap: 1.25rem; }
	.opns-cdt-phases { grid-template-columns: 1fr; }

	.opns-hero__img { height: 260px; }
	.opns-hero__stat {
		position: static;
		margin:   1.5rem auto 0;
		width:    fit-content;
	}
	.opns-hero__cta-group {
		flex-direction: column;
		align-items:    center;
		width:          100%;
	}
	.opns-hero__cta-group .opns-btn { width: 100%; }

	.opns-cta__actions { flex-direction: column; align-items: center; }
	.opns-cta__actions .opns-btn { width: 100%; max-width: 320px; }

	/* CTA text: let it wrap normally on small screens */
	.opns-cta__text {
		white-space: normal;
		font-size:   0.875rem;
	}

	.opns-section-header { margin-bottom: 2rem; }
}

/* =================================================================
   21. RESPONSIVE — SMALL MOBILE  (≤ 480px)
================================================================= */
@media (max-width: 480px) {
	.opns-card--care,
	.opns-card--trust,
	.opns-card--testi,
	.opns-card--cdt,
	.opns-card--india  { padding: 1.25rem; }

	.opns-hero__title  { font-size: 1.5rem; }

	.opns-timeline__item    { flex-direction: column; gap: 0.75rem; }
	.opns-timeline__marker  {
		width:           auto;
		flex-direction:  row;
		align-items:     center;
		justify-content: flex-start;
		gap:             0.75rem;
	}
	.opns-timeline::before  { display: none; }
}

/* =================================================================
   22. THEME OVERRIDE — sidebar removal + full-width content
================================================================= */
body.opns-full-width-page #secondary,
body.opns-full-width-page .secondary,
body.opns-full-width-page #sidebar,
body.opns-full-width-page .sidebar,
body.opns-full-width-page .widget-area,
body.opns-full-width-page [id*="sidebar"],
body.opns-full-width-page [class*="sidebar"] {
	display:   none !important;
	width:     0    !important;
	min-width: 0    !important;
}

body.opns-full-width-page #primary,
body.opns-full-width-page .content-area,
body.opns-full-width-page #main,
body.opns-full-width-page .site-main,
body.opns-full-width-page .hentry,
body.opns-full-width-page .entry-content,
body.opns-full-width-page .post-content,
body.opns-full-width-page .page-content,
body.opns-full-width-page .ast-container,
body.opns-full-width-page .site-content,
body.opns-full-width-page #content,
body.opns-full-width-page .inside-article,
body.opns-full-width-page #opns-content {
	width:     100% !important;
	max-width: 100% !important;
	float:     none !important;
	padding:   0    !important;
	margin:    0    !important;
}