/* ═════════════════════════════════════════════════════════════════
   SECTION 9 — SPECIFIC SITUATIONS (Sound Familiar?)
   2-column alternating dark/light cards.
   ═════════════════════════════════════════════════════════════════ */

.situ { background: var(--cream); }
.situ-head { text-align: left; margin-bottom: clamp(48px, 6vw, 58px); max-width: 1100px; }
.situ-head .display .hl-line { text-transform: uppercase; }
/* Section-9 eyebrow inherits the base .eyebrow rule (Urbanist 20/22/600
   uppercase) + .eyebrow.orange for the #FF4F00 colour. No further
   overrides needed here. */
/* Keep "Sound" and "familiar?" on the same line — override the default
   block display applied by typography.css to .display .hl-line. */
.situ-head .display .hl-line,
.situ-head .display .it-tail { display: inline; }
.situ-head .display .it-tail {
	margin-left: .3em;
}
.situ-head .hl-line .split-word .sw-inner{ padding: 0.12em 0 0.22em 0; }
.situ-head .it-tail .split-word .sw-inner{ padding: 0.12em 0.15em 0.22em 0; }
.situ-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 2.4vw, 40px);
}
.situ-card {
	border-radius: 28px;
	padding: clamp(32px, 3vw, 56px);
	display: flex; flex-direction: column; gap: 1.5rem;
	min-height: 420px;
	transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.situ-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,.12); }

/* ── Card themes ── */
.situ-card.dark  { background: var(--orange); color: var(--cream); }
.situ-card.light { background: #fff; color: var(--ink); border: 1px solid var(--rule); }

.situ-card h3 {
	font-size: var(--fs-card-title);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.01em;
	white-space: pre-line;
}
.situ-card.light h3 { color: var(--orange); }

.situ-card p { font-size: 22px; line-height: 1.55; margin: 0; opacity: .85; }
.situ-card .btn { margin-top: auto; align-self: flex-start; width: 100%; max-width: 360px; text-align: center; }

/* ── Responsive ── */
@media (max-width: 767px) { .situ-grid { grid-template-columns: 1fr; } }