/* Wrap Removal — page-specific touches */

/* Before / After pair component */
.ba-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ba-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; }
.ba-card .ba-imgs { display:grid; grid-template-columns: 1fr 1fr; }
.ba-card .ba-imgs > div { aspect-ratio: 4/3; position: relative; }
.ba-card .ba-imgs > div:first-child { border-right: 1px solid var(--border); }
.ba-card .ba-imgs .stamp { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.7); color: white; font-family: 'Outfit', sans-serif; font-weight:700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; z-index: 2; }
.ba-card .ba-cap { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.ba-card .ba-cap strong { display:block; font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--navy); font-size: 0.98rem; margin-bottom: 0.25rem; }
.ba-card .ba-cap span { color: var(--text-muted); font-size: 0.86rem; }
@media (max-width: 900px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ba-grid { grid-template-columns: 1fr; } }

/* Scenarios grid — sub-component of why-grid styling */
.scenarios-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.scenario-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; position: relative; }
.scenario-card .scenario-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(3,105,161,.08); color: var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom: 1rem; }
.scenario-card .scenario-tag { display:inline-block; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 4px; background: rgba(251,191,36,.18); color: #92400E; border: 1px solid rgba(251,191,36,.4); margin-bottom: 0.75rem; }
.scenario-card h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.scenario-card p { font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 900px) { .scenarios-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .scenarios-grid { grid-template-columns: 1fr; } }

/* CTA Block */
.cta-block { background: var(--navy); border-radius: var(--radius-lg); padding: 3rem 2rem; color: white; }
.cta-block .cta-head { text-align:center; max-width: 720px; margin: 0 auto 2.25rem; }
.cta-block .cta-head h2 { color: white; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-block .cta-head p { color: rgba(255,255,255,.78); margin-top: 0.65rem; }
.cta-options { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.cta-option { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 1.5rem; transition: all var(--ease); }
.cta-option:hover { background: rgba(14,165,233,.08); border-color: rgba(14,165,233,.3); }
.cta-option h3 { color: white; font-size: 1.1rem; margin-bottom: 0.5rem; }
.cta-option p { color: rgba(255,255,255,.8); font-size: 0.92rem; line-height: 1.55; margin-bottom: 1rem; }
.cta-option .cta-action { display:inline-flex; gap: 0.5rem; align-items:center; min-height:44px; padding:.5rem 0; color: var(--blue-light); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.9rem; }
@media (max-width: 900px) { .cta-options { grid-template-columns: 1fr; } }