/* sections/service-strategy.php */
.ss-section {
	box-sizing: border-box; width: 100%;
	padding: var(--space-section) var(--space-gutter);
	background: var(--c-bg); color: var(--c-text);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.ss-section *, .ss-section *::before, .ss-section *::after { box-sizing: border-box; }
.ss-icon { flex: none; width: 1.375rem; height: 1.375rem; }
.ss-inner { display: grid; gap: var(--space-7); max-width: var(--container); margin: 0 auto; }
.ss-inner > * { min-width: 0; }

/* Picture card: same shape as in the page sub-header (two large opposite corners, outlined twin behind) */
.ss-visual { position: relative; --ss-shape: var(--radius-lg) 3.5rem var(--radius-lg) 3.5rem; }
.ss-visual::after {
	content: ""; position: absolute; z-index: 0; inset: 0;
	border: 1px solid color-mix(in srgb, var(--c-primary) 28%, transparent); border-radius: var(--ss-shape);
	transform: translate(0.625rem, 0.625rem); pointer-events: none;
}
.ss-media {
	position: relative; z-index: 1; overflow: hidden; margin: 0; aspect-ratio: 16 / 10;
	border-radius: var(--ss-shape); background: var(--c-primary-soft); box-shadow: var(--shadow-md);
}
.ss-section .ss-img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
/* No picture yet: an empty frame, kept quiet. */
.ss-media--empty { display: grid; place-items: center; border: 1px dashed color-mix(in srgb, var(--c-primary) 35%, transparent); box-shadow: none; }
.ss-empty { display: grid; justify-items: center; gap: var(--space-2); color: color-mix(in srgb, var(--c-primary) 45%, transparent); font-size: var(--fs-xs); font-weight: 600; text-align: center; }
.ss-empty .ss-icon { width: 2.5rem; height: 2.5rem; stroke-width: 1.2; }
/* Portrait picture on small screens: shown whole, in a frame narrower than the column. */
.ss-visual--portrait { width: 100%; max-width: 24rem; margin-inline: auto; }
.ss-visual--portrait .ss-media { aspect-ratio: var(--ss-ratio); }

.ss-label {
	display: inline-flex; align-items: center; gap: var(--space-2);
	margin: 0 0 var(--space-4); padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill); background: var(--c-primary-soft); color: var(--c-primary);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.ss-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.ss-section .ss-title {
	margin: 0; color: var(--c-heading);
	font-family: var(--f-heading); font-size: var(--fs-2xl); font-weight: 800;
	line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.ss-title-accent { display: block; color: var(--c-primary); }
.ss-intro { margin: var(--space-4) 0 0; color: var(--c-text-muted); font-size: var(--fs-lg); }

/* Signs: small numbered cards; the number turns red and the card lifts on hover */
.ss-list { display: grid; gap: var(--space-3); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.ss-item {
	display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start;
	padding: var(--space-4); border: 1px solid transparent; border-radius: var(--radius); background: var(--c-bg-alt);
	transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.ss-item:hover { border-color: color-mix(in srgb, var(--c-primary) 30%, transparent); background: var(--c-surface); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.ss-item-num {
	display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
	border-radius: var(--radius-sm); background: var(--c-primary-soft); color: var(--c-primary);
	font: 800 var(--fs-sm)/1 var(--f-heading); transition: background-color 0.25s, color 0.25s;
}
.ss-item:hover .ss-item-num { background: var(--c-accent); color: var(--c-on-accent); }
.ss-item-text { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.ss-item-text strong, .ss-closing-text strong { color: var(--c-heading); font-weight: 700; }

/* Closing sentence beside the phone button: navy pill with a red round badge */
.ss-closing { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--c-border); }
.ss-closing-text { flex: 1 1 16rem; margin: 0; color: var(--c-text-muted); font-size: var(--fs-lg); }
.ss-home { margin: var(--space-4) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.ss-section .ss-home-link { color: var(--c-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.ss-section .ss-home-link:hover, .ss-section .ss-home-link:focus { color: var(--c-accent); }
.ss-section .ss-btn {
	display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex: none;
	min-height: 3.5rem; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
	border-radius: var(--radius-pill); background: var(--c-primary); color: var(--c-on-primary);
	box-shadow: var(--shadow-md);
	font: 700 var(--fs-base)/1.2 var(--f-body); text-decoration: none; white-space: nowrap; transition: background-color 0.25s, transform 0.25s;
}
.ss-section .ss-btn:hover, .ss-section .ss-btn:focus { background: var(--c-primary-hover); color: var(--c-on-primary); transform: translateY(-2px); }
.ss-btn-icon {
	display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
	background: var(--c-accent); color: var(--c-on-accent); transition: transform 0.25s;
}
.ss-btn-icon .ss-icon { width: 1.25rem; height: 1.25rem; }
.ss-btn:hover .ss-btn-icon, .ss-btn:focus-visible .ss-btn-icon { transform: scale(1.06) rotate(-10deg); }
.ss-section .ss-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }

@media (min-width: 480px) {
	.ss-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ss-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: stretch; }
	/* The picture card is as tall as the text column. */
	.ss-visual { --ss-shape: var(--radius-lg) 5rem var(--radius-lg) 5rem; display: flex; max-width: none; min-height: 24rem; }
	.ss-visual .ss-media { flex: 1; aspect-ratio: auto; }
	.ss-media .ss-img { position: absolute; inset: 0; }
	.ss-visual::after { transform: translate(-1rem, 1rem); }
}
@media (prefers-reduced-motion: reduce) {
	.ss-section * { transition: none !important; }
}