/* Components — SRS 2.6 + Appendix H. Square corners, hairlines, no shadows by default. */

/* ---------- Buttons ---------- */
.ks-btn {
	--btn-bg: var(--color-orange);
	--btn-fg: var(--ks-black);
	--btn-border: var(--color-orange);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	min-height: 48px;
	padding: 0 var(--space-5);
	background: var(--btn-bg);
	color: var(--btn-fg) !important;
	border: 1px solid var(--btn-border);
	border-radius: 0;
	font: 600 var(--fs-button)/1 var(--font-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color var(--dur-micro) var(--ease-standard),
		color var(--dur-micro) var(--ease-standard),
		border-color var(--dur-micro) var(--ease-standard);
	white-space: nowrap;
}
.ks-btn__arrow { display: inline-block; transition: transform var(--dur-micro) var(--ease-standard); }
.ks-btn:hover { --btn-bg: var(--ks-orange-hover); --btn-border: var(--ks-orange-hover); }
.ks-btn:hover .ks-btn__arrow,
.ks-btn:focus-visible .ks-btn__arrow { transform: translateX(4px); }
.ks-btn--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--color-on-surface);
	--btn-border: var(--color-on-surface);
}
.ks-btn--secondary:hover {
	--btn-bg: var(--color-on-surface);
	--btn-fg: var(--color-surface);
	--btn-border: var(--color-on-surface);
}
.ks-btn--small { min-height: 40px; padding: 0 var(--space-4); font-size: 12px; }
.ks-btn[aria-busy="true"] { pointer-events: none; opacity: .7; }
.ks-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.ks-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font: 600 var(--fs-button)/1 var(--font-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: var(--space-1);
	border-bottom: 1px solid currentColor;
}
.ks-link:hover { border-bottom-color: var(--color-orange); }
.ks-link:hover .ks-btn__arrow { transform: translateX(4px); }

/* ---------- Tags / pills (pill radius allowed for tags only) ---------- */
.ks-tag {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 var(--space-3);
	border: var(--hairline);
	border-radius: var(--radius-pill);
	font: 500 var(--fs-technical)/1 var(--font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-on-surface);
	background: transparent;
	white-space: nowrap;
}
button.ks-tag { cursor: pointer; }
button.ks-tag[aria-pressed="true"] { background: var(--color-on-surface); color: var(--color-surface); border-color: var(--color-on-surface); }
.ks-tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Technical label / annotation ---------- */
.ks-annot {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font: 500 var(--fs-technical)/1.35 var(--font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--color-on-surface);
	max-width: 28ch;
}
.ks-annot::before {
	content: "";
	flex: none;
	width: 32px;
	height: 1px;
	background: var(--color-orange);
	box-shadow: 0 0 0 0 transparent;
}
.ks-annot__tick { flex: none; width: 6px; height: 6px; background: var(--color-orange); }
.ks-annot__fig { color: var(--color-accent-text); }
.ks-annot--on-media {
	padding: var(--space-1) var(--space-2);
	background: rgba(11, 11, 11, .7);
	color: var(--ks-cream);
	--color-accent-text: var(--ks-orange);
}

/* ---------- Hotspot ---------- */
.ks-hotspot {
	position: absolute;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: var(--z-annotations);
}
.ks-hotspot::before {
	content: "";
	position: absolute;
	inset: 10px;
	background: var(--ks-orange);
}
.ks-hotspot::after {
	content: "";
	position: absolute;
	inset: 2px;
	border: 1px solid var(--ks-orange);
	border-radius: 50%;
	animation: ks-pulse 2.4s var(--ease-out) infinite;
}
.ks-hotspot[aria-expanded="true"]::before { background: var(--ks-white); }
@keyframes ks-pulse {
	0% { transform: scale(.6); opacity: 1; }
	100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ks-hotspot::after { animation: none; } }

.ks-popover {
	position: absolute;
	z-index: calc(var(--z-annotations) + 1);
	width: min(320px, 80vw);
	padding: var(--space-4);
	background: var(--ks-charcoal);
	color: var(--ks-white);
	border-top: var(--rule-accent);
	box-shadow: var(--shadow-float);
	font-size: var(--fs-body-s);
	line-height: 1.5;
}
.ks-popover[hidden] { display: none; }
.ks-popover__title { display: block; margin-bottom: var(--space-2); }
.ks-popover__close {
	position: absolute; top: var(--space-2); right: var(--space-2);
	width: 32px; height: 32px; border: 0; background: transparent; color: inherit; cursor: pointer;
	font-size: 18px; line-height: 1;
}

/* ---------- Cards ---------- */
.ks-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	color: inherit;
	text-decoration: none;
	border-radius: 0;
}
.ks-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--color-surface-raised);
}
.ks-card__media--wide { aspect-ratio: 16 / 10; }
.ks-card__media img, .ks-card__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 350ms var(--ease-standard);
}
.ks-card:hover .ks-card__media img,
.ks-card:focus-visible .ks-card__media img { transform: scale(1.03); }
.ks-card__title {
	font: 500 var(--fs-h3)/1.2 var(--font-sans);
	letter-spacing: -.005em;
	background: linear-gradient(var(--color-orange), var(--color-orange)) left bottom / 0 1px no-repeat;
	transition: background-size 350ms var(--ease-standard);
	padding-bottom: 2px;
	display: inline;
}
.ks-card:hover .ks-card__title, .ks-card:focus-visible .ks-card__title { background-size: 100% 1px; }
.ks-card__meta { display: flex; justify-content: space-between; gap: var(--space-3); }
.ks-card--tonal { padding: var(--space-6); background: var(--color-surface-raised); border-top: var(--rule-strong); }
.ks-card--hairline { padding: var(--space-6); border: var(--hairline); }

.ks-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-9) var(--card-gap);
}
.ks-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ks-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1199px) { .ks-card-grid, .ks-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ks-card-grid, .ks-card-grid--4, .ks-card-grid--2 { grid-template-columns: 1fr; gap: var(--space-7); } }

/* Placeholder media: honest, labelled, never pretends to be a real photo. */
.ks-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: var(--space-4);
	background:
		linear-gradient(135deg, transparent 49.6%, var(--color-border) 49.6%, var(--color-border) 50.4%, transparent 50.4%),
		var(--color-surface-raised);
	color: var(--color-muted);
}

/* ---------- Forms ---------- */
.ks-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ks-field__label { font: 500 var(--fs-body-s)/1.3 var(--font-sans); }
.ks-field__hint { font-size: var(--fs-caption); color: var(--color-muted); }
.ks-input, .ks-select, .ks-textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface-raised);
	color: var(--color-on-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input);
	font: 400 var(--fs-body)/1.4 var(--font-sans);
	box-shadow: none;
	appearance: none;
}
.ks-textarea { min-height: 144px; resize: vertical; }
.ks-select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--space-7);
}
.ks-input:hover, .ks-select:hover, .ks-textarea:hover { border-color: var(--color-on-surface); }
.ks-input:focus-visible, .ks-select:focus-visible, .ks-textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ks-field--error .ks-input, .ks-field--error .ks-select, .ks-field--error .ks-textarea { border-color: #C42B00; }
.ks-field__error { display: flex; gap: var(--space-2); font-size: var(--fs-body-s); color: #A82400; }
[data-theme="dark"] .ks-field__error, [data-theme="charcoal"] .ks-field__error { color: #FF8A5C; }
.ks-field__error::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; background: currentColor; color: var(--color-surface); font: 700 11px/1 var(--font-sans); flex: none; }
.ks-choice { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--fs-body-s); }
.ks-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--ks-orange); flex: none; }
.ks-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
.ks-option {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	background: var(--color-surface-raised);
	cursor: pointer;
	transition: border-color var(--dur-micro) var(--ease-standard);
}
.ks-option input { position: absolute; opacity: 0; pointer-events: none; }
.ks-option:hover { border-color: var(--color-on-surface); }
.ks-option:has(input:checked) { border-color: var(--color-orange); box-shadow: inset 0 0 0 1px var(--color-orange); }
.ks-option:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ks-honeypot { position: absolute !important; left: -9999px !important; }
.ks-form-status { padding: var(--space-4); border-left: var(--rule-accent); background: var(--color-surface-raised); }

/* ---------- Loader (journey) ---------- */
.ks-loader { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; z-index: var(--z-stage-rail); }
.ks-loader__bar { height: 100%; width: 0; background: var(--ks-orange); transition: width var(--dur-standard) var(--ease-standard); }

/* ---------- Header (SRS 4.2) ---------- */
.ks-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-nav);
	height: var(--nav-height);
	color: var(--color-on-surface);
	background: transparent;
	transition: transform var(--dur-standard) var(--ease-standard), background-color var(--dur-standard) var(--ease-standard), border-color var(--dur-standard);
	border-bottom: 1px solid transparent;
}
.ks-header.is-solid { background: var(--color-surface); border-bottom-color: var(--color-border); }
.ks-header.is-hidden { transform: translateY(-100%); }
.ks-header.is-compact { transform: translateY(-100%); }
.ks-header__inner {
	height: 100%;
	display: flex;
	align-items: center;
	gap: var(--space-6);
	max-width: calc(var(--container-max) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.ks-header__brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; flex: none; }
.ks-header__brand img { height: 40px; width: auto; }
.ks-footer .ks-header__brand img { height: 56px; }
.ks-header[data-theme="dark"] .ks-logo--on-light, .ks-header[data-theme="light"] .ks-logo--on-dark { display: none; }
.ks-wordmark { font: 600 15px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.ks-wordmark__dot { display: inline-block; width: 6px; height: 6px; background: var(--ks-orange); margin-left: 2px; vertical-align: top; }
.ks-nav { margin-left: auto; }
.ks-nav__list { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.ks-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 500 var(--fs-nav)/1.2 var(--font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}
.ks-nav__link::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 10px;
	height: 1px; background: var(--ks-orange);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--dur-micro) var(--ease-standard);
}
.ks-nav__link:hover::after, .ks-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.ks-header__ctas { display: flex; gap: var(--space-2); flex: none; }
.ks-menu-toggle {
	display: none;
	margin-left: auto;
	min-height: 44px; min-width: 44px;
	padding: 0 var(--space-2);
	border: 0; background: transparent; color: inherit; cursor: pointer;
	font: 500 var(--fs-nav)/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 1279px) {
	.ks-header__ctas .ks-btn--secondary { display: none; }
}
@media (max-width: 1099px) {
	.ks-nav, .ks-header__ctas { display: none; }
	.ks-menu-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
}

/* Mobile full-screen sheet */
.ks-sheet {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	display: flex;
	flex-direction: column;
	background: var(--ks-black);
	color: var(--ks-white);
	padding: var(--space-4) var(--gutter) var(--space-6);
	overflow-y: auto;
	transform: translateY(-8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), visibility 0s linear var(--dur-micro);
}
.ks-sheet.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.ks-sheet__top { display: flex; align-items: center; justify-content: space-between; height: calc(var(--nav-height) - var(--space-4)); }
.ks-sheet__list { list-style: none; margin: var(--space-7) 0 0; padding: 0; border-top: 1px solid #2E2E2B; }
.ks-sheet__list li { border-bottom: 1px solid #2E2E2B; }
.ks-sheet__list a {
	display: flex; justify-content: space-between; align-items: center;
	min-height: 64px;
	font: 500 22px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
	color: inherit; text-decoration: none;
}
.ks-sheet__ctas { margin-top: auto; padding-top: var(--space-7); display: grid; gap: var(--space-2); }
body.ks-sheet-open { overflow: hidden; }

/* ---------- Footer ---------- */
.ks-footer {
	background: var(--ks-black);
	color: var(--ks-white);
	padding: var(--space-10) 0 var(--space-6);
}
.ks-footer__cta { padding-bottom: var(--space-9); border-bottom: 1px solid #2E2E2B; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-6); }
.ks-footer__grid { display: grid; grid-template-columns: 4fr repeat(3, 2fr); gap: var(--space-6); padding-block: var(--space-8); }
.ks-footer__col h2 { margin-bottom: var(--space-4); }
.ks-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ks-footer__col a { color: var(--ks-cream); text-decoration: none; font-size: var(--fs-body-s); }
.ks-footer__col a:hover { color: var(--ks-orange); }
.ks-footer__notice { padding: var(--space-4) 0; border-top: 1px solid #2E2E2B; max-width: none; color: #A5A39B; }
.ks-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid #2E2E2B; color: #A5A39B; }
.ks-footer__bottom a { color: inherit; }
.ks-footer__bottom button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 1023px) { .ks-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .ks-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Hero ---------- */
.ks-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	padding: calc(var(--nav-height) + var(--space-9)) 0 var(--space-8);
	overflow: hidden;
	isolation: isolate;
}
.ks-hero__media { position: absolute; inset: 0; z-index: -1; }
.ks-hero__media img, .ks-hero__media video { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ks-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,.2) 0%, rgba(11,11,11,.85) 100%); }
.ks-hero__weave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.ks-hero__grid { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-7); align-items: end; }
.ks-hero__title { grid-column: 1 / span 10; }
.ks-hero__aside { grid-column: 1 / span 5; }
.ks-hero__aside .ks-body-l { margin-bottom: var(--space-6); color: var(--ks-cream); }
.ks-hero__scroll { grid-column: 10 / -1; justify-self: end; display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.ks-hero__tick { position: relative; width: 1px; height: 64px; background: rgba(255,255,255,.2); overflow: hidden; }
.ks-hero__tick::after { content: ""; position: absolute; left: -2px; width: 5px; height: 16px; background: var(--ks-orange); animation: ks-tick 1.8s var(--ease-in-out) infinite; }
@keyframes ks-tick { 0% { top: -16px; } 100% { top: 64px; } }
.ks-hero__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.18); }
@media (max-width: 1199px) {
	.ks-hero__title, .ks-hero__aside { grid-column: 1 / -1; }
	.ks-hero__scroll { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Capability diagram ---------- */
.ks-capability { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: var(--rule-strong); }
.ks-capability__node {
	position: relative;
	display: flex; flex-direction: column; gap: var(--space-4);
	min-height: 320px;
	padding: var(--space-5) var(--space-5) var(--space-6) 0;
	text-decoration: none; color: inherit;
}
.ks-capability__node + .ks-capability__node { padding-left: var(--space-5); border-left: var(--hairline); }
.ks-capability__node::before {
	content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--ks-orange);
	transition: width var(--dur-standard) var(--ease-standard);
}
.ks-capability__node:hover::before, .ks-capability__node:focus-visible::before { width: 100%; }
.ks-capability__index { font: 400 var(--fs-display-m)/1 var(--font-display); color: var(--color-muted); }
.ks-capability__node:hover .ks-capability__index { color: var(--color-on-surface); }
.ks-capability__arrow { position: absolute; top: var(--space-5); right: var(--space-5); width: 16px; height: 16px; }
.ks-capability__more { margin-top: auto; }
@media (max-width: 1199px) {
	.ks-capability { grid-template-columns: 1fr 1fr; }
	.ks-capability__node { min-height: 0; padding: var(--space-5) var(--space-4) var(--space-6) 0; border-bottom: var(--hairline); }
	.ks-capability__node + .ks-capability__node { padding-left: 0; border-left: 0; }
	.ks-capability__node:nth-child(even) { padding-left: var(--space-4); border-left: var(--hairline); }
}
@media (max-width: 599px) {
	.ks-capability { grid-template-columns: 1fr; }
	.ks-capability__node:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ---------- Production comparison (SRS 7.2) ---------- */
.ks-compare { width: 100%; border-collapse: collapse; font-size: var(--fs-body-s); }
.ks-compare caption { text-align: left; padding-bottom: var(--space-4); }
.ks-compare th, .ks-compare td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--hairline); }
.ks-compare thead th { border-bottom: var(--rule-strong); padding-top: 0; }
.ks-compare tbody th { width: 22%; font-weight: 500; }
.ks-compare td { width: 39%; }
.ks-compare .ks-stagechips { margin-top: var(--space-2); }
.ks-route-toggle { display: none; }
@media (max-width: 767px) {
	.ks-route-toggle { display: flex; position: sticky; top: var(--space-2); z-index: 2; gap: 0; background: var(--color-surface); padding-block: var(--space-2); }
	.ks-route-toggle button { flex: 1; min-height: 44px; border: 1px solid var(--color-on-surface); background: transparent; color: var(--color-on-surface); font: 600 12px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
	.ks-route-toggle button[aria-pressed="true"] { background: var(--color-on-surface); color: var(--color-surface); }
	.ks-compare thead { display: none; }
	.ks-compare tr { display: block; padding-block: var(--space-4); border-bottom: var(--hairline); }
	.ks-compare th, .ks-compare td { display: block; width: auto; border: 0; padding: 0; }
	.ks-compare tbody th { margin-bottom: var(--space-2); }
	.ks-compare[data-route="blank"] td[data-route="custom"],
	.ks-compare[data-route="custom"] td[data-route="blank"] { display: none; }
}

/* Stage chips (links back to the journey) */
.ks-stagechips { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.ks-stagechips a, .ks-stagechips span {
	display: inline-grid; place-items: center;
	min-width: 32px; height: 24px; padding: 0 var(--space-2);
	border: var(--hairline);
	font: 500 var(--fs-technical)/1 var(--font-sans); letter-spacing: .06em; font-variant-numeric: tabular-nums;
	text-decoration: none; color: inherit;
}
.ks-stagechips a:hover { border-color: var(--ks-orange); }
.ks-stagechips .is-on { background: var(--color-on-surface); color: var(--color-surface); border-color: var(--color-on-surface); }

/* Stage strip: "where this sits in the journey" (9 cells) */
.ks-stagestrip { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-top: var(--rule-strong); }
.ks-stagestrip a, .ks-stagestrip span {
	display: flex; flex-direction: column; gap: var(--space-2);
	padding: var(--space-3) var(--space-2) var(--space-3) 0;
	text-decoration: none; color: var(--color-muted);
	border-top: 3px solid transparent; margin-top: -2px;
}
.ks-stagestrip .is-on { color: var(--color-on-surface); border-top-color: var(--ks-orange); }
@media (max-width: 767px) { .ks-stagestrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Before / after ---------- */
.ks-ba { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ks-charcoal); user-select: none; touch-action: pan-y; }
.ks-ba__layer { position: absolute; inset: 0; }
.ks-ba__layer img { width: 100%; height: 100%; object-fit: cover; }
.ks-ba__after { clip-path: inset(0 0 0 var(--ks-ba, 50%)); }
.ks-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--ks-ba, 50%); width: 2px; margin-left: -1px; background: var(--ks-orange); pointer-events: none; }
.ks-ba__handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; display: grid; place-items: center; background: var(--ks-orange); color: var(--ks-black); font: 600 16px/1 var(--font-sans); }
.ks-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ks-ba__range:focus-visible + .ks-ba__handle::after { outline: 2px solid var(--ks-white); outline-offset: 2px; }
.ks-ba__label { position: absolute; bottom: var(--space-4); }
.ks-ba__label--before { left: var(--space-4); }
.ks-ba__label--after { right: var(--space-4); }

/* ---------- Showcase / turntable ---------- */
.ks-showcase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.ks-showcase__viewer { grid-column: 1 / span 8; }
.ks-showcase__panel { grid-column: 9 / -1; position: sticky; top: calc(var(--nav-height) + var(--space-5)); }
@media (max-width: 1023px) { .ks-showcase__viewer, .ks-showcase__panel { grid-column: 1 / -1; position: static; } }
.ks-variants { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-5); }

/* ---------- Process summary (numbered rows) ---------- */
.ks-steps { list-style: none; margin: 0; padding: 0; border-top: var(--rule-strong); }
.ks-steps li { border-bottom: var(--hairline); }
.ks-steps a {
	display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: var(--space-5);
	min-height: 72px; padding-block: var(--space-3);
	text-decoration: none; color: inherit;
}
.ks-steps a:hover .ks-steps__title { color: var(--color-accent-text); }
.ks-steps a:hover .ks-btn__arrow { transform: translateX(4px); }
.ks-steps__num { font: 500 var(--fs-technical)/1 var(--font-sans); letter-spacing: .08em; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ks-steps__title { font: 400 var(--fs-h2)/1.1 var(--font-display); letter-spacing: -.01em; transition: color var(--dur-micro); }
.ks-steps__track { font-size: var(--fs-caption); color: var(--color-muted); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 767px) { .ks-steps a { grid-template-columns: 48px 1fr; } .ks-steps__track { display: none; } }

/* Two-track convergence diagram */
.ks-tracks { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); align-items: center; }
.ks-tracks__rows { display: grid; gap: var(--space-5); }
.ks-tracks__row { display: grid; grid-template-columns: 120px repeat(5, minmax(0, 1fr)); gap: var(--space-2); align-items: center; }
.ks-tracks__cell { padding: var(--space-3); border: 1px solid var(--color-on-surface); font-size: var(--fs-body-s); text-align: center; text-decoration: none; color: inherit; }
.ks-tracks__cell:hover { border-color: var(--ks-orange); }
.ks-tracks__converge { display: grid; place-items: center; min-width: 180px; min-height: 120px; padding: var(--space-4); background: var(--ks-orange); color: var(--ks-black); font: 600 var(--fs-button)/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center; }
@media (max-width: 1023px) {
	.ks-tracks { grid-template-columns: 1fr; }
	.ks-tracks__row { grid-template-columns: 1fr 1fr; }
	.ks-tracks__row > .ks-eyebrow { grid-column: 1 / -1; }
}

/* ---------- Accordion / FAQ ---------- */
.ks-faq { border-top: var(--rule-strong); }
.ks-faq details { border-bottom: var(--hairline); }
.ks-faq summary {
	display: flex; justify-content: space-between; align-items: center; gap: var(--space-5);
	min-height: 64px; padding-block: var(--space-4);
	font: 500 var(--fs-h4)/1.3 var(--font-sans);
	cursor: pointer; list-style: none;
}
.ks-faq summary::-webkit-details-marker { display: none; }
.ks-faq summary::after { content: "+"; font: 300 24px/1 var(--font-sans); transition: transform var(--dur-micro); flex: none; }
.ks-faq details[open] summary::after { transform: rotate(45deg); }
.ks-faq__body { padding-bottom: var(--space-5); max-width: 68ch; }

/* ---------- Key facts / spec list ---------- */
.ks-facts { display: grid; grid-template-columns: max-content 1fr; border-top: var(--hairline); margin: 0; }
.ks-facts dt, .ks-facts dd { margin: 0; padding: var(--space-3) var(--space-5) var(--space-3) 0; border-bottom: var(--hairline); }
.ks-facts dt { color: var(--color-muted); text-transform: uppercase; letter-spacing: .08em; font: 500 var(--fs-technical)/1.6 var(--font-sans); }
.ks-facts dd { font-size: var(--fs-body-s); }
.ks-tbc { color: var(--color-muted); font-style: italic; }

.ks-involvement { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid currentColor; font: 500 var(--fs-technical)/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.ks-involvement::before { content: ""; width: 6px; height: 6px; background: var(--ks-orange); }

/* ---------- Final CTA ---------- */
.ks-final-cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: end; }
.ks-final-cta__title { grid-column: 1 / span 9; }
.ks-final-cta__action { grid-column: 10 / -1; justify-self: end; }
@media (max-width: 1023px) { .ks-final-cta__title, .ks-final-cta__action { grid-column: 1 / -1; justify-self: start; } }

/* ---------- Work filters ---------- */
.ks-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.ks-filters__search { min-width: min(320px, 100%); }
.ks-work-empty { padding: var(--space-8) 0; border-top: var(--hairline); }

/* ---------- Article (journal) ---------- */
.ks-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: calc(var(--z-nav) + 1); background: transparent; pointer-events: none; }
.ks-progress__bar { height: 100%; width: 100%; background: var(--ks-orange); transform-origin: left; transform: scaleX(0); }
.ks-toc { position: sticky; top: calc(var(--nav-height) + var(--space-5)); }
.ks-toc ol { list-style: none; margin: 0; padding: 0; border-left: var(--hairline); }
.ks-toc a { display: block; padding: var(--space-2) var(--space-4); margin-left: -1px; border-left: 1px solid transparent; color: var(--color-muted); text-decoration: none; font-size: var(--fs-body-s); }
.ks-toc a.is-active, .ks-toc a:hover { color: var(--color-on-surface); border-left-color: var(--ks-orange); }
.ks-prose { font-size: var(--fs-body-l); line-height: 1.6; max-width: 68ch; }
.ks-prose h2 { font: 400 var(--fs-h2)/1.1 var(--font-display); margin: var(--space-8) 0 var(--space-4); }
.ks-prose h3 { font: 500 var(--fs-h3)/1.2 var(--font-sans); margin: var(--space-7) 0 var(--space-3); }
.ks-prose p, .ks-prose ul, .ks-prose ol { margin: 0 0 1em; }
.ks-prose ul, .ks-prose ol { padding-left: 1.2em; }
.ks-prose a { text-decoration-color: var(--ks-orange); text-underline-offset: 3px; }
.ks-prose img { margin-block: var(--space-6); }

/* ---------- Notice (illustrative media, BUSINESS INPUT) ---------- */
.ks-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-left: var(--rule-accent); background: var(--color-surface-raised); font-size: var(--fs-body-s); }
.ks-notice__icon { flex: none; width: 18px; height: 18px; border: 1px solid currentColor; display: grid; place-items: center; font: 600 11px/1 var(--font-sans); }

/* ---------- WPBakery / Salient row reset around KS sections ---------- */
body.ks-shell .wpb_row:has(.ks-section),
body.ks-shell .vc_row:has(.ks-section),
body.ks-shell .row_col_wrap_12:has(.ks-section),
body.ks-shell .vc_column_container:has(.ks-section) > .vc_column-inner,
body.ks-shell .wpb_column:has(.ks-section),
body.ks-shell .wpb_wrapper:has(> .ks-section) {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
}
body.ks-shell .full-width-content:has(.ks-section) { margin-left: 0 !important; margin-right: 0 !important; left: 0 !important; width: 100% !important; }
body.ks-shell .ks-section { margin-left: calc(50% - 50vw) !important; }


/* ---------- Header colour by theme ---------- */
.ks-header[data-theme="dark"] { color: var(--ks-white); }
.ks-header[data-theme="light"] { color: var(--ks-black); }
.ks-header .ks-btn--secondary { --btn-fg: currentColor; --btn-border: currentColor; }
.ks-header[data-theme="dark"] .ks-btn--secondary:hover { --btn-bg: var(--ks-white); --btn-fg: var(--ks-black); }
.ks-header[data-theme="light"] .ks-btn--secondary:hover { --btn-bg: var(--ks-black); --btn-fg: var(--ks-white); }

/* ---------- Lists ---------- */
.ks-plainlist { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.ks-plainlist li { padding: var(--space-3) 0; border-bottom: var(--hairline); font-size: var(--fs-body-s); }
ol.ks-plainlist { counter-reset: ks; }
ol.ks-plainlist li { counter-increment: ks; display: flex; gap: var(--space-3); }
ol.ks-plainlist li::before { content: counter(ks, decimal-leading-zero); color: var(--color-muted); font: 500 var(--fs-technical)/1.6 var(--font-sans); letter-spacing: .08em; }

/* ---------- Consent ---------- */
.ks-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-toast); background: var(--ks-charcoal); color: var(--ks-white); border-top: 2px solid var(--ks-orange); }
.ks-consent[hidden] { display: none; }
.ks-consent__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
.ks-consent a { color: inherit; }

/* ---------- Forms (progressive disclosure) ---------- */
.ks-form__more summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; list-style: none; }
.ks-form__more summary::-webkit-details-marker { display: none; }
.ks-form__more summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; font-size: 12px; }
.ks-form__more[open] summary::before { content: "–"; }
.ks-choice-grid .ks-choice { padding: var(--space-2) 0; }

/* ---------- Estimator ---------- */
.ks-estimator { max-width: 1120px; }
.ks-estimator__head { margin-bottom: var(--space-7); }
.ks-estimator__bar { height: 2px; margin-top: var(--space-3); background: var(--color-border); }
.ks-estimator__bar span { display: block; height: 100%; background: var(--ks-orange); transition: width var(--dur-standard) var(--ease-standard); }
.ks-estimator__step { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.ks-estimator__step legend { padding: 0; margin-bottom: var(--space-3); }
.ks-estimator__step legend:focus { outline: none; }
.ks-estimator__nav { margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--hairline); }
.ks-estimator__result:focus { outline: none; }
.ks-estimator__result .ks-stagestrip a { color: var(--color-muted); }
.ks-estimator__result .ks-stagestrip a.is-on { color: var(--color-on-surface); }

/* ---------- Stage pages / page headers ---------- */
.ks-page-header { padding-top: calc(var(--nav-height) + var(--space-9)); }
.ks-stage-hero { padding-top: calc(var(--nav-height) + var(--space-8)); }
.ks-stage-pager .ks-card { gap: var(--space-3); }
.ks-service-group + .ks-service-group { margin-top: var(--space-9); }
.ks-services-steps .ks-steps a { grid-template-columns: 200px 1fr auto; }
.ks-steps a > .ks-stagechips { flex-wrap: wrap; }
@media (min-width: 768px) { .ks-steps a:has(> .ks-stagechips) { grid-template-columns: 200px 1fr minmax(0, 30%); } }
.ks-steps a:has(> .ks-stagechips) .ks-steps__track { text-transform: none; letter-spacing: 0; font-size: var(--fs-body-s); }

/* Real photography inside text sections and stage pages (SRS MED-002: use the real thing where it exists). */
.ks-text-figure { margin: var(--space-7) 0 0; }
.ks-text-figure img, .ks-stage-photo img { width: 100%; height: auto; display: block; }
.ks-text-figure figcaption, .ks-stage-photo figcaption { margin-top: var(--space-2); }
.ks-stage-photo { margin: var(--space-7) 0; }
.ks-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--card-gap); }
.ks-gallery figure { margin: 0; grid-column: span 4; }
.ks-gallery figure.is-wide { grid-column: span 8; }
.ks-gallery figure.is-full { grid-column: 1 / -1; }
.ks-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; background: var(--color-surface-raised); }
.ks-gallery figure.is-wide img, .ks-gallery figure.is-full img { aspect-ratio: auto; object-fit: contain; }
@media (max-width: 1023px) { .ks-gallery figure, .ks-gallery figure.is-wide { grid-column: span 6; } }
@media (max-width: 599px) { .ks-gallery figure, .ks-gallery figure.is-wide { grid-column: 1 / -1; } }

/* Article layout: TOC + body; stacks below 1024px (TOC becomes a collapsed list above the text). */
.ks-article__toc { grid-column: 1 / span 3; }
.ks-article__body { grid-column: 3 / span 8; }
.ks-article__body.has-toc { grid-column: 5 / span 8; }
@media (max-width: 1199px) {
	.ks-article__toc, .ks-article__body, .ks-article__body.has-toc { grid-column: 1 / -1; }
	.ks-article__toc { position: static; margin-bottom: var(--space-6); }
}

/* Turnaround table stacks on phones. */
@media (max-width: 767px) {
	.ks-turnaround thead { display: none; }
	.ks-turnaround tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); padding-block: var(--space-4); border-bottom: var(--hairline); }
	.ks-turnaround th, .ks-turnaround td { display: block; width: auto; border: 0; padding: 0; }
	.ks-turnaround tbody th { grid-column: 1 / -1; width: auto; }
	.ks-turnaround td:nth-of-type(1)::before { content: "Indicative: "; color: var(--color-muted); }
	.ks-turnaround td:nth-of-type(2)::before { content: "Typical: "; color: var(--color-muted); }
	.ks-turnaround td:nth-of-type(3) { grid-column: 1 / -1; }
	.ks-turnaround td:nth-of-type(3)::before { content: "Delays: "; color: var(--color-muted); }
}

/* Case-study meta strip: one row on desktop, label/value pairs stacked on smaller screens. */
.ks-facts--meta { grid-template-columns: repeat(var(--meta-cols, 3), max-content minmax(0, 1fr)); }
@media (max-width: 1023px) { .ks-facts--meta { grid-template-columns: max-content minmax(0, 1fr); } }