/* ============================================================
   SWITALSKI.LAW — Home (front-page.php). Port of hero.jsx
   (HeroTerminal), sections.jsx and insights.jsx.
   Breakpoints: 640 / 920 / 1100 / 1400 (literals sanctioned in
   media queries only — see tokens.css).
   ============================================================ */

/* ------------------------------------------------------------
   Shared on this page: mono tag pill (common.jsx Tag)
   ------------------------------------------------------------ */

.sl-tag {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	padding: var(--sp-3) var(--s-2);
	border: var(--bw-1-5) solid var(--gold);
	color: var(--gold);
	border-radius: var(--r-1);
	letter-spacing: 0.2px;
	text-transform: uppercase;
	white-space: nowrap;
	display: inline-block;
}

/* Dark section shell (every home section sits on --ink) */
.sl-hero,
.sl-services,
.sl-crossborder,
.sl-about,
.sl-steps,
.sl-logos,
.sl-insights-teaser {
	background: var(--ink);
	color: var(--paper);
}

.sl-services,
.sl-crossborder,
.sl-about,
.sl-steps,
.sl-logos,
.sl-insights-teaser {
	border-top: var(--bw-1) solid var(--border-inv-faint);
	/* Anchor jump: the section HEADING should land ~16px under the
	   sticky header. Sections carry their own --s-9 top padding, so the
	   margin compensates for it — the section's (invisible) top edge may
	   slide under the header, the heading sits right where wanted. */
	scroll-margin-top: calc(var(--scroll-offset) - var(--s-9));
}

.sl-services__inner,
.sl-crossborder__inner,
.sl-about__inner,
.sl-steps__inner,
.sl-logos__inner,
.sl-insights-teaser__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

/* Section head pattern: big display H2 + right-aligned sub */
.sl-services__head,
.sl-crossborder__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s-5);
	margin-bottom: var(--s-7);
}

.sl-crossborder__head {
	align-items: flex-start;
}

.sl-services__heading,
.sl-crossborder__heading,
.sl-steps__heading,
.sl-insights-teaser__heading {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-sec-h2);
	line-height: 0.95;
	margin: 0;
	color: var(--paper);
	letter-spacing: -0.01em;
	max-width: var(--mw-800);
}

.sl-services__sub,
.sl-crossborder__sub {
	font-family: var(--font-body);
	font-size: var(--fs-15);
	color: var(--n-300);
	margin: 0;
	max-width: var(--mw-360);
	line-height: 1.55;
}

/* ------------------------------------------------------------
   HERO — terminal variant (frozen)
   ------------------------------------------------------------ */

.sl-hero {
	position: relative;
	overflow: hidden;
	padding: var(--s-10) var(--s-6) var(--sp-80);
	display: flex;
	align-items: center;
	min-height: 100vh;
}

/* Three composed texture layers — static ornaments under the content */
.sl-hero__bg-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* (1) Architectural column hairlines, fading top & bottom */
.sl-hero__bg-layer--stripes {
	background-image: repeating-linear-gradient(
		90deg,
		transparent 0,
		transparent calc(12.5% - 1px),
		var(--hero-bg-stripe) calc(12.5% - 1px),
		var(--hero-bg-stripe) 12.5%
	);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--ink-pure) 14%, var(--ink-pure) 82%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, var(--ink-pure) 14%, var(--ink-pure) 82%, transparent 100%);
}

/* (2) Gold dot mesh pooled centre-right (drifts slowly) */
.sl-hero__bg-layer--dots-gold {
	background-image: radial-gradient(circle at center, var(--hero-bg-dot-gold) 1px, transparent 1.4px);
	background-size: var(--hero-bg-grid-gold) var(--hero-bg-grid-gold);
	opacity: var(--hero-bg-dot-gold-opacity);
	-webkit-mask-image: radial-gradient(135% 125% at 66% 40%, var(--ink-pure) 0%, var(--ink-pure) 44%, rgba(0,0,0,0.4) 74%, transparent 96%);
	mask-image: radial-gradient(135% 125% at 66% 40%, var(--ink-pure) 0%, var(--ink-pure) 44%, rgba(0,0,0,0.4) 74%, transparent 96%);
	animation: sl-hero-drift 24s linear infinite;
}

/* (3) Coarse white dot echo anchored upper-left */
.sl-hero__bg-layer--dots-white {
	background-image: radial-gradient(circle at center, var(--hero-bg-dot-white) 1px, transparent 1.6px);
	background-size: var(--hero-bg-grid-white) var(--hero-bg-grid-white);
	-webkit-mask-image: radial-gradient(78% 80% at -2% -6%, var(--ink-pure) 0%, rgba(0,0,0,0.5) 42%, transparent 74%);
	mask-image: radial-gradient(78% 80% at -2% -6%, var(--ink-pure) 0%, rgba(0,0,0,0.5) 42%, transparent 74%);
}

/* Hairline crop bracket, top-left */
.sl-hero__bracket {
	position: absolute;
	top: var(--hero-bracket-top);
	left: var(--hero-bracket-left);
	width: var(--hero-bracket-size);
	height: var(--hero-bracket-size);
	pointer-events: none;
	z-index: 0;
	border-top: var(--bw-1) solid var(--hero-bracket-line);
	border-left: var(--bw-1) solid var(--hero-bracket-line);
}

/* Oversized faint rings, lower-left */
.sl-hero__ring {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.sl-hero__ring--gold {
	left: var(--hero-ring-lg-left);
	bottom: var(--hero-ring-lg-bottom);
	width: var(--hero-ring-lg-size);
	height: var(--hero-ring-lg-size);
	border: var(--bw-1) solid var(--hero-ring-gold);
}

.sl-hero__ring--white {
	left: var(--hero-ring-sm-left);
	bottom: var(--hero-ring-sm-bottom);
	width: var(--hero-ring-sm-size);
	height: var(--hero-ring-sm-size);
	border: var(--bw-1) solid var(--hero-ring-white);
}

/* Giant S watermark, upper-right */
.sl-hero__watermark {
	position: absolute;
	right: var(--hero-s-right);
	top: var(--hero-s-top);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--hero-s-size);
	line-height: 0.78;
	color: transparent;
	-webkit-text-stroke: var(--bw-2) var(--hero-s-stroke);
	user-select: none;
	pointer-events: none;
	letter-spacing: -0.02em;
	z-index: 0;
}

.sl-hero__watermark-dot {
	color: var(--hero-s-dot);
	-webkit-text-stroke: 0;
}

.sl-hero__grid {
	position: relative;
	max-width: var(--container-max);
	width: 100%;
	margin: 0 auto;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr 0.9fr;
	gap: var(--sp-56);
	align-items: center;
}

.sl-hero__h1 {
	text-transform: uppercase;
	font-size: var(--t-hero-h1);
	line-height: 0.94;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--paper);
	font-weight: 700;
	font-family: var(--font-display);
	text-wrap: balance;
}

.sl-hero__h1-outline {
	-webkit-text-stroke: var(--bw-1-5) var(--paper);
	color: transparent;
}

.sl-hero__h1-accent {
	color: var(--gold);
}

.sl-hero__lead {
	font-family: var(--font-body);
	font-size: var(--fs-18);
	line-height: 1.55;
	color: var(--n-200);
	max-width: var(--mw-560);
	margin: var(--sp-26) 0 0;
}

.sl-hero__ctas {
	display: flex;
	gap: var(--sp-14);
	margin-top: var(--sp-34);
	flex-wrap: wrap;
	align-items: center;
}

/* Fake terminal console */
.sl-hero__console {
	width: 100%;
	background: var(--surface-inv-ctl);
	border: var(--bw-1) solid var(--border-inv-mid);
	border-radius: var(--r-2);
	box-shadow: var(--shadow-console);
	padding: var(--sp-20) var(--s-5);
	font-family: var(--font-mono);
	font-size: var(--fs-13-5);
	line-height: 1.95;
	color: var(--n-200);
}

.sl-hero__console-bar {
	display: flex;
	align-items: center;
	gap: var(--sp-10);
	margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-10)) var(--sp-14);
	padding: 0 var(--sp-10) var(--s-3);
	border-bottom: var(--bw-1) solid var(--border-inv-soft);
	font-size: var(--fs-10);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--n-400);
}

.sl-hero__console-dots {
	display: inline-flex;
	gap: var(--sp-5);
}

.sl-hero__console-dot {
	width: var(--s-2);
	height: var(--s-2);
	border-radius: 50%;
	display: inline-block;
}

.sl-hero__console-dot--danger  { background: var(--danger); }
.sl-hero__console-dot--warning { background: var(--warning); }
.sl-hero__console-dot--gold    { background: var(--gold); }

.sl-hero__console-line {
	display: block;
}

.sl-hero__console-key {
	color: var(--n-400);
	white-space: pre;
}

.sl-hero__console-eq {
	color: var(--n-300);
}

.sl-hero__console-val {
	color: var(--console-string);
}

.sl-hero__console-ok {
	display: block;
	margin-top: var(--sp-10);
}

.sl-hero__console-hash {
	color: var(--n-500);
}

.sl-hero__console-ready {
	color: var(--console-success);
}

.sl-hero__cursor {
	display: inline-block;
	width: var(--s-2);
	height: var(--sp-14);
	background: var(--gold);
	vertical-align: -2px;
	margin-left: var(--sp-6);
	animation: sl-hero-cursor 1s steps(1) infinite;
}

@keyframes sl-hero-drift {
	0%   { background-position: 0 0; }
	100% { background-position: var(--s-6) var(--s-6); }
}

@keyframes sl-hero-cursor {
	50% { background: transparent; }
}

/* ------------------------------------------------------------
   SERVICES GRID — expandable cards
   ------------------------------------------------------------ */

.sl-services {
	padding: var(--s-9) var(--s-6);
}

.sl-services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-20);
}

.sl-services__cell.is-open {
	grid-column: span 2;
}

.sl-service-card {
	text-align: left;
	width: 100%;
	background: var(--ink);
	color: var(--paper);
	border: var(--bw-2) solid var(--paper);
	box-shadow: var(--shadow-card-gold);
	transform: translate(0, 0);
	transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease;
	padding: var(--s-5);
	min-height: 220px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-14);
	cursor: pointer;
	font-family: inherit;
}

.sl-service-card:hover,
.sl-service-card:focus-visible,
.sl-service-card[aria-expanded="true"] {
	box-shadow: 0 0 0 0 var(--gold);
	transform: translate(var(--s-1), var(--s-1));
}

.sl-service-card[aria-expanded="true"] {
	min-height: auto;
}

/* Tier 1 — paper card; colour is the only differentiator */
.sl-service-card--lead {
	background: var(--paper);
	color: var(--ink);
}

.sl-service-card__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--s-3);
}

.sl-service-card__tags {
	display: flex;
	gap: var(--sp-6);
	flex-wrap: wrap;
}

.sl-service-card__tag {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	padding: var(--sp-3) var(--s-2);
	border: var(--bw-1-5) solid var(--gold);
	color: var(--gold);
	border-radius: var(--r-1);
	letter-spacing: 0.2px;
	text-transform: uppercase;
	white-space: nowrap;
}

.sl-service-card--lead .sl-service-card__tag {
	border-color: var(--ink);
	color: var(--ink);
}

.sl-service-card__flag {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	padding: var(--sp-3) var(--s-2);
	background: var(--gold);
	color: var(--ink);
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.sl-service-card__h {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-h3);
	line-height: 1.0;
	margin: 0;
	letter-spacing: -0.005em;
	color: inherit;
}

.sl-service-card__sub {
	font-family: var(--font-body);
	font-size: var(--fs-13);
	line-height: 1.5;
	color: var(--n-300);
	margin: 0;
}

.sl-service-card--lead .sl-service-card__sub {
	color: var(--n-600);
}

.sl-service-card__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}

.sl-service-card[aria-expanded="true"] .sl-service-card__foot {
	margin-top: var(--s-1);
}

.sl-service-card__toggle {
	font-family: var(--font-body);
	font-size: var(--fs-13);
	font-weight: 600;
	color: var(--gold);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-6);
}

.sl-service-card--lead .sl-service-card__toggle {
	color: var(--ink);
}

.sl-service-card__plus {
	display: inline-flex;
	transition: transform .2s ease;
}

.sl-service-card[aria-expanded="true"] .sl-service-card__plus {
	transform: rotate(45deg);
}

.sl-service-card__toggle-close {
	display: none;
}

.sl-service-card[aria-expanded="true"] .sl-service-card__toggle-open {
	display: none;
}

.sl-service-card[aria-expanded="true"] .sl-service-card__toggle-close {
	display: inline;
}

/* Expanded detail — in the DOM, hidden until open */
.sl-service-card__detail {
	display: none;
	margin-top: var(--s-2);
	padding-top: var(--s-4);
	border-top: var(--bw-1) dashed var(--border-inv-mid);
	flex-direction: column;
	gap: var(--sp-10);
}

.sl-service-card--lead .sl-service-card__detail {
	border-top-color: var(--n-200);
}

.sl-service-card[aria-expanded="true"] .sl-service-card__detail {
	display: flex;
	animation: sl-service-expand .25s ease-out;
}

.sl-service-card__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	letter-spacing: 0.12em;
	color: var(--gold);
	text-transform: uppercase;
}

.sl-service-card--lead .sl-service-card__eyebrow {
	color: var(--ink);
}

.sl-service-card__children {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-10);
	column-gap: var(--s-5);
}

.sl-service-card__children li {
	font-family: var(--font-body);
	font-size: var(--fs-13);
	line-height: 1.45;
	color: var(--n-200);
	display: flex;
	gap: var(--sp-10);
	align-items: flex-start;
}

.sl-service-card--lead .sl-service-card__children li {
	color: var(--n-700);
}

.sl-service-card__ar {
	color: var(--gold);
	font-weight: 700;
	margin-top: var(--sp-2);
}

.sl-service-card--lead .sl-service-card__ar {
	color: var(--ink);
}

.sl-service-card__diff {
	font-family: var(--font-body);
	font-size: var(--fs-13);
	line-height: 1.5;
	font-style: italic;
	color: var(--gold);
	margin: 0;
	border-left: var(--bw-2) solid var(--gold);
	padding-left: var(--s-3);
}

.sl-service-card--lead .sl-service-card__diff {
	color: var(--ink);
	border-left-color: var(--ink);
}

.sl-service-card__links {
	margin-top: var(--s-3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-5);
}

.sl-service-card__more,
.sl-service-card__brief {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-body);
	font-size: var(--fs-13);
	font-weight: 600;
	padding: var(--s-2) 0;
	cursor: pointer;
}

.sl-service-card__more {
	color: var(--n-200);
}

.sl-service-card--lead .sl-service-card__more {
	color: var(--n-700);
}

.sl-service-card__brief {
	color: var(--gold);
	border-bottom: var(--bw-2) solid var(--gold);
}

.sl-service-card--lead .sl-service-card__brief {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

@keyframes sl-service-expand {
	from { opacity: 0; transform: translateY(calc(-1 * var(--s-1))); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   CROSS-BORDER
   ------------------------------------------------------------ */

.sl-crossborder {
	padding: var(--s-9) var(--s-6);
}

.sl-crossborder__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-20);
}

.sl-crossborder__block {
	background: var(--surface-inv-card);
	border: var(--bw-1) solid var(--border-inv-mid);
	border-left: var(--bw-3) solid var(--gold);
	padding: var(--sp-28) var(--sp-30);
}

.sl-crossborder__tag-row {
	margin-bottom: var(--s-4);
}

.sl-crossborder__block-h {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--fs-28);
	line-height: 1.02;
	margin: 0 0 var(--sp-14);
	color: var(--paper);
	letter-spacing: -0.005em;
}

.sl-crossborder__block-p {
	font-family: var(--font-body);
	font-size: var(--fs-15-5);
	line-height: 1.6;
	color: var(--n-300);
	margin: 0;
}

.sl-crossborder__cta-row {
	margin-top: var(--s-5);
}

.sl-crossborder__link {
	font-family: var(--font-body);
	font-size: var(--fs-15);
	font-weight: 500;
	color: var(--gold);
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-7);
	transition: color 150ms ease-out;
}

.sl-crossborder__link:hover,
.sl-crossborder__link:focus-visible {
	color: var(--paper);
}

.sl-crossborder__link-ar {
	font-family: var(--font-mono);
	display: inline-block;
	transition: transform 150ms ease-out;
}

.sl-crossborder__link:hover .sl-crossborder__link-ar {
	transform: translateX(var(--sp-3));
}

.sl-crossborder__jur {
	margin-top: var(--sp-28);
	display: flex;
	align-items: center;
	gap: var(--sp-18);
	flex-wrap: wrap;
}

.sl-crossborder__jur-label {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--n-400);
}

.sl-crossborder__jur-tags {
	display: flex;
	gap: var(--sp-10);
	flex-wrap: wrap;
}

.sl-crossborder__jur-tag {
	font-family: var(--font-mono);
	font-size: var(--fs-12);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--paper);
	border: var(--bw-1) solid var(--border-inv-ctl);
	border-radius: var(--r-1);
	padding: var(--sp-5) var(--sp-11);
}

/* ------------------------------------------------------------
   CROSS-BORDER DIAGRAM (Faza 6.11)
   Static SVG — no transitions, no transforms, nothing for
   prefers-reduced-motion to suppress. Colour comes from tokens
   only; the markup carries classes, never literal fills.
   ------------------------------------------------------------ */

.sl-xb-dia {
	margin: var(--s-7) 0 var(--s-8);
	/* Inline padding stays modest — every extra px here comes straight
	   out of the phone-width budget the narrow SVG variant below was
	   calibrated against (see .sl-xb-dia__svg--narrow, Faza 6.11). */
	padding: var(--s-5) var(--s-4);
	/* Muted gold wash — separates the diagram from the section's plain
	   black background without competing with the gold CTA/hub accents
	   inside it. Both values are existing tokens already used for the
	   same "subtle panel" purpose elsewhere (hub.css, layout.css). */
	background: var(--gold-tint-05);
	border: var(--bw-1) solid var(--gold-tint-14);
}

.sl-xb-dia__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* One layout at a time. display:none also drops the inactive variant
   from the accessibility tree, so its labels are never announced twice. */
.sl-xb-dia__svg--narrow {
	display: none;
}

/* Nodes ------------------------------------------------------ */

.sl-xb-dia__node {
	fill: var(--surface-inv-card);
	stroke: var(--border-inv-ctl);
	stroke-width: var(--bw-1);
}

/* The hub is the most prominent thing in the diagram. */
.sl-xb-dia__node--hub {
	fill: var(--surface-inv-ctl);
	stroke: var(--gold);
	stroke-width: var(--bw-2);
}

.sl-xb-dia__node--reg {
	fill: var(--surface-inv-card);
	stroke: var(--border-inv-row);
}

/* Dashed container: engaged only when the law demands it. */
.sl-xb-dia__pen {
	fill: none;
	stroke: var(--border-inv-ctl);
	stroke-width: var(--bw-1);
	stroke-dasharray: 6 5;
}

.sl-xb-dia__sub {
	fill: var(--surface-inv-card);
	stroke: var(--border-inv-soft);
	stroke-width: var(--bw-1);
}

/* Connectors ------------------------------------------------- */

/* The only line the client touches — bold, gold. */
.sl-xb-dia__flow {
	stroke: var(--gold);
	stroke-width: var(--bw-3);
}

.sl-xb-dia__flow-head {
	fill: var(--gold);
}

.sl-xb-dia__link {
	stroke: var(--border-inv-ctl-2);
	stroke-width: var(--bw-2);
	fill: none;
}

.sl-xb-dia__link--dashed {
	stroke-dasharray: 6 5;
}

.sl-xb-dia__link-head {
	fill: var(--n-400);
}

/* Labels — real <text>, so these are ordinary type rules ------ */

.sl-xb-dia__t {
	font-family: var(--font-body);
	font-size: var(--fs-15);
	fill: var(--n-200);
}

.sl-xb-dia__t--hub {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-22);
	text-transform: uppercase;
	fill: var(--paper);
}

.sl-xb-dia__t--flow,
.sl-xb-dia__t--pen {
	font-family: var(--font-mono);
	font-size: var(--fs-12);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sl-xb-dia__t--flow {
	fill: var(--gold);
	text-anchor: start;
}

.sl-xb-dia__t--pen {
	fill: var(--n-400);
}

.sl-xb-dia__t--reg {
	fill: var(--n-200);
}

.sl-xb-dia__t--sub {
	font-size: var(--fs-14);
	fill: var(--n-300);
}

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */

.sl-about {
	padding: var(--sp-120) var(--s-6);
	position: relative;
	overflow: hidden;
}

.sl-about__ornament {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 40%;
	background-image:
		linear-gradient(var(--gold-tint-05) 1px, transparent 1px),
		linear-gradient(90deg, var(--gold-tint-05) 1px, transparent 1px);
	background-size: var(--s-7) var(--s-7);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--ink-pure) 30%, var(--ink-pure) 100%);
	mask-image: linear-gradient(90deg, transparent 0%, var(--ink-pure) 30%, var(--ink-pure) 100%);
	pointer-events: none;
}

.sl-about__inner {
	position: relative;
	z-index: 1;
}

.sl-about__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--sp-72);
	align-items: start;
}

.sl-about__portrait {
	aspect-ratio: 4 / 5;
	border: var(--bw-2) solid var(--paper);
	box-shadow: var(--shadow-card-lg-gold);
	position: relative;
	overflow: hidden;
	background: var(--portrait-frame-bg);
}

.sl-about__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.sl-about__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--s-6) var(--s-5) var(--sp-22);
	background: var(--about-caption-scrim);
	color: var(--paper);
}

.sl-about__caption-label {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	color: var(--paper);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-10);
}

.sl-about__caption-dash {
	width: var(--sp-18);
	height: var(--sp-2);
	background: var(--gold);
	display: inline-block;
}

.sl-about__caption-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-28);
	text-transform: uppercase;
	margin-top: var(--sp-6);
	line-height: 1;
	letter-spacing: -0.005em;
}

.sl-about__caption-role {
	font-family: var(--font-body);
	font-size: var(--fs-13);
	color: var(--n-200);
	margin-top: var(--sp-6);
}

.sl-about__caption-bar {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	color: var(--n-400);
	margin-top: var(--sp-6);
	letter-spacing: 0.04em;
}

.sl-about__track {
	margin-top: var(--sp-20);
	border: var(--bw-1) solid var(--border-inv-mid);
	background: var(--surface-inv-card);
}

.sl-about__track-label {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--n-400);
	padding: var(--sp-14) var(--sp-20);
	border-bottom: var(--bw-1) solid var(--border-inv-mid);
}

.sl-about__track-primary {
	padding: var(--sp-18) var(--sp-20);
	border-left: var(--bw-3) solid var(--gold);
}

.sl-about__track-primary-h {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--fs-19);
	letter-spacing: -0.005em;
	color: var(--paper);
	line-height: 1.05;
}

.sl-about__track-primary-items {
	font-family: var(--font-mono);
	font-size: var(--fs-14);
	color: var(--gold);
	margin-top: var(--s-2);
	letter-spacing: 0.02em;
}

.sl-about__track-secondary {
	padding: var(--s-4) var(--sp-20) var(--sp-18);
	border-top: var(--bw-1) solid var(--border-inv-soft);
	border-left: var(--bw-3) solid var(--border-inv-mid);
}

.sl-about__track-secondary-h {
	font-family: var(--font-mono);
	font-size: var(--fs-10-5);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--n-500);
	margin-bottom: var(--sp-10);
}

.sl-about__track-secondary-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.sl-about__track-item {
	font-family: var(--font-body);
	font-size: var(--fs-13-5);
	color: var(--n-300);
	line-height: 1.4;
}

.sl-about__track-place {
	color: var(--n-200);
	font-weight: 600;
}

.sl-about__heading {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-about-h2);
	line-height: 0.96;
	margin: 0;
	color: var(--paper);
	letter-spacing: -0.01em;
}

.sl-about__copy {
	font-family: var(--font-body);
	font-size: var(--fs-18);
	line-height: 1.65;
	color: var(--n-200);
	margin-top: var(--sp-28);
	display: flex;
	flex-direction: column;
	gap: var(--sp-18);
	max-width: var(--mw-640);
}

.sl-about__copy p {
	margin: 0;
}

.sl-about__signature {
	margin-top: var(--s-6);
	font-family: var(--font-body);
	font-style: italic;
	color: var(--n-300);
	font-size: var(--fs-17);
}

.sl-about__cta-row {
	margin-top: var(--s-5);
}

.sl-about__metrics {
	margin-top: var(--sp-72);
	border-top: var(--bw-1) solid var(--border-inv-mid);
	border-bottom: var(--bw-1) solid var(--border-inv-mid);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.sl-about__metric {
	padding: var(--sp-36) var(--s-6);
	border-left: var(--bw-1) solid var(--border-inv-mid);
	text-align: center;
}

.sl-about__metric:first-child {
	border-left: none;
}

.sl-about__metric-v {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-metric);
	line-height: 1;
	color: var(--gold);
	letter-spacing: -0.01em;
}

.sl-about__metric-k {
	font-family: var(--font-mono);
	font-size: var(--fs-11-5);
	color: var(--n-400);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: var(--s-3);
	line-height: 1.4;
}

/* ------------------------------------------------------------
   STEPS RAIL
   ------------------------------------------------------------ */

.sl-steps {
	padding: var(--s-9) var(--s-6);
}

.sl-steps__heading {
	max-width: var(--mw-900);
}

.sl-steps__tabs-row {
	display: flex;
	justify-content: center;
	margin-top: var(--sp-56);
}

.sl-steps__tabs {
	display: flex;
	gap: var(--s-1);
	flex-wrap: wrap;
	justify-content: center;
	background: var(--surface-inv-tabs);
	border: var(--bw-1) solid var(--border-inv);
	padding: var(--s-1);
}

.sl-steps__tab {
	appearance: none;
	border: none;
	padding: var(--s-4) var(--sp-28);
	margin: 0;
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-steps-tab);
	line-height: 1;
	letter-spacing: 0.01em;
	background: transparent;
	color: var(--n-400);
	transition: color .15s ease, background-color .15s ease;
}

.sl-steps__tab:hover,
.sl-steps__tab:focus-visible {
	color: var(--paper);
}

.sl-steps__tab--active,
.sl-steps__tab--active:hover {
	background: var(--gold);
	color: var(--ink);
}

.sl-steps__panel {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
	margin-top: var(--sp-52);
	position: relative;
}

.sl-steps__panel[hidden] {
	display: none;
}

/* Tab-switch crossfade — JS adds --entering on the incoming panel and
   tweens the panel height (old → new) so content below never jumps.
   Reduced-motion users get an instant swap (no class, no tween). */
@media (prefers-reduced-motion: no-preference) {
	.sl-steps__panel--entering {
		animation: sl-steps-enter .2s ease-out both;
	}

	@keyframes sl-steps-enter {
		from {
			opacity: 0;
			transform: translateY(var(--s-2));
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

.sl-steps__line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--sp-2);
	background: var(--gold);
}

.sl-steps__step {
	padding-top: var(--sp-28);
	position: relative;
}

.sl-steps__num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-steps-num);
	line-height: 0.85;
	color: var(--paper);
	text-transform: uppercase;
	margin-bottom: var(--s-4);
	display: flex;
	align-items: baseline;
}

.sl-steps__num-dot {
	color: var(--gold);
	font-size: var(--fs-28);
	margin-left: var(--s-1);
}

.sl-steps__tag-row {
	margin-bottom: var(--sp-10);
}

.sl-steps__h {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-h3);
	line-height: 1.05;
	margin: 0 0 var(--s-3);
	color: var(--paper);
	letter-spacing: -0.005em;
}

.sl-steps__p {
	font-family: var(--font-body);
	font-size: var(--fs-15);
	line-height: 1.55;
	color: var(--n-300);
	margin: 0;
}

/* ------------------------------------------------------------
   LOGOS STRIP — placeholder cells + regulators row
   ------------------------------------------------------------ */

.sl-logos {
	padding: var(--sp-88) var(--s-6);
}

.sl-logos__head {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--s-8);
	align-items: end;
}

.sl-logos__heading {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-logos-h2);
	line-height: 0.95;
	margin: 0;
	color: var(--paper);
	letter-spacing: -0.01em;
}

.sl-logos__sub {
	font-family: var(--font-body);
	font-size: var(--fs-15);
	color: var(--n-300);
	margin: 0;
	line-height: 1.55;
	max-width: var(--mw-480);
}

.sl-logos__grid {
	margin-top: var(--s-7);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: var(--bw-1) solid var(--border-inv-mid);
}

.sl-logos__cell {
	position: relative;
	overflow: hidden;
	padding: var(--s-6) var(--s-5);
	border-right: var(--bw-1) solid var(--border-inv-mid);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--logos-cell-h);
	text-decoration: none;
	transition: background-color .18s ease;
}

.sl-logos__cell:last-child {
	border-right: none;
}

.sl-logos__cell:hover {
	background: var(--gold-tint-06);
}

.sl-logos__cell:focus-visible {
	outline: var(--bw-2) solid var(--gold);
	outline-offset: var(--sp-2);
}

/* Client mark — forced white regardless of source colour (Faza 6.7),
   normalized on a single shared height so wide wordmarks and compact
   abstract marks read at the same optical weight. */
.sl-logos__img {
	height: var(--logos-img-h);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

/* Name-on-hover overlay — same treatment on all four, including the
   unlinked BITmarkets cell. aria-hidden: it repeats the <img> alt text
   for sighted users only, screen readers already have the name. */
.sl-logos__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--scrim-badge);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
	pointer-events: none;
}

/* Keyboard focus reveals the overlay everywhere (linked cells only —
   BITmarkets has no focusable element by design, see the template). */
.sl-logos__cell:focus-visible .sl-logos__overlay {
	opacity: 1;
	visibility: visible;
}

/* Hover reveal is desktop-only — never on touch, where there is no
   hover state to land on before the tap itself navigates. */
@media (hover: hover) and (pointer: fine) {
	.sl-logos__cell:hover .sl-logos__overlay {
		opacity: 1;
		visibility: visible;
	}
}

.sl-logos__regulators {
	margin-top: var(--s-7);
	display: flex;
	align-items: center;
	gap: var(--s-6);
	flex-wrap: wrap;
	padding-top: var(--s-5);
	border-top: var(--bw-1) dashed var(--border-inv-mid);
}

.sl-logos__reg-label {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.12em;
	color: var(--gold);
	text-transform: uppercase;
	white-space: nowrap;
}

.sl-logos__reg-tags {
	display: flex;
	gap: var(--sp-14);
	flex-wrap: wrap;
}

.sl-logos__reg-tag {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-22);
	letter-spacing: -0.005em;
	color: var(--paper);
	padding: var(--sp-6) var(--sp-14);
	border: var(--bw-1-5) solid var(--border-inv-ctl-2);
	border-radius: var(--r-1);
}

/* ------------------------------------------------------------
   INSIGHTS TEASER
   ------------------------------------------------------------ */

.sl-insights-teaser {
	padding: var(--s-9) var(--s-6);
}

.sl-insights-teaser__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s-5);
	margin-bottom: var(--s-7);
}

.sl-insights-teaser__heading {
	max-width: var(--mw-880);
}

.sl-insights-teaser__sub {
	font-family: var(--font-body);
	font-size: var(--fs-16);
	color: var(--n-300);
	margin: 0 0 var(--s-7);
	max-width: var(--mw-720);
	line-height: 1.55;
}

.sl-insights-teaser__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--s-5);
}

.sl-insights-teaser__stack {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

.sl-insight-card {
	text-decoration: none;
	color: inherit;
	background: var(--surface-inv-card);
	border: var(--bw-1) solid var(--border-inv-mid);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}

.sl-insight-card--featured {
	box-shadow: 6px 6px 0 0 var(--gold);
}

.sl-insight-card--featured:hover,
.sl-insight-card--featured:focus-visible {
	box-shadow: 0 0 0 0 var(--gold);
	transform: translate(var(--sp-6), var(--sp-6));
}

.sl-insight-card--compact {
	border-left: var(--bw-3) solid var(--gold);
}

.sl-insight-card--compact:hover,
.sl-insight-card--compact:focus-visible {
	background: var(--surface-inv-card-hover);
}

.sl-insight-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ink-pure);
	overflow: hidden;
}

.sl-insight-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}

.sl-insight-card--featured:hover .sl-insight-card__img {
	transform: scale(1.03);
}

.sl-insight-card__ph {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(ellipse 80% 60% at 30% 40%, var(--insight-ph-glow) 0%, transparent 70%),
		linear-gradient(135deg, var(--insight-ph-bg) 0%, var(--ink) 70%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sl-insight-card__ph-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at center, var(--insight-ph-dot) 1px, transparent 1.4px);
	background-size: var(--s-5) var(--s-5);
	opacity: 0.45;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, var(--ink-pure) 0%, transparent 80%);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, var(--ink-pure) 0%, transparent 80%);
}

.sl-insight-card__ph-tag {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-insight-ph-sm);
	color: transparent;
	-webkit-text-stroke: var(--bw-2) var(--insight-ph-stroke);
	letter-spacing: -0.025em;
	line-height: 0.9;
	position: relative;
}

.sl-insight-card__ph-tag--lg {
	font-size: var(--t-insight-ph);
}

.sl-insight-card__tag {
	position: absolute;
	top: var(--s-4);
	left: var(--s-4);
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	padding: var(--sp-5) var(--sp-10);
	background: var(--gold);
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: 700;
}

.sl-insight-card__tag--sm {
	top: var(--sp-10);
	left: var(--sp-10);
	font-size: var(--fs-9);
	padding: var(--s-1) var(--s-2);
}

.sl-insight-card__time {
	position: absolute;
	bottom: var(--s-3);
	right: var(--s-4);
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	padding: var(--sp-5) var(--sp-10);
	background: var(--scrim-badge);
	color: var(--paper);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.sl-insight-card__body {
	padding: var(--sp-28) var(--s-6) var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.sl-insight-card__body--compact {
	padding: var(--sp-20) var(--sp-22) var(--sp-22);
	gap: var(--sp-10);
}

.sl-insight-card__meta {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	color: var(--n-300);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.sl-insight-card__meta--sm {
	font-size: var(--fs-10);
	color: var(--n-400);
}

.sl-insight-card__h {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
	color: var(--paper);
	letter-spacing: -0.005em;
}

.sl-insight-card__h--featured {
	font-size: var(--t-insight-h3);
	line-height: 1.05;
}

.sl-insight-card__h--compact {
	font-size: var(--fs-18);
	line-height: 1.15;
}

.sl-insight-card__excerpt {
	font-family: var(--font-body);
	font-size: var(--fs-16);
	line-height: 1.6;
	color: var(--n-200);
	margin: 0;
	max-width: var(--mw-640);
}

.sl-insight-card__more {
	margin-top: var(--s-2);
	font-family: var(--font-body);
	font-size: var(--fs-13);
	font-weight: 600;
	color: var(--gold);
	border-bottom: var(--bw-2) solid var(--gold);
	align-self: flex-start;
	padding-bottom: 1px;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-6);
}

.sl-insight-card__more--sm {
	margin-top: var(--s-1);
	font-size: var(--fs-12);
	border-bottom: none;
	gap: var(--s-1);
}

/* CTA section styles moved to assets/css/contact.css (Faza 4.1b) —
   the contact section is shared between Home and the service hubs. */

/* ------------------------------------------------------------
   Responsive — 640 / 920 / 1100 / 1400
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.sl-hero {
		min-height: auto;
	}

	.sl-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-36);
	}

	.sl-hero__console {
		max-width: var(--mw-560);
	}

	.sl-hero__bracket {
		top: var(--hero-bracket-top-sm);
		left: var(--s-5);
		width: var(--hero-bracket-size-sm);
		height: var(--hero-bracket-size-sm);
	}

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

	.sl-services__cell.is-open {
		grid-column: span 2;
	}

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

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

	.sl-insights-teaser__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 920px) {
	.sl-about__grid {
		grid-template-columns: 1fr;
	}


	.sl-logos__head {
		grid-template-columns: 1fr;
	}

	/* Faza 6.11: below this width the wide diagram would scale its own
	   viewBox down far enough to drop the labels under ~12px, so swap in
	   the stacked layout instead of shrinking the type. The cap matches
	   the narrow viewBox width, so the SVG never renders ABOVE 1:1 —
	   without it, a 320-unit viewBox stretched across an 856px column
	   would blow the type up to ~40px. */
	.sl-xb-dia__svg--wide {
		display: none;
	}

	.sl-xb-dia__svg--narrow {
		display: block;
		max-width: 320px;
		margin-inline: auto;
	}
}

@media (max-width: 640px) {
	/* Faza 3.2: pull both CTAs above the fold on phones (390×~740).
	   Layout-only — the copy is untouched. Savings vs desktop values:
	   padding-top 128→24 (−104), eyebrow margin-top 12→0 (−12) and
	   line-height 1.55→1.4 (−9 on PL's 5 lines), lead margin 26→16
	   (−10), CTA margin 34→24 (−10), H1 floor 42→36px (−23). */
	.sl-hero {
		padding-top: var(--s-5);
	}

	.sl-hero__eyebrow {
		margin-top: 0;
		line-height: 1.4;
	}

	.sl-hero__h1 {
		font-size: var(--t-hero-h1-sm);
	}

	.sl-hero__lead {
		margin-top: var(--s-4);
	}

	.sl-hero__ctas {
		margin-top: var(--s-5);
	}

	.sl-hero__console {
		font-size: var(--fs-11-5);
		padding: var(--sp-14) var(--s-4);
	}

	.sl-services__grid {
		grid-template-columns: 1fr;
	}

	.sl-services__cell.is-open {
		grid-column: span 1;
	}

	.sl-service-card__children {
		grid-template-columns: 1fr;
	}

	.sl-steps__panel {
		grid-template-columns: 1fr;
	}

	.sl-steps__tabs {
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.sl-crossborder__grid {
		grid-template-columns: 1fr;
	}

	/* .sl-logos__grid already repeat(2, 1fr) from the ≤1100px rule above —
	   Faza 6.7: four logos means no narrower override is needed here. */

	.sl-about__metrics {
		grid-template-columns: 1fr;
	}

	.sl-about__metric {
		border-left: none;
		border-top: var(--bw-1) solid var(--border-inv-mid);
	}

	.sl-about__metric:first-child {
		border-top: none;
	}
}

/* ============================================================
   SERVICES GRID — "expanding row" mechanism (Faza 3.3)
   Port sprawdzonego wzorca z sandboxa na produkcyjny Home.
   Reużywa bazowych stylów .sl-service-card (wyżej w tym pliku);
   dokłada wyłącznie warstwę mechanizmu na klasach .sl-svcx__*.
   Umieszczone NA KOŃCU pliku celowo: przy remisie specyficzności
   z bazowymi regułami .sl-service-card wygrywa kolejność źródłowa.
   Stare reguły grida (.sl-services__grid / __cell.is-open /
   .sl-service-card__detail / .sl-service-card__children + ich
   media 1100/640) są teraz MARTWE na Home (brak elementów) —
   do usunięcia w osobnym przebiegu cleanupu razem z sandboxem.
   Tymczasowa duplikacja z assets/css/pages/sandbox-services.css
   jest świadoma i dozwolona (sandbox zostaje jako fallback).
   Breakpointy: 640 / 920 / 1100 / 1400 (literały tylko w media).
   ============================================================ */

.sl-svcx__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-20);
}

/* Karty nie rozpychają się — wiersz trzyma kształt przy otwarciu */
.sl-svcx__cell {
	grid-column: auto;
}

/* Równe wysokości kart w wierszu: celle rozciągają się (grid
   align-items:stretch), ale button owijał tylko treść — wypełnij cellę,
   a bazowe margin-top:auto na __foot przypina toggle do dołu. */
.sl-svcx__card {
	height: 100%;
}

/* Baza kart zmienia geometrię otwartej karty zakładając detal WEWNĄTRZ
   (min-height:auto, foot podciągnięty). Tu detal to zewnętrzny panel —
   otwarta karta trzyma geometrię zamkniętej, więc wiersz zostaje równy. */
.sl-svcx__card[aria-expanded="true"] .sl-service-card__foot {
	margin-top: auto;
}

/* Ukryte panele to display:none — nie są itemami gridu, nie psują
   auto-placement gdy zamknięte. */
.sl-svcx__panel[hidden] {
	display: none;
}

/* ------------------------------------------------------------
   Pełnowierszowy panel — grid-template-rows 0fr → 1fr
   ------------------------------------------------------------ */

.sl-svcx__panel {
	grid-column: 1 / -1;
	display: grid;
	grid-template-rows: 0fr;
}

.sl-svcx__panel.is-open {
	grid-template-rows: 1fr;
}

.sl-svcx__panel-clip {
	min-height: 0;
	overflow: hidden;
}

.sl-svcx__panel-inner {
	background: var(--ink);
	color: var(--paper);
	border: var(--bw-2) solid var(--paper);
	border-left: var(--bw-3) solid var(--gold);
	box-shadow: var(--shadow-card-gold);
	padding: var(--s-5) var(--sp-28);
	display: flex;
	flex-direction: column;
	gap: var(--sp-14);
	/* Oddech od wiersza kart nad + miejsce na twardy cień pod, w obrębie
	   clipa, żeby odsłanianie było płynne. */
	margin: var(--s-2) 0 var(--s-2);
}

/* Panel karty tier-1 (paper) odbija paletę karty */
.sl-svcx__panel--lead .sl-svcx__panel-inner {
	background: var(--paper);
	color: var(--ink);
}

.sl-svcx__panel--lead .sl-service-card__eyebrow {
	color: var(--ink);
}

.sl-svcx__panel--lead .sl-service-card__ar {
	color: var(--ink);
}

.sl-svcx__panel--lead .sl-service-card__diff {
	color: var(--ink);
	border-left-color: var(--ink);
}

/* Lista detalu: panel zostaje pełnowierszowy, ale tekst układa się w
   wąskie kolumny od lewej z czytelną miarą (--svcx-col-w) i szerokim
   rynsztokiem. Jednostka ch w grid-template-columns liczy się względem
   fontu TEGO kontenera — musi nieść to samo --fs-13 co pozycje, inaczej
   ch dziedziczy 17px body i kolumny są ~30% za szerokie. Dwie kolumny
   na desktopie, jak na tablecie. */
.sl-svcx__children {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--fs-13);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, var(--svcx-col-w)));
	justify-content: start;
	gap: var(--sp-10);
	column-gap: var(--s-7);
}

.sl-svcx__children li {
	font-family: var(--font-body);
	font-size: var(--fs-13);
	line-height: 1.45;
	color: var(--n-200);
	display: flex;
	gap: var(--sp-10);
	align-items: flex-start;
}

.sl-svcx__panel--lead .sl-svcx__children li {
	color: var(--n-700);
}

/* Ta sama czytelna miara dla linii differentiatora */
.sl-svcx__panel .sl-service-card__diff {
	max-width: var(--svcx-diff-max);
}

/* Prawdziwe <a> w panelu */
.sl-svcx__more,
.sl-svcx__brief {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-body);
	font-size: var(--fs-13);
	font-weight: 600;
	padding: var(--s-2) 0;
	text-decoration: none;
	cursor: pointer;
}

.sl-svcx__more {
	color: var(--n-200);
}

.sl-svcx__panel--lead .sl-svcx__more {
	color: var(--n-700);
}

.sl-svcx__brief {
	color: var(--gold);
	border-bottom: var(--bw-2) solid var(--gold);
}

.sl-svcx__panel--lead .sl-svcx__brief {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* ------------------------------------------------------------
   Warstwa głębi — aktywna karta do przodu, reszta się cofa.
   Całość pod prefers-reduced-motion: no-preference.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.sl-svcx__panel {
		transition: grid-template-rows .3s ease;
	}

	.sl-svcx__card {
		transition: box-shadow .18s ease, transform .18s ease, opacity .18s ease;
	}
}

/* Lift + dim tylko w trybie wierszowym (≥921px) — w akordeonie mobilnym
   aktywna karta musi zostać sklejona z panelem: bez translateY i bez
   zmiany cienia. */
@media (prefers-reduced-motion: no-preference) and (min-width: 921px) {
	.sl-svcx__cell.is-active .sl-svcx__card {
		box-shadow: var(--shadow-card-gold-lg);
		transform: translateY(calc(-1 * var(--s-1)));
	}

	.sl-svcx__grid.has-open .sl-svcx__cell:not(.is-active) .sl-svcx__card {
		opacity: var(--svcx-dim);
	}
}

/* Bazowy „sink" karty na hover zderza się z liftem — aktywna karta
   trzyma stan uniesiony też na hover (tylko tryb wierszowy). */
@media (min-width: 921px) {
	.sl-svcx__cell.is-active .sl-svcx__card:hover {
		box-shadow: var(--shadow-card-gold-lg);
		transform: translateY(calc(-1 * var(--s-1)));
	}
}

/* ------------------------------------------------------------
   Responsive — 640 / 920 / 1100 / 1400
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.sl-svcx__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	/* children już 2-kolumnowe w regule bazowej — nic do nadpisania */
}

/* Poniżej 920px expanding-row przechodzi w zwykły akordeon w miejscu —
   siatka jednokolumnowa, panel po własnej karcie jest od razu pod nią;
   JS pomija detekcję wiersza. */
@media (max-width: 920px) {
	.sl-svcx__grid {
		grid-template-columns: 1fr;
	}

	.sl-svcx__children {
		grid-template-columns: minmax(0, var(--svcx-col-w));
	}

	/* Karta + panel czytają się jak JEDNO pudełko. Panel pochłania
	   row-gap siatki, zrzuca własną górną ramkę i złoty akcent, dzieli
	   twardy cień karty; szew to kreskowany separator (idiom detalu z
	   Home) zamiast pełnej ramki. */
	.sl-svcx__panel {
		margin-top: calc(-1 * var(--sp-20));
	}

	.sl-svcx__panel-inner {
		margin: 0;
		border-top: none;
		border-left: var(--bw-2) solid var(--paper);
		box-shadow: var(--shadow-card-gold);
	}

	.sl-svcx__panel-inner::before {
		content: "";
		display: block;
		border-top: var(--bw-1) dashed var(--border-inv-mid);
	}

	.sl-svcx__panel--lead .sl-svcx__panel-inner::before {
		border-top-color: var(--n-200);
	}

	/* Brak ruchu w akordeonie. Baza przesuwa kartę o 4px i zwija cień na
	   :hover / :focus-visible / [aria-expanded]; na dotyku sticky-hover
	   odpala ten shift W TRAKCIE tapnięcia (przed is-active) → karta
	   zjeżdża na własny offsetowy cień i migocze. Przypnij kartę płasko
	   ze stałym złotym cieniem w KAŻDYM stanie; rusza się tylko panel. */
	.sl-svcx__card,
	.sl-svcx__card:hover,
	.sl-svcx__card:focus-visible,
	.sl-svcx__card[aria-expanded="true"] {
		transform: none;
		box-shadow: var(--shadow-card-gold);
	}

	/* Zdejmij natywną nakładkę tapnięcia (default -webkit-tap-highlight-
	   color na tapniętym buttonie). Karta JEST buttonem z aria-expanded,
	   więc reguła siedzi tu. Focus bez zmian — outline-style: none w base
	   i na :focus, box-shadow na :focus bez zmiany, nic nie miga. */
	.sl-svcx__card {
		-webkit-tap-highlight-color: transparent;
	}

	/* Aktywna karta + panel to jedno pudełko → zdejmij dolną krawędź
	   szwu; zamknięte karty ją zachowują. */
	.sl-svcx__cell.is-active .sl-svcx__card {
		border-bottom: none;
	}
}

@media (max-width: 640px) {
	.sl-svcx__panel-inner {
		padding: var(--s-5);
	}
}