/* ==========================================================================
   Sonnenschein-Berger & Kollegen — Micro-Interactions Design System
   Waldgrün + Bernstein, Source Serif 4 / Work Sans, taktile 50-160ms States
   ========================================================================== */

:root {
	--font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--color-bg: #F6F5F0;
	--color-bg-alt: #EDEAE1;
	--color-surface: #FFFFFF;
	--color-ink: #1C2620;
	--color-ink-soft: #4C5951;
	--color-ink-faint: #75817A;
	--color-primary: #2F4438;
	--color-primary-dark: #1E2F26;
	--color-primary-tint: #E3E9E3;
	--color-accent: #AD8A40;
	--color-accent-dark: #8C6F30;
	--color-accent-soft: #EFE3C4;
	--color-success: #4C8B62;
	--color-error: #B65A4A;
	--color-border: #DFDACB;

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	--dur-tap: 90ms;
	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-slow: 420ms;

	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 22px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(28, 38, 32, 0.06), 0 1px 1px rgba(28, 38, 32, 0.04);
	--shadow-md: 0 8px 24px -8px rgba(28, 38, 32, 0.18);
	--shadow-lg: 0 20px 48px -16px rgba(28, 38, 32, 0.24);

	--header-height: 76px;
	--container: 1240px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
.icon { width: 1.4em; height: 1.4em; flex: 0 0 auto; vertical-align: middle; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

p { margin: 0 0 1em; max-width: 65ch; }
.sbk-page-content p, .sbk-contact-page__info p { color: var(--color-ink-soft); }

.sbk-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-primary);
	color: #fff;
	padding: 12px 20px;
	z-index: 1000;
	border-radius: 0 0 var(--radius-sm) 0;
}
.sbk-skip-link:focus { left: 0; }

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.sbk-eyebrow {
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
	margin: 0 0 0.9em;
}

.sbk-h2 {
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.sbk-h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

.sbk-section-head { max-width: 640px; margin: 0 auto 2.6rem; text-align: center; }
.sbk-section-sub { color: var(--color-ink-soft); font-size: 1.05rem; }

/* ---------- Tactile press feedback (global) ---------- */
[data-tactile] { transition: transform var(--dur-tap) var(--ease-out); }
[data-tactile]:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
	[data-tactile]:hover { transform: translateY(-1px); }
}

/* ---------- Buttons ---------- */
.sbk-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.95em 1.6em;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.98rem;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: transform var(--dur-tap) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.sbk-btn--primary {
	background: var(--color-primary);
	color: #fff;
	box-shadow: var(--shadow-sm);
}
@media (hover: hover) and (pointer: fine) {
	.sbk-btn--primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); }
}
.sbk-btn--primary:active { transform: scale(0.97); }

.sbk-btn--ghost {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-border);
}
@media (hover: hover) and (pointer: fine) {
	.sbk-btn--ghost:hover { border-color: var(--color-primary); background: var(--color-primary-tint); }
}
.sbk-btn--ghost:active { transform: scale(0.97); }

/* ---------- Header ---------- */
.sbk-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(246, 245, 240, 0.9);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.sbk-header.is-condensed {
	box-shadow: var(--shadow-sm);
	border-color: var(--color-border);
}
.sbk-header__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 16px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--header-height);
	transition: min-height var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.sbk-header.is-condensed .sbk-header__inner {
	min-height: 60px;
	padding: 10px 28px;
}

.sbk-logo { display: flex; align-items: center; }
.sbk-logo img { max-height: 52px; width: auto; transition: max-height var(--dur-base) var(--ease-out); }
.sbk-header.is-condensed .sbk-logo img { max-height: 40px; }
.sbk-logo__text {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--color-primary);
}

.sbk-nav { display: none; }
.sbk-menu { display: flex; align-items: center; gap: 2.1rem; }
.sbk-menu a {
	font-weight: 500;
	font-size: 0.98rem;
	color: var(--color-ink-soft);
	position: relative;
	padding: 6px 0;
	transition: color var(--dur-fast) var(--ease-out);
}
.sbk-menu a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--color-accent);
	transition: right var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.sbk-menu a:hover { color: var(--color-primary); }
	.sbk-menu a:hover::after { right: 0; }
}

.sbk-header__actions { display: flex; align-items: center; gap: 14px; }
.sbk-tel-btn {
	display: none;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 1.1em;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.92rem;
	white-space: nowrap;
}
.sbk-tel-btn--mobile { display: flex; margin-top: auto; justify-content: center; }

.sbk-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-tint);
	color: var(--color-primary);
	border: none;
	transition: transform var(--dur-tap) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.sbk-burger:active { transform: scale(0.94); }

.sbk-mobile-menu {
	position: fixed;
	top: 0; right: 0;
	height: 100dvh;
	width: min(86vw, 380px);
	background: var(--color-surface);
	z-index: 90;
	padding: 20px 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	transform: translateX(100%);
	transition: transform var(--dur-base) var(--ease-out);
	box-shadow: var(--shadow-lg);
}
.sbk-mobile-menu.is-open { transform: translateX(0); }
.sbk-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; }
.sbk-mobile-menu__list { display: flex; flex-direction: column; gap: 4px; }
.sbk-mobile-menu__list a {
	display: block;
	padding: 14px 10px;
	font-size: 1.1rem;
	font-weight: 500;
	border-bottom: 1px solid var(--color-border);
	min-height: 44px;
}
.sbk-mobile-menu__scrim {
	position: fixed; inset: 0;
	background: rgba(28, 38, 32, 0.45);
	z-index: 80;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-base) var(--ease-out);
}
.sbk-mobile-menu__scrim.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Hero ---------- */
.sbk-hero { padding: 3.2rem 28px 4.5rem; }
.sbk-hero__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}
.sbk-hero__title {
	font-size: clamp(2.1rem, 5.2vw, 3.4rem);
	color: var(--color-primary-dark);
	margin-bottom: 0.5em;
}
.sbk-hero__subtitle {
	font-size: 1.08rem;
	color: var(--color-ink-soft);
	max-width: 46ch;
	margin-bottom: 1.8em;
}
.sbk-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.sbk-hero__actions .sbk-btn--ghost { background: var(--color-surface); }

.sbk-hero__visual { position: relative; perspective: 1200px; }
.sbk-hero__image-frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	transform: rotateX(0deg) rotateY(0deg);
	transition: transform var(--dur-slow) var(--ease-out);
	transform-style: preserve-3d;
	will-change: transform;
}
.sbk-hero__image { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

.sbk-hero__badge {
	position: absolute;
	bottom: -18px;
	left: -18px;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: 16px 20px;
	display: flex;
	align-items: baseline;
	gap: 10px;
	transform: translateY(28px);
	transition: transform 500ms var(--ease-out);
}
.sbk-hero__badge.is-visible { transform: translateY(0); }
.sbk-hero__badge-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--color-accent-dark); }
.sbk-hero__badge-label { font-size: 0.8rem; color: var(--color-ink-soft); line-height: 1.3; }

/* ---------- Slider ---------- */
.sbk-slider { padding: 2rem 28px 4rem; max-width: var(--container); margin: 0 auto; }
.sbk-slider__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; gap: 1rem; flex-wrap: wrap; }
.sbk-slider__controls { display: flex; gap: 10px; }
.sbk-slider__btn {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	transition: transform var(--dur-tap) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sbk-slider__btn:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) {
	.sbk-slider__btn:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
}
.sbk-slider__btn:disabled { opacity: 0.35; pointer-events: none; }

.sbk-slider__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	scrollbar-width: none;
	cursor: grab;
}
.sbk-slider__track::-webkit-scrollbar { display: none; }
.sbk-slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.sbk-slide-card {
	flex: 0 0 min(320px, 82vw);
	scroll-snap-align: start;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transform: perspective(900px) rotateX(0deg) rotateY(0deg);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
	transform-style: preserve-3d;
}
@media (hover: hover) and (pointer: fine) {
	.sbk-slide-card:hover { box-shadow: var(--shadow-md); }
}
.sbk-slide-card__media { aspect-ratio: 16/10; overflow: hidden; }
.sbk-slide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sbk-slide-card__body { padding: 20px 22px 24px; }
.sbk-slide-card__body h3 { font-size: 1.1rem; margin-bottom: 0.4em; }
.sbk-slide-card__body p { font-size: 0.94rem; color: var(--color-ink-soft); margin: 0; }

.sbk-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 1.4rem; }
.sbk-slider__dots button {
	width: 8px; height: 8px;
	border-radius: 50%;
	border: none;
	background: var(--color-border);
	transition: transform var(--dur-tap) var(--ease-out), background-color var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.sbk-slider__dots button.is-active { background: var(--color-accent); width: 22px; border-radius: var(--radius-pill); }

/* ---------- Bento Services ---------- */
.sbk-services { padding: 2rem 28px 4.5rem; max-width: var(--container); margin: 0 auto; }
.sbk-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(220px, auto);
	gap: 22px;
}
.sbk-bento__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transform: perspective(1000px);
	transform-style: preserve-3d;
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
	grid-column: span 1;
}
.sbk-bento__card--lead { grid-column: span 2; grid-row: span 2; min-height: 380px; }
@media (hover: hover) and (pointer: fine) {
	.sbk-bento__card:hover { box-shadow: var(--shadow-lg); }
}
.sbk-bento__card:active { transform: scale(0.985); }

.sbk-bento__media { position: absolute; inset: 0; }
.sbk-bento__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.sbk-bento__card:hover .sbk-bento__media img { transform: scale(1.05); }
}
.sbk-bento__card:not(.sbk-bento__card--lead) .sbk-bento__media { position: relative; inset: auto; aspect-ratio: 16/10; }
.sbk-bento__card:not(.sbk-bento__card--lead) .sbk-bento__body { position: relative; }

.sbk-bento__card--lead .sbk-bento__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(28,38,32,0) 30%, rgba(20,28,23,0.82) 100%);
}
.sbk-bento__card--lead .sbk-bento__body { position: relative; padding: 28px; color: #fff; }
.sbk-bento__card--lead h3 { color: #fff; }
.sbk-bento__card--lead p { color: rgba(255,255,255,0.85); }

.sbk-bento__body { padding: 22px; }
.sbk-bento__body h3 { font-size: 1.2rem; margin-bottom: 0.35em; }
.sbk-bento__body p { font-size: 0.92rem; margin-bottom: 0.9em; }
.sbk-bento__link { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; font-size: 0.9rem; color: var(--color-accent); }

/* ---------- Stats ---------- */
.sbk-stats { background: var(--color-primary); color: #fff; padding: 3.4rem 28px; }
.sbk-stats__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	text-align: center;
}
.sbk-stat__num { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3rem); font-weight: 700; color: var(--color-accent-soft); }
.sbk-stat__suffix { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--color-accent-soft); }
.sbk-stat p { margin: 0.4em 0 0; font-size: 0.92rem; color: rgba(255,255,255,0.78); }

/* ---------- Team ---------- */
.sbk-team { padding: 4rem 28px; max-width: var(--container); margin: 0 auto; }
.sbk-team__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 2rem; }
.sbk-team__grid--single { grid-template-columns: minmax(0, 340px); justify-content: center; }
.sbk-team__grid--single .sbk-team__card--full { max-width: 480px; margin: 0 auto; }
.sbk-team__card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transform: perspective(1000px);
	transform-style: preserve-3d;
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.sbk-team__card:hover { box-shadow: var(--shadow-md); }
}
.sbk-team__media { aspect-ratio: 4/5; overflow: hidden; background: var(--color-bg-alt); }
.sbk-team__media img { width: 100%; height: 100%; object-fit: cover; }
.sbk-team__card h3, .sbk-team__card .sbk-team__role, .sbk-team__card p:not(.sbk-team__role) { padding-left: 22px; padding-right: 22px; }
.sbk-team__card h3 { margin-top: 20px; font-size: 1.15rem; }
.sbk-team__role { color: var(--color-accent-dark); font-weight: 600; font-size: 0.88rem; margin-bottom: 0.8em; }
.sbk-team__card--full p:not(.sbk-team__role) { padding-bottom: 22px; color: var(--color-ink-soft); font-size: 0.95rem; }

.sbk-link-more { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--color-primary); }

/* ---------- Process ---------- */
.sbk-process { padding: 4rem 28px; background: var(--color-bg-alt); }
.sbk-process h2 { text-align: center; max-width: var(--container); margin-left: auto; margin-right: auto; margin-bottom: 2.4rem; }
.sbk-process__list {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	counter-reset: step;
}
.sbk-process__list li {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: 26px 22px;
	box-shadow: var(--shadow-sm);
}
.sbk-process__num {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-accent);
	margin-bottom: 0.5em;
}
.sbk-process__list h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.sbk-process__list p { font-size: 0.92rem; color: var(--color-ink-soft); margin: 0; }

/* ---------- CTA + callback pills ---------- */
.sbk-cta { padding: 4.5rem 28px; text-align: center; }
.sbk-cta__inner { max-width: 620px; margin: 0 auto; }
.sbk-cta p { color: var(--color-ink-soft); margin-left: auto; margin-right: auto; }
.sbk-cta--compact { padding: 3.5rem 28px; }

.sbk-callback { margin: 2rem 0; }
.sbk-callback__label { font-size: 0.85rem; font-weight: 600; color: var(--color-ink-soft); margin-bottom: 0.7em; }
.sbk-callback__pills { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sbk-pill {
	padding: 0.65em 1.3em;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	font-weight: 500;
	font-size: 0.92rem;
	color: var(--color-ink-soft);
	transition: transform var(--dur-tap) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sbk-pill.is-selected {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
.sbk-pill:active { transform: scale(0.94); }

.sbk-cta__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.sbk-footer { background: var(--color-primary-dark); color: rgba(255,255,255,0.82); padding: 3.6rem 28px 1.6rem; }
.sbk-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2.4rem;
}
.sbk-footer__logo {
	display: inline-block;
	background: #fff;
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	margin-bottom: 1.2em;
}
.sbk-footer__logo img { max-height: 40px; display: block; }
.sbk-footer .sbk-logo__text { color: #fff; }
.sbk-footer__tagline { color: rgba(255,255,255,0.65); font-size: 0.92rem; max-width: 32ch; }
.sbk-footer__heading { font-size: 1rem; color: #fff; margin-bottom: 1em; }
.sbk-footer__list { display: flex; flex-direction: column; gap: 10px; }
.sbk-footer__list a { font-size: 0.92rem; color: rgba(255,255,255,0.72); transition: color var(--dur-fast) var(--ease-out); }
.sbk-footer__list a:hover { color: var(--color-accent-soft); }

.sbk-contact-list { display: flex; flex-direction: column; gap: 12px; }
.sbk-contact-list li, .sbk-contact-list a { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; }
.sbk-contact-list .icon { color: var(--color-accent); flex-shrink: 0; }
.sbk-footer .sbk-contact-list .icon { color: var(--color-accent-soft); }

.sbk-footer__bottom {
	max-width: var(--container);
	margin: 2.6rem auto 0;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255,255,255,0.12);
	font-size: 0.85rem;
	color: rgba(255,255,255,0.55);
}

/* ---------- Generic page hero/content ---------- */
.sbk-page-hero { padding: 3.4rem 28px 2.4rem; }
.sbk-page-hero__inner { max-width: var(--container); margin: 0 auto; }
.sbk-page-title { font-size: clamp(1.9rem, 4.4vw, 3rem); color: var(--color-primary-dark); }
.sbk-page-content { padding: 0 28px 3.5rem; }
.sbk-page-content__inner { max-width: 760px; margin: 0 auto; }
.sbk-page-content__inner h2 { margin-top: 1.4em; font-size: 1.5rem; }
.sbk-page-content__inner h3 { margin-top: 1.2em; font-size: 1.2rem; }
.sbk-page-content__inner ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1.2em; }
.sbk-page-content__inner ul li { margin-bottom: 0.4em; color: var(--color-ink-soft); }
.sbk-content-image { border-radius: var(--radius-lg); margin-bottom: 1.6em; aspect-ratio: 16/9; object-fit: cover; width: 100%; }

.sbk-services--overview { padding-top: 0; }

/* ---------- Contact page ---------- */
.sbk-contact-page { padding: 0 28px 4.5rem; }
.sbk-contact-page__grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}
.sbk-contact-list--large li, .sbk-contact-list--large a { font-size: 1rem; margin-bottom: 4px; }
.sbk-map { margin-top: 1.6rem; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.sbk-map iframe { width: 100%; height: 280px; border: 0; }

.sbk-contact-page__form { background: var(--color-surface); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); position: relative; }
.sbk-contact-page__form-hint { color: var(--color-ink-soft); font-size: 0.92rem; }

.sbk-form-frame :is(input, textarea, select) {
	width: 100%;
	padding: 0.85em 1em;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	font-family: var(--font-body);
	font-size: 0.98rem;
	color: var(--color-ink);
	margin-bottom: 14px;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sbk-form-frame :is(input, textarea, select):focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
	outline: none;
}
.sbk-form-frame label { display: block; font-weight: 500; font-size: 0.88rem; margin-bottom: 0.4em; color: var(--color-ink-soft); }
.sbk-form-frame button, .sbk-form-frame input[type="submit"] {
	width: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.9em 1.8em;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: #fff;
	border: none;
	font-weight: 600;
	transition: transform var(--dur-tap) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.sbk-form-frame button:active, .sbk-form-frame input[type="submit"]:active { transform: scale(0.97); }

.sbk-form-status {
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.92);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--dur-fast) var(--ease-out);
}
.sbk-form-status.is-visible { opacity: 1; }
.sbk-form-status__loading { display: flex; align-items: center; gap: 0.7em; font-weight: 600; color: var(--color-primary); }
.sbk-form-status__loading .icon { animation: sbk-spin 900ms linear infinite; }

@keyframes sbk-spin { to { transform: rotate(360deg); } }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
	transform: translateY(26px);
	transition: transform 560ms var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (min-width: 901px) {
	.sbk-nav { display: block; }
	.sbk-tel-btn { display: flex; }
	.sbk-burger, .sbk-mobile-menu, .sbk-mobile-menu__scrim { display: none; }
}

@media (min-width: 720px) {
	.sbk-hero__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	.sbk-header__inner { padding: 14px 20px; }
	.sbk-bento { grid-template-columns: repeat(2, 1fr); }
	.sbk-bento__card--lead { grid-column: span 2; }
	.sbk-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.4rem; }
	.sbk-team__grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
	.sbk-process__list { grid-template-columns: repeat(2, 1fr); }
	.sbk-footer__inner { grid-template-columns: 1fr 1fr; }
	.sbk-contact-page__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.sbk-hero { padding: 2.2rem 18px 3rem; }
	.sbk-hero__inner { grid-template-columns: 1fr; gap: 2.6rem; }
	.sbk-hero__badge { left: 8px; bottom: -14px; padding: 12px 16px; }
	.sbk-hero__actions .sbk-btn { flex: 1 1 auto; justify-content: center; }
	.sbk-slider, .sbk-services, .sbk-team, .sbk-process, .sbk-cta, .sbk-page-hero, .sbk-page-content, .sbk-contact-page { padding-left: 18px; padding-right: 18px; }
	.sbk-bento { grid-template-columns: 1fr; }
	.sbk-bento__card--lead { grid-column: span 1; grid-row: span 1; min-height: 320px; }
	.sbk-stats__inner { grid-template-columns: 1fr 1fr; }
	.sbk-process__list { grid-template-columns: 1fr; }
	.sbk-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
	.sbk-footer { padding: 3rem 18px 1.6rem; }
	.sbk-cta__actions .sbk-btn { flex: 1 1 auto; justify-content: center; }
	h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* Ensure minimum tap target size across interactive elements */
.sbk-btn, .sbk-pill, .sbk-slider__btn, .sbk-burger, .sbk-menu a, .sbk-mobile-menu__list a {
	min-height: 44px;
}