/* =============================================================
 * Bakbak Widgets — shared stylesheet
 * ============================================================= */

/* Defensive: never auto-underline links inside Bakbak widgets on hover.
 * Override theme/Astra defaults that add text-decoration: underline.
 * Individual widgets can opt-in to underline via their own controls. */
[class^="bakbak-"] a,
[class*=" bakbak-"] a,
a[class^="bakbak-"],
a[class*=" bakbak-"] {
	text-decoration: none;
}

[class^="bakbak-"] a:hover,
[class*=" bakbak-"] a:hover,
a[class^="bakbak-"]:hover,
a[class*=" bakbak-"]:hover,
[class^="bakbak-"] a:focus,
[class*=" bakbak-"] a:focus,
a[class^="bakbak-"]:focus,
a[class*=" bakbak-"]:focus {
	text-decoration: none;
}

.bakbak-tb,
.bakbak-tb * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
 * TRUST BAND
 * --------------------------------------------------------------- */
.bakbak-tb {
	--bakbak-tb-divider: #111111;
	--bakbak-tb-divider-w: 1px;
	--bakbak-tb-divider-h: 70%;
	--bakbak-tb-divider-top: 50%;
	--bakbak-tb-col-gap: clamp(24px, 4vw, 64px);
	--bakbak-tb-row-gap: clamp(40px, 5vw, 72px);

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--bakbak-tb-col-gap);
	row-gap: var(--bakbak-tb-row-gap);
	align-items: start;
	width: 100%;
	padding: clamp(24px, 4vw, 48px) 0;
	position: relative;
}

@media (min-width: 968px) {
	.bakbak-tb {
		grid-template-columns: repeat(4, 1fr);
	}
}

.bakbak-tb .bakbak-tb__item,
.bakbak-tb__item.bakbak-tb__item {
	position: relative;
	text-align: center;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	padding: 0;
}

/* -------- Dividers --------
 * The line follows the CONTENT, not the item's full height.
 * Since content is centered vertically inside the item (justify-content: center),
 * we anchor the line to the same vertical centre and give it a height that
 * matches typical content (~ number + title + description = ~180-200px).
 *
 * Using a fixed max-height instead of percentage avoids the line extending
 * into the empty space above/below the content.
 */
.bakbak-tb--dividers-lines .bakbak-tb__item::before {
	content: "";
	position: absolute;
	top: var(--bakbak-tb-divider-top);
	left: calc(-1 * var(--bakbak-tb-col-gap) / 2);
	width: var(--bakbak-tb-divider-w);
	height: var(--bakbak-tb-divider-h);
	background: var(--bakbak-tb-divider);
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 967.98px) {
	.bakbak-tb--dividers-lines .bakbak-tb__item:nth-child(2n)::before {
		opacity: 1;
	}
}

@media (min-width: 968px) {
	.bakbak-tb--dividers-lines .bakbak-tb__item:nth-child(4n+2)::before,
	.bakbak-tb--dividers-lines .bakbak-tb__item:nth-child(4n+3)::before,
	.bakbak-tb--dividers-lines .bakbak-tb__item:nth-child(4n+4)::before {
		opacity: 1;
	}
}

/* -------- Number row --------
 * Fixed min-height ensures all numbers share the same baseline
 * across the row.
 */
.bakbak-tb__number-wrap {
	display: block;
	text-align: center;
	white-space: nowrap;
	margin: 0 0 0.08em;
}

.bakbak-tb__prefix,
.bakbak-tb__number,
.bakbak-tb__suffix {
	font-family: inherit;
	letter-spacing: -0.02em;
	color: #111111;
	display: inline;
	vertical-align: baseline;
}

.bakbak-tb__number {
	font-variant-numeric: tabular-nums;
}

.bakbak-tb__prefix {
	margin-right: 0.04em;
}

.bakbak-tb__suffix {
	margin-left: 0.04em;
}

/* Superscript glyphs are converted from Unicode chars (²,³ etc.) to <sup> tags
 * in PHP. We position sup with translate (transform, no layout effect) so it
 * cannot extend the line-box vertically — which would push the number row out
 * of alignment with the other items. */
.bakbak-tb__prefix sup,
.bakbak-tb__suffix sup {
	font-size: 0.65em;
	line-height: 0;
	display: inline-block;
	vertical-align: baseline;
	transform: translateY(-0.55em);
}

/* -------- Title --------
 * Typography (size, weight, line-height) controlled from Elementor.
 */
.bakbak-tb__title {
	font-family: inherit;
	letter-spacing: -0.01em;
	color: #111111;
	text-align: center;
	margin: 0 0 0.45em;
	width: 100%;
	text-wrap: balance;
}

/* -------- Description --------
 * Typography controlled from Elementor.
 */
.bakbak-tb__desc {
	font-family: inherit;
	margin: 0 auto;
	max-width: 24ch;
	color: #555555;
	text-align: center;
	text-wrap: balance;
}

/* -------- Animation states -------- */
.bakbak-tb[data-animate="1"] .bakbak-tb__number {
	opacity: 0;
	transition: opacity 0.2s ease;
}
.bakbak-tb[data-animate="1"].is-running .bakbak-tb__number,
.bakbak-tb[data-animate="1"].is-done .bakbak-tb__number {
	opacity: 1;
}

.elementor-editor-active .bakbak-tb[data-animate="1"] .bakbak-tb__number {
	opacity: 1;
}

/* ---------------------------------------------------------------
 * LOGO MARQUEE
 * ---------------------------------------------------------------
 * Strategy: viewport has overflow:hidden. Inside it two identical
 * tracks sit side-by-side. We translate the wrapper by -50%, which
 * is exactly one track width — when it loops back to 0, the second
 * (cloned) track is now where the first was, so there's no visible
 * "jump". Animation is CSS-only, GPU-accelerated (transform).
 * --------------------------------------------------------------- */

.bakbak-marquee {
	--bakbak-marquee-duration: 40s;

	width: 100%;
	overflow: hidden;
	position: relative;
}

.bakbak-marquee__viewport {
	display: flex;
	width: max-content;
	will-change: transform;
	/* Animation driven by JS (see logo-marquee.js) for guaranteed seamless loop.
	   Fallback CSS animation kicks in if JS fails. */
	animation: bakbak-marquee-rtl var(--bakbak-marquee-duration) linear infinite;
}

.bakbak-marquee--ltr .bakbak-marquee__viewport {
	animation-name: bakbak-marquee-ltr;
}

/* When JS has set the transform inline, the CSS animation is overridden anyway,
   but we explicitly remove animation when JS marks marquee as initialized. */
.bakbak-marquee[data-bakbak-init="1"] .bakbak-marquee__viewport {
	animation: none !important;
}

/* Edge fade — soft horizontal gradient mask */
.bakbak-marquee--fade {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

.bakbak-marquee__track {
	display: flex;
	align-items: center;
	gap: 80px;
	flex-shrink: 0;
	padding-right: 80px; /* This becomes the gap between this track and the next clone */
}

/* Mobile — smaller gaps so logos are closer together and the marquee feels denser */
@media (max-width: 599px) {
	.bakbak-marquee__track {
		gap: 40px;
		padding-right: 40px;
	}
}

.bakbak-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	flex-shrink: 0;
}

.bakbak-marquee__item img {
	display: block;
	width: auto;
	height: 100%;
	max-height: 64px;
	max-width: none;
	min-width: 60px; /* fallback width while loading — prevents track from collapsing */
	object-fit: contain;
	opacity: 1;
	transition: opacity 0.3s ease;
}

/* Force track to maintain minimum height even before images load — prevents layout shift / empty gap */
.bakbak-marquee__viewport {
	min-height: 64px;
}

/* RTL (paremalt vasakule) — default.
   Uses --bakbak-marquee-shift set by JS (actual track width in px) for pixel-perfect loop.
   Falls back to -50% if JS hasn't run yet (viewport contains 2 tracks). */
@keyframes bakbak-marquee-rtl {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--bakbak-marquee-shift, 50%)), 0, 0); }
}

/* LTR (vasakult paremale) */
@keyframes bakbak-marquee-ltr {
	from { transform: translate3d(calc(-1 * var(--bakbak-marquee-shift, 50%)), 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

/* Honour reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.bakbak-marquee__viewport {
		animation: none;
		transform: none !important;
	}
	.bakbak-marquee__track--clone {
		display: none; /* one set is enough when static */
	}
}

/* In Elementor editor, animation still runs — useful for previewing */

/* ---------------------------------------------------------------
 * SEGMENTS — 3 vertical cards with photo background
 * ---------------------------------------------------------------
 * Stacking order (z-index from bottom to top):
 *   1. .bakbak-seg__image     — bg photo, transform: scale on hover
 *   2. .bakbak-seg__overlay   — flat overlay color (default dim)
 *   3. .bakbak-seg__gradient  — bottom-to-top fade (reading aid)
 *   4. .bakbak-seg__content   — text + arrow
 *
 * The card is an <a> with display: block so the whole tile is clickable.
 * --------------------------------------------------------------- */

.bakbak-seg {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	width: 100%;
}

/* Mobile: horizontal scroll with first-card-full + peek of next.
 * Use a horizontal flex container that overflows on the x-axis.
 * Each card is 85% of viewport width so the next one peeks ~15%.
 */
@media (max-width: 599.98px) {
	.bakbak-seg {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		/* edge padding so first card doesn't touch the screen edge */
		padding: 0 16px;
		gap: 12px;
		/* hide scrollbar for cleaner look */
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* iOS momentum scrolling */
		-webkit-overflow-scrolling: touch;
	}

	.bakbak-seg::-webkit-scrollbar {
		display: none;
	}

	.bakbak-seg > .bakbak-seg__card {
		flex: 0 0 80%;
		min-width: 80%;
		scroll-snap-align: none;
	}
}

/* Tablet: 2-column or stacked depending on mobile_layout */
@media (min-width: 600px) and (max-width: 968px) {
	.bakbak-seg--mobile-two-col {
		grid-template-columns: 1fr 1fr;
	}
	.bakbak-seg--mobile-two-col > .bakbak-seg__card:last-child:nth-child(odd) {
		grid-column: span 2;
	}
}

/* Desktop: always 3 columns */
@media (min-width: 969px) {
	.bakbak-seg {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

.bakbak-seg__card {
	--bakbak-seg-overlay: #000;
	--bakbak-seg-overlay-alpha: 0.35;
	--bakbak-seg-overlay-alpha-hover: 0.55;
	--bakbak-seg-grad-alpha: 0.8;
	--bakbak-seg-zoom: 1.06;

	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #1a1518; /* visible while img loads */
	isolation: isolate;
}

.bakbak-seg__card:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Image — background-image approach (more robust than <img> against theme overrides) */
.bakbak-seg__image-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transform: scale(1);
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.bakbak-seg__card:hover .bakbak-seg__image-wrap,
.bakbak-seg__card:focus-visible .bakbak-seg__image-wrap {
	transform: scale(var(--bakbak-seg-zoom));
}

/* Flat overlay — dims the whole photo, deepens on hover */
.bakbak-seg__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--bakbak-seg-overlay);
	opacity: var(--bakbak-seg-overlay-alpha);
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.bakbak-seg__card:hover .bakbak-seg__overlay,
.bakbak-seg__card:focus-visible .bakbak-seg__overlay {
	opacity: var(--bakbak-seg-overlay-alpha-hover);
}

/* Bottom-up gradient — ensures title is always readable on light photos */
.bakbak-seg__gradient {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, var(--bakbak-seg-grad-alpha)) 0%,
		rgba(0, 0, 0, calc(var(--bakbak-seg-grad-alpha) * 0.55)) 25%,
		rgba(0, 0, 0, 0) 60%
	);
	pointer-events: none;
}

/* Content (title + arrow) — sits at bottom */
.bakbak-seg__content {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 32px;
}

.bakbak-seg__title {
	font-family: inherit;
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 36px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #ffffff;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

/* Arrow — gentle slide on hover */
.bakbak-seg__arrow {
	display: inline-flex;
	align-items: center;
	color: #ffffff;
	transform: translateX(0);
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bakbak-seg__arrow svg {
	display: block;
	width: 32px;
	height: 14px;
}

.bakbak-seg__card:hover .bakbak-seg__arrow,
.bakbak-seg__card:focus-visible .bakbak-seg__arrow {
	transform: translateX(8px);
}

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bakbak-seg__image-wrap,
	.bakbak-seg__overlay,
	.bakbak-seg__arrow {
		transition: none !important;
	}
	.bakbak-seg__card:hover .bakbak-seg__image-wrap,
	.bakbak-seg__card:focus-visible .bakbak-seg__image-wrap {
		transform: none;
	}
	.bakbak-seg__card:hover .bakbak-seg__arrow,
	.bakbak-seg__card:focus-visible .bakbak-seg__arrow {
		transform: none;
	}
}

/* ---------------------------------------------------------------
 * WHY BAKBAK — dark section with title, lead, pillar grid
 * --------------------------------------------------------------- */

.bakbak-why {
	--bakbak-why-glow-1: rgba(217, 7, 48, 0.08);
	--bakbak-why-glow-2: rgba(180, 140, 90, 0.06);

	position: relative;
	width: 100%;
	background: #141414;
	color: #ffffff;
	overflow: hidden;
}

/* Radial glow — adds depth without being heavy */
.bakbak-why--glow::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 80% 20%, var(--bakbak-why-glow-1), transparent 40%),
		radial-gradient(circle at 20% 80%, var(--bakbak-why-glow-2), transparent 40%);
	pointer-events: none;
	z-index: 1;
}

.bakbak-why__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Eyebrow — typography controlled fully from Elementor */
.bakbak-why__eyebrow {
	font-family: inherit;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 20px;
}

/* Title — typography (size, weight, line-height etc.) controlled from Elementor */
.bakbak-why__title {
	font-family: inherit;
	color: #ffffff;
	margin: 0 0 28px;
	max-width: 24ch;
	text-wrap: balance;
}

/* Title divider — short bar under title */
.bakbak-why__title-divider {
	display: block;
	width: 80px;
	height: 4px;
	background-color: #ffffff;
	margin: 24px 0 32px;
	flex-shrink: 0;
}

/* Lead — typography controlled from Elementor */
.bakbak-why__lead {
	font-family: inherit;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 56px;
	max-width: 62ch;
}

/* Body text — long-form paragraphs */
.bakbak-why__body {
	color: rgba(255, 255, 255, 0.78);
	font-family: inherit;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
}

.bakbak-why__body p {
	margin: 0;
	color: inherit;
	font-family: inherit;
}

.bakbak-why__body p + p {
	margin-top: 20px;
}

.bakbak-why__body strong,
.bakbak-why__body b {
	color: #ffffff;
	font-weight: 600;
}

.bakbak-why__body a {
	color: #111111;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bakbak-why__body a:hover {
	text-decoration: none;
}

/* Mobile typography adjustments */
@media (max-width: 599.98px) {
	.bakbak-why__title {
		max-width: 100%;
	}
	.bakbak-why__body {
		margin-top: 28px;
	}
}

/* ---- Split layout with image on the side ---- */

.bakbak-why__inner {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.bakbak-why__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--bakbak-why-gap, 60px);
	row-gap: var(--bakbak-why-gap, 60px);
	align-items: center;
}

/* "Tipp" joondus: tõsta pealkirja esimene rida fondi-leading'u jagu üles,
   et tähtede ülaserv (cap) algaks täpselt pildi ülaservaga ühelt joonelt. */
.bakbak-why__grid--top .bakbak-why__text > :first-child {
	margin-top: -0.16em; /* fallback vanematele brauseritele */
}
@supports (text-box-trim: trim-start) {
	.bakbak-why__grid--top .bakbak-why__text > :first-child {
		margin-top: 0;
		text-box-trim: trim-start;
		text-box-edge: cap alphabetic;
	}
}

/* CTA inside grid — spans both columns, sits below.
 * row-gap adds extra space we don't want — neutralize with negative margin.
 * Result: only the CTA's own margin-top (Elementor "Vahe lõikude ja nupu vahel")
 * determines the spacing. */
.bakbak-why__cta-wrap--grid {
	grid-column: 1 / -1;
	margin-top: calc(var(--bakbak-why-cta-margin, 40px) - var(--bakbak-why-gap, 60px)) !important;
}

/* On desktop, with image on the LEFT, CTA should align under the text (right side) */
.bakbak-why--img-left .bakbak-why__cta-wrap--grid {
	justify-self: end;
}

/* On desktop, with image on the RIGHT (default), CTA aligns under text (left side) */
.bakbak-why--img-right .bakbak-why__cta-wrap--grid {
	justify-self: start;
}

/* Image on the LEFT — swap visual order */
.bakbak-why--img-left .bakbak-why__grid .bakbak-why__text {
	order: 2;
}
.bakbak-why--img-left .bakbak-why__grid .bakbak-why__image {
	order: 1;
}

/* Image wrap — handles aspect-ratio + cover crop */
.bakbak-why__image-wrap {
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 6px;
	position: relative;
}

.bakbak-why__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}

/* Originaal proportsioon — pilt näidatakse oma loomulikus kuvasuhtes, ilma kärpimata */
.bakbak-why__image-wrap--natural {
	aspect-ratio: auto !important;
	height: auto;
}
.bakbak-why__image-wrap--natural img {
	height: auto;
	object-fit: contain;
}

/* -------- Image slider variant (crossfade) -------- */
.bakbak-why__image-wrap--slider {
	display: block;
	cursor: pointer;
	text-decoration: none;
	position: relative;
}

.bakbak-why__image-wrap--slider:hover {
	text-decoration: none;
}

/* Track täidab kogu pildi-kasti; slaidid on selle sees üksteise peal */
.bakbak-why__slider-track {
	position: absolute;
	inset: 0;
}

.bakbak-why__image-wrap--slider img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
	opacity: 0;
	transition: opacity 1.1s ease;
	pointer-events: none;
}

/* Aktiivne pilt nähtav — vahetus toimub pehme sulandumisega */
.bakbak-why__image-wrap--slider img.is-active {
	opacity: 1;
}

/* Respect reduced motion: ainult esimene pilt jääb nähtavaks (JS ei vaheta) */
@media (prefers-reduced-motion: reduce) {
	.bakbak-why__image-wrap--slider img {
		transition: none;
	}
}

/* When image is present, body text doesn't get extra max-width — it fits its grid column */
.bakbak-why--has-image .bakbak-why__body {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Mobile — stack columns: text first, then image, then CTA */
@media (max-width: 899.98px) {
	.bakbak-why__grid {
		grid-template-columns: 1fr !important;
		row-gap: 32px;
		column-gap: 0;
	}

	/* On mobile, order: text (1) → image (2) → CTA (3) */
	.bakbak-why--has-image .bakbak-why__grid .bakbak-why__text {
		order: 1;
	}
	.bakbak-why--has-image .bakbak-why__grid .bakbak-why__image {
		order: 2;
	}
	.bakbak-why--has-image .bakbak-why__grid .bakbak-why__cta-wrap--grid {
		order: 3;
		justify-self: start;
	}

	/* Pildi kuvasuhe mobiilis tuleb responsive-kontrollist (image_ratio),
	   et Elementoris valitud ratio (nt 4:5) kehtiks ka telefonis.
	   Soovi korral saab mobiilile eraldi ratio määrata sama kontrolli alt. */
}

/* Divider — short horizontal bar between title and body */
.bakbak-why__divider {
	display: block;
	width: 60px;
	height: 3px;
	background-color: #111111;
	margin: 32px 0;
	flex-shrink: 0;
}

/* Emphasized paragraph — bigger, brighter */
.bakbak-why__body p.is-emphasized {
	color: #ffffff;
	font-size: 22px;
	line-height: 1.5;
	font-weight: 500;
}

@media (max-width: 599.98px) {
	.bakbak-why__body p.is-emphasized {
		font-size: 19px;
	}
}

/* CTA */
.bakbak-why__cta-wrap {
	margin-top: 40px;
}

.bakbak-why__cta {
	display: inline-block;
	background-color: #111111;
	color: #ffffff;
	padding: 16px 32px;
	border-radius: 50px;
	text-decoration: none;
	font-family: inherit;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 14px;
	transition: background-color 0.25s ease, transform 0.15s ease;
	cursor: pointer;
}

.bakbak-why__cta:hover {
	background-color: #333333;
}

.bakbak-why__cta:active {
	transform: translateY(1px);
}

/* When text is centered, also center divider */
.bakbak-why__inner[style*="text-align: center"] .bakbak-why__divider {
	margin-left: auto;
	margin-right: auto;
}

.bakbak-why__inner[style*="text-align: right"] .bakbak-why__divider {
	margin-left: auto;
}

/* ---------------------------------------------------------------
 * TESTIMONIALS — masonry layout with Google reviews + CTA
 * ---------------------------------------------------------------
 * Uses CSS columns for masonry — no JS needed, browsers naturally
 * balance cards across columns by height.
 * --------------------------------------------------------------- */

.bakbak-tm,
.bakbak-tm * {
	box-sizing: border-box;
}

.bakbak-tm {
	width: 100%;
}

.bakbak-tm__inner {
	width: 100%;
}

/* Header */
.bakbak-tm__header {
	text-align: center;
	margin-bottom: 56px;
}

.bakbak-tm__eyebrow {
	font-family: inherit;
	color: #888;
	margin: 0 0 12px;
}

.bakbak-tm__title {
	font-family: inherit;
	color: #111;
	margin: 0;
}

.bakbak-tm__title-divider {
	display: block;
	width: 50px;
	height: 3px;
	background-color: #111;
	margin: 20px auto 0;
}

/* Masonry — CSS columns */
.bakbak-tm__masonry {
	column-count: 3;
	column-gap: 20px;
	width: 100%;
}

/* Card */
.bakbak-tm__card {
	display: inline-block;
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #e5e2dd;
	border-radius: 4px;
	padding: 32px;
	margin-bottom: 20px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* Top row — quote (left) + stars (right) on the same line */
.bakbak-tm__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 8px;
}

/* Stars row */
.bakbak-tm__stars {
	display: flex;
	gap: 2px;
	color: #f4b400;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 8px; /* small vertical nudge to align with quote baseline */
}

.bakbak-tm__stars svg {
	display: block;
}

/* Quote mark */
.bakbak-tm__quote {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 64px;
	line-height: 0.8;
	color: #d4cfc4;
	margin: 0;
	font-weight: 700;
	flex-shrink: 0;
}

/* Text */
.bakbak-tm__text {
	font-family: inherit;
	color: #333;
	margin: 0 0 20px;
}

/* Strong/bold rõhutamine — tumedam värv, kindel weight */
.bakbak-tm__text strong,
.bakbak-tm__text b {
	font-weight: 700;
	color: #111;
}

/* Footer (author + source) */
.bakbak-tm__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid #f0ede7;
}

.bakbak-tm__person {
	flex: 1;
	min-width: 0;
}

.bakbak-tm__author {
	font-family: inherit;
	color: #111;
	margin: 0 0 2px;
}

.bakbak-tm__meta {
	font-family: inherit;
	font-size: 12px;
	color: #888;
	margin: 0;
}

.bakbak-tm__source {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fafaf7;
}

.bakbak-tm__google-icon {
	display: block;
}

/* CTA button */
.bakbak-tm__cta-wrap {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}

.bakbak-tm__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: #111;
	color: #fff;
	padding: 16px 32px;
	border-radius: 50px;
	border: 0 solid transparent;
	text-decoration: none;
	font-family: inherit;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	cursor: pointer;
}

.bakbak-tm__cta:hover {
	background-color: #333;
}

.bakbak-tm__cta:focus-visible {
	outline: 2px solid #111;
	outline-offset: 4px;
}

.bakbak-tm__cta .bakbak-tm__google-icon {
	width: 18px;
	height: 18px;
}

.bakbak-tm__cta svg:last-child {
	transition: transform 0.25s ease;
}

.bakbak-tm__cta:hover svg:last-child {
	transform: translateX(4px);
}

/* Desktop/mobile text variants for the CTA */
.bakbak-tm__cta-text--mobile {
	display: none;
}

@media (max-width: 480px) {
	.bakbak-tm__cta-text--desktop {
		display: none;
	}
	.bakbak-tm__cta-text--mobile {
		display: inline;
	}
}

/* Responsive */
@media (max-width: 968px) {
	.bakbak-tm__masonry {
		column-count: 2;
	}
}

@media (max-width: 599px) {
	/* On mobile, kill horizontal padding on section + inner so the scroll
	   container can extend edge-to-edge like segments do.
	   Vertical padding stays whatever Elementor user set. */
	.bakbak-tm {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.bakbak-tm__inner {
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Mobile: horizontal scroll with first-card-full + peek of next */
	.bakbak-tm__masonry {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		column-count: unset;
		column-gap: unset;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0 16px;
		gap: 12px;
		/* hide scrollbar */
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* iOS momentum scroll */
		-webkit-overflow-scrolling: touch;
	}

	.bakbak-tm__masonry::-webkit-scrollbar {
		display: none;
	}

	.bakbak-tm__card {
		flex: 0 0 80%;
		width: 80% !important;
		min-width: 80%;
		max-width: 80%;
		margin-bottom: 0 !important;
		padding: 24px;
	}

	/* Header and CTA wrapper get padding so they don't touch edges */
	.bakbak-tm__header,
	.bakbak-tm__cta-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bakbak-tm__cta,
	.bakbak-tm__cta svg:last-child {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------
 * GALLERY — horizontal scrollable image strip + custom lightbox
 * --------------------------------------------------------------- */

.bakbak-gal,
.bakbak-gal * {
	box-sizing: border-box;
}

.bakbak-gal {
	width: 100%;
	position: relative;
}

/* Viewport — wraps track + arrows, position context for arrow overlay */
.bakbak-gal__viewport {
	position: relative;
	width: 100%;
}

/* Track — horizontal flex row, scrollable on x-axis */
.bakbak-gal__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	/* Snap each image to the left edge when scrolling settles */
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
}

.bakbak-gal__track::-webkit-scrollbar {
	display: none;
}

/* Navigation arrows — positioned over the track edges */
.bakbak-gal__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background-color: rgba(255, 255, 255, 0.95);
	color: #111111;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

.bakbak-gal__arrow:hover {
	background-color: #111111;
	color: #ffffff;
}

.bakbak-gal__arrow:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 3px;
}

.bakbak-gal__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.bakbak-gal__arrow--prev {
	left: 12px;
}

.bakbak-gal__arrow--next {
	right: 12px;
}

.bakbak-gal__arrow svg {
	display: block;
}

/* Each image item — button (clickable) */
.bakbak-gal__item {
	flex: 0 0 auto;
	height: 380px;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	cursor: pointer;
	overflow: hidden;
	border-radius: 4px;
	position: relative;
	-webkit-tap-highlight-color: transparent;
	/* Snap to left edge when scroll settles */
	scroll-snap-align: start;
	scroll-snap-stop: always;
	/* aspect-ratio per image is set inline via PHP based on natural dimensions.
	 * Browser auto-calculates width = height * aspect-ratio. */
}

.bakbak-gal__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	transform: scale(1);
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

/* Hover zoom (opt-in via .bakbak-gal--zoom) */
.bakbak-gal--zoom .bakbak-gal__item:hover img,
.bakbak-gal--zoom .bakbak-gal__item:focus-visible img {
	transform: scale(1.04);
}

.bakbak-gal__item:focus-visible {
	outline: 2px solid #111;
	outline-offset: 4px;
}

/* ============================================================
   Masonry gallery (Galerii võrk) — iga pilt jääb oma originaal-
   proportsiooni. JS paigutab pildid lühimasse veergu (augud
   kaovad). CSS-veerud on no-JS varuvariandiks.
   ============================================================ */
.bakbak-gal--masonry {
	display: block;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	overflow: visible;
}

/* No-JS varuvariant: CSS-veerud */
.bakbak-gal--masonry .bakbak-grid {
	column-count: var(--bakbak-cols, 3);
	column-gap: var(--bakbak-gap, 16px);
}
.bakbak-gal--masonry .bakbak-grid > .bakbak-grid__item {
	margin-bottom: var(--bakbak-gap, 16px);
}

/* JS-režiim: päris masonry flex-veergudega */
.bakbak-gal--masonry .bakbak-grid--js {
	display: flex;
	column-count: auto;
	gap: var(--bakbak-gap, 16px);
	align-items: flex-start;
}
.bakbak-gal--masonry .bakbak-grid--js .bakbak-grid__col {
	display: flex;
	flex-direction: column;
	gap: var(--bakbak-gap, 16px);
	flex: 1 1 0;
	min-width: 0;
}
.bakbak-gal--masonry .bakbak-grid--js .bakbak-grid__item {
	margin: 0;
	width: 100%;
}

/* Item — kirjuta üle riba-galerii item-stiilid (aspect-ratio, flex jne) */
.bakbak-gal--masonry .bakbak-grid__item {
	display: block;
	width: 100%;
	max-width: 100%;
	flex: none;
	aspect-ratio: auto !important;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
	border-radius: 6px;
	scroll-snap-align: none;
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}

.bakbak-gal--masonry .bakbak-grid__item img {
	display: block !important;
	width: 100% !important;
	height: auto !important;          /* originaal-proportsioon, ei kärbita */
	max-width: 100% !important;
	object-fit: contain !important;
	border-radius: 6px;
	transition: transform 0.45s ease;
}

.bakbak-gal--masonry.bakbak-gal--zoom .bakbak-grid__item:hover img,
.bakbak-gal--masonry.bakbak-gal--zoom .bakbak-grid__item:focus-visible img {
	transform: scale(1.04);
}

.bakbak-gal--masonry .bakbak-grid__item:focus-visible {
	outline: 2px solid #111;
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bakbak-gal--masonry .bakbak-grid__item img {
		transition: none;
	}
}

/* CTA */
.bakbak-gal__cta-wrap {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.bakbak-gal__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: #111;
	color: #fff;
	padding: 16px 32px;
	border-radius: 50px;
	border: 0 solid transparent;
	text-decoration: none;
	font-family: inherit;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	cursor: pointer;
}

.bakbak-gal__cta:hover {
	background-color: #333;
}

.bakbak-gal__cta:focus-visible {
	outline: 2px solid #111;
	outline-offset: 4px;
}

.bakbak-gal__cta svg {
	transition: transform 0.25s ease;
}

.bakbak-gal__cta:hover svg {
	transform: translateX(4px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bakbak-gal__item img,
	.bakbak-gal__cta,
	.bakbak-gal__cta svg,
	.bakbak-gal__arrow {
		transition: none !important;
	}
	.bakbak-gal--zoom .bakbak-gal__item:hover img {
		transform: none;
	}
	.bakbak-gal__track {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------
 * LIGHTBOX
 * --------------------------------------------------------------- */

.bakbak-gal-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(49, 49, 58, 0.94);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.bakbak-gal-lightbox.is-open {
	display: flex;
	opacity: 1;
}

.bakbak-gal-lightbox__stage {
	position: relative;
	z-index: 1;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.bakbak-gal-lightbox__img {
	display: block;
	max-width: 90vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	border-radius: 2px;
}

.bakbak-gal-lightbox__caption {
	margin-top: 16px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	text-align: center;
	font-family: inherit;
	max-width: 90vw;
}

/* Close button */
.bakbak-gal-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	width: 48px;
	height: 48px;
	background: #111111;
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	padding: 0;
}

.bakbak-gal-lightbox__close svg {
	width: 24px !important;
	height: 24px !important;
	display: block !important;
}

.bakbak-gal-lightbox__close:focus {
	outline: none;
}

.bakbak-gal-lightbox__close:hover,
.bakbak-gal-lightbox__close:focus-visible {
	background: #333333;
	outline: none;
}

.bakbak-gal-lightbox__close:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* Nav arrows */
.bakbak-gal-lightbox__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	background: rgba(255, 255, 255, 0.08);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	padding: 0;
}

.bakbak-gal-lightbox__nav svg {
	width: 32px !important;
	height: 32px !important;
	display: block !important;
}

.bakbak-gal-lightbox__nav:focus {
	outline: none;
}

.bakbak-gal-lightbox__nav:hover,
.bakbak-gal-lightbox__nav:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	outline: none;
}

.bakbak-gal-lightbox__nav:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.bakbak-gal-lightbox__nav--prev {
	left: 20px;
}

.bakbak-gal-lightbox__nav--next {
	right: 20px;
}

/* Mobile lightbox tweaks */
@media (max-width: 599px) {
	.bakbak-gal-lightbox {
		padding: 16px;
	}
	.bakbak-gal-lightbox__close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}
	.bakbak-gal-lightbox__nav {
		width: 44px;
		height: 44px;
	}
	.bakbak-gal-lightbox__nav--prev {
		left: 8px;
	}
	.bakbak-gal-lightbox__nav--next {
		right: 8px;
	}
	.bakbak-gal-lightbox__img {
		max-width: 95vw;
		max-height: 78vh;
	}
}

/* Mobile gallery strip — slightly smaller images */
@media (max-width: 599px) {
	.bakbak-gal__item {
		height: 240px;
	}
}

/* ---------------------------------------------------------------
 * FAQ — accordion with native <details>/<summary>
 * --------------------------------------------------------------- */

.bakbak-faq,
.bakbak-faq * {
	box-sizing: border-box;
}

.bakbak-faq {
	width: 100%;
}

.bakbak-faq__inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Item — <details> rendered as a card */
.bakbak-faq__item {
	background-color: #ffffff;
	border-radius: 4px;
	overflow: hidden;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Summary — clickable question header */
.bakbak-faq__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 0;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

/* Remove default disclosure triangle (Webkit + Firefox) */
.bakbak-faq__summary::-webkit-details-marker {
	display: none;
}
.bakbak-faq__summary::marker {
	display: none;
	content: '';
}

.bakbak-faq__summary:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 2px;
}

/* Question text */
.bakbak-faq__question {
	font-family: inherit;
	flex: 1;
	color: #111;
	transition: color 0.2s ease;
}

/* Icon — wrapped in a circle */
.bakbak-faq__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #111;
	background-color: transparent;
	border: 1.5px solid #d4d0c9;
	border-radius: 50%;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.3s ease;
}

.bakbak-faq__icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Hover state — fills with coral */
.bakbak-faq__summary:hover .bakbak-faq__icon {
	background-color: #111111;
	border-color: #111111;
	color: #ffffff;
}

/* Open state — also filled */
.bakbak-faq__item[open] .bakbak-faq__icon {
	background-color: #111111;
	border-color: #111111;
	color: #ffffff;
}

/* Plus → minus rotation: hide the vertical bar when open */
.bakbak-faq--icon-plus .bakbak-faq__item[open] .bakbak-faq__icon-vbar {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bakbak-faq--icon-plus .bakbak-faq__icon-vbar {
	transition: opacity 0.2s ease;
}

/* Chevron rotation when open */
.bakbak-faq--icon-chevron .bakbak-faq__item[open] .bakbak-faq__icon {
	transform: rotate(180deg);
}

/* Answer */
.bakbak-faq__answer {
	padding: 0 32px 24px 0;
	color: #444;
}

.bakbak-faq__answer p {
	margin: 0 0 1em;
}

.bakbak-faq__answer p:last-child {
	margin-bottom: 0;
}

.bakbak-faq__answer a {
	color: #111111;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bakbak-faq__answer a:hover {
	text-decoration: none;
}

/* Smooth open/close animation — works in modern browsers (interpolate-size).
 * For older browsers, the open is instant (still functional). */
@supports (interpolate-size: allow-keywords) {
	html {
		interpolate-size: allow-keywords;
	}
	.bakbak-faq__item {
		transition: background-color 0.2s ease;
	}
	.bakbak-faq__item::details-content {
		transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
		height: 0;
		overflow: hidden;
	}
	.bakbak-faq__item[open]::details-content {
		height: auto;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bakbak-faq__icon,
	.bakbak-faq__question,
	.bakbak-faq__icon-vbar,
	.bakbak-faq__item {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------
 * FINAL CTA — closing section: title + lead + buttons + trust
 * --------------------------------------------------------------- */

.bakbak-cta,
.bakbak-cta * {
	box-sizing: border-box;
}

.bakbak-cta {
	width: 100%;
	background-color: #141414;
}

.bakbak-cta__inner {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.bakbak-cta__title {
	color: #ffffff;
	font-family: inherit;
	margin: 0 0 24px;
	text-wrap: balance;
}

.bakbak-cta__desc {
	color: rgba(255, 255, 255, 0.78);
	font-family: inherit;
	margin: 0 0 40px;
}

/* Buttons container */
.bakbak-cta__buttons {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
}

/* When text-align is left/right, buttons should not shrink-to-fit center */
.bakbak-cta__inner[style*="text-align: left"] .bakbak-cta__buttons,
.bakbak-cta__inner[style*="text-align: right"] .bakbak-cta__buttons {
	display: flex;
	justify-content: flex-start;
}

.bakbak-cta__inner[style*="text-align: right"] .bakbak-cta__buttons {
	justify-content: flex-end;
}

/* Base button styles */
.bakbak-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	border-radius: 50px;
	text-decoration: none;
	font-family: inherit;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 14px;
	border: 0 solid transparent;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
	line-height: 1.2;
	text-align: center;
}

.bakbak-cta__btn:active {
	transform: translateY(1px);
}

.bakbak-cta__btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Primary button — solid white default */
.bakbak-cta__btn--primary {
	background-color: #ffffff;
	color: #141414;
}

.bakbak-cta__btn--primary:hover {
	background-color: #e8e8e8;
}

/* Secondary button — ghost with white border default */
.bakbak-cta__btn--secondary {
	background-color: transparent;
	color: #ffffff;
	border-width: 2px;
	border-color: #ffffff;
}

.bakbak-cta__btn--secondary:hover {
	background-color: #ffffff;
	color: #141414;
}

/* Trust line */
.bakbak-cta__trust {
	color: rgba(255, 255, 255, 0.5);
	font-family: inherit;
	margin-top: 24px;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Mobile — stack buttons vertically (full-width) */
@media (max-width: 599px) {
	.bakbak-cta--stack-mobile .bakbak-cta__buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		display: flex;
	}

	.bakbak-cta--stack-mobile .bakbak-cta__btn {
		width: 100%;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bakbak-cta__btn {
		transition: none;
	}
	.bakbak-cta__btn:active {
		transform: none;
	}
}

/* ---------------------------------------------------------------
 * FINAL CTA — Form fields
 * --------------------------------------------------------------- */

.bakbak-cta__form {
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
}

.bakbak-cta__form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 16px;
}

.bakbak-cta__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bakbak-cta__field--full {
	grid-column: 1 / -1;
}

.bakbak-cta__field--submit {
	margin-top: 8px;
	align-items: center;
}

/* Honeypot — visually hidden but accessible to bots */
.bakbak-cta__honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Labels */
.bakbak-cta__label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: inherit;
}

/* Inputs and selects */
.bakbak-cta__input,
.bakbak-cta__select {
	width: 100%;
	height: 56px;
	min-height: 56px;
	max-height: 56px;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	color: #ffffff;
	padding: 0 16px;
	font-size: 16px;
	font-family: inherit;
	line-height: normal;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	vertical-align: middle;
}

/* Date input — Safari forces native styling that ignores height. Use explicit
   line-height matching height to force visual centering. */
.bakbak-cta__input[type="date"] {
	color-scheme: dark;
	line-height: 56px;
	padding-top: 0;
	padding-bottom: 0;
	/* Don't let Safari add internal padding via the calendar picker indicator */
	-webkit-padding-start: 16px;
	-webkit-padding-end: 16px;
}

/* Hide the default calendar picker icon's extra spacing on WebKit */
.bakbak-cta__input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
	min-height: 0;
}

/* Calendar icon — white on dark background.
   Safari/Chrome: invert filter turns the default black icon white. */
.bakbak-cta__input[type="date"]::-webkit-calendar-picker-indicator {
	margin-left: 4px;
	cursor: pointer;
	filter: invert(1) brightness(1.5) !important;
	opacity: 0.8;
}

.bakbak-cta__input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

/* Firefox uses a different approach — color-scheme: dark on the input itself
   tells Firefox to use white icons. Already set above. */

.bakbak-cta__input:focus,
.bakbak-cta__select:focus {
	outline: none;
	border-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.1);
}

.bakbak-cta__input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

/* Custom select arrow */
.bakbak-cta__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 7 11 1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
	cursor: pointer;
}

.bakbak-cta__select option {
	background-color: #1a1a1a;
	color: #ffffff;
}

/* Submit button */
.bakbak-cta__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background-color: #ffffff;
	color: #141414;
	padding: 18px 40px;
	border: 0 solid transparent;
	border-radius: 50px;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.bakbak-cta__submit:hover:not(:disabled) {
	background-color: #e8e8e8;
}

.bakbak-cta__submit:active:not(:disabled) {
	transform: translateY(1px);
}

.bakbak-cta__submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.bakbak-cta__submit:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Loading spinner */
.bakbak-cta__submit-loading {
	display: none;
	animation: bakbak-cta-spin 0.8s linear infinite;
}

.bakbak-cta__form.is-loading .bakbak-cta__submit-loading {
	display: inline-flex;
}

@keyframes bakbak-cta-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Form feedback message */
.bakbak-cta__message {
	margin-top: 20px;
	padding: 0;
	font-size: 14px;
	text-align: center;
	min-height: 0;
	font-family: inherit;
}

.bakbak-cta__message.is-success,
.bakbak-cta__message.is-error {
	padding: 14px 20px;
	border-radius: 6px;
}

.bakbak-cta__message.is-success {
	background-color: rgba(75, 175, 95, 0.15);
	color: #a8e6b4;
	border: 1px solid rgba(75, 175, 95, 0.3);
}

.bakbak-cta__message.is-error {
	background-color: rgba(220, 80, 80, 0.15);
	color: #f4b3b3;
	border: 1px solid rgba(220, 80, 80, 0.3);
}

.bakbak-cta__form-disabled {
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
	text-align: center;
	padding: 20px;
}

/* Mobile — single column form */
@media (max-width: 599px) {
	.bakbak-cta__form-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.bakbak-cta__field--full {
		grid-column: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bakbak-cta__submit,
	.bakbak-cta__input,
	.bakbak-cta__select {
		transition: none;
	}
	.bakbak-cta__submit-loading {
		animation: none;
	}
}

/* ---------------------------------------------------------------
 * ABOUT — "Kes me oleme" with read-more expand/collapse
 * --------------------------------------------------------------- */

.bakbak-about,
.bakbak-about * {
	box-sizing: border-box;
}

.bakbak-about {
	width: 100%;
}

.bakbak-about__inner {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.bakbak-about__title {
	color: #111;
	font-family: inherit;
	margin: 0;
}

.bakbak-about__divider {
	display: block;
	width: 50px;
	height: 4px;
	background-color: #111;
	margin: 32px auto;
}

/* When section is text-align: left, divider goes left */
.bakbak-about__inner[style*="text-align: left"] .bakbak-about__divider {
	margin-left: 0;
	margin-right: 0;
}

/* Lead text (always visible) */
.bakbak-about__lead {
	color: #222;
}

.bakbak-about__lead p {
	color: inherit;
	font-style: italic;
	font-size: 18px;
	line-height: 1.7;
	margin: 0 0 1em;
}

.bakbak-about__lead p:last-child {
	margin-bottom: 0;
}

/* Details/summary structure — accordion behavior */
.bakbak-about__details {
	margin-top: 0;
}

.bakbak-about__details summary {
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.bakbak-about__details summary::-webkit-details-marker {
	display: none;
}
.bakbak-about__details summary::marker {
	display: none;
	content: '';
}

.bakbak-about__toggle-wrap {
	margin-top: 28px;
	text-align: center;
}

/* When parent is left-aligned, toggle also goes left */
.bakbak-about__inner[style*="text-align: left"] .bakbak-about__toggle-wrap {
	text-align: left;
}

.bakbak-about__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #111;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 14px;
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
	transition: color 0.2s ease, opacity 0.2s ease;
	font-family: inherit;
}

.bakbak-about__details summary:hover .bakbak-about__toggle,
.bakbak-about__details summary:focus-visible .bakbak-about__toggle {
	opacity: 0.65;
}

.bakbak-about__details summary:focus-visible {
	outline: none;
}

.bakbak-about__details summary:focus-visible .bakbak-about__toggle {
	outline: 2px solid #111111;
	outline-offset: 4px;
}

/* Chevron icon — points down when closed, up when open */
.bakbak-about__toggle-icon {
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

.bakbak-about__details[open] .bakbak-about__toggle-icon {
	transform: rotate(180deg);
}

/* Toggle text swap */
.bakbak-about__toggle-less {
	display: none;
}

.bakbak-about__details[open] .bakbak-about__toggle-more {
	display: none;
}

.bakbak-about__details[open] .bakbak-about__toggle-less {
	display: inline;
}

/* Hidden content area */
.bakbak-about__more {
	margin-top: 32px;
}

.bakbak-about__subtitle {
	color: #111;
	font-family: inherit;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	margin: 32px 0 12px;
}

.bakbak-about__subtitle:first-child {
	margin-top: 0;
}

.bakbak-about__body {
	color: #444;
}

.bakbak-about__body p {
	color: inherit;
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 1em;
}

.bakbak-about__body p:last-child {
	margin-bottom: 0;
}

.bakbak-about__body strong {
	color: #111;
	font-weight: 600;
}

.bakbak-about__body a {
	color: #111111;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bakbak-about__body a:hover {
	text-decoration: none;
}

/* CTA button */
.bakbak-about__cta-wrap {
	margin-top: 40px;
	text-align: center;
}

.bakbak-about__inner[style*="text-align: left"] .bakbak-about__cta-wrap {
	text-align: left;
}

.bakbak-about__cta {
	display: inline-block;
	background-color: #111;
	color: #ffffff;
	padding: 16px 32px;
	border-radius: 50px;
	text-decoration: none;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.bakbak-about__cta:hover {
	background-color: #333;
}

.bakbak-about__cta:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 3px;
}

/* Smooth open/close animation in modern browsers */
@supports (interpolate-size: allow-keywords) {
	.bakbak-about__details::details-content {
		transition: height 0.4s ease, content-visibility 0.4s allow-discrete;
		height: 0;
		overflow: hidden;
	}
	.bakbak-about__details[open]::details-content {
		height: auto;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bakbak-about__toggle-icon,
	.bakbak-about__toggle,
	.bakbak-about__cta {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------
 * ELEMENTOR NAV MENU DROPDOWN — fix transparent background
 * --------------------------------------------------------------- */

/* Default solid white background for any Elementor nav menu dropdown */
.elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown.sm-nowrap,
ul.sub-menu.elementor-nav-menu--dropdown {
	background-color: #ffffff !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	overflow: hidden;
}

.elementor-nav-menu--dropdown .elementor-sub-item,
ul.sub-menu.elementor-nav-menu--dropdown .elementor-sub-item {
	color: #111111 !important;
	background-color: transparent !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.elementor-nav-menu--dropdown .elementor-sub-item:hover,
ul.sub-menu.elementor-nav-menu--dropdown .elementor-sub-item:hover {
	background-color: #f5f5f5 !important;
	color: #111111 !important;
}

/* ---------------------------------------------------------------
 * FINAL CTA — required field asterisks
 * --------------------------------------------------------------- */

/* Add red asterisk after every label inside the form (all fields are required) */
.bakbak-cta__form .bakbak-cta__field:not(.bakbak-cta__field--submit) .bakbak-cta__label::after {
	content: ' *';
	color: #F3003D;
	font-weight: 700;
	font-size: 1.4em;
	margin-left: 4px;
	line-height: 1;
	vertical-align: middle;
}

/* ==========================================================================
   Meeskond — Team widget
   ========================================================================== */

.bakbak-team {
	width: 100%;
}

.bakbak-team__inner {
	margin: 0 auto;
	max-width: 1100px;
}

.bakbak-team__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	align-items: stretch;
}

/* Ainult üks liige: tsentreeri kaart (ei jää vasakusse veergu) ja hoia
   sama suurus kui tavalisel kaardil — üks kitsas keskele joondatud rada.
   !important võidab Elementori "Veergude arv" kontrolli (repeat(2,1fr)). */
.bakbak-team__grid--single {
	grid-template-columns: minmax(0, 340px) !important;
	justify-content: center;
}

.bakbak-team__card {
	display: flex;
	flex-direction: column;
	background-color: #2e2e2e;
	border-radius: 4px;
	padding: 24px 24px 30px;
	text-align: center;
	overflow: hidden;
}

.bakbak-team__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin-bottom: 20px;
	background-color: #1a1a1a;
}

.bakbak-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter 0.3s ease, transform 0.4s ease;
}

.bakbak-team__card:hover .bakbak-team__photo img {
	transform: scale(1.03);
}

.bakbak-team__name {
	margin: 0 0 6px;
	line-height: 1.2;
}

.bakbak-team__role {
	margin: 0 0 18px;
	line-height: 1.4;
}

.bakbak-team__icons {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: auto;
}

.bakbak-team__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #ffffff;
	color: #111111;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bakbak-team__icon:hover {
	background-color: #cccccc;
	transform: translateY(-2px);
}

.bakbak-team__icon svg {
	fill: #111111;
	display: block;
}

@media (max-width: 768px) {
	.bakbak-team__grid {
		grid-template-columns: 1fr;
	}

	/* Alamlehtedel tuleb äärevahe Elementori sektsioonist/veerust ja on
	 * tihti suurem kui avalehel. Team-widgetil endal külgvahet pole, seega
	 * murrame bloki ekraani laiusele ja anname ÜHTLASE 16px äärevahe.
	 * Avaleht (body.home) jääb täielikult puutumata. */
	body:not(.home) .bakbak-team {
		width: auto;
		box-sizing: border-box;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ==========================================================================
   Protsess — "Kuidas see käib?" widget
   ========================================================================== */

.bakbak-process {
	width: 100%;
}

.bakbak-process__inner {
	margin: 0 auto;
	max-width: 1200px;
}

.bakbak-process__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	align-items: stretch;
}

.bakbak-process__card {
	display: flex;
	flex-direction: column;
	background-color: #2e2e2e;
	border-radius: 4px;
	padding: 30px 28px;
	text-align: left;
}

.bakbak-process__number {
	font-family: 'Anton', sans-serif;
	font-size: 56px;
	line-height: 1;
	color: #ffffff;
	margin-bottom: 16px;
	letter-spacing: 1px;
}

.bakbak-process__title {
	margin: 0 0 10px;
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.bakbak-process__desc {
	margin: 0;
	color: #cccccc;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.bakbak-process__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: horizontal scroll with first-card-full + peek of next.
 * Card is 85% of viewport so the next one peeks ~15% on the right.
 * Edge padding gives the left "breathing room" the design calls for.
 */
@media (max-width: 599.98px) {
	.bakbak-process__inner {
		max-width: none;
	}
	.bakbak-process__grid {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		/* Vasak: 0 → esimene kaart joondub pealkirjaga (sektsiooni veeris).
		 * Parem: murra ekraani servani välja, et peek läheks lõpuni (slider). */
		padding: 0;
		margin-right: calc(50% - 50vw);
		gap: 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 0;
		grid-template-columns: unset !important;
	}
	.bakbak-process__grid::-webkit-scrollbar {
		display: none;
	}
	.bakbak-process__grid > .bakbak-process__card {
		flex: 0 0 85%;
		min-width: 85%;
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   Jalus — Footer widget
   ========================================================================== */

.bakbak-footer {
	width: 100%;
	background-color: #3D3A3A;
	padding: 60px 24px 30px;
}

.bakbak-footer__inner {
	margin: 0 auto;
	max-width: 1200px;
}

.bakbak-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr 0.8fr;
	gap: 40px;
	align-items: start;
}

/* Pealkirjad */
.bakbak-footer__heading {
	margin: 0 0 24px;
	color: #ffffff;
	font-family: 'Anton', sans-serif;
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2;
}

/* Kontaktide list */
.bakbak-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bakbak-footer__item {
	margin-bottom: 18px;
}

.bakbak-footer__item:last-child {
	margin-bottom: 0;
}

.bakbak-footer__label {
	color: #999999;
	font-family: 'Raleway', sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.bakbak-footer__value {
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.bakbak-footer__value a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bakbak-footer__value a:hover {
	color: #cccccc;
	text-decoration: underline;
}

.bakbak-footer__map-links {
	margin-top: 6px;
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
}

.bakbak-footer__map-links a {
	color: #cccccc;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bakbak-footer__map-links a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.bakbak-footer__sep {
	color: #555555;
	margin: 0 4px;
}

/* Kaart */
.bakbak-footer__map {
	width: 100%;
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;
}

.bakbak-footer__map iframe {
	display: block;
	width: 100%;
	height: 240px;
	border: 0;
	filter: grayscale(40%) brightness(0.95);
	transition: filter 0.3s ease;
}

.bakbak-footer__map:hover iframe {
	filter: grayscale(0%) brightness(1);
}

/* Sotsmeedia */
.bakbak-footer__social {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.bakbak-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #ffffff;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bakbak-footer__social-icon:hover {
	background-color: #cccccc;
	transform: translateY(-2px);
}

.bakbak-footer__social-icon svg {
	fill: #3D3A3A;
	display: block;
}

/* Bottom row — copyright */
.bakbak-footer__bottom {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
}

.bakbak-footer__copyright {
	margin: 0;
	color: #888888;
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 1024px) {
	.bakbak-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
	.bakbak-footer__col--social {
		grid-column: 1 / -1;
	}
}

@media (max-width: 599px) {
	.bakbak-footer {
		padding: 40px 20px 24px;
	}
	.bakbak-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.bakbak-footer__heading {
		margin-bottom: 16px;
	}
	.bakbak-footer__bottom {
		margin-top: 28px;
	}
}

/* ===================================================================
 * SPECS TABS — Tehnika tabelid
 * Tabbed list of 2-column tables (label → value).
 * =================================================================== */

.bakbak-specs,
.bakbak-specs * {
	box-sizing: border-box;
}

.bakbak-specs {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* -------- Tab buttons row -------- */
.bakbak-specs__tabs {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}

.bakbak-specs .bakbak-specs__tab,
.bakbak-specs__tab.bakbak-specs__tab {
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	padding: 14px 24px;
	margin: 0;
	border: none;
	border-radius: 4px;
	background: #eeeeee;
	color: #555555;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	flex: 0 0 auto !important;
	white-space: nowrap;
	text-align: center;
	box-shadow: none;
	text-decoration: none;
}

.bakbak-specs__tab:hover:not(.is-active) {
	background: #e0e0e0;
	color: #111111;
}

.bakbak-specs__tab.is-active {
	background: #111111;
	color: #ffffff;
}

.bakbak-specs__tab:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 2px;
}

/* -------- Panel (single visible at a time) -------- */
.bakbak-specs__panel {
	background: #f5efe6;
	padding: 32px 40px;
	border-radius: 4px;
}

.bakbak-specs__panel[hidden] {
	display: none;
}

/* -------- Definition list (rows) -------- */
.bakbak-specs__list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.bakbak-specs__row {
	display: grid;
	grid-template-columns: 22% 1fr;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	align-items: baseline;
}

.bakbak-specs__row:last-child {
	border-bottom: none;
}

.bakbak-specs__label {
	margin: 0;
	font-weight: 500;
	color: #666666;
	font-size: 14px;
}

.bakbak-specs__value {
	margin: 0;
	color: #111111;
	font-size: 15px;
	line-height: 1.5;
}

/* -------- Tablet & allapoole (≤1024px) -------- */
@media (max-width: 1024px) {
	.bakbak-specs__panel {
		padding: 24px 24px;
	}
	/* display:block teeb "Sildi veeru laius" kontrolli (grid-template-columns)
	   mõjutuks — silt ja väärtus virnastuvad alati üksteise alla, sõltumata
	   sellest, mis väärtuse kontroll väljastab (nt 100% 1fr). */
	.bakbak-specs__row {
		display: block !important;
	}
	.bakbak-specs__label {
		margin-bottom: 4px;
	}
	.bakbak-specs__value {
		font-size: 16px;
	}
}

/* -------- Mobile -------- */
@media (max-width: 480px) {
	.bakbak-specs__tabs {
		gap: 6px;
	}
	.bakbak-specs__tab {
		padding: 10px 14px;
		font-size: 13px;
	}
	.bakbak-specs__panel {
		padding: 20px 18px;
	}
	.bakbak-specs__row {
		/* Telefonis: silt ja väärtus üksteise alla (väärtus täislaiuses).
		   !important võidab "Sildi veeru laius" kontrolli. */
		grid-template-columns: 1fr !important;
		gap: 4px;
		padding: 10px 0;
	}
	.bakbak-specs__value {
		font-size: 16px;
	}
	.bakbak-specs__label {
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
}

/* ===================================================================

/* ===================================================================
 * CASE STUDIES SLIDER — Koostöölood
 * Magazine-style 2-column slider (image + story).
 * =================================================================== */

.bakbak-csl,
.bakbak-csl * {
	box-sizing: border-box;
}

.bakbak-csl {
	position: relative;
	width: 100%;
	font-family: inherit;
	/* Slaidi vahetusel keritakse plokk vaate algusesse (JS scrollIntoView).
	   See jätab püsiva header'i jaoks ruumi, et ploki ülaserv ei jääks selle taha. */
	scroll-margin-top: 100px;
}

/* Vabatahtlik intro-tekst sliderist üleval (tühjana ei renderdata PHP-s) */
.bakbak-csl__intro {
	margin: 0 0 32px 0;
}
.bakbak-csl__intro p {
	margin: 0 0 1em 0;
}
.bakbak-csl__intro p:last-child {
	margin-bottom: 0;
}

/* -------- Slides container (CSS Grid stack for crossfade) -------- */
.bakbak-csl__slides {
	display: block;
	position: relative;
	/* Kärbib crossfade'i ajal välja-haihtuva (kõrgema) slaidi liigse osa,
	   et see ei ulatuks järgmise sektsiooni peale. */
	overflow: hidden;
}

.bakbak-csl__slide {
	/* Virnastus position'iga (mitte grid-area), et AKTIIVNE slaid määraks
	   konteineri kõrguse — mitteaktiivsed on voost väljas, nii ei venita
	   pikim slaid konteinerit ega jäta lühema slaidi alla tühikut. */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: grid;
	grid-template-columns: 45% 1fr;
	gap: 56px;
	align-items: stretch;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

/* Modern browsers: if a slide doesn't have a media child, collapse to single column */
.bakbak-csl__slide:not(:has(.bakbak-csl__media)) {
	grid-template-columns: 1fr !important;
	gap: 0 !important;
}

.bakbak-csl__slide.is-active {
	/* Aktiivne slaid on voos → tema kõrgus määrab konteineri kõrguse */
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.45s ease, visibility 0s linear 0s;
}

/* No-image variant: content fills full width */
.bakbak-csl__slide--no-image {
	grid-template-columns: 1fr !important;
	gap: 0 !important;
}

.bakbak-csl__slide--no-image .bakbak-csl__content {
	grid-column: 1 / -1 !important;
	max-width: none !important;
	width: 100% !important;
}

/* Asymmetric stage layout in no-image variant:
 * Stage 1 → left half (50%)
 * Stage 2 → right half (50%, next to stage 1)
 * Stage 3 → full width below (100%)
 */
.bakbak-csl__slide--no-image .bakbak-csl__stages {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 56px;
	row-gap: 48px;
	align-items: start;
	width: 100%;
}

.bakbak-csl__slide--no-image .bakbak-csl__stage {
	min-width: 0;
	overflow-wrap: break-word;
}

.bakbak-csl__slide--no-image .bakbak-csl__stage:nth-child(1) {
	grid-column: 1;
}

.bakbak-csl__slide--no-image .bakbak-csl__stage:nth-child(2) {
	grid-column: 2;
}

.bakbak-csl__slide--no-image .bakbak-csl__stage:nth-child(3) {
	grid-column: 1 / -1;
}

/* In no-image variant, give numbers more presence */
.bakbak-csl__slide--no-image .bakbak-csl__num {
	font-size: 72px;
}

.bakbak-csl__slide--no-image .bakbak-csl__stagehead {
	margin-right: 32px;
	min-width: 0;
}

/* -------- Media (image) -------- */
.bakbak-csl__media {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	height: 0;
	padding-bottom: 125%;
	background: #2e2e2e;
}

/* Slider-track täidab media-kasti (nagu sph-l) */
.bakbak-csl__slider-track {
	position: absolute;
	inset: 0;
}
/* NB: !important on vajalik, sest Elementor/teema img-reegel
   (.elementor img vms) tühistaks muidu height: 100% → height: auto,
   mille tagajärjel pilt venis oma loomulikule suhtele. Sama lahendus
   nagu subpage-hero (.bakbak-sph__media img) widgetil. */
.bakbak-csl__media img {
	position: absolute !important;
	inset: 0;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: var(--csl-fit, cover) !important;
	object-position: var(--csl-pos, center) !important;
	border-radius: 0 !important;
}

/* Per-loo pildi-slideshow (crossfade) */
.bakbak-csl__media--slider img {
	opacity: 0;
	transition: opacity 1.1s ease;
}
.bakbak-csl__media--slider img.is-active {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.bakbak-csl__media--slider img {
		transition: none;
	}
}

.bakbak-csl__media-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #2e2e2e 0%, #3D3A3A 100%);
}

/* -------- Content column -------- */
.bakbak-csl__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 0;
}

/* -------- Stage title (caps lock title above each stage's number) -------- */
.bakbak-csl__stage-title {
	display: block;
	width: 100%;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: inherit;
	margin: 0 0 20px 0;
}

.bakbak-csl__slide--no-image .bakbak-csl__stage-title {
	font-size: 15px;
	margin-bottom: 24px;
}

/* -------- Stages: number floats left, text wraps around -------- */
.bakbak-csl__stages {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.bakbak-csl__stage {
	display: block;
}

/* Clearfix so next stage starts cleanly below the floated number */
.bakbak-csl__stage::after {
	content: "";
	display: block;
	clear: both;
}

.bakbak-csl__stagehead {
	float: left;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-right: 28px;
	margin-bottom: 8px;
	min-width: 0;
}

.bakbak-csl__num {
	font-family: "Anton", "Impact", sans-serif;
	font-weight: 400;
	font-size: 64px;
	line-height: 1;
	color: inherit;
}

.bakbak-csl__label {
	font-family: inherit;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: inherit;
	margin: 0;
	white-space: nowrap;
}

.bakbak-csl__text {
	font-family: inherit;
	font-size: clamp(14px, 1.3vw, 15px);
	line-height: 1.7;
	color: inherit;
}

.bakbak-csl__text p {
	margin: 0 0 0.8em;
}

.bakbak-csl__text p:last-child {
	margin-bottom: 0;
}

/* ---- Pildiga variant (NB: ei kehti no-image variandile) ---- */
/* 1) Pilt ei venitu sisu kõrgusele — jääb oma kasti (aspect-ratio), tumedat tausta ei teki */
.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) {
	align-items: start;
}
.bakbak-csl__media {
	align-self: start;
}
/* 2) Sisu algab ülevalt (pildiga ühelt joonelt), mitte keskelt */
.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) .bakbak-csl__content {
	justify-content: flex-start;
	padding-top: 0;
}
/* 3) Number üleval, pealkiri (VÄLJAKUTSE) numbri all, tekst paremas veerus.
   3. rida (1fr) neelab teksti liigse kõrguse, et number+pealkiri jääks tihedalt kokku. */
.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) .bakbak-csl__stage {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"num   text"
		"title text"
		"rest  text";
	column-gap: 28px;
}
.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) .bakbak-csl__stagehead {
	grid-area: num;
	align-self: start;
	float: none;
	margin: 0;
}
/* Pealkirjata stage (nt pulmade leht): kõik numbrid sama laiusega, et vasak veerg
   oleks ühtlane ja tekst ei jookseks järjest paremale ("treppi"). Anton pole tabular,
   nii et 01 on kitsam kui 02/03 — min-width ühtlustab need. Väärtus on täpselt kõige
   laiema 2-kohalise numbri laiuses (~1.05em), et tekst EI läheks numbrist kaugemale
   kui niikuinii vaja. Pealkirjaga stage'e (korporatiiv) see ei puuduta. */
.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) .bakbak-csl__stage--no-title .bakbak-csl__num {
	display: inline-block;
	min-width: 1.05em;
}
.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) .bakbak-csl__stage-title {
	grid-area: title;
	align-self: start;
	margin: 8px 0 0 0;
}
.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) .bakbak-csl__text {
	grid-area: text;
	align-self: start;
	min-width: 0;
}

/* -------- Quote row (avatar + name on left, arrows on right) -------- */
.bakbak-csl__quoterow {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 48px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid currentColor;
	border-top-color: rgba(255, 255, 255, 0.15);
}

.bakbak-csl__quote {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
	min-width: 0;
}

.bakbak-csl__avatar {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	flex: 0 0 64px;
	display: block;
	background: #2e2e2e;
	position: relative;
}

.bakbak-csl__avatar img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
	transform-origin: center center;
}

.bakbak-csl__quotetext {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.bakbak-csl__quotename {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: inherit;
}

.bakbak-csl__quotecompany {
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: inherit;
}

/* -------- Arrows (inline, on right of quote row) -------- */
.bakbak-csl__arrows {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

/* -------- Nav (arrows + dots) -------- */
.bakbak-csl__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
}

.bakbak-csl__arrow {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: transparent;
	border: 1px solid #3D3A3A;
	color: #3D3A3A;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	padding: 0;
	flex: 0 0 48px;
	box-shadow: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
}

.bakbak-csl__arrow:hover,
.bakbak-csl__arrow:focus,
.bakbak-csl__arrow:focus-visible,
.bakbak-csl__arrow:active {
	background-color: #3D3A3A !important;
	border-color: #3D3A3A !important;
	color: #ffffff !important;
	box-shadow: none !important;
	outline: none !important;
}

.bakbak-csl__arrow svg {
	display: block;
	stroke: currentColor;
}

.bakbak-csl__dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bakbak-csl__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.25;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.2s ease, width 0.2s ease;
	flex: 0 0 8px;
}

.bakbak-csl__dot:hover {
	opacity: 0.5;
}

.bakbak-csl__dot.is-active {
	opacity: 1;
	width: 24px;
	border-radius: 4px;
	flex: 0 0 24px;
}

/* Hide nav entirely when only 1 story */
.bakbak-csl--single .bakbak-csl__nav {
	display: none;
}

/* -------- Tablet -------- */
@media (max-width: 1024px) {
	.bakbak-csl__slide {
		grid-template-columns: 40% 1fr;
		gap: 36px;
	}
	.bakbak-csl__media {
		min-height: 0;
	}
}

/* -------- Mobile -------- */
@media (max-width: 768px) {
	.bakbak-csl__slide {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.bakbak-csl__media {
		min-height: 0;
	}
	.bakbak-csl__content {
		padding: 0;
	}
	.bakbak-csl__stages {
		gap: 24px;
	}
	/* Mobile: collapse no-image asymmetric grid to single column */
	.bakbak-csl__slide--no-image .bakbak-csl__stages {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}
	.bakbak-csl__slide--no-image .bakbak-csl__stage:nth-child(1),
	.bakbak-csl__slide--no-image .bakbak-csl__stage:nth-child(2),
	.bakbak-csl__slide--no-image .bakbak-csl__stage:nth-child(3) {
		grid-column: auto;
	}
	.bakbak-csl__stage {
		display: block;
	}
	.bakbak-csl__stagehead {
		float: left;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		margin-right: 18px;
		margin-bottom: 4px;
		min-width: 0;
	}
	/* Pildiga variant mobiilis: sama float-paigutus nagu pildita variandil —
	   pealkiri (VÄLJAKUTSE) peal täislaiuses, number floatib vasakule, tekst
	   voolab numbri kõrvalt ja alla (mitte kitsasse paremasse veergu).
	   :not()-selektor on vajalik, et võita desktopi grid-override (sama spetsiifika). */
	.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) .bakbak-csl__stage {
		display: block;
		grid-template-columns: none;
		grid-template-rows: none;
		grid-template-areas: none;
		column-gap: 0;
	}
	.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) .bakbak-csl__stagehead {
		float: left;
		margin: 0 18px 4px 0;
	}
	.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) .bakbak-csl__stage-title {
		margin: 0 0 10px 0;
	}
	.bakbak-csl__slide:not(.bakbak-csl__slide--no-image) .bakbak-csl__text {
		display: block;
	}
	.bakbak-csl__num {
		font-size: 40px;
	}
	.bakbak-csl__label {
		font-size: 11px;
		letter-spacing: 0.12em;
	}
	.bakbak-csl__slide--no-image .bakbak-csl__num {
		font-size: 48px;
	}
	.bakbak-csl__quoterow {
		margin-top: 28px;
		padding-top: 22px;
		gap: 14px;
	}
	.bakbak-csl__quote {
		gap: 14px;
	}
	.bakbak-csl__avatar {
		width: 52px !important;
		height: 52px !important;
		flex: 0 0 52px;
	}
	.bakbak-csl__arrows {
		gap: 8px;
	}
	.bakbak-csl__nav {
		margin-top: 22px;
	}
}

/* ===================================================================
 * SUBPAGE HERO — Alamlehe Hero
 * Magazine-editorial layout: text left, large image right.
 * =================================================================== */

.bakbak-sph,
.bakbak-sph * {
	box-sizing: border-box;
}

.bakbak-sph {
	width: 100%;
	padding-top: 80px;
	padding-bottom: 80px;
}

.bakbak-sph__inner {
	display: grid;
	grid-template-columns: 48% 1fr;
	gap: 64px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

/* -------- Content (left column) -------- */
.bakbak-sph__content {
	display: flex;
	flex-direction: column;
	max-width: 560px;
}

/* Reset Astra/Elementor default paragraph margins inside our hero */
.bakbak-sph .bakbak-sph__eyebrow,
.bakbak-sph .bakbak-sph__title,
.bakbak-sph .bakbak-sph__subtitle,
.bakbak-sph .bakbak-sph__desc,
.bakbak-sph .bakbak-sph__actions {
	margin-top: 0 !important;
}

.bakbak-sph__eyebrow { margin-bottom: 24px !important; }
.bakbak-sph__title { margin-bottom: 16px !important; }
.bakbak-sph__subtitle { margin-bottom: 28px !important; }
.bakbak-sph__desc { margin-bottom: 28px !important; }
.bakbak-sph__actions { margin-bottom: 0 !important; }

/* Last visible element has no bottom margin */
.bakbak-sph__content > *:last-child {
	margin-bottom: 0 !important;
}

/* -------- Eyebrow -------- */
.bakbak-sph__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #333333;
	margin: 0;
}

.bakbak-sph__eyebrow::before {
	content: "";
	width: 36px;
	height: 2px;
	background-color: #111111;
	display: inline-block;
	flex: 0 0 36px;
}

/* -------- Title -------- */
.bakbak-sph__title {
	font-family: "Anton", "Impact", sans-serif !important;
	font-weight: 400;
	font-size: clamp(44px, 6.4vw, 88px);
	line-height: 1.02;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: #111111;
	margin: 0;
}

/* -------- Divider line under title -------- */
.bakbak-sph__divider {
	display: block;
	width: 60px;
	height: 2px;
	background-color: #111111;
	margin: 0;
	margin-bottom: 24px !important;
}

/* -------- Subtitle -------- */
.bakbak-sph__subtitle {
	font-family: "Anton", "Impact", sans-serif;
	font-weight: 400;
	font-size: clamp(20px, 2.4vw, 30px);
	line-height: 1.25;
	letter-spacing: 0.005em;
	color: #222222;
}

/* -------- Description -------- */
.bakbak-sph__desc {
	font-family: inherit;
	font-size: clamp(15px, 1.4vw, 16px);
	line-height: 1.75;
	color: #555555;
}

.bakbak-sph__desc p {
	margin: 0 0 0.8em;
}

.bakbak-sph__desc p:last-child {
	margin-bottom: 0;
}

/* -------- Actions row -------- */
.bakbak-sph__actions {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.bakbak-sph__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 36px;
	background-color: #111111;
	color: #ffffff;
	text-decoration: none;
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 4px;
	border: 0 solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	outline: none !important;
	box-shadow: none !important;
}

.bakbak-sph__cta:hover {
	background-color: #333333;
	color: #ffffff;
}

.bakbak-sph__cta:focus,
.bakbak-sph__cta:active {
	background-color: #333333;
	color: #ffffff;
	outline: none !important;
	box-shadow: none !important;
}

.bakbak-sph__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #111111;
	background-color: transparent;
	text-decoration: none !important;
	font-family: inherit;
	font-weight: 600;
	font-size: 16px;
	border: 0 solid transparent;
	border-radius: 0;
	padding: 0;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	outline: none !important;
	box-shadow: none !important;
}

.bakbak-sph__phone:hover {
	color: #3D3A3A;
	text-decoration: none;
}

.bakbak-sph__phone:focus,
.bakbak-sph__phone:active,
.bakbak-sph__phone:visited {
	color: #3D3A3A;
	text-decoration: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.bakbak-sph__phone-icon {
	flex: 0 0 18px;
	display: block;
	stroke: currentColor;
}

/* -------- Media (right column) -------- */
.bakbak-sph__media {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 4;
	border-radius: 4px;
	overflow: hidden;
	background-color: #2e2e2e;
}

/* Hero slideshow (crossfade) */
.bakbak-sph__media--slider .bakbak-sph__slider-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
}
.bakbak-sph__slider-track {
	position: absolute;
	inset: 0;
}
.bakbak-sph__media--slider img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.bakbak-sph__media--slider img.is-active {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.bakbak-sph__media--slider img {
		transition: none;
	}
}

.bakbak-sph__media img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
}

.bakbak-sph__media-placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #2e2e2e 0%, #3D3A3A 100%);
}

/* -------- Tablet (≤1024px) -------- */
@media (max-width: 1024px) {
	.bakbak-sph {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.bakbak-sph__inner {
		gap: 40px;
	}
	.bakbak-sph__content {
		gap: 20px;
	}
}

/* -------- Mobile (≤768px) -------- */
@media (max-width: 768px) {
	.bakbak-sph {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.bakbak-sph__inner {
		/* !important võidab "Teksti veeru laius" kontrolli (48% 1fr),
		   et mobiilis sisu kindlasti virnastuks */
		grid-template-columns: 1fr !important;
		gap: 32px;
	}
	/* Pilt kõige ülemiseks, tekst alla */
	.bakbak-sph__media {
		order: -1;
		aspect-ratio: 4 / 3;
	}
	.bakbak-sph__content {
		order: 0;
		max-width: none;
		gap: 18px;
	}
	.bakbak-sph__eyebrow {
		font-size: 11px;
		letter-spacing: 0.12em;
		gap: 10px;
	}
	.bakbak-sph__eyebrow::before {
		width: 24px;
		flex: 0 0 24px;
	}
	.bakbak-sph__actions {
		gap: 20px;
		margin-top: 8px;
	}
	.bakbak-sph__cta {
		padding: 16px 28px;
		font-size: 12px;
	}
}