/**
 * Karlinsky landing page.
 * Every rule is scoped under .karlinsky-landing so nothing leaks into the
 * rest of the site. Logical properties throughout, ready for an LTR version.
 */

.karlinsky-landing {
	/* Design tokens */
	--kl-bg-main: #FBF7F0;
	--kl-bg-secondary: #F4EDE2;
	--kl-bg-card: #F9F4EB;
	--kl-bg-placeholder: #EDE3D3;
	--kl-text: #2A1C13;
	--kl-text-soft: rgba(42, 28, 19, .82);
	--kl-text-weak: rgba(42, 28, 19, .6);
	--kl-brown: #6E4227;
	--kl-espresso: #2A1C13;
	--kl-dark: #241811;
	--kl-gold: #8A6A24;
	--kl-gold-line: #A5822E;
	--kl-gold-dark-bg: #C9A84C;
	--kl-gold-step: #C0A055;
	--kl-on-dark: #F6EEE1;
	--kl-border: rgba(42, 28, 19, .1);
	--kl-border-strong: rgba(42, 28, 19, .12);

	--kl-serif: "Noto Serif Hebrew", Georgia, serif;
	--kl-sans: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	--kl-pad-y: clamp(40px, 4.5vw, 94px);
	--kl-pad-x: clamp(20px, 4vw, 64px);
	--kl-gap: clamp(24px, 4vw, 64px);
	--kl-max: 1320px;
	--kl-header-h: 74px;

	background: var(--kl-bg-main);
	color: var(--kl-text);
	font-family: var(--kl-sans);
	font-size: 17px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	/* No overflow here: it would disable position:sticky for the header. */
}

/* Reset only inside our root */
.karlinsky-landing *,
.karlinsky-landing *::before,
.karlinsky-landing *::after { box-sizing: border-box; }

.karlinsky-landing h1,
.karlinsky-landing h2,
.karlinsky-landing h3,
.karlinsky-landing p,
.karlinsky-landing ul,
.karlinsky-landing ol,
.karlinsky-landing figure { margin: 0; }

.karlinsky-landing ul,
.karlinsky-landing ol { padding: 0; list-style: none; }

.karlinsky-landing img { max-width: 100%; height: auto; display: block; }

.karlinsky-landing a { color: var(--kl-brown); text-decoration: none; transition: color .18s ease; }
.karlinsky-landing a:hover { color: var(--kl-gold); }

.karlinsky-landing ::selection { background: #EADFCB; }

.karlinsky-landing :focus-visible {
	outline: 2px solid var(--kl-gold-line);
	outline-offset: 3px;
}

/* Body scroll lock while the lightbox or mobile nav is open */
body.kl-locked { overflow: hidden; }

/* ---------- Layout ---------- */
.karlinsky-landing .kl-wrap {
	max-width: var(--kl-max);
	margin-inline: auto;
	padding-inline: var(--kl-pad-x);
}
.karlinsky-landing .kl-wrap--narrow { max-width: 1000px; }
.karlinsky-landing .kl-wrap--form { max-width: 1100px; }

.karlinsky-landing .kl-section { padding-block: var(--kl-pad-y); }
.karlinsky-landing .kl-section--alt { background: var(--kl-bg-secondary); }
.karlinsky-landing .kl-section--dark { background: var(--kl-espresso); color: var(--kl-on-dark); }

.karlinsky-landing [id] { scroll-margin-top: calc(var(--kl-header-h) + 18px); }

.karlinsky-landing .kl-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--kl-gap);
	align-items: center;
}
.karlinsky-landing .kl-split--rev > *:first-child { order: 2; }
@media (max-width: 860px) {
	.karlinsky-landing .kl-split--rev > *:first-child { order: 0; }
}

/* ---------- Typography ---------- */
.karlinsky-landing .kl-h1,
.karlinsky-landing .kl-h2,
.karlinsky-landing .kl-h3 {
	font-family: var(--kl-serif);
	font-weight: 700;
	line-height: 1.13;
	text-wrap: balance;
}
.karlinsky-landing .kl-h1 { font-size: clamp(29px, 4.3vw, 60px); margin-block-end: 18px; }
.karlinsky-landing .kl-h1 span { display: block; }
.karlinsky-landing .kl-h2 { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.18; margin-block-end: 16px; }
.karlinsky-landing .kl-h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.22; margin-block-end: 10px; }

.karlinsky-landing .kl-lede {
	font-family: var(--kl-serif);
	font-size: clamp(19px, 1.7vw, 26px);
	line-height: 1.4;
	color: var(--kl-brown);
	margin-block-end: 16px;
}
.karlinsky-landing .kl-section--dark .kl-lede { color: var(--kl-gold-dark-bg); }

.karlinsky-landing .kl-body {
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.75;
	color: var(--kl-text-soft);
	text-wrap: pretty;
	margin-block-end: 14px;
}
.karlinsky-landing .kl-section--dark .kl-body { color: rgba(246, 238, 225, .82); }
.karlinsky-landing .kl-measure { max-width: 48ch; }

.karlinsky-landing .kl-note {
	font-size: 14px;
	color: var(--kl-text-weak);
	margin-block: 12px;
}
.karlinsky-landing .kl-section--dark .kl-note { color: rgba(246, 238, 225, .6); }

.karlinsky-landing .kl-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .2em;
	color: var(--kl-gold);
	margin-block-end: 14px;
}
.karlinsky-landing .kl-section--dark .kl-eyebrow { color: var(--kl-gold-dark-bg); }
.karlinsky-landing .kl-eyebrow-line {
	inline-size: 34px;
	block-size: 1px;
	background: var(--kl-gold-line);
	flex: none;
}

/* ---------- Buttons ---------- */
.karlinsky-landing .kl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 52px;
	padding: 15px 32px;
	border-radius: 2px;
	font-size: 17px;
	font-weight: 600;
	font-family: var(--kl-sans);
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.karlinsky-landing .kl-btn--primary {
	background: var(--kl-brown);
	color: var(--kl-bg-main);
	border: 1px solid var(--kl-brown);
}
.karlinsky-landing .kl-btn--primary:hover {
	background: var(--kl-espresso);
	border-color: var(--kl-espresso);
	color: var(--kl-bg-main);
}
.karlinsky-landing .kl-btn--outline {
	background: transparent;
	color: var(--kl-brown);
	border: 1px solid var(--kl-brown);
}
.karlinsky-landing .kl-btn--outline:hover { background: #F1E7D7; color: var(--kl-brown); }
.karlinsky-landing .kl-section--dark .kl-btn--outline {
	color: var(--kl-on-dark);
	border-color: rgba(246, 238, 225, .5);
}
.karlinsky-landing .kl-section--dark .kl-btn--outline:hover { background: rgba(246, 238, 225, .1); color: var(--kl-on-dark); }

.karlinsky-landing .kl-section-cta { margin-block: 22px 6px; }

.karlinsky-landing .kl-wa-link {
	display: inline-block;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-block-start: 14px;
}

/* ---------- Seasonal strip ---------- */
.karlinsky-landing .kl-seasonal {
	background: var(--kl-espresso);
	color: var(--kl-on-dark);
	font-size: 14px;
}
.karlinsky-landing .kl-seasonal-in {
	max-width: var(--kl-max);
	margin-inline: auto;
	padding: 9px var(--kl-pad-x);
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.karlinsky-landing .kl-seasonal-label { color: var(--kl-gold-dark-bg); font-weight: 600; letter-spacing: .04em; }
.karlinsky-landing .kl-seasonal-sep { color: rgba(246, 238, 225, .4); }
.karlinsky-landing .kl-seasonal-text { color: rgba(246, 238, 225, .85); }

.karlinsky-landing .kl-only-mobile { display: none; }
@media (max-width: 782px) {
	.karlinsky-landing .kl-only-desktop { display: none; }
	.karlinsky-landing .kl-only-mobile { display: inline; }
}

/* ---------- Header ---------- */
.karlinsky-landing .kl-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 40;
	background: rgba(251, 247, 240, .94);
	backdrop-filter: blur(10px);
	border-block-end: 1px solid var(--kl-border-strong);
}
.karlinsky-landing .kl-header-in {
	max-width: var(--kl-max);
	margin-inline: auto;
	padding-inline: var(--kl-pad-x);
	min-block-size: var(--kl-header-h);
	display: flex;
	align-items: center;
	gap: 22px;
}
.karlinsky-landing .kl-brand { display: flex; align-items: center; gap: 11px; flex: none; }
.karlinsky-landing .kl-brand-mark { inline-size: 46px; block-size: 46px; flex: none; }
.karlinsky-landing .kl-logo { inline-size: 46px; block-size: 46px; object-fit: contain; }
.karlinsky-landing .kl-logo-ph {
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border: 1px solid var(--kl-border-strong);
	background: var(--kl-bg-placeholder);
	font-size: 11px;
	color: var(--kl-text-weak);
}
.karlinsky-landing .kl-brand-name { display: block; font-family: var(--kl-serif); font-size: 23px; font-weight: 700; line-height: 1.1; color: var(--kl-text); }
.karlinsky-landing .kl-brand-sub { display: block; font-size: 11px; letter-spacing: .22em; color: var(--kl-gold-line); }

.karlinsky-landing .kl-nav { margin-inline-start: auto; }
.karlinsky-landing .kl-nav ul { display: flex; gap: 20px; }
.karlinsky-landing .kl-nav a { font-size: 16px; color: var(--kl-text); }
.karlinsky-landing .kl-nav a:hover { color: var(--kl-brown); }

.karlinsky-landing .kl-header-cta { display: flex; align-items: center; gap: 16px; flex: none; }
.karlinsky-landing .kl-header-phone { font-size: 16px; font-weight: 600; color: var(--kl-text); }
.karlinsky-landing .kl-header-cta .kl-btn { min-block-size: 44px; padding: 11px 22px; font-size: 16px; }

.karlinsky-landing .kl-burger { display: none; }

@media (max-width: 1080px) {
	.karlinsky-landing .kl-nav { display: none; }
	.karlinsky-landing .kl-header-cta { margin-inline-start: auto; }
}
@media (max-width: 782px) {
	.karlinsky-landing { --kl-header-h: 62px; }
	.karlinsky-landing .kl-brand-mark, .karlinsky-landing .kl-logo, .karlinsky-landing .kl-logo-ph { inline-size: 36px; block-size: 36px; }
	.karlinsky-landing .kl-brand-name { font-size: 19px; }
	.karlinsky-landing .kl-header-cta .kl-btn { display: none; }
	.karlinsky-landing .kl-burger {
		display: grid;
		gap: 4px;
		inline-size: 40px;
		block-size: 40px;
		place-content: center;
		background: none;
		border: 1px solid var(--kl-border-strong);
		border-radius: 2px;
		cursor: pointer;
	}
	.karlinsky-landing .kl-burger span { display: block; inline-size: 18px; block-size: 1.5px; background: var(--kl-text); }
}

.karlinsky-landing .kl-mobile-nav {
	border-block-start: 1px solid var(--kl-border-strong);
	background: var(--kl-bg-main);
	padding: 10px var(--kl-pad-x) 16px;
}
.karlinsky-landing .kl-mobile-nav ul { display: grid; }
.karlinsky-landing .kl-mobile-nav a {
	display: block;
	padding-block: 12px;
	font-size: 17px;
	color: var(--kl-text);
	border-block-end: 1px solid var(--kl-border);
}

/* ---------- Hero ---------- */
.karlinsky-landing .kl-hero {
	background: linear-gradient(180deg, #FBF7F0, #F6EEE1);
	padding-block: clamp(28px, 3.4vw, 80px);
}
.karlinsky-landing .kl-hero-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: var(--kl-gap);
	align-items: center;
}
.karlinsky-landing .kl-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 26px;
}
.karlinsky-landing .kl-hero-actions .kl-btn { padding: 17px 34px; }

.karlinsky-landing .kl-hero-points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-block-start: 26px;
	font-size: 14px;
	color: var(--kl-text-weak);
}
.karlinsky-landing .kl-hero-points li { position: relative; padding-inline-start: 14px; }
.karlinsky-landing .kl-hero-points li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .65em;
	inline-size: 5px;
	block-size: 5px;
	background: var(--kl-gold-line);
}

.karlinsky-landing .kl-hero-media {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
}
.karlinsky-landing .kl-hero-video {
	grid-row: span 2;
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--kl-espresso);
	border: 1px solid var(--kl-border);
	overflow: hidden;
}
.karlinsky-landing .kl-hero-video video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}
.karlinsky-landing .kl-hero-video-overlay {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 26px 16px 14px;
	background: linear-gradient(0deg, rgba(20, 12, 7, .78), transparent);
	color: var(--kl-on-dark);
	font-size: 13px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.karlinsky-landing .kl-hero-video-overlay a { color: var(--kl-gold-dark-bg); text-decoration: underline; text-underline-offset: 3px; }

.karlinsky-landing .kl-hero-img { border: 1px solid var(--kl-border); overflow: hidden; }
.karlinsky-landing .kl-hero-img img { aspect-ratio: 4 / 3; inline-size: 100%; object-fit: cover; }

@media (max-width: 782px) {
	.karlinsky-landing .kl-hero-grid { grid-template-columns: 1fr; }
	.karlinsky-landing .kl-hero-media { order: -1; grid-template-columns: 1fr; grid-template-rows: auto; }
	.karlinsky-landing .kl-hero-video { grid-row: auto; aspect-ratio: 4 / 5; }
	.karlinsky-landing .kl-hero-img { display: none; }
	.karlinsky-landing .kl-hero-actions .kl-btn { inline-size: 100%; }
	.karlinsky-landing .kl-lede { font-size: 19px; }
}

/* ---------- Entry cards + collage ---------- */
.karlinsky-landing .kl-entries-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--kl-gap);
}
.karlinsky-landing .kl-entry-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--kl-border-strong);
	background: var(--kl-bg-card);
	transition: border-color .18s ease;
}
.karlinsky-landing .kl-entry-card:hover { border-color: var(--kl-gold-line); }
.karlinsky-landing .kl-entry-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.karlinsky-landing .kl-entry-body .kl-btn { margin-block-start: auto; align-self: flex-start; }

.karlinsky-landing .kl-collage {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 3px;
	aspect-ratio: 16 / 10;
	background: var(--kl-bg-placeholder);
}
.karlinsky-landing .kl-collage-cell { overflow: hidden; min-inline-size: 0; min-block-size: 0; }
.karlinsky-landing .kl-collage-cell img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.karlinsky-landing .kl-collage-cell--0 { grid-row: span 2; }
.karlinsky-landing .kl-collage--static { aspect-ratio: 4 / 3; }

@media (max-width: 782px) {
	.karlinsky-landing .kl-collage { aspect-ratio: 16 / 9; }
}

/* ---------- Feature cards ---------- */
.karlinsky-landing .kl-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
	gap: 14px;
	margin-block-start: 34px;
}
.karlinsky-landing .kl-feature {
	background: var(--kl-bg-card);
	border: 1px solid var(--kl-border);
	padding: 18px 18px 20px;
}
.karlinsky-landing .kl-feature-t { font-family: var(--kl-serif); font-size: 19px; font-weight: 600; margin-block-end: 6px; }
.karlinsky-landing .kl-feature p { font-size: 15px; line-height: 1.65; color: var(--kl-text-soft); }

/* ---------- Chips ---------- */
.karlinsky-landing .kl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.karlinsky-landing .kl-chips li {
	font-size: 14px;
	padding: 6px 13px;
	border: 1px solid var(--kl-border-strong);
	background: var(--kl-bg-card);
	color: var(--kl-text-soft);
}
.karlinsky-landing .kl-section--dark .kl-chips li {
	background: rgba(246, 238, 225, .07);
	border-color: rgba(246, 238, 225, .22);
	color: rgba(246, 238, 225, .85);
}

/* ---------- Galleries ---------- */
.karlinsky-landing .kl-fig { margin: 0; break-inside: avoid; }
.karlinsky-landing .kl-fig-btn {
	display: block;
	inline-size: 100%;
	padding: 0;
	border: 1px solid var(--kl-border);
	background: var(--kl-bg-placeholder);
	cursor: zoom-in;
	transition: border-color .18s ease;
}
.karlinsky-landing .kl-fig-btn:hover { border-color: var(--kl-gold-line); }
.karlinsky-landing .kl-fig figcaption {
	font-size: 13px;
	color: var(--kl-text-weak);
	padding-block: 7px 2px;
	line-height: 1.45;
}

.karlinsky-landing .kl-gallery { margin-block-start: 20px; }

.karlinsky-landing .kl-gallery--masonry {
	columns: 4 230px;
	column-gap: 14px;
}
.karlinsky-landing .kl-gallery--masonry .kl-fig { margin-block-end: 14px; }

.karlinsky-landing .kl-gallery--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
	gap: 14px;
}
.karlinsky-landing .kl-gallery--grid .kl-fig-btn img { aspect-ratio: 1; inline-size: 100%; object-fit: cover; }

.karlinsky-landing .kl-gallery--works {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}
.karlinsky-landing .kl-gallery--works .kl-fig-btn img { aspect-ratio: 1; inline-size: 100%; object-fit: cover; }

.karlinsky-landing .kl-gallery--variety {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
	gap: 12px;
}
.karlinsky-landing .kl-gallery--variety .kl-fig-btn img { aspect-ratio: 1; inline-size: 100%; object-fit: cover; }

/* Mobile: horizontal scroll galleries, bleeding past the wrap padding */
@media (max-width: 782px) {
	.karlinsky-landing .kl-gallery--masonry,
	.karlinsky-landing .kl-gallery--grid,
	.karlinsky-landing .kl-gallery--works {
		display: flex;
		columns: auto;
		overflow-x: auto;
		gap: 10px;
		margin-inline: calc(var(--kl-pad-x) * -1);
		padding-inline: var(--kl-pad-x);
		padding-block-end: 6px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}
	.karlinsky-landing .kl-gallery--masonry .kl-fig,
	.karlinsky-landing .kl-gallery--grid .kl-fig,
	.karlinsky-landing .kl-gallery--works .kl-fig {
		flex: 0 0 auto;
		margin-block-end: 0;
		scroll-snap-align: start;
	}
	.karlinsky-landing .kl-gallery--grid .kl-fig,
	.karlinsky-landing .kl-gallery--variety { grid-template-columns: repeat(3, 1fr); }
}

/* Placeholder tile for the missing leather-swatch photo */
.karlinsky-landing .kl-placeholder {
	display: grid;
	place-content: center;
	text-align: center;
	gap: 4px;
	aspect-ratio: 1;
	border: 1px dashed var(--kl-gold-line);
	color: var(--kl-gold);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	line-height: 1.5;
	padding: 10px;
}
.karlinsky-landing .kl-placeholder-label { font-weight: 700; }

.karlinsky-landing .kl-img-missing {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--kl-bg-placeholder);
	border: 1px solid var(--kl-border);
}

/* ---------- Gifts (dark) ---------- */
.karlinsky-landing .kl-gift-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin-block-start: 30px;
}
.karlinsky-landing .kl-gift-card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(246, 238, 225, .14); }
.karlinsky-landing .kl-gift-card img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.karlinsky-landing .kl-gift-meta {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 40px 16px 16px;
	background: linear-gradient(0deg, rgba(20, 12, 7, .88), transparent);
}
.karlinsky-landing .kl-gift-meta h3 { font-family: var(--kl-serif); font-size: 24px; font-weight: 600; color: var(--kl-on-dark); line-height: 1.2; }
.karlinsky-landing .kl-gift-meta p { font-size: 14px; color: rgba(246, 238, 225, .78); margin-block-start: 4px; }
@media (max-width: 782px) {
	.karlinsky-landing .kl-gift-grid { grid-template-columns: 1fr 1fr; }
	.karlinsky-landing .kl-gift-meta h3 { font-size: 19px; }
}

/* ---------- Steps ---------- */
.karlinsky-landing .kl-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px;
	margin-block-start: 26px;
}
.karlinsky-landing .kl-step { border-block-start: 1px solid var(--kl-border-strong); padding-block-start: 16px; }
.karlinsky-landing .kl-step-n { font-family: var(--kl-serif); font-size: 34px; color: var(--kl-gold-step); display: block; line-height: 1; margin-block-end: 8px; }
.karlinsky-landing .kl-step-t { font-family: var(--kl-serif); font-size: 21px; font-weight: 600; margin-block-end: 6px; }
.karlinsky-landing .kl-step p { font-size: 16px; color: var(--kl-text-soft); line-height: 1.65; }

/* ---------- Video ---------- */
.karlinsky-landing .kl-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--kl-gap);
	margin-block-start: 26px;
	align-items: start;
}
.karlinsky-landing .kl-video-player { background: var(--kl-espresso); border: 1px solid var(--kl-border); }
.karlinsky-landing .kl-video-player video {
	inline-size: 100%;
	aspect-ratio: 9 / 16;
	max-block-size: 640px;
	object-fit: contain;
	display: block;
	margin-inline: auto;
}
.karlinsky-landing .kl-video-stills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.karlinsky-landing .kl-video-still { border: 1px solid var(--kl-border); overflow: hidden; }
.karlinsky-landing .kl-video-still img { aspect-ratio: 4 / 3; inline-size: 100%; object-fit: cover; }
@media (max-width: 782px) {
	.karlinsky-landing .kl-video-player video { max-block-size: 520px; }
}

/* ---------- Duo / stagger image pairs ---------- */
.karlinsky-landing .kl-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.karlinsky-landing .kl-duo > div { border: 1px solid var(--kl-border); overflow: hidden; }
.karlinsky-landing .kl-duo img { aspect-ratio: 4 / 3; inline-size: 100%; object-fit: cover; }

.karlinsky-landing .kl-stagger { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.karlinsky-landing .kl-stagger > div { border: 1px solid var(--kl-border); overflow: hidden; }
.karlinsky-landing .kl-stagger-b { margin-block-start: 30px; }
.karlinsky-landing .kl-stagger img { aspect-ratio: 3 / 4; inline-size: 100%; object-fit: cover; }

/* ---------- Projects list ---------- */
.karlinsky-landing .kl-projects { margin-block-start: 18px; display: grid; gap: 10px; }
.karlinsky-landing .kl-projects li {
	position: relative;
	padding-inline-start: 18px;
	font-size: 16px;
	color: var(--kl-text-soft);
	line-height: 1.6;
}
.karlinsky-landing .kl-projects li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .62em;
	inline-size: 7px;
	block-size: 1px;
	background: var(--kl-gold-line);
}

/* ---------- Store ---------- */
.karlinsky-landing .kl-store-meta { display: grid; gap: 6px; margin-block-start: 18px; font-size: 17px; }
.karlinsky-landing .kl-store-meta a { color: var(--kl-gold-dark-bg); font-weight: 600; }
.karlinsky-landing .kl-store-img { border: 1px solid rgba(246, 238, 225, .16); overflow: hidden; }
.karlinsky-landing .kl-store-img img { aspect-ratio: 16 / 10; inline-size: 100%; object-fit: cover; }

/* ---------- Form ---------- */
.karlinsky-landing .kl-form-section .kl-split { align-items: start; }
.karlinsky-landing .kl-form-phone-label { font-size: 15px; color: var(--kl-text-weak); margin-block-start: 26px; }
.karlinsky-landing .kl-form-phone {
	display: inline-block;
	font-family: var(--kl-serif);
	font-size: 26px;
	font-weight: 700;
	color: var(--kl-brown);
	margin-block-start: 4px;
}
.karlinsky-landing .kl-form-card {
	background: var(--kl-bg-main);
	border: 1px solid var(--kl-border-strong);
	padding: 26px 26px 22px;
}
.karlinsky-landing .kl-form-note { font-size: 13px; color: var(--kl-text-weak); margin-block-start: 14px; }
.karlinsky-landing .kl-form-missing { font-size: 14px; color: #8a2b2b; }

/* Elementor Pro form, restyled to match the page. Scoped to our card only. */
.karlinsky-landing .kl-form-card .elementor-field-group > label,
.karlinsky-landing .kl-form-card .elementor-field-subgroup label {
	font-family: var(--kl-sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--kl-text-soft);
	margin-block-end: 6px;
}
.karlinsky-landing .kl-form-card input[type="text"],
.karlinsky-landing .kl-form-card input[type="tel"],
.karlinsky-landing .kl-form-card input[type="email"],
.karlinsky-landing .kl-form-card select,
.karlinsky-landing .kl-form-card textarea {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 11px 13px;
	border: 1px solid var(--kl-border-strong);
	border-radius: 2px;
	background: var(--kl-bg-main);
	font-family: var(--kl-sans);
	font-size: 16px;
	color: var(--kl-text);
	box-shadow: none;
}
.karlinsky-landing .kl-form-card textarea { min-block-size: 96px; line-height: 1.6; }
.karlinsky-landing .kl-form-card input:focus,
.karlinsky-landing .kl-form-card select:focus,
.karlinsky-landing .kl-form-card textarea:focus {
	border-color: var(--kl-gold-line);
	outline: none;
}
.karlinsky-landing .kl-form-card .elementor-field-subgroup { display: grid; gap: 6px; }
.karlinsky-landing .kl-form-card .elementor-field-option label { font-size: 16px; color: var(--kl-text); }
.karlinsky-landing .kl-form-card .elementor-button,
.karlinsky-landing .kl-form-card button[type="submit"] {
	inline-size: 100%;
	min-block-size: 52px;
	background: var(--kl-brown);
	color: var(--kl-bg-main);
	border: 1px solid var(--kl-brown);
	border-radius: 2px;
	font-family: var(--kl-sans);
	font-size: 17px;
	font-weight: 600;
}
.karlinsky-landing .kl-form-card .elementor-button:hover { background: var(--kl-espresso); border-color: var(--kl-espresso); }
.karlinsky-landing .kl-form-card .e-form__buttons { gap: 10px; }
.karlinsky-landing .kl-form-card .e-form__indicators__indicator {
	block-size: 2px;
	background: rgba(42, 28, 19, .18);
	border-radius: 0;
}
.karlinsky-landing .kl-form-card .e-form__indicators__indicator--state-active,
.karlinsky-landing .kl-form-card .e-form__indicators__indicator--state-completed { background: var(--kl-brown); }
.karlinsky-landing .kl-form-card .elementor-message { font-size: 15px; font-family: var(--kl-sans); }
.karlinsky-landing .kl-form-card .elementor-message-success { color: var(--kl-brown); }

/* ---------- FAQ ---------- */
.karlinsky-landing .kl-faq { display: grid; gap: 2px; margin-block-start: 22px; }
.karlinsky-landing .kl-faq-item { background: var(--kl-bg-card); border: 1px solid var(--kl-border); }
.karlinsky-landing .kl-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 18px;
	font-family: var(--kl-serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
}
.karlinsky-landing .kl-faq-item summary::-webkit-details-marker { display: none; }
.karlinsky-landing .kl-faq-item summary::after {
	content: "+";
	color: var(--kl-gold-line);
	font-family: var(--kl-sans);
	font-size: 22px;
	line-height: 1;
	flex: none;
}
.karlinsky-landing .kl-faq-item[open] summary::after { content: "–"; }
.karlinsky-landing .kl-faq-a { padding: 0 18px 18px; }
.karlinsky-landing .kl-faq-a p { font-size: 17px; line-height: 1.8; color: var(--kl-text-soft); }

/* ---------- Footer ---------- */
.karlinsky-landing .kl-footer {
	background: var(--kl-dark);
	color: rgba(246, 238, 225, .75);
	padding-block: clamp(32px, 3.4vw, 56px);
	font-size: 15px;
}
.karlinsky-landing .kl-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 26px;
}
.karlinsky-landing .kl-footer a { color: rgba(246, 238, 225, .78); }
.karlinsky-landing .kl-footer a:hover { color: var(--kl-gold-dark-bg); }
.karlinsky-landing .kl-footer-brand { font-family: var(--kl-serif); font-size: 22px; color: var(--kl-on-dark); }
.karlinsky-landing .kl-footer-brand span { display: block; font-family: var(--kl-sans); font-size: 11px; letter-spacing: .22em; color: var(--kl-gold-dark-bg); }
.karlinsky-landing .kl-footer-legal { margin-block-start: 8px; font-size: 13px; color: rgba(246, 238, 225, .55); }
.karlinsky-landing .kl-footer-nav { display: grid; gap: 7px; }

/* ---------- Sticky mobile CTA ---------- */
.karlinsky-landing .kl-sticky { display: none; }
@media (max-width: 782px) {
	.karlinsky-landing .kl-sticky {
		position: sticky;
		inset-block-end: 0;
		z-index: 35;
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		gap: 10px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: rgba(251, 247, 240, .96);
		backdrop-filter: blur(10px);
		border-block-start: 1px solid var(--kl-border-strong);
	}
	.karlinsky-landing .kl-sticky a {
		display: grid;
		place-items: center;
		min-block-size: 52px;
		border-radius: 2px;
		font-size: 17px;
		font-weight: 600;
	}
	.karlinsky-landing .kl-sticky-primary { background: var(--kl-brown); color: var(--kl-bg-main); }
	.karlinsky-landing .kl-sticky-secondary { background: var(--kl-bg-main); color: var(--kl-brown); border: 1px solid var(--kl-brown); }
}

/* ---------- Lightbox ---------- */
.karlinsky-landing .kl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	background: rgba(20, 12, 7, .9);
	cursor: zoom-out;
}
.karlinsky-landing .kl-lightbox[hidden] { display: none; }
.karlinsky-landing .kl-lightbox-img {
	max-inline-size: 92%;
	max-block-size: 88%;
	object-fit: contain;
	cursor: default;
}
.karlinsky-landing .kl-lightbox-close {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-end: 20px;
	inline-size: 46px;
	block-size: 46px;
	background: none;
	border: 1px solid rgba(246, 238, 225, .4);
	border-radius: 2px;
	color: var(--kl-on-dark);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.karlinsky-landing .kl-lightbox-close:hover { border-color: var(--kl-gold-dark-bg); color: var(--kl-gold-dark-bg); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.karlinsky-landing * { animation: none !important; transition: none !important; }
}


/* ---- KL-FIX-1.1.1 ---------------------------------------------------
   1. Headings carried no explicit colour, so the theme's own h2 rule
      beat the inherited colour and rendered dark-on-dark in the two
      dark sections. 2. Form buttons were forced full width and stacked.
   3. Step indicator was unstyled default Elementor.
   ------------------------------------------------------------------ */
.karlinsky-landing .kl-h1,
.karlinsky-landing .kl-h2,
.karlinsky-landing .kl-h3 { color: var(--kl-text); }

.karlinsky-landing .kl-section--dark .kl-h1,
.karlinsky-landing .kl-section--dark .kl-h2,
.karlinsky-landing .kl-section--dark .kl-h3,
.karlinsky-landing .kl-section--dark .kl-feature-t,
.karlinsky-landing .kl-section--dark .kl-step-t { color: var(--kl-on-dark); }

.karlinsky-landing .kl-section--dark .kl-store-meta { color: rgba(246,238,225,.88); }

.karlinsky-landing .kl-form-card textarea { resize: vertical; }

.karlinsky-landing .kl-form-card .elementor-button,
.karlinsky-landing .kl-form-card button[type="submit"] { inline-size: auto; padding-inline: 26px; }

.karlinsky-landing .kl-form-card .e-form__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 6px; }
.karlinsky-landing .kl-form-card .e-form__buttons__wrapper { display: flex; gap: 10px; flex: 1; }
.karlinsky-landing .kl-form-card .elementor-field-type-submit { flex: 1 1 60%; }
.karlinsky-landing .kl-form-card .elementor-field-type-submit .elementor-button,
.karlinsky-landing .kl-form-card .e-form__buttons__wrapper__button-next { inline-size: 100%; }

.karlinsky-landing .kl-form-card .e-form__buttons__wrapper__button-previous { flex: 0 1 auto; background: transparent; color: var(--kl-brown); border: 1px solid var(--kl-brown); }
.karlinsky-landing .kl-form-card .e-form__buttons__wrapper__button-previous:hover { background: #F1E7D7; color: var(--kl-brown); }

.karlinsky-landing .kl-form-card .e-form__indicators { margin-block-end: 20px; gap: 6px; }
.karlinsky-landing .kl-form-card .e-form__indicators__indicator__progress { background: rgba(42,28,19,.12); border-radius: 0; block-size: 22px; }
.karlinsky-landing .kl-form-card .e-form__indicators__indicator__progress__meter { background: var(--kl-brown); color: var(--kl-bg-main); font-family: var(--kl-sans); font-size: 12px; font-weight: 600; padding-inline-end: 8px; }


/* ---- KL-FIX-1.1.2 ---------------------------------------------------
   The entry-card collages rendered at different heights: aspect-ratio
   yields to content unless the box is allowed to shrink, and the
   portrait siddur shots pushed their grid rows taller than the
   landscape machzor ones. Locking the box makes both cards match and
   removes the dead space under the shorter card's text.
   ------------------------------------------------------------------ */
.karlinsky-landing .kl-collage {
	min-block-size: 0;
	overflow: hidden;
	align-items: stretch;
}
.karlinsky-landing .kl-collage-cell {
	min-block-size: 0;
	min-inline-size: 0;
	overflow: hidden;
}
.karlinsky-landing .kl-collage-cell img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Tighten the card body so a shorter blurb doesn't open a gap. */
.karlinsky-landing .kl-entry-body { gap: 10px; padding-block-end: 24px; }
.karlinsky-landing .kl-entry-body .kl-body { margin-block-end: 4px; }
.karlinsky-landing .kl-entry-body .kl-btn { margin-block-start: 14px; }


/* ---- KL-FIX-1.1.3 ---------------------------------------------------
   With the four stills hidden, the process video is alone in its row.
   Centre it and cap the width so it doesn't stretch across the page.
   ------------------------------------------------------------------ */
.karlinsky-landing .kl-video-grid:not(:has(.kl-video-stills)) {
	grid-template-columns: minmax(0, 520px);
	justify-content: center;
}


/* ---- KL-FIX-1.1.5 ---------------------------------------------------
   Mobile galleries were horizontal scrollers, which hid most of the
   work behind a swipe. They now stack down the page: masonry keeps its
   natural image proportions in two columns, the square grids become a
   two-up grid. Also stops the split-layout collages overflowing the
   viewport on narrow screens.
   ------------------------------------------------------------------ */
@media (max-width: 782px) {

	.karlinsky-landing .kl-gallery--masonry {
		display: block;
		columns: 2 auto;
		column-gap: 10px;
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
		scroll-snap-type: none;
	}
	.karlinsky-landing .kl-gallery--masonry .kl-fig {
		inline-size: auto;
		margin-block-end: 10px;
		break-inside: avoid;
	}
	.karlinsky-landing .kl-gallery--masonry .kl-fig-btn img {
		aspect-ratio: auto;
		block-size: auto;
		object-fit: contain;
	}

	.karlinsky-landing .kl-gallery--grid,
	.karlinsky-landing .kl-gallery--works {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
		scroll-snap-type: none;
	}
	.karlinsky-landing .kl-gallery--grid .kl-fig,
	.karlinsky-landing .kl-gallery--works .kl-fig {
		inline-size: auto;
		min-inline-size: 0;
	}

	.karlinsky-landing .kl-split > * { min-inline-size: 0; }
	.karlinsky-landing .kl-collage { max-inline-size: 100%; }
}


/* ---- KL-FIX-1.1.6 ---------------------------------------------------
   No sideways scrolling anywhere on mobile. Everything stacks and
   flows down the page instead. Catch-all: kills any leftover
   horizontal scroller, forces flex rows to wrap, and stops long
   strings or wide media pushing the viewport wider than the screen.
   ------------------------------------------------------------------ */
@media (max-width: 782px) {

	/* Nothing inside the landing page may scroll sideways. */
	.karlinsky-landing,
	.karlinsky-landing * {
		max-inline-size: 100%;
	}
	.karlinsky-landing [class*="kl-"]:not(.kl-header):not(.kl-header-in):not(.kl-mobile-nav):not(.kl-sticky) {
		overflow-x: clip;
		scroll-snap-type: none;
	}

	/* Flex rows wrap instead of running off the edge. */
	.karlinsky-landing .kl-gallery,
	.karlinsky-landing .kl-chips,
	.karlinsky-landing .kl-hero-actions,
	.karlinsky-landing .kl-hero-points,
	.karlinsky-landing .kl-seasonal-in,
	.karlinsky-landing .kl-header-in,
	.karlinsky-landing .kl-form-card .e-form__buttons {
		flex-wrap: wrap;
	}

	/* Grids never exceed their column. */
	.karlinsky-landing .kl-split,
	.karlinsky-landing .kl-entries-grid,
	.karlinsky-landing .kl-features,
	.karlinsky-landing .kl-steps,
	.karlinsky-landing .kl-video-grid,
	.karlinsky-landing .kl-footer-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.karlinsky-landing .kl-split > *,
	.karlinsky-landing .kl-duo > *,
	.karlinsky-landing .kl-stagger > *,
	.karlinsky-landing .kl-collage-cell {
		min-inline-size: 0;
	}

	/* Long words and URLs can't widen the page. */
	.karlinsky-landing h1,
	.karlinsky-landing h2,
	.karlinsky-landing h3,
	.karlinsky-landing p,
	.karlinsky-landing a,
	.karlinsky-landing li {
		overflow-wrap: break-word;
	}

	/* Media stays inside its box. */
	.karlinsky-landing img,
	.karlinsky-landing video,
	.karlinsky-landing iframe {
		max-inline-size: 100%;
	}

	/* Elementor form fields must not overflow the card. */
	.karlinsky-landing .kl-form-card input,
	.karlinsky-landing .kl-form-card select,
	.karlinsky-landing .kl-form-card textarea {
		max-inline-size: 100%;
	}
}


/* ---- KL-FIX-1.2.0 ---------------------------------------------------
   Typography now matches the rest of the site: DIDA for the display
   headline, RAG for headings and body. These are the faces the theme
   already loads, so the Google Fonts request has been dropped.
   Sizes stay on the landing page's own scale — the site's 90px H1
   would break the layout here.
   ------------------------------------------------------------------ */
.karlinsky-landing {
	--kl-serif: 'DIDA', 'RAG', Georgia, serif;
	--kl-sans: 'RAG', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* DIDA is a display face: only the hero headline and section titles. */
.karlinsky-landing .kl-h1 { font-family: 'DIDA', 'RAG', Georgia, serif; }
.karlinsky-landing .kl-h2,
.karlinsky-landing .kl-h3,
.karlinsky-landing .kl-lede,
.karlinsky-landing .kl-feature-t,
.karlinsky-landing .kl-step-t,
.karlinsky-landing .kl-gift-meta h3,
.karlinsky-landing .kl-faq-item summary,
.karlinsky-landing .kl-brand-name,
.karlinsky-landing .kl-footer-brand,
.karlinsky-landing .kl-form-phone,
.karlinsky-landing .kl-step-n {
	font-family: 'RAG', Georgia, serif;
}

/* Logo images. */
.karlinsky-landing .kl-logo { inline-size: auto; block-size: 44px; object-fit: contain; }
.karlinsky-landing .kl-brand-mark { inline-size: auto; }
.karlinsky-landing .kl-footer-logo { inline-size: auto; block-size: 52px; object-fit: contain; margin-block-end: 12px; }
@media (max-width: 782px) {
	.karlinsky-landing .kl-logo { block-size: 34px; }
	.karlinsky-landing .kl-footer-logo { block-size: 42px; }
}


/* ---- KL-FIX-1.2.1 ---------------------------------------------------
   The logo already carries the wordmark, so the adjacent text was a
   duplicate. It is hidden visually but stays in the DOM for screen
   readers and search engines. The mark gets slightly more height now
   that it stands on its own.
   ------------------------------------------------------------------ */
.karlinsky-landing .kl-brand-text[hidden],
.karlinsky-landing .kl-footer-brand[hidden] {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	display: block;
}

.karlinsky-landing .kl-logo { block-size: 52px; }
.karlinsky-landing .kl-footer-logo { block-size: 58px; }
@media (max-width: 782px) {
	.karlinsky-landing .kl-logo { block-size: 38px; }
	.karlinsky-landing .kl-footer-logo { block-size: 46px; }
}


/* ---- KL-FIX-1.2.2 ---------------------------------------------------
   The logo was clipped: .kl-brand-mark kept its original fixed 46px
   box while the image inside grew to 52px, and the header row had no
   room to breathe. The wrapper now sizes to its content and the
   header min-height accounts for the mark plus padding.
   ------------------------------------------------------------------ */
.karlinsky-landing .kl-brand-mark {
	inline-size: auto;
	block-size: auto;
	display: flex;
	align-items: center;
	overflow: visible;
}

.karlinsky-landing .kl-brand {
	align-items: center;
	padding-block: 6px;
	overflow: visible;
}

.karlinsky-landing .kl-logo {
	inline-size: auto;
	block-size: 46px;
	max-block-size: none;
	object-fit: contain;
	display: block;
}

/* Header needs to be tall enough for the mark plus its padding. */
.karlinsky-landing { --kl-header-h: 82px; }
.karlinsky-landing .kl-header-in { overflow: visible; }

.karlinsky-landing .kl-footer-logo {
	inline-size: auto;
	block-size: 54px;
	max-block-size: none;
	object-fit: contain;
	display: block;
	margin-block-end: 14px;
}

@media (max-width: 782px) {
	.karlinsky-landing { --kl-header-h: 66px; }
	.karlinsky-landing .kl-logo { block-size: 36px; }
	.karlinsky-landing .kl-footer-logo { block-size: 44px; }
}


/* ---- KL-FIX-1.2.5 ---------------------------------------------------
   The logo was not clipped by CSS at all: WordPress was serving the
   150x150 square thumbnail, which is a hard crop of a 2229x1068
   wordmark. The template now requests an uncropped size. This block
   is the single source of truth for logo sizing and supersedes every
   earlier attempt above.
   ------------------------------------------------------------------ */
.karlinsky-landing .kl-brand {
	display: flex;
	align-items: center;
	flex: none;
	padding-block: 8px;
	overflow: visible;
}

.karlinsky-landing .kl-brand-mark {
	inline-size: auto;
	block-size: auto;
	max-inline-size: none;
	display: flex;
	align-items: center;
	overflow: visible;
	flex: none;
}

.karlinsky-landing .kl-logo {
	inline-size: auto;
	block-size: 44px;
	max-inline-size: none;
	max-block-size: none;
	min-inline-size: 0;
	object-fit: contain;
	display: block;
	aspect-ratio: auto;
}

.karlinsky-landing .kl-footer-logo {
	inline-size: auto;
	block-size: 52px;
	max-inline-size: none;
	max-block-size: none;
	object-fit: contain;
	display: block;
	margin-block-end: 14px;
}

.karlinsky-landing { --kl-header-h: 76px; }

@media (max-width: 782px) {
	.karlinsky-landing { --kl-header-h: 62px; }
	.karlinsky-landing .kl-logo { block-size: 34px; }
	.karlinsky-landing .kl-footer-logo { block-size: 42px; }
}


/* ---- KL-FIX-1.2.6 ---------------------------------------------------
   Root cause of the sticky header, confirmed by DevTools:
   Elementor's global kit (post-14.css) sets overflow-x: hidden on
   html and body. A single-axis overflow forces the other axis to
   'auto', so body becomes its own scrollport - one that never
   scrolls, since the real scrolling happens on html. The header was
   sticking to a box that never moves.
   Measured on this page: scrollWidth === clientWidth, so there is no
   horizontal overflow to contain and the rule serves no purpose here.
   Scoped to the landing page body class only - the rest of the site
   keeps Elementor's rule untouched.
   ------------------------------------------------------------------ */
html:has(body.kl-landing-page),
body.kl-landing-page {
	overflow-x: visible !important;
	overflow-y: visible !important;
}

/* Sideways overflow is contained per section instead. */
.karlinsky-landing .kl-section,
.karlinsky-landing .kl-hero,
.karlinsky-landing .kl-footer,
.karlinsky-landing .kl-seasonal {
	overflow-x: clip;
}

/* The one and only header rule. */
.karlinsky-landing .kl-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	inset-block-start: 0;
	z-index: 60;
	overflow: visible;
	background: rgba(251, 247, 240, .94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-block-end: 1px solid var(--kl-border-strong);
}


/* ---- KL-FIX-1.2.7 ---------------------------------------------------
   The sticky header stuck to viewport top 0, which sits underneath
   the WordPress admin bar for logged-in users, clipping the logo.
   Offset by the admin bar height when it is present. Logged-out
   visitors are unaffected. Also gives the header a little more
   breathing room so the wordmark never touches the edge.
   ------------------------------------------------------------------ */
body.admin-bar .karlinsky-landing .kl-header {
	top: 32px;
	inset-block-start: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .karlinsky-landing .kl-header {
		top: 46px;
		inset-block-start: 46px;
	}
}

/* Anchor targets must clear the sticky header plus the admin bar. */
body.admin-bar .karlinsky-landing [id] {
	scroll-margin-top: calc(var(--kl-header-h) + 32px + 18px);
}

/* A touch more vertical room around the mark. */
.karlinsky-landing .kl-header-in {
	padding-block: 6px;
	align-items: center;
}
.karlinsky-landing .kl-brand { padding-block: 4px; }




/* ---- KL-FIX-1.3.3 ---------------------------------------------------
   Masonry images now carry their true aspect-ratio inline from PHP,
   so CSS must not override it. Size containment is switched off so an
   unloaded image cannot reserve WordPress's 1500px placeholder.
   ------------------------------------------------------------------ */
.karlinsky-landing .kl-gallery img {
	contain: none !important;
	contain-intrinsic-size: auto !important;
	content-visibility: visible !important;
}

@media (max-width: 782px) {
	.karlinsky-landing .kl-gallery--masonry {
		display: block;
		columns: 2 auto;
		column-gap: 10px;
	}
	.karlinsky-landing .kl-gallery--masonry .kl-fig {
		display: inline-block;
		width: 100%;
		margin: 0 0 10px;
		break-inside: avoid;
	}
	.karlinsky-landing .kl-gallery--masonry .kl-fig-btn img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	.karlinsky-landing .kl-gallery--grid .kl-fig-btn img,
	.karlinsky-landing .kl-gallery--works .kl-fig-btn img {
		aspect-ratio: 1 !important;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}


/* ---- KL-FIX-1.4.0 ---------------------------------------------------
   Anchor targets landed on empty space: the id sits on the <section>,
   which opens with up to 94px of padding before the heading. JS now
   scrolls to the heading and measures the header live. These rules are
   the no-JS fallback, plus a single authoritative header height —
   --kl-header-h had been redefined five times with conflicting values.
   ------------------------------------------------------------------ */
.karlinsky-landing { --kl-header-h: 76px; }
@media (max-width: 782px) {
	.karlinsky-landing { --kl-header-h: 64px; }
}

.karlinsky-landing [id] {
	scroll-margin-top: calc(var(--kl-header-h) + 16px);
}
body.admin-bar .karlinsky-landing [id] {
	scroll-margin-top: calc(var(--kl-header-h) + 32px + 16px);
}
@media screen and (max-width: 782px) {
	body.admin-bar .karlinsky-landing [id] {
		scroll-margin-top: calc(var(--kl-header-h) + 46px + 16px);
	}
}